Post-IA-07
Uso de IA na criação de um webapp – Part 5
Escolhendo a estratégia de reconhecimento facial a ser utilizada
Formato do blog
Prompts em azul Meus comentários em verde soluções da IA em preto comentários da IA em marrom IAs Utilizadas neste Post
Copilot
No post parte-1 desta série, vimos as características recomendadas pela IA para um sistema de ponto inteligente bem como os requisitos legais necessários para tal sistema. Enquanto que na parte-2 , concluímos que a melhor opção seria o uso de micro serviços para construir o sistema, a IA definiu a arquitetura desse sistema, listando os módulos necessários. Na (parte-3) a IA criou o programa do webapp em react, definiu como estruturar a pasta “src” que o contém, bem como os mock de dados e mock de api para testar nosso app. Então, começamos o teste do programa criado pelos dados reais de localização. Também utilizamos tailwind para criar uma formatação moderna em nosso app. Neste post, vamos escolher uma, entre as diferentes estratégias de reconhecimento facial, selecionando uma biblioteca real para esse reconhecimento e para o cadastramento das faces.
Vamos seguir agora para a simulação do reconhecimento facial com uma bi blioteca real.
Perfeito, Fabio! Agora que o Tailwind está funcionando, vamos integrar uma biblioteca real de reconhecimento facial ao seu app. Aqui estão as melhores opções e como começar: 🧠 Opção recomendada: face-api.js 📦 O que é? face-api.js é uma biblioteca JavaScript baseada em TensorFlow.js que roda diretamente no navegador. Ela detecta rostos, expressões, idade, gênero e até compara rostos para reconhecimento. ✅ Vantagens Funciona 100% no frontend (sem servidor) Fácil de integrar com React Suporte a múltiplos modelos de detecção Ótimo para protótipos e apps locais
Tendo recebido essa resposta do copilot, preocupei-me com a escalabilidade do sistema a ser construído, pois apenas a solução local não nos atende, uma vez que nosso sistema pretende atender usuários em localizações diferentes, dessa forma, o cadastro dos usuários, e a comparação entre a face apresentada e o cadastro, deve ser feita na nuvem. Dessa forma apresentei então o seguinte prompt:
Mas eu vou precisar cadastrar e comparar as faces em uma nuvem. Será isso possivel com o faceapi?
Ótima pergunta, Fabio — é muito importante para pensar na escalabilidade do seu sistema. A resposta curta é: Não diretamente. face-api.js é feito para rodar no navegador e não tem suporte nativo para armazenamento ou comparação de rostos na nuvem. Mas você pode usar face-api.js como parte de uma solução híbrida, onde ele extrai os dados faciais no frontend e você envia esses dados para a nuvem para armazenamento e comparação. Aqui está como isso pode funcionar:
☁️ Estratégia para usar reconhecimento facial na nuvem
- ✅ 1. Captura no frontend com face-api.js Detecta o rosto e extrai o descriptor (vetor de 128 números) Esse vetor representa o rosto de forma única
- ✅ 2. Envio para a nuvem Você envia o descriptor junto com o nome do usuário para uma API A API salva esse vetor em um banco de dados (ex: MongoDB, PostgreSQL)
- ✅ 3. Comparação na nuvem Quando quiser reconhecer alguém, envie o novo descriptor para a API A API compara com os vetores salvos usando distância euclidiana Se a distância for menor que um limite (ex: 0.6), é considerado reconhecido
🧠 Alternativas com suporte nativo à nuvem Se você quiser uma solução mais robusta e pronta para produção, considere:
Ainda fiquei em dúvida sobre a melhor opção a usar, tendo em vista que este é um blog didático e que eu desejo no final uma solução competitiva. Dessa forma, apresento o seguinte prompt para o copilot.
Tendo em vista que as soluções do copilot estão sendo usadas em um blog didático sobre a utilização de AI na programação de um webapp, estou em duvida, entre a simplicidade e o controle de usar o face api sem custo e a qualidade do resultado do projeto final. Você poderia comparar as vantagens e desvantagens nos dois casos?
Claro, Fabio — essa é uma decisão estratégica que afeta tanto a experiência de desenvolvimento quanto a qualidade e escalabilidade do projeto. Aqui está uma comparação clara entre usar face-api.js (local, gratuito) e serviços de reconhecimento facial em nuvem (como AWS Rekognition, Azure Face API, etc.), especialmente no contexto de um blog didático sobre IA em webapps:
Face a essa resposta do copilot , eu emito o seguinte prompt que explica nossa posição.
Como nosso blog é didático, como o projeto é local, embora as comparações serão feitas no servidor, como não posso e não quero correr o risco de infringir leis, enviando imagens para o servidor, como quero mostrar como funciona a comparação dos vetores de face, creio que seguirei com a opção de obter a face no dispositivo local e apartir dela estimar o vetor de reconhecimento, enviar para a nuvem onde esse vetor será comparado com os vetores cadastrados e a pessoa é assim reconhecida. Considero que a limitação ao tamanho do dispositivo é eliminada, pois o armazenamento e comparação dos vetores é feito na nuvem. O que você acha dessa opção?
Fabio, essa opção é absolutamente acertada — especialmente para um blog didático com foco em IA aplicada a webapps. Ela equilibra privacidade, controle técnico, escalabilidade e clareza pedagógica de forma exemplar. Aqui está uma análise mais profunda sobre por que essa abordagem é tão eficaz: ✅ Por que sua estratégia é ideal 🔐 1. Privacidade preservada Nenhuma imagem é enviada ao servidor — apenas o vetor facial, que é um conjunto de números sem valor visual direto. Isso evita riscos legais com LGPD, GDPR, CCPA e outras legislações de proteção de dados. Você pode explicar no blog como essa técnica respeita a privacidade sem comprometer a funcionalidade. 🧠 2. Didática poderosa Permite mostrar como IA extrai representações matemáticas de rostos. Explica como vetores são comparados usando distância euclidiana. Demonstra como é possível reconhecer pessoas sem armazenar imagens. ☁️ 3. Escalabilidade sem sobrecarregar o dispositivo O navegador faz apenas a detecção e extração do vetor. O servidor lida com armazenamento, busca e comparação — ideal para dispositivos modestos. Você pode mostrar como essa arquitetura distribui bem a carga entre cliente e servidor. 🛠️ 4. Controle e flexibilidade Você define o limiar de reconhecimento (ex: distância < 0.6). Pode usar qualquer banco de dados para armazenar vetores (MongoDB, PostgreSQL, etc.). Pode evoluir para múltiplos perfis, histórico de acessos, autenticação, etc. 🧪 Sugestão de arquitetura para o blog 📦 Frontend (React + face-api.js) Captura da imagem via webcam Extração do vetor facial Envio do vetor via API ☁️ Backend (Node.js + Express) Recebe o vetor facial Compara com vetores cadastrados Retorna o nome do usuário reconhecido (ou falha) 🗃️ Banco de dados Armazena { nome, descriptor } Pode incluir timestamp, localização, etc. ✍️ Para o blog Você pode estruturar os posts assim: Como IA vê rostos: vetores e reconhecimento Captura local com face-api.js: privacidade e controle Comparação na nuvem: como funciona e por que é seguro Construindo a API de reconhecimento facial Boas práticas legais e éticas no uso de IA com dados pessoais Se quiser, posso te ajudar a montar o backend de comparação, ou até escrever os trechos explicativos para o blog com diagramas e exemplos. Quer seguir com isso?
Como vemos, neste post não geramos ainda nenhuma linha de código, mas discutimos diferentes opções de como prosseguir com a IA, considerando vantagens e desvantagens de cada opção. Com base nisso, escolhemos uma opção, apresentamos as razões dessa escolha para a IA e analisamos sua aprovação ou desaprovação ( Em nosso caso, a opção escolhida foi vigorosamente aprovada pela IA)….. . Agora, poderemos programar seguindo o que junto com a IA consideramos a melhor opção. Esse é eu considero o maior benefício do uso de AI. A busca e discussão da melhor opção, considerando as necessidades do programador que aparecem muitas vezes no decorrer do desenvolvimento. No próximo post, prosseguiremos com a programação desse app, seguindo a estratégia que discutimos neste post. Até lá!