Open
Description
System information
- Have I written custom code (as opposed to using a stock example script provided in TensorFlow.js): No
- OS Platform and Distribution (e.g., Linux Ubuntu 16.04): Windows 11
- Mobile device (e.g. iPhone 8, Pixel 2, Samsung Galaxy) if the issue happens on mobile device: Samsung Galaxy A72
- TensorFlow.js installed from (npm or script link):
yarn add @tensorflow/tfjs - TensorFlow.js version (use command below):
"@tensorflow/tfjs": "^4.13.0" - Browser version: -
- Tensorflow.js Converter Version: -
Describe the current behavior
- First I run
expo prebuild - Then
expo run:android - Upon running
"expo start --dev-client --clear"an error occurs immediately.
- When
const model = FaceModel.SupportedModels.MediaPipeFaceMesh;is deleted, the error dissapears, but thencreateDetector()can't be used.
Describe the expected behavior
estimateFaces() should return results
Standalone code to reproduce the issue
Dependencies:
"dependencies": {
"@mediapipe/face_detection": "^0.4.1646425229",
"@mediapipe/face_mesh": "^0.4.1633559619",
"@react-native-async-storage/async-storage": "^1.19.6",
"@tensorflow-models/face-detection": "^1.0.2",
"@tensorflow-models/face-landmarks-detection": "^1.0.5",
"@tensorflow/tfjs": "^4.13.0",
"@tensorflow/tfjs-react-native": "^0.8.0",
"expo": "~49.0.18",
"expo-build-properties": "^0.8.3",
"expo-camera": "~13.6.0",
"expo-dev-client": "~2.4.12",
"expo-font": "~11.6.0",
"expo-gl": "^13.2.0",
"expo-splash-screen": "~0.22.0",
"expo-status-bar": "~1.7.1",
"react": "18.2.0",
"react-native": "0.72.7",
"react-native-canvas": "^0.1.39",
"react-native-fs": "^2.20.0",
"react-native-gesture-handler": "~2.13.4",
"react-native-reanimated": "^3.5.4",
"react-native-safe-area-context": "4.7.4",
"react-native-webview": "^13.6.2",
},
App.tsx
import React, { useEffect, useState } from "react";
import { StyleSheet, Text, View } from "react-native";
import * as FaceModel from "@tensorflow-models/face-landmarks-detection";
import * as tf from "@tensorflow/tfjs";
import { cameraWithTensors } from "@tensorflow/tfjs-react-native";
import { Camera, CameraType } from "expo-camera";
import { StatusBar } from "expo-status-bar";
export default function App() {
const [modelReady, setModelReady] = useState(null);
const TensorCamera = cameraWithTensors(Camera);
useEffect(() => {
(async () => {
await tf.ready();
const model = FaceModel.SupportedModels.MediaPipeFaceMesh;
const detectorConfig = {
runtime: "mediapipe",
maxFaces: 1,
refineLandmarks: true,
solutionPath: "https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh",
};
setModelReady(await FaceModel.createDetector(model, detectorConfig));
console.log(tf.getBackend());
console.log("READY!!!");
})();
}, []);
const handleImage = (images) => {
const loop = async () => {
const nextImageTensor = images.next().value;
const result = await modelReady.estimateFaces({ input: nextImageTensor });
console.log(result);
tf.dispose([nextImageTensor]);
requestAnimationFrame(loop);
};
loop();
};
return (
<View style={styles.container}>
<StatusBar style="auto" />
{modelReady && (
<TensorCamera
style={{ height: 200, width: 200 }}
type={CameraType.front}
onReady={handleImage}
cameraTextureHeight={1080}
cameraTextureWidth={1920}
resizeHeight={200}
resizeWidth={152}
resizeDepth={3}
autorender={true}
useCustomShadersToResize={false}
/>
)}
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center",
},
});
Logs
ERROR TypeError: Cannot read property 'includes' of undefined, js engine: hermes
ERROR Invariant Violation: "main" has not been registered. This can happen if:
* Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
* A module failed to load due to an error and `AppRegistry.registerComponent` wasn't called., js engine: hermes
- When
const model = FaceModel.SupportedModels.MediaPipeFaceMesh;is deleted:
console.log(tf.getBackend());results in =>LOG rn-webgl