Cloudinary Celebrity Detector

Introduction

Facial Recognition is one of AI’s front-runner apps. This article demonstrates how to javascript can be used to create an app capable of biometric authentication to identify well-known people.

Codesandbox

Check the sandbox demo on Codesandbox.

You can also get the project Github repo using Github.

Prerequisites

Entry-level javascript and React/Nextjs knowledge.

Setting Up the Sample Project

In your respective folder, create a new net js app using npx create-next-app celebdetector in your terminal. Head to your project root directory cd celebdetector

We will use Cloudinary recognition celebrity detector add-on for facial detection. Our app will have a sample picture of Leonardo Di Caprio to be sent to the Next js backend for upload and recognition. Our response will be the tagged name of the sample picture. Create your own Cloudinary account using Link and log into it. Each Cloudinary user account will have a dashboard containing environmental variable keys that are necessary for the Cloudinary integration in our project.

In your project directory, start by including Cloudinary in your project dependencies npm install cloudinary Create a new file named .env.local and paste the following code. Fill the blanks with your environment variables from the Cloudinary dashboard.

1CLOUDINARY_CLOUD_NAME =
2
3CLOUDINARY_API_KEY =
4
5CLOUDINARY_API_SECRET =

Restart your project: npm run dev.

In the pages/api folder, create a new file named cloudinary.js. Configure the cloudinary keys and libraries.

1var cloudinary = require("cloudinary").v2;
2
3cloudinary.config({
4    cloud_name: process.env.CLOUDINARY_NAME,
5    api_key: process.env.CLOUDINARY_API_KEY,
6    api_secret: process.env.CLOUDINARY_API_SECRET,
7});

Create a handler function to execute the POST request. The function will receive media file data and post it to the Cloudinary website. We include the parameters below to request face detection. The response will be filtered out of an array and sent back as a response.

1export default async function handler(req, res) {
2    if (req.method === "POST") {
3        let url = ""
4        try {
5            const uploadedResponse = await cloudinary.uploader.upload_large(fileStr, {
6                chunk_size: 6000000,
7                detection :"aws_rek_face",
8                auto_tagging: 0.8
9            });
10            uploaded_url = uploadedResponse.tags[0];
11            console.log(uploadedResponse.tags[0])
12        } catch (error) {
13            console.log(error);
14        }
15
16        res.status(200).json({data: uploaded_url});
17    }
18}

For our front end, We will simply have 2 rows. One to contain the sample image and another to contain the result. Paste the following in your return statement. You can locate the css files from the Github repo.

1"pages/index.js"
2
3
4return (
5    <div className="container">
6      <h1>Cloudinary Celebrity Detector</h1>
7      <div className="row">
8        <div className="column">
9          <h2>SAMPLE</h2>
10          <img  ref={imageRef} src="https://res.cloudinary.com/dogjmmett/image/upload/v1655712984/caprio_bilnap.png" alt="sample" title="sample" />
11        </div>
12        <div className="column">
13          <h2>RESULT</h2><br/>
14          {tags && <p>{tags}</p>}
15        </div>
16      </div>
17    </div>
18  )

We will use state hooks to reference our DOM elements and track our responses.

We use a useEffect hook to POST the media to the backend and receive the name tag response.

1"pages/index.js"
2
3
4import html2canvas from 'html2canvas';
5import { useEffect, useRef, useState } from 'react';
6
7export default function Home() {
8  const imageRef = useRef();
9  const [tags, setTags] = useState('')
10
11  useEffect(() => {
12    console.log()
13    try {
14      fetch('/api/cloudinary', {
15        method: 'POST',
16        body: JSON.stringify({ data: imageRef.current.src }),
17        headers: { 'Content-Type': 'application/json' },
18      })
19        .then((response) => response.json())
20        .then((data) => {
21          setTags(data.data);
22        });
23    } catch (error) {
24      console.error(error);
25    }
26  }, []);
27
28
29  return (
30    <div className="container">
31      <h1>Cloudinary Celebrity Detector</h1>
32      <div className="row">
33        <div className="column">
34          <h2>SAMPLE</h2>
35          <img ref={imageRef} src="https://res.cloudinary.com/dogjmmett/image/upload/v1655712984/caprio_bilnap.png" alt="sample" title="sample" />
36        </div>
37        <div className="column">
38          <h2>RESULT</h2><br />
39          {tags && <p>{tags}</p>}
40        </div>
41      </div>
42    </div>
43  )
44}

The final UI should look like the below:

complete UI

Enjoy your coding experience.