Hugging Face's logo

Spaces:
Fancy-yousa
/
FeatureSelect-Methods-Leaderboard
Sleeping

App Files Community
FeatureSelect-Methods-Leaderboard / AutoFS /Webapp /templates /index.html
Fancy-yousa's picture
Fancy-yousa
Upload 18 files
94e0fc9 verified
raw
history blame contribute delete
20.7 kB
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AutoFS Leaderboard</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
:root {
--primary-color: #3498db;
--secondary-color: #2c3e50;
--background-color: #f8f9fa;
--text-color: #333;
--border-color: #dee2e6;
--hover-color: #f1f1f1;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px;
background-color: var(--background-color);
color: var(--text-color);
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
border-bottom: 2px solid var(--primary-color);
padding-bottom: 10px;
}
h1 {
margin: 0;
color: var(--secondary-color);
}
.controls {
display: flex;
gap: 10px;
align-items: center;
}
select {
padding: 8px 12px;
border: 1px solid var(--border-color);
border-radius: 4px;
font-size: 14px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
th, td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid var(--border-color);
}
th {
background-color: var(--secondary-color);
color: white;
cursor: pointer;
user-select: none;
position: sticky;
top: 0;
}
th:hover {
background-color: #34495e;
}
th .arrow {
font-size: 10px;
margin-left: 5px;
opacity: 0.7;
}
tr:hover {
background-color: var(--hover-color);
}
.score-bar {
height: 6px;
background-color: #e9ecef;
border-radius: 3px;
overflow: hidden;
margin-top: 5px;
}
.score-fill {
height: 100%;
background-color: var(--primary-color);
}
.features-cell {
max-width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: #666;
font-size: 0.9em;
cursor: pointer;
}
.features-cell:hover {
text-decoration: underline;
color: var(--primary-color);
}
/* Modal styles */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.modal-content {
background-color: white;
margin: 10% auto;
padding: 20px;
border-radius: 8px;
width: 50%;
max-width: 600px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover {
color: black;
}
.feature-tag {
display: inline-block;
background-color: #e1ecf4;
color: #2c3e50;
padding: 4px 8px;
border-radius: 4px;
margin: 2px;
font-size: 0.9em;
}
.loading {
text-align: center;
padding: 20px;
color: #666;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>🏆 AutoFS Leaderboard</h1>
<div class="controls">
<label for="dataset-select">Dataset:</label>
<select id="dataset-select">
<option value="" disabled selected>Loading...</option>
</select>
</div>
</header>
<div id="loading-indicator" class="loading" style="display: none;">Loading data...</div>
<div class="chart-controls" style="text-align:center; margin-top: 20px; margin-bottom: 15px;">
<label style="margin-right:15px; font-weight:bold;">View Mode:</label>
<input type="radio" id="view-overall" name="chart-view" value="overall" checked onchange="updateView()">
<label for="view-overall" style="margin-right:10px;">Overall (Mean)</label>
<input type="radio" id="view-classifiers-f1" name="chart-view" value="classifiers-f1" onchange="updateView()">
<label for="view-classifiers-f1" style="margin-right:10px;">F1 by Classifier</label>
<input type="radio" id="view-classifiers-auc" name="chart-view" value="classifiers-auc" onchange="updateView()">
<label for="view-classifiers-auc">AUC by Classifier</label>
</div>
<div class="charts-container" style="display: flex; gap: 20px; margin-bottom: 20px;">
<div style="flex: 1; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<canvas id="scoreChart"></canvas>
</div>
<div style="flex: 1; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<canvas id="timeChart"></canvas>
</div>
</div>
<table id="result-table">
<thead>
<!-- Headers generated dynamically -->
</thead>
<tbody>
<!-- Data rows will be populated here -->
</tbody>
</table>
</div>
<!-- Modal for details -->
<div id="details-modal" class="modal">
<div class="modal-content">
<span class="close">&times;</span>
<h2 id="modal-title">Algorithm Details</h2>
<div id="modal-body"></div>
</div>
</div>
<script>
let currentResults = [];
let sortDirection = 1; // 1 for asc, -1 for desc
let lastSortKey = '';
const VIEW_CONFIG = {
'overall': [
{ key: 'mean_f1', label: 'Mean F1' },
{ key: 'mean_auc', label: 'Mean AUC' }
],
'classifiers-f1': [
{ key: 'metrics.nb.f1', label: 'NB F1' },
{ key: 'metrics.svm.f1', label: 'SVM F1' },
{ key: 'metrics.rf.f1', label: 'RF F1' }
],
'classifiers-auc': [
{ key: 'metrics.nb.auc', label: 'NB AUC' },
{ key: 'metrics.svm.auc', label: 'SVM AUC' },
{ key: 'metrics.rf.auc', label: 'RF AUC' }
]
};
const tableHead = document.querySelector("#result-table thead");
const tableBody = document.querySelector("#result-table tbody");
const datasetSelect = document.getElementById("dataset-select");
const loadingIndicator = document.getElementById("loading-indicator");
const modal = document.getElementById("details-modal");
const closeModal = document.querySelector(".close");
// Close modal
closeModal.onclick = () => modal.style.display = "none";
window.onclick = (event) => {
if (event.target == modal) modal.style.display = "none";
}
// Global chart instances
let scoreChartInstance = null;
let timeChartInstance = null;
function updateCharts(results) {
if (!Array.isArray(results) || results.length === 0) return;
// Limit to top 15 for readability
const topResults = results.slice(0, 15);
const labels = topResults.map(r => r.algorithm || 'Unknown');
const times = topResults.map(r => r.time || 0);
const viewMode = document.querySelector('input[name="chart-view"]:checked').value;
let datasets = [];
if (viewMode === 'overall') {
const f1Scores = topResults.map(r => r.mean_f1 || 0);
const aucScores = topResults.map(r => r.mean_auc || 0);
datasets = [
{
label: 'Mean F1',
data: f1Scores,
backgroundColor: 'rgba(52, 152, 219, 0.7)',
borderColor: 'rgba(52, 152, 219, 1)',
borderWidth: 1
},
{
label: 'Mean AUC',
data: aucScores,
backgroundColor: 'rgba(46, 204, 113, 0.7)',
borderColor: 'rgba(46, 204, 113, 1)',
borderWidth: 1
}
];
} else if (viewMode === 'classifiers-f1') {
const classifiers = ['nb', 'svm', 'rf'];
const colors = ['rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)'];
const borderColors = ['rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)'];
datasets = classifiers.map((cls, idx) => ({
label: cls.toUpperCase() + ' F1',
data: topResults.map(r => (r.metrics && r.metrics[cls]) ? r.metrics[cls].f1 : 0),
backgroundColor: colors[idx],
borderColor: borderColors[idx],
borderWidth: 1
}));
} else if (viewMode === 'classifiers-auc') {
const classifiers = ['nb', 'svm', 'rf'];
const colors = ['rgba(255, 206, 86, 0.5)', 'rgba(75, 192, 192, 0.5)', 'rgba(153, 102, 255, 0.5)'];
const borderColors = ['rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)'];
datasets = classifiers.map((cls, idx) => ({
label: cls.toUpperCase() + ' AUC',
data: topResults.map(r => (r.metrics && r.metrics[cls]) ? r.metrics[cls].auc : 0),
backgroundColor: colors[idx],
borderColor: borderColors[idx],
borderWidth: 1
}));
}
// Score Chart
const scoreCtx = document.getElementById('scoreChart').getContext('2d');
if (scoreChartInstance) scoreChartInstance.destroy();
scoreChartInstance = new Chart(scoreCtx, {
type: 'bar',
data: {
labels: labels,
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: {
display: true,
text: viewMode === 'overall' ? 'Top Algorithms Performance (Mean)' :
(viewMode === 'classifiers-f1' ? 'F1-Score by Classifier' : 'AUC by Classifier')
}
},
scales: {
y: {
beginAtZero: false,
// min: 0.8
}
}
}
});
// Time Chart
const timeCtx = document.getElementById('timeChart').getContext('2d');
if (timeChartInstance) timeChartInstance.destroy();
timeChartInstance = new Chart(timeCtx, {
type: 'line',
data: {
labels: labels,
datasets: [{
label: 'Time (s)',
data: times,
backgroundColor: 'rgba(231, 76, 60, 0.2)',
borderColor: 'rgba(231, 76, 60, 1)',
borderWidth: 2,
tension: 0.3,
fill: true
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: { display: true, text: 'Execution Time' }
},
scales: {
y: { beginAtZero: true }
}
}
});
}
function showDetails(result) {
const title = document.getElementById("modal-title");
const body = document.getElementById("modal-body");
title.textContent = `${result.algorithm} Details`;
let featuresHtml = result.selected_features.map(f =>
`<span class="feature-tag">${f}</span>`
).join('');
let metricsHtml = '<div style="margin-top: 15px;"><h3>Metrics Breakdown</h3>';
for (const [clf, m] of Object.entries(result.metrics || {})) {
metricsHtml += `
<div style="margin-bottom: 10px;">
<strong>${clf.toUpperCase()}:</strong>
F1: ${m.f1.toFixed(4)}, AUC: ${m.auc.toFixed(4)}
</div>`;
}
metricsHtml += '</div>';
body.innerHTML = `
<p><strong>Time:</strong> ${result.time.toFixed(4)}s</p>
<p><strong>Num Features:</strong> ${result.num_features}</p>
<p><strong>Selected Features (${result.selected_features.length}):</strong></p>
<div>${featuresHtml}</div>
${metricsHtml}
`;
modal.style.display = "block";
}
function getValue(obj, path) {
if (!path) return undefined;
return path.split('.').reduce((acc, part) => (acc && acc[part] !== undefined) ? acc[part] : undefined, obj);
}
function safeFixed(value, digits=4) {
if (value === undefined || value === null) return 'N/A';
return Number(value).toFixed(digits);
}
function renderTableHeader() {
const viewMode = document.querySelector('input[name="chart-view"]:checked').value;
const dynamicCols = VIEW_CONFIG[viewMode] || VIEW_CONFIG['overall'];
let html = '<tr>';
html += '<th data-key="rank" style="width: 60px;">#</th>';
html += '<th data-key="algorithm">Algorithm <span class="arrow">↕</span></th>';
dynamicCols.forEach(col => {
html += `<th data-key="${col.key}">${col.label} <span class="arrow">↕</span></th>`;
});
html += '<th data-key="time">Time (s) <span class="arrow">↕</span></th>';
html += '<th data-key="selected_features">Selected Features</th>';
html += '</tr>';
tableHead.innerHTML = html;
// Re-attach sort listeners
tableHead.querySelectorAll('th[data-key]').forEach(th => {
th.addEventListener('click', () => sortTable(th.dataset.key));
});
}
function updateTable(results) {
tableBody.innerHTML = "";
// Safety check
if (!Array.isArray(results)) {
tableBody.innerHTML = '<tr><td colspan="10" style="text-align:center; color:red;">Error: Invalid data format</td></tr>';
return;
}
if (results.length === 0) {
tableBody.innerHTML = '<tr><td colspan="10" style="text-align:center;">No results found</td></tr>';
return;
}
const viewMode = document.querySelector('input[name="chart-view"]:checked').value;
const dynamicCols = VIEW_CONFIG[viewMode] || VIEW_CONFIG['overall'];
results.forEach((r, idx) => {
const row = document.createElement("tr");
// Format features for preview
const featurePreview = (r.selected_features && Array.isArray(r.selected_features))
? r.selected_features.slice(0, 5).join(', ') + (r.selected_features.length > 5 ? '...' : '')
: 'N/A';
let html = `<td>${idx + 1}</td>`;
html += `<td><strong>${r.algorithm || 'Unknown'}</strong></td>`;
dynamicCols.forEach(col => {
const val = getValue(r, col.key);
const score = val !== undefined ? val : 0;
html += `
<td>
${safeFixed(val)}
<div class="score-bar"><div class="score-fill" style="width: ${Math.min(score * 100, 100)}%"></div></div>
</td>`;
});
const time = r.time || 0;
html += `<td>${safeFixed(time, 2)}</td>`;
html += `
<td class="features-cell" onclick="showDetails(currentResults[${idx}])" title="Click for details">
${featurePreview} <span style="font-size:0.8em; color:#999;">(Click for details)</span>
</td>`;
row.innerHTML = html;
tableBody.appendChild(row);
});
}
function sortTable(key) {
if (lastSortKey === key) {
sortDirection *= -1;
} else {
sortDirection = key === 'time' || key === 'rank' ? 1 : -1;
lastSortKey = key;
}
// We don't call renderTableHeader here because it resets the sort indicators if we rebuild entirely.
// Instead, we just update the arrows.
document.querySelectorAll('th .arrow').forEach(span => span.textContent = '↕');
const activeHeader = document.querySelector(`th[data-key="${key}"] .arrow`);
if (activeHeader) activeHeader.textContent = sortDirection === 1 ? '↑' : '↓';
const sorted = [...currentResults].sort((a, b) => {
let valA = getValue(a, key);
let valB = getValue(b, key);
if (key === 'rank') return 0;
if (valA === undefined) valA = -Infinity;
if (valB === undefined) valB = -Infinity;
if (valA < valB) return -1 * sortDirection;
if (valA > valB) return 1 * sortDirection;
return 0;
});
// Don't update currentResults global if it breaks things, but here it's fine.
// Actually, let's keep currentResults as the master list?
// No, currentResults should be the sorted list for consistent subsequent sorts.
currentResults = sorted;
updateTable(sorted);
}
function updateView() {
renderTableHeader();
updateTable(currentResults);
updateCharts(currentResults);
}
function fetchResults(dataset) {
loadingIndicator.style.display = 'block';
tableBody.innerHTML = '';
console.log("Fetching results for:", dataset);
fetch(`/api/results?dataset=${dataset}`)
.then(res => {
if (!res.ok) throw new Error("Network response was not ok");
return res.json();
})
.then(data => {
console.log("Data received:", data);
currentResults = data;
updateView();
loadingIndicator.style.display = 'none';
})
.catch(err => {
console.error("Error fetching results:", err);
loadingIndicator.textContent = "Error loading data. Make sure the server is running.";
});
}
// Initialize
document.addEventListener("DOMContentLoaded", () => {
// Setup sort listeners
document.querySelectorAll('th[data-key]').forEach(th => {
th.addEventListener('click', () => sortTable(th.dataset.key));
});
// Load datasets
fetch("/api/datasets")
.then(res => res.json())
.then(datasets => {
datasetSelect.innerHTML = "";
datasets.forEach(ds => {
const option = document.createElement("option");
option.value = ds;
option.textContent = ds;
datasetSelect.appendChild(option);
});
if (datasets.includes("Authorship")) {
datasetSelect.value = "Authorship";
fetchResults("Authorship");
} else if (datasets.length > 0) {
datasetSelect.value = datasets[0];
fetchResults(datasets[0]);
}
})
.catch(err => {
console.error("Error fetching datasets:", err);
datasetSelect.innerHTML = "<option>Error loading datasets</option>";
});
datasetSelect.addEventListener('change', (e) => {
fetchResults(e.target.value);
});
});
</script>
</body>
</html>