Exercicio 10 - Aplicação Web para Deteção Facial

transformando
pessoas e
organizações
Exercício 10 – Aplicação Web para Detecção Facial
UNIVERSIDADE 1500FH
SUMÁRIO
• Material................................................................................................................. Slide 4
• Objetivos.............................................................................................................. Slide 5
• Introdução............................................................................................................ Slide 6
• Seção 1: Criando Aplicação Web....................................................................... Slide 7
• Seção 2: Contratando assinatura da API Azure............................................... Slide 24
• Seção 3: Integração da Aplicação com a API................................................... Slide 30
• Correção............................................................................................................... Slide 45
Obs: Para acessar o slide correspondente ao link segure Ctrl+ Clique

MATERIAIS
Exercício
Exercício 10
Material
Site.css
1500.Png
How To
Instalação Visual Studio Community 2017

OBJETIVOS
• Construção de uma Aplicação Web usando arquitetura MVC

• Aprender a criar uma assinatura de um serviço de reconhecimento facial no Azure
• Integrar a aplicação com o serviço cognitivo contratado
INTRODUÇÃO
• Neste exercício você irá aprender como implementar uma Aplicação Web integrada a API de
Detecção Facial do Azure que permite o reconhecimento de faces em imagens.
UNIVERSIDADE
1500FH
Seção 1:
Criando a Aplicação Web com o Visual
Studio
CRIANDO A
APLICAÇÃO
WEB
Passo 1: Abra o Visual Studio e clique para criar um novo projeto.

Depois escolha a opção ASP.NET Web Application(.NET Framework).
CRIANDO A
APLICAÇÃO
WEB
Passo 2: Escolha as opções conforme marcadas na figura do lado esquerdo. Desta maneira estaremos criando
uma aplicação web seguindo a arquitetura MVC (Model-View-Controller)
CRIANDO A
APLICAÇÃO
WEB
Passo 3: Agora verificaremos se está tudo correto até aqui. Clique para no botão IIS Express para compilar e
rodar aplicação, o seu navegador padrão deverá ser aberto com a página mostrada na figura do lado direito.
CRIANDO A
APLICAÇÃO
WEB
Passo 4: Clique com o botão direito no projeto e crie o diretório Img.

CRIANDO A
APLICAÇÃO
WEB
Passo 5: Baixe o arquivo 1500.png contido no slide de materiais.

Copie e cole o arquivo no diretório Img
CRIANDO A
APLICAÇÃO
WEB
Passo 6: Baixe o arquivo Site.css contido no slide de materiais.

Copie e cole o arquivo no diretório Content; confirme para substituir o arquivo que lá já existe.
CRIANDO A
APLICAÇÃO
WEB
Passo 7: Edite o arquivo Views/Home/Index.cshtml, conforme o código abaixo.
<div class="row">
<div class="container-fluid">
<h2>Face Detection</h2>
<br />
@using (Html.BeginForm("Detection", "Detect",

FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<input type="file" name="image" value="" class="center-
block" />
<input type="hidden" name="test" value="111" />
<br />
<button type="submit" class="btn btn-default"
href="~/">Enviar</button>
}
</div>
</div>
CRIANDO A
APLICAÇÃO
WEB
Passo 8: Edite o arquivo Views/Shared/_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title 1500fh - Face Detection</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" runat="server" href="~/">
<img src="~/Img/1500.png"
class="center-block" title="1500fh-logo" height="50" />
</a>
</div>
</div>
</div>
<div class="container body-content">

@RenderBody()
<hr />
<footer>
<p>© @DateTime.Now.Year 1500fh - Face Detection</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>
</html>
CRIANDO A
APLICAÇÃO
WEB
Passo 9: Compile e rode a aplicação como fizemos no passo 3. Uma página similar a que vemos abaixo deverá
aparecer.
CRIANDO A
APLICAÇÃO
WEB
Passo 10: Clique com o botão direito na pasta Controller, selecione para adicionar; depois, conforme a figura
do lado direito, escolha a opção correta e adicione.
Coloque o nome DetectController.
CRIANDO A
APLICAÇÃO
WEB
Passo 11: Clique com o botão direito na raiz da aplicação e crie um diretório chamado TempImages. Este
diretório será responsável por armazenar as imagens durante processo de detecção.
CRIANDO A
APLICAÇÃO
WEB
Passo 12: Criaremos uma view para exibição dos resultados da detecção. Clique com o botão direito na pasta
Views/Detect depois clique para adicionar uma view. Coloque o nome de Detection. Escolha as opções
conforme a figura do lado direito.
CRIANDO A
APLICAÇÃO
WEB
Passo 13: Agora vamos editar a view criada anteriormente. Edite o código conforme a figura abaixo.
@{
ViewBag.Title = "Resultado | ";
}
<div class="row">
<h2>Resultado</h2>
<img src="@ViewBag.Path" class="center-block"
title="detectedImage" height="200" />
<br />
</div>
</div>
CRIANDO A
APLICAÇÃO
WEB
Passo 14: Abra o arquivo Controller/DetectController.cs, criado no passo 8 e edite o código conforme a figura
abaixo. Observe a variável imagePath, ela contém o caminho do diretório TempImages, criado previamente. O
método “Detection” agora poderá receber uma imagem e salvá-la. Vamos testar a seguir.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.IO;
using System.Threading.Tasks;
namespace WebApplication___Face_Detection___MVC.Controllers
{
public class DetectController : Controller
{
[HttpPost]
public ActionResult Detection(HttpPostedFileBase image)
{
if (image != null)
{
// uploading image and getting path
string filename = System.IO.Path.GetFileName(image.FileName);
string path = System.IO.Path.Combine(Server.MapPath("~/TempImages/"), filename);
image.SaveAs(path);
string imagePath = $"/TempImages/{filename}";
ViewBag.Path = imagePath;
}
return View();
}
}
}
CRIANDO A
APLICAÇÃO
WEB
Passo 15: Vamos testar a primeira parte deste How To. Clique para compilar e rodar a aplicação. E deverá abrir
a página inicial. Clique no input “Escolher arquivo” e escolha um arquivo de imagem .jpeg em seu computador.
Depois clique para enviar.
CRIANDO A
APLICAÇÃO
WEB
Passo 16: A imagem escolhida deverá aparecer em outra página conforme vemos na figura do lado esquerdo.
Verifique também, através do explorer, o diretório TempImages; ele deverá conter a imagem que você enviou.
UNIVERSIDADE
1500FH
Seção 2:
Contratando uma assinatura da API de
Reconhecimento Facial do Azure
!!! NÃO EXECUTE ESTA SEÇÃO, APENAS VISUALIZE. !!!
CONTRATANDO
API AZURE
Não execute esta etapa, apenas veja como criar uma assinatura; a execução do exercício prosseguirá na
seção 3.
Passo 17: Aqui veremos como criar uma assinatura de API no Azure (durante este treinamento você não irá
criar a assinatura, serão fornecidas as chaves nos passos seguintes). Acesse o Portal Azure (
https://portal.azure.com/), no menu lateral esquerdo clique em Resource Groups. Veja que na aba “All
resources” temos um item chamado “face-api-cs” que é uma assinatura de API que já temos.
CONTRATANDO
API AZURE
seção 3.
Passo 18: Clique em Universidade_1500

CONTRATANDO
API AZURE
seção 3.
Passo 19: Agora clique para adicionar um novo recurso (resource), que será a assinatura da API
CONTRATANDO
API AZURE
seção 3.
Passo 20: Encontre a API que queremos contratar pesquisando por cognitive. Clique em “Cognitive Services” e
siga para o próximo passo.
CONTRATANDO
API AZURE
seção 3.
Passo 21: Caso fossemos criar uma nova assinatura, iríamos clicar em Create, depois de escolhermos as opções,
mas o intuito aqui era apenas mostrar como é realizado o processo da criação de uma subscrição.
UNIVERSIDADE
1500FH
Seção 3:
Integrando a Aplicação Web com a API de
Reconhecimento Facial
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 22: De volta ao Visual Studio, clique com o botão direito na solução e adicione um novo projeto.
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 23: Escolha a opção Console App, renomeie e clique em Ok, criando assim um novo projeto em nossa
solução.
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 24: Agora iremos adicionar a biblioteca Azure que permitirá que nossa aplicação seja integrada com a API de Reconhecimento
Facial, para isso clique com o botão direito na solução em Manage NuGet Packages for Solution. Na janela aberta, pesquise por
CongnitiveServices Vision Face certificando-se de que a opção Include prerelease está habilitada (caso contrário você não encontrará a
biblioteca que precisamos), selecione no lado direito todos os Projetos da Solução e clique para instalar
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 25: Confira se a instalação ocorreu corretamente. No menu do projeto expanda “References”
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 26: Crie um novo diretório dentro do projeto Face-API, nomeie como detection depois clique com o botão direito
nele e selecione para criar um novo item, conforme a figura do lado direito. Uma janela será aberta; siga as orientações do
próximo passo.
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 27: Selecione a opção Class, dê o nome ImageDetector.cs e adicione a nova classe
INTEGRANDO A using System;
using System.Linq;
APLICAÇÃO COM using System.Text;
Passo 28: Abra o arquivo recém criado, A API using System.IO;
using Newtonsoft.Json;
ImageDetector.cs, e edite o seu código using Microsoft.Azure.CognitiveServices.Vision.Face;
using Microsoft.Azure.CognitiveServices.Vision.Face.Models;
namespace Face_API.detection
{
public class ImageDetector
{
private static readonly FaceAttributeType[] faceAttributes =
{
FaceAttributeType.Age,
FaceAttributeType.Gender,
FaceAttributeType.HeadPose,
FaceAttributeType.Smile,
FaceAttributeType.FacialHair,
FaceAttributeType.Glasses,
FaceAttributeType.Emotion,
FaceAttributeType.Hair,
FaceAttributeType.Makeup,
FaceAttributeType.Occlusion,
FaceAttributeType.Accessories,
FaceAttributeType.Blur,
FaceAttributeType.Exposure,
FaceAttributeType.Noise
};
// Detect faces in a local image

public async Task<string> DetectLocalAsync(FaceClient faceClient, string
imagePath)
{
using (Stream imageStream = File.OpenRead(imagePath))
{
IList<DetectedFace> faceList =
await faceClient.Face.DetectWithStreamAsync(
imageStream, true, false, faceAttributes);
return GetFaceAttributes(faceList);
}
}
// serializing
private static string GetFaceAttributes(IList<DetectedFace> faceList)
{
string faceListSerialized = JsonConvert.SerializeObject(faceList);
return faceListSerialized;
}
}
}
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 29: Clique com o botão direito no projeto e selecione para criar um novo item do tipo classe. Nomeie como ConfigData.cs.
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 30: Abra o arquivo ConfigData.cs e edite seu código, neste arquivo ficam
a chave da api (subscriptionKey) e o seu endpoint (faceEndpoint).
using System;
using System.Linq;
using System.Web;
namespace WebApplication___FaceDetection
{
public class ConfigData
{
public const string subscriptionKey = "00dfde51b2e1473885390af19bb62bb7";
public const string faceEndpoint = "https://eastus.api.cognitive.microsoft.com";
}
}
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 31: Clique em References da WebApplication com o botão direito e selecione para adicionar uma nova referência. Selecione
FaceAPI e clique em ok; desta forma iremos referenciar o projeto FaceAPI criado anteriormente.
INTEGRANDO A
APLICAÇÃO COM using System;
using System.Linq;
A API using System.Web;
using System.Web.Mvc;
using Microsoft.Azure.CognitiveServices.Vision.Face;
using Microsoft.Azure.CognitiveServices.Vision.Face.Models;
using Face_API.detection;
Passo 32: Agora vamos abrir novamente o arquivo using Newtonsoft.Json;
Controllers/DetectController.cs e editar o seu código. namespace WebApplication___FaceDetection.Controllers
{
public class DetectController : Controller
{
[HttpPost]
public async Task<ActionResult> Detection(HttpPostedFileBase image)
{
if (image != null)
{
// uploading image and getting path
string filename = System.IO.Path.GetFileName(image.FileName);
string path = System.IO.Path.Combine(Server.MapPath("~/ TempImages /"),
filename);
image.SaveAs(path);
string imagePath = $"/TempImages/{filename}";
// Face API SDK Client

FaceClient faceClient = new FaceClient
(new ApiKeyServiceClientCredentials(ConfigData.subscriptionKey),
new System.Net.Http.DelegatingHandler[] { });
faceClient.Endpoint = ConfigData.faceEndpoint;
// detection method
ImageDetector detector = new ImageDetector();
string jsonSerialized = await detector.DetectLocalAsync(faceClient, path);
// deserializes results to object

IList<DetectedFace> results =
JsonConvert.DeserializeObject<IList<DetectedFace>>(jsonSerialized);
// send to front-end
ViewBag.Results = results;
ViewBag.Path = imagePath;
}
return View();
}
}
}
INTEGRANDO A
APLICAÇÃO COM
A API @using Microsoft.Azure.CognitiveServices.Vision.Face.Models;
@{ ViewBag.Title = "Resultado | "; var results = ViewBag.Results; }
Passo 33: Agora vamos abrir o arquivo <div class="row">

Views/Detect/Detection.cshtml e editar o seu código. <h2>Resultado</h2>
@foreach (var result in results)

{
<p>
<strong>Gender: </strong>
@result.FaceAttributes.Gender.ToString()
<strong>Age: </strong>
@result.FaceAttributes.Age.ToString()
@{ // hair
IList<HairColor> hairColors = result.FaceAttributes.Hair.HairColor;
string hairColor = "(";
foreach (HairColor hC in hairColors)
{
string color = hC.Color.ToString();
string confidence = String.Format(" {0:F1}% ", hC.Confidence * 100);
hairColor += color;
hairColor += confidence;
}
hairColor += ")";
}
<strong>Hair: </strong>
@hairColor @String.Format("Bald {0:F1}% ", result.FaceAttributes.Hair.Bald * 100)
<br />
@{ // facialHair
FacialHair facialHair = result.FaceAttributes.FacialHair;
string facialHairString = "(";
facialHairString += String.Format(" Beard: {0}", facialHair.Beard.ToString());
facialHairString += String.Format(" Moustache: {0}", facialHair.Moustache.ToString());
facialHairString += String.Format(" Sideburns: {0}", facialHair.Sideburns.ToString());
facialHairString += ")";
}
<strong>FacialHair: </strong>
@facialHairString
<strong>Glasses: </strong>
@result.FaceAttributes.Glasses.ToString()
</p>
}
<p><strong>Total de Faces Detectadas: </strong>@results.Count</p>
<img src="@ViewBag.Path" class="center-block" title="detectedImage" height="200" />
<br />
</div>
</div>
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 34: Compile e rode a aplicação. Envie uma imagem com alguns rostos.
Você deverá obter um resultado similar ao que vemos abaixo
INTEGRANDO A
APLICAÇÃO COM
A API
Passo 34: Compile e rode a aplicação. Envie uma imagem com alguns rostos.
Você deverá obter um resultado similar ao que vemos abaixo
CORREÇÃO
• Após e execução dos exercícios, você deve nos encaminhar:

• PRINT da Janela “Solution Explorer” no Visual Studio
• PRINT do código da classe ImageDetector.cs
• PRINT do código do controller DetectController.cs
• PRINT do código da classe ConfigData.cs
• Envie-nos o tempo que você levou para realizar os exercícios (IMPORTANTE)
• Envie o que foi solicitado para os seguintes e-mails

• jfarias@1500fh.com : Jefferson Farias
• lsouza@1500fh.com : Luan Souza
Obrigado e Bons Estudos ☺

Exercicio 10 - Aplicação Web para Deteção Facial

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Exercicio 10 - Aplicação Web para Deteção Facial

Enviado por

Direitos autorais:

Formatos disponíveis

transformando

Obs: Para acessar o slide correspondente ao link segure Ctrl+ Clique

Instalação Visual Studio Community 2017

• Construção de uma Aplicação Web usando arquitetura MVC

Passo 1: Abra o Visual Studio e clique para criar um novo projeto.

Passo 4: Clique com o botão direito no projeto e crie o diretório Img.

Passo 5: Baixe o arquivo 1500.png contido no slide de materiais.

Passo 6: Baixe o arquivo Site.css contido no slide de materiais.

Passo 7: Edite o arquivo Views/Home/Index.cshtml, conforme o código abaixo.

@using (Html.BeginForm("Detection", "Detect",

Passo 8: Edite o arquivo Views/Shared/_Layout.cshtml

<div class="container body-content">

Passo 18: Clique em Universidade_1500

// Detect faces in a local image

// Face API SDK Client

// deserializes results to object

@{ ViewBag.Title = "Resultado | "; var results = ViewBag.Results; }

Passo 33: Agora vamos abrir o arquivo <div class="row">

Views/Detect/Detection.cshtml e editar o seu código. <h2>Resultado</h2>

@foreach (var result in results)

• Após e execução dos exercícios, você deve nos encaminhar:

• Envie o que foi solicitado para os seguintes e-mails

Obrigado e Bons Estudos ☺

Você também pode gostar