基于YOLOv8的交通标志识别Web系统

项目简介

本项目是基于 YOLOv8 的交通标志识别 Web 系统，采用 Flask + Vue + MySQL 架构。系统包含前台用户端和后台管理员端，支持图片识别、视频识别、浏览器摄像头识别、识别历史管理，以及数据概览、数据集管理、模型管理、日志管理和用户管理。

后端在部署时优先使用 GPU 推理，检测不到可用 GPU 时自动回退到 CPU。针对 Windows 中文路径环境，PyTorch 模型保存和加载已通过 io.BytesIO 与 Python 原生文件读写做兼容处理。

技术栈

模块	技术
后端	Flask、Flask-SQLAlchemy、Flask-JWT-Extended
前端	Vue 3、Vite、Vue Router、Axios、ECharts
数据库	MySQL，未配置时可临时回退 SQLite
识别模型	Ultralytics YOLOv8、PyTorch
图像视频处理	OpenCV、NumPy

功能模块

前台用户端

登录注册
图片交通标志识别
视频交通标志识别
浏览器摄像头画面识别
识别历史查询与删除
可用模型查看与选择

后台管理员端

数据概览与可视化图表
数据集管理
模型上传、编辑、启用与删除
系统日志查看与清空
用户新增、编辑与删除

项目结构

复制代码

c267/
├─ app.py                         # Flask 启动入口，同时支持前端构建产物托管
├─ backend/                       # Flask 后端
│  ├─ config.py                   # 配置、路径、数据库连接
│  ├─ models.py                   # 数据模型
│  ├─ routes/                     # 认证、识别、管理、媒体接口
│  ├─ services/                   # 推理、概览、初始化、日志、文件服务
│  └─ utils/                      # 后端通用工具
├─ frontend/                      # Vue 前端
│  ├─ src/api/                    # 接口请求封装
│  ├─ src/components/             # 通用组件
│  ├─ src/router/                 # 路由守卫
│  ├─ src/styles/                 # 全局样式
│  └─ src/views/                  # 登录页、用户端、管理员端
├─ data/                          # 运行期数据、上传文件、识别结果
├─ runs/train/tt100k_yolov8/      # 训练结果、指标与默认权重
├─ data_tt100k.yaml               # TT100K 数据集配置
├─ yolov8n.pt                     # 备用预训练权重
└─ requirements.txt               # Python 依赖

启动说明

1. 后端

复制代码

cd "项目根目录"
conda activate yolo
pip install -r requirements.txt

配置 MySQL：

复制代码

$env:MYSQL_HOST="127.0.0.1"
$env:MYSQL_PORT="3306"
$env:MYSQL_USER="root"
$env:MYSQL_PASSWORD="你的密码"
$env:MYSQL_DB="traffic_sign_web"

启动后端：

复制代码

python app.py

后端默认地址：

复制代码

http://127.0.0.1:5000

2. 前端

复制代码

cd "项目根目录\frontend"
npm install
npm run dev

前端默认地址：

复制代码

http://127.0.0.1:5173

默认账号

复制代码

管理员账号：admin
管理员密码：admin123

部署说明

如需由 Flask 统一托管前端页面，先构建前端：

复制代码

cd "项目根目录\frontend"
npm run build

构建完成后回到项目根目录启动：

复制代码

python app.py

此时访问 Flask 地址即可打开系统页面。