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

450 lines
22 kB
Raw Blame History 

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

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

  3. 

  4. <style>

  5.     .fontsize14{

  6.         font-size: 14px;

  7.     }

  8.     .padding0{

  9.         padding: 0 !important;

  10.     }

  11. </style>

  12. 

  13. <!-- 弹窗 -->

  14. <div id="mask">

  15.     <div id="loadingPage">

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

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

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

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

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

  21.     </div>

  22. </div>

  23. 

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

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

  26. 

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

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

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

  30.     <div class="ui container">

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

  32. 

  33.         <!-- 中间云脑和新建任务按钮 -->

  34.         <!-- <div class="ui three column stack able grid">

  35.             <div class="column">

  36.                 <h2>{{.i18n.Tr "repo.cloudbrain2"}}</h2>

  37.             </div>

  38. 

  39.             <div class="column">

  40.             </div>

  41. 

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

  43.                 {{if .Permission.CanWrite $.UnitTypeCloudBrain}}

  44.                 <a class="ui green button" href="{{.RepoLink}}/modelarts/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}}

  45.             </div>

  46. 

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

  48.                 {{if .Permission.CanWrite $.UnitTypeCloudBrain}}

  49.                 <a class="ui blue button" href="{{.RepoLink}}/modelarts/train-job/create">{{.i18n.Tr "repo.cloudbrain.new"}}</a> {{end}}

  50.             </div>

  51.         </div>

  52. 

  53.         <p>使用鹏城云脑计算资源进行调试，云脑1提供CPU / GPU资源，云脑2提供Ascend NPU资源；调试使用的数据集也需要上传到对应的环境。</p>

  54.         <div class="ui blue mini menu selectcloudbrain">

  55.             <a class="item" href="{{.RepoLink}}/cloudbrain">{{svg "octicon-server" 16}} CPU / GPU</a>

  56.             <a class="active item" href="{{.RepoLink}}/modelarts">{{svg "octicon-server" 16}} Ascend NPU</a>

  57.         </div> -->

  58. 

  59.         <div class="ui two column stackable grid ">

  60. 

  61.                 <div class="column">

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

  63.                         <a class="item" href="{{.RepoLink}}/cloudbrain">{{$.i18n.Tr "repo.modelarts.notebook"}}</a>

  64.                         <a class="active item" href="{{.RepoLink}}/modelarts/train-job">{{$.i18n.Tr "repo.modelarts.train_job"}}</a>

  65.                     </div>

  66.                 </div>

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

  68.     

  69.                     <!-- <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;">

  70.                         {{svg "octicon-server" 16}}

  71.                         <div class="default text" style="color: rgba(0,0,0,.87);"> Ascend NPU</div>

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

  73.                         <div class="menu">

  74.                             <a class="item" href="{{.RepoLink}}/cloudbrain" data-value="11">CPU / GPU</a>

  75.                             <a class="item" href="{{.RepoLink}}/modelarts/notebook" data-value="22">Ascend NPU</a>

  76.                         </div>

  77.                     </div> -->

  78.                     {{if .Permission.CanWrite $.UnitTypeCloudBrain}}       

  79.                     <a class="ui green button" href="{{.RepoLink}}/modelarts/train-job/create">{{$.i18n.Tr "repo.modelarts.train_job.new_train"}}</a>{{end}}

  80.                 </div>

  81.         </div>

  82. 

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

  84.         <div class="ui grid">

  85.             <div class="row">

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

  87. 

  88.                     <!-- 排序区 -->

  89.                     <!-- <div class="ui sixteen wide column">

  90.                         <div class="ui two column stackable grid">

  91.                             <div class="column">

  92.                             </div>

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

  94.                                 <div class="ui right dropdown type jump item">

  95.                                     <span class="text">

  96.                                         {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>

  97.                                     </span>

  98.                                 </div>

  99.                             </div>

  100.                         </div>

  101.                     </div> -->

  102. 

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

  104.                     <div class="dataset list">

  105. 

  106.                      <!-- 表头 -->

  107.                         <div class="ui grid stackable" style="background: #f0f0f0;;">

  108.                             <div class="row">

  109.                                 <div class="three wide column padding0">

  110.                                     <span style="margin:0 6px">{{$.i18n.Tr "repo.cloudbrain_task"}}</span>

  111.                                 </div>

  112.                                 <div class="one wide column text center padding0">

  113.                                     <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version_nums"}}</span>

  114.                                 </div>

  115.                                 <div class="two wide column text center padding0">

  116.                                     <span>{{$.i18n.Tr "repo.modelarts.status"}}</span>

  117.                                 </div>

  118.                                 <div class="two wide column text center padding0">

  119.                                         <span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span>

  120.                                 </div>

  121.                                 <div class="two wide column text center padding0">

  122.                                     <span>{{$.i18n.Tr "repo.cloudbrain_status_runtime"}}</span>

  123.                                 </div>

  124.                                 <div class="two wide column text center padding0">

  125.                                         <span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span> 

  126.                                 </div>

  127.                                 <div class="one wide column text center padding0">

  128.                                     <span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span> 

  129.                                 </div>

  130.                                 <div class="three wide column text center padding0">

  131.                                     <span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span>

  132.                                 </div>

  133. 

  134.                             </div>

  135.                         

  136.                         </div>                     

  137. 

  138. 

  139. 

  140.                         {{range .Tasks}}

  141.                         <div class="ui grid stackable item">

  142.                             <div class="row">

  143.                             

  144.                                 <!-- 任务名 -->

  145.                                 <div class="three wide column padding0">

  146.                                     <a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 14px;">

  147.                                         

  148.                                         <span class="fitted" style="width: 90%;vertical-align: middle;">{{.JobName}}</span>

  149.                                     </a>

  150.                                 </div>

  151.                                 <!-- 版本数量 -->

  152.                                 <div class="one wide column text center padding0">   

  153.                                     <span style="font-size: 12px;">{{.VersionCount}} </span>                                  

  154.                                 </div>

  155.                                 <!-- 任务状态 -->

  156.                                 <div class="two wide column padding0" style="padding-left: 2.2rem !important;">

  157.                                     <span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" data-version="{{.VersionName}}">

  158.                                             <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>

  159.                                     </span>

  160.                                 </div>

  161.                                 <!-- 任务创建时间 -->

  162.                                 <div class="two wide column text center padding0">

  163.                                     <span style="font-size: 12px;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span>

  164.                                 </div>

  165.                                 <!-- <div class="two wide column">

  166.                                 

  167.                                     <span class="job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">

  168.                                             <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>

  169.                                     </span>

  170.                                     

  171.                                     <span style="font-size: 12px;margin-left: 0.4rem;" class="">{{TimeSinceUnix .Cloudbrain.CreatedUnix $.Lang}}</span>

  172.                                 </div> -->

  173.                                 <!-- 任务运行时间 -->

  174.                                 <div class="two wide column text center padding0"> 

  175.                                     <span style="font-size: 12px;" id="duration-{{.JobID}}"></span> 

  176.                                 </div>

  177.                                 <!-- 计算资源 -->

  178.                                 <div class="two wide column text center padding0">

  179.                                     <span style="font-size: 12px;">{{.ComputeResource}}</span> 

  180.                                 </div>

  181.                                 <!-- 创建者 -->

  182.                                 <div class="one wide column text center padding0">

  183.                                     {{if .User.Name}}

  184.                                         <a href="{{AppSubUrl}}/{{.User.Name}}" title="{{.User.Name}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}"></a>

  185.                                     {{else}}

  186.                                         <a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>

  187.                                     {{end}}

  188.                                 </div>

  189. 

  190.                                 <div class="three wide column text center padding0">

  191.                                     <!-- <div class="ui compact buttons">

  192.                                         <form id="stopForm-{{.JobID}}" action="/api/v1/repos{{$.Link}}/{{.JobID}}/stop_version" method="post">

  193.                                             <input type="hidden" name="version_name" value="{{.VersionName}}">

  194.                                             {{$.CsrfTokenHtml}}

  195.                                             {{if $.Permission.CanWrite $.UnitTypeCloudBrain}}

  196.                                             <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();">

  197.                                                 {{$.i18n.Tr "repo.stop"}}

  198.                                             </a>

  199.                                             {{else}}

  200.                                             <a style="padding: 0.5rem 1rem;" class="ui basic disabled button" onclick="document.getElementById('stopForm-{{.JobID}}').submit();">

  201.                                                     {{$.i18n.Tr "repo.stop"}}

  202.                                             </a>

  203.                                             {{end}}

  204.                                         </form>

  205.                                     </div> -->

  206.                                     <!-- 模型下载 -->

  207.                                     <!-- <div class="ui compact buttons">

  208.                                             <a  style="padding: 0.5rem;" class="ui basic blue button" href="{{$.Link}}/{{.JobID}}/models" target="_blank">

  209.                                                 {{$.i18n.Tr "repo.model_download"}}

  210.                                             </a>

  211.                                     </div> -->

  212.                                     <!-- 删除任务 -->

  213.                                     <div class="ui compact buttons">

  214.                                         {{$.CsrfTokenHtml}}

  215.                                         {{if $.Permission.CanWrite $.UnitTypeCloudBrain}}

  216.                                         <a style="padding: 0.5rem 1rem;" id="{{.VersionName}}-stop" class="ui basic {{if eq .Status "KILLED" "FAILED" "START_FAILED" "KILLING" "COMPLETED"}}disabled {{else}} blue {{end}}button" onclick="stopVersion({{.VersionName}},{{.JobID}})">

  217.                                             {{$.i18n.Tr "repo.stop"}}

  218.                                         </a>

  219.                                         {{else}}

  220.                                         <a style="padding: 0.5rem 1rem;" id="{{.VersionName}}-stop" class="ui basic disabled button">

  221.                                                 {{$.i18n.Tr "repo.stop"}}

  222.                                         </a>

  223.                                         {{end}}

  224. 

  225.                                     </div>

  226.                                     <form class="ui compact buttons" id="delForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/del" method="post">

  227.                                         {{$.CsrfTokenHtml}}

  228.                                         {{if $.Permission.CanWrite $.UnitTypeCloudBrain}}

  229.                                         <a style="padding: 0.5rem 1rem;margin-left:0.2rem" id="model-delete-{{.JobID}}" class="ui basic blue button" onclick="assertDelete(this)" style="border-radius: .28571429rem;">

  230.                                             {{$.i18n.Tr "repo.delete"}}

  231.                                         </a>

  232.                                         {{else}}

  233.                                         <a  style="padding: 0.5rem 1rem;margin-left:0.2rem" class="ui basic button disabled" onclick="assertDelete(this)" style="border-radius: .28571429rem;">

  234.                                                 {{$.i18n.Tr "repo.delete"}}

  235.                                         </a>

  236.                                         {{end}}

  237.                                     </form>

  238.                                 </div>

  239.                             </div>

  240.                         </div>

  241.                         {{end}} {{template "base/paginate" .}}

  242.                     </div>

  243. 

  244.                 </div>

  245.             </div>

  246.         </div>

  247. 

  248.     </div>

  249. 

  250. </div>

  251. </div>

  252. 

  253. </div>

  254. 

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

  256. <div id="deletemodel">

  257.     <div class="ui basic modal">

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

  259.             <i class="trash icon"></i> 删除任务

  260.         </div>

  261. 

  262.         <div class="content">

  263.             <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>

  264.         </div>

  265.         <div class="actions">

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

  267.                 <i class="remove icon"></i> 取消操作

  268.             </div>

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

  270.                 <i class="checkmark icon"></i> 确定操作

  271.             </div>

  272.         </div>

  273.     </div>

  274. </div>

  275. 

  276. </div>

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

  278. 

  279. <script>

  280. 

  281.     console.log({{.Tasks}})

  282.     // 调试和评分新开窗口

  283.     function stop(obj) {

  284.         if (obj.style.color != "rgb(204, 204, 204)") {

  285.             obj.target = '_blank'

  286.         } else {

  287.             return

  288.         }

  289.     }

  290. 

  291.     // 删除时用户确认

  292.     function assertDelete(obj) {

  293.         if (obj.style.color == "rgb(204, 204, 204)") {

  294.             return

  295.         } else {

  296.             var delId = obj.parentNode.id

  297.             flag = 1;

  298.             $('.ui.basic.modal')

  299.                 .modal({

  300.                     onDeny: function() {

  301.                         flag = false

  302.                     },

  303.                     onApprove: function() {

  304.                         document.getElementById(delId).submit()

  305.                         flag = true

  306.                     },

  307.                     onHidden: function() {

  308.                         if (flag == false) {

  309.                             $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();

  310.                         }

  311.                     }

  312.                 })

  313.                 .modal('show')

  314.         }

  315.     }

  316.     function runtime(time){

  317.                     if(time){

  318.                         let hours = time/3600000<10 ? "0"+parseInt(time/3600000):parseInt(time/3600000)

  319.                         let miuns = time%3600000/60000<10 ? "0"+parseInt(time%3600000/60000):parseInt(time%3600000/60000)

  320.                         let seconds = time%60000/1000<10 ? "0"+parseInt(time%60000/1000):parseInt(time%60000/1000)

  321.                         return hours + ":" + miuns + ":" + seconds

  322.                     }else{

  323.                         return "00:00:00"

  324.                     }

  325.     }

  326. 

  327.     function loadJobDuration() {

  328.         $(".job-status").each((index, job) => {

  329.             const jobID = job.dataset.jobid;

  330.             const repoPath = job.dataset.repopath;

  331.             const versionname = job.dataset.version

  332.             $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {

  333.                     console.log(data)

  334.                     const duration = data.JobDuration

  335.                     const jobID = data.JobID

  336.                     $('#duration-'+jobID).text(duration)

  337.             })

  338.             

  339.         })

  340.     }

  341.     $(document).ready(loadJobDuration);

  342.     // 加载任务状态

  343.     var timeid = window.setInterval(loadJobStatus, 15000);

  344.     $(document).ready(loadJobStatus);

  345.     function loadJobStatus() {

  346.         $(".job-status").each((index, job) => {

  347.             const jobID = job.dataset.jobid;

  348.             const repoPath = job.dataset.repopath;

  349.             const versionname = job.dataset.version

  350.             if (job.textContent.trim() == 'IMAGE_FAILED' || job.textContent.trim() == 'SUBMIT_FAILED' || job.textContent.trim() == 'DELETE_FAILED'

  351.                 || job.textContent.trim() == 'KILLED' || job.textContent.trim() == 'COMPLETED' || job.textContent.trim() == 'FAILED'

  352.                 || job.textContent.trim() == 'CANCELED' || job.textContent.trim() == 'LOST') {

  353.                 return

  354.             }

  355. 

  356.             $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}?version_name=${versionname}`, (data) => {

  357.                 const jobID = data.JobID

  358.                 const status = data.JobStatus

  359.                 const duration = data.JobDuration

  360.                 $('#duration-'+jobID).text(duration)

  361.                 if (status != job.textContent.trim()) {

  362.                     $('#' + jobID+'-icon').removeClass().addClass(status)

  363.                     $('#' + jobID+ '-text').text(status)

  364. 

  365.                 }

  366.                 

  367.             }).fail(function(err) {

  368.                 console.log(err);

  369.             });

  370.         });

  371.     };

  372.     

  373.     // 获取弹窗

  374.     var modal = document.getElementById('imageModal');

  375. 

  376.     // 打开弹窗的按钮对象

  377.     var btns = document.getElementsByClassName("imageBtn");

  378. 

  379.     // 获取 <span> 元素，用于关闭弹窗

  380.     var spans = document.getElementsByClassName('close');

  381. 

  382.     // 点击按钮打开弹窗

  383.     for (i = 0; i < btns.length; i++) {

  384.         btns[i].onclick = function() {

  385.             modal.style.display = "block";

  386.         }

  387.     }

  388. 

  389.     // 点击 <span> (x), 关闭弹窗

  390.     for (i = 0; i < spans.length; i++) {

  391.         spans[i].onclick = function() {

  392.             modal.style.display = "none";

  393.         }

  394.     }

  395. 

  396.     // 在用户点击其他地方时，关闭弹窗

  397.     window.onclick = function(event) {

  398.         if (event.target == modal) {

  399.             modal.style.display = "none";

  400.         }

  401.     }

  402.     function stopVersion(version_name,jobID){

  403.         

  404.         const url = '/api/v1/repos/{{$.RepoRelPath}}/modelarts/train-job/'+jobID+'/stop_version'

  405.         $.post(url,{version_name:version_name},(data)=>{

  406.             if(data.StatusOK===0){

  407.                 $('#'+version_name+'-stop').removeClass('blue')

  408.                 $('#'+version_name+'-stop').addClass('disabled')

  409.                 refreshStatus(version_name,jobID)

  410.             }

  411.         }).fail(function(err) {

  412.             console.log(err);	            

  413.         });

  414.     }

  415.     function refreshStatus(version_name,jobID){

  416. 

  417.         const url = '/api/v1/repos/{{$.RepoRelPath}}/modelarts/train-job/'+jobID+'?version_name='+version_name

  418.         $.get(url,(data)=>{

  419.             

  420.             

  421.             $(`#${jobID}-icon`).attr("class",data.JobStatus)

  422.             // detail status and duration

  423.             

  424.             $(`#${jobID}-text`).text(data.JobStatus)

  425. 

  426. 

  427.         }).fail(function(err) {

  428.             console.log(err);

  429.         });

  430.         

  431.     }

  432.     // 显示弹窗，弹出相应的信息

  433.     function showmask() {

  434.         $('#imageModal').css('display', 'none')

  435.         $('#mask').css('display', 'block')

  436. 

  437.         $("iframe[name=iframeContent]").on("load", function() {　　

  438.             var responseText = $("iframe")[0].contentDocument.body.getElementsByTagName("pre")[0].innerHTML;　

  439.             var json1 = JSON.parse(responseText)

  440.             $('#mask').css('display', 'none')

  441.             parent.location.href

  442. 

  443.             if (json1.result_code === "0") {

  444.                 $('.alert').html('操作成功!').removeClass('alert-danger').addClass('alert-success').show().delay(1500).fadeOut();

  445.             } else {

  446.                 $('.alert').html(json1.error_msg).removeClass('alert-success').addClass('alert-danger').show().delay(5000).fadeOut();

  447.             }

  448.         })

  449.     }

  450. </script>