| @@ -1,9 +1,9 @@ | |||
| <!-- 头部导航栏 --> | |||
| {{template "base/head" .}} | |||
| <style> | |||
| .text{ | |||
| color: rgba(0,0,0,.87)!important | |||
| } | |||
| .inline .ui.dropdown .text { | |||
| color: rgba(0, 0, 0, .87) !important | |||
| } | |||
| </style> | |||
| <!-- 弹窗 --> | |||
| <div id="mask"> | |||
| @@ -28,26 +28,29 @@ | |||
| <div class="column"></div> | |||
| <div class="column right aligned"> | |||
| <!-- --> | |||
| <a class="ui button {{if .Permission.CanWrite $.UnitTypeModelManage}} green {{else}} disabled {{end}}" onclick="showcreate(this)">{{$.i18n.Tr "repo.model.manage.import_new_model"}}</a> | |||
| <a class="ui button {{if .Permission.CanWrite $.UnitTypeModelManage}} green {{else}} disabled {{end}}" | |||
| onclick="showcreate(this)">{{$.i18n.Tr "repo.model.manage.import_new_model"}}</a> | |||
| </div> | |||
| </div> | |||
| {{if eq $.MODEL_COUNT 0}} | |||
| <div class="ui placeholder segment bgtask-none"> | |||
| <div class="ui icon header bgtask-header-pic"></div> | |||
| <div class="bgtask-content-header">未创建过模型</div> | |||
| <div class="bgtask-content"> | |||
| {{if $.RepoIsEmpty}} | |||
| <div class="bgtask-content-txt">代码版本:您还没有初始化代码仓库,请先<a href="{{.RepoLink}}">创建代码版本;</a></div> | |||
| {{end}} | |||
| {{if eq $.TRAIN_COUNT 0}} | |||
| <div class="bgtask-content-txt">训练任务:您还没创建过训练任务,请先创建<a href="{{.RepoLink}}/modelarts/train-job">训练任务</a>。</div> | |||
| {{end}} | |||
| <div class="bgtask-content-txt">使用说明:可以参考启智AI协作平台<a href="https://git.openi.org.cn/zeizei/OpenI_Learning">小白训练营课程。</a></div> | |||
| <div class="ui icon header bgtask-header-pic"></div> | |||
| <div class="bgtask-content-header">未创建过模型</div> | |||
| <div class="bgtask-content"> | |||
| {{if $.RepoIsEmpty}} | |||
| <div class="bgtask-content-txt">代码版本:您还没有初始化代码仓库,请先<a href="{{.RepoLink}}">创建代码版本;</a></div> | |||
| {{end}} | |||
| {{if eq $.TRAIN_COUNT 0}} | |||
| <div class="bgtask-content-txt">训练任务:您还没创建过训练任务,请先创建<a | |||
| href="{{.RepoLink}}/modelarts/train-job">训练任务</a>。</div> | |||
| {{end}} | |||
| <div class="bgtask-content-txt">使用说明:可以参考启智AI协作平台<a | |||
| href="https://git.openi.org.cn/zeizei/OpenI_Learning">小白训练营课程。</a></div> | |||
| </div> | |||
| <div style="display: none;"> | |||
| <div id="model_list"></div> | |||
| </div> | |||
| </div> | |||
| <div style="display: none;"> | |||
| <div id="model_list"></div> | |||
| </div> | |||
| </div> | |||
| {{else}} | |||
| <!-- 中下列表展示区 --> | |||
| @@ -129,212 +132,218 @@ | |||
| </div> | |||
| <div class="required inline field" id="modelname"> | |||
| <label>模型名称</label> | |||
| <input style="width: 45%;" id="name" name="Name" required maxlength="25" onkeyup="this.value=this.value.replace(/[, ]/g,'')"> | |||
| <input style="width: 45%;" id="name" name="Name" required maxlength="25" | |||
| onkeyup="this.value=this.value.replace(/[, ]/g,'')"> | |||
| </div> | |||
| <div class="required inline field" id="verionname"> | |||
| <label>模型版本</label> | |||
| <input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255"> | |||
| </div> | |||
| <div class="unite min_title inline field required"> | |||
| <label>模型框架</label> | |||
| <div class="ui dropdown selection search width70" id="choice_Engine"> | |||
| <input type="hidden" id="Engine" name="Engine" required> | |||
| <div class="default text">选择模型框架</div> | |||
| <i class="dropdown icon"></i> | |||
| <div class="menu" id="job-Engine"> | |||
| </div> | |||
| <input type="hidden" id="Engine" name="Engine" required> | |||
| <div class="default text">选择模型框架</div> | |||
| <i class="dropdown icon"></i> | |||
| <div class="menu" id="job-Engine"> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="inline field"> | |||
| <label>模型标签</label> | |||
| <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'> | |||
| <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255" | |||
| placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'> | |||
| </div> | |||
| <div class="inline field"> | |||
| <label for="description">模型描述</label> | |||
| <textarea style="width: 83%;margin-left: 7px;" id="Description" name="Description" rows="3" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}' onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 256)"></textarea> | |||
| <textarea style="width: 83%;margin-left: 7px;" id="Description" name="Description" rows="3" | |||
| maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}' | |||
| onchange="this.value=this.value.substring(0, 255)" | |||
| onkeydown="this.value=this.value.substring(0, 255)" | |||
| onkeyup="this.value=this.value.substring(0, 256)"></textarea> | |||
| </div> | |||
| <div class="inline field" style="margin-left: 75px;"> | |||
| <button id="submitId" type="button" class="ui create_train_job green button" style="position: absolute;"> | |||
| {{.i18n.Tr "repo.model.manage.sava_model"}} | |||
| <button id="submitId" type="button" class="ui create_train_job green button" | |||
| style="position: absolute;"> | |||
| {{.i18n.Tr "repo.model.manage.sava_model"}} | |||
| </button> | |||
| </div> | |||
| </form> | |||
| <div class="actions" style="display: inline-block;margin-left: 180px;"> | |||
| <button class="ui button cancel" >{{.i18n.Tr "repo.cloudbrain.cancel"}}</button> | |||
| <button class="ui button cancel">{{.i18n.Tr "repo.cloudbrain.cancel"}}</button> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| {{template "base/footer" .}} | |||
| {{template "base/footer" .}} | |||
| <script> | |||
| let repolink = {{.RepoLink}} | |||
| let repoId = {{$repository}} | |||
| const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config; | |||
| $('input[name="_csrf"]').val(csrf) | |||
| let modelData; | |||
| function createModelName(){ | |||
| let repoName = location.pathname.split('/')[2] | |||
| let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4) | |||
| $('#name').val(modelName) | |||
| $('#version').val("0.0.1") | |||
| } | |||
| function showcreate(obj){ | |||
| $('.ui.modal.second') | |||
| .modal({ | |||
| centered: false, | |||
| onShow:function(){ | |||
| $('#model_header').text("导入新模型") | |||
| $('input[name="Version"]').addClass('model_disabled') | |||
| $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"}) | |||
| $("#job-name").empty() | |||
| createModelName() | |||
| loadTrainList() | |||
| <script> | |||
| let repolink = {{.RepoLink }} | |||
| let repoId = {{ $repository }} | |||
| const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config; | |||
| $('input[name="_csrf"]').val(csrf) | |||
| let modelData; | |||
| function createModelName() { | |||
| let repoName = location.pathname.split('/')[2] | |||
| let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4) | |||
| $('#name').val(modelName) | |||
| $('#version').val("0.0.1") | |||
| } | |||
| function showcreate(obj) { | |||
| $('.ui.modal.second') | |||
| .modal({ | |||
| centered: false, | |||
| onShow: function () { | |||
| $('#model_header').text("导入新模型") | |||
| $('input[name="Version"]').addClass('model_disabled') | |||
| $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" }) | |||
| $("#job-name").empty() | |||
| createModelName() | |||
| loadTrainList() | |||
| }, | |||
| onHide:function(){ | |||
| document.getElementById("formId").reset(); | |||
| $('#choice_model').dropdown('clear') | |||
| $('#choice_version').dropdown('clear') | |||
| $('#choice_Engine').dropdown('clear') | |||
| $('.ui.dimmer').css({"background-color":""}) | |||
| $('.ui.error.message').text() | |||
| $('.ui.error.message').css('display','none') | |||
| }, | |||
| onHide: function () { | |||
| document.getElementById("formId").reset(); | |||
| $('#choice_model').dropdown('clear') | |||
| $('#choice_version').dropdown('clear') | |||
| $('#choice_Engine').dropdown('clear') | |||
| $('.ui.dimmer').css({ "background-color": "" }) | |||
| $('.ui.error.message').text() | |||
| $('.ui.error.message').css('display', 'none') | |||
| } | |||
| }) | |||
| .modal('show') | |||
| } | |||
| } | |||
| }) | |||
| .modal('show') | |||
| } | |||
| $(function(){ | |||
| $('#choice_model').dropdown({ | |||
| onChange:function(value){ | |||
| $(".ui.dropdown.selection.search.width70").addClass("loading") | |||
| $('#choice_version').dropdown('clear') | |||
| $("#job-version").empty() | |||
| loadTrainVersion(value) | |||
| } | |||
| }) | |||
| $(function () { | |||
| $('#choice_model').dropdown({ | |||
| onChange: function (value) { | |||
| $(".ui.dropdown.selection.search.width70").addClass("loading") | |||
| $('#choice_version').dropdown('clear') | |||
| $("#job-version").empty() | |||
| loadTrainVersion(value) | |||
| } | |||
| }) | |||
| $('#choice_version').dropdown({ | |||
| onChange:function(value){ | |||
| console.log("model version:" + value); | |||
| if(modelData != null){ | |||
| for(var i=0; i < modelData.length;i++){ | |||
| if(modelData[i].VersionName == value){ | |||
| setEngine(modelData[i]) | |||
| break; | |||
| $('#choice_version').dropdown({ | |||
| onChange: function (value) { | |||
| console.log("model version:" + value); | |||
| if (modelData != null) { | |||
| for (var i = 0; i < modelData.length; i++) { | |||
| if (modelData[i].VersionName == value) { | |||
| setEngine(modelData[i]) | |||
| break; | |||
| } | |||
| } | |||
| } | |||
| } | |||
| } | |||
| }) | |||
| }) | |||
| }) | |||
| function versionAdd(version){ | |||
| let versionArray = version.split('.') | |||
| if(versionArray[2]=='9'){ | |||
| if(versionArray[1]=='9'){ | |||
| versionArray[0] = String(Number(versionArray[1])+1) | |||
| versionArray[1] = '0' | |||
| }else{ | |||
| versionArray[1]=String(Number(versionArray[1])+1) | |||
| function versionAdd(version) { | |||
| let versionArray = version.split('.') | |||
| if (versionArray[2] == '9') { | |||
| if (versionArray[1] == '9') { | |||
| versionArray[0] = String(Number(versionArray[1]) + 1) | |||
| versionArray[1] = '0' | |||
| } else { | |||
| versionArray[1] = String(Number(versionArray[1]) + 1) | |||
| } | |||
| versionArray[2] = '0' | |||
| } else { | |||
| versionArray[2] = String(Number(versionArray[2]) + 1) | |||
| } | |||
| versionArray[2]='0' | |||
| }else{ | |||
| versionArray[2]=String(Number(versionArray[2])+1) | |||
| return versionArray.join('.') | |||
| } | |||
| return versionArray.join('.') | |||
| } | |||
| function loadTrainList(){ | |||
| $.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => { | |||
| function loadTrainList() { | |||
| $.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => { | |||
| const n_length = data.length | |||
| let train_html='' | |||
| for (let i=0;i<n_length;i++){ | |||
| train_html += `<div class="item" data-value="${data[i].JobID}">${data[i].DisplayJobName}</div>` | |||
| train_html += '</div>' | |||
| } | |||
| $("#job-name").append(train_html) | |||
| $(".ui.dropdown.selection.search.width83").removeClass("loading") | |||
| $('#choice_model .default.text').text(data[0].DisplayJobName) | |||
| $('#choice_model input[name="JobId"]').val(data[0].JobID) | |||
| loadTrainVersion() | |||
| const n_length = data.length | |||
| let train_html = '' | |||
| for (let i = 0; i < n_length; i++) { | |||
| train_html += `<div class="item" data-value="${data[i].JobID}">${data[i].DisplayJobName}</div>` | |||
| train_html += '</div>' | |||
| } | |||
| $("#job-name").append(train_html) | |||
| $(".ui.dropdown.selection.search.width83").removeClass("loading") | |||
| $('#choice_model .default.text').text(data[0].DisplayJobName) | |||
| $('#choice_model input[name="JobId"]').val(data[0].JobID) | |||
| loadTrainVersion() | |||
| }) | |||
| } | |||
| function loadTrainVersion(value){ | |||
| let JobID = !value ?$('#choice_model input[name="JobId"]').val(): value | |||
| $.get(`${repolink}/modelmanage/query_train_job_version?JobID=${JobID}`, (data) => { | |||
| const n_length = data.length | |||
| let train_html=''; | |||
| modelData = data; | |||
| for (let i=0;i<n_length;i++){ | |||
| train_html += `<div class="item" data-value="${data[i].VersionName}">${data[i].VersionName}</div>` | |||
| train_html += '</div>' | |||
| } | |||
| if(data.length){ | |||
| $("#job-version").append(train_html) | |||
| $(".ui.dropdown.selection.search.width70").removeClass("loading") | |||
| var versionName = data[0].VersionName; | |||
| if(versionName==null || versionName==""){ | |||
| versionName="V0001"; | |||
| }) | |||
| } | |||
| function loadTrainVersion(value) { | |||
| let JobID = !value ? $('#choice_model input[name="JobId"]').val() : value | |||
| $.get(`${repolink}/modelmanage/query_train_job_version?JobID=${JobID}`, (data) => { | |||
| const n_length = data.length | |||
| let train_html = ''; | |||
| modelData = data; | |||
| for (let i = 0; i < n_length; i++) { | |||
| train_html += `<div class="item" data-value="${data[i].VersionName}">${data[i].VersionName}</div>` | |||
| train_html += '</div>' | |||
| } | |||
| if (data.length) { | |||
| $("#job-version").append(train_html) | |||
| $(".ui.dropdown.selection.search.width70").removeClass("loading") | |||
| var versionName = data[0].VersionName; | |||
| if (versionName == null || versionName == "") { | |||
| versionName = "V0001"; | |||
| } | |||
| $('#choice_version .default.text').text(versionName) | |||
| $('#choice_version input[name="VersionName"]').val(versionName) | |||
| console.log("1111111111"); | |||
| setEngine(data[0]) | |||
| } | |||
| $('#choice_version .default.text').text(versionName) | |||
| $('#choice_version input[name="VersionName"]').val(versionName) | |||
| console.log("1111111111"); | |||
| setEngine(data[0]) | |||
| } | |||
| }) | |||
| } | |||
| }) | |||
| } | |||
| function setEngine(modelVersion){ | |||
| console.log("modelVersion=" + modelVersion); | |||
| $('#choice_Engine').dropdown('clear') | |||
| $("#job-Engine").empty() | |||
| if(modelVersion.EngineName != null && modelVersion.EngineName != ""){ | |||
| srcEngine = modelVersion.EngineName.split('-')[0] | |||
| srcEngine = srcEngine.trim(); | |||
| let selectedText = "Pytorch"; | |||
| let selectedValue = 0; | |||
| let itemHtml = "<option class=\"item\" data-value=\"0\">Pytorch</option>"; | |||
| if(srcEngine =='TensorFlow'){ | |||
| selectedText ="TensorFlow"; | |||
| selectedValue = 1; | |||
| itemHtml += "<option class=\"active item\" data-value=\"1\">TensorFlow</option>"; | |||
| }else{ | |||
| itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>"; | |||
| } | |||
| if(srcEngine =='MindSpore'){ | |||
| selectedText ="MindSpore"; | |||
| selectedValue = 2; | |||
| itemHtml += "<option class=\"active item\" data-value=\"2\">MindSpore</option>"; | |||
| }else{ | |||
| itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>"; | |||
| function setEngine(modelVersion) { | |||
| console.log("modelVersion=" + modelVersion); | |||
| $('#choice_Engine').dropdown('clear') | |||
| $("#job-Engine").empty() | |||
| if (modelVersion.EngineName != null && modelVersion.EngineName != "") { | |||
| srcEngine = modelVersion.EngineName.split('-')[0] | |||
| srcEngine = srcEngine.trim(); | |||
| let selectedText = "Pytorch"; | |||
| let selectedValue = 0; | |||
| let itemHtml = "<option class=\"item\" data-value=\"0\">Pytorch</option>"; | |||
| if (srcEngine == 'TensorFlow') { | |||
| selectedText = "TensorFlow"; | |||
| selectedValue = 1; | |||
| itemHtml += "<option class=\"active item\" data-value=\"1\">TensorFlow</option>"; | |||
| } else { | |||
| itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>"; | |||
| } | |||
| if (srcEngine == 'MindSpore') { | |||
| selectedText = "MindSpore"; | |||
| selectedValue = 2; | |||
| itemHtml += "<option class=\"active item\" data-value=\"2\">MindSpore</option>"; | |||
| } else { | |||
| itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>"; | |||
| } | |||
| itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>" | |||
| $('#choice_Engine .default.text').text(selectedText) | |||
| $('#choice_Engine input[name="Engine"]').val(selectedValue) | |||
| $("#job-Engine").append(itemHtml); | |||
| $("#choice_Engine").addClass('disabled') | |||
| } else { | |||
| let itemHtml = "<option class=\"active item\" data-value=\"0\">Pytorch</option>"; | |||
| itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>" | |||
| itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>" | |||
| itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>" | |||
| $('#choice_Engine .default.text').text("Pytorch"); | |||
| $('#choice_Engine input[name="Engine"]').val(0) | |||
| $("#job-Engine").append(itemHtml); | |||
| $("#choice_Engine").removeClass('disabled'); | |||
| } | |||
| itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>" | |||
| $('#choice_Engine .default.text').text(selectedText) | |||
| $('#choice_Engine input[name="Engine"]').val(selectedValue) | |||
| $("#job-Engine").append(itemHtml); | |||
| $("#choice_Engine").addClass('disabled') | |||
| }else{ | |||
| let itemHtml = "<option class=\"active item\" data-value=\"0\">Pytorch</option>"; | |||
| itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>" | |||
| itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>" | |||
| itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>" | |||
| $('#choice_Engine .default.text').text("Pytorch"); | |||
| $('#choice_Engine input[name="Engine"]').val(0) | |||
| $("#job-Engine").append(itemHtml); | |||
| $("#choice_Engine").removeClass('disabled'); | |||
| } | |||
| } | |||
| </script> | |||
| </script> | |||