TheLazy.Dev
Portfolio GitHub

Blog

node |tutorial |javascript |azure

Reconhecimento Facial com Face API & Node.js

glaucia86

Glaucia Lemos

Posted on October 17, 2019

Reconhecimento Facial com Face API & Node.js

Reconhecimento Facial com Face API & Node.js

Screen-Shot-10-14-19-at-02-02-PM.png

Dando continuidade a nossa série Aprenda Serviços Cognitivos & I.A com Node.js e no último artigo aprendemos a realizar traduções simultâneas com o Translator Text e vimos o quão poderoso é fazer uso dos Serviços Cognitivos para deixar as nossas aplicações mais inteligentes, dinâmicas e interativas!

Hoje, vamos falar um pouco sobre o Face Api. Porém, vamos entender um pouco o que seria o Face API!

O que é Face API?

face-api-cs.jpg

O Face API é um Serviço Cognitivo do Azure que permite detectar, reconhecer e analisar rostos humanos em imagens. Como ele faz isso? Por meio de algoritmos! E o Face API possui várias funções diferentes! Entre elas:

  • ➡️ Reconhecimento Facial: que permite reconhecer rostos humanos numa imagem. E extrae uma série de informações como: gênero, idade, emoção entre outros pontos.

  • ➡️ Verificação Facial: aqui a API irá avaliar se dois rostos pertencem à mesma pessoa.

  • ➡️ Encontrar Rostos Semelhantes: diferente da Verificação Facial, aqui a API irá procurar se há rostos semelhantes numa imagem e identificar para nós, por meio do matchPerson, que realiza uma filtragem da API Face - Verify e daí retorna uma lista de rostos que sejam parecidos e se pertencem a mesma pessoa.

  • ➡️ Agrupamento Facial: como o próprio nome diz, aqui podemos ter um conjunto de rostos desconhecidos em vários grupos. Aqui se faz uso da API Face - Group

  • ➡️ Identificação Pessoal: aqui o uso da API é bem legal. Pois podemos identificar um rosto detectado e comparar com uma base de dados de pessoas.. Esse recurso é legal pois podemos fazer uso de gerenciamento de fotos. Se desejarem saberem mais a respeito dessa API, bastam acessar a documentação de referência na Face - Identify

Para mais informações a respeito do Face API, pode ter um overview com maiores detalhes AQUI.

Criando a aplicação!

Sim, esse aquele momento em que vamos começar a codar e criar a aplicação em Node.js usando o Face API. Para isso, utilizaremos:

E caso você seja um(a) estudante de alguma Instituição de Ensino de Faculdade ou Universidade, poderá criar sua conta no Azure for Students. Essa conta te dará o benefício em possuir crédito de USD 100,00 para usar os serviços de maneira gratuita, sem necessidade de possuir um cartão de crédito. Para ativar essa conta, bastam acessar o link ao lado: AQUI

Todo o código desenvolvido desse artigo encontra-se disponível AQUI. Depois de instalar e criar uma conta Azure aí sim poderemos prosseguir com o nosso tutorial.

Criando Recurso do Face API no Azure

Assim, como no artigo anterior, precisamos criar um Recurso do Face API no Portal Azure. Após isso, aí sim, poderemos começar a codar a nossa aplicação. Caso não saibam, bastam seguir o passo a passo no gif abaixo:

01---face-api-nodejs.gif

Observem na imagem abaixo que, após criarmos o nosso Recurso dentro do Portal Azure, que geram uma key e endpoint. Guardem essa key, pois precisaremos dela para o próximo passo.

Screen-Shot-10-14-19-at-04-16-PM.png

Desenvolvendo o código

Agora que já temos a nossa key, vamos agora criar a aplicação em Node.js para fazer uso do Face API. Para isso, abre o seu Visual Studio Code e dentro da pasta que você criou para o seu projeto, digite o seguinte comando, para criar um arquivo padrão do package.json no nosso projeto: 



> npm init -y
Enter fullscreen mode Exit fullscreen mode

Com esse comando ele criará um arquivo padrão do package.json. Porém, abre o Visual Studio Code e altere o arquivo conforme o código abaixo:

  • arquivo: package.json



{
  "name": "faceapi-node.js-demo",
  "version": "1.0.0",
  "description": "Demo para realizar reconhecimento de imagem via Face API & Node.js",
  "main": "face-detection.js",
  "scripts": {
    "dev": "node src/face-detection.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/faceapi-node.js-demo.git"
  },
  "keywords": [
    "nodejs",
    "cognitive-services",
    "azure",
    "face-api",
    "javascript"

  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/faceapi-node.js-demo/issues"
  },
  "homepage": "https://github.com/glaucia86/faceapi-node.js-demo#readme"
}
Enter fullscreen mode Exit fullscreen mode

Perfeito! Agora, crie a estrutura do projeto conforme a imagem abaixo:src -> face-detection.js

Screen-Shot-10-16-19-at-01-49-PM.png

E no arquivo .gitignore, inclua o seguinte bloco de código

  • arquivo: .gitignore


node_modules
lib
.env
Enter fullscreen mode Exit fullscreen mode

Show! Vamos agora instalar as dependências no nosso projeto. Precisaremos de 2:

  • request: esse pacote nos ajudará a realizar requisições no Face API de maneira muito fácil via código.

  • dotenv: esse pacote será de grande ajuda, pois como estaremos incluindo chaves dos serviços Azure na aplicação e para que não fiquem expostas, esse pacote nos ajudará a criar variáveis de ambiente sem precisar 'setar' localmente na nossa máquina.

Para isso, vamos instalar esse dois pacotes com o seguinte comando via prompt:




> npm i request dotenv
Enter fullscreen mode Exit fullscreen mode

No final, o nosso arquivo package.json ficará da seguinte maneira:



{
  "name": "faceapi-node.js-demo",
  "version": "1.0.0",
  "description": "Demo para realizar reconhecimento de imagem via Face API & Node.js",
  "main": "face-detection.js",
  "scripts": {
    "dev": "node src/face-detection.js"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/glaucia86/faceapi-node.js-demo.git"
  },
  "keywords": [
    "nodejs",
    "cognitive-services",
    "azure",
    "face-api",
    "javascript"
  ],
  "author": "Glaucia Lemos",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/glaucia86/faceapi-node.js-demo/issues"
  },
  "homepage": "https://github.com/glaucia86/faceapi-node.js-demo#readme",
  "dependencies": {
    "dotenv": "^8.2.0",
    "request": "^2.88.0"
  }
}
Enter fullscreen mode Exit fullscreen mode

Agora, vamos criar a lógica para realizar o reconhecimento de imagem via Face API & Node.js.

Criando a lógica no arquivo 'face-detection.js'

Abram o arquivo face-detection.js e incluam o seguinte bloco de código abaixo:

  • arquivo: face-detection.js



/**
 * arquivo: src/facedetection.js
 * Data: 16/10/019
 * Descrição: Arquivo responsável por realizar o reconhecimento facial usando o Face API & Node.js
 * Author: Glaucia Lemos
 */

'use strict';

const request = require('request');

require('dotenv').config();

const subscriptionKey = process.env.SUBSCRIPTION_FACE_API_KEY;
const uriBase = process.env.URI_BASE;
const imageUrl = 'https://cdn-ofuxico.akamaized.net/img/upload/noticias/2019/05/13/silvio_santos_reproducao_instagram_349201_36.jpg';
Enter fullscreen mode Exit fullscreen mode

Aqui estamos fazendo o chamada de 2 pacotes: request e o dotenv. E logo abaixo, criando 3 variáveis para processar as informações geradas para nós no Portal Azure: key, endpoint e uma url de uma imagem que estaremos pegando na internet!

Notem que nas variáveis subscriptionKey e uriBase, estamos criando uma espécie variáveis secretas? É justamente aí que usaremos o pacote dotenv. Para isso, crie um arquivo chamado .env, fora da pasta src e vejam como ela deve ficar:

Screen-Shot-10-16-19-at-02-18-PM.png

É justamente nesse arquivo que ficará guardado as informações mais sensíveis, tipo: keys, endpoints e tudo mais! Notem que, se vocês abrirem o arquivo .gitignore esse arquivo não será enviado para o GitHub. Justamente, para evitar de ser usado por outras pessoas!

Dando continuidade no nosso desenvolvimento, vamos agora concluir esse arquivo! Inclua o seguinte bloco de código no arquivo:

  • arquivo: face-detection.js


const params = {
  'returnFaceId': 'true',
  'returnFaceLandmarks': 'false',
  'returnFaceAttributes': 'age,gender,headPose,smile,facialHair,glasses,' +
  'emotion,hair,makeup,occlusion,accessories,blur,exposure,noise'
};

const options = {
  uri: uriBase,
  qs: params,
  body: '{"url": ' + '"' + imageUrl + '"}',
  headers: {
    'Content-Type': 'application/json',
    'Ocp-Apim-Subscription-Key' : subscriptionKey
  }
};

request.post(options, (error, response, body) => {
  if (error) {
    console.log('Error ao identificar a imagem: ', error);
    return;
  }

  let jsonResponse = JSON.stringify(JSON.parse(body), null, '  ');
  console.log('JSON Response\n');
  console.log(jsonResponse);
});
Enter fullscreen mode Exit fullscreen mode

No bloco de código acima, estamos declarando algumas variáveis para justamente tratar de fazer a chamada da nossa api para que possa realizar a identificação da imagem concedida via URL. Note que, na variável params, temos inúmeros parâmetros que nos retornarão em forma de json. Esses parâmetros são padrão do Face API, que podem ser analisados AQUI

Screen-Shot-10-16-19-at-03-22-PM.png

E por último ele, retornará um Json com todas as informações solicitadas na variável params.

Vamos testar a aplicação agora?! Vejam no gif abaixo como testar:

02---face-api-nodejs.gif

Observem que a api retornou que na imagem é um homem, de cor marrom, não está usando óculos e até a dedução da idade foi dada.

Vejam o retorno abaixo para a imagem do Silvio Santos:

  • JSON Response



[
  {
    "faceId": "8b121a4e-407a-4b91-9b90-4ba2592a6329",
    "faceRectangle": {
      "top": 82,
      "left": 237,
      "width": 163,
      "height": 163
    },
    "faceAttributes": {
      "smile": 1,
      "headPose": {
        "pitch": -6.3,
        "roll": 4.4,
        "yaw": -7.5
      },
      "gender": "male",
      "age": 50,
      "facialHair": {
        "moustache": 0.1,
        "beard": 0.1,
        "sideburns": 0.1
      },
      "glasses": "NoGlasses",
      "emotion": {
        "anger": 0,
        "contempt": 0,
        "disgust": 0,
        "fear": 0,
        "happiness": 1,
        "neutral": 0,
        "sadness": 0,
        "surprise": 0
      },
      "blur": {
        "blurLevel": "medium",
        "value": 0.42
      },
      "exposure": {
        "exposureLevel": "goodExposure",
        "value": 0.72
      },
      "noise": {
        "noiseLevel": "medium",
        "value": 0.46
      },
      "makeup": {
        "eyeMakeup": false,
        "lipMakeup": false
      },
      "accessories": [],
      "occlusion": {
        "foreheadOccluded": false,
        "eyeOccluded": false,
        "mouthOccluded": false
      },
      "hair": {
        "bald": 0.17,
        "invisible": false,
        "hairColor": [
          {
            "color": "brown",
            "confidence": 1
          },
          {
            "color": "black",
            "confidence": 0.85
          },
          {
            "color": "gray",
            "confidence": 0.48
          },
          {
            "color": "blond",
            "confidence": 0.1
          },
          {
            "color": "red",
            "confidence": 0.09
          },
          {
            "color": "other",
            "confidence": 0.05
          }
        ]
      }
    }
  }
]
Enter fullscreen mode Exit fullscreen mode

Legal não é mesmo?! Mas, e se eu quiser ver a imagem e o retorno no browser?! Não tem problema! Criei uma outra aplicação, fazendo uso do: demo-2

  • Node.js
  • Pug
  • Express
  • Bootstrap
  • JQuery

Vejam em ação aqui no gif abaixo:

03---face-api-nodejs.gif

Todo o código desenvolvido encontra-se AQUI. E lá no repositório explico como devem executar as aplicações! ;)

Palavras Finais

Podemos fazer muitas coisas legais usando o Face API com Node.js & JavaScript. Pois como se trata de uma API aberta, podemos usar de diferentes maneiras!

Lembrando que o Face API você pode usar ele em outras linguagens, tais como:

Abaixo listo alguns recursos e links importantes que pode ser de ajuda para criar mais aplicações usando o Face API:

Estarei num futuro próximo redescrevendo esse tutorial para Vue.js! E realizando live streaming como desenvolver essa aplicação com Face API e Node.js. Assim que, aguardem!

E para ficarem por dentro de várias outras novidades, não deixem de me seguir lá no twitter!

Twitter

Nos vemos! Até a próxima série pessoal! 😍

💖 💪 🙅 🚩
glaucia86
Glaucia Lemos

Posted on October 17, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Implementación de un Traductor en tiempo real con Translator Text & Node.js
node Implementación de un Traductor en tiempo real con Translator Text & Node.js

October 29, 2019

Reconhecimento Facial com Face API & Node.js
node Reconhecimento Facial com Face API & Node.js

October 17, 2019

Realizando traduções em tempo real com Translator Text & Node.js
node Realizando traduções em tempo real com Translator Text & Node.js

October 7, 2019