How to Create an App with Kairos Facial Recognition API in Javascript

Read the full article here (and see full code snippets).

TL;DR — Connect to the Kairos API here

Related: How to build a Facial Recognition App/Website with Python and Flask

What is the Best Facial Recognition API?

After reviewing over 30+ APIs, we have found these to be the best face detection and recognition APIs:

• Kaiors Face Recognition API
• Animetrics Face Recognition API
• Lambda Labs API
• Inferdo Face Detection API
• Luxand.cloud Face Recognition API
• EyeRecognize Face Detection API
• Face++ Face Detection API
• Macgyver Face Recognition with Deep Learning API
• Microsoft Computer Vision API
• BetaFace Face Recognition API

Read the entire post here.

Kairos API

Kairos is a leading face recognition AI company with an ethical approach to identity, that reflects our globally diverse communities. Through computer vision and deep learning, we recognize faces in videos, photos, and the real-world-our innovative API platform simplifies how developers and businesses integrate human identity into their software. We help our customers combat identity fraud, meet regulatory compliance, and enable more profitable customer experiences. — Kairos Face Recognition Overview

In using the Kairos API, we remove the need to build our own face database and understand complicated statistical algorithms. This can save a company a lot of time and money. In addition Kairos is simple, and the nine endpoints listed in the dashboard are easy to understand.

With Kairos, images that contain faces (that you hope to identify later) are put into galleries. For example, if I had three pictures of three different friends, I would add each of them to the gallery ‘Friends’. Later, I could use different endpoints (‘/recognize’, ‘/verify’) to identify my friends in group pictures or different individual pictures. I could check all my galleries, or submit an image and have the API search a specific gallery.

Kairos only accepts a few parameters across its endpoints:

• “image”
• “gallery_name”
• “subject_id”
• “selector”

This means that we can quickly build uncomplicated HTTP requests.

Furthermore, the “image” parameter accepts a publicly accessible URL, file upload or base64 encoded photo.

I hope to show you how simple it is to create galleries, upload pictures, and recognize images in the example javascript app below. We will build a ReactJS frontend that allows users to upload images to either the ‘friend’ gallery or the ‘foe’ gallery. Next, the frontend will send the image data to our node.js backend that will fire off the request to the Kairos API for processing and return the data to the user in the frontend. We will enroll subjects in both galleries, then identify our friends and foes in later images.

How to Build a Facial Recognition App with JavaScript

Prerequisites

In order the complete the application there are a few items that need to be completed.

First, you will need a RapidAPI account. Second, after setting up an account you will need to subscribe to the Kairos API. With the Basic subscription plan, you get 1000 API calls a month, and after that, it’s $0.0001 each request. That will be plenty for us in this example. Next, make sure that you have:

• Node >= 8.10 and npm >= 5.6 on your machine
• Some familiarity with how to open and use a command-line tool
• An internet connection
• A code editor (I recommend VS Code)
• Some familiarity with Javascript, specifically React and Node.

I will be using the bash terminal on macOS but most of the commands should be the same with the Windows command prompt. We will also need React >=16.8.0, however, if you are following the instructions, we will be downloading an acceptable version in the process.

Setting Up the Project

Read this setup here.

Set Up Express Server

Find the code here.

The majority of the code is commented out because it’s not time for it to be used. The code blocks that are commented out and labeled “DEPLOYMENT” will not be used in this app, but would be used if you were to deploy to a server. They allow the express application to find the React frontend and serve static files.

In this file, so far, we are creating the express app, adding JSON parsing middleware, and telling the app to listen for requests on port 3001. Easy enough! Next, we’ll go to the front end for general set up, and make sure that it can communicate with our backend.

Set Up Frontend

Read up on this section here.

Your page should look like this:

Build Input Form

Find the code here.

After adding the conditional input row your forms should look like this:

The last input is the image input, but it will require a little more work.

Adding the Image Input

The image input comes in a few different forms. The Kairos API “image” parameter accepts a publicly accessible URL, file upload or base64 encoded photo. Our form is going to take an image upload, translate it to base64, and submit that string, or it will accept the URL string and submit that as the image parameter.

Therefore, we need two different inputs. In order to accomplish this, we are going to create two tabs in each column, one for URLs, and one for image uploads. We will then pass another prop specifying whether the form accepts ‘file’ or ‘text’.

Find the code here.

Images can now be previewed!

One of the final things that needs to be implemented is a submit function that sends the data we have added to our backend. Currently, we do not have a route set up on the backend to receive the data. Yet we can still get the submit function set up in the way that we want the backend to receive the data.

Add Submit Function

Find the code here.

Build Route for Uploads

Find the code here.

Add RapidAPI Credentials and API Calls to the Route

Back in the RapidAPI marketplace, pull up the Kairos Face Recognition dashboard. Locate the two endpoints that we will use (enroll and recognize).

Notice the headers are the same in both endpoints. Furthermore, the HTTP request URL is mostly the same with the exception of the last word.

Find the code here.

We get the data from the front end and submit it to the Kairos API, but we don’t send any useful information back. We must inspect the response objects that we get from Kairos.

Building Useful Responses

Find the code here.

Create the Message Component In The Frontend

Find the code here.

It is almost time to add our subjects and test our app!

Finishing Up the ImageUploadForm

The final touches to the form component are:

• import the Message component
• declare a variable for the message component
• set the variable value in the handleSubmit function, and;
• display the message component when it has a value

The below code is what the final ImageUploadForm.js should contain.

Find the code here.

Test

Time to use our app! To recap, we will be creating two galleries with Kairos. Kairos saves the gallery’s name once it is used and creates a new gallery if the name has not been used. What is great about that is we don’t need a database to store the subject_ids, face dimensions, or images: Kairos does that for us.

I am going to be pulling image addresses off of Google to test the app and will doing a LOTR themed testing.

First, let’s add Gollum to the ‘foe’ gallery:

Second, upload two friends, Aragorn and Gandalf:

Third, check the gallery ‘foe’ with a different image the contains Gollum:

Fourth, see if our app can recognize Gandalf and Aragorn in a different image:

Conclusion

I had a lot of fun working with this API and I hope that the example app showed you how to build something even better.

Remember, there are still many ethical concerns surrounding facial recognition and they should be considered before building something that could compromise someone’s safety.

That being said, I hope you found this article helpful and leave a comment or question if you like!

Originally published at https://rapidapi.com on February 7, 2020.