Facial-Recognition: Using React-Redux and Kairos to Identify Yourself
We are in the era where Face ID and Facial Recognition is no longer a maybe or simply good-to-have feature. It has become rather the talk of the town. So as a developer, my curiosity was heightened by the prospect of trying to create a face recognition based application and testing out this awesome feature which has been apparently bestowed to mankind.
Since I had made up my mind to build this super-awesome-awe-inspiring application, I decided to go one up and build a Progressive Web Application in the meantime as well. Pretty cool. Eh?
After bringing heaven and earth to a stand-still, my search for that API which would help me get this application on the road started. I came across various facial recognition APIs built by stalwarts like Amazon, Microsoft, Google and even OpenCV for that matter of fact. However, it was this majestic third-party API built by a company called Kairos which got me super interested. According to the description on their page and as per the testimony of various patrons of their technology, they claimed to possess the best face-recognition open-source API available in the market. An API which can recognize your lovely face (emphasis on the word ‘lovely’) in almost any situation and apparently returned the best result even in a not-so-well-lit setting. You can check up more on Kairos on their official website.
Getting Our Hands Dirty Before The Face
The technology stack, including the major libraries, I have selected for this application includes the following:
- React-Redux: React is a front-end library built by Facebook while Redux is a state-management system which works extremely well with the React setup. You can find the boilerplate for getting started here. Just clone the repository and you are good to go. (Please spare some stars for this poor chap if you find the configuration to be helpful. An article for setting up react with redux from scratch is on the way)
- Material-UI: Google’s famous Material Design has been react-ified and we have a CSS library framework that gives you a near-to-google kind of feel. If not exactly the same feeling. You can check their official documentation here and go through it for your own benefit.
- React-Webcam: Moz Morris has made use of the new getUserMedia API of HTML5 for video capabilities and built this React Component which makes use of the native camera of a device.
- Kairos API: As already mentioned, we will be using this particular third party API to recognize the faces and it will also serve as the entire server side for us since we will be making use of their servers alone and not ours. (Pretty clever there. Eh? Taking the complete load away from us)
- Heroku: The cloud platform that lets one deploy their applications to the cloud. We will be making use of this since the PWA features are applicable only in a production environment. Due to the open-source nature of it, Heroku was the go to choice.
Before we start making or discussing the way this (I repeat) awesome application is built. Let us just reiterate that we are going for a Progressive Web Application, which in short, refers to a web application which can work like a native application on the phone.
Let’s build us a PWA that can recognize faces.
Code-Shode, Pretty Please
We start off by using the boilerplate template already enclosed. You can find the entire code for the application in the link provided. (Beware. This repository is subject to changes and the code mentioned in this article will definitely work but might differ from the code present in the repository)
The template is built on top of the create-react-app framework provided by facebook itself. It contains the service-worker and manifest files already. The manifest file is the only file that has to be tweaked to suit your requirements.
First up, visit https://kairos.com and sign up as a developer.
Once you sign up, you will get your App Key and App ID. These are the two things that would make sure that you are able to access the server at Kairos in order to be able to process your images. It is the key to your face being recognized.
You have got the ground work ready. Time to write some code. We follow the react-redux structure that is laid down in the boilerplate template. We will build two major components which would take care of all the operations related to facial recognition. Namely recognize.js and register.js.
The styling part, I would not delve into, you can just run through the repository code. I used material-ui to make the application responsive in nature and ran into the AppBar issue still present in the CSS framework. A work around is still in progress.
The first component that we need to build in particular is the register component.
Quite a lot of code there. Phew. Let’s break it down and discuss the essentials. The APIs being invoked in the registration component are ones for enrolling a new face and for resetting the gallery. In order to recognize an image through Kairos, you have to first provide an image. The accuracy of Kairos is such that it returns a match for one-image-registration itself. Wait. What? The answer is yes. It does so. However, in the free developer version which has limited API usage, the possibility of them throttling your API calls for registration of multiple faces is something which might happen if you end up exceeding their proposed limits.
Coming back to the code. Material-UI components are used to build the static components of the page. We use the Webcam attribute from the react-webcam library to access the library and use the prescribed properties and approach to capture an image in png format which is then encoded into a Base64 format and passed onto Kairos for enrolling. We are making use of the axios library to make HTTP requests to the third party API. Once we are getting a response we are simply passing it to the redux side which takes care of returning a formatted JSON based on the response received which is then used to display the appropriate message to the user.
A check is also in place to make sure that the user does not pass an empty identifier/username. In this case, we leverage the State capability of React. Neat.
Gallery reset button basically removes the gallery and the data created since at the time of this article, my API calls to Kairos was restricted due to the amount of traffic being exhibited from the client-end.
Next up, we will create the recognize component. This is where the detection operation takes place. The code for the component is as follows.
The component is very straight up. Unlike the register component, we have no check for username or even such a requirement is necessary. We make one API call for recognizing the image captured from the gallery already created in the register component. It goes without saying that the recognition operation follows the registration operation. The image is again captured in png format and encoded as Base64 to be passed to the Kairos server.
Once the response is obtained we invoke the recognition function at the redux side to break down the JSON format so as to return a refined object which is used to display the appropriate message to the user.
Kairos not only returns confirmation of the image’s presence in their gallery but also the related demographics for the face in question. This includes age, gender, likely sentiment and other related data. You add the other structural layers on top of these two components and you have your very own face recognition application to play around with.
A run through of the application appears as follows.
Given the fact that it was able to detect a face like mine, I am pretty certain it would definitely work for one and all.
We are done. See you guys next time…
Oh wait. I haven’t covered the PWA aspect of the application. No problemo, we shall get to it at present.
Cameria Gets a Native Application Experience
Before you ask me, let me clarify. I selected the name Cameria for this application for various reasons and none of them is due to the Bhojpuri song which sounds similar. (I sincerely apologize for going off-topic)
Three requirements, in particular, have to be fulfilled to make this application a Progressive Web Application. Let us check whether we have managed to achieve it.
- Is the User Interface responsive in nature? Check
- Is the manifest updated to include favicons of multiple sizes so it can be supported on multiple devices? Check
- Is the application working on a production environment? Um.
This is where Heroku comes into play. Now deploying a create-react-app to Heroku cloud is a headache of its own if you are not aware of the process. Create-react-app takes care of the service worker related activities including offline capabilities and caching the static assets progressively. Before you start the development process, add a file called static.json to the root of your directory and include the following.
We added this little piece of code to make sure that react-router-dom does not break on Heroku production environment. So just trust me on this.
In order to deploy the application, do you want to know what you need the most?
Hand of Fate! Wrong. You need a buildpack for create-react-app. AND we have the awesomely talented Mars Hall who comes to our rescue with his buildpack repository.
Once you are have your application ready for deployment, provide the following commands in your terminal and you are good to go.
1. git init
2. heroku create cameria — buildpack https://github.com/mars/create-react-app-buildpack.git
3. git add .
4. git commit -m “Start with create-react-app”
5. git push heroku master
6. heroku openNote: Copy and run commands 3, 4 and 5 together on the terminal especially if you are working on Windows. The reason being that git commit is not separately recognized on the terminal.
After the deployment finishes. Your application is on the server of Heroku. Congratulations! I would definitely like to take the treat if you are planning to offer one. No treat? Okay. *sad face*
Time to test the application. Go to the link https://cameria.herokuapp.com or your application link as created by Heroku. The flow would be something like this, where you would be prompted with a ‘Add to Home Screen’ option when you first visit the link. Once you add the application, it will work like a native application. Viola!
Note: This feature might not be available for iOS supported phones at present but it is definitely on the way.
There in we have delivered on our initial plan and promise. That was fun. Right? …um. All right PWA is a go now.
Wrap Up
I have shared the git repository related to this application earlier. The code is likely to change minutely as I tweak the UI at maximum. And you can test out the application created here.
Disclaimer: If you are one who can evade face recognition, this application is a must try for you, my friend.
For any queries or questions, feel free to comment your concerns. I am a ping/comment away.
Let’s keep coding to make an impact in whatever way we can.
Peace.
