From 54c215c40ae05ba5c6239df44557271205ba7b4c Mon Sep 17 00:00:00 2001
From: chenshihai <chenshh@pcl.ac.cn>
Date: Thu, 29 Sep 2022 15:56:37 +0800
Subject: [PATCH] add modelsatety new tmpl

---
 templates/repo/modelsafety/new.tmpl | 316 ++++++++++++++++++++++++++++
 1 file changed, 316 insertions(+)
 create mode 100644 templates/repo/modelsafety/new.tmpl

diff --git a/templates/repo/modelsafety/new.tmpl b/templates/repo/modelsafety/new.tmpl
new file mode 100644
index 000000000..b2d180215
--- /dev/null
+++ b/templates/repo/modelsafety/new.tmpl
@@ -0,0 +1,316 @@
+{{template "base/head" .}}
+<style>
+    .unite {
+        font-family: SourceHanSansSC-medium !important;
+        color: rgba(16, 16, 16, 100) !important;
+    }
+
+    .title {
+        font-size: 16px !important;
+        padding-left: 3rem !important;
+    }
+
+    .min_title{
+        font-size: 14px !important;
+        margin-bottom: 2rem !important;
+    }
+
+    .width81 {
+        margin-left: 1.5rem;
+        width: 81% !important;
+    }
+
+    .width85 {
+        width: 85% !important;
+        margin-left: 10.5rem !important;
+        align-items: center;
+    }
+
+    .width48 {
+        width: 48.5% !important;
+    }
+
+    .nowrapx {
+        white-space: nowrap !important;
+    }
+
+    .v-middle {
+        vertical-align: middle;
+    }
+</style>
+{{template "custom/global_mask" .}}
+<div class="repository">
+    {{template "repo/header" .}}
+    <div class="ui container">
+        <div class="cloudbrain-type" style="display: none;" data-cloudbrain-type="{{.datasetType}}" data-repo-link="{{.RepoLink}}" data-flag-model="true" data-dataset-uuid="{{.attachment}}" data-dataset-name="{{.dataset_name}}" data-queue="{{.QueuesDetail}}" data-queue-start="{{.i18n.Tr "repo.wait_count_start"}}" data-queue-end="{{.i18n.Tr "repo.wait_count_end"}}"></div>
+        {{template "base/alert" .}}
+        <h4 class="ui top attached header">
+            {{.i18n.Tr "repo.modelarts.evaluate_job.new_job"}}
+        </h4>
+        <div class="ui attached segment">
+            <input type="hidden" name="benchmarkMode" value="{{.benchmarkMode}}">
+            <form id="form_id" class="ui form alogrithm_form" action="{{.Link}}?benchmarkMode=model_safe_benchmark" method="post">
+                {{.CsrfTokenHtml}}
+                <input type="hidden" name="action" value="update">
+                <input type="hidden" name="job_type" value="BENCHMARK">
+                <div class="required min_title inline field">
+                    <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_scenes"}}</label>
+                    <div class="ui blue small menu compact selectcloudbrain">
+                        <a class="item alogrithm_benchmark"
+                            href="{{.Link}}?benchmarkMode=alogrithm">{{.i18n.Tr "repo.cloudbrain.benchmark.algorithm"}}</a>
+                        <a class="item model_benchmark"
+                            href="{{.Link}}?benchmarkMode=model">{{.i18n.Tr "repo.cloudbrain.benchmark.model"}}</a>
+                        <a class="item active model_safe_benchmark"
+                            href="{{.Link}}?benchmarkMode=model_safe">模型安全评测</a>
+                    </div>
+                </div>
+                <div>
+                    <div class="min_title inline field" style="margin-top:-10px;">
+                        <label class="label-fix-width" style="font-weight: normal;"></label>
+                        {{template "custom/task_wait_count" .}}
+                    </div>
+                    <div class="required min_title inline field">
+                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
+                        <input style="width: 80%;" name="display_job_name" id="trainjob_job_name"
+                            placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}"
+                            tabindex="3" autofocus required maxlength="36">
+                        <span class="tooltips" style="display: block;margin-left: 11.5rem;">{{.i18n.Tr "repo.cloudbrain_jobname_err"}}</span>
+                    </div>
+                    <div class="min_title inline field">
+                        <label class="label-fix-width" style="font-weight: normal;"
+                            for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
+                        <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="254"
+                            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, 255)">{{.description}}</textarea>
+                    </div>
+                    <input type="hidden" id="ai_model_version" name="model_version" value="{{$.model_version}}">
+                    <div class="required unite inline min_title  fields" style="width: 96.8%;">
+                        <div class="required eight wide field">
+                            <label style="font-weight: normal;white-space: nowrap;width: 210px;text-align: right;">{{.i18n.Tr "repo.modelarts.infer_job.select_model"}}</label>
+                            <div class="ui fluid search selection dropdown" id="select_model">
+                                <input type="hidden" name="model_name" required>
+                                <div class="text"></div>
+                                <i class="dropdown icon"></i>
+                                <div class="menu" id="model_name">
+                                </div>
+                            </div>
+                        </div>
+                        <div class="three wide field">
+                            <div class="ui fluid search selection dropdown" id="select_model_version">
+                                <input type="hidden" name="train_url" required>
+                                <div class="text"></div>
+                                <i class="dropdown icon"></i>
+                                <div class="menu" id="model_name_version"></div>
+                            </div>
+                        </div>
+                        <div class="five wide field">
+                            <div class="ui fluid search selection dropdown" id="select_model_checkpoint">
+                                <input type="hidden" name="ckpt_name" required>
+                                <div class="text"></div>
+                                <i class="dropdown icon"></i>
+                                <div class="menu" id="model_checkpoint">
+                                </div>
+                            </div>
+                        </div>
+                        <span >
+                            <i class="question circle icon" data-content="{{.i18n.Tr "cloudbrain.model_file_postfix_rule"}}" data-position="top center" data-variation="inverted mini"></i>
+                        </span>
+                    </div>
+                    <div id="images-new-cb"></div>
+                    <div class="inline field min_title required">
+                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>
+                        <input style="width: 48.5%;" name="boot_file" id="trainjob_boot_file" value="{{.boot_file}}" tabindex="3" autofocus required maxlength="255">
+                        <span>
+                            <i class="question circle icon  link" data-content={{.i18n.Tr "repo.modelarts.train_job.boot_file_helper"}} data-position="right center" data-variation="mini"></i>
+                        </span>
+                        <a href="https://git.openi.org.cn/OpenIOSSG/MNIST_PytorchExample_GPU" target="_blank">{{.i18n.Tr "cloudbrain.view_sample"}}</a>
+                    </div>
+                    <div id="select-multi-dataset"></div>
+                    <span class="tooltips" style="margin-left: 11.5rem;margin-bottom: 1rem;"></span>                    
+                    <div class="inline min_title field required">
+                        <label class="label-fix-width" style="font-weight:normal;">评测指标</label>
+                        <select id="job_indicators" class="ui dropdown width48 v-middle" multiple placeholder="选择评测指标" style='width:385px;' name="job_indicators">
+                            <option value="ACC">ACC</option>
+                            <option value="CAV">CAV</option>
+                            <option value="ASS">ASS</option>
+                            <option value="ALDp">ALDp</option>
+                            <option value="ACAC">ACAC</option>
+                            <option value="ACTC">ACTC</option>
+                            <option value="PSD">PSD</option>
+                            <option value="CACC">CACC</option>
+                        </select>
+                        <span>
+                            <i class="question circle icon indicators_descr" style="cursor:pointer;"></i>
+                            <div class="ui flowing popup bottom left transition hidden" style="inset: 564px auto auto 1px; width: 920px">
+                                <table class="ui celled table">
+                                    <thead>
+                                        <tr>
+                                            <th style="width:80px;">指标</th>
+                                            <th>说明</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        <tr>
+                                            <td data-label="指标">ACC</td>
+                                            <td data-label="说明">Accuracy，精确度，计算模型预测准确率，该指标越高，说明评测结果越好。</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-label="指标">CAV</td>
+                                            <td data-label="说明">Classification Accuracy Variance，用于评估深度学习模型性能的最重要指标为准确性。该指标值越高，说明评测结果越好。</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-label="指标">ASS</td>
+                                            <td data-label="说明">Average Structural Similarity，所有攻击成功对抗样本与其原始样本间的平均相似性。该指标越大，说明评测结果越好。</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-label="指标">ALDp</td>
+                                            <td data-label="说明">Average LpDistortion，为所有攻击成功的对抗样本的平均归一化Lp失真度，ALDp值越小，对抗样本的不可感知性越强。</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-label="指标">ACAC</td>
+                                            <td data-label="说明">Average Confidence of Adversarial Class(ACAC）这个数值越高，攻击算法的攻击能力越强。</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-label="指标">ACTC</td>
+                                            <td data-label="说明">Average Confidence of True Class(ACTC) 这个数值越低，攻击算法的攻击能力越强。</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-label="指标">PSD</td>
+                                            <td data-label="说明">Perturbation Sensitivity Distance，用于评测人类对扰动的感知能力。该指标值越大，说明评测结果越差。</td>
+                                        </tr>
+                                        <tr>
+                                            <td data-label="指标">CACC</td>
+                                            <td data-label="说明">Clean ACC该值计算的是原始未被攻击的样本，使用模型和groundtruth相比较的模型的本身的一个。</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </span>
+                    </div>
+                    <div class="inline min_title field">
+                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
+                        <span id="add_run_para" style="margin-left: 0.5rem;cursor:pointer;color: rgba(3, 102, 214, 100);font-size: 14px;line-height: 26px;font-family: SourceHanSansSC-medium;">
+                            <i class="plus square outline icon"></i>{{.i18n.Tr "repo.modelarts.train_job.add_run_parameter"}}
+                        </span>
+                        <input id="store_run_para" type="hidden" name="run_para_list">
+                        <div class="dynamic field" style="margin-top: 1rem;" data-params="{{.run_para_list}}" data-params-value="{{.i18n.Tr "repo.modelarts.train_job.parameter_value"}}" data-params-name="{{.i18n.Tr "repo.modelarts.train_job.parameter_name"}}"></div>
+                    </div>
+                    <div class="required min_title inline field">
+                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.resource_specification"}}</label>
+                        <select id="__specs__" class="ui search dropdown width48"
+                            placeholder="{{.i18n.Tr "cloudbrain.select_specification"}}" style='width:385px' ovalue="{{.spec_id}}"
+                            {{if .CloudBrainPaySwitch}}blance="{{.PointAccount.Balance}}"{{end}}
+                            name="spec_id">
+                        </select>
+                        {{if .CloudBrainPaySwitch}}
+                        <div class="cloudbrain_resource_spec_blance_tip width48" style="padding:0 5px;margin:6px 0;margin-left:155px;font-size:12px;">
+                            <span>{{$.i18n.Tr "points.balance_of_points"}}<span style="color:red;margin: 0 3px">{{.PointAccount.Balance}}</span>{{$.i18n.Tr "points.points"}}</span><span>{{$.i18n.Tr "points.expected_time"}}<span style="color:red;margin: 0 3px" class="can-use-time"></span>{{$.i18n.Tr "points.hours"}}</span>
+                            <span style="float:right;">
+                                <i class="question circle icon link" data-position="right center" data-variation="mini"></i>
+                                <a href="{{AppSubUrl}}/reward/point/rule" target="_blank">{{$.i18n.Tr "points.points_acquisition_instructions"}}</a>
+                            </span>
+                        </div>
+                        {{end}}
+                    </div>
+                    <div class="inline unite min_title field">
+                        <label class="label-fix-width" style="font-weight: normal;"></label>
+                        <button class="ui create_train_job green button">
+                            {{.i18n.Tr "repo.cloudbrain.new"}}
+                        </button>
+                        <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{{template "base/footer" .}}
+<script src="{{StaticUrlPrefix}}/js/specsuse.js?v={{MD5 AppVer}}" type="text/javascript"></script>
+<script src="{{StaticUrlPrefix}}/js/cloudbrainNew.js?v={{MD5 AppVer}}" type="text/javascript"></script>
+
+<script>
+    let form = document.getElementById('form_id');
+    let createFlag = false
+    form.onsubmit = function (e) {
+        if(createFlag) return false
+        createFlag = true
+    }
+    let repolink = {{.RepoLink }}
+    let url_href = window.location.pathname.split('create')[0]
+    $(".ui.button").attr('href', url_href)
+    $('.menu .item').tab();
+    
+    var isValidate = false;
+    function validate() {
+        $('.ui.form')
+            .form({
+                on: 'blur',
+                fields: {
+                    model_name:{
+                        identifier  : 'model_name',
+                        rules: [
+                        {
+                            type: 'empty',
+                        }
+                        ]
+                    },
+                    train_url:{
+                        identifier  : 'train_url',
+                        rules: [
+                        {
+                            type: 'empty',
+                        }
+                        ]
+                    },
+                    ckpt_name:{
+                        identifier  : 'ckpt_name',
+                        rules: [
+                        {
+                            type: 'empty',
+                        }
+                        ]
+                    },
+                },
+                onSuccess: function () {
+                    // $('.ui.page.dimmer').dimmer('show')
+                    document.getElementById("mask").style.display = "block"
+                    isValidate = true;
+                },
+                onFailure: function (e) {
+                    isValidate = false;
+                    return false;
+                }
+            })
+    }
+
+    validate()
+    $('.ui.create_train_job.green.button').click(function (e) {
+        validate()
+    })
+
+    ;(function() {
+        var SPECS = {{ .benchmark_specs }};
+        var showPoint = {{ .CloudBrainPaySwitch }};
+        window.renderSpecsSelect($('#__specs__'), SPECS, showPoint, {
+            gpu_memory: {{$.i18n.Tr "cloudbrain.gpu_memory"}},
+            free: {{$.i18n.Tr "cloudbrain.free"}},
+            point_hr: {{$.i18n.Tr "cloudbrain.point_hr"}},
+            memory: {{$.i18n.Tr "cloudbrain.memory"}},
+            shared_memory: {{$.i18n.Tr "cloudbrain.shared_memory"}},
+        });
+    })();
+
+    ;(function() {
+        $('.indicators_descr').popup({
+            inline: true,
+            hoverable: true,
+            position: 'top center',
+            delay: {
+                show: 300,
+                hide: 800
+            }
+        });
+    })();
+</script>