aiforge/templates/repo/modelmanage/showinfo.tmpl

{{template "base/head" .}}
<div class="repository">
    {{template "repo/header" .}}
    <style>
    .model_header_text{
        font-size: 14px;
        color: #101010;
        font-weight: bold;
    }
    .ti_form{
        text-align: left;
        max-width: 100%;
        vertical-align: middle;
    }
    .ti-text-form-label {
        padding-bottom: 20px;
        padding-right: 20px;
        color: #8a8e99;
        font-size: 14px;
        white-space: nowrap !important;
        width: 80px;
        line-height: 30px;
    }
    .ti-text-form-content {
        line-height: 30px;
        padding-bottom: 20px;
        width: 100%;
    }
    .change-version{
        min-width: auto !important;
        border: 1px solid rgba(187, 187, 187, 100) !important;
        border-radius: .38571429rem !important;
        margin-left: 1.5em;
    }
    .title-word-elipsis{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 30%;
    }
    .word-elipsis{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding-right: 80px;
    }
    .half-table{
        width: 50%;
        float: left;
    }
    .text-width80 {
    width: 100px;
    line-height: 30px;
    }
    .tableStyle{
        width:100%;
        table-layout: fixed;
    }
    .iword-elipsis{
        display: inline-block;
        width: 80%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    </style>
    <div class="ui container">
        <h4 class="ui header" id="vertical-segment">
                <!-- <a href="javascript:window.history.back();"><i class="arrow left icon"></i>返回</a> -->
            <div class="ui breadcrumb">
                <a class="section" href="{{$.RepoLink}}/modelmanage/show_model">
                    {{$.i18n.Tr "repo.model.manage.model_manage"}}
                </a>
                <div class="divider"> / </div>
                <div class="active section">{{.name}}</div>
            </div>
            <select class="ui dropdown tiny change-version" id="dropdown" onchange="changeInfo(this.value)">
            </select>
        </h4>
        <div id="showInfo" style="border:1px solid #e2e2e2;padding: 20px 60px;margin-top:24px">
            <div class="half-table">
                <span class="model_header_text">基本信息</span>
                <table class="tableStyle" style="margin-top:20px;">
                    <tbody>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.model.manage.model_name"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="ModelName" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.model.manage.version"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="Version" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.migrate_items_labels"}}</td>
                            <td class="ti-text-form-content">
                                <div id="Label" style="overflow: hidden;width: 95%;">
                                    
                                </div>
                                

                            </td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.model_size"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="Size" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.createtime"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="CreateTime" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.model.manage.description"}}</td>
                            <td class="ti-text-form-content" >
                                <div id="edit-td" style="display:flex">
                                    <span id="Description" title="" class="iword-elipsis"></span>
                                    <i id="edit-pencil" data-id="" data-desc="" class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(this)"></i>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.code_version"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="CodeBranch" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.train_job.start_file"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="BootFile" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.train_job.train_dataset"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="DatasetName" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="Parameters" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.train_job.AI_driver"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="EngineName" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.train_job.standard"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="FlavorName" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.modelarts.train_job.compute_node"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="WorkServerNumber" title=""></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="half-table">
                <span class="model_header_text">{{$.i18n.Tr "repo.model.manage.model_accuracy"}}</span>
                <table class="tableStyle" style="margin-top:20px;">
                    <tbody>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.model.manage.Accuracy"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="Accuracy" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">F1</td>
                            <td class="ti-text-form-content word-elipsis"><span id="F1" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.model.manage.Precision"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="Precision" title=""></span></td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">{{$.i18n.Tr "repo.model.manage.Recall"}}</td>
                            <td class="ti-text-form-content word-elipsis"><span id="Recall" title=""></span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
</div>
{{template "base/footer" .}}
<script>
let url = location.href.split('show_model')[0]
let ID = location.search.split('?name=').pop()
$(document).ready(loadInfo);
function changeInfo(version){
    $.get(`${url}show_model_info_api?name=${ID}`,(data)=>{
        let versionData = data.filter((item)=>{
            return item.Version === version
        })
        let returnArray = []
        returnArray = transObj(versionData)
        let [initObj,initModelAcc,id] = returnArray
        editorCancel('','')
        renderInfo(initObj,initModelAcc,id)
    })
}
function loadInfo(){
    $.get(`${url}show_model_info_api?name=${ID}`,(data)=>{
        let html = ''
        for (let i=0;i<data.length;i++){
            if(!data[i].IsCanOper){
                $("#edit-pencil").css("display","none")
            }
            html += `<option value="${data[i].Version}">${data[i].Version}</option>`
        }
        $('#dropdown').append(html)
        let returnArray = []
        returnArray = transObj(data)
        let [initObj,initModelAcc,id] = returnArray
        renderInfo(initObj,initModelAcc,id)
    })
}
function transObj(data){
    let {ID,Name,Version,Label,Size,Description,CreatedUnix,Accuracy,CodeBranch,CodeCommitID,TrainTaskInfo} = data[0]
    let modelAcc = JSON.parse(Accuracy)
    TrainTaskInfo = JSON.parse(TrainTaskInfo)
    // Parameters = JSON.parse(Parameters)
    let {Parameters,EngineName} = TrainTaskInfo
    Parameters = JSON.parse(Parameters)
    Parameters = Parameters.parameter.length === 0 ? '--':Parameters.parameter
    let size = tranSize(Size) 
    let time = transTime(CreatedUnix)
    let initObj = {
        ModelName:Name || '--',
        Version:Version,
        Label:Label || '--',
        Size:size,
        CreateTime:time,
        Description:Description || '--',
        CodeBranch:CodeBranch || '--',
        CodeCommitID:CodeCommitID || '--',
        BootFile:TrainTaskInfo.BootFile || '--',
        DatasetName:TrainTaskInfo.DatasetName || '--',
        Parameters:TrainTaskInfo.Parameters || '--',
        FlavorName:TrainTaskInfo.FlavorName || '--',
        WorkServerNumber:TrainTaskInfo.WorkServerNumber || '--',
        Parameters:Parameters,
        EngineName:EngineName,
    }
    let initModelAcc = {
        Accuracy: modelAcc.Accuracy || '--',
        F1: modelAcc.F1 || '--',
        Precision:modelAcc.Precision || '--',
        Recall: modelAcc.Recall || '--'
    }
    return [initObj,initModelAcc,ID]
        
}
function transTime(time){
    let date = new Date(time * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
    let Y = date.getFullYear() + '-';
    let M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
    let D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
    let h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
    let m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
    let s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
    return Y+M+D+h+m+s;
}
function tranSize(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(2);//保留的小数位数
    return size+unitArr[index];
}
function editorFn(context){
    let id= context.dataset.id
    let text = context.dataset.desc
    let textValue = text.replace(/enter;/g,'\r\n')
    $('#edit-td').replaceWith(`<div id='edit-div' style='width:80%;display: inline-block;'><textarea id='textarea-value' value='' rows='3' maxlength='255' style='width:80%;white-space: nowrap;' id='edit-text'>${textValue}</textarea><i class='check icon' style='color: #50d4ab;' onclick='editorSure("${text}","${id}")'></i><i class='times icon' style='color: #f66f6a;' onclick='editorCancel("${text}","${id}")'></i></div>`);
}
function editorCancel(text,id){
    let objkey = text.replace(/enter;/g,'\r\n')
    $('#edit-div').replaceWith(`<div id="edit-td" style="display:flex;"><span id="Description" title="${objkey}" class="iword-elipsis">${objkey}</span><i id="edit-pencil" data-id="${id}" data-desc="${text}" class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(this)"></div>`)
}
function editorSure(text,id){
    let description=$('#textarea-value').val()
    let sourcetext = $('#textarea-value').val().replace(/\n/g,'enter;')
    let data = {
        ID:id,
        Description:description
    }
    $.ajax({
        url:`${url}modify_model`,
        type:'PUT',
        data:data
    }).done((res)=>{
        $('#edit-div').replaceWith(`<div id="edit-td" style="display:flex;"><span id="Description" title="${description}" class="iword-elipsis">${description}</span><i id="edit-pencil" data-id="${id}" data-desc="${sourcetext}" class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(this)"></div>`)
    })
}
function renderInfo(obj,accObj,id){
    for(let key in obj){
        if(key==="Description"){
            let descriptionText=obj[key].replace(/\r\n|\n/g,'enter;')
            $(`#${key}`).text(obj[key])
            $(`#${key}`).attr("title",obj[key])

            $('#edit-pencil').attr("data-id",id)
            $('#edit-pencil').attr("data-desc",descriptionText)
        }
        else if(key==="Label"){
            $('#Label').empty()
            if(obj[key]==='--'){
                $('#Label').text(obj[key])
            }else{
                
                let labelArray = obj[key].trim().replace(/ +/g,' ').split(' ')
                let html=''
                for(let i=0;i<labelArray.length;i++){
                    html += `<a class="ui label" title="${labelArray[i]}">${labelArray[i]}</a>`
                }
                $('#Label').append(html)
            }
        }
        else if(key==="CodeCommitID"){
            let codeCommit = obj[key].slice(0,10)
            let html = `<a style="margin-left:1rem" class="ui label" title="${codeCommit}">${codeCommit}</a>`
            $('#CodeBranch').append(html)

        }
        else if(key==="Parameters"){
            if(obj[key]==='--'){
                $(`#${key}`).text(obj[key])
            }else{
                const parameterArray = obj[key].map(element => {
                let labelValue = `${element.label}=${element.value}` 
                return labelValue
                });
                const parameter = parameterArray.join(';  ')
                $(`#${key}`).text(parameter)
                $(`#${key}`).attr("title",parameter)
            }
            

        }
        else{
            $(`#${key}`).text(obj[key])
            $(`#${key}`).attr("title",obj[key])
        }
        
    }
    for(let key in accObj){
        $(`#${key}`).text(accObj[key])
        $(`#${key}`).attr("title",accObj[key])
    }
}

</script>