aiforge/templates/repo/cloudbrain/benchmark/new.tmpl

{{template "base/head" .}}
<style>

.unite{
    font-family: SourceHanSansSC-medium !important;
    color: rgba(16, 16, 16, 100) !important;
}

.title{
    font-size: 16px !important;
    padding-left: 3rem !important;
}
.min_title{
    font-size: 14px !important;
    padding-left: 6rem !important;
    margin-bottom: 2rem !important;

}
.width{
    width:100% !important;
}
.width80{
    width: 80.7% !important;
    margin-left: 10px;
}
.width85{
    width: 85% !important;
    margin-left: 4.5rem !important;
}
.width81{
    margin-left: 1.5rem;
    width: 81% !important;
}

.add{font-size: 18px;
    padding: 0.5rem;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 0px 5px 5px 0px;
    line-height: 21px;
    text-align: center;
    color: #C2C7CC;
}
.min{
    font-size: 18px;
    padding: 0.5rem;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 5px 0px 0px 5px;
    line-height: 21px;
    text-align: center;
    color: #C2C7CC;
}

</style>
<!-- <div class="ui page dimmer">
    <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
</div> -->
<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">
        {{template "base/alert" .}}
        <h4 class="ui top attached header">
            {{.i18n.Tr "repo.modelarts.train_job.new"}}
        </h4>
        <div class="ui attached segment">
            <!-- equal width  -->
            <form class="ui form" action="{{.Link}}" method="post">
                {{.CsrfTokenHtml}}
                <input type="hidden" name="action" value="update">
  
                
                <div class="required unite min_title inline field">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
                    <input style="width: 60%;" name="job_name" id="trainjob_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="254">
                </div>
                <div class="unite min_title inline field">
                    <label style="font-weight: normal;" for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}&nbsp;&nbsp;</label>
                    <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="254" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 255)"></textarea>
                </div>
                
                 <div class="required unite min_title inline field">
                        <label style="font-weight: normal;">GPU类型</label>
                        <select id="cloudbrain_gpu_type" class="ui search dropdown" placeholder="选择GPU类型" style='width:385px' name="gpu_type">
                            {{range .benchmark_gpu_types}}
                                <option value="{{.Queue}}">{{.Value}}</option>
                            {{end}}
                        </select>
                </div>

                <div class="required unite min_title inline fields" style="width: 90%;">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_type"}}&nbsp;&nbsp;&nbsp;</label>
                    <div class="field" style="flex: 1.5;">
                        <select class="ui dropdown width" id="benchmark_types_id" name="benchmark_types_id" >
                            {{range .benchmark_types}}
                                <option value="{{.Id}}">{{.First}}</option>
                            {{end}}
                        </select>
                    </div>
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_child_type"}}&nbsp;&nbsp;&nbsp;</label>
                    <div class="field" style="flex: 2;" id="engine_name">
                        <select class="ui dropdown width" id="benchmark_child_types_id" style='width: 100%;' name="benchmark_child_types_id">
                               
                        </select>

                    </div>

                </div>

                <div class="required unite min_title inline field">
                     <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_mirror"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <input type="text" list="cloudbrain_image" placeholder="选择镜像" name="image" required autofocus maxlength="254">
                        <i class="times circle outline icon icons" style="visibility: hidden;" onclick="clearValue()"></i>
                        <datalist class="ui search" id="cloudbrain_image" style='width:385px;' name="image">
                            {{range .images}}
                                <option name="image" value="{{.Place}}">{{.PlaceView}}</option>
                            {{end}}
                            {{range .public_images}}
                                <option name="image" value="{{.Place}}">{{.PlaceView}}</option>
                            {{end}}
                        </datalist>
                </div>

               

                <div class="required unite min_title inline field">
                        <label style="font-weight: normal;">资源规格</label>
                        <select id="cloudbrain_resource_spec" class="ui search dropdown" placeholder="选择资源规格" style='width:385px' name="resource_spec_id">
                            {{range .benchmark_resource_specs}}
                                <option name="resource_spec_id" value="{{.Id}}">GPU数：{{.GpuNum}}，CPU数：{{.CpuNum}}，内存(MB)：{{.MemMiB}}，共享内存(MB)：{{.ShareMemMiB}}</option>
                            {{end}}
                        </select>
                </div>

                <div class="inline unite min_title field required">
                        <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_train"}}</label>
                        <input disabled="disabled" style="width: 33.5%;" name="train_file" id="train_file" value="train.py" tabindex="3" autofocus required maxlength="254" >
                        <a  href="https://git.openi.org.cn/OpenIOSSG/MINIST_Example" target="_blank">查看样例</a>
                </div>

                <div class="inline unite min_title field required">
                        <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_test"}}</label>
                        <input disabled="disabled" style="width: 33.5%;" name="test_file" id="test_file" value="test.py" tabindex="3" autofocus required maxlength="254" >
                        <a  href="https://git.openi.org.cn/OpenIOSSG/MINIST_Example" target="_blank">查看样例</a>
                </div>

                
                <div class="inline unite min_title field">
                    <button class="ui create_train_job green button">
                    {{.i18n.Tr "repo.cloudbrain.new"}}
                    </button>
                    <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
                </div>
                
                <!-- 模态框 -->
                
            </form>
        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    let url_href = window.location.pathname.split('create')[0]
    $(".ui.button").attr('href',url_href)

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

    $('#benchmark_types_id').change(function(){
        setChildType();
    })

    function setChildType(){
        var html = "<option value=\"1\">无</option>" ;
        if ($('#benchmark_types_id').val() == '2') {
            html = "<option value=\"1\">vehicle reid</option>" ;
            html += "<option value=\"2\">image-based person reid</option>" ;
            html += "<option value=\"3\">person search</option>" ;
            html += "<option value=\"4\">video-based person reid</option>" ;
        }
        document.getElementById("benchmark_child_types_id").innerHTML=html;
    }

    document.onreadystatechange = function() {
        if (document.readyState === "complete") {
           setChildType();
        }
    }
  
    function validate(){
        $('.ui.form')
        .form({
            on: 'blur',
            inline:true,
            fields: {
               
                job_name:{
                    identifier  : 'job_name',
                    rules: [
                    {
                        type: 'regExp[/^[a-zA-Z0-9-_]{1,36}$/]',
                        prompt : '只包含大小写字母、数字、_和-，最长36个字符。'
                    }
                    ]
                },
                image:{
                    identifier  : 'image',
                    rules: [
                    {
                        type: 'empty',
                        prompt : '选择一个镜像'
                    }
                    ]

                }
            },
            onSuccess: function(){
                // $('.ui.page.dimmer').dimmer('show')
                document.getElementById("mask").style.display = "block"
            },
            onFailure: function(e){	
                return false;
            }
        })
    }


    $('.ui.create_train_job.green.button').click(function(e) {
        validate() 
    })
</script>