Utilice 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 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:

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

  1. Clona o descarga 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, 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.

RetratoPaisaje

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.
  • IOHandler s 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 .