aiforge/templates/repo/modelmanage/index.tmpl

<!-- 头部导航栏 -->
{{template "base/head" .}}
<style>
    .inline.fields .right.aligned label{ 
        width: 100% !important;
        text-align: right;
    }
    .inline .ui.dropdown .text {
        color: rgba(0, 0, 0, .87) !important;
        max-width: 360px;
    }
    .newtext{
        left: 15px !important
    }
    .menuContent{
        position: absolute;
        background: #ffffff;
        left: 0;
        right: 26px;
        top: 36px;
        z-index:999;
        border: 1px solid #96c8da;
        border-top: 0;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 4px;
        box-shadow: 0 2px 3px 0 rgb(34 36 38 / 15%);
    }
</style>
<link rel="stylesheet" href="/self/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">


<!-- 弹窗 -->
<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 {{if  ne $.MODEL_COUNT 0}}active loader {{end}}" id="loadContainer">
        {{template "base/alert" .}}
        <div class="ui two column stackable grid">
            <div class="column">
                <div class="ui blue small menu compact selectcloudbrain">
                    <a class="active item" href="{{.RepoLink}}/modelmanage/show_model">{{$.i18n.Tr "repo.model.list"}}</a>
                    <a class="item" href="{{.RepoLink}}/modelmanage/convert_model">{{$.i18n.Tr "repo.model.convert"}}</a>
                </div>
            </div>
            <div class="column right aligned">
                <!--  -->
                <a class="ui button {{if .Permission.CanWrite $.UnitTypeModelManage}} green {{else}} disabled {{end}}"
                    onclick="showcreate(this)">{{$.i18n.Tr "repo.model.manage.import_new_model"}}</a>
            </div>
        </div>
        {{if eq $.MODEL_COUNT 0}}
        <div class="ui placeholder segment bgtask-none">
            <div class="ui icon header bgtask-header-pic"></div>
            <div class="bgtask-content-header">未创建过模型</div>
            <div class="bgtask-content">
                {{if $.RepoIsEmpty}}
                <div class="bgtask-content-txt">代码版本：您还没有初始化代码仓库，请先<a href="{{.RepoLink}}">创建代码版本；</a></div>
                {{end}}
                {{if eq $.TRAIN_COUNT 0}}
                <div class="bgtask-content-txt">训练任务：您还没创建过训练任务，请先创建<a
                        href="{{.RepoLink}}/modelarts/train-job">训练任务</a>。</div>
                {{end}}
                <div class="bgtask-content-txt">使用说明：可以参考启智AI协作平台<a
                        href="https://git.openi.org.cn/zeizei/OpenI_Learning">小白训练营课程。</a></div>

            </div>
            <div style="display: none;">
                <div id="model_list"></div>
            </div>
        </div>
        {{else}}
        <!-- 中下列表展示区 -->
        <div class="ui grid" style="display: none;">
            <div class="row" style="padding-top: 0;">
                <div class="ui sixteen wide column">
                    <!-- 任务展示 -->
                    <div class="dataset list" id="model_list">
                        <!-- 表头 -->
                    </div>
                </div>
            </div>
        </div>
        {{end}}

    </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> {{.i18n.Tr "cloudbrain.operate_cancel"}}
            </div>
            <div class="ui green basic inverted ok button">
                <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
            </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 id="model_header"></h4>
        </div>
        <div class="content content-padding">
            <form id="formId" method="POST" class="ui form">
                <input type="hidden" name="initModel" value="{{$.MODEL_COUNT}}">
                <div class="ui error message">
                    <!-- <p>asdasdasd</p> -->
                </div>
                <input type="hidden" name="_csrf" value="">
                <div class="inline fields">
                    <div class="required two wide field right aligned">
                        <label for="JobId">选择训练任务</label>
                    </div>
                    <div class="required thirteen wide inline field">
                        <div class="ui dropdown selection search 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>
                        </div>
                        <label for="VersionName">版本</label>
                        <span>&nbsp;</span>
                        <div class="ui dropdown selection search" 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>
                    </div>
                </div>
                <div class="required inline fields" id="modelname">
                    <div class="two wide field right aligned">
                        <label for="Name">模型名称</label>
                    </div>
                    <div class="eight wide field">
                        <input id="name" name="Name" required maxlength="25" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                    </div>
                </div>
                <div class="required inline fields" id="verionname">
                    <div class="two wide field right aligned">
                        <label for="Version">模型版本</label>
                    </div>
                    <div class="eight wide field">
                        <input id="version" name="Version" value="" readonly required maxlength="255">
                    </div>
                </div>

                <div class="unite min_title inline fields required">
                    <div class="two wide field right aligned">
                        <label for="Engine">模型框架</label>
                    </div>
                    <div class="ui ten wide field dropdown selection search" id="choice_Engine">
                        <input type="hidden" id="Engine" name="Engine" required>
                        <div class="default text newtext">选择模型框架</div>
                        <i class="dropdown icon"></i>
                        <div class="menu" id="job-Engine">

                        </div>
                    </div>

                </div>

                <div class="unite min_title inline fields required">
                    <div class="two wide field right aligned">
                        <label for="modelSelectedFile">模型文件</label>
                    </div>                    
                    <div class="thirteen wide field" style="position:relative">
                        <input id="modelSelectedFile" type="text" readonly required onclick="showMenu();"  name="modelSelectedFile" >
                        <div id="menuContent" class="menuContent" style="display:none;">
                            <ul id="treeDemo" class="ztree"></ul>
                        </div>
                    </div>
                </div>

                <div class="inline fields">
                    <div class="two wide field right aligned">
                        <label for="Label">模型标签 &nbsp</label>
                    </div>
                    <div class="thirteen wide field">
                        <input id="label" name="Label" maxlength="255" placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
                    </div>    
                </div>
                <div class="inline fields">
                    <div class="two wide field right aligned">                    
                        <label for="description">模型描述 &nbsp</label>
                    </div>
                    <div class="thirteen wide field">
                        <textarea 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>

                <div class="inline field" style="margin-left: 105px;">
                    <button id="submitId" type="button" class="ui create_train_job green button"
                        style="position: absolute;">
                        {{.i18n.Tr "repo.model.manage.sava_model"}}
                    </button>
                </div>
            </form>
            <div class="actions" style="display: inline-block;margin-left: 220px;">
                <button class="ui button cancel">{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
            </div>
        </div>


    </div>

    {{template "base/footer" .}}

<script type="text/javascript" src="/self/ztree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/self/ztree/js/jquery.ztree.excheck.js"></script>
	<script type="text/javascript">
	
		var setting = {
			check: {
				enable: true,
				chkboxType: {"Y":"ps", "N":"ps"}
			},
			view: {
				dblClickExpand: false
			},
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck
			}
		};

		function beforeClick(treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.checkNode(treeNode, !treeNode.checked, null, true);
			return false;
		}
		
		function onCheck(e, treeId, treeNode) {
			var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true),
			v = "";
			for (var i=0, l=nodes.length; i<l; i++) {
                if(nodes[i].isParent){
                   continue;
                }
                var pathNodes = nodes[i].getPath();
                var path ="";
                for(var j=0;j<pathNodes.length;j++){
                    if(j ==0){
                        path +=  pathNodes[j].name;
                    }else{
                        path += "/" + pathNodes[j].name;
                    }
                }
				v += path + ";";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#modelSelectedFile");
			cityObj.attr("value", v);
		}
       
		function showMenu() {
			var cityObj = $("#modelSelectedFile");
			var cityOffset = $("#modelSelectedFile").offset();
			// $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");
            $("#menuContent").slideDown("fast");

			$("body").bind("mousedown", onBodyDown);
		}
		function hideMenu() {
			$("#menuContent").fadeOut("fast");
			$("body").unbind("mousedown", onBodyDown);
		}
		function onBodyDown(event) {
			if (!(event.target.id == "menuBtn" || event.target.id == "modelSelectedFile" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}

		$(document).ready(function(){
			//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	
	
        let repolink = {{.RepoLink }}
        let repoId = {{ $repository }}
        const { _AppSubUrl, _StaticUrlPrefix, csrf } = window.config;
        $('input[name="_csrf"]').val(csrf)
        let modelData;
        function createModelName() {
            let repoName = location.pathname.split('/')[2]
            let modelName = repoName + '_model_' + Math.random().toString(36).substr(2, 4)
            $('#name').val(modelName)
            $('#version').val("0.0.1")
        }
        let dirKey="isOnlyDir--:&";
        function showcreate(obj) {
            $('.ui.modal.second')
                .modal({
                    centered: false,
                    onShow: function () {
                        $('#model_header').text("导入新模型")
                        $('input[name="Version"]').addClass('model_disabled')
                        $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })
                        $("#job-name").empty()
                        createModelName()
                        loadTrainList()
                    },
                    onHide: function () {
                        var cityObj = $("#modelSelectedFile");
			            cityObj.attr("value", "");
                        document.getElementById("formId").reset();
                        $('#choice_model').dropdown('clear')
                        $('#choice_version').dropdown('clear')
                        $('#choice_Engine').dropdown('clear')
                        $('.ui.dimmer').css({ "background-color": "" })
                        $('.ui.error.message').text()
                        $('.ui.error.message').css('display', 'none')

                    }
                })
                .modal('show')
        }

        $(function () {
            $('#choice_model').dropdown({
                onChange: function (value) {
                    $("#choice_version").addClass("loading")
                    $('#choice_version').dropdown('clear')
                    $("#job-version").empty()
                    loadTrainVersion(value)
                }
            })

            $('#choice_version').dropdown({
                onChange: function (value) {
                    console.log("model version:" + value);
                    if (modelData != null) {
                        for (var i = 0; i < modelData.length; i++) {
                            if (modelData[i].VersionName == value) {
                                setEngine(modelData[i])
                                loadModelFile(modelData[i])
                                break;
                            }
                        }
                    }
                }
            })
        })
        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)
                }
                versionArray[2] = '0'
            } else {
                versionArray[2] = String(Number(versionArray[2]) + 1)
            }
            return versionArray.join('.')
        }
        function loadTrainList() {
            $.get(`${repolink}/modelmanage/query_train_job?repoId=${repoId}`, (data) => {

                const n_length = data.length
                if(n_length > 0){
                    let train_html = ''
                    for (let i = 0; i < n_length; i++) {
                        train_html += `<div class="item" data-value="${data[i].JobID}">${data[i].DisplayJobName}</div>`
                        train_html += '</div>'
                    }
                    $("#job-name").append(train_html)
                    $("#choice_model").removeClass("loading")
                    $('#choice_model .default.text').text(data[0].DisplayJobName)
                    $('#choice_model input[name="JobId"]').val(data[0].JobID)
                    loadTrainVersion()
                }else{
                    $("#choice_model").removeClass("loading")
                }
            })
        }
        function loadTrainVersion(value) {
            let JobID = !value ? $('#choice_model input[name="JobId"]').val() : value
            $.get(`${repolink}/modelmanage/query_train_job_version?JobID=${JobID}`, (data) => {
                const n_length = data.length
                let train_html = '';
                modelData = data;
                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>'
                }
                if (data.length) {
                    $("#job-version").append(train_html)
                    $("#choice_version").removeClass("loading")
                    var versionName = data[0].VersionName;
                    if (versionName == null || versionName == "") {
                        versionName = "V0001";
                    }
                    $('#choice_version .default.text').text(versionName)
                    $('#choice_version input[name="VersionName"]').val(versionName)
                    setEngine(data[0])
                    loadModelFile(data[0])
                }

            })
        }
        function loadModelFile(trainJob){
            console.log("trainJob=" + trainJob);
            $('#choice_file').dropdown('clear')
            $("#model-file").empty()
            if(trainJob ==null || trainJob ==""){
                console.log("trainJob is null");
            }else{
                let type = trainJob.Type;
                if(type == 2){
                    if(trainJob.ComputeResource=="NPU"){
                        type=1;
                    }else{
                        type=0;
                    }
                }
                $.get(`${repolink}/modelmanage/query_train_model?jobName=${trainJob.JobName}&type=${type}&VersionName=${trainJob.VersionName}`, (data) => {
                    const n_length = data.length
                    let file_html=''
                    let firstFileName =''
                    var zNodes=[];
                    var nodesMap={};
                    for (let i=0;i<n_length;i++){
                        var parentNodeMap = nodesMap;
                        var fileSplits = data[i].FileName.split("/");
                        for(let j=0;j < fileSplits.length;j++){
                            if(fileSplits[j] == ""){
                                break;
                            }
                            if(parentNodeMap[fileSplits[j]] == null){
                                parentNodeMap[fileSplits[j]] = {};
                            }
                            parentNodeMap = parentNodeMap[fileSplits[j]];
                        }
                    }
                    for (let i=0;i<n_length;i++){
                        var parentNodeMap = nodesMap;
                        var fileSplits = data[i].FileName.split("/");
                        for(let j=0;j < fileSplits.length;j++){
                            if(fileSplits[j] == ""){
                                if(data[i].FileName[data[i].FileName.length -1] =="/"){
                                    if(Object.keys(parentNodeMap).length ==0){
                                        parentNodeMap[dirKey]="true";
                                    }
                                }
                                break;
                            }
                            parentNodeMap = parentNodeMap[fileSplits[j]];
                        }
                    }
                    convertToNode(zNodes,nodesMap);
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                })
            }
        }
        function convertToNode(nodeList,nodesMap){
            var keyList = Object.keys(nodesMap);
            keyList.sort(function(a,b){
	            return a-b;
            });
            var isFirst = true;
            for(var i=0; i<keyList.length;i++){
                var node = {};
                node["name"] = keyList[i];
                nodeList.push(node);
                if(nodesMap[keyList[i]] != null && Object.keys(nodesMap[keyList[i]]).length >0){
                    if(nodesMap[keyList[i]][dirKey] != null){
                        node["open"] = false;
                        node["isParent"] = true;
                    }else{
                        node["children"]=[];
                        if(isFirst){
                            node["open"] = true;
                            isFirst= false;
                        }
                        convertToNode(node["children"],nodesMap[keyList[i]]);
                    }
                    
                }
            }
        }
        function setEngine(modelVersion) {
            console.log("modelVersion=" + modelVersion);
            $('#choice_Engine').dropdown('clear')
            $("#job-Engine").empty()
            if (modelVersion.EngineName != null && modelVersion.EngineName != "") {
                srcEngine = modelVersion.EngineName.split('-')[0]
                srcEngine = srcEngine.trim().toLowerCase();
                let selectedText = "PyTorch";
                let selectedValue = 0;
                let itemHtml = "<option class=\"item\" data-value=\"0\">PyTorch</option>";
                if (srcEngine == 'tensorflow') {
                    selectedText = "TensorFlow";
                    selectedValue = 1;
                    itemHtml += "<option class=\"active item\" data-value=\"1\">TensorFlow</option>";
                } else {
                    itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>";
                }
                if (srcEngine == 'mindspore') {
                    selectedText = "MindSpore";
                    selectedValue = 2;
                    itemHtml += "<option class=\"active item\" data-value=\"2\">MindSpore</option>";
                } else {
                    itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>";
                }
                itemHtml += "<option class=\"item\" data-value=\"4\">PaddlePaddle</option>"
                itemHtml += "<option class=\"item\" data-value=\"5\">OneFlow</option>"
                itemHtml += "<option class=\"item\" data-value=\"6\">MXNet</option>"
                itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>"

                $('#choice_Engine .default.text').text(selectedText)
                $('#choice_Engine input[name="Engine"]').val(selectedValue)
                $("#job-Engine").append(itemHtml);
                $("#choice_Engine").removeClass('disabled');
            } else {
                let itemHtml = "<option class=\"active item\" data-value=\"0\">PyTorch</option>";
                itemHtml += "<option class=\"item\" data-value=\"1\">TensorFlow</option>"
                itemHtml += "<option class=\"item\" data-value=\"2\">MindSpore</option>"
                itemHtml += "<option class=\"item\" data-value=\"4\">PaddlePaddle</option>"
                itemHtml += "<option class=\"item\" data-value=\"5\">OneFlow</option>"
                itemHtml += "<option class=\"item\" data-value=\"6\">MXNet</option>"
                itemHtml += "<option class=\"item\" data-value=\"3\">Other</option>"
                $('#choice_Engine .default.text').text("PyTorch");
                $('#choice_Engine input[name="Engine"]').val(0)
                $("#job-Engine").append(itemHtml);
                $("#choice_Engine").removeClass('disabled');
            }
        }
    </script>