Browse Source

update modelsafety

tags/v1.22.10.1^2
chenshihai 3 years ago
parent
commit
721b1f82da
4 changed files with 291 additions and 90 deletions
  1. +1
    -1
      templates/repo/cloudbrain/benchmark/index.tmpl
  2. +8
    -8
      templates/repo/modelsafety/indicators_descr.tmpl
  3. +281
    -81
      templates/repo/modelsafety/show.tmpl
  4. +1
    -0
      web_src/js/index.js

+ 1
- 1
templates/repo/cloudbrain/benchmark/index.tmpl View File

@@ -114,7 +114,7 @@
</div>
<!-- 任务状态 -->
<div class="two wide column text center padding0" style="width: 10.5% !important;">
<span class="job-status" id="{{.Cloudbrain.ID}}" data-repopath="{{$.RepoRelPath}}{{if eq .ComputeResource "CPU/GPU"}}/cloudbrain{{else}}/modelarts/notebook{{end}}" data-jobid="{{.Cloudbrain.ID}}" data-version="{{.VersionName}}">
<span class="job-status" id="{{.Cloudbrain.ID}}" data-repopath="{{$.RepoRelPath}}{{if or (eq .JobType "MODELSAFETY") (eq .ComputeResource "CPU/GPU")}}/cloudbrain{{else}}/modelarts/notebook{{end}}" data-jobid="{{.Cloudbrain.ID}}" data-version="{{.VersionName}}">
<span><i id="{{.Cloudbrain.ID}}-icon" style="vertical-align: middle;" class="{{.Status}}"></i><span id="{{.Cloudbrain.ID}}-text" style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
</span>
</div>


+ 8
- 8
templates/repo/modelsafety/indicators_descr.tmpl View File

@@ -11,35 +11,35 @@
<tbody>
<tr>
<td data-label="指标">ACC</td>
<td data-label="说明">Accuracy,精确度,计算模型预测准确率,该指标越高,说明评测结果越好。</td>
<td data-label="说明" indicator="ACC">Accuracy:精确度,计算模型预测准确率,该指标越高,说明评测结果越好。</td>
</tr>
<tr>
<td data-label="指标">CAV</td>
<td data-label="说明">Classification Accuracy Variance,用于评估深度学习模型性能的最重要指标为准确性。该指标值越高,说明评测结果越好。</td>
<td data-label="说明" indicator="CAV">Classification Accuracy Variance:用于评估深度学习模型性能的最重要指标为准确性。该指标值越高,说明评测结果越好。</td>
</tr>
<tr>
<td data-label="指标">ASS</td>
<td data-label="说明">Average Structural Similarity,所有攻击成功对抗样本与其原始样本间的平均相似性。该指标越大,说明评测结果越好。</td>
<td data-label="说明" indicator="ASS">Average Structural Similarity:所有攻击成功对抗样本与其原始样本间的平均相似性。该指标越大,说明评测结果越好。</td>
</tr>
<tr>
<td data-label="指标">ALDp</td>
<td data-label="说明">Average LpDistortion,为所有攻击成功的对抗样本的平均归一化Lp失真度,ALDp值越小,对抗样本的不可感知性越强。</td>
<td data-label="说明" indicator="ALDp">Average LpDistortion:为所有攻击成功的对抗样本的平均归一化Lp失真度,ALDp值越小,对抗样本的不可感知性越强。</td>
</tr>
<tr>
<td data-label="指标">ACAC</td>
<td data-label="说明">Average Confidence of Adversarial Class(ACAC)这个数值越高,攻击算法的攻击能力越强。</td>
<td data-label="说明" indicator="ACAC">Average Confidence of Adversarial Class(ACAC):这个数值越高,攻击算法的攻击能力越强。</td>
</tr>
<tr>
<td data-label="指标">ACTC</td>
<td data-label="说明">Average Confidence of True Class(ACTC) 这个数值越低,攻击算法的攻击能力越强。</td>
<td data-label="说明" indicator="ACTC">Average Confidence of True Class(ACTC):这个数值越低,攻击算法的攻击能力越强。</td>
</tr>
<tr>
<td data-label="指标">PSD</td>
<td data-label="说明">Perturbation Sensitivity Distance,用于评测人类对扰动的感知能力。该指标值越大,说明评测结果越差。</td>
<td data-label="说明" indicator="PSD">Perturbation Sensitivity Distance:用于评测人类对扰动的感知能力。该指标值越大,说明评测结果越差。</td>
</tr>
<tr>
<td data-label="指标">CACC</td>
<td data-label="说明">Clean ACC该值计算的是原始未被攻击的样本,使用模型和groundtruth相比较的模型的本身的一个。</td>
<td data-label="说明" indicator="CACC">Clean ACC该值计算的是原始未被攻击的样本,使用模型和groundtruth相比较的模型的本身的一个。</td>
</tr>
</tbody>
</table>


+ 281
- 81
templates/repo/modelsafety/show.tmpl View File

@@ -499,53 +499,60 @@
</div>
</div>
</div>
<div class="ui tab" data-tab="third0">
<div class="__res_container">
<div class="__res_title">
<div class="__res_title_icon"></div>
<div class="__res_title_txt">
<div class="__res_title_txt1">ACC-fgsm_cifar10_1000</div>
<div class="__res_title_txt2">Accuracy: 精确度,计算模型预测精准率,该指标越高,说明评测结果越好。</div>
</div>
<div>
<div class="__res_table_container">
<table>
<tr>
<th>ACC</th>
<th>params1</th>
<th>params2</th>
<th>params3</th>
<th>params4</th>
<th>params5</th>
<th>params6</th>
<th>params7</th>
</tr>
<tr>
<td>非定向</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
<tr>
<td>定向</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
</div>
<div class="__res_chart_container">

</div>
<div class="ui tab" data-tab="third0">
<style>
.__res_item {
margin-bottom: 20px;
}
.__res_title {
height: 50px;
display: flex;
align-items: center;
margin-bottom: 10px;
}
.__res_title_icon {
height: 48px;
width: 48px;
background-color: rgb(105, 192, 255);
margin-right: 8px;
}
.__res_title_txt {
font-family: SourceHanSansSC;
font-size: 14px;
font-style: normal;
line-height: 20px;
text-decoration: none;
}
.__res_title_txt1 {
font-weight: 700;
color: rgb(3, 102, 214);
}
.__res_title_txt2 {
font-weight: 300;
color: rgba(136,136,136,1);
}
.__res_table_container {
overflow-x: auto;
}
.__res_table_container table {
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
}
.__res_table_container th, .__res_table_container td {
text-align: center !important;
}
.__res_chart_container {
height:280px;
border: 1px solid rgba(34,36,38,.1);
margin-top: -1px;
border-bottom-left-radius: .28571429rem;
border-bottom-right-radius: .28571429rem;
}
</style>
<div style="display:none;">
{{template "repo/modelsafety/indicators_descr".}}
</div>
<div class="__res_container"></div>
</div>
</div>
</div>
@@ -593,41 +600,7 @@
})();
</script>
<script>
$(document).ready(function () {
$('.ui.accordion').accordion({ selector: { trigger: '.icon' } });
$('.pointing.secondary.menu .item').tab({
onVisible: function(tabPath) {
console.log(tabPath);
},
});
});

let userName
let repoPath
let jobName
$(document).ready(function () {
let url = window.location.href;
let urlArr = url.split('/')
userName = urlArr.slice(-5)[0]
repoPath = urlArr.slice(-4)[0]
jobName = urlArr.slice(-1)[0]
})

function loadLog(version_name) {
console.log('loadLog');
document.getElementById("mask").style.display = "block"
$.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/${jobName}/log?version_name=${version_name}&lines=50&order=asc`, (data) => {
$('input[name=end_line]').val(data.EndLine)
$('input[name=start_line]').val(data.StartLine)
$(`#log_file${version_name}`).text(data.Content)
document.getElementById("mask").style.display = "none"
}).fail(function (err) {
console.log(err);
document.getElementById("mask").style.display = "none"
});
}
</script>
<script>
// 配置信息页签
;(function() {
function paddingZeros(str, len) {
str = str.toString();
@@ -662,4 +635,231 @@
},
});
})();

// 评测结果页签
;(function() {
function initTable(tableEl, data) {
tableEl.empty();
tableEl.append(`
<table class="ui celled table">
<thead>
<tr class="tr-head"><th style="width:100px;">${data.indicator}</th></tr>
</thead>
<tbody>
<tr class="tr-untargetted"><td>非定向</td></tr>
<tr class="tr-targetted"><td>定向</td></tr>
</tbody>
</table>`);
var trHead = tableEl.find('tr.tr-head');
var trUntargetted = tableEl.find('tr.tr-untargetted');
var trTargetted = tableEl.find('tr.tr-targetted');
for (var i = 0, iLen = data.params.length; i < iLen; i++) {
var params = data.params;
var untargetted = data.untargetted;
var targetted = data.targetted;
trHead.append(`<th>param(${params[i]})</th>`);
trUntargetted.append(`<td>${untargetted[i]}</td>`);
trTargetted.append(`<td>${targetted[i]}</td>`);
}
}

function initChart(chartEl, data) {
var chartHandle = chartEl.data('chart');
chartHandle && chartHandle.dispose();
chartHandle && window.removeEventListener('resize', chartHandle.resize);
chartHandle = echarts.init(chartEl[0]);
chartEl.data('chart', chartHandle);
var option = {
tooltip: {
trigger: 'axis'
},
color: ['rgb(80, 135, 236)', 'rgb(104, 187, 196)'],
legend: {
data: ['非定向', '定向'],
top: '15',
},
grid: {
top: '50',
left: '20',
right: '20',
bottom: '20',
containLabel: true
},
xAxis: {
type: 'category',
data: data.params.map(function(item){ return `param(${item})`}),
},
yAxis: {
type: 'value'
},
series: [
{
name: '非定向',
type: 'line',
stack: 'Total',
data: data.untargetted || [],
},
{
name: '定向',
type: 'line',
stack: 'Total',
data: data.targetted || [],
}
]
};
chartHandle.setOption(option);
window.addEventListener('resize', chartHandle.resize);
}

function initResItems(list) {
var resContainer = $('.__res_container');
resContainer.empty();
for (var i = 0, iLen = list.length; i < iLen; i++) {
var item = list[i], indicator = item.indicator;
var descr = $(`[indicator="${indicator}"]`).text();
var resItemContainer = $(`<div class="__res_item">
<div class="__res_title">
<div class="__res_title_icon"></div>
<div class="__res_title_txt">
<div class="__res_title_txt1">${indicator}-${item.name}</div>
<div class="__res_title_txt2">${descr}</div>
</div>
</div>
<div class="__res_table_container"></div>
<div class="__res_chart_container"></div>
</div>`);
resContainer.append(resItemContainer);
initTable(resItemContainer.find('.__res_table_container'), item);
initChart(resItemContainer.find('.__res_chart_container'), item);
}
};

function initData() {
var data = {
"eType": "static",
"name": "fgsm_cifar10_1000",
"params": [
[
"0.1"
],
[
"0.15"
],
[
"0.2"
],
[
"0.25"
],
[
"0.3"
],
[
"0.35"
],
[
"0.4"
]
],
"untargetted": {
"ACC": [
0.169,
0.128,
0.122,
0.115,
0.113,
0.104,
0.1
],
"ASS": [
0.6525109174194562,
0.5128998893711293,
0.4012456987633366,
0.31603768362214135,
0.2522637372349447,
0.20173695879100786,
0.15927145111766017
]
},
"targetted": {
"ACC": {
"targets": [
0.127,
0.129,
0.125,
0.131,
0.127,
0.125,
0.115
]
},
"ASS": {
"targets": [
0.6529545699941741,
0.5101767310061309,
0.3905316332202089,
0.30660659401929724,
0.24579538237865656,
0.19831695120705345,
0.15426212417026997
]
}
}
};
var name = data.name;
var params = data.params;
var indicators = Object.keys(data.targetted);
var list = [];
for (var i = 0, iLen = indicators.length; i < iLen; i++) {
var indicator = indicators[i];
var obj = {
name: name,
params: params.flat(),
indicator: indicator,
targetted: data.targetted[indicator]['targets'],
untargetted: data.untargetted[indicator],
};
list.push(obj);
}
initResItems(list);
}

$('.pointing.secondary.menu .item').tab({
onVisible: function(tabPath) {
if (tabPath === 'third0') {
initData();
}
},
});
})();
</script>
<script>
$(document).ready(function () {
$('.ui.accordion').accordion({ selector: { trigger: '.icon' } });
});

let userName
let repoPath
let jobName
$(document).ready(function () {
let url = window.location.href;
let urlArr = url.split('/')
userName = urlArr.slice(-5)[0]
repoPath = urlArr.slice(-4)[0]
jobName = urlArr.slice(-1)[0]
})

function loadLog(version_name) {
console.log('loadLog');
document.getElementById("mask").style.display = "block"
$.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/${jobName}/log?version_name=${version_name}&lines=50&order=asc`, (data) => {
$('input[name=end_line]').val(data.EndLine)
$('input[name=start_line]').val(data.StartLine)
$(`#log_file${version_name}`).text(data.Content)
document.getElementById("mask").style.display = "none"
}).fail(function (err) {
console.log(err);
document.getElementById("mask").style.display = "none"
});
}
</script>

+ 1
- 0
web_src/js/index.js View File

@@ -65,6 +65,7 @@ const { AppSubUrl, StaticUrlPrefix, csrf } = window.config;
Object.defineProperty(Vue.prototype, "$echarts", {
value: echarts,
});
window.echarts = echarts;

function htmlEncode(text) {
return jQuery("<div />").text(text).html();


Loading…
Cancel
Save