support pre and next image when browse dataset image files

paddlex_restful/restful/frontend_demo/paddlex_restful_demo.html

@@ -404,6 +404,20 @@ body { background: #f6f6f6;}
 
 .table-dataset-imgs{width:100%; height:210px; border:1px solid #D6D6D6; overflow-y:scroll;}
 
+arrow {
+  border: solid blue;
+  border-width: 0 6px 6px 0;
+  display: inline-block;
+  padding: 10px;
+}
+.right {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+.left {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
 </style>
 
 <script type="text/javascript">
@@ -510,9 +524,9 @@ var Backbone_List = {
 
 var Project_Type_Name_Enum = {
     "classification":"图像分类",
-     "detection":"目标检测",
-     "segmentation":"语义分割",
-     "instance_segmentation":"实例分割"
+    "detection":"目标检测",
+    "segmentation":"语义分割",
+    "instance_segmentation":"实例分割"
 }
 
 //显示服务器配置窗口
@@ -637,6 +651,7 @@ function hide_import_dataset_win_modal(obj)
     input_import_dataset_id.value = "";
 }
 
+//重新切分数据集
 function re_split_dataset(obj)
 {
     var on_win_split_dataset = document.getElementById('input_win_split_dataset');
@@ -816,6 +831,106 @@ function get_log_file_from_server(str_log_file_name)
     return http_request.responseText;
 }
 
+//从服务器获取一张图片数据，用于数据集图片预览向前及向后
+var g_curr_img_file_idx = 0;
+var g_dbl_clk_img_frame_id = "dataset_img_1";
+
+function get_one_img_file(str_dir = "next")
+{
+    var lst_img_files = g_dataset_files[g_current_dataset_lable_name];
+     
+    if (g_b_show_dataset_type == "all")
+    {
+        lst_img_files = g_dataset_files[g_current_dataset_lable_name];
+    }
+    else if (g_b_show_dataset_type == "train")
+    {
+        lst_img_files = g_dataset_train_files[g_current_dataset_lable_name];
+    }
+    else if (g_b_show_dataset_type == "evaluate")
+    {
+        lst_img_files = g_dataset_evaluate_files[g_current_dataset_lable_name];
+    }
+    else if (g_b_show_dataset_type == "test")
+    {
+        lst_img_files = g_dataset_test_files[g_current_dataset_lable_name];
+    }
+     
+    //数据集ID
+    var str_dataset_id = document.getElementById('browse_dataset_id').value;
+    //获取数据集路径
+    var str_dataset_path = document.getElementById('view_dataset_path_' + str_dataset_id).value;
+    
+    var idx_img_frame_postfix = g_dbl_clk_img_frame_id.lastIndexOf("_");
+    var idx_img_frame = 0;
+    if(idx_img_frame_postfix >= 0)
+    {
+        idx_img_frame = parseInt(g_dbl_clk_img_frame_id.substring(idx_img_frame_postfix + 1,g_dbl_clk_img_frame_id.length)) - 1;
+    }
+    
+    if (g_curr_img_file_idx == 0)
+    {
+        g_curr_img_file_idx = g_const_imgs_per_page * (g_current_dataset_page - 1) + idx_img_frame;
+    }
+
+    if(str_dir == "next")
+    {
+        g_curr_img_file_idx++;
+        document.getElementById('arrow_pre_img').style.borderColor='blue';
+    }
+    else
+    {
+        g_curr_img_file_idx--;
+        document.getElementById('arrow_next_img').style.borderColor='blue';
+    }
+
+     
+    if(g_curr_img_file_idx <= 0)
+    {
+        g_curr_img_file_idx = 0;
+        document.getElementById('arrow_pre_img').style.borderColor='gray';
+    }
+    if(g_curr_img_file_idx >= lst_img_files.length)
+    {
+        g_curr_img_file_idx = lst_img_files.length;
+        document.getElementById('arrow_next_img').style.borderColor='gray';
+    }
+     
+    var str_img_file_name = lst_img_files[g_curr_img_file_idx];
+    var str_img_file = str_dataset_path + "/" + str_img_file_name;
+    //是否显示标注
+    var str_img_file_content = "";
+    if(g_b_show_img_labels == true)
+    {
+        str_img_file_content = get_img_file_from_server(str_img_file, str_dataset_id);
+    }
+    else
+    {
+        str_img_file_content = get_img_file_from_server(str_img_file);
+    }
+    //更新img框内容
+    var obj_img = document.getElementById('dataset_browse_img');
+    var idx_file_postfix = str_img_file_name.lastIndexOf(".");
+    var str_file_type = "jpeg";
+    if(idx_file_postfix >= 0)
+    {
+        str_file_type = str_img_file_name.substring(idx_file_postfix + 1,str_img_file_name.length);
+    }
+         
+    str_file_type = str_file_type.toLowerCase();
+         
+    var str_b64_type = "data:image/jpeg;base64,";
+         
+    if(str_file_type == "jpg" || str_file_type == "jpeg")
+        str_b64_type = "data:image/jpeg;base64,";
+    else if (str_file_type == "bmp")
+        str_b64_type = "data:image/jpeg;base64,";
+    else if (str_file_type == "png")
+        str_b64_type = "data:image/png;base64,";
+         
+    obj_img.src = str_b64_type + str_img_file_content;
+}
+
 //刷新翻页按纽
 function refresh_dataset_page_buttons()
 {
@@ -971,7 +1086,6 @@ function show_browse_dataset_win_modal(obj)
     //刷新翻页按纽
     refresh_dataset_page_buttons();
     
-    
     on_win_browse_dataset.style.display = "block";
     over_win_browse_dataset.style.display = "block";
 }
@@ -994,6 +1108,21 @@ function hide_browse_dataset_win_modal(obj)
 //双击放大图像
 function zoom_image(obj)
 {
+    g_curr_img_file_idx = 0;
+    g_dbl_clk_img_frame_id = obj.id;
+    
+    if(g_dbl_clk_img_frame_id.indexOf("dataset") >= 0)
+    {
+
+        document.getElementById('arrow_pre_img').style.borderColor='blue';
+        document.getElementById('arrow_next_img').style.borderColor='blue';
+    }
+    else
+    {
+        document.getElementById('arrow_pre_img').style.borderColor='gray';
+        document.getElementById('arrow_next_img').style.borderColor='gray';
+    }
+    
     if(obj.src != "")
     {
         document.getElementById('dataset_browse_img').src = obj.src;
@@ -1008,6 +1137,8 @@ function zoom_image(obj)
 //关闭放大预览图片窗口
 function hide_zoom_img(obj)
 {
+    g_curr_img_file_idx = 0;
+    
     var on_win_browse_img = document.getElementById('win_browse_img');
     var over_win_browse_img = document.getElementById('win_browse_img_over');
     
@@ -1226,7 +1357,6 @@ function update_task_detail_info_ui(str_view_task_id, b_get_task_parms = false)
         //启动定时器，用于定时刷新任务状态
         if(b_get_task_parms)
         {
-            
             g_instance_refresh_clock = self.setInterval("refresh_task_detail_info_win()",1000);
         }
     }
@@ -1374,7 +1504,14 @@ function task_next_step_process(obj)
         
         start_task(str_start_tid);
         
-        load_tasks();
+        if (document.getElementById('btn_refresh').value == "刷新项目任务信息")
+        {
+            load_project_tasks(g_view_project_task_id);
+        }
+        else
+        {
+            load_tasks();
+        }
         //隐藏原来窗口
         hide_task_detail_info_win_modal();  
     }
@@ -1628,19 +1765,29 @@ function contact_us()
 function refresh_contents(obj)
 {
      if(obj.value == "刷新项目信息")
+     {
          load_projects(obj);
+     }
      else if (obj.value == "刷新数据集信息")
+     {
          load_datasets(obj);
+     }
      else if (obj.value == "刷新所有任务信息")
+     {
          load_tasks(obj);
+     }
      else if (obj.value == "刷新项目任务信息")
      {
          load_project_tasks(g_view_project_task_id);
      }
      else if (obj.value == "刷新模型信息")
+     {
          load_models(obj);
+     }
      else
+     {
          load_projects(obj);
+     }
 }
 
 //项目对象右键弹出菜单
@@ -1732,7 +1879,6 @@ document.onclick = function()
     obj_model_id.value = "";
 }
 
-//PaddleX RestfulAPI Demo Code
 //设置远端服务器地址
 function set_server_addr(input_data)
 {
@@ -1925,7 +2071,7 @@ function load_datasets()
             fill_table_with_error();
         }
     }
-    http_request.open("GET",str_srv_url + "/dataset",false);
+    http_request.open("GET",str_srv_url + "/dataset",true);
     http_request.send(null);
 }
 
@@ -1956,7 +2102,7 @@ function load_tasks()
             fill_table_with_error();
         }
     }
-    http_request.open("GET",str_srv_url + "/project/task",false);
+    http_request.open("GET",str_srv_url + "/project/task",true);
     http_request.send(null);
 }
 
@@ -2137,7 +2283,7 @@ function load_models()
             fill_table_with_error();
         }
     }
-    http_request.open("GET",str_srv_url + "/model?type=exported",false);
+    http_request.open("GET",str_srv_url + "/model?type=exported",true);
     http_request.send(null);
 }
 
@@ -2369,7 +2515,7 @@ function fill_table_contents(list_contents, type = "project")
         count_tasks = Object.keys(obj_tasks).length;
         col_count = 1;
 
-        //数据集为空
+        //任务为空
         if(count_tasks <= 0)
         {
             var newTd0=newTr.insertCell();
@@ -2401,6 +2547,7 @@ function fill_table_contents(list_contents, type = "project")
             str_path = obj_tasks[p].path;
             str_crttime = obj_tasks[p].create_time;
             str_status = obj_tasks[p].status;
+            str_type = obj_tasks[p].type;
 
             //增加状态显示以及对应的操作
             var view_status_str = "初始化";
@@ -2488,14 +2635,11 @@ function fill_table_contents(list_contents, type = "project")
 
             var newTd0=newTr.insertCell();
             var str_html = "";
-            var str_type = "classification";
   
             str_html = "<div id=\"draw-border\" style=\"word-wrap: break-word;\"><view_item id=\"" + str_id + "\" onclick=\"javascript:" + str_function + "(this);\" oncontextmenu=\"javascript:show_task_popupmenu(this);\">";
             
             str_html = str_html + "任务ID：" + str_id + "<br>";
             
-            str_type = get_project_type(str_pid);
-            
             if(str_type == "classification")
                 str_type_view = "<font color=\"green\">图像分类</font>";
             else if(str_type == "detection")
@@ -2546,7 +2690,7 @@ function fill_table_contents(list_contents, type = "project")
         count_models = Object.keys(obj_models).length;
         col_count = 1;
 
-        //数据集为空
+        //模型为空
         if(count_models <= 0)
         {
             var newTd0=newTr.insertCell();
@@ -2635,17 +2779,6 @@ function fill_table_with_error()
     newTd0.innerHTML = str_html;
 }
 
-//获取项目任务类型
-function get_project_type(str_pid)
-{
-    var http_request = new XMLHttpRequest();
-    http_request.open("GET", str_srv_url + "/project?id=" + str_pid, false);
-    http_request.send(null);
-    
-    var obj_json = eval('(' + http_request.responseText + ')');
-    return obj_json["attr"]["type"];
-}
-
 //显示创建任务弹出窗口
 function show_create_task_win_modal(obj)
 {
@@ -3447,7 +3580,14 @@ function create_task()
         
         start_task(str_start_tid);
         
-        load_tasks();
+        if (document.getElementById('btn_refresh').value == "刷新项目任务信息")
+        {
+            load_project_tasks(g_view_project_task_id);
+        }
+        else
+        {
+            load_tasks();
+        }
         
         hide_create_task_win_modal(null);
     }
@@ -3469,7 +3609,14 @@ function create_task()
 
                      start_task(str_new_tid);
                  
-                     load_tasks();
+                     if (document.getElementById('btn_refresh').value == "刷新项目任务信息")
+                     {
+                         load_project_tasks(g_view_project_task_id);
+                     }
+                     else
+                     {
+                         load_tasks();
+                     }
                      
                      hide_create_task_win_modal(null);
                 }
@@ -3614,6 +3761,7 @@ function set_data_augument_parms(str_task_id)
     }
 }
 
+//加载任务数据增强配置参数信息
 function load_data_augument_parms()
 {
     document.getElementById('brightness_prob').value = g_train_task_parms["brightness_prob"];
@@ -3748,7 +3896,15 @@ function stop_task()
             {
                  alert("任务：" + str_stop_task_id + "中止成功!\n" +  http_request.responseText);
                  hide_task_detail_info_win_modal();
-                 load_tasks();
+                 
+                 if (document.getElementById('btn_refresh').value == "刷新项目任务信息")
+                 {
+                     load_project_tasks(g_view_project_task_id);
+                 }
+                 else
+                 {
+                     load_tasks();
+                 }
             }
             else
             {
@@ -3784,7 +3940,14 @@ function delete_task()
             if (http_request.status==200)
             {
                  alert("删除任务：" + str_del_task_id + "删除成功!\n" +  http_request.responseText);
-                 load_tasks();
+                 if (document.getElementById('btn_refresh').value == "刷新项目任务信息")
+                 {
+                     load_project_tasks(g_view_project_task_id);
+                 }
+                 else
+                 {
+                     load_tasks();
+                 }
             }
             else
             {
@@ -3902,6 +4065,7 @@ function hide_model_test_predict_win_modal(obj)
     over_win_model_predict_test.style.display = "none";
 }
 
+//加载预测原图像并预览
 function load_predict_file_and_preview(file)
 {
     if (!file.files || !file.files[0])
@@ -3974,9 +4138,10 @@ function model_predict_test(obj)
     setTimeout(function(){show_predict_result(str_result_path, str_predict_task_id);}, 1000);
 }
 
-//显示预测结果
+//显示预测结果等待次数
 var g_predict_wait_times = 0;
 
+//显示预测结果
 function show_predict_result(str_path, str_task_id)
 {
     //获取预测结果
@@ -4097,6 +4262,24 @@ function change_create_project_type(obj)
     }  
 }
 
+//数据集图片预览时前一张及后一张图像
+function img_arrow_click(obj)
+{
+    if(obj.style.borderColor == "gray")
+    {
+        return;
+    }
+
+    if(obj.id == "arrow_pre_img")
+    {
+        get_one_img_file("pre");
+    }
+    else
+    {
+        get_one_img_file("next");
+    }
+}
+
 //ESC to close browse img window
 function dispatch_key_press()
 {
@@ -4673,12 +4856,14 @@ function dispatch_key_press()
 <!--数据集预览窗口-->
 
 <!--浏览原图弹出窗口-->
-<div id="win_browse_img" onclick="hide_zoom_img(this)" style="display:none;border:1px solid #cccccc;height:610px;width:60%;position:fixed;top:15%;left:20%;z-index:15;background:white;">
+<div id="win_browse_img" style="display:none;border:1px solid #cccccc;height:610px;width:60%;position:fixed;top:15%;left:20%;z-index:15;background:white;">
   <table width="100%" align="center" id="table_img">
     <tr>
-      <td>
+    	<td width="15%" align="center"><arrow class="left" id="arrow_pre_img" onclick="img_arrow_click(this)"></arrow></td>
+      <td width="70%">
         <img id="dataset_browse_img" onclick="hide_zoom_img(this)" src="" align="center" style="border:1px #D6D6D6 solid;" height="600" width="600" hspace="0" vspace="0"/>
       </td>
+      <td width="15%" align="center"><arrow class="right" id="arrow_next_img" onclick="img_arrow_click(this)"></arrow></td>
     </tr>
   </table>
 </div>