前情提要

---

家里养了三只猫咪，其中一只布偶猫经常出入厕所。但因为平时忙于学业，没法时刻关注牠的行为。我知道猫咪的如厕频率和时长与健康状况密切相关，频繁如厕可能是泌尿问题，停留过久也可能是便秘或不适。为了更科学地了解牠的如厕习惯，我计划搭建一个基于视频监控和 AI 识别的系统，自动识别猫咪进出厕所的行为，记录如厕时间和停留时长，并区分不同猫咪。这样即使我不在家，也能掌握猫咪的健康状态，更安心地照顾它们。

🎓 各位的关注与点赞是我持续分享的最大动力，衷心感谢大家的支持！

📢 欢迎正在攻读硕博学位的同学，或是对人工智能充满热情的朋友们，关注我的个人公众号。在这里，我将持续更新博士期间阅读的前沿论文解读、项目实战经验分享，以及我对 AI 技术趋势的思考与探讨。

✨ 无论你是科研工作者、工程开发者，还是 AI 初学者，都能在这里找到干货与灵感。让我们一起交流、成长、探索人工智能的无限可能！

已完成工作：

✅猫咪如厕检测与分类识别系统系列【一】 功能需求分析及猫咪分类特征提取

✅猫咪如厕检测与分类识别系统系列【二】多图上传及猫咪分类特征提取更新

✅猫咪如厕检测与分类识别系统系列【三】 融合 yolov11 目标检测

✅猫咪如厕检测与分类识别系统系列【四】融合检测日志输出及前端展示界面制作

✅猫咪如厕检测与分类识别系统系列【五】信息存储数据库改进+添加猫咪页面制作+猫咪躯体匹配算法架构更新

✅猫咪如厕检测与分类识别系统系列【六】分类模型训练+混合检测分类+未知目标自动更新

✅猫咪如厕检测与分类识别系统系列【七】当前阶段总结报告

✅猫咪如厕检测与分类识别系统系列【八】检测推理事件整合+视频推流架构分析

✅猫咪如厕检测与分类识别系统系列【九】视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【上】

✅猫咪如厕检测与分类识别系统系列【九】视频检测区域在线绘制+支持摄像头+网络摄像头+整体构建【下】

✅猫咪如厕检测与分类识别系统系列【十】视频检测区域动态监测及实时更新

✅猫咪如厕检测与分类识别系统系列【十一】区域进入事件相应逻辑鲁棒性更新

✅猫咪如厕检测与分类识别系统系列【十二】猫咪进出事件逻辑及日志优化【上】

✅猫咪如厕检测与分类识别系统系列【十三】猫咪进出事件逻辑及日志优化【下】

✅猫咪如厕检测与分类识别系统系列【十四】项目架构整理与检测任务管理界面优化

本小节继续更新项目架构整理、检测任务管理、摄像头管理与首页展示优化。

---

本次目标：整理项目结构、优化检测任务管理流程、修复首页记录图片访问问题，并清理缺失图片对应的历史记录。

本次更新围绕“项目结构更清晰、检测任务更好管理、摄像头配置更直观、首页展示更稳定”四个方向展开。界面从原先偏功能堆叠的样式，整理为更适合日常运维和演示汇报的管理后台体验。

更新概览

本轮优化主要完成了三件事：

1. 将首页统计、记录处理、任务运行状态同步等逻辑从主路由中拆出，沉淀到 web/services/ 服务层，降低后续维护成本。
2. 重做任务管理、新建任务、编辑任务、摄像头管理、摄像头新增/编辑等核心页面，让检测流程从“能用”进一步变成“好看、好查、好操作”。
3. 修复首页图片缺失后的展示体验，清理缺失图片对应的历史记录，并保留数据库备份，避免错误记录继续影响看板展示。

一、项目架构整理

过去部分页面统计、任务状态同步和记录查询逻辑集中在 web/app1.py 中，随着功能增加，文件越来越难读。本次将这些逻辑拆到了服务层：

• web/services/records.py：负责首页记录、统计数据和图片路径规范化。
• web/services/tasks.py：负责检测任务运行状态、算法服务同步和任务状态聚合。
• web/static/css/app.css：统一后台页面的卡片、状态标签、工具栏、表单、预览窗口等基础样式。

这样后续新增页面或修改业务逻辑时，可以优先改服务层和共享样式，不需要在多个模板里重复调整。

二、任务管理流程优化

任务管理页从简单表格升级为“运行状态看板 + 筛选 + 快捷操作”的结构。现在可以更快判断当前检测任务是否正常运行、算法服务是否连接、哪些任务正在推流或处于异常状态。

本页重点优化：

• 增加任务总数、运行中、已停止、异常、推流中等统计卡片。
• 增加算法服务连接状态提示，便于排查检测端是否在线。
• 增加任务状态筛选：全部、运行中、已停止、异常。
• 操作按钮改为更紧凑的图标化按钮，并配合提示文案，减少列表拥挤感。
• 任务状态由后端服务层统一整理，前端只负责展示，数据来源更稳定。

三、新建任务体验优化

新建检测任务页改为分区式配置流程，把任务类型、摄像头选择、推流开关、检测区域配置和实时预览放在同一个工作台里，减少来回跳转。

本页重点优化：

• 任务类型从普通下拉框升级为可视化选择卡片。
• 摄像头选择区域展示更清晰，便于确认任务绑定的视频源。
• 检测区域配置和预览画面并排展示，适合后续继续做框选交互。
• 推流、状态等开关项整理成独立配置块，降低误操作概率。
• 编辑任务页同步采用同一套布局，让创建和维护流程保持一致。

四、摄像头管理升级

摄像头管理页现在更像一个设备运维面板：上方展示摄像头统计，下方展示摄像头卡片和实时预览区域，适合现场调试和演示。

本页重点优化：

• 增加摄像头总数、RTSP 源、可解析流地址、正在预览数量等统计信息。
• 摄像头从普通列表改为卡片式展示，名称、位置、类型、地址、预览状态更直观。
• 实时预览区域加入空状态和预览上限提示，避免页面无内容时显得异常。
• 新增和编辑摄像头页面统一为配置卡片样式，并支持摄像头类型字段。
• /api/cameras 接口补充返回摄像头 id、name、url、location 等基础信息，方便前端任务页复用。

五、首页看板与记录处理

首页看板从深色大屏风格调整为更适合后台系统的浅色数据看板。没有如厕记录时，页面会显示明确的空状态，不再出现图片裂图或无意义的图表区域。

本页重点优化：

• 首页统计卡片、趋势图、记录列表统一为新的后台样式。
• 对历史记录中的图片路径做规范化处理，避免路径格式不一致导致图片无法访问。
• 图片缺失时使用占位图兜底，不再直接显示浏览器裂图。
• 已将缺失图片对应的 toilet_logs 记录清理掉，当前记录表恢复为空数据状态。
• 清理前已保留数据库备份：web/db/toilet_log.before_remove_missing_records.db。

六、这次优化后的使用流程

现在完整流程可以按下面方式演示：

1. 进入首页，看系统整体状态和最近检测数据。
2. 进入摄像头管理，确认摄像头数量、类型、地址和预览状态。
3. 进入新建任务，选择任务类型、绑定摄像头、配置检测区域和推流状态。
4. 回到任务管理，查看任务是否运行、算法服务是否连接、任务是否异常。
5. 如出现图片缺失或记录异常，可以先检查记录数据和图片目录，再决定是否清理无效记录。

七、验证结果

本地验证结果：

• Web 服务运行地址：http://127.0.0.1:5088
• 算法服务运行地址：http://127.0.0.1:5678
• 任务管理、新建任务、摄像头管理、首页看板均可正常访问。
• 本次展示图片已通过 Doocs 默认图床/CDN 上传，图片地址返回 200 image/png。

八、后续改进

后续可以继续补三个方向：

• 增加任务运行日志面板，方便定位“算法服务在线但任务异常”的具体原因。
• 将摄像头预览、任务启动、推流状态做成统一事件流，便于记录每次任务生命周期。
• 后续正式发布前，可以再补一张“整体流程图”，把摄像头、算法服务、任务管理、首页记录之间的数据流串起来。