diff --git a/detailed-model-page.html b/detailed-model-page.html index fe13a87..33aa815 100644 --- a/detailed-model-page.html +++ b/detailed-model-page.html @@ -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%; + } + }
-
+

Detailed Model Analysis

- -
- +
+ +
+ +
+
+
+ +
+ +
- Back to Main Chart + Back to Main Chart
diff --git a/index.html b/index.html index 8aaada9..8e5e71d 100644 --- a/index.html +++ b/index.html @@ -388,7 +388,7 @@

- Detailed Per-Model Page + Detailed Model Report
diff --git a/static/js/detailed-script.js b/static/js/detailed-script.js index 8892b8d..0905dcc 100644 --- a/static/js/detailed-script.js +++ b/static/js/detailed-script.js @@ -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 @@ -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', @@ -154,12 +178,12 @@ 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(' '); @@ -167,7 +191,7 @@ function createRadarChart(canvas, radarData, dimension) { let currentLine = ''; words.forEach(word => { - if (currentLine.length + word.length <= 10) { + if (currentLine.length + word.length <= 15) { currentLine += (currentLine ? ' ' : '') + word; } else { lines.push(currentLine); @@ -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 + } } } });