aiforge/templates/repo/modelmanage/index.tmpl

<!-- 头部导航栏 -->
{{template "base/head" .}}
<style>
.width70{
    width: 70% !important;
}
.width83{
    width: 83% !important;
}
.content-padding{
    padding: 40px !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>
{{$repository := .Repository.ID}}
<!-- 提示框 -->
<div class="alert"></div>

<div class="repository release dataset-list view">
    {{template "repo/header" .}}
    <!-- 列表容器 -->
    <div class="ui container">
        {{template "base/alert" .}}
        <div class="ui two column stackable grid ">
            <div class="column"></div>
            <div class="column right aligned">
                {{if .Permission.CanWrite $.UnitTypeCloudBrain}}       
                <a class="ui green button" onclick="showcreate(this)">{{$.i18n.Tr "repo.modelarts.train_job.new_train"}}</a>{{end}}
            </div>
        </div>

        <!-- 中下列表展示区 -->
        <div class="ui grid">
            <div class="row">
                <div class="ui sixteen wide column">
                    <!-- 任务展示 -->
                    <div class="dataset list" id="model_list">
                        <!-- 表头 -->
                        <!-- <div class="ui grid stackable" style="background: #f0f0f0;;">
                            <div class="row">
                                <div class="three wide column padding0">
                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.model_name"}}</span>
                                </div>
                                <div class="one wide column text center padding0">
                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version"}}</span>
                                </div>
                                <div class="one wide column text center padding0" style="width: 7.25%!important;">
                                    <span style="margin:0 6px">{{$.i18n.Tr "repo.modelarts.version_nums"}}</span>
                                </div>
                                <div class="two wide column text center padding0" style="width: 11.5%!important;">
                                        <span>{{$.i18n.Tr "repo.modelarts.model_size"}}</span>
                                </div>
                                <div class="two wide column text center padding0" style="width: 8.5%!important;">
                                        <span>{{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</span>
                                </div>
                                <div class="two wide column text center padding0" style="width: 11.5%!important;">
                                        <span>{{$.i18n.Tr "repo.modelarts.computing_resources"}}</span> 
                                </div>
                                <div class="two wide column text center padding0">
                                        <span>{{$.i18n.Tr "repo.modelarts.createtime"}}</span>
                                </div>
                                <div class="one wide column text center padding0">
                                    <span>{{$.i18n.Tr "repo.cloudbrain_creator"}}</span> 
                                </div>
                                <div class="two wide column text center padding0" style="width: 17.5%!important;">
                                    <span>{{$.i18n.Tr "repo.cloudbrain_operate"}}</span>
                                </div>

                            </div>
                        
                        </div>                      -->
                    
                        <!-- <div class="ui grid stackable item">
                            <div class="row">
                            
                                
                                <div class="three wide column padding0">
                                    <a class="title" href="{{$.Link}}/{{.JobID}}" title="{{.JobName}}" style="font-size: 12px;">
                                        <span class="fitted" style="vertical-align: middle;">{{svg "octicon-tasklist" 16}}</span>
                                        <span class="fitted" style="width: 90%;vertical-align: middle;margin-left: 0.4rem;">Model-abcd</span>
                                    </a>
                                </div>
                                
                                <div class="one wide column text center padding0">   
                                        <span>0.0.3</span>                                  
                                </div>
                                
                                <div class="one wide column text center padding0" style="width: 7.25%!important;">   
                                    <span>20</span>                                  
                                </div>
                                 
                                 <div class="two wide column padding0 text center"  style="width: 11.5%!important;">
                                    <span>20.28MB</span>   
                                </div>
                                
                                <div class="two wide column padding0 text center" style="width: 8.5%!important;">
                                    <span>Mindspore</span>
                                </div>
                                
                                <div class="two wide column text center padding0" style="width: 11.5%!important;">
                                    <span style="font-size: 12px;">CPU</span> 
                                </div>
                                
                                <div class="two wide column text center padding0">
                                    <span style="font-size: 12px;">2021/09/20 12:06:13</span> 
                                </div>
                                
                                <div class="one wide column text center padding0">
                                    {{if .User.Name}}
                                        <a href="{{AppSubUrl}}/{{.User.Name}}" title="{{.User.Name}}"><img class="ui avatar image" src="{{.User.RelAvatarLink}}"></a>
                                    {{else}}
                                        <a title="Ghost"><img class="ui avatar image" src="{{AppSubUrl}}/user/avatar/Ghost/-1"></a>
                                    {{end}}
                                </div>

                                <div class="two wide column text center padding0" style="width: 17.5%!important;">
                                    <div style="display: flex;justify-content: space-between;">
                                        <a>创建新版本</a>
                                        <a>下载</a>
                                        <a onclick="assertDelete(this)">删除</a>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                        
                    </div>

                </div>
            </div>
        </div>

    </div>

</div>

<!-- div full height-->
</div>



<!-- 确认模态框 -->
<div id="deletemodel">
    <div class="ui basic modal first">
        <div class="ui icon header">
            <i class="trash icon"></i> 删除任务
        </div>

        <div class="content">
            <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
        </div>
        <div class="actions">
            <div class="ui red basic inverted cancel button">
                <i class="remove icon"></i> 取消操作
            </div>
            <div class="ui green basic inverted ok button">
                <i class="checkmark icon"></i> 确定操作
            </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>导入新模型</h4>
        </div>
        <div class="content content-padding">
            <form id="formId" method="POST" class="ui form">
                <div class="ui error message">
                    <p></p>
                </div>
                <input type="hidden" name="_csrf" value="">
                <div class="two inline fields ">   
                    <div class="required ten wide field">
                        <label style="margin-left: -23px;">选择训练任务</label>
                        <!-- <select class="ui dropdown search width83" name="model_name">
                            <option name="model_name" value="1">1</option>
                            <option name="model_version" value="11">11</option>
                        </select> -->
                        <div class="ui dropdown selection search width83 loading" id="choice_model">
                            <input type="hidden" id="JobId" name="JobId" required>
                            <div class="default text">选择训练任务</div>
                            <i class="dropdown icon"></i>
                            <div class="menu" id="job-name">
                                <!-- <div class="item" data-value="">Male</div>
                                <div class="item" data-value="female">Female</div> -->
                            </div>
                        </div>
                        
                    </div>
                    <div class="required six widde field">
                        <label>版本</label>
                        <div class="ui dropdown selection search width70" id="choice_version">
                            <input type="hidden" id="VersionName" name="VersionName" required>
                            <div class="default text">选择版本</div>
                            <i class="dropdown icon"></i>
                            <div class="menu" id="job-version">
                                
                            </div>
                        </div>
                        <!-- <select class="ui dropdown search width70" name="model_version">
                             <option name="model_version" value="1">1</option>
                             <option name="model_version" value="11">11</option>
                        </select> -->
                    </div>
                </div>

                <div class="required inline field" id="modelname">
                    <label>模型名称</label>
                    <input style="width: 45%;" id="name" name="Name" required maxlength="255">
                </div>
                <div class="required inline field" id="verionname">
                    <label>模型版本</label>
                    <input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255">
                </div>
                <div class="inline field">
                    <label>模型标签</label>
                    <input style="width: 83%;margin-left: 7px;" name="Label" maxlength="255">
                </div>
                <div class="inline field">
                    <label for="description">模型描述</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 id="submitId" type="button" class="ui create_train_job green button" style="position: absolute;">
                    {{.i18n.Tr "repo.cloudbrain.new"}}
                    </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>


{{template "base/footer" .}}

<script>
    let repolink =  {{.RepoLink}}
    let repoId = {{$repository}}
    let url_href = window.location.pathname.split('show_model')[0] + 'create_model'
    const {_AppSubUrl, _StaticUrlPrefix, csrf} = window.config;
    $('input[name="_csrf"]').val(csrf)

    function createModelName(){
        let repoName = location.pathname.split('/')[2]
        let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)
        
        console.log("repoName",modelName)
        $('#name').val(modelName)
        $('#version').val("0.0.1")
    }
    function showcreate(obj){
        $('.ui.modal.second')
        .modal({
            centered: false,
            onShow:function(){
                $('.ui.dimmer').css({"background-color":"rgb(136, 136, 136,0.7)"})
                $("#job-name").empty()
                createModelName()
                loadTrainList()
            },
            onHide:function(){
                document.getElementById("formId").reset();
                $('#choice_model').dropdown('clear')
                $('#choice_version').dropdown('clear')
                $('.ui.dimmer').css({"background-color":""})
            }
        })
        .modal('show')
    }
    // 删除时用户确认
    function assertDelete(obj) {
        if (obj.style.color == "rgb(204, 204, 204)") {
            return
        } else {
            var delId = obj.parentNode.id
            flag = 1;
            $('.ui.basic.modal.first')
                .modal({
                    onDeny: function() {
                        flag = false
                    },
                    onApprove: function() {
                        document.getElementById(delId).submit()
                        flag = true
                    },
                    onHidden: function() {
                        if (flag == false) {
                            $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                        }
                    }
                })
                .modal('show')
        }
    }

    $(function(){
        $('#choice_model').dropdown({
        onChange:function(value){
            $(".ui.dropdown.selection.search.width70").addClass("loading")
            $("#job-version").empty()
            loadTrainVersion(value)
            }
        })
    })
    function versionAdd(version){
        let versionArray = version.split('.')
        if(versionArray[2]=='9'){
            if(versionArray[1]=='9'){
                versionArray[0] = String(Number(versionArray[1])+1)
                versionArray[1] = '0'
            }else{
                versionArray[1]=String(Number(versionArray[1])+1)
            }
            
        }else{
            versionArray[2]=String(Number(versionArray[2])+1)
        }
        console.log(versionArray.join('.'))
        return versionArray.join('.')
    }
    function loadTrainList(){
        $.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => {
            const n_length = data.length
            let train_html=''
            for (let i=0;i<n_length;i++){
                train_html += `<div class="item" data-value="${data[i].JobID}">${data[i].JobName}</div>`
                train_html += '</div>'
            }
            $("#job-name").append(train_html)
            $(".ui.dropdown.selection.search.width83").removeClass("loading")      
        })
    }
    function loadTrainVersion(value){
        $.get(`${repolink}/modelmanage/query_train_job_version?JobID=${value}`, (data) => {
            const n_length = data.length
            let train_html=''
            for (let i=0;i<n_length;i++){
                train_html += `<div class="item" data-value="${data[i].VersionName}">${data[i].VersionName}</div>`
                train_html += '</div>'
            }
            $("#job-version").append(train_html)
            $(".ui.dropdown.selection.search.width70").removeClass("loading")
        })
    }

    function check(){
        let jobid = document.getElementById("JobId").value
        let versionname = document.getElementById("VersionName").value
        let name= document.getElementById("name").value
        let version= document.getElementById("version").value
        if(jobid==""){
            $(".required.ten.wide.field").addClass("error")
            return false
        }else{
            $(".required.ten.wide.field").removeClass("error")
        }
        if(versionname==""){
            $(".required.six.widde.field").addClass("error")
            return false
        }else{
            $(".required.six.widde.field").removeClass("error")
        }
        if(name==""){
            $("#modelname").addClass("error")
            return false
        }else{
            $("#modelname").removeClass("error")
        }
        if(versionname==""){
            $("#verionname").addClass("error")
            return false
        }else{
            $("#verionname").removeClass("error")
        }
        return true
        
    }
    $('#submitId').click(function(){
        let flag=check()
        if(flag){
            let data = $("#formId").serialize()
            $("#mask").css({"display":"block","z-index":"9999"})
            $.ajax({
                url:url_href,
                type:'POST',
                data:data,
                success:function(res){
                    $('.ui.modal.second').modal('hide')
                    window.location.href=location.href
                },
                error: function (xhr) {
                // 隐藏 loading
                // 只有请求不正常（状态码不为200）才会执行
                    $('.ui.error.message').text(xhr.responseText)
                },
                complete:function(xhr){
                    $("#mask").css({"display":"none","z-index":"1"})
                }
            })
        }else{
            return false
        }
        
    })  
</script>