https://github.com/asouqi/yolo-tfjs

Load your YOLO v5 or v8 model in browser using tensorflow.js
https://github.com/asouqi/yolo-tfjs

object-detection tenforflow tensorflowjs ultralytics yolov5 yolov8

Last synced: about 2 months ago
JSON representation

Load your YOLO v5 or v8 model in browser using tensorflow.js

• Host: GitHub
• URL: https://github.com/asouqi/yolo-tfjs
• Owner: asouqi
• License: mit
• Created: 2023-08-13T01:18:53.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-05-02T11:50:15.000Z (9 months ago)
• Last Synced: 2024-05-02T23:08:51.651Z (9 months ago)
• Topics: object-detection, tenforflow, tensorflowjs, ultralytics, yolov5, yolov8
• Language: TypeScript
• Homepage:
• Size: 18.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ⚡️ Load your YOLO v5 or v8 model in browser

Run object detection models trained with YOLOv5 YOLOv8 in browser using tensorflow.js

## Demo

check out a demo of [Aquarium Dataset object detection](https://asouqi.github.io/yolo-tfjs) 

## Install

### Yarn

    yarn add yolo-tfjs

### Or NPM

    npm install yolo-tfjs

## Usage Example

```javascript

import YOLOTf from "yolo-tfjs";

const CLASSES = ["fish", "jellyfish"]

const COLORS = ["#00C2FF", "#FF9D97"]

const imageRef = useRef(null)

// load model files

const yoloTf = await YOLOTf.loadYoloModel(`model_path/model.json`, CLASSES, {

    yoloVersion: 'v8', onProgress(fraction: number){

        console.log('loading model...')

    }})

// return dection results with detected boxes

const results = await yoloTf.predict(imageRef.current)

// draw boxes in the canvas element

yoloTf.renderBox(canvasRef.current, {

    ...results, ratio: [results["xRatio"],results["yRatio"]]

}, COLORS)

```

## API Docs

### loadYoloModel(model, classes, config): YOLOTf

#### Args

Param | Type | Description

-- | -- | --

model | string | path to model.json file

classes | string[] | classes of the trained model

config | Object | see below model configuration

Config | Type | Default | Description

-- | -- | -- | --

| [options.scoreThreshold] | Number | 0.5 | |

| [options.iouThreshold] | Number | 0.45  | |

| [options.maxOutputSize] | Number | 500  | |

| [options.onProgress] | Callback | (fraction: number) => void | |

| [options.yoloVersion] | YoloVersion | _ | selected version v5 or v8 |

### YOLOTf

#### PredictionData: `{boxes, classes, scores, xRatio, yRatio}`

#### predict(image, preprocessImage): PredictionData

Param | Type | Description

-- | -- | --

image | HTMLImageElement |

preprocessImage | (image: HTMLImageElement) => PreprocessResult | this optional param to use custom image preprocessing 

#### renderBox(canvas, predictionData, colors): {boxes, classes, scores, xRatio, yRatio}