README.md · CV_Lab/YOLOv5-RT-TFJS

中文简体|English

基于TensorFlow.js的YOLOv5实时目标检测项目，支持自定义模型

轻量安装、使用方便、可移植性强

🚀 作者简介

曾逸夫，从事人工智能研究与开发；主研领域：计算机视觉；YOLOv8官方开源项目代码贡献人；YOLOv5官方开源项目代码贡献人；YOLOv5 v6.1代码贡献人；YOLOv5 v6.2代码贡献人；YOLOv5 v7.0代码贡献人；Gradio官方开源项目代码贡献人

❤️ Github：https://github.com/Zengyf-CVer

🔥 YOLOv8 官方开源项目PR ID：

Fix YOLOv8 Chinese introduction：https://github.com/ultralytics/ultralytics/pull/219
Add codespell and upgrade some components：https://github.com/ultralytics/ultralytics/pull/599
Add pycln：https://github.com/ultralytics/ultralytics/pull/7141
Fix heatmap width and height parameter bug：https://github.com/ultralytics/ultralytics/pull/7368
ultralytics 8.0.237 cv2.CAP_PROP fix and in_counts and out_counts displays：https://github.com/ultralytics/ultralytics/pull/7380

💡 Ultralytics v8.1.0 代码贡献链接：

https://github.com/ultralytics/ultralytics/releases/tag/v8.1.0

🔥 YOLOv5 官方开源项目PR ID：

Save *.npy features on detect.py --visualize：https://github.com/ultralytics/yolov5/pull/5701
Fix detect.py --view-img for non-ASCII paths：https://github.com/ultralytics/yolov5/pull/7093
Fix Flask REST API：https://github.com/ultralytics/yolov5/pull/7210
Add yesqa to precommit checks：https://github.com/ultralytics/yolov5/pull/7511
Add mdformat to precommit checks and update other version：https://github.com/ultralytics/yolov5/pull/7529
Add TensorRT dependencies：https://github.com/ultralytics/yolov5/pull/8553
Add paddle tips：https://github.com/ultralytics/yolov5/pull/9502

💡 YOLOv5 v6.1 & v6.2 & v7.0 代码贡献链接：

🔥 Gradio 官方开源项目PR ID：

Create a color generator demo：https://github.com/gradio-app/gradio/pull/1872

🚀更新走势

2023-01-09 ⚡ yolov5-rt-tfjs v0.4.2 发行版正式上线
2022-08-05 ⚡ yolov5-rt-tfjs v0.4 发行版正式上线
2022-03-02 ⚡ yolov5-rt-tfjs v0.3 发行版正式上线
⚡ yolov5-rt-tfjs 历史版本

💎项目用途

🔥 自定义目标检测任务

❤️ 自定义模型

📌 修改yolov5_rt_tfjs.js文件，自定义权重文件和类别名称

// 权重文件
const weights = '../yolov5s_web_model/model.json';

// 类别名称（中文版）
const cls_names = ['人', '自行车', '汽车', '摩托车', '飞机', '公交车', '火车', '卡车', '船', '红绿灯', '消防栓', '停止标志',
    '停车收费表', '长凳', '鸟', '猫', '狗', '马', '羊', '牛', '象', '熊', '斑马', '长颈鹿', '背包', '雨伞', '手提包', '领带',
    '手提箱', '飞盘', '滑雪板', '单板滑雪', '运动球', '风筝', '棒球棒', '棒球手套', '滑板', '冲浪板', '网球拍', '瓶子', '红酒杯',
    '杯子', '叉子', '刀', '勺', '碗', '香蕉', '苹果', '三明治', '橙子', '西兰花', '胡萝卜', '热狗', '比萨', '甜甜圈', '蛋糕',
    '椅子', '长椅', '盆栽', '床', '餐桌', '马桶', '电视', '笔记本电脑', '鼠标', '遥控器', '键盘', '手机', '微波炉', '烤箱',
    '烤面包机', '洗碗槽', '冰箱', '书', '时钟', '花瓶', '剪刀', '泰迪熊', '吹风机', '牙刷'
]

❤️ 自定义TensorFlow.js版本

📌 修改index.html文件，自定义TensorFlow.js的版本

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.2.0/dist/tf.min.js"></script>

❗ 注意：TensorFlow.js的版本>=3.9.0，本项目目前使用的版本为4.2.0

💡项目结构

.
├──yolov5_rt_tfjs							# 项目名称
│   ├── yolov5								# YOLOv5项目
│   │   ├── yolov5s.pt						# yolov5s模型文件
│   │   ├── yolov5s_web_model				# pt2tfjs模型01（使用）
│   │   ├── yolov5s_saved_model				# pt2tfjs模型02
│   │   ├── yolov5s.pb						# pt2tfjs模型03
│   │   └── ...								# 其他
│   ├── yolov5_rt_tfjs_src					# 项目主目录
│   │   ├── static							# 静态文件目录
│   │   ├── ├── yolov5s_web_model			# pt2tfjs模型01
│   │   │   ├── js							# JavaScript目录
│   │   │  	│	└── yolov5_rt_tfjs.js		# JS主运行文件
│   │   │   └── css							# JavaScript目录
│   │   │  		└── main.css				# css样式文件
│   │   └── index.html						# 项目主运行文件
│   ├── yolov5_rt_tfjs_hls					# 项目主目录（hls.js版）
│   │   ├── static							# 静态文件目录
│   │   ├── ├── yolov5s_web_model			# pt2tfjs模型01
│   │   │   ├── js							# JavaScript目录
│   │   │  	│	└── yolov5_rt_tfjs.js		# JS主运行文件（hls.js版）
│   │   │   └── css							# JavaScript目录
│   │   │  		└── main.css				# css样式文件
│   │   └── index.html						# 项目主运行文件
│   ├── yolov5_rt_tfjs_flask				# flask版主目录
│   │   ├── templates						# flask模板目录
│   │   │  	└── index.html					# flask html文件
│   │   ├── server.py						# flask server文件
│   │   └── README.md						# flask版项目说明
│   ├── yolov5_rt_tfjs_fastapi				# fastapi版主目录
│   │   ├── templates						# fastapi模板目录
│   │   │  	└── index.html					# fastapi html文件
│   │   ├── server.py						# fastapi server文件
│   │   └── README.md						# fastapi版项目说明
│   ├── yolov5_rt_tfjs_bottle				# bottle版主目录
│   │   ├── views							# bottle模板目录
│   │   │  	└── index.html					# bottle html文件
│   │   ├── server.py						# bottle server文件
│   │   └── README.md						# bottle版项目说明
│   ├── v_change							# 版本历史
│   │   ├── v01_change.md					# v0.1版本变更
│   │   ├── v02_change.md					# v0.2版本变更
│   │   └── README.md						# 历史版本说明
│   ├── setup.sh							# 安装脚本
│   ├── setup_flask.sh						# 安装脚本（flask版）
│   ├── setup_fastapi.sh					# 安装脚本（fastapi版）
│   ├── LICENSE								# 项目许可
│   ├── CodeCheck.md						# 代码检查
│   ├── .gitignore							# git忽略文件
│   ├── .gitmodules							# git子模块文件
│   ├── README.md							# 项目说明
│   └── README.en.md						# 项目说明（英文版）

❗ 注：部分模型文件需要安装之后生成

❤️ 版本创意

🔥 yolov5-rt-tfjs v0.2 采用边界框和标签解耦化管理模式

🔥安装教程

✅ 方法一：Linux Shell 快速安装（Bash 版）

📌 创建conda环境

conda create -n yolo python==3.8
conda activate yolo # 进入环境

📌 执行bash脚本

bash setup.sh

✅ 方法二：Linux Shell 手动安装

📌 创建conda环境

conda create -n yolo python==3.8
conda activate yolo # 进入环境

📌 克隆项目（递归式克隆）

git clone https://gitee.com/CV_Lab/yolov5_rt_tfjs.git --recursive

📌 安装依赖

cd yolov5-tfjs/yolov5
pip install -r ./requirements.txt -U
pip install tensorflowjs # >=3.9.0

❗ 注意：tensorflowjs>=3.9.0

📌 将yolov5的权重文件或者自定义权重文件（.pt）加入到yolov5的根目录

📌 转换，以yolov5s.pt 为例

python export.py --weights yolov5s.pt --include tfjs

# 可以调整NMS IoU阈值和NMS置信度阈值
python export.py --weights yolov5s.pt --include tfjs --iou-thres 0.5
python export.py --weights yolov5s.pt --include tfjs --conf-thres 0.6
python export.py --weights yolov5s.pt --include tfjs --iou-thres 0.5 --conf-thres 0.6

📌 将yolov5s_web_model 目录加入到yolov5_rt_tfjs_src/static 中

✅ 方法三：Streamlit YOLOv5 Model2X版

📌 通过hugginface 在线版 Streamlit YOLOv5 Model2X ，选择tfjs项，导出yolov5s_web_model

📌 将yolov5s_web_model 目录加入到yolov5_rt_tfjs_src/static 中

❤️ 本项目提供了3种扩展演示：Flask版、FastAPI版和Bottle版，旨在表明该项目具有良好的可移植性。点击上面的logo可以了解详细的安装和使用教程。

❗ 注：在使用以下方法前，必须确保yolov5s_web_model 目录加入到yolov5_rt_tfjs_src/static 中。

✅ 方法四：Flask版

📌 创建conda环境

conda create -n yolo python==3.8
conda activate yolo # 进入环境

📌 执行setup_flask.sh脚本

bash setup_flask.sh

✅ 方法五：FastAPI版

📌 创建conda环境

conda create -n yolo python==3.8
conda activate yolo # 进入环境

📌 执行setup_fastapi.sh脚本

bash setup_fastapi.sh

✅ 方法六：Bottle版

📌 创建conda环境

conda create -n yolo python==3.8
conda activate yolo # 进入环境

📌 执行setup_bottle.sh脚本

bash setup_bottle.sh

⚡使用教程

💡 方法一：VSCode版

📌 安装Live Server 插件

📌 将yolov5_rt_tfjs_src作为工作目录，运行程序

❤️ 通用版

cd yolov5_rt_tfjs_src # 进入工作目录
code . # 打开vscode
# 右键单击，选择Open with Live Server，运行程序

❤️ hls.js版

cd yolov5_rt_tfjs_hls # 进入工作目录
code . # 打开vscode
# 右键单击，选择Open with Live Server，运行程序

💡 方法二：Flask版

📌 运行文件server.py

python server.py

📌 浏览器输入http://127.0.0.1:5000/

💡 方法三：FastAPI版

📌 运行文件server.py

python server.py

📌 浏览器输入http://localhost:8000/

💡 方法四：Bottle版

📌 运行文件server.py

python server.py

📌 浏览器输入http://localhost:8080/

💬 技术交流

如果你发现任何YOLOv5 RT TFJS存在的问题或者是建议, 欢迎通过Gitee Issues给我提issues。
欢迎加入CV Lab技术交流群

🍷鸣谢

YOLOv5创始人：Glenn Jocher
Add TensorFlow and TFLite export PR贡献人：Jiacong Fang
TensorFlow.js—Real-Time Object Detection Demo 作者：Nick Bourdakos

CV_Lab / YOLOv5-RT-TFJS

🚀 作者简介

🚀更新走势

💎项目用途

🔥 自定义目标检测任务

❤️ 自定义模型

❤️ 自定义TensorFlow.js版本

💡项目结构

❤️ 版本创意

🔥安装教程

✅ 方法一：Linux Shell 快速安装（Bash 版）

✅ 方法二：Linux Shell 手动安装

✅ 方法三：Streamlit YOLOv5 Model2X版

✅ 方法四：Flask版

✅ 方法五：FastAPI版

✅ 方法六：Bottle版

⚡使用教程

💡 方法一：VSCode版

💡 方法二：Flask版

💡 方法三：FastAPI版

💡 方法四：Bottle版

💬 技术交流

🍷鸣谢

简介

发行版 (5)

贡献者

近期动态

CV_Lab / YOLOv5-RT-TFJS .gitee-modal { width: 500px !important; }

🚀 作者简介

🚀更新走势

💎项目用途

🔥 自定义目标检测任务

❤️ 自定义模型

❤️ 自定义TensorFlow.js版本

💡项目结构

❤️ 版本创意

🔥安装教程

✅ 方法一：Linux Shell 快速安装（Bash 版）

✅ 方法二：Linux Shell 手动安装

✅ 方法三：Streamlit YOLOv5 Model2X版

✅ 方法四：Flask版

✅ 方法五：FastAPI版

✅ 方法六：Bottle版

⚡使用教程

💡 方法一：VSCode版

💡 方法二：Flask版

💡 方法三：FastAPI版

💡 方法四：Bottle版

💬 技术交流

🍷鸣谢

简介

发行版 (5)

开源评估指数源自 OSS-Compass 评估体系，评估体系围绕以下三个维度对项目展开评估：

贡献者

近期动态

搜索帮助

CV_Lab / YOLOv5-RT-TFJS