Mockups Face Generator Using Next.js

Eugene Musebe

Introduction

This article demonstrates Next.js framework can be used to generate AI faces. The faces can be used in presentations or database demos since they do not represent any real human characters.

Codesandbox

Find the sandbox demo using Codesandbox.

U can also explore the Github repo Github.

Prerequisites

Entry-level javascript and React/Next.js knowledge.

Setting Up the Sample Project

Create a new Next.js app using npx create-next-app facegenerator in your terminal. Head to your project root directory cd facegenerator

We will begin by setting up the backend. It will only consist of Cloudinary integration.

First, the user this link to create your own Cloudinary account and log into it to access your dashboard and environment variables.

include Cloudinary in your project dependencies npm install Cloudinary In your project root directory, create a new file named .env.local and use the following.enc.example to insert your environment variables.

1".env.example"
2
3
4CLOUDINARY_CLOUD_NAME =
5
6CLOUDINARY_API_KEY =
7
8CLOUDINARY_API_SECRET =

Restart your project using: npm run dev

In the pages/api folder, create a new file named upload.js and begin by configuring the environment 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});

Below the above code, add the following

1export default async function handler(req, res) {
2 if (req.method === "POST") {
3 let url = ""
4 try {
5 let fileStr = req.body.data;
6 const uploadedResponse = await Cloudinary.uploader.upload_large(
7 fileStr,
8 {
9 resource_type: "video",
10 chunk_size: 6000000,
11 }
12 );
13 url = uploadedResponse.url
14 } catch (error) {
15 res.status(500).json({ error: "Something wrong" });
16 }
17
18 res.status(200).json({data: url});
19 }
20}

Next.js uses the above handler function to achieve server-side rendering in the project backend. After sending the file to Cloudinary the file's Cloudinary url is sent back to the frontend as a response.

Now let's look at the front end.

Start by downloading material-ui to design our button element: npm install material-ui/core

Include the following necessary imports the following in your Home component.

1import { Button } from '@material-ui/core';
2import React, { useEffect, useState } from 'react';

Declare the following state hooks to track the image string and links received from their respective website sources.

We will use the following code to create random integers

1const randomInt = (min, max) => {
2 return Math.floor(Math.random() * (max - min + 1) + min)
3}

We will also need to move around different sets of folders as we track the faces files randomly.

Paste the following code to create the algorithm we will use.

1const strPad = str => {
2 return '000'.slice(str.toString().length) + str
3 }

Now use the following code to browse through the image files as json. notice the line that generates a random File.

1const randomImageUrl = () => {
2 const baseUrl = 'https://ozgrozer.github.io/100k-faces/'
3 const firstFolder = '0'
4 const secondFolder = randomInt(0, 9)
5 const randomFile = strPad(randomInt(0, 999))
6 const filename = `00${secondFolder}${randomFile}`
7 const fullUrl = `${baseUrl}${firstFolder}/${secondFolder}/${filename}.jpg`
8 const result = {
9 url: fullUrl
10 }
11 return result
12 }

We then capture the result and assign it to the image state hook.

1const changeHandler = async (req, res) => {
2 const result = randomImageUrl()
3 setImage(result.url)
4 }

Use the useEffect hook to activate the changeHandler function when the page is rendered.

Finally, use the uploadHandler function to upload the image to Cloudinary and save its response using the link state-hook.

Use the following code in your return statement. The css files are in the Github repo.

1return (
2 <div className="row">
3 <div className="column">
4 <div className="status">
5 Photo Link: <a href={link}>Use Link</a>
6 </div>
7 <div className='result' >
8 {image && <img id='photo' src={image} alt='AI Face' />}<br />
9 <Button variant='contained' color='primary' onClick={changeHandler}>New Image</Button>{' '}
10 <Button variant='contained' color='primary' onClick={uploadHandler}>Upload</Button>
11 </div>
12 </div>
13 </div>
14 )

The UI should look like below:

That's it. You can now upload any of these pictures from the website. All the best as you enjoy your article experience

Eugene Musebe

Software Developer

I’m a full-stack software developer, content creator, and tech community builder based in Nairobi, Kenya. I am addicted to learning new technologies and loves working with like-minded people.