OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: 513c35cca8
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '513c35cca8'
${ noResults }
aiforge/templates/repo/modelmanage/index.tmpl

594 lines
26 kB
Raw Blame History 

  1. <!-- 头部导航栏 -->

  2. {{template "base/head" .}}

  3. <style>

  4.     .inline.fields .right.aligned label{ 

  5.         width: 100% !important;

  6.         text-align: right;

  7.     }

  8.     .inline .ui.dropdown .text {

  9.         color: rgba(0, 0, 0, .87) !important;

  10.         max-width: 360px;

  11.     }

  12.     .newtext{

  13.         left: 15px !important

  14.     }

  15.     .menuContent{

  16.         position: absolute;

  17.         background: #ffffff;

  18.         left: 0;

  19.         right: 26px;

  20.         top: 36px;

  21.         z-index:999;

  22.         border: 1px solid #96c8da;

  23.         border-top: 0;

  24.         border-bottom-right-radius: 4px;

  25.         border-bottom-left-radius: 4px;

  26.         box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);

  27.     }

  28.     .m-blue-btn {

  29.         background-color: rgb(22, 132, 252) !important;

  30.     }

  31.     .m-blue-btn:hover {

  32.         background-color: #66b1ff !important;

  33.         color: #fff;

  34.     }

  35. 

  36.     .m-blue-btn:focus {

  37.         background-color: #66b1ff !important;

  38.         color: #fff;

  39.     }

  40. 

  41.     .m-blue-btn:active {

  42.         background-color: #3a8ee6 !important;

  43.         color: #fff;

  44.     }

  45. </style>

  46. <link rel="stylesheet" href="/self/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">

  47. 

  48. 

  49. <!-- 弹窗 -->

  50. <div id="mask">

  51.     <div id="loadingPage">

  52.         <div class="rect1"></div>

  53.         <div class="rect2"></div>

  54.         <div class="rect3"></div>

  55.         <div class="rect4"></div>

  56.         <div class="rect5"></div>

  57.     </div>

  58. </div>

  59. {{$repository := .Repository.ID}}

  60. <!-- 提示框 -->

  61. <div class="alert"></div>

  62. 

  63. <div class="repository release dataset-list view">

  64.     {{template "repo/header" .}}

  65.     <!-- 列表容器 -->

  66.     <div class="ui container {{if  ne $.MODEL_COUNT 0}}active loader {{end}}" id="loadContainer" >

  67.         {{template "base/alert" .}}

  68.         <div class="ui two column stackable grid" style="display: none;">

  69.             <div class="column">

  70.                 <div class="ui blue small menu compact selectcloudbrain">

  71.                     <a class="active item" href="{{.RepoLink}}/modelmanage/show_model">{{$.i18n.Tr "repo.model.list"}}</a>

  72.                     <a class="item" href="{{.RepoLink}}/modelmanage/convert_model">{{$.i18n.Tr "repo.model.convert"}}</a>

  73.                 </div>

  74.             </div>

  75.             <div class="column right aligned">

  76.                 <!--  -->

  77.                 <a class="ui button {{if .Permission.CanWrite $.UnitTypeModelManage}} blue m-blue-btn {{else}} disabled {{end}}"

  78.                     href="{{.RepoLink}}/modelmanage/create_local_model_1">{{$.i18n.Tr "repo.model.manage.import_local_model"}}</a>

  79.                 <a class="ui button {{if .Permission.CanWrite $.UnitTypeModelManage}} green {{else}} disabled {{end}}"

  80.                     href="{{.RepoLink}}/modelmanage/create_online_model">{{$.i18n.Tr "repo.model.manage.import_online_model"}}</a>

  81.             </div>

  82.         </div>

  83.         {{if eq $.MODEL_COUNT 0}}

  84.         <div class="ui placeholder segment bgtask-none">

  85.             <div class="ui icon header bgtask-header-pic"></div>

  86.             <div class="bgtask-content-header">{{$.i18n.Tr "repo.model.manage.notcreatemodel"}}</div>

  87.             <div class="bgtask-content">

  88.                 <!--

  89.                 {{if $.RepoIsEmpty}}

  90.                 <div class="bgtask-content-txt">{{$.i18n.Tr "repo.model.manage.init1"}}<a href="{{.RepoLink}}">{{$.i18n.Tr "repo.model.manage.init2"}}</a></div>

  91.                 {{end}}

  92.                 {{if eq $.TRAIN_COUNT 0}}

  93.                 <div class="bgtask-content-txt">{{$.i18n.Tr "repo.model.manage.createtrainjob_tip"}}<a

  94.                         href="{{.RepoLink}}/modelarts/train-job">&nbsp;{{$.i18n.Tr "repo.model.manage.createtrainjob"}}</a></div>

  95.                 {{end}}

  96.                 -->

  97.                 <div class="bgtask-content-txt">{{$.i18n.Tr "repo.model.manage.createmodel_tip"}}<a href="{{.RepoLink}}/modelarts/train-job">&nbsp;{{$.i18n.Tr "repo.model.manage.createtrainjob"}}</a></div>

  98.                 <div class="bgtask-content-txt">{{$.i18n.Tr "repo.platform_instructions1"}}<a href="https://openi.pcl.ac.cn/zeizei/OpenI_Learning">&nbsp;{{$.i18n.Tr "repo.platform_instructions2"}}&nbsp;</a>{{$.i18n.Tr "repo.platform_instructions3"}}</div>

  99. 

  100.             </div>

  101.             <div style="display: none;">

  102.                 <div id="model_list"></div>

  103.             </div>

  104.         </div>

  105.         {{else}}

  106.         <!-- 中下列表展示区 -->

  107.         <div class="ui grid" style="display: none;">

  108.             <div class="row" style="padding-top: 0;">

  109.                 <div class="ui sixteen wide column">

  110.                     <!-- 任务展示 -->

  111.                     <div class="dataset list" id="model_list">

  112.                         <!-- 表头 -->

  113.                     </div>

  114.                 </div>

  115.             </div>

  116.         </div>

  117.         {{end}}

  118. 

  119.     </div>

  120. 

  121. </div>

  122. 

  123. <!-- div full height-->

  124. </div>

  125. 

  126. 

  127. 

  128. <!-- 确认模态框 -->

  129. <div id="deletemodel">

  130.     <div class="ui basic modal first">

  131.         <div class="ui icon header">

  132.             <i class="trash icon"></i> {{.i18n.Tr "repo.model.manage.delete"}}

  133.         </div>

  134. 

  135.         <div class="content">

  136.             <p>{{.i18n.Tr "repo.model.manage.delete_confirm"}}</p>

  137.         </div>

  138.         <div class="actions">

  139.             <div class="ui red basic inverted cancel button">

  140.                 <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}

  141.             </div>

  142.             <div class="ui green basic inverted ok button">

  143.                 <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}

  144.             </div>

  145.         </div>

  146.     </div>

  147. </div>

  148. 

  149. <div id="newmodel">

  150.     <div class="ui modal second">

  151.         <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">

  152.             <h4 id="model_header"></h4>

  153.         </div>

  154.         <div class="content content-padding">

  155.             <form id="formId" method="POST" class="ui form">

  156.                 <input type="hidden" name="initModel" value="{{$.MODEL_COUNT}}">

  157.                 <div class="ui error message">

  158.                     <!-- <p>asdasdasd</p> -->

  159.                 </div>

  160.                 <input type="hidden" name="_csrf" value="">

  161.                 <div class="inline fields">

  162.                     <div class="required two wide field right aligned">

  163.                         <label for="jobId">{{.i18n.Tr "repo.model.manage.select.trainjob"}}</label>

  164.                     </div>

  165.                     <div class="required thirteen wide inline field">

  166.                         <div class="ui dropdown selection search loading" id="choice_model">

  167.                             <input type="hidden" id="jobId" name="jobId" required>

  168.                             <div class="default text">{{.i18n.Tr "repo.model.manage.select.trainjob"}}</div>

  169.                             <i class="dropdown icon"></i>

  170.                             <div class="menu" id="job-name">

  171.                             </div>

  172.                         </div>

  173.                         <label for="versionName">{{.i18n.Tr "repo.model.manage.version"}}</label>

  174.                         <span>&nbsp;</span>

  175.                         <div class="ui dropdown selection search" id="choice_version">

  176.                             <input type="hidden" id="versionName" name="versionName" required>

  177.                             <div class="default text">{{.i18n.Tr "repo.model.manage.select.version"}}</div>

  178.                             <i class="dropdown icon"></i>

  179.                             <div class="menu" id="job-version">

  180. 

  181.                             </div>

  182.                         </div>

  183.                     </div>

  184.                 </div>

  185.                 <div class="required inline fields" id="modelname">

  186.                     <div class="two wide field right aligned">

  187.                         <label for="name">{{.i18n.Tr "repo.model.manage.model_name"}}</label>

  188.                     </div>

  189.                     <div class="eight wide field">

  190.                         <input id="name" name="name" required maxlength="25" onkeyup="this.value=this.value.replace(/[, ]/g,'')">

  191.                     </div>

  192.                 </div>

  193.                 <div class="required inline fields" id="verionName">

  194.                     <div class="two wide field right aligned">

  195.                         <label for="version">{{.i18n.Tr "repo.model.manage.version"}}</label>

  196.                     </div>

  197.                     <div class="eight wide field">

  198.                         <input id="version" name="version" value="" readonly required maxlength="255">

  199.                     </div>

  200.                 </div>

  201. 

  202.                 <div class="unite min_title inline fields required">

  203.                     <div class="two wide field right aligned">

  204.                         <label for="Engine">{{.i18n.Tr "repo.model.manage.engine"}}</label>

  205.                     </div>

  206.                     <div class="ui ten wide field dropdown selection search" id="choice_Engine">

  207.                         <input type="hidden" id="engine" name="engine" required>

  208.                         <div class="default text newtext">{{.i18n.Tr "repo.model.manage.select.engine"}}</div>

  209.                         <i class="dropdown icon"></i>

  210.                         <div class="menu" id="job-Engine">

  211. 

  212.                         </div>

  213.                     </div>

  214. 

  215.                 </div>

  216. 

  217.                 <div class="unite min_title inline fields required">

  218.                     <div class="two wide field right aligned">

  219.                         <label for="modelSelectedFile">{{.i18n.Tr "repo.model.manage.modelfile"}}</label>

  220.                     </div>                    

  221.                     <div class="thirteen wide field" style="position:relative">

  222.                         <input id="modelSelectedFile" type="text" readonly required onclick="showMenu();"  name="modelSelectedFile" >

  223.                         <div id="menuContent" class="menuContent" style="display:none;">

  224.                             <ul id="treeDemo" class="ztree"></ul>

  225.                         </div>

  226.                     </div>

  227.                 </div>

  228. 

  229.                 <div class="inline fields">

  230.                     <div class="two wide field right aligned">

  231.                         <label for="Label">{{.i18n.Tr "repo.model.manage.modellabel"}} &nbsp</label>

  232.                     </div>

  233.                     <div class="thirteen wide field">

  234.                         <input id="label" name="label" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>

  235.                     </div>    

  236.                 </div>

  237.                 <div class="inline fields">

  238.                     <div class="two wide field right aligned">                    

  239.                         <label for="description">{{.i18n.Tr "repo.model.manage.modeldesc"}} &nbsp</label>

  240.                     </div>

  241.                     <div class="thirteen wide field">

  242.                         <textarea id="description" name="description" rows="3"

  243.                             maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}'

  244.                             onchange="this.value=this.value.substring(0, 255)"

  245.                             onkeydown="this.value=this.value.substring(0, 255)"

  246.                             onkeyup="this.value=this.value.substring(0, 256)"></textarea>

  247.                     </div> 

  248.                 </div>

  249. 

  250.                 <div class="inline field" style="margin-left: 105px;">

  251.                     <button id="submitId" type="button" class="ui create_train_job green button"

  252.                         style="position: absolute;">

  253.                         {{.i18n.Tr "repo.model.manage.sava_model"}}

  254.                     </button>

  255.                 </div>

  256.             </form>

  257.             <div class="actions" style="display: inline-block;margin-left: 220px;">

  258.                 <button class="ui button cancel">{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>

  259.             </div>

  260.         </div>

  261. 

  262. 

  263.     </div>

  264. 

  265.     {{template "base/footer" .}}

  266. 

  267. <script type="text/javascript" src="/self/ztree/js/jquery.ztree.core.js"></script>

  268. <script type="text/javascript" src="/self/ztree/js/jquery.ztree.excheck.js"></script>

  269. 	<script type="text/javascript">

  270. 	

  271. 		var setting = {

  272. 			check: {

  273. 				enable: true,

  274. 				chkboxType: {"Y":"ps", "N":"ps"}

  275. 			},

  276. 			view: {

  277. 				dblClickExpand: false

  278. 			},

  279. 			callback: {

  280. 				beforeClick: beforeClick,

  281. 				onCheck: onCheck

  282. 			}

  283. 		};

  284. 

  285. 		function beforeClick(treeId, treeNode) {

  286. 			var zTree = $.fn.zTree.getZTreeObj("treeDemo");

  287. 			zTree.checkNode(treeNode, !treeNode.checked, null, true);

  288. 			return false;

  289. 		}

  290. 		

  291. 		function onCheck(e, treeId, treeNode) {

  292. 			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),

  293. 			nodes = zTree.getCheckedNodes(true),

  294. 			v = "";

  295. 			for (var i=0, l=nodes.length; i<l; i++) {

  296.                 if(nodes[i].isParent){

  297.                    continue;

  298.                 }

  299.                 var pathNodes = nodes[i].getPath();

  300.                 var path ="";

  301.                 for(var j=0;j<pathNodes.length;j++){

  302.                     if(j ==0){

  303.                         path +=  pathNodes[j].name;

  304.                     }else{

  305.                         path += "/" + pathNodes[j].name;

  306.                     }

  307.                 }

  308. 				v += path + ";";

  309. 			}

  310. 			if (v.length > 0 ) v = v.substring(0, v.length-1);

  311. 			var cityObj = $("#modelSelectedFile");

  312. 			cityObj.attr("value", v);

  313. 		}

  314.        

  315. 		function showMenu() {

  316. 			var cityObj = $("#modelSelectedFile");

  317. 			var cityOffset = $("#modelSelectedFile").offset();

  318. 			// $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

  319.             $("#menuContent").slideDown("fast");

  320. 

  321. 			$("body").bind("mousedown", onBodyDown);

  322. 		}

  323. 		function hideMenu() {

  324. 			$("#menuContent").fadeOut("fast");

  325. 			$("body").unbind("mousedown", onBodyDown);

  326. 		}

  327. 		function onBodyDown(event) {

  328. 			if (!(event.target.id == "menuBtn" || event.target.id == "modelSelectedFile" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {

  329. 				hideMenu();

  330. 			}

  331. 		}

  332. 

  333. 		$(document).ready(function(){

  334. 			//$.fn.zTree.init($("#treeDemo"), setting, zNodes);

  335. 		});

  336. 	

  337. 	

  338.         let repolink = {{.RepoLink }}

  339.         let repoId = {{ $repository }}

  340.         const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;

  341.         $('input[name="_csrf"]').val(csrf)

  342.         let modelData;

  343.         function createModelName() {

  344.             let repoName = location.pathname.split('/')[2]

  345.             let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)

  346.             $('#name').val(modelName)

  347.             $('#version').val("0.0.1")

  348.         }

  349.         let dirKey="isOnlyDir--:&";

  350.         function showcreate(obj) {

  351.             $('.ui.modal.second')

  352.                 .modal({

  353.                     centered: false,

  354.                     onShow: function () {

  355.                         $('#model_header').text({{.i18n.Tr "repo.model.manage.import_new_model"}})

  356.                         $('input[name="version"]').addClass('model_disabled')

  357.                         $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })

  358.                         $("#job-name").empty()

  359.                         createModelName()

  360.                         loadTrainList()

  361.                     },

  362.                     onHide: function () {

  363.                         var cityObj = $("#modelSelectedFile");

  364. 			            cityObj.attr("value", "");

  365.                         document.getElementById("formId").reset();

  366.                         $('#choice_model').dropdown('clear')

  367.                         $('#choice_version').dropdown('clear')

  368.                         $('#choice_Engine').dropdown('clear')

  369.                         $('.ui.dimmer').css({ "background-color": "" })

  370.                         $('.ui.error.message').text()

  371.                         $('.ui.error.message').css('display', 'none')

  372. 

  373.                     }

  374.                 })

  375.                 .modal('show')

  376.         }

  377. 

  378.         $(function () {

  379.             $('#choice_model').dropdown({

  380.                 onChange: function (value) {

  381.                     $("#choice_version").addClass("loading")

  382.                     $('#choice_version').dropdown('clear')

  383.                     $("#job-version").empty()

  384.                     loadTrainVersion(value)

  385.                 }

  386.             })

  387. 

  388.             $('#choice_version').dropdown({

  389.                 onChange: function (value) {

  390.                     console.log("model version:" + value);

  391.                     if (modelData != null) {

  392.                         for (var i = 0; i < modelData.length; i++) {

  393.                             if (modelData[i].versionName == value) {

  394.                                 setEngine(modelData[i])

  395.                                 loadModelFile(modelData[i])

  396.                                 break;

  397.                             }

  398.                         }

  399.                     }

  400.                 }

  401.             })

  402.         })

  403.         function versionAdd(version) {

  404.             let versionArray = version.split('.')

  405.             if (versionArray[2] == '9') {

  406.                 if (versionArray[1] == '9') {

  407.                     versionArray[0] = String(Number(versionArray[1]) + 1)

  408.                     versionArray[1] = '0'

  409.                 } else {

  410.                     versionArray[1] = String(Number(versionArray[1]) + 1)

  411.                 }

  412.                 versionArray[2] = '0'

  413.             } else {

  414.                 versionArray[2] = String(Number(versionArray[2]) + 1)

  415.             }

  416.             return versionArray.join('.')

  417.         }

  418.         function loadTrainList() {

  419.             $.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => {

  420. 

  421.                 const n_length = data.length

  422.                 if(n_length > 0){

  423.                     let train_html = ''

  424.                     for (let i = 0; i < n_length; i++) {

  425.                         train_html += `<div class="item" data-value="${data[i].JobID}">${data[i].DisplayJobName}</div>`

  426.                         train_html += '</div>'

  427.                     }

  428.                     $("#job-name").append(train_html)

  429.                     $("#choice_model").removeClass("loading")

  430.                     $('#choice_model .default.text').text(data[0].DisplayJobName)

  431.                     $('#choice_model input[name="jobId"]').val(data[0].JobID)

  432.                     loadTrainVersion()

  433.                 }else{

  434.                     $("#choice_model").removeClass("loading")

  435.                 }

  436.             })

  437.         }

  438.         function loadTrainVersion(value) {

  439.             let tmp = $('#choice_model input[name="jobId"]').val();

  440.             let jobId = !value ? $('#choice_model input[name="jobId"]').val() : value

  441.             $.get(`${repolink}/modelmanage/query_train_job_version?jobId=${jobId}`, (data) => {

  442.                 const n_length = data.length

  443.                 let train_html = '';

  444.                 modelData = data;

  445.                 for (let i = 0; i < n_length; i++) {

  446.                     var VersionName = data[i].VersionName || 'V0001';

  447.                     train_html += `<div class="item" data-value="${VersionName}">${VersionName}</div>`

  448.                     train_html += '</div>'

  449.                 }

  450.                 if (data.length) {

  451.                     $("#job-version").append(train_html)

  452.                     $("#choice_version").removeClass("loading")

  453.                     var versionName = data[0].VersionName;

  454.                     if (versionName == null || versionName == "") {

  455.                         versionName = "V0001";

  456.                     }

  457.                     $('#choice_version .default.text').text(versionName)

  458.                     $('#choice_version input[name="versionName"]').val(versionName)

  459.                     setEngine(data[0])

  460.                     loadModelFile(data[0])

  461.                 }

  462. 

  463.             })

  464.         }

  465.         function loadModelFile(trainJob){

  466.             console.log("trainJob=" + trainJob);

  467.             $('#choice_file').dropdown('clear')

  468.             $("#model-file").empty()

  469.             if(trainJob ==null || trainJob ==""){

  470.                 console.log("trainJob is null");

  471.             }else{

  472.                 let type = trainJob.Type;

  473.                 if(type == 2){

  474.                     if(trainJob.ComputeResource=="NPU"){

  475.                         type=1;

  476.                     }else{

  477.                         type=0;

  478.                     }

  479.                 }

  480.                 $.get(`${repolink}/modelmanage/query_train_model?jobName=${trainJob.JobName}&type=${type}&versionName=${trainJob.VersionName}`, (data) => {

  481.                     var cityObj = $("#modelSelectedFile");

  482. 			        cityObj.attr("value", "");

  483.                     const n_length = data.length

  484.                     let file_html=''

  485.                     let firstFileName =''

  486.                     var zNodes=[];

  487.                     var nodesMap={};

  488.                     for (let i=0;i<n_length;i++){

  489.                         var parentNodeMap = nodesMap;

  490.                         var fileSplits = data[i].FileName.split("/");

  491.                         for(let j=0;j < fileSplits.length;j++){

  492.                             if(fileSplits[j] == ""){

  493.                                 break;

  494.                             }

  495.                             if(parentNodeMap[fileSplits[j]] == null){

  496.                                 parentNodeMap[fileSplits[j]] = {};

  497.                             }

  498.                             parentNodeMap = parentNodeMap[fileSplits[j]];

  499.                         }

  500.                     }

  501.                     for (let i=0;i<n_length;i++){

  502.                         var parentNodeMap = nodesMap;

  503.                         var fileSplits = data[i].FileName.split("/");

  504.                         for(let j=0;j < fileSplits.length;j++){

  505.                             if(fileSplits[j] == ""){

  506.                                 if(data[i].FileName[data[i].FileName.length -1] =="/"){

  507.                                     if(Object.keys(parentNodeMap).length ==0){

  508.                                         parentNodeMap[dirKey]="true";

  509.                                     }

  510.                                 }

  511.                                 break;

  512.                             }

  513.                             parentNodeMap = parentNodeMap[fileSplits[j]];

  514.                         }

  515.                     }

  516.                     convertToNode(zNodes,nodesMap);

  517.                     $.fn.zTree.init($("#treeDemo"), setting, zNodes);

  518.                 })

  519.             }

  520.         }

  521.         function convertToNode(nodeList,nodesMap){

  522.             var keyList = Object.keys(nodesMap);

  523.             keyList.sort(function(a,b){

  524. 	            return a-b;

  525.             });

  526.             var isFirst = true;

  527.             for(var i=0; i<keyList.length;i++){

  528.                 var node = {};

  529.                 node["name"] = keyList[i];

  530.                 nodeList.push(node);

  531.                 if(nodesMap[keyList[i]] != null && Object.keys(nodesMap[keyList[i]]).length >0){

  532.                     if(nodesMap[keyList[i]][dirKey] != null){

  533.                         node["open"] = false;

  534.                         node["isParent"] = true;

  535.                     }else{

  536.                         node["children"]=[];

  537.                         if(isFirst){

  538.                             node["open"] = true;

  539.                             isFirst= false;

  540.                         }

  541.                         convertToNode(node["children"],nodesMap[keyList[i]]);

  542.                     }

  543.                     

  544.                 }

  545.             }

  546.         }

  547.         function setEngine(trainJob) {

  548.             console.log("trainJob=" + trainJob);

  549.             $('#choice_Engine').dropdown('clear')

  550.             $("#job-Engine").empty()

  551.             if (trainJob.EngineName != null && trainJob.EngineName != "") {

  552.                 srcEngine = trainJob.EngineName.split('-')[0]

  553.                 srcEngine = srcEngine.trim().toLowerCase();

  554.                 let selectedText = "PyTorch";

  555.                 let selectedValue = 0;

  556.                 let itemHtml = "<option class=\"item\" data-value=\"0\">PyTorch</option>";

  557.                 if (srcEngine == 'tensorflow') {

  558.                     selectedText = "TensorFlow";

  559.                     selectedValue = 1;

  560.                     itemHtml += "<option class=\"active item\" data-value=\"1\">TensorFlow</option>";

  561.                 } else {

  562.                     itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>";

  563.                 }

  564.                 if (srcEngine == 'mindspore') {

  565.                     selectedText = "MindSpore";

  566.                     selectedValue = 2;

  567.                     itemHtml += "<option class=\"active item\" data-value=\"2\">MindSpore</option>";

  568.                 } else {

  569.                     itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>";

  570.                 }

  571.                 itemHtml += "<option class=\"item\" data-value=\"4\">PaddlePaddle</option>"

  572.                 itemHtml += "<option class=\"item\" data-value=\"5\">OneFlow</option>"

  573.                 itemHtml += "<option class=\"item\" data-value=\"6\">MXNet</option>"

  574.                 itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>"

  575. 

  576.                 $('#choice_Engine .default.text').text(selectedText)

  577.                 $('#choice_Engine input[name="engine"]').val(selectedValue)

  578.                 $("#job-Engine").append(itemHtml);

  579.                 $("#choice_Engine").removeClass('disabled');

  580.             } else {

  581.                 let itemHtml = "<option class=\"active item\" data-value=\"0\">PyTorch</option>";

  582.                 itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>"

  583.                 itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>"

  584.                 itemHtml += "<option class=\"item\" data-value=\"4\">PaddlePaddle</option>"

  585.                 itemHtml += "<option class=\"item\" data-value=\"5\">OneFlow</option>"

  586.                 itemHtml += "<option class=\"item\" data-value=\"6\">MXNet</option>"

  587.                 itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>"

  588.                 $('#choice_Engine .default.text').text("PyTorch");

  589.                 $('#choice_Engine input[name="engine"]').val(0)

  590.                 $("#job-Engine").append(itemHtml);

  591.                 $("#choice_Engine").removeClass('disabled');

  592.             }

  593.         }

  594.     </script>