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

1025 lines
49 kB
Raw Blame History 

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

  2. <style>

  3.     .according-panel-heading {

  4.         box-sizing: border-box;

  5.         padding: 8px 16px;

  6.         color: #252b3a;

  7.         background-color: #f2f5fc;

  8.         line-height: 1.5;

  9.         cursor: pointer;

  10.         -moz-user-select: none;

  11.         -webkit-user-select: none;

  12.         -ms-user-select: none;

  13.         -khtml-user-select: none;

  14.         user-select: none;

  15.     }

  16. 

  17.     .accordion-panel-title {

  18.         margin-top: 0;

  19.         margin-bottom: 0;

  20.         color: #252b3a;

  21.     }

  22. 

  23.     .accordion-panel-title-content {

  24.         vertical-align: middle;

  25.         display: inline-block;

  26.         width: calc(100% - 32px);

  27.         cursor: default;

  28.     }

  29. 

  30.     .acc-margin-bottom {

  31.         margin-bottom: 5px;

  32.     }

  33. 

  34.     .title_text {

  35.         font-size: 12px;

  36.     }

  37. 

  38.     .ac-display-inblock {

  39.         display: inline-block;

  40.     }

  41. 

  42.     .cti-mgRight-sm {

  43.         margin-right: 8px;

  44.     }

  45. 

  46.     .ac-text-normal {

  47.         font-size: 14px;

  48.         color: #575d6c;

  49.     }

  50. 

  51.     .uc-accordionTitle-black {

  52.         color: #333;

  53.     }

  54. 

  55.     .accordion-border {

  56.         border: 1px solid #cce2ff;

  57.     }

  58. 

  59.     .padding0 {

  60.         padding: 0 !important;

  61.     }

  62. 

  63.     .content-pad {

  64.         padding: 15px 35px;

  65.     }

  66. 

  67.     .content-margin {

  68.         margin: 10px 5px;

  69.     }

  70. 

  71.     .tab_2_content {

  72.         min-height: 360px;

  73.         margin-left: 10px;

  74.     }

  75. 

  76.     .ac-grid {

  77.         display: block;

  78.         *zoom: 1;

  79.     }

  80. 

  81.     .ac-grid-col {

  82.         float: left;

  83.         width: 100%;

  84.     }

  85. 

  86.     .ac-grid-col2 .ac-grid-col {

  87.         width: 50%;

  88.     }

  89. 

  90.     .ti-form {

  91.         text-align: left;

  92.         max-width: 100%;

  93.         vertical-align: middle;

  94.     }

  95. 

  96.     .ti-form>tbody {

  97.         font-size: 12px;

  98.     }

  99. 

  100.     .ti-form>tbody,

  101.     .ti-form>tbody>tr {

  102.         vertical-align: inherit;

  103.     }

  104. 

  105.     .ti-text-form-label {

  106. 

  107.         padding-bottom: 20px;

  108.         padding-right: 20px;

  109.         color: #8a8e99;

  110.         font-size: 12px;

  111.         white-space: nowrap !important;

  112.         width: 80px;

  113.         line-height: 30px;

  114.     }

  115. 

  116.     .ti-text-form-content {

  117.         line-height: 30px;

  118.         padding-bottom: 20px;

  119.     }

  120. 

  121.     .ti-form>tbody>tr>td {

  122.         vertical-align: top;

  123.         white-space: normal;

  124.     }

  125. 

  126.     td,

  127.     th {

  128.         padding: 0;

  129.     }

  130. 

  131.     .ac-grid-col .text-span {

  132.         width: 450px;

  133.         overflow: hidden;

  134.         text-overflow: ellipsis;

  135.         white-space: nowrap;

  136.     }

  137. 

  138.     .redo-color {

  139.         color: #3291F8;

  140.     }

  141. 

  142.     .ti-action-menu-item:not(:last-child) {

  143.         margin-right: 10px;

  144.         padding-right: 11px;

  145.         text-decoration: none !important;

  146.         color: #526ecc;

  147.         cursor: pointer;

  148.         display: inline-block;

  149.         -moz-user-select: none;

  150.         -webkit-user-select: none;

  151.         -ms-user-select: none;

  152.         -khtml-user-select: none;

  153.         user-select: none;

  154.         position: relative;

  155.     }

  156. 

  157.     .ti-action-menu-item:not(:last-child):after {

  158.         content: "";

  159.         display: inline-block;

  160.         position: absolute;

  161.         height: 12px;

  162.         right: 0;

  163.         top: 50%;

  164.         -webkit-transform: translateY(-6px);

  165.         -ms-transform: translateY(-6px);

  166.         -o-transform: translateY(-6px);

  167.         transform: translateY(-6px);

  168.         border-right: 1px solid #dfe1e6;

  169.     }

  170. 

  171.     .text-width80 {

  172.         width: 100px;

  173.         line-height: 30px;

  174.     }

  175. 

  176.     .border-according {

  177.         border: 1px solid #dfe1e6;

  178.     }

  179. 

  180.     .ti-download-file {

  181.         display: flex;

  182.         align-items: center;

  183.         margin: 0.5rem 0;

  184.     }

  185. 

  186.     .disabled {

  187.         cursor: default;

  188.         pointer-events: none;

  189.         color: rgba(0, 0, 0, .6) !important;

  190.         opacity: .45 !important;

  191.     }

  192. 

  193.     .pad20 {

  194. 

  195.         border: 0px !important;

  196.     }

  197. 

  198.     .model_file_bread {

  199.         margin-bottom: -0.5rem !important;

  200.         padding-left: 1rem;

  201.         padding-top: 0.5rem;

  202.     }

  203. </style>

  204. <div id="mask">

  205.     <div id="loadingPage">

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

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

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

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

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

  211.     </div>

  212. </div>

  213. <div class="repository">

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

  215.     <div class="ui container">

  216.         <h4 class="ui header" id="vertical-segment">

  217.             <div class="ui breadcrumb">

  218.                 <a class="section" href="{{.RepoLink}}/debugjob?debugListType=all">

  219.                     {{.i18n.Tr "repo.cloudbrain"}}

  220.                 </a>

  221.                 <div class="divider"> / </div>

  222.                 <a class="section" href="{{$.RepoLink}}/modelarts/train-job">

  223.                     {{$.i18n.Tr "repo.modelarts.train_job"}}

  224.                 </a>

  225.                 <div class="divider"> / </div>

  226.                 <div class="active section">{{.displayJobName}}</div>

  227.             </div>

  228.         </h4>

  229. 

  230.         {{range $k ,$v := .version_list_task}}

  231.         <div class="ui accordion border-according" id="accordion{{.VersionName}}"

  232.             data-repopath="{{$.RepoRelPath}}/modelarts/train-job" data-jobid="{{.JobID}}"

  233.             data-version="{{.VersionName}}">

  234.             <div class="{{if eq $k 0}}active{{end}} title padding0">

  235.                 <div class="according-panel-heading">

  236.                     <div class="accordion-panel-title">

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

  238.                         <span class="accordion-panel-title-content">

  239.                             <span>

  240.                                 <div style="float: right;">

  241.                                     {{$.CsrfTokenHtml}}

  242.                                     {{if and (.CanModify) (eq .Status "COMPLETED") ($.Permission.CanWrite $.UnitTypeModelManage) }}

  243.                                     <a class="ti-action-menu-item" id="{{.VersionName}}-create-model"

  244.                                         onclick="showcreate({{.}})">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>

  245.                                     {{else}}

  246.                                     <a class="ti-action-menu-item disabled" id="{{.VersionName}}-create-model"

  247.                                         onclick="showcreate({{.}})">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>

  248.                                     {{end}}

  249. 

  250.                                     {{if .CanModify}}

  251.                                     <a class="ti-action-menu-item"

  252.                                         href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">{{$.i18n.Tr "repo.modelarts.modify"}}</a>

  253.                                     {{else}}

  254.                                     <a class="ti-action-menu-item disabled"

  255.                                         href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/create_version?version_name={{.VersionName}}">{{$.i18n.Tr "repo.modelarts.modify"}}</a>

  256.                                     {{end}}

  257. 

  258.                                     {{if .CanDel}}

  259.                                     <a class="ti-action-menu-item {{if eq .Status "KILLED" "FAILED" "START_FAILED" "KILLING" "COMPLETED"}}disabled {{end}}"

  260.                                         id="{{.VersionName}}-stop"

  261.                                         onclick="stopVersion({{.VersionName}})">{{$.i18n.Tr "repo.stop"}}</a>

  262.                                     {{else}}

  263.                                     <a class="ti-action-menu-item disabled" id="{{.VersionName}}-stop"

  264.                                         onclick="stopVersion({{.VersionName}})">{{$.i18n.Tr "repo.stop"}}</a>

  265.                                     {{end}}

  266. 

  267. 

  268.                                     {{if .CanDel}}

  269.                                     <a class="ti-action-menu-item" onclick="deleteVersion({{.VersionName}})"

  270.                                         style="color: #FF4D4F;">{{$.i18n.Tr "repo.delete"}}</a>

  271.                                     {{else}}

  272.                                     <a class="ti-action-menu-item disabled" onclick="deleteVersion({{.VersionName}})"

  273.                                         style="color: #FF4D4F;">{{$.i18n.Tr "repo.delete"}}</a>

  274.                                     {{end}}

  275.                                 </div>

  276.                                 <div class="ac-display-inblock title_text acc-margin-bottom">

  277. 

  278.                                     <span class="cti-mgRight-sm">

  279.                                         {{if not (eq .Cloudbrain.StartTime 0)}}

  280.                                         {{TimeSinceUnix1 .Cloudbrain.StartTime}}

  281.                                         {{else}}

  282.                                         {{TimeSinceUnix1 .Cloudbrain.CreatedUnix}}

  283.                                         {{end}}</span>

  284.                                     <span class="cti-mgRight-sm">

  285.                                         {{$.i18n.Tr "repo.modelarts.current_version"}}：{{.VersionName}}</span>

  286.                                     <span class="cti-mgRight-sm">

  287.                                         {{$.i18n.Tr "repo.modelarts.parent_version"}}：{{.PreVersionName}}</span>

  288.                                     <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.status"}}：

  289.                                         <span id="{{.VersionName}}-status-span"><i id="icon"

  290.                                                 style="vertical-align: middle;" class="{{.Status}}"></i><span id="text"

  291.                                                 style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>

  292.                                     </span>

  293.                                     <span

  294.                                         class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}：</span>

  295.                                     <span class="cti-mgRight-sm uc-accordionTitle-black"

  296.                                         id="{{.VersionName}}-duration-span">{{.TrainJobDuration}}</span>

  297.                                     <span data-tooltip="刷新" style="cursor: pointer;" data-inverted=""

  298.                                         onclick="refreshStatus({{.VersionName}})"><i

  299.                                             class="redo icon redo-color"></i></span>

  300. 

  301.                                 </div>

  302.                             </span>

  303.                         </span>

  304.                     </div>

  305.                 </div>

  306.             </div>

  307.             <div class="{{if eq $k 0}}active{{end}} content">

  308.                 <div class="content-pad">

  309.                     <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">

  310. 

  311.                         <a class="active item"

  312.                             data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>

  313.                         <a class="item log_bottom" data-tab="second{{$k}}"

  314.                             data-version="{{.VersionName}}">{{$.i18n.Tr "repo.modelarts.log"}}</a>

  315.                         <a class="item" data-tab="third{{$k}}"

  316.                             onclick="loadModelFile({{.VersionName}},'','','init')">{{$.i18n.Tr "repo.model_download"}}</a>

  317.                     </div>

  318.                     <div class="ui tab active" data-tab="first{{$k}}">

  319.                         <div style="padding-top: 10px;">

  320.                             <div class="tab_2_content">

  321.                                 <div class="ac-grid ac-grid-col2">

  322.                                     <div class="ac-grid-col">

  323.                                         <table class="ti-form">

  324.                                             <tbody class="ti-text-form">

  325.                                                 <tr class="ti-no-ng-animate">

  326.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  327.                                                         {{$.i18n.Tr "repo.cloudbrain_task"}}

  328.                                                     </td>

  329.                                                     <td class="ti-text-form-content">

  330.                                                         <div class="text-span text-span-w">

  331.                                                             {{.DisplayJobName}}

  332.                                                         </div>

  333.                                                     </td>

  334.                                                 </tr>

  335.                                                 <tr class="ti-no-ng-animate">

  336.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  337.                                                         {{$.i18n.Tr "repo.modelarts.status"}}

  338.                                                     </td>

  339. 

  340.                                                     <td class="ti-text-form-content">

  341.                                                         <div class="text-span text-span-w" id="{{.VersionName}}-status">

  342.                                                             {{.Status}}

  343.                                                         </div>

  344.                                                     </td>

  345.                                                 </tr>

  346.                                                 <tr class="ti-no-ng-animate">

  347.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  348.                                                         {{$.i18n.Tr "repo.modelarts.run_version"}}

  349.                                                     </td>

  350. 

  351.                                                     <td class="ti-text-form-content">

  352.                                                         <div class="text-span text-span-w">

  353.                                                             {{.VersionName}}

  354.                                                         </div>

  355.                                                     </td>

  356.                                                 </tr>

  357.                                                 <tr class="ti-no-ng-animate">

  358.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  359.                                                         {{$.i18n.Tr "repo.modelarts.train_job.start_time"}}

  360.                                                     </td>

  361. 

  362.                                                     <td class="ti-text-form-content">

  363.                                                         <div class="text-span text-span-w">

  364.                                                             <span style="font-size: 12px;" class="">

  365.                                                                 {{if not (eq .Cloudbrain.StartTime 0)}}

  366.                                                                 {{TimeSinceUnix1 .Cloudbrain.StartTime}}

  367.                                                                 {{else}}

  368.                                                                 {{TimeSinceUnix1 .Cloudbrain.CreatedUnix}}

  369.                                                                 {{end}}</span>

  370.                                                         </div>

  371.                                                     </td>

  372.                                                 </tr>

  373.                                                 <tr class="ti-no-ng-animate">

  374.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  375.                                                         {{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}

  376.                                                     </td>

  377. 

  378.                                                     <td class="ti-text-form-content">

  379.                                                         <div class="text-span text-span-w"

  380.                                                             id="{{.VersionName}}-duration">

  381.                                                             {{.TrainJobDuration}}

  382.                                                         </div>

  383.                                                     </td>

  384.                                                 </tr>

  385.                                                 <tr class="ti-no-ng-animate">

  386.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  387.                                                         {{$.i18n.Tr "repo.modelarts.train_job.standard"}}

  388.                                                     </td>

  389. 

  390.                                                     <td class="ti-text-form-content">

  391.                                                         <div class="text-span text-span-w">

  392.                                                             {{.FlavorName}}

  393.                                                         </div>

  394.                                                     </td>

  395.                                                 </tr>

  396.                                                 <tr class="ti-no-ng-animate">

  397.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  398.                                                         {{$.i18n.Tr "repo.modelarts.train_job.compute_node"}}

  399.                                                     </td>

  400.                                                     <td class="ti-text-form-content">

  401.                                                         <div class="text-span text-span-w">

  402.                                                             {{.WorkServerNumber}}

  403.                                                         </div>

  404.                                                     </td>

  405.                                                 </tr>

  406.                                             </tbody>

  407.                                         </table>

  408.                                     </div>

  409.                                     <div class="ac-grid-col">

  410.                                         <table class="ti-form">

  411.                                             <tbody class="ti-text-form">

  412.                                                 <tr class="ti-no-ng-animate">

  413.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  414.                                                         {{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}

  415.                                                     </td>

  416.                                                     <td class="ti-text-form-content">

  417.                                                         <div class="text-span text-span-w">

  418.                                                             {{.EngineName}}

  419.                                                         </div>

  420.                                                     </td>

  421.                                                 </tr>

  422.                                                 <tr class="ti-no-ng-animate">

  423.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  424.                                                         {{$.i18n.Tr "repo.modelarts.code_version"}}

  425.                                                     </td>

  426. 

  427.                                                     <td class="ti-text-form-content">

  428.                                                         <div class="text-span text-span-w">

  429.                                                             {{.BranchName}}

  430.                                                         </div>

  431.                                                     </td>

  432.                                                 </tr>

  433.                                                 <tr class="ti-no-ng-animate">

  434.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  435.                                                         {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}

  436.                                                     </td>

  437. 

  438.                                                     <td class="ti-text-form-content">

  439.                                                         <div class="text-span text-span-w">

  440.                                                             {{.BootFile}}

  441.                                                         </div>

  442.                                                     </td>

  443.                                                 </tr>

  444.                                                 <tr class="ti-no-ng-animate">

  445.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  446.                                                         {{$.i18n.Tr "repo.modelarts.train_job.train_dataset"}}

  447.                                                     </td>

  448. 

  449.                                                     <td class="ti-text-form-content">

  450.                                                         <div class="text-span text-span-w">

  451.                                                             {{.DatasetName}}

  452.                                                         </div>

  453.                                                     </td>

  454.                                                 </tr>

  455.                                                 <tr class="ti-no-ng-animate">

  456.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  457.                                                         {{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}}

  458.                                                     </td>

  459. 

  460.                                                     <td class="ti-text-form-content">

  461.                                                         <div class="text-span text-span-w" title="{{.Parameters}}">

  462.                                                             {{.Parameters}}

  463.                                                         </div>

  464.                                                     </td>

  465.                                                 </tr>

  466.                                                 </tr>

  467.                                                 <tr class="ti-no-ng-animate">

  468.                                                     <td class="ti-no-ng-animate ti-text-form-label text-width80">

  469.                                                         {{$.i18n.Tr "repo.modelarts.train_job.description"}}

  470.                                                     </td>

  471. 

  472.                                                     <td class="ti-text-form-content">

  473.                                                         <div class="text-span text-span-w"

  474.                                                             title="{{.Cloudbrain.Description}}">

  475.                                                             {{.Cloudbrain.Description}}

  476.                                                         </div>

  477.                                                     </td>

  478.                                                 </tr>

  479.                                             </tbody>

  480.                                         </table>

  481.                                     </div>

  482.                                 </div>

  483.                             </div>

  484. 

  485.                         </div>

  486.                     </div>

  487.                     <div class="ui tab" data-tab="second{{$k}}">

  488.                         <div>

  489. 

  490.                             <a class='{{if eq .Status "KILLED" "FAILED" "START_FAILED" "STOPPED" "COMPLETED"}}ti-download-file{{else}}disabled{{end}}'

  491.                                 href="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/download_log_file?version_name={{.VersionName}}">

  492.                                 <i class="ri-download-cloud-2-line"></i>

  493.                                 <span style="margin-left: 0.3rem;">{{$.i18n.Tr "repo.modelarts.download_log"}}</span>

  494.                             </a>

  495. 

  496.                         </div>

  497.                         <div

  498.                             style="position: relative;border: 1px solid rgba(0,0,0,.2);padding: 0 10px;margin-top: 10px;">

  499.                             <span>

  500.                                 <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;"

  501.                                     class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a>

  502.                             </span>

  503.                             <span>

  504.                                 <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;"

  505.                                     class="log_bottom" data-version="{{.VersionName}}"><i

  506.                                         class="icon-to-bottom"></i></a>

  507.                             </span>

  508.                             <div class="ui message message{{.VersionName}}" style="display: none;">

  509.                                 <div id="header"></div>

  510.                             </div>

  511.                             <div class="ui attached  log" onscroll="fn({{.VersionName}})" id="log{{.VersionName}}"

  512.                                 style="height: 300px !important; overflow: auto;">

  513.                                 <input type="hidden" name="end_line" value>

  514.                                 <input type="hidden" name="start_line" value>

  515.                                 <pre id="log_file{{.VersionName}}"></pre>

  516.                             </div>

  517. 

  518.                         </div>

  519. 

  520.                     </div>

  521.                     <div class="ui tab" data-tab="third{{$k}}">

  522.                         <input type="hidden" name="model{{.VersionName}}" value="-1">

  523.                         <input type="hidden" name="modelback{{.VersionName}}" value="-1">

  524.                         <div class='ui breadcrumb model_file_bread' id='file_breadcrumb{{.VersionName}}'>

  525.                             <div class="active section">{{.VersionName}}</div>

  526.                             <div class="divider"> / </div>

  527. 

  528.                         </div>

  529.                         <div id="dir_list{{.VersionName}}">

  530. 

  531.                         </div>

  532.                     </div>

  533. 

  534.                 </div>

  535.             </div>

  536.         </div>

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

  538.     </div>

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

  540.     <div id="deletemodel">

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

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

  543.                 <i class="trash icon"></i> {{.i18n.Tr "cloudbrain.delete_task"}}

  544.             </div>

  545. 

  546.             <div class="content">

  547.                 <p>{{.i18n.Tr "cloudbrain.task_delete_confirm"}}</p>

  548.             </div>

  549.             <div class="actions">

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

  551.                     <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}

  552.                 </div>

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

  554.                     <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}

  555.                 </div>

  556.             </div>

  557.         </div>

  558.     </div>

  559.     <!-- 创建模型 -->

  560.     <div id="newmodel">

  561.         <div class="ui modal second">

  562.             <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">

  563.                 <h4 id="model_header">导入新模型</h4>

  564.             </div>

  565.             <div class="content content-padding">

  566.                 <form id="formId" method="POST" class="ui form">

  567.                     <div class="ui error message">

  568.                     </div>

  569.                     {{$.CsrfTokenHtml}}

  570.                     <input type="hidden" name="trainTaskCreate" value="true">

  571. 

  572.                     <div class="two inline fields ">

  573.                         <div class="required ten wide field">

  574.                             <label style="margin-left: -23px;">选择训练任务</label>

  575.                             <input type="hidden" class="width83" id="JobId" name="JobId" readonly required>

  576.                             <input class="width83" id="JobName" readonly required>

  577. 

  578.                         </div>

  579.                         <div class="required six widde field">

  580.                             <label>版本</label>

  581.                             <input class="width70" id="VersionName" name="VersionName" readonly required>

  582.                         </div>

  583.                     </div>

  584. 

  585.                     <div class="required inline field" id="modelname">

  586.                         <label>模型名称</label>

  587.                         <input style="width: 45%;" id="name" name="Name" required maxlength="25"

  588.                             onkeyup="this.value=this.value.replace(/[, ]/g,'')">

  589.                     </div>

  590.                     <div class="required inline field" id="verionname">

  591.                         <label>模型版本</label>

  592.                         <input style="width: 45%;" id="version" name="Version" value="" readonly required

  593.                             maxlength="255">

  594.                     </div>

  595.                     <div class="inline field">

  596.                         <label>模型标签</label>

  597.                         <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255"

  598.                             placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>

  599.                     </div>

  600.                     <div class="inline field">

  601.                         <label for="description">模型描述</label>

  602.                         <textarea style="width: 83%;margin-left: 7px;" id="Description" name="Description" rows="3"

  603.                             maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.new_place"}}'

  604.                             onchange="this.value=this.value.substring(0, 255)"

  605.                             onkeydown="this.value=this.value.substring(0, 255)"

  606.                             onkeyup="this.value=this.value.substring(0, 256)"></textarea>

  607.                     </div>

  608. 

  609.                     <div class="inline field" style="margin-left: 75px;">

  610.                         <button onclick="createModel()" type="button" class="ui create_train_job green button"

  611.                             style="position: absolute;">

  612.                             {{.i18n.Tr "repo.model.manage.sava_model"}}

  613.                         </button>

  614.                     </div>

  615.                 </form>

  616.                 <div class="actions" style="display: inline-block;margin-left: 180px;">

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

  618.                 </div>

  619.             </div>

  620. 

  621. 

  622.         </div>

  623.     </div>

  624. </div>

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

  626. 

  627. <script>

  628.     $('.menu .item').tab()

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

  630.         $('.ui.accordion').accordion({ selector: { trigger: '.icon' } });

  631.     });

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

  633.         $('.secondary.menu .item').tab();

  634.     });

  635. 

  636.     let userName

  637.     let repoPath

  638.     let jobID

  639.     let downlaodFlag = {{ $.canDownload }}

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

  641.         let url = window.location.href;

  642.         let urlArr = url.split('/')

  643.         userName = urlArr.slice(-5)[0]

  644.         repoPath = urlArr.slice(-4)[0]

  645.         jobID = urlArr.slice(-1)[0]

  646.     })

  647.     function stopBubbling(e) {

  648.         e = window.event || e;

  649.         if (e.stopPropagation) {

  650.             e.stopPropagation();      //阻止事件 冒泡传播

  651.         } else {

  652.             e.cancelBubble = true;   //ie兼容

  653.         }

  654.     }

  655. 

  656.     function showcreate(obj) {

  657.         $('.ui.modal.second')

  658.             .modal({

  659.                 centered: false,

  660.                 onShow: function () {

  661.                     $('input[name="Version"]').addClass('model_disabled')

  662.                     // $('input[name="JobId"]').text(obj.JobName)

  663.                     $('#JobName').val(obj.DisplayJobName).addClass('model_disabled')

  664.                     $('input[name="JobId"]').val(obj.JobID)

  665.                     $('input[name="VersionName"]').val(obj.VersionName).addClass('model_disabled')

  666.                     $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })

  667.                     createModelName()

  668.                 },

  669.                 onHide: function () {

  670.                     document.getElementById("formId").reset();

  671.                     $('.ui.dimmer').css({ "background-color": "" })

  672.                     $('.ui.error.message').text()

  673.                     $('.ui.error.message').css('display', 'none')

  674.                 }

  675.             })

  676.             .modal('show')

  677.     }

  678.     function createModel() {

  679.         let url_href = `/${userName}/${repoPath}/modelmanage/create_new_model`

  680.         let data = $("#formId").serialize()

  681.         $("#mask").css({ "display": "block", "z-index": "9999" })

  682.         $.ajax({

  683.             url: url_href,

  684.             type: 'POST',

  685.             data: data,

  686.             success: function (res) {

  687.                 location.href = `/${userName}/${repoPath}/modelmanage/show_model`

  688.                 $('.ui.modal.second').modal('hide')

  689.             },

  690.             error: function (xhr) {

  691.                 // 隐藏 loading

  692.                 // 只有请求不正常（状态码不为200）才会执行

  693.                 $('.ui.error.message').text(xhr.responseText)

  694.                 $('.ui.error.message').css('display', 'block')

  695.             },

  696.             complete: function (xhr) {

  697.                 $("#mask").css({ "display": "none", "z-index": "1" })

  698.             }

  699.         })

  700. 

  701.     }

  702.     function createModelName() {

  703.         let repoName = location.pathname.split('/')[2]

  704.         let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)

  705.         $('#name').val(modelName)

  706.         $('#version').val("0.0.1")

  707.     }

  708.     function renderSize(value) {

  709.         if (null == value || value == '') {

  710.             return "0 Bytes";

  711.         }

  712.         var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");

  713.         var index = 0;

  714.         var srcsize = parseFloat(value);

  715.         index = Math.floor(Math.log(srcsize) / Math.log(1024));

  716.         var size = srcsize / Math.pow(1024, index);

  717.         size = size.toFixed(0);//保留的小数位数

  718.         return size + unitArr[index];

  719.     }

  720.     function refreshStatus(version_name) {

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

  722.             // header status and duration

  723.             $(`#${version_name}-duration-span`).text(data.JobDuration)

  724.             $(`#${version_name}-status-span span`).text(data.JobStatus)

  725.             $(`#${version_name}-status-span i`).attr("class", data.JobStatus)

  726.             // detail status and duration

  727.             $('#' + version_name + '-duration').text(data.JobDuration)

  728.             $('#' + version_name + '-status').text(data.JobStatus)

  729.             loadLog(version_name)

  730. 

  731. 

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

  733.             console.log(err);

  734.         });

  735.         stopBubbling(arguments.callee.caller.arguments[0])

  736.     }

  737.     function deleteVersion(version_name) {

  738.         stopBubbling(arguments.callee.caller.arguments[0])

  739.         let flag = 1;

  740.         $('.ui.basic.modal').modal({

  741.             onDeny: function () {

  742.                 flag = false

  743.             },

  744.             onApprove: function () {

  745.                 $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/del_version`, { version_name: version_name }, (data) => {

  746.                     if (data.VersionListCount === 0) {

  747.                         location.href = `/${userName}/${repoPath}/modelarts/train-job`

  748.                     } else {

  749.                         $('#accordion' + version_name).remove()

  750.                     }

  751. 

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

  753.                     console.log(err);

  754.                 });

  755.                 flag = true

  756.             },

  757.             onHidden: function () {

  758.                 if (flag == false) {

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

  760.                 }

  761.             }

  762.         })

  763.             .modal('show')

  764. 

  765.     }

  766.     function stopVersion(version_name) {

  767.         stopBubbling(arguments.callee.caller.arguments[0])

  768.         $.post(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/stop_version`, { version_name: version_name }, (data) => {

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

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

  771.                 refreshStatus(version_name)

  772.             }

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

  774.             console.log(err);

  775.         });

  776.     }

  777.     function loadLog(version_name) {

  778.         $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&lines=50&order=asc`, (data) => {

  779.             $('input[name=end_line]').val(data.EndLine)

  780.             $('input[name=start_line]').val(data.StartLine)

  781.             $(`#log_file${version_name}`).text(data.Content)

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

  783.             console.log(err);

  784.         });

  785.     }

  786.     function loadModelFile(version_name, parents, filename, init) {

  787.         parents = parents || ''

  788.         filename = filename || ''

  789.         init = init || ''

  790.         $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/model_list?version_name=${version_name}&parentDir=${parents}`, (data) => {

  791.             $(`#dir_list${version_name}`).empty()

  792.             renderDir(data, version_name)

  793.             if (init === "init") {

  794.                 $(`input[name=model${version_name}]`).val("")

  795.                 $(`input[name=modelback${version_name}]`).val(version_name)

  796.                 $(`#file_breadcrumb${version_name}`).empty()

  797.                 let htmlBread = ""

  798.                 htmlBread += `<div class='active section'>${version_name}</div>`

  799.                 htmlBread += "<div class='divider'> / </div>"

  800.                 $(`#file_breadcrumb${version_name}`).append(htmlBread)

  801.             } else {

  802.                 renderBrend(version_name, parents, filename, init)

  803.             }

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

  805.             console.log(err, version_name);

  806.         });

  807. 

  808.     }

  809.     function renderBrend(version_name, parents, filename, init) {

  810.         if (init == "folder") {

  811.             let htmlBrend = ""

  812.             let sectionName = $(`#file_breadcrumb${version_name} .active.section`).text()

  813.             let parents1 = $(`input[name=model${version_name}]`).val()

  814.             let filename1 = $(`input[name=modelback${version_name}]`).val()

  815.             if (parents1 === "") {

  816.                 $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','','init')">${sectionName}</a>`)

  817.             } else {

  818.                 $(`#file_breadcrumb${version_name} .active.section`).replaceWith(`<a class='section' onclick="loadModelFile('${version_name}','${parents1}','${filename1}')">${sectionName}</a>`)

  819.             }

  820. 

  821.             htmlBrend += `<div class='active section'>${filename}</div>`

  822.             htmlBrend += "<div class='divider'> / </div>"

  823.             $(`#file_breadcrumb${version_name}`).append(htmlBrend)

  824.             $(`input[name=model${version_name}]`).val(parents)

  825.             $(`input[name=modelback${version_name}]`).val(filename)

  826.         } else {

  827.             $(`input[name=model${version_name}]`).val(parents)

  828.             $(`input[name=modelback${version_name}]`).val(filename)

  829.             $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).nextAll().remove()

  830.             $(`#file_breadcrumb${version_name} a.section:contains(${filename})`).replaceWith(`<div class='active section'>${filename}</div>`)

  831.             $(`#file_breadcrumb${version_name} div.section:contains(${filename})`).append("<div class='divider'> / </div>")

  832.         }

  833. 

  834.     }

  835.     function renderDir(data, version_name) {

  836.         let html = ""

  837.         html += "<div class='ui grid' style='margin:0;'>"

  838.         html += "<div class='row' style='padding: 0;'>"

  839.         html += "<div class='ui sixteen wide column' style='padding:1rem;'>"

  840.         html += "<div class='dir list'>"

  841.         html += "<table id='repo-files-table' class='ui single line table pad20'>"

  842.         html += '<tbody>'

  843.         // html += "</tbody>"

  844.         for (let i = 0; i < data.Dirs.length; i++) {

  845.             let dirs_size = renderSize(data.Dirs[i].Size)

  846.             html += "<tr>"

  847.             html += "<td class='name six wid'>"

  848.             html += "<span class='truncate'>"

  849.             html += "<span class='octicon octicon-file-directory'>"

  850.             html += "</span>"

  851.             if (data.Dirs[i].IsDir) {

  852.                 html += `<a  onclick="loadModelFile('${version_name}','${data.Dirs[i].ParenDir}','${data.Dirs[i].FileName}','folder')">`

  853.                 html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"

  854.             } else {

  855.                 if (downlaodFlag) {

  856.                     html += `<a href="${location.href}/model_download?version_name=${version_name}&file_name=${data.Dirs[i].FileName}&parent_dir=${data.Dirs[i].ParenDir}">`

  857.                 }

  858.                 else {

  859.                     html += `<a class="disabled">`

  860.                 }

  861.                 html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data.Dirs[i].FileName + "</span>"

  862.             }

  863.             html += '</a>'

  864.             html += "</span>"

  865.             html += "</td>"

  866.             html += "<td class='message seven wide'>"

  867.             if (data.Dirs[i].IsDir) {

  868.                 html += "<span class='truncate has-emoji'></span>"

  869.             } else {

  870.                 html += "<span class='truncate has-emoji'>" + `${dirs_size}` + "</span>"

  871.             }

  872. 

  873.             html += "</td>"

  874. 

  875.             html += "<td class='text right age three wide'>"

  876.             html += "<span class='truncate has-emoji'>" + data.Dirs[i].ModTime + "</span>"

  877.             html += "</td>"

  878.             html += "</tr>"

  879. 

  880.         }

  881.         html += "</tbody>"

  882.         html += "</table>"

  883.         html += "</div>"

  884.         html += "</div>"

  885.         html += "</div>"

  886.         html += "</div>"

  887.         $(`#dir_list${version_name}`).append(html)

  888.     }

  889.     function debounce(fn, delay) {

  890.         let timer;

  891.         return (...args) => {

  892.             // 判断定时器是否存在，清除定时器

  893.             if (timer) {

  894.                 clearTimeout(timer);

  895.             }

  896. 

  897.             // 重新调用setTimeout

  898.             timer = setTimeout(() => {

  899.                 fn.apply(this, args);

  900.             }, delay);

  901.         };

  902.     }

  903.     const fn = debounce(logScroll, 500)

  904.     function logScroll(version_name) {

  905.         let container = document.querySelector(`#log${version_name}`)

  906.         let scrollTop = container.scrollTop

  907.         let scrollHeight = container.scrollHeight

  908.         let clientHeight = container.clientHeight

  909.         let scrollLeft = container.scrollLeft

  910.         if (((parseInt(scrollTop) + clientHeight == scrollHeight || parseInt(scrollTop) + clientHeight + 1 == scrollHeight || parseInt(scrollTop) + clientHeight - 1 == scrollHeight)) && parseInt(scrollTop) !== 0 && scrollLeft == 0) {

  911.             let end_line = $(`#log${version_name} input[name=end_line]`).val()

  912.             $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${end_line}&lines=50&order=desc`, (data) => {

  913.                 if (data.Lines == 0) {

  914.                     $(`.message${version_name} #header`).text('您已翻阅至日志底部')

  915.                     $(`.message${version_name}`).css('display', 'block')

  916.                     setTimeout(function () {

  917.                         $(`.message${version_name}`).css('display', 'none')

  918.                     }, 1000)

  919.                 } else {

  920.                     if (end_line === data.EndLine) {

  921.                         return

  922.                     }

  923.                     else {

  924.                         $(`#log${version_name} input[name=end_line]`).val(data.EndLine)

  925.                         $(`#log${version_name}`).append('<pre>' + data.Content)

  926.                     }

  927. 

  928.                 }

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

  930.                 console.log(err);

  931.             });

  932.         }

  933.         if ([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10].includes(scrollTop) && scrollLeft == 0) {

  934.             let start_line = $(`#log${version_name} input[name=start_line]`).val()

  935.             $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${start_line}&lines=50&order=asc`, (data) => {

  936.                 if (data.Lines == 0) {

  937.                     $(`.message${version_name} #header`).text('您已翻阅至日志顶部')

  938.                     $(`.message${version_name}`).css('display', 'block')

  939.                     setTimeout(function () {

  940.                         $(`.message${version_name}`).css('display', 'none')

  941.                     }, 1000)

  942.                 } else {

  943.                     $(`#log${version_name} input[name=start_line]`).val(data.StartLine)   //如果变动就改变所对应的值

  944.                     $(`#log${version_name}`).prepend('<pre>' + data.Content)

  945.                 }

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

  947.                 console.log(err);

  948.             });

  949.         }

  950.     }

  951.     function scrollAnimation(dom, currentY, targetY, currentX) {

  952.         let needScrollTop = targetY - currentY;

  953.         let _currentY = currentY;

  954.         setTimeout(() => {

  955.             // 一次调用滑动帧数，每次调用会不一样

  956.             //取总距离的十分之一

  957.             const dist = Math.ceil(needScrollTop / 10);

  958.             _currentY += dist;

  959.             //移动一个十分之一

  960.             dom.scrollTo(currentX || 0, _currentY, 'smooth');

  961.             // 如果移动幅度小于十个像素，直接移动，否则递归调用，实现动画效果

  962.             if (needScrollTop > 10 || needScrollTop < -10) {

  963.                 scrollAnimation(dom, _currentY, targetY)

  964.             } else {

  965.                 dom.scrollTo(0, targetY, 'smooth')

  966.             }

  967.         }, 1)

  968.     }

  969. 

  970.     $('.log_top').click(function () {

  971.         // let logContentDom = document.querySelector('.log')

  972.         // if(!logContentDom)

  973.         //     return

  974.         // let version_name = $('.log_top').data('version')

  975.         let version_name = $(this).data('version')

  976.         let logContentDom = document.querySelector(`#log${version_name}`)

  977. 

  978.         $(`#log_file${version_name}`).siblings('pre').remove()

  979.         $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=asc`, (data) => {

  980. 

  981.             $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值

  982.             $(`#log${version_name} input[name=start_line]`).val(data.StartLine)

  983.             $(`#log${version_name}`).prepend('<pre>' + data.Content)

  984.             $(`.message${version_name} #header`).text('您已翻阅至日志顶部')

  985.             $(`.message${version_name}`).css('display', 'block')

  986.             setTimeout(function () {

  987.                 $(`.message${version_name}`).css('display', 'none')

  988.             }, 1000)

  989.             scrollAnimation(logContentDom, logContentDom.scrollTop, 0);

  990.         })

  991. 

  992.     })

  993.     $('.log_bottom').click(function (e) {

  994.         let version_name = $(this).data('version')

  995.         let logContentDom = document.querySelector(`#log${version_name}`)

  996.         $(`#log_file${version_name}`).siblings('pre').remove()

  997.         $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=&lines=50&order=desc`, (data) => {

  998. 

  999.             $(`#log${version_name} input[name=end_line]`).val(data.EndLine)   //如果变动就改变所对应的值

  1000.             $(`#log${version_name} input[name=start_line]`).val(data.StartLine)

  1001.             $(`#log${version_name}`).append('<pre>' + data.Content)

  1002.             $.get(`/api/v1/repos/${userName}/${repoPath}/modelarts/train-job/${jobID}/log?version_name=${version_name}&base_line=${data.EndLine}&lines=50&order=desc`, (data) => {

  1003.                 if (data.Lines == 0) {

  1004.                     $(`.message${version_name} #header`).text('您已翻阅至日志底部')

  1005.                     $(`.message${version_name}`).css('display', 'block')

  1006.                     setTimeout(function () {

  1007.                         $(`.message${version_name}`).css('display', 'none')

  1008.                     }, 1000)

  1009.                 } else {

  1010.                     if (end_line === data.EndLine) {

  1011.                         return

  1012.                     }

  1013.                     else {

  1014.                         $(`#log${version_name} input[name=end_line]`).val(data.EndLine)

  1015.                         $(`#log${version_name}`).append('<pre>' + data.Content)

  1016.                     }

  1017. 

  1018.                 }

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

  1020.                 console.log(err);

  1021.             });

  1022.             scrollAnimation(logContentDom, logContentDom.scrollTop + 1, logContentDom.scrollHeight - logContentDom.clientHeight);

  1023.         })

  1024.     })

  1025. </script>