visualization.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.3/dist/echarts.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">

    <link rel="icon" href="https://images.emojiterra.com/google/noto-emoji/unicode-15/color/1024px/1f9d1-1f4bb.png">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/style.css">
    <script
    src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
    crossorigin="anonymous">
    </script>
    <script>
    $(function(){
      $("#header").load("header.html");
    });
  </script>
</head>
<body onLoad="initial_setup()">

<div id="header"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/randomcolor/0.6.1/randomColor.min.js" integrity="sha512-vPeZ7JCboHcfpqSx5ZD+/jpEhS4JpXxfz9orSvAPPj0EKUVShU2tgy7XkU+oujBJKnWmu4hU7r9MMQNWPfXsYw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // some default stuff
    Chart.defaults.font.family = 'Roboto Condensed';
    Chart.defaults.font.color = "black";

    var display_model = ['gpt-4', 'gpt-4-turbo', 'claude-3']

    function initial_setup() {
        fetchJSONData(display_model);
    }

    function map_id_to_name(name) {
        var new_name = name
        new_name = new_name.replace("gpt-4", "GPT-4")
        new_name = new_name.replace("turbo", "Turbo")
        new_name = new_name.replace("claude", "Claude")
        new_name = new_name.replace("gemini-pro", "Gemini")
        new_name = new_name.replace("palm", "PaLM-2")
        new_name = new_name.replace("deepseek-coder", "DeepSeeker")
        new_name = new_name.replace("code-llama", "CodeLlamma")
        new_name = new_name.replace("chatgpt", "ChatGPT")
        new_name = new_name.replace("-instruct", "-Inst")
        new_name = new_name.replace("qwen", "Qwen")
        new_name = new_name.replace("-python", "")
        new_name = new_name.replace("coder", "Coder")
        new_name = new_name.charAt(0).toUpperCase() + new_name.slice(1);
        return new_name
    }

    function fetchJSONData(models) {
        fetch("./data.json")
            .then((res) => {
                if (!res.ok) {
                    throw new Error
                        (`HTTP error! Status: ${res.status}`);
                }
                return res.json();
            })
            .then((data) => {
                var chart = draw_chart(models, data);
                var select = document.getElementById("modelSelection");
                for (var i = 0; i < data.length; i++) {
                    var option = document.createElement("option");
                    option.text = map_id_to_name(data[i].name);
                    option.value = data[i].name;
                    select.add(option);
                    // add event listener to update chart when selection changes
                    select.addEventListener('change', function() {
                        for (var i = 0; i < select.options.length; i++) {
                            if (select.options[i].selected) {
                                if (display_model.includes(select.options[i].value)) {
                                    display_model = display_model.filter(e => e !== select.options[i].value);
                                    remove_model_chart(select.options[i].value, chart);
                                    // clear selection
                                    select.options[i].selected = false;
                                } else {
                                    var color = randomColor({format: 'rgba', alpha:1});
                                    console.log(color);
                                    display_model.push(select.options[i].value);
                                    add_model_chart(select.options[i].value, chart, [data[i].humaneval, data[i].EvoEval_difficult, data[i].EvoEval_creative,
                                                                                    data[i].EvoEval_subtle, data[i].EvoEval_combine, data[i].EvoEval_tool_use,
                                                                                    data[i].EvoEval_verbose, data[i].EvoEval_concise], color);
                                    // clear selection
                                    select.options[i].selected = false;
                                }
                            }
                        }
                    });
                }
            })
            .catch((error) =>
                   console.error("Unable to fetch data:", error));
    }

    function add_model_chart(model, chart, newData, color) {
        chart.data.datasets.push({
            label: map_id_to_name(model),
            data: newData,
            fill: false,
            borderColor: color
        });
        chart.update();
    }

    function remove_model_chart(model, chart) {
        chart.data.datasets = chart.data.datasets.filter(e => e.label !== map_id_to_name(model));
        chart.update();
    }

    function draw_chart(models, model_data) {
      var ctx = document.getElementById('myChart');

      var dataset_labels = ['HumanEval', 'Difficult', 'Creative', 'Subtle', 'Combine', 'Tool Use', 'Verbose', 'Concise'];
      var graph_data = []
      for (var i = 0; i < model_data.length; i++) {
          if (models.includes(model_data[i].name)) {
              var color = randomColor({format: 'rgba', alpha:1});
              graph_data.push(
                  {label: map_id_to_name(model_data[i].name),
                   data:  [model_data[i].humaneval, model_data[i].EvoEval_difficult, model_data[i].EvoEval_creative,
                           model_data[i].EvoEval_subtle, model_data[i].EvoEval_combine, model_data[i].EvoEval_tool_use,
                           model_data[i].EvoEval_verbose, model_data[i].EvoEval_concise],
                   fill: false,
                   borderColor: color
                  });
          }
      }

      var data = {
      labels: dataset_labels,
      datasets: graph_data
    };

      var chart = new Chart(ctx, {
       type: 'radar',
      data: data,
      options: {
        elements: {
          line: {
            borderWidth: 3
          }
        },
        scales: {
            r: {
                suggestedMin: 0.2,
                suggestedMax: 1,
                angleLines: {
                  color: 'red'
                },
                grid: {
                  color: '#8e7cc3'
                },
                ticks: {
                  color: '#8e7cc3'
                }
            }
        },
        plugins: {
            legend: {
                labels: {
                    font: {
                        size: 12,
                        family: 'Roboto Condensed'
                    }
                }
            }
        }
      }
      });
      return chart;
        }
</script>



<div id="content" class="container-fluid d-flex flex-column align-items-center gap-3">
  <h3 class="text-nowrap mt-5"> 🔮 Visualization 🔮 </h3>
      <p>
          Use the visualization tool to compare specific LLM performance on EvoEval. <br>
          Select a model from the dropdown to add or remove it from the radar chart.
      </p>
  <table width="45%">
      <td width="5%" style="background-color: #FFFFFF">
          <p> Model Selection </p>
      <select size="20" id="modelSelection" > </select>
      </td>
      <td width="95%" style="background-color: #FFFFFF"><div class="container"> <canvas id="myChart"></canvas>
   </div> </td>
  </table>
</div>

</body>
</html>