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 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">模型名称</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">版本</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">标签</td>
                            <td class="ti-text-form-content">
                                <div id="Label">
                                    
                                </div>
                                

                            </td>
                        </tr>
                        <tr>
                            <td class="ti-text-form-label text-width80">大小</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">创建时间</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">模型描述</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)"></div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <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">准确率</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">精确率</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">召回率</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
        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} = 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(context){
    let id= context.dataset.id
    let text = context.dataset.desc
    $('#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%;' id='edit-text'>"+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 id="Description" title="${text}" class="iword-elipsis">${text}</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 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="${description}" 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"){
            $(`#${key}`).text(obj[key])
            $(`#${key}`).attr("title",obj[key])
            $('#edit-pencil').attr("data-id",id)
            $('#edit-pencil').attr("data-desc",obj[key])
        }
        else if(key==="Label"){
            $('#Label').empty()
            if(obj[key]==='--'){
                $('#Label').text(obj[key])
            }else{
                let labelArray = obj[key].trim().split(' ')
                let html=''
                for(let i=0;i<labelArray.length;i++){
                    html += `<a class="ui label">${labelArray[i]}</a>`
                }
                $('#Label').append(html)
            }
        }
        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>