Search code examples
face-api

Improve speed of first detection in face-api.js?


In face-api.js the first call to detect a photo takes about 10 seconds, and then takes milliseconds for all subsequent detections.

Is there any way to call some function to prepare before starting detection and avoid this initial delay? Taking into consideration that the user needs to do an action (click a button) to start the face detection.

I am already doing the initiated boot load. According to the code.

App Init()

const MODEL_URL = "/static/models";
faceapi.loadTinyFaceDetectorModel(MODEL_URL);
await faceapi.loadFaceLandmarkTinyModel(MODEL_URL);
await faceapi.loadFaceDetectionModel(MODEL_URL);
await faceapi.loadFaceRecognitionModel(MODEL_URL);

navigator.mediaDevices
  .getUserMedia({ video: { frameRate: { ideal: 10, max: 15 } } })
  .then(stream => {
    this.cameraPreview.srcObject = stream;
    this.cameraPreview.style.display = "block";
  })
  .catch(err => {
    alert("error");
  });

Call Detect

start(){
    configProcessFace();
    detectFace();
}

configProcessFace() {
    let inputSize = 128;
    let scoreThreshold = 0.58;
    this.faceOptions = new faceapi.TinyFaceDetectorOptions({
        inputSize,
        scoreThreshold
    });
},
async detectFace() {
    faceapi
    .detectSingleFace(this.cameraPreview, this.faceOptions)
    .run()
    .then(res => {
        if (res && res.box) {
            ...
        }
        window.setTimeout(() => {
            this.detectFace();
        }, 40);
    })
    .catch(err => {
        console.log(err);
});

Solution

  • I push a picture with a face, in the proportions 512x512 and did the recognition while loading the application. When the user will recognize it, it takes 1 second.

    For consult:

    prepareFaceDetector() {
          let base_image = new Image();
          base_image.src = "/static/img/startFaceDetect.jpg";
          base_image.onload = function() {
            const useTinyModel = true;
            const fullFaceDescription = faceapi
              .detectSingleFace(base_image, new faceapi.TinyFaceDetectorOptions())
              .withFaceLandmarks(useTinyModel)
              .withFaceDescriptor()
              .run()
              .then(res => {
                console.log("--------> " + JSON.stringify(res));
              });
          };
    }