With advancements in computer vision and deep learning, building an AI-powered image recognition app is easier than ever. In this guide, we’ll create an app that can recognize objects in images using OpenCV, TensorFlow, and React.
🔹 Overview of the Tech Stack
✅ OpenCV – For image processing and preprocessing.
✅ TensorFlow – For deep learning-based image recognition.
✅ React.js – For building the front-end UI.
✅ FastAPI/Flask – For serving the AI model as an API.
To recognize images, we need a deep learning model. We have two options:
1️⃣ Use a Pre-Trained Model (Recommended for beginners)
2️⃣ Train a Custom Model (For advanced use cases)
✅ Option 1: Use a Pre-Trained Model (MobileNet, ResNet, or YOLO)
TensorFlow provides pre-trained models that can recognize thousands of objects.
import tensorflow as tf
import numpy as np
from tensorflow.keras.applications.mobilenet_v2 import MobileNetV2, preprocess_input, decode_predictions
from PIL import Image
# Load pre-trained MobileNetV2 model
model = MobileNetV2(weights="imagenet")
# Load and preprocess image
image = Image.open("test.jpg").resize((224, 224))
image_array = np.array(image)
image_array = np.expand_dims(image_array, axis=0)
image_array = preprocess_input(image_array)
# Predict the object in the image
predictions = model.predict(image_array)
decoded_predictions = decode_predictions(predictions, top=3)[0]
for pred in decoded_predictions:
print(f"{pred[1]}: {pred[2]*100:.2f}%")
✅ This model can classify common objects like cars, animals, and furniture!
✅ Option 2: Train a Custom Model
If you need a custom model for face recognition, medical imaging, or specialized objects, train your own dataset using TensorFlow and OpenCV.
Example: Training an Image Classifier with TensorFlow
import tensorflow as tf
from tensorflow.keras import layers, models
# Define model architecture
model = models.Sequential([
layers.Conv2D(32, (3, 3), activation='relu', input_shape=(128, 128, 3)),
layers.MaxPooling2D((2, 2)),
layers.Conv2D(64, (3, 3), activation='relu'),
layers.MaxPooling2D((2, 2)),
layers.Flatten(),
layers.Dense(128, activation='relu'),
layers.Dense(10, activation='softmax') # 10 classes
])
# Compile the model
model.compile(optimizer='adam', loss='sparse_categorical_crossentropy', metrics=['accuracy'])
# Train on custom dataset
model.fit(train_images, train_labels, epochs=10, validation_data=(test_images, test_labels))
✅ Once trained, save the model:
model.save("image_recognition_model.h5")
🔹 Step 2: Deploy the Model as an API (FastAPI or Flask)
To use the AI model in a web app, we need an API that takes an image as input and returns predictions.
✅ Using FastAPI for Model Inference
from fastapi import FastAPI, UploadFile, File
import tensorflow as tf
import numpy as np
from PIL import Image
app = FastAPI()
model = tf.keras.models.load_model("image_recognition_model.h5")
@app.post("/predict")
async def predict_image(file: UploadFile = File(...)):
image = Image.open(file.file).resize((128, 128))
image_array = np.expand_dims(np.array(image), axis=0) / 255.0
predictions = model.predict(image_array)
return {"predictions": predictions.tolist()}
✅ Run the API:
uvicorn app:app --reload
This creates an endpoint (/predict) where the front end can send image files for recognition.
🔹 Step 3: Build the Front-End with React
✅ Set Up React App
npx create-react-app image-recognition-app
cd image-recognition-app
npm install axios
✅ Create an Upload Form (App.js)
import React, { useState } from "react";
import axios from "axios";
function App() {
const [selectedFile, setSelectedFile] = useState(null);
const [prediction, setPrediction] = useState("");
const uploadImage = async () => {
const formData = new FormData();
formData.append("file", selectedFile);
const response = await axios.post(
"http://127.0.0.1:8000/predict",
formData
);
setPrediction(response.data.predictions);
};
return (
<div>
<h1>AI-Powered Image Recognition</h1>
<input type="file" onChange={(e) => setSelectedFile(e.target.files[0])} />
<button onClick={uploadImage}>Predict</button>
{prediction && <h2>Prediction: {prediction}</h2>}
</div>
);
}
export default App;
🔹 Step 4: Run and Test the App
✅ Start the back-end server (FastAPI/Flask):
uvicorn app:app --reload
✅ Start the React app:
npm start
✅ Upload an image, and the AI model will predict the object in it! 🎉
🔹 Step 5: Deploy the App
To make the app available online:
✅ Back-End (API):
- Deploy on AWS Lambda, Google Cloud Functions, or Azure Functions.
- Use Docker + Kubernetes for scalability.
✅ Front-End (React App):
- Deploy on Vercel, Netlify, or Firebase Hosting.
Example Dockerfile for Deployment:
FROM python:3.9
WORKDIR /app
COPY requirements.txt .
RUN pip install -r requirements.txt
COPY . .
CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "8000"]
✅ Deploy with AWS ECS or Google Cloud Run! 🚀
🔹 Summary: Key Takeaways
✅ Use TensorFlow & OpenCV for image processing.
✅ Deploy AI models with FastAPI & Flask.
✅ Build a simple React UI for user interaction.
✅ Deploy on cloud platforms for scalability.
🎯 Now you have a fully functional AI-powered image recognition app! 🚀
Top comments (0)