DEV Community

Raji moshood
Raji moshood

Posted on

How to Build an AI-Powered Image Recognition App from Scratch

#ai #machinelearning #tensorflow #fastapi

AI-Powered Image Recognition App

AI-Powered Image Recognition App

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

AI-Powered Image Recognition App

✅ 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}%")
Enter fullscreen mode Exit fullscreen mode

✅ 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))
Enter fullscreen mode Exit fullscreen mode

✅ Once trained, save the model:

model.save("image_recognition_model.h5")
Enter fullscreen mode Exit fullscreen mode

🔹 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()}
Enter fullscreen mode Exit fullscreen mode

✅ Run the API:

uvicorn app:app --reload
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

✅ 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;
Enter fullscreen mode Exit fullscreen mode

🔹 Step 4: Run and Test the App

✅ Start the back-end server (FastAPI/Flask):

uvicorn app:app --reload
Enter fullscreen mode Exit fullscreen mode

✅ Start the React app:

npm start
Enter fullscreen mode Exit fullscreen mode

✅ 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"]
Enter fullscreen mode Exit fullscreen mode

✅ 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! 🚀

AI #MachineLearning #ImageRecognition #TensorFlow #React #FastAPI

Top comments (0)