/yolov5-seg-onnxruntime-web

YOLOv5 Segmentation Right in The Browser Using onnxruntime-web

Primary LanguageJavaScript

YOLOv5 Segmentation with onnxruntime-web

love react onnxruntime-web opencv.js

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

Setup

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

Scripts

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

Models

Main Model

YOLOv5n-seg model converted to onnx.

used model : yolov5n-seg.onnx
size       : 8 Mb

NMS

ONNX model to perform NMS operator [CUSTOM].

nms-yolov5.onnx

Mask

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

mask-yolov5-seg.onnx

Use another model

⚠️ Size Overload : used YOLOv5 segmentation model in this repo is the smallest with size of 8 MB, so other models is definitely bigger than this which can cause memory problems on browser.

Use another YOLOv5 model.

  1. Clone yolov5 repository

    git clone https://github.com/ultralytics/yolov5.git && cd yolov5

    Install requirements.txt first

    pip install -r requirements.txt

  2. Export model to onnx format

    python export.py --weights yolov5*-seg.pt --include onnx --img 640

  3. Copy yolov5*-seg.onnx to ./public/model

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

    ...
// configs
const modelName = "yolov5*-seg.onnx"; // change to new model name
const modelInputShape = [1, 3, 640, 640];
const topk = 100;
const iouThreshold = 0.4;
const confThreshold = 0.2;
const classThreshold = 0.2;
...

  5. Done! 😊

Note : Custom Trained Model

For custom trained YOLOv5 Segmentation model please update labels.json

Reference