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 :
- Node.js ( télécharger )
- Fil ( installer )
- (Sur un téléphone ou autre appareil de test) Expo Go ( installer )
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
- Clonez ou téléchargez le référentiel
tfjs-examples
. Accédez au répertoire
react-native/pose-detection
:cd tfjs-examples/react-native/pose-detection
Installer les dépendances :
yarn
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.
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 .