aiforge/templates/repo/modelmanage/create_online.tmpl

{{template "base/head" .}}
<link rel="stylesheet" href="/self/ztree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<style>
    #newmodel .header {
        height: 45px;
        border: 1px solid #d4d4d5;
        border-radius: 5px 5px 0 0;
        font-size: 14px;
        background: #f0f0f0;
        display: flex;
        align-items: center;
    }
    #newmodel .content {        
        margin-top: -1px;        
        border: 1px solid #d4d4d5;
        border-top: none;
    }
    .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{
        margin-left: 12px !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>
<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="repository release dataset-list view">
    {{template "repo/header" .}}
    <div class="ui container">
        <div id="newmodel">
            <div class="ui second">
                <div class="header" style="padding: 1rem;background-color: rgba(240, 240, 240, 100);">
                    <h4 id="model_header">{{.i18n.Tr "repo.model.manage.import_online_model"}}</h4>
                </div>
                <div class="content content-padding">
                    <form id="formId" class="ui form dirty">
                        <input class="ays-ignore" type="hidden" name="initModel" value="{{$.MODEL_COUNT}}">
                        <div class="ui error message"></div>
                        <input class="ays-ignore" type="hidden" name="_csrf" value="">
                        <div class="inline fields">
                            <div class="required two wide field right aligned">
                                <label for="jobId">{{.i18n.Tr "repo.model.manage.select.trainjob"}}</label>
                            </div>
                            <div class="required thirteen wide inline field">
                                <div class="ui dropdown selection search loading" id="choice_model">
                                    <input class="ays-ignore" type="hidden" id="jobId" name="jobId" required>
                                    <div class="default text">{{.i18n.Tr "repo.model.manage.select.trainjob"}}</div>
                                    <i class="dropdown icon"></i>
                                    <div class="menu" id="job-name">
                                    </div>
                                </div>
                                <label for="versionName">{{.i18n.Tr "repo.model.manage.version"}}</label>
                                <span>&nbsp;</span>
                                <div class="ui dropdown selection search" id="choice_version">
                                    <input class="ays-ignore" type="hidden" id="versionName" name="versionName" required>
                                    <div class="default text">{{.i18n.Tr "repo.model.manage.select.version"}}</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">{{.i18n.Tr "repo.model.manage.model_name"}}</label>
                            </div>
                            <div class="eight wide field">
                                <input class="ays-ignore" id="name" name="name" required maxlength="25" onkeyup="this.value=this.value.replace(/[, ]/g,'')">
                            </div>
                        </div>
                        <div class="required inline fields" id="verionName" style="display:none;">
                            <div class="two wide field right aligned">
                                <label for="version">{{.i18n.Tr "repo.model.manage.version"}}</label>
                            </div>
                            <div class="eight wide field">
                                <input class="ays-ignore" 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">{{.i18n.Tr "repo.model.manage.engine"}}</label>
                            </div>
                            <div class="ui ten wide field dropdown selection" id="choice_Engine">
                                <input class="ays-ignore" type="hidden" id="engine" name="engine" required>
                                <div class="default text newtext">{{.i18n.Tr "repo.model.manage.select.engine"}}</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">{{.i18n.Tr "repo.model.manage.modelfile"}}</label>
                            </div>                    
                            <div class="thirteen wide field" style="position:relative">
                                <input class="ays-ignore" 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">{{.i18n.Tr "repo.model.manage.modellabel"}} &nbsp</label>
                            </div>
                            <div class="thirteen wide field">
                                <input class="ays-ignore" 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">{{.i18n.Tr "repo.model.manage.modeldesc"}} &nbsp</label>
                            </div>
                            <div class="thirteen wide field">
                                <textarea id="description" class="ays-ignore" 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>                       
                    </form>
                     <div class="inline field" style="margin-left:140px;margin-top:28px;">
                        <button id="submitId" type="button" class="ui create_train_job green button" onclick="submitSaveModel()"
                            style="">
                            {{.i18n.Tr "repo.model.manage.sava_model"}}
                        </button>
                        <button style="margin-left:0px;" class="ui button cancel" onclick="backToModelListPage()">{{.i18n.Tr "repo.cloudbrain.cancel"}}</button>
                    </div>
                </div>            
            </div>
        </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>
    ;(function() {
        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);
		}
        window.showMenu = showMenu;

		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 () {                        
                        $('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')
        }
        */
        $('input[name="version"]').addClass('model_disabled')
        $('.ui.dimmer').css({ "background-color": "rgb(136, 136, 136,0.7)" })
        $("#job-name").empty()
        createModelName()
        loadTrainList()

        $(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 tmp = $('#choice_model input[name="jobId"]').val();
            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++) {
                    var VersionName = data[i].VersionName || 'V0001';
                    train_html += `<div class="item" data-value="${VersionName}">${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) => {
                    var cityObj = $("#modelSelectedFile");
			        cityObj.attr("value", "");
                    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(trainJob) {
            console.log("trainJob=", trainJob);
            $('#choice_Engine').dropdown('clear')
            $("#job-Engine").empty()
            if (trainJob.EngineName != null && trainJob.EngineName != "") {
                srcEngine = trainJob.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');
            }
        }

        function check() {
            let jobid = document.getElementById("jobId").value;
            let versionname = document.getElementById("versionName").value;
            let name = document.getElementById("name").value;
            let version = document.getElementById("version").value;
            let modelSelectedFile = document.getElementById("modelSelectedFile").value;            
            if (name == "") {
                $("#modelname").closest('.required').addClass("error");
                return false;
            } else {
                $("#modelname").closest('.required').removeClass("error");
            }
            if (versionname == "") {
                $("#verionname").closest('.required').addClass("error");
                return false;
            } else {
                $("#verionname").closest('.required').removeClass("error");
            }
            if (jobid == "") {
                 $("#jobId").closest('.required').addClass("error");
                return false;
            } else {
                $("#jobId").closest('.required').removeClass("error");
            }
            if (modelSelectedFile == "") {
                $("#modelSelectedFile").closest('.required').addClass("error");
                return false;
            } else {
                $("#modelSelectedFile").closest('.required').removeClass("error");
            }
            if (versionname == "") {
                $("#versionName").closest('.required').addClass("error");
                return false;
            } else {
                $("#versionName").closest('.required').removeClass("error");
            }
            return true;
        }

        function submitSaveModel() {
            let flag = check();
            if (!flag) return false;
            $(".ui.error.message").hide();
            let cName = $("input[name='name']").val();
            let version = $("input[name='version']").val();
            let data = $("#formId").serialize();
            const initModel = $("input[name='initModel']").val();
            let url_href = location.href.split("create_online_model")[0] + 'create_new_model';
            $("#mask").css({ display: "block", "z-index": "9999" });
            $.ajax({
                url: url_href,
                type: "POST",
                data: data,
                success: function (res) {
                    backToModelListPage();
                },
                error: function (xhr) {
                    // 隐藏 loading
                    // 只有请求不正常（状态码不为200）才会执行
                    $(".ui.error.message").text(xhr.responseText);
                    $(".ui.error.message").show();
                },
                complete: function (xhr) {
                    $("#mask").css({ display: "none", "z-index": "1" });
                },
            });
        }

        function backToModelListPage() {
            let url_href = location.href.split("create_online_model")[0] + 'show_model';
            window.location.href = url_href;
        }
        window.submitSaveModel = submitSaveModel;
        window.backToModelListPage = backToModelListPage;
    })();
</script>