Spaces:

dehezhang2
/

FrameWorker_User_Study

Running

App Files Files Community

dehezhang2 commited on May 11

Commit

4cceebf

verified ·

1 Parent(s): 38dfd92

publish current study stats page

Browse files

Files changed (1) hide show

static/stats.html +169 -0

static/stats.html ADDED Viewed

	@@ -0,0 +1,169 @@

+<!DOCTYPE html>
+<html lang="en"><head><meta charset="utf-8">
+<title>User study stats · FrameWorker</title>
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+<style>
+  :root { --bg:#0f1115; --panel:#161922; --panel-2:#1c2030; --border:#2a2f42;
+            --fg:#e6e8ef; --muted:#8b91a8; --accent:#6aa9ff; --good:#28c76f;
+            --warn:#ff9f43; --bad:#ea5455; }
+  body { margin: 0; background: var(--bg); color: var(--fg);
+    font-family: -apple-system, "Inter", "PingFang SC", sans-serif; }
+  header { padding: 14px 24px; border-bottom: 1px solid var(--border);
+    background: var(--panel); display: flex; gap: 14px; align-items: baseline;
+    flex-wrap: wrap; }
+  header h1 { font-size: 18px; margin: 0; }
+  header .meta { color: var(--muted); font-size: 12px; }
+  main { padding: 18px 24px; max-width: 1100px; margin: 0 auto; }
+  section { background: var(--panel); border: 1px solid var(--border);
+    border-radius: 8px; padding: 16px 18px; margin-bottom: 16px; }
+  h2 { font-size: 15px; margin: 0 0 12px; color: var(--accent); }
+  table { border-collapse: collapse; width: 100%; font-size: 13px; }
+  th, td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; }
+  th { color: var(--muted); font-weight: 600; font-size: 11px;
+    text-transform: uppercase; letter-spacing: 0.5px; }
+  .q-block { background: var(--panel-2); border: 1px solid var(--border);
+    border-radius: 6px; padding: 10px 12px; margin: 10px 0; }
+  .q-block .q-title { font-weight: 600; font-size: 13px; margin-bottom: 4px; }
+  .q-block .q-dim { color: var(--muted); font-size: 11px; }
+  canvas { background: transparent; max-height: 240px; }
+  .legend-dot { display: inline-block; width: 9px; height: 9px;
+    border-radius: 50%; margin-right: 4px; vertical-align: middle; }
+  .empty { color: var(--muted); font-size: 12px; padding: 20px;
+    text-align: center; background: var(--panel-2); border-radius: 6px; }
+</style></head><body>
+<header>
+  <h1>User study stats</h1>
+  <span class="meta">generated <code id="ts"></code> · raters <b id="nrater"></b>
+    · submissions <b id="nfile"></b> · 1–5 Likert</span>
+  <span style="margin-left:auto"><a href="./" style="color:var(--accent)">← back to study</a></span>
+</header>
+<main>
+  <section>
+    <h2>Per dimension</h2>
+    <canvas id="dimChart"></canvas>
+    <table style="margin-top:12px"><thead><tr id="dimHead"></tr></thead>
+      <tbody id="dimBody"></tbody></table>
+  </section>
+  <section>
+    <h2>Per sub-question</h2>
+    <table><thead><tr id="qHead"></tr></thead><tbody id="qBody"></tbody></table>
+  </section>
+  <section>
+    <h2>Per sub-question — model comparison</h2>
+    <div id="qCharts"></div>
+  </section>
+</main>
+<script id="data" type="application/json">{"n_raters": 3, "n_payloads": 4, "models": ["ours", "baseline", "huobao"], "per_question": [{"dim_label": "Instruction following", "q_label": "Controllability", "q_key": "controllability", "scores": {"ours": [3, 3, 3, 3, 3, 5, 5, 3, 4, 4, 3, 3, 3, 3, 3, 5, 5, 3, 4, 4], "baseline": [1, 3, 1, 3, 3, 1, 1, 1, 1, 1, 1, 3, 1, 3, 3, 1, 1, 1, 1, 1], "huobao": [1, 3, 1, 3, 3, 1, 1, 1, 1, 1, 1, 3, 1, 3, 3, 1, 1, 1, 1, 1]}}, {"dim_label": "Instruction following", "q_label": "Prompt adherence", "q_key": "prompt_adherence", "scores": {"ours": [3, 1, 3, 3, 2, 4, 4, 5, 3, 5, 3, 1, 3, 3, 2, 4, 4, 5, 3, 5], "baseline": [1, 2, 3, 4, 3, 2, 4, 3, 3, 4, 1, 2, 3, 4, 3, 2, 4, 3, 3, 4], "huobao": [3, 3, 2, 4, 4, 2, 2, 4, 5, 4, 3, 3, 2, 4, 4, 2, 2, 4, 5, 4]}}, {"dim_label": "Instruction following", "q_label": "No irrelevant frames", "q_key": "no_irrelevant_frames", "scores": {"ours": [2, 2, 2, 3, 2, 3, 4, 2, 5, 4, 2, 2, 2, 3, 2, 3, 4, 2, 5, 4], "baseline": [2, 2, 1, 4, 4, 3, 4, 1, 2, 4, 2, 2, 1, 4, 4, 3, 4, 1, 2, 4], "huobao": [2, 2, 3, 2, 3, 1, 3, 2, 4, 4, 2, 2, 3, 2, 3, 1, 3, 2, 4, 4]}}, {"dim_label": "Temporal consistency", "q_label": "Person stability", "q_key": "person_stability", "scores": {"ours": [2, 2, 3, 2, 5, 3, 3, 4, 5, 5, 2, 2, 3, 2, 5, 3, 3, 4, 5, 5], "baseline": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], "huobao": [3, 1, 2, 1, 2, 1, 1, 2, 3, 3, 3, 1, 2, 1, 2, 1, 1, 2, 3, 3]}}, {"dim_label": "Temporal consistency", "q_label": "Object stability", "q_key": "object_stability", "scores": {"ours": [4, 2, 2, 5, 3, 4, 3, 4, 5, 5, 4, 2, 2, 5, 3, 4, 3, 4, 5, 5], "baseline": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], "huobao": [4, 1, 3, 1, 3, 1, 1, 1, 4, 2, 4, 1, 3, 1, 3, 1, 1, 1, 4, 2]}}, {"dim_label": "Temporal consistency", "q_label": "Environment stability", "q_key": "environment_stability", "scores": {"ours": [2, 3, 5, 3, 4, 4, 4, 5, 5, 5, 2, 3, 5, 3, 4, 4, 4, 5, 5, 5], "baseline": [1, 1, 1, 2, 3, 1, 1, 1, 3, 2, 1, 1, 1, 2, 3, 1, 1, 1, 3, 2], "huobao": [2, 1, 4, 1, 4, 1, 2, 1, 3, 3, 2, 1, 4, 1, 4, 1, 2, 1, 3, 3]}}, {"dim_label": "Realism", "q_label": "Realism", "q_key": "realism", "scores": {"ours": [2, 2, 3, 3, 2, 2, 3, 4, 2, 3, 2, 2, 3, 3, 2, 2, 3, 4, 2, 3], "baseline": [1, 2, 4, 2, 1, 1, 2, 1, 4, 4, 1, 2, 4, 2, 1, 1, 2, 1, 4, 4], "huobao": [2, 1, 2, 2, 2, 1, 1, 4, 4, 2, 2, 1, 2, 2, 2, 1, 1, 4, 4, 2]}}, {"dim_label": "Realism", "q_label": "Motion logic", "q_key": "motion_logic", "scores": {"ours": [2, 3, 2, 2, 3, 4, 2, 4, 2, 2, 2, 3, 2, 2, 3, 4, 2, 4, 2, 2], "baseline": [3, 3, 3, 2, 1, 2, 3, 1, 1, 2, 3, 3, 3, 2, 1, 2, 3, 1, 1, 2], "huobao": [3, 1, 1, 2, 3, 3, 1, 3, 1, 3, 3, 1, 1, 2, 3, 3, 1, 3, 1, 3]}}, {"dim_label": "Realism", "q_label": "Camera", "q_key": "camera", "scores": {"ours": [4, 3, 3, 3, 3, 4, 2, 5, 3, 4, 4, 3, 3, 3, 3, 4, 2, 5, 3, 4], "baseline": [2, 1, 2, 2, 3, 2, 1, 2, 2, 2, 2, 1, 2, 2, 3, 2, 1, 2, 2, 2], "huobao": [3, 1, 2, 2, 3, 3, 1, 3, 2, 2, 3, 1, 2, 2, 3, 3, 1, 3, 2, 2]}}], "per_dim": [{"dim_label": "Instruction following", "scores": {"ours": [3, 3, 3, 3, 3, 5, 5, 3, 4, 4, 3, 3, 3, 3, 3, 5, 5, 3, 4, 4, 3, 1, 3, 3, 2, 4, 4, 5, 3, 5, 3, 1, 3, 3, 2, 4, 4, 5, 3, 5, 2, 2, 2, 3, 2, 3, 4, 2, 5, 4, 2, 2, 2, 3, 2, 3, 4, 2, 5, 4], "baseline": [1, 3, 1, 3, 3, 1, 1, 1, 1, 1, 1, 3, 1, 3, 3, 1, 1, 1, 1, 1, 1, 2, 3, 4, 3, 2, 4, 3, 3, 4, 1, 2, 3, 4, 3, 2, 4, 3, 3, 4, 2, 2, 1, 4, 4, 3, 4, 1, 2, 4, 2, 2, 1, 4, 4, 3, 4, 1, 2, 4], "huobao": [1, 3, 1, 3, 3, 1, 1, 1, 1, 1, 1, 3, 1, 3, 3, 1, 1, 1, 1, 1, 3, 3, 2, 4, 4, 2, 2, 4, 5, 4, 3, 3, 2, 4, 4, 2, 2, 4, 5, 4, 2, 2, 3, 2, 3, 1, 3, 2, 4, 4, 2, 2, 3, 2, 3, 1, 3, 2, 4, 4]}}, {"dim_label": "Temporal consistency", "scores": {"ours": [2, 2, 3, 2, 5, 3, 3, 4, 5, 5, 2, 2, 3, 2, 5, 3, 3, 4, 5, 5, 4, 2, 2, 5, 3, 4, 3, 4, 5, 5, 4, 2, 2, 5, 3, 4, 3, 4, 5, 5, 2, 3, 5, 3, 4, 4, 4, 5, 5, 5, 2, 3, 5, 3, 4, 4, 4, 5, 5, 5], "baseline": [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 3, 1, 1, 1, 3, 2, 1, 1, 1, 2, 3, 1, 1, 1, 3, 2], "huobao": [3, 1, 2, 1, 2, 1, 1, 2, 3, 3, 3, 1, 2, 1, 2, 1, 1, 2, 3, 3, 4, 1, 3, 1, 3, 1, 1, 1, 4, 2, 4, 1, 3, 1, 3, 1, 1, 1, 4, 2, 2, 1, 4, 1, 4, 1, 2, 1, 3, 3, 2, 1, 4, 1, 4, 1, 2, 1, 3, 3]}}, {"dim_label": "Realism", "scores": {"ours": [2, 2, 3, 3, 2, 2, 3, 4, 2, 3, 2, 2, 3, 3, 2, 2, 3, 4, 2, 3, 2, 3, 2, 2, 3, 4, 2, 4, 2, 2, 2, 3, 2, 2, 3, 4, 2, 4, 2, 2, 4, 3, 3, 3, 3, 4, 2, 5, 3, 4, 4, 3, 3, 3, 3, 4, 2, 5, 3, 4], "baseline": [1, 2, 4, 2, 1, 1, 2, 1, 4, 4, 1, 2, 4, 2, 1, 1, 2, 1, 4, 4, 3, 3, 3, 2, 1, 2, 3, 1, 1, 2, 3, 3, 3, 2, 1, 2, 3, 1, 1, 2, 2, 1, 2, 2, 3, 2, 1, 2, 2, 2, 2, 1, 2, 2, 3, 2, 1, 2, 2, 2], "huobao": [2, 1, 2, 2, 2, 1, 1, 4, 4, 2, 2, 1, 2, 2, 2, 1, 1, 4, 4, 2, 3, 1, 1, 2, 3, 3, 1, 3, 1, 3, 3, 1, 1, 2, 3, 3, 1, 3, 1, 3, 3, 1, 2, 2, 3, 3, 1, 3, 2, 2, 3, 1, 2, 2, 3, 3, 1, 3, 2, 2]}}], "generated_at_utc": "2026-05-11T19:44:11Z"}</script>
+<script>
+const DATA = JSON.parse(document.getElementById("data").textContent);
+const COLORS = ["#6aa9ff","#ff9f43","#28c76f","#ea5455","#b46aff"];
+const MODEL_COLOR = Object.fromEntries(DATA.models.map((m,i) => [m, COLORS[i % COLORS.length]]));
+document.getElementById("ts").textContent = DATA.generated_at_utc;
+document.getElementById("nrater").textContent = DATA.n_raters;
+document.getElementById("nfile").textContent = DATA.n_payloads;
+function mean(arr) { return arr.length ? arr.reduce((a,b)=>a+b,0)/arr.length : null; }
+function std(arr) {
+  if (arr.length < 2) return 0;
+  const m = mean(arr); const v = arr.reduce((a,b)=>a+(b-m)*(b-m),0)/(arr.length-1);
+  return Math.sqrt(v);
+}
+function fmt(arr) {
+  if (!arr.length) return "—";
+  const m = mean(arr); const s = std(arr);
+  return arr.length > 1 ? `${m.toFixed(2)} ± ${s.toFixed(2)} (n=${arr.length})`
+                        : `${m.toFixed(2)} (n=${arr.length})`;
+}
+/* Dimension table + bar chart */
+{
+  const head = document.getElementById("dimHead");
+  head.innerHTML = "<th>Dimension</th>" + DATA.models.map(m =>
+    `<th><span class="legend-dot" style="background:${MODEL_COLOR[m]}"></span>${m}</th>`).join("");
+  const body = document.getElementById("dimBody");
+  for (const d of DATA.per_dim) {
+    const tr = document.createElement("tr");
+    tr.innerHTML = `<td>${d.dim_label}</td>` +
+      DATA.models.map(m => `<td>${fmt(d.scores[m] || [])}</td>`).join("");
+    body.appendChild(tr);
+  }
+  const labels = DATA.per_dim.map(d => d.dim_label);
+  const datasets = DATA.models.map(m => ({
+    label: m,
+    data: DATA.per_dim.map(d => mean(d.scores[m] || [])),
+    backgroundColor: MODEL_COLOR[m] + "cc",
+    borderColor: MODEL_COLOR[m], borderWidth: 1,
+  }));
+  new Chart(document.getElementById("dimChart"), {
+    type: "bar",
+    data: { labels, datasets },
+    options: {
+      responsive: true, scales: {
+        y: { min: 0, max: 5, ticks: { color: "#8b91a8" }, grid: { color: "#2a2f42" } },
+        x: { ticks: { color: "#e6e8ef" }, grid: { display: false } },
+      },
+      plugins: { legend: { labels: { color: "#e6e8ef" } } },
+    },
+  });
+}
+/* Per-question table */
+{
+  const head = document.getElementById("qHead");
+  head.innerHTML = "<th>Dim</th><th>Sub-question</th>" + DATA.models.map(m =>
+    `<th><span class="legend-dot" style="background:${MODEL_COLOR[m]}"></span>${m}</th>`).join("");
+  const body = document.getElementById("qBody");
+  for (const q of DATA.per_question) {
+    const tr = document.createElement("tr");
+    tr.innerHTML = `<td>${q.dim_label}</td><td>${q.q_label}</td>` +
+      DATA.models.map(m => `<td>${fmt(q.scores[m] || [])}</td>`).join("");
+    body.appendChild(tr);
+  }
+}
+/* One mini bar chart per sub-question */
+{
+  const wrap = document.getElementById("qCharts");
+  for (const q of DATA.per_question) {
+    const total = DATA.models.reduce((n, m) => n + (q.scores[m] || []).length, 0);
+    const block = document.createElement("div");
+    block.className = "q-block";
+    block.innerHTML = `<div class="q-title">${q.q_label}</div>
+                       <div class="q-dim">${q.dim_label}</div>`;
+    if (!total) {
+      const e = document.createElement("div");
+      e.className = "empty"; e.textContent = "(no ratings yet)";
+      block.appendChild(e); wrap.appendChild(block); continue;
+    }
+    const c = document.createElement("canvas");
+    block.appendChild(c); wrap.appendChild(block);
+    const datasets = DATA.models.map(m => ({
+      label: m,
+      data: [mean(q.scores[m] || [])],
+      backgroundColor: MODEL_COLOR[m] + "cc",
+      borderColor: MODEL_COLOR[m], borderWidth: 1,
+    }));
+    new Chart(c, {
+      type: "bar",
+      data: { labels: [q.q_label], datasets },
+      options: {
+        indexAxis: "y", responsive: true,
+        scales: {
+          x: { min: 0, max: 5, ticks: { color: "#8b91a8" }, grid: { color: "#2a2f42" } },
+          y: { ticks: { display: false }, grid: { display: false } },
+        },
+        plugins: { legend: { labels: { color: "#e6e8ef" } } },
+      },
+    });
+  }
+}
+</script>
+</body></html>