How can I use image drag-drop (or upload) like in teachable machine site instead of just webcam feed?

[myozinaung]

How can I use image drag-drop (or upload) like in teachable machine site instead of just webcam feed?

[jfdesrochers]

The predict method not only accepts a Webcam object as parameter but also an Image element or a Canvas element. So it's just a matter of handling the file input or drop and passing it to an image element:

// Assuming that you already have a File Input or Drop event that can pass a file to the
// following function
function loadImage(file) {
    const reader = new FileReader();
    reader.onloadend = function () {
        const img = new Image();
        img.onload = async function () {
            // Assuming that you have already loaded the model as in the example
            const prediction = await model.predict(img);
            // Do something with prediction
        }
        img.src = reader.result;
    }
    reader.readAsDataURL(file)
}

[hapticdata]

hi, not exactly sure what you are asking, but if you mean on your own site you can look into the web's FileReader API and InputElement with type="file"

[duc2k1]

Thanks jfdesrochers very much, you save my life <3