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
- Clona o scarica il repository
tfjs-examples
. Passare alla directory
react-native/pose-detection
:cd tfjs-examples/react-native/pose-detection
Installa le dipendenze:
yarn
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 .
,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
- Clona o scarica il repository
tfjs-examples
. Passare alla directory
react-native/pose-detection
:cd tfjs-examples/react-native/pose-detection
Installa le dipendenze:
yarn
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 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 .