best smart application 🖼️ Object Detection Image
An end-to-end web application that allows users to upload images and receive annotated results with detected objects using a YOLOv5 model. The system comprises a React frontend and a Flask backend, facilitating seamless object detection and visualization. 📸 Demo
Replace with an actual image or GIF showcasing your project's functionality. 🚀 Features
Image Upload: Users can upload images through the web interface.
Object Detection: Utilizes a YOLOv5 model to detect and classify objects within the uploaded images.
Annotated Results: Returns images with bounding boxes and labels indicating detected objects.
Responsive Frontend: Built with React and Tailwind CSS for a responsive and user-friendly interface.
Backend API: Flask-based API handles image processing and model inference.
🛠️ Tech Stack
Frontend: React, Vite, Tailwind CSS
Backend: Flask, PyTorch, YOLOv5
Model: Pre-trained YOLOv5 model (yolov5mu.pt)
Others: PostCSS, ESLint
📂 Project Structure
Object-Detection-Image/
├── backend/
│ ├── requirements.txt
│ ├── server.py
│ ├── uploads/
│ │ ├── annotated_image.jpg
│ │ ├── car.jpg
│ │ ├── cat.jpg
│ │ └── dog.jpg
│ ├── yolov5/
│ └── yolov5mu.pt
├── frontend/
│ ├── eslint.config.js
│ ├── index.html
│ ├── package.json
│ ├── package-lock.json
│ ├── postcss.config.js
│ ├── public/
│ │ └── vite.svg
│ ├── src/
│ │ ├── App.css
│ │ ├── App.jsx
│ │ ├── assets/
│ │ │ └── react.svg
│ │ ├── components/
│ │ │ └── ObjectDetection.jsx
│ │ ├── index.css
│ │ └── main.jsx
│ ├── tailwind.config.js
│ └── vite.config.js
└── README.md
⚙️ Installation Backend Setup
Navigate to the backend directory:
cd backend
Create and activate a virtual environment (optional but recommended):
python -m venv venv
source venv/bin/activate # On Windows: venv\Scripts\activate
Install dependencies:
pip install -r requirements.txt
Run the Flask server:
python server.py
The backend server will start on http://localhost:5000.
Frontend Setup
Navigate to the frontend directory:
cd frontend
Install dependencies:
npm install
Start the development server:
npm run dev
The frontend will be available at http://localhost:3000.
🧪 How It Works
Image Upload: Users upload an image through the React frontend.
API Request: The image is sent to the Flask backend via a POST request.
Object Detection: The backend processes the image using the YOLOv5 model and generates an annotated image with detected objects.
Response: The annotated image is sent back to the frontend and displayed to the user.
Include relevant screenshots here. 📈 Future Enhancements
Real-Time Detection: Extend functionality to support real-time object detection via webcam.
Model Selection: Allow users to choose between different YOLO models or custom-trained models.
Performance Optimization: Implement caching and optimize model loading for faster inference.
📄 License
This project is licensed under the MIT License.