Utilizza TensorFlow.js in un'app React Native

In questo tutorial installerai ed eseguirai un'app di esempio React Native che utilizza un modello di rilevamento della posa TensorFlow ( MoveNet.SinglePose.Lightning ) per eseguire il rilevamento della posa in tempo reale. Basata sull'adattatore della piattaforma TensorFlow.js per React Native , l'app supporta sia la modalità verticale che quella orizzontale con le fotocamere anteriore e posteriore.

Prerequisiti

Per completare questo tutorial, è necessario che quanto segue sia installato nel tuo ambiente di sviluppo:

• Node.js ( scarica )
• Filato ( installa )
• (Su un telefono o altro dispositivo di prova) Expo Go ( installa )

L'adattatore della piattaforma TensorFlow.js React Native dipende da expo-gl e expo-gl-cpp , quindi devi utilizzare una versione di React Native supportata da Expo .

Installa ed esegui l'app di esempio

1. Clona o scarica il repository tfjs-examples .

2. Passare alla directory react-native/pose-detection :

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

3. Installa le dipendenze:

   yarn
   

4. Esegui l'app di esempio localmente:

   yarn start
   

Quando esegui l'app, il terminale visualizza un codice QR.

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

› Metro waiting on exp://192.168.0.6:19000

Scansiona il codice QR con un telefono o un altro dispositivo di prova su cui è installato Expo Go. L'app di esempio dovrebbe aprirsi in Expo Go.

Gli screenshot seguenti mostrano l'app che rileva e esegue il rendering dei punti chiave del corpo dell'utente.

Per comprendere come vengono utilizzate le librerie TensorFlow.js nell'esempio, guarda App.tsx . I commenti in quel file spiegano come configurare la dimensione del tensore, caricare il modello, eseguire il rilevamento della posa e altro ancora.

Per ulteriori informazioni sul rilevamento delle pose utilizzando TensorFlow.js, consulta questo post del blog .

Ulteriori informazioni sull'adattatore della piattaforma Reactive Native

L'adattatore della piattaforma TensorFlow.js per React Native fornisce l'esecuzione accelerata da GPU di TensorFlow.js e supporta tutte le principali modalità di utilizzo di TensorFlow.js:

• Supporto sia per l'inferenza del modello che per l'addestramento
• Supporto GPU con WebGL tramite expo-gl
• Supporto per il caricamento di modelli preaddestrati dal Web
• IOHandler supporta il caricamento di modelli dall'archiviazione asincrona e di modelli compilati nel bundle dell'app

Per le istruzioni complete sull'installazione, consulta il file README dell'adattatore della piattaforma React Native.

Risolvere i problemi di TensorFlow.js per React Native

Se la tua app si arresta in modo anomalo all'avvio, potrebbe essere necessario modificare la configurazione. Per ulteriori informazioni sulla configurazione dell'adattatore della piattaforma per React Native, consulta il README .