Building an AI-Powered Web Application with Next.js and TensorFlow.js | by Ivan | Jul, 2024

2. State Initialization:

• model: State to store the loaded TensorFlow model.
• predictions: State to store the predictions made by the model.

import Head from "next/head";
import styles from "../styles/Home.module.css";
import { useState } from "react";
import { loadModel, loadImage } from "@/utils/imageProcessing";
export default function Home() {
const [model, setModel] = useState(null);
const [predictions, setPredictions] = useState([]);

3. handleAnalyzeClick Function:

• Retrieves the uploaded image file.
• Loads the image and passes it to the model for classification.
• Sets the predictions state with the results.

  const handleAnalyzeClick = async () => {
const fileInput = document.getElementById("image-upload");
const imageFile = fileInput.files[0];
if (!imageFile) {
alert("Please upload an image file.");
return;
}
try {
const image = await loadImage(imageFile);
const predictions = await model.classify(image);
setPredictions(predictions);
} catch (error) {
console.error('Error analyzing the image:', error);
}
};

1. Retrieving the Uploaded Image File:

const fileInput = document.getElementById("image-upload");
const imageFile = fileInput.files[0];

• document.getElementById("image-upload"): This retrieves the file input element from the DOM. This element is where users upload their images.
• const imageFile = fileInput.files[0];: This gets the first file from the file input. The files property is an array-like object, so we select the first file uploaded.

2. Checking if an Image File is Uploaded:

if (!imageFile) {
alert("Please upload an image file.");
return;
}

• if (!imageFile): This checks if an image file is selected. If no file is selected, imageFile will be null or undefined.
• alert("Please upload an image file.");: If no file is selected, an alert message is displayed to the user.
• return;: The Function exits early if no file is selected, preventing further execution.

3. Loading the Image and Classifying It:

try {
const image = await loadImage(imageFile);
const predictions = await model.classify(image);
setPredictions(predictions);
} catch (error) {
console.error('Error analyzing the image:', error);
}

• try { ... } catch (error) { ... }: The try-catch The block handles any errors during the image loading and classification process.
• Loading the Image:

const image = await loadImage(imageFile);

• loadImage(imageFile): This function is a utility that converts the image file into a format suitable for processing TensorFlow.js. It likely involves reading the file and creating an HTML image element or a TensorFlow.js tensor.
• await: This keyword ensures that the Function waits for the image loading to complete before moving to the next step.
• const image =: The loaded image is stored in the image Variable.

Classifying the Image:

const predictions = await model.classify(image);

• model.classify(image): This method uses the TensorFlow.js model to classify the input image. It returns predictions about what the image contains.
• await: This ensures the Function waits for the classification process to complete.
• const predictions =: The classification results are stored in the predictions Variable.

Setting Predictions State:

setPredictions(predictions);

setPredictions(predictions): This updates the predictions State with the new classification results. This triggers a re-render of the component, displaying the predictions to the user.

4. Handling Errors:

catch (error) {
console.error('Error analyzing the image:', error);
}

• catch (error) { ... }: This block catches any errors that occur during the try block.
• console.error('Error analyzing the image:', error);: If an error occurs, it logs the error message to the console for debugging purposes.

4. Model Loading:

• Uses a useState Hook to load the model when the component mounts.
• Sets the loaded model into the state.

  useState(() => {
(async () => {
try {
const loadedModel = await loadModel();
setModel(loadedModel);
} catch (error) {
console.error('Error loading the model:', error);
}
})();
}, []);

• Defines a React useState Hook that initializes and loads the TensorFlow.js model when the component mounts.
• It uses an immediately invoked asynchronous function to call the loadModel Function, which loads the model and sets it in the component's state using the setModel Function.
• If an error occurs during the model loading process, it catches the error and logs it to the console.
• The empty dependency array [] ensures this effect runs only once when the component is first rendered.

To begin building our AI-powered web application with Next.js and TensorFlow.js, we'll set up a basic layout using Next.js components. This initial structure will be the foundation for our application's user interface.

5. Rendering:

• Renders the main layout of the application.
• Provides input for image upload and button for analysis.
• Displays the predictions if available.

1. Fragment Wrapper

  return (
...
> 

... >: This React Fragment allows multiple elements to be grouped without adding extra nodes to the DOM.

2. Container Div

...

: This div wraps the main content of the page and applies styling from the styles.container Class.

3. Head Component

4. Main Content

...

5. Title and Description

Using Next.js and TensorFlow.js to show some AI model.

• : This heading displays the main title of the page with styling from the styles.title Class.

• ...

  : This paragraph provides a brief description and is styled using the styles.description Class.

6. Input Area

Analyze Image

7. Output Area

  {predictions.length > 0 && (
    

{predictions.map((pred, index) => (

{pred.className}: {(pred.probability * 100).toFixed(2)}%

))}

  )}

• ...

  : This div contains the output area where predictions are displayed.

• {predictions.length > 0 && ( ... )}: This conditional rendering checks for predictions and renders the list of predictions if there are any.
• : An unordered list that will contain the prediction items.
• predictions.map((pred, index) => ( ... )): This maps over the predictions Array and render each prediction as a list item.
• ...

: Each list item displays the class name and probability of the prediction, formatted to two decimal places. The key attribute helps React identify which items have changed

Edit the Styles for the index.js file in Home.module.css erase all the code, and add the following one:

.container {
min-height: 100vh;
padding: 0 0.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
padding: 5rem 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.title {
margin: 0;
line-height: 1.15;
font-size: 4rem;
text-align: center;
}
.description {
margin: 4rem 0;
line-height: 1.5;
font-size: 1.5rem;
text-align: center;
}
#ouput-area {
margin-top: 2rem;
}
.li {
margin-top: 10px;
font-size: 20px;
}
.button {
margin-top: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
cursor:pointer;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
}
.button:hover {
background-color: #005bb5;
}

Once you have done the previous steps, check to see something like this:

Now, let's work with the brain of the app. imageProcessing.js File:

Function: loadModel

import * as tf from "@tensorflow/tfjs";
import * as mobilenet from "@tensorflow-models/mobilenet";
export async function loadModel() {
try {
const model = await mobilenet.load();
return model;
} catch (error) {
console.error("Error loading the model:", error);
throw error;
}
}

This Function loads the MobileNet model using TensorFlow.js. Here's a step-by-step explanation:

• Imports: The Function imports TensorFlow.js (tf) and the MobileNet model (mobilenet).
• Function Definition: The loadModel function is defined as an asynchronous function.
• Try-Catch Block: Within a try-catch block, the Function loads the MobileNet model asynchronously with await mobilenet.load().
• Return Model: If successful, it returns the loaded model.
• Error Handling: If an error occurs, it logs the error to the console and throws it, allowing the calling function to handle it.

Function: preprocesImage

export function preprocesImage(image) {
const tensor = tf.browser
.fromPixels(image)
.resizeNearestNeighbor([224, 224]) // MobileNet input size
.toFloat()
.expandDims();
return tensor.div(127.5).sub(1); // Normalize to [-1, 1] range
}

This function preprocesses an image in the format required by MobileNet. Here's a step-by-step explanation:

• Function Definition: The preprocesImage function is defined to take an image as an argument.
• Tensor Conversion: The Function converts the image to a tensor using tf.browser.fromPixels(image).
• Resize: It resizes the image tensor to [224, 224], which is the required input size for MobileNet.
• Float Conversion: The tensor is then converted to a float using .toFloat().
• Add Dimension: The tensor is expanded to include a batch dimension using. .expandDims().
• Normalization: Finally, the tensor is normalized to a range of [-1, 1] by dividing by 127.5 and subtracting 1.

Function: loadImage

export function loadImage(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
const img = new Image();
img.src = event.target.result;
img.onload = () => resolve(img);
};
reader.onerror = (error) => reject(error);
reader.readAsDataURL(file);
});
}

This Function loads an image file and returns an HTML Image element. Here's a step-by-step explanation:

• Function Definition: The loadImage function is defined to take a file as an argument.
• Promise Creation: The Function returns a new Promise, which resolves with the loaded image or rejects with an error.
• FileReader: A FileReader The object is created to read the file.
• Reader onLoad: The onload event handler of the reader is defined. It creates a new Image Object sets its source to the file reader's result and resolves the promise with the image once it is loaded.
• Reader onError: The onerror event handler of the reader is defined to reject the promise with an error if one occurs.
• Read File: The file reader reads the file as a data URL using reader.readAsDataURL(file).

Now you can test this final project by uploading images to the project's page and seeing the final results; if you have any problems, please check the provided link to clone the project from Github:

https://github.com/ivansing/ai-web-app

This tutorial taught you how to build an AI-powered web application using Next.js and TensorFlow.js. We covered:

1. Setting Up the Environment: You installed Next.js and TensorFlow.js and set up your development environment.
2. Creating the User Interface: You made a simple UI for uploading images and displaying predictions.
3. Integrating TensorFlow.js: You integrated the MobileNet model to perform image classification directly in the browser.
4. Deploying the Application: You deployed your application to Vercel, making it accessible worldwide.

By combining Next.js and TensorFlow.js, you can create sophisticated web applications that leverage the power of AI, enhancing user experiences with features like image recognition.

To further improve your application, consider exploring these additional features:

• Enhanced UI: Improve the user interface with more advanced styling or additional features.
• Additional Models: Integrate other pre-trained models from TensorFlow.js or train your custom models.
• Real-Time Data: Implement real-time data processing and display for dynamic user interactions.

Ivan Duarte is a backend developer with experience working freelance. He is passionate about web development and artificial intelligence and enjoys sharing their knowledge through tutorials and articles. Follow me on X , Github, and LinkedIn for more insights and updates.