|
|
|
@@ -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> |