Reconhecendo um rosto usando JavaScript

Quais são as opções? Muitas soluções existem para aprendizado de máquina.

Quando você procura maneiras de identificar rostos, você cria uma série de soluções. Muitos são genéricos, alguns são interfaces para estruturas existentes. Para JavaScript, você tem alguns populares para escolher. Você pode até estar confuso com a variedade de soluções. Mesmo para reconhecimento de rosto, você tem várias opções. Muitos, na maioria, são para Python, mas você também pode encontrar alguns em JavaScript. Estruturas que são direcionadas especificamente para o reconhecimento de rosto são face, js e reconhecimento de rosto.JS. O último é considerado obsoleto. O menor, em termos de código, é pico.JS com cerca de 200 linhas de código, ele pode detectar seu próprio rosto usando sua webcam. O código Pico já vem com um conjunto treinado, o que significa que não vai melhorar enquanto você o estiver usando. Para os curiosos, as cascatas de classificação pré-treinadas estão disponíveis em seu repositório do GitHub. Se você quiser treiná -lo, há uma função de aprendizado que você pode usar. Este é um programa C disponível no GitHub. Este é um processo longo para concluir, tornando -o um exercício interessante em vez de algo útil. Uma das APIs mais interessantes é o rosto-api.JS, este usa tensorflow.JS para a peça de aprendizado de máquina.

Como funciona?

O exemplo mais simples de aprendizado de máquina é um par de parâmetros como as pétalas da flor da íris. Este é o conjunto de dados iniciais mais comuns quando você deseja começar a aprender o aprendizado de máquina. Os dados podem ser resumidos em tabelas simples.

Comprimento do sépal	Largura sépica	Comprimento de pétala	Largura da pétala	Aula
5.1	3.5	1.4	0.2	Iris Setosa
4.9	3.0	1.4	0.2	Iris Setosa
7.0	3.2	4.7	1.4	Iris Versicolor
6.4	3.2	4.5	1.5	Iris-versicolor
6.9	3.1	4.9	1.5	Iris-versicolor
6.3	3.3	6.0	2.5	Iris-Virginica
5.8	2.7	5.1	1.9	Iris-Virginica

Como você pode ver na mesa, agora é possível encontrar os tamanhos que melhor correspondem a uma certa flor. Esta não é uma verdade absoluta, mas pode ser muito preciso com pontos de dados suficientes.

A questão agora se torna: como você representa uma imagem como uma longa lista de valores? Ou um rosto para esse assunto? Bem, o conto é que você converte a imagem no valor da intensidade de cada pixel. Começando a partir daí, você pode decidir para onde vão as linhas e os pontos que representam um rosto. O que realmente é um rosto foi determinado por um modelo pré-treinado. Se você aplicar isso a várias fotos da pessoa que você está tentando detectar, uma tabela semelhante à íris acima pode ser usada para determinar qual rosto é.

Como realmente funciona é um pouco mais complexo do que isso. Para você criar sua própria solução, você precisa usar uma biblioteca feita para isso. Felizmente, existem muitas soluções gratuitas e de código aberto disponíveis.

Quais são as opções?

Existem muitas bibliotecas para o uso de JavaScript, uma é a face-api.JS. Os outros podem mais escolhas capazes, mas esta tem uma página de demonstração muito simples. Você pode baixar a página de demonstração do github. A página contém a biblioteca e as páginas de demonstração. Se você quiser começar em um nível mais profundo, pode conferir Tensorflow e Dlib. Face-api usa o tensorflow como uma biblioteca de aprendizado de máquina.

Depois de ter tudo baixado do Github, você pode usar a biblioteca de exemplos para explorar diferentes métodos para reconhecimento de rosto.

Quais são os casos de uso?

Na indústria, o reconhecimento de rosto é usado para controle de acesso, verificações de participação e outro caso relacionado à segurança. Nas redes de mídia social, seu rosto pode ser marcado para que você possa procurar seu rosto em vez de seu nome. Para o seu próprio sistema, você pode usá -lo para acesso ao seu computador e até controlar alguns de seus aplicativos.

O que estamos desenvolvendo?

Estamos criando um sistema simples para detectar um rosto.

Para detectar um rosto, você precisa ter o software, imagens e um modelo treinado. Você pode treinar o modelo e você deve, mas para sua tarefa específica, também pode treinar um modelo existente. Neste exemplo, o modelo é pré-treinado e baixado.

Para que o código funcione, você precisa coletar a amostra. Nesse caso, usamos uma webcam, simples o suficiente com html5. Para fazer isso, adicione uma tag de vídeo no código HTML.

Simples à direita? Mas espere, você precisa chamar isso de seu JavaScript também.

const vídeo = documento.getElementById ('videoid')

Agora você pode usar a constante para colocar seu fluxo no código JavaScript. Crie uma função StartVideo.

função startvideo ()
navegador.MediaDevices.getUsermedia (
vídeo: ,
stream => vídeo.srcObject = stream,
err => console.erro (err)
)

Esta é uma função geral que não chama o videoid, você precisa definir uma função que chama o fluxo de entrada. Uma maneira de pegar o fluxo é usar funções de promessa.

Promessa.todos([
Faceapi.redes.TinyFacedEteCector.LoadFromuri ('/modelos'),
Faceapi.redes.FACELANDMARK68NET.LoadFromuri ('/modelos'),
Faceapi.redes.FaceRecognitionNet.LoadFromuri ('/modelos'),
Faceapi.redes.FACEEXPRONIFICADO.LoadFromuri ('/modelos')
])).então (startvideo);

A declaração de promessa acima agora executará a função Startvideo quando o fluxo estiver disponível. Finalmente, o ouvinte de eventos de vídeo abaixo executará as funções disponíveis na API FACE.

vídeo.addEventListener ('play', () =>
const Canvas = faceapi.createCanvasfromdia (vídeo);
documento.corpo.anexar (tela);
const displaysize = largura: vídeo.Largura, altura: vídeo.altura ;
Faceapi.MatchDimensions (Canvas, Displaysize);
setInterval (async () =>
detecções constantes = aguarda faceapi.Detectallfaces (vídeo, novo
Faceapi.TinyFacedEteCectorOptions ()).withfacelandmarks ().withfaceExpressions ();
const redimensionDeTections = faceapi.resizeSults (detecções, exibe);
tela.getContext ('2d').ClearRect (0, 0, tela.largura, tela.altura);
Faceapi.empate.drawDetections (tela, redimensionado);
Faceapi.empate.drawfacelandmarks (tela, redimensionado);
Faceapi.empate.drawfaceExpressions (tela, redimensionado);
, 100);
);

O que você precisa em seu ambiente de desenvolvimento?

Como estamos usando JavaScript, precisamos de nodejs, nó e npm (ou similar). Sua melhor tática aqui é criar seu diretório de desenvolvimento e clonar o repositório do Github. Os exemplos estão no diretório de exemplos, então mova -se para lá.

$ CD Exemplos/Exemplo de navegador/

Dentro do diretório, você precisa instalar os pacotes usando NPM.

$ npm install

Desde que você está no diretório onde baixou o rosto-api.JS, NPM encontrará o que você precisa baixar. Em seguida, você pode iniciar a demonstração e abri -lo em seu navegador.

$ NPM START

A última linha da saída mostra a porta que você precisa usar em seu navegador. Esses exemplos geralmente são do elenco da teoria do Big Bang, mas você pode carregar suas próprias fotos e até usar a webcam para determinar sua idade.

Essas demos são divertidas de brincar, mas o valor real é que o código está disponível para estudar.

Nos arquivos, o JavaScript está separado em um diretório separado para facilitar o uso. Para que suas páginas funcionem, você precisa carregar na API e em todos os scripts que você vai usar.

Conclusão

Este é um exemplo muito curto de como usar as APIs existentes para detectar rostos e reconhecê -los. A parte realmente fascinante é encontrar aplicativos úteis para a tecnologia. Para que você vai usar? Acesso à sua própria máquina ou apenas alguns dados ou aplicativos específicos?