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 a detecção de pose em tempo real. Construído no adaptador de 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 de 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. Instalar 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

Escaneie 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 a detecção de pose usando o TensorFlow.js, consulte esta postagem do blog .

Mais sobre o adaptador de plataforma Reactive Native

O adaptador de 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 a GPU com WebGL via expo-gl
• Suporte para carregar modelos pré-treinados da web
• IOHandler s para suportar o carregamento de modelos de armazenamento assíncrono e modelos compilados no pacote de aplicativos

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

Solucionar problemas do TensorFlow.js para React Native

Se 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 .