Voltar para projetos

Case de projeto

Face Behavior Dashboard

Painel no navegador que transforma sinais do rosto na webcam em um índice experimental de atenção, sem servidor.

Meu papelDesenvolvedor
Tecnologias utilizadas
  • MediaPipe Tasks Vision
  • Canvas API
  • Next.js
  • React
  • TypeScript
  • Recharts
Abrir demo
Página inicial do painel de comportamento facial com o indicador de atenção e a prévia do rastreamento.
detector-de-stress.vercel.app / Página inicial

Problema

Mostrar visão computacional no navegador sem enviar o rosto para um servidor.

Um índice derivado do rosto precisa deixar claro o que não mede.

Solução

Arquitetura resumida
  • Quadros da webcam, processados no navegador.
  • Dados de exemplo no dashboard, sinalizados na tela.
Demo em tempo real antes de ligar a webcam.
Demo em tempo real antes de ligar a webcam.
Decisões técnicas
  1. Face Landmarker em GPU com blendshapes, e o FaceDetector nativo como alternativa.
  2. Sinais de boca aberta, piscadas e rotação da cabeça a partir dos blendshapes e pontos.
  3. Índice de atenção de 0 a 100 por pesos fixos, com estados e eventos da sessão.

Resultado

Um estudo de leitura facial no navegador que é explícito sobre o que o índice não mede.

  • Visão computacional no navegador
  • Canvas 2D
  • Comunicação honesta de limites

Aprendizados e limitações

  • O índice é experimental e não mede stress, saúde ou emoção.
  • Sem câmera, a demo mostra um rosto simulado.
  • O dashboard usa dados de exemplo.
  • Não há testes.

Mais sobre o projeto

Detalhes completos do case, colapsados para leitura opcional.

Descrição completa

Painel de comportamento facial no navegador: rosto, olhos e boca lidos pela webcam viram um índice experimental de atenção.

O MediaPipe Face Landmarker roda em GPU, com blendshapes; o detector nativo do navegador entra como alternativa.

O índice de atenção, de 0 a 100, usa pesos fixos e não tem valor médico, biométrico ou psicológico, como o próprio app declara.

Sem câmera disponível, a demo mostra um rosto simulado; o painel analítico usa dados de exemplo sinalizados na tela.

Next.js e React com MediaPipe Tasks Vision, overlay em Canvas 2D e gráficos em Recharts; tudo no cliente.

Funcionalidades e destaques
  • Overlay do rosto em Canvas.
  • Índice de atenção experimental.
  • Eventos da sessão.
  • Dashboard com insights por regras.
  • PWA com página offline.
  • Lê o rosto no navegador, sem enviar imagem para servidor.
  • Cai para o detector nativo quando o MediaPipe não carrega.
  • Declara que o índice não tem uso médico, biométrico ou psicológico.
Arquitetura técnica e dados

Arquitetura técnica

Como o case foi pensado como produto

Painel no navegador que transforma sinais do rosto na webcam em um índice experimental de atenção, sem servidor.

MediaPipe Tasks VisionIACanvas APIPlataforma webNext.jsFrameworkReactFrameworkTypeScriptLinguagemRechartsVisualização

Dados utilizados

  • Quadros da webcam, processados no navegador.
  • Dados de exemplo no dashboard, sinalizados na tela.

Principais componentes

  • Overlay do rosto em Canvas.
  • Índice de atenção experimental.
  • Eventos da sessão.
  • Dashboard com insights por regras.
  • PWA com página offline.

Decisões técnicas

  • Visão computacional no navegador
  • Canvas 2D
  • Comunicação honesta de limites

Trade-offs

  • O índice é experimental e não mede stress, saúde ou emoção.
  • Sem câmera, a demo mostra um rosto simulado.
  • O dashboard usa dados de exemplo.
  • Não há testes.
Como executar
  1. O repositório é privado; os passos abaixo valem para quem tem acesso.
  2. npm install
  3. npm run dev
Mídia adicional
Vídeo de demonstração do projeto.
Dashboard com dados de exemplo, sinalizados na própria tela.
Dashboard com dados de exemplo, sinalizados na própria tela.
Créditos

Desenvolvido por Matheus Siqueira - https://www.matheusdev.tech

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