YOLO预览与标注工具
首页文章工具搜索

YOLO预览与标注工具

2026.09.12 [YOLO] [数据标注] 148 浏览

点击进入工具

浏览器端一站式 YOLO 数据集标注工具：预览 · 编辑 · ONNX 自动预标注 · 本地处理。 纯前端 / 零安装 / 数据不出本地

一、工具简介

YOLO 标注预览与编辑器 是一个运行在浏览器中的单页工具，用于查看、校对、修改 YOLO 格式的目标检测标注数据。只需要把图片和对应的 .txt 标签文件导进来， 就能在画布上直观看到每一个标注框、类别名称、归一化坐标与像素尺寸，并直接进行新增、拖动、 缩放、改类、删除等操作，最后打包成 ZIP 下载。

工具内置基于 onnxruntime-web 的推理能力，可以直接加载 .onnx 模型对当前图片做一次预标注，省去手工画框的时间。 所有文件解析、渲染与推理都在本地浏览器中完成，不会上传任何数据。

适用场景：标注结果快速质检、类别错标修正、漏标补框、模型预标注结果复核、 以及向非技术同学演示标注结果。

二、核心特性

  • 文件管理：批量上传图像与 YOLO 标签，按文件名自动配对； 支持删除单张、一键清空、导出 ZIP。
  • 画布预览：滚轮缩放、拖拽平移、适应窗口、重置视图； 标注框颜色按类别自动区分。
  • 可视化编辑：拖拽绘制新框，8 个控制点调整大小， 下拉框修改类别，支持删除与列表联动高亮。
  • ONNX 预标注：浏览器内推理，支持 YOLOv5 / v8 / v9 / v10， 可调置信度、NMS、输入尺寸与类别数。
  • 类别与配色：逐行编辑类别名称，40 色预设自动分配， 每个类别可单独指定颜色。
  • 原始标签面板：右侧滑出面板实时显示当前图片的标签文本， 方便与画布对照核查。

三、界面速览

区域 位置 作用
文件编辑 左侧栏顶部 上传图像 / 上传标签 / 保存全部标签(ZIP) / 清除所有文件
标签名称 左侧栏 按类别 ID 顺序逐行填写类别名；内含「颜色设置」子面板
ONNX 预标注 左侧栏 加载 ONNX 模型、调整推理参数、运行或清除预标注结果
图像列表 左侧栏下方 缩略图、已标注 / 无标签状态、框数量、分辨率，支持删除
预览画布 中间主区域 显示图像与标注框；鼠标悬停可查看类别、中心、尺寸、像素与置信度
工具栏 底部 翻页、缩放、显示 / 隐藏标注、原始标签、编辑模式、类别图例
原始标签面板 右侧滑出 以文本形式显示当前图片的标签行，可选中复制

四、快速上手（五步走）

  1. 上传图片：点击「上传 JPG 图像」，可多选， 支持 jpg / jpeg / png / bmp / webp。
  2. 上传标签：点击「上传 YOLO 标签」，选择与图片同名的 .txt 文件，可多选。
  3. 填写类别名：在「标签名称」文本框中按类别 ID 顺序逐行填写， 例如第 1 行是 person，第 2 行是 car。
  4. 浏览与校对：用 ← → 切换图片， 滚轮缩放，拖拽平移，核对框的位置与类别。
  5. 修正并导出：开启「编辑模式」增删改框， 确认无误后点击「保存全部标签(ZIP)」下载结果。
提示：标签与图片是按文件名（去掉扩展名）配对的。 例如 IMG_0001.jpg 会去找 IMG_0001.txt。 文件名不一致时，画布上会显示「未找到对应标签文件」。

五、功能详解

5.1 文件管理

按钮 说明
上传 JPG 图像 支持多选批量导入。同名图片重复上传会覆盖旧记录，不会产生重复项。
上传 YOLO 标签 接受 .txt 文件，逐行解析为标注框；解析失败的行会被自动忽略。
保存全部标签(ZIP) 把所有含标注框的图片导出为同名 .txt， 打包为 labels_年月日_时分秒.zip。
清除所有文件 清空图片、标签与编辑状态，并释放内存中的预览地址。
导出的单个标签行格式： 0 0.512300 0.438100 0.204500 0.331200 0.87 class_id x_center y_center width height confidence（可选）

5.2 标签名称与颜色设置

  • 文本框每行一个类别名，行号即类别 ID（从 0 开始）。
  • 留空或名称缺失时，画布与列表统一显示为 Class N。
  • 展开「颜色设置」子面板，可以看到当前数据集中出现过的所有类别， 点击右侧色块即可为每个类别指定颜色，修改即时生效。
  • 未手动指定时，颜色从 40 色预设中按类别 ID 循环分配。

5.3 视图浏览（非编辑模式）

  • 滚轮：以鼠标位置为中心缩放。
  • 左键拖拽 / 中键拖拽：平移画布。
  • 鼠标悬停在框上：显示详细信息浮层， 包含类别、中心坐标、归一化尺寸、像素尺寸与置信度。
  • 工具栏：放大、缩小、重置视图、适应窗口、 显示 / 隐藏标注、原始标签。
  • 底部图例：显示当前图片中各类别的颜色与框数量， 随图片切换自动更新。

5.4 编辑模式（手工标注）

开启方式：点击工具栏中的 编辑模式 按钮。 开启后左侧会出现「编辑设置」区域（新框类别与标注框列表）， 画布鼠标指针变为十字准星。
操作 效果
在空白处按住左键拖拽 绘制新框，松开后按「新框类别」下拉框中的类别落库
单击已有框 选中该框，四周出现 8 个白色控制点
拖动控制点 调整框的位置与大小，坐标自动限制在图像范围内
在框内拖拽超过 5 像素 取消选中，改为绘制新框
「标注框列表」下拉框 直接修改该框的类别，画布与统计同步刷新
「标注框列表」删除按钮 删除该标注框
滚轮 / Shift+滚轮 / Ctrl+滚轮 上下平移 / 左右平移 / 以光标为中心缩放
联动高亮：把鼠标移到左侧「标注框列表」的某一项上， 画布中对应的框会加粗高亮；反之在画布上悬停某个框， 列表也会同步滚动并高亮。

5.5 ONNX 预标注

左侧「ONNX 预标注」面板默认折叠，展开后按以下流程使用：

  1. 上传模型：点击「上传 ONNX 模型」选择 .onnx 文件， 加载成功后状态栏显示「已加载：文件名（大小）」，并自动填入模型的输入与输出名称。
  2. 调整参数：展开「参数设置」子面板，按下表配置。
参数 默认值 说明
输入宽度 / 高度 640 / 640 模型期望的输入分辨率，需与导出模型时保持一致
置信度阈值 0.45 低于该分数的检测结果直接丢弃；检测不到目标时可调低
NMS 阈值 0.50 非极大值抑制的 IoU 阈值，用于去除重叠框
类别数 80 模型输出的类别通道数，仅读取前 N 个类别分数
模型类型 YOLOv8 可选 YOLOv5 / v8 / v9 / v10 / 自定义； 自定义时会自动探测输出格式
输入名称 / 输出名称 images / output0 与 ONNX 节点名称对应，加载模型后会自动填充
替换现有标注 已勾选 勾选表示覆盖当前图片的已有框； 不勾选表示把新检测结果追加到现有框后面
  1. 运行预标注：选中一张图片，点击「运行预标注」。 进度条会依次显示「预处理图片 → 推理中 → 后处理中 → 检测到 N 个目标」。
  2. 查看结果：检测框会以带置信度标签的形式画在图上， 类别名缺失时自动补成 Class N，可继续用编辑模式微调。
  3. 清除结果：点击「清除结果」仅清空当前图片的所有标注框。
注意：预标注一次只处理当前选中的那一张图片， 不是批量任务。如需处理多张，请逐张切换后点击运行。 首次加载模型时 WASM 需要初始化，速度会稍慢。
检测不到目标？依次排查：① 置信度阈值是否过高； ② 模型类型是否选错；③ 输入宽高是否与模型一致； ④ 类别数是否填错；⑤ 模型是否为 YOLO 检测模型（非分割或分类模型）。

5.6 原始标签与全屏

  • 原始标签：点击工具栏按钮，右侧滑出面板， 按当前编辑结果实时生成标签文本；若没有对应标签文件， 会提示期望的文件名。
  • 全屏：点击右上角全屏按钮进入沉浸式模式， 工具栏右侧会显示图像数、框数与类别数统计； 点击画布右上角「退出全屏」返回。

5.7 保存与导出

  • 点击「保存全部标签(ZIP)」导出所有含框图片的标签文件，文件名保持与原图一致。
  • 导出采用 6 位小数的归一化坐标； 如果框带有置信度，会在行尾一并写出。
  • 没有任何标注框时，会弹出「没有可保存的标签数据」提示，不会生成空压缩包。
  • 存在未保存修改时关闭页面，浏览器会弹出离开确认提示； 导出成功后该标记自动清除。

六、快捷键一览

按键 功能
← / → 上一张 / 下一张图片
+ 或 = 放大（以画布中心）
- 缩小（以画布中心）
0 重置视图
F 适应窗口
L 显示 / 隐藏标注框
Delete / Backspace 删除当前选中的标注框（编辑模式）
Esc 取消选中或取消正在绘制的框（编辑模式）
当焦点位于文本框、数字输入框或下拉框时，上述快捷键不会触发，以免影响正常输入。

七、支持的标签格式

# 每行一个目标，字段之间用空格或逗号分隔 # 坐标均为相对图像宽高的归一化值（0 ~ 1） <class_id> <x_center> <y_center> <width> <height> [confidence] # 示例 0 0.512300 0.438100 0.204500 0.331200 1 0.230100 0.702400 0.118000 0.245600 0.91
  • 每行至少需要 5 个数值字段，第 6 个字段（置信度）可选。
  • class_id 会四舍五入为整数。
  • 若坐标值超出 [0, 1] 范围，该行会被判定为非法并跳过。
  • 空行与纯空白行会被自动忽略。

八、常见问题（FAQ）

Q1. 图片上传了，但画布提示「未找到对应标签文件」？

说明标签文件名与图片名（去掉扩展名后）不一致。请确认二者同名， 例如 cat_01.jpg 需搭配 cat_01.txt。 只有图片而没有标签时，左侧会弹出红色提示条， 可直接点击切换为标注模式开始手工标注。

Q2. 标注框位置整体偏移或大小不对？

YOLO 标签使用的是归一化坐标（0 ~ 1），而不是像素坐标。 如果拿到的标签是像素值，需要先除以图像宽高再导入。

Q3. 类别名称显示为 Class 0 / Class 1？

「标签名称」文本框为空或行数不足。按类别 ID 顺序补齐每一行的名称即可， 画布、图例与下拉框会立即更新。

Q4. 编辑后的数据会自动保存吗？

不会。所有改动只保留在当前页面内存中，请务必点击「保存全部标签(ZIP)」导出。 未导出就关闭页面时，浏览器会给出离开确认。

Q5. ONNX 模型加载失败怎么办？

请确认文件是标准 .onnx 格式、导出时未使用浏览器不支持的算子， 并且是检测模型。加载失败时状态栏会变为红色并显示具体错误信息。

Q6. 数据会上传到服务器吗？

不会。图像、标签与模型的解析、渲染、推理全部在浏览器本地完成， 页面不包含任何上传接口。

九、使用建议与注意事项

  • 建议先上传标签再微调，避免在无参考的情况下重复劳动。
  • 大批量质检时，可先看左侧「图像列表」中的状态徽标 （已标注 / 无标签 / 框数）快速定位问题样本。
  • ONNX 预标注后建议配合「编辑模式」人工复核， 尤其是阈值调低时产生的低置信度框。
  • 导出的 ZIP 与原图分离，重新训练前请确保图像与标签目录结构对应。
性能提示：一次导入过多高分辨率图片可能占用较多内存。 若出现卡顿，建议分批导入并及时删除不需要的图片。

YOLO 标注预览与编辑器 · 操作说明 · 所有数据均为本地处理

相关推荐