Vinícius Mussak

Faala aí galera! Tudo certo?

Hoje vamos fazer uma aplicação para realizar reconhecimento facial e identificação de pessoas utilizando os serviços cognitivos do Azure. Como é um serviço exposto via HTTP, podemos fazer a aplicação com a linguagem que quisermos; nesse exemplo vamos utilizar Node.js e Angular. Bora lá!

O post vai ser dividido em duas partes:

• Parte 1 (esse post): vamos ver um pouco de como funciona o Azure Cognitive Services, como ele reconhece faces, como utilizar e criar esse serviço no portal do Azure e por fim vamos cadastrar faces em um “banco de faces” para serem reconhecidas posteriormente.
• Parte 2 (aqui): vamos enviar uma face para o serviço de reconhecimento e ver a mágica acontecer.

O que são os serviços cognitivos do Azure?

Não vou me alongar muito para explicar tudo, mas basicamente os serviços cognitivos do Azure são algoritmos de inteligência artificial encapsulados e expostos em endpoints via HTTP. Para mais informações, veja a documentação aqui.

Como funciona o reconhecimento facial?

Devemos seguir alguns passos após já termos o nosso serviço criado no portal do Azure:

1. Criar uma lista de faces;
2. Inserir faces na lista de faces que criamos;
3. Treinar a lista de faces;
4. Reconhecer faces (esse aqui vai ficar na parte 2);

Ou seja, com 4 chamadas de API já temos o nosso reconhecimento facial funcionando!

Como criar um serviço de reconhecimento facial?

No portal do Azure (https://portal.azure.com) vamos até o menu da esquerda, e clicamos na opção “Create a resource”, logo após em “AI + Machine Learning” e por fim em “Face”:

Após isso, preenchemos os dados necessários, como nome, local, grupo de recursos e a opção de cobrança:

*existe uma opção FREE, que tem o limite de 1 conta por assinatura, já estou utilizando ela por isso não coloquei aqui na demo, mas estou utilizando e tá bem tranquilo.

Após a criação, vamos precisar pegar a chave para utilizarmos nas chamadas dos endpoints, o serviço nos disponibiliza duas chaves, na demo vamos utilizar a chave 1:

Mãos na massa!

Agora com a conta criada é só mandar bala! 😀
Criei um cadastro de clientes, para exemplificarmos o reconhecimento facial. Como a ideia é mostrar a funcionalidade do Azure, não vou explicar os detalhes de funcionalidades do Angular e do Node.js, caso tenham alguma dúvida podem me chamar que a gente troca uma ideia.

Mas vamos lá, a tela de cadastro de clientes é bem simples, com algumas informações básicas e uma foto:

O layout é baseado no material design e é um componente que criamos na SMN chamado smn-ui, ele é open-source e está disponível para download e contribuições aqui no GitHub (https://github.com/smn-official/ng-smn-ui).

O código dessa tela ficou mais ou menos dessa forma:

HTML

Submit do formulário

Agora, a parte onde toda a mágica acontece, na API onde cadastramos o cliente, vamos passar cada método passo-a-passo:

Vejam que o controller está bem simples, e tem as seguintes funcionalidades:

• Verificar se existe um outro cliente com o mesmo CPF;
• Inserir um cliente no banco de dados;
• Inserir a imagem do cliente em um banco de imagens;

E é esse o nosso foco, vamos lá!

O método “_atualizarReconhecimentoFacial” faz as seguintes tarefas:

Esse método faz basicamente:

• Insere a imagem do cliente em um container utilizando o Azure Blob Storage, tem um post explicando sobre isso aqui;
• Faz upload da imagem para o grupo em que escolhi (calma aí que já explico isso daqui a pouco)
• Atualiza o cliente com o identificador da face
  • Isso vai servir para reconhecermos a face na nossa base de dados posteriormente
• Treina o reconhecimento no grupo
  • Esse método de treinar é assíncrono, e tem uma outra rota no serviço para verificarmos o status do treinamento. Ele varia de tempo de acordo com a quantidade de imagens no grupo.

Considerem que a variável “faceApi” tenha o seguinte valor pois nosso serviço foi criado com a localização do centro-sul dos Estados Unidos:

let faceApi = "https://southcentralus.api.cognitive.microsoft.com/face/v1.0"

E falando no grupo ou lista de faces, a seguir vamos ver como criar um grupo, vejam:

O método acima criou a lista de faces chamada “minha-lista”, e nessa lista vamos inserir todas as imagens de clientes que cadastrarmos.

Para inserir uma imagem nessa lista, vamos utilizar o seguinte método:

Vejam que no corpo da requisição estamos enviando um atributo chamado “url”, essa é a url da imagem que estamos enviando para a lista, a API irá nos responder com um status code 200, e o seguinte corpo com o identificador da face que foi inserida na lista de faces:

{
    "persistedFaceId": "43897a75-8d6f-42cf-885e-74832febb055"
}

e por fim, vamos treinar a nossa lista. O treinamento serve para podermos fazer o reconhecimento facial, ele deve ser feito toda vez que uma nova face for adicionada a lista. O treino pode variar de tempo de acordo com a quantidade de imagens na lista e por isso é uma tarefa assíncrona.

Pronto! A parte 1 está concluída, ou seja, estamos inserindo clientes e os vinculando com uma imagem em nossa lista de imagens.

Após isso treinamos a lista para poder reconhecer as faces posteriormente, que é o que vamos fazer na parte 2 desse post!

Se tiverem qualquer dúvida sobre essa parte, se algo ficou muito vago ou confuso, me enviem feedbacks que irei dar um jeito 😉

Os códigos utilizados estão disponíveis no GitHub:

• Front: https://github.com/vmussak/tcc-loja-web
• API: https://github.com/vmussak/tcc-loja-api

Por hoje é só isso, qualquer dúvida ou sugestão, estou à disposição! Até mais 😀