deploy v2 study (40-runs baselines) at /v2/: dual-study backend + static/v2 rater UI; v1 study untouched

README.md

@@ -8,8 +8,16 @@ pinned: false
 app_port: 7860
 ---
 
-FrameWorker side-by-side video rater. Participants register (name + email), rate
-each video on 13 sub-questions across 4 dimensions, and submit once 100% complete.
-Submissions are written to dataset `dehezhang2/Frameworker_User_Study`.
+FrameWorker side-by-side video rater. Two independent studies share this
+Space:
 
-Set the `HF_TOKEN` Space secret to a token with write access to that dataset.
+- **v1** at `/` — original study (ours / baseline / univa), database under
+  `submissions/` in dataset `dehezhang2/Frameworker_User_Study`.
+- **v2** at `/v2/` — 40-runs baseline study (ours / movieagent /
+  anim_director) on a unified story-outline input, database under
+  `v2/submissions/` in the same dataset.
+
+Participants register (name + email), rate each blinded video on the rubric,
+and submit once 100% complete.
+
+Set the `HF_TOKEN` Space secret to a token with write access to the dataset.

app.py

@@ -1,8 +1,19 @@
-"""FastAPI backend for the FrameWorker user-study Space.
+"""FastAPI backend for the FrameWorker user-study Space — dual-study edition.
 
-Serves the static rater UI from ./static, and exposes POST /api/submit which
-validates a completed submission and appends it to the
-`dehezhang2/Frameworker_User_Study` dataset under `submissions/`.
+Serves TWO independent studies from one Space:
+
+  v1 (original)   pages at /            API at /api/*      dataset folder submissions/
+  v2 (40-runs)    pages at /v2/         API at /v2/api/*   dataset folder v2/submissions/
+
+Both write to the same dataset repo (`dehezhang2/Frameworker_User_Study`) but
+into disjoint folders, so the two studies' databases never mix. The rater
+pages use relative `./api/*` URLs, which resolve to the right prefix
+automatically depending on which page they were loaded from.
+
+Endpoint behavior is identical to the original single-study app.py; the
+handlers are built by a factory parameterized on (prefix, submissions folder,
+annotations file). The huobao→univa legacy rename only applies to the v1
+study.
 
 Secret: HF_TOKEN must be set as a Space secret with write access to the
 dataset repo.
@@ -16,19 +27,18 @@ import re
 import uuid
 from io import BytesIO
 
-from fastapi import FastAPI, HTTPException, Request
+from fastapi import APIRouter, FastAPI, HTTPException, Request
 from fastapi.responses import JSONResponse
 from fastapi.staticfiles import StaticFiles
-from huggingface_hub import HfApi
+from huggingface_hub import HfApi, hf_hub_download
 from huggingface_hub.utils import HfHubHTTPError
 
 DATASET_REPO = "dehezhang2/Frameworker_User_Study"
-ANNOTATIONS_PATH = "annotations.json"
 
-# Plain shared-secret gate for the admin dashboard (`/admin.html`).
-# Override via `ADMIN_PASSWORD` env var / Space secret. The default is
-# intentionally weak — this isn't auth-grade, just a screen against random
-# visitors stumbling into the submissions list.
+# Plain shared-secret gate for the admin dashboards (`/admin.html`,
+# `/v2/admin.html`). Override via `ADMIN_PASSWORD` env var / Space secret.
+# The default is intentionally weak — this isn't auth-grade, just a screen
+# against random visitors stumbling into the submissions list.
 ADMIN_PASSWORD = os.environ.get("ADMIN_PASSWORD", "12345")
 
 # Mirror of the client-side ADMIN_NAMES list. Matched case-insensitively
@@ -39,7 +49,7 @@ ADMIN_NAMES = {
     "zhendong li",
 }
 
-app = FastAPI(title="FrameWorker user-study backend")
+app = FastAPI(title="FrameWorker user-study backend (dual-study)")
 
 _TOKEN = os.environ.get("HF_TOKEN")
 _api = HfApi(token=_TOKEN) if _TOKEN else None
@@ -59,10 +69,10 @@ def _is_admin(name: str) -> bool:
 
 
 def _normalize_legacy_models(payload: dict) -> int:
-    """Rewrite any `model: "huobao"` (and matching `_huobao.mp4` paths) to
-    `univa` on the way in. Older clients with stale localStorage keep
-    re-introducing the old name on save; this silently fixes it server-side
-    so the dataset stays clean. Returns the number of fields rewritten."""
+    """v1-study only: rewrite any `model: "huobao"` (and matching
+    `_huobao.mp4` paths) to `univa` on the way in. Older clients with stale
+    localStorage keep re-introducing the old name on save; this silently
+    fixes it server-side so the dataset stays clean."""
     n = 0
     for c in payload.get("cases") or []:
         for v in c.get("videos") or []:
@@ -95,396 +105,425 @@ def _validate_rater(payload) -> tuple[str, str]:
     return name, email
 
 
-@app.get("/api/health")
-def health():
-    return {
-        "ok": True,
-        "has_token": bool(_TOKEN),
-        "dataset": DATASET_REPO,
-        "time_utc": dt.datetime.utcnow().isoformat() + "Z",
-    }
-
-
-@app.post("/api/submit")
-async def submit(req: Request):
-    if _api is None:
-        raise HTTPException(500, "server missing HF_TOKEN secret")
-    try:
-        payload = await req.json()
-    except Exception as e:
-        raise HTTPException(400, f"invalid JSON: {e}")
-
-    name, email = _validate_rater(payload)
-    _normalize_legacy_models(payload)   # rewrite any stale `huobao` → `univa`
-
-    rubric = payload.get("rubric") or []
-    cases = payload.get("cases") or []
-    if not rubric or not cases:
-        raise HTTPException(400, "submission must include rubric + cases")
-
-    qkeys = [q["key"] for d in rubric for q in d.get("questions", [])]
-    if not qkeys:
-        raise HTTPException(400, "rubric has no questions")
-
-    missing = []
-    bad = []
-    n_videos = 0
-    n_scores = 0
-    for c in cases:
-        cid = c.get("id", "?")
-        for v in c.get("videos", []):
-            n_videos += 1
-            ratings = v.get("ratings") or {}
-            slot = v.get("slot", "?")
-            for qk in qkeys:
-                if qk not in ratings:
-                    missing.append(f"{cid}/{slot}/{qk}")
-                elif not _is_score(ratings[qk]):
-                    bad.append(f"{cid}/{slot}/{qk}={ratings[qk]!r}")
-                else:
-                    n_scores += 1
-    if missing or bad:
-        raise HTTPException(
-            400,
-            json.dumps(
-                {
-                    "error": "incomplete_or_invalid",
-                    "missing_count": len(missing),
-                    "invalid_count": len(bad),
-                    "first_missing": missing[:5],
-                    "first_invalid": bad[:5],
-                }
-            ),
-        )
+def _require_admin_password(req: Request) -> None:
+    pw = req.headers.get("x-admin-password") or req.query_params.get("pw") or ""
+    if pw != ADMIN_PASSWORD:
+        raise HTTPException(401, "admin password required")
 
-    ts = dt.datetime.utcnow().strftime("%Y%m%dT%H%M%SZ")
-    fname = f"submissions/{_slug(email)}_{ts}_{uuid.uuid4().hex[:8]}.json"
-
-    is_admin = _is_admin(name)
-    payload["is_admin"] = is_admin
-    payload["_server"] = {
-        "received_at_utc": dt.datetime.utcnow().isoformat() + "Z",
-        "client_ip": req.client.host if req.client else None,
-        "n_videos": n_videos,
-        "n_scores": n_scores,
-        "stored_as": fname,
-        "status": "final",
-    }
-    blob = json.dumps(payload, indent=2, ensure_ascii=False).encode("utf-8")
-
-    try:
-        _api.upload_file(
-            repo_id=DATASET_REPO,
-            repo_type="dataset",
-            path_or_fileobj=BytesIO(blob),
-            path_in_repo=fname,
-            commit_message=(
-                f"submission from {email} ({n_scores} scores"
-                f"{' · admin' if is_admin else ''})"
-            ),
-        )
-    except HfHubHTTPError as e:
-        status = e.response.status_code if e.response is not None else 500
-        raise HTTPException(
-            status_code=502,
-            detail=f"failed to write to dataset ({status}): {e}",
-        )
 
-    return JSONResponse(
-        {
+def build_study_router(
+    *,
+    prefix: str,
+    study: str,
+    submissions_root: str,
+    annotations_path: str,
+    normalize_legacy: bool,
+) -> APIRouter:
+    """One study's full API surface, writing under its own dataset folders."""
+    router = APIRouter(prefix=prefix)
+
+    def _load_annotations() -> dict:
+        """Return the study's current annotations file, or an empty shell."""
+        if _api is None:
+            return {"annotations": {}}
+        try:
+            local = hf_hub_download(
+                repo_id=DATASET_REPO, repo_type="dataset",
+                filename=annotations_path, force_download=True,
+            )
+            with open(local, "r", encoding="utf-8") as f:
+                data = json.load(f)
+            if not isinstance(data.get("annotations"), dict):
+                data["annotations"] = {}
+            return data
+        except HfHubHTTPError as e:
+            # 404 means we haven't created the file yet — that's the empty case.
+            if e.response is not None and e.response.status_code == 404:
+                return {"annotations": {}}
+            return {"annotations": {}}
+        except Exception:
+            return {"annotations": {}}
+
+    @router.get("/health")
+    def health():
+        return {
             "ok": True,
-            "stored_as": fname,
+            "has_token": bool(_TOKEN),
+            "dataset": DATASET_REPO,
+            "study": study,
+            "time_utc": dt.datetime.utcnow().isoformat() + "Z",
+        }
+
+    @router.post("/submit")
+    async def submit(req: Request):
+        if _api is None:
+            raise HTTPException(500, "server missing HF_TOKEN secret")
+        try:
+            payload = await req.json()
+        except Exception as e:
+            raise HTTPException(400, f"invalid JSON: {e}")
+
+        name, email = _validate_rater(payload)
+        if normalize_legacy:
+            _normalize_legacy_models(payload)
+
+        rubric = payload.get("rubric") or []
+        cases = payload.get("cases") or []
+        if not rubric or not cases:
+            raise HTTPException(400, "submission must include rubric + cases")
+
+        qkeys = [q["key"] for d in rubric for q in d.get("questions", [])]
+        if not qkeys:
+            raise HTTPException(400, "rubric has no questions")
+
+        missing = []
+        bad = []
+        n_videos = 0
+        n_scores = 0
+        for c in cases:
+            cid = c.get("id", "?")
+            for v in c.get("videos", []):
+                n_videos += 1
+                ratings = v.get("ratings") or {}
+                slot = v.get("slot", "?")
+                for qk in qkeys:
+                    if qk not in ratings:
+                        missing.append(f"{cid}/{slot}/{qk}")
+                    elif not _is_score(ratings[qk]):
+                        bad.append(f"{cid}/{slot}/{qk}={ratings[qk]!r}")
+                    else:
+                        n_scores += 1
+        if missing or bad:
+            raise HTTPException(
+                400,
+                json.dumps(
+                    {
+                        "error": "incomplete_or_invalid",
+                        "missing_count": len(missing),
+                        "invalid_count": len(bad),
+                        "first_missing": missing[:5],
+                        "first_invalid": bad[:5],
+                    }
+                ),
+            )
+
+        ts = dt.datetime.utcnow().strftime("%Y%m%dT%H%M%SZ")
+        fname = f"{submissions_root}/{_slug(email)}_{ts}_{uuid.uuid4().hex[:8]}.json"
+
+        is_admin = _is_admin(name)
+        payload["is_admin"] = is_admin
+        payload["_server"] = {
+            "received_at_utc": dt.datetime.utcnow().isoformat() + "Z",
+            "client_ip": req.client.host if req.client else None,
             "n_videos": n_videos,
             "n_scores": n_scores,
-            "is_admin": is_admin,
+            "stored_as": fname,
+            "status": "final",
         }
-    )
-
-
-@app.post("/api/save_progress")
-async def save_progress(req: Request):
-    """Write a per-rater in-progress snapshot to the dataset.
-
-    Used in two situations:
-      - Right after registration: page POSTs an empty payload (no ratings yet)
-        so the rater appears in `submissions/in_progress/` from the moment
-        they sign in. Useful for tracking participation start time and
-        identifying drop-offs.
-      - Mid-study auto-save (debounced) + manual "Save progress" button:
-        the same single per-user file is overwritten with the latest snapshot.
-
-    Unlike /api/submit, this does NOT require completeness — the payload may
-    have any subset of ratings (including none).
-    """
-    if _api is None:
-        raise HTTPException(500, "server missing HF_TOKEN secret")
-    try:
-        payload = await req.json()
-    except Exception as e:
-        raise HTTPException(400, f"invalid JSON: {e}")
-
-    name, email = _validate_rater(payload)
-    _normalize_legacy_models(payload)   # rewrite any stale `huobao` → `univa`
-    cases = payload.get("cases") or []
-    n_scores = _count_scores(cases)
-    is_admin = _is_admin(name)
-
-    fname = f"submissions/in_progress/{_slug(email)}.json"
-    payload["is_admin"] = is_admin
-    payload["_server"] = {
-        "received_at_utc": dt.datetime.utcnow().isoformat() + "Z",
-        "client_ip": req.client.host if req.client else None,
-        "n_scores": n_scores,
-        "stored_as": fname,
-        "status": "in_progress",
-    }
-    blob = json.dumps(payload, indent=2, ensure_ascii=False).encode("utf-8")
-    try:
-        _api.upload_file(
-            repo_id=DATASET_REPO,
-            repo_type="dataset",
-            path_or_fileobj=BytesIO(blob),
-            path_in_repo=fname,
-            commit_message=(
-                f"in-progress save from {email} ({n_scores} scores"
-                f"{' · admin' if is_admin else ''})"
-            ),
-        )
-    except HfHubHTTPError as e:
-        status = e.response.status_code if e.response is not None else 500
-        raise HTTPException(
-            status_code=502,
-            detail=f"failed to write to dataset ({status}): {e}",
-        )
+        blob = json.dumps(payload, indent=2, ensure_ascii=False).encode("utf-8")
 
-    return JSONResponse({
-        "ok": True,
-        "stored_as": fname,
-        "n_scores": n_scores,
-        "is_admin": is_admin,
-    })
-
-
-def _load_annotations() -> dict:
-    """Return the dataset's current annotations.json, or an empty shell."""
-    if _api is None:
-        return {"annotations": {}}
-    try:
-        from huggingface_hub import hf_hub_download
-        local = hf_hub_download(
-            repo_id=DATASET_REPO, repo_type="dataset",
-            filename=ANNOTATIONS_PATH, force_download=True,
-        )
-        with open(local, "r", encoding="utf-8") as f:
-            data = json.load(f)
-        if not isinstance(data.get("annotations"), dict):
-            data["annotations"] = {}
-        return data
-    except HfHubHTTPError as e:
-        # 404 means we haven't created the file yet — that's the empty case.
-        if e.response is not None and e.response.status_code == 404:
-            return {"annotations": {}}
-        return {"annotations": {}}
-    except Exception:
-        return {"annotations": {}}
+        try:
+            _api.upload_file(
+                repo_id=DATASET_REPO,
+                repo_type="dataset",
+                path_or_fileobj=BytesIO(blob),
+                path_in_repo=fname,
+                commit_message=(
+                    f"{study}: submission from {email} ({n_scores} scores"
+                    f"{' · admin' if is_admin else ''})"
+                ),
+            )
+        except HfHubHTTPError as e:
+            status = e.response.status_code if e.response is not None else 500
+            raise HTTPException(
+                status_code=502,
+                detail=f"failed to write to dataset ({status}): {e}",
+            )
 
+        return JSONResponse(
+            {
+                "ok": True,
+                "stored_as": fname,
+                "n_videos": n_videos,
+                "n_scores": n_scores,
+                "is_admin": is_admin,
+            }
+        )
 
-def _require_admin_password(req: Request) -> None:
-    pw = req.headers.get("x-admin-password") or req.query_params.get("pw") or ""
-    if pw != ADMIN_PASSWORD:
-        raise HTTPException(401, "admin password required")
+    @router.post("/save_progress")
+    async def save_progress(req: Request):
+        """Write a per-rater in-progress snapshot to the dataset.
+
+        Used in two situations:
+          - Right after registration: page POSTs an empty payload (no ratings
+            yet) so the rater appears in the in_progress folder from the
+            moment they sign in.
+          - Mid-study auto-save (debounced) + manual "Save progress" button:
+            the same single per-user file is overwritten with the latest
+            snapshot.
+
+        Unlike /submit, this does NOT require completeness — the payload may
+        have any subset of ratings (including none).
+        """
+        if _api is None:
+            raise HTTPException(500, "server missing HF_TOKEN secret")
+        try:
+            payload = await req.json()
+        except Exception as e:
+            raise HTTPException(400, f"invalid JSON: {e}")
+
+        name, email = _validate_rater(payload)
+        if normalize_legacy:
+            _normalize_legacy_models(payload)
+        cases = payload.get("cases") or []
+        n_scores = _count_scores(cases)
+        is_admin = _is_admin(name)
+
+        fname = f"{submissions_root}/in_progress/{_slug(email)}.json"
+        payload["is_admin"] = is_admin
+        payload["_server"] = {
+            "received_at_utc": dt.datetime.utcnow().isoformat() + "Z",
+            "client_ip": req.client.host if req.client else None,
+            "n_scores": n_scores,
+            "stored_as": fname,
+            "status": "in_progress",
+        }
+        blob = json.dumps(payload, indent=2, ensure_ascii=False).encode("utf-8")
+        try:
+            _api.upload_file(
+                repo_id=DATASET_REPO,
+                repo_type="dataset",
+                path_or_fileobj=BytesIO(blob),
+                path_in_repo=fname,
+                commit_message=(
+                    f"{study}: in-progress save from {email} ({n_scores} scores"
+                    f"{' · admin' if is_admin else ''})"
+                ),
+            )
+        except HfHubHTTPError as e:
+            status = e.response.status_code if e.response is not None else 500
+            raise HTTPException(
+                status_code=502,
+                detail=f"failed to write to dataset ({status}): {e}",
+            )
 
+        return JSONResponse({
+            "ok": True,
+            "stored_as": fname,
+            "n_scores": n_scores,
+            "is_admin": is_admin,
+        })
 
-@app.post("/api/admin/login")
-async def admin_login(req: Request):
-    try:
-        payload = await req.json()
-    except Exception:
-        raise HTTPException(400, "invalid JSON")
-    if (payload.get("password") or "").strip() != ADMIN_PASSWORD:
-        raise HTTPException(401, "wrong password")
-    return JSONResponse({"ok": True})
-
-
-@app.get("/api/admin/submissions")
-async def admin_submissions(req: Request):
-    """List every submission JSON in the dataset with light metadata.
-
-    Admin-only (X-Admin-Password header). The page fetches each blob's full
-    body directly from the public dataset resolve URL for visualisation.
-    """
-    _require_admin_password(req)
-    if _api is None:
-        return JSONResponse({"submissions": [], "reason": "no token"})
-    from huggingface_hub import hf_hub_download
-    out = []
-    for tree in _api.list_repo_tree(
-        repo_id=DATASET_REPO, repo_type="dataset",
-        path_in_repo="submissions", recursive=True,
-    ):
-        path = getattr(tree, "path", "")
-        if not path.endswith(".json"):
-            continue
-        record: dict = {"path": path}
+    @router.post("/admin/login")
+    async def admin_login(req: Request):
+        try:
+            payload = await req.json()
+        except Exception:
+            raise HTTPException(400, "invalid JSON")
+        if (payload.get("password") or "").strip() != ADMIN_PASSWORD:
+            raise HTTPException(401, "wrong password")
+        return JSONResponse({"ok": True})
+
+    @router.get("/admin/submissions")
+    async def admin_submissions(req: Request):
+        """List every submission JSON in this study's folder with light
+        metadata. Admin-only (X-Admin-Password header)."""
+        _require_admin_password(req)
+        if _api is None:
+            return JSONResponse({"submissions": [], "reason": "no token"})
+        out = []
+        try:
+            tree_iter = _api.list_repo_tree(
+                repo_id=DATASET_REPO, repo_type="dataset",
+                path_in_repo=submissions_root, recursive=True,
+            )
+            tree_list = list(tree_iter)
+        except HfHubHTTPError as e:
+            # 404 = no submissions yet for this study — empty, not an error.
+            status = e.response.status_code if e.response is not None else 500
+            if status == 404:
+                return JSONResponse({"submissions": [], "total": 0})
+            raise HTTPException(502, f"failed to list dataset ({status}): {e}")
+        for tree in tree_list:
+            path = getattr(tree, "path", "")
+            if not path.endswith(".json"):
+                continue
+            record: dict = {"path": path}
+            try:
+                local = hf_hub_download(
+                    repo_id=DATASET_REPO, repo_type="dataset",
+                    filename=path, force_download=False,
+                )
+                with open(local, "r", encoding="utf-8") as f:
+                    data = json.load(f)
+                rater = data.get("rater") or {}
+                srv = data.get("_server") or {}
+                cases = data.get("cases") or []
+                record.update({
+                    "rater_name": rater.get("name") or "",
+                    "rater_email": rater.get("email") or "",
+                    "is_admin": bool(data.get("is_admin", False)),
+                    "n_cases": len(cases),
+                    "n_scores": srv.get("n_scores"),
+                    "status": srv.get("status"),
+                    "received_at_utc": srv.get("received_at_utc"),
+                    "chosen_case_ids": rater.get("chosen_case_ids") or [],
+                })
+            except Exception as e:
+                record["error"] = str(e)[:120]
+            out.append(record)
+        # newest first
+        out.sort(key=lambda r: r.get("received_at_utc") or "", reverse=True)
+        return JSONResponse({"submissions": out, "total": len(out)})
+
+    @router.delete("/admin/submission")
+    async def admin_delete_submission(req: Request):
+        """Admin-only delete of one of this study's submission JSONs.
+
+        Body: {"path": "<submissions_root>/...json"} — must live under this
+        study's submissions folder and end with ".json" to prevent the
+        endpoint from deleting unrelated dataset files via path traversal.
+        """
+        _require_admin_password(req)
+        if _api is None:
+            raise HTTPException(500, "server missing HF_TOKEN secret")
+        try:
+            payload = await req.json()
+        except Exception:
+            raise HTTPException(400, "invalid JSON")
+        path = (payload.get("path") or "").strip()
+        if (not path.startswith(submissions_root + "/")
+                or not path.endswith(".json") or ".." in path):
+            raise HTTPException(
+                400, f"path must be a {submissions_root}/*.json file")
+        try:
+            _api.delete_file(
+                repo_id=DATASET_REPO, repo_type="dataset",
+                path_in_repo=path,
+                commit_message=(
+                    f"{study} admin: delete submission {os.path.basename(path)}"
+                ),
+            )
+        except HfHubHTTPError as e:
+            status = e.response.status_code if e.response is not None else 500
+            raise HTTPException(502, f"delete failed ({status}): {e}")
+        return JSONResponse({"ok": True, "deleted": path})
+
+    @router.get("/rater_state")
+    async def get_rater_state(email: str = ""):
+        """Return the rater's most recent in-progress JSON (if any).
+
+        Used by the page to recover a rater's locked case subset + prior
+        ratings when they land on a new device."""
+        email = (email or "").strip().lower()
+        if not email:
+            raise HTTPException(400, "email query param required")
+        slug = _slug(email)
+        if _api is None:
+            return JSONResponse({"found": False, "reason": "no token"})
         try:
             local = hf_hub_download(
                 repo_id=DATASET_REPO, repo_type="dataset",
-                filename=path, force_download=False,
+                filename=f"{submissions_root}/in_progress/{slug}.json",
+                force_download=True,
             )
             with open(local, "r", encoding="utf-8") as f:
-                data = json.load(f)
-            rater = data.get("rater") or {}
-            srv = data.get("_server") or {}
-            cases = data.get("cases") or []
-            record.update({
-                "rater_name": rater.get("name") or "",
-                "rater_email": rater.get("email") or "",
-                "is_admin": bool(data.get("is_admin", False)),
-                "n_cases": len(cases),
-                "n_scores": srv.get("n_scores"),
-                "status": srv.get("status"),
-                "received_at_utc": srv.get("received_at_utc"),
-                "chosen_case_ids": rater.get("chosen_case_ids") or [],
-            })
+                return JSONResponse({"found": True, "state": json.load(f)})
+        except HfHubHTTPError as e:
+            status = e.response.status_code if e.response is not None else 500
+            if status == 404:
+                return JSONResponse({"found": False})
+            return JSONResponse({"found": False, "reason": f"HTTP {status}"})
         except Exception as e:
-            record["error"] = str(e)[:120]
-        out.append(record)
-    # newest first
-    out.sort(key=lambda r: r.get("received_at_utc") or "", reverse=True)
-    return JSONResponse({"submissions": out, "total": len(out)})
-
-
-@app.delete("/api/admin/submission")
-async def admin_delete_submission(req: Request):
-    """Admin-only delete of a submission JSON.
-
-    Body: {"path": "submissions/...json"} — must start with "submissions/" and
-    end with ".json" to prevent the endpoint from deleting unrelated dataset
-    files via path traversal.
-    """
-    _require_admin_password(req)
-    if _api is None:
-        raise HTTPException(500, "server missing HF_TOKEN secret")
-    try:
-        payload = await req.json()
-    except Exception:
-        raise HTTPException(400, "invalid JSON")
-    path = (payload.get("path") or "").strip()
-    if (not path.startswith("submissions/") or not path.endswith(".json")
-            or ".." in path):
-        raise HTTPException(400, "path must be a submissions/*.json file")
-    try:
-        _api.delete_file(
-            repo_id=DATASET_REPO, repo_type="dataset",
-            path_in_repo=path,
-            commit_message=f"admin: delete submission {os.path.basename(path)}",
-        )
-    except HfHubHTTPError as e:
-        status = e.response.status_code if e.response is not None else 500
-        raise HTTPException(502, f"delete failed ({status}): {e}")
-    return JSONResponse({"ok": True, "deleted": path})
-
-
-@app.get("/api/rater_state")
-async def get_rater_state(email: str = ""):
-    """Return the rater's most recent in-progress JSON (if any).
-
-    Used by the page to recover a rater's locked case subset + prior ratings
-    when they land on a new device. The submissions/in_progress folder is
-    public on the dataset, so this is just a convenience wrapper.
-    """
-    email = (email or "").strip().lower()
-    if not email:
-        raise HTTPException(400, "email query param required")
-    slug = _slug(email)
-    if _api is None:
-        return JSONResponse({"found": False, "reason": "no token"})
-    try:
-        from huggingface_hub import hf_hub_download
-        local = hf_hub_download(
-            repo_id=DATASET_REPO, repo_type="dataset",
-            filename=f"submissions/in_progress/{slug}.json", force_download=True,
-        )
-        with open(local, "r", encoding="utf-8") as f:
-            return JSONResponse({"found": True, "state": json.load(f)})
-    except HfHubHTTPError as e:
-        status = e.response.status_code if e.response is not None else 500
-        if status == 404:
-            return JSONResponse({"found": False})
-        return JSONResponse({"found": False, "reason": f"HTTP {status}"})
-    except Exception as e:
-        return JSONResponse({"found": False, "reason": str(e)})
-
-
-@app.get("/api/annotations")
-async def get_annotations():
-    """Public read of admin-curated prompt highlights.
-
-    Shape: {"annotations": {case_id: {lang: [snippet, snippet, ...]}}}
-    """
-    data = _load_annotations()
-    return JSONResponse({"annotations": data.get("annotations", {})})
-
-
-@app.post("/api/annotations")
-async def post_annotations(req: Request):
-    """Admin-only: replace the highlight list for a (case_id, lang) pair.
-
-    Payload: {rater:{name,email}, case_id, lang, ranges: [string, ...]}
-    Server-enforces ADMIN_NAMES against the supplied rater.name.
-    """
-    if _api is None:
-        raise HTTPException(500, "server missing HF_TOKEN secret")
-    try:
-        payload = await req.json()
-    except Exception as e:
-        raise HTTPException(400, f"invalid JSON: {e}")
-    name, email = _validate_rater(payload)
-    if not _is_admin(name):
-        raise HTTPException(403, "admin only")
-    case_id = (payload.get("case_id") or "").strip()
-    lang = (payload.get("lang") or "en").strip()
-    ranges = payload.get("ranges") or []
-    if not case_id:
-        raise HTTPException(400, "case_id required")
-    if not isinstance(ranges, list) or not all(isinstance(r, str) for r in ranges):
-        raise HTTPException(400, "ranges must be a list of strings")
-    # Sanitise: drop empty / huge entries, dedupe in order.
-    cleaned = []
-    seen = set()
-    for r in ranges:
-        s = r.strip()
-        if not s or len(s) > 1024 or s in seen:
-            continue
-        seen.add(s); cleaned.append(s)
-
-    data = _load_annotations()
-    data.setdefault("annotations", {}).setdefault(case_id, {})[lang] = cleaned
-    data["_server"] = {
-        "last_edited_by": email,
-        "last_edited_name": name,
-        "last_edited_at_utc": dt.datetime.utcnow().isoformat() + "Z",
-        "case_id": case_id, "lang": lang,
-    }
-    blob = json.dumps(data, indent=2, ensure_ascii=False).encode("utf-8")
-    try:
-        _api.upload_file(
-            repo_id=DATASET_REPO, repo_type="dataset",
-            path_or_fileobj=BytesIO(blob),
-            path_in_repo=ANNOTATIONS_PATH,
-            commit_message=(
-                f"annotations: {email} set {len(cleaned)} highlight(s) "
-                f"for {case_id} / {lang}"
-            ),
-        )
-    except HfHubHTTPError as e:
-        status = e.response.status_code if e.response is not None else 500
-        raise HTTPException(502, f"failed to write annotations ({status}): {e}")
-    return JSONResponse({
-        "ok": True, "case_id": case_id, "lang": lang,
-        "ranges": cleaned,
-    })
-
-
-# Static rater UI lives in ./static.  Mount last so /api/* takes precedence.
+            return JSONResponse({"found": False, "reason": str(e)})
+
+    @router.get("/annotations")
+    async def get_annotations():
+        """Public read of admin-curated prompt highlights.
+
+        Shape: {"annotations": {case_id: {lang: [snippet, snippet, ...]}}}
+        """
+        data = _load_annotations()
+        return JSONResponse({"annotations": data.get("annotations", {})})
+
+    @router.post("/annotations")
+    async def post_annotations(req: Request):
+        """Admin-only: replace the highlight list for a (case_id, lang) pair.
+
+        Payload: {rater:{name,email}, case_id, lang, ranges: [string, ...]}
+        Server-enforces ADMIN_NAMES against the supplied rater.name.
+        """
+        if _api is None:
+            raise HTTPException(500, "server missing HF_TOKEN secret")
+        try:
+            payload = await req.json()
+        except Exception as e:
+            raise HTTPException(400, f"invalid JSON: {e}")
+        name, email = _validate_rater(payload)
+        if not _is_admin(name):
+            raise HTTPException(403, "admin only")
+        case_id = (payload.get("case_id") or "").strip()
+        lang = (payload.get("lang") or "en").strip()
+        ranges = payload.get("ranges") or []
+        if not case_id:
+            raise HTTPException(400, "case_id required")
+        if not isinstance(ranges, list) or not all(isinstance(r, str) for r in ranges):
+            raise HTTPException(400, "ranges must be a list of strings")
+        # Sanitise: drop empty / huge entries, dedupe in order.
+        cleaned = []
+        seen = set()
+        for r in ranges:
+            s = r.strip()
+            if not s or len(s) > 1024 or s in seen:
+                continue
+            seen.add(s); cleaned.append(s)
+
+        data = _load_annotations()
+        data.setdefault("annotations", {}).setdefault(case_id, {})[lang] = cleaned
+        data["_server"] = {
+            "last_edited_by": email,
+            "last_edited_name": name,
+            "last_edited_at_utc": dt.datetime.utcnow().isoformat() + "Z",
+            "case_id": case_id, "lang": lang,
+        }
+        blob = json.dumps(data, indent=2, ensure_ascii=False).encode("utf-8")
+        try:
+            _api.upload_file(
+                repo_id=DATASET_REPO, repo_type="dataset",
+                path_or_fileobj=BytesIO(blob),
+                path_in_repo=annotations_path,
+                commit_message=(
+                    f"{study} annotations: {email} set {len(cleaned)} "
+                    f"highlight(s) for {case_id} / {lang}"
+                ),
+            )
+        except HfHubHTTPError as e:
+            status = e.response.status_code if e.response is not None else 500
+            raise HTTPException(502, f"failed to write annotations ({status}): {e}")
+        return JSONResponse({
+            "ok": True, "case_id": case_id, "lang": lang,
+            "ranges": cleaned,
+        })
+
+    return router
+
+
+# v1 — the original study; paths and behavior identical to the old app.py.
+app.include_router(build_study_router(
+    prefix="/api", study="v1",
+    submissions_root="submissions",
+    annotations_path="annotations.json",
+    normalize_legacy=True,
+))
+
+# v2 — the 40-runs baseline study; everything lives under v2/ in the dataset.
+app.include_router(build_study_router(
+    prefix="/v2/api", study="v2",
+    submissions_root="v2/submissions",
+    annotations_path="v2/annotations.json",
+    normalize_legacy=False,
+))
+
+# Static rater UIs live in ./static (v1 at /, v2 at /v2/). Mount last so the
+# API routes take precedence.
 app.mount("/", StaticFiles(directory="static", html=True), name="static")

static/v2/admin.html

@@ -0,0 +1,550 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>Admin · FrameWorker user study v2</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; --panel-3: #232839;
+    --border: #2a2f42; --border-strong: #3a4060;
+    --fg: #e6e8ef; --muted: #8b91a8; --muted-2: #5e6480;
+    --accent: #6aa9ff; --good: #28c76f; --warn: #ff9f43; --bad: #ea5455;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
+    font-family: -apple-system, "Inter", "PingFang SC", sans-serif;
+    font-size: 14px; line-height: 1.5; }
+
+  header { padding: 12px 24px; border-bottom: 1px solid var(--border);
+    background: var(--panel); display: flex; gap: 14px; align-items: center;
+    flex-wrap: wrap; }
+  header h1 { font-size: 16px; margin: 0; }
+  header .meta { color: var(--muted); font-size: 12px; }
+  header .right { margin-left: auto; display: flex; gap: 10px; align-items: center; }
+
+  main { padding: 18px 24px 80px; max-width: 1280px; margin: 0 auto; }
+
+  section { background: var(--panel); border: 1px solid var(--border);
+    border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
+  h2 { font-size: 14px; margin: 0 0 10px; color: var(--accent); }
+  .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
+  .btn { background: var(--panel-3); border: 1px solid var(--border-strong);
+    color: var(--fg); padding: 6px 12px; border-radius: 4px; cursor: pointer;
+    font-family: inherit; font-size: 12px; }
+  .btn:hover { background: #2c3450; }
+  .btn.primary { background: var(--accent); color: #0a1a2a;
+    border-color: var(--accent); font-weight: 600; }
+  .btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
+  .btn:disabled { background: var(--panel-3); color: var(--muted-2);
+    border-color: var(--border); cursor: not-allowed; }
+
+  /* login screen */
+  .login-wrap { display: flex; align-items: center; justify-content: center;
+    min-height: 70vh; }
+  .login-card { background: var(--panel); border: 1px solid var(--border-strong);
+    border-radius: 10px; padding: 22px 24px; max-width: 380px; width: 100%; }
+  .login-card h2 { margin: 0 0 6px; color: var(--accent); }
+  .login-card p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
+  .login-card label { font-size: 11px; color: var(--muted);
+    text-transform: uppercase; letter-spacing: 0.5px; }
+  .login-card input { width: 100%; background: var(--panel-3);
+    border: 1px solid var(--border); color: var(--fg); padding: 10px 12px;
+    border-radius: 5px; font-family: inherit; font-size: 16px; margin-top: 4px; }
+  .login-card .err { color: var(--bad); font-size: 12px; margin-top: 6px;
+    min-height: 16px; }
+  .login-card .login-btn { width: 100%; margin-top: 12px; padding: 10px;
+    font-size: 14px; font-weight: 700; }
+
+  /* table */
+  table { width: 100%; border-collapse: collapse; font-size: 12px; }
+  th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
+  th { color: var(--muted); font-weight: 600; font-size: 11px;
+    text-transform: uppercase; letter-spacing: 0.5px;
+    background: var(--panel-2); position: sticky; top: 0; }
+  tr:hover td { background: var(--panel-2); }
+  td.path, td.email { font-family: ui-monospace, monospace; font-size: 11px;
+    color: var(--muted); word-break: break-all; }
+  td .badge { display: inline-block; padding: 2px 6px; border-radius: 8px;
+    font-size: 10px; font-weight: 700; }
+  td .badge.final { background: #1c3422; color: var(--good); }
+  td .badge.in_progress { background: #3a3520; color: var(--warn); }
+  td .badge.admin { background: #3a2f60; color: #d9b6ff; margin-left: 4px; }
+  .progress-bar { background: var(--panel-3); height: 4px; border-radius: 2px;
+    overflow: hidden; min-width: 80px; }
+  .progress-bar .fill { background: var(--accent); height: 100%; }
+
+  .filter-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
+    margin-bottom: 10px; }
+  .filter-row input { background: var(--panel-3); border: 1px solid var(--border);
+    color: var(--fg); padding: 5px 8px; border-radius: 4px; font-size: 12px;
+    font-family: inherit; min-width: 200px; }
+
+  /* charts */
+  #viz { background: var(--panel); border: 1px solid var(--border);
+    border-radius: 8px; padding: 14px 16px; margin-top: 14px; }
+  .q-block { background: var(--panel-2); border: 1px solid var(--border);
+    border-radius: 6px; padding: 10px 12px; margin: 8px 0; }
+  .q-block .q-title { font-weight: 600; font-size: 13px; }
+  .q-block .q-dim { color: var(--muted); font-size: 11px; }
+  canvas { max-height: 220px; }
+  .legend-dot { display: inline-block; width: 9px; height: 9px;
+    border-radius: 50%; margin-right: 4px; vertical-align: middle; }
+
+  .toast { position: fixed; bottom: 20px; right: 20px;
+    background: var(--good); color: #0a1a0a; padding: 10px 16px;
+    border-radius: 6px; font-weight: 600; opacity: 0;
+    transition: opacity 0.2s; pointer-events: none; z-index: 100; }
+  .toast.show { opacity: 1; }
+  .toast.error { background: var(--bad); color: #fff; }
+</style>
+</head>
+<body>
+<div id="app"></div>
+<div class="toast" id="toast"></div>
+
+<script>
+const ADMIN_PW_KEY = "user_study_admin_pw_v1";
+
+// Canonical rubric (must stay in sync with index.html DIMENSIONS).
+const DIMENSIONS = [
+  { key: "instruction_following", label: "Instruction following",
+    questions: [
+      ["controllability",       "Controllability"],
+      ["prompt_adherence",      "Prompt adherence"],
+      ["no_irrelevant_frames",  "No irrelevant frames"],
+    ] },
+  { key: "temporal_consistency", label: "Temporal consistency",
+    questions: [
+      ["person_stability",      "Person stability"],
+      ["object_stability",      "Object stability"],
+      ["environment_stability", "Environment stability"],
+    ] },
+  { key: "motion_realism", label: "Realism",
+    questions: [
+      ["realism",      "Static realism"],
+      ["motion_logic", "Motion logic"],
+      ["camera",       "Camera"],
+    ] },
+];
+const ALL_QKEYS = DIMENSIONS.flatMap(d => d.questions.map(([k]) => k));
+
+let SUBMISSIONS = [];        // list from /api/admin/submissions
+let SELECTED = new Set();    // paths the admin has ticked
+
+function el(tag, attrs={}, ...children) {
+  const e = document.createElement(tag);
+  for (const [k,v] of Object.entries(attrs)) {
+    if (k === "class") e.className = v;
+    else if (k === "html") e.innerHTML = v;
+    else if (k.startsWith("on") && typeof v === "function")
+      e.addEventListener(k.slice(2).toLowerCase(), v);
+    else if (v !== false && v != null) e.setAttribute(k, v);
+  }
+  for (const c of children) {
+    if (c == null || c === false) continue;
+    e.appendChild(typeof c === "string" ? document.createTextNode(c) : c);
+  }
+  return e;
+}
+function showToast(msg, isErr=false) {
+  const t = document.getElementById("toast");
+  t.textContent = msg;
+  t.classList.toggle("error", !!isErr);
+  t.classList.add("show");
+  setTimeout(()=>t.classList.remove("show"), 1800);
+}
+function adminPw() { try { return sessionStorage.getItem(ADMIN_PW_KEY) || ""; } catch(e){ return ""; } }
+function setAdminPw(pw) { try { sessionStorage.setItem(ADMIN_PW_KEY, pw); } catch(e){} }
+function clearAdminPw() { try { sessionStorage.removeItem(ADMIN_PW_KEY); } catch(e){} }
+
+/* ---------- login ---------- */
+function renderLogin() {
+  const app = document.getElementById("app");
+  app.innerHTML = "";
+  app.appendChild(el("header", {},
+    el("h1", {}, "Admin · FrameWorker user study"),
+    el("span", { class: "meta" }, "password-gated"),
+    el("div", { class: "right" },
+      el("a", { href: "./", style: "color:var(--accent);font-size:12px" }, "← back to study"),
+    ),
+  ));
+  const wrap = el("div", { class: "login-wrap" });
+  const card = el("div", { class: "login-card" });
+  card.appendChild(el("h2", {}, "Admin login"));
+  card.appendChild(el("p", {}, "Enter the admin password to view all study submissions."));
+  card.appendChild(el("label", { "for": "pw" }, "Password"));
+  const input = el("input", {
+    id: "pw", type: "password", autocomplete: "current-password",
+    placeholder: "·····",
+    onkeydown: e => { if (e.key === "Enter") submitLogin(); },
+  });
+  card.appendChild(input);
+  const err = el("div", { class: "err", id: "loginErr" });
+  card.appendChild(err);
+  card.appendChild(el("button", {
+    class: "btn primary login-btn",
+    onclick: submitLogin,
+  }, "Sign in"));
+  wrap.appendChild(card);
+  app.appendChild(wrap);
+  setTimeout(() => input.focus(), 30);
+}
+
+async function submitLogin() {
+  const pw = document.getElementById("pw").value;
+  const err = document.getElementById("loginErr");
+  err.textContent = "";
+  if (!pw) { err.textContent = "Password required."; return; }
+  try {
+    const r = await fetch("./api/admin/login", {
+      method: "POST", headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ password: pw }),
+    });
+    if (!r.ok) { err.textContent = "Wrong password."; return; }
+    setAdminPw(pw);
+    renderDashboard();
+    fetchSubmissions();
+  } catch (e) {
+    err.textContent = "Login failed: " + e.message;
+  }
+}
+
+/* ---------- dashboard ---------- */
+function renderDashboard() {
+  const app = document.getElementById("app");
+  app.innerHTML = "";
+  app.appendChild(el("header", {},
+    el("h1", {}, "Admin · FrameWorker user study"),
+    el("span", { class: "meta", id: "summaryMeta" }, "loading…"),
+    el("div", { class: "right" },
+      el("a", { href: "./stats.html", target: "_blank",
+                style: "color:var(--accent);font-size:12px;text-decoration:none" },
+        "📊 aggregate stats →"),
+      el("button", { class: "btn",
+        onclick: () => { clearAdminPw(); renderLogin(); } },
+        "Sign out"),
+    ),
+  ));
+  const main = el("main");
+  // submissions list
+  const sec1 = el("section");
+  sec1.appendChild(el("h2", {}, "Submissions"));
+  const filterRow = el("div", { class: "filter-row" });
+  filterRow.appendChild(el("input", {
+    type: "search", placeholder: "Filter by name / email…",
+    oninput: e => filterTable(e.target.value.toLowerCase()),
+  }));
+  filterRow.appendChild(el("button", {
+    class: "btn", onclick: () => toggleSelectAll(true) }, "Select all"));
+  filterRow.appendChild(el("button", {
+    class: "btn", onclick: () => toggleSelectAll(false) }, "Clear"));
+  filterRow.appendChild(el("button", {
+    class: "btn primary", id: "vizBtn", onclick: visualizeSelected,
+    disabled: "" }, "Visualize selected"));
+  filterRow.appendChild(el("button", {
+    class: "btn", onclick: () => fetchSubmissions() }, "↻ Refresh"));
+  sec1.appendChild(filterRow);
+
+  sec1.appendChild(el("div", { id: "tableWrap" }));
+  main.appendChild(sec1);
+
+  // visualisation slot
+  const sec2 = el("div", { id: "viz", style: "display:none" });
+  main.appendChild(sec2);
+
+  app.appendChild(main);
+}
+
+async function fetchSubmissions() {
+  try {
+    const r = await fetch("./api/admin/submissions", {
+      headers: { "X-Admin-Password": adminPw() },
+    });
+    if (r.status === 401) { clearAdminPw(); renderLogin(); return; }
+    if (!r.ok) {
+      showToast(`Fetch failed (HTTP ${r.status})`, true);
+      return;
+    }
+    const j = await r.json();
+    SUBMISSIONS = j.submissions || [];
+    SELECTED = new Set();
+    renderTable();
+    document.getElementById("summaryMeta").textContent =
+      `${SUBMISSIONS.length} submission${SUBMISSIONS.length===1?"":"s"}, ` +
+      `${new Set(SUBMISSIONS.map(s=>s.rater_email)).size} unique raters`;
+  } catch (e) {
+    showToast("Fetch failed: " + e.message, true);
+  }
+}
+
+function renderTable() {
+  const wrap = document.getElementById("tableWrap");
+  wrap.innerHTML = "";
+  const table = el("table");
+  const thead = el("thead");
+  thead.appendChild(el("tr", {},
+    el("th", { style: "width:32px" }, ""),
+    el("th", {}, "Rater"),
+    el("th", { class: "email" }, "Email"),
+    el("th", {}, "Status"),
+    el("th", {}, "Scores"),
+    el("th", {}, "Cases"),
+    el("th", {}, "Received (UTC)"),
+    el("th", {}, "Action"),
+    el("th", { class: "path" }, "Path"),
+  ));
+  table.appendChild(thead);
+  const tbody = el("tbody", { id: "tbody" });
+  for (const s of SUBMISSIONS) {
+    tbody.appendChild(renderRow(s));
+  }
+  table.appendChild(tbody);
+  wrap.appendChild(table);
+  updateVizBtn();
+}
+
+function renderRow(s) {
+  const tr = el("tr", { "data-path": s.path });
+  const cb = el("input", { type: "checkbox" });
+  cb.addEventListener("change", () => {
+    if (cb.checked) SELECTED.add(s.path); else SELECTED.delete(s.path);
+    updateVizBtn();
+  });
+  if (SELECTED.has(s.path)) cb.checked = true;
+  tr.appendChild(el("td", {}, cb));
+  tr.appendChild(el("td", {},
+    s.rater_name || "(unnamed)",
+    s.is_admin ? el("span", { class: "badge admin" }, "admin") : null,
+  ));
+  tr.appendChild(el("td", { class: "email" }, s.rater_email || "—"));
+  const status = s.status || (s.path.includes("in_progress") ? "in_progress" : "final");
+  tr.appendChild(el("td", {},
+    el("span", { class: "badge " + status }, status)));
+  tr.appendChild(el("td", {}, String(s.n_scores ?? "—")));
+  tr.appendChild(el("td", {}, String(s.n_cases ?? "—")));
+  tr.appendChild(el("td", {},
+    (s.received_at_utc || "—").replace("T"," ").replace("Z","")));
+  // Row actions: view-as + delete
+  const actionCell = el("td", { style: "white-space:nowrap" });
+  if (s.rater_email) {
+    actionCell.appendChild(el("button", {
+      class: "btn",
+      style: "padding:3px 8px;margin-right:4px",
+      title: "open the main study page with this user's data preloaded",
+      onclick: () => viewAs(s),
+    }, "👁 View"));
+  }
+  actionCell.appendChild(el("button", {
+    class: "btn danger",
+    style: "padding:3px 8px;font-size:11px",
+    title: "permanently delete this submission JSON from the dataset",
+    onclick: () => deleteSubmission(s),
+  }, "🗑"));
+  tr.appendChild(actionCell);
+  // Path → link to dataset blob view
+  const pathLink = el("a", {
+    href: `https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/blob/main/${s.path}`,
+    target: "_blank", rel: "noopener",
+    style: "color:var(--muted);text-decoration:none",
+    title: "open raw JSON on the dataset",
+  }, s.path);
+  tr.appendChild(el("td", { class: "path" }, pathLink));
+  return tr;
+}
+
+function filterTable(needle) {
+  for (const tr of document.querySelectorAll("#tbody tr")) {
+    const txt = tr.textContent.toLowerCase();
+    tr.style.display = txt.includes(needle) ? "" : "none";
+  }
+}
+function toggleSelectAll(on) {
+  SELECTED = new Set(on ? SUBMISSIONS.map(s=>s.path) : []);
+  renderTable();
+}
+function updateVizBtn() {
+  const btn = document.getElementById("vizBtn");
+  if (!btn) return;
+  btn.textContent = `Visualize selected (${SELECTED.size})`;
+  btn.disabled = SELECTED.size === 0;
+}
+
+/* ---------- delete a submission ---------- */
+async function deleteSubmission(s) {
+  const who = s.rater_name || s.rater_email || "this submission";
+  if (!confirm(`Permanently delete ${s.path}?\n\nRater: ${who}\nScores: ${s.n_scores ?? "?"}\n\nThis cannot be undone.`)) return;
+  try {
+    const r = await fetch("./api/admin/submission", {
+      method: "DELETE",
+      headers: { "Content-Type": "application/json", "X-Admin-Password": adminPw() },
+      body: JSON.stringify({ path: s.path }),
+    });
+    if (r.status === 401) { clearAdminPw(); renderLogin(); return; }
+    if (!r.ok) {
+      const text = await r.text().catch(() => "");
+      showToast(`Delete failed (HTTP ${r.status}): ${text.slice(0, 80)}`, true);
+      return;
+    }
+    showToast(`Deleted ${who}`);
+    // Remove from local list + selection, re-render
+    SUBMISSIONS = SUBMISSIONS.filter(x => x.path !== s.path);
+    SELECTED.delete(s.path);
+    renderTable();
+    document.getElementById("summaryMeta").textContent =
+      `${SUBMISSIONS.length} submission${SUBMISSIONS.length===1?"":"s"}, ` +
+      `${new Set(SUBMISSIONS.map(x=>x.rater_email)).size} unique raters`;
+  } catch (e) {
+    showToast("Delete failed: " + e.message, true);
+  }
+}
+
+/* ---------- view-as: open main UI populated with this user's submission ---- */
+async function viewAs(submissionMeta) {
+  try {
+    const url = `https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/${submissionMeta.path}`;
+    const r = await fetch(url, { cache: "no-cache" });
+    if (!r.ok) { showToast(`Fetch failed: HTTP ${r.status}`, true); return; }
+    const payload = await r.json();
+    // Persist for the main page to pick up — sessionStorage so it doesn't
+    // contaminate localStorage long-term, and sits in this tab/window only.
+    sessionStorage.setItem("user_study_view_as", JSON.stringify({
+      opened_at: new Date().toISOString(),
+      meta: submissionMeta,
+      payload,
+    }));
+    window.open("./?view_as=1", "_blank");
+    showToast(`Opening main UI as ${submissionMeta.rater_name || submissionMeta.rater_email}`);
+  } catch (e) {
+    showToast("View-as failed: " + e.message, true);
+  }
+}
+
+/* ---------- visualization ---------- */
+async function visualizeSelected() {
+  if (SELECTED.size === 0) return;
+  const viz = document.getElementById("viz");
+  viz.style.display = "block";
+  viz.innerHTML = "<h2>Loading selected submissions…</h2>";
+
+  const submissions = [];
+  for (const path of SELECTED) {
+    try {
+      const url = `https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/${path}`;
+      const r = await fetch(url, { cache: "no-cache" });
+      if (r.ok) submissions.push(await r.json());
+    } catch (e) { /* skip */ }
+  }
+  renderViz(submissions);
+}
+
+function renderViz(payloads) {
+  // bag: (model, qkey) -> scores
+  const bag = {};
+  for (const p of payloads) {
+    for (const c of (p.cases || [])) {
+      for (const v of (c.videos || [])) {
+        const m = v.model || "unknown";
+        for (const [qk, score] of Object.entries(v.ratings || {})) {
+          if (typeof score === "number" && score >= 1 && score <= 5) {
+            (bag[`${m}|${qk}`] ||= []).push(score);
+          }
+        }
+      }
+    }
+  }
+  const models = Array.from(new Set(Object.keys(bag).map(k => k.split("|")[0])));
+  models.sort((a,b) => (a === "ours" ? -1 : b === "ours" ? 1 : a.localeCompare(b)));
+  const COLORS = ["#6aa9ff","#ff9f43","#28c76f","#ea5455","#b46aff"];
+  const mcolor = Object.fromEntries(models.map((m,i) => [m, COLORS[i % COLORS.length]]));
+
+  const viz = document.getElementById("viz");
+  viz.innerHTML = "";
+  viz.appendChild(el("h2", {},
+    `Aggregate over ${payloads.length} selected submission(s)`));
+
+  // Per dimension
+  const dimDiv = el("section", { style: "background:transparent;border:none;padding:0" });
+  dimDiv.appendChild(el("h2", {}, "Per dimension"));
+  const dimCanvas = el("canvas");
+  dimDiv.appendChild(dimCanvas);
+  viz.appendChild(dimDiv);
+
+  function mean(arr){ return arr.length ? arr.reduce((a,b)=>a+b,0)/arr.length : null; }
+  function statsFor(qkeys, m){
+    const all = [];
+    for (const qk of qkeys) all.push(...(bag[`${m}|${qk}`] || []));
+    return all;
+  }
+  const dimLabels = DIMENSIONS.map(d => d.label);
+  const dimData = models.map(m => ({
+    label: m,
+    data: DIMENSIONS.map(d => mean(statsFor(d.questions.map(q=>q[0]), m))),
+    backgroundColor: mcolor[m] + "cc",
+    borderColor: mcolor[m], borderWidth: 1,
+  }));
+  new Chart(dimCanvas, {
+    type: "bar",
+    data: { labels: dimLabels, datasets: dimData },
+    options: {
+      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
+  viz.appendChild(el("h2", { style: "margin-top:14px" }, "Per sub-question"));
+  for (const d of DIMENSIONS) {
+    for (const [qk, qlabel] of d.questions) {
+      const block = el("div", { class: "q-block" });
+      const total = models.reduce((n,m) => n + (bag[`${m}|${qk}`]||[]).length, 0);
+      block.appendChild(el("div", { class: "q-title" }, qlabel));
+      block.appendChild(el("div", { class: "q-dim" }, d.label + (total ? ` · n=${total}` : " · (no data)")));
+      if (total) {
+        const c = el("canvas");
+        block.appendChild(c);
+        const datasets = models.map(m => ({
+          label: m,
+          data: [mean(bag[`${m}|${qk}`] || [])],
+          backgroundColor: mcolor[m] + "cc",
+          borderColor: mcolor[m], borderWidth: 1,
+        }));
+        new Chart(c, {
+          type: "bar",
+          data: { labels: [qlabel], datasets },
+          options: {
+            indexAxis: "y", scales: {
+              x: { min: 0, max: 5, ticks: { color: "#8b91a8" }, grid: { color: "#2a2f42" } },
+              y: { ticks: { display: false }, grid: { display: false } },
+            },
+            plugins: { legend: { labels: { color: "#e6e8ef" } } },
+          },
+        });
+      }
+      viz.appendChild(block);
+    }
+  }
+  viz.scrollIntoView({ behavior: "smooth", block: "start" });
+}
+
+/* ---------- boot ---------- */
+(function init(){
+  if (adminPw()) {
+    // Probe a cheap endpoint to validate the cached password.
+    fetch("./api/admin/submissions", {
+      headers: { "X-Admin-Password": adminPw() },
+    }).then(r => {
+      if (r.status === 401) { clearAdminPw(); renderLogin(); }
+      else { renderDashboard(); fetchSubmissions(); }
+    }).catch(() => renderLogin());
+  } else {
+    renderLogin();
+  }
+})();
+</script>
+</body>
+</html>

static/v2/cases.json

@@ -0,0 +1,462 @@
+[
+  {
+    "id": "AU01",
+    "category": "au",
+    "prompt": "Night rain over a ruined sect courtyard. Wei Anluo, a lame-legged youth branded \"spirit-dead,\" kneels in mud beside a frozen well, dragged there to be expelled. Above him looms Xie Rulong, a golden-robed prodigy who snaps Wei's cracked jade token and, with a contemptuous flick of his palm, unleashes a silent shockwave — Wei is hurled through a stone wall, dust and shattered brick blooming outward, one sleeve torn, a single defiant tear cutting his grimed cheek. He does not scream. As frost creeps up his fingers, an old sealing-mark on his wrist splinters; buried frost- qi he was never told he carried erupts in a spiral of white spirit-light, freezing the falling rain mid-air into glittering needles. Xie Rulong staggers back, golden robe rimed silver. The \"cripple\" rises.",
+    "prompt_i18n": {
+      "zh": "夜雨落在残破的宗门庭院。魏安洛，一个被烙上“灵脉已死”之名的跛足少年，跪在冰封水井旁的泥泞里——他是被拖来当众逐出宗门的。金袍天才谢如龙居高临下，折断魏安洛开裂的玉牌，轻蔑地一挥掌，掀起一道无声的冲击波——魏安洛被轰穿石墙，尘土与碎砖向外炸开，一只衣袖撕裂，一滴倔强的泪划过他满是污泥的脸颊。他没有喊叫。当寒霜爬上他的手指，他腕上一道古老的封印裂开；他从不知晓自己身负的冰霜之气以白色灵光的螺旋喷薄而出，将坠落的雨水冻结在半空，化作闪亮的冰针。谢如龙踉跄后退，金袍覆上一层银霜。那个“废人”站了起来。",
+      "bg": "Нощен дъжд над разрушен двор на секта. Уей Анлуо, куц младеж, заклеймен като „мъртъв по дух“, коленичи в калта до замръзнал кладенец, довлечен там, за да бъде прогонен. Над него се извисява Сие Жулун, гений в златни одежди, който прекършва напукания нефритен знак на Уей и с презрителен замах на дланта отприщва безмълвна ударна вълна — Уей е запратен през каменна стена, прах и натрошени тухли се разлитат, единият му ръкав е разкъсан, а една-единствена непокорна сълза прорязва изцапаната му буза. Той не изкрещява. Докато скрежът пълзи по пръстите му, старият запечатващ знак на китката му се пропуква; скритата ледена ци, за която никога не са му казвали, изригва в спирала от бяла духовна светлина, замразявайки падащия дъжд във въздуха в блестящи игли. Сие Жулун залита назад, златната му роба е посребрена от скреж. „Сакатият“ се изправя."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU01_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU01_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU01_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU02",
+    "category": "au",
+    "prompt": "On a snow-locked stone bridge at dawn, aging swordsman Han Muxue kneels, his blade snapped at the hilt — publicly disgraced, stripped of his sect, blamed for a killing he did not commit. Across the bridge strides Yan Zhuo, a masked duelist who has come to finish him, sleeve rippling like a black banner. Behind Han crouches a trembling child, Ah-Lu, the true witness Yan must silence. Han rises with only the broken hilt, bowing once — accepting death to shield the child. Blades meet as flashes of white wind and scattering plum petals; a shockwave cracks the frozen railing. Dust clears: Han stands, hilt raised, Yan's mask fallen — revealing Yan wept, unable to strike a man who chose the child over his own name.",
+    "prompt_i18n": {
+      "zh": "黎明时分，冰雪封锁的石桥上，年迈剑客韩慕雪跪在地上，长剑齐柄折断——他当众受辱，被逐出师门，背负一桩并非他所犯的命案。桥对面，蒙面决斗者燕灼大步走来，要来了结他，衣袖如黑色旗帜般翻卷。韩慕雪身后蜷缩着一个发抖的孩子，阿禄——燕灼必须灭口的真正目击者。韩慕雪只握着断剑柄站起身，躬身一礼——他接受死亡，只为护住孩子。剑刃相接，白风闪烁、梅瓣纷飞；一道冲击波震裂了冰封的桥栏。尘埃散尽：韩慕雪立着，断柄高举，燕灼的面具落地——原来燕灼已然落泪，无法对一个把孩子看得比自己名誉更重的人挥剑。",
+      "bg": "На заключен от снега каменен мост призори застаряващият мечоносец Хан Мусюе е коленичил, острието му е прекършено до дръжката — публично опозорен, изгонен от сектата си, обвинен в убийство, което не е извършил. През моста крачи Йен Джуо, маскиран дуелист, дошъл да го довърши, ръкавът му се вее като черно знаме. Зад Хан се свива треперещо дете, А-Лу — истинският свидетел, когото Йен трябва да накара да замълчи. Хан се изправя само със счупената дръжка и се покланя веднъж — приема смъртта, за да защити детето. Остриетата се срещат сред проблясъци на бял вятър и разпиляни сливови цветчета; ударна вълна пропуква замръзналия парапет. Прахът се разсейва: Хан стои прав с вдигната дръжка, маската на Йен е паднала — разкривайки, че Йен е плакал, неспособен да посече човек, избрал детето пред собственото си име."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU02_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU02_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU02_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU03",
+    "category": "au",
+    "prompt": "Rain hammers a glass tower lobby. Lin Tang, a soaked delivery rider, is shoved back by security as icy heiress Fang Rulan tears up his order and flings the box, dismissing him as \"gutter trash\" before a smirking crowd. Head bowed, dripping, he kneels to gather scattered receipts — and one flutters face-up: a faded hospital bill, her mother's name, a signature that stops her cold. Wei slowly lifts his eyes; the same signature is stitched inside his worn jacket. He is the anonymous donor who saved her mother years ago. The lobby freezes. Fang's arrogance collapses into trembling recognition; the crowd's phones lower. Wei simply retrieves his helmet, bows once, and walks into the storm — leaving her small, silent, undone beneath the lights.",
+    "prompt_i18n": {
+      "zh": "暴雨击打着玻璃大厦的大堂。浑身湿透的外卖骑手林塘被保安推搡出去，冷艳的千金方如兰撕碎他的订单、把餐盒摔在地上，当着一群窃笑的围观者骂他是“阴沟里的垃圾”。他低着头，滴着水，跪下去捡散落的票据——其中一张正面朝上飘落：一张褪色的医院账单，上面是她母亲的名字，和一个让她浑身僵住的签名。魏缓缓抬起眼；同样的签名就缝在他破旧外套的内衬里。他就是多年前救了她母亲的匿名捐助者。大堂瞬间凝固。方如兰的傲慢崩塌成颤抖的错愕；围观者的手机纷纷放下。魏只是拾起头盔，鞠了一躬，走进暴雨——留下她在灯光下显得渺小、沉默、无地自容。",
+      "bg": "Дъжд блъска по фоайето на стъклена кула. Лин Тан, прогизнал куриер, е избутан от охраната, докато ледената наследница Фан Жулан къса поръчката му и запраща кутията, наричайки го „боклук от канавката“ пред подхилваща се тълпа. С наведена глава, капейки, той коленичи да събере разпилените касови бележки — и една пада с лицето нагоре: избеляла болнична сметка, името на майка ѝ и подпис, който я вцепенява. Уей бавно вдига очи; същият подпис е пришит от вътрешната страна на износеното му яке. Той е анонимният дарител, спасил майка ѝ преди години. Фоайето замръзва. Арогантността на Фан рухва в треперещо разпознаване; телефоните на тълпата се снижават. Уей прос��о взема каската си, покланя се веднъж и излиза в бурята — оставяйки я малка, безмълвна и съкрушена под светлините."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU03_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU03_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU03_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU04",
+    "category": "au",
+    "prompt": "Aboard the crippled colony freighter Meridian, junior engineer Wen Solari is the only crew awake as the reactor overloads. A red countdown burns across the bridge: ninety seconds to a chain detonation that will vaporize four hundred sleeping evacuees. Captain Idris Vale, unconscious in his pod, cannot help. Wen races to the coolant airlock, but the only override is manual — someone must stay outside the shield to hold the release. She hesitates, tears trembling in zero-g, then clamps her tether and steps into the vacuum. As the countdown hits zero, she wrenches the lever; a silent shockwave floods the hull with cold blue light, the reactor stills, the escape pods launch safe. Her cracked visor drifts free — but on it, one final smile, and a message uploading: \"Tell them I wasn't useless.\"",
+    "prompt_i18n": {
+      "zh": "残破的殖民货船“子午线号”上，反应堆过载时，初级工程师温·索拉里是唯一清醒的船员。舰桥上燃烧着红色倒计时：九十秒后，连锁爆炸将汽化四百名沉睡的撤离者。船长伊德里斯·韦尔在休眠舱中昏迷，无能为力。温冲向冷却剂气闸，但唯一的超控装置是手动的——必须有人留在护盾之外按住释放杆。她犹豫了，泪珠在零重力中颤动，随后扣紧系绳，踏入真空。倒计时归零的一刻，她猛地扳下拉杆；一道无声的冲击波让冷蓝的光淹没船体，反应堆平息，逃生舱安全弹射。她碎裂的面罩飘离——上面是最后一个微笑，和一条正在上传的讯息：“告诉他们，我不是没用的人。”",
+      "bg": "На борда на осакатения колонизаторски товарен кораб „Меридиан“ младшият инженер Уен Солари е единственият буден член на екипажа, когато реакторът се претоварва. Червено обратно броене гори на мостика: деветдесет секунди до верижна детонация, която ще изпари четиристотин спящи евакуирани. Капитан Идрис Вейл, в безсъзнание в капсулата си, не може да помогне. Уен се втурва към шлюза за охладителя, но единственото аварийно превключване е ръчно — някой трябва да остане извън щита и да държи лоста. Тя се колебае, сълзите ѝ треперят в безтегловност, после закопчава осигурителното си въже и пристъпва във вакуума. Когато броенето стига нула, тя дръпва лоста; безмълвна ударна вълна залива корпуса със студена синя светлина, реакторът утихва, спасителните капсули се изстрелват в безопасност. Пукнатият ѝ визьор се отнася настрани — но върху него грее последна усмивка и качващо се съобщение: „Кажете им, че не бях безполезна.“"
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU04_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU04_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU04_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU05",
+    "category": "au",
+    "prompt": "Tiny baker Pip carries a wobbling three-tier birthday cake across a bustling kitchen, tongue out in concentration. A sneeze from cat Marmalade launches a cascade: a rolling lemon trips a stool, the stool flings a whisk, the whisk splats flour into a fan that blows a snowstorm across the room. Pip juggles, spins, slides on butter, and saves the cake mid-flip with a triumphant pose atop a teetering ladder. Then he freezes—the ladder tips. He turns his own body into a cushion, letting the cake land safely on his belly as HE crashes into dough, buried, defeated. Silence. Slowly a small hand pushes the untouched cake up through the mess toward gruff old baker Bruno—whose stern frown melts into astonished, teary pride. Impact stars, warm golden light.",
+    "prompt_i18n": {
+      "zh": "小小烘焙师皮普端着一个摇摇欲坠的三层生日蛋糕穿过繁忙的厨房，舌尖抵着嘴角全神贯注。猫咪玛玛蕾德一个喷嚏引发连环灾难：滚动的柠檬绊倒凳子，凳子弹飞打蛋器，打蛋器把面粉拍进风扇，风扇把一场“暴风雪”吹遍整个厨房。皮普又抛又转，在黄油上滑行，在蛋糕翻飞的瞬间接住它，还在摇晃的梯子顶端摆出胜利姿势。随后他僵住了——梯子倾倒。他把自己的身体变成软垫，让蛋糕安全落在他的肚子上，而他自己砸进面团里，被埋住，狼狈不堪。一片寂静。慢慢地，一只小手把完好无损的蛋糕从狼藉中托起，递向严厉的老烘焙师布鲁诺——他紧绷的眉头融化成又惊又喜、含着泪的骄傲。冲击星星特效，温暖的金色光芒。",
+      "bg": "Мъничкият пекар Пип носи клатеща се триетажна торта за рожден ден през оживена кухня, изплезил език от съсредоточение. Кихавица на котарака Мармалад отприщва каскада: търкалящ се лимон спъва столче, столчето изхвърля телена бъркалка, бъркалката запраща брашно във вентилатор, който издухва снежна буря из стаята. Пип жонглира, върти се, пързаля се по масло и спасява тортата в движение, заемайки триумфална поза върху клатеща се стълба. После замръзва — стълбата се накланя. Той превръща собственото си тяло във възглавница, оставяйки тортата да се приземи безопасно върху корема му, докато САМИЯТ той се стоварва в тестото, затрупан, победен. Тишина. Бавно една малка ръка избутва непокътнатата торта нагоре през хаоса към навъсения стар пекар Бруно — чието строго смръщване се разтапя в изумена, просълзена гордост. Звездички от удара, топла златиста светлина."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU05_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU05_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU05_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU06",
+    "category": "au",
+    "prompt": "Every dusk for three winters, old Maren climbs the spiral stairs of a snowbound lighthouse and lights the lamp for her son Eirik, a fisherman lost at sea. Villagers whisper she's mad; the boy won't return. Tonight her hands shake, the oil is nearly gone, and a storm claws the windows. She lights the wick anyway, then collapses on the cold stone, whispering his name one final time as the flame gutters. Snow sifts through a broken pane. Suddenly a distant foghorn answers through the blizzard — a battered boat scrapes the rocks below. The door bursts open: Eirik, gaunt and frost-bitten, alive after years adrift. He kneels, pressing her frail hand to his cheek. The lamp steadies. Wordless, they weep in its trembling amber glow.",
+    "prompt_i18n": {
+      "zh": "整整三个冬天，每到黄昏，老玛伦都会爬上被雪封住的灯塔的旋转楼梯，为她的儿子埃里克点亮灯——那是一个在海上失踪的渔夫。村民们窃窃私语说她疯了，说孩子不会回来了。今晚她双手颤抖，灯油即将耗尽，风暴抓挠着窗户。她还是点燃了灯芯，随后瘫倒在冰冷的石地上，在火焰摇曳将熄时最后一次轻唤他的名字。雪从破裂的窗格间飘落。突然，一声遥远的雾号穿透暴风雪回应了她——一艘伤痕累累的船擦着下方的礁石靠岸。门被撞开：埃里克，憔悴而带着冻伤，在漂流多年后活着回来了。他跪下，把她枯瘦的手贴在自己脸颊上。灯焰稳定下来。无言中，两人在颤动的琥珀色光芒里落泪���",
+      "bg": "Всеки здрач в продължение на три зими старата Марен изкачва витата стълба на затрупан от сняг фар и пали лампата за сина си Ейрик, рибар, изгубен в морето. Селяните шушукат, че е луда; момчето нямало да се върне. Тази вечер ръцете ѝ треперят, маслото е почти свършило, а буря дращи по прозорците. Тя все пак запалва фитила, после се свлича върху студения камък, прошепвайки името му за последен път, докато пламъкът мъждука. Сняг се сипе през счупено стъкло. Внезапно далечна мъглива сирена отговаря през виелицата — очукана лодка застъргва по скалите долу. Вратата се разтваря с трясък: Ейрик, изпит и измръзнал, жив след години в открито море. Той коленичи и притиска крехката ѝ ръка към бузата си. Пламъкът се успокоява. Без думи двамата плачат в трептящото му кехлибарено сияние."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU06_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU06_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU06_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU07",
+    "category": "au",
+    "prompt": "On a windswept cliff, a broken stone bridge arcs over a bottomless chasm toward a floating temple where the dying Ashwood Flame — the only cure for a plague — still burns. Kaelis, a young map-thief with a trembling torch, reaches the bridge's end; the far half has crumbled to nothing. A cloaked Ferryman rises from the mist and offers a bargain: the flame for a memory of the one she loves. She refuses, backing away — then the stones beneath her shatter. Falling, she flings her satchel of maps into the void as an offering instead. The Ferryman freezes, astonished by a gift given, not traded, and the mist itself hardens into a glowing bridge. Kaelis lands, sprints, and cups the Flame — as behind her the chasm seals shut forever.",
+    "prompt_i18n": {
+      "zh": "狂风呼啸的悬崖上，一座断裂的石桥横跨无底深渊，通向一座漂浮的神庙——治愈瘟疫的唯一解药“灰木圣焰”仍在那里燃烧。年轻的地图窃贼凯莉丝举着颤抖的火把走到桥的尽头；桥的另一半已崩塌殆尽。一位披斗篷的摆渡人从雾中升起，开出交易：用她所爱之人的一段记忆换取圣焰。她拒绝了，向后退去——脚下的石块轰然碎裂。坠落之际，她把装满地图的挎包抛入深渊，作为献礼而非交易。摆渡人怔住了，为这份“给予而非交换”的礼物而震动，雾气自行凝结成一座发光的桥。凯莉丝落地、狂奔，双手捧起圣焰——身后深渊永远地闭合了。",
+      "bg": "На брулена от вятъра скала счупен каменен мост се извива над бездънна пропаст към плаващ храм, където все още гори гаснещият Пепеляков пламък — единственият лек срещу чума. Каелис, млада крадла на карти с трепереща факла, стига до края на моста; отсрещната половина се е сринала в нищото. Загърнат в плащ Лодкар се надига от мъглата и предлага сделка: пламъкът срещу спомен за човека, когото тя обича. Тя отказва и отстъпва назад — тогава камъните под нея се разтрошават. Падайки, тя запраща чантата си с карти в бездната като дар вместо размяна. Лодкарят застива, изумен от подарък, даден, а не разменен, и самата мъгла се втвърдява в светещ мост. Каелис се приземява, спринтира и обгръща Пламъка с длани — докато зад нея пропастта се затваря завинаги."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU07_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU07_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU07_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU08",
+    "category": "au",
+    "prompt": "Rain lashes a shuttered museum at 2 a.m. Mira, the lone night guard, hears footsteps where the halls should be empty. Penlight trembling, she follows wet prints between marble statues to a sealed gallery. Inside, a young hooded thief, Cole, freezes mid-theft, a gilded portrait half-cut from its frame. As Mira's beam rises, the painted woman's eyes slowly turn — wet with real tears — and fix on them both. Cole drops his tools and bolts into the dark. Mira steps closer, breath fogging the cold glass; the weeping portrait lifts a painted hand, pointing to a loose floorboard. Mira pries it up: a small locked box, and a photograph of the same woman holding a child who looks exactly like Mira.",
+    "prompt_i18n": {
+      "zh": "凌晨两点，暴雨抽打着闭馆的博物馆。独自值夜的警卫米拉听见了本应空无一人的走廊里传来脚步声。她举着颤抖的手电，循着湿脚印穿过大理石雕像，来到一间封闭的展厅。厅内，一个戴兜帽的年轻窃贼科尔僵在行窃途中，一幅镀金画像已被从画框上割下一半。当米拉的光束抬起，画中女子的眼睛缓缓转动——噙着真实的泪水——直直望向他们两人。科尔丢下工具逃进黑暗。米拉走近，呼吸在冰冷的玻璃上凝成雾气；流泪的画像抬起一只画中的手，指向一块松动的地板。米拉撬开它：一个上锁的小盒子，和一张照片——照片上正是画中女子，怀里抱着一个和米拉长得一模一样的孩子。",
+      "bg": "Дъжд шиба затворен музей в 2 през нощта. Мира, самотната нощна охранителка, чува стъпки там, където коридорите би трябвало да са празни. С треперещо фенерче тя проследява мокри отпечатъци между мраморни статуи до запечатана галерия. Вътре млад крадец с качулка, Коул, замръзва насред кражбата — позлатен портрет е наполовина изрязан от рамката си. Когато лъчът на Мира се вдига, очите на нарисуваната жена бавно се обръщат — мокри от истински сълзи — и се впиват в двамата. Коул зарязва инструментите си и хуква в мрака. Мира пристъпва по-близо, дъхът ѝ замъглява студеното стъкло; плачещият портрет вдига нарисувана ръка и посочва разхлабена дъска на пода. Мира я повдига: малка заключена кутия и снимка на същата жена, прегърнала дете, което изглежда точно като Мира."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU08_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU08_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU08_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU09",
+    "category": "au",
+    "prompt": "A besieged mountain town, deep winter, ink-and-color period animation. Old bell-master YAN LI works his foundry alone; the invaders will come at dawn and the town's only signal to the fleeing villagers below is the great temple bell — but its bronze is cracked, dead, silent. His apprentice MEI sobs that there is no metal left to recast it. Gu Li looks at his own hands, then at the family heirloom hairpin and the war-medals in his palm — a lifetime melted into the crucible. Molten gold pours; sparks storm; he casts the town's last hope from everything he owns. At dawn, wind and dust — Mei strikes the reforged bell. A pure, world-shaking toll rolls down the valley. Below, tiny lantern-figures turn and run to safety. Gu Li smiles, spent, as snow buries the cold empty forge.",
+    "prompt_i18n": {
+      "zh": "一座被围困的山城，深冬，水墨设色的年代动画。老铸钟师严离独自在铸坊劳作；侵略者将在黎明来袭，而山下逃难的村民唯一的信号是寺庙大钟——但钟身青铜已裂，喑哑无声。学徒小��哭诉再没有金属可以重铸。顾离看着自己的双手，又看向掌心的传家发簪和战功勋章——一生的珍藏都熔进了坩埚。金液倾泻，火花如暴雨；他用自己拥有的一切铸出全城最后的希望。黎明，风沙漫卷——小梅撞响重铸的大钟。一声纯净、撼动天地的钟鸣滚下山谷。山下，细小的灯笼人影纷纷转身奔向安全之地。顾离微笑着，力竭，任大雪掩埋冰冷空寂的铸坊。",
+      "bg": "Обсаден планински град, дълбока зима, анимация в стил туш и цвят. Старият майстор на камбани Йен Ли работи сам в леярната си; нашествениците ще дойдат на разсъмване, а единственият сигнал на града към бягащите селяни долу е голямата храмова камбана — но бронзът ѝ е спукан, мъртъв, безмълвен. Чиракът Мей ридае, че не е останал метал за претопяване. Гу Ли поглежда собствените си ръце, после семейната фиба-реликва и бойните медали в дланта си — цял живот, стопен в тигела. Разтопено злато се лее; искри бушуват; той отлива последната надежда на града от всичко, което притежава. На разсъмване — вятър и прах — Мей удря прекованата камбана. Чист, разтърсващ света звън се търкулва надолу по долината. Долу мънички фигурки с фенери се обръщат и хукват към безопасността. Гу Ли се усмихва, изчерпан, докато снегът затрупва студената пуста леярна."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU09_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU09_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU09_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "AU10",
+    "category": "au",
+    "prompt": "After three centuries adrift, the vast seed-ship Auriga finally nears Kepler's Cradle, a luminous blue world its long-dead founders only dreamed of. Nova, a young navigator born in transit who has never touched soil, guides the ship toward the last hazard: a glittering ring of ancient debris closing across their path. Alarms bloom red across the bridge. Nova's hands fly over the helm, threading the mountain-sized ship through spinning wreckage as starlight strobes the windows. A final jagged shard looms dead ahead; she rolls Auriga hard on its axis and it slips past by mere meters. The debris falls away behind. Ahead, the blue world swells to fill the viewport, its oceans catching a new sun. Behind her, thousands of sleep-pods hiss open at last. Nova presses a trembling palm to the glass, tears rising, as the first of her people wake to a sky none of them have ever seen.",
+    "prompt_i18n": {
+      "zh": "漂泊三个世纪之后，巨大的种子船“御夫座号”终于接近“开普勒摇篮”——一颗它早已逝去的创建者们只在梦中见过的湛蓝星球。诺娃，一位生于航程中、从未踏上过土地的年轻领航员，引导飞船穿越最后的险关：一圈闪烁的远古残骸正合拢在航路上。警报的红光在舰桥上绽开。诺娃的双手在操纵台上翻飞，驾驶山岳般巨大的飞船穿行于旋转的残骸之间，星光在舷窗上频闪。最后一块锋利的碎片迎面逼来；她让“御夫座号”沿轴线猛然翻滚，以数米之差擦身而过。残骸带向后退去。前方，蓝色星球涨满舷窗，海洋映着一轮新的太阳。她身后，数千个休眠舱终于嘶鸣开启。诺娃颤抖的手掌贴上舷窗，热泪涌起——她的同胞正第一次醒来，望见一片他们从未见过的天空。",
+      "bg": "След три века лутане огромният кораб-семе „Аурига“ най-сетне наближава Люлката на Кеплер, сияен син свят, за който отдавна мъртвите му основатели само са мечтали. Нова, млада навигаторка, родена по време на полета и никога не докосвала земя, води кораба през последната опасност: блестящ пръстен от древни отломки, затварящ се пред курса им. Аларми разцъфват в червено по мостика. Ръцете на Нова летят по щурвала, промушвайки кораба с размерите на планина през въртящи се останки, докато звездната светлина примигва по прозорците. Последен назъбен къс се изправя точно отпред; тя завърта „Аурига“ рязко около оста ѝ и корабът се разминава с него на броени метри. Отломките остават назад. Отпред синият свят изпълва илюминатора, океаните му улавят ново слънце. Зад нея хиляди капсули за сън най-сетне се отварят със съскане. Нова притиска трепереща длан към стъклото, сълзите напират, докато първите от нейните хора се събуждат под небе, което никой от тях никога не е виждал."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU10_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU10_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/AU10_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "MV_DespicableMe4",
+    "category": "mv",
+    "prompt": "Neon-lit rooftop at night. Borin, a bald secret agent in a striped scarf, corners the escaped rogue Vex, whose cybernetic cockroach-suit hisses and clacks. Vex lunges; Borin dodges and fires a freeze-ray that ices one of Vex's mechanical legs. Below, a squad of small round helper-drones whirs up a drainpipe and yanks a cable that topples Vex's escape pod. Nadia swoops in on a glowing hover-board to snatch a stolen data-chip, but a drone tangles her rotor and sends her spinning. As Vex and Nadia tumble into a deployed net, Borin straightens his scarf, smirks, and gives the beeping drones a proud thumbs-up.",
+    "prompt_i18n": {
+      "zh": "霓虹闪烁的夜间天台。博林，一个围条纹围巾的光头特工，将逃脱的恶徒维克斯逼入绝境——对方的机械蟑螂战衣嘶嘶作响、咔咔作声。维克斯猛扑过来；博林闪身躲开，发射冷冻射线冻住了维克斯的一条机械腿。下方，一队圆滚滚的小型助手无人机嗡嗡地爬上排水管，拽动缆绳掀翻了维克斯的逃生舱。娜迪亚踩着发光的悬浮滑板俯冲而来，要夺走被盗的数据芯片，却被一架无人机缠住旋翼，打着转跌落。当维克斯和娜迪亚双双跌进展开的大网，博林理了理围巾，得意一笑，对着哔哔叫的无人机们竖起骄傲的大拇指。",
+      "bg": "Огрян от неон покрив през нощта. Борин, плешив таен агент с раиран шал, притиска в ъгъла избягалия злодей Векс, чийто кибернетичен костюм-хлебарка съска и трака. Векс се хвърля; Борин отскача и стреля със замразяващ лъч, който сковава в лед един от механичните крака на Векс. Долу отряд малки кръгли дронове-помощници избръмчава нагоре по водосточна тръба и дръпва кабел, който преобръща спасителната капсула на Векс. Надя се спуска на светещ ховърборд, за да грабне откраднат чип с данни, но един дрон заплита ротора ѝ и я запраща във въртене. Докато Векс и Надя се строполяват в разгъната мрежа, Борин оправя шала си, ухилва се и вдига гордо палец към пиукащите дронове."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_DespicableMe4_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_DespicableMe4_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_DespicableMe4_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "MV_FrozenII",
+    "category": "mv",
+    "prompt": "Storm-lashed shore at night, waves like black mountains. Sereth, a young storm-caller in a tattered cloak, drawn by a haunting voice only she can hear, steps to the edge of the churning dark sea — a towering wave slams her back onto the rocks. She rises, blue lightning crackling from her hands, and charges into the surf again. A colossal serpent of living water erupts from the waves, fighting her; Sereth grapples with it, then binds a shimmering bridle of light across its neck and swings onto its back. She rides the serpent across the roaring sea, hair and cloak streaming, toward a distant lighthouse glowing with ancient memory. Reaching it, Sereth presses her trembling palm to the weathered stone — and the voice resolves at last into an old lullaby as forgotten memories bloom to life around her.",
+    "prompt_i18n": {
+      "zh": "风暴肆虐的夜岸，海浪如黑色群山。塞蕾丝，一位身披破旧斗篷的年轻风暴召唤者，被一个只有她能听见的萦绕之声吸引，走向翻涌的黑暗海边——一道巨浪将她狠狠拍回礁石。她站起身，双手迸发蓝色闪电，再次冲入浪涛。一条巨大的活水巨蟒从浪中喷涌而出与她缠斗；塞蕾丝与它搏斗，随后将一条微光缰辔缚上它的颈项，翻身跃上蛇背。她骑着水蟒横越咆哮的大海，长发与斗篷猎猎飞扬，驶向远方一座闪烁着古老记忆之光的灯塔。抵达后，塞蕾丝将颤抖的手掌贴上风化的石壁——那个声音终于化作一支古老的摇篮曲，被遗忘的记忆在她周围纷纷苏醒绽放。",
+      "bg": "Брулен от буря бряг през нощта, вълни като черни планини. Серет, млада призователка на бури в окъсано наметало, привлечена от натрапчив глас, който само тя чува, пристъпва към ръба на кипящото тъмно море — извисяваща се вълна я запраща обратно върху скалите. Тя се изправя, сини мълнии пращят от ръцете ѝ, и отново се хвърля в прибоя. Колосална змия от жива вода изригва от вълните и се бори с нея; Серет се вкопчва в змията, после стяга блещукаща юзда от светлина около шията ѝ и се мята на гърба ѝ. Тя язди змията през ревящото море, косата и наметалото ѝ се веят, към далечен фар, светещ с древна памет. Стигайки го, Серет притиска треперещата си длан към изветрелия камък — и гласът най-сетне се превръща в стара приспивна песен, докато забравени спомени разцъфват за живот около нея."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_FrozenII_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_FrozenII_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_FrozenII_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "MV_InsideOut2",
+    "category": "mv",
+    "prompt": "A packed arena under bright lights. Mira, a young hockey player, sits trembling in the penalty box, panic rising, her heart hammering and breath ragged as the roaring crowd blurs around her. Her team captain skates over, crouches to her level, taps her helmet, and talks her through one slow, steadying breath. Warmth returns to Mira's face. The penalty clock hits zero; she surges back onto the ice, weaving through defenders, and fires the puck into the net. The crowd erupts as Mira raises her stick, finally calm and triumphant.",
+    "prompt_i18n": {
+      "zh": "灯火通明、座无虚席的冰球馆。年轻冰球选手米拉坐在受罚席上瑟瑟发抖，恐慌不断上涌，心脏狂跳、呼吸急促，轰鸣的人群在她眼前模糊成一片。队长滑过来，蹲到与她平视的高度，敲敲她的头盔，引导她缓缓做了一次深长的呼吸。暖意回到米拉脸上。罚时钟归零；她重新冲上冰面，连续穿过防守队员，将冰球射入球网。全场沸腾，米拉高举球杆，终于平静而胜利。",
+      "bg": "Претъпкана арена под ярки светлини. Мира, млада хокеистка, седи трепереща в наказателното поле, паниката се надига, сърцето ѝ блъска, дъхът ѝ е накъсан, а ревящата тълпа се размива около нея. Капитанът на отбора се плъзга към нея, ��нишава се до нейното ниво, почуква каската ѝ и я превежда през едно бавно, успокояващо вдишване. Топлината се връща на лицето на Мира. Наказателният часовник стига нула; тя се втурва обратно на леда, лъкатуши между защитниците и запраща шайбата в мрежата. Тълпата избухва, а Мира вдига стика си — най-сетне спокойна и триумфираща."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_InsideOut2_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_InsideOut2_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_InsideOut2_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "MV_NeZha2",
+    "category": "mv",
+    "prompt": "Chentang Pass under siege at dusk, storm clouds churning. Nezha, a fierce child-warrior with flaming red sashes and the Wind-Fire Wheels roaring beneath his feet, whirls his blazing spear against a tide of sea-demons led by the sinister Shenggongbao. Aobing, the jade-armored dragon prince, fights at his side, conjuring shields of blue ice. A demon's blow hurls Aobing back and his body begins to crack like porcelain. Nezha screams, unleashing a spiral of golden fire that scatters the demons, and lunges to catch Aobing before he shatters. Cradling his crumbling friend amid the burning ramparts, Nezha's eyes harden with resolve — he will find a way to save him.",
+    "prompt_i18n": {
+      "zh": "黄昏下被围攻的陈塘关，风暴云翻滚。哪吒——束着烈焰红绫、脚踏轰鸣风火轮的凶悍孩童战士——挥舞燃烧的长枪，迎战阴险的申公豹率领的海妖大军。玉甲龙太子敖丙在他身侧作战，召唤出蓝色寒冰之盾。一记妖魔的重击将敖丙击飞，他的身体开始像瓷器般龟裂。哪吒嘶吼着释放出一道金色火焰的螺旋，击散群妖，扑身接住即将碎裂的敖丙。在燃烧的城垛间抱着支离破碎的挚友，哪吒的眼神变得坚毅——他一定会找到救他的办法。",
+      "bg": "Проходът Чънтан под обсада по здрач, буреносни облаци се кълбят. Неджа, свиреп воин-дете с пламтящи червени ленти и ревящи Огнени колела под краката, върти пламтящото си копие срещу вълна от морски демони, водени от зловещия Шънгунбао. Аобин, драконовият принц в нефритена броня, се бие до него, призовавайки щитове от син лед. Удар на демон запраща Аобин назад и тялото му започва да се пука като порцелан. Неджа изкрещява, отприщвайки спирала от златен огън, която разпръсква демоните, и се хвърля да улови Аобин, преди да се разпадне. Прегърнал разпадащия се свой приятел сред горящите укрепления, погледът на Неджа се изпълва с решимост — той ще намери начин да го спаси."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_NeZha2_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_NeZha2_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_NeZha2_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "MV_NovelStory_2",
+    "category": "mv",
+    "prompt": "A mist-veiled mountain gorge, ink-wash peaks fading into cloud. Sun Wukong, the Monkey King in golden armor, clutches a glowing celestial artifact as ErLang, the three-eyed celestial warrior, descends on a beam of white light with his three-pointed halberd leveled. They clash mid-air — staff against blade — shockwaves flattening the bamboo grove below. Nearby the pig-demon Bajie cowers behind a boulder, clutching his rake, torn between fleeing and helping. Wukong somersaults over ErLang's strike, plants his staff, and vaults toward a cliffside temple. ErLang's celestial hound lunges to intercept; Bajie, yelping, finally swings his rake and trips it, buying Wukong a heartbeat. Wukong glances back, a wry grin flashing — the chase is far from over.",
+    "prompt_i18n": {
+      "zh": "云雾缭绕的山峡，水墨般的峰峦隐入云端。身披金甲的美猴王孙悟空紧握一件发光的天界宝物，三眼天将二郎神踏着白光而降，三尖两刃刀直指向他。两人在半空相撞——金箍棒对刀刃——冲击波掀平了下方的竹林。不远处，猪妖八戒抱着钉耙缩在巨石后，在逃跑与相助之间左右为难。悟空一个筋斗翻过二郎神的劈砍，拄棒借力，跃向崖边的一座山寺。二郎神的哮天犬猛扑拦截；八戒尖叫着终于抡起钉耙将它绊倒，为悟空争得一瞬。悟空回头一瞥，闪过一丝狡黠的笑——这场追逐远未结束。",
+      "bg": "Забулен в мъгла планински пролом, върхове като туш, чезнещи в облаците. Сун Укун, Маймунският крал в златна броня, стиска светещ небесен артефакт, докато Ерлан, триокият небесен воин, се спуска по лъч бяла светлина с насочена тризъба алебарда. Те се сблъскват във въздуха — тояга срещу острие — ударни вълни сплескват бамбуковата горичка долу. Наблизо прасето-демон Баджие се свива зад канара, стиснал греблото си, разкъсван между бягство и помощ. Укун прави салто над удара на Ерлан, забива тоягата си и се изстрелва към храм на ръба на скалата. Небесната хрътка на Ерлан се хвърля да го пресрещне; Баджие, скимтейки, най-сетне замахва с греблото и я спъва, печелейки на Укун един миг. Укун поглежда назад с проблясваща дяволита усмивка — гонитбата далеч не е приключила."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_NovelStory_2_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_NovelStory_2_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/MV_NovelStory_2_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "TS170",
+    "category": "ts",
+    "prompt": "Once upon a time, there was a little boy named Tim and a little girl named Lily. They were best friends. They liked to play together and share their toys. One day, they wanted to make a big picture for their mommies. They needed scissors to cut the paper. Tim had some scissors, but Lily did not. Tim said, \"Lily, we can share my scissors. It is easy to use them.\" Lily was happy that Tim wanted to share. They took turns using the scissors to cut the paper. They were very careful because scissors can be sharp. When they finished cutting the paper, they made a beautiful picture. They showed their mommies and said, \"Look, we made this together! We shared the scissors and it was easy.\" Their mommies were very proud of them for sharing and working together.",
+    "prompt_i18n": {
+      "zh": "从前，有一个小男孩叫蒂姆，还有一个小女孩叫莉莉。他们是最好的朋友。他们喜欢一起玩耍、分享玩具。有一天，他们想给各自的妈妈做一幅大大的画。他们需要剪刀来剪纸。蒂姆有剪刀，莉莉却没有。蒂姆说：“莉莉，我们可以共用我的剪刀，用起来很容易。”莉莉很开心蒂姆愿意分享。他们轮流用剪刀剪纸，非常小心，因为剪刀可能很锋利。剪完纸后，他们做出了一幅漂亮的画。他们拿给妈妈们看，说：“看，这是我们一起做的！我们共用了剪刀，很容易哦。”妈妈们为他们的分享与合作感到非常骄傲。",
+      "bg": "Имало едно време едно момченце на име Тим и едно момиченце на име Лили. Те били най-добри приятели. Обичали да играят заедно и да си споделят играчките. Един ден поискали да направят голяма картина за своите майки. Трябвали им ножици, за да режат хартията. Тим имал ножици, но Лили нямала. Тим казал: „Лили, можем да си поделим моите ножици. Лесно е да се използват.“ Лили се зарадвала, че Тим иска да споделя. Те се ��едували да режат хартията с ножиците. Били много внимателни, защото ножиците могат да са остри. Когато свършили с рязането, направили красива картина. Показали я на майките си и казали: „Вижте, направихме това заедно! Поделихме си ножиците и беше лесно.“ Майките им много се гордеели с тях, задето споделяли и работили заедно."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS170_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS170_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS170_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "TS199",
+    "category": "ts",
+    "prompt": "One day, a cat and a dog were playing in the park. The cat liked to tease the dog. The cat said, \"I am faster than you!\" The dog had an opinion too. The dog said, \"No, I am faster!\" They decided to have a race to see who was faster. The cat and dog ran as fast as they could. They were both very fast, but the cat was winning. Suddenly, a bitter wind blew and a big ball came rolling down the hill. The cat and the dog stopped running and looked at the ball. The cat and the dog decided to play with the ball instead of racing. They had lots of fun playing together. In the end, they both agreed that it was more fun to play together than to tease each other.",
+    "prompt_i18n": {
+      "zh": "有一天，一只猫和一只狗在公园里玩。猫喜欢逗狗。猫说：“我跑得比你快！”狗也有自己的看法。狗说：“不，我更快！”他们决定赛跑，看看谁更快。猫和狗拼命地跑。他们都非常快，但猫渐渐领先。突然，一阵凛冽的风吹过，一个大球从山坡上滚了下来。猫和狗停下脚步，看着那个球。他们决定不比赛了，改玩球。他们一起玩得很开心。最后，他们都同意：一起玩耍比互相逗弄有趣多了。",
+      "bg": "Един ден котка и куче си играели в парка. Котката обичала да дразни кучето. Котката казала: „Аз съм по-бърза от теб!“ Кучето също имало мнение. Кучето казало: „Не, аз съм по-бърз!“ Решили да се надбягват, за да видят кой е по-бърз. Котката и кучето тичали колкото им държат краката. И двамата били много бързи, но котката печелела. Изведнъж задухал леден вятър и голяма топка се затъркаляла надолу по хълма. Котката и кучето спрели да тичат и погледнали топката. Решили да играят с топката вместо да се състезават. Забавлявали се чудесно, играейки заедно. Накрая и двамата се съгласили, че е по-забавно да играят заедно, отколкото да се дразнят."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS199_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS199_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS199_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "TS217",
+    "category": "ts",
+    "prompt": "Once upon a time, there was a musician who played a big white drum. He lived in a small house near the park. Every day, he would go to the park and play his drum for the kids. One sunny day, the musician was playing his drum in the park when he saw a little girl on a swing. She was swinging very high. The girl said, \"Look at me, Mr. Musician! I can swing so high!\" The musician smiled and kept playing his drum. Suddenly, the girl lost her grip on the swing and began to fall. The musician saw this and quickly stopped playing his drum. He ran to catch the girl before she hit the ground. The girl was safe in the musician's arms. \"Thank you, Mr. Musician,\" she said. The musician smiled and said, \"You're welcome. Be careful next time.\" From that day on, the little girl and the musician became good friends, and they played in the park every day.",
+    "prompt_i18n": {
+      "zh": "从前，有一位乐手，他敲一面白色的大鼓。他住在公园附近的一座小房子里。每天，他都会去公园为孩子们打鼓。一个晴朗的日子，乐手正在公园里打鼓，看见一个小女孩在荡秋千。她荡得很高。女孩说：“看我呀，乐手先生！我能荡得好高！”乐手笑了笑，继续打鼓。突然，女孩没抓住秋千，开始往下掉。乐手见状立刻停下鼓，跑过去在女孩落地之前接住了她。女孩安全地落在乐手怀里。“谢谢您，乐手先生。”她说。乐手微笑着说：“不客气，下次要小心哦。”从那天起，小女孩和乐手成了好朋友，他们每天都在公园里一起玩。",
+      "bg": "Имало едно време един музикант, който свирел на голям бял барабан. Живеел в малка къща близо до парка. Всеки ден ходел в парка и свирел на барабана си за децата. Един слънчев ден музикантът свирел в парка, когато видял момиченце на люлка. То се люлеело много високо. Момиченцето казало: „Вижте ме, господин Музикант! Мога да се люлея толкова високо!“ Музикантът се усмихнал и продължил да свири. Изведнъж момиченцето изпуснало люлката и започнало да пада. Музикантът видял това и бързо спрял да свири. Затичал се да хване момиченцето, преди да се удари в земята. Момиченцето било в безопасност в ръцете на музиканта. „Благодаря ви, господин Музикант“, казало то. Музикантът се усмихнал и казал: „Моля, следващия път бъди по-внимателна.“ От този ден нататък момиченцето и музикантът станали добри приятели и играели в парка всеки ден."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS217_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS217_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS217_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "TS32",
+    "category": "ts",
+    "prompt": "Once upon a time there was a very brilliant girl named Sofia. Sofia was only three years old but she was already very smart! One day, Sofia was sitting in her bedroom looking out of the window when all of a sudden, a man wearing a huge hat appeared. He was holding something in his hand. He knocked on the door and said to Sofia, \"I'm here to deliver your diary\". Sofia was very excited and smiled. She opened the door and the man handed her the diary. Sofia thanked the man and he smiled. \"You're very welcome,\" he said. And then he left with a wave. Sofia ran back to her bedroom with her diary. She was so happy and couldn't wait to learn what was in it! As she opened it, she was sure that it was going to be brilliant. And she was right - the diary was filled with amazing stories and knowledge!",
+    "prompt_i18n": {
+      "zh": "从前有一个非常聪明的女孩，名叫索菲亚。索菲亚只有三岁，却已经很聪明了！有一天，索菲亚坐在卧室里望着窗外，忽然出现了一个戴着大帽子的男人。他手里拿着什么东西。他敲了敲门，对索菲亚说：“我是来送你的日记本的。”索菲亚非常兴奋，笑了起来。她打开门，男人把日记本递给她。索菲亚向他道谢，男人笑了。“不客气，”他说。然后他挥挥手离开了。索菲亚拿着日记本跑回卧室。她太开心了，迫不及待想知道里面写了什么！翻开的时候，她确信里面一定精彩极了。她猜得没错——日记本里满是奇妙的故事和知识！",
+      "bg": "Имало едно време едно много будно момиче на име София. София била само на три години, но вече била много умна! Един ден София седяла в спалнята си и гледала през прозореца, когато изведнъж се появил мъж с огромна шапка. Държал нещо в ръката си. Той почукал на вратата и казал на София: „Тук съм, за да доставя дневника ти.“ София много се развълн��вала и се усмихнала. Отворила вратата и мъжът ѝ подал дневника. София му благодарила, а той се усмихнал. „За нищо“, казал той. И си тръгнал с махване на ръка. София изтичала обратно в спалнята си с дневника. Била толкова щастлива и нямала търпение да научи какво има в него! Отваряйки го, била сигурна, че ще бъде великолепен. И била права — дневникът бил пълен с удивителни истории и знания!"
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS32_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS32_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS32_anim_director.mp4"
+      }
+    ]
+  },
+  {
+    "id": "TS63",
+    "category": "ts",
+    "prompt": "Once upon a time, a little bird lived in a small tree. The little bird loved to play with his friend, the squirrel. They liked to play with twigs. One day, the little bird was upset. He did not know where his friend was. The bird looked all around for his friend. He saw a big twig on the ground. The bird thought, \"Maybe my friend is hiding behind the twig.\" The bird flew down to look. But his friend was not there. The bird was more upset now. Just then, the squirrel jumped out from a bush. He had a big smile on his face. He said, \"I was hiding to surprise you!\" The bird was happy to see his friend. They played with the big twig together. The little bird learned that sometimes, when things seem bad, a happy surprise might be just around the corner.",
+    "prompt_i18n": {
+      "zh": "从前，一只小鸟住在一棵小树上。小鸟喜欢和他的朋友松鼠一起玩。他们喜欢玩小树枝。有一天，小鸟很难过。他不知道朋友去哪儿了。小鸟四处寻找他的朋友。他看见地上有一根大树枝。小鸟想：“也许我的朋友藏在树枝后面。”小鸟飞下去看。可是朋友不在那里。小鸟更难过了。就在这时，松鼠从灌木丛里跳了出来，脸上挂着大大的笑容。他说：“我是藏起来给你一个惊喜！”小鸟见到朋友很开心。他们一起玩那根大树枝。小鸟明白了：有时候事情看起来很糟，但快乐的惊喜也许就在转角处。",
+      "bg": "Имало едно време една малка птичка, която живеела на малко дърво. Птичката обичала да играе с приятеля си, катеричката. Обичали да си играят с клонки. Един ден птичката била тъжна. Не знаела къде е приятелят ѝ. Птичката търсила приятеля си навсякъде. Видяла голяма клонка на земята. Птичката си помислила: „Може би приятелят ми се крие зад клонката.“ Птичката слетяла да погледне. Но приятелят ѝ не бил там. Птичката станала още по-тъжна. Точно тогава катеричката изскочила от един храст. Имала голяма усмивка на лицето си. Казала: „Криех се, за да те изненадам!“ Птичката се зарадвала да види приятеля си. Играли заедно с голямата клонка. Малката птичка научила, че понякога, когато нещата изглеждат зле, щастлива изненада може да чака точно зад ъгъла."
+    },
+    "videos": [
+      {
+        "model": "ours",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS63_ours.mp4"
+      },
+      {
+        "model": "movieagent",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS63_movieagent.mp4"
+      },
+      {
+        "model": "anim_director",
+        "path": "https://huggingface.co/datasets/dehezhang2/Frameworker_User_Study/resolve/main/v2/videos/TS63_anim_director.mp4"
+      }
+    ]
+  }
+]

static/v2/mobile.html

@@ -0,0 +1,1492 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+<meta name="theme-color" content="#0f1115">
+<title>Video user study v2 — mobile</title>
+<style>
+  :root {
+    --bg: #0f1115;
+    --panel: #161922;
+    --panel-2: #1c2030;
+    --panel-3: #232839;
+    --border: #2a2f42;
+    --border-strong: #3a4060;
+    --fg: #e6e8ef;
+    --muted: #8b91a8;
+    --muted-2: #5e6480;
+    --accent: #6aa9ff;
+    --accent-strong: #8ec0ff;
+    --good: #28c76f;
+    --warn: #ff9f43;
+    --bad: #ea5455;
+    --score-1: #ea5455;
+    --score-2: #ff7d52;
+    --score-3: #ffa84a;
+    --score-4: #8acf6d;
+    --score-5: #28c76f;
+    --safe-bot: env(safe-area-inset-bottom, 0px);
+    --bar-h: 56px;
+  }
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg);
+    font-family: -apple-system, BlinkMacSystemFont, "Inter", "PingFang SC",
+                 "Microsoft YaHei", sans-serif;
+    font-size: 15px; line-height: 1.4;
+    -webkit-tap-highlight-color: transparent;
+    overscroll-behavior-y: contain; }
+
+  /* ---------- top header ---------- */
+  header.top { position: sticky; top: 0; z-index: 50;
+    background: var(--panel); border-bottom: 1px solid var(--border);
+    padding: 8px 12px; padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
+    display: flex; align-items: center; gap: 8px; }
+  header.top .title { font-weight: 600; font-size: 14px; flex: 1;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  header.top .pill { font-size: 11px; padding: 3px 8px; border-radius: 10px;
+    background: var(--panel-3); color: var(--muted); white-space: nowrap;
+    font-family: ui-monospace, monospace; border: 1px solid var(--border); }
+  header.top .pill[data-state="idle"]       { background:#1f2a44; color: var(--accent); border-color:#3a4a78; }
+  header.top .pill[data-state="submitting"] { background:#1f2a44; color: var(--accent); border-color:#3a4a78; }
+  header.top .pill[data-state="submitted"]  { background:#1c3422; color: var(--good); border-color:#2a5a37; }
+  header.top .pill[data-state="local-only"] { background:#3a3520; color: var(--warn); border-color:#5a4a25; }
+  header.top .pill[data-state="error"]      { background:#3a2020; color: var(--bad); border-color:#5a2828; }
+  header.top button.icon { background: transparent; border: none; color: var(--fg);
+    font-size: 22px; padding: 4px 8px; cursor: pointer; line-height: 1; }
+  header.top select { background: var(--panel-3); border: 1px solid var(--border);
+    color: var(--fg); padding: 4px 6px; border-radius: 4px; font-size: 12px;
+    font-family: inherit; }
+
+  /* ---------- progress strip ---------- */
+  .case-strip { position: sticky; top: 56px; z-index: 40;
+    background: var(--panel); border-bottom: 1px solid var(--border);
+    padding: 6px 12px; display: flex; align-items: center; gap: 8px;
+    font-size: 12px; color: var(--muted); }
+  .case-strip .case-id { color: var(--fg); font-weight: 600;
+    font-family: ui-monospace, monospace; }
+  .case-strip .bar { flex: 1; height: 4px; background: var(--panel-3); border-radius: 2px;
+    overflow: hidden; }
+  .case-strip .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--good));
+    transition: width 0.2s; }
+  .case-strip button.jumper { background: var(--panel-3); border: 1px solid var(--border);
+    color: var(--fg); padding: 4px 10px; border-radius: 4px;
+    font-size: 12px; font-family: inherit; cursor: pointer; }
+
+  /* ---------- main scroll content ---------- */
+  main { padding: 8px 12px calc(var(--bar-h) + var(--safe-bot) + 24px); }
+
+  /* prompt */
+  .prompt-card { background: var(--panel); border: 1px solid var(--border);
+    border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
+    font-size: 14px; line-height: 1.6; }
+  .prompt-card .label { font-size: 10px; color: var(--muted); letter-spacing: 0.5px;
+    text-transform: uppercase; margin-bottom: 4px; }
+  .prompt-card details summary { cursor: pointer; user-select: none;
+    list-style: none; color: var(--muted); font-size: 13px; }
+  .prompt-card details summary::before { content: '▸ '; }
+  .prompt-card details[open] summary::before { content: '▾ '; }
+  .prompt-card details[open] summary { margin-bottom: 6px; }
+  .prompt-card .ref-img { max-width: 100%; max-height: 200px; border-radius: 6px;
+    border: 1px solid var(--border); display: block; margin-top: 8px; }
+  /* Bold-red highlight on controllability cues in the prompt. */
+  .ctrl { color: var(--bad); font-weight: 700; }
+  /* Admin-curated highlights get a subtle dotted underline so admins know
+     which marks are their own (raters see them the same red as auto cues). */
+  .ctrl-admin { text-decoration: underline; text-decoration-style: dotted;
+    text-decoration-color: var(--bad); text-underline-offset: 2px; }
+
+  /* videos — tab UI mirrors desktop: one active video at a time, A/B/C
+     buttons to switch. All tiles stay in DOM so each keeps its own state. */
+  .video-stack { display: flex; flex-direction: column; gap: 10px;
+    margin-bottom: 14px; }
+  .video-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
+  .tab-btn { background: var(--panel-3); border: 1px solid var(--border);
+    color: var(--muted); padding: 8px 14px; border-radius: 6px;
+    font-family: ui-monospace, monospace; font-size: 13px; cursor: pointer;
+    min-height: 38px; min-width: 44px; }
+  .tab-btn.active { background: var(--accent); color: #0a1a2a;
+    border-color: var(--accent); font-weight: 700; }
+  .video-tile { position: relative; }
+  .video-tile.hidden { display: none; }
+  .video-frame { position: relative; background: #000; border: 1px solid var(--border);
+    border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; }
+  .video-frame video { width: 100%; height: 100%; display: block; background: #000; }
+  .video-frame .empty-state { position: absolute; inset: 0; display: flex;
+    flex-direction: column; align-items: center; justify-content: center;
+    background: repeating-linear-gradient(45deg, #1a1d28 0 10px, #16191f 10px 20px);
+    color: var(--muted); font-size: 12px; gap: 4px; text-align: center;
+    padding: 12px; }
+
+  /* video controls */
+  .video-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
+    background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
+    padding: 8px 10px; margin-bottom: 14px; font-size: 12px; }
+  .video-controls button { background: var(--panel-3); border: 1px solid var(--border-strong);
+    color: var(--fg); padding: 8px 12px; border-radius: 6px; font-size: 13px;
+    font-family: inherit; min-height: 36px; cursor: pointer; }
+  .video-controls button.on { background: var(--accent); color: #0a1a2a; border-color: var(--accent); }
+  .video-controls select { background: var(--panel-3); border: 1px solid var(--border);
+    color: var(--fg); padding: 6px 8px; border-radius: 4px; font-size: 13px;
+    font-family: inherit; margin-left: auto; }
+
+  /* dimension + question cards. dim-header sits inline above its cards
+     (not sticky — only the prompt + videos at the top of the page float). */
+  /* Responsive grid of question cards. ~280 px min → 1 col on phones,
+     2-3 cols on tablets / landscape. Dim headers span all columns. */
+  .question-grid { display: grid; gap: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+    align-content: start; }
+  .question-grid > .dim-header { grid-column: 1 / -1; }
+  .dim-header { margin: 14px 0 4px; padding: 0 2px;
+    font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
+    color: var(--accent-strong); font-weight: 700;
+    display: flex; align-items: baseline; gap: 8px; }
+  .dim-header:first-child { margin-top: 0; }
+  .dim-header .dim-hint { font-size: 11px; color: var(--muted); font-weight: 400;
+    text-transform: none; letter-spacing: 0; }
+  .q-card { background: var(--panel); border: 1px solid var(--border);
+    border-radius: 8px; padding: 12px; margin-bottom: 10px; }
+  .q-card .q-name { font-size: 15px; font-weight: 600; color: var(--fg);
+    margin-bottom: 2px; }
+  .q-card .q-desc { font-size: 12px; color: var(--muted); margin-bottom: 10px;
+    line-height: 1.5; }
+  .q-card .video-rate { display: flex; align-items: center; gap: 8px;
+    padding: 6px 0; }
+  .q-card .video-rate + .video-rate { border-top: 1px solid var(--border); }
+  .q-card .video-rate .slot-letter { min-width: 28px; height: 28px;
+    display: inline-flex; align-items: center; justify-content: center;
+    border-radius: 4px; background: var(--panel-3); color: var(--fg);
+    font-weight: 700; font-size: 13px; font-family: ui-monospace, monospace;
+    border: 1px solid var(--border-strong); flex-shrink: 0; }
+  .q-card .likert { display: flex; gap: 4px; flex: 1; justify-content: space-between; }
+  .q-card .likert button { flex: 1; min-height: 42px; min-width: 0;
+    border: 1px solid var(--border); background: var(--panel-3); color: var(--fg);
+    border-radius: 6px; font-family: inherit; font-size: 14px; font-weight: 500;
+    cursor: pointer; }
+  .q-card .likert button.selected { font-weight: 700; color: #0a1a0a;
+    border-color: rgba(255,255,255,0.2); }
+  .q-card .likert button.selected[data-score="1"] { background: var(--score-1); }
+  .q-card .likert button.selected[data-score="2"] { background: var(--score-2); }
+  .q-card .likert button.selected[data-score="3"] { background: var(--score-3); }
+  .q-card .likert button.selected[data-score="4"] { background: var(--score-4); }
+  .q-card .likert button.selected[data-score="5"] { background: var(--score-5); }
+
+  /* bottom fixed action bar */
+  footer.bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
+    background: var(--panel); border-top: 1px solid var(--border);
+    padding: 8px 10px calc(8px + var(--safe-bot));
+    display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; gap: 6px;
+    height: calc(var(--bar-h) + var(--safe-bot)); align-items: center; }
+  footer.bottom button { background: var(--panel-3); border: 1px solid var(--border-strong);
+    color: var(--fg); padding: 0; height: 40px; border-radius: 6px;
+    font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
+  footer.bottom .submit-btn { background: var(--good); color: #0a1a0a;
+    border-color: var(--good); font-weight: 700; }
+  footer.bottom .submit-btn:disabled { background: var(--panel-3); color: var(--muted-2);
+    border-color: var(--border); font-weight: 500; }
+  footer.bottom .top-btn { font-size: 18px; }
+
+  /* slide-in drawer (case list) */
+  .drawer-backdrop { position: fixed; inset: 0; background: rgba(8,10,16,0.7);
+    z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
+  .drawer-backdrop.open { opacity: 1; pointer-events: auto; }
+  .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 86%;
+    max-width: 360px; background: var(--panel); border-left: 1px solid var(--border);
+    z-index: 61; transform: translateX(100%); transition: transform 0.22s ease;
+    display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); }
+  .drawer.open { transform: translateX(0); }
+  .drawer header { padding: 12px 14px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; justify-content: space-between;
+    font-weight: 600; }
+  .drawer .list { flex: 1; overflow-y: auto; padding: 4px 0; }
+  .drawer .case-row { padding: 12px 14px; border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: 10px; }
+  .drawer .case-row.active { background: var(--panel-2);
+    border-left: 3px solid var(--accent); padding-left: 11px; }
+  .drawer .case-row .dot { width: 9px; height: 9px; border-radius: 50%;
+    background: var(--muted-2); flex-shrink: 0; }
+  .drawer .case-row.partial .dot { background: var(--warn); }
+  .drawer .case-row.complete .dot { background: var(--good); }
+  .drawer .case-row .id { flex: 1; font-family: ui-monospace, monospace;
+    font-size: 13px; }
+  .drawer .case-row .pct { font-size: 11px; color: var(--muted); }
+
+  /* registration overlay (re-used from desktop) */
+  .overlay { position: fixed; inset: 0; background: rgba(8,10,16,0.84);
+    backdrop-filter: blur(4px); display: flex; align-items: center;
+    justify-content: center; z-index: 100; padding: 14px; }
+  .overlay.hidden { display: none; }
+  .reg-card { background: var(--panel); border: 1px solid var(--border-strong);
+    border-radius: 10px; padding: 18px 18px 16px; max-width: 420px; width: 100%; }
+  .reg-card h2 { margin: 0 0 4px; font-size: 17px; }
+  .reg-card .lead { color: var(--muted); font-size: 13px; line-height: 1.6;
+    margin: 0 0 14px; }
+  .reg-card label { display: block; font-size: 11px; text-transform: uppercase;
+    letter-spacing: 0.5px; color: var(--muted); margin: 10px 0 4px; }
+  .reg-card input, .reg-card textarea { width: 100%; background: var(--panel-3);
+    border: 1px solid var(--border); color: var(--fg); padding: 10px;
+    border-radius: 6px; font-family: inherit; font-size: 16px;     /* 16 ≥ iOS no-zoom */ }
+  .reg-card textarea { min-height: 50px; resize: vertical; font-size: 14px; }
+  .reg-card .err { color: var(--bad); font-size: 12px; min-height: 14px;
+    margin-top: 6px; }
+  .reg-card .top-row { display: flex; align-items: center;
+    justify-content: space-between; margin-bottom: 8px; gap: 12px; }
+  .reg-card select { background: var(--panel-3); border: 1px solid var(--border);
+    color: var(--fg); padding: 4px 6px; border-radius: 4px; font-size: 12px;
+    font-family: inherit; }
+  .reg-card .go-btn { width: 100%; background: var(--accent); color: #0a1a2a;
+    border: 1px solid var(--accent); padding: 12px; border-radius: 8px;
+    font-weight: 700; font-size: 15px; cursor: pointer; margin-top: 14px; }
+
+  /* submitted overlay */
+  .submitted-card { background: var(--panel); border: 1px solid var(--good);
+    border-radius: 10px; padding: 22px; max-width: 420px; width: 100%;
+    text-align: center; }
+  .submitted-card .check { font-size: 44px; color: var(--good); }
+  .submitted-card h2 { margin: 8px 0 4px; font-size: 17px; }
+  .submitted-card p { color: var(--muted); font-size: 13px; margin: 4px 0;
+    line-height: 1.6; }
+  .submitted-card code { background: var(--panel-3); padding: 2px 6px;
+    border-radius: 3px; font-size: 11px; color: var(--accent-strong);
+    word-break: break-all; }
+  .submitted-card .btn { background: var(--panel-3); border: 1px solid var(--border-strong);
+    color: var(--fg); padding: 10px 14px; border-radius: 6px; font-size: 14px;
+    font-family: inherit; margin-top: 12px; cursor: pointer; min-width: 100px; }
+
+  /* toast */
+  .toast { position: fixed; bottom: calc(var(--bar-h) + var(--safe-bot) + 14px);
+    left: 12px; right: 12px; background: var(--good); color: #0a1a0a;
+    padding: 10px 14px; border-radius: 8px; font-size: 13px; font-weight: 600;
+    text-align: center; opacity: 0; transition: opacity 0.2s;
+    z-index: 90; pointer-events: none; }
+  .toast.show { opacity: 1; }
+  .toast.error { background: var(--bad); color: #fff; }
+
+  /* desktop switch link */
+  .desktop-link { font-size: 11px; color: var(--muted); text-decoration: none;
+    padding: 4px 8px; border: 1px solid var(--border); border-radius: 12px;
+    background: var(--panel-3); }
+  .desktop-link:hover { color: var(--fg); }
+
+  /* admin / submitted badges */
+  .badge { display: inline-flex; align-items: center; padding: 2px 8px;
+    border-radius: 10px; font-size: 10px; font-weight: 700; }
+  .badge.admin { background: #3a2f60; color: #d9b6ff; border: 1px solid #5a4080; }
+  .badge.submitted { background: #1c3422; color: var(--good); border: 1px solid #2a5a37; }
+
+  /* shut down landscape if it gets weird */
+  @media (orientation: landscape) and (max-height: 460px) {
+    header.top { padding: 4px 12px; }
+    .case-strip { top: 44px; padding: 4px 12px; }
+    main { padding-top: 6px; }
+  }
+
+  kbd { background: var(--panel-3); border: 1px solid var(--border-strong);
+    border-radius: 3px; padding: 1px 4px; font-family: ui-monospace, monospace;
+    font-size: 11px; }
+</style>
+</head>
+<body>
+
+<!-- ============ Top bar ============ -->
+<header class="top" id="topBar">
+  <button class="icon" id="drawerBtn" title="Cases">☰</button>
+  <span class="title" id="topTitle">Video user study</span>
+  <button class="icon" id="helpBtn" title="How to rate" style="font-size:18px">?</button>
+  <span class="pill" id="syncPill" data-state="idle">●</span>
+  <select id="langSelect" title="Language"></select>
+</header>
+
+<div class="case-strip" id="caseStrip">
+  <span class="case-id" id="caseId">—</span>
+  <span id="caseCounter">—</span>
+  <div class="bar"><div class="fill" id="progressFill" style="width:0%"></div></div>
+  <span id="progressTxt">0/0</span>
+</div>
+
+<main id="main">
+  <!-- prompt + videos + controls + question cards inserted here -->
+</main>
+
+<footer class="bottom">
+  <button id="prevBtn">← Prev</button>
+  <button id="saveBtn">💾</button>
+  <button class="top-btn" id="scrollTopBtn" title="Back to videos">↑</button>
+  <button id="submitBtn" class="submit-btn" disabled>Submit</button>
+  <button id="nextBtn">Next →</button>
+</footer>
+
+<div class="toast" id="toast"></div>
+
+<!-- Slide-in drawer with case list -->
+<div class="drawer-backdrop" id="drawerBackdrop"></div>
+<aside class="drawer" id="drawer" aria-hidden="true">
+  <header>
+    <span>Cases</span>
+    <button class="icon" id="drawerCloseBtn"
+            style="background:transparent;border:none;color:var(--fg);font-size:22px;cursor:pointer">✕</button>
+  </header>
+  <div class="list" id="drawerList"></div>
+  <div style="padding:10px 14px;border-top:1px solid var(--border);display:flex;gap:8px;align-items:center">
+    <a href="./?force=desktop" class="desktop-link" style="flex:1;text-align:center">🖥 Desktop view</a>
+  </div>
+</aside>
+
+<!-- Rating instructions overlay (mobile) — toggled via the "?" header button.
+     Auto-opened on first launch; user can close + reopen any time. -->
+<div id="helpOverlay" class="overlay hidden" role="dialog" aria-modal="true">
+  <div class="reg-card" style="max-width:520px">
+    <div class="top-row">
+      <h2 id="helpHeader">How to rate</h2>
+      <button class="btn" id="helpCloseBtn"
+              style="background:transparent;border:none;color:var(--fg);font-size:22px;cursor:pointer">✕</button>
+    </div>
+    <div id="helpBody" style="font-size:13px;line-height:1.6;color:var(--fg);max-height:60vh;overflow-y:auto"></div>
+    <button class="go-btn" id="helpDismissBtn" style="margin-top:14px"><span id="helpDismissText">Got it</span></button>
+  </div>
+</div>
+
+<!-- Registration overlay -->
+<div id="loginOverlay" class="overlay" role="dialog" aria-modal="true">
+  <div class="reg-card">
+    <div class="top-row">
+      <h2 id="regHeader">Register to start rating</h2>
+      <select id="regLangSelect"></select>
+    </div>
+    <p class="lead" id="regLead"></p>
+    <label for="regName" id="regNameLabel">Your name</label>
+    <input id="regName" type="text" autocomplete="name" maxlength="80">
+    <label for="regEmail" id="regEmailLabel">Email</label>
+    <input id="regEmail" type="email" autocomplete="email" inputmode="email" maxlength="120">
+    <label for="regNote" id="regNoteLabel">Affiliation / notes (optional)</label>
+    <textarea id="regNote" maxlength="280"></textarea>
+    <div class="err" id="regErr"></div>
+    <button class="go-btn" id="regGoBtn"><span id="regContinueText">Continue →</span></button>
+    <div style="color:var(--muted-2);font-size:11px;margin-top:8px;line-height:1.5"
+         id="regFootText"></div>
+  </div>
+</div>
+
+<!-- Submitted overlay -->
+<div id="submittedOverlay" class="overlay hidden" role="dialog" aria-modal="true">
+  <div class="submitted-card">
+    <div class="check">✓</div>
+    <h2 id="submittedHeading">Submission recorded</h2>
+    <p id="submittedDetail"></p>
+    <p><code id="submittedRef">—</code></p>
+    <div style="display:flex;gap:8px;justify-content:center;flex-wrap:wrap">
+      <button class="btn" id="submittedCloseBtn">Close</button>
+      <button class="btn" id="submittedDownloadBtn">↓ Backup JSON</button>
+    </div>
+  </div>
+</div>
+
+<script>
+/* =========================================================================
+ *  Auto-redirect to the desktop page on large / pointer-fine devices.
+ *  `?force=mobile` overrides (sticky in sessionStorage for the tab).
+ * ========================================================================= */
+(function autoRedirectIfDesktop() {
+  try {
+    const url = new URL(location.href);
+    if (url.searchParams.has("force")) {
+      sessionStorage.setItem("user_study_view_force", url.searchParams.get("force"));
+    }
+    const forced = sessionStorage.getItem("user_study_view_force");
+    if (forced === "mobile") return;
+    const ua = navigator.userAgent || "";
+    const isMobileUA = /Mobi|Android|iPhone|iPod|BlackBerry|Windows Phone/i.test(ua);
+    const isFine = window.matchMedia && window.matchMedia("(pointer: fine)").matches;
+    const isWide = window.innerWidth >= 900;
+    if (forced === "desktop" || (!isMobileUA && isFine && isWide)) {
+      location.replace("./");
+    }
+  } catch (e) { /* ignore — fall through to mobile */ }
+})();
+
+/* =========================================================================
+ *  Same rubric + i18n + admin list + API contract as desktop index.html.
+ *  Kept in sync manually for now (small enough). localStorage key is shared
+ *  so progress made on desktop carries to mobile and vice-versa.
+ * ========================================================================= */
+const DIMENSIONS = [
+  { key: "instruction_following", name: "Instruction following",
+    hint: "Re-read the prompt — especially the red-highlighted phrases — before scoring.", questions: [
+    { key: "controllability", name: "Controllability",
+      desc: "Does the video respond to control signals (BGM, subtitle etc)?" },
+    { key: "prompt_adherence", name: "Prompt adherence",
+      desc: "Does the content match what the prompt described (subjects, actions, setting, time, and story arc)? Focus primarily on the prompt's text content." },
+    { key: "no_irrelevant_frames", name: "No irrelevant frames",
+      desc: "Does the video stay on-prompt? Higher = fewer / no frames or content that weren't asked for by the prompt." } ] },
+  { key: "temporal_consistency", name: "Temporal consistency",
+    hint: "Focus on how characters, objects, and the environment change across frames.", questions: [
+    { key: "person_stability", name: "Person stability",
+      desc: "Faces, identities, and body proportions stay consistent across frames." },
+    { key: "object_stability", name: "Object stability",
+      desc: "Props, clothing, and objects keep their shape and position over time." },
+    { key: "environment_stability", name: "Environment stability",
+      desc: "Background, lighting, and scene layout stay coherent across frames (including absence of brightness / color / texture flicker)." } ] },
+  // Dim key stays `motion_realism` for back-compat; display + hint broadened
+  // to "Realism", and the `realism` sub-question (formerly under Visual
+  // quality) lives here now.
+  { key: "motion_realism", name: "Realism",
+    hint: "Notice obvious out-of-place or unnatural moments in the video.", questions: [
+    { key: "realism", name: "Static realism",
+      desc: "Photorealism or stylistic fidelity (per-frame appearance). When the prompt specifies a style, the video should match it. No uncanny or broken artifacts." },
+    { key: "motion_logic", name: "Motion logic",
+      desc: "Does body and object motion flow smoothly and follow physical / logical patterns (gravity, collisions, fluid / cloth dynamics)? No warping, teleporting, nonsensical, or impossible movements. Score low if there is little to no motion." },
+    { key: "camera", name: "Camera",
+      desc: "Camera movement (pan, dolly, focal change) feels natural and intentional. Score low if there is little to no camera movement." } ] },
+];
+
+const TOTAL_QUESTIONS = DIMENSIONS.reduce((n, d) => n + d.questions.length, 0);
+const STORAGE_KEY = "user_study_v2_ratings_v1";    // shared with desktop
+const ADMIN_NAMES = new Set(["deheng zhang", "zhendong li"]);
+
+const LANGUAGES = [
+  { code: "en", label: "English" },
+  { code: "zh", label: "Chinese" },
+  { code: "bg", label: "Bulgarian" },
+];
+
+const STRINGS = {
+  en: {
+    title:"Video user study",
+    prompt_label:"Prompt / instruction",
+    no_prompt:"(no prompt provided)",
+    case_n_of_m:"Case {0}/{1}",
+    play:"▶ Play", pause:"⏸", restart:"⏮", loop:"↻", mute:"🔇", sound:"🔊", speed:"Speed",
+    no_video_file:"no video file at this path",
+    prev:"← Prev", next:"Next →",
+    save_progress:"💾",
+    submit:"Submit ({0})",
+    submit_resubmit:"✓ Re-submit",
+    submit_disabled:"Submit ({0} left)",
+    reg_title:"Register to start rating",
+    reg_lead:"We record who submitted each set of ratings. No password — just your name and an email that uniquely identifies you.",
+    reg_name:"Your name", reg_name_ph:"e.g. Alex Chen",
+    reg_email:"Email", reg_email_ph:"e.g. alex@example.com",
+    reg_note:"Affiliation / notes (optional)", reg_note_ph:"e.g. INSAIT, internal pilot, etc.",
+    reg_continue:"Continue →",
+    help_title:"How to rate",
+    help_dismiss:"Got it",
+    help_body_html:"<p>For each case watch all videos via the <b>A / B / C</b> tabs at the top, then rate each one on every sub-question below. Slot order is shuffled per rater but stable within a case.</p><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>Likert (1 = worst, 5 = best)</h4><p>1 Very poor · 2 Poor · 3 Fair · 4 Good · 5 Excellent</p><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>3 dimensions × 9 sub-questions</h4><ul style='padding-left:18px;margin:6px 0'><li><b>Instruction following</b> — re-read the prompt, especially the red-highlighted phrases.</li><li><b>Temporal consistency</b> — focus on how characters, objects, and environment change across frames.</li><li><b>Realism</b> — notice obvious out-of-place / unnatural moments.</li></ul><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>Tips</h4><ul style='padding-left:18px;margin:6px 0'><li><b>Click 💾 to save progress at any time.</b> Click <b>Submit study</b> once everything is rated — otherwise your scores don't count.</li><li>For BGM / subtitle / sound questions, unmute the video first.</li><li>Score motion logic / camera low if the video has little to no movement.</li></ul>",
+    reg_foot:"Submissions are written to the <code>dehezhang2/Frameworker_User_Study</code> dataset on Hugging Face.",
+    reg_err_name:"Please enter your name.",
+    reg_err_email:"Please enter a valid email address.",
+    pill_idle:"●", pill_submitting:"↻", pill_submitted:"✓", pill_local_only:"💾", pill_error:"✕", pill_checking:"●",
+    toast_registered:"Registered as {0}",
+    toast_pls_signin:"Please sign in before submitting",
+    toast_missing:"{0} ratings still missing",
+    toast_no_server:"No server reachable — use Export instead",
+    toast_submit_failed:"Submit failed: {0}",
+    toast_progress_saved:"Progress saved ({0} ratings)",
+    toast_progress_save_failed:"Save failed: {0}",
+    submitted_title:"Submission recorded",
+    submitted_thanks:"Thanks, {0}. We recorded {1} ratings across {2} videos.",
+    submitted_close:"Close", submitted_download:"↓ Backup",
+    drawer_cases:"Cases",
+    scale_1:"1 Very poor", scale_5:"5 Excellent",
+    expand_prompt:"Read full prompt",
+    case_complete:"✓ complete",
+    confirm_reset:"Reset all ratings + registration on this device? This cannot be undone.",
+    admin:"⚙ admin", submitted_badge:"✓ submitted",
+  },
+  zh: {
+    title:"视频用户研究",
+    prompt_label:"提示词 / 指令",
+    no_prompt:"(未提供提示词)",
+    case_n_of_m:"案例 {0}/{1}",
+    play:"▶ 播放", pause:"⏸", restart:"⏮", loop:"↻", mute:"🔇", sound:"🔊", speed:"速度",
+    no_video_file:"该路径下没有视频文件",
+    prev:"← 上一个", next:"下一个 →",
+    save_progress:"💾",
+    submit:"提交 ({0})",
+    submit_resubmit:"✓ 重新提交",
+    submit_disabled:"提交 (还剩 {0})",
+    reg_title:"注册以开始评分",
+    reg_lead:"我们会记录每份评分的提交者。无需密码 — 只需姓名和一个唯一识别您的邮箱。",
+    reg_name:"您的姓名", reg_name_ph:"例如:陈小明",
+    reg_email:"邮箱", reg_email_ph:"例如:xiaoming@example.com",
+    reg_note:"所属单位 / 备注(可选)", reg_note_ph:"例如:INSAIT、内部预测试 等",
+    reg_continue:"继续 →",
+    help_title:"评分说明",
+    help_dismiss:"知道了",
+    help_body_html:"<p>每个案例,先在顶部的 <b>A / B / C</b> 视频标签切换观看每个视频,然后在下方对每个视频的每个子问题打分。视频顺序按评分人随机分配,但同一案例内保持一致。</p><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>李克特量表(1 = 最差,5 = 最佳)</h4><p>1 很差 · 2 差 · 3 一般 · 4 好 · 5 极佳</p><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>3 个维度 × 9 个子问题</h4><ul style='padding-left:18px;margin:6px 0'><li><b>指令遵循</b> — 请先看清提示词,尤其是标红的部分。</li><li><b>时间一致性</b> — 关注人物、物品和环境在帧间的变化。</li><li><b>真实感</b> — 留意视频中不和谐或有明显问题的地方。</li></ul><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>操作提示</h4><ul style='padding-left:18px;margin:6px 0'><li><b>随时点击 💾 保存进度;</b>全部完成后必须点击「提交研究」,否则评分不会被计入。</li><li>BGM / 字幕 / 配乐 等问题请先打开视频声音聆听。</li><li>运动逻辑 / 相机运动 若几乎没有运动,请打低分。</li></ul>",
+    reg_foot:"提交将写入 Hugging Face 上的 <code>dehezhang2/Frameworker_User_Study</code> 数据集。",
+    reg_err_name:"请输入您的姓名。",
+    reg_err_email:"请输入有效的邮箱地址���",
+    pill_idle:"●", pill_submitting:"↻", pill_submitted:"✓", pill_local_only:"💾", pill_error:"✕", pill_checking:"●",
+    toast_registered:"已注册为 {0}",
+    toast_pls_signin:"请先登录后再提交",
+    toast_missing:"尚有 {0} 项未完成",
+    toast_no_server:"无法连接服务器 — 请使用导出功能",
+    toast_submit_failed:"提交失败: {0}",
+    toast_progress_saved:"进度已保存 ({0} 项评分)",
+    toast_progress_save_failed:"保存失败: {0}",
+    submitted_title:"提交成功",
+    submitted_thanks:"{0},感谢您的参与。我们已写入 {2} 个视频 × {1} 项评分。",
+    submitted_close:"关闭", submitted_download:"↓ 备份",
+    drawer_cases:"案例",
+    scale_1:"1 很差", scale_5:"5 极佳",
+    expand_prompt:"查看完整提示词",
+    case_complete:"✓ 已完成",
+    confirm_reset:"重置本设备的所有评分和注册信息吗?该操作不可撤销。",
+    admin:"⚙ 管理员", submitted_badge:"✓ 已提交",
+  },
+  bg: {
+    title:"Видео проучване",
+    prompt_label:"Подкана / инструкция",
+    no_prompt:"(няма подкана)",
+    case_n_of_m:"Случай {0}/{1}",
+    play:"▶ Пусни", pause:"⏸", restart:"⏮", loop:"↻", mute:"🔇", sound:"🔊", speed:"Скорост",
+    no_video_file:"няма видео файл на този път",
+    prev:"← Назад", next:"Напред →",
+    save_progress:"💾",
+    submit:"Изпрати ({0})",
+    submit_resubmit:"✓ Повторно",
+    submit_disabled:"Изпрати (остават {0})",
+    reg_title:"Регистрирайте се, за да започнете",
+    reg_lead:"Записваме кой е изпратил всеки набор от оценки. Без парола — само името и имейл, които ви идентифицират уникално.",
+    reg_name:"Вашето име", reg_name_ph:"напр. Алекс Иванов",
+    reg_email:"Имейл", reg_email_ph:"напр. alex@example.com",
+    reg_note:"Принадлежност / бележки (по избор)", reg_note_ph:"напр. INSAIT, вътрешен пилот",
+    reg_continue:"Продължи →",
+    help_title:"Как се оценява",
+    help_dismiss:"Разбрах",
+    help_body_html:"<p>За всеки случай гледайте всички видеа чрез табовете <b>A / B / C</b> отгоре, след това оценете всяко по всеки под-въпрос отдолу.</p><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>Ликерт (1 = най-лошо, 5 = най-добро)</h4><p>1 Много слабо · 2 Слабо · 3 Средно · 4 Добро · 5 Отлично</p><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>3 измерения × 9 под-въпроса</h4><ul style='padding-left:18px;margin:6px 0'><li><b>Следване на инструкции</b> — прочетете подканата, особено маркираните в червено фрази.</li><li><b>Времева съгласуваност</b> — съсредоточете се върху промените на хора, обекти и среда между кадрите.</li><li><b>Реализъм</b> — забележете неестествени моменти.</li></ul><h4 style='color:var(--accent);margin-top:14px;font-size:13px'>Съвети</h4><ul style='padding-left:18px;margin:6px 0'><li><b>Щракнете 💾, за да запазите прогрес по всяко време;</b> щракнете <b>Изпрати проучването</b> накрая — иначе оценките не се броят.</li><li>За въпроси относно BGM / субтитри / звук включете звука първо.</li><li>Дайте нисък резултат за логика на движението / камера, ако има малко движение.</li></ul>",
+    reg_foot:"Изпращанията се записват в <code>dehezhang2/Frameworker_User_Study</code> на Hugging Face.",
+    reg_err_name:"Моля, въведете името си.",
+    reg_err_email:"Моля, въведете валиден имейл адрес.",
+    pill_idle:"●", pill_submitting:"↻", pill_submitted:"✓", pill_local_only:"💾", pill_error:"✕", pill_checking:"●",
+    toast_registered:"Регистриран(а) като {0}",
+    toast_pls_signin:"Моля, влезте преди изпращане",
+    toast_missing:"Все още липсват {0} оценки",
+    toast_no_server:"Сървърът не е достъпен — използвайте Изтегли",
+    toast_submit_failed:"Изпращането се провали: {0}",
+    toast_progress_saved:"Прогресът е запазен ({0} оценки)",
+    toast_progress_save_failed:"Запазването се провали: {0}",
+    submitted_title:"Записано",
+    submitted_thanks:"Благодарим, {0}. Записахме {1} оценки за {2} видеа.",
+    submitted_close:"Затвори", submitted_download:"↓ Копие",
+    drawer_cases:"Случаи",
+    scale_1:"1 Много слабо", scale_5:"5 Отлично",
+    expand_prompt:"Покажи цялата подкана",
+    case_complete:"✓ завършен",
+    confirm_reset:"Изчистване на всички оценки и регистрация на това устройство? Действието е необратимо.",
+    admin:"⚙ администратор", submitted_badge:"✓ изпратено",
+  },
+};
+
+const RUBRIC_I18N = {
+  zh: {
+    instruction_following:{name:"指令遵循",hint:"请先看清提示词,尤其是标红的部分,再作答。"},
+    temporal_consistency:{name:"时间一致性",hint:"请关注人物、物品和环境在帧间的变化。"},
+    motion_realism:{name:"真实感",hint:"请留意视频中不和谐或有明显问题的地方。"},
+    controllability:{name:"可控性",desc:"视频是否响应控制信号(BGM、字幕等)?"},
+    prompt_adherence:{name:"提示一致性",desc:"内容是否与提示的描述一致(主体、动作、场景、时间、故事走向)?以提示词的文本内容为主要依据。"},
+    no_irrelevant_frames:{name:"无无关画面",desc:"视频是否仅呈现提示中要求的内容?分数越高 = 越少出现与提示无关的帧或内容。"},
+    realism:{name:"静态真实感",desc:"单帧的照片级真实感或风格忠实度。若提示词指定了风格,视频应符合该风格。无诡异感或失真伪影。"},
+    person_stability:{name:"人物稳定性",desc:"面部、身份及身体比例在帧间保持一致。"},
+    object_stability:{name:"物体稳定性",desc:"道具、服饰及物体随时间保持形状和位置。"},
+    environment_stability:{name:"环境稳定性",desc:"背景、光照及场景布局在帧间保持连贯(包括无亮度、色彩或纹理闪烁)。"},
+    motion_logic:{name:"运动逻辑",desc:"身体与物体的运动是否流畅且符合物理与常识规律(重力、碰撞、流体/布料动力学)?无形变、瞬移、不合常理或不可能的动作。若几乎没有运动,请打低分。"},
+    camera:{name:"相机运动",desc:"相机运动(平移、推拉、焦距变化)自然且有意图。若几乎没有相机运动,请打低分。"},
+  },
+  bg: {
+    instruction_following:{name:"Следване на инструкции",hint:"Прочетете внимателно подканата — особено маркираните в червено фрази — преди да оцените."},
+    temporal_consistency:{name:"Времева съгласуваност",hint:"Съсредоточете се върху промените на хора, предмети и среда между кадрите."},
+    motion_realism:{name:"Реализъм",hint:"Забележете очевидни проблеми или неестествени моменти във видеото."},
+    controllability:{name:"Контролируемост",desc:"Реагира ли видеото на контролни сигнали (BGM, субтитри и т.н.)?"},
+    prompt_adherence:{name:"Съответствие с подканата",desc:"Съответства ли съдържанието на описаното в подканата (обекти, действия, обстановка, време и развитие на историята)? Фокусирайте се основно върху текстовото съдържание на подканата."},
+    no_irrelevant_frames:{name:"Без неуместни кадри",desc:"Остава ли видеото в рамките на подканата? По-висок = по-малко / без кадри или съдържание, които не са поискани."},
+    realism:{name:"Статичен реализъм",desc:"Фотореалистичност или стилова достоверност на отделен кадър. Ако подканата задава стил, видеото трябва да следва този стил. Без странни или счупени артефакти."},
+    person_stability:{name:"Стабилност на хората",desc:"Лица, идентичности и пропорции на тялото остават постоянни между кадрите."},
+    object_stability:{name:"Стабилност на обектите",desc:"Реквизити, дрехи и обекти запазват форма и позиция във времето."},
+    environment_stability:{name:"Стабилност на средата",desc:"Фон, осветление и подредба на сцената остават последователни между кадрите (включително липса на трептене на яркост, цвят или текстура)."},
+    motion_logic:{name:"Логика на движението",desc:"Текат ли движенията на тела и обекти плавно и в съответствие с физически / логически закони (гравитация, сблъсъци, динамика на флуиди / тъкани)? Без деформации, телепортация, нелогични или невъзможни движения. Дайте нисък резултат, ако има малко или никакво движение."},
+    camera:{name:"Камера",desc:"Движението на камерата (панорама, дъли, промяна на фокус) изглежда естествено и целенасочено. Дайте нисък резултат, ако има малко или никакво движение на камерата."},
+  },
+};
+
+/* ----- State (shared with desktop via localStorage) ----- */
+let CASES = [];          // cases visible to this rater (subset of ALL)
+let ALL_CASES = [];      // full manifest from cases.json
+const CASES_PER_RATER = 10;
+let SHUFFLE = {};
+let RATINGS = {};
+let RATER = { id:"", name:"", email:"", note:"",
+              started_at:null, submitted_at:null };
+let LANG = "en";
+let anonymize = true;
+let currentIdx = 0;
+let SYNC_STATUS = "idle";
+let SYNC_LAST_DETAIL = "";
+const API_SUBMIT = "./api/submit";
+const API_HEALTH = "./api/health";
+const API_SAVE_PROGRESS = "./api/save_progress";
+const PROGRESS_DEBOUNCE_MS = 60000;
+let PROGRESS_TIMER = null;
+
+/* ----- Helpers ----- */
+function t(key, ...args){
+  let s = (STRINGS[LANG]&&STRINGS[LANG][key])??STRINGS.en[key]??key;
+  if(args.length) s = s.replace(/\{(\d+)\}/g,(_,i)=>args[Number(i)]??"");
+  return s;
+}
+function dimName(d){ return LANG==="en"?d.name:(RUBRIC_I18N[LANG]?.[d.key]?.name??d.name); }
+function dimHint(d){ return LANG==="en"?d.hint:(RUBRIC_I18N[LANG]?.[d.key]?.hint??d.hint); }
+function qName(q){ return LANG==="en"?q.name:(RUBRIC_I18N[LANG]?.[q.key]?.name??q.name); }
+function qDesc(q){ return LANG==="en"?q.desc:(RUBRIC_I18N[LANG]?.[q.key]?.desc??q.desc); }
+function isAdmin(){ return ADMIN_NAMES.has((RATER.name||"").trim().toLowerCase()); }
+const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+function hashStr(s){ let h=2166136261>>>0; for(let i=0;i<s.length;i++){h^=s.charCodeAt(i);h=(h*16777619)>>>0;} return h; }
+function escapeHtml(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c]);}
+
+// Controllability highlighter — wraps imperative verbs + directive phrases
+// in <span class="ctrl"> so raters see what the prompt actually controls.
+const CTRL_PATTERNS = {
+  en: [
+    /\bAdd\b[^.]*\./g,
+    /\bUse this[^.]*\./g,
+    /Make a[^—–]*?animated short drama/g,
+  ],
+  zh: [
+    /制作一部[^—–]*?短剧/g,
+    /请?添加[^。]*。/g,
+    /请使用上传的[^。]*。/g,
+    /配以[^。]*。/g,
+    /环境音[::][^。]*。/g,
+  ],
+  bg: [
+    /Създайте[^—–]*?анимационна кратка драма/g,
+    /Добавете[^.]*\./g,
+    /Използвайте качената[^.]*\./g,
+  ],
+};
+// Admin-curated highlight snippets, fetched at init from /api/annotations.
+// Same shape as desktop: { case_id: { lang: [snippet, ...] } }
+let ADMIN_HIGHLIGHTS = {};
+const API_ANNOTATIONS = "./api/annotations";
+
+function highlightControllability(text, lang, caseId) {
+  let html = escapeHtml(text);
+  const patterns = CTRL_PATTERNS[lang] || CTRL_PATTERNS.en;
+  const ranges = [];
+  // Auto-detected controllability cues
+  for (const re of patterns) {
+    re.lastIndex = 0; let m;
+    while ((m = re.exec(html)) !== null) {
+      ranges.push([m.index, m.index + m[0].length, "auto"]);
+      if (m[0].length === 0) re.lastIndex++;
+    }
+  }
+  // Admin-curated snippets for this case + language
+  const adminSnippets = (caseId && ADMIN_HIGHLIGHTS[caseId]?.[lang]) || [];
+  for (const snippet of adminSnippets) {
+    if (!snippet) continue;
+    const esc = escapeHtml(snippet);
+    let idx = 0;
+    while ((idx = html.indexOf(esc, idx)) !== -1) {
+      ranges.push([idx, idx + esc.length, "admin"]);
+      idx += esc.length || 1;
+    }
+  }
+  if (!ranges.length) return html;
+  ranges.sort((a,b)=>a[0]-b[0]||a[1]-b[1]);
+  const merged = [ranges[0].slice()];
+  for (let i=1;i<ranges.length;i++){
+    const top = merged[merged.length-1];
+    if (ranges[i][0]<top[1]) {
+      top[1] = Math.max(top[1], ranges[i][1]);
+      if (ranges[i][2] === "admin") top[2] = "admin";
+    } else merged.push(ranges[i].slice());
+  }
+  let out = html;
+  for (let i=merged.length-1;i>=0;i--){
+    const [s,e,kind] = merged[i];
+    const cls = kind === "admin" ? "ctrl ctrl-admin" : "ctrl";
+    out = out.slice(0,s) + `<span class="${cls}">` + out.slice(s,e) + '</span>' + out.slice(e);
+  }
+  return out;
+}
+
+async function loadAnnotations() {
+  try {
+    const r = await fetch(API_ANNOTATIONS, { cache: "no-cache" });
+    if (!r.ok) return;
+    const j = await r.json().catch(() => ({}));
+    ADMIN_HIGHLIGHTS = j.annotations || {};
+    // Re-render the current case so the freshly-loaded admin highlights
+    // appear in the prompt.
+    if (CASES.length && RATER.name) renderCase();
+  } catch (e) { /* offline: auto-detected highlights only */ }
+}
+function showToast(msg, isErr=false){
+  const tt = document.getElementById("toast");
+  tt.textContent = msg;
+  tt.classList.toggle("error", !!isErr);
+  tt.classList.add("show");
+  setTimeout(()=>tt.classList.remove("show"), 1800);
+}
+function genRaterId(){ return "rater_"+Math.random().toString(36).slice(2,8)+"_"+Date.now().toString(36).slice(-4); }
+
+/* ----- LocalStorage (shared key) ----- */
+function loadState(){ try{ return JSON.parse(localStorage.getItem(STORAGE_KEY)||"null"); }catch(e){return null;} }
+function saveState(){
+  try{ localStorage.setItem(STORAGE_KEY, JSON.stringify({
+    rater: RATER, anonymize, lang: LANG, shuffle: SHUFFLE, ratings: RATINGS,
+    saved_at: new Date().toISOString(),
+  })); }catch(e){ showToast("Save failed: "+e.message, true); }
+}
+
+/* ----- Shuffle ----- */
+// Per-rater 10-case subset of the manifest. Admins see all. The chosen ids
+// are locked into RATER.chosen_case_ids on first pick so the rater always
+// sees the same set across sessions / devices regardless of future
+// manifest changes.
+function pickRandomSubsetIds(allCases){
+  const idx = allCases.map((_,i)=>i);
+  let s = hashStr((RATER.id||"anon")+":case-subset");
+  for (let k=0;k<6;k++) s = (s*1664525+1013904223)>>>0;
+  for (let i=idx.length-1;i>0;i--){
+    s = (s*1664525+1013904223)>>>0;
+    const j = (s>>>16)%(i+1);
+    [idx[i],idx[j]] = [idx[j],idx[i]];
+  }
+  return idx.slice(0,CASES_PER_RATER).sort((a,b)=>a-b).map(i => allCases[i].id);
+}
+function selectCasesForRater(allCases){
+  if (isAdmin()) return allCases.slice();
+  if (allCases.length <= CASES_PER_RATER) return allCases.slice();
+  const locked = Array.isArray(RATER.chosen_case_ids) ? RATER.chosen_case_ids : null;
+  if (locked && locked.length){
+    const byId = new Map(allCases.map(c => [c.id, c]));
+    const out = locked.map(id => byId.get(id)).filter(Boolean);
+    if (out.length >= Math.min(CASES_PER_RATER, allCases.length)) return out;
+  }
+  const ids = pickRandomSubsetIds(allCases);
+  RATER.chosen_case_ids = ids;
+  const byId = new Map(allCases.map(c => [c.id, c]));
+  return ids.map(id => byId.get(id)).filter(Boolean);
+}
+async function recoverRaterStateFromServer(email){
+  if (!email) return;
+  try {
+    const r = await fetch(`./api/rater_state?email=${encodeURIComponent(email)}`,
+                         { cache: "no-cache" });
+    if (!r.ok) return;
+    const j = await r.json().catch(()=>({}));
+    if (!j.found || !j.state) return;
+    const remoteRater = j.state.rater || {};
+    if (Array.isArray(remoteRater.chosen_case_ids) && remoteRater.chosen_case_ids.length) {
+      RATER.chosen_case_ids = remoteRater.chosen_case_ids;
+    }
+    for (const c of (j.state.cases || [])) {
+      if (!c || !c.id) continue;
+      RATINGS[c.id] = RATINGS[c.id] || {};
+      for (const v of (c.videos || [])) {
+        const m = v.model;
+        if (!m) continue;
+        RATINGS[c.id][m] = RATINGS[c.id][m] || {};
+        for (const [qk, score] of Object.entries(v.ratings || {})) {
+          if (typeof score === "number" && score>=1 && score<=5 &&
+              RATINGS[c.id][m][qk] === undefined) {
+            RATINGS[c.id][m][qk] = score;
+          }
+        }
+      }
+    }
+  } catch (e) { /* silent */ }
+}
+
+function buildShuffle(cases){
+  for (const c of cases){
+    if (SHUFFLE[c.id] && SHUFFLE[c.id].length===c.videos.length) continue;
+    const idx = c.videos.map((_,i)=>i);
+    if (anonymize){
+      let s = hashStr(RATER.id+":"+c.id);
+      for (let i=idx.length-1;i>0;i--){
+        s = (s*1664525+1013904223)>>>0;
+        const j = s%(i+1);
+        [idx[i],idx[j]] = [idx[j],idx[i]];
+      }
+    }
+    SHUFFLE[c.id] = idx;
+  }
+}
+// Within a case, every sub-question shows its rating rows in A → B → C
+// order. (Per-rater case-level shuffle still varies which video sits under
+// each letter across cases, but the order inside a case is now stable so
+// the rater always sees a consistent layout.)
+function rowSlotOrder(caseId, qKey, slotCount){
+  return Array.from({length:slotCount},(_,i)=>i);
+}
+
+/* ----- Ratings ----- */
+function getCaseR(cid){ if(!RATINGS[cid]) RATINGS[cid]={}; return RATINGS[cid]; }
+function getSlotR(cid, s){ const m = getCaseR(cid); if(!m[s]) m[s]={}; return m[s]; }
+function setRating(cid, sIdx, qk, score){
+  getSlotR(cid, sIdx)[qk] = score;
+  saveState();
+  updateProgress();
+  if (RATER.submitted_at){
+    RATER.submitted_at = null; saveState();
+    setSyncStatus(SYNC_STATUS==="local-only"?"local-only":"idle");
+  }
+  updateSubmitBtn();
+  scheduleProgressSave();
+}
+function studyCompleteness(){
+  const qkeys = DIMENSIONS.flatMap(d=>d.questions.map(q=>q.key));
+  let done=0, expected=0; const missing=[];
+  for (const c of CASES){
+    const slots = SHUFFLE[c.id] || c.videos.map((_,i)=>i);
+    for (let s=0; s<slots.length; s++){
+      const r = (RATINGS[c.id]||{})[s] || {};
+      for (const qk of qkeys){
+        expected++;
+        if (typeof r[qk]==="number" && r[qk]>=1 && r[qk]<=5) done++;
+        else missing.push({case_id:c.id, slot:String.fromCharCode(65+s), q:qk});
+      }
+    }
+  }
+  return { done, expected, missing };
+}
+function caseProgress(c){
+  const slots = SHUFFLE[c.id] || [];
+  const expected = slots.length * TOTAL_QUESTIONS;
+  let done=0;
+  for (let s=0;s<slots.length;s++){
+    const r = (RATINGS[c.id]||{})[s] || {};
+    done += Object.keys(r).filter(k=>typeof r[k]==="number"&&r[k]>=1&&r[k]<=5).length;
+  }
+  return { done, expected };
+}
+
+/* ----- Sync pill + server status ----- */
+function setSyncStatus(state, detail){
+  SYNC_STATUS = state;
+  if (detail!==undefined) SYNC_LAST_DETAIL = detail;
+  const pill = document.getElementById("syncPill");
+  if (!pill) return;
+  pill.dataset.state = state;
+  pill.textContent = t({
+    idle:"pill_idle", submitting:"pill_submitting", submitted:"pill_submitted",
+    "local-only":"pill_local_only", error:"pill_error",
+  }[state] || "pill_checking");
+  pill.title = SYNC_LAST_DETAIL || "";
+}
+async function probeSync(){
+  try{
+    const r = await fetch(API_HEALTH, {cache:"no-cache"});
+    if (r.ok){
+      const j = await r.json().catch(()=>({}));
+      setSyncStatus(j.ok && j.has_token ? "idle" : "local-only");
+    } else setSyncStatus("local-only");
+  }catch(e){ setSyncStatus("local-only"); }
+}
+
+/* ----- Payloads + API calls ----- */
+function buildProgressPayload(){
+  const comp = studyCompleteness();
+  return {
+    rater: RATER, anonymize_used: anonymize, is_admin: isAdmin(),
+    rubric: DIMENSIONS, progress_saved_at: new Date().toISOString(),
+    completeness: { done: comp.done, expected: comp.expected, missing_count: comp.missing.length },
+    cases: CASES.map(c => {
+      const slots = SHUFFLE[c.id] || c.videos.map((_,i)=>i);
+      return {
+        id: c.id, category: c.category||null, prompt: c.prompt,
+        videos: slots.map((origIdx, slotIdx) => ({
+          slot: String.fromCharCode(65+slotIdx), slot_index: slotIdx,
+          original_index: origIdx, model: c.videos[origIdx].model,
+          path: c.videos[origIdx].path,
+          ratings: (RATINGS[c.id]||{})[slotIdx] || {},
+        })),
+      };
+    }),
+  };
+}
+function buildFullPayload(){
+  const p = buildProgressPayload();
+  p.submitted_at = new Date().toISOString();
+  delete p.progress_saved_at; delete p.completeness;
+  return p;
+}
+async function saveProgress(opts={}){
+  if (!RATER.email || !RATER.name) return;
+  if (SYNC_STATUS==="local-only" && opts.source!=="manual") return;
+  try{
+    const r = await fetch(API_SAVE_PROGRESS, {
+      method:"POST", headers:{"Content-Type":"application/json"},
+      body: JSON.stringify(buildProgressPayload()),
+    });
+    if (r.ok){
+      const j = await r.json().catch(()=>({}));
+      if (!opts.silent) showToast(t("toast_progress_saved", j.n_scores ?? 0));
+    } else if (r.status===404||r.status===503){
+      setSyncStatus("local-only");
+    } else if (!opts.silent){
+      showToast(t("toast_progress_save_failed", "HTTP "+r.status), true);
+    }
+  }catch(e){
+    if (!opts.silent) showToast(t("toast_progress_save_failed", e.message), true);
+  }
+}
+function scheduleProgressSave(){
+  if (!RATER.email) return;
+  if (SYNC_STATUS==="local-only") return;
+  if (PROGRESS_TIMER) clearTimeout(PROGRESS_TIMER);
+  PROGRESS_TIMER = setTimeout(()=>{ PROGRESS_TIMER=null; saveProgress({silent:true,source:"auto"}); }, PROGRESS_DEBOUNCE_MS);
+}
+function beaconProgress(){
+  if (!RATER.email || SYNC_STATUS==="local-only") return;
+  try{ navigator.sendBeacon(API_SAVE_PROGRESS,
+    new Blob([JSON.stringify(buildProgressPayload())], {type:"application/json"})); }catch(e){}
+}
+async function submitWholeStudy(){
+  if (!RATER.email||!RATER.name){ showToast(t("toast_pls_signin"), true); openRegister(); return; }
+  const comp = studyCompleteness();
+  if (comp.missing.length>0){
+    showToast(t("toast_missing", comp.missing.length), true);
+    const firstId = comp.missing[0].case_id;
+    const idx = CASES.findIndex(c=>c.id===firstId);
+    if (idx>=0) goTo(idx);
+    return;
+  }
+  if (SYNC_STATUS==="local-only"){ showToast(t("toast_no_server"), true); return; }
+  setSyncStatus("submitting");
+  try{
+    const r = await fetch(API_SUBMIT, {
+      method:"POST", headers:{"Content-Type":"application/json"},
+      body: JSON.stringify(buildFullPayload()),
+    });
+    if (r.ok){
+      const body = await r.json().catch(()=>({}));
+      RATER.submitted_at = new Date().toISOString();
+      saveState();
+      setSyncStatus("submitted");
+      updateSubmitBtn();
+      showSubmittedOverlay(body);
+    } else if (r.status===404||r.status===503){
+      setSyncStatus("local-only"); showToast(t("toast_no_server"), true);
+    } else {
+      setSyncStatus("error");
+      showToast(t("toast_submit_failed", "HTTP "+r.status), true);
+    }
+  }catch(e){
+    setSyncStatus("local-only"); showToast(t("toast_submit_failed", e.message), true);
+  }
+}
+function exportJSON(){
+  const out = {
+    rater: RATER, anonymize_used: anonymize, exported_at: new Date().toISOString(),
+    rubric: DIMENSIONS,
+    cases: CASES.map(c => {
+      const slots = SHUFFLE[c.id] || c.videos.map((_,i)=>i);
+      return { id:c.id, prompt:c.prompt,
+        videos: slots.map((oi,si)=>({
+          slot:String.fromCharCode(65+si), slot_index:si, original_index:oi,
+          model:c.videos[oi].model, path:c.videos[oi].path,
+          ratings:(RATINGS[c.id]||{})[si]||{},
+        })),
+      };
+    }),
+  };
+  const blob = new Blob([JSON.stringify(out,null,2)], {type:"application/json"});
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url; a.download = `user_study_${RATER.id||"anon"}_${new Date().toISOString().slice(0,10)}.json`;
+  document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
+}
+
+/* =========================================================================
+ *  Mobile rendering
+ * ========================================================================= */
+function renderShell(){
+  // language selectors
+  for (const id of ["langSelect","regLangSelect"]){
+    const sel = document.getElementById(id);
+    sel.innerHTML = "";
+    for (const L of LANGUAGES){
+      const o = document.createElement("option");
+      o.value = L.code; o.textContent = L.label;
+      if (L.code===LANG) o.selected = true;
+      sel.appendChild(o);
+    }
+  }
+  document.getElementById("topTitle").textContent = t("title");
+  // bottom-bar labels (kept short on mobile)
+  document.getElementById("prevBtn").textContent = t("prev");
+  document.getElementById("nextBtn").textContent = t("next");
+  document.getElementById("saveBtn").textContent = t("save_progress");
+  document.getElementById("submittedCloseBtn").textContent = t("submitted_close");
+  document.getElementById("submittedDownloadBtn").textContent = t("submitted_download");
+  applyRegistrationI18n();
+  updateSubmitBtn();
+  renderCase();
+  renderDrawer();
+}
+
+function renderCase(){
+  const main = document.getElementById("main");
+  main.innerHTML = "";
+  if (!CASES.length) return;
+  const c = CASES[currentIdx];
+  document.getElementById("caseId").textContent = c.id;
+  document.getElementById("caseCounter").textContent = t("case_n_of_m", currentIdx+1, CASES.length);
+
+  // prompt card
+  main.appendChild(renderPromptCard(c));
+  // video stack
+  main.appendChild(renderVideoStack(c));
+  // controls
+  main.appendChild(renderVideoControls());
+  // rubric — laid out as a responsive grid (1 col on phones, 2-3 on tablets).
+  const grid = document.createElement("div");
+  grid.className = "question-grid";
+  for (const dim of DIMENSIONS){
+    grid.appendChild(renderDimHeader(dim));
+    for (const q of dim.questions) grid.appendChild(renderQuestionCard(c, q));
+  }
+  main.appendChild(grid);
+  updateProgress();
+  refreshDrawerActive();
+}
+
+function renderPromptCard(c){
+  const wrap = document.createElement("div");
+  wrap.className = "prompt-card";
+  const localized = (c.prompt_i18n && c.prompt_i18n[LANG]) || c.prompt || t("no_prompt");
+  const isLong = (localized||"").length > 160;
+  const highlightedFull = highlightControllability(localized, LANG, c.id);
+  // For the collapsed teaser we still highlight, but on the truncated text.
+  const teaser = highlightControllability(localized.slice(0,150)+"…", LANG, c.id);
+  wrap.innerHTML = isLong
+    ? `<div class="label">${escapeHtml(t("prompt_label"))}</div>
+       <details><summary>${teaser} <span style="color:var(--accent)">(${escapeHtml(t("expand_prompt"))})</span></summary>
+       <div style="margin-top:6px">${highlightedFull}</div></details>`
+    : `<div class="label">${escapeHtml(t("prompt_label"))}</div>
+       <div>${highlightedFull}</div>`;
+  if (c.reference_image){
+    const img = document.createElement("img");
+    img.src = c.reference_image; img.className = "ref-img";
+    img.onerror = function(){ this.style.display="none"; };
+    wrap.appendChild(img);
+  }
+  return wrap;
+}
+
+// Mobile keeps the same A/B/C tab UX as desktop, but stacked top-to-bottom.
+// Only the active video is visible; others remain in the DOM so they keep
+// their own playback state.
+function renderVideoStack(c){
+  const slots = SHUFFLE[c.id];
+  const active = getActiveSlot(c.id);
+  const wrap = document.createElement("div");
+  wrap.className = "video-stack";
+  wrap.id = "videoStack";
+
+  // Tab bar
+  const tabs = document.createElement("div");
+  tabs.className = "video-tabs";
+  slots.forEach((origIdx, slotIdx) => {
+    const v = c.videos[origIdx];
+    const letter = String.fromCharCode(65+slotIdx);
+    const label = anonymize ? letter : `${letter} · ${escapeHtml(v.model)}`;
+    const btn = document.createElement("button");
+    btn.className = "tab-btn" + (slotIdx === active ? " active" : "");
+    btn.innerHTML = label;
+    btn.onclick = () => setActiveSlot(c.id, slotIdx);
+    tabs.appendChild(btn);
+  });
+  wrap.appendChild(tabs);
+
+  // Video tiles
+  slots.forEach((origIdx, slotIdx) => {
+    const v = c.videos[origIdx];
+    const tile = document.createElement("div");
+    tile.className = "video-tile" + (slotIdx === active ? "" : " hidden");
+    tile.innerHTML = `
+      <div class="video-frame">
+        <video data-slot="${slotIdx}" preload="metadata" playsinline controls
+               style="width:100%;height:100%">
+          <source src="${escapeHtml(v.path)}" type="video/mp4">
+        </video>
+        <div class="empty-state" style="display:none">
+          <div style="font-size:24px;opacity:0.3">▶</div>
+          <div>${escapeHtml(t("no_video_file"))}</div>
+        </div>
+      </div>`;
+    const video = tile.querySelector("video");
+    const empty = tile.querySelector(".empty-state");
+    const onErr = () => { empty.style.display="flex"; video.style.display="none"; };
+    video.addEventListener("error", onErr);
+    video.querySelector("source").addEventListener("error", onErr);
+    wrap.appendChild(tile);
+  });
+  return wrap;
+}
+
+// Active slot bookkeeping (per case) for the tab UI. Stays in memory only —
+// not persisted across reloads, which is fine since the tabs are just a view
+// helper and ratings persist per-slot in the global RATINGS map.
+let ACTIVE_SLOT = {};
+function getActiveSlot(caseId){ return ACTIVE_SLOT[caseId] ?? 0; }
+function setActiveSlot(caseId, slotIdx){
+  pauseAll();
+  ACTIVE_SLOT[caseId] = slotIdx;
+  // Re-render only the video stack and tab bar (cheap), leaving question
+  // cards / scroll position intact.
+  const old = document.getElementById("videoStack");
+  if (!old) return;
+  const fresh = renderVideoStack(CASES[currentIdx]);
+  old.parentElement.replaceChild(fresh, old);
+}
+
+function renderVideoControls(){
+  const wrap = document.createElement("div");
+  wrap.className = "video-controls";
+  const mkBtn = (label, fn, id) => {
+    const b = document.createElement("button");
+    b.textContent = label; b.onclick = fn; if (id) b.id = id;
+    return b;
+  };
+  // Play button removed — the native <video controls> on the active tab
+  // provides play/pause already.
+  wrap.appendChild(mkBtn(t("pause"), pauseAll));
+  wrap.appendChild(mkBtn(t("restart"), restartAll));
+  const loop = mkBtn(t("loop"), () => toggleLoop(loop));
+  wrap.appendChild(loop);
+  const mute = mkBtn(t("mute"), () => toggleMute(mute));
+  wrap.appendChild(mute);
+  const sel = document.createElement("select");
+  sel.onchange = (e)=>setSpeed(parseFloat(e.target.value));
+  for (const v of ["0.5","0.75","1","1.5","2"]){
+    const o = document.createElement("option"); o.value=v; o.textContent=v+"×";
+    if (v==="1") o.selected = true; sel.appendChild(o);
+  }
+  wrap.appendChild(sel);
+  return wrap;
+}
+
+function renderDimHeader(dim){
+  const d = document.createElement("div");
+  d.className = "dim-header";
+  d.innerHTML = `<span>${escapeHtml(dimName(dim))}</span><span class="dim-hint">${escapeHtml(dimHint(dim))}</span>`;
+  return d;
+}
+
+function renderQuestionCard(c, q){
+  const card = document.createElement("div");
+  card.className = "q-card";
+  card.innerHTML = `<div class="q-name">${escapeHtml(qName(q))}</div>
+                    <div class="q-desc">${escapeHtml(qDesc(q))}</div>`;
+  const slots = SHUFFLE[c.id];
+  const order = rowSlotOrder(c.id, q.key, slots.length);
+  for (const slotIdx of order){
+    const origIdx = slots[slotIdx];
+    const v = c.videos[origIdx];
+    const letter = String.fromCharCode(65+slotIdx);
+    const row = document.createElement("div");
+    row.className = "video-rate";
+    const chip = document.createElement("span");
+    chip.className = "slot-letter";
+    chip.textContent = anonymize ? letter : `${letter}`;
+    chip.title = anonymize ? `Video ${letter}` : `Video ${letter} · ${v.model}`;
+    row.appendChild(chip);
+    const group = document.createElement("div");
+    group.className = "likert";
+    const cur = getSlotR(c.id, slotIdx)[q.key];
+    for (let s=1; s<=5; s++){
+      const b = document.createElement("button");
+      b.dataset.score = String(s);
+      b.textContent = String(s);
+      if (cur===s) b.classList.add("selected");
+      b.onclick = () => {
+        setRating(c.id, slotIdx, q.key, s);
+        Array.from(group.children).forEach((bb,i)=>bb.classList.toggle("selected", (i+1)===s));
+      };
+      group.appendChild(b);
+    }
+    row.appendChild(group);
+    card.appendChild(row);
+  }
+  return card;
+}
+
+/* ----- Drawer ----- */
+function renderDrawer(){
+  const list = document.getElementById("drawerList");
+  list.innerHTML = "";
+  CASES.forEach((c, i) => {
+    const p = caseProgress(c);
+    let cls = "case-row";
+    if (i===currentIdx) cls += " active";
+    if (p.done === p.expected && p.expected>0) cls += " complete";
+    else if (p.done > 0) cls += " partial";
+    const row = document.createElement("div");
+    row.className = cls;
+    row.innerHTML = `<span class="dot"></span>
+      <span class="id">${c.id}</span>
+      <span class="pct">${p.done}/${p.expected}</span>`;
+    row.onclick = () => { closeDrawer(); goTo(i); };
+    list.appendChild(row);
+  });
+}
+function refreshDrawerActive(){
+  document.querySelectorAll("#drawerList .case-row").forEach((r,i)=>{
+    r.classList.toggle("active", i===currentIdx);
+  });
+}
+function openDrawer(){
+  document.getElementById("drawer").classList.add("open");
+  document.getElementById("drawerBackdrop").classList.add("open");
+}
+function closeDrawer(){
+  document.getElementById("drawer").classList.remove("open");
+  document.getElementById("drawerBackdrop").classList.remove("open");
+}
+
+/* ----- Video controls ----- */
+function allVideos(){ return Array.from(document.querySelectorAll("video[data-slot]")); }
+function pauseAll(){ allVideos().forEach(v=>v.pause()); }
+function restartAll(){ allVideos().forEach(v=>{ v.currentTime=0; try{ v.play(); }catch(e){} }); }
+let LOOPING=false;
+function toggleLoop(btn){ LOOPING=!LOOPING; allVideos().forEach(v=>v.loop=LOOPING); btn.classList.toggle("on",LOOPING); }
+let MUTED=false;
+function toggleMute(btn){ MUTED=!MUTED; allVideos().forEach(v=>v.muted=MUTED); btn.classList.toggle("on",MUTED); btn.textContent=MUTED?t("muted"||"sound"):t("mute"); }
+function setSpeed(rate){ allVideos().forEach(v=>v.playbackRate=rate); }
+
+/* ----- Navigation ----- */
+function goTo(idx){
+  if (idx<0 || idx>=CASES.length) return;
+  pauseAll();
+  currentIdx = idx;
+  renderCase();
+  // scroll to top of main on case switch
+  window.scrollTo({top:0, behavior:"instant"});
+}
+function step(d){ goTo((currentIdx + d + CASES.length) % CASES.length); }
+
+/* ----- Submit button + progress ----- */
+function updateSubmitBtn(){
+  const btn = document.getElementById("submitBtn");
+  if (!btn) return;
+  const comp = studyCompleteness();
+  const remaining = comp.expected - comp.done;
+  if (remaining > 0){
+    btn.disabled = true; btn.textContent = t("submit_disabled", remaining);
+  } else if (SYNC_STATUS === "submitted"){
+    btn.disabled = false; btn.textContent = t("submit_resubmit");
+  } else {
+    btn.disabled = false; btn.textContent = t("submit", comp.expected);
+  }
+}
+function updateProgress(){
+  const { done, expected } = studyCompleteness();
+  document.getElementById("progressFill").style.width =
+    expected>0 ? (done/expected*100).toFixed(1)+"%" : "0%";
+  document.getElementById("progressTxt").textContent = `${done}/${expected}`;
+  updateSubmitBtn();
+  // also refresh per-case status in drawer (cheap)
+  refreshDrawerCounts();
+}
+function refreshDrawerCounts(){
+  document.querySelectorAll("#drawerList .case-row").forEach((row,i)=>{
+    const c = CASES[i]; if (!c) return;
+    const p = caseProgress(c);
+    row.classList.remove("partial","complete");
+    if (p.done===p.expected && p.expected>0) row.classList.add("complete");
+    else if (p.done>0) row.classList.add("partial");
+    const pct = row.querySelector(".pct");
+    if (pct) pct.textContent = `${p.done}/${p.expected}`;
+  });
+}
+
+/* ----- Registration overlay ----- */
+function openRegister(){
+  document.getElementById("loginOverlay").classList.remove("hidden");
+  document.getElementById("regName").value = RATER.name || "";
+  document.getElementById("regEmail").value = RATER.email || "";
+  document.getElementById("regNote").value = RATER.note || "";
+  applyRegistrationI18n();
+}
+function closeRegister(){ document.getElementById("loginOverlay").classList.add("hidden"); }
+
+/* ----- help / 评分说明 overlay (mobile only) ----- */
+const HELP_SEEN_KEY = "user_study_help_seen_v1";
+function openHelp(){
+  applyHelpI18n();
+  document.getElementById("helpOverlay").classList.remove("hidden");
+}
+function closeHelp(){
+  document.getElementById("helpOverlay").classList.add("hidden");
+  try { localStorage.setItem(HELP_SEEN_KEY, "1"); } catch(e){}
+}
+function applyHelpI18n(){
+  const h = document.getElementById("helpHeader");
+  if (h) h.textContent = t("help_title");
+  const body = document.getElementById("helpBody");
+  if (body) body.innerHTML = t("help_body_html");
+  const btn = document.getElementById("helpDismissText");
+  if (btn) btn.textContent = t("help_dismiss");
+}
+function applyRegistrationI18n(){
+  document.getElementById("regHeader").textContent = t("reg_title");
+  document.getElementById("regLead").textContent = t("reg_lead");
+  document.getElementById("regNameLabel").textContent = t("reg_name");
+  document.getElementById("regEmailLabel").textContent = t("reg_email");
+  document.getElementById("regNoteLabel").textContent = t("reg_note");
+  document.getElementById("regContinueText").textContent = t("reg_continue");
+  document.getElementById("regFootText").innerHTML = t("reg_foot");
+  document.getElementById("regName").placeholder = t("reg_name_ph");
+  document.getElementById("regEmail").placeholder = t("reg_email_ph");
+  document.getElementById("regNote").placeholder = t("reg_note_ph");
+  document.getElementById("submittedHeading").textContent = t("submitted_title");
+}
+function handleRegister(){
+  const name = document.getElementById("regName").value.trim();
+  const email = document.getElementById("regEmail").value.trim().toLowerCase();
+  const note = document.getElementById("regNote").value.trim();
+  const err = document.getElementById("regErr");
+  err.textContent = "";
+  if (!name){ err.textContent = t("reg_err_name"); return; }
+  if (!EMAIL_RE.test(email)){ err.textContent = t("reg_err_email"); return; }
+  RATER.name = name; RATER.email = email; RATER.note = note;
+  if (!RATER.id || RATER.id.startsWith("rater_")){
+    RATER.id = email.replace(/[^a-z0-9]+/gi,"_").replace(/^_+|_+$/g,"");
+  }
+  if (!RATER.started_at) RATER.started_at = new Date().toISOString();
+  // Non-admins always anonymized
+  if (!isAdmin()) anonymize = true;
+  closeRegister();
+  // Recover any prior locked case subset + ratings from the server first,
+  // then resolve the subset (locked > deterministic pick).
+  (async () => {
+    await recoverRaterStateFromServer(email);
+    CASES = selectCasesForRater(ALL_CASES);
+    SHUFFLE = {}; buildShuffle(CASES); saveState();
+    renderShell();
+  })();
+  (async()=>{
+    await probeSync();
+    if (SYNC_STATUS!=="local-only"){
+      await saveProgress({silent:true, source:"register"});
+    }
+    showToast(t("toast_registered", name));
+  })();
+}
+
+/* ----- Submitted overlay ----- */
+function showSubmittedOverlay(body){
+  const ov = document.getElementById("submittedOverlay");
+  document.getElementById("submittedDetail").textContent =
+    t("submitted_thanks", RATER.name, body.n_scores ?? "?", body.n_videos ?? "?");
+  document.getElementById("submittedRef").textContent = body.stored_as || "—";
+  ov.classList.remove("hidden");
+}
+function hideSubmittedOverlay(){ document.getElementById("submittedOverlay").classList.add("hidden"); }
+
+/* =========================================================================
+ *  Init
+ * ========================================================================= */
+(async function init(){
+  // restore lang first
+  try{
+    const prior0 = JSON.parse(localStorage.getItem(STORAGE_KEY)||"null");
+    if (prior0 && STRINGS[prior0.lang]) LANG = prior0.lang;
+  }catch(e){}
+  if (LANG === "en"){
+    const nav = (navigator.language||"en").toLowerCase();
+    if (nav.startsWith("zh")) LANG = "zh";
+    else if (nav.startsWith("bg")) LANG = "bg";
+  }
+  document.documentElement.lang = LANG;
+
+  // fetch manifest
+  let manifest = null;
+  for (const p of ["./cases.json", "./cases.example.json"]){
+    try{ const r = await fetch(p, {cache:"no-cache"}); if (r.ok){ manifest = await r.json(); break; } }catch(e){}
+  }
+  if (!manifest || !Array.isArray(manifest) || manifest.length===0){
+    document.getElementById("main").innerHTML =
+      '<div style="padding:40px;color:var(--bad);text-align:center">Could not load cases.json</div>';
+    return;
+  }
+  ALL_CASES = manifest;
+
+  // restore state
+  const prior = loadState();
+  const blankRater = () => ({ id:genRaterId(), name:"", email:"", note:"",
+                              started_at:new Date().toISOString(), submitted_at:null });
+  if (prior){
+    RATER = Object.assign(blankRater(), prior.rater||{});
+    anonymize = prior.anonymize !== false;
+    RATINGS = prior.ratings || {};
+    SHUFFLE = prior.shuffle || {};
+    // One-shot client-side huobao→univa rename (see desktop for context).
+    for (const cid of Object.keys(RATINGS)) {
+      const m = RATINGS[cid];
+      if (m && m.huobao && !m.univa) { m.univa = m.huobao; delete m.huobao; }
+    }
+  } else { RATER = blankRater(); }
+  if (!isAdmin()) anonymize = true;
+  // Admins see all cases; everyone else gets a deterministic 10-case subset.
+  CASES = selectCasesForRater(ALL_CASES);
+  buildShuffle(CASES); saveState();
+
+  // wire DOM events
+  document.getElementById("drawerBtn").onclick = openDrawer;
+  document.getElementById("helpBtn").onclick = openHelp;
+  document.getElementById("helpCloseBtn").onclick = closeHelp;
+  document.getElementById("helpDismissBtn").onclick = closeHelp;
+  document.getElementById("drawerCloseBtn").onclick = closeDrawer;
+  document.getElementById("drawerBackdrop").onclick = closeDrawer;
+  document.getElementById("prevBtn").onclick = () => step(-1);
+  document.getElementById("nextBtn").onclick = () => step(1);
+  document.getElementById("submitBtn").onclick = submitWholeStudy;
+  document.getElementById("saveBtn").onclick = () => saveProgress({silent:false, source:"manual"});
+  document.getElementById("scrollTopBtn").onclick = () => {
+    document.getElementById("videoStack")?.scrollIntoView({behavior:"smooth", block:"start"});
+  };
+  document.getElementById("regGoBtn").onclick = handleRegister;
+  document.getElementById("submittedCloseBtn").onclick = hideSubmittedOverlay;
+  document.getElementById("submittedDownloadBtn").onclick = exportJSON;
+  document.getElementById("langSelect").onchange = (e) => {
+    LANG = e.target.value; document.documentElement.lang = LANG;
+    saveState(); renderShell();
+  };
+  document.getElementById("regLangSelect").onchange = (e) => {
+    LANG = e.target.value; document.documentElement.lang = LANG;
+    saveState(); applyRegistrationI18n();
+  };
+  // best-effort save on close
+  window.addEventListener("beforeunload", beaconProgress);
+  document.addEventListener("visibilitychange", () => {
+    if (document.visibilityState==="hidden") beaconProgress();
+  });
+
+  // gate on registration
+  if (!RATER.name || !RATER.email || !EMAIL_RE.test(RATER.email)){
+    openRegister();
+  } else {
+    renderShell();
+    closeRegister();
+    probeSync();
+    // Auto-open the rubric popup once per device. The user can manually
+    // reopen it any time via the "?" header button.
+    try {
+      if (localStorage.getItem(HELP_SEEN_KEY) !== "1") openHelp();
+    } catch (e) {}
+  }
+  // Always fetch admin-curated highlights; available even before registration
+  // gate clears so the prompt shows highlights as soon as the rater enters.
+  loadAnnotations();
+})();
+</script>
+</body>
+</html>