This project is a web application that performs real-time object detection in image and video streams. It leverages the power of Next.js, ONNXRuntime, and cutting-edge YOLO models (v7 and v10) to deliver high-performance object recognition directly in the browser.

• Real-time Object Detection: Identify and label objects in live video feeds or static images.
• YOLOv7 & YOLOv10 Support: Utilizes state-of-the-art object detection models for accurate and fast inference.
• ONNXRuntime: Runs models efficiently in the browser using WebAssembly.
• Next.js: Provides a modern, performant, and scalable web application framework.
• Progressive Web App (PWA): Installable on desktops and mobile devices for offline access.
• Custom Model Integration: Easily integrate your own YOLO models.

Experience the application live at object-eye.vercel.app.

• Node.js (LTS recommended)
• npm or yarn

1. Clone the repository:

   git clone https://github.com/juanjaho/real-time-object-detection-web-app.git

2. Navigate to the project directory:

   cd real-time-object-detection-web-app

3. Install dependencies:

   npm install
   # or
   yarn install

4. Run the development server:

   npm run dev
   # or
   yarn dev

5. Open your browser and visit http://localhost:3000.

1. Place your .onnx or .ort model file in the /models directory.
2. Update the RES_TO_MODEL constant in components/models/Yolo.tsx to map your model's resolution to its path.
3. Modify the preprocess and postprocess functions in components/models/Yolo.tsx to handle your model's input and output formats.

NOTE that Ensure your model is optimized for ONNXRuntime WebAssembly. If you encounter protobuf errors, convert your model to the .ort format or optimize your .onnx model using the ONNXRuntime tools.

1. Open the app in a PWA-compatible browser (Chrome, Firefox, etc.).
2. Click the "Install" or "Add to Homescreen" button in the browser's interface.
3. Follow the prompts to install the app.

• Next.js
• ONNXRuntime
• YOLOv10
• YOLOv7