|
var Chart = echarts.init(document.getElementById('sec_plot__chart1')); |
|
var Chart2 = echarts.init(document.getElementById('sec_plot__chart2')); |
|
var dataset = [ |
|
{ |
|
name: 'GPT-3.5-turbo-1103', |
|
MGI: 0.2326, |
|
temp0_HumanEval: 0.7439, |
|
temp0_HumanEval_ET: 0.5915, |
|
temp0_8_HumanEval: 0.7248, |
|
temp0_8_HumanEval_ET: 0.5778, |
|
}, |
|
{ |
|
name: 'GPT-3.5-turbo-0613', |
|
MGI: 0.1314, |
|
temp0_HumanEval: 0.6585, |
|
temp0_HumanEval_ET: 0.5122, |
|
temp0_8_HumanEval: 0.612, |
|
temp0_8_HumanEval_ET: 0.4776, |
|
}, |
|
{ |
|
name: 'CodeGeeX4-All-9B', |
|
MGI: 0.5182, |
|
temp0_HumanEval: 0.7805, |
|
temp0_HumanEval_ET: 0.622, |
|
temp0_8_HumanEval: 0.7606, |
|
temp0_8_HumanEval_ET: 0.6078, |
|
}, |
|
{ |
|
name: 'Deepseek-Coder-6.7b-base', |
|
MGI: 0.0602, |
|
temp0_HumanEval: 0.4817, |
|
temp0_HumanEval_ET: 0.3963, |
|
temp0_8_HumanEval: 0.3388, |
|
temp0_8_HumanEval_ET: 0.2798, |
|
}, |
|
{ |
|
name: 'Deepseek-Coder-6.7b-instruct', |
|
MGI: 0.0893, |
|
temp0_HumanEval: 0.7134, |
|
temp0_HumanEval_ET: 0.628, |
|
temp0_8_HumanEval: 0.6494, |
|
temp0_8_HumanEval_ET: 0.5673, |
|
}, |
|
{ |
|
name: 'CodeLlama-7b', |
|
MGI: 0.0417, |
|
temp0_HumanEval: 0.311, |
|
temp0_HumanEval_ET: 0.2378, |
|
temp0_8_HumanEval: 0.2211, |
|
temp0_8_HumanEval_ET: 0.1832, |
|
}, |
|
{ |
|
name: 'CodeLlama-7b-python', |
|
MGI: 0.0525, |
|
temp0_HumanEval: 0.3841, |
|
temp0_HumanEval_ET: 0.3354, |
|
temp0_8_HumanEval: 0.3062, |
|
temp0_8_HumanEval_ET: 0.2568, |
|
}, |
|
{ |
|
name: 'CodeLlama-7b-instruct', |
|
MGI: 0.0908, |
|
temp0_HumanEval: 0.3537, |
|
temp0_HumanEval_ET: 0.2988, |
|
temp0_8_HumanEval: 0.2876, |
|
temp0_8_HumanEval_ET: 0.2455, |
|
}, |
|
{ |
|
name: 'CodeGemma-2b', |
|
MGI: 0.0112, |
|
temp0_HumanEval: 0.3537, |
|
temp0_HumanEval_ET: 0.2805, |
|
temp0_8_HumanEval: 0.2161, |
|
temp0_8_HumanEval_ET: 0.1771, |
|
}, |
|
{ |
|
name: 'CodeGemma-7b', |
|
MGI: 0.0548, |
|
temp0_HumanEval: 0.4329, |
|
temp0_HumanEval_ET: 0.3537, |
|
temp0_8_HumanEval: 0.3316, |
|
temp0_8_HumanEval_ET: 0.2779, |
|
}, |
|
{ |
|
name: 'AixCoder3-7b-base', |
|
MGI: 0.0578, |
|
temp0_HumanEval: 0.5427, |
|
temp0_HumanEval_ET: 0.4451, |
|
temp0_8_HumanEval: 0.4545, |
|
temp0_8_HumanEval_ET: 0.3826, |
|
}, |
|
{ |
|
name: 'CodeQwen1.5-7b', |
|
MGI: 0.0361, |
|
temp0_HumanEval: 0.439, |
|
temp0_HumanEval_ET: 0.3841, |
|
temp0_8_HumanEval: 0.3884, |
|
temp0_8_HumanEval_ET: 0.3279, |
|
}, |
|
{ |
|
name: 'Starcoder2-7b', |
|
MGI: 0.0579, |
|
temp0_HumanEval: 0.3659, |
|
temp0_HumanEval_ET: 0.3232, |
|
temp0_8_HumanEval: 0.2905, |
|
temp0_8_HumanEval_ET: 0.2438, |
|
}, |
|
{ |
|
name: 'Starcoder2-15b', |
|
MGI: 0.0552, |
|
temp0_HumanEval: 0.4695, |
|
temp0_HumanEval_ET: 0.4024, |
|
temp0_8_HumanEval: 0.3406, |
|
temp0_8_HumanEval_ET: 0.2795, |
|
}, |
|
{ |
|
name: 'CodeLlama-13b', |
|
MGI: 0.0412, |
|
temp0_HumanEval: 0.3415, |
|
temp0_HumanEval_ET: 0.2927, |
|
temp0_8_HumanEval: 0.2405, |
|
temp0_8_HumanEval_ET: 0.2015, |
|
}, |
|
{ |
|
name: 'CodeLlama-34b', |
|
MGI: 0.0651, |
|
temp0_HumanEval: 0.4817, |
|
temp0_HumanEval_ET: 0.4146, |
|
temp0_8_HumanEval: 0.3478, |
|
temp0_8_HumanEval_ET: 0.2906, |
|
}, |
|
{ |
|
name: 'CodeLlama-70b', |
|
MGI: 0.0523, |
|
temp0_HumanEval: 0.5244, |
|
temp0_HumanEval_ET: 0.4512, |
|
temp0_8_HumanEval: 0.4317, |
|
temp0_8_HumanEval_ET: 0.3615, |
|
}, |
|
] |
|
let ymins = new Array(0.27, 0.16, 0.21, 0.14) |
|
let titleText = [ |
|
'Memorization-Generalization Index VS HumanEval (temp = 0)', |
|
'Memorization-Generalization Index VS HumanEval (temp = 0.8)', |
|
'Memorization-Generalization Index VS HumanEval-ET (temp = 0)', |
|
'Memorization-Generalization Index VS HumanEval-ET (temp = 0.8)' |
|
] |
|
let options = new Array(4) |
|
for(let i = 0; i < 4; i++){ |
|
options[i] = { |
|
series: [ |
|
{ name: 'GPT-3.5-turbo-1103' }, |
|
{ name: 'GPT-3.5-turbo-0613' }, |
|
{ name: 'CodeGeeX4-All-9B' }, |
|
{ name: 'Deepseek-Coder-6.7b-base' }, |
|
{ name: 'Deepseek-Coder-6.7b-instruct' }, |
|
{ name: 'CodeLlama-7b' }, |
|
{ name: 'CodeLlama-7b-python' }, |
|
{ name: 'CodeLlama-7b-instruct' }, |
|
{ name: 'CodeGemma-2b' }, |
|
{ name: 'CodeGemma-7b' }, |
|
{ name: 'AixCoder3-7b-base' }, |
|
{ name: 'CodeQwen1.5-7b' }, |
|
{ name: 'Starcoder2-7b' }, |
|
{ name: 'Starcoder2-15b' }, |
|
{ name: 'CodeLlama-13b' }, |
|
{ name: 'CodeLlama-34b' }, |
|
{ name: 'CodeLlama-70b' } |
|
], |
|
grid: { |
|
show: true, |
|
top: '15%', |
|
left: '12%', |
|
right: '45%', |
|
borderColor: 'transparent', |
|
backgroundColor: '#eff1f7' |
|
}, |
|
legend: { |
|
right: 70, |
|
bottom: '11%', |
|
orient: 'vertical', |
|
icon: 'diamond', |
|
itemWidth: 14, |
|
itemHeight: 14, |
|
textStyle: { |
|
fontSize: 14.5, |
|
color: '#5876fa' |
|
}, |
|
}, |
|
title: { |
|
show: true, |
|
text: '', |
|
left: 'center', |
|
textStyle: { |
|
fontFamily: "Arial", |
|
fontSize: 20, |
|
fontWeight: 'normal' |
|
}, |
|
top: 25 |
|
}, |
|
tooltip: { |
|
trigger: 'item', |
|
}, |
|
xAxis: { |
|
name: 'Memorization-Generalization Index', |
|
nameLocation: 'middle', |
|
nameGap: 32, |
|
nameTextStyle: { |
|
fontSize: 15, |
|
fontFamily: 'Arial', |
|
}, |
|
min: -0.08, |
|
axisLabel: { |
|
showMinLabel: false |
|
}, |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: 'white' |
|
} |
|
}, |
|
axisTick:{ |
|
show:false |
|
}, |
|
axisLine: { |
|
show: false, |
|
}, |
|
}, |
|
yAxis: { |
|
name: '', |
|
nameLocation: 'middle', |
|
nameGap: 40, |
|
nameTextStyle: { |
|
fontSize: 16, |
|
fontFamily: 'Arial', |
|
}, |
|
type: 'value', |
|
axisLabel: { |
|
showMinLabel: false |
|
}, |
|
splitLine: { |
|
show: true, |
|
lineStyle: { |
|
color: 'white' |
|
} |
|
}, |
|
axisTick:{ |
|
show:false |
|
}, |
|
axisLine: { |
|
show: false, |
|
}, |
|
}, |
|
}; |
|
options[i].title.text = titleText[i] |
|
options[i].tooltip.formatter = ( |
|
i < 2 ? function(params) { |
|
return params.marker + |
|
`<span style="color: ${params.color}; text-decoration: underline">` + params.seriesName + '</span>' + |
|
'<br/><br/>MGI: ' + params.data[0] + |
|
'<br/>HumanEval: ' + params.data[1] + |
|
'<br/>HumanEval-ET: ' + params.data[2]; |
|
} |
|
: function(params) { |
|
return params.marker + |
|
`<span style="color: ${params.color}; text-decoration: underline">` + params.seriesName + '</span>' + |
|
'<br/><br/>MGI: ' + params.data[0] + |
|
'<br/>HumanEval-ET: ' + params.data[1] + |
|
'<br/>HumanEval: ' + params.data[2]; |
|
} |
|
) |
|
options[i].yAxis.name = ( |
|
i < 2 ? 'HumanEval' |
|
: 'HumanEval-ET' |
|
) |
|
options[i].yAxis.min = ymins[i] |
|
} |
|
|
|
for(let i = 0; i < dataset.length; i++){ |
|
options[0].series[i].data = [[dataset[i].MGI, dataset[i].temp0_HumanEval,dataset[i].temp0_HumanEval_ET]] |
|
options[1].series[i].data = [[dataset[i].MGI, dataset[i].temp0_8_HumanEval, dataset[i].temp0_8_HumanEval_ET]] |
|
options[2].series[i].data = [[dataset[i].MGI, dataset[i].temp0_HumanEval_ET,dataset[i].temp0_HumanEval]] |
|
options[3].series[i].data = [[dataset[i].MGI, dataset[i].temp0_8_HumanEval_ET, dataset[i].temp0_8_HumanEval]] |
|
} |
|
|
|
for(let i = 0; i < 4; i++){ |
|
for(let j = 0; j < dataset.length; ++j){ |
|
options[i].series[j].type = 'scatter' |
|
options[i].series[j].symbol = 'diamond' |
|
} |
|
} |
|
|
|
function setSymbolSize() { |
|
for (var i = 0; i < dataset.length; i++) { |
|
if(dataset[i].MGI < 0.1 && dataset[i].temp0_HumanEval > 0.5){ |
|
options[0].series[i].symbolSize = 50 |
|
options[1].series[i].symbolSize = 50 |
|
} |
|
else if(dataset[i].temp0_HumanEval > 0.43 && dataset[i].temp0_HumanEval < 0.75){ |
|
options[0].series[i].symbolSize = 30 |
|
options[1].series[i].symbolSize = 30 |
|
} |
|
else if(dataset[i].MGI < 0.015 || dataset[i].temp0_HumanEval > 0.38){ |
|
options[0].series[i].symbolSize = 20 |
|
options[1].series[i].symbolSize = 20 |
|
} |
|
else { |
|
options[0].series[i].symbolSize = 13 |
|
options[1].series[i].symbolSize = 13 |
|
} |
|
} |
|
for (var i = 0; i < dataset.length; i++) { |
|
if(dataset[i].MGI < 0.1 && dataset[i].temp0_HumanEval_ET > 0.5){ |
|
options[2].series[i].symbolSize = 50 |
|
options[3].series[i].symbolSize = 50 |
|
} |
|
else if(dataset[i].temp0_HumanEval_ET > 0.43 && dataset[i].temp0_HumanEval_ET < 0.75){ |
|
options[2].series[i].symbolSize = 30 |
|
options[3].series[i].symbolSize = 30 |
|
} |
|
else if(dataset[i].MGI < 0.015 || dataset[i].temp0_HumanEval_ET > 0.38){ |
|
options[2].series[i].symbolSize = 20 |
|
options[3].series[i].symbolSize = 20 |
|
} |
|
else { |
|
options[2].series[i].symbolSize = 13 |
|
options[3].series[i].symbolSize = 13 |
|
} |
|
} |
|
} |
|
setSymbolSize() |
|
|
|
Chart.setOption(options[0]) |
|
Chart2.setOption(options[1]) |
|
|
|
|
|
|
|
var btn_temp0_HumanEval = document.getElementById('btn_temp0_HumanEval') |
|
var btn_temp0_HumanEval_ET = document.getElementById('btn_temp0_HumanEval_ET') |
|
var btn_temp0_8_HumanEval = document.getElementById('btn_temp0_8_HumanEval') |
|
var btn_temp0_8_HumanEval_ET = document.getElementById('btn_temp0_8_HumanEval_ET') |
|
|
|
|
|
|
|
var span_temp0_HumanEval = document.getElementById('span_temp0_HumanEval') |
|
var span_temp0_HumanEval_ET = document.getElementById('span_temp0_HumanEval_ET') |
|
var span_temp0_8_HumanEval = document.getElementById('span_temp0_8_HumanEval') |
|
var span_temp0_8_HumanEval_ET = document.getElementById('span_temp0_8_HumanEval_ET') |
|
|
|
btn_temp0_HumanEval.addEventListener("click", function() { |
|
Chart.setOption(options[0]) |
|
btn_temp0_HumanEval.style.backgroundColor = '#386df4' |
|
span_temp0_HumanEval.style.color = '#386df4' |
|
btn_temp0_HumanEval_ET.style.backgroundColor = '#d3d3d3' |
|
span_temp0_HumanEval_ET.style.color = '#d3d3d3' |
|
}) |
|
span_temp0_HumanEval.addEventListener("click", function() { |
|
Chart.setOption(options[0]); |
|
btn_temp0_HumanEval.style.backgroundColor = '#386df4' |
|
span_temp0_HumanEval.style.color = '#386df4' |
|
btn_temp0_HumanEval_ET.style.backgroundColor = '#d3d3d3' |
|
span_temp0_HumanEval_ET.style.color = '#d3d3d3' |
|
}) |
|
|
|
btn_temp0_HumanEval_ET.addEventListener("click", function() { |
|
Chart.setOption(options[2]) |
|
btn_temp0_HumanEval.style.backgroundColor = '#d3d3d3' |
|
span_temp0_HumanEval.style.color = '#d3d3d3' |
|
btn_temp0_HumanEval_ET.style.backgroundColor = '#386df4' |
|
span_temp0_HumanEval_ET.style.color = '#386df4' |
|
}) |
|
span_temp0_HumanEval_ET.addEventListener("click", function() { |
|
Chart.setOption(options[2]) |
|
btn_temp0_HumanEval.style.backgroundColor = '#d3d3d3' |
|
span_temp0_HumanEval.style.color = '#d3d3d3' |
|
btn_temp0_HumanEval_ET.style.backgroundColor = '#386df4' |
|
span_temp0_HumanEval_ET.style.color = '#386df4' |
|
}) |
|
|
|
btn_temp0_8_HumanEval.addEventListener("click", function() { |
|
Chart2.setOption(options[1]) |
|
btn_temp0_8_HumanEval.style.backgroundColor = '#386df4' |
|
span_temp0_8_HumanEval.style.color = '#386df4' |
|
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#d3d3d3' |
|
span_temp0_8_HumanEval_ET.style.color = '#d3d3d3' |
|
}) |
|
span_temp0_8_HumanEval.addEventListener("click", function() { |
|
Chart2.setOption(options[1]); |
|
btn_temp0_8_HumanEval.style.backgroundColor = '#386df4' |
|
span_temp0_8_HumanEval.style.color = '#386df4' |
|
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#d3d3d3' |
|
span_temp0_8_HumanEval_ET.style.color = '#d3d3d3' |
|
}) |
|
|
|
btn_temp0_8_HumanEval_ET.addEventListener("click", function() { |
|
Chart2.setOption(options[3]) |
|
btn_temp0_8_HumanEval.style.backgroundColor = '#d3d3d3' |
|
span_temp0_8_HumanEval.style.color = '#d3d3d3' |
|
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#386df4' |
|
span_temp0_8_HumanEval_ET.style.color = '#386df4' |
|
}) |
|
span_temp0_8_HumanEval_ET.addEventListener("click", function() { |
|
Chart2.setOption(options[3]) |
|
btn_temp0_8_HumanEval.style.backgroundColor = '#d3d3d3' |
|
span_temp0_8_HumanEval.style.color = '#d3d3d3' |
|
btn_temp0_8_HumanEval_ET.style.backgroundColor = '#386df4' |
|
span_temp0_8_HumanEval_ET.style.color = '#386df4' |
|
}) |
