vue 使用人脸识别_使用Vue.js和Kairos构建简单的人脸识别应用

vue 使用人脸识别

Face Detection and Recognition have become an increasingly popular topic these days. It's a great advantage for a machine to know which user is in a picture. The applications of facial recognition in our world today are endless. From Face, iD unlock to identifying criminals on the run using real-time analysis of video feed.

近年来，人脸检测和识别已成为越来越受欢迎的话题。机器知道图片中的用户是一个很大的优势。面部识别在当今世界中的应用层出不穷。从Face，iD解锁到使用实时视频输入分析来识别犯罪分子。

我们将建立什么 ( What we'll build )

In this article, we'll build a demo app with Kairos service in which users can upload different images of labeled faces and also try to recognize a person from an uploaded face

在本文中，我们将使用Kairos服务构建一个演示应用，其中用户可以上传带有标签的面部的不同图像，还可以尝试从上传的面部中识别出一个人

什么是凯罗斯 ( What is Kairos )

Kairos is a leading AI engine provider which provides ‘Human Analytics' features like Face Detection, Face Identification, Face Verification, etc. More features here. These features can be used to gather unique, real-time insights about users as they interact with your product.

Kairos是领先的AI引擎提供商，提供诸如面部检测，面部识别，面部验证等“人类分析”功能。此处提供更多功能。这些功能可用于在用户与您的产品互动时收集有关用户的独特实时见解。

安装 ( Installation )

The front-end part of the application is built with a Progressive Javascript Framework Vue.js and a node server on the backend which handles the interaction with Kairos API.

该应用程序的前端部分由Progressive Javascript Framework Vue.js和后端的节点服务器构建，该节点服务器处理与Kairos API的交互。

依存关系 (Dependencies)

Before we begin, you need some things set up on your local machine

在开始之前，您需要在本地计算机上进行一些设置

Node installed已安装节点
Node Package Manager (npm ) installed安装了节点软件包管理器（ npm ）

Once you confirm your installation, you can continue.

确认安装后，即可继续。

步骤1：建立Kairos帐户 ( Step 1: Create a Kairos Account )

注册一个免费帐户。

@media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }} @media (max-width: 1280px) { .go-go-gadget-react img:first-child { display: none; } }@media (max-width: 780px) {.go-go-gadget-react { flex-direction: column; }.go-go-gadget-react img { margin-left: 0 !important; margin-bottom: 12px !important; }.header-thingy { margin-top: 20px; }.button-thingy { margin-left: 0 !important; margin-top: 12px !important; }}

After signing up, you'll be redirected to the dashboard with your credentials

注册后，将使用您的凭据将您重定向到仪表板

PS: Note your App ID and Key ( you'll need them later )

PS：记下您的App ID和Key （稍后将需要它们）

步骤2：设置节点服务器 ( Step 2: Set Up A Node Server )

Initialize your node project and create a package.json file with:

初始化您的节点项目，并使用以下命令创建一个package.json文件：

npm init

Install necessary node modules/dependencies :

安装必要的节点模块/依赖项：

npm install fs express connect-multiparty kairos-api cors body-parser --save

fs - we need this to convert our image into a base64 mode for attachment express - we need this to enable our API routes connect-multiparty - needed to parse HTTP requests with content-type multipart/form-data kairos-api - Node SDK for Kairos cors - we need this to enable cors body-parser - we need this to attach the request body on express req object

fs-我们需要此将图像转换为base64模式以进行附件表达-我们需要此功能以使我们的API路由connect-multiparty-解析具有内容类型multipart / form-data kairos-api的HTTP请求所需-Node SDK for Kairos cors-我们需要此功能以启用cors主体解析器-我们需要此功能将请求主体附加到express req对象上

Create an index.js file in your root directory and require the installed dependencies :

在您的根目录中创建一个index.js文件，并需要安装依赖项：

const fs = require('fs');const cors = require('cors');const express = require('express');const Kairos = require('kairos-api');const bodyParser = require('body-parser');const multipart = require('connect-multiparty');const app = express();app.use(cors());app.use(bodyParser.urlencoded({ extended: false }));app.use(bodyParser.json());const multipartMiddleware = multipart();[...]

Next, configure your Kairos client in the index.js file:

接下来，在index.js文件中配置Kairos客户端：

// API Configurations for KAIROS
let kairo_client = new Kairos('APP_ID', 'APP_KEY');

Replace APP_ID and APP_KEY with the details from your dashboard

用仪表板中的详细信息替换APP_ID和APP_KEY

Add the route for uploading images to Kairos gallery. Let's call it /upload:

添加将图像上传到Kairos画廊的路线。我们称之为/upload ：

[...]app.post('/upload', multipartMiddleware, function(req, res) {// get base64 version of image and send that to Kairos for traininglet base64image = fs.readFileSync(req.files.image.path, 'base64');var params = {image: base64image,subject_id: req.body.name,gallery_name: 'rekognize',};console.log('sending to Kairos for training');kairos_client.enroll(params).then(function(result) {// return status of uploadreturn res.json({'status' : true });}).catch(function(err) { // return status if uploadreturn res.json({'status' : false});});});[...]

Add the route for recognizing a person from an uploaded face. Let's call it /verify:

添加用于从上传的面Kong中识别人的路线。我们称之为/verify ：

[...]app.post('/verify', multipartMiddleware, function(req, res) {// get base64 version of image and send that to Kairos for recognitionlet base64image = fs.readFileSync(req.files.image.path, 'base64');var params = {image: base64image,gallery_name: 'rekognize',};console.log('sending to Kairos for recognition');kairos_client.recognize(params).then(function(result) {// return the responsereturn res.json(result.body);}).catch(function(err) { // return status code as falsereturn res.json({'status' : false});});  });

Once the user makes a POST request to the /upload route, the route gets the image file from the HTTP Request, converts it to a base64 version and then uploads it to Kairos with the identifier for the image and the gallery you want the image to be in. You get a JSON Response telling you whether the upload was successful or not.

一旦用户向/upload路由发出POST请求，该路由就会从HTTP请求中获取图像文件，将其转换为base64版本，然后将其与图像identifier以及您希望该图像的gallery上传至Kairos。进入。您会收到一个JSON响应，告诉您上传是否成功。

Also, when the user makes a POST request to the /verify route, the route gets the image file from the HTTP Request, converts it to a base64 version and then sends it to Kairos with the gallery name for it to check if there's anyone with a similar face to the face being uploaded in the picture. Kairos then sends a JSON Response with the result of the operation, and we take further action on based on the response.

另外，当用户向/verify路由发出POST请求时，该路由会从HTTP请求中获取图像文件，将其转换为base64版本，然后将其以gallery名称发送给Kairos，以检查是否有人通过与图片中上传的脸相似的脸。然后，Kairos发送带有操作结果的JSON响应，我们将根据响应采取进一步的措施。

步骤3：建立前端 ( Step 3: Build the Frontend )

To build the frontend, we would be using Vue.js as already mentioned earlier.

要构建前端，我们将使用前面已经提到的Vue.js。

Install the Vue CLI :

安装Vue CLI：

npm install -g vue-cli

Create a simple Vue project using the Vue CLI tool installed earlier:

使用先前安装的Vue CLI工具创建一个简单的Vue项目：

vue init simple facerecognizer

Inside the facerecognizer directory, create an index.html file and in the index.html file we have some basic forms that we need for the app to work.

在facerecognizer目录中，创建一个index.html文件，在index.html文件中，我们需要一些基本形式才能使应用程序正常工作。

训练 (Training)

Firstly, we need a form that allows the user submit a picture of themselves to our node server and then from the server to kairos for training - for kairos to be able to recognize a face, they need to have some base images uploaded to a gallery which forms the training data for the prediction of faces for our application.

首先，我们需要一种表格，该表格允许用户向我们的node server提交自己的图片，然后从服务器向kairos进行培训-为了使kairos能够识别人脸，他们需要将一些基本图像上传到图库中形成用于预测面部表情的训练数据，供我们的应用程序使用。

[...]<form enctype="multipart/form-data" @submit.prevent="onSubmit"><div class="form-group"><label for="">Name:</label><input type="text" required class="form-control" placeholder="eg Ore" name="subject_name" v-model="model.name"></div><div class="form-group"><label for="">File:</label><input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"></div><div class="form-group"><button class="btn btn-primary" >Upload</button>{{ loading }}{{ uploadStatus }}</div></form>[...]

We bind the upload form to an upload event handler. Once a user selects a file, there is a showPreview method called in the Vue instance below is invoked which shows a thumbnail preview of the image about to be uploaded to Kairos.

我们将上传表单绑定到上传事件处理程序。用户选择文件后，将在下面的Vue实例中调用一个showPreview方法，该方法显示即将上载到Kairos的图像的缩略图预览。

Now let's examine the Vue instance the upload form is linked to. We are going to build up our upload instance.

现在，让我们检查上传表单链接到的Vue实例。我们将建立我们的upload实例。

First, we specify element we want to bind the Vue Instance to and the data we want to render to the DOM:

首先，我们指定要绑定Vue实例的元素以及要渲染到DOM的数据：

[...]var upload = new Vue({el: '#pills-upload',data: function() {return {model: {name: '',image: null,item: ''},loading: '',uploadStatus: '',}},[...]

Then, we define the methods on our Vue instance. For this instance, we have the upload, showPreview and onSubmit methods.

然后，我们在Vue实例上定义方法。对于此实例，我们具有upload ， showPreview和onSubmit方法。

The upload method takes the image that was uploaded, resets the uploadStatus ( this is done so that when a user is performing multiple uploads, the status is cleared before each upload ) and then calls the showPreview method:

upload方法获取已上传的图像，重置uploadStatus （这样做是为了在用户执行多次上传时，在每次上传之前都会清除状态），然后调用showPreview方法：

[...]methods: {upload: function(files) {this.model.image = files[0];this.uploadStatus = '';this.showPreview(files[0]);},[...]

The showPreview method is responsible for displaying a preview of the uploaded image for the user to see how it looks

showPreview方法负责显示上载图像的预览，以供用户查看其外观

[...]showPreview: function(file) {var reader = new FileReader();reader.onload = function (e) {document.getElementById("face_preview1").src = e.target.result;};// read the image file as a data URL.reader.readAsDataURL(file);},[...]

The onSubmit method is triggered when the upload button is clicked. It builds the form, populates it with data, sends a post request to the node server. When a response is received from the server, the uploadStatus is updated to let the user know if the image was successfully uploaded:

单击upload按钮时， upload触发onSubmit方法。它构建表单，用数据填充表单，向node服务器发送发布请求。从服务器收到响应后， uploadStatus将更新，以使用户知道图像是否成功上传：

[...]onSubmit: function() {// Assemble form dataconst formData = new FormData()formData.append('image', this.model.image);formData.append('name', this.model.name);this.loading = "Uploading image....Please be patient."// Post to serveraxios.post('http://localhost:3128/upload', formData).then(res => {// Post a status messagethis.loading = '';if( res.status == true){this.uploadStatus = 'Image has been uploaded successfully';}else{this.uploadStatus = 'there was an issue with the upload, try again';}})}}});

承认 (Recognition)

Now we need to work on the recognition part of the app. Over here we have a form that facilitates the upload of the face picture to the server for recognition

现在，我们需要处理应用程序的recognition部分。在这里，我们有一个表单，可以将面部图片上传到服务器以进行识别

<form enctype="multipart/form-data" @submit.prevent="onSubmit">                       <div class="form-group"><label for="">Upload Picture of Person to Recognise:</label><input type="file" class="form-control" accept="image/*" name="image" v-on:change="upload($event.target.files)"></div><div class="form-group"><button class="btn btn-primary" >Rekognize</button><span class="fa fa-spin fa-spinner" id="verify_spinner" style="display:none;" aria-hidden="true"></span>                            {{ loading }}</div></form>

This is quite similar to the upload part; we bind the form to an event handler which makes the post request to the backend server that sends details to Kairos and gets JSON Response.

这与上载部分非常相似；我们将表单绑定到事件处理程序，该事件处理程序向后端服务器发出发布请求，该后端服务器将详细信息发送给Kairos并获取JSON响应。

Now we examine the Vue instance the recognize form is linked to.

现在，我们检查recognize表单链接到的Vue实例。

First, we specify the data we want to render to the DOM.

首先，我们指定要渲染到DOM的数据。

[...]var verify = new Vue({el: '#pills-verify',data: function(){return{model: {image : null,},loading: '',resultStatus: '',resultDetails: '',}},[...]

Then, we define the methods on our Vue instance. For this instance, we have the upload,showPreview and onSubmit methods.

然后，我们在Vue实例上定义方法。对于此实例，我们具有upload ， showPreview和onSubmit方法。

The upload method takes the image that was uploaded, clears the resultStatus and calls the showPreview method:

upload方法获取已上传的图像，清除resultStatus并调用showPreview方法：

[...]methods: {upload: function(files) {this.model.image = files[0];this.resultStatus = '';this.showPreview(files[0]);},[...]

The showPreview method is responsible for displaying a preview of the uploaded image for the user to see what is being sent for recognition:

showPreview方法负责显示上载图像的预览，以供用户查看正在发送的内容以进行识别：

[...]showPreview: function(file) {var reader = new FileReader();reader.onload = function (e) {document.getElementById("face_preview2").src = e.target.result;};// read the image file as a data URL.reader.readAsDataURL(file);},[...]

The onSubmit method is triggered when the rekognize button is clicked. It builds a form with data from the instance and sends a post request to the /verify route on the node server.

单击rekognize按钮时将触发onSubmit方法。它使用实例中的数据构建表单，然后将发布请求发送到node server上的/verify路由。

[...]onSubmit: function() {// Assemble form dataconst formData = new FormData()formData.append('image', this.model.image);formData.append('name', this.model.name);this.loading = "Attempting to recognize you..please wait."[...]

When a response is returned from the server, we examine the response from the server and the resultStatus is updated with the name of the user if there are no errors.

从服务器返回响应时，我们检查服务器的响应，如果没有错误，则使用用户名更新resultStatus 。

[...]// Post to serveraxios.post('http://localhost:3128/verify', formData).then(res => {// Post a status message saying the upload completethis.loading = '';if( !res.data.Errors){if(res.data.images[0].transaction.status != "success"){this.resultStatus = 'don\'t know who you are! Try uploading a picture of yourself first in upload section';}else{this.resultStatus = 'What\'s good ' + res.data.images[0].transaction.subject_id + '! ';}this.resultDetails = res.data.images[0].transaction;}else{this.resultStatus = 'don\'t know who you are! Try uploading a picture first in upload section';}})}}})

We all know it's not every-time we Kairos will be able to successfully identify the face. In the JSON response, we check if there was an error i.e. if Kairos couldn't find a matching face and we let the user know. If a matching face is successfully found, we send a welcome message.

我们都知道，并非每次Kairos都能成功识别出面部。在JSON响应中，我们检查是否存在错误，即Kairos是否找不到匹配的面Kong，并告知用户。如果成功找到匹配的面Kong，我们将发送欢迎消息。

Feel free to check out the source code here.

请在此处随意查看源代码。

结论 ( Conclusion )

We have seen how to make a Simple Face Recognition App. The applications of this are quite numerous, you could add face authentication as one of the ways to authenticate your users, or you could also just use it to know who is interacting with your product to provide personalized experiences for your users.

我们已经看到了如何制作一个简单的人脸识别应用程序。该应用程序的应用程序非常多，您可以添加人脸身份验证作为验证用户身份的方法之一，或者也可以使用它来识别谁与您的产品进行交互，从而为用户提供个性化的体验。

Feel free to leverage the free account given to you by Kairos to give your #NextBillionUsers a great experience!

随意利用Kairos给予您的免费帐户，为您的#NextBillionUsers提供出色的体验！