Skip to content

Commit 692981b

Browse files
eric-zqwangeric-zqwang
committed
add detailed per-model page
1 parent 434f613 commit 692981b

File tree

4 files changed

+355
-39
lines changed

4 files changed

+355
-39
lines changed

‎detailed-model-page.html

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Detailed Model Radar Charts</title>
7+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
8+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9+
<style>
10+
body {
11+
background-color: #f5f5f5;
12+
}
13+
.chart-grid {
14+
display: grid;
15+
grid-template-columns: repeat(3, 1fr);
16+
gap: 20px;
17+
margin-top: 20px;
18+
}
19+
.chart-container {
20+
background-color: white;
21+
border-radius: 8px;
22+
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
23+
padding: 15px;
24+
transition: transform 0.3s ease;
25+
}
26+
.chart-container:hover {
27+
transform: translateY(-5px);
28+
}
29+
.title {
30+
margin-bottom: 30px;
31+
}
32+
.model-select-container {
33+
display: flex;
34+
align-items: center;
35+
justify-content: center;
36+
margin-bottom: 20px;
37+
}
38+
.model-select-container .label {
39+
margin-right: 10px;
40+
margin-bottom: 0;
41+
white-space: nowrap;
42+
}
43+
.model-select-container .select {
44+
width: 250px;
45+
}
46+
@media screen and (max-width: 1023px) {
47+
.chart-grid {
48+
grid-template-columns: repeat(2, 1fr);
49+
}
50+
}
51+
@media screen and (max-width: 767px) {
52+
.chart-grid {
53+
grid-template-columns: 1fr;
54+
}
55+
}
56+
</style>
57+
</head>
58+
<body>
59+
<section class="section">
60+
<div class="container">
61+
<h1 class="title is-2 has-text-centered">Detailed Model Analysis</h1>
62+
<div class="model-select-container">
63+
<label class="label" for="model-select">Select Model</label>
64+
<div class="select">
65+
<select id="model-select">
66+
<!-- Options will be populated dynamically -->
67+
</select>
68+
</div>
69+
</div>
70+
<div id="radar-charts-container" class="chart-grid"></div>
71+
<div class="has-text-centered mt-6">
72+
<a href="index.html" class="button is-link">Back to Main Chart</a>
73+
</div>
74+
</div>
75+
</section>
76+
<script src="static/js/detailed-script.js"></script>
77+
</body>
78+
</html>

‎index.html

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -349,46 +349,49 @@ <h2 class="title is-3">Per-dimension Statistics</h2>
349349
</section>
350350

351351
<!------------------------------------------------ Radar Plot -------------------------------------------------------------------->
352-
<section class="section">
353-
<div class="container">
354-
<h4 class="title is-3 has-text-centered">
355-
Breakdown Model Analysis
356-
</h4>
357-
<div class="columns is-centered">
358-
<div class="column is-four-fifths">
359-
<div class="field is-grouped is-grouped-centered">
360-
<div class="control" style="width: 250px;">
361-
<label class="label" for="dimension-select">Comparison Dimension</label>
362-
<div class="select is-fullwidth">
363-
<select id="dimension-select">
364-
<option value="skills">Skills</option>
365-
<option value="input_format">Input Format</option>
366-
<option value="output_format">Output Format</option>
367-
<option value="input_num">Input Number</option>
368-
<option value="app">Application</option>
369-
</select>
370-
</div>
352+
<section class="section">
353+
<div class="container">
354+
<h4 class="title is-3 has-text-centered">
355+
Breakdown Model Analysis
356+
</h4>
357+
<div class="columns is-centered">
358+
<div class="column is-four-fifths">
359+
<div class="field is-grouped is-grouped-centered">
360+
<div class="control" style="width: 250px;">
361+
<label class="label" for="dimension-select">Comparison Dimension</label>
362+
<div class="select is-fullwidth">
363+
<select id="dimension-select">
364+
<option value="skills">Skills</option>
365+
<option value="input_format">Input Format</option>
366+
<option value="output_format">Output Format</option>
367+
<option value="input_num">Input Number</option>
368+
<option value="app">Application</option>
369+
</select>
371370
</div>
372-
<div class="control" style="width: 250px;">
373-
<label class="label" for="model-set-select">Model Set</label>
374-
<div class="select is-fullwidth">
375-
<select id="model-set-select">
376-
<option value="all_flagship"> Flagship models</option>
377-
<option value="all_efficiency"> Efficiency models</option>
378-
<option value="all">All models</option>
379-
<option value="prop_flagship">Proprietary Flagship models</option>
380-
<option value="prop_efficiency">Proprietary Efficiency models</option>
381-
<option value="open_source_flagship">Open-source Flagship models</option>
382-
<option value="open_source_efficiency">Open-source Efficiency models</option>
383-
</select>
384-
</div>
371+
</div>
372+
<div class="control" style="width: 250px;">
373+
<label class="label" for="model-set-select">Model Set</label>
374+
<div class="select is-fullwidth">
375+
<select id="model-set-select">
376+
<option value="all_flagship"> Flagship models</option>
377+
<option value="all_efficiency"> Efficiency models</option>
378+
<option value="all">All models</option>
379+
<option value="prop_flagship">Proprietary Flagship models</option>
380+
<option value="prop_efficiency">Proprietary Efficiency models</option>
381+
<option value="open_source_flagship">Open-source Flagship models</option>
382+
<option value="open_source_efficiency">Open-source Efficiency models</option>
383+
</select>
385384
</div>
386385
</div>
387-
<canvas id="radarChart"></canvas>
388386
</div>
387+
<div class="has-text-centered mt-4">
388+
<a href="detailed-model-page.html" class="button is-link">Detailed Per-Model Page</a>
389+
</div>
390+
<canvas id="radarChart"></canvas>
389391
</div>
390392
</div>
391-
</section>
393+
</div>
394+
</section>
392395

393396
<!-- RESULTS SECTION -->
394397
<section class="hero is-light is-small">

‎static/js/detailed-script.js

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
// Model name mapping
2+
const modelNameMapping = {
3+
'GPT-4o (0513)': 'GPT_4o',
4+
'Claude-3.5-Sonnet': 'Claude_3.5',
5+
'Gemini-1.5-Pro-002': 'Gemini_1.5_pro_002',
6+
'Gemini-1.5-Flash-002': 'Gemini_1.5_flash_002',
7+
'GPT-4O Mini': 'GPT_4o_mini',
8+
'Qwen2-VL-72B': 'Qwen2_VL_72B',
9+
'InternVL2-Llama3-76B': 'InternVL2_76B',
10+
'LLaVA-OneVision-72B': 'llava_onevision_72B',
11+
'Qwen2-VL-7B': 'Qwen2_VL_7B',
12+
'Pixtral 12B': 'Pixtral_12B',
13+
'InternVL2-8B': 'InternVL2_8B',
14+
'Phi-3.5-Vision': 'Phi-3.5-vision',
15+
'MiniCPM-V2.6': 'MiniCPM_v2.6',
16+
'LLaVA-OneVision-7B': 'llava_onevision_7B',
17+
'Llama-3.2-11B': 'Llama_3_2_11B',
18+
'Idefics3-8B-Llama3': 'Idefics3',
19+
};
20+
21+
// Model order (desired display order)
22+
const modelOrder = [
23+
'GPT-4o (0513)',
24+
'Claude-3.5-Sonnet',
25+
'Gemini-1.5-Pro-002',
26+
'Gemini-1.5-Flash-002',
27+
'GPT-4O Mini',
28+
'Qwen2-VL-72B',
29+
'InternVL2-Llama3-76B',
30+
'LLaVA-OneVision-72B',
31+
'Qwen2-VL-7B',
32+
'Pixtral 12B',
33+
'InternVL2-8B',
34+
'Phi-3.5-Vision',
35+
'MiniCPM-V2.6',
36+
'LLaVA-OneVision-7B',
37+
'Llama-3.2-11B',
38+
'Idefics3-8B-Llama3',
39+
];
40+
41+
// Define a consistent color mapping for models
42+
const modelColorMapping = {
43+
'GPT-4o (0513)': 'rgba(255, 99, 132, 0.6)',
44+
'Claude-3.5-Sonnet': 'rgba(54, 162, 235, 0.6)',
45+
'Gemini-1.5-Pro-002': 'rgba(75, 192, 192, 0.6)',
46+
'Gemini-1.5-Flash-002': 'rgba(153, 102, 255, 0.6)',
47+
'GPT-4O Mini': 'rgba(255, 159, 64, 0.6)',
48+
'Qwen2-VL-72B': 'rgba(255, 205, 86, 0.6)',
49+
'InternVL2-Llama3-76B': 'rgba(201, 203, 207, 0.6)',
50+
'LLaVA-OneVision-72B': 'rgba(140, 82, 255, 0.6)',
51+
'Qwen2-VL-7B': 'rgba(255, 87, 51, 0.6)',
52+
'Pixtral 12B': 'rgba(220, 220, 220, 0.6)',
53+
'InternVL2-8B': 'rgba(52, 152, 219, 0.6)',
54+
'Phi-3.5-Vision': 'rgba(46, 204, 113, 0.6)',
55+
'MiniCPM-V2.6': 'rgba(230, 126, 34, 0.6)',
56+
'LLaVA-OneVision-7B': 'rgba(231, 76, 60, 0.6)',
57+
'Llama-3.2-11B': 'rgba(52, 73, 94, 0.6)',
58+
'Idefics3-8B-Llama3': 'rgba(241, 196, 15, 0.6)',
59+
};
60+
61+
// Dimensions for the radar charts
62+
const dimensions = ['skills', 'input_format', 'output_format', 'input_num', 'app'];
63+
64+
let globalData;
65+
let chartInstances = [];
66+
67+
// Fetch and load JSON data
68+
fetch('./static/data/all_model_keywords_stats.json')
69+
.then(response => response.json())
70+
.then(data => {
71+
globalData = data;
72+
73+
// Populate model select options
74+
const modelSelect = document.getElementById('model-select');
75+
modelOrder.forEach(modelName => {
76+
const option = document.createElement('option');
77+
option.value = modelName;
78+
option.textContent = modelName;
79+
modelSelect.appendChild(option);
80+
});
81+
82+
// Add event listener for model selection change
83+
modelSelect.addEventListener('change', updateCharts);
84+
85+
// Initial chart creation
86+
updateCharts();
87+
});
88+
89+
function updateCharts() {
90+
const selectedModel = document.getElementById('model-select').value;
91+
const containerElement = document.getElementById('radar-charts-container');
92+
93+
// Clear existing charts
94+
containerElement.innerHTML = '';
95+
chartInstances.forEach(chart => chart.destroy());
96+
chartInstances = [];
97+
98+
// Create a chart for each dimension
99+
dimensions.forEach(dimension => {
100+
const chartContainer = document.createElement('div');
101+
chartContainer.className = 'chart-container';
102+
103+
const canvas = document.createElement('canvas');
104+
chartContainer.appendChild(canvas);
105+
containerElement.appendChild(chartContainer);
106+
107+
const radarData = prepareRadarData(globalData, selectedModel, dimension);
108+
const chart = createRadarChart(canvas, radarData, dimension);
109+
chartInstances.push(chart);
110+
});
111+
}
112+
113+
function prepareRadarData(data, modelName, dimensionKey) {
114+
const radarData = {
115+
labels: [],
116+
datasets: []
117+
};
118+
119+
const dataModelName = modelNameMapping[modelName];
120+
const modelData = data[dataModelName]?.[dimensionKey] || {};
121+
122+
radarData.labels = Object.keys(modelData).sort();
123+
124+
// Normalize the data to 0-1 range if necessary
125+
const maxValue = Math.max(...radarData.labels.map(field => modelData[field]?.average_score || 0));
126+
const normalizeValue = (value) => maxValue > 1 ? value / maxValue : value;
127+
128+
const dataset = {
129+
label: modelName,
130+
data: radarData.labels.map(field => normalizeValue(modelData[field]?.average_score || 0)),
131+
fill: true,
132+
borderColor: modelColorMapping[modelName],
133+
backgroundColor: modelColorMapping[modelName].replace('0.6', '0.2')
134+
};
135+
136+
radarData.datasets.push(dataset);
137+
138+
return radarData;
139+
}
140+
141+
142+
function createRadarChart(canvas, radarData, dimension) {
143+
return new Chart(canvas.getContext('2d'), {
144+
type: 'radar',
145+
data: radarData,
146+
options: {
147+
responsive: true,
148+
maintainAspectRatio: false,
149+
scales: {
150+
r: {
151+
beginAtZero: true,
152+
min: 0,
153+
max: 1,
154+
ticks: {
155+
stepSize: 0.2,
156+
font: {
157+
size: 10
158+
}
159+
},
160+
pointLabels: {
161+
font: {
162+
size: 10
163+
},
164+
callback: function(label) {
165+
const words = label.split(' ');
166+
const lines = [];
167+
let currentLine = '';
168+
169+
words.forEach(word => {
170+
if (currentLine.length + word.length <= 10) {
171+
currentLine += (currentLine ? ' ' : '') + word;
172+
} else {
173+
lines.push(currentLine);
174+
currentLine = word;
175+
}
176+
});
177+
if (currentLine) {
178+
lines.push(currentLine);
179+
}
180+
return lines;
181+
}
182+
}
183+
}
184+
},
185+
plugins: {
186+
legend: {
187+
display: false
188+
},
189+
title: {
190+
display: true,
191+
text: dimension.charAt(0).toUpperCase() + dimension.slice(1).replace('_', ' '),
192+
font: {
193+
size: 16,
194+
weight: 'bold'
195+
}
196+
}
197+
}
198+
}
199+
});
200+
}

0 commit comments

Comments
 (0)