@@ -250,8 +250,9 @@ | |||
<div class="default text" style="color: rgba(0,0,0,.87);"> CPU / GPU</div> | |||
<i class="dropdown icon"></i> | |||
<div class="menu"> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain" data-value="11">CPU / GPU</a> | |||
<a class="item" href="{{.RepoLink}}/modelarts/notebook" data-value="22">Ascend NPU</a> | |||
<a class="item" href="{{.RepoLink}}/debugjob" data-value="11">全部</a> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain" data-value="22">CPU / GPU</a> | |||
<a class="item" href="{{.RepoLink}}/modelarts/notebook" data-value="33">Ascend NPU</a> | |||
</div> | |||
</div> | |||
{{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
@@ -285,16 +286,23 @@ | |||
<div class="dataset list"> | |||
<div class="ui grid stackable" style="background: #f0f0f0;;"> | |||
<div class="row"> | |||
<div class="five wide column"> | |||
<div class="four wide column"> | |||
<span style="margin:0 6px">{{$.i18n.Tr "repo.cloudbrain_task"}}</span> | |||
</div> | |||
<div class="three wide column"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_status_createtime"}}</span> | |||
<div class="two wide column text center"> | |||
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.status"}}</span> | |||
</div> | |||
<div class="one wide column"> | |||
<div class="two wide column text center"> | |||
<span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span> | |||
</div> | |||
<div class="one wide column text center"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span> | |||
</div> | |||
<div class="seven wide column text center"> | |||
<div class="five wide column text center"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span> | |||
</div> | |||
@@ -306,41 +314,26 @@ | |||
<div class="row"> | |||
<!-- 任务名 --> | |||
<div class="five wide column"> | |||
<div class="four wide column"> | |||
<a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 14px;"> | |||
<span class="fitted text_over" style="width: 90%;vertical-align: middle;">{{.JobName}}</span> | |||
</a> | |||
</div> | |||
<div class="three wide column"> | |||
<div class="two wide column text center"> | |||
<!--任务状态 --> | |||
<span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
<!-- {{.Status}} --> | |||
<!-- {{if eq .Status "RUNNING"}} | |||
<span style="display:flex;position: relative; justify-content: flex-start;"><i class="i-round i-bg-stop"></i><span style="margin-left: 0.4em;font-size: 12px;">运行中</span></span> | |||
<span style="display:flex;position: relative; justify-content: flex-start;"><i class="i-round i-bg-stop"></i><span style="margin-left: 0.4em;font-size: 12px;">运行中</span></span> | |||
{{else}} | |||
{{.Status}} | |||
{{end}} --> | |||
<span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span> | |||
</span> | |||
<!-- <span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" > | |||
{{if eq .Status "STOPPED"}} | |||
<span style="display:flex;position: relative; justify-content: flex-start;"><i class="i-round i-bg-stop"></i><span style="margin-left: 0.4em;font-size: 12px;">已停止</span></span> | |||
{{else if eq .Status "RUNNING"}} | |||
<span style="display:flex;position: relative; justify-content: flex-start;"><i class="i-round i-bg-running"></i><span style="margin-left: 0.4em;font-size: 12px;">运行中</span></span> | |||
{{else if eq .Status "FAILED"}} | |||
<span style="display:flex;position: relative; justify-content: flex-start;"><i class="i-round i-bg-running"></i><span style="margin-left: 0.4em;font-size: 12px;">运行失败</span></span> | |||
{{else if eq .Status "WAITING"}} | |||
<span style="display:flex;position: relative; justify-content: flex-start;"><i class="showCircle"></i><span style="margin-left: 0.4em;font-size: 12px;">初始化等待</span></span> | |||
{{end}} | |||
</span> --> | |||
</div> | |||
<div class="two wide column text center"> | |||
<!-- 任务创建时间 --> | |||
<span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<!-- 任务计算资源 --> | |||
<span style="font-size: 12px;margin-left: 0.4rem;" class="">{{.ComputeResource}}</span> | |||
</div> | |||
<div class="one wide column"> | |||
{{if .User.Name}} | |||
<a href="{{AppSubUrl}}/{{.User.Name}}" title="{{.User.Name}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}"></a> | |||
@@ -348,7 +341,7 @@ | |||
<a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a> | |||
{{end}} | |||
</div> | |||
<div class="seven wide column text right"> | |||
<div class="five wide column text center"> | |||
<div class="ui compact buttons"> | |||
{{if and (ne .Status "WAITING") (ne .JobType "DEBUG")}} | |||
<a class="ui basic button" href="{{$.Link}}/{{.JobID}}/rate" target="_blank"> | |||
@@ -382,9 +375,9 @@ | |||
</div> | |||
<div class="ui compact buttons"> | |||
<!-- 模型下载 --> | |||
<a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank"> | |||
<!-- <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank"> | |||
{{$.i18n.Tr "repo.download"}} | |||
</a> | |||
</a> --> | |||
<!-- 接收结果 --> | |||
<iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe> | |||
@@ -0,0 +1,572 @@ | |||
<!-- 头部导航栏 --> | |||
{{template "base/head" .}} | |||
<style> | |||
.label_after::after{ | |||
margin: -.2em 0 0 .2em; | |||
content: '\00a0'; | |||
} | |||
.selectcloudbrain .active.item{ | |||
color: #0087f5 !important; | |||
border: 1px solid #0087f5; | |||
margin: -1px; | |||
background: #FFF !important; | |||
} | |||
#deletemodel { | |||
width: 100%; | |||
height: 100%; | |||
} | |||
/* 弹窗 */ | |||
#mask { | |||
position: fixed; | |||
top: 0px; | |||
left: 0px; | |||
right: 0px; | |||
bottom: 0px; | |||
filter: alpha(opacity=60); | |||
background-color: #777; | |||
z-index: 1000; | |||
display: none; | |||
opacity: 0.8; | |||
-moz-opacity: 0.5; | |||
padding-top: 100px; | |||
color: #000000 | |||
} | |||
#loadingPage { | |||
margin: 200px auto; | |||
width: 50px; | |||
height: 40px; | |||
text-align: center; | |||
font-size: 10px; | |||
display: block; | |||
} | |||
#loadingPage>div { | |||
background-color: green; | |||
height: 100%; | |||
width: 6px; | |||
display: inline-block; | |||
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
animation: sk-stretchdelay 1.2s infinite ease-in-out; | |||
} | |||
#loadingPage .rect2 { | |||
-webkit-animation-delay: -1.1s; | |||
animation-delay: -1.1s; | |||
} | |||
#loadingPage .rect3 { | |||
-webkit-animation-delay: -1.0s; | |||
animation-delay: -1.0s; | |||
} | |||
#loadingPage .rect4 { | |||
-webkit-animation-delay: -0.9s; | |||
animation-delay: -0.9s; | |||
} | |||
#loadingPage .rect5 { | |||
-webkit-animation-delay: -0.8s; | |||
animation-delay: -0.8s; | |||
} | |||
@-webkit-keyframes sk-stretchdelay { | |||
0%, | |||
40%, | |||
100% { | |||
-webkit-transform: scaleY(0.4) | |||
} | |||
20% { | |||
-webkit-transform: scaleY(1.0) | |||
} | |||
} | |||
@keyframes sk-stretchdelay { | |||
0%, | |||
40%, | |||
100% { | |||
transform: scaleY(0.4); | |||
-webkit-transform: scaleY(0.4); | |||
} | |||
20% { | |||
transform: scaleY(1.0); | |||
-webkit-transform: scaleY(1.0); | |||
} | |||
} | |||
/* 消息框 */ | |||
.alert { | |||
display: none; | |||
position: fixed; | |||
width: 100%; | |||
z-index: 1001; | |||
padding: 15px; | |||
border: 1px solid transparent; | |||
border-radius: 4px; | |||
text-align: center; | |||
font-weight: bold; | |||
} | |||
.alert-success { | |||
color: #3c763d; | |||
background-color: #dff0d8; | |||
border-color: #d6e9c6; | |||
} | |||
.alert-info { | |||
color: #31708f; | |||
background-color: #d9edf7; | |||
border-color: #bce8f1; | |||
} | |||
.alert-warning { | |||
color: #8a6d3b; | |||
background-color: #fcf8e3; | |||
border-color: #faebcc; | |||
} | |||
.alert-danger { | |||
color: #a94442; | |||
background-color: #f2dede; | |||
border-color: #ebccd1; | |||
} | |||
.pusher { | |||
width: calc(100% - 260px); | |||
box-sizing: border-box; | |||
} | |||
/* 弹窗 (background) */ | |||
#imageModal { | |||
display: none; | |||
position: fixed; | |||
z-index: 1; | |||
left: 0; | |||
top: 0; | |||
width: 100%; | |||
height: 100%; | |||
overflow: auto; | |||
background-color: rgb(0, 0, 0); | |||
background-color: rgba(0, 0, 0, 0.4); | |||
} | |||
/* 弹窗内容 */ | |||
.modal-content { | |||
background-color: #fefefe; | |||
margin: 15% auto; | |||
padding: 20px; | |||
border: 1px solid #888; | |||
width: 30%; | |||
} | |||
/* 关闭按钮 */ | |||
.close { | |||
color: #aaa; | |||
float: right; | |||
font-size: 28px; | |||
font-weight: bold; | |||
} | |||
.close:hover, | |||
.close:focus { | |||
color: black; | |||
text-decoration: none; | |||
cursor: pointer; | |||
} | |||
.dis { | |||
margin-bottom: 20px; | |||
} | |||
.disabled { | |||
cursor: pointer; | |||
pointer-events: none; | |||
} | |||
.time-show{ | |||
font-size: 10px; | |||
margin-top: 0.4rem; | |||
display: inline-block; | |||
} | |||
</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> | |||
<!-- 提示框 --> | |||
<div class="alert"></div> | |||
<div class="repository release dataset-list view"> | |||
{{template "repo/header" .}} | |||
<!-- 列表容器 --> | |||
<div class="ui container"> | |||
<div class="ui two column stackable grid "> | |||
<div class="column"> | |||
<div class="ui blue small menu compact selectcloudbrain"> | |||
<a class="active item" href="{{.RepoLink}}/debugjob">{{$.i18n.Tr "repo.modelarts.notebook"}}</a> | |||
<a class="item" href="{{.RepoLink}}/modelarts/train-job">{{$.i18n.Tr "repo.modelarts.train_job"}}</a> | |||
</div> | |||
</div> | |||
<div class="column right aligned"> | |||
<div class="ui selection dropdown" style="min-width: 10em;min-height:2.6em;border-radius: .28571429rem;margin-right: 1em;padding: .67em 3.2em .7em 1em;"> | |||
{{svg "octicon-server" 16}} | |||
<div class="default text" style="color: rgba(0,0,0,.87);"> 全部</div> | |||
<i class="dropdown icon"></i> | |||
<div class="menu"> | |||
<a class="active item" href="{{.RepoLink}}/debugjob" data-value="11">全部</a> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain" data-value="22">CPU / GPU</a> | |||
<a class="item" href="{{.RepoLink}}/modelarts/notebook" data-value="33">Ascend NPU</a> | |||
</div> | |||
</div> | |||
{{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a class="ui green button" href="{{.RepoLink}}/cloudbrain/create">{{$.i18n.Tr "repo.modelarts.train_job.new_debug"}}</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="four wide column"> | |||
<span style="margin:0 6px">{{$.i18n.Tr "repo.cloudbrain_task"}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.status"}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span> | |||
</div> | |||
<div class="one wide column text center"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span> | |||
</div> | |||
<div class="five wide column text center"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span> | |||
</div> | |||
</div> | |||
</div> | |||
{{range .Tasks}} | |||
<div class="ui grid stackable item"> | |||
<div class="row"> | |||
<!-- 任务名 --> | |||
<div class="four wide column"> | |||
<a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 14px;"> | |||
<span class="fitted text_over" style="width: 90%;vertical-align: middle;">{{.JobName}}</span> | |||
</a> | |||
</div> | |||
<div class="two wide column text center"> | |||
<!--任务状态 --> | |||
<span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" data-resource="{{.ComputeResource}}"> | |||
<span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span> | |||
</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<!-- 任务创建时间 --> | |||
<span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<!-- 任务计算资源 --> | |||
<span style="font-size: 12px;margin-left: 0.4rem;" class="">{{.ComputeResource}}</span> | |||
</div> | |||
<div class="one wide column text center"> | |||
{{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="five wide column text center"> | |||
<div class="ui compact buttons"> | |||
{{if and (ne .Status "WAITING") (ne .JobType "DEBUG")}} | |||
<a class="ui basic button" href="{{$.Link}}/{{.JobID}}/rate" target="_blank"> | |||
评分 | |||
</a> | |||
{{end}} | |||
<!-- 调试 --> | |||
{{if $.Permission.CanWrite $.UnitTypeCloudBrain}} | |||
{{if eq .ComputeResource "CPU/GPU"}} | |||
<a id="model-debug-{{.JobID}}" class="ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" href="{{$.RepoLink}}/cloudbrain/{{.JobID}}/debug" target="_blank"> | |||
{{$.i18n.Tr "repo.debug"}} | |||
</a> | |||
{{else}} | |||
<a id="model-debug-{{.JobID}}" class="ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" href="{{$.RepoLink}}/modelarts/notebook/{{.JobID}}/debug" target="_blank"> | |||
{{$.i18n.Tr "repo.debug"}} | |||
</a> | |||
{{end}} | |||
{{else}} | |||
<a class="ui basic disabled button" href="{{$.Link}}/{{.JobID}}/debug" target="_blank"> | |||
{{$.i18n.Tr "repo.debug"}} | |||
</a> | |||
{{end}} | |||
<form id="stopForm-{{.JobID}}" action="{{if eq .ComputeResource "CPU/GPU"}}{{$.RepoLink}}/cloudbrain{{else}}{{$.RepoLink}}/modelarts/notebook{{end}}/{{.JobID}}/stop" method="post" style="margin-left:-1px;"> | |||
{{$.CsrfTokenHtml}} | |||
{{if $.Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a id="stop-model-debug-{{.JobID}}" class="ui basic {{if or (eq .Status "STOPPED") (eq .Status "FAILED")}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();"> | |||
{{$.i18n.Tr "repo.stop"}} | |||
</a> | |||
{{else}} | |||
<a class="ui basic disabled button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();"> | |||
{{$.i18n.Tr "repo.stop"}} | |||
</a> | |||
{{end}} | |||
</form> | |||
</div> | |||
<div class="ui compact buttons"> | |||
<!-- 模型下载 --> | |||
<!-- <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank"> | |||
{{$.i18n.Tr "repo.download"}} | |||
</a> --> | |||
<!-- 接收结果 --> | |||
<iframe src="" frameborder="0" name="iframeContent" style="display: none;"></iframe> | |||
{{if $.Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a id="model-image-{{.JobID}}" style="{{if eq .ComputeResource "CPU/GPU"}} visibility: visible {{else}} visibility: hidden{{end}}" class="imageBtn ui basic {{if not .CanDebug}}disabled {{else}}blue {{end}}button" value="{{.CanDebug}}">{{$.i18n.Tr "repo.submit_image"}}</a> | |||
{{else}} | |||
<a class="imageBtn ui basic disabled button" style="{{if eq .ComputeResource "CPU/GPU"}} visibility: visible {{else}} visibility: hidden{{end}}" value="{{.CanDebug}}">{{$.i18n.Tr "repo.submit_image"}}</a> | |||
{{end}} | |||
</div> | |||
<!-- 删除任务 --> | |||
<form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{if eq .ComputeResource "CPU/GPU"}}{{$.RepoLink}}/cloudbrain{{else}}{{$.RepoLink}}/modelarts/notebook{{end}}/{{.JobID}}/del" method="post"> | |||
{{$.CsrfTokenHtml}} | |||
{{if $.Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a id="model-delete-{{.JobID}}" class="ui basic button {{if not .CanDel}}disabled {{else}} blue {{end}}" onclick="assertDelete(this)" style="border-radius: .28571429rem;"> | |||
{{$.i18n.Tr "repo.delete"}} | |||
</a> | |||
{{else}} | |||
<a class="ui basic blue button disabled" onclick="assertDelete(this)" style="border-radius: .28571429rem;"> | |||
{{$.i18n.Tr "repo.delete"}} | |||
</a> | |||
{{end}} | |||
</form> | |||
</div> | |||
<!-- 镜像列表弹窗 --> | |||
<div id="imageModal" class="modal" style="display: none;"> | |||
<div class="modal-content"> | |||
<!-- 表格 --> | |||
<div class="ui form"> | |||
<form id="commitImageForm" action="{{$.RepoLink}}/cloudbrain/{{.JobID}}/commit_image" method="post" target="iframeContent"> | |||
{{$.CsrfTokenHtml}} | |||
<div class="row"> | |||
<p style="display: inline;">提交任务镜像</p> | |||
<span class="close">×</span> | |||
</div> | |||
<div class="ui divider"></div> | |||
<div class="inline required field dis"> | |||
<label>镜像标签:</label> | |||
<input name="tag" id="image_tag" tabindex="3" autofocus required maxlength="254" style="width:75%"> | |||
</div> | |||
<div class="inline field"> | |||
<label class="label_after">镜像描述:</label> | |||
<textarea name="description" maxlength="254" rows="8" style="width:75%;margin-left: 0.2em;"></textarea> | |||
</div> | |||
<div class="ui divider"></div> | |||
<div class="inline field"> | |||
<label></label> | |||
<button class="ui green button" onclick="showmask()"> | |||
{{$.i18n.Tr "repo.cloudbrain.commit_image"}} | |||
</button> | |||
</div> | |||
</form> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
{{end}} {{template "base/paginate" .}} | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 确认模态框 --> | |||
<div id="deletemodel"> | |||
<div class="ui basic modal"> | |||
<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> | |||
{{template "base/footer" .}} | |||
<script> | |||
// 调试和评分新开窗口 | |||
console.log({{.Tasks}}) | |||
function stop(obj) { | |||
if (obj.style.color != "rgb(204, 204, 204)") { | |||
obj.target = '_blank' | |||
} else { | |||
return | |||
} | |||
} | |||
// 删除时用户确认 | |||
function assertDelete(obj) { | |||
if (obj.style.color == "rgb(204, 204, 204)") { | |||
return | |||
} else { | |||
var delId = obj.parentNode.id | |||
flag = 1; | |||
$('.ui.basic.modal') | |||
.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') | |||
} | |||
} | |||
// 加载任务状态 | |||
var timeid = window.setInterval(loadJobStatus, 15000); | |||
$(document).ready(loadJobStatus); | |||
function loadJobStatus() { | |||
$(".job-status").each((index, job) => { | |||
const jobID = job.dataset.jobid; | |||
const repoPath = job.dataset.repopath; | |||
const computeResource = job.dataset.resource | |||
const initArray = ['STOPPED','FAILED','START_FAILED','CREATE_FAILED'] | |||
if (initArray.includes(job.textContent.trim())) { | |||
return | |||
} | |||
const diffResource = computeResource == "NPU" ? 'modelarts/notebook' : 'cloudbrain' | |||
$.get(`/api/v1/repos/${repoPath}/${diffResource}/${jobID}`, (data) => { | |||
const jobID = data.JobID | |||
const status = data.JobStatus | |||
if (status != job.textContent.trim()) { | |||
$('#' + jobID+'-icon').removeClass().addClass(status) | |||
$('#' + jobID+ '-text').text(status) | |||
} | |||
if(status==="RUNNING"){ | |||
$('#model-debug-'+jobID).removeClass('disabled') | |||
$('#model-debug-'+jobID).addClass('blue') | |||
$('#model-image-'+jobID).removeClass('disabled') | |||
$('#model-image-'+jobID).addClass('blue') | |||
} | |||
if(status!=="RUNNING"){ | |||
$('#model-debug-'+jobID).removeClass('blue') | |||
$('#model-debug-'+jobID).addClass('disabled') | |||
$('#model-image-'+jobID).removeClass('blue') | |||
$('#model-image-'+jobID).addClass('disabled') | |||
} | |||
if(status!=="STOPPED" || status!=="FAILED"){ | |||
$('#stop-model-debug-'+jobID).removeClass('disabled') | |||
$('#stop-model-debug-'+jobID).addClass('blue') | |||
$('#model-delete-'+jobID).removeClass('red') | |||
$('#model-delete-'+jobID).addClass('disabled') | |||
} | |||
if(status=="STOPPED" || status=="FAILED"){ | |||
$('#stop-model-debug-'+jobID).removeClass('blue') | |||
$('#stop-model-debug-'+jobID).addClass('disabled') | |||
$('#model-delete-'+jobID).removeClass('disabled') | |||
$('#model-delete-'+jobID).addClass('red') | |||
} | |||
}).fail(function(err) { | |||
console.log(err); | |||
}); | |||
}); | |||
}; | |||
// 获取弹窗 | |||
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() { | |||
var image_tag = !$('#image_tag').val() | |||
console.log("image_tag",image_tag) | |||
if(image_tag){ | |||
return | |||
} | |||
$('#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> |
@@ -138,7 +138,7 @@ | |||
</a> | |||
{{end}} | |||
{{if .Permission.CanRead $.UnitTypeCloudBrain}} | |||
<a class="{{if .PageIsCloudBrain}}active{{end}} item" href="{{.RepoLink}}/cloudbrain"> | |||
<a class="{{if .PageIsCloudBrain}}active{{end}} item" href="{{.RepoLink}}/debugjob"> | |||
<span>{{svg "octicon-server" 16}} {{.i18n.Tr "repo.cloudbrain"}}<i class="question circle icon link cloudbrain-question" data-content={{.i18n.Tr "repo.cloudbrain_helper"}} data-position="top center" data-variation="mini"></i></span> | |||
</a> | |||
{{end}} | |||
@@ -214,21 +214,32 @@ | |||
</div> | |||
</div> | |||
<div class="column right aligned"> | |||
<div class="ui selection dropdown" style="min-width: 10em;min-height:2.6em;border-radius: .28571429rem;margin-right: 1em;padding: .67em 3.2em .7em 1em;"> | |||
{{svg "octicon-server" 16}} | |||
<div class="default text" style="color: rgba(0,0,0,.87);"> Ascend NPU</div> | |||
<i class="dropdown icon"></i> | |||
<div class="menu"> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain" data-value="11">CPU / GPU</a> | |||
<a class="item" href="{{.RepoLink}}/modelarts/notebook" data-value="22">Ascend NPU</a> | |||
<a class="item" href="{{.RepoLink}}/debugjob" data-value="11">全部</a> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain" data-value="22">CPU / GPU</a> | |||
<a class="item" href="{{.RepoLink}}/modelarts/notebook" data-value="33">Ascend NPU</a> | |||
</div> | |||
</div> | |||
{{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a class="ui green button" href="{{.RepoLink}}/modelarts/notebook/create">{{$.i18n.Tr "repo.modelarts.train_job.new_debug"}}</a>{{end}} | |||
</div> | |||
</div> | |||
{{if eq 0 (len .Tasks)}} | |||
<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"> | |||
<div class="bgtask-content-txt">代码版本:您还没有初始化代码仓库,请先<a href="{{.RepoLink}}">创建代码版本</a>;</div> | |||
<div class="bgtask-content-txt">运行时长:最长不超过4个小时,超过4个小时将自动停止;</div> | |||
<div class="bgtask-content-txt">数据集:云脑1提供 CPU / GPU 资源,云脑2提供 Ascend NPU 资源,调试使用的数据集也需要上传到对应的环境。</div> | |||
<div class="bgtask-content-txt">使用说明:可以参考启智AI协作平台<a href="https://git.openi.org/zeizei/OpenI_Learning">小白训练营课程</a></div> | |||
</div> | |||
</div> | |||
{{else}} | |||
<!-- 中下列表展示区 --> | |||
<div class="ui grid"> | |||
<div class="row"> | |||
@@ -255,58 +266,67 @@ | |||
<!-- 表头 --> | |||
<div class="ui grid stackable" style="background: #f0f0f0;;"> | |||
<div class="row"> | |||
<div class="six wide column"> | |||
<span style="margin:0 6px">{{$.i18n.Tr "repo.cloudbrain_task"}}</span> | |||
<div class="four wide column"> | |||
<span style="margin:0 6px">{{$.i18n.Tr "repo.cloudbrain_task"}}</span> | |||
</div> | |||
<div class="three wide column"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_status_createtime"}}</span> | |||
<div class="two wide column text center"> | |||
<span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.status"}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span> | |||
</div> | |||
<div class="one wide column text center"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span> | |||
</div> | |||
<div class="five wide column text center"> | |||
<span style="margin-left: 5rem;">{{$.i18n.Tr "repo.cloudbrain_operate"}}</span> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span> | |||
</div> | |||
</div> | |||
</div> | |||
{{range .Tasks}} | |||
<div class="ui grid stackable item"> | |||
<div class="row"> | |||
<div class="row"> | |||
<!-- 任务名 --> | |||
<div class="six wide column"> | |||
<div class="four wide column"> | |||
<a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 14px;"> | |||
<span class="fitted" style="width: 90%;vertical-align: middle;">{{.JobName}}</span> | |||
</a> | |||
</div> | |||
<div class="three wide column"> | |||
<div class="two wide column text center"> | |||
<!--任务状态 --> | |||
<span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
<span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span> | |||
</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<!--任务状态 --> | |||
<!-- <span class="ui compact button job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
{{.Status}} | |||
</span> --> | |||
<span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
<span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span> | |||
</span> | |||
<!-- 任务创建时间 --> | |||
<span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span> | |||
</div> | |||
<div class="two wide column text center"> | |||
<!-- 任务计算资源 --> | |||
<span style="font-size: 12px;margin-left: 0.4rem;" class="">{{.ComputeResource}}</span> | |||
</div> | |||
<div class="one wide column text center"> | |||
{{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="five wide column text right"> | |||
<div class="five wide column text center"> | |||
<div class="ui compact buttons"> | |||
<!-- <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}"> | |||
查看 | |||
@@ -335,7 +355,6 @@ | |||
</form> | |||
</div> | |||
<!-- <div class="ui compact buttons" style="margin-right:10px;"> --> | |||
<!-- 模型下载 --> | |||
<!-- <a class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank"> | |||
@@ -362,10 +381,6 @@ | |||
{{end}} | |||
</form> | |||
</div> | |||
</div> | |||
</div> | |||
{{end}} {{template "base/paginate" .}} | |||
@@ -374,7 +389,7 @@ | |||
</div> | |||
</div> | |||
</div> | |||
{{end}} | |||
</div> | |||
</div> | |||
@@ -207,52 +207,14 @@ | |||
<!-- 列表容器 --> | |||
<div class="ui container"> | |||
{{template "base/alert" .}} | |||
<!-- 中间云脑和新建任务按钮 --> | |||
<!-- <div class="ui three column stack able grid"> | |||
<div class="column"> | |||
<h2>{{.i18n.Tr "repo.cloudbrain2"}}</h2> | |||
</div> | |||
<div class="column"> | |||
</div> | |||
<div class="column right aligned"> | |||
{{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a class="ui green button" href="{{.RepoLink}}/modelarts/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}} | |||
</div> | |||
<div class="column right aligned"> | |||
{{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a class="ui blue button" href="{{.RepoLink}}/modelarts/train-job/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}} | |||
</div> | |||
</div> | |||
<p>使用鹏城云脑计算资源进行调试,云脑1提供CPU / GPU资源,云脑2提供Ascend NPU资源;调试使用的数据集也需要上传到对应的环境。</p> | |||
<div class="ui blue mini menu selectcloudbrain"> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain">{{svg "octicon-server" 16}} CPU / GPU</a> | |||
<a class="active item" href="{{.RepoLink}}/modelarts">{{svg "octicon-server" 16}} Ascend NPU</a> | |||
</div> --> | |||
<div class="ui two column stackable grid "> | |||
<div class="column"> | |||
<div class="ui blue small menu compact selectcloudbrain"> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain">{{$.i18n.Tr "repo.modelarts.notebook"}}</a> | |||
<a class="item" href="{{.RepoLink}}/debugjob">{{$.i18n.Tr "repo.modelarts.notebook"}}</a> | |||
<a class="active item" href="{{.RepoLink}}/modelarts/train-job">{{$.i18n.Tr "repo.modelarts.train_job"}}</a> | |||
</div> | |||
</div> | |||
<div class="column right aligned"> | |||
<!-- <div class="ui selection dropdown" style="min-width: 10em;min-height:2.6em;border-radius: .28571429rem;margin-right: 1em;padding: .67em 3.2em .7em 1em;"> | |||
{{svg "octicon-server" 16}} | |||
<div class="default text" style="color: rgba(0,0,0,.87);"> Ascend NPU</div> | |||
<i class="dropdown icon"></i> | |||
<div class="menu"> | |||
<a class="item" href="{{.RepoLink}}/cloudbrain" data-value="11">CPU / GPU</a> | |||
<a class="item" href="{{.RepoLink}}/modelarts/notebook" data-value="22">Ascend NPU</a> | |||
</div> | |||
</div> --> | |||
{{if .Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a class="ui green button" href="{{.RepoLink}}/modelarts/train-job/create">{{$.i18n.Tr "repo.modelarts.train_job.new_train"}}</a>{{end}} | |||
</div> | |||
@@ -262,22 +224,6 @@ | |||
<div class="ui grid"> | |||
<div class="row"> | |||
<div class="ui sixteen wide column"> | |||
<!-- 排序区 --> | |||
<!-- <div class="ui sixteen wide column"> | |||
<div class="ui two column stackable grid"> | |||
<div class="column"> | |||
</div> | |||
<div class="column right aligned"> | |||
<div class="ui right dropdown type jump item"> | |||
<span class="text"> | |||
{{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i> | |||
</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> --> | |||
<!-- 任务展示 --> | |||
<div class="dataset list"> | |||
@@ -308,13 +254,9 @@ | |||
<div class="three wide column text center padding0"> | |||
<span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
{{range .Tasks}} | |||
<div class="ui grid stackable item"> | |||
<div class="row"> | |||
@@ -340,14 +282,6 @@ | |||
<div class="two wide column text center padding0"> | |||
<span style="font-size: 12px;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span> | |||
</div> | |||
<!-- <div class="two wide column"> | |||
<span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}"> | |||
<span><i id="{{.JobID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.JobID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span> | |||
</span> | |||
<span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span> | |||
</div> --> | |||
<!-- 任务运行时间 --> | |||
<div class="two wide column text center padding0"> | |||
<span style="font-size: 12px;" id="duration-{{.JobID}}"></span> | |||
@@ -366,27 +300,6 @@ | |||
</div> | |||
<div class="three wide column text center padding0"> | |||
<!-- <div class="ui compact buttons"> | |||
<form id="stopForm-{{.JobID}}" action="/api/v1/repos{{$.Link}}/{{.JobID}}/stop_version" method="post"> | |||
<input type="hidden" name="version_name" value="{{.VersionName}}"> | |||
{{$.CsrfTokenHtml}} | |||
{{if $.Permission.CanWrite $.UnitTypeCloudBrain}} | |||
<a style="padding: 0.5rem 1rem;" id="stop-model-debug-{{.JobID}}" class="ui basic {{if eq .Status "KILLED" "FAILED" "START_FAILED" "KILLING" "COMPLETED"}}disabled {{else}}blue {{end}}button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();"> | |||
{{$.i18n.Tr "repo.stop"}} | |||
</a> | |||
{{else}} | |||
<a style="padding: 0.5rem 1rem;" class="ui basic disabled button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();"> | |||
{{$.i18n.Tr "repo.stop"}} | |||
</a> | |||
{{end}} | |||
</form> | |||
</div> --> | |||
<!-- 模型下载 --> | |||
<!-- <div class="ui compact buttons"> | |||
<a style="padding: 0.5rem;" class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank"> | |||
{{$.i18n.Tr "repo.model_download"}} | |||
</a> | |||
</div> --> | |||
<!-- 删除任务 --> | |||
<div class="ui compact buttons"> | |||
{{$.CsrfTokenHtml}} | |||
@@ -573,7 +573,12 @@ td, th { | |||
}, | |||
onApprove: function() { | |||
$.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/del_version`,{version_name:version_name},(data)=>{ | |||
$('#accordion'+version_name).remove() | |||
if(data.VersionListCount===0){ | |||
location.href=`/${userName}/${repoPath}/modelarts/train-job` | |||
}else{ | |||
$('#accordion'+version_name).remove() | |||
} | |||
}).fail(function(err) { | |||
console.log(err); | |||
}); | |||
@@ -657,12 +662,6 @@ td, th { | |||
} | |||
} | |||
function downloadModelFile(version_name,filename){ | |||
$.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_download?version_name=${version_name}&file_name=${filename}`, (data) => { | |||
console.log(data) | |||
}) | |||
} | |||
function renderDir(data,version_name){ | |||
let html="" | |||
html += "<div class='ui grid' style='margin:0;'>" | |||
@@ -336,4 +336,36 @@ display: block; | |||
margin-left: 4px !important; | |||
color: #3291F8; | |||
} | |||
//缺省页 | |||
.bgtask-none{ | |||
background: #fff !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
padding-bottom: 0 !important; | |||
padding-top: 2em !important; | |||
} | |||
.bgtask-header-pic { | |||
height: 80px; | |||
text-align: center; | |||
background: url(//ai-studio-static-online.cdn.bcebos.com/aistudio/dist/1638363279337/images/search_empty.png) top no-repeat; | |||
background-size: 80px 80px; | |||
} | |||
.bgtask-content{ | |||
margin: 2rem auto 0; | |||
/* width: 500px; */ | |||
text-align: left; | |||
} | |||
.bgtask-content-txt { | |||
font-size: 14px; | |||
color: #a6a6a6; | |||
line-height: 22px; | |||
margin-bottom: 4px; | |||
} | |||
.bgtask-content-header { | |||
text-align: center; | |||
color: #3F3F40; | |||
font-size: 18px; | |||
margin-bottom: 1rem; | |||
} |