Dados utilizados
- Frames da webcam processados localmente no navegador.
- Landmarks de mão fornecidos pelo MediaPipe Hands.
- Amostras rotuladas de gestos para treinamento e validação.
- Métricas de sessão, confiança e status operacional da experiência.
Case de projeto
ENCOM Gesture Console
Console futurista com detecção de gestos pela webcam, telemetria visual e efeitos 3D em tempo real.
Problema
Demonstrações de visão computacional frequentemente ficam dispersas entre câmera, logs e visualização técnica.
Era necessário mostrar captura, status do modelo e feedback visual em uma interface única e memorável.
Solução
Arquitetura resumida
- Frames da webcam processados localmente no navegador.
- Landmarks de mão fornecidos pelo MediaPipe Hands.
- Amostras rotuladas de gestos para treinamento e validação.
Decisões técnicas
- Console web estático com painéis dedicados para captura, telemetria e renderer 3D.
- Pipeline client-side com MediaPipe Hands e TensorFlow.js para reconhecer sinais em tempo real.
- Treinador visual para coletar amostras, validar gestos e exportar modelos.
Resultado
Entreguei uma experiência de alto impacto para demonstrar IA no navegador.
- Visão computacional no navegador com MediaPipe Hands.
- Classificação e treinamento leve de gestos com TensorFlow.js.
- Renderização 3D interativa com Three.js.
- Design de interface técnica com telemetria clara para demos.
Mais sobre o projeto
Detalhes completos do case, colapsados para leitura opcional.
Descrição completa
Aplicação web publicada na Vercel que combina MediaPipe Hands, TensorFlow.js e Three.js para capturar sinais das mãos, renderizar efeitos especiais em painéis separados e exibir métricas operacionais em uma interface ENCOM.
O projeto roda 100% no navegador e inclui fluxo dedicado para treinamento de novos gestos, mantendo a experiência pronta para demonstrações técnicas de alto impacto.
JavaScript, MediaPipe Hands, TensorFlow.js e Three.js em uma aplicação estática publicada na Vercel.
Centralizei captura, telemetria e efeitos visuais em um console único.
Deixei uma base pronta para novos gestos, novos efeitos e futuras integrações.
Problema
- A experiência precisava rodar no navegador sem instalação ou backend obrigatório.
- O treinamento de novos gestos precisava ser claro o suficiente para uso em demo ao vivo.
O que o vídeo demonstra
- Captura de gestos pela webcam diretamente no navegador.
- Painéis separados para câmera, telemetria, status de sessão e efeitos 3D.
- Treinador visual para coletar amostras, validar sinais e exportar modelos.
Arquitetura da experiência
- Frontend estático com JavaScript, HTML e CSS.
- MediaPipe Hands e TensorFlow.js para leitura e classificação de gestos.
- Three.js para renderer visual e feedback imersivo em tempo real.
Funcionalidades e destaques
- Detecção de gestos em tempo real usando webcam no navegador.
- Interface ENCOM com painéis dedicados para captura e efeitos 3D.
- Telemetria visual de sessão, status e confiança do reconhecimento.
- Treinador visual para coletar amostras, validar e exportar modelos.
- Deploy estático na Vercel com experiência pronta para demonstração.
Arquitetura técnica e dados
- Camada visual em Three.js para transformar a detecção em uma experiência de demonstração premium.
Arquitetura técnica
Como o case foi pensado como produto
Console futurista com detecção de gestos pela webcam, telemetria visual e efeitos 3D em tempo real.
JavaScriptLinguagemTensorFlow.jsIAMediaPipe HandsIAThree.jsVisualizaçãoHTMLPlataforma webCSSPlataforma webVercelDeploy
Principais componentes
- Detecção de gestos em tempo real usando webcam no navegador.
- Interface ENCOM com painéis dedicados para captura e efeitos 3D.
- Telemetria visual de sessão, status e confiança do reconhecimento.
- Treinador visual para coletar amostras, validar e exportar modelos.
- Deploy estático na Vercel com experiência pronta para demonstração.
Decisões técnicas
- Visão computacional no navegador com MediaPipe Hands.
- Classificação e treinamento leve de gestos com TensorFlow.js.
- Renderização 3D interativa com Three.js.
- Design de interface técnica com telemetria clara para demos.
Como executar
- Clone o repositório.
- Instale as dependências conforme README do projeto.
- Execute o servidor local ou acesse a demo publicada na Vercel.
- Permita o acesso à webcam para testar a captura de gestos.
Mídia adicional
Créditos
Desenvolvido por Matheus Siqueira.
Próximo projetoAd Performance Intelligence
Dashboard de BI em Next.js que compara Google Ads e Meta Ads com dados simulados: KPIs, funil e ROAS.
Ver case completo