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: 9ce3d46b32
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9ce3d46b32'
${ noResults }
aiforge/templates/repo/cloudbrain/trainjob/new.tmpl

451 lines
20 kB
Raw Blame History 

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

  2. <style>

  3. 

  4. .unite{

  5.     font-family: SourceHanSansSC-medium !important;

  6.     color: rgba(16, 16, 16, 100) !important;

  7. }

  8. 

  9. .title{

  10.     font-size: 16px !important;

  11.     padding-left: 3rem !important;

  12. }

  13. .min_title{

  14.     font-size: 14px !important;

  15.     padding-left: 6rem !important;

  16.     margin-bottom: 2rem !important;

  17. 

  18. }

  19. .width{

  20.     width:100% !important;

  21. }

  22. .width80{

  23.     width: 80.7% !important;

  24.     margin-left: 10px;

  25. }

  26. .width806{

  27.     width: 80.6% !important;

  28.     margin-left: -2px;

  29. }

  30. .width85{

  31.     width: 85% !important;

  32.     margin-left: 4.5rem !important;

  33. }

  34. .width81{

  35.     margin-left: 1.5rem !important;

  36.     width: 81% !important;

  37. }

  38. 

  39. .add{font-size: 18px;

  40.     padding: 0.5rem;

  41.     border: 1px solid rgba(187, 187, 187, 100);

  42.     border-radius: 0px 5px 5px 0px;

  43.     line-height: 21px;

  44.     text-align: center;

  45.     color: #C2C7CC;

  46. }

  47. .min{

  48.     font-size: 18px;

  49.     padding: 0.5rem;

  50.     border: 1px solid rgba(187, 187, 187, 100);

  51.     border-radius: 5px 0px 0px 5px;

  52.     line-height: 21px;

  53.     text-align: center;

  54.     color: #C2C7CC;

  55. }

  56. 

  57. </style>

  58. <!-- <div class="ui page dimmer">

  59.     <div class="ui text loader">{{.i18n.Tr "loading"}}</div>

  60. </div> -->

  61. <div id="mask">

  62.         <div id="loadingPage">

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

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

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

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

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

  68.         </div>

  69. </div>

  70. <div class="repository">

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

  72.     <div class="ui container">

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

  74.         <h4 class="ui top attached header">

  75.             {{.i18n.Tr "repo.modelarts.train_job.new"}}

  76.         </h4>

  77.         <div class="ui attached segment">

  78.             <!-- equal width  -->

  79.             <form class="ui form" action="{{.Link}}" method="post">

  80.                 {{.CsrfTokenHtml}}

  81.                 <input type="hidden" name="action" value="update">

  82.                 <input type="hidden" id="ai_engine_name" name="engine_names" value="">

  83.                 <input type="hidden" id="ai_flaver_name" name="flaver_names" value="">

  84.                 <h4 class="unite title ui header ">{{.i18n.Tr "repo.modelarts.train_job.basic_info"}}:</h4>

  85.                 <div class="required unite min_title inline field">

  86.                     <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.compute_resource"}}</label>

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

  88.                         <a class="active item" href="{{.RepoLink}}/cloudbrain/train-job/create">

  89.                             <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">

  90.                                 <path fill="none" d="M0 0h24v24H0z"/>

  91.                                 <path d="M3 2.992C3 2.444 3.445 2 3.993 2h16.014a1 1 0 0 1 .993.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992zM19 11V4H5v7h14zm0 2H5v7h14v-7zM9 6h6v2H9V6zm0 9h6v2H9v-2z"/>

  92.                             </svg>

  93.                             CPU/GPU

  94.                         </a>

  95.                         <a class="item" href="{{.RepoLink}}/modelarts/train-job/create">

  96.                             <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">

  97.                                 <path fill="none" d="M0 0h24v24H0z"/>

  98.                                 <path d="M3 2.992C3 2.444 3.445 2 3.993 2h16.014a1 1 0 0 1 .993.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992zM19 11V4H5v7h14zm0 2H5v7h14v-7zM9 6h6v2H9V6zm0 9h6v2H9v-2z"/>

  99.                             </svg>

  100.                             Ascend NPU</a>

  101.                     </div>

  102.                 </div>

  103.                 <div class="required unite min_title inline field">

  104.                     <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>

  105.                     <input style="width: 60%;" name="display_job_name" id="display_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}" tabindex="3" onkeyup="this.value=this.value.replace(/[, ]/g,'')" autofocus required maxlength="64">

  106.                     <span class="tooltips" style="display: block;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>

  107.                 </div>

  108.                 

  109.                 <div class="unite min_title inline field">

  110.                     <label style="font-weight: normal;" for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}&nbsp;&nbsp;</label>

  111.                     <textarea style="width: 80%;" 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, 255)"></textarea>

  112.                 </div>

  113.                 <div class="ui divider"></div>

  114. 

  115.                 <h4 class="unite title ui header ">{{.i18n.Tr "repo.modelarts.train_job.parameter_setting"}}:</h4>

  116.                 

  117. 

  118.                 <div class="required unite min_title inline field">

  119.                         <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.code_version"}}</label>

  120.                         <select class="ui dropdown width80 left2" id="code_version" name="branch_name">

  121.                             {{if .branch_name}}

  122.                                 <option name="branch_name" value="{{.branch_name}}">{{.branch_name}}</option>

  123.                                 {{range $k, $v :=.Branches}}

  124.                                     {{ if ne $v $.branch_name }}

  125.                                     <option name="branch_name" value="{{$v}}">{{$v}}</option>

  126.                                     {{end}}

  127.                                 {{end}}

  128.                             {{else}}

  129.                                 <option name="branch_name" value="{{.branchName}}">{{.branchName}}</option>

  130.                                 {{range $k, $v :=.Branches}}

  131.                                     {{ if ne $v $.branchName }}

  132.                                     <option name="branch_name" value="{{$v}}">{{$v}}</option>

  133.                                     {{end}}

  134.                                 {{end}}

  135.                             {{end}}

  136.                         </select>

  137.                 </div>

  138. 

  139.                 <div class="inline required field" style="display: none;">

  140.                     <label>{{.i18n.Tr "cloudbrain.task_type"}}</label>

  141.                     <select id="cloudbrain_job_type" class="ui search dropdown" placeholder="选择任务类型" style='width:385px' name="job_type">

  142.                         <option name="job_type" value="TRAIN">TRAIN</option>

  143.                     </select>

  144.                 </div>

  145. 

  146.                 <div class="required unite min_title inline field">

  147.                     <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.gpu_type"}}</label>

  148.                     <select id="cloudbrain_gpu_type" class="ui search width806 dropdown" placeholder="选择GPU类型" style='width:385px' name="gpu_type">

  149.                         {{range .train_gpu_types}}

  150.                             <option value="{{.Queue}}">{{.Value}}</option>

  151.                         {{end}}

  152.                     </select>

  153.                 </div>

  154. 

  155.                 <div class="required unite min_title inline field" style="position: relative;">

  156.                     <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.mirror"}}&nbsp;</label>

  157.                     <input class="width81" type="text" list="cloudbrain_image" placeholder="{{.i18n.Tr "cloudbrain.choose_mirror"}}" name="image" required autofocus maxlength="255">

  158.                     <i class="times circle outline icon icons" style="visibility: hidden;" onclick="clearValue()"></i>

  159.                     <datalist class="ui search" id="cloudbrain_image" name="image">

  160.                         {{range .images}}

  161.                             <option name="image" value="{{.Place}}">{{.PlaceView}}</option>

  162.                         {{end}}

  163.                         {{range .public_images}}

  164.                             <option name="image" value="{{.Place}}">{{.PlaceView}}</option>

  165.                         {{end}}

  166.                     </datalist>

  167.                 </div>

  168. 

  169.                 <div class="inline unite min_title field required">

  170.                         <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>

  171.                         {{if .bootFile}}

  172.                             <input style="width: 33.5%;" name="boot_file" id="trainjob_boot_file" value="{{.bootFile}}" tabindex="3" autofocus required maxlength="255" >

  173.                         {{else}}

  174.                             <input style="width: 33.5%;" name="boot_file" id="trainjob_boot_file" value="" tabindex="3" autofocus required maxlength="255" >

  175.                         {{end}}

  176.                         <span>

  177.                             <i class="question circle icon  link" data-content={{.i18n.Tr "repo.modelarts.train_job.boot_file_helper"}} data-position="right center" data-variation="mini"></i>

  178.                         </span>

  179.                         <a  href="https://git.openi.org.cn/OpenIOSSG/MNIST_PytorchExample_GPU" target="_blank">查看样例</a>

  180.                 </div>

  181. 

  182.                 <div class="required unite min_title inline field" style="position: relative;">

  183.                     <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.dataset"}}</label>

  184.                     <select id="cloudbrain_dataset" class="ui search dropdown width80" placeholder="选择数据集" style='width:385px' name="attachment" required>

  185. 

  186.                         {{range .attachments}}

  187.                             <option name="attachment" value="{{.UUID}}">{{.Attachment.Name}}</option>

  188.                         {{end}}

  189.                     </select>

  190.                     <span class="tooltips">训练脚本存储在/code中，数据集存储在/dataset中，训练输出请存储在/model中以供后续下载。</span>

  191.                 </div>

  192.                 

  193.                 <div class="inline unite min_title field">

  194.                     <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>

  195.                     <span id="add_run_para" style="margin-left: 0.5rem;cursor:pointer;color: rgba(3, 102, 214, 100);font-size: 14px;line-height: 26px;font-family: SourceHanSansSC-medium;"><i class="plus square outline icon"></i>{{.i18n.Tr "repo.modelarts.train_job.add_run_parameter"}}</span>

  196.                     <input  id="store_run_para" type="hidden" name="run_para_list">

  197.                     <div class="dynamic field" style="margin-top: 1rem;">

  198.                     {{if .params}}

  199.                         {{if ne 0 (len .params)}}

  200.                             {{range $k ,$v := .params}}

  201.                                 <div class="two fields width85" id="para{{$k}}">

  202.                                     <div class="field">

  203.                                         <input type="text" name="shipping_first-name" value={{$v.Label}} required>

  204.                                     </div>

  205.                                     <div class="field">

  206.                                         <input type="text" name="shipping_last-name" value={{$v.Value}} required>

  207.                                     </div>

  208.                                     <span>

  209.                                         <i class="trash icon"></i>

  210.                                     </span>

  211. 

  212.                                 </div>

  213.                             {{end}}

  214.                         {{end}}

  215.                     {{end}}

  216.                     </div>

  217.                 </div>

  218. 

  219.                <div class="required inline unite min_title field">

  220.                     <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.resource_specification"}}</label>

  221.                     <select id="cloudbrain_resource_spec" class="ui search dropdown" placeholder="选择资源规格" style='width:385px' name="resource_spec_id">

  222.                         {{range .train_resource_specs}}

  223.                             <option name="resource_spec_id" value="{{.Id}}">GPU数：{{.GpuNum}}，CPU数：{{.CpuNum}}，内存(MB)：{{.MemMiB}}，共享内存(MB)：{{.ShareMemMiB}}</option>

  224.                         {{end}}

  225.                     </select>

  226.                 </div>

  227.                 

  228.                 <div class="inline unite min_title field">

  229.                     <button class="ui create_train_job green button">

  230.                     {{.i18n.Tr "repo.cloudbrain.new"}}

  231.                     </button>

  232.                     <a class="ui button" href="{{.RepoLink}}/modelarts/train-job">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>

  233.                 </div>

  234.                 

  235.                 <!-- 模态框 -->

  236.                 

  237.             </form>

  238.         </div>

  239.     </div>

  240. </div>

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

  242. 

  243. <script>

  244.     //let url_href = window.location.pathname.split('create')[0]

  245.     //$(".ui.button").attr('href',url_href)

  246.     $('select.dropdown')

  247.         .dropdown();

  248. 

  249.     $('.menu .item')

  250.         .tab();

  251. 

  252.     let sever_num = $('#trainjob_work_server_num')

  253.     $('.add').click(function(){

  254.         sever_num.val(parseInt(sever_num.val())+1)

  255.         if(sever_num.val()>=26){

  256.             sever_num.val(parseInt(sever_num.val())-1)

  257.         }

  258.     })

  259.     $('.min').click(function(){

  260.         sever_num.val(parseInt(sever_num.val())-1)

  261.         if(sever_num.val()<=0){

  262.             sever_num.val(parseInt(sever_num.val())+1)

  263.         }

  264.     })

  265.     // 参数增加、删除、修改、保存

  266.     function Add_parameter(i){

  267.         value = '<div class="two fields width85" id= "para'+ i +'">' +

  268.                     '<div class="field">' + 

  269.                         '<input type="text" name="shipping_first-name" required  placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_name"}}> ' + 

  270.                     '</div> ' + 

  271.                     '<div class="field"> ' +

  272.                         '<input type="text" name="shipping_last-name" required placeholder={{.i18n.Tr "repo.modelarts.train_job.parameter_value"}}>' +

  273.                     '</div>'+

  274.                     '<span>' +

  275.                         '<i class="trash icon">' +

  276.                         '</i>' +

  277.                     '</span>' +

  278.                 '</div>'

  279.         $(".dynamic.field").append(value)

  280.     }   

  281. 

  282.     $('#add_run_para').click(function(){

  283.         var len = $(".dynamic.field .two.fields").length

  284.         Add_parameter(len)

  285.     });

  286. 

  287.     $(".dynamic.field").on("click",".trash.icon", function() {

  288.         var index = $(this).parent().parent().index()

  289.         $(this).parent().parent().remove()

  290.         var len = $(".dynamic.field .two.fields").length

  291.         $(".dynamic.field .two.fields").each(function(){

  292.             var cur_index = $(this).index()

  293.             $(this).attr('id', 'para' + cur_index)

  294.         })

  295.     });

  296. 

  297.     $('.ui.parameter.green.button').click(function(){

  298.         var parameters = [];

  299.         $('table tr').each(function() {

  300.             $(this).find('td:eq(1)').each(function(){

  301.                 parameters.push($(this).text());

  302.             })

  303.             $(this).find('input').each(function(){

  304.                 parameters.push($(this).text())

  305.             })

  306.             

  307.         });

  308.         $('.ui.parameter.modal')

  309.             .modal('hide');

  310.         for(var i = 2; i < parameters.length; i++){

  311.             switch(i) {

  312.                     // 数据集uuid待完成

  313.                     // case (2):

  314.                         // console.log(1)

  315.                         // break;

  316.                     //     $("#trainjob_datasets").val(parameters[i]);

  317.                     //     console.log($("#trainjob_datasets").val())

  318.                     case (3):

  319.                         $("input[name='boot_file']").val(parameters[i]);

  320.                         break;

  321.                     case (4):

  322.                         var para = parameters[i].split(" ")

  323.                         for(var j = 0; j < para.length; j++){

  324.                             var para_name = para[j].split('=')[0]

  325.                             var para_value = para[j].split('=')[1]

  326.                             var len = $(".dynamic.field .two.fields").length

  327.                             Add_parameter(len)

  328.                             var pid = 'para' + len

  329.                             $(".dynamic.field"+ " #" + pid + "").find("input[name=shipping_first-name]").val(para_name)

  330.                             $(".dynamic.field"+ " #" + pid + "").find("input[name=shipping_last-name]").val(para_value)

  331.                         }

  332.                         break;

  333.                     // 数据集pool_id待完成

  334.                     // case (5):

  335.                     //     $("select[name='pool_id']").val(parameters[i]);

  336.                     //     break;

  337.                     case (6):

  338.                         $("input[name='work_server_number']").val(parameters[i]);

  339.                         break;

  340.                 }

  341.         }

  342.     })

  343. 

  344.     $('.ui.save.checkbox').click(function(){

  345.         $(this).checkbox({

  346.             onChange: function(){

  347.                 if ($('.ui.save.checkbox').checkbox('is checked')){

  348.                     $('#save_para').removeClass("disabled")

  349.                     

  350.                 }else{

  351.                     $('#save_para').addClass("disabled")   

  352.                 }

  353.             }

  354.         });

  355.     })

  356. 

  357.     $('.question.circle.icon').hover(function(){

  358.         $(this).popup('show')

  359.     });

  360. 

  361.     $(".item.active.parameter_config").click(function(){

  362.         $('.ui.parameter.modal')

  363.             .modal('setting', 'closable', false)

  364.             .modal('show');

  365.     })

  366. 

  367.     $('.ui.deny.button').click(function(){

  368.         $('.ui.parameter.modal')

  369.             .modal('hide');

  370.     })

  371.     $('select.dropdown')

  372.         .dropdown();

  373. 

  374.     function validate(){

  375.         $('.ui.form')

  376.         .form({

  377.             on: 'blur',

  378.             fields: {

  379.                 boot_file: {

  380.                     identifier  : 'boot_file',

  381.                     rules: [

  382.                     {

  383.                         type: 'regExp[/.+\.py$/g]',

  384.                     }

  385.                     ]

  386.                 },

  387.                 display_job_name:{

  388.                     identifier  : 'display_job_name',

  389.                     rules: [

  390.                     {

  391.                         type: 'regExp[/^[a-zA-Z0-9-_]{1,64}[a-zA-Z0-9_]$/]',

  392.                     }

  393.                     ]

  394.                 },

  395.                 attachment:{

  396.                     identifier  : 'attachment',

  397.                     rules: [

  398.                     {

  399.                         type: 'empty',

  400.                     }

  401.                     ]

  402. 

  403.                 },

  404.                 work_server_number: {

  405.                     identifier  : 'work_server_number',

  406.                     rules: [

  407.                     {

  408.                         type   : 'integer[1..25]',

  409.                     }

  410.                     ]

  411.                 }

  412.             },

  413.             onSuccess: function(){

  414.                 // $('.ui.page.dimmer').dimmer('show')

  415.                 document.getElementById("mask").style.display = "block"

  416.             },

  417.             onFailure: function(e){	

  418.                 return false;

  419.             }

  420.         })

  421.     }

  422.     document.onreadystatechange = function() {

  423.         if (document.readyState === "complete") {

  424.             document.getElementById("mask").style.display = "none"

  425.         }

  426.     }

  427.     function send_run_para(){

  428.         var run_parameters = []

  429.         var msg = {}

  430.         $(".dynamic.field .two.fields").each(function(){

  431.             var para_name = $(this).find('input[name=shipping_first-name]').val()

  432.             var para_value = $(this).find('input[name=shipping_last-name]').val()

  433.             run_parameters.push({"label": para_name, "value": para_value})

  434.         })

  435.         msg["parameter"] = run_parameters

  436.         msg = JSON.stringify(msg)

  437.         $('#store_run_para').val(msg)

  438.     }

  439.     function get_name(){

  440.         let name1=$("#engine_name .text").text()

  441.         let name2=$("#flaver_name .text").text()

  442.         $("input#ai_engine_name").val(name1)

  443.         $("input#ai_flaver_name").val(name2)

  444. 

  445.     }

  446.     $('.ui.create_train_job.green.button').click(function(e) {

  447.         get_name()

  448.         send_run_para()

  449.         validate() 

  450.     })

  451. </script>