Hyuto / yolov8-tfjs

YOLOv8 right in your browser with tensorflow.js
https://hyuto.github.io/yolov8-tfjs/
138 stars 36 forks source link
object-detection react tensorflowjs webapp yolov8

Object Detection using YOLOv8 and Tensorflow.js

love 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