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">
                    模型管理 
                </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>
    </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 initObj = transObj(versionData)[0]
        let initModelAcc = transObj(versionData)[1]
        let id= transObj(data)[2]
        $('#showInfo').empty()
        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++){
            html += `<option value="${data[i].Version}">${data[i].Version}</option>`
        }
        $('#dropdown').append(html)
        let initObj = transObj(data)[0]
        let initModelAcc = transObj(data)[1]
        let id= transObj(data)[2]
        renderInfo(initObj,initModelAcc,id)
    })
}
function transObj(data){
    let {ID,Name,Version,Label,Size,Description,CreatedUnix,Accuracy} = data[0]
    let modelAcc = JSON.parse(Accuracy)
    let size = tranSize(Size) 
    let time = transTime(CreatedUnix)
    let initObj = {
        ModelName:Name || '--',
        Version:Version,
        Label:Label || '--',
        Size:size,
        CreateTime:time,
        Description:Description || '--',
    }
    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(text,id){
    $('#edit-td').replaceWith("<div id='edit-div' style='width:80%;display: inline-block;'><textarea id='textarea-value' rows='3' maxlength='255' style='width:80%;' id='edit-text'></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){
    $('#edit-div').replaceWith('<div id="edit-td" style="display:flex;"><span title="\'' + text + '\'" class="iword-elipsis">'+text+'</span><i class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(\'' + text + '\',\'' + id + '\')"></div>')
}
function editorSure(text,id){
    let description=$('#textarea-value').val()
    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 title="\'' + description + '\'" class="iword-elipsis">'+description+'</span><i class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(\'' + description + '\',\'' + id + '\')"></div>')
    })

}
function renderInfo(obj,accObj,id){
    let html = ''
    html += '<div class="half-table">'
    html += '<span class="model_header_text">基本信息</span>'
    html += '<table class="tableStyle" style="margin-top:20px;">'
    html += '<tbody>'
    for(let key in obj){
        html += '<tr style="font-size: 12px;">'
        html += `<td class="ti-text-form-label text-width80">${key}</td>`
        if(key==="Description"){
            let description = obj[key]
            html += '<td class="ti-text-form-content" ><div id="edit-td" style="display:flex"><span title="\'' + description + '\'" class="iword-elipsis">'+description+'</span><i class="pencil alternate icon" style="cursor:pointer;vertical-align: top;" id="editor" onclick="editorFn(\'' + description + '\',\'' + id + '\')"></div></td>'
        }else{
            html += `<td class="ti-text-form-content word-elipsis"><span title="${obj[key]}">${obj[key]}</span></td>`
        }
        html += '</tr>'
    }

    html += '</tbody>'
    html += '</table>'
    html += '</div>'
    html += '<div class="half-table">'
    html += '<span class="model_header_text">模型精度</span>'
    html += '<table class="tableStyle" style="margin-top:20px;">'
    html += '<tbody>'
    for(let key in accObj){
        html += '<tr style="font-size: 12px;">'
        html += `<td class="ti-text-form-label text-width80">${key}</td>`
        html += `<td class="ti-text-form-content word-elipsis">${accObj[key]}</td>`
        html += '</tr>'
    }
    html += '</tbody>'
    html += '</table>'
    html += '</div>'
    html += '<div style="clear: both;"></div>'
    $('#showInfo').append(html)
}

</script>