Skip to content

Commit

Permalink
add model comparsion for two models
Browse files Browse the repository at this point in the history
  • Loading branch information
@eric-zqwang
eric-zqwang committed Oct 14, 2024
1 parent 5d03486 commit 4c3901c
Show file tree
Hide file tree
Showing 3 changed files with 137 additions and 53 deletions.
82 changes: 57 additions & 25 deletions detailed-model-page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,64 +12,96 @@
}
.chart-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
margin-top: 30px;
}
.chart-container {
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 15px;
transition: transform 0.3s ease;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
padding: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 500px; /* Increased height */
}
.chart-container:hover {
transform: translateY(-5px);
box-shadow: 0 6px 25px rgba(0,0,0,0.15);
}
.title {
margin-bottom: 30px;
margin-bottom: 40px;
font-size: 2.5rem;
}
.model-select-container {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 20px;
align-items: center;
margin-bottom: 30px;
gap: 20px;
}
.model-select-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.model-select-container .label {
margin-right: 10px;
margin-bottom: 0;
margin-bottom: 10px;
white-space: nowrap;
font-size: 1.1rem;
text-align: center;
}
.model-select-container .select {
width: 250px;
width: 280px;
}
@media screen and (max-width: 1023px) {
.chart-grid {
grid-template-columns: repeat(2, 1fr);
}
.model-select-container .select select {
font-size: 1.1rem;
}
@media screen and (max-width: 767px) {
@media screen and (max-width: 1215px) {
.chart-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 768px) {
.model-select-container {
flex-direction: column;
align-items: center;
}
.model-select-wrapper {
width: 100%;
}
.model-select-container .select {
width: 100%;
}
}
</style>
</head>
<body>
<section class="section">
<div class="container">
<div class="container is-max-widescreen">
<h1 class="title is-2 has-text-centered">Detailed Model Analysis</h1>
<div class="model-select-container">
<label class="label" for="model-select">Select Model</label>
<div class="select">
<select id="model-select">
<!-- Options will be populated dynamically -->
</select>
<div class="model-select-wrapper">
<label class="label" for="model-select-1">Select Model 1</label>
<div class="select is-medium">
<select id="model-select-1">
<!-- Options will be populated dynamically -->
</select>
</div>
</div>
<div class="model-select-wrapper">
<label class="label" for="model-select-2">Select Model 2 (Optional)</label>
<div class="select is-medium">
<select id="model-select-2">
<option value="">None</option>
<!-- Options will be populated dynamically -->
</select>
</div>
</div>
</div>
<div id="radar-charts-container" class="chart-grid"></div>
<div class="has-text-centered mt-6">
<a href="index.html" class="button is-link">Back to Main Chart</a>
<a href="index.html" class="button is-link is-medium">Back to Main Chart</a>
</div>
</div>
</section>
Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -388,7 +388,7 @@ <h4 class="title is-3 has-text-centered">
</div>
</div>
<div class="has-text-centered mt-4">
<a href="detailed-model-page.html" class="button is-link">Detailed Per-Model Page</a>
<a href="detailed-model-page.html" class="button is-link">Detailed Model Report</a>
</div>
<canvas id="radarChart"></canvas>
</div>
Expand Down
106 changes: 79 additions & 27 deletions static/js/detailed-script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,23 +71,32 @@ fetch('./static/data/all_model_keywords_stats.json')
globalData = data;

// Populate model select options
const modelSelect = document.getElementById('model-select');
const modelSelect1 = document.getElementById('model-select-1');
const modelSelect2 = document.getElementById('model-select-2');

modelOrder.forEach(modelName => {
const option = document.createElement('option');
option.value = modelName;
option.textContent = modelName;
modelSelect.appendChild(option);
const option1 = document.createElement('option');
option1.value = modelName;
option1.textContent = modelName;
modelSelect1.appendChild(option1);

const option2 = document.createElement('option');
option2.value = modelName;
option2.textContent = modelName;
modelSelect2.appendChild(option2);
});

// Add event listener for model selection change
modelSelect.addEventListener('change', updateCharts);
// Add event listeners for model selection changes
modelSelect1.addEventListener('change', updateCharts);
modelSelect2.addEventListener('change', updateCharts);

// Initial chart creation
updateCharts();
});

function updateCharts() {
const selectedModel = document.getElementById('model-select').value;
const selectedModel1 = document.getElementById('model-select-1').value;
const selectedModel2 = document.getElementById('model-select-2').value;
const containerElement = document.getElementById('radar-charts-container');

// Clear existing charts
Expand All @@ -104,41 +113,56 @@ function updateCharts() {
chartContainer.appendChild(canvas);
containerElement.appendChild(chartContainer);

const radarData = prepareRadarData(globalData, selectedModel, dimension);
const radarData = prepareRadarData(globalData, selectedModel1, selectedModel2, dimension);
const chart = createRadarChart(canvas, radarData, dimension);
chartInstances.push(chart);
});
}

function prepareRadarData(data, modelName, dimensionKey) {
function prepareRadarData(data, modelName1, modelName2, dimensionKey) {
const radarData = {
labels: [],
datasets: []
};

const dataModelName = modelNameMapping[modelName];
const modelData = data[dataModelName]?.[dimensionKey] || {};
const dataModelName1 = modelNameMapping[modelName1];
const modelData1 = data[dataModelName1]?.[dimensionKey] || {};

radarData.labels = Object.keys(modelData).sort();
radarData.labels = Object.keys(modelData1).sort();

// Normalize the data to 0-1 range if necessary
const maxValue = Math.max(...radarData.labels.map(field => modelData[field]?.average_score || 0));
const normalizeValue = (value) => maxValue > 1 ? value / maxValue : value;
const maxValue1 = Math.max(...radarData.labels.map(field => modelData1[field]?.average_score || 0));
const normalizeValue = (value, maxValue) => maxValue > 1 ? value / maxValue : value;

const dataset = {
label: modelName,
data: radarData.labels.map(field => normalizeValue(modelData[field]?.average_score || 0)),
const dataset1 = {
label: modelName1,
data: radarData.labels.map(field => normalizeValue(modelData1[field]?.average_score || 0, maxValue1)),
fill: true,
borderColor: modelColorMapping[modelName],
backgroundColor: modelColorMapping[modelName].replace('0.6', '0.2')
borderColor: modelColorMapping[modelName1],
backgroundColor: modelColorMapping[modelName1].replace('0.6', '0.2')
};

radarData.datasets.push(dataset);
radarData.datasets.push(dataset1);

if (modelName2 && modelName2 !== "") {
const dataModelName2 = modelNameMapping[modelName2];
const modelData2 = data[dataModelName2]?.[dimensionKey] || {};
const maxValue2 = Math.max(...radarData.labels.map(field => modelData2[field]?.average_score || 0));

const dataset2 = {
label: modelName2,
data: radarData.labels.map(field => normalizeValue(modelData2[field]?.average_score || 0, maxValue2)),
fill: true,
borderColor: modelColorMapping[modelName2],
backgroundColor: modelColorMapping[modelName2].replace('0.6', '0.2')
};

radarData.datasets.push(dataset2);
}

return radarData;
}


function createRadarChart(canvas, radarData, dimension) {
return new Chart(canvas.getContext('2d'), {
type: 'radar',
Expand All @@ -154,20 +178,20 @@ function createRadarChart(canvas, radarData, dimension) {
ticks: {
stepSize: 0.2,
font: {
size: 10
size: 12
}
},
pointLabels: {
font: {
size: 10
size: 14
},
callback: function(label) {
const words = label.split(' ');
const lines = [];
let currentLine = '';

words.forEach(word => {
if (currentLine.length + word.length <= 10) {
if (currentLine.length + word.length <= 15) {
currentLine += (currentLine ? ' ' : '') + word;
} else {
lines.push(currentLine);
Expand All @@ -184,16 +208,44 @@ function createRadarChart(canvas, radarData, dimension) {
},
plugins: {
legend: {
display: false
display: true,
position: 'top',
labels: {
font: {
size: 14
},
padding: 20
}
},
title: {
display: true,
text: dimension.charAt(0).toUpperCase() + dimension.slice(1).replace('_', ' '),
font: {
size: 16,
size: 20,
weight: 'bold'
},
padding: {
top: 10,
bottom: 30
}
},
tooltip: {
bodyFont: {
size: 14
},
titleFont: {
size: 16
}
}
},
elements: {
point: {
radius: 4,
hoverRadius: 6
},
line: {
borderWidth: 3
}
}
}
});
Expand Down

0 comments on commit 4c3901c

Please sign in to comment.