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