hyuto/yolov5-tfjs

YOLOv5 right in your browser with tensorflow.js

Object Detection using YOLOv5 and Tensorflow.js

---

More Feature Version

---

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

Setup

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

Scripts

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

Model

YOLOv5n model converted to tensorflow.js.

used model : yolov5n
size       : 7.5 Mb

Use another model

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 tensorflow.js format

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

3. Copy yolov5*_web_model to ./public

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

   ...
   // model configs
   const modelName = "yolov5*"; // change to new model name
   const classThreshold = 0.25;
   ...

5. Done! 😊

Reference

https://github.com/ultralytics/yolov5

yolov5-tfjs's Issues

How to encrypt and Decrypt model files

Hi @Hyuto ,
Can you please guide me how can i encrypt the model file and decrypt it at the time of loading the file. I don't want my models to get downloaded on the client side.

Do you support the latest yolov5-7.0 seg?

Do you support the latest yolov5-7.0 seg?

Support for YOLO v8?

Hi,

Do you think this repo as well as your segmentation repo

Will support the latest YOLO v8 model for detection and segmentation?
https://github.com/ultralytics/ultralytics

It seems you can already export it to ONNX
https://docs.ultralytics.com/tasks/detection/
https://docs.ultralytics.com/tasks/segmentation/

Then we could use something like
https://github.com/onnx/onnx-tensorflow to get it to tfjs if needed

I wonder if it's just plug and play if we just load the v8 model instead of the v5

Can't display boxes on IOS Safari

Hello, I've been trying to make this webapp work on mobile devices. It works pretty fine with Android devices (on some devices the live detection is a bit slow) but on Iphones it doesn't work at all. I found out that the live recognition is actually working but behind the camera flow. The camera is in foreground and the boxes in the background which causes the boxes to be invisible.

Is there any fix for that ?

Thank you !

Running on LAN

Hello,

I've been trying to get this up and running on LAN but I've been unable to do so. When running on localhost everything runs perfectly but when I try to get the application running on LAN I get the error of "Can't open Webcam!" when I try to use the "Open Webcam" button.

I've explored the code a little and I found this if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) statement on webcam.js. When this statement fails the error "Can't open Webcam!" appears. I checked what was in navigator.media and on localhost this is a valid object but when I run the program on LAN it is undefined

I was wondering if you might know a way to fix this?

Thank you very much in advance.