Not getting any response after loading models

[Mahdi-hssan]

I am stuck in loading models using reactJs neither .then or .catch return a result This is my full code:

import './App.css'; import React, { useEffect, useRef, useState } from 'react'; import * as faceapi from '@vladmandic/face-api'; const modelPath = "../node_modules/@vladmandic/face-api/model/"

function App() { const [stream, setStream] = useState(); const myVideo = useRef(); const canvasRef = useRef();

useEffect(() => { const loadModels = () => { Promise.all([ faceapi.nets.tinyFaceDetector.loadFromDisk(modelPath), faceapi.nets.faceLandmark68Net.loadFromDisk(modelPath), faceapi.nets.faceRecognitionNet.loadFromDisk(modelPath), faceapi.nets.faceExpressionNet.loadFromDisk(modelPath) ]).then(checkVideo()) .catch((err) => console.log("err : ", err)) } }, [])

function checkVideo() { navigator.mediaDevices .getUserMedia({ video: true, audio: true }) .then((stream) => { setStream(stream); myVideo.current.srcObject = stream; }); }

return ( <> hey <video crossOrigin='anonymous' playsInline muted ref={myVideo} width={"720"} height={"560"} autoPlay /> <canvas ref={canvasRef} width={"720"} height={"560"} /> </> ); }

export default App;

[vladmandic]

Not getting any response after loading models

are you sure models are actually getting loaded? what does browser inspector window show? console output as well as network tabs.

neither .then or .catch return a result

i'm pretty sure browser inspector will show something.

one thing that doesn't make sense is you're using loadFromDisk method to load models, but this is ReactJS? loadFromDisk is intended for NodeJS environment - by definition no browser has access to local file system - only way to load models is using http request.

[Mahdi-hssan]

I just read about loadFromDisk and i changed my code to this : useEffect(() => { setLoadModels(() => { Promise.all([ faceapi.nets.tinyFaceDetector.loadFromUri('./model'), faceapi.nets.faceLandmark68Net.loadFromUri('./model'), faceapi.nets.faceRecognitionNet.loadFromUri("./model"), faceapi.nets.faceExpressionNet.loadFromUri("./model") ]).then(checkVideo()) .catch((err) => console.log("err : ", err)) }) }, [])

console showing : err : SyntaxError: Unexpected token < in JSON at position 0

thank you in advance

[Mahdi-hssan]

okey so .then worked because checkVideo function is working but I still get Error: TinyYolov2 - load model before inference so the models still not loading properly. its blocked

[vladmandic]

first, tinyyolo is present mostly for historical reasons, ssd is better in almost everything. second, browser clearly reports issue - blocked - you need to investigate that.

SyntaxError: Unexpected token < in JSON at position 0

and this pretty much means that your web server is not serving json and bin files correctly. i have no idea what your dev environment is, but typically next/react only allow static files in /public folder by default, anything else you need to reconfigure your react server.

[Mahdi-hssan]

Thank you for the help it worked when I deleted the browser cache. Thank you so much for your assistance. I sincerely appreciate your help and your contribution to open source.