I'm trying to create a react app facial recognition app using face-api.js but no matter what I do I get the error that the model doesnt load

Question

I have a shard and JSON file in my public/model and this is how I'm calling them:

 await Promise.all([
          faceapi.nets.tinyFaceDetector.loadFromUri('../public/models'),
          faceapi.nets.faceLandmark68Net.loadFromUri('../public/models'),
          faceapi.nets.faceRecognitionNet.loadFromUri('../public/models'),
        ]); 

Can anyone please help me figuring out what I'm doing wrong here?

Answer 1

when loading static resources, you need to ensure that you're using the correct path relative to where your entry point HTML(let's say index.html) file is located.I mean; if your entry point is also in public folder, your code should look like something below:

await Promise.all([
  faceapi.nets.tinyFaceDetector.loadFromUri('/models'),
  faceapi.nets.faceLandmark68Net.loadFromUri('/models'),
  faceapi.nets.faceRecognitionNet.loadFromUri('/models'),
]);