aiforge/templates/repo/modelarts/notebook/new.tmpl

{{template "base/head" .}}
<style>
.inline.required.field.cloudbrain_benchmark {
        display: none;
}
.inline.field {
    padding-left: 12rem !important;
}

.inline.field>label {
    width: 120px !important;
    text-align: right;
}

.inline.field .dropdown.selection {
    width: 60% !important;
}

.width70 {
    width: 60% !important;
}

.inline.field input {
    width: 40% !important;
}
</style>

<div id="mask">
    <div id="loadingPage">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>
<div class="repository">
    {{template "repo/header" .}}
    <div class="ui container">
        <div class="cloudbrain-type" style="display: none;" data-cloudbrain-type="{{.datasetType}}" data-repo-link="{{.RepoLink}}"></div>
        {{template "base/alert" .}}
        <h4 class="ui top attached header">
            {{.i18n.Tr "repo.cloudbrain.new"}}
        </h4>
        <div class="ui negative message" id="messageInfo" style="display:none">
            <p></p>
        </div>
        <div class="ui attached segment" style="border-top:none;">
            <form class="ui form" id="form_id" action="{{.Link}}" method="post">
                {{.CsrfTokenHtml}}
                <div class="inline required field">
                    <label>{{.i18n.Tr "cloudbrain.compute_resource"}}</label>
                    <div class="ui blue small menu compact selectcloudbrain">
                        <a class="item" href="{{.RepoLink}}/cloudbrain/create">
                            <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
                                <path fill="none" d="M0 0h24v24H0z"/>
                                <path d="M3 2.992C3 2.444 3.445 2 3.993 2h16.014a1 1 0 0 1 .993.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992zM19 11V4H5v7h14zm0 2H5v7h14v-7zM9 6h6v2H9V6zm0 9h6v2H9v-2z"/>
                            </svg>
                            CPU/GPU</a>
                        <a class="active item" href="{{.RepoLink}}/modelarts/notebook/create">
                            <svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16">
                                <path fill="none" d="M0 0h24v24H0z"/>
                                <path d="M3 2.992C3 2.444 3.445 2 3.993 2h16.014a1 1 0 0 1 .993.992v18.016a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992zM19 11V4H5v7h14zm0 2H5v7h14v-7zM9 6h6v2H9V6zm0 9h6v2H9v-2z"/>
                            </svg>
                            Ascend NPU</a>
                    </div>
                </div>
                <div class="inline required field">
                    <label>{{.i18n.Tr "cloudbrain.task_name"}}</label>
                    <input name="display_job_name" id="cloudbrain_job_name" placeholder="任务名称" value="{{.display_job_name}}" tabindex="3" autofocus required maxlength="255" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                </div>

                <div class="inline required field">
                    <label>{{.i18n.Tr "cloudbrain.mirror"}}</label>
                    <select id="cloudbrain_image" class="ui search dropdown" placeholder="{{.i18n.Tr "cloudbrain.choose_mirror"}}" style='width:385px' name="image_id">
                        {{range .images}}
                            <option name="image_id" value="{{.Id}}">{{.Value}}</option>
                        {{end}}
                    </select>
                </div>
                <div id="select-multi-dataset">

                </div>

                <!--<div class="inline required field">
                    <label>工作环境</label>
                    <input name="de" id="cloudbrain_de" value="{{.env}}" tabindex="3" disabled autofocus required maxlength="255" readonly="readonly">
                </div>
                <div class="inline required field">
                    <label>类型</label>
                    <input name="job_type" id="cloudbrain_job_type" value="{{.notebook_type}}" tabindex="3" disabled autofocus required maxlength="255" readonly="readonly">
                </div> -->
                <div class="inline required field">
                    <label>{{.i18n.Tr "cloudbrain.specification"}}</label>
                    <select id="cloudbrain_flavor" class="ui search dropdown" placeholder="选择规格" style='width:385px' name="flavor" {{if .CloudBrainPaySwitch}}blance="{{.PointAccount.Balance}}"{{end}}>
                        {{range .flavors}}
                            <option name="flavor" value="{{.Value}}" {{if $.CloudBrainPaySwitch}}unitprice="{{.UnitPrice}}"{{end}}>{{.Desc}}
                            {{if $.CloudBrainPaySwitch}}
                            ，{{ if eq .UnitPrice 0 }}{{$.i18n.Tr "points.free"}}{{else}}{{.UnitPrice}}{{$.i18n.Tr "points.points_hour"}}{{end}}
                            {{end}}
                            </option>
                        {{end}}
                    </select>
                    {{if .CloudBrainPaySwitch}}
                    <div class="cloudbrain_resource_spec_blance_tip width70" style="padding:0 5px;margin:6px 0;margin-left:135px;font-size:12px;">
                        <span>{{$.i18n.Tr "points.balance_of_points"}}<span style="color:red;margin: 0 3px">{{.PointAccount.Balance}}</span>{{$.i18n.Tr "points.points"}}</span><span>{{$.i18n.Tr "points.expected_time"}}<span style="color:red;margin: 0 3px" class="can-use-time"></span>{{$.i18n.Tr "points.hours"}}</span>
                        <span style="float:right;">
                            <i class="question circle icon link" data-position="right center" data-variation="mini"></i>
                            <a href="{{AppSubUrl}}/reward/point/rule" target="_blank">{{$.i18n.Tr "points.points_acquisition_instructions"}}</a>
                        </span>
                    </div>
                    {{end}}
                </div>
                <!--<div class="inline required field">
                    <label>数据集存放路径</label>
                    <input name="dataset_path" id="cloudbrain_dataset_path" value="{{.dataset_path}}" tabindex="3" disabled autofocus required maxlength="255" readonly="readonly">
                </div> -->
                <div class="inline field">
                    <label>{{.i18n.Tr "cloudbrain.description"}}</label>
                    <input name="description" id="cloudbrain_description" tabindex="3" autofocus maxlength="255">
                </div>
                <div class="inline field">
                    <label></label>
                    <button class="ui green button">
                        {{.i18n.Tr "repo.cloudbrain.new"}}
                    </button>
                    <a class="ui button cancel" href="{{.RepoLink}}/debugjob?debugListType=all">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
                </div>
            </form>
        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    // 判断必填选项是否填写正确
    let form = document.getElementById('form_id');

    $('#messageInfo').css('display','none')

    form.onsubmit = function(e){
        let value_task = $("input[name='display_job_name']").val()


        let re = /^[a-z0-9][a-z0-9-_]{1,36}$/
        let flag = re.test(value_task)
        if(!flag){
            $('#messageInfo').css('display','block')
            let str = '只能以小写字母或数字开头且只包含小写字母、数字、_和-、最长36个字符。'
            $('#messageInfo p').text(str)
            return false
        }

        let min_value_task = value_task.toLowerCase()

        $("input[name='display_job_name']").attr("value",min_value_task)
        document.getElementById("mask").style.display = "block"

    }
    // 点击按钮后遮罩层显示
    // function showmask() {
    //     document.getElementById("mask").style.display = "block"
    // }

    // 页面加载完毕后遮罩层隐藏
    document.onreadystatechange = function() {
        if (document.readyState === "complete") {
            document.getElementById("mask").style.display = "none"
        }
    }

    $('select.dropdown')
        .dropdown();
    $(function() {
        $("#cloudbrain_job_type").change(function() {
            if ($(this).val() == 'BENCHMARK') {
                $(".cloudbrain_benchmark").show();
            } else {
                $(".cloudbrain_benchmark").hide();
            }
        })
    })
    $(document).ready(function(){
    $(document).keydown(function(event){
    if(event.keyCode==13){
        event.preventDefault();
    }
    });
    });

    ;(function() {
        $('#cloudbrain_flavor').on('change', function(e) {
            var cloudbrain_resource_spec_blance_tip_el = $('.cloudbrain_resource_spec_blance_tip');
            var val = $(this).val();
            var blance = $(this).attr('blance');
            var unitPrice = $(this).find('option:selected').attr('unitprice');
            if (!blance || !unitPrice) return;
            if (unitPrice == 0) {
                cloudbrain_resource_spec_blance_tip_el.find('.can-use-time').parent().hide();
            } else {
                var canUseTime = Number(blance) / Number(unitPrice);
                cloudbrain_resource_spec_blance_tip_el.find('.can-use-time').text(canUseTime.toFixed(2)).parent().show();
            }
        }).trigger('change');        
    })();
</script>