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="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">
                
                <a class="active item" data-tab="first">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                
                <a class="item" data-tab="second">{{$.i18n.Tr "repo.model_download"}}</a>
            </div>
            <div class="ui tab active" data-tab="first">
                <div class="half-table">
                    <span class="model_header_text">{{$.i18n.Tr "repo.model.manage.baseinfo"}}</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.train_job"}}</td>
                                <td class="ti-text-form-content word-elipsis">
                                  <a id="DisplayJobNameHref" class="title" style="font-size: 14px;" target="_blank">
                                        <span id="DisplayJobName" class="fitted" style="width: 90%;vertical-align: middle;"></span>
                                  </a>
                                </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_Engine"}}</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 class="ui tab" data-tab="second">
                <input type="hidden" name="model" value="-1">
                <input type="hidden" name="modelback" value="-1">
                <div class='ui breadcrumb model_file_bread' id='file_breadcrumb'>
                    <div class="active section"></div>
                    <div class="divider"> / </div>
                </div>
                <div id="dir_list">
                    
                </div>
            </div>
        </div>
    </div>
</div>
{{template "base/footer" .}}
<script>
let url = location.href.split('show_model')[0]
let trainJobUrl =url.split('modelmanage')[0]
let ID = location.search.split('?name=').pop()
$(document).ready(function(){
    $('.secondary.menu .item').tab();
});
$(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)
        loadModelFile(versionData[0].ID,versionData[0].Version,'','','init')
    })
}
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)
        loadModelFile(data[0].ID,data[0].Version,'','','init')
    })
}
 function getEngineName(model){
        if(model.Engine == 0){
            return "PyTorch";
        }else  if(model.Engine == 1 || model.Engine == 121 || model.Engine == 38){
            return "TensorFlow";
        }else  if(model.Engine == 2 || model.Engine == 122 || model.Engine == 35 || model.Engine == 37){
            return "MindSpore";
        }else  if(model.Engine == 3){
            return "Other";
        }else  if(model.Engine == 4){
            return "PaddlePaddle";
        }else  if(model.Engine == 5){
            return "OneFlow";
        }else  if(model.Engine == 6){
            return "MXNet";
        }
        else{
            return "Other"
        }
}
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} = TrainTaskInfo
    let EngineName = getEngineName(data[0])
    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 || '1',
        Parameters:Parameters,
        EngineName:EngineName,
        DisplayJobName:TrainTaskInfo.DisplayJobName || '--',
        TrainJobVersionName:TrainTaskInfo.VersionName || '',
        CloudBrainJobID:TrainTaskInfo.JobID|| '',
        CloudBrainType:TrainTaskInfo.Type,
    }
    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==="DisplayJobName"){
           let type=obj["CloudBrainType"]
           let href=""
           if(type==1){
                href=trainJobUrl + "modelarts/train-job/" + obj["CloudBrainJobID"]
           }else if(type==0){
                href=trainJobUrl + "cloudbrain/train-job/" + obj["CloudBrainJobID"]
           }else if(type==2){
                href=trainJobUrl + "grampus/train-job/" + obj["CloudBrainJobID"]
           }
           $(`#DisplayJobNameHref`).attr("href",href)
           $(`#DisplayJobNameHref`).attr("title",obj[key])
           $(`#${key}`).text(obj[key])

           let versionName = obj["TrainJobVersionName"]
           if(versionName!=""){
                let html = `<span style="margin-left:1rem" class="ui label">${versionName}</span>`
                $('#DisplayJobName').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])
    }
}

function loadModelFile(ID,version_name,parents,filename,init){
    $.get(`${url}query_onelevel_modelfile?ID=${ID}&parentDir=${parents}`, (data) => {
        $('#dir_list').empty()
        renderDir(data,ID,version_name)
        if(init==="init"){
            $('input[name=model]').val("")
            $('input[name=modelback]').val(version_name)
            $('#file_breadcrumb').empty()
            let htmlBread = ""
            htmlBread += `<div class='active section'>${version_name}</div>`
            htmlBread += "<div class='divider'> / </div>" 
            $('#file_breadcrumb').append(htmlBread)
        }else{
            renderBrend(ID,version_name,parents,filename,init)
        }
    })
}
function renderSize(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 renderBrend(ID,version_name,parents,filename,init){
    if(init=="folder"){
        let htmlBrend = ""
        let sectionName=$('#file_breadcrumb .active.section').text()
        let parents1 = $('input[name=model]').val()
        let filename1 = $('input[name=modelback]').val()
        if(parents1===""){
            $('#file_breadcrumb .active.section').replaceWith(`<a class='section' onclick="loadModelFile('${ID}','${version_name}','${parents1}','','init')">${sectionName}</a>`)
        }else{
            $('#file_breadcrumb .active.section').replaceWith(`<a class='section' onclick="loadModelFile('${ID}','${version_name}','${parents1}','${filename1}')">${sectionName}</a>`)
        }
        
        htmlBrend += `<div class='active section'>${filename}</div>`
        htmlBrend += "<div class='divider'> / </div>" 
        $('#file_breadcrumb').append(htmlBrend)
        $('input[name=model]').val(parents)
        $('input[name=modelback]').val(filename)
    }else{
        $('input[name=model]').val(parents)
        $('input[name=modelback]').val(filename)
        let selectEle = $('#file_breadcrumb a.section').filter(
            (index, item) => {
            return item.text == filename;
            }
        );
        selectEle.nextAll().remove();
        selectEle.after("<div class='divider'> / </div>");
        selectEle.replaceWith(`<div class='active section'>${filename}</div>`);
    }
    
}
function renderDir(data,ID,version_name){
    let html=""
        html += "<div class='ui grid' style='margin:0;'>"
        html += "<div class='row' style='padding: 0;'>"
        html += "<div class='ui sixteen wide column' style='padding:1rem;'>"
        html += "<div class='dir list'>"
        html += "<table id='repo-files-table' class='ui single line table pad20'>"
        html += '<tbody>'
        for(let i=0;i<data.length;i++){
            let dirs_size = renderSize(data[i].Size)
            html += "<tr>"
            html += "<td class='name six wid'>"
            html += "<span class='truncate'>"
            html += "<span class='octicon octicon-file-directory'>"
            html += "</span>"
            if(data[i].IsDir){
                html += `<a  onclick="loadModelFile('${ID}','${version_name}','${data[i].ParenDir}','${data[i].FileName}','folder')">`
                html += "<span class='fitted'><i class='folder icon' width='16' height='16' aria-hidden='true'></i>" + data[i].FileName + "</span>"
            }else{
                html += `<a href="${url}${ID}/downloadsingle?parentDir=${data[i].ParenDir}&fileName=${data[i].FileName}">`
                html += "<span class='fitted'><i class='file icon' width='16' height='16' aria-hidden='true'></i>" + data[i].FileName + "</span>"
            }
            html += '</a>'
            html += "</span>"
            html += "</td>"
            html += "<td class='message seven wide'>"
            if(data[i].IsDir){
                html += "<span class='truncate has-emoji'></span>"
            }else{
                html += "<span class='truncate has-emoji'>"+ `${dirs_size}` + "</span>"
            }
            
            html += "</td>"

            html += "<td class='text right age three wide'>"
            html += "<span class='truncate has-emoji'>" + data[i].ModTime + "</span>"
            html += "</td>"
            html += "</tr>"
            
        }
        html += "</tbody>"
        html += "</table>"
        html += "</div>"
        html += "</div>"
        html += "</div>"
        html += "</div>"
        $('#dir_list').append(html)
}
</script>