Use TensorFlow.js en una aplicación React Native

En este tutorial, instalará y ejecutará una aplicación de ejemplo de React Native que utiliza un modelo de detección de poses de TensorFlow ( MoveNet.SinglePose.Lightning ) para detectar poses en tiempo real. Construida sobre el adaptador de plataforma TensorFlow.js para React Native , la aplicación admite los 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 la plataforma TensorFlow.js React Native depende de expo-gl y expo-gl-cpp , por lo que debe usar una versión de React Native compatible con Expo .

Instalar y ejecutar la aplicación de ejemplo

1. Clone o descargue el repositorio tfjs-examples .

2. Cambie al directorio react-native/pose-detection :

   cd tfjs-examples/react-native/pose-detection
   

3. Instalar dependencias:

   yarn
   

4. Ejecute la aplicación de ejemplo localmente:

   yarn start
   

Cuando ejecuta la aplicación, la 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 poses 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 una ejecución acelerada por GPU de TensorFlow.js y es compatible con todos los modos principales de uso de TensorFlow.js:

• Compatibilidad con la inferencia y el entrenamiento de modelos
• Compatibilidad con GPU con WebGL a través de expo-gl
• Soporte para cargar modelos preentrenados desde la web
• IOHandler s para admitir la carga de modelos desde el almacenamiento asíncrono y los modelos que se compilan en el paquete de la aplicación

Para obtener instrucciones de instalación completas, consulte el adaptador de plataforma React Native README .

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 LÉAME .