YOLOv8 Segmentation with onnxruntime-web

---

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

Setup

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

Scripts

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

Models

Main Model

YOLOv8n-seg model converted to onnx.

used model : yolov8n-seg.onnx
size       : 14 Mb

NMS

ONNX model to perform NMS operator [CUSTOM].

Mask

ONNX model to produce mask for every object detected [CUSTOM].

Use another model

⚠️ Size Overload : used YOLOv8 segmentation model in this repo is the smallest with size of 14 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

   from ultralytics import YOLO
   
   # Load a model
   model = YOLO("yolov8*-seg.pt")  # load an official yolov8* model
   
   # Export the model
   model.export(format="onnx")

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

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

   ...
   // configs
   const modelName = "yolov8*-seg.onnx";
   const modelInputShape = [1, 3, 640, 640];
   const topk = 100;
   const iouThreshold = 0.45;
   const scoreThreshold = 0.2;
   ...

4. Done! 😊

Note: Custom Trained YOLOv8 Segmentation Models

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

Reference

• https://github.com/ultralytics/ultralytics
• https://github.com/Hyuto/yolov8-onnxruntime-web
• https://github.com/Hyuto/yolov5-seg-onnxruntime-web