File size: 4,482 Bytes
94e0fc9 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Feature Selection Leaderboard</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
table { border-collapse: collapse; width: 100%; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 8px; text-align: center; }
th { cursor: pointer; background-color: #f2f2f2; position: relative; }
th .arrow { font-size: 12px; margin-left: 4px; }
select { padding: 5px; margin-bottom: 10px; }
</style>
</head>
<body>
<h1>Feature Selection Leaderboard</h1>
<label for="dataset-select">Select Dataset:</label>
<select id="dataset-select">
<!-- 这里的 options 会在后端渲染或者 JS 初始化 -->
</select>
<table id="result-table">
<thead>
<tr>
<th data-key="rank">Rank <span class="arrow">↑↓</span></th>
<th data-key="algorithm">Algorithm <span class="arrow">↑↓</span></th>
<th data-key="num_features">Num Features <span class="arrow">↑↓</span></th>
<th data-key="mean_f1">Mean F1 <span class="arrow">↑↓</span></th>
<th data-key="mean_auc">Mean AUC <span class="arrow">↑↓</span></th>
<th data-key="time">Time <span class="arrow">↑↓</span></th>
</tr>
</thead>
<tbody>
<!-- 数据行由 JS 填充 -->
</tbody>
</table>
<script>
// 全局变量存储当前表格数据
let currentResults = [];
// 渲染表格
function updateTable(results) {
const tbody = document.querySelector("#result-table tbody");
tbody.innerHTML = "";
currentResults = results; // 保存全局，用于排序
results.forEach((r, idx) => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${idx + 1}</td>
<td>${r.algorithm}</td>
<td>${r.num_features}</td>
<td>${r.mean_f1.toFixed(4)}</td>
<td>${r.mean_auc.toFixed(4)}</td>
<td>${r.time.toFixed(2)}</td>
`;
tbody.appendChild(row);
});
}
// 获取数据
function fetchResults(dataset) {
console.log("[DEBUG] Fetching dataset:", dataset);
fetch(`/api/results?dataset=${dataset}`)
.then(res => res.json())
.then(data => {
console.log("[DEBUG] Fetched results:", data);
updateTable(data);
})
.catch(err => console.error(err));
}
// 初始化下拉框和默认数据集
document.addEventListener("DOMContentLoaded", () => {
const select = document.getElementById("dataset-select");
// 从后端获取可用数据集列表
fetch("/api/datasets")
.then(res => res.json())
.then(datasets => {
datasets.forEach(ds => {
const option = document.createElement("option");
option.value = ds;
option.textContent = ds;
select.appendChild(option);
});
// 默认加载 Authorship，如果存在
if (datasets.includes("Authorship")) {
select.value = "Authorship";
fetchResults("Authorship");
} else if (datasets.length > 0) {
select.value = datasets[0];
fetchResults(datasets[0]);
}
});
// 绑定选择事件
select.addEventListener("change", () => {
fetchResults(select.value);
});
// 绑定表头点击排序
document.querySelectorAll("#result-table th").forEach(th => {
th.addEventListener("click", () => {
const key = th.dataset.key;
if (!key) return;
sortTable(key);
});
});
});
// 排序函数
let sortAsc = true;
function sortTable(key) {
currentResults.sort((a, b) => {
let valA = a[key], valB = b[key];
// time 值越小越好，其余指标越大越好
if (key === "time") {
return sortAsc ? valA - valB : valB - valA;
} else {
return sortAsc ? valB - valA : valA - valB;
}
});
// 切换排序方向
sortAsc = !sortAsc;
updateTable(currentResults);
}
</script>
</body>
</html>
|