YOLOv8 with onnxruntime-web

---

Object Detection application right in your browser. Serving YOLOv8 in browser using onnxruntime-web with wasm backend.

Setup

1git clone https://github.com/Hyuto/yolov8-onnxruntime-web.git
2cd yolov8-onnxruntime-web
3yarn install # Install dependencies

Scripts

1yarn start # Start dev server
2yarn build # Build for productions

Models

Main Model

YOLOv8n model converted to onnx.

used model : yolov8n.onnx
size       : 13 Mb

NMS

ONNX model to perform NMS operator [CUSTOM].

Use another model

:warning: Size Overload : used YOLOv8n model in this repo is the smallest with size of 13 MB, so other models is definitely bigger than this which can cause memory problems on browser.

Use another YOLOv8 model.

1. Export YOLOv8 model to onnx format. Read more on the official documentation

   1from ultralytics import YOLO
   2
   3# Load a model
   4model = YOLO("yolov8n.pt")  # load an official model
   5
   6# Export the model
   7model.export(format="onnx")

2. Copy yolov8*.onnx to ./public/model

3. Update modelName in App.jsx to new model name

   1...
   2// configs
   3const modelName = "yolov8*.onnx"; // change to new model name
   4const modelInputShape = [1, 3, 640, 640];
   5const topk = 100;
   6const iouThreshold = 0.4;
   7const scoreThreshold = 0.2;
   8...

4. Done! 😊

Note: Custom Trained YOLOv8 Models

Please update src/utils/labels.json with your custom YOLOv8 classes.

Reference

• https://github.com/ultralytics/ultralytics