人脸识别客户端应用程序_如何在应用程序中使用功能识别设置人脸检测

人脸识别客户端应用程序

by Rohit Ramname

由Rohit Ramname

如何在应用程序中使用功能识别设置人脸检测 (How you can set up face detection with feature identification in your app)

使用Microsoft Cognitive Services，Azure和JavaScript查找面Kong (Find the faces with Microsoft Cognitive Services, Azure, and JavaScript)

什么是人脸检测？ (What is face detection?)

You have probably seen face detection in action many times now, in different applications — for example in your phone, in photos on Facebook. Face detection results in faces having rectangles around them. So, as the name suggests, it’s simply detecting a face in an image. This is also a type of machine learning use case.

您可能已经多次在不同的应用程序中看到面部检测的实际效果，例如在手机中，在Facebook上的照片中。 脸部检测会导致脸部周围具有矩形。 因此，顾名思义，它只是在检测图像中的人脸。 这也是机器学习用例的一种。

In this tutorial, we will be learning how to perform face detection using Microsoft Cognitive Services provided by Azure, and simple JavaScript and CSS.

在本教程中，我们将学习如何使用Azure提供的Microsoft Cognitive Services以及简单的JavaScript和CSS进行面部检测。

我将从本教程中学到什么？ (What will I learn from this tutorial?)

By the end of this tutorial, we should be able to achieve the result below.

在本教程结束时，我们应该能够实现以下结果。

Please notice that, along with face detection, Azure also gives us the approximate age and if the person is wearing glasses, features that can be requested in the URL.

请注意，除了面部检测外，Azure还可以为我们提供大概的年龄，如果该人戴着眼镜，则可以在URL中进行请求。

This tutorial will ensure that we are set up with an Azure subscription and we are getting the required results back.

本教程将确保我们设置了Azure订阅，并且可以获取所需的结果。

This exercise assumes that you have a Microsoft Azure subscription. If you don’t have one, you can create it for free by going to Microsoft’s Azure website. It will ask you for credit card information but your card is never charged unless paid services are purchased (which is not required for this demo).

本练习假定您具有Microsoft Azure订阅。 如果您还没有，则可以访问 Microsoft的Azure 网站免费创建它。 它将要求您提供信用卡信息，但是除非购买了付费服务(此演示不需要)，否则您的卡不会被收取任何费用。

开始吧 (Let’s start)

First, we login to our Microsoft Azure subscription.

首先，我们登录到Microsoft Azure订阅。

Go to “Portal.azure.com” and login with your ID.

转到“ Portal.azure.com”并使用您的ID登录。

Click “Create Resource” and search for “Face”.

单击“创建资源”，然后搜索“面Kong”。

From the search results, select Face (Category : “AI + Machine Learning”).

从搜索结果中选择人脸(类别：“ AI +机器学习”)。

Click Create.

单击创建。

You will have to complete a simple form which will ask you to:

您将需要填写一个简单的表格，要求您：

• give a name to your resource
  给您的资源起个名字
• select your subscription
  选择您的订阅
• select your geolocation where your user base will mostly reside
  选择您的用户群主要居住的地理位置
• select your pricing plan (there is a free plan that you can select for trial purposes).
  选择您的定价计划(您可以选择免费计划进行试用)。
• then click “Create New”
  然后点击“新建”

Once you follow these steps, Azure will deploy your services and create subscription keys.

完成这些步骤后，Azure将部署您的服务并创建订阅密钥。

Open your subscription by clicking on it and go to the “Overview” section.

通过单击打开您的订阅，然后转到“概述”部分。

This is the place where you can find your subscription keys and access keys. You will need to send an access key with each API call header for authentication.

在这里可以找到您的订阅密钥和访问密钥。 您将需要发送带有每个API调用标头的访问密钥以进行身份​​验证。

That’s it for the setup.

设置就是这样。

让我们测试一下 (Let’s test it)

Now, we can test if our API is working using a tool called Postman.

现在，我们可以使用称为Postman的工具测试我们的API是否正常工作。

Postman is very popular tool to test the API calls.

邮递员是测试API调用的非常流行的工具。

Open Postman and the use the End Point in your Azure subscription as the URL. Make sure the operation selected in the dropdown is “POST”.

打开Postman，然后将Azure订阅中的端点用作URL。 确保下拉菜单中选择的操作为“ POST”。

In the “Headers” tab, add:

在“标题”标签中，添加：

• the “Key” “Ocp-Apim-Subscription-Key” with “Value” [your Azure subscription keys]
  “密钥”“ Ocp-Apim-Subscription-Key”和“ Value” [您的Azure订阅密钥]
• the “Key” “Content-Type” with Value “application/octet-stream”
  值“应用程序/八位字节流”的“键”“内容类型”

In the “Body” tab, choose “binary” and click “Choose Files” to select a picture with a human face.

在“身体”选项卡中，选择“二进制”，然后单击“选择文件”以选择带有人脸的图片。

Click “Send”.

点击“发送”。

You should see a response like below from the Azure Cognitive Services API calls.

您应该从Azure Cognitive Services API调用中看到如下响应。

[ { “faceId”: “4f3df6bb-83d9–45ea-bac5-d60cac5a1623”, “faceRectangle”: { “top”: 456, “left”: 475, “width”: 330, “height”: 330 } }]

Azure automatically assigns an ID to each face it can detect, and gives the co-ordinates of the face on that picture.

Azure自动为其可以检测到的每张脸分配一个ID，并在该图片上给出该脸的坐标。

You can can ask Azure for different face attributes. For the complete list of attributes, please refer to the Microsoft Website.

您可以要求Azure提供不同的面Kong属性。 有关属性的完整列表，请访问Microsoft网站 。

For example, to request if a person is wearing sunglasses and to get an estimated age, you can send the query string: https://eastus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes=age,glasses. For this request, Azure will send the estimated age, type of glasses (or no glasses), and emotion analysis.

例如，要请求一个人是否戴着墨镜并获得估计的年龄，可以发送查询字符串： https : //eastus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes= age ，眼镜 。 对于此请求，Azure将发送估计的年龄，眼镜类型(或不眼镜)和情感分析。

[ { “faceId”: “f8721afb-f9d8–4372-ab43–23fd429aafbf”, “faceRectangle”: { “top”: 640, “left”: 297, “width”: 202, “height”: 202 }, “faceAttributes”: { “age”: 31, “glasses”: “Sunglasses”, “emotion”: { “anger”: 0, “contempt”: 0.001, “disgust”: 0, “fear”: 0, “happiness”: 0, “neutral”: 0.998, “sadness”: 0, “surprise”: 0 } } }]

Great. Looks like we have a basic setup ready.

大。 看起来我们已经准备好基本设置。

But before you stop reading this article and close the window…

但是在您停止阅读本文并关闭窗口之前……

让我们来看看有趣的东西： (Lets get to the interesting stuff:)

We will hook all this up to a webpage to see the results.

我们将所有这些都链接到网页上以查看结果。

We will need a simple HTML page with File Upload Control so that we can select an image file.

我们将需要一个带有文件上传控件的简单HTML页面，以便我们选择一个图像文件。

<div id=”containerDiv”> <div id=”titleDiv”> Welcome </div> <div id=”content”> <div id=”btnUpload”> <div class=”upload-btn-wrapper”> <button class=”btn” >Upload a file</button> <input type=”file” name=”myfile” id=”upload” /> </div></div> <div id=”features”> </div> <div id=”imgDiv”><img id=”imgx” class=”imageContainer” ><div id=”face”></div></div></div> </div>

Let’s break it down to understand what this is.

让我们分解以了解这是什么。

This page has two sections: the title and the content.

该页面分为两部分：标题和内容。

Title <div> is quite simple. It is just a title of the app with an ID.

标题<d iv>非常简单。 它只是带有ID的应用程序的标题。

Content <div> has three sections:

内容<d iv>具有三个部分：

• upload <button>, which is the main feature button of this app

  上传<butt on>，这是此应用程序的主要功能按钮

• features <div>, which will contain features of the face image

  features <d iv>，其中将包含面部图像的特征

• image <div>, which will render the selected image

  图像<d iv>，它将呈现所选图像

Further down, Image div has two components.

再往下，Image div有两个组件。

• image id =“imgx”, which is the actual image selected, and

  image id =“imgx” ，它是选择的实际图像，并且

• <div> with id=“face”, which is the face identification rectangle.

  <d iv> with id= “ face”，这是面部识别矩形。

That’s it for the HTML part.

HTML部分就是这样。

现在的核心部分-JavaScript调用 (Now the core part — the JavaScript call)

码 (Code)

First, add a listener to the “File Selected” event when a file is selected.

首先，在选择文件后，将侦听器添加到“ File Selected”事件中。

document.getElementById(‘upload’).addEventListener(‘change’, fileChange, false);

document.getElementById('upload').addEventListener('change', fileChange, false);

Add the fileChange event function:

添加fileChange事件函数：

function fileChange(event){ if(event.target.files && event.target.files.length >= 0) { var file1= event.target.files[0]; var reader = new FileReader(); reader.onload = (event) => { document.getElementById(“imgx”).src=event.target.result; getFaceDetails(file1); } } reader.readAsDataURL(event.target.files[0]); }

When the event is raised, that is, the file is selected:

引发事件时，即选择文件：

• the event details are readvar file1= event.target.files[0];

  读取事件详细信息var file1= event.target.files[0];

• a new instance object of FileReader class is createdvar reader = new FileReader();

  创建FileReader类的新实例对象。var var reader = new FileReader();

• the content of the file selected in the event is read reader.readAsDataURL(event.target.files[0]);

  在事件中选择的文件的内容为reader.readAsDataURL(event.target.files[0]);

Now, when the file is loaded completely, the src property of the imgx element is set:

现在，当文件完全加载后，将设置imgx元素的src属性：

document.getElementById(“imgx”).src=event.target.result;

and it calls the function which will internally get the face information from the image:

然后调用该函数，该函数将从图像内部获取人脸信息：

getFaceDetails(file1);

Let’s look at the getFaceDetails function:

让我们看一下getFaceDetails函数：

function getFaceDetails(file){ var xmlHttp = new XMLHttpRequest(); var url=”https://eastus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes=age,glasses"; xmlHttp.open(“POST”,url,true); xmlHttp.setRequestHeader(“Content-Type”, “application/octet-stream”);

xmlHttp.setRequestHeader(“Ocp-Apim-Subscription-Key”, “[Azure Face API subscription key]”); xmlHttp.send(file); xmlHttp.onreadystatechange = function (response) { if (this.readyState == 4 && this.status == 200) { let face=JSON.parse(this.responseText) var oleft = document.getElementById(“imgx”).offsetLeft; var otop = document.getElementById(“imgx”).offsetTop; document.getElementById(“face”).style.left=oleft+face[0].faceRectangle.left+”px”; document.getElementById(“face”).style.top=otop+face[0].faceRectangle.top+”px”; document.getElementById(“face”).style.width=face[0].faceRectangle.width+”px”; document.getElementById(“face”).style.height=face[0].faceRectangle.height+”px”; document.getElementById(“features”).innerText=”Age: “+face[0].faceAttributes.age +” Glasses:”+face[0].faceAttributes.glasses ; } }}

WHOA…!! That looks dirty.

哇 ！！！ 看起来很脏。

说明 (Explanation)

Yes… it is… a bit! But let me explain.

是的...有点... 但是，让我解释一下。

The first few lines of this function is just opening a JavaScript XMLHttpRequest with URL and request headers. The URL is the Azure URL that you provided above in Postman — or you can get in from the Azure portal.

该函数的前几行只是打开带有URL和请求标头JavaScript XMLHttpRequest 。 该URL是您在邮递员上面提供的Azure URL，或者您可以从Azure门户进入。

var xmlHttp = new XMLHttpRequest(); var url=”https://eastus.api.cognitive.microsoft.com/face/v1.0/detect?returnFaceAttributes=age,glasses"; xmlHttp.open(“POST”,url,true);

We then added two request headers. The first is the Ocp-Apim-Subscription-Key and your Azure subscription key. The second is the Content-Type key with the application/octet-stream value. Since we are going to send an image in a request, application/octet-stream is the type for binary data.

然后，我们添加了两个请求标头。 第一个是Ocp-Apim-Subscription-Key和您的Azure订阅密钥。 第二个是具有application/octet-stream值的Content-Type键。 由于我们将在请求中发送图像，因此application/octet-stream是二进制数据的类型。

xmlHttp.setRequestHeader(“Ocp-Apim-Subscription-Key”, “[Azure Face API subscription key]”);

xmlHttp.setRequestHeader(“Content-Type”, “application/octet-stream”);

And then we make the call:

然后我们打电话：

xmlHttp.send(file);

When the request is completed, this has a ready state of 4. We get the coordinates of the face portion of the image in JSON format along with the features.

请求完成后，它的就绪状态为4。我们以JSON格式以及功能获取图像的面部部分的坐标。

xmlHttp.onreadystatechange = function (response) { if (this.readyState == 4 && this.status == 200) { let face=JSON.parse(this.responseText)

Since we are going to render the image at the center, we need the left and top coordinates of the rendered image. This enables us to position our Face Rectangle <div> accordingly.

由于我们要在中心渲染图像，因此需要渲染图像的左坐标和顶坐标。 这使我们能够相应地定位面部矩形<d iv>。

var oleft = document.getElementById(“imgx”).offsetLeft;var otop = document.getElementById(“imgx”).offsetTop;

And now we just have to draw a rectangle (“face” <div>) around the face on the rendered image.

现在我们只需要在渲染图像的脸部周围绘制一个矩形(“ face” <d iv>)。

document.getElementById(“face”).style.left=oleft+face[0].faceRectangle.left+”px”; document.getElementById(“face”).style.top=otop+face[0].faceRectangle.top+”px”; document.getElementById(“face”).style.width=face[0].faceRectangle.width+”px”; document.getElementById(“face”).style.height=face[0].faceRectangle.height+”px”;

And read feature attributes as well in the features <div>.

并在要素<d iv>中读取要素属性。

document.getElementById(“features”).innerText=”Age: “+face[0].faceAttributes.age +” Glasses:”+face[0].faceAttributes.glasses ;

And that concludes the JS part.

到此，JS部分结束了。

Below is the basic CSS styling for rendering purposes. Please note that we are using CSS grid.

以下是用于渲染目的的基本CSS样式。 请注意 ，我们正在使用CSS网格。

#containerDiv{ display:grid; grid-template-areas:  “title” “content”}

#imgDiv{ background-repeat: no-repeat; border: 1px solid #bbb; border: solid; grid-area:image;}#face{ position:absolute; border:solid; border-style: ridge; border-color: cornsilk;}#features{ grid-area:features}#titleDiv{ height: 100px; display: flex; justify-content: center; align-items: center; font-size: -webkit-xxx-large; background-color: black; color: sandybrown; font-family: sans-serif; grid-area:title;}

#content{ display:grid; justify-items:center; grid-area:content; grid-template-areas:  “upload” “features” “image”}#btnUpload{ grid-area:upload;}.upload-btn-wrapper { position: relative; overflow: hidden; display: inline-block; padding: 2%; width: 100vw; display: flex; justify-content: center; } .btn { border: 2px solid gray; color:white; background-color:cornflowerblue; padding: 8px 20px; border-radius: 8px; font-size: 20px; font-weight: bold; }  .upload-btn-wrapper input[type=file] { font-size: 100px; position: absolute; left: 0; top: 0; opacity: 0; }

It’s very important to keep the position of the image control (imgx) and Face <div> absolute for proper rendering. Otherwise, Face <div> will not be rendered over the image. It will be somewhere on the side as an inline effect.

保持图像控件( imgx )和Face <d i v> ab imgx 位置对于正确渲染非常重要 。 否则wise, Face <div>将不会在图像上渲染。 作为嵌入式效果，它将在侧面的某个位置。

我们去... (There we go…)

Now you can open the webpage, select the image with human face in it, and see the results.

现在，您可以打开网页，选择其中包含人脸的图像，然后查看结果。

The face detection can be further improved by requesting additional features in the URL from Azure. For example, you can add sentiment display.

通过向Azure请求URL中的其他功能，可以进一步改善人脸检测。 例如，您可以添加情绪显示。

I hope you found this tutorial exciting and will build some cool stuff with it.

我希望您发现本教程令人兴奋，并会为您提供一些不错的东西 用它。

Happy Learning!

学习愉快！

翻译自: https://www.freecodecamp.org/news/how-you-can-set-up-face-detection-with-feature-identification-in-your-app-1d6f1c14c79/

人脸识别客户端应用程序