aiforge/templates/repo/grampus/trainjob/show.tmpl

{{template "base/head" .}}
<link rel="stylesheet" href="/self/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
    .according-panel-heading {
        box-sizing: border-box;
        padding: 8px 16px;
        color: #252b3a;
        background-color: #f2f5fc;
        line-height: 1.5;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    .accordion-panel-title {
        margin-top: 0;
        margin-bottom: 0;
        color: #252b3a;
    }

    .accordion-panel-title-content {
        vertical-align: middle;
        display: inline-block;
        width: calc(100% - 32px);
        cursor: default;
    }

    .acc-margin-bottom {
        margin-bottom: 5px;
    }

    .title_text {
        font-size: 12px;
    }

    .ac-display-inblock {
        display: inline-block;
    }

    .cti-mgRight-sm {
        margin-right: 8px;
    }

    .ac-text-normal {
        font-size: 14px;
        color: #575d6c;
    }

    .uc-accordionTitle-black {
        color: #333;
    }

    .accordion-border {
        border: 1px solid #cce2ff;
    }

    .padding0 {
        padding: 0 !important;
    }

    .content-pad {
        padding: 15px 35px;
    }

    .content-margin {
        margin: 10px 5px;
    }

    .tab_2_content {
        min-height: 360px;
        margin-left: 10px;
    }

    .ac-grid {
        display: block;
        *zoom: 1;
    }

    .ac-grid-col {
        float: left;
        width: 100%;
    }

    .ac-grid-col2 .ac-grid-col {
        width: 50%;
    }

    .ti-form {
        text-align: left;
        max-width: 100%;
        vertical-align: middle;
    }

    .ti-form>tbody {
        font-size: 12px;
    }

    .ti-form>tbody,
    .ti-form>tbody>tr {
        vertical-align: inherit;
    }

    .ti-text-form-label {

        padding-bottom: 20px;
        padding-right: 20px;
        color: #8a8e99;
        font-size: 12px;
        white-space: nowrap !important;
        width: 80px;
        line-height: 30px;
    }

    .ti-text-form-content {
        line-height: 30px;
        padding-bottom: 20px;
    }

    .ti-form>tbody>tr>td {
        vertical-align: top;
        white-space: normal;
    }

    td,
    th {
        padding: 0;
    }

    .ac-grid-col .text-span {
        width: 450px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .redo-color {
        color: #3291F8;
    }

    .ti-action-menu-item:not(:last-child) {
        margin-right: 10px;
        padding-right: 11px;
        text-decoration: none !important;
        color: #526ecc;
        cursor: pointer;
        display: inline-block;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        position: relative;
    }

    .ti-action-menu-item:not(:last-child):after {
        content: "";
        display: inline-block;
        position: absolute;
        height: 12px;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
        border-right: 1px solid #dfe1e6;
    }

    .text-width80 {
        width: 100px;
        line-height: 30px;
    }

    .border-according {
        border: 1px solid #dfe1e6;
    }

    .disabled {
        cursor: default;
        pointer-events: none;
        color: rgba(0, 0, 0, .6) !important;
        opacity: .45 !important;
    }

    .pad20 {

        border: 0px !important;
    }

    .model_file_bread {
        margin-bottom: -0.5rem !important;
        padding-left: 1rem;
        padding-top: 0.5rem;
    }
    .menuContent{
        position: absolute;
        background: #ffffff;
        left: 0;
        right: 26px;
        top: 36px;
        z-index:999;
        border: 1px solid #96c8da;
        border-top: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
    }
</style>
{{template "custom/global_mask" .}}
<div class="repository">
    {{template "repo/header" .}}
    <div class="ui container">
        <h4 class="ui header" id="vertical-segment">
            <div class="ui breadcrumb">
                <a class="section" href="{{.RepoLink}}/debugjob?debugListType=all">
                    {{.i18n.Tr "repo.cloudbrain"}}
                </a>
                <div class="divider"> / </div>
                <a class="section" href="{{$.RepoLink}}/modelarts/train-job">
                    {{$.i18n.Tr "repo.modelarts.train_job"}}
                </a>
                <div class="divider"> / </div>
                <div class="active section">{{.displayJobName}}</div>
            </div>
        </h4>
        {{range $k ,$v := .version_list_task}}
        <div class="ui accordion border-according" id="accordion{{.VersionName}}"
            data-repopath="{{$.RepoRelPath}}/grampus/train-job" data-jobid="{{.JobID}}"
            data-version="{{.VersionName}}">
            <div class="{{if eq $k 0}}active{{end}} title padding0">
                <div class="according-panel-heading">
                    <div class="accordion-panel-title">
                        <i class="dropdown icon"></i>
                        <span class="accordion-panel-title-content">
                            <span>
                                <div style="float: right;">
                                    {{$.CsrfTokenHtml}}
                                </div>
                                <div class="ac-display-inblock title_text acc-margin-bottom">
                                    <span class="cti-mgRight-sm">{{TimeSinceUnix1 .CreatedUnix}}</span>
                                    <span class="cti-mgRight-sm">
                                        {{$.i18n.Tr "repo.modelarts.current_version"}}：{{.VersionName}}</span>
                                    <span class="cti-mgRight-sm">
                                        {{$.i18n.Tr "repo.modelarts.parent_version"}}：{{.PreVersionName}}</span>
                                    <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.status"}}：
                                        <span id="{{.VersionName}}-status-span"><i id="icon"
                                                style="vertical-align: middle;" class="{{.Status}}"></i><span id="text"
                                                style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                    </span>
                                    <span
                                        class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}：</span>
                                    <span class="cti-mgRight-sm uc-accordionTitle-black"
                                        id="{{.VersionName}}-duration-span">{{.TrainJobDuration}}</span>
                                    <span class="refresh-status" data-tooltip="刷新" style="cursor: pointer;" data-inverted="" data-version="{{.VersionName}}">
                                        <i class="redo icon redo-color"></i>
                                    </span>
                                </div>
                                 <div style="float: right;">
                                    {{if and ($.canDownload) (ne .Status "WAITING") ($.Permission.CanWrite $.UnitTypeModelManage) }}
                                    <a class="ti-action-menu-item" id="{{.VersionName}}-create-model"
                                        onclick="showcreate({DisplayJobName:{{.DisplayJobName}},JobName:{{.JobName}},JobID:{{.JobID}},VersionName:{{.VersionName}},EngineName:{{.EngineName}},ComputeResource:{{.ComputeResource}},Type:{{.Type}}})">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>
                                    {{else}}
                                    <a class="ti-action-menu-item disabled" id="{{.VersionName}}-create-model">{{$.i18n.Tr "repo.modelarts.create_model"}}</a>
                                    {{end}}
                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="{{if eq $k 0}}active{{end}} content">
                <div class="content-pad">
                    <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">

                        <a class="active item" data-tab="first{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                        <a class="item log_bottom" data-tab="second{{$k}}" data-version="{{.VersionName}}">{{$.i18n.Tr "repo.modelarts.log"}}</a>
                        {{ if eq $.Spec.ComputeResource "NPU"}}
                        <a class="item metric_chart" data-tab="four{{$k}}" data-version="{{.VersionName}}" data-path="{{$.RepoRelPath}}/grampus/train-job/{{.JobID}}/metrics">{{$.i18n.Tr "cloudbrain.resource_use"}}</a>
                        {{end}}
                        <a class="item load-model-file" data-tab="third{{$k}}" data-download-flag="{{$.canDownload}}" data-path="{{$.RepoLink}}/modelarts/train-job/{{.JobID}}/model_list" data-version="{{.VersionName}}" data-parents="" data-filename="" data-init="init" >{{$.i18n.Tr "repo.model_download"}}</a>
                    </div>
                    <div class="ui tab active" data-tab="first{{$k}}">
                        <div style="padding-top: 10px;">
                            <div class="tab_2_content">
                                <div class="ac-grid ac-grid-col2">
                                    <div class="ac-grid-col">
                                        <table class="ti-form">
                                            <tbody class="ti-text-form">
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.cloudbrain_task"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.DisplayJobName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.status"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-status">
                                                            {{.Status}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.run_version"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{if .VersionName}}{{.VersionName}}{{else}}--{{end}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.start_time"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            <span style="font-size: 12px;" id="{{.VersionName}}-startTime">
                                                                {{if not (eq .StartTime 0)}}
                                                                {{TimeSinceUnix1 .StartTime}}
                                                                {{else}}
                                                                --
                                                                {{end}}</span>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w"
                                                            id="{{.VersionName}}-duration">
                                                            {{.TrainJobDuration}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.model_name"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">{{if .ModelName}}{{.ModelName}}{{else}}--{{end}}</div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelconvert.modelversion"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">{{if .ModelVersion}}{{.ModelVersion}}{{else}}--{{end}}</div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.infer_job_model_file"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">{{if .CkptName}}{{.CkptName}}{{else}}--{{end}}</div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="ac-grid-col">
                                        <table class="ti-form">
                                            <tbody class="ti-text-form">
                                                {{ if eq $.Spec.ComputeResource "GPU"}}
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "cloudbrain.mirror"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            <span class="ui poping up clipboard" data-position="top center" id="clipboard-btn-image" style="cursor:pointer"
                                                                data-clipboard-text="{{.EngineName}}"
                                                                data-success="{{$.i18n.Tr "repo.copy_link_success"}}"
                                                                data-error="{{$.i18n.Tr "repo.copy_link_error"}}"
                                                                data-content="{{$.i18n.Tr "repo.copy_link"}}"
                                                                data-variation="inverted tiny"
                                                            >
                                                                <span title="{{.EngineName}}">{{.EngineName}}</span>
                                                            </span>
                                                        </div>
                                                    </td>
                                                </tr>
                                                {{else}}
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.EngineName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                {{end}}
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.code_version"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.BranchName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.BootFile}}
                                                        </div>
                                                    </td>
                                                </tr>

                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" title="{{.Parameters}}">
                                                            {{if .Parameters}}{{.Parameters}}{{else}}--{{end}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.grampus.train_job.ai_center"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-ai_center">
                                                            {{if $.ai_center}}{{$.ai_center}}{{else}}--{{end}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.standard"}}
                                                    </td>

                                                    <td class="ti-text-form-content spec">
                                                        <div class="text-span text-span-w"></div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.compute_node"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.WorkServerNumber}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.description"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w"
                                                            title="{{.Description}}">
                                                            {{if .Description}}{{.Description}}{{else}}--{{end}}
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div style="clear:both">
                                <table style="border:none" class="ui fixed small stackable table">
                                <thead>
                                    <tr><th style="color: #8a8e99;font-size:12px" class="three wide left aligned">{{$.i18n.Tr "dataset.file"}}</th>
                                </tr></thead>
                                <tbody>
                                    {{range $m ,$n := $.datasetDownload}} 
                                        <tr>
                                            <td style="word-wrap: break-word;word-break: break-all;">
                                            {{if eq .IsDelete true}}
                                                {{.DatasetName}}({{$.i18n.Tr "dataset.file_deleted"}})
                                            {{else}}
                                                <a href="{{.RepositoryLink}}" target="_blank">{{.DatasetName}}</a>
                                            {{end}}
                                            </td>
                                        </tr>               
                                    {{end}}
                                </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="ui tab" data-tab="second{{$k}}">
                        <div class="file-info">
                            <a id="{{.VersionName}}-log-down"
                                class='{{if $.canDownload}}ti-download-file{{else}}disabled{{end}} file-info'
                                href="/api/v1/repos/{{$.RepoRelPath}}/grampus/train-job/{{.JobID}}/download_log">
                                <i class="ri-download-cloud-2-line"></i>
                                <span style="margin-left: 0.3rem;">{{$.i18n.Tr "repo.modelarts.download_log"}}</span>
                            </a>
                            <div class="file-info full-log-dialog" data-version="{{.VersionName}}" data-log="{{$.i18n.Tr "repo.modelarts.log_file"}}"  data-log-type="c2Net"
                                data-exit="{{$.i18n.Tr "repo.modelarts.exit_full_screen"}}" style="margin-left: 1rem;color:#0366d6;cursor: pointer;"
                                data-log-down="{{$.i18n.Tr "repo.modelarts.download_log"}}" data-href="/api/v1/repos/{{$.RepoRelPath}}/grampus/train-job/{{.JobID}}/download_log"
                                data-scroll-top="{{$.i18n.Tr "repo.log_scroll_start"}}" data-scroll-bottom="{{$.i18n.Tr "repo.log_scroll_end"}}">
                                <i class="ri-aspect-ratio-line"></i>
                                <span style="margin-left: 0.3rem;">{{$.i18n.Tr "repo.modelarts.fullscreen_log_file"}}</span>
                            </div>
                        </div>
                        <div style="position: relative;border: 1px solid rgba(0,0,0,.2);padding: 0 10px;margin-top: 10px;">
                            <span>
                                <a title="{{$.i18n.Tr "repo.log_scroll_start"}}" style="position: absolute; right: -32px;cursor: pointer;"
                                    class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a>
                            </span>
                            <span class="log-info-{{.VersionName}}">
                                <a title="{{$.i18n.Tr "repo.log_scroll_end"}}" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;"
                                    class="log_bottom" data-version="{{.VersionName}}"><i
                                        class="icon-to-bottom"></i></a>
                            </span>
                            <div class="ui message message{{.VersionName}}" style="display: none;">
                                <div id="header"></div>
                            </div>
                            <div class="ui attached log" id="log{{.VersionName}}"
                                style="height: 300px !important; overflow: auto;">
                                <div class="ui inverted active dimmer">
                                    <div class="ui loader"></div>
                                </div>
                                <input type="hidden" name="end_line" value>
                                <input type="hidden" name="end_line-max" value>
                                <input type="hidden" name="start_line-max" value>
                                <input type="hidden" name="start_line-max-copy" value>
                                <input type="hidden" name="start_line" value>                           
                                <input type="hidden" name="init_log" value>
                                <pre id="log_file{{.VersionName}}"></pre>
                            </div>

                        </div>

                    </div>
                    <div class="ui tab" data-tab="four{{$k}}" style="position: relative;">
                        <i class="ri-refresh-line metric_chart"
                            style="position: absolute;right: 25%;color:#3291f8;z-index:99;cursor: pointer;"
                            data-version="{{.VersionName}}"></i>
                        <div id="metric-{{.VersionName}}" style="height: 260px;width: 870px;">
                        </div>
                        
                    </div>
                    <div class="ui tab" data-tab="third{{$k}}">
                        <input type="hidden" name="model{{.VersionName}}" value="-1">
                        <input type="hidden" name="modelback{{.VersionName}}" value="-1">
                        <div class='ui breadcrumb model_file_bread' id='file_breadcrumb{{.VersionName}}'>
                            <div class="active section">{{.VersionName}}</div>
                            <div class="divider"> / </div>

                        </div>
                        <div id="dir_list{{.VersionName}}">
                        </div>
                        {{if eq .ComputeResource "CPU/GPU"}}
                        <div style="display:flex;align-items: center;justify-content: end;color: #f2711c;">
                            <i class="ri-error-warning-line" style="margin-right:0.5rem;"></i>
                            <span>{{$.i18n.Tr "repo.file_limit_100"}}</span>
                        </div>
                        {{end}}
                    </div>

                </div>
            </div>
        </div>
        {{template "custom/max_log" .}}
        {{end}} {{template "base/paginate" .}}
    </div>
    <!-- 确认模态框 -->
    <div id="deletemodel">
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="trash icon"></i> {{.i18n.Tr "cloudbrain.delete_task"}}
            </div>

            <div class="content">
                <p>{{.i18n.Tr "cloudbrain.task_delete_confirm"}}</p>
            </div>
            <div class="actions">
                <div class="ui red basic inverted cancel button">
                    <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}
                </div>
                <div class="ui green basic inverted ok button">
                    <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
                </div>
            </div>
        </div>
    </div>
    <!-- 创建模型 -->
     <div id="newmodel">
        <div class="ui modal second">
            <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
                <h4 id="model_header">{{.i18n.Tr "repo.model.manage.import_new_model"}}</h4>
            </div>
            <div class="content content-padding">
                <form id="formId" method="POST" class="ui form">
                    <div class="ui error message">
                    </div>
                    {{$.CsrfTokenHtml}}
                    <input type="hidden" name="trainTaskCreate" value="true">

                    <div class="required inline field">
                        <label>{{.i18n.Tr "repo.modelarts.train_job"}}</label>
                        <input type="hidden"  class="width83" id="jobId" name="jobId" readonly required>
                        <input type="hidden" id="versionName" name="versionName" value="V0001">
                        <input style="width: 45%;" id="JobName" readonly required>
                    </div>

                    <div class="required inline field" id="modelname">
                        <label>{{.i18n.Tr "repo.model.manage.model_name"}}</label>
                        <input style="width: 45%;" id="name" name="name" required maxlength="25"
                            onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                    </div>
                    <div class="required inline field" id="verionname">
                        <label>{{.i18n.Tr "repo.modelconvert.modelversion"}}</label>
                        <input style="width: 45%;" id="version" name="version" value="" readonly required maxlength="255">
                    </div>
                    <div class="unite min_title inline field required">
                        <label>{{.i18n.Tr "repo.model.manage.engine"}}</label>
                        <div class="ui dropdown selection search width70" id="choice_Engine">
                            <input type="hidden" id="engine" name="engine" required>
                            <div class="default text">{{.i18n.Tr "repo.model.manage.select.engine"}}</div>
                            <i class="dropdown icon"></i>
                            <div class="menu" id="job-Engine">
                                <option class="active item" data-value="0">PyTorch</option>
                                <option class="item" data-value="1">TensorFlow</option>
                                <option class="item" data-value="2">MindSpore</option>
                                <option class="item" data-value="4">PaddlePaddle</option>
                                <option class="item" data-value="5">OneFlow</option>
                                <option class="item" data-value="6">MXNet</option>
                                <option class="item" data-value="3">Other</option>
                            </div>
                        </div>

                    </div>
                    <div class="unite min_title inline fields required">
                        <div class="field required">
                            <label for="modelSelectedFile">{{.i18n.Tr "repo.model.manage.modelfile"}}</label>
                        </div>
                        <div class="thirteen wide field" style="position:relative">
                            <input id="modelSelectedFile" type="text"  readonly required onclick="showMenu();"  name="modelSelectedFile" >
                            <div id="menuContent" class="menuContent" style="display:none;">
                                <ul id="treeDemo" class="ztree"></ul>
                            </div>
                        </div>
                    </div>
                    <div class="inline field">
                        <label>{{.i18n.Tr "repo.model.manage.modellabel"}}</label>
                        <input style="width: 83%;margin-left: 7px;" id="label" name="label" maxlength="255"
                            placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
                    </div>
                    <div class="inline field">
                        <label for="description">{{.i18n.Tr "repo.model.manage.modeldesc"}}</label>
                        <textarea style="width: 83%;margin-left: 7px;" 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, 256)"></textarea>
                    </div>

                    <div class="inline field" style="margin-left: 75px;">
                        <button onclick="createModel()" type="button" class="ui create_train_job green button"
                            style="position: absolute;">
                            {{.i18n.Tr "repo.model.manage.sava_model"}}
                        </button>
                    </div>
                </form>
                <div class="actions" style="display: inline-block;margin-left: 180px;">
                    <button class="ui button cancel">{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
                </div>
            </div>


        </div>
    </div>

</div>
{{template "base/footer" .}}
<script type="text/javascript" src="/self/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/self/ztree/js/jquery.ztree.excheck.js"></script>
<script src="{{StaticUrlPrefix}}/js/specsuse.js?v={{MD5 AppVer}}" type="text/javascript"></script>
<script>
    ;(function() {
        var SPEC = {{ .Spec }};
        var showPoint = false;
        var specStr = window.renderSpecStr(SPEC, showPoint, {
            gpu_memory: {{$.i18n.Tr "cloudbrain.gpu_memory"}},
            free: {{$.i18n.Tr "cloudbrain.free"}},
            point_hr: {{$.i18n.Tr "cloudbrain.point_hr"}},
            memory: {{$.i18n.Tr "cloudbrain.memory"}},
            shared_memory: {{$.i18n.Tr "cloudbrain.shared_memory"}},
        });
        $('td.ti-text-form-content.spec').text(specStr);
    })();
    var userName;
    var repoPath;
    $(document).ready(function(){
        var url = window.location.href;
        var urlArr = url.split('/')
        userName = urlArr.slice(-4)[0]
        repoPath = urlArr.slice(-3)[0]
    });

   var setting = {
			check: {
				enable: true,
				chkboxType: {"Y":"ps", "N":"ps"}
			},
			view: {
				dblClickExpand: false
			},
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck
			}
	};

	function beforeClick(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.checkNode(treeNode, !treeNode.checked, null, true);
			return false;
	}
		
	function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			for (var i=0, l=nodes.length; i<l; i++) {
                if(nodes[i].isParent){
                   continue;
                }
                var pathNodes = nodes[i].getPath();
                var path ="";
                for(var j=0;j<pathNodes.length;j++){
                    if(j ==0){
                        path +=  pathNodes[j].name;
                    }else{
                        path += "/" + pathNodes[j].name;
                    }
                }
				v += path + ";";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#modelSelectedFile");
			cityObj.attr("value", v);
	}
       
	function showMenu() {
			var cityObj = $("#modelSelectedFile");
			var cityOffset = $("#modelSelectedFile").offset();
            $("#menuContent").slideDown("fast");
			$("body").bind("mousedown", onBodyDown);
	}
	function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "modelSelectedFile" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
	}
    let dirKey="isOnlyDir--:&";
    function loadSelectedModelFile(trainJob){
            console.log("trainJob=" + trainJob);
            $('#choice_file').dropdown('clear')
            $("#model-file").empty()
            if(trainJob ==null || trainJob ==""){
                console.log("trainJob is null");
            }else{
                let type = trainJob.Type;
                if(type == 2){
                    if(trainJob.ComputeResource=="NPU"){
                        type=1;
                    }else{
                        type=0;
                    }
                }
                $.get(`/${userName}/${repoPath}/modelmanage/query_train_model?jobName=${trainJob.JobName}&type=${type}&VersionName=${trainJob.VersionName}`, (data) => {
                    const n_length = data.length
                    let file_html=''
                    let firstFileName =''
                    var zNodes=[];
                    var nodesMap={};
                    for (let i=0;i<n_length;i++){
                        var parentNodeMap = nodesMap;
                        var fileSplits = data[i].FileName.split("/");
                        for(let j=0;j < fileSplits.length;j++){
                            if(fileSplits[j] == ""){
                                break;
                            }
                            if(parentNodeMap[fileSplits[j]] == null){
                                parentNodeMap[fileSplits[j]] = {};
                            }
                            parentNodeMap = parentNodeMap[fileSplits[j]];
                        }
                    }
                    for (let i=0;i<n_length;i++){
                        var parentNodeMap = nodesMap;
                        var fileSplits = data[i].FileName.split("/");
                        for(let j=0;j < fileSplits.length;j++){
                            if(fileSplits[j] == ""){
                                if(data[i].FileName[data[i].FileName.length -1] =="/"){
                                    if(Object.keys(parentNodeMap).length ==0){
                                        parentNodeMap[dirKey]="true";
                                    }
                                }
                                break;
                            }
                            parentNodeMap = parentNodeMap[fileSplits[j]];
                        }
                    }
                    convertToNode(zNodes,nodesMap);
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                })
            }
    }

    function convertToNode(nodeList,nodesMap){
            var keyList = Object.keys(nodesMap);
            keyList.sort(function(a,b){
	            return a-b;
            });
            var isFirst = true;
            for(var i=0; i<keyList.length;i++){
                var node = {};
                node["name"] = keyList[i];
                nodeList.push(node);
                if(nodesMap[keyList[i]] != null && Object.keys(nodesMap[keyList[i]]).length >0){
                    if(nodesMap[keyList[i]][dirKey] != null){
                        node["open"] = false;
                        node["isParent"] = true;
                    }else{
                        node["children"]=[];
                        if(isFirst){
                            node["open"] = true;
                            isFirst= false;
                        }
                        convertToNode(node["children"],nodesMap[keyList[i]]);
                    }
                }
            }
    }
   function showcreate(obj) {
        $('.ui.modal.second')
            .modal({
                centered: false,
                onShow: function () {
                    $('input[name="version"]').addClass('model_disabled')
                    $('#JobName').val(obj.DisplayJobName).addClass('model_disabled')
                    $('input[name="jobId"]').val(obj.JobID)
                    $('input[name="versionName"]').val("V0001")
                   
                   if(obj.ComputeResource=="NPU"){
                         if (obj.EngineName != null && obj.EngineName != "") {
                            srcEngine = obj.EngineName.split('-')[0]
                            srcEngine = srcEngine.trim().toLowerCase();
                             if (srcEngine == 'tensorflow') {
                                $('#choice_Engine .default.text').text("TensorFlow");
                                $('#choice_Engine input[name="engine"]').val(1)
                             }
                              if (srcEngine == 'mindspore') {
                                $('#choice_Engine .default.text').text("MindSpore");
                                $('#choice_Engine input[name="engine"]').val(2)
                              }
                        }
                   }else{
                        $('#choice_Engine .default.text').text("PyTorch");
                        $('#choice_Engine input[name="engine"]').val(0)
                    }
                   $('#choice_Engine .default.text').css({ "color": "rgb(0, 0, 0,0.87)" })
                   $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })
                   createModelName();
                   loadSelectedModelFile(obj);
                },
                onHide: function () {
                    $('.ui.dimmer').css({ "background-color": "" })
                    $('.ui.error.message').text()
                    $('.ui.error.message').css('display', 'none')
                }
            })
            .modal('show')
    }
    function createModel() {
        if(!$('input#modelSelectedFile').val()){
            $('input#modelSelectedFile').parent().addClass('error')
            return
            
        }
        let url_href = `/${userName}/${repoPath}/modelmanage/create_new_model`
        let data = $("#formId").serialize()
        $("#mask").css({ "display": "block", "z-index": "9999" })
        $.ajax({
            url: url_href,
            type: 'POST',
            data: data,
            success: function (res) {
                $('input[name="engine_name"]').val("");
                $('input[name="engine"]').val("");
                $('input[name="jobId"]').val("");
                $('input[name="label"]').val("");
                $('input[name="description"]').val("");
                var cityObj = $("#modelSelectedFile");
			    cityObj.attr("value", "");
                document.getElementById("formId").reset();
                location.href = `/${userName}/${repoPath}/modelmanage/show_model`
                $('.ui.modal.second').modal('hide')
            },
            error: function (xhr) {
                // 隐藏 loading
                // 只有请求不正常（状态码不为200）才会执行
                $('.ui.error.message').text(xhr.responseText)
                $('.ui.error.message').css('display', 'block')
            },
            complete: function (xhr) {
                $("#mask").css({ "display": "none", "z-index": "1" })
            }
        })

    }
    function createModelName() {
        let repoName = location.pathname.split('/')[2]
        let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)
        $('#name').val(modelName)
        $('#version').val("0.0.1")
    }

    $('.menu .item').tab()
    $(document).ready(function () {
        $('.ui.accordion').accordion({ selector: { trigger: '.icon' } });
    });
    $(document).ready(function () {
        $('.secondary.menu .item').tab();
    });

    let userName
    let repoPath
    let jobID
    let downlaodFlag = {{ $.canDownload }}
    $(document).ready(function () {
        let url = window.location.href;
        let urlArr = url.split('/')
        userName = urlArr.slice(-5)[0]
        repoPath = urlArr.slice(-4)[0]
        jobID = urlArr.slice(-1)[0]
    })
    function stopBubbling(e) {
        e = window.event || e;
        if (e.stopPropagation) {
            e.stopPropagation();      //阻止事件 冒泡传播
        } else {
            e.cancelBubble = true;   //ie兼容
        }
    }

   
    function renderSize(value) {
        if (null == value || value == '') {
            return "0 Bytes";
        }
        var unitArr = new Array("Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB");
        var index = 0;
        var srcsize = parseFloat(value);
        index = Math.floor(Math.log(srcsize) / Math.log(1024));
        var size = srcsize / Math.pow(1024, index);
        size = size.toFixed(0);//保留的小数位数
        return size + unitArr[index];
    }
</script>