Reconhecimento facial com Azure Cognitive Services, Angular e Node.js – Parte 1

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!

fluxo

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”:

001

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

002

*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:

003

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:

004

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:

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

Anúncios

4 thoughts on “Reconhecimento facial com Azure Cognitive Services, Angular e Node.js – Parte 1

  1. Douglas Pacor 04/10/2018 / 09:02

    Nice cara, parabéns, muito instrutivo. continue com os ótimos posts.

    Gostar

Deixe uma Resposta para Douglas Pacor Cancelar resposta

Preencha os seus detalhes abaixo ou clique num ícone para iniciar sessão:

Logótipo da WordPress.com

Está a comentar usando a sua conta WordPress.com Terminar Sessão /  Alterar )

Google photo

Está a comentar usando a sua conta Google Terminar Sessão /  Alterar )

Imagem do Twitter

Está a comentar usando a sua conta Twitter Terminar Sessão /  Alterar )

Facebook photo

Está a comentar usando a sua conta Facebook Terminar Sessão /  Alterar )

Connecting to %s