Simply loading a dnn model via OpenCV.js

,
1

Hey nice people,

I am still struggling with simply loading a dnn model via opencv.js.

Here is my code:

const configPath = "model/deploy.prototxt"
const modelPath = "model/mobilenet_iter_73000.caffemodel"

loadmodel = async function () {
    let net = cv.readNet(configPath, modelPath);
}

And I get:

image
image1212×310 32.5 KB

I also tried cv.readNetFromCaffe and cv.readNetFromCaffe1.
I am using opencv.js version 4.8.0 and the model files work fine on the tutorial page.

Any hints or tips, on what I could do differently?

Thanks,
Mo

Edit: I also tried with getting the file paths from input fields.

2

your local file system is generally not accessible from javascript.

3

Thanks for the answer. But how can I load a model then? And how is one supposed to implement the example then?
As written, I already tried to get the paths from input fields…

4

<input> elements don’t contain paths. they contain references to files.

please browse the actual source of the example page for how that is done.

5

Got it working now, :partying_face: with the following code (in case someone got the same problem):

loadModel = async function (e) {
    return new Promise((resolve) => {
        let file = e.target.files[0];
        let path = file.name;
        let reader = new FileReader();
        reader.readAsArrayBuffer(file);
        reader.onload = function (ev) {
            if (reader.readyState === 2) {
                let buffer = reader.result;
                let data = new Uint8Array(buffer);
                cv.FS_createDataFile('/', path, data, true, false, false);
                resolve(path);
            }
        }
    });
}

configPathInput.addEventListener('change', async (e) => {
            configPath = await loadModel(e);
            console.log(typeof configPath);
            console.log(configPath);
        });

modelPathInput.addEventListener('change', async (e) => {
            modelPath = await loadModel(e);
            console.log(typeof modelPath);
            console.log(modelPath);
        });

rerunButton.addEventListener('click', async (e) => {
            let net = cv.readNet(configPath, modelPath);
            console.log(net);
        }, false);

I don’t really get what’s going on tbh, but nice that it is working now. Coming from python, the file handling in JS is very different and difficult to comprehend.
Any advice on how to proceed to load the files straight from disk without having to use input fields? Do I have to use Blobs or something?

(Thanks for guiding the novice here :slight_smile: )