开发bbox标注工具

主要功能

1. 支持上一张，下一张图片翻页按钮
2. 支持bbox的框的绘制，支持bbox的框的移动，bbox的框的缩放，bbox的标签
3. 图片来自本地文件夹，bbox的标注信息保存到本地文件夹
4. 如果已有bbox的标注信息，可以直接加载，继续标注
5. 如果没有bbox的标注信息，会通过bbox的检测算法，自动检测bbox的位置，自动给出一个可能的bbox的标注标签
6. 支持查看搜索目标图像，方便对比标注

设计图示

具体实现思路

gradio实现界面和模型预测调用，js实现bbox绘制和交互，因为gradio目前还不支持bbox的绘制

2023-05-05更新

1. 图片由本地图片搜索改成根据后台请求获取，方便对线上已标注的品牌和bbox的数量进行控制
2. 标注数据调用后台api，存储的mysql数据库
   数据库的表结构设计

   CREATE TABLE `labeling` (
     `id` int(11) NOT NULL AUTO_INCREMENT,
     `url` varchar(255) DEFAULT NULL COMMENT '商品url',
     `title` varchar(255) DEFAULT NULL COMMENT '商品标题',
     `pic` varchar(255) DEFAULT NULL COMMENT '商品图片url',
     `pic_path` varchar(255) DEFAULT NULL COMMENT '图片路径',
     `pic_width` int(11) DEFAULT NULL COMMENT '图片宽度',
     `pic_height` int(11) DEFAULT NULL COMMENT '图片高度',
     `bbox_num` int(11) DEFAULT NULL COMMENT 'bbox目标数量',
     `bbox` json DEFAULT NULL COMMENT 'bbox信息',
     PRIMARY KEY (`id`)
   ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='商品的目标检测结果';

3. 用户通过品牌进行搜索，返回同一品牌下未标注的商品，相同的商品名称按顺序返回
4. 根据bbox数量限制搜索返回的图片，我们可以优先标注简单的商品，这样模型学习后在辅助标注复杂的商品
5. 上一张和下一张的按钮会优先搜索已标注的数据库，如果存在，那么直接返回，如果不存在，在使用yolo进行辅助标注
6. 下一张按钮会自动触发当前页面的标注数据保存，并搜索下一张图片
7. 用户可以输入精确或模糊的商品名称查询，会自动调用图片搜索API进行商品图搜索，方便用户标注时进行对比。
8. 更改bbox的名称为颜色的名称，方便用户一下就定位到要修改的bbox
9. 修改图片上显示的标签为左上角，方便查看
10. 添加w和s的键盘快捷键，当用户点击w时，表示点击了上一张，s表示点击了下一张，加快标注速度
11. 当用户点击上一张或下一张的时候，同时自动更新参考的显示图片，自动显示最可能的商品的图片,方便用户校对
12. 涉及的API和页面，一共2个API，一个是YOLO的模型目标检测API，方便后台图片搜索API调用，图片搜索API链接线上库，搜索未标注商品和保存已标注信息到数据库等，gradio页面负责显示bbox的查询商品