Using DNN model in React App using OpenCV.js

,
1

Hey folks,

I am trying to replicate the object detection example in a React app, but am not able to load a model properly.
Here is my code:

export default function Segmenter() {

    useEffect(() => {
        cv['onRuntimeInitialized'] = () => {
            console.log(`OpenCV init done.`);
        }
    }, [])

    const onClick = async () => {
        const modelPathInput = document.getElementById("modelPath");
        const configPathInput = document.getElementById("configPath");
        let modelPath = modelPathInput.value;
        let configPath = configPathInput.value;
        console.log(modelPath, configPath);
        const netDet = cv.readNetFromCaffe(configPath, modelPath);
    }

    return <div>
        <p>Segmenter</p>
        <img id="imageInput" src='face.png'></img>
        <br></br>
        Model
        <input id="modelPath" type="file"></input>
        Config
        <input id="configPath" type="file"></input>
        <button onClick={onClick}>load model</button>
    </div>
}

And here is te Error I am getting

image
image1046×1402 205 KB

I tried to use a lot of different apporaches, inlcuding loading via cv.readNet() and in node.js instead of react, with nothing helping.

Any suggestions on how to proceed or how to troubleshoot?

Thanks a lot in advance! :slight_smile: