# Using DNN model in React App using OpenCV.js

**URL:** https://forum.opencv.org/t/using-dnn-model-in-react-app-using-opencv-js/14584
**Category:** Uncategorized
**Tags:** dnn, opencvjs
**Created:** [September 18, 2023, 3:44pm UTC](https://forum.opencv.org/t/using-dnn-model-in-react-app-using-opencv-js/14584 "2023-09-18T15:44:05Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![moritz](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.opencv.org/moritz/32/8756_2.png) [@moritz](https://forum.opencv.org/u/moritz)
#### Post date: [September 18, 2023, 3:44pm UTC](https://forum.opencv.org/t/using-dnn-model-in-react-app-using-opencv-js/14584/1 "2023-09-18T15:44:05Z")

</div>

Hey folks,

I am trying to replicate the [object detection example](https://docs.opencv.org/3.4/d0/d0f/tutorial_js_object_detection.html) in a React app, but am not able to load a model properly.  
Here is my code:

```auto
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](https://us1.discourse-cdn.com/flex020/uploads/opencv/original/2X/8/8393eb691339f0f02c834aff87231ea1d3a6a14d.png)

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! 🙂