README.md

yolo object detect onnxruntime-web

This is yolo model object detect web app, powered by ONNXRUNTIME-WEB.

Support Webgpu and wasm(cpu).

Models

Available Yolo Models

Model	Input Size	Param.
YOLO11-N	640	2.6M
YOLO11-S	640	9.4M
YOLO11-M	640	20.1M
YOLOv10-N	640	2.3M
YOLOv10-S	640	7.2M
YOLOv9-T	640	2.0M
YOLOv9-S	640	7.1M
GELAN-S2	640
YOLOv8-N	640	3.2M
YOLOv8-S	640	11.2M

NMS decoder

Build decoder model from onnx-modifier by myself.

View model graph detail in netron.app

Click to see graph.

Setup

git clone https://github.com/nomi30701/yolo-object-detection-onnxruntime-web.git
cd yolo-object-detection-onnxruntime-web
yarn install # install dependencies

Scripts

yarn dev # start dev server 

Use other YOLO model

1. Conver YOLO model to onnx format. Read more on Ultralytics.

   from ultralytics import YOLO
   
   # Load a model
   model = YOLO("yolo11n.pt")
   
   # Export the model
   model.export(format="onnx", opset=12)  

2. Copy your yolo model to ./public/models folder. (Also can click Add model button)
3. Add <option> HTML element in App.jsx,value="YOUR_FILE_NAME".

   ...
   <option value="YOUR_FILE_NAME">CUSTOM-MODEL</option>
   <option value="yolov10n-simplify">yolov10n-2.3M</option>
   <option value="yolov10s-simplify">yolov10s-7.2M</option>
   ...

4. select your model on page.
5. DONE!👍

✨ Support Webgpu

For onnx format support Webgpu, export model set opset=12.

✨ NMS setting

If custom model does not need nms, please click NMS check box.

⚠️ Classes label

If your model are custom data (classes), please update ./src/utils/yolo_classes.json classes label.