javascriptreactjsreact-hooksface-recognitionface-api

react, how to call a function inside then block before initializing it or any proper way?


I've build an javascript function with face-api.js for my react component which will return/console me the width and height of face detector box. I tried console.log in few places it seems working fine till the models(face-recognition-model).

But when I write async function for face detector to detect face and console. It gives me error-

Unhandled rejection(Reference Error): Cannot access 'handledImage' before initialization  

Here is screen shot also.

I can't figure out, how to fix it?

There is my code faceDetector.js

import * as faceapi from "face-api.js";

//passing image from my react compoenent
const faceDetector = (image) => {
    const imageRef = image;

    const loadModels = async () => {
       // models are present in public and they are getting loaded
        const MODEL_URL = process.env.PUBLIC_URL + "/models";
        Promise.all([
            faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
            faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
            faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
            faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
        ])
             // this is rising the issue. I want to call this function after my models loaded so it can detect face
            .then(handleImage)
            .catch((e) => console.error(e));
    };
    loadModels();

    // this function should detect the face from imageRef and should console the size of detector
    const handleImage = async () => {
        const detections = await faceapi
            .detectSingleFace(imageRef, new faceapi.TinyFaceDetectorOptions())
        console.log(`Width ${detections.box._width} and Height ${detections.box._height}`);
    }


}



export {faceDetector}

Solution

  • You need to change the order of function declaration. You can not call const variables before they were declared.

    //passing image from my react component
    const faceDetector = (image) => {
      const imageRef = image;
    
    
      // this function should detect the face from imageRef and should console the size of detector
      const handleImage = async () => {
        const detections = await faceapi
            .detectSingleFace(imageRef, new faceapi.TinyFaceDetectorOptions())
        console.log(`Width ${detections.box._width} and Height ${detections.box._height}`);
    }
    
       const loadModels = async () => {
       // models are present in public and they are getting loaded
        const MODEL_URL = process.env.PUBLIC_URL + "/models";
        Promise.all([
            faceapi.nets.tinyFaceDetector.loadFromUri(MODEL_URL),
            faceapi.nets.faceLandmark68Net.loadFromUri(MODEL_URL),
            faceapi.nets.faceRecognitionNet.loadFromUri(MODEL_URL),
            faceapi.nets.faceExpressionNet.loadFromUri(MODEL_URL)
        ])
             // this is rising the issue. I want to call this function after my models loaded so it can detect face
            .then(handleImage)
            .catch((e) => console.error(e));
       };
       loadModels();
    
    
    }