CODEWITHSUNDEEP
javascriptreactjsface-api
Yadharth
Yadharth

Reputation: 53

Error while loading models of Face-api.js

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

Upvotes: 0

Views: 583

Answers (1)

jepozdemir
jepozdemir

Reputation: 509

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);
  }
};

Upvotes: 1

Related Questions