展开本页目录
开始前准备什么
- 先下载并解压本题工程，在独立练习目录保留starter、reference和原始输入。
- 本地参考主要需要Python 3与现代桌面浏览器；涉及Chrome扩展、LibreOffice、Git时按本文单独要求准备。
- 目标工具账号、模型额度与平台导入能力由读者另行确认；本文实际运行范围见执行记录，不自动调用付费服务。
- 打开starter与三张已知尺寸图片
- 让Claude Code实现上传、原图尺寸显示与等比例预览
- 添加拖拽矩形、类别选择、移动和删除
- 实现缩放/容器变化时的屏幕坐标到原图坐标换算
- 加入YOLO TXT与原坐标JSON导出
- 在手机和桌面预览分别给同一物体框选
- 用独立脚本回读TXT
starter、七步任务、原始输入、人工完成的可运行参考、真实运行结果与独立验收；不含账号、数据库或缓存。
原生账号任务、本地工程运行和官方示例分开说明。
1. 打开starter与三张已知尺寸图片
打开starter与三张已知尺寸图片，先说明两类物体和导出格式。
三张几何玩具图是原创确定性输入，不是模型识别结果。landscape/portrait/square分别640×480、480×640、800×800；两个类别编号为0和1。
2. 让Claude Code实现上传、原图尺寸显示与等比例预览
让Claude Code实现上传、原图尺寸显示与等比例预览。
Canvas保存原图宽高，CSS仅改变展示尺寸。切换图时清空当前图的框，避免把横图坐标带入竖图。
3. 添加拖拽矩形、类别选择、移动和删除
添加拖拽矩形、类别选择、移动和删除，并固定原图坐标作为数据源。
拖出矩形后查看右侧x/y/宽/高。需要微调时，在“调整已保存的框”填写原图像素；删除指定框和清空全图是两个操作。
4. 实现缩放/容器变化时的屏幕坐标到原图坐标换算
实现缩放/容器变化时的屏幕坐标到原图坐标换算。
使用 getBoundingClientRect() 把指针坐标换算为原图坐标，不把设备DPR直接当成坐标倍数。以横图框x=96、y约86、宽192为例回对原图。
5. 加入YOLO TXT与原坐标JSON导出
加入YOLO TXT与原坐标JSON导出，拒绝零面积或越界框。
YOLO每行是 class x_center y_center width height；中心和宽高分别除以原图宽高。零面积框和越界输入不能进入下载。
独立目录练习命令
python3 -m http.server 8073 --directory reference6. 在手机和桌面预览分别给同一物体框选
在手机和桌面预览分别给同一物体框选，保存真实操作截图。
在三种图上各实际拖一个框，下载相应TXT。本题实际保存的actual-boxes.json记录指针产生的像素值，区别于预先写的真值。
7. 用独立脚本回读TXT
用独立脚本回读TXT，把归一化坐标转回原图并叠框核验。
独立读取TXT并乘回原图宽高，核对误差小于1像素。当前练习不训练YOLO，也不宣称图片中的物体由AI自动识别。
怎样确认已经完成
- 已知框的回读像素误差不超过1像素，横图竖图均通过。
- 浏览器缩放和画布显示尺寸变化后，导出标签仍落在同一原图物体上。
- 每行类别从0开始、归一化值在合法范围，空图与零面积框处理明确。
常见问题
能让AI写一个自己用的图片框选标注器吗？
Canvas保存原图宽高，CSS仅改变展示尺寸。切换图时清空当前图的框，避免把横图坐标带入竖图。 YOLO每行是 class x_center y_center width height；中心和宽高分别除以原图宽高。零面积框和越界输入不能进入下载。
图片缩放以后，导出的标注坐标为什么不对？
使用 getBoundingClientRect() 把指针坐标换算为原图坐标，不把设备DPR直接当成坐标倍数。以横图框x=96、y约86、宽192为例回对原图。 独立读取TXT并乘回原图宽高，核对误差小于1像素。当前练习不训练YOLO，也不宣称图片中的物体由AI自动识别。
下载包哪些内容已实际运行，哪些需要自己在原生工具中验证？
已用真实浏览器指针框选三种尺寸图并回读YOLO归一化坐标；未运行视觉模型或训练。 官方图片只证明所标入口或设置，不是本站原生任务执行截图。