Seven 视觉模型项目介绍
今天想跟大家聊一个很有意思的开源项目——Seven视觉模型。说白了，这是一个完全跑在浏览器里的实时目标检测系统，不需要云端AI接口，一切推理都在本地完成。
1. 项目概述
这个项目的核心思路很简单：打开浏览器，调用摄像头，然后在本地就完成目标检测和告警。它用Next.js、React、TypeScript、MediaPipe Object Detector、EfficientDet-Lite0和MySQL构建，主要实现的功能包括摄像头实时画面采集、目标检测、威胁等级配置、告警截图、截图管理、历史记录和摄像头配置等。
绕来绕去，最核心的一个点就是——目标检测不依赖云端AI接口，而是在浏览器端通过MediaPipe WASM加载本地模型完成推理。这样一来，既减少了服务端压力，也避免了摄像头画面上传到第三方平台，隐私性有保障。
项目使用的目标检测模型是：MediaPipe Object Detector + EfficientDet-Lite0，模型文件存放在public/models/efficientdet_lite0_uint8.tflite。
2. 项目技术栈
整体采用前后端一体化架构，页面和接口都由Next.js统一提供。前端UI用Ant Design搭建，目标检测逻辑全部跑在浏览器端，数据持久化则交给了MySQL。看下核心依赖就知道了：
// package.json 中的核心依赖
{
"dependencies": {
"@mediapipe/tasks-vision": "0.10.34",
"antd": "^6.3.6",
"mysql2": "^3.22.2",
"next": "16.2.4",
"react": "19.2.5",
"react-dom": "19.2.5"
}
}
具体来说，项目主要用到了这些技术：
- Next.js App Router：负责页面路由和API Routes
- React Hooks：管理摄像头状态、检测状态和页面交互
- TypeScript：提供类型约束
- Ant Design：构建后台管理界面
- MediaPipe Object Detector：实现浏览器端目标检测
- EfficientDet-Lite0：轻量级目标检测模型
- MySQL：保存威胁配置、截图、历史记录和摄像头配置
3. 系统功能模块
系统主要分为五个页面，结构很清晰：
/ 实时视觉分析首页
/history 历史记录
/threats 威胁管理
/snapshots 截图管理
/cameras 摄像头管理
在components/AppShell.tsx中，项目通过导航菜单把这些页面统一组织起来，方便快速切换。
首页主要负责实时检测，其他页面则用于管理和查看数据。这样一来，整个系统不仅能检测目标，还能完成告警的完整闭环。
4. 浏览器摄像头采集
摄像头采集这块，项目用的是浏览器原生的MediaDevices.getUserMedia API，相关逻辑封装在hooks/useObjectDetector.ts中。
具体设置是这样的：
audio: false：只读取视频，不碰音频facingMode: "environment"：移动端优先使用后置摄像头width和height：期望摄像头输出1280x720playsInline：提升移动端Safari兼容性，避免视频全屏播放
如果用户拒绝摄像头权限，项目会根据浏览器返回的异常类型展示对应的错误提示。比如权限被拒时提示“请允许摄像头访问”，没找到设备时提示“确认设备已连接”，设备被占用时提示“可能正在被其他应用占用”——这些都是很贴心的用户体验设计。
5. MediaPipe 模型加载
目标检测模型通过MediaPipe Tasks Vision在浏览器端加载。这里有个关键点：项目使用动态导入，避免服务端渲染阶段去访问浏览器API，否则会报错。
代码逻辑也很清晰：WASM文件从/mediapipe/wasm加载，检测模型从/models/efficientdet_lite0_uint8.tflite加载。runningMode: "VIDEO"表示使用视频流检测模式，maxResults: 20表示最多返回20个检测结果，scoreThreshold: 0.45表示置信度低于0.45的目标会被过滤掉。
为了让模型文件和WASM文件自动准备好，项目还提供了一个脚本，安装依赖后执行npm run prepare:mediapipe就能搞定。
6. 实时检测与节流处理
目标检测不能每一帧都执行，否则浏览器主线程压力太大了。因此项目设置了检测间隔：DETECTION_INTERVAL_MS = 700，也就是每700ms对当前视频帧执行一次目标检测。
检测启动后，通过setInterval周期性执行推理。这样既能保持实时感，又不会让浏览器资源占用过高，算是性能和体验之间一个不错的平衡点。
7. 检测结果处理
MediaPipe返回的检测结果会被转换成项目内部统一的数据结构。这里面有几个关键字段：
label：模型原始标签，比如person、car、knifedisplayName：中文显示名称，比如人、汽车、刀score：置信度box：目标框坐标，使用百分比表示，便于在响应式视频区域上绘制
项目内置了一份英文标签到中文名称的映射，放在一个常量对象里。目标框坐标会被转换成百分比，这样在页面上绘制检测框时，只需要设置CSS百分比定位，省去了很多麻烦。
8. 威胁等级配置
项目支持为不同目标设置威胁等级，等级分为none、low、medium、high、critical五种。
默认威胁配置写在lib/db.ts中，比如：
- 行人：中等威胁，检测到人员进入监控区域
- 车辆：低威胁，检测到车辆经过
- 刀具：严重威胁，高危告警
- 手机：无威胁
首页检测到目标后，会根据数据库中的威胁配置判断是否需要告警。如果目标被启用，并且威胁等级不是none，系统就会把它视为告警目标。
9. 告警提醒
当检测到威胁目标时，系统会弹出告警通知，显示威胁信息、等级和置信度。为了避免同一个目标连续重复提醒，项目使用lastNoticeRef保存上次提醒时间，同一类威胁目标在6秒内不会重复弹出提醒——这个细节做得挺到位。
10. 告警截图生成
系统检测到威胁目标时，会使用Canvas截取当前视频帧，然后在截图上绘制目标框和文字。截图顶部还会添加上告警信息和时间戳，看起来就很像一个完整的告警证据。
最后，截图会被转换为Base64并提交到后端保存。项目也设置了截图冷却时间，默认12秒，避免连续保存过多截图。
11. 历史记录管理
项目不仅记录某一帧的检测结果，还会记录目标进入和离开的时间。每当画面中间出现新的目标，就创建一条历史记录；当目标从画面中消失时，系统会更新该记录的离开时间和最高置信度。后端会根据进入时间和离开时间计算停留时长，这样就能知道某个目标在画面里待了多久。
12. 数据库连接与建表
数据库连接逻辑位于lib/db.ts，使用的是MySQL连接池。数据库名为vision_analysis_system，项目启动接口时会自动创建数据库和表。
数据库表包括：
threat_configs：威胁配置threat_snapshots：威胁截图system_events：系统事件cameras：摄像头配置detection_records：检测记录
同时项目也提供了独立的SQL文件database/vision_analysis_system.sql，可以通过命令行手动导入。
13. 后端 API 设计
项目使用Next.js API Routes实现后端接口，前端页面和后端接口都在同一个Next.js项目中。比如截图接口位于app/api/snapshots/route.ts，保存截图时前端向/api/snapshots发送POST请求，后端接收后写入MySQL。这种设计让部署和维护都变得很简单。
14. 页面与响应式设计
界面使用Ant Design组件搭建，通过全局CSS实现深色科技风格。页面整体分为顶部导航、实时视频区域和右侧信息区域。桌面端使用左右布局，视频画面占主要区域；手机端则按内容自然向下排列，变成单列布局。这样既能保证电脑端的大画面体验，又能适配手机端的浏览习惯。
15. 项目总结
Seven视觉模型是一个前后端一体化的浏览器端实时目标检测系统。它通过MediaPipe Object Detector和EfficientDet-Lite0模型在浏览器中完成本地推理，完全不依赖云端AI接口。系统不仅实现了摄像头画面检测，还扩展了威胁等级配置、告警截图、历史记录、截图管理和摄像头管理等完整功能。
从技术实现上看，项目结合了浏览器摄像头API、WebAssembly本地推理、React Hooks状态管理、Canvas截图绘制、Next.js API Routes和MySQL数据持久化。整体结构清晰，很适合作为计算机视觉、前端AI、智能监控和本地化目标检测方向的学习项目或毕业设计项目。
项目的核心价值在于：用普通浏览器就能完成实时视觉分析，不需要专门客户端，也不需要付费云端AI服务。部署简单、成本较低、隐私性好、扩展性强——这几个特点让它在一众监控方案中显得很特别。
