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:

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.

RetratoPaisagem

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 .