wangwei
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
Browse Source

fix issue

tags/v1.21.12.1^2
zhoupzh 3 years ago
parent
3f4f3d2499
commit
5c03a3e804
3 changed files with 323 additions and 375 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -373
      templates/repo/modelmanage/index.tmpl
  2. +305
    -0
      web_src/js/components/Model.vue
  3. +18
    -2
      web_src/js/index.js

+ 0
- 373
templates/repo/modelmanage/index.tmpl View File

@@ -1,373 +0,0 @@
<!-- 头部导航栏 -->
{{template "base/head" .}}
<style>
.width70{
width: 70% !important;
}
.width83{
width: 83% !important;
}
.content-padding{
padding: 40px !important;
}
</style>
<!-- 弹窗 -->
<div id="mask">
<div id="loadingPage">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
</div>
{{$repository := .Repository.ID}}
<!-- 提示框 -->
<div class="alert"></div>

<div class="repository release dataset-list view">
{{template "repo/header" .}}
<!-- 列表容器 -->
<div class="ui container">
{{template "base/alert" .}}
<div class="ui two column stackable grid ">
<div class="column"></div>
<div class="column right aligned">
{{if .Permission.CanWrite $.UnitTypeCloudBrain}}
<a class="ui green button" onclick="showcreate(this)">{{$.i18n.Tr "repo.modelarts.train_job.new_train"}}</a>{{end}}
</div>
</div>

<!-- 中下列表展示区 -->
<div class="ui grid">
<div class="row">
<div class="ui sixteen wide column">
<!-- 任务展示 -->
<div class="dataset list">
<!-- 表头 -->
<div class="ui grid stackable" style="background: #f0f0f0;;">
<div class="row">
<div class="three wide column padding0">
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.model_name"}}</span>
</div>
<div class="one wide column text center padding0">
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version"}}</span>
</div>
<div class="one wide column text center padding0" style="width: 7.25%!important;">
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version_nums"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 11.5%!important;">
<span>{{$.i18n.Tr "repo.modelarts.model_size"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 8.5%!important;">
<span>{{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 11.5%!important;">
<span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span>
</div>
<div class="two wide column text center padding0">
<span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span>
</div>
<div class="one wide column text center padding0">
<span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span>
</div>
<div class="two wide column text center padding0" style="width: 17.5%!important;">
<span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span>
</div>

</div>
</div>
<div class="ui grid stackable item">
<div class="row">
<!-- 任务名 -->
<div class="three wide column padding0">
<a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 12px;">
<span class="fitted" style="vertical-align: middle;">{{svg "octicon-tasklist" 16}}</span>
<span class="fitted" style="width: 90%;vertical-align: middle;margin-left: 0.4rem;">Model-abcd</span>
</a>
</div>
<!-- 当前版本 -->
<div class="one wide column text center padding0">
<span>0.0.3</span>
</div>
<!-- 版本数量 -->
<div class="one wide column text center padding0" style="width: 7.25%!important;">
<span>20</span>
</div>
<!-- 模型大小 -->
<div class="two wide column padding0 text center" style="width: 11.5%!important;">
<span>20.28MB</span>
</div>
<!-- AI引擎 -->
<div class="two wide column padding0 text center" style="width: 8.5%!important;">
<span>Mindspore</span>
</div>
<!-- 计算资源 -->
<div class="two wide column text center padding0" style="width: 11.5%!important;">
<span style="font-size: 12px;">CPU</span>
</div>
<!-- 创建时间 -->
<div class="two wide column text center padding0">
<span style="font-size: 12px;">2021/09/20 12:06:13</span>
</div>
<!-- 创建者 -->
<div class="one wide column text center padding0">
{{if .User.Name}}
<a href="{{AppSubUrl}}/{{.User.Name}}" title="{{.User.Name}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}"></a>
{{else}}
<a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>
{{end}}
</div>

<div class="two wide column text center padding0" style="width: 17.5%!important;">
<div style="display: flex;justify-content: space-between;">
<a>创建新版本</a>
<a>下载</a>
<a onclick="assertDelete(this)">删除</a>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

</div>

</div>

<!-- div full height-->
</div>



<!-- 确认模态框 -->
<div id="deletemodel">
<div class="ui basic modal first">
<div class="ui icon header">
<i class="trash icon"></i> 删除任务
</div>

<div class="content">
<p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
</div>
<div class="actions">
<div class="ui red basic inverted cancel button">
<i class="remove icon"></i> 取消操作
</div>
<div class="ui green basic inverted ok button">
<i class="checkmark icon"></i> 确定操作
</div>
</div>
</div>
</div>

<div id="newmodel">
<div class="ui modal second">
<div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
<h4>导入新模型</h4>
</div>
<div class="content content-padding">
<form class="ui form" action="{{.Link}}" method="post">
<div class="two inline fields ">
<div class="required ten wide field">
<label style="margin-left: -23px;">选择训练任务</label>
<!-- <select class="ui dropdown search width83" name="model_name">
<option name="model_name" value="1">1</option>
<option name="model_version" value="11">11</option>
</select> -->
<div class="ui dropdown selection search width83">
<input type="hidden" name="model_name">
<div class="default text">Select Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
</div>
<div class="required six widde field">
<label>版本</label>
<div class="ui dropdown selection search width70">
<input type="hidden" name="model_version">
<div class="default text">Select Gender</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item" data-value="male">Male</div>
<div class="item" data-value="female">Female</div>
</div>
</div>
<!-- <select class="ui dropdown search width70" name="model_version">
<option name="model_version" value="1">1</option>
<option name="model_version" value="11">11</option>
</select> -->
</div>
</div>

<div class="required inline field">
<label>模型名称</label>
<input style="width: 45%;" name="job_name" required maxlength="255">
</div>
<div class="required inline field">
<label>模型版本</label>
<input style="width: 45%;" name="job_name" required maxlength="255">
</div>
<div class="required inline field">
<label>模型标签</label>
<input style="width: 83%;" name="job_name" required maxlength="255">
</div>
<div class="required inline field">
<label for="description">模型描述</label>
<textarea style="width: 83%;" 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 class="ui create_train_job green button" style="position: absolute;">
{{.i18n.Tr "repo.cloudbrain.new"}}
</button>
</div>
</form>
<div class="actions" style="display: inline-block;margin-left: 180px;">
<button class="ui button cancel" >{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
</div>
</div>
</div>


{{template "base/footer" .}}

<script>
let url_href = window.location.pathname.split('create')[0]
// $(".ui.button.cancel").attr('href',url_href)
function showcreate(obj){
$('.ui.modal.second')
.modal({
centered: false,
onShow:function(){
$('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
},
onHide:function(){
$('.ui.dimmer').css({"background-color":""})
}
})
.modal('show')
// $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
}
// 删除时用户确认
function assertDelete(obj) {
if (obj.style.color == "rgb(204, 204, 204)") {
return
} else {
var delId = obj.parentNode.id
flag = 1;
$('.ui.basic.modal.first')
.modal({
onDeny: function() {
flag = false
},
onApprove: function() {
document.getElementById(delId).submit()
flag = true
},
onHidden: function() {
if (flag == false) {
$('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
}
}
})
.modal('show')
}
}

function loadJobDuration() {
$(".job-status").each((index, job) => {
const jobID = job.dataset.jobid;
const repoPath = job.dataset.repopath;
const versionname = job.dataset.version
$.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {
console.log(data)
const duration = data.JobDuration
const jobID = data.JobID
$('#duration-'+jobID).text(duration)
})
})
}

function loadTrainList(){

let repolink = {{.RepoLink}}
let repoId = {{$repository}}
$.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => {
const train_list = data.filter((lists)=>{
return lists.Status==="COMPLETED"
})
console.log(data)
console.log(train_list)
})
}
$(document).ready(loadTrainList)
// 获取弹窗
var modal = document.getElementById('imageModal');

// 打开弹窗的按钮对象
var btns = document.getElementsByClassName("imageBtn");

// 获取 <span> 元素，用于关闭弹窗
var spans = document.getElementsByClassName('close');

// 点击按钮打开弹窗
for (i = 0; i < btns.length; i++) {
btns[i].onclick = function() {
modal.style.display = "block";
}
}

// 点击 <span> (x), 关闭弹窗
for (i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
modal.style.display = "none";
}
}

// 在用户点击其他地方时，关闭弹窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}

// 显示弹窗，弹出相应的信息
function showmask() {
$('#imageModal').css('display', 'none')
$('#mask').css('display', 'block')

$("iframe[name=iframeContent]").on("load", function() {　　
var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;　
var json1 = JSON.parse(responseText)
$('#mask').css('display', 'none')
parent.location.href

if (json1.result_code === "0") {
$('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();
} else {
$('.alert').html(json1.error_msg).removeClass('alert-success').addClass('alert-danger').show().delay(5000).fadeOut();
}
})
}
</script>


+ 305
- 0
web_src/js/components/Model.vue View File

@@ -0,0 +1,305 @@
<template>
<div>
<div class="ui container" id="header">
<el-row style="margin-top:15px;">
<el-table
:data="tableData1"
style="min-width: 100%"
row-key="id"
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
:header-cell-style="tableHeaderStyle"
>
<el-table-column
prop="name"
label="模型名称"
align="left"
min-width="18%"
>
<template slot-scope="scope">
<a class="text-over" style="cursor:default;color:#426290" :title="scope.row.name">{{ scope.row.name }}</a>
</template>
</el-table-column>
<el-table-column
prop="version"
label="版本"
align="center"
min-width="6.5%"
>
<template slot-scope="scope">
<span class="text-over" :title="scope.row.version">{{ scope.row.version}}</span>
</template>
</el-table-column>
<el-table-column
prop="version_count"
label="版本数"
align="center"
min-width="7.5%"
>
<template slot-scope="scope">
<span class="text-over" :title="scope.row.version_count">{{ scope.row.version_count}}</span>
</template>
</el-table-column>

<el-table-column
prop="modelsize"
label="模型大小"
align="center"
min-width="10.5%"
>
<template slot-scope="scope">
<span class="text-over" :title="scope.row.modelsize">{{ scope.row.modelsize}}</span>
</template>
</el-table-column>
<el-table-column
prop="aiengine"
label="AI引擎"
align="center"
min-width="8.5%"
>
<template slot-scope="scope">
<span class="text-over" :title="scope.row.aiengine">{{ scope.row.aiengine}}</span>
</template>
</el-table-column>
<el-table-column
prop="computesource"
label="计算资源"
align="center"
min-width="10.5%"
>
<template slot-scope="scope">
<span class="text-over" :title="scope.row.computesource">{{ scope.row.computesource}}</span>
</template>
</el-table-column>
<el-table-column
prop="createtime"
label="创建时间"
align="center"
min-width="13.75%"
>
<template slot-scope="scope">
{{scope.row.createtime}}
</template>
</el-table-column>
<el-table-column
prop="creator"
label="创建者"
align="center"
min-width="6.75%"
>
<template slot-scope="scope">
{{scope.row.creator}}
</template>
</el-table-column>

<el-table-column label="操作" min-width="18%" align="center">
<template slot-scope="scope">
<a>创建新版本</a>
<a>下载</a>
<a>删除</a>
</template>
</el-table-column>
</el-table>
</el-row>
<div class="ui container" style="margin-top:50px;text-align:center">
<el-pagination
background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="totalNum">
</el-pagination>
</div>
</div>
</div>

</template>

<script>

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




export default {
components: {
},
data() {
return {
currentPage:1,
pageSize:10,
totalNum:0,
params:{page:0,pageSize:10},
tableData: [],
loading:false,
tableData1:[{id:27,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz',hasChildren: true},
{id:28,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
{id:29,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
{id:30,name:"Model-abcd",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'}],
currentPage1:1,
pageSize1:10,
totalNum1:0,
params1:{page:1,size:10,name:''},
loading1:false
};
},
methods: {
load(tree, treeNode, resolve) {
setTimeout(() => {
resolve([
{id:27-1,name:"",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
{id:27-2,name:"",version:"0.0.3",version_count:'20',modelsize:"20MB",aiengine:'Mindspore',computesource:'NPU',createtime:'2020-1-2 12:06:01',creator:'zhoupz'},
])
}, 1000)
},
tableHeaderStyle({row,column,rowIndex,columnIndex}){
if(rowIndex===0){
return 'background:#f5f5f6;color:#606266'
}
},
handleSizeChange(val){
this.params.size = val
this.getImageList()

},
handleCurrentChange(val){
console.log(val)
this.params.page = val
this.getImageList()

},
getModelList(){
this.loading = true
this.$axios.get(location.href+'_api',{
params:this.params
}).then((res)=>{
console.log("---res----",res)
this.totalNum = res.data.count
this.tableData = res.data.rows
this.loading = false
})
},
},
filters:{
clearP(value){
console.log("sorce value",value)
if(!value) return ''
const reg = /\<\/?p\>/g;
value = value.replace(reg,'')
console.log("repalace:",value)
return value

},
transformTimestamp(timestamp){
console.log("timestamp",timestamp)
let a = new Date(timestamp).getTime();
const date = new Date(a);
const Y = date.getFullYear() + '-';
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes()) + ':' ;
const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒
const dateString = Y + M + D + h + m + s;
// console.log('dateString', dateString); // > dateString 2021-07-06 14:23
return dateString;
},
},
mounted() {
this.getModelList()
}

};
</script>

<style scoped>
.header-wrapper {
background-color: #f5f5f6;
padding-top: 15px;
}
.image_text{
padding:25px 0 55px 0 ;
}
#header{
position: relative;
top:-40px;
}
.el-dropdown-menu__item--divided{
border-top: 1px solid blue;
}
.el-table thead{
background-color: #f5f5f6;
}
/deep/ .el-tabs__item:hover{
color: #000;
font-weight: 500;
}
/deep/ .el-tabs__item.is-active {
color: #000;
font-weight: 500;
}
/deep/ .el-tabs__active-bar{
background-color:#000
}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
background-color: #5bb973;
color: #FFF;
}
/deep/ .el-pagination.is-background .el-pager li.active {
color: #fff;
cursor: default;
}
/deep/ .el-pagination.is-background .el-pager li:hover {
color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
color: #5bb973;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
background-color: #5bb973;
color: #FFF;
}

/deep/ .el-pager li.active {
color: #08C0B9;
cursor: default;
}
/deep/ .el-pagination .el-pager li:hover {
color: #08C0B9;
}
/deep/ .el-pagination .el-pager li:not(.disabled):hover {
color: #08C0B9;
}
/* /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{
background-color: #5bb973;
color: #000;
} */
/* /deep/ .el-pager li:hover{
color: #000;
} */
#success{
background-color: #5bb973;
color: white;
}
.text-over{
overflow: hidden;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
}
</style>

+ 18
- 2
web_src/js/index.js View File

@@ -39,6 +39,7 @@ import Images from './components/Images.vue';
import EditTopics from './components/EditTopics.vue';
import DataAnalysis from './components/DataAnalysis.vue'
import Contributors from './components/Contributors.vue'
import Model from './components/Model.vue';

Vue.use(ElementUI);
Vue.prototype.$axios = axios;
@@ -2916,11 +2917,12 @@ $(document).ready(async () => {
initVueEditTopic();
initVueContributors();
initVueImages();
initVueModel();
initVueDataAnalysis();
initTeamSettings();
initCtrlEnterSubmit();
initNavbarContentToggle();
// initTopicbar();
// initTopicbar();vim
// closeTopicbar();
initU2FAuth();
initU2FRegister();
@@ -3646,7 +3648,7 @@ function initVueContributors() {

function initVueImages() {
const el = document.getElementById('images');
console.log("el",el)
if (!el) {
return;
@@ -3658,6 +3660,20 @@ function initVueImages() {
render: h => h(Images)
});
}
function initVueModel() {
const el = document.getElementById('model_list');
if (!el) {
return;
}

new Vue({
el: el,
render: h => h(Model)
});
}
function initVueDataAnalysis() {
const el = document.getElementById('data_analysis');
console.log("el",el)


Write Preview
Loading…
Cancel
Save