Você faz parte da equipe da Feely 🟡, uma hipotética startup cujo produto principal é um reconhecimento facial que capta as expressões e emoções dos seus usuário. 😃
Neste projeto prático e divertido, usaremos como tecnologias o React com Typescript, Vite, TailwindCSS, junto com a Face Api, uma biblioteca JavaScript de código aberto construída com base no famoso TensorFlow.
Com esta aplicação, você poderá ver em tempo real, por meio de sua webcam, como as expressões faciais se relacionam com diferentes emoções, como felicidade, tristeza, surpresa e raiva. É uma oportunidade para aprender e se divertir explorando o mundo do reconhecimento facial de maneira prática e interativa.
Esse Mini Projeto contém um template inicial para você focar nas tecnologias principais. Dessa forma você não precisará de muito tempo para a parte de HTML e CSS.
As duas fontes que serão utilizadas (Fresca e Roboto Condensed) já estão instaladas e configuradas como display e secondary. Dá uma olhada no tailwind.config.js quando for utilizá-las
Caso você prefira começar do zero, não tem problema, basta apagar os arquivos.
-
Exiba a Webcam do usuário na tela.
- Este é o primeiro requisito básico.
- A webcam deverá ser exibida no local determinado no projeto.
👀 Dicas:
- Utilize a
Media Stream APIdo browser, a implementação é relativamente simples.
-
Exiba um spinner enquanto a
FaceAPInão detecta o rosto. -
Utilize a
FaceAPIpara reconhecer a face do usuário e exibir seus contornos de forma dinâmica.-
Existem alguns passos para que a
FaceAPIfuncione corretamente:-
- Você precisará carregar os modelos do TensorFlow usando a
FaceAPI. Os modelos já estão no respositório no caminho/public/models
- Você precisará carregar os modelos do TensorFlow usando a
-
- Em seguida, você irá fazer a detecção do rosto usando o método correspondente da
FaceAPI
- Em seguida, você irá fazer a detecção do rosto usando o método correspondente da
-
- Você também deverá usar o método da
FaceAPIque "desenha" o a captura na tela. O desenho será feito em um<canvas>que estará sobreposto ao vídeo.
- Você também deverá usar o método da
-
- Por fim, você deverá capturar a expressão mais provável da face detectada para que ela seja utilizada no card de resultado da aplicação.
-
- Não se esqueça que a detecção deve ocorrer em tempo real, isto é, deverá ocorrer a cada X segundos (ou milissegundos, como preferir).
-
👀 Dicas:
- Tire as dúvidas de uso na documentação Reconhecendo Expressões;
- Após a captura é necessário desenhar o resultado no canvas;
- Tire as dúvidas de uso na documentação Exibindo Resultados;
- Talvez a forma mais eficaz para "aprender" a
FaceAPIé rodando algum dos exemplos presentes no repositório.
-
-
Exiba um Emoji correspondendo a emoção do usuário e uma frase de efeito de acordo com a expressão:
- Feliz: Você está feliz. Aproveite!
- Triste: Você está um pouco triste hoje..
- Brava: Por que a expressão brava?
- Surpresa: Parece que há alguma surpresa por aí!
- Medo: Do que você tem medo?
- Enjoada: Sua expressão é enjoada.
-
Faça o deploy da sua solução e submeta no Codante.
- Estude sobre componentização, estados e passagem de Props para os componentes do React.
- Esse Mini Projeto é uma ótima forma de treinar manipulação do
DOMcomrefsno React caso você opte por componentizar algumas partes da aplicação. - Não deixe de ler com calma a documentação das dependências que foram usadas.
Temos uma sugestão de design no Figma. Mas claro, fique à vontade para montar a aplicação conforme a sua criatividade.
- Capturar e exibir uma webcam no navegador
- Refs e manipulação do DOM
- Componentização
- useEffect e useState
- Habilidades básicas de estilização com a biblioteca
- Vamos utilizar uma biblioteca que está construída com base no TensorFlow
- Praticar com as APIs de alto nível da biblioteca
FaceAPI