Upload 3 files

button.js

@@ -0,0 +1,62 @@
+var btn_evalTable = document.getElementById("btn_evalTable");
+var btn_about = document.getElementById("btn_about");
+var btn_plot = document.getElementById("btn_plot");
+var btn_submit = document.getElementById("btn_submit");
+var sec_evalTable = document.getElementById("sec_evalTable");
+var sec_about = document.getElementById("sec_about");
+var sec_plot = document.getElementById("sec_plot")
+var sec_submit = document.getElementById("sec_submit");
+
+
+btn_evalTable.addEventListener("click", function() {
+    sec_evalTable.style.display = "block";
+    sec_plot.style.display = "none";
+    sec_about.style.display = "none";
+    sec_submit.style.display = "none";
+
+    btn_evalTable.style.color = "#000000";
+    btn_plot.style.color = "#7c7b7b";
+    btn_about.style.color = "#7c7b7b";
+    btn_submit.style.color = "#7c7b7b";
+
+});
+btn_about.addEventListener("click", function() {
+    sec_evalTable.style.display = "none";
+    sec_plot.style.display = "none";
+    sec_about.style.display = "block";
+    sec_submit.style.display = "none";
+
+    btn_evalTable.style.color = "#7c7b7b";
+    btn_plot.style.color = "#7c7b7b";
+    btn_about.style.color = "#000000";
+    btn_submit.style.color = "#7c7b7b";
+
+});
+
+btn_plot.addEventListener("click", function() {
+    sec_evalTable.style.display = "none";
+    sec_plot.style.display = "block";
+    sec_about.style.display = "none";
+    sec_submit.style.display = "none";
+
+    btn_evalTable.style.color = "#7c7b7b";
+    btn_plot.style.color = "#000000";
+    btn_about.style.color = "#7c7b7b";
+    btn_submit.style.color = "#7c7b7b";
+
+});
+
+btn_submit.addEventListener("click", function() {
+    sec_evalTable.style.display = "none";
+    sec_plot.style.display = "none";
+    sec_about.style.display = "none";
+    sec_submit.style.display = "block";
+
+    btn_evalTable.style.color = "#7c7b7b";
+    btn_plot.style.color = "#7c7b7b";
+    btn_about.style.color = "#7c7b7b";
+    btn_submit.style.color = "#000000";
+
+});
+
+

chart.js

@@ -0,0 +1,408 @@
+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: 95,
+            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])
+
+
+// button and span
+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'
+})

table.js

@@ -0,0 +1,274 @@
+const models = [
+    {
+        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,
+        link: 'https://platform.openai.com/docs/models/gpt-3-5-turbo',
+    },
+    {
+        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,
+        link: 'https://platform.openai.com/docs/models/gpt-3-5-turbo',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/THUDM/codegeex4-all-9b',
+    },
+    {
+        name: 'Deepseek-Coder-6.7b',
+        MGI: 0.0602,
+        temp0_HumanEval: 0.4817,
+        temp0_HumanEval_ET: 0.3963,
+        temp0_8_HumanEval: 0.3388,
+        temp0_8_HumanEval_ET: 0.2798,
+        link: 'https://huggingface.co/deepseek-ai/deepseek-coder-6.7b-base',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/deepseek-ai/deepseek-coder-6.7b-instruct'
+    },
+    {
+        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,
+        link: 'https://huggingface.co/codellama/CodeLlama-7b-hf'
+    },
+    {
+        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,
+        link: 'https://huggingface.co/codellama/CodeLlama-7b-Python-hf'
+    },
+    {
+        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,
+        link: 'https://huggingface.co/codellama/CodeLlama-7b-Instruct-hf'
+    },
+    {
+        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,
+        link: 'https://huggingface.co/google/codegemma-2b',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/google/codegemma-7b',
+    },
+    {
+        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,
+        link: 'https://github.com/aixcoder-plugin/aiXcoder-7B?ref=top.aibase.com',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/Qwen/CodeQwen1.5-7B',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/bigcode/starcoder2-7b',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/bigcode/starcoder2-15b',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/codellama/CodeLlama-13b-hf',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/codellama/CodeLlama-34b-hf',
+    },
+    {
+        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,
+        link: 'https://huggingface.co/codellama/CodeLlama-70b-hf',
+    }
+]
+function renderRows(model) {
+    return `
+            <tr>
+                <td><a href=${model.link} target="_blank">${model.name}</a></td>
+                <td class="td_value">${model.MGI}</td>
+                <td class="td_value">${model.temp0_HumanEval}</td>
+                <td class="td_value">${model.temp0_HumanEval_ET}</td>
+                <td class="td_value">${model.temp0_8_HumanEval}</td>
+                <td class="td_value">${model.temp0_8_HumanEval_ET}</td>
+            </tr>
+        `
+}
+function renderTables() {
+    let html = ''
+    let rows = models.length + 1
+    html += `
+            <tr>
+                <td class="td_HumanEval" rowspan="${rows}">HumanEval</td>
+            </tr>
+        `
+    models.forEach(model => {
+        html += renderRows(model);
+    });
+    document.querySelector('tbody').innerHTML = html;
+}
+
+function adjustBackgroundColor() {
+    var evalTable = document.getElementById('evalTable');
+    var rows = evalTable.getElementsByTagName('tr');
+    for(var i = 0; i < rows.length; i++){
+        rows[i].style.backgroundColor = (i < 3 ? '#ffffff' : (i % 2 === 0 ? '#fbfbfb' : '#ffffff'));
+    }
+}
+
+renderTables()
+adjustBackgroundColor()
+
+document.querySelector('table').addEventListener('click', (e) => {
+    if (e.target.matches('button')) {
+        let direction = e.target.dataset.direction
+        let type = e.target.dataset.type
+        models.sort(orderBy(direction, type))
+        renderTables()
+        adjustBackgroundColor()
+        e.target.dataset.direction = (direction === 'asc' ? 'desc' : 'asc')
+        e.target.style.transform = (direction === 'asc' ? 'rotate(0deg)' : 'rotate(180deg)')
+    }
+})
+
+function orderBy(direction, type) {
+    return function (a, b) {
+        let comparision = 0
+        let value = (direction === 'desc' ? 1 : -1)
+        switch (type) {
+            case 'name':
+                if (a.name.toLowerCase() > b.name.toLowerCase()) {
+                    comparision = value
+                } else {
+                    comparision = value * -1
+                }
+                break;
+            case 'MGI':
+                if (a.MGI > b.MGI) {
+                    comparision = value
+                } else {
+                    comparision = value * -1
+                }
+                break;
+            case 'temp0_HumanEval':
+                if (a.temp0_HumanEval > b.temp0_HumanEval) {
+                    comparision = value
+                } else {
+                    comparision = value * -1
+                }
+                break;
+            case 'temp0_HumanEval_ET':
+                if (a.temp0_HumanEval_ET > b.temp0_HumanEval_ET) {
+                    comparision = value
+                } else {
+                    comparision = value * -1
+                }
+                break;
+            case 'temp0_8_HumanEval':
+                if (a.temp0_8_HumanEval > b.temp0_8_HumanEval) {
+                    comparision = value
+                } else {
+                    comparision = value * -1
+                }
+                break;
+            case 'temp0_8_HumanEval_ET':
+                if (a.temp0_8_HumanEval_ET > b.temp0_8_HumanEval_ET) {
+                    comparision = value
+                } else {
+                    comparision = value * -1
+                }
+                break;
+        }
+        return comparision
+    }
+}
+
+var btns = document.getElementsByClassName("button_sort");
+
+function adjustBtnForm(event) {
+    var btn = event.target;
+    if (btn.classList.contains("button_sort")) {
+        btn.style.borderTop = '8px solid orange'; 
+        for (var i = 0; i < btns.length; i++) {
+            if (btns[i] !== btn) {
+                btns[i].style.borderTop = '8px solid #9a9a9a';
+                btns[i].style.transform = 'rotate(180deg)';
+            }
+        }
+    }
+}
+
+for (var i = 0; i < btns.length; i++) {
+    btns[i].addEventListener("click", adjustBtnForm);
+}