This is a React application that performs object detection using the YOLOv8 model and runs directly in the browser. It utilizes the opencv-js
library for computer vision tasks and the onnxruntime-web
library for running ONNX models.
Follow the instructions below to run the React Object Detection App locally on your machine.
- Node.js (version 12 or above).
- Yarn (optional, but recommended)
- Clone the repository or download the source code:
git clone https://github.com/aliakbarhamzeh1378/yolov8_react.git
- Navigate to the project directory:
cd yolov8_react.git
- Install the dependencies using either
npm
oryarn
:
# Using npm
npm install
# Using Yarn
yarn
To start the React Object Detection App, use the following command:
# Using npm
npm start
# Using Yarn
yarn start
This command will start the development server and automatically open the app in your default web browser.
You should now see the app running and displaying the live camera feed with object detection overlays. Note that the first time you run the app, it may take some time to download the YOLOv8 model files.
You can customize the behavior of the object detection app by modifying the following variables:
- modelName: The name of the YOLOv8 model file.
- modelInputShape: The shape of the model input.
- topk: The number of top detections to keep.
- iouThreshold: The threshold for intersection-over-union (IoU) during non-maximum suppression.
- scoreThreshold: The minimum score threshold for object detection. Feel free to adjust these variables according to your requirements.
Note : Make sure to place your YOLOv8 model files in the specified location (public/model).
- This app is built using React, OpenCV.js, and ONNX Runtime Web.
- This object detection code are derived from the YOLOv8 with onnxruntime-web project and we replace webcam frame instead image.
- Special thanks to the authors of the libraries and frameworks used in this project.