React30-Part30:Building an Image Recognition App using TensorflowJS
Introduction
Image recognition applications have become increasingly popular, leveraging the power of machine learning to identify and categorize objects within images. In this article, we’ll explore the process of building an image recognition app in React. We’ll use a pre-trained image recognition model to make the development process more easy.
Goals
Create a image recognition app using TensorflowJS as shown in UI below:
Prerequisites
Before starting the implementation, make sure you have the following prerequisites:
Node.js and npm: Install Node.js from official website to get npm.
Create React App: Set up a new React project using Create React App (CRA)
`npx create-react-app image-recognition-app`
TensorFlow.js: Install TensorFlow.js, a library for machine learning in JavaScript:
`npm install @tensorflow/tfjs @tensorflow-models/coco-ssd`
Implementation
Project Structure
Organize your project structure. Inside the src folder, you might have the following structure:
src
|-- components
| |-- ImageRecognition.js
| |-- Header.js
|-- App.js
|-- index.js
Building Components
ImageRecognition Component (ImageRecognition.js):
// ImageRecognition.js
import React, { useRef, useState } from "react";
import * as cocoSsd from "@tensorflow-models/coco-ssd";
import "@tensorflow/tfjs";
const ImageRecognition = () => {
const [predictions, setPredictions] = useState([]);
const [loading, setLoading] = useState(false);
const imageRef = useRef(null);
const handleImageUpload = async (e) => {
const file = e.target.files[0];
if (file) {
const imageElement = imageRef.current;
imageElement.src = URL.createObjectURL(file);
setLoading(true);
const model = await cocoSsd.load();
const predictions = await model.detect(imageElement);
setPredictions(predictions);
setLoading(false);
}
};
return (
<div>
<input
type="file"
accept="image/*"
onChange={handleImageUpload}
className="mb-4 p-2 border rounded-md"
/>
<img
ref={imageRef}
alt="Selected"
className="mt-4 max-w-32 rounded-md shadow-md"
/>
<div className="mt-4">
{loading ? (
<p className="mt-4">Loading...</p>
) : (
<div>
<div className="mt-4">
<h2 className="text-xl font-bold mb-2">Predictions:</h2>
<ul className="list-disc pl-4">
{predictions.map((prediction, index) => (
<li key={index} className="mb-1">
{prediction.class} - Confidence:{" "}
{(prediction.score * 100).toFixed(2)}%
</li>
))}
</ul>
</div>
</div>
)}
</div>
</div>
);
};
export default ImageRecognition;
Explanation of Image Recognition Library Usage
@tensorflow/tfjs:
TensorFlow.js is an open-source library for machine learning in JavaScript. It allows us to run pre-trained models directly in the browser.
@tensorflow-models/coco-ssd:
COCO-SSD is a pre-trained object detection model that can identify and locate objects in images.
ImageRecognition Component:
Uses TensorFlow.js and COCO-SSD for image recognition.
Utilizes React state and refs to manage the selected image and predictions.
The `handleImageUpload` function is triggered when a user uploads an image. It loads the image, runs predictions using COCO-SSD, and updates the state with the results.
Loading state
The loading state is introduced to track whether the ML model is currently processing an image.
The setLoading(true) is called at the beginning of the model loading section to indicate the start of image recognition.
The setLoading(false) is placed later to ensure that it gets executed when the image recognition succeeds.
The UI is updated to conditionally render either the loading message or the image predictions based on the value of the loading state.
Header Component (Header.js):
// Header.js
import React from "react";
const Header = () => {
return (
<header className="bg-blue-700 text-white py-4">
<div className="container mx-auto flex justify-center items-center">
<div className="text-xl font-bold">Image Recognition App</div>
</div>
</header>
);
};
export default Header;
Integrating Components in App
Now, integrate the ImageRecognition component into your App.js file:
// App.js
import React from "react";
import Header from "./components/Header";
import ImageRecognition from "./components/ImageRecognition";
const App = () => {
return (
<div className="App">
<Header />
<div className="container mx-auto p-4">
<div className="bg-gray-200 p-6 rounded-md">
<h1 className="text-2xl font-bold mb-4">
Upload an Image for Recognition
</h1>
<ImageRecognition />
</div>
</div>
</div>
);
};
export default App;
Styling the app
Add below script in `public/index.html` to style the app:
<script src="https://cdn.tailwindcss.com"></script>
You should now see the app working in browser. Upload a sample image and check if model predicts object in image accurately. I have used a sample image from pexels website.
Live demo: Codesandbox
Conclusion
In this tutorial, we explored the process of building an image recognition app in React using TensorFlow.js and the COCO-SSD model. This example demonstrates how to integrate a pre-trained model into a React component for real-time object detection in images. You can further enhance this app by adding more features, refining the UI, or integrating with other machine learning models.
Parting Message
This is the last part in the series, so congratulations for learning core React.js fundamentals by building 30 useful projects. We have covered almost every aspect for becoming successful React.js developer in this series.
If you found this articles series helpful in anyway, consider donating a small amount for helping me in bringing in more such content in near future.
Donation links:
I will surely release more such content in future, so stay tuned and have a nice day ahead 😁
