Reconhecimento Facial com Face API & Node.js
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?
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:
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.
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
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"
}
Perfeito! Agora, crie a estrutura do projeto conforme a imagem abaixo:src -> face-detection.js
E no arquivo .gitignore
, inclua o seguinte bloco de código
- arquivo: .gitignore
node_modules
lib
.env
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
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"
}
}
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';
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:
É 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);
});
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
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:
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
}
]
}
}
}
]
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:
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!
Nos vemos! Até a próxima série pessoal! 😍
Top comments (3)
Gláuciaaaa
Marceloooooo
Olá Glaucia, existe alguma biblioteca de detecção facial que possa ser utilizada localmente, num servidor Windows Server com IIS?