En este tutorial, instalará y ejecutará una aplicación de ejemplo de React Native que utiliza un modelo de detección de pose de TensorFlow ( MoveNet.SinglePose.Lightning ) para realizar la detección de pose en tiempo real. Construida sobre el adaptador de plataforma TensorFlow.js para React Native , la aplicación admite modos vertical y horizontal con las cámaras frontal y trasera.
Requisitos previos
Para completar este tutorial, necesita lo siguiente instalado en su entorno de desarrollo:
- Node.js ( descargar )
- Hilo ( instalar )
- (En un teléfono u otro dispositivo de prueba) Expo Go ( instalar )
El adaptador de plataforma TensorFlow.js React Native depende de expo-gl y expo-gl-cpp , por lo que debes usar una versión de React Native que sea compatible con Expo .
Instalar y ejecutar la aplicación de ejemplo
- Clona o descarga el repositorio
tfjs-examples. Cambie al directorio
react-native/pose-detection:cd tfjs-examples/react-native/pose-detectionInstalar dependencias:
yarnEjecute la aplicación de ejemplo localmente:
yarn start
Cuando ejecuta la aplicación, el terminal muestra un código QR.
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀ ▀ ███ ▄▄▄▄▄ █
█ █ █ █ █▀ █ ▀█ █ █ █
█ █▄▄▄█ █▄█▀ ▄▀█▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ █ █▄▀ █▄▄▄▄▄▄▄█
█▄ ▄▀█▄█ █ ▄ ▀▀▄▄▄██▄ ▄▀▄█
██▄▀▀█▀▄█▀ ▄▄▀ █▀█ ▀██▀███
█▄▄▀ ▀▀▄▄▄ ▄▀ ▄█ ▄█ ▄ █ █▀█
█▀▄▄ ▄▄▄▀ ▄ █▄██ ▀▀█▀▀█ ▀█
███▄▄██▄█▀▄██▄ ▄ ▄▄▄ ▀▄█▀█
█ ▄▄▄▄▄ ██ ▀██▀█ █▄█ █▄▄ █
█ █ █ █▀█ ███▀▀▄▄ █▀ ▀█
█ █▄▄▄█ █ ▀▀▀▀▀▄▀▄▀▄█▄▄ ▄██
█▄▄▄▄▄▄▄█▄██▄▄██▄██████▄▄▄█
› Metro waiting on exp://192.168.0.6:19000
Escanee el código QR con un teléfono u otro dispositivo de prueba que tenga Expo Go instalado. La aplicación de ejemplo debería abrirse en Expo Go.
Las capturas de pantalla a continuación muestran la aplicación detectando y representando puntos clave del cuerpo del usuario.
Para comprender cómo se usan las bibliotecas TensorFlow.js en el ejemplo, consulte App.tsx . Los comentarios en ese archivo explican cómo configurar el tamaño del tensor, cargar el modelo, ejecutar la detección de pose y más.
Para obtener más información sobre la detección de poses con TensorFlow.js, consulte esta publicación de blog .
Más sobre el adaptador de plataforma Reactive Native
El adaptador de plataforma TensorFlow.js para React Native proporciona ejecución acelerada por GPU de TensorFlow.js y admite todos los modos principales de uso de TensorFlow.js:
- Soporte tanto para la inferencia de modelos como para el entrenamiento.
- Soporte de GPU con WebGL a través de expo-gl
- Soporte para cargar modelos previamente entrenados desde la web.
-
IOHandlers para admitir la carga de modelos desde almacenamiento asíncrono y modelos que se compilan en el paquete de aplicaciones
Para obtener instrucciones de instalación completas, consulte el archivo README del adaptador de plataforma React Native.
Solucionar problemas de TensorFlow.js para React Native
Si su aplicación falla al iniciarse, es posible que deba modificar su configuración. Para obtener más información sobre cómo configurar el adaptador de plataforma para React Native, consulte el archivo README .