How to Create an Image and Face Recognition App: The Complete Guide

Exadel CompreFace
12 min readSep 6, 2021
Source: freestocks.org: Pexels

The facial recognition market has significantly grown in popularity since 2020. At first glance, the market may seem small, however the scope of facial recognition technology’s usage is huge, and the number of solutions and services in this field is constantly growing. But today’s article is not about face recognition technology in general; it’s about our experience dealing with facial recognition algorithms and image recognition app development. Ready?

What Is Facial Recognition and How Does it Work?

Before we explain how to build a simple face recognition app, let’s pause for a moment and talk about facial recognition technology and its mechanisms.

What is Facial Recognition?

Since you’ve sought out this page, you probably have a good grasp of facial recognition as a whole, but we thought it would be useful to go through the basics just in case. Face recognition is a way to identify or confirm a person’s identity. It uses both artificial intelligence and deep learning approaches to compare different images against each other or to its own repository. It is also a form of biometric security that includes other forms of recognition such as voice recognition, fingerprint recognition, and iris recognition. The major factor that drives the popularity of facial recognition software is the unlimited number of ways facial recognition can be applied. Here are a few examples:

  • Security systems. Face recognition simplifies the detection of unauthorized access to sensitive areas and/or your office security perimeter.
  • Attendance management systems. It helps you track employees and students to verify they’re where they should be.
  • Advertising and marketing. It can be used for both collecting data for marketing and sales purposes and/or targeting ads to customers in real time.
  • VIP service. It detects customers upon entrance, allowing businesses to provide excellent customer service.
  • Check-in. It speeds up the check-in process at hotels, conferences, and airports
  • Mobile apps. You can take a selfie and see what you would look like older or younger, or who you look like the most (this is how our BabyMatch application works).
  • Helping the blind. Blind people can use facial recognition to better understand social situations. For example, an app can scan faces and recognize when somebody is smiling, then notify a user with a vibration.

As you can see, there are tons of examples that require not only face recognition software but resources such as cameras, servers, an effective comparison and recognition algorithm, a trained neural network, and other infrastructure.

Why is it Popular?

If you feel like facial recognition is everywhere, that’s because it is. Its extreme popularity comes from its numerous benefits. One of the main advantages of face recognition technology is safety and security. Law enforcement agencies, airports, and other organizations use it for normal surveillance or to identify subjects of interest. Another advantage is that face recognition systems are quick, autonomous, and contactless, as they do not require direct interaction like fingerprint recognition does. And last but not least, face recognition can be very convenient. It is easy to integrate, and most solutions are compatible with the majority of security systems.

How Facial Recognition Technology Works

Now, let’s get down to the mechanism of face recognition. As a rule, image recognition comes down to pixel processing and picture matching. Facial recognition uses the same concept; a person caught in the camera lens is compared with a database of previously identified and saved face images. The process of face recognition can be split into three basic types.

  1. Face detection. At this stage, an algorithm learns what a face is. Then the camera finds and detects a face and draws a box around it to autofocus. As a rule, the author of the algorithm does this by training it with photos of faces. Over time it learns the difference between, for example, a table and a face. So the main point of this stage is to find a face, not the identity behind it.
  2. Face analysis. The mechanism maps faces, measures the distance between eyes, nose, and mouth, identifies the shape of the chin, etc. Once the algorithm has detected a facial region, it can then apply additional tests to validate whether it has, in fact, detected a face. Then this data is converted into a string of numbers or points, called a faceprint.
  3. Face recognition. This is a process of confirming the identity of a person in a photo. The system tries to recognize the face and match it to a name stored in the database.

There are multiple approaches to facial recognition. They are all reliable; the only difference is the complexity of implementation and resources required to run them. The best way is to choose the simplest one that still meets your needs.

1. Use a simple classification method (e.g. logistic regression) to train a model based on faceprints. The benefit of this approach is that you only need to train the model once. It’s also very lightweight. The downside is that you need to retrain a model each time you upload a new known face. You should also be aware that its accuracy decreases each time you train it to recognize a new person, so we don’t recommend using it to recognize more than ten different people.

2. Use euclidean distance or cosine similarity to calculate the distance between faceprints. The smaller the distance, the greater the probability that this is the same person. The benefit of this approach is that as soon as you receive a faceprint, you can use it for recognition without training the model. However, since you need to store all of the faceprints in memory to calculate distances, which can be very expensive if you have a huge number of faceprints, and it can’t be scaled easily. So we don’t recommend using this approach for more than 100,000 faceprints.

3. Use a vector database if you have a huge number of people to recognize. These databases have internal functionality for finding the nearest vector (faceprint), so you don’t need to implement it yourself. The downside: you’ll have to support this rare type of database.

Examples of Apps with Facial Recognition Capabilities

To demonstrate how face recognition software brings benefits to a business, let’s take a look at some examples of how it can successfully work in applications.

  1. FaceApp

This is the most famous celebrity app in this genre. Using neural networks based on artificial intelligence, the app generates realistic transformations of human faces in photographs. There are multiple ways to change the photo including adding impressions, smiles, makeup, glasses, beards, and so on. Other cool features include the ability to replace the background with a simple tap, apply color filters, and use a lens blur.

2. Face2Gene

This app is used by healthcare professionals to discover genetic disorders and detect unusual features. It also allows doctors to create special communities or a community group to share and discuss medical cases while users get constant feedback and comments on their cases. The only obstacle here is that it is only available to professionals with medical training.

3. AppLock

The Applock application is designed to ensure that only a specific user can access their personal information, social media apps, and financial data. It is a trustworthy tool that combines speaker and face recognition technology to ensure a smooth and secure experience. The app also works in offline mode.

4. Reface

Reface is an advanced, fun, and popular application around the world. Thanks to a wide range of source videos, gifs, pictures, and photos, you can make realistic face videos and gifs all with a single selfie. In this app, you can become a celebrity look-alike or replace your face with memes using a face editor and face morphing technology. Reface lets you:

- Swap your face to celebrities or movie characters

- Play with live face swaps and gender swaps

- Share your face-swapped clip or funny meme as a gif or video to messengers and social media

- Try face swaps with new videos and gifs

5. ToonMe

ToonMe is a free face recognition application that changes pictures into cartoon drawings. With the help of AI-driven algorithms, the app immediately generates amazing portraits. All you need to do is to upload a selfie. ToonMe’s software includes a full-body cartoon image trace and templates for vector image editing. Both of them come with a large set of designs and layouts that add more life to the drawings. The primary function of this software is to create cartoon drawings or vector-based images in a visual style similar to Pixar’s CGI animation.

6. Railer

The Railer application was originally developed for teachers and other professionals in the education field. It allows users to take attendance while detecting people’s faces. The main advantage of this app is that nobody can falsely enter their attendance. Additionally, the app can be integrated with custom HR software so you can track employees directly from your system. Other features include automated check-in and check-out processes and push notifications.

7. True Key

True Key is an application that automatically fills in your account information on apps and websites so you don’t have to memorize your password. The app also provides secure passwords for your important accounts and automatically syncs across all your devices, including desktop and mobile. The application is built by Intel Security and is supported by a strong encryption system that saves your sensitive information with the help of multi-factor authentication tools.

8. BioID

The BioID face recognition application offers a multi-factor authentication system suitable for accessing websites and other applications. It is a mobile client that can be used as a mobile authenticator to log in to any apps and websites supported by the application. Additionally, with the help of AI capabilities, the app detects malware attacks, fake video replays, and bug attacks. Currently, it supports liveness detection against photo attacks and challenge-response to prevent video replay attacks.

9. Face ID & Face Lock Screen Prank

This application can lock and unlock a device screen with your face to protect your photos, videos, contacts, and messages. The app boasts a huge variety of lock screens so you can choose the theme you like and customize your phone. Additionally, you can set a password for your app, disable the system lock screen, and enjoy many other features from Face ID & Face Lock Screen Prank.

Clearly, there is a huge range of usage for face recognition-based mobile devices. We’ll take a closer look at how exactly these apps are made by running through our experience making BabyMatch — our image and face recognition app.

How to Create a Face Recognition App

Project Overview

BabyMatch is a free, AI-powered application that compares family members’ faces and detects whether your child resembles you or your partner. It is built with React Native and runs smoothly on iOS and Android devices. The application works in two modes — Parent Match and Celebrity Match. In the app, users choose the mode and the photograph themselves and their family members or select photos from their gallery. In a few seconds, the application evaluates the user’s face and provides them with results. In Celebrity mode, photos are compared against a database of celebrity images.

Facial Recognition with CompreFace

For this project, we chose our free and open-source face recognition solution — Exadel CompreFace. CompreFace uses precise algorithms and convolutional neural networks trained on over 3 million photos. That’s what gives it its high accuracy (99.65% and climbing). You can use the same process that we used for BabyMatch to integrate CompreFace into your facial recognition-based application — even if you don’t have prior machine learning skills. We’ll walk you through each step.

Step-by-Step Face Recognition with CompreFace

Here it comes: the actual process of integrating face recognition via CompreFace. For an even more in-depth view, check out our “How to Use CompreFace Documentation” post, but the steps here will certainly get you started:

Step 1. You need to install and run CompreFace using our Getting Started guide (don’t worry, it’s easy to follow).

Step 2. You need to sign up for the system and log in to the account you’ve just created or use one you already have. After that, the system will redirect you to the main page.

Step 3. Time to create your application (see the left section)! Use the “Create” link at the bottom of the page. The application is where you can create and manage your Face Collections.

Step 4. Enter your application by clicking on its name. You will see two options: you can either add new users and manage their access roles or create new Face Services.

Step 5. To recognize subjects among known faces, create a Face Recognition Service. After that, you will see it in the Services List with an appropriate name and API key. Then, you can look at our demos.

Step 6. To add known subjects to the Face Collection of your Face Recognition Service, you can use the REST API. Once you’ve uploaded all known faces, you can test the collection using the REST API or the TEST page. We recommend that you use an image size no higher than 5MB, as a larger size could slow down the request process.

Step 7. Now upload your photo and let our open-source face recognition system match the image against the Face Collection. If you use a UI for face recognition, you will see the original picture with marks near every face. If you use the REST API, you will receive a response in JSON format.

JSON contains an array of objects that represent each recognized face. Each object has the following fields:

  1. subject — person identificator
  2. similarity — the confidence level that this is the found subject
  3. probability — the confidence level that this is a face
  4. x_min, x_max, y_min, y_max — coordinates of the face in the image

Demos

  1. tutorial_demo.html

This demo shows the simplest example of face recognition service usage. To run the demo, just open the html file in a browser. The API key for this demo was created on step 5 of How to Use CompreFace.

2. webcam_demo.html

This demo shows the simplest webcam demo for a face recognition service. To run the demo, just open the html file in a browser. The API key for this demo was created on step 5 of How to Use CompreFace

Code snippets

Here is a JavaScript code snippet that loads a new image to your Face Collection:

This function sends the image to our server and shows results in a text area:

Challenges We Faced

Now that the technical details are clear, it’s time to talk about the problems we faced in development. The BabyMatch project was a challenging and exciting experience for our team. We applied industry best practices and did our best to make this application interesting and fun for our users. Like all developers do, we hit a few annoying, but not insurmountable problems:

  • The cross-platform nature of the application. In the beginning, we had some difficulty uploading photos from Android devices.
  • The recognition speed. We were searching for the optimal image size in order to not overload the server. Thanks to the team’s consistent efforts, we succeeded.
  • React Native-related issues.

How Much Does it Cost to Create a Face Recognition App?

Well, it all depends on what tools you’ve chosen. There are some services that can start at $86.40 per day or go up to $30,000 per year per camera for facial recognition from streaming video. As a rule, the cost of a generic face recognition project includes:

  1. The cost of business logic development (admin and user applications, authorization, etc.) that are very specific for each case and business requirements.
  2. The cost of integration with facial recognition solutions.
  3. Production expenses. This cost may surprise you, as it can be extremely high and greatly dependent on the solution and the volume of face recognition requests.

When we were developing BabyMatch, CompreFace was a good fit for us, as it’s totally free (unless you need customized or unique features). When we compared CompreFace with other face recognition software, it was clear it provided a full set of features at a minimal cost.

Conclusion

In this article, we’ve tried to share the experience we gained building a face recognition application. Before our idea became a reality, we bumped into some problems and found smart solutions to make our work efficient. We hope this article will be useful for you, especially if you’re just getting started in learning about facial recognition.

--

--

Exadel CompreFace

Exadel CompreFace is a free and open-source face recognition service that can be easily integrated into any system without prior machine learning skills.