aiforge/templates/repo/modelmanage/index.tmpl

<!-- 头部导航栏 -->
{{template "base/head" .}}
<style>
    .inline .ui.dropdown .text {
        color: rgba(0, 0, 0, .87) !important
    }
</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="menuContent" class="menuContent" style="display:none; position: absolute;z-index:9999">
	        <ul id="treeDemo" class="ztree" style="margin-top:0; width:180px; height: 300px;"></ul>
</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="two inline fields ">
                    <div class="required ten wide field">
                        <label style="margin-left: -23px;">选择训练任务</label>
                        <div class="ui dropdown selection search width83 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>
                    </div>
                    <div class="required six widde field">
                        <label>版本</label>
                        <div class="ui dropdown selection search width70" 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 field" id="modelname">
                    <label>模型名称</label>
                    <input style="width: 45%;" id="name" name="Name" required maxlength="25"
                        onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                </div>
                <div class="required inline field" id="verionname">
                    <label>模型版本</label>
                    <input style="width: 45%;" id="version" name="Version" value="" readonly required maxlength="255">
                </div>

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

                        </div>
                    </div>

                </div>

                <div class="unite min_title inline field required">
                    <label>模型文件</label>
                    <input id="citySel" type="text" style="width: 83%;" readonly value="" style="width:120px;" onclick="showMenu();"  name="modelfile" >
                </div>

                <div class="inline field">
                    <label>模型标签</label>
                    <input style="width: 83%;margin-left: 7px;" id="label" name="Label" maxlength="255"
                        placeholder='{{.i18n.Tr "repo.modelarts.train_job.label_place"}}'>
                </div>
                <div class="inline field">
                    <label for="description">模型描述</label>
                    <textarea style="width: 83%;margin-left: 7px;" 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 class="inline field" style="margin-left: 75px;">
                    <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: 180px;">
                <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":"", "N":""}
			},
			view: {
				dblClickExpand: false
			},
			data: {
				simpleData: {
					enable: true
				}
			},
			callback: {
				beforeClick: beforeClick,
				onCheck: onCheck
			}
		};

		var zNodes =[
			{id:1, pId:0, name:"北京"},
			{id:2, pId:0, name:"天津"},
			{id:3, pId:0, name:"上海"},
			{id:6, pId:0, name:"重庆"},
			{id:4, pId:0, name:"河北省", open:true, nocheck:true},
			{id:41, pId:4, name:"石家庄"},
			{id:42, pId:4, name:"保定"},
			{id:43, pId:4, name:"邯郸"},
			{id:44, pId:4, name:"承德"},
			{id:5, pId:0, name:"广东省", open:true, nocheck:true},
			{id:51, pId:5, name:"广州"},
			{id:52, pId:5, name:"深圳"},
			{id:53, pId:5, name:"东莞"},
			{id:54, pId:5, name:"佛山"},
			{id:6, pId:0, name:"福建省", open:true, nocheck:true},
			{id:61, pId:6, name:"福州"},
			{id:62, pId:6, name:"厦门"},
			{id:63, pId:6, name:"泉州"},
			{id:64, pId:6, name:"三明"}
		 ];

		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++) {
				v += nodes[i].name + ",";
			}
			if (v.length > 0 ) v = v.substring(0, v.length-1);
			var cityObj = $("#citySel");
			cityObj.attr("value", v);
		}

		function showMenu() {
			var cityObj = $("#citySel");
			var cityOffset = $("#citySel").offset();
			$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).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 == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
				hideMenu();
			}
		}

		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		});
	
	</SCRIPT>

    <script>
        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")
        }
        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 () {
                        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) {
                    $(".ui.dropdown.selection.search.width70").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])
                                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
                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)
                $(".ui.dropdown.selection.search.width83").removeClass("loading")
                $('#choice_model .default.text').text(data[0].DisplayJobName)
                $('#choice_model input[name="JobId"]').val(data[0].JobID)
                loadTrainVersion()

            })
        }
        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)
                    $(".ui.dropdown.selection.search.width70").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)
                    console.log("1111111111");
                    setEngine(data[0])
                }

            })
        }

        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();
                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").addClass('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>