Utiliser TensorFlow.js dans une application React Native

Dans ce didacticiel, vous allez installer et exécuter un exemple d'application React Native qui utilise un modèle de détection de pose TensorFlow ( MoveNet.SinglePose.Lightning ) pour effectuer une détection de pose en temps réel. Construite sur l' adaptateur de plate-forme TensorFlow.js pour React Native , l'application prend en charge les modes portrait et paysage avec les caméras avant et arrière.

Conditions préalables

Pour terminer ce didacticiel, vous devez installer les éléments suivants dans votre environnement de développement :

L'adaptateur de plateforme TensorFlow.js React Native dépend de expo-gl et expo-gl-cpp , vous devez donc utiliser une version de React Native prise en charge par Expo .

Installez et exécutez l'exemple d'application

  1. Clonez ou téléchargez le référentiel tfjs-examples .
  2. Accédez au répertoire react-native/pose-detection :

    cd tfjs-examples/react-native/pose-detection
    
  3. Installer les dépendances :

    yarn
    
  4. Exécutez l'exemple d'application localement :

    yarn start
    

Lorsque vous exécutez l'application, le terminal affiche un code QR.

Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀ ▀   ███ ▄▄▄▄▄ █
█ █   █ █   █▀ █ ▀█ █   █ █
█ █▄▄▄█ █▄█▀ ▄▀█▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ █ █▄▀ █▄▄▄▄▄▄▄█
█▄  ▄▀█▄█ █ ▄ ▀▀▄▄▄██▄ ▄▀▄█
██▄▀▀█▀▄█▀  ▄▄▀ █▀█ ▀██▀███
█▄▄▀ ▀▀▄▄▄ ▄▀ ▄█ ▄█ ▄ █ █▀█
█▀▄▄ ▄▄▄▀ ▄  █▄██ ▀▀█▀▀█ ▀█
███▄▄██▄█▀▄██▄  ▄ ▄▄▄ ▀▄█▀█
█ ▄▄▄▄▄ ██  ▀██▀█ █▄█ █▄▄ █
█ █   █ █▀█ ███▀▀▄▄   █▀ ▀█
█ █▄▄▄█ █ ▀▀▀▀▀▄▀▄▀▄█▄▄ ▄██
█▄▄▄▄▄▄▄█▄██▄▄██▄██████▄▄▄█

› Metro waiting on exp://192.168.0.6:19000

Scannez le code QR avec un téléphone ou un autre appareil de test sur lequel Expo Go est installé. L'exemple d'application devrait s'ouvrir dans Expo Go.

Les captures d'écran ci-dessous montrent l'application détectant et restituant les points clés du corps de l'utilisateur.

PortraitPaysage

Pour comprendre comment les bibliothèques TensorFlow.js sont utilisées dans l'exemple, consultez App.tsx . Les commentaires contenus dans ce fichier expliquent comment configurer la taille du tenseur, charger le modèle, exécuter la détection de pose, etc.

Pour en savoir plus sur la détection de pose à l'aide de TensorFlow.js, consultez cet article de blog .

En savoir plus sur l'adaptateur de plateforme Reactive Native

L'adaptateur de plate-forme TensorFlow.js pour React Native permet une exécution accélérée par GPU de TensorFlow.js et prend en charge tous les principaux modes d'utilisation de TensorFlow.js :

  • Prise en charge de l'inférence de modèle et de la formation
  • Prise en charge du GPU avec WebGL via expo-gl
  • Prise en charge du chargement de modèles pré-entraînés à partir du Web
  • IOHandler pour prendre en charge le chargement de modèles à partir du stockage asynchrone et des modèles compilés dans le bundle d'applications

Pour obtenir des instructions d’installation complètes, consultez le README de l’adaptateur de plateforme React Native .

Dépanner TensorFlow.js pour React Native

Si votre application plante au démarrage, vous devrez peut-être modifier votre configuration. Pour en savoir plus sur la configuration de l'adaptateur de plateforme pour React Native, consultez le README .