Object Detection using YOLOv8 and Tensorflow.js

Object Detection application right in your browser. Serving YOLOv8 in browser using tensorflow.js with webgl backend.

Setup

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

Scripts

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

Model

YOLOv8n model converted to tensorflow.js.

used model : yolov8n
size       : 13 Mb

Use another model

Use another YOLOv8 model.

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

   from ultralytics import YOLO
   
   # Load a model
   model = YOLO("yolov8n.pt")  # load an official model
   
   # Export the model
   model.export(format="tfjs")
   

2. Copy yolov8*_web_model to ./public

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

   ...
   // model configs
   const modelName = "yolov8*"; // change to new model name
   ...
   

4. Done! 😊

Note: Custom Trained YOLOv8 Models

Please update src/utils/labels.json with your new classes.

Reference

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