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

465 lines
23 kB
Raw Blame History 

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

  2. <style>

  3. .unite{

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

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

  6. }

  7. 

  8. .title{

  9.     font-size: 16px !important;

  10.     padding-left: 3rem !important;

  11. }

  12. .min_title{

  13.     font-size: 14px !important;

  14.     padding-left: 6rem !important;

  15.     margin-bottom: 2rem !important;

  16. 

  17. }

  18. .width80{

  19.     width: 80.7% !important;

  20. }

  21. .width84{

  22.     width: 84% !important;

  23.     margin-left: 5.1rem !important;

  24. }

  25. .width35{

  26.     width: 35.5% !important;

  27. }

  28. 

  29. 

  30. .nowrap {

  31.     white-space: nowrap !important;

  32. }

  33. </style>

  34. <div id="mask">

  35.         <div id="loadingPage">

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

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

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

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

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

  41.         </div>

  42. </div>

  43. <div class="repository">

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

  45.     <div class="ui container">

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

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

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

  49.         </h4>

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

  51.             <!-- equal width  -->

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

  53.                 {{.CsrfTokenHtml}}

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

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

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

  57.                 <input type="hidden" id="ai_model_version" name="model_version" value="">

  58.                 <input type="hidden" id="ai_model_label" name="label_names" value="">

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

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

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

  62.                     <input style="width: 60%;" name="job_name" id="trainjob_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="36">

  63.                     <span class="tooltips" style="display: block;">请输入只包含大小写字母、数字、_和-，最长36个字符。</span>

  64.                 </div>

  65.                 

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

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

  68.                     <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="254" 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>

  69.                 </div>

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

  71. 

  72.                 <!-- 模型相关配置 -->

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

  74.                 <div class="required unite inline min_title  fields" style="width: 91.8%;">

  75.                     <div class="required eight wide field">

  76.                         <label style="font-weight: normal;white-space: nowrap;">{{.i18n.Tr "repo.modelarts.infer_job.select_model"}}</label>&nbsp;&nbsp;

  77.                         <div class="ui fluid search selection dropdown loading" id="select_model">

  78.                             {{if $.ckpt_name}}

  79.                             <input type="hidden" name="model_name" value="{{$.model_name}}" required>

  80.                             <div class="text">{{$.model_name}}</div>

  81.                             {{else}}

  82.                             <input type="hidden" name="model_name" required>

  83.                             <div class="text"></div>

  84.                             {{end}}

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

  86.                             <div class="menu" id="model_name">

  87.                             </div>

  88.                         </div>

  89.                       </div>

  90.                       <div class="three wide field">

  91.                         <div class="ui fluid search selection dropdown" id="select_model_version">

  92.                             {{if $.ckpt_name}}

  93.                             <input type="hidden" name="train_url" value="{{$.model_version}}" required>

  94.                             <div class="text">{{$.model_version}}</div>

  95.                             {{else}}

  96.                             <input type="hidden" name="train_url" required>

  97.                             <div class="text"></div>

  98.                             {{end}}

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

  100.                             <div class="menu" id="model_name_version">

  101.                             </div>

  102.                             

  103.                         </div>

  104.                       </div>

  105.                       <div class="five wide field">

  106.                         <div class="ui fluid search selection dropdown" id="select_model_checkpoint">

  107.                             {{if $.ckpt_name}}

  108.                             <input type="hidden" name="ckpt_name" value="{{$.ckpt_name}}" required>

  109.                             <div class="text">{{$.ckpt_name}}</div>

  110.                             {{else}}

  111.                             <input type="hidden" name="ckpt_name" required>

  112.                             <div class="text"></div>

  113.                             {{end}}

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

  115.                             <div class="menu" id="model_checkpoint">

  116.                             </div>

  117.                         </div>

  118.                         

  119.                       </div>

  120.                       <span >

  121.                         <i class="question circle icon" data-content="模型文件位置存储在环境变量ckpt_path中。" data-position="top center" data-variation="inverted mini"></i>

  122.                     </span>

  123.                 </div>

  124.                 <!-- AI引擎 -->

  125.                 <div class="required unite inline min_title  fields" style="width: 90%;">

  126.                     <div class="required eight wide field">

  127.                         <label style="font-weight: normal;white-space: nowrap;">{{.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

  128.                         <select class="ui fluid selection search dropdown" id="trainjob_engines">

  129.                             {{range .engines}}

  130.                                 <option value="{{.Value}}">{{.Value}}</option>

  131.                             {{end}}

  132.                           </select>

  133.                       </div>

  134.                       <div class="eight wide field" id="engine_name">

  135.                         <select class="ui fluid selection dropdown nowrap" id="trainjob_engine_versions" name="engine_id" style="white-space: nowrap;">

  136.                             {{range .engine_versions}}

  137.                                 <option name="engine_id" value="{{.ID}}">{{.Value}}</option>

  138.                             {{end}}

  139.                         </select>

  140.                       </div>

  141.                 </div>

  142.                 <!-- 代码分支 -->

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

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

  145.                         <select class="ui dropdown width35" id="code_version" name="branch_name">

  146.                             {{if .branch_name}}

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

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

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

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

  151.                                     {{end}}

  152.                                 {{end}}

  153.                             {{else}}

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

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

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

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

  158.                                     {{end}}

  159.                                 {{end}}

  160.                             {{end}}

  161.                         </select>

  162.                 </div>

  163.                 <!-- 数据集 -->

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

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

  166.                     <select class="ui dropdown width35" id="trainjob_datasets" name="attachment" placeholder="选择数据集" required>

  167.                         {{if $.uuid}}

  168.                             <option name="attachment" value="{{$.uuid}}">{{$.datasetName}}</option>

  169.                         {{end}}

  170.                         {{range .attachments}}

  171.                             <option value="">选择数据集</option>

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

  173.                         {{end}}

  174.                     </select>

  175.                     <span>

  176.                         <i class="question circle icon" data-content="数据集位置存储在环境变量data_url中。" data-position="top center" data-variation="inverted mini"></i>

  177.                     </span>

  178.                     <span class="tooltips" style="display: block;">数据集位置存储在环境变量data_url中，推理输出路径存储在环境变量result_url中。</span>

  179.                 </div>

  180.                 <!-- 启动文件 -->

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

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

  183.                         {{if .bootFile}}

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

  185.                         {{else}}

  186.                             <input style="width: 35.5%;" name="boot_file" id="trainjob_boot_file" value="" tabindex="3" autofocus required maxlength="254" >

  187.                         {{end}}

  188.                         <span >

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

  190.                         </span>

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

  192.                 </div>

  193.                 

  194.                 <!-- 运行参数 -->

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

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

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

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

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

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

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

  202.                             <div class="two fields width84" id="para{{$k}}">

  203.                                 <div class="field">

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

  205.                                 </div>

  206.                                 <div class="field">

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

  208.                                 </div>

  209.                                 <span>

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

  211.                                 </span>

  212. 

  213.                             </div>

  214.                         {{end}}

  215.                     {{end}}

  216.                     </div>

  217.                 </div>

  218.                 

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

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

  221.                     <select class="ui dropdown" id="trainjob_resource_pool" style='width:385px' name="pool_id">

  222.                         {{range .resource_pools}}

  223.                             <option value="{{.ID}}">{{.Value}}</option>

  224.                         {{end}}

  225.                     </select>

  226.                 </div>

  227.                 <!-- 规格 -->

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

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

  230.                     <select class="ui dropdown width80" id="trainjob-flavor" name="flavor">

  231.                         {{range .flavor_infos}}

  232.                             <option name="flavor" value="{{.Code}}">{{.Value}}</option>

  233.                         {{end}}

  234.                     </select>

  235.                 </div>

  236.                 <!-- 计算节点 -->

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

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

  239.                     

  240.                     <div class="ui labeled input" style="width: 5%;">

  241.                         <input style="border-radius: 0;text-align: center;" name="work_server_number" id="trainjob_work_server_num" tabindex="3" autofocus required maxlength="254" value="1" readonly>

  242.                     </div>

  243.                 </div>

  244.                 <!-- 表单操作 -->

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

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

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

  248.                     </button>

  249.                     <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>

  250.                 </div>       

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

  252.             </form>

  253.         </div>

  254.     </div>

  255. </div>

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

  257. 

  258. <script>

  259.     const RepoLink = {{.RepoLink}}

  260.     const url_href = window.location.pathname.split('create')[0]

  261.     let nameMap,nameList

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

  263.     // 获取模型列表和模型名称对应的模型版本

  264.     $.get(`${RepoLink}/modelmanage/query_model_for_predict`, (data) => {

  265.         nameMap = data.nameMap

  266.         nameList = data.nameList

  267.         let html = ''

  268.         nameList.forEach(element => {

  269.             html += `<div class="item" data-value=${element}>${element}</div>`

  270.         });

  271.         const initModelVersion = nameMap[nameList[0]][0]

  272.         const initTrainTaskInfo = JSON.parse(initModelVersion.TrainTaskInfo)

  273.         $('#model_name').append(html)

  274.         $('#select_model').removeClass("loading")

  275.         $("#select_model").dropdown('set text',nameList[0])

  276.         $("#select_model").dropdown('set value',nameList[0],nameList[0])

  277.     })

  278.     // 根据选中的模型名称获取相应的模型版本

  279.     $(function(){

  280.         $('#select_model').dropdown({

  281.             onChange: function(value, text, $selectedItem) {

  282.                 $("#select_model_version").addClass("loading")

  283.                 $('#model_name_version').empty()

  284.                 let html = ''

  285.                 nameMap[value].forEach(element => {

  286.                     let {TrainTaskInfo} = element

  287.                     TrainTaskInfo = JSON.parse(TrainTaskInfo)

  288.                     html += `<div class="item" data-label="${element.Label}" data-id="${element.ID}" data-value="${TrainTaskInfo.TrainUrl}">${element.Version}</div>`

  289.                 });

  290.                 $('#model_name_version').append(html)

  291.                 $("#select_model_version").removeClass("loading")

  292.                 const initVersionText = $('#model_name_version div.item:first-child').text()

  293.                 const initVersionValue = $('#model_name_version div.item:first-child').data('value')

  294.                 $("#select_model_version").dropdown('set text',initVersionText)

  295.                 $("#select_model_version").dropdown('set value',initVersionValue,initVersionText,$('#model_name_version div.item:first-child'))

  296.             }

  297.         })

  298.     })

  299.     // 根据选中的模型版本获取相应的模型权重文件

  300.     $(function(){

  301.         $('#select_model_version').dropdown({

  302.             onChange: function(value, text, $selectedItem) {

  303.                 const dataID = $selectedItem[0].getAttribute("data-id")

  304.                 const label = $selectedItem[0].getAttribute("data-label")

  305.                 $("#select_model_checkpoint").addClass("loading")

  306.                 $("#model_checkpoint").empty()

  307.                 let html = ''

  308.                 loadCheckpointList(dataID).then((res)=>{

  309.                     res.forEach(element => {

  310.                         const ckptSuffix = element.FileName.split(".")

  311.                         if(!element.IsDir && ckptSuffix[ckptSuffix.length-1]==='ckpt'){

  312.                             html += `<div class="item" data-value=${element.FileName}>${element.FileName}</div>`

  313.                         }

  314.                         

  315.                     })

  316.                     $('#model_checkpoint').append(html)

  317.                     $("#select_model_checkpoint").removeClass("loading")

  318.                     const initVersionText = $('#model_checkpoint div.item:last-child').text()

  319.                     const initVersionValue = $('#model_checkpoint div.item:last-child').data('value')

  320.                     $("#select_model_checkpoint").dropdown('set text',initVersionText)

  321.                     $("#select_model_checkpoint").dropdown('set value',initVersionValue,initVersionText,$('#model_name_version div.item:first-child'))

  322.                 })

  323.                 

  324. 

  325.                 $("input#ai_model_version").val(text)

  326.                 $("input#ai_model_label").val(label)

  327.             }

  328.         })

  329.     })

  330.     function loadCheckpointList(value){

  331.         return new Promise((resolve,reject)=>{

  332.             $.get(`${RepoLink}/modelmanage/query_modelfile_for_predict`,{ID:value}, (data) => {

  333.                 resolve(data)

  334.             })

  335.         })

  336.     }

  337. 

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

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

  340.     });

  341. 

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

  343.     function Add_parameter(i){

  344.         value = '<div class="two fields width84" id= "para'+ i +'">' +

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

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

  347.                     '</div> ' + 

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

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

  350.                     '</div>'+

  351.                     '<span>' +

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

  353.                         '</i>' +

  354.                     '</span>' +

  355.                 '</div>'

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

  357.     }   

  358. 

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

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

  361.         Add_parameter(len)

  362.     });

  363. 

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

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

  366.         $(this).parent().parent().remove()

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

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

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

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

  371.         })

  372.     });

  373.     function send_run_para(){

  374.         var run_parameters = []

  375.         var msg = {}

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

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

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

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

  380.         })

  381.         msg["parameter"] = run_parameters

  382.         msg = JSON.stringify(msg)

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

  384.     }

  385.     function get_name(){

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

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

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

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

  390. 

  391.     }

  392.     function validate(){

  393.         $('.ui.form')

  394.         .form({

  395.             on: 'blur',

  396.             fields: {

  397.                 boot_file: {

  398.                     identifier  : 'boot_file',

  399.                     rules: [

  400.                     {

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

  402.                     }

  403.                     ]

  404.                 },

  405.                 job_name:{

  406.                     identifier  : 'job_name',

  407.                     rules: [

  408.                     {

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

  410.                     }

  411.                     ]

  412.                 },

  413.                 attachment:{

  414.                     identifier  : 'attachment',

  415.                     rules: [

  416.                     {

  417.                         type: 'empty',

  418.                     }

  419.                     ]

  420. 

  421.                 },

  422.                 model_name:{

  423.                     identifier  : 'model_name',

  424.                     rules: [

  425.                     {

  426.                         type: 'empty',

  427.                     }

  428.                     ]

  429.                 },

  430.                 train_url:{

  431.                     identifier  : 'train_url',

  432.                     rules: [

  433.                     {

  434.                         type: 'empty',

  435.                     }

  436.                     ]

  437.                 },

  438.                 ckpt_name:{

  439.                     identifier  : 'ckpt_name',

  440.                     rules: [

  441.                     {

  442.                         type: 'empty',

  443.                     }

  444.                     ]

  445.                 }

  446.             },

  447.             onSuccess: function(){

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

  449.             },

  450.             onFailure: function(e){	

  451.                 return false;

  452.             }

  453.         })

  454.     }

  455.     document.onreadystatechange = function() {

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

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

  458.         }

  459.     }

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

  461.         send_run_para()      

  462.         get_name()

  463.         validate()

  464.     })

  465. </script>