|
- <!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" />
-
-
-
- <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
- <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
- <!--[if lt IE 9]>
-
-
- <![endif]-->
-
- <style type="text/css">
-
- </style>
- </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-->
-
- <li class="dropdown tasks-menu">
- <a href="#" class="dropdown-toggle" data-toggle="dropdown">
- <i class="fa fa-tasks"></i>
- <span class="label label-danger">9</span>
- </a>
- <ul class="dropdown-menu">
- <li class="header">You have 9 tasks</li>
- <li>
- <!-- inner menu: contains the actual data -->
- <ul class="menu">
- <li><!-- Task item -->
- <a href="#">
- <h3>
- Design some buttons
- <small class="pull-right">20%</small>
- </h3>
- <div class="progress progress-striped xs">
- <div class="progress-bar progress-bar-success" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
- <span class="sr-only">20% Complete</span>
- </div>
- </div>
- </a>
- </li><!-- end task item -->
- <li><!-- Task item -->
- <a href="#">
- <h3>
- Create a nice theme
- <small class="pull-right">40%</small>
- </h3>
- <div class="progress progress-striped xs">
- <div class="progress-bar progress-bar-danger" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
- <span class="sr-only">40% Complete</span>
- </div>
- </div>
- </a>
- </li><!-- end task item -->
- <li><!-- Task item -->
- <a href="#">
- <h3>
- Some task I need to do
- <small class="pull-right">60%</small>
- </h3>
- <div class="progress progress-striped xs">
- <div class="progress-bar progress-bar-info" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
- <span class="sr-only">60% Complete</span>
- </div>
- </div>
- </a>
- </li><!-- end task item -->
- <li><!-- Task item -->
- <a href="#">
- <h3>
- Make beautiful transitions
- <small class="pull-right">80%</small>
- </h3>
- <div class="progress progress-striped xs">
- <div class="progress-bar progress-bar-warning" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
- <span class="sr-only">80% Complete</span>
- </div>
- </div>
- </a>
- </li><!-- end task item -->
- </ul>
- </li>
- <li class="footer">
- <a href="#">View all tasks</a>
- </li>
- </ul>
- </li>
- <!-- 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>Jane Doe <i class="caret"></i></span>
- </a>
- <ul class="dropdown-menu dropdown-custom dropdown-menu-right">
- <li class="dropdown-header text-center">Account</li>
-
- <li>
- <a href="#">
- <i class="fa fa-clock-o fa-fw pull-right"></i>
- <span class="badge badge-success pull-right">10</span> Updates</a>
- <a href="#">
- <i class="fa fa-envelope-o fa-fw pull-right"></i>
- <span class="badge badge-danger pull-right">5</span> Messages</a>
- <a href="#"><i class="fa fa-magnet fa-fw pull-right"></i>
- <span class="badge badge-info pull-right">3</span> Subscriptions</a>
- <a href="#"><i class="fa fa-question fa-fw pull-right"></i> <span class=
- "badge pull-right">11</span> FAQ</a>
- </li>
-
- <li class="divider"></li>
-
- <li>
- <a href="#">
- <i class="fa fa-user fa-fw pull-right"></i>
- Profile
- </a>
- <a data-toggle="modal" href="#modal-user-settings">
- <i class="fa fa-cog fa-fw pull-right"></i>
- Settings
- </a>
- </li>
-
- <li class="divider"></li>
-
- <li>
- <a href="#"><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>Hello, Jane</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>
- <a href="index.html">
- <i class="fa fa-dashboard"></i> <span>主面板</span>
- </a>
- </li>
- <li class="active">
- <a href="control.html">
- <i class="fa fa-gavel"></i> <span>任务管理</span>
- </a>
- </li>
- <li >
- <a href="reIdTaskPage.html">
- <i class="fa fa-gavel"></i> <span>ReID标注</span>
- </a>
- </li>
- <li>
- <a href="general.html">
- <i class="fa fa-gavel"></i> <span>开发者界面</span>
- </a>
- </li>
-
-
- </ul>
- </section>
- <!-- /.sidebar -->
- </aside>
-
- <aside class="right-side">
- <section class="content">
- <div class="row">
- <div class="col-xs-6">
- <div class="panel">
- <div class="panel-body">
- <div class="panel-body table-responsive">
- <div id="loss" style="width: 100%;height:390px;"></div>
- </div>
- </div>
- </div>
- <div class="panel">
- <div class="panel-body">
- <div class="panel-body table-responsive">
- <div id="acc" style="width: 100%;height:390px;"></div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-xs-6">
- <div class="panel">
- <header class="panel-heading">
- 实时标注结果
- </header>
- <div class="panel-body">
- <div class="panel-body table-responsive">
- <div style="width: 100%;height:820px;">
- <div class="panel-body">
- <button type="button" class="btn btn-primary" onclick="display();">实时标注结果</button>
- </div>
- <div class="panel-body" id="v_dl">
- <video src="" width="720" height="405" controls="controls" autoplay="autoplay">
- </video>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
-
- <!-- <div class="row">
- <div class="col-xs-12">
- <div class="panel">
- <div class="panel-body">
- <div class="panel-body table-responsive">
- <div id="acc" style="width: 100%;height:390px;"></div>
- </div>
- </div>
- </div>
- </div>
- </div> -->
- </section>
- <!-- Main content -->
-
- <div class="footer-main">
- Copyright © PCL, 2019-2021
- </div>
- </aside><!-- /.right-side -->
-
- </div><!-- ./wrapper -->
-
-
- <!-- 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 -->
- <script src="js/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>
-
- <script src="js/plugins/chart.js" type="text/javascript"></script>
-
- <!-- datepicker
- <script src="js/plugins/datepicker/bootstrap-datepicker.js" type="text/javascript"></script>-->
- <!-- Bootstrap WYSIHTML5
- <script src="js/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js" type="text/javascript"></script>-->
- <!-- iCheck -->
- <script src="js/plugins/iCheck/icheck.min.js" type="text/javascript"></script>
- <!-- calendar -->
- <script src="js/plugins/fullcalendar/fullcalendar.js" type="text/javascript"></script>
-
- <!-- Director App -->
- <script src="js/Director/app.js" type="text/javascript"></script>
-
- <!-- Director dashboard demo (This is only for demo purposes) -->
- <script src="js/Director/dashboard.js" type="text/javascript"></script>
-
-
-
- <!-- Director for demo purposes -->
- <script src="js/echarts.min.js" type="text/javascript"></script>
-
-
- <script type="text/javascript">
- var vindex=0;
- function display(){
- var html="<video src=\"video/model_"+vindex+".mp4\" width=\"720\" controls=\"controls\" autoplay=\"autoplay\" loop=\"loop\">";
- document.getElementById('v_dl').innerHTML=html;
- if (vindex<2){vindex+=1;}
- }
- </script>
- <script type="text/javascript">
- var lossChart = echarts.init(document.getElementById('loss')); // 直接开始初始化,还是要用原生javascript
- var accChart = echarts.init(document.getElementById('acc')); // 直接开始初始化,还是要用原生javascript
- var loss,acc;
- $.getJSON("json/log.json", function (data){
- acc = data.acc;
- loss = data.loss;
- })
- function displayloss(lossarr, minlength=10){
- var iters = [];
- for (var i=0;i<Math.max(lossarr.length,minlength);i++){iters.push(i);}
- var option = {
- title : {
- text: 'Loss变化曲线',
- subtext: ''
- },
- tooltip : {
- trigger: 'axis'
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- xAxis : [
- {
- name: "迭代次数",
- type : 'category',
- boundaryGap : false,
- data : iters
- }
- ],
- yAxis : [
- {
- name:"loss",
- type : 'value',
- }
- ],
- series : [
- {
- name:'loss',
- type:'line',
- data:lossarr,
- // itemStyle: {normal: {areaStyle: {type: 'default'}}},
- markPoint : {
- data : [
- {type : 'max', name: '最大值'},
- {type : 'min', name: '最小值'}
- ]
- },
- markLine : {
- data : [
- {type : 'average', name: '平均值'}
- ]
- }
- },
- ]
- };
- lossChart.setOption(option); // 加载图表
- }
-
- function displayacc(accarr, minlength=10){
- var iters = [];
- for (var i=0;i<Math.max(accarr.length,minlength);i++){iters.push(i);}
- var option = {
- title : {
- text: '准确率变化曲线',
- subtext: ''
- },
- tooltip : {
- trigger: 'axis'
- },
- toolbox: {
- show : true,
- feature : {
- mark : {show: true},
- dataView : {show: true, readOnly: false},
- magicType : {show: true, type: ['line', 'bar']},
- restore : {show: true},
- saveAsImage : {show: true}
- }
- },
- calculable : true,
- xAxis : [
- {
- name: "测试次数",
- type : 'category',
- boundaryGap : false,
- data : iters
- }
- ],
- yAxis : [
- {
- name:"准确率/%",
- type : 'value',
- }
- ],
- series : [
- {
- name:'accuracy',
- type:'line',
- data:accarr,
- // areaStyle: {
- // normal: {
- // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
- // offset: 0,
- // color: 'rgba(16, 79, 193,1)'
- // }, {
- // offset: 1,
- // color: 'rgba(125, 178, 244,1)'
- // }], false)
- // }
- // },
- itemStyle: {
- normal: {
- color: 'rgba(16, 79, 193,1)'
- }
- },
- markPoint : {
- data : [
- {type : 'max', name: '最大值'},
- {type : 'min', name: '最小值'}
- ]
- },
- markLine : {
- data : [
- {type : 'average', name: '平均值'}
- ]
- }
- },
- ]
- };
- accChart.setOption(option); // 加载图表
- }
-
-
- loss_arr = []
- acc_arr = []
- var itersnum=0;
- setInterval(function(){
- if (itersnum<=loss.length){
- loss_arr.push(loss[itersnum]);
- if ((itersnum+1)%4==0){
- acc_arr.push(acc[(itersnum+1)/4]);
- }
- itersnum+=1;
- }
- displayloss(loss_arr);
- displayacc(acc_arr);
-
- },1000)
- </script>
-
- </body>
- </html>
|