Browse Source

Merge branch 'liuzx_trainjob' of https://git.openi.org.cn/OpenI/aiforge into liuzx_trainjob

pull/1077/head
liuzx 3 years ago
parent
commit
75cef6f042
7 changed files with 203 additions and 128 deletions
  1. +1
    -1
      options/locale/locale_zh-CN.ini
  2. +5
    -1
      routers/repo/ai_model_manage.go
  3. +7
    -79
      templates/repo/modelmanage/index.tmpl
  4. +92
    -41
      templates/repo/modelmanage/showinfo.tmpl
  5. +77
    -4
      web_src/js/components/Model.vue
  6. +7
    -1
      web_src/js/index.js
  7. +14
    -1
      web_src/less/openi.less

+ 1
- 1
options/locale/locale_zh-CN.ini View File

@@ -839,7 +839,7 @@ modelarts.train_job.new_place=描述字数不超过256个字符
modelarts.model_name=模型名称 modelarts.model_name=模型名称
modelarts.model_size=模型大小 modelarts.model_size=模型大小
modelarts.import_model=导入模型 modelarts.import_model=导入模型
modelarts.train_job.new_place=描述字数不超过255个字符
modelarts.train_job.label_place=输入标签,多个标签用空格区分
modelarts.modify=修改 modelarts.modify=修改
modelarts.current_version=当前版本 modelarts.current_version=当前版本
modelarts.parent_version=父版本 modelarts.parent_version=父版本


+ 5
- 1
routers/repo/ai_model_manage.go View File

@@ -474,12 +474,16 @@ func ShowModelPageInfo(ctx *context.Context) {
if page <= 0 { if page <= 0 {
page = 1 page = 1
} }
pageSize := ctx.QueryInt("pageSize")
if pageSize <= 0 {
pageSize = setting.UI.IssuePagingNum
}
repoId := ctx.Repo.Repository.ID repoId := ctx.Repo.Repository.ID
Type := -1 Type := -1
modelResult, count, err := models.QueryModel(&models.AiModelQueryOptions{ modelResult, count, err := models.QueryModel(&models.AiModelQueryOptions{
ListOptions: models.ListOptions{ ListOptions: models.ListOptions{
Page: page, Page: page,
PageSize: setting.UI.IssuePagingNum,
PageSize: pageSize,
}, },
RepoID: repoId, RepoID: repoId,
Type: Type, Type: Type,


+ 7
- 79
templates/repo/modelmanage/index.tmpl View File

@@ -1,16 +1,5 @@
<!-- 头部导航栏 --> <!-- 头部导航栏 -->
{{template "base/head" .}} {{template "base/head" .}}
<style>
.width70{
width: 70% !important;
}
.width83{
width: 83% !important;
}
.content-padding{
padding: 40px !important;
}
</style>
<!-- 弹窗 --> <!-- 弹窗 -->
<div id="mask"> <div id="mask">
<div id="loadingPage"> <div id="loadingPage">
@@ -30,7 +19,7 @@
<!-- 列表容器 --> <!-- 列表容器 -->
<div class="ui container active loader" id="loadContainer"> <div class="ui container active loader" id="loadContainer">
{{template "base/alert" .}} {{template "base/alert" .}}
<div class="ui two column stackable grid ">
<div class="ui two column stackable grid" style="display: none;">
<div class="column"></div> <div class="column"></div>
<div class="column right aligned"> <div class="column right aligned">
<!-- --> <!-- -->
@@ -39,7 +28,7 @@
</div> </div>


<!-- 中下列表展示区 --> <!-- 中下列表展示区 -->
<div class="ui grid">
<div class="ui grid" style="display: none;">
<div class="row" style="padding-top: 0;"> <div class="row" style="padding-top: 0;">
<div class="ui sixteen wide column"> <div class="ui sixteen wide column">
<!-- 任务展示 --> <!-- 任务展示 -->
@@ -82,7 +71,7 @@
<div id="newmodel"> <div id="newmodel">
<div class="ui modal second"> <div class="ui modal second">
<div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);"> <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
<h4>导入新模型</h4>
<h4 id="model_header"></h4>
</div> </div>
<div class="content content-padding"> <div class="content content-padding">
<form id="formId" method="POST" class="ui form"> <form id="formId" method="POST" class="ui form">
@@ -125,11 +114,11 @@
</div> </div>
<div class="inline field"> <div class="inline field">
<label>模型标签</label> <label>模型标签</label>
<input style="width: 83%;margin-left: 7px;" name="Label" maxlength="255">
<input style="width: 83%;margin-left: 7px;" name="Label" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
</div> </div>
<div class="inline field"> <div class="inline field">
<label for="description">模型描述</label> <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>


<div class="inline field" style="margin-left: 75px;"> <div class="inline field" style="margin-left: 75px;">
@@ -167,6 +156,8 @@
.modal({ .modal({
centered: false, centered: false,
onShow:function(){ onShow:function(){
$('#model_header').text("导入新模型")
$('input[name="Version"]').addClass('model_disabled')
$('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"}) $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
$("#job-name").empty() $("#job-name").empty()
createModelName() createModelName()
@@ -232,68 +223,5 @@
$(".ui.dropdown.selection.search.width70").removeClass("loading") $(".ui.dropdown.selection.search.width70").removeClass("loading")
}) })
} }

function check(){
let jobid = document.getElementById("JobId").value
let versionname = document.getElementById("VersionName").value
let name= document.getElementById("name").value
let version= document.getElementById("version").value
if(jobid==""){
$(".required.ten.wide.field").addClass("error")
return false
}else{
$(".required.ten.wide.field").removeClass("error")
}
if(versionname==""){
$(".required.six.widde.field").addClass("error")
return false
}else{
$(".required.six.widde.field").removeClass("error")
}
if(name==""){
$("#modelname").addClass("error")
return false
}else{
$("#modelname").removeClass("error")
}
if(versionname==""){
$("#verionname").addClass("error")
return false
}else{
$("#verionname").removeClass("error")
}
return true
}
$('#submitId').click(function(){
let flag=check()
if(flag){
let data = $("#formId").serialize()
$("#mask").css({"display":"block","z-index":"9999"})
$.ajax({
url:url_href,
type:'POST',
data:data,
success:function(res){
$('.ui.modal.second').modal('hide')
window.location.href=location.href
},
error: function(xhr){
// 隐藏 loading
// 只有请求不正常(状态码不为200)才会执行
console.log("-------------",xhr)
$('.ui.error.message').text(xhr.responseText)
$('.ui.error.message').css('display','block')
},
complete:function(xhr){
$("#mask").css({"display":"none","z-index":"1"})
}
})
}else{
return false
}
})
</script> </script>



+ 92
- 41
templates/repo/modelmanage/showinfo.tmpl View File

@@ -78,6 +78,67 @@
</select> </select>
</h4> </h4>
<div id="showInfo" style="border:1px solid #e2e2e2;padding: 20px 60px;margin-top:24px"> <div id="showInfo" style="border:1px solid #e2e2e2;padding: 20px 60px;margin-top:24px">
<div class="half-table">
<span class="model_header_text">基本信息</span>
<table class="tableStyle" style="margin-top:20px;">
<tbody>
<tr>
<td class="ti-text-form-label text-width80">模型名称</td>
<td class="ti-text-form-content word-elipsis"><span id="ModelName" title=""></span></td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">版本</td>
<td class="ti-text-form-content word-elipsis"><span id="Version" title=""></span></td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">标签</td>
<td class="ti-text-form-content">
<div id="Label">
</div>

</td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">大小</td>
<td class="ti-text-form-content word-elipsis"><span id="Size" title=""></span></td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">创建时间</td>
<td class="ti-text-form-content word-elipsis"><span id="CreateTime" title=""></span></td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">模型描述</td>
<td class="ti-text-form-content" ><div id="edit-td" style="display:flex"><span id="Description" title="" class="iword-elipsis"></span><i id="edit-pencil" data-id="" data-desc="" class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(this)"></div></td>
</tr>
</tbody>
</table>
</div>
<div class="half-table">
<span class="model_header_text">模型精度</span>
<table class="tableStyle" style="margin-top:20px;">
<tbody>
<tr>
<td class="ti-text-form-label text-width80">准确率</td>
<td class="ti-text-form-content word-elipsis"><span id="Accuracy" title=""></span></td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">F1</td>
<td class="ti-text-form-content word-elipsis"><span id="F1" title=""></span></td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">精确率</td>
<td class="ti-text-form-content word-elipsis"><span id="Precision" title=""></span></td>
</tr>
<tr>
<td class="ti-text-form-label text-width80">召回率</td>
<td class="ti-text-form-content word-elipsis"><span id="Recall" title=""></span></td>
</tr>
</tbody>
</table>
</div>
<div style="clear: both;"></div>
</div> </div>
</div> </div>
</div> </div>
@@ -91,10 +152,9 @@ function changeInfo(version){
let versionData = data.filter((item)=>{ let versionData = data.filter((item)=>{
return item.Version === version return item.Version === version
}) })
let initObj = transObj(versionData)[0]
let initModelAcc = transObj(versionData)[1]
let id= transObj(data)[2]
$('#showInfo').empty()
let returnArray = []
returnArray = transObj(versionData)
let [initObj,initModelAcc,id] = returnArray
renderInfo(initObj,initModelAcc,id) renderInfo(initObj,initModelAcc,id)
}) })
} }
@@ -105,9 +165,9 @@ function loadInfo(){
html += `<option value="${data[i].Version}">${data[i].Version}</option>` html += `<option value="${data[i].Version}">${data[i].Version}</option>`
} }
$('#dropdown').append(html) $('#dropdown').append(html)
let initObj = transObj(data)[0]
let initModelAcc = transObj(data)[1]
let id= transObj(data)[2]
let returnArray = []
returnArray = transObj(data)
let [initObj,initModelAcc,id] = returnArray
renderInfo(initObj,initModelAcc,id) renderInfo(initObj,initModelAcc,id)
}) })
} }
@@ -155,12 +215,14 @@ function tranSize(value){
size=size.toFixed(2);//保留的小数位数 size=size.toFixed(2);//保留的小数位数
return size+unitArr[index]; return size+unitArr[index];
} }
function editorFn(text,id){
function editorFn(context){
let id= context.dataset.id
let text = context.dataset.desc
$('#edit-td').replaceWith("<div id='edit-div' style='width:80%;display: inline-block;'><textarea id='textarea-value' rows='3' maxlength='255' style='width:80%;' id='edit-text'></textarea><i class='check icon' style='color: #50d4ab;' onclick='editorSure(\"" + text + "\",\"" + id + "\")'></i><i class='times icon' style='color: #f66f6a;' onclick='editorCancel(\"" + text + "\",\"" + id + "\")'></i></div>"); $('#edit-td').replaceWith("<div id='edit-div' style='width:80%;display: inline-block;'><textarea id='textarea-value' rows='3' maxlength='255' style='width:80%;' id='edit-text'></textarea><i class='check icon' style='color: #50d4ab;' onclick='editorSure(\"" + text + "\",\"" + id + "\")'></i><i class='times icon' style='color: #f66f6a;' onclick='editorCancel(\"" + text + "\",\"" + id + "\")'></i></div>");
} }
function editorCancel(text,id){ function editorCancel(text,id){
$('#edit-div').replaceWith('<div id="edit-td" style="display:flex;"><span title="\'' + text + '\'" class="iword-elipsis">'+text+'</span><i class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(\'' + text + '\',\'' + id + '\')"></div>')
$('#edit-div').replaceWith(`<div id="edit-td" style="display:flex;"><span id="Description" title="${text}" class="iword-elipsis">${text}</span><i id="edit-pencil" data-id="${id}" data-desc="${text}" class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(this)"></div>`)
} }
function editorSure(text,id){ function editorSure(text,id){
let description=$('#textarea-value').val() let description=$('#textarea-value').val()
@@ -173,46 +235,35 @@ function editorSure(text,id){
type:'PUT', type:'PUT',
data:data data:data
}).done((res)=>{ }).done((res)=>{
$('#edit-div').replaceWith('<div id="edit-td" style="display:flex;"><span title="\'' + description + '\'" class="iword-elipsis">'+description+'</span><i class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(\'' + description + '\',\'' + id + '\')"></div>')
$('#edit-div').replaceWith(`<div id="edit-td" style="display:flex;"><span id="Description" title="${description}" class="iword-elipsis">${description}</span><i id="edit-pencil" data-id="${id}" data-desc="${description}" class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(this)"></div>`)
}) })

} }
function renderInfo(obj,accObj,id){ function renderInfo(obj,accObj,id){
let html = ''
html += '<div class="half-table">'
html += '<span class="model_header_text">基本信息</span>'
html += '<table class="tableStyle" style="margin-top:20px;">'
html += '<tbody>'
for(let key in obj){ for(let key in obj){
html += '<tr style="font-size: 12px;">'
html += `<td class="ti-text-form-label text-width80">${key}</td>`
if(key==="Description"){ if(key==="Description"){
let description = obj[key]
html += '<td class="ti-text-form-content" ><div id="edit-td" style="display:flex"><span title="\'' + description + '\'" class="iword-elipsis">'+description+'</span><i class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(\'' + description + '\',\'' + id + '\')"></div></td>'
}else{
html += `<td class="ti-text-form-content word-elipsis"><span title="${obj[key]}">${obj[key]}</span></td>`
$(`#${key}`).text(obj[key])
$(`#${key}`).attr("title",obj[key])
$('#edit-pencil').attr("data-id",id)
$('#edit-pencil').attr("data-desc",obj[key])
}
else if(key==="Label"){
let labelArray = obj[key].split(' ')
let html=''
for(let i=0;i<labelArray.length;i++){
html += `<a class="ui label">${labelArray[i]}</a>`
}
$('#Label').append(html)
} }
html += '</tr>'
else{
$(`#${key}`).text(obj[key])
$(`#${key}`).attr("title",obj[key])
}
} }

html += '</tbody>'
html += '</table>'
html += '</div>'
html += '<div class="half-table">'
html += '<span class="model_header_text">模型精度</span>'
html += '<table class="tableStyle" style="margin-top:20px;">'
html += '<tbody>'
for(let key in accObj){ for(let key in accObj){
html += '<tr style="font-size: 12px;">'
html += `<td class="ti-text-form-label text-width80">${key}</td>`
html += `<td class="ti-text-form-content word-elipsis">${accObj[key]}</td>`
html += '</tr>'
}
html += '</tbody>'
html += '</table>'
html += '</div>'
html += '<div style="clear: both;"></div>'
$('#showInfo').append(html)
$(`#${key}`).text(accObj[key])
$(`#${key}`).attr("title",accObj[key])
}
} }


</script> </script>

+ 77
- 4
web_src/js/components/Model.vue View File

@@ -119,7 +119,7 @@
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
:current-page="currentPage" :current-page="currentPage"
:page-sizes="[10]"
:page-sizes="[5,10,15]"
:page-size="pageSize" :page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper" layout="total, sizes, prev, pager, next, jumper"
:total="totalNum"> :total="totalNum">
@@ -149,7 +149,8 @@ export default {
fullscreenLoading: false, fullscreenLoading: false,
url:'', url:'',
isLoading:true, isLoading:true,
loadNodeMap:new Map()
loadNodeMap:new Map(),
submitId:{}
}; };
}, },
methods: { methods: {
@@ -179,7 +180,7 @@ export default {
} }
}, },
handleSizeChange(val){ handleSizeChange(val){
this.params.size = val
this.params.pageSize = val
this.getModelList() this.getModelList()
}, },
handleCurrentChange(val){ handleCurrentChange(val){
@@ -191,6 +192,9 @@ export default {
.modal({ .modal({
centered: false, centered: false,
onShow:function(){ onShow:function(){
$('#model_header').text("创建模型新版本")
$('input[name="Name"]').addClass('model_disabled')
$('input[name="Version"]').addClass('model_disabled')
$('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"}) $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
$("#job-name").empty() $("#job-name").empty()
$('#name').val(name) $('#name').val(name)
@@ -207,6 +211,67 @@ export default {
}) })
.modal('show') .modal('show')
}, },
check(){
let jobid = document.getElementById("JobId").value
let versionname = document.getElementById("VersionName").value
let name= document.getElementById("name").value
let version= document.getElementById("version").value
if(jobid==""){
$(".required.ten.wide.field").addClass("error")
return false
}else{
$(".required.ten.wide.field").removeClass("error")
}
if(versionname==""){
$(".required.six.widde.field").addClass("error")
return false
}else{
$(".required.six.widde.field").removeClass("error")
}
if(name==""){
$("#modelname").addClass("error")
return false
}else{
$("#modelname").removeClass("error")
}
if(versionname==""){
$("#verionname").addClass("error")
return false
}else{
$("#verionname").removeClass("error")
}
return true
},
submit(){
let context = this
let flag= this.check()
console.log(flag,context)
if(flag){
let data = $("#formId").serialize()
$("#mask").css({"display":"block","z-index":"9999"})
$.ajax({
url:url_href,
type:'POST',
data:data,
success:function(res){
context.getModelList()
$('.ui.modal.second').modal('hide')
},
error: function(xhr){
// 隐藏 loading
// 只有请求不正常(状态码不为200)才会执行
$('.ui.error.message').text(xhr.responseText)
$('.ui.error.message').css('display','block')
},
complete:function(xhr){
$("#mask").css({"display":"none","z-index":"1"})
}
})
}else{
return false
}
},
deleteModel(id,name){ deleteModel(id,name){
let tree={cName:name} let tree={cName:name}
@@ -230,6 +295,8 @@ export default {
onHidden: function() { onHidden: function() {
if (flag == false) { if (flag == false) {
$('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut(); $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
}else{
$('.alert').html('删除成功').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
} }
} }
}) })
@@ -261,6 +328,7 @@ export default {
this.$axios.get(location.href+'_api',{ this.$axios.get(location.href+'_api',{
params:this.params params:this.params
}).then((res)=>{ }).then((res)=>{
$(".ui.grid").removeAttr("style")
$("#loadContainer").removeClass("loader") $("#loadContainer").removeClass("loader")
let TrainTaskInfo let TrainTaskInfo
this.tableData = res.data.data this.tableData = res.data.data
@@ -314,10 +382,15 @@ export default {
}, },
mounted() { mounted() {
this.submitId = document.getElementById("submitId")
this.getModelList() this.getModelList()
this.url = location.href.split('show_model')[0] this.url = location.href.split('show_model')[0]
}
this.submitId.addEventListener("click", this.submit)
},


beforeDestroy() { // 实例销毁之前对点击事件进行解绑
this.submitId.removeEventListener('click', this.submit);
}
}; };
</script> </script>




+ 7
- 1
web_src/js/index.js View File

@@ -4124,4 +4124,10 @@ function initDropDown() {
$("#dropdown_explore").dropdown({ $("#dropdown_explore").dropdown({
on:'hover' ,//鼠标悬浮显示,默认值是click on:'hover' ,//鼠标悬浮显示,默认值是click
}); });
}
}

//云脑提示
$('.question.circle.icon').hover(function(){
$(this).popup('show')
$('.ui.popup.mini.top.center').css({"border-color":'rgba(50, 145, 248, 100)',"color":"rgba(3, 102, 214, 100)","border-radius":"5px","border-shadow":"none"})
});

+ 14
- 1
web_src/less/openi.less View File

@@ -552,9 +552,22 @@ display: block;
.letf2{ .letf2{
margin-left: -2px; margin-left: -2px;
} }
.width70{
width: 70% !important;
}
.width83{
width: 83% !important;
}
.content-padding{
padding: 40px !important;
}
.model_disabled{
background-color: rgba(245, 245, 246, 100) !important;
color: rgba(136, 136, 136, 100) !important;
}
.edge{ .edge{
margin-left:0 !important; margin-left:0 !important;
margin-right: 0 !important; margin-right: 0 !important;
padding-left:0 !important; padding-left:0 !important;
padding-right:0 !important; padding-right:0 !important;
}
}

Loading…
Cancel
Save