Блог

Я создал функцию javascript с помощью face-api.js для моего компонента react, который вернет/утешит меня шириной и высотой окна детектора лиц. Я попробовал утешить.войдите в несколько мест, кажется, все работает нормально до моделей(распознавание лиц-модель).

Но когда я пишу асинхронную функцию для детектора лиц, чтобы обнаружить лицо и консоль. Это приводит меня к ошибке-

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

Вот также снимок экрана.

Я не могу понять, как это исправить?

Вот мой код 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}
 

Вам нужно изменить порядок объявления функций. Вы не можете вызывать const переменные до того, как они были объявлены.

 //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();


}