一、CVAT插件体系概述
大家好，我是你们这门课的老师。今天咱们聊聊CVAT的插件体系。说实话，我第一次接触CVAT插件时，也被它的架构绕得有点晕。但搞明白之后，你会发现它其实很优雅。
CVAT的插件体系，说白了就是一套让开发者能往标注平台里「塞东西」的机制。你想想看，一个标注平台要支持各种场景——有人要标注车辆，有人要标注医学影像，还有人要标注卫星图。如果全靠官方开发，那得累死。插件机制就是让你能自己加功能，还不影响核心系统。
1.1 插件架构：三层分离
CVAT的插件架构分三层，我习惯叫它「三明治结构」：
- 核心层：CVAT本体，提供基础标注能力、数据管理、用户系统
- 插件层：你开发的插件，挂载到核心层上
- 接口层：核心层暴露的钩子（hooks）和扩展点（extension points）
嗯，这里要注意：插件不能直接修改核心代码。你只能通过接口层跟核心交互。我在项目中遇到过有人直接改CVAT源码，结果版本一升级，全崩了。千万别这么干。
核心原则：插件是「寄生」在CVAT上的，不是「改造」CVAT。
下面这张图能帮你理解整体架构：
1.2 插件生命周期：从加载到卸载
每个插件在CVAT里都有固定的生命周期。我把它总结成四个阶段：
- 注册阶段：插件告诉CVAT「我来了，我叫什么，我能干什么」
- 初始化阶段：CVAT给插件分配资源，插件做准备工作
- 运行阶段：插件正常工作，响应用户操作或处理数据
- 销毁阶段：插件被卸载，释放资源
小技巧：我建议在初始化阶段做两件事——检查依赖是否齐全，以及注册自己的配置项。这样能避免运行时突然报错。
为什么会这样设计？因为CVAT本身是个单页应用（SPA），插件随时可能被动态加载或卸载。如果你在初始化阶段没做好清理工作，销毁时可能会留下内存泄漏。我曾经有个插件，每次卸载后工具栏还留着，用户点一下就报错。排查了半天，原来是销毁时忘了移除事件监听。
1.3 插件类型：三大类
CVAT的插件分三类，咱们一个一个说。
1.3.1 UI插件
这类插件负责修改或扩展用户界面。比如：
- 在工具栏加个新按钮
- 在侧边栏加个自定义面板
- 修改标注的交互方式（比如右键菜单）
UI插件用React组件开发，CVAT暴露了一些固定的挂载点。说白了，你只需要把组件塞到指定位置就行。
常见挂载点：工具栏（toolbar）、侧边栏（sidebar）、标注画布（canvas）、顶部菜单（menu）
1.3.2 后端插件
后端插件跑在服务器上，处理数据逻辑。比如：
- 自定义数据导出格式（导出成你公司内部格式）
- 集成AI模型做自动标注
- 数据预处理（比如自动裁剪、去噪）
后端插件用Python开发，通过REST API或WebSocket跟CVAT通信。嗯，这里要注意：后端插件不能阻塞主进程。我见过有人写了个耗时的模型推理，结果整个标注任务都卡住了。后来改成异步任务才解决。
1.3.3 数据插件
数据插件负责处理数据源和格式。比如：
- 支持新的数据格式（比如DICOM医学影像）
- 从自定义数据源导入（比如公司内部的存储系统）
- 数据格式转换（比如从COCO转成YOLO格式）
数据插件比较特殊，它既涉及前端（预览数据），也涉及后端（处理数据）。所以开发时往往要写两个部分。
| 插件类型 | 开发语言 | 主要用途 | 复杂度 |
|---|---|---|---|
| UI插件 | JavaScript/TypeScript | 界面扩展、交互优化 | 低 |
| 后端插件 | Python | 数据处理、模型集成 | 中 |
| 数据插件 | Python + JS | 数据源、格式支持 | 高 |
避坑指南：我曾经开发一个数据插件时，前端预览和后端处理用了两套不同的坐标系统。结果标注出来的框全偏了。后来我统一用归一化坐标才解决。记住：前后端的数据格式一定要对齐。
好了，这一章就到这里。插件体系是后续所有开发的基础，搞懂了这些，后面写具体插件时就不会迷路。