ImageVision · 图像视觉

基于 Streamlit + OpenCV 的 Web 端图像标注工具，面向机器视觉课程实训「任务六：Web 端图像标注工具」。支持图片上传、多种图像处理与检测算法、参数调节、前后对比展示、结果标注、历史记录、统计分析与结果导出。

项目	链接
在线演示	https://vision.wushij.online
代码仓库	https://gitee.com/wusj17/image-vision
部署环境	腾讯云 + Nginx

功能概览

图像处理与检测（6 种算法）

类别	算法	说明
AI 检测	Haar Cascade	人脸检测，自动绘制检测框与编号
AI 检测	YOLOv8	通用目标检测，输出类别与置信度
传统处理	Canny	边缘检测，支持高斯预处理
传统处理	GaussianBlur	高斯降噪
传统处理	Threshold	图像二值化
传统处理	Morphology	腐蚀 / 膨胀 / 开闭运算

Web 交互

• 侧边栏上传图片（JPG / JPEG / PNG / BMP，单张 ≤ 20 MB）
• 算法分组切换与独立参数面板
• 原图 / 结果图对比：左右对比、滑块对比、标签页切换
• 图片缩放：适应窗口 / 原始尺寸 / 50% / 100%
• 检测类算法展示标注表格与统计卡片
• 处理日志与参数变更提示

工程化能力

• SQLite 持久化历史记录（参数、摘要、检测框）
• 导出 PNG 结果图、JSON 标注、CSV 表格
• Plotly 统计图表（算法使用次数、类别分布）
• 过期文件自动清理（默认保留 7 天）
• 支持本地运行与云服务器部署

技术栈

层级	技术
Web 框架	Streamlit
图像处理	OpenCV
数值计算	NumPy
图像辅助	Pillow
数据分析	Pandas、Plotly
数据库	SQLite + SQLAlchemy
目标检测	Ultralytics YOLOv8
部署	腾讯云 CVM、宝塔面板、Nginx

项目结构

image-vision/
├── app.py                          # 应用入口
├── requirements.txt
├── README.md
├── .streamlit/
│   └── config.toml
├── frontend/                       # 展示交互层
│   ├── config/app_config.py        # 算法、参数、全局配置
│   ├── components/                 # 页面组件（侧边栏、图像查看、日志等）
│   └── pages/                      # 处理中心 / 历史 / 统计 / 关于
├── backend/                        # 业务与处理层
│   ├── processors/                 # Canny、Haar、YOLO 等处理器
│   ├── annotation/                 # 标注绘制与导出
│   ├── services/                   # 图像、处理、历史、导出服务
│   ├── db/                         # SQLAlchemy 模型与仓储
│   └── utils/                      # 工具函数
├── data/
│   ├── uploads/                    # 上传原图
│   ├── outputs/                    # 处理结果图
│   ├── exports/                    # 持久化导出文件
│   └── app.db                      # SQLite 数据库（运行时生成）
├── deploy/
│   ├── run.sh                      # Linux 启动脚本
│   ├── nginx.example.conf          # Nginx 反向代理示例
│   └── service.example             # systemd 服务示例
├── docs/                           # 设计、需求、测试等文档
├── images/                         # 测试样例图与报告截图
├── scripts/                        # 辅助脚本（如实训报告转 Word）
└── test/
    └── test_processing.py

快速开始

环境要求

• Python 3.10+
• 建议使用虚拟环境

安装与启动

# 克隆仓库
git clone https://gitee.com/wusj17/image-vision.git
cd image-vision

# 安装依赖
pip install -r requirements.txt

# 启动（本地开发）
streamlit run app.py

浏览器访问 http://localhost:8501。

基本使用流程

1. 在左侧侧边栏上传图片
2. 选择算法类别与具体算法，调节参数
3. 点击 开始处理 生成结果
4. 在 处理中心 查看对比图、统计信息与标注表格
5. 需要长期保存时，点击 保存到历史记录
6. 在 导出与统计 页查看图表，或下载 PNG / JSON / CSV

参数或算法变更后，侧边栏会提示重新处理；历史记录需手动保存，不会每次处理自动入库。

服务器部署

推荐将 Streamlit 绑定本地 8501 端口，再通过 Nginx 反向代理到公网域名。

# 方式一：使用项目脚本
bash deploy/run.sh

# 方式二：手动启动
streamlit run app.py \
  --server.address 0.0.0.0 \
  --server.port 8501 \
  --browser.serverAddress 127.0.0.1

# 方式三：后台运行
nohup streamlit run app.py --server.address 0.0.0.0 --server.port 8501 > streamlit.log 2>&1 &

部署参考文件：

• deploy/nginx.example.conf — 反向代理到 127.0.0.1:8501，上传限制 20 MB
• deploy/service.example — systemd 守护进程配置
• deploy/run.sh — 一键启动脚本

正式访问域名：https://vision.wushij.online

测试

pip install pytest
pytest test/test_processing.py -v

当前测试覆盖：Canny / 二值化处理、上传格式校验、历史记录增删、导出文件命名等。

注意事项

YOLOv8
首次使用会自动下载 yolov8n.pt 模型，需联网，首次推理耗时较长。

数据目录
运行时数据保存在 data/ 下；超过 7 天的上传、输出、导出文件会在启动时自动清理。

端口与代理
生产环境不建议直接暴露 8501，应通过 Nginx 转发并配置 HTTPS。

文档

文档	说明
docs/设计文档.md	总体架构与模块设计
docs/产品需求文档.md	产品需求说明
docs/数据库设计文档.md	表结构与实体设计
docs/接口说明文档.md	内部服务接口说明
docs/测试报告.md	功能与测试结果
docs/任务六-Web端图像标注工具-需求分析.md	任务书需求分析
docs/实训报告.md	课程实训报告

后续扩展方向

• 参数变更后自动重算结果
• 历史记录一键回放至处理中心
• 手动修正标注框
• 批量上传与 ZIP 打包导出
• 更多检测模型与导出格式

---

ImageVision · 机器视觉课程实训项目 · 个人独立完成