Create script.js

script.js

@@ -0,0 +1,214 @@
+const COL_ORDER = [
+    "Model Name",
+    "WorldScore-Static",
+    "WorldScore-Dynamic",
+    "Camera Control",
+    "Object Control",
+    "Content Alignment",
+    "3D Consistency",
+    "Photometric Consistency",
+    "Style Consistency",
+    "Subjective Quality",
+    "Motion Accuracy",
+    "Motion Magnitude",
+    "Motion Smoothness",
+    "Model Type",
+    "Ability",
+    "Sampled by",
+    "Evaluated by",
+    "Accessibility",
+    "Date",
+  ];
+  
+  // 简单 CSV 解析（你的数据没有带逗号的字段，这样已经够用）
+  function parseCsv(text) {
+    const lines = text.trim().split(/\r?\n/);
+    const header = lines[0].split(",");
+    const rows = lines.slice(1).map((line) => {
+      if (!line.trim()) return null;
+      const parts = line.split(",");
+      const obj = {};
+      header.forEach((h, i) => {
+        obj[h.trim()] = (parts[i] || "").trim();
+      });
+      return obj;
+    }).filter(Boolean);
+    return { header, rows };
+  }
+  
+  function parseMarkdownLink(s) {
+    const m = s.match(/^\[(.*?)\]\((.*?)\)$/);
+    if (m) {
+      return { text: m[1], url: m[2] };
+    }
+    return { text: s, url: null };
+  }
+  
+  function isNumericColumn(colName) {
+    const numericCols = new Set([
+      "WorldScore-Static",
+      "WorldScore-Dynamic",
+      "Camera Control",
+      "Object Control",
+      "Content Alignment",
+      "3D Consistency",
+      "Photometric Consistency",
+      "Style Consistency",
+      "Subjective Quality",
+      "Motion Accuracy",
+      "Motion Magnitude",
+      "Motion Smoothness",
+    ]);
+    return numericCols.has(colName);
+  }
+  
+  function buildTable(rows) {
+    const container = document.getElementById("table-container");
+    container.innerHTML = "";
+  
+    const table = document.createElement("table");
+    table.className = "ws-table";
+  
+    const thead = document.createElement("thead");
+    const headRow = document.createElement("tr");
+  
+    const firstRow = rows[0] || {};
+    const cols = COL_ORDER.filter((c) => c in firstRow);
+  
+    // 表头：全部 sortable
+    cols.forEach((col) => {
+      const th = document.createElement("th");
+      th.textContent = col;
+      th.classList.add("sortable");
+      th.dataset.col = col;
+  
+      // 默认排序列：WorldScore-Static，标记为 desc
+      if (col === "WorldScore-Static") {
+        th.classList.add("desc");
+      }
+      headRow.appendChild(th);
+    });
+  
+    thead.appendChild(headRow);
+    table.appendChild(thead);
+  
+    const tbody = document.createElement("tbody");
+    table.appendChild(tbody);
+    container.appendChild(table);
+  
+    // 内部函数：根据当前 rows 渲染 body
+    function renderBody(data) {
+      tbody.innerHTML = "";
+      data.forEach((row) => {
+        const tr = document.createElement("tr");
+        cols.forEach((col) => {
+          const td = document.createElement("td");
+          const val = row[col] ?? "";
+  
+          if (col === "Model Name") {
+            const { text, url } = parseMarkdownLink(val);
+            if (url) {
+              const a = document.createElement("a");
+              a.href = url;
+              a.target = "_blank";
+              a.rel = "noopener noreferrer";
+              a.textContent = text;
+              td.appendChild(a);
+            } else {
+              td.textContent = text;
+            }
+          } else {
+            td.textContent = val;
+          }
+  
+          tr.appendChild(td);
+        });
+        tbody.appendChild(tr);
+      });
+    }
+  
+    // 当前排序状态
+    let currentSortCol = "WorldScore-Static";
+    let currentAsc = false; // 默认降序
+  
+    // 根据列名和升降序排序，然后渲染
+    function sortAndRender(col, asc) {
+      const sorted = [...rows].sort((a, b) => {
+        const va = a[col] ?? "";
+        const vb = b[col] ?? "";
+  
+        if (isNumericColumn(col)) {
+          const na = parseFloat(va);
+          const nb = parseFloat(vb);
+          if (isNaN(na) && isNaN(nb)) return 0;
+          if (isNaN(na)) return asc ? -1 : 1;
+          if (isNaN(nb)) return asc ? 1 : -1;
+          return asc ? na - nb : nb - na;
+        } else {
+          return asc
+            ? String(va).localeCompare(String(vb))
+            : String(vb).localeCompare(String(va));
+        }
+      });
+  
+      renderBody(sorted);
+  
+      // 更新箭头 class
+      const headers = Array.from(thead.querySelectorAll("th.sortable"));
+      headers.forEach((h) => {
+        h.classList.remove("asc", "desc");
+      });
+      const target = headers.find((h) => h.dataset.col === col);
+      if (target) {
+        target.classList.add(asc ? "asc" : "desc");
+      }
+    }
+  
+    // 初始渲染：WorldScore-Static 降序
+    sortAndRender(currentSortCol, currentAsc);
+  
+    // 给所有表头绑定 click 排序
+    const headers = Array.from(thead.querySelectorAll("th.sortable"));
+    headers.forEach((th) => {
+      th.addEventListener("click", () => {
+        const col = th.dataset.col;
+        if (col === currentSortCol) {
+          currentAsc = !currentAsc; // 同一列就翻转方向
+        } else {
+          currentSortCol = col;
+          currentAsc = true; // 新列默认升序
+        }
+        sortAndRender(currentSortCol, currentAsc);
+      });
+    });
+  }
+  
+  // 入口：加载 CSV，默认在 JS 里先按 WorldScore-Static 降序排一次，然后 buildTable
+  fetch("leaderboard.csv")
+    .then((res) => {
+      if (!res.ok) {
+        throw new Error("HTTP " + res.status);
+      }
+      return res.text();
+    })
+    .then((text) => {
+      const parsed = parseCsv(text);
+      if (!parsed.rows || parsed.rows.length === 0) {
+        document.getElementById("table-container").innerHTML =
+          "<p>No data rows in leaderboard.csv</p>";
+        return;
+      }
+  
+      // 这里的 rows 保留原始字符串形式（包括 [Name](url)）
+      const rows = parsed.rows.slice();
+  
+      // 默认排序逻辑放在 buildTable 内部 sortAndRender 已经做了，
+      // 这里不需要再排序一次，直接丢过去
+      buildTable(rows);
+    })
+    .catch((err) => {
+      console.error("Failed to load CSV:", err);
+      document.getElementById("table-container").innerHTML =
+        "<p style='color:#f97316'>Failed to load leaderboard.csv: " + String(err) + "</p>";
+    });
+