CODEWITHSUNDEEP
dropzone.jstensorflow.js
Charles McKelvey
Charles McKelvey

Reputation: 73

Loading an image from Dropzone.js into Tensorflow.js

Currently, we are having an issue where we need to allow a user to drop an image into the initial landing page, then when they press the Identify! button, it takes the image that is currently in the dropped image location and then throw it into the model to then be predicted.

The issue currently is figuring out how to put the image that has just been thrown into the Dropzone to be processed and then put into our model for prediction. 

let identify = document.querySelector('.identify')
if (identify) {
    identify.addEventListener('click', event => {
        event.preventDefault()
        let user_pic = document.querySelector('.dz-image').children[0].src
        ...
        const prediction = model.predict(user_pic)
        console.log('This is your prediction: ', prediction)
    })
}

What is happening is that the console is saying: Uncaught TypeError: model.predict is not a function at HTMLDivElement.<anonymous>

Which doesn't make sense as we have the CDN Tensorflow tag in our template, so it should work appropriately.

Upvotes: 1

Views: 57

Answers (1)

edkeveked
edkeveked

Reputation: 18381

You need to use await since loading the model is an asynchronous operation

const model = await tf.loadLayersModel('model_json')

Upvotes: 0

Related Questions