Use TensorFlow.js em um aplicativo React Native

Neste tutorial, você instalará e executará um aplicativo de exemplo React Native que usa um modelo de detecção de pose do TensorFlow ( MoveNet.SinglePose.Lightning ) para fazer detecção de pose em tempo real. Construído no adaptador da plataforma TensorFlow.js para React Native , o aplicativo oferece suporte aos modos retrato e paisagem com as câmeras frontal e traseira.

Pré-requisitos

Para concluir este tutorial, você precisa do seguinte instalado em seu ambiente de desenvolvimento:

• Node.js ( baixar )
• Fio ( instalar )
• (Em um telefone ou outro dispositivo de teste) Expo Go ( instalar )

O adaptador da plataforma TensorFlow.js React Native depende de expo-gl e expo-gl-cpp , portanto, você deve usar uma versão do React Native compatível com Expo .

Instale e execute o aplicativo de exemplo

1. Clone ou baixe o repositório tfjs-examples .

2. Mude para o diretório react-native/pose-detection :

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

3. Instale dependências:

   yarn
   

4. Execute o aplicativo de exemplo localmente:

   yarn start
   

Ao executar o aplicativo, o terminal exibe um código QR.

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

› Metro waiting on exp://192.168.0.6:19000

Digitalize o código QR com um telefone ou outro dispositivo de teste que tenha o Expo Go instalado. O aplicativo de exemplo deve abrir no Expo Go.

As capturas de tela abaixo mostram o aplicativo detectando e renderizando pontos-chave do corpo do usuário.

Para entender como as bibliotecas TensorFlow.js são usadas no exemplo, consulte App.tsx . Os comentários nesse arquivo explicam como configurar o tamanho do tensor, carregar o modelo, executar a detecção de pose e muito mais.

Para saber mais sobre detecção de pose usando TensorFlow.js, consulte esta postagem do blog .

Mais sobre o adaptador de plataforma Reactive Native

O adaptador da plataforma TensorFlow.js para React Native fornece execução acelerada por GPU do TensorFlow.js e oferece suporte a todos os principais modos de uso do TensorFlow.js:

• Suporte para inferência de modelo e treinamento
• Suporte GPU com WebGL via expo-gl
• Suporte para carregamento de modelos pré-treinados da web
• IOHandler s para suportar o carregamento de modelos de armazenamento assíncrono e modelos que são compilados no pacote de aplicativos

Para obter instruções completas de instalação, consulte o README do adaptador da plataforma React Native.

Solucionar problemas do TensorFlow.js para React Native

Se o seu aplicativo travar na inicialização, talvez seja necessário alterar sua configuração. Para saber mais sobre como configurar o adaptador de plataforma para React Native, consulte o README .