Creating a Face Detector with Next.js

This article demonstrates how to apply a face detection transformation on custom images using cloudinary SDK.

Check the sandbox demo on Codesandbox.

You can also get the project GitHub repo using Github.

Entry-level javascript and React/Nextjs knowledge.

Cloudinary refers to an end-to-end image and video management solution for websites and mobile applications. This involves services such as storage, uploads, manipulations e.t.c What we will be achieving today is using Cloudinary React SDK to achieve a face transformation feature for a custom imageCloudinary. This project will also store the processed image online using the same SDK.

Begin with creating a Nextjs project through your terminal using npx create-next-app facerecognition.

Head to your project: cd facerecognition

We will include all our frontend code in the index component. Before you start ensure to include cloudinary-react in your project dependencies: npm install cloudinary-react.

Next, we will need the following elements:

- Image => To define an image tag with
- Transformation => Allows us to define our transformation on the parent element.

To transform an image using cloudinary-react SDK, we need to first upload it to cloudinary media servers. There are three ways to achieve this: upload widget, upload endpoint, and jQuery SDK with Blueimp File Upload adapter. We will go with the upload widget option. First, Use this link to create your own cloudinary account and log into it. Click on the Media Library option at the navigation bar. We will use the following sample image for our transformation.

Proceed by clicking the upload button and select browse from the popup menu to select the image from your local directory.

Once selected the image will be available in your cloudinary console media library.

Proceed to the pages/ index directory and begin by importing the respective elements:

"pages/index"


 import { Image, Transformation } from 'cloudinary-react';

Paste the following code in your return statement.

return (
    <div className="container">
      <h1>Create a Nextjs face detector with Cloudinary</h1>
      <div className="row">
        <div className="column">
          <img width="550" height="400" src="https://res.cloudinary.com/dogjmmett/image/upload/v1649911466/officelady.jpg" />
        </div>
        <div className="column">
          <Image
            id="image"
            cloudName="dogjmmett"
            secure={true}
            upload_preset="my_unsigned_preset"
            publicId="officelady"
          >
            <Transformation width="200" height="200" gravity="face" crop="thumb" />
          </Image><br />
          <button  >Upload</button>
        </div>
      </div>
    </div >
  )

The code above involves a heading tag and a row containing two columns. One will contain the original image and the second will contain the processed image.

Remember to include your cloud name from the cloudinary dashboard to your image tag as well as the title of the tour image component from your media library. For instance, our name is dogjmmett as shown here:

and the publicId will be the image file name on your media library as shown:

.

With our transformation complete, we need to be able to upload the transformed image i.e for future references. To achieve this we will have to code our upload configuration in the nextjs backend. Create a file in your project root directory and paste the following code:

CLOUDINARY_CLOUD_NAME =

CLOUDINARY_API_KEY =

CLOUDINARY_API_SECRET =

Use the environment variables from your cloudinary dashboard to fill in the blanks above

Restart your project using npm run dev and

In the pages/api folder, create a new file named upload.js and begin by configuring the environment keys and libraries.

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

cloudinary.config({
    cloud_name: process.env.CLOUDINARY_NAME,
    api_key: process.env.CLOUDINARY_API_KEY,
    api_secret: process.env.CLOUDINARY_API_SECRET,
});

Create a handler function to execute the POST request. The function will receive media file data and post it to the cloudinary website, Capture the media file’s cloudinary link and send it back as a response.

export default async function handler(req, res) {
    if (req.method === "POST") {
        let url = ""
        try {
            let fileStr = req.body.data;
            const uploadedResponse = await cloudinary.uploader.upload_large(
                fileStr,
                {
                    resource_type: "video",
                    chunk_size: 6000000,
                }
            );
            url = uploadedResponse.url
        } catch (error) {
            res.status(500).json({ error: "Something wrong" });
        }

        res.status(200).json({data: url});
    }
}

The code above concludes our backend as well as the project itself. Ensure to test out the article to enjoy the experience.

Happy coding!