vladmandic / face-api

FaceAPI: AI-powered Face Detection & Rotation Tracking, Face Description & Recognition, Age & Gender & Emotion Prediction for Browser and NodeJS using TensorFlow/JS
https://vladmandic.github.io/face-api/demo/webcam.html
MIT License
824 stars 149 forks source link

Initialization of backend wasm failed #185

Closed DaiHaoguang3151 closed 8 months ago

DaiHaoguang3151 commented 8 months ago

`import React, { useState, useRef } from "react"; import as faceapi from 'face-api.js' import as tf from '@tensorflow/tfjs-core'; import { setWasmPaths } from "@tensorflow/tfjs-backend-wasm";

const App = () => { const [session, setSession] = useState(null); const [loading, setLoading] = useState("Loading OpenCV.js...");

async function init() {
    // setWasmPaths('https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-wasm/dist/');
    // setWasmPaths('../node_modules/@tensorflow/tfjs-backend-wasm/dist/');
    setWasmPaths(`${process.env.PUBLIC_URL}/static/js/`);
    await tf.setBackend('wasm');
    await tf.ready();
    console.log(tf.getBackend())  // webgl
}
init();

cv["onRuntimeInitialized"] = async () => {
    await faceapi.nets.mtcnn.loadFromUri("/model");
    await faceapi.nets.faceLandmark68Net.loadFromUri("/model");
    await faceapi.nets.faceRecognitionNet.loadFromUri("/model");

    console.log("backend==> ", tf.getBackend())  // webgl
    setLoading(false);
}

console.log("here backend==> ", tf.getBackend())  // wasm

return (
    <div className="App">

    </div>
);

};

export default App;`

"dependencies": { "@tensorflow/tfjs": "^4.15.0", "@tensorflow/tfjs-backend-wasm": "^4.15.0", "@testing-library/jest-dom": "^5.14.1", "@testing-library/react": "^13.0.0", "@testing-library/user-event": "^13.2.1", "face-api.js": "^0.22.2", "onnxruntime-web": "^1.11.0", "react": "^18.1.0", "react-dom": "^18.1.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.0" },

I encountered the following issue while executing the above code 1704265572817

vladmandic commented 8 months ago

this looks like import error - like what happens if browser lib is getting imported server side. i have no idea what your environment is like, but the fact you're using process.env makes me believe its an SSR style setup. in which case, you need to lazy-import library in browser-only as using global import will make SSR try to bake it into bundle and that is never going to work.