As technology continues its dominance in our everyday life, facial recognition is becoming more and more common, lending security to systems and gadgets in various sectors, such as health care, payments, criminal identification, and advertising. As a prominent feature of what are called biometric identification systems, facial recognition examines the physical features of people to uniquely distinguish one person from the others. Specifically, this capability takes in data, often an image from an unknown person, analyzes the data, and compares the image with the ones in a database of known people’s faces. The process takes three steps: detection, faceprint creation, and verification or identification.

After verification, the system stores away a faceprint, much like a fingerprint, that contains a set of characteristics, such as the relative locations of the facial features: eyes, eyebrows, nose. When assembled, they uniquely identify a person’s face.

This post describes how to manage and optimize images with Cloudinary after manipulating and uploading them to the Cloudinary storage. To learn how to create, read, and delete images, see the article Get On Board With the Media Express.

Process

Follow the procedures in this section.

Installing the Relevant Software for Face.js

First, install on your machine the software on which Face.js depends for facial recognition.

For Linux and iOS, install the following:

• cmake: Type the command sudo apt-get install cmake
• ** libx11 (XQuartz on OSX) for the dlib GUI:** Type the command sudo apt-get install libpng-dev
• libpng for reading images: Type the command sudo apt-get install libpng-dev

Installing and Configuring Cloudinary

For the purpose of reading images from its storage, Cloudinary offers an outstanding Node.js integration library through npm. Install Cloudinary by typing this command:

npm install cloudinary

Add the Node.js classes to your code. Type:

const cloudinary = require(‘cloudinary’)

To enable Cloudinary to work with your account, configure Cloudinary with your cloud name, API key, and API secret, like this:

cloudinary.config({
cloud_name: 'sample',
api_key: '874837483274837',
api_secret: 'a676b67565c6767a6767d6767f676fe1'
});

Setting Up the APIs

To retrieve all your trained images from the Cloudinary server, leverage Cloudinary’s search API. Send the images to the front end with socket.emit(), as follows:

cloudinary.v2.search
.expression('folder=face_recognition')
.execute().then(result=>{
socket.emit("images", result.resources);
});

Next, set up the process of receiving images on the front end with socket.on():

//Wait to receive images
socket.on("images", function(images) {
for(image of images){
//Add images to HTML DOM
}
//Add event listener
let domImgs = document.querySelectorAll("#imgCont img")
for(var i = 0; i < domImgs.length; i++) {
domImgs[i].addEventListener('click', function(event){
clickedSrc = event.target.src
UploadToNodeServer(event.target.src)
}, false);
}
}
});

The code above specifies that, on an image click, Cloudinary saves the image source in a global variable, triggering the UploadToNodeServer function. See below.

function UploadToNodeServer(imgSrc) {
socket.emit("imageUpload", {
image: false,
src: imgSrc,
});
}
$("#upldbtn").addClass("disabled");
}

The UploadToNodeServer function sends the image source to the node’s back end, as below:

socket.on("imageUpload", function(info) {
if(!info.image){
let base64Data;
download(info.src, './tmp/uploads/out.png', function(){
if (info.format === "png")
console.log("Download success")
socket.emit("DownloadSuccess", "true");
//return success
});
}
});

Afterwards, download the image and send it back to the front end:

`//Function for downloading images

const download = function(uri, filename, callback){
request.head(uri, function(err, res, body){
console.log('content-type:', res.headers['content-type']);
console.log('content-length:', res.headers['content-length']);
request(uri).pipe(fs.createWriteStream(filename)).on('close', callback);
});
}`

A click of the Recognize button triggers an AJAX call to the Recognize route, which recognizes the images through the FaceRecognizer class.

Finally, send the response in a new browser window. See the code below.

`router.get('/recognize',function(req,res){
const recognizer = fr.FaceRecognizer();
/*
Load Our Previously Saved Train Data
/
const modelState = require('../model.json');
recognizer.load(modelState);
/
Detect face from image
*/
const image = fr.loadImage('./tmp/uploads/out.png');
const detector = fr.FaceDetector();
const targetSize = 150;
const faceImage = detector.detectFaces(image, targetSize);

/*
Draw rectangle on face
and write a prediction for each face
*/
const faceRects = detector.locateFaces(image).map(mmodRect => mmodRect.rect);
const faces = detector.getFacesFromLocations(image, faceRects, 150);

if(faceRects.length){
const win= new fr.ImageWindow();
win.setImage(image);
faceRects.forEach((rect,i)=>{
win.addOverlay(rect);
const predict = recognizer.predict Best(faces[i],0.69);
win.addOverlay(rect, ${predict.className} (${predict.distance}));
});
// fr.hitEnterToContinue();
}

/*
Send the output for a face to an HTML page
*/
if(faceImage.length){
const predictions=recognizer.predict(faceImage[0]);
res.send(predictions);
}
else{
res.status(400).json({msg:'Could Not Detect Face, Please try another
picture'});
}
});`

Conclusion

Presently, major tech companies, such as Apple, are keenly interested in and adopting the facial-recognition technology. AI startups, too, are becoming unicorns. Without a doubt, facial recognition will play a more and more prominent role in society in the near future. Concerns about privacy notwithstanding, facial recognition makes our streets, homes, banks, and shops safer—and more efficient, too.

For details of the facial-recognition project described in this post, see the GitHub code. Contributions and suggestions are welcome.