From 671b55c68965c31141e5640fb2a18955d30aa842 Mon Sep 17 00:00:00 2001
From: zhoupzh <zhoupzh@pcl.ac.cn>
Date: Wed, 21 Dec 2022 17:55:02 +0800
Subject: [PATCH] fix issue

---
 templates/repo/modelsafety/new.tmpl    |  35 +-----
 web_src/js/features/cloudbrainShow.js  | 196 ---------------------------------
 web_src/js/standalone/cloudbrainNew.js | 195 ++++++++++++++++++++++++++++++++
 3 files changed, 196 insertions(+), 230 deletions(-)

diff --git a/templates/repo/modelsafety/new.tmpl b/templates/repo/modelsafety/new.tmpl
index 4fee33745..e259054b5 100644
--- a/templates/repo/modelsafety/new.tmpl
+++ b/templates/repo/modelsafety/new.tmpl
@@ -141,40 +141,7 @@
                             onkeydown="this.value=this.value.substring(0, 255)"
                             onkeyup="this.value=this.value.substring(0, 255)">{{.description}}</textarea>
                     </div>
-                    <input type="hidden" id="ai_model_version" name="model_version" value="{{$.model_version}}">
-                    <div class="required inline min_title  fields" style="width: 93.5%;">
-                        <label class="label-fix-width label-required" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.infer_job.select_model"}}</label>
-                        <div class="six wide field">
-                            <div class="ui fluid selection dropdown" id="select_model">
-                                <input type="hidden" name="model_name" required value="{{.model_name}}">
-                                <div class="text"></div>
-                                <i class="dropdown icon"></i>
-                                <div class="menu" id="model_name">
-                                </div>
-                            </div>
-                        </div>                        
-                        <input type="hidden" name="pre_train_model_url" value="{{.train_url}}">
-                        <div class="three wide field">
-                            <div class="ui fluid selection dropdown" id="select_model_version">
-                                <input type="hidden" name="train_url" required value="{{.train_url}}">
-                                <div class="text"></div>
-                                <i class="dropdown icon"></i>
-                                <div class="menu" id="model_name_version"></div>
-                            </div>
-                        </div>
-                        <div class="five wide field">
-                            <div class="ui fluid selection dropdown" id="select_model_checkpoint">
-                                <input type="hidden" name="ckpt_name" required value="{{.ckpt_name}}">
-                                <div class="text"></div>
-                                <i class="dropdown icon"></i>
-                                <div class="menu" id="model_checkpoint">
-                                </div>
-                            </div>
-                        </div>
-                        <span >
-                            <i class="question circle icon" data-content="{{.i18n.Tr "cloudbrain.model_file_postfix_rule"}}" data-position="top center" data-variation="inverted mini"></i>
-                        </span>
-                    </div>
+                    {{template "custom/select_model" .}}
                     <div class="required inline min_title field " style="display: none;">
                         <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.resource_pool"}}</label>
                         <select class="ui dropdown width48" id="trainjob_resource_pool" name="pool_id">
diff --git a/web_src/js/features/cloudbrainShow.js b/web_src/js/features/cloudbrainShow.js
index 6cb2390c4..2c1580f35 100644
--- a/web_src/js/features/cloudbrainShow.js
+++ b/web_src/js/features/cloudbrainShow.js
@@ -752,200 +752,4 @@ export default async function initCloudrainSow() {
     html += "</div>";
     $(`#dir_list${version_name}`).append(html);
   }
-
-  let nameMap, nameList;
-  let RepoLink = $(".cloudbrain-type").data("repo-link");
-  let type = $(".cloudbrain-type").data("cloudbrain-type");
-  let flagModel = $(".cloudbrain-type").data("flag-model");
-  // 获取模型列表和模型名称对应的模型版本
-  $(document).ready(function () {
-    if (!flagModel) return;
-    else {
-      $.get(
-        `${RepoLink}/modelmanage/query_model_for_predict?type=${type}`,
-        (data) => {
-          nameMap = data.nameMap;
-          nameList = data.nameList;
-          let html = `<div class="item"></div>`;
-          nameList.forEach((element) => {
-            html += `<div class="item" data-value=${element}>${element}</div>`;
-          });
-          if (nameList.length !== 0) {
-            $("#model_name").append(html);
-          }
-          let faildModelName = $('input[name="model_name"]').val();
-          let faildModelVersion = $('input[name="model_version"]').val();
-          let dataID;
-
-          // 新建错误的表单返回初始化
-          if (faildModelName && nameList.includes(faildModelName)) {
-            $("#select_model").dropdown("set text", faildModelName);
-            $("#select_model").dropdown("set value", faildModelName);
-            nameMap[faildModelName].forEach((element) => {
-              if (element.Version === faildModelVersion) {
-                dataID = element.ID;
-              }
-            });
-            initModelVerison(faildModelName, nameMap, faildModelVersion);
-            initModelckpt(dataID);
-          }
-        }
-      );
-    }
-
-    $("#select_model").dropdown({
-      onChange: function (value, text, $selectedItem) {
-        $("#model_name_version").empty();
-        if (value) {
-          let html = "";
-          nameMap[value].forEach((element) => {
-            //let { trainTaskInfo } = element;
-            //trainTaskInfo = JSON.parse(trainTaskInfo);
-            html += `<div class="item" data-label="${element.label}" data-id="${element.id}" data-value="${element.path}">${element.version}</div>`;
-          });
-          $("#model_name_version").append(html);
-          const initVersionText = $(
-            "#model_name_version div.item:first-child"
-          ).text();
-          const initVersionValue = $(
-            "#model_name_version div.item:first-child"
-          ).data("value");
-
-          $("#select_model_version").dropdown("set text", initVersionText);
-          $("#select_model_version").dropdown(
-            "set value",
-            initVersionValue,
-            initVersionText,
-            $("#model_name_version div.item:first-child")
-          );
-        } else {
-          $("#select_model_version").dropdown("set text", "");
-          $("#select_model_version").dropdown("set value", "");
-          $("#select_model_checkpoint").dropdown("set text", "");
-          $("#select_model_checkpoint").dropdown("set value", "");
-          $("#model_checkpoint").empty();
-        }
-      },
-    });
-
-    $("#select_model_version").dropdown({
-      onChange: function (value, text, $selectedItem) {
-        if (!value) return;
-        const dataID =
-          $selectedItem && $selectedItem[0].getAttribute("data-id");
-        $("input#ai_model_version").val(text);
-        $("#select_model_checkpoint").dropdown("set text", "");
-        $("#select_model_checkpoint").addClass("loading");
-
-        $("#model_checkpoint").empty();
-        let html = "";
-        loadCheckpointList(dataID).then((res) => {
-          res.forEach((element) => {
-            const ckptSuffix = element.FileName.split(".");
-            const loadCheckpointFile = [
-              "ckpt",
-              "pb",
-              "h5",
-              "json",
-              "pkl",
-              "pth",
-              "t7",
-              "pdparams",
-              "onnx",
-              "pbtxt",
-              "keras",
-              "mlmodel",
-              "cfg",
-              "pt",
-            ];
-            if (
-              !element.IsDir &&
-              loadCheckpointFile.includes(ckptSuffix[ckptSuffix.length - 1])
-            ) {
-              html += `<div class="item" data-value="${element.FileName}">${element.FileName}</div>`;
-            }
-          });
-          $("#model_checkpoint").append(html);
-          $("#select_model_checkpoint").removeClass("loading");
-          if (html) { 
-            $("#select_model_checkpoint").removeClass("error");
-          }
-          const initVersionText = $(
-            "#model_checkpoint div.item:first-child"
-          ).text();
-          const initVersionValue = $(
-            "#model_checkpoint div.item:first-child"
-          ).data("value");
-
-          $("#select_model_checkpoint").dropdown("set text", initVersionText);
-          $("#select_model_checkpoint").dropdown(
-            "set value",
-            initVersionValue,
-            initVersionText,
-            $("#model_name_version div.item:first-child")
-          );
-        });
-      },
-    });
-  });
-  function initModelVerison(value, nameMap, faildModelVersion) {
-    let faildTrainUrl = $('input[name="pre_train_model_url"]').val();
-    let html = "";
-    nameMap[value].forEach((element) => {
-      let { TrainTaskInfo } = element;
-      TrainTaskInfo = JSON.parse(TrainTaskInfo);
-      html += `<div class="item" data-label="${element.Label}" data-id="${element.ID}" data-value="${element.Path}">${element.Version}</div>`;
-    });
-    $("#model_name_version").append(html);
-    $("#select_model_version").dropdown("set text", faildModelVersion);
-    $("#select_model_version").dropdown("set value", faildTrainUrl);
-  }
-  function initModelckpt(dataID) {
-    let faildCkptName = $('input[name="ckpt_name"]').val();
-    $("#select_model_checkpoint").addClass("loading");
-    $("#model_checkpoint").empty();
-    let html = "";
-    loadCheckpointList(dataID).then((res) => {
-      res.forEach((element) => {
-        const ckptSuffix = element.FileName.split(".");
-        const loadCheckpointFile = [
-          "ckpt",
-          "pb",
-          "h5",
-          "json",
-          "pkl",
-          "pth",
-          "t7",
-          "pdparams",
-          "onnx",
-          "pbtxt",
-          "keras",
-          "mlmodel",
-          "cfg",
-          "pt",
-        ];
-        if (
-          !element.IsDir &&
-          loadCheckpointFile.includes(ckptSuffix[ckptSuffix.length - 1])
-        ) {
-          html += `<div class="item" data-value=${element.FileName}>${element.FileName}</div>`;
-        }
-      });
-      $("#model_checkpoint").append(html);
-      $("#select_model_checkpoint").removeClass("loading");
-      $("#select_model_checkpoint").dropdown("set text", faildCkptName);
-      $("#select_model_checkpoint").dropdown("set value", faildCkptName);
-    });
-  }
-  function loadCheckpointList(value) {
-    return new Promise((resolve, reject) => {
-      $.get(
-        `${RepoLink}/modelmanage/query_modelfile_for_predict`,
-        { id: value },
-        (data) => {
-          resolve(data);
-        }
-      );
-    });
-  }
 }
diff --git a/web_src/js/standalone/cloudbrainNew.js b/web_src/js/standalone/cloudbrainNew.js
index bc54adc65..771ed3493 100644
--- a/web_src/js/standalone/cloudbrainNew.js
+++ b/web_src/js/standalone/cloudbrainNew.js
@@ -182,4 +182,199 @@
     }
     validate();
   });
+
+
+  //管理镜像相关的东西
+  let nameMap, nameList;
+  let RepoLink = $(".cloudbrain-type").data("repo-link");
+  let type = $(".cloudbrain-type").data("cloudbrain-type");
+  let flagModel = $(".cloudbrain-type").data("flag-model");
+  // 获取模型列表和模型名称对应的模型版本
+  $(document).ready(function () {
+    if (!flagModel) return;
+    else {
+      $.get(
+        `${RepoLink}/modelmanage/query_model_for_predict?type=${type}`,
+        (data) => {
+          nameMap = data.nameMap;
+          nameList = data.nameList;
+          let html = `<div class="item"></div>`;
+          nameList.forEach((element) => {
+            html += `<div class="item" data-value=${element}>${element}</div>`;
+          });
+          if (nameList.length !== 0) {
+            $("#model_name").append(html);
+          }
+          let faildModelName = $('input[name="model_name"]').val();
+          let faildModelVersion = $('input[name="model_version"]').val();
+          let dataID;
+          // 新建错误的表单返回初始化
+          if (faildModelName && nameList.includes(faildModelName)) {
+            $("#select_model").dropdown("set text", faildModelName);
+            $("#select_model").dropdown("set value", faildModelName);
+            nameMap[faildModelName].forEach((element) => {
+              if (element.version === faildModelVersion) {
+                dataID = element.id;
+              }
+            });
+            initModelVerison(faildModelName, nameMap, faildModelVersion);
+            initModelckpt(dataID);
+          }
+        }
+      );
+    }
+
+    $("#select_model").dropdown({
+      onChange: function (value, text, $selectedItem) {
+        $("#model_name_version").empty();
+        if (value) {
+          let html = "";
+          nameMap[value].forEach((element) => {
+            //let { trainTaskInfo } = element;
+            //trainTaskInfo = JSON.parse(trainTaskInfo);
+            html += `<div class="item" data-label="${element.label}" data-id="${element.id}" data-value="${element.path}">${element.version}</div>`;
+          });
+          $("#model_name_version").append(html);
+          const initVersionText = $(
+            "#model_name_version div.item:first-child"
+          ).text();
+          const initVersionValue = $(
+            "#model_name_version div.item:first-child"
+          ).data("value");
+
+          $("#select_model_version").dropdown("set text", initVersionText);
+          $("#select_model_version").dropdown(
+            "set value",
+            initVersionValue,
+            initVersionText,
+            $("#model_name_version div.item:first-child")
+          );
+        } else {
+          $("#select_model_version").dropdown("set text", "");
+          $("#select_model_version").dropdown("set value", "");
+          $("#select_model_checkpoint").dropdown("set text", "");
+          $("#select_model_checkpoint").dropdown("set value", "");
+          $("#model_checkpoint").empty();
+        }
+      },
+    });
+
+    $("#select_model_version").dropdown({
+      onChange: function (value, text, $selectedItem) {
+        if (!value) return;
+        const dataID =
+          $selectedItem && $selectedItem[0].getAttribute("data-id");
+        $("input#ai_model_version").val(text);
+        $("#select_model_checkpoint").dropdown("set text", "");
+        $("#select_model_checkpoint").addClass("loading");
+
+        $("#model_checkpoint").empty();
+        let html = "";
+        loadCheckpointList(dataID).then((res) => {
+          res.forEach((element) => {
+            const ckptSuffix = element.FileName.split(".");
+            const loadCheckpointFile = [
+              "ckpt",
+              "pb",
+              "h5",
+              "json",
+              "pkl",
+              "pth",
+              "t7",
+              "pdparams",
+              "onnx",
+              "pbtxt",
+              "keras",
+              "mlmodel",
+              "cfg",
+              "pt",
+            ];
+            if (
+              !element.IsDir &&
+              loadCheckpointFile.includes(ckptSuffix[ckptSuffix.length - 1])
+            ) {
+              html += `<div class="item" data-value="${element.FileName}">${element.FileName}</div>`;
+            }
+          });
+          $("#model_checkpoint").append(html);
+          $("#select_model_checkpoint").removeClass("loading");
+          if (html) { 
+            $("#select_model_checkpoint").removeClass("error");
+          }
+          const initVersionText = $(
+            "#model_checkpoint div.item:first-child"
+          ).text();
+          const initVersionValue = $(
+            "#model_checkpoint div.item:first-child"
+          ).data("value");
+
+          $("#select_model_checkpoint").dropdown("set text", initVersionText);
+          $("#select_model_checkpoint").dropdown(
+            "set value",
+            initVersionValue,
+            initVersionText,
+            $("#model_name_version div.item:first-child")
+          );
+        });
+      },
+    });
+  });
+  function initModelVerison(value, nameMap, faildModelVersion) {
+    let faildTrainUrl = $('input[name="pre_train_model_url"]').val();
+    let html = "";
+    nameMap[value].forEach((element) => {
+      html += `<div class="item" data-label="${element.label}" data-id="${element.id}" data-value="${element.path}">${element.version}</div>`;
+    });
+    $("#model_name_version").append(html);
+    $("#select_model_version").dropdown("set text", faildModelVersion);
+    $("#select_model_version").dropdown("set value", faildTrainUrl);
+  }
+  function initModelckpt(dataID) {
+    let faildCkptName = $('input[name="ckpt_name"]').val();
+    $("#select_model_checkpoint").addClass("loading");
+    $("#model_checkpoint").empty();
+    let html = "";
+    loadCheckpointList(dataID).then((res) => {
+      res.forEach((element) => {
+        const ckptSuffix = element.FileName.split(".");
+        const loadCheckpointFile = [
+          "ckpt",
+          "pb",
+          "h5",
+          "json",
+          "pkl",
+          "pth",
+          "t7",
+          "pdparams",
+          "onnx",
+          "pbtxt",
+          "keras",
+          "mlmodel",
+          "cfg",
+          "pt",
+        ];
+        if (
+          !element.IsDir &&
+          loadCheckpointFile.includes(ckptSuffix[ckptSuffix.length - 1])
+        ) {
+          html += `<div class="item" data-value=${element.FileName}>${element.FileName}</div>`;
+        }
+      });
+      $("#model_checkpoint").append(html);
+      $("#select_model_checkpoint").removeClass("loading");
+      $("#select_model_checkpoint").dropdown("set text", faildCkptName);
+      $("#select_model_checkpoint").dropdown("set value", faildCkptName);
+    });
+  }
+  function loadCheckpointList(value) {
+    return new Promise((resolve, reject) => {
+      $.get(
+        `${RepoLink}/modelmanage/query_modelfile_for_predict`,
+        { id: value },
+        (data) => {
+          resolve(data);
+        }
+      );
+    });
+  }
 })();