Desenvolva apps de IA com React e MediaPipe
Aprenda a criar apps de IA em React usando APIs mais recentes do MediaPipe para detecção de objetos em tempo real.
MediaPipe é um framework do Google para executar modelos de IA em dispositivos, focado em tarefas de visão, como detecção de rosto e rastreamento de mãos. Agora, ele funciona como um framework de código aberto, construído com TensorFlow, ajudando desenvolvedores a criar aplicações robustas de IA para mídias em tempo real e estáticas em diferentes plataformas.
A versão mais recente permite que modelos de visão rodem completamente no dispositivo, sem necessidade de servidores. Neste artigo, exploramos as APIs mais recentes do MediaPipe criando um aplicativo de detecção e categorização de objetos em React, com foco na API de Tarefas do MediaPipe.
Antes de prosseguir, é necessário ter conhecimento em React, Node.js e npm instalados, além de uma webcam para testes em tempo real.
Por que detecção de objetos? E por que MediaPipe?
A detecção de objetos tem aplicações em várias indústrias. Por exemplo, em e-commerce, apps podem escanear produtos com a câmera para preencher buscas. No fitness, podem reconhecer posições do corpo ou equipamentos durante exercícios. Integrar a detecção de objetos em um app React permite interfaces mais inteligentes, rodando eficientemente no navegador.
O MediaPipe é uma das contribuições mais impressionantes do Google para IA em tempo real. A API de Tarefas do MediaPipe permite adicionar modelos de visão em tempo real ao seu app web com poucas linhas de JavaScript.
Introdução às novas APIs do MediaPipe
As APIs do MediaPipe, ou suíte de Soluções do MediaPipe, incluem:
MediaPipe Tasks
Oferece uma API simples e multiplataforma para instalar soluções de ML com pouco código, suportando reconhecimento de gestos e classificação de imagens.
MediaPipe Model Maker
Simplifica a personalização de modelos pré-treinados do MediaPipe com seus dados, permitindo ajustes em modelos existentes com pequenos datasets.
MediaPipe Studio
Fornece uma abordagem sem código para explorar soluções do MediaPipe com seus dados. Usaremos as Tarefas do MediaPipe para detecção de objetos neste tutorial.
Configuração do projeto
O projeto foi inicializado com Vite e usa Tailwind CSS com React. Após configurar os arquivos necessários, instale o pacote MediaPipe Tasks Vision.
Para começar, crie três pastas no projeto: components, hooks e utils. Configure as funções utilitárias para detecção e desenho de objetos, inicialização do detector e limpeza de recursos do MediaPipe.
Montando a lógica
Utilize o hook useMediaPipeObjectDetection para gerenciar o loop de detecção, iniciar a webcam e inicializar o detector. Configure o gerenciamento do ciclo de vida do componente com useEffects.
Construindo a UI
Construa os componentes da interface: VideoCanvasDisplay, DetectionResults e ObjectDetectionApp, que utiliza o hook para gerenciamento de detecção e renderização dos resultados. A aplicação finaliza com a renderização do componente ObjectDetectionApp.
Após implementar tudo, execute o app com npm run dev para ver a detecção de objetos em tempo real. O código completo está disponível no repositório do GitHub.
Conclusão
O Google MediaPipe possibilita a execução de detecção de objetos diretamente no navegador sem necessidade de backend ou treinamento de dados. Este tutorial apresentou as novas APIs do MediaPipe e a construção de um app de detecção de objetos utilizando React e MediaPipe.
