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

424 lines
21 kB
Raw Blame History 

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

  2. <style>

  3.     .train-job-title {

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

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

  6.         font-size: 16px !important;

  7.         padding-left: 3rem !important;

  8.     }

  9.     .min_title{

  10.         font-size: 14px !important;

  11.         margin-bottom: 2rem !important;

  12.     }

  13. 

  14.     .width {

  15.         width: 100% !important;

  16.     }

  17. 

  18.     .width80 {

  19.         width: 80.7% !important;

  20.         margin-left: 10px;

  21.     }

  22. 

  23.     .width806 {

  24.         width: 80.6% !important;

  25.         margin-left: -2px;

  26.     }

  27. 

  28.     .width85 {

  29.         width: 85% !important;

  30.         margin-left: 10.5rem !important;

  31.         align-items: center;

  32.     }

  33.     

  34.     .width81 {

  35.         margin-left: 1.5rem !important;

  36.         width: 81% !important;

  37.     }

  38. 

  39.     .add {

  40.         font-size: 18px;

  41.         padding: 0.5rem;

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

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

  44.         line-height: 21px;

  45.         text-align: center;

  46.         color: #C2C7CC;

  47.     }

  48. 

  49.     .min {

  50.         font-size: 18px;

  51.         padding: 0.5rem;

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

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

  54.         line-height: 21px;

  55.         text-align: center;

  56.         color: #C2C7CC;

  57.     }

  58.     .label-fix-width{

  59.         width: 140px !important;

  60.         text-align: right;

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

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

  63.         font-size: 14px !important;

  64.     }

  65. 

  66. </style>

  67. {{template "custom/global_mask" .}}

  68. <div class="repository">

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

  70.     <div class="ui container">

  71.         <div class="cloudbrain-type" style="display: none;" data-cloudbrain-type="{{.datasetType}}" data-repo-link="{{.RepoLink}}" data-queue="{{.QueuesDetail}}" data-queue-start="{{.i18n.Tr "repo.wait_count_start"}}" data-queue-end="{{.i18n.Tr "repo.wait_count_end"}}"></div>

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

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

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

  75.         </h4>

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

  77.             <!-- equal width  -->

  78.             <form id="form_id" class="ui form" action="{{.Link}}" method="post">

  79.                 {{.CsrfTokenHtml}}

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

  81.                 <input type="hidden" id="ai_image_name" value="{{.image}}">

  82.                 <h4 class="train-job-title ui header ">{{.i18n.Tr "repo.modelarts.train_job.basic_info"}}:</h4>

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

  84.                     <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.resource_cluster"}}</label>

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

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

  87.                             <svg class="svg" sxmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"></path></svg>

  88.                             {{.i18n.Tr "cloudbrain.resource_cluster_openi"}}

  89.                         </a>

  90.                         <a class="item" href="{{.RepoLink}}/grampus/train-job/npu/create">

  91.                              <svg class="svg" sxmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"></path><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-2.29-2.333A17.9 17.9 0 0 1 8.027 13H4.062a8.008 8.008 0 0 0 5.648 6.667zM10.03 13c.151 2.439.848 4.73 1.97 6.752A15.905 15.905 0 0 0 13.97 13h-3.94zm9.908 0h-3.965a17.9 17.9 0 0 1-1.683 6.667A8.008 8.008 0 0 0 19.938 13zM4.062 11h3.965A17.9 17.9 0 0 1 9.71 4.333 8.008 8.008 0 0 0 4.062 11zm5.969 0h3.938A15.905 15.905 0 0 0 12 4.248 15.905 15.905 0 0 0 10.03 11zm4.259-6.667A17.9 17.9 0 0 1 15.973 11h3.965a8.008 8.008 0 0 0-5.648-6.667z"></path></svg>

  92.                              {{.i18n.Tr "cloudbrain.resource_cluster_c2net"}}(Beta)

  93.                         </a>

  94.                     </div>

  95.                 </div>

  96.                 <div class="required min_title inline field">

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

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

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

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

  101.                                 height="16">

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

  103.                                 <path

  104.                                     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" />

  105.                             </svg>

  106.                             CPU/GPU

  107.                         </a>

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

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

  110.                                 height="16">

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

  112.                                 <path

  113.                                     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" />

  114.                             </svg>

  115.                             Ascend NPU</a>

  116.                     </div>

  117.                     {{template "custom/wait_count_train" Dict "ctx" $ "type" .train_gpu_types}}

  118.                     <div style="display: flex;align-items: center;margin-left: 155px;margin-top: 0.5rem;">

  119.                         <i class="ri-error-warning-line" style="color: #f2711c;margin-right: 0.5rem;"></i>

  120.                         <span style="color: #888;font-size: 12px;">{{.i18n.Tr "cloudbrain.new_train_gpu_tooltips" "/code" "/dataset" "/model" | Safe}}</span>

  121.                     </div>

  122.                 </div>

  123.                 <div class="required min_title inline field">

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

  125.                     <input style="width: 60%;" name="display_job_name" id="display_job_name"

  126.                         placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}"

  127.                         tabindex="3" onkeyup="this.value=this.value.replace(/[, ]/g,'')" autofocus required

  128.                         maxlength="36">

  129.                     <span class="tooltips" style="display: block;margin-left: 11.5rem;">{{.i18n.Tr "repo.cloudbrain_jobname_err"}}</span>

  130.                 </div>

  131. 

  132.                 <div class="inline min_title field">

  133.                     <label class="label-fix-width" style="font-weight: normal;"

  134.                         for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>

  135.                         {{if .description}}

  136.                         <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="255" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}}>{{.description}}</textarea>

  137.                         {{else}}

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

  139.                         {{end}}

  140.                 </div>

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

  142. 

  143.                 <h4 class="train-job-title ui header ">{{.i18n.Tr "repo.modelarts.train_job.parameter_setting"}}:</h4>

  144. 

  145. 

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

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

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

  149.                         {{if .branch_name}}

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

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

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

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

  154.                         {{end}}

  155.                         {{end}}

  156.                         {{else}}

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

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

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

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

  161.                         {{end}}

  162.                         {{end}}

  163.                         {{end}}

  164.                     </select>

  165.                 </div>

  166. 

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

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

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

  170.                         name="job_type">

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

  172.                     </select>

  173.                 </div>

  174.                 <div class="required min_title inline field">

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

  176.                     <select id="cloudbrain_gpu_type" class="ui search width806 dropdown gpu-type" placeholder="选择GPU类型"

  177.                         style='width:385px' name="gpu_type">

  178.                         {{if .gpu_type}}

  179.                             {{range .train_gpu_types}}

  180.                                 {{if eq $.gpu_type .Queue}}

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

  182.                                 {{end}}

  183.                             {{end}}

  184.                             {{range .train_gpu_types}}

  185.                                 {{if ne $.gpu_type .Queue}}

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

  187.                                 {{end}}

  188.                             {{end}}

  189.                         {{else}}

  190.                             {{range .train_gpu_types}}

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

  192.                             {{end}}

  193.                         {{end}}

  194.                     </select>

  195.                 </div>

  196.                 <div id="images-new-cb">

  197. 

  198.                 </div>

  199. 

  200.                 <div class="inline field min_title required">

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

  202.                     {{if .boot_file}}

  203.                     <input style="width: 48.5%;" name="boot_file" id="trainjob_boot_file" value="{{.boot_file}}"

  204.                         tabindex="3" autofocus required maxlength="255">

  205.                     {{else}}

  206.                     <input style="width: 48.5%;" name="boot_file" id="trainjob_boot_file" value="" tabindex="3"

  207.                         autofocus required maxlength="255">

  208.                     {{end}}

  209.                     <span>

  210.                         <i class="question circle icon  link"

  211.                             data-content={{.i18n.Tr "repo.modelarts.train_job.boot_file_helper"}}

  212.                             data-position="right center" data-variation="mini"></i>

  213.                     </span>

  214.                     <a href="https://git.openi.org.cn/OpenIOSSG/MNIST_PytorchExample_GPU" target="_blank">{{.i18n.Tr "cloudbrain.view_sample"}}</a>

  215.                 </div>

  216.                 <div id="select-multi-dataset">

  217. 

  218.                 </div>

  219.                 <span class="tooltips" style="margin-left: 11.5rem;margin-bottom: 1rem;"></span>

  220.                 <div class="inline min_title field">

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

  222.                     <span id="add_run_para"

  223.                         style="margin-left: 0.5rem;cursor:pointer;color: rgba(3, 102, 214, 100);font-size: 14px;line-height: 26px;font-family: SourceHanSansSC-medium;"><i

  224.                             class="plus square outline icon"></i>{{.i18n.Tr "repo.modelarts.train_job.add_run_parameter"}}</span>

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

  226.                     <div class="dynamic field" style="margin-top: 1rem;" data-params="{{.run_para_list}}">

  227.                     

  228.                     </div>

  229.                 </div>

  230.                 <div class="required min_title inline field">

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

  232.                     <select id="cloudbrain_resource_spec" class="ui search dropdown" placeholder="选择资源规格"

  233.                         style='width:385px' name="resource_spec_id">

  234.                         {{if .resource_spec_id}}

  235.                             {{range .train_resource_specs}}

  236.                                 {{if eq $.resource_spec_id .Id}}

  237.                                     <option value="{{.Id}}">{{$.i18n.Tr "cloudbrain.gpu_num"}}：{{.GpuNum}}，{{$.i18n.Tr "cloudbrain.cpu_num"}}：{{.CpuNum}}，{{$.i18n.Tr "cloudbrain.memory"}}(MB)：{{.MemMiB}}，{{$.i18n.Tr "cloudbrain.shared_memory"}}(MB)：{{.ShareMemMiB}}</option>

  238.                                 {{end}}

  239.                             {{end}}

  240.                             {{range .train_resource_specs}}

  241.                                 {{if ne $.resource_spec_id .Id}}

  242.                                     <option value="{{.Id}}">{{$.i18n.Tr "cloudbrain.gpu_num"}}：{{.GpuNum}}，{{$.i18n.Tr "cloudbrain.cpu_num"}}：{{.CpuNum}}，{{$.i18n.Tr "cloudbrain.memory"}}(MB)：{{.MemMiB}}，{{$.i18n.Tr "cloudbrain.shared_memory"}}(MB)：{{.ShareMemMiB}}</option>

  243.                                 {{end}}

  244.                             {{end}}

  245.                         {{else}}

  246.                             {{range .train_resource_specs}}

  247.                             <option name="resource_spec_id" value="{{.Id}}">

  248.                                 {{$.i18n.Tr "cloudbrain.gpu_num"}}：{{.GpuNum}}，{{$.i18n.Tr "cloudbrain.cpu_num"}}：{{.CpuNum}}，{{$.i18n.Tr "cloudbrain.memory"}}(MB)：{{.MemMiB}}，{{$.i18n.Tr "cloudbrain.shared_memory"}}(MB)：{{.ShareMemMiB}}</option>

  249.                             {{end}}

  250.                         {{end}}

  251.                     </select>

  252.                 </div>

  253. 

  254.                 <div class="inline field" style="padding: 1rem 0;">

  255.                     <label class="label-fix-width"></label>

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

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

  258.                     </button>

  259.                     <a class="ui button"

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

  261.                 </div>

  262. 

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

  264. 

  265.             </form>

  266.         </div>

  267.     </div>

  268. </div>

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

  270. 

  271. <script>

  272.     let form = document.getElementById('form_id');

  273.     let createFlag = false

  274.     form.onsubmit = function (e) {

  275.         if(createFlag) return false

  276.         createFlag = true

  277.     }

  278.     $('select.dropdown')

  279.         .dropdown();

  280. 

  281.     $('.menu .item')

  282.         .tab();

  283.         $(document).keydown(function(event){

  284.         switch(event.keyCode){

  285.             case 13:return false; 

  286.         }

  287.     });

  288.     $(document).ready(function(){

  289.         let params = $('.dynamic.field').data('params')

  290.         params&&params.parameter.forEach((item,index)=>{

  291.             Add_parameter(index,flag=true,item)

  292.         })

  293.         

  294.     })

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

  296.     function Add_parameter(i,flag=false,paramsObject={}) {

  297.         let value = ''

  298.         value += `<div class="two fields width85" id= "para${i}">`

  299.         value += '<div class="field">'

  300.         let placeholder_value='{{.i18n.Tr "repo.modelarts.train_job.parameter_value"}}'

  301.         let placeholder_name='{{.i18n.Tr "repo.modelarts.train_job.parameter_name"}}'

  302.         if(flag){

  303.             value +=`<input type="text" class="shipping_first-name"  value="${paramsObject.label}">`

  304.         }else{

  305.             value +='<input type="text" class="shipping_first-name" required  placeholder="' + placeholder_name+ '">'

  306.         }

  307.         value += '</div>'

  308.         value += '<div class="field">'

  309.         if(flag){

  310.             value +=`<input type="text" class="shipping_last-name"  value="${paramsObject.value}">`

  311.         }else{

  312.             value +='<input type="text" class="shipping_last-name" required  placeholder="' + placeholder_value + '">'

  313.         }

  314.         value += '</div>'

  315.         value += '<span><i class="trash icon"></i></span>'

  316.         value += '</div>'

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

  318. 

  319.     }

  320. 

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

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

  323.         Add_parameter(len)

  324.     });

  325. 

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

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

  328.         $(this).parent().parent().remove()

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

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

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

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

  333.         })

  334.     });

  335. 

  336. 

  337. 

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

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

  340.     });

  341. 

  342. 

  343.     $('select.dropdown')

  344.         .dropdown();

  345. 

  346.     function validate() {

  347.         $('.ui.form')

  348.             .form({

  349.                 on: 'blur',

  350.                 fields: {

  351.                     boot_file: {

  352.                         identifier: 'boot_file',

  353.                         rules: [

  354.                             {

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

  356.                             }

  357.                         ]

  358.                     },

  359.                     display_job_name: {

  360.                         identifier: 'display_job_name',

  361.                         rules: [

  362.                             {

  363.                                 type: 'regExp[/^[a-z0-9][a-z0-9-_]{1,34}[a-z0-9-]$/]',

  364.                             }

  365.                         ]

  366.                     },

  367.                     attachment: {

  368.                         identifier: 'attachment',

  369.                         rules: [

  370.                             {

  371.                                 type: 'empty',

  372.                             }

  373.                         ]

  374. 

  375.                     },

  376.                     work_server_number: {

  377.                         identifier: 'work_server_number',

  378.                         rules: [

  379.                             {

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

  381.                             }

  382.                         ]

  383.                     },

  384.                     branch_name: {

  385.                         identifier: 'branch_name',

  386.                         rules: [

  387.                             {

  388.                                 type: 'empty',

  389.                             }

  390.                         ]

  391.                     }

  392.                 },

  393.                 onSuccess: function () {

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

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

  396.                 },

  397.                 onFailure: function (e) {

  398.                     return false;

  399.                 }

  400.             })

  401.     }

  402.     document.onreadystatechange = function () {

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

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

  405.         }

  406.     }

  407.     function send_run_para() {

  408.         var run_parameters = []

  409.         var msg = {}

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

  411.             var para_name = $(this).find('input.shipping_first-name').val()

  412.             var para_value = $(this).find('input.shipping_last-name').val()

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

  414.         })

  415.         msg["parameter"] = run_parameters

  416.         msg = JSON.stringify(msg)

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

  418.     }

  419.     validate();

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

  421.         send_run_para();

  422.         validate(); 

  423.     })

  424. </script>