OpenI
/
aiforge

<!-- <!DOCTYPE html> -->
<!DOCTYPE html>
<html >
    <head>
        <meta charset="UTF-8">
        <title>数据标注平台</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="/self/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <!-- font Awesome -->
        <link href="/self/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <!-- Ionicons -->
        <link href="/self/css/ionicons.min.css" rel="stylesheet" type="text/css" />
        <!-- google font -->
        
        <!-- Theme style -->
        <link href="/self/css/style.css" rel="stylesheet" type="text/css" />

        <link href="/self/css/jquery.yhhDataTable.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]-->
    <script>
      window.config={
        AppSubUrl:'',
        StaticUrlPrefix: '',
        csrf: '',
      }

      var title_text = sessionStorage.getItem('return_url').split('/')[2]
      console.log(sessionStorage.getItem('return_url').split('/'))
      title_text = "数据标注-" + title_text + '-OpenI'
      document.title = title_text
    
    </script>
		 <style>

html body{ height: 100%;margin: 0;padding: 0;}  
.containers{
  height: 100%;
  
}
.table-define td{border-bottom: 1px solid #222324;padding-top: 5px !important;padding-bottom:5px !important;border-top: 0px !important;padding-left: 20px !important;vertical-align: middle !important;}
.btn:hover{background: transparent;}
.display_area_content { } /* this class is used to clear the display area content */
.force_small_font { font-size:small !important; }
.draw_tool{padding:0;color:#fff}
.draw_li {padding: 0.2em;border: 0.5px solid rgba(34,35,36,0.2);border-bottom: 0;border-radius: 3px;cursor: pointer;}

ul.region_shape          { font-size:xx-large; list-style-type:none; overflow:hidden; padding:0.4em 0; margin:0; }
/*ul.region_shape li       { float:left; padding:0 0.2em; fill:#ffffff; stroke:#000000; }*/
ul.region_shape li       { float:right; padding:0 0.2em; fill:#ffffff; stroke:#000000; }
ul.region_shape li:hover { cursor:pointer; fill:#ffffff; stroke:#ff0000; }
ul.region_shape .selected { fill:#ffffff; stroke:#ff0000; }

/*.toolbar { display:inline-block; margin-left:1rem; }*/
.toolbar { display:inline-block; margin-right:1rem; }
.toolbar svg { fill:white; margin: 0.2rem 0.1rem; height:1.2rem;  -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none;}
.toolbar svg:hover { fill:yellow; cursor:pointer; }
.toolbar svg:active { fill:white; }
.toolbar ul { display:inline-block; padding:0.2rem; margin:0; }
/*.toolbar li { display:inline; float:left; padding:0rem 0.3rem; border:1px solid white;} *//* main menu items */
.toolbar li { display:inline; float:right; padding:0rem 0.3rem; border:1px solid white;} 
.toolbar li:hover { color:red; cursor:pointer; }

/* Top panel : #navbar, #toolbar */
.top_panel { font-size:0.9rem; display:block; background-color:#212121; color:#ffffff; z-index:1001; margin-bottom:1rem;}

/* Navigation menu bar that appear at the top */
.menubar { display:inline-block; height:1.8rem; } /* height needed to avoid extra bottom border */
.menubar a:link { color:#eeeeee; text-decoration:none; }
.menubar a:visited { color:#eeeeee; text-decoration:none; }
.menubar ul { display:block; padding:0; margin:0; }
/*.menubar li { display:inline; float:left; padding:0.45rem 1rem; }*/
.menubar li { display:inline; float:right; padding:0.45rem 1rem; }
.menubar li:hover { background-color:#616161; cursor:default; }

.menubar li ul { display:none; background-color:#212121; border:1px solid #616161; min-width:10rem; position:absolute; z-index:100; margin:0.4rem -1rem;}
.menubar li ul li { display:block; float:none; color:#eeeeee; margin:0; padding:0.6rem 1rem; }
.menubar li ul li:hover { cursor:pointer; }
.menubar li ul li.submenu_divider { margin:0 0.4rem; padding:0; height:1px; border-bottom:1px solid #424242; }
.menubar li:hover ul { display:block; }

/* toolbar containing small icons for tools */
.toolbar { display:inline-block; margin-right:1rem; }
/*.toolbar { display:inline-block; margin-left:1rem; }*/
.toolbar svg { fill:white; margin: 0.2rem 0.1rem; height:1.2rem;  -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none;}
.toolbar svg:hover { fill:yellow; cursor:pointer; }
.toolbar svg:active { fill:white; }
.toolbar ul { display:inline-block; padding:0.2rem; margin:0; }
/*.toolbar li { display:inline; float:left; padding:0rem 0.3rem; border:1px solid white;} *//* main menu items */
.toolbar li { display:inline; float:right; padding:0rem 0.3rem; border:1px solid white;} 
.toolbar li:hover { color:red; cursor:pointer; }

/* Middle panel: containing #image_panel, #leftsidebar */
/*.middle_panel { display:table; table-layout:fixed; width:100%; z-index:1; padding:0;}*/
.middle_panel { display:table; table-layout:fixed; right:0px,width:100%; z-index:1; padding:0;}
/*#leftsidebar { display:none; z-index:10; vertical-align:top;}*/
#leftsidebar { display:none; z-index:10; vertical-align:top;}
/*#rightsidebar { z-index:-10; vertical-align:left;}*/
/*#display_area { display:table-cell; width:100%; z-index:1; margin:0; padding-left:1em; vertical-align:top; }*/
#display_area { display:table-cell; width:100%; z-index:1; margin:0; padding-right:1em; vertical-align:top; }
/* layers of canvas */
/*#image_panel        { position:relative; outline:none; }
#image_panel img    { visibility:hidden; opacity:0; position:absolute; top:0px; left:0px; width:100%; height:100%; outline:none; }*/
#image_panel        { position:relative; outline:none; }
#image_panel img    { visibility:hidden; opacity:0; position:absolute; top:0px; right:0px; width:100%; height:100%; outline:none; }
#image_panel canvas { position:absolute; top:0px; left:0px; outline:none;}
#image_panel .visible { visibility:visible !important; opacity:1 !important; }
#image_panel label>img { visibility:visible; opacity:1; position:relative; width:auto; height:4em; outline:none; }


#leftsidebar_collapse_panel { display:none; position:relative; z-index:10; vertical-align:top; }
/*#leftsidebar_show_button { font-size:large; margin-left:0.1rem; }*/
#leftsidebar_show_button { font-size:large; margin-right:0.1rem; }
#leftsidebar_show_button:hover { color:red; cursor: pointer; }

/* Left sidebar accordion */
button.leftsidebar_accordion { font-size:large; background-color:#f2f2f2; cursor:pointer; padding:0.5em 0.5em; width:100%; text-align:left; border:0; outline:none; }
button.leftsidebar_accordion:focus { outline: none; }
button.leftsidebar_accordion.active, button.leftsidebar_accordion:hover { background-color: #e6e6e6; }
button.leftsidebar_accordion:after { content:'\02795'; color:#4d4d4d; float:right; }
button.leftsidebar_accordion.active:after { content: '\2796'; }
.leftsidebar_accordion_panel {  display:none; padding:0 0.5em; font-size:small; border-right:0px solid #f2f2f2; border-bottom:0px solid #f2f2f2; }
.leftsidebar_accordion_panel.show { display:block; }

/* Keyboard shortcut panel */
.leftsidebar_accordion_panel table { border-collapse:collapse; }
.leftsidebar_accordion_panel td { border:1px solid #f2f2f2; padding:0.2rem 0.4rem; }

/* buttons */
/*.button_panel { display:inline-block; width:100%; margin:0.2rem 0; }*/
.button_panel { display:inline-block; width:100%; margin:0.2rem 0; }
.button_panel .text_button, .text_button { color: #0000ff; padding: 0.2rem 0.2rem; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.button_panel .flush_right { float:right; }
.button_panel .text_button:hover, .text_button:hover { cursor:pointer; }
.button_panel .text_button:active, .text_button:active { color: #000000; }
.button_panel .active { border-bottom:1px solid black; }
.button_panel .button { display:inline-block; padding:0.35rem 0.5rem; margin:0 0.05rem; cursor:pointer; background-color:#cccccc; border-radius:0.2rem; -moz-user-select:none; -webkit-user-select:none; -ms-user-select:none; }
.button_panel .button:hover { background-color:black; color:white; }

/* Attributes properties: name, description, type, ... */
#attribute_properties { display:table; right:200;width:100%; border-collapse:collapse; margin:1rem 0; border:1px solid #cccccc; }
/*#attribute_properties { display:table;  border-collapse:collapse; margin:1rem 0; border:1px solid #cccccc; }*/
#attribute_properties .property { display:table-row;}
#attribute_properties .property span { display:table-cell; padding: 0.2rem 0.4rem; }
#attribute_properties .property span input { width: 100%; border:1px solid #cccccc; margin: 0;}
#attribute_properties .property span input:focus { border:1px solid black; }
#attribute_properties .property span select { width: 100%; border:1px solid #cccccc; margin: 0;}

/* Attributes options: options for attribute type={checkbox,radio,...} */
#attribute_options { display:table; width:100%; border-collapse:collapse; margin:1rem 0; border:1px solid #cccccc; table-layout:fixed; }
#attribute_options .new_option_id_entry { display:inline-block; padding:1rem 0.2rem; }
#attribute_options .new_option_id_entry input {border:none; border-bottom:1px solid #cccccc; margin: 0; font-size: 1.3rem;}
#attribute_options .property { display:table-row;}
#attribute_options .property span { display:table-cell; padding: 0.2rem 0.2rem; font-weight:bold; }
/*#attribute_options .property input { display:table-cell; width:100%; border:none; border-bottom:1px solid #cccccc; margin: 0; font-size: 0.8rem;}*/
#attribute_options .property input { display:table-cell; width:100%; border:none; border-bottom:1px solid #cccccc; margin: 0; font-size: 1.3rem;}
#attribute_options .property input:focus { border-bottom:1px solid #000000; background-color:#f2f2f2; color:#000000; }
#attribute_options .property span input[type=checkbox] { vertical-align:middle; }
#attribute_options .property span input[type=radio] { vertical-align:middle; }


#user_input_panel { position:fixed; display:none; width:100%; height:100%; top:0; left:50; right:0; bottom:0; background-color: rgba(0,0,0,0.6); z-index:1002; }
/*#user_input_panel .content { position:fixed; background-color:white; top:50%; left:50%; transform:translate(-50%,-50%);  -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); padding:2rem 4rem;}*/
#user_input_panel .content { position:fixed; background-color:white; top:50%; left:50%; transform:translate(-50%,-50%);  -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); padding:2rem 4rem;}
#user_input_panel .content .title { font-size:large; font-weight:bold; }
#user_input_panel .content .user_inputs { display:table; width:100%; border-collapse:collapse;}
#user_input_panel .content .user_inputs .row { display:table-row; }
#user_input_panel .content .user_inputs .cell { display:table-cell; padding:1rem 0.5rem; vertical-align:middle; border:1px solid #f2f2f2; }
#user_input_panel .content .user_confirm { display:table; width:100%; text-align:center; margin:2rem 0;}
#user_input_panel .content .user_confirm .ok { display:table-cell; width:48%; }
#user_input_panel .content .user_confirm .cancel { display:table-cell; width:48%; }
#user_input_panel .content .warning { color:red; }

/* Attribute editor */
#annotation_editor_panel { position:fixed; display:none; width:100%; right:0; bottom:0; background-color:white; border-top:2px solid #cccccc; padding:0.2em 1em; overflow:auto; z-index:1001; box-shadow: 0 0 1em #cccccc;}
/*#annotation_editor { display:table; margin-bottom:3em; border-collapse:collapse; font-size:inherit; position: absolute; top:500px;left:800px; background-color:white; }*/
#annotation_editor { display:table; margin-bottom:3em; border-collapse:collapse; font-size:inherit; background-color:white;  z-index:10024;}
#annotation_editor .row { display:table-row; }
#annotation_editor .highlight .col { background-color:#e6e6e6;}

#annotation_editor .col { display:table-cell; padding:0.4em 0.6em; border:1px solid #000000; vertical-align:middle; font-size:inherit; }
#annotation_editor .header { font-weight:bold; white-space:nowrap}
#annotation_editor .id { font-weight:bold; }
#annotation_editor .col input[type=checkbox] { vertical-align:middle; }
#annotation_editor .col input[type=radio] { vertical-align:middle; font-size:inherit; }
#annotation_editor .col label { vertical-align:middle; font-size:inherit; }
#annotation_editor .col textarea { border:0.1em solid #cccccc; padding:0; margin:0; font-size:inherit; background-color:#ffffff;height:20px;width: 80px}
#annotation_editor .col textarea:focus { border:0.1em dashed #cccccc; }
#annotation_editor .col span { display:block; }
#annotation_editor .col horizontal_container { display:inline-block; }

#annotation_editor .col .img_options { display:inline; }
#annotation_editor .col .img_options .imrow { display:block; }
#annotation_editor .col .img_options span { display:inline-block; margin: 0.2rem 0.4rem;}
#annotation_editor .col .img_options span img { height:4em; }
#annotation_editor .col .img_options p { margin:0; padding:0; font-size:inherit; }
#annotation_editor .col .img_options input[type=radio] { display:none; }
#annotation_editor .col .img_options input[type=radio] + label { display:block; cursor:pointer; text-align:center;}
#annotation_editor .col .img_options input[type=radio]:checked + label { border: 0.1em solid black; background-color:#cccccc; cursor:default; font-size:inherit; }

/* Region shape selection panel inside leftsidebar */
ul.region_shape          { font-size:xx-large; list-style-type:none; overflow:hidden; padding:0.4em 0; margin:0; }
ul.region_shape li       { float:left; padding:0 0.2em; fill:#ffffff; stroke:#000000; }
/*ul.region_shape li       { float:right; padding:0 0.2em; fill:#ffffff; stroke:#000000; }*/
ul.region_shape li:hover { cursor:pointer; fill:#ffffff; stroke:#ff0000; }
ul.region_shape .selected { fill:#ffffff; stroke:#ff0000; }

/* cursor coordinates inside region shape selection panel in leftsidebar */
#region_info { font-size:0.8em; margin-bottom:0.4em; }

/*#message_panel         { display:block; width:100%; position:fixed; bottom:300px; z-index:9999; text-align:center; }*/
#message_panel         { display:block; width:100%; position:fixed; bottom:30px; right:0;z-index:9999; text-align:center; }
#message_panel .content { display:inline; margin:auto; background-color:#000000; color:#ffff00; font-size:small; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:2rem; padding: 0.5rem 2rem;}

.text_panel    { display:none; margin:auto; font-size:medium; line-height:1.3em; margin: 0; max-width:700px; }
/*.text_panel li { margin:1em 0; text-align:left; }
.text_panel p  { text-align:left; }*/
.text_panel li { margin:1em 0; text-align:right; }
.text_panel p  { text-align:right; }

.svg_button:hover { cursor:pointer; }

/* Loading spinbar */
.loading_spinbox        { display:inline-block; border:0.4em solid #cccccc; border-radius:50%; border-top:0.4em solid black; border-bottom:0.4em solid black;-webkit-animation:spin 2s linear infinite; animation:spin 2s linear infinite; }
@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin         { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

#invisible_file_input { width:0.1px; height:0.1px; opacity:0; overflow:hidden; position:absolute; z-index:-1; }

.display_none  { display:none !important; }
.display_block { display:block !important; }

.display_area_content { } /* this class is used to clear the display area content */
.narrow_page_content li { font-size:0.9rem; margin: 0.4rem 0; }
.narrow_page_content { width:60%; }

.force_small_font { font-size:small !important; }
.key { font-family:monospace; padding:1px 6px; background:linear-gradient(to bottom,#f0f0f0,#fcfcfc);; border:1px solid #e0e0e0; white-space:nowrap; color:#303030; border-bottom-width:2px; border-radius:3px; font-size:1.2em; }

#progress{
            width: 100%;
            height: 20px;
            background: rgb(255, 255, 255);
     }
#bar{
            width: 1%;
            height: 20px;
            margin-top: 1px;             
			background: green;
    }

    </style>
		
    </head>
    <body>
	    <svg style="display:none;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <symbol id="via_logo">
          <!-- Logo designed by Abhishek Dutta <adutta@robots.ox.ac.uk>, May 2018 -->
          <title>VGG Image Annotator Logo</title>
          <rect width="400" height="160" x="0" y="0" fill="#212121"></rect>

          <text x="56" y="130" font-family="Serif" font-size="100" fill="white">V</text>
          <text x="180" y="130" font-family="Serif" font-size="100" fill="white">I</text>
          <text x="270" y="130" font-family="Serif" font-size="100" fill="white">A</text>

          <rect width="80" height="100" x="52" y="40" stroke="yellow" fill="none" stroke-width="2"></rect>
          <text x="72" y="30" font-family="'Comic Sans MS', cursive, sans-serif" font-size="18" fill="yellow">VGG</text>

          <rect width="50" height="100" x="175" y="45" stroke="yellow" fill="none" stroke-width="2"></rect>
          <text x="175" y="35" font-family="'Comic Sans MS', cursive, sans-serif" font-size="18" fill="yellow">Image</text>

          <rect width="80" height="100" x="265" y="40" stroke="yellow" fill="none" stroke-width="2"></rect>
          <text x="265" y="30" font-family="'Comic Sans MS', cursive, sans-serif" font-size="18" fill="yellow">Annotator</text>
        </symbol>
        <symbol id="shape_rectangle">
          <rect width="20" height="12" x="6" y="10" stroke-width="2"></rect>
        </symbol>
        <symbol id="shape_circle">
          <title>Circular region shape</title>
          <circle r="10" cx="16" cy="16" stroke-width="2"></circle>
        </symbol>
        <symbol id="shape_ellipse">
          <title>Elliptical region shape</title>
          <ellipse rx="12" ry="8" cx="16" cy="16" stroke-width="2"></ellipse>
        </symbol>
        <symbol id="shape_polygon">
          <path d="M 15.25,2.2372 3.625,11.6122 6,29.9872 l 20.75,-9.625 2.375,-14.75 z" stroke-width="2"></path>
        </symbol>
        <symbol id="shape_point">
     
          <circle r="3" cx="16" cy="16" stroke-width="2"></circle>
        </symbol>
        <symbol id="shape_polyline">
          <title>Polyline region shape</title>
          <path d="M 2,12 10,24 18,12 24,18" stroke-width="2"></path>
          <circle r="1" cx="2" cy="12" stroke-width="2"></circle>
          <circle r="1" cx="10" cy="24" stroke-width="2"></circle>
          <circle r="1" cx="18" cy="12" stroke-width="2"></circle>
          <circle r="1" cx="24" cy="18" stroke-width="2"></circle>
        </symbol>

        <!-- Material icons downloaded from https://material.io/icons -->
        <symbol id="icon_settings">
          <path d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path>
        </symbol>
        <symbol id="icon_save">
          <path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>
        </symbol>
        <symbol id="icon_open">
          <path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path>
        </symbol>
        <symbol id="icon_gridon">
          <path d="M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z"></path>
        </symbol>
        <symbol id="icon_gridoff">
          <path d="M8 4v1.45l2 2V4h4v4h-3.45l2 2H14v1.45l2 2V10h4v4h-3.45l2 2H20v1.45l2 2V4c0-1.1-.9-2-2-2H4.55l2 2H8zm8 0h4v4h-4V4zM1.27 1.27L0 2.55l2 2V20c0 1.1.9 2 2 2h15.46l2 2 1.27-1.27L1.27 1.27zM10 12.55L11.45 14H10v-1.45zm-6-6L5.45 8H4V6.55zM8 20H4v-4h4v4zm0-6H4v-4h3.45l.55.55V14zm6 6h-4v-4h3.45l.55.54V20zm2 0v-1.46L17.46 20H16z"></path>
        </symbol>
        <symbol id="icon_next">
          <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path>
        </symbol>
        <symbol id="icon_prev">
          <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"></path>
        </symbol>
        <symbol id="icon_list">
          <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"></path>
        </symbol>
        <symbol id="icon_zoomin">
          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
          <path d="M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z"/>
        </symbol>
        <symbol id="icon_zoomout">
          <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z"></path>
        </symbol>
        <symbol id="icon_copy">
          <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"></path>
        </symbol>
        <symbol id="icon_paste">
          <path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path>
        </symbol>
        <symbol id="icon_pasten">
          <path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path>
          <text x="8" y="18">n</text>
        </symbol>
        <symbol id="icon_pasteundo">
          <path d="M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z"></path>
          <text x="8" y="18">x</text>
        </symbol>
        <symbol id="icon_selectall">
          <path d="M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z"></path>
        </symbol>
        <symbol id="icon_close">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
        </symbol>
        <symbol id="icon_insertcomment">
          <path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path>
        </symbol>
        <symbol id="icon_checkbox">
          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
        </symbol>
        <symbol id="icon_fileupload">
          <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"></path>
        </symbol>
        <symbol id="icon_filedownload">
          <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"></path>
        </symbol>

		
      </defs>
    </svg>

	
        <!-- header logo: style can be found in header.less -->
        <!-- <header class="header" >
            <div class="logo">
               人工标注
            </div>
			<nav class="navbar navbar-static-top" role="navigation">
				<span style="font-size:28px" id="title_id">通用图片标注</span>
			</nav>
        </header> -->
        <div style="height:100vh;display:flex;flex-flow:column nowrap;overflow:hidden;position: relative;">
            <header class="header">
                <div class="row" style="background-color: #020004;">
                    <div class="col-lg-1">
                        <a id="return_url" href="" style="margin: 8px;display: inline-block;"><i class="fa fa-home fa-fw" style="color: #E1E3E6;font-size: 24px;"></i></a>
                    </div>
                    <div class="col-lg-9">
                      <div class="row">
                        <div class="col-lg-5" style=" padding-left: 0;">
                            <!-- <button type="button" class="btn" style="background:#3291F8;margin:8px 12px 8px 0;color: #fff;border-radius: 0;padding: 4px 12px;font-size: 12px;">返回任务</button>
                            <button type="button" class="btn" style="margin: 8px 12px;background:#74818D;color: #fff;border-radius: 0;padding: 4px 12px;font-size: 12px;">跳过</button>
                            <button type="button" class="btn" style="margin: 8px 12px;background:#FF6200;color: #fff;border-radius: 0;padding: 4px 12px;font-size: 12px;">提交</button> -->
                        </div>
                        <div class="col-lg-3" style="text-align: center;;line-height: 42px;color: #fff;">
                          <span id="float_text"></span>
                        </div>
                      </div>
                      
                    </div>
                    <div class="col-lg-2"></div>
                </div>
              </header>
              <div class="box1" style="float:left;position: absolute;z-index: 9999;left: 0.4em;top: 3.5em;">
                
              <ul class="draw_tool" style="font-size: 18px;background-color: rgba(12,13,13,0.3);color: rgba(225,227,230,0.8);">
                <li id="region_shape_rect"   class="selected draw_li" onclick="createRectLabel()" title="新建矩形标注(W)"><i class="fa fa-square-o"></i></li>
                                
                <li id="region_shape_polygon"  class="draw_li" onclick="createMaskLabel()" title="新建多边形标注"><i class="fa fa-first-order" aria-hidden="true"></i> </li>
                                
                <li id="region_shape_point" class="draw_li" onclick="createPointLabel()" title="新建点标注"><i class="fa fa-dot-circle-o" aria-hidden="true"></i></li>
                                
                <li id="delete_shape" class="draw_li" onclick="deleterect()" title="删除选中的标注(D)"><i class="fa fa-times-circle-o" aria-hidden="true"></i></li>
                <li id="delete_all_shape"  class="draw_li" onclick="deleteAllRect()" title="删除所有的标注框"><i class="fa fa-times" aria-hidden="true"></i></li>
                                
                <li id="save_shape" class="draw_li" onclick="save()" title="保存标注(S)"><i class="fa fa-floppy-o" aria-hidden="true"></i></li>
                                
                <li id="previous_shape"class="draw_li" onclick="last()" title="上一张(Q)"><i class="fa fa-arrow-circle-left" aria-hidden="true"></i></li>
                                
                <li id="next_shape" class="draw_li" onclick="next()" title="下一张(E)"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></li>
                <li id="copy_shape" class="draw_li"  onclick="copyOneBox()" title="复制单个选中的标注(C)"><i class="fa fa-file-o" aria-hidden="true"></i></li>
                <li id="copy_shape" class="draw_li"  onclick="copy()" title="复制所有的标注"><i class="fa fa-clone" aria-hidden="true"></i></li>
  
                <li id="paste_shape" class="draw_li"  onclick="paste()" title="粘贴复制的标注(V)"><i class="fa fa-clipboard" aria-hidden="true"></i></li>
                
 
                <li id="arrow-left" class="draw_li" onclick="moveLeftOnePx()" title="标注左移一个像素"><i class="fa fa-arrow-left" aria-hidden="true"></i> </li>
                <li id="arrow-right" class="draw_li" onclick="moveRightOnePx()" title="标注右移一个像素"><i class="fa fa-arrow-right" aria-hidden="true"></i> </li>
                               
                <li id="arrow-up" class="draw_li" onclick="moveUpOnePx()" title="标注上移一个像素"><i class="fa fa-arrow-up" aria-hidden="true"></i></li>
                                
                <li id="arrow-down" class="draw_li" onclick="moveDownOnePx()" title="标注下移一个像素"><i class="fa fa-arrow-down" aria-hidden="true"></i></li>
                
                                
                <li id="setting" class="draw_li" onclick="updateSetting()" title="设置"  href="#labeldefine"><i class="fa fa-cog" aria-hidden="true"></i> </li>
                              
                <li id="skip" class="draw_li" onclick="skipLast()" title="跳转至上次标注的地方"><i class="fa fa-reply" aria-hidden="true"></i></li>
                                
              <!--  <li  class="draw_li" onclick="setAutoModel()" title="自动标注"  href="#autoLabel" data-toggle="modal" data-backdrop="static" ><i class="fa fa-cube" aria-hidden="true"></i></li> -->
                              
                <li class="draw_li"  onclick="undo()" title="撤销上次标注(Z)" ><i class="fa fa-reply-all" aria-hidden="true"></i></li>
                                
                <li   style="padding: 0.2em;border: 0.5px solid rgba(34,35,36,0.2);border-radius: 3px;cursor: pointer;" title="清空指定文件的标注" href="#deleteLabel" data-toggle="modal" data-backdrop="static" ><i class="fa fa-eraser" aria-hidden="true"></i></li>
              </ul>
              
              </div>
              <div class="containers" style="flex: 1;">
                <!-- <aside class="left-side sidebar-offcanvas" ></aside> -->
                
                <div class="row" style="height: 100%;">

                  <!-- left-side -->
                  <!-- <div class="col-lg-1" style="background-color: #020004;height: 100%;border-top: 1px solid #222324;padding: 0;">
                    <div style="line-height: 3em;text-align: center;font-size: 16px;">
                      <span style="color: #fff;float: left;padding-left: 1.5em;">动物-狗</span>
                      <a style="float: right;padding-right: 1em;"><i class="fa fa-cog" style="color: #74818D;font-size: 18px;cursor: pointer;"></i></a>
                    </div>
                    <div style="clear: both;">
                      <input type="text" placeholder="搜索标签" style="width: 80%;margin: 0 10%;background-color: transparent;border-radius: 6px;border: 0.5px solid #43474B;outline: none;color: #74818D;padding: 0.1em;">
                    </div>
                    
                  </div> -->

                  <!-- canvas -->
                  <div class="col-lg-10" id="showPic" style="background-color: #222324;height: 100%;padding: 0;padding-left: 4em;">

                      <!-- <nav class="navbar navbar-default" role="navigation" id="tool0" style="margin-bottom: 0;">
                          <div class="leftsidebar_accordion_panel show">
                             <ul class="region_shape" style="padding: 0;">
                                <li id="region_shape_rect" class="selected" onclick="createRectLabel()" title="新建矩形标注(W)"><svg height="28" viewbox="0 0 28 28"><use xlink:href="#shape_rectangle"></use></svg></li>
                                
                                <li id="region_shape_polygon" onclick="createMaskLabel()" title="新建多边形标注"><svg height="28" viewbox="0 0 28 28"><use xlink:href="#shape_polygon"></use></svg></li>
                                
                                <li id="region_shape_point" onclick="createPointLabel()" title="新建点标注"><svg height="28" viewbox="0 0 28 28"><use xlink:href="#shape_point"></use></svg></li>
                                
                                <li id="delete_shape" onclick="deleterect()" title="删除选中的标注(D)"><svg height="24" viewbox="0 0 28 28"><use xlink:href="#icon_close"></use></svg></li>
                                
                                <li id="save_shape" onclick="save()" title="保存标注(S)"><svg height="24" viewbox="0 0 28 28"><use xlink:href="#icon_save"></use></svg></li>
                                
                                <li id="previous_shape" onclick="last()" title="上一张(Q)"><svg height="24" viewbox="0 0 28 28"><use xlink:href="#icon_prev"></use></svg></li>
                                
                                <li id="next_shape" onclick="next()" title="下一张(E)"><svg height="24" viewbox="0 0 28 28"><use xlink:href="#icon_next"></use></svg></li>
  
                                <li id="copy_shape" onclick="copy()" title="复制所有的标注"><svg height="24" viewbox="0 0 28 28"><use xlink:href="#icon_copy"></use></svg></li>
  
                                <li id="paste_shape" onclick="paste()" title="粘贴复制的标注(V)"><svg height="24" viewbox="0 0 28 28"><use xlink:href="#icon_pasten"></use></svg></li>
                                <li id="copy_shape" style="font-size: 20px;" onclick="copyOneBox()" title="复制单个选中的标注(C)"><i  class="fa fa-files-o" style="vertical-align: bottom;" aria-hidden="true"></i></li>
 
                                <li id="arrow-left" style="font-size: 26px" onclick="moveLeftOnePx()" title="标注左移一个像素"><i  class="fa fa-long-arrow-left" aria-hidden="true"  ></i></li>
                                <li id="arrow-right" style="font-size: 26px" onclick="moveRightOnePx()" title="标注右移一个像素"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></li>
                               
                                <li id="arrow-up" style="font-size: 26px" onclick="moveUpOnePx()" title="标注上移一个像素"><i class="fa fa-long-arrow-up" aria-hidden="true"></i></li>
                                
                                <li id="arrow-down" style="font-size: 26px" onclick="moveDownOnePx()" title="标注下移一个像素"><i class="fa fa-long-arrow-down" aria-hidden="true"></i></li>
                                <li id="delete_all_shape"  style="font-size: 22px;" onclick="deleteAllRect()" title="删除所有的标注框"><i  class="fa fa-window-close-o" style="vertical-align: middle;" aria-hidden="true" ></i></li>
                                
                                <li id="setting" onclick="updateSetting()" title="设置"  href="#labeldefine"><svg height="24" viewbox="0 0 28 28"><use xlink:href="#icon_settings"></use></svg></li>
                              
                                <li id="skip" style="font-size: 22px" onclick="skipLast()" title="跳转至上次标注的地方"><i class="fa fa-share" aria-hidden="true"></i></li>
                                
                                <li  style="font-size: 22px" onclick="setAutoModel()" title="自动标注"  href="#autoLabel" data-toggle="modal" data-backdrop="static" ><i class="fa fa-tag" aria-hidden="true"></i></li>
                              
                                <li  style="font-size: 22px" onclick="undo()" title="撤销上次标注(Z)" ><i class="fa fa-undo" aria-hidden="true"></i></li>
                                
                                <li  style="font-size: 22px"  title="清空指定文件的标注" href="#deleteLabel" data-toggle="modal" data-backdrop="static" ><i class="fa fa-eraser" aria-hidden="true"></i></li>
                             </ul>
  
                            </div>
  
                           <div id=labeldefine>
                           </div>
                      </nav> -->
  
                      <div id="labelwin" width="100%" style="display: flex;justify-content: center;align-content: center;" >
                              <input type="hidden" class="form-control" id="postmessage" >
                              <div id = "show_region" style="z-index: 50000;width: 0px;height: 0px"></div>
                              
                               <canvas id="myCanvas"  style="border:1px solid #5a5a5a;"></canvas>
                              <div id="float_text"></div>
                      </div>
                  
                  
                    </div>


                  <!-- right side -->
                  <div class="col-lg-2" style="background-color: #020004;height: 100%;border-top: 1px solid #222324;padding: 0;">
                      <div style="line-height: 3em;text-align: center;font-size: 14px;">
                          <span id="task_info" style="color: #fff;float: left;padding-left: 1.5em;">train数据集标注任务</span>
                          <!-- <a style="float: right;padding-right: 2em;"><i class="fa fa-cog" style="color: #74818D;font-size: 18px;cursor: pointer;"></i></a> -->
                      </div>
                      <div class="progress" style="clear: both;margin: 0 2em 0 1em;height: 0.5em;">
                          <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;background-color: #389E0D;">
                            <span class="sr-only">60% Complete</span>
                          </div>
                      </div>
                      <div style="margin: 1em 1.5em;font-size: 10px;">
                        <span style="color: #7092BE;margin-right: 1em;">任务标注进度</span><span id="task_progress" style="color:#7092BE;"></span>
                      </div>
                      <div class="panel" style="margin-bottom: 1em;">
                        <div  id = "labelStatus"></div>
                      </div>

                      <div id="nav" style="height:100%">
					
                          <ul style="display: flex;padding: 0;margin: 0;color:#7092BE;">
                            <li id="0" class="active">文件列表</li>
          
                            <li id="1">标签列表</li>
                          </ul>
                          <div class="tabpannel" style="height: 100%;">
                              <!-- <h4 class="ui top attached header">
                                  文件列表
                              </h4> -->
                              
                             
                                <!-- <table  class="ui single line table" id="filelist" style="table-layout:fixed;word-break: break-all;word-wrap: break-word;">  
                              
                                </table> -->
                                <div class="panel-body no-padding" id="filepanel" style="height: 100%;">
                                    <div style="display: flex;padding: 0.3em 0;border-bottom: 1px solid #222324 ;">
                                      <span style="flex: 3;padding-left: 20px;color: #7092BE;">文件名</span>
                                      <div class="btn-group" style="flex:1">
                                        <button type="button" class="btn-default dropdown-toggle" 
                                            data-toggle="dropdown" style="background: transparent;padding: 0;border: 0;vertical-align: top;line-height: 1;color: #7092BE;">
                                          ...
                                        </button>
                                        <ul class="dropdown-menu" role="menu" style="left:-90px;background: #020004;border: 1px solid #222324;border-radius: 0;width:2em;min-width: 8em;color: #fff;">
                                          <li value="1" onclick="showOrder($(this).attr('value'))" style="font-size: 8px;color: #fff;padding: 0.3em 0 0.3em 2em;width: 100%;text-align: start;border-bottom: 0.5px solid #222324;">按文件名排序</li>
                                          
                                          <li value="2" onclick="showOrder($(this).attr('value'))" style="font-size: 8px;color: #fff;padding: 0.3em 0 0.3em 2em;width: 100%;text-align: start;">未标注</li>
                                        </ul>
                                      </div>
                                    </div>
                                    <table class="table table-condensed table-define" id="filelist" style="table-layout:fixed;overflow:auto;word-break: break-all;word-wrap: break-word;color:#7092BE;font-size: 10px;">
    
                                        
                                    </table>
    
                                
                                </div>
          
          
                                <div class="panel-body" id="filepanel" style='position: absolute;bottom: 0;padding: 0.9em 0;width: 100%;border-top: 1px #ccc solid; color: #7092BE;'>
                                    <div style="width: 80%; margin: 0 10%;">
                                        <a id="prePage" href="" style="margin-right: 0.2em;"><i class="fa fa-angle-left"></i></a> 
                                        
                                        <span id="startIndex">0</span>-<span id="endIndex">0</span>/<span id="totalNum">0</span>
                                        <span style="margin-left: 0.2em;">第</span><span id="displayPage1">1</span><span style="margin-right: 0.2em;">页</span>
                                        <span>跳到</span><input type="text" id="goNum" style="width: 2em;border-radius: 4px;padding: 0 0.4em;margin: 0 0.4em;height: 1.2em;border: 1px solid;" maxlength="5" oninput="value=value.replace(/[^\d]/g,'')"><span>页</span>
          
                                        <a style="margin-left: 0.4em;" id="nextPage" href=""><i class="fa fa-angle-right"></i></a>
                                      
                                  </div>
                      
                              </div>
                        </div>
                        <div class="hide1 tabpannel">
                          <div class="panel-body no-padding" id="labelpanel">
                            <table class="table table-condensed table-define" style="color: #fff;" >
                                <tbody id="boxlabels">   
                                </tbody>
                            </table>
                          </div><!-- /.panel-body -->
                          
                          <div class="panel-body no-padding" id="labelcountpanel" style="display: none;">
                            <table class="table table-condensed" id="labelcounttable">
                            </table>
                          </div><!-- /.panel-body -->
                          
                        </div>

                  </div>
                </div>
              </div>


              <div  class="panel" id="set_attributes" class="force_small_font display_area_content" style="display:none;">
                      <button class="close"  onclick="close_attribute()" style=" padding: .3em 0.8em;"> × </button>
                      <div id="user_input_panel"></div>
                        <div id="message_panel">
                          <div id="message_panel_content" class="content"></div>
                        </div>
                        <div id="leftsidebar_collapse_panel">
                          <span class="text_button" onclick="leftsidebar_toggle()" title="Show left sidebar">&rtrif;</span>
                        </div>
                     <div id="leftsidebar">
                        <div class="leftsidebar_accordion_panel show" id="attributes_editor_panel">
                          <div class="button_panel" style="padding:1rem 0;">
                            <h4 class="modal-title">设置</h4>
                          </div>
                          <div id="attributes_update_panel">
                            <div class="button_panel">
                              <input style="width:50%" type="text" placeholder="attribute name" id="user_input_attribute_id"  value="">
                                <span id="button_add_new_attribute" class="button" onclick="add_new_attribute_from_user_input()" title="Add new attribute">&plus;</span>
                            </div>
                            <div class="button_panel" style="margin:0.1rem 0;width:70%;" >
                              <table class="table table-hover" id="attributes_name_list">     
                              </table>
                            </div>
                            <div  id="atttibute_child" >
                              <div id="type_car" style="display: none;">
                                <span class= "btn btn-xs btn-success" style="margin-left:5px" onclick="show_tpye_attribute();">点击此处快速添加常用车辆类别</span>
                              </div>
                              <div id="type_color" style="display: none;">
                                <span class= "btn btn-xs btn-success" style="margin-left:5px" onclick="show_color_attribute();">点击此处快速添加常用颜色</span>
                              </div>
                              <div id="attribute_properties"> </div>
                              <div id="attribute_options"></div>
                              <p style="text-align:center"></p>
                            </div>
                          </div>
                          <div>
                            <button type="button" class="btn btn-default"  onclick="save_attribute()" id="save" style=" margin:0.5rem 0.3rem "> 保存属性值</button>
                            <button type="button" class="btn btn-default"  onclick="export_attribute()" id="export" style=" margin:0.5rem 0.3rem;float:right"> 导出属性值</button>
                            <button type="button" class="btn btn-default"  onclick="import_attribute()" id="import" style=" margin:0.5rem 0.3rem;float:right"> 导入属性值</button>
                          </div>

                        </div>
                  </div> <!-- Dialog setAttribute -->
                  <div style="width: 100%;" id="vertical_space"></div>
              </div><!-- /.panel -->


              <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="autoLabel" class="modal fade">
                  <div class="modal-dialog">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                        <h4 class="modal-title">自动标注</h4>
                      </div>
                      <div class="modal-body">
                        <form role="form">
                          <div class="form-group">
                            <label for="exampleInputPassword1">自动标注任务使用的模型</label>          
                            <select class="form-control" name="预检模型" id="predict_model" onchange="model_sele_Change(this)">
                              <option value="" >请选择</option>
                              <!--<option value="1" selected="">Faster RCNN</option> -->
                            </select>
                          </div>
                          <div id="tracking_startid_div" class="form-group" style="display:none">
                            <label for="exampleInputEmail1">追踪起始图片ID</label>
                            <input type="" class="form-control" id="tracking_startid" placeholder="追踪起始图片ID">
                          </div>
                          <div id="tracking_endid_div" class="form-group" style="display:none">
                            <label for="exampleInputEmail1">追踪结束图片ID</label>
                            <input type="" class="form-control" id="tracking_endid" placeholder="追踪结束图片ID">
                          </div>
                          <div id="label_id_div" class="form-group">
                            <label for="exampleInputEmail1">标注框ID</label>
                            <input type="" class="form-control" id="label_id" placeholder="标注框ID">
                          </div>
                          <div id="labelOption_div" class="form-group">
                            <label for="exampleInputEmail1">标注信息选项</label>
                            <select class="form-control" name="labelOption" id="labelOption">
                              <option value="4">请选择</option>
                                                 <!--<option value="0" selected="">合并已有的标注信息</option>
                                                 <option value="1">删除已有的标注信息</option>
                                                 <option value="2">识别车的颜色及车的类型</option> -->
                            </select>
                            </div>
                            <div id="progress">
                              <div id="bar"></div>
                            </div>
                            <div><h5 id="text-progress">0%</h3></div>
                            <button id="predtask_id" type="button"  onclick="submit_predtask();">提交</button>
                          </form>
                        </div>
                      </div>
                    </div>
              </div>
                  
                  
              <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="deleteLabel" class="modal fade">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                          <h4 class="modal-title">清空指定文件的标注</h4>
                        </div>
                        <div class="modal-body">
                          <form role="form">
                            <div id="delete_startid_div" class="form-group">
                              <label for="exampleInputEmail1">起始文件ID（对应文件列表中第几条）</label>
                                <input type="" class="form-control" id="delete_startid" placeholder="起始文件ID">
                            </div>
                            <div id="delete_endid_div" class="form-group">
                              <label for="exampleInputEmail1">结束文件ID（对应文件列表中第几条）</label>
                              <input type="" class="form-control" id="delete_endid" placeholder="结束文件ID">
                            </div> 
                            <button id="predtask_id" type="button"  onclick="submit_deletelabel();">提交</button>
                            </form>
                          </div>
                        </div>
                    </div>
              </div>


              <div aria-hidden="true" aria-labelledby="myModalLabelc" role="dialog" tabindex="-1" id="datasetModal" class="modal fade">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
                          <h4 class="modal-title">导入标注属性</h4>
                        </div>
                        <div class="modal-body"> 
                          <div class="form-group">
                            <label id = "labelInfo" for="exampleInputFile">请输入符合格式Json字符串<font color=red>*</font> </label>
                            <div>
                              <textarea id="jsoninput" rows="8" cols="70"> </textarea>
                            </div>           
                          </div>
                          <button id="btnSubmit" type="button"   onclick="submit_import_property();">提交</button>
                                
                        </div>
                      </div>
                    </div>
              </div>
        </div>


        <script>
          // back to label table 
          var back_url = sessionStorage.getItem('return_url')
          document.getElementById('return_url').setAttribute('href',back_url); 


          var ulObj = document.getElementById('nav').getElementsByTagName('ul')[0];
          var divObj = document.getElementsByClassName('tabpannel');
          var liObj = document.getElementById('nav').getElementsByTagName('li')
          ulObj.onclick = function(event){
            var ev = window.event || event;
            var item = ev.srcElement || ev.target;

            var id = item.getAttribute("id")
            for (var i=0; i<divObj.length;i++){
              if(i == id){
                divObj[i].style.display = 'block'
                liObj[i].classList.add('active')
              }
              else{
                divObj[i].style.display = 'none'
                liObj[i].classList.remove('active')
              }
            }
          }
        
        </script>
        <script>
        var box = document.getElementsByClassName("box1")[0]; //获取元素
            var x, y; //鼠标相对与div左边，上边的偏移
            var isDrop = false; //移动状态的判断鼠标按下才能移动
            box.onmousedown = function(e) {
                var e = e || window.event; //要用event这个对象来获取鼠标的位置
                x = e.clientX - box.offsetLeft;
                y = e.clientY - box.offsetTop;
                isDrop = true; //设为true表示可以移动
            }

            document.onmousemove = function(e) {
                //是否为可移动状态                　　　　　　　　　　　 　　　　　　　
                if(isDrop) {　　　　
                    var e = e || window.event;                    　　
                    var moveX = e.clientX - x; //得到距离左边移动距离                    　　
                    var moveY = e.clientY - y; //得到距离上边移动距离
                    //可移动最大距离
                    var maxX = document.documentElement.clientWidth - box.offsetWidth;
                    var maxY = document.documentElement.clientHeight - box.offsetHeight;

                    //范围限定  当移动的距离最小时取最大  移动的距离最大时取最小
                    //范围限定方法一
                    /*if(moveX < 0) {
                        moveX = 0
                    } else if(moveX > maxX) {
                        moveX = maxX;
                    }

                    if(moveY < 0) {
                        moveY = 0;
                    } else if(moveY > maxY) {
                        moveY = maxY;
                    }　*/
                    //范围限定方法二　
                    moveX=Math.min(maxX, Math.max(0,moveX));
                    
                    moveY=Math.min(maxY, Math.max(0,moveY));
                    box.style.left = moveX + "px";　　
                    box.style.top = moveY + "px";　　　　　　　　　　
                } else {
                    return;　　　　　　　　　　
                }

            }

            document.onmouseup = function() {
                isDrop = false; //设置为false不可移动
            }
        
        
        </script>
										  
        <script src="/self/func.js" type="text/javascript"></script>
        
        <!-- jQuery 2.0.2 -->
        <!--  -->
        <script src="/self/js/jquery.min.js" type="text/javascript"></script>
        <script src="/self/js/jquery.mousewheel.js"></script>
        <script src="/self/js/jquery.jscrollpane.js"></script>

        <!-- Bootstrap -->
        <script src="/self/js/bootstrap.min.js" type="text/javascript"></script>
		    <script src="/self/js/app.js"  type="text/javascript" ></script>
		    <script src="/self/js/Director/labelingSelfDefine.js" type="text/javascript"></script>
        <script src="/self/js/Director/detection.js"  type="text/javascript" ></script>
        <!-- <script src="../js/labelx.js"></script> -->

    </body>
</html>