YOLOv5 on Browser with onnxruntime-web

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

Setup

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

Scripts

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

Model

YOLOv5n model converted to onnx model.

used model : yolov5n
size       : 7.6 Mb

Use another model

:warning: Size Overload : used YOLOv5 model in this repo is the smallest with size of 7.5 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

   export.py --weights yolov5*.pt --include onnx
   

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

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

   ...
   // configs
   const modelName = "yolov5*.onnx"; // change to new model name
   const modelInputShape = [1, 3, 640, 640];
   ...
   

5. Done! 😊

Reference

• https://github.com/ultralytics/yolov5
• https://github.com/doleron/yolov5-opencv-cpp-python