Error while loading models of Face-api.js

Question

code:

const loadModels = async () => {
  try {
    await Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri("/models"),
      faceapi.nets.faceLandmark68Net.loadFromUri("/models"),
      faceapi.nets.faceRecognitionNet.loadFromUri("/models"),
      faceapi.nets.faceExpressionNet.loadFromUri("/models"),
    ])
      .then((res) => {
        console.log("FaceDetecting");
        faceMyDetect();
      })
      .catch((err) => {
        console.log("errSomething");
        console.log(err);
      });
  } catch (err) {
    console.log(err);
  }
};

Error:

errSomething
 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

I face the error while calling the APIs inside the promise all. However when I checked my network tab in inspect. all four APIs returned 304 green success statuses. I don't know what might be the problem.

the location where I called face-api.js is D:\newLeaf\crowd\src\components\register.js location, where I stored the models, is D:\newLeaf\crowd\public\models

Answer 1

It seem server returns an HTML error page instead of the expected data format. Server is not correctly serving the model files. You need to ensure that you're using the correct path for models. In your case (your entry point is in '/src/components' folder) correct loadModel function should be something like that:

const loadModels = async () => {
  try {
    await Promise.all([
      faceapi.nets.tinyFaceDetector.loadFromUri("../../public/models"),
      faceapi.nets.faceLandmark68Net.loadFromUri("../../public/models"),
      faceapi.nets.faceRecognitionNet.loadFromUri("../../public/models"),
      faceapi.nets.faceExpressionNet.loadFromUri("../../public/models"),
    ])
      .then((res) => {
        console.log("FaceDetecting");
        faceMyDetect();
      })
      .catch((err) => {
        console.log("errSomething");
        console.log(err);
      });
  } catch (err) {
    console.log(err);
  }
};