Building a Simple Face Recognition App with Vue.js and Kairos

综合技术 Scotch (源链)

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.

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

Related Course: Build an Online Shop with Vue

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.

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.

Dependencies

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

  • Node
    installed
  • Node Package Manager ( npm
    ) installed

Once you confirm your installation, you can continue.

Step 1: Create a Kairos Account

Sign up
for a free account.

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 )

Step 2: Set Up A Node Server

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

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

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

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:

// 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

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

[...]
    app.post('/upload', multipartMiddleware, function(req, res) {
        // get base64 version of image and send that to Kairos for training
        let 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 upload
            return res.json({'status' : true });
        }).catch(function(err) { 
            // return status if upload
            return res.json({'status' : false});
        });
    });
    [...]

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

[...]
    app.post('/verify', multipartMiddleware, function(req, res) {
        // get base64 version of image and send that to Kairos for recognition
        let 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 response
            return res.json(result.body);
        }).catch(function(err) { 
        // return status code as false
            return 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.

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.

Step 3: Build the Frontend

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

Install the Vue CLI :

npm install -g vue-cli

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

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.

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.

[...]
    
{{ loading }} {{ uploadStatus }}
[...]

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.

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

First, we specify element we want to bind the Vue Instance to and the data we want to render to the 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.

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:

[...]
        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: 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:

[...]
            onSubmit: function() {
                // Assemble form data
                const formData = new FormData()
                formData.append('image', this.model.image);
                formData.append('name', this.model.name);
                this.loading = "Uploading image....Please be patient."
                // Post to server
                axios.post('http://localhost:3128/upload', formData)
                .then(res => {
                    // Post a status message
                    this.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

{{ loading }}

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.

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

First, we specify the data we want to render to the 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.

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

[...]
        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: 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
.

[...]
            onSubmit: function() {
                // Assemble form data
                const 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.

[...]
                // Post to server
                axios.post('http://localhost:3128/verify', formData)
                .then(res => {
                    // Post a status message saying the upload complete
                    this.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.

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!

您可能感兴趣的

vue + typescript 进阶篇 vue + typescript 进阶篇 本文是继 Vue + TypeScript 新项目起手式 之后的进阶+踩坑配置,所以推荐先行阅读前文 完整阅读完之后,基本可以顺利在新项目中使用 vue + typescript 了 另外特别注意!!! 不推荐在已有项目上...
前端框架现状调查 – 中期结果(转) 前端框架现状调查 – 中期结果 本文转载自: 众成翻译 译者: chajn 链接: http://www.zcfy.cc/article/1144 原文: https://medium.com/@sachagreif/the-state-of-javascript-fr...
Testing Vue.js in Rails with Webpacker and Jest In the project I’m working on, I was given the task of investigating how to integrate Vue.js with our existing Rails app. So I started reading the...
vue当中设计Tabbar插件时的思考 之前做移动端的项目一般会选用Mint-ui或者是Vux框架,不得不说这两款都是非常棒非常好用的UI框架,能给开发工作节省很多时间。 在Mint-ui里关于tabbar的使用,有如下的Demo: 订单使用了以后就想...为什么一定要对每个mt-ta...
vue 基础–>进阶 教程(2): 指令、自定义指令、组件... 第二章 建议学习时间4小时 课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目。 本教程,将从零开始,教给大家vue的基础、高级操作、组件封装等,再配合前面的Nodejs后台,实现一...
Scotch责编内容来自:Scotch (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » Building a Simple Face Recognition App with Vue.js and Kairos



专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录