基于Spring Boot+MySQL的半自动标注系统（人、车、人脸的自动检测）设计与实现
目录
1、 目标 2
1.1 背景 3
1.2 用户需求 3
1.2.1 交通组需求 3
1.2.2 医疗组需求 3
1.3 可扩展性 4
2、 功能列表 4
2.1用户管理 4
2.2用户登录 5
2.3数据集管理 5
2.4自动标注 5
2.5人工标注任务管理 6
2.6车流统计任务管理 7
2.7ReID标注任务管理 7
2.8视频标注任务管理 8
2.9模型管理及重训 9
2.10报表管理 9
2.11超大图像标注 9
2.12操作日志管理 9
3、 系统功能详细设计 10
3.1系统架构 10
3.2功能详细设计 10
3.2.1 用户登录、管理功能 10
1、 在登录页面输入用户名、密码登录。 11
1、 创建数据集。 11
3、 服务端正常创建数据集。 11
1、 管理员登录成功。 11
4、 在用户管理中修改用户的密码。 11
3.2.1.1 数据库表设计 12
3.2.1.2 接口说明 12
3.2.1.3 前端原型 12
3.2.2 数据集管理功能 12
1、 选择数据集，并设置抽帧参数。 13
3、 调用ffmpeg进行抽帧。 13
1、 选择数据集，在界面对合并的视频进行排序，并设置好序号。 13
3、 调用ffmpeg按照指定的顺序进行合并。 13
1、 选择数据集。 14
3.2.2.1 数据库表设计 14
3.2.2.2 接口说明 14
3.2.2.3 前端原型 15
3.2.3 自动标注功能 15
4、 调用指定算法模型的脚本进行标注。 15
6、 自动标注任务创建完成，用户可以查看并预览结果。 15
3.2.3.1 数据库表设计 16
3.2.3.2 接口说明 16
3.2.3.3 前端原型 17
3.2.4 人工标注功能 18
3.2.4.1 数据库表设计 19
3.2.4.2 接口说明 20
3.2.4.3 前端原型 22
3.2.5 ReID标注功能 23
2、 后端接到请求后，将任务设置为创建状态。 23
4、 遍历对照自动标注结果，进行以下5–7循环处理： 24
3、 创建完成，用户可以进行人工标注。 24
3.2.5.1 数据库表设计 24
3.2.5.2 接口说明 25
3.2.5.3 前端原型 25
3.2.6 车流统计功能 26
1、 选择视频数据集对象，输入车流统计任务名称。 26
5、 标注完成后，可以导出车流统计标注信息。 26
3.2.6.1 数据库表设计 26
3.2.6.2 接口说明 27
3.2.6.3 前端原型 28
3.2.7 视频标注功能 29
1、 选择视频数据集对象，输入视频标注任务名称。 29
6、前端界面显示更新标注信息。 29
3.2.7.1 数据库表设计 29
3.2.7.2 接口说明 30
3.2.7.3 前端原型 30
3.2.8 模型管理及重训功能 31
4、 调用重训脚本，并进行阻塞2天。 31
3.2.8.1 数据库表设计 32
3.2.8.2 接口说明 33
3.2.8.3 前端原型 33
3.2.9 报表管理 33
3.2.9.1 数据库表设计 34
3.2.9.2 接口说明 35
3.2.9.3 前端原型 35
3.2.10 超大图像标注 35
3.2.10.1 数据库表设计 36
3.2.10.2 接口说明 37
3.2.10.3 前端原型 37
3、系统功能详细设计
3.1系统架构
根据用户相关需求及列出的功能列表，综合考虑，半自动标注最终系统架构应该如下图所示。
本系统采用BS架构，方便对数据在服务端进行集中安全管控，因此用户在WEB页面进行操作。另外由于标注系统更多是操作图片，并进行渲染，因此不需要使用很多的框架，采用原生的JS及Jquery进行开发。
后端应用系统采用目前最流行的Spring Boot进行开发，方便快捷，响应速度快。
在存储系统的设计中，标注任务相关信息及数据最终采用MySQL进行存储，用户上传的文件、视频、图片，由于系统需要支持海量的小文件及很多大文件，最终采用minio文件存储系统进行存储。MySQL及minio都是开源免费的，并且使用简单，开发者多及活跃，这就是为什么最终采用这两者的原因。
另外存储系统也可以还支持华为云上的OBS存储替换minio，可以参见：OBSFileService的实现。
3.2功能详细设计
3.2.1 用户登录、管理功能
标注系统支持多用户操作，那么用户管理必然要支持增加用户，删除用户，并且区分用户类型，比如管理员，标注人员，审核人员等，同时每个用户的操作应该是独立的，所以其它功能的操作过程中，需要将用户信息全程携带，由于是在Web端保存用户信息，因此遵照惯例，Web端在用户登录之后，只保存用户的Token信息，客户端与服务端通过Token来识别对应的用户。
标注系统初始化会有一个管理员帐号LabelSystem01，密码为pcl123456，安装好标注系统后，本文转载自http://www.biyezuopin.vip/onews.asp?id=14905管理员使用此帐号进行登录操作。
用户登录流程步骤如下：
1、在登录页面输入用户名、密码登录。
2、后端应用系统接到登录请求后，对用户名及密码校验，如果通过则转3，否则返回错误的用户名、密码，流程结束。
3、检查系统缓存中是否有该用户的Token，如果有则使用存在的Token返回到Web面面，流程结束。否则转4
4、生成一个新的Token，加入到缓存及数据库表中，将此Token返回到Web面面，流程结束。
用户登录后操作系统流程如下：
1、创建数据集。
2、服务端获取操作携带的Token，校验此Token是否是合法的用户，如果不是，则直接返回异常信息，流程结束。
3、服务端正常创建数据集。
管理员登录后增加用户：
1、管理员登录成功。
2、在用户管理中添加用户，输入用户名称、密码、呢称、用户类型、联系方式等信息进行用户增加。
3、在用户管理中删除用户，前提此用户没有创建过任务或者数据集。
4、在用户管理中修改用户的密码。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PCL数据标注平台V2.0</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<meta name="description" content="Developed By M Abdur Rokib Promy">
<meta name="keywords" content="Admin, Bootstrap 3, Template, Theme, Responsive">
<!-- bootstrap 3.0.2 -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- font Awesome -->
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons -->
<link href="css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="css/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="css/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="css/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- fullCalendar -->
<!-- <link href="css/fullcalendar/fullcalendar.css" rel="stylesheet" type="text/css" /> -->
<!-- Daterange picker -->
<link href="css/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- iCheck for checkboxes and radio inputs -->
<link href="css/iCheck/all.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<!-- <link href="css/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" /> -->
<!-- Theme style -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body class="skin-black">
<!-- header logo: style can be found in header.less -->
<header class="header">
<a href="index.html" class="logo">
PCL数据标注平台V2.0
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top" role="navigation">
<!-- Sidebar toggle button-->
<a href="#" class="navbar-btn sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="navbar-right">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-user"></i>
<span id="userNickName_bar"> <i class="caret"></i></span>
</a>
<ul class="dropdown-menu dropdown-custom dropdown-menu-right">
<li>
<a href="login.html"><i class="fa fa-ban fa-fw pull-right"></i> Logout</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<!-- Left side column. contains the logo and sidebar -->
<aside class="left-side sidebar-offcanvas">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="img/26115.jpg" class="img-circle" alt="User Image" />
</div>
<div class="pull-left info">
<p id="userNickName"></p>
<a href="#"><i class="fa fa-circle text-success"></i> Online</a>
</div>
</div>
<!-- search form -->
<form action="#" method="get" class="sidebar-form">
<div class="input-group">
<!-- <input type="text" name="q" class="form-control" placeholder="Search..."/>
<span class="input-group-btn">
<button type='submit' name='seach' id='search-btn' class="btn btn-flat"><i class="fa fa-search"></i></button>
</span> -->
</div>
</form>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="active">
<a href="index.html">
<i class="fa fa-dashboard"></i> <span>主面板</span>
</a>
</li>
<li>
<a href="dataSetManage.html">
<i class="fa fa-database"></i> <span>数据集管理</span>
</a>
</li>
<li>
<a href="predictTaskPage.html">
<i class="fa fa-chevron-circle-right"></i> <span>自动标注</span>
</a>
</li>
<li>
<a href="labelTaskPage.html">
<i class="fa fa-check-circle"></i> <span>人工标注</span>
</a>
</li>
<li >
<a href="reIdTaskPage.html">
<i class="fa fa-gavel"></i> <span>ReID标注</span>
</a>
</li>
<li >
<a href="videoTaskPage.html">
<i class="fa fa-university"></i> <span>车流统计</span>
</a>
</li>
<li >
<a href="videoTaskPageBox.html">
<i class="fa fa-camera"></i> <span>视频标注</span>
</a>
</li>
<li >
<a href="bigImgTaskPage.html">
<i class="fa fa-picture-o"></i> <span>超大图像标注</span>
</a>
</li>
<li>
<a href="retrainTask.html">
<i class="fa fa-line-chart"></i> <span>模型重训</span>
</a>
</li>
<li >
<a href="userManage.html">
<i class="fa fa-user-circle"></i> <span>用户管理</span>
</a>
</li>
<li >
<a href="reportManage.html">
<i class="fa fa-bar-chart"></i> <span>报表管理</span>
</a>
</li>
<li>
<a href="logManage.html">
<i class="fa fa-file-text-o"></i><span>操作日志管理</span>
</a>
</li>
</ul>
</section>
<!-- /.sidebar -->
</aside>
<aside class="right-side">
<!-- Main content -->
<section class="content" >
<!-- Main row -->
<div class="row">
<div class="col-md-12">
<div class="sm-st clearfix" align="center">
<img src="img/yujiantubiao.png" alt>
<!-- <canvas id="flowsheet" width="1600" height="150"></canvas> -->
</div>
</div>
</div>
<div class="row">
<div class="alert alert-info">
<strong>【数据集管理】</strong> 对图片（仅支持jpg格式）、视频、医疗数据进行上传，管理。对视频可以按照指定策略进行抽帧，合并。
</div>
<div class="alert alert-success">
<strong>【自动标注】</strong> 选择图片或者抽帧后的视频数据集进行自动标注，可选算法Freeachor，仅用来标注人；Retinanet算法，可以用来标注人、车。在自动标注的时候，可以选择删除未检测到目标的图片，还可以自动标注完成后，进行在线预览结果。
</div>
<div class="alert alert-warning">
<strong>【人工标注】</strong> 对自动标注结果进行人工校验，也可以对数据集图片（仅支持jpg格式）、抽帧后的视频图片、医疗数据直接进行人工标注。标注信息可以自定义。但标注信息id及type两个属性必须保留。标注结果支持Json，XML、COCO格式导出。
</div>
<div class="alert alert-block alert-danger">
<strong>【ReID标注】</strong> 可以选择自动标注结果进行ReID标注，也可以直接对数据集中图片、抽帧后的视频图片进行ReID标注。标注结果可以导出。
</div>
<div class="alert alert-info">
<strong>【车流统计】</strong> 对视频进行车流统计，暂停视频后，按照视频上车的行驶方向进行标注。
</div>
<div class="alert alert-success">
<strong>【视频标注】</strong> 选择视频进行播放，在播放的过程暂停视频对视频进行直接标注，也可以选择指定算法进行自动标注。
</div>
<div class="alert alert-warning">
<strong>【模型重训】</strong> 选择指定数据集进行模型重训，需要较好的机器，带多个GPU。
</div>
<div class="alert alert-block alert-danger">
<strong>【用户管理】</strong> 管理员用户可以创建、删除用户，其它用户无权限操作。
</div>
<div class="alert alert-info">
<strong>【报表管理】</strong> 统计标注人员的每天标注情况，可以作各个维度的对比。
</div>
</div>
<!-- row end -->
</section><!-- /.content -->
<div class="footer-main">
Copyright © PCL, 2019-2021
</div>
</aside><!-- /.right-side -->
</div><!-- ./wrapper -->
<script src="js/func.js" type="text/javascript"></script>
<!-- jQuery 2.0.2 -->
<!-- -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- jQuery UI 1.10.3 -->
<script src="js/jquery-ui-1.10.3.min.js" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- daterangepicker -->
<!-- Director App -->
<script src="js/Director/app.js" type="text/javascript"></script>
<!-- 流程图显示 -->
<script src="js/Director/index.js" type="text/javascript"></script>
<!-- Director for demo purposes -->
<script type="text/javascript">
window.onload=function(){
console.log("onload index.html");
var token = getCookie("token");
if(typeof token == "undefined" || token == null || token == ""){
console.log("token=" + token);
window.location.href = "login.html";
}else{
var nickName = getCookie("nickName");
console.log("nickName=" + nickName);
$("#userNickName").text(nickName);
$("#userNickName_bar").text(nickName);
}
}
</script>
</body>
</html>
