Recognizing faces with Cloudinary and Next
Tags: javascript, webdev, nextjs, cloudinary
Published: 2022-07-12 11:45:39

by [Emmanuel Deelesi](https://blog.openreplay.com/authors/emmanuel-deelesi)

Face Detection is Artificial Intelligence (AI) based technology used to identify human faces in digital images and photographs, using an algorithm to separate human faces from their environment or surroundings. It is applicable in many applications and gadgets today. Some of its use cases and importance are: 

- Face auto-cropping for Profile Images
- Uploading facial images during registration.
- Image customization.
- Image scanning for site security.

This tutorial will demonstrate how to apply auto face detection, recognition, and cropping from the rest of an image. The best use cases are during Sign up, enabling Profile images, Image customization features, and Security on websites.

## What is Cloudinary?

Cloudinary is an image and video management solution for mobile applications and websites. It enables uploading, storing, manipulating, and retrieving images and videos using its react SDK. Before diving into our code editor, let's set up our Cloudinary account.

Create an account at [Cloudinary](https://cloudinary.com/) site. Upon completion of the registration and verification process, you'll be taken to a dashboard that looks like this:

![1](https://blog.openreplay.com/static/eb4fa4ec9c1f227a2d902b9204c5d243/56dca/image01.jpg)

Next, let's upload an image to our Cloudinary account. Click on the "Media Library" tab and the "Upload" button.

![2](https://blog.openreplay.com/static/27e218134266f542a31bdae2747381e8/9b598/image02.png)

This pops up in an upload modal. Next, click the "Browse" button or drag and drop an image on the drag-and-drop zone from your local device to upload the image.  

![3](https://blog.openreplay.com/static/e11c3e04f03e2b0f619c93ee1dc8f20f/294d0/image03.png)

Selected above is the image successfully uploaded to our Cloudinary account.

## Creating our Next app

We've successfully set up and uploaded an image to our Cloudinary account. Let's create our NextJs application and begin integration. Run the command below to create and run a NextJs application in your preferred directory.

```
npx create-next-app face-detector
cd face-detector
npm install cloudinary-react --save
npm run dev
```

Before fetching our images from Cloudinary, let's update our `Home.module.css` to give us the necessary styles for our application. Head over to `styles/Home.module.css` and update the code using the code block below.

```
.container{
  margin: 2rem;
}
.imageRow{
  display: flex;
}
.cloudImage {
  border-radius: 50%;
  margin: 0 10rem;
}
.column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.btn {
  height: 4rem;
  width: 10rem;
  color: white;
  background-color: green;
  border: 0;
  border-radius: 1rem;
  font-size: 1.5rem;
} 
```

## Retrieving and displaying images from Cloudinary

Cloudinary generates an image URL for all images uploaded to their server. We'll be retrieving our uploaded to our Cloudinary account. Head to the `Media Library` tab and click on the copy link icon to copy the image URL.

![4](https://blog.openreplay.com/static/b2b2cca80d5b49de7c37419f777e3687/294d0/image04.png)

Let's display the image using the image URL from our Cloudinary account. Head over to `pages/index.js` and replace the entire code with the code block below.

```javascript
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <div className={styles.imageRow}>
          <img
            alt="CloudinaryImage"
            src="https://res.cloudinary.com/dogjmmett/image/upload/v1649911466/officelady.jpg"
            height={450}
          />
      </div>
    </div>
  );  
}
```

In the code block above, we're using the HTML image tag to display our image using our image URL. We have also imported our style from the styles folder.

## Handling face detection

It's time to handle facial auto-recognition and detection in our app. We'll be using the `cloudinary-react` package installed earlier. Import the elements below into the `index.js` file.

```javascript
import { Image, Transformation } from "cloudinary-react";
```

Next, paste the code below into the `styles.imageRow` div, below the `img` tag.

```javascript
return (
  <div className={styles.container}>
    <div className={styles.imageRow}>
        <img
          alt="CloudinaryImage"
          src="https://res.cloudinary.com/iamdeelesiemmanuel/image/upload/v1655992810/ManImage_nzf4or.jpg"
          height={450}
        />

      <div className={styles.column}>
        <Image
          id="image"
          className={styles.cloudImage}
          secure={true}
          cloudName="iamdeelesiemmanuel"
          publicId="ManImage_nzf4or"
        >
          <Transformation
            width="250"
            height="250"
            gravity="face"
            crop="thumb"
          />
        </Image>
        <br />
      </div>
    </div>
  </div>
);
```

We added the `Image` and `Transformation` tag, which is imported from the `cloudinary-react` package. In the Image tag, we added some information from our Cloudinary account like the `cloudImage`, `publicId`. The `cloudImage` is gotten from our Cloudinary dashboard page.

![Cloudinary Dashboard page displaying Cloud Name](https://blog.openreplay.com/static/f4fbe3351c2f707f0e924f4e9988690c/294d0/image05.png)

The image below gets the' publicId' from the Media Library page.

![6](https://blog.openreplay.com/static/4fbdb341eca8370a65e509866695d701/294d0/image06.png)

Testing our application out, we should get a similar result, as shown in the image below.

![7](https://blog.openreplay.com/static/811b545e1359246166d67c84466ef00f/294d0/image07.png)


## Open Source Session Replay

_[OpenReplay](https://github.com/openreplay/openreplay) is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data._

![replayer.png](https://static.openreplay.com/images/banner-blog.png)

_Start enjoying your debugging experience - [start using OpenReplay for free](https://github.com/openreplay/openreplay)._


## Uploading Face Detected Images to Cloudinary

Finally, Let's upload our face-detected image back to Cloudinary. To enable image upload to Cloudinary, we'll need the `cloudinary` package at the server. Run the command below in the terminal to install the `cloudinary` package/

```
npm install cloudinary
```

Next, create a `.env.local`  file in the project's root folder and set the following variables, which you can access from the Dashboard page on your Cloudinary account.

```
CLOUD_NAME = YOUR_CLOUDINARY_CLOUD_NAME
API_KEY = YOUR_CLOUDINARY_APIKEY
API_SECRET = YOUR_CLOUDINARY_API_SECRET
```

Next, create an `api` folder in the `pages` folder and a `upload.js` file.

![8](https://blog.openreplay.com/static/04c25483363269a318c897c5304bc97d/25260/image08.png)

Copy and paste the code below the newly created `upload.js` file.

```javascript
var cloudinary = require("cloudinary").v2;

cloudinary.config({
  cloud_name: process.env.CLOUD_NAME,
  api_key: process.env.API_KEY,
  api_secret: process.env.API_SECRET,
});

export const config = {
  api: {
    bodyParser: {
      sizeLimit: "10000mb",
    },
  },
};

export default async function handler(req, res) {
  let upload_url = "";
  const fileStr = req.body.data;
  if (req.method === "POST") {
    console.log(fileStr);
    try {
      const uploadedResponse = await cloudinary.uploader.upload_large(fileStr, {
        chunk_size: 6000000,
      });
      upload_url = uploadedResponse.secure_url;
      console.log(upload_url);
    } catch (error) {
      console.log(error);
    }
    res.status(200).json({ data: upload_url });
  }
}
```

We're assigning the Cloudinary v2 to a cloudinary variable based on the code block above. Then, we're also configuring the `cloud_name`,  `api_key`, and `api_secret` to the values in our `.env.local` file. Next, we're configuring the `handler` function to a post request that accepts the large files and logs the response to the console.

## Uploading Image to Cloudinary server

It's time to upload our face-detected image to our Cloudinary library. Head over to the `pages/index.js` file and paste the code below into the `Home()` function above the `return()` function.

```javascript
export default function Home() { 

  const uploadImage = async () => {
    const image = document.getElementById("image").src;
    console.log(image)
    try {
      fetch("/api/upload", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ data: image }),
      })
        .then((response) => response.json())
        .then((data) => {
          console.log(data);
          console.log("Image upload complete");
        });
    } catch (error) {
      console.error(error);
    }
  };
  
  ...
}
```

The code above grabs our image from the source, stringify it, and makes a post request to the Cloudinary server to upload the face-detected image when the function is called. To call the function, we'll need to create a button to make the request. Below the `<br />` tag in the `return ()` statement, paste the code below.

```javascript
return (
  <div className={styles.container}>
    <div className={styles.imageRow}>
      <div className=''>
        <img
          alt="CloudinaryImage"
          src="https://res.cloudinary.com/iamdeelesiemmanuel/image/upload/v1655992810/ManImage_nzf4or.jpg"
          height={450}
        />
      </div>
      <div className={styles.column}>
        <Image
          id="image"
          className={styles.cloudImage}
          secure={true}
          cloudName="iamdeelesiemmanuel"
          publicId="ManImage_nzf4or"
        >
          <Transformation
            width="250"
            height="250"
            gravity="face"
            crop="thumb"
          />
        </Image>
        <br />

        {/* Button */}
        <button className={styles.btn} onClick={uploadImage}>
          Upload Image
        </button>

      </div>
    </div>
  </div>
);
```    

We added a button in the code block above. Upon clicking the button, it makes a post request to the Cloudinary server and uploads the image.

![9](https://blog.openreplay.com/static/b6b04913f4e213765d9daf0967f50b56/294d0/image09.png)

And here's our online library.

![10](https://blog.openreplay.com/static/664c66e95a0103fe1fc0375c8a14fae2/294d0/image10.png)

## Conclusion

In this tutorial, we've looked at facial detection and its importance and successfully detected and captured the faces in images. We've also successfully set up, configured, and uploaded the images to our Cloudinary account. Do try out other images and capture them facially.

Here is the link to the [complete source code](https://github.com/DeelesiEmmanuel/face-detector-app).

[![newsletter](https://blog.openreplay.com/static/e6b18eda7a327511296a2f27692f9c70/e9957/newsletter.png)](https://newsletter.openreplay.com/)