index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MOZAIC T4 Sample</title>
<style>
  :root {
    --bg: #f7f7f5; --card: #ffffff; --text: #1d1d1b; --muted: #6b6b66; --line: #e3e2dd;
    --real: #2f7d4f; --real-bg: #e4f2e9; --fake: #b3392f; --fake-bg: #f8e3e0; --sign-bg: #eeeaf8; --sign: #4b3c8f;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #161615; --card: #20201e; --text: #ecebe6; --muted: #9c9b95; --line: #34332f;
      --real: #7fcf9c; --real-bg: #1f3428; --fake: #f08f84; --fake-bg: #3d2421; --sign-bg: #2a2540; --sign: #c3b8f2;
    }
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
  header { max-width: 1100px; margin: 0 auto; padding: 28px 16px 8px; }
  h1 { font-size: 22px; margin: 0 0 6px; }
  header p { margin: 0 0 14px; color: var(--muted); max-width: 760px; }
  .filters { display: flex; flex-wrap: wrap; gap: 6px; }
  .filters button { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px;
    padding: 5px 12px; font: inherit; font-size: 13px; cursor: pointer; }
  .filters button.on { background: var(--text); color: var(--bg); border-color: var(--text); }
  main { max-width: 1100px; margin: 0 auto; padding: 12px 16px 48px; display: grid; gap: 16px; }
  .card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px;
    display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 18px; }
  @media (max-width: 760px) { .card { grid-template-columns: 1fr; } }
  video { width: 100%; border-radius: 8px; background: #000; display: block; }
  .meta { margin-top: 8px; font-size: 12px; color: var(--muted); word-break: break-all; }
  .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
  .tag { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
  .tag.real { color: var(--real); background: var(--real-bg); }
  .tag.fake { color: var(--fake); background: var(--fake-bg); }
  .tag.plain { color: var(--muted); border: 1px solid var(--line); font-weight: 500; }
  h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 12px 0 4px; }
  h3:first-of-type { margin-top: 0; }
  .text { margin: 0; }
  .signs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
  .sign { font-size: 12px; color: var(--sign); background: var(--sign-bg); padding: 2px 9px; border-radius: 6px; }
  details { margin-top: 12px; font-size: 13px; color: var(--muted); }
  summary { cursor: pointer; }
  details p { margin: 6px 0 0; }
</style>
</head>
<body>
<header>
  <h1>MOZAIC T4: explanation sample</h1>
  <p>Each explanation is written from metadata only (the facts and the quality-score signs), then put into plain sentences by Claude Sonnet 5.5. No model watched or listened to the clip. Play each clip and check whether the text matches what you see and hear.</p>
  <div class="filters" id="filters"></div>
</header>
<main id="list"></main>
<script>
const LABELS = { RVRA: "real video · real audio", FVRA: "fake video · real audio", RVFA: "real video · fake audio", FVFA: "fake video · fake audio" };
let rows = [], filter = "all";

function el(tag, cls, text) { const e = document.createElement(tag); if (cls) e.className = cls; if (text != null) e.textContent = text; return e; }

function card(r) {
  const c = el("article", "card");
  const left = el("div");
  const v = el("video"); v.controls = true; v.preload = "metadata"; v.src = r.mp4; left.append(v);
  left.append(el("div", "meta", r.id));
  const right = el("div");
  const tags = el("div", "tags");
  const parts = r.gt_target.parts;
  tags.append(el("span", "tag " + (parts.video.fake ? "fake" : "real"), "video " + (parts.video.fake ? "FAKE · " + parts.video.region : "real")));
  tags.append(el("span", "tag " + (parts.audio.fake ? "fake" : "real"), "audio " + (parts.audio.fake ? "FAKE · voice" : "real")));
  tags.append(el("span", "tag plain", r.gt_label + " · " + r.meta.video_method + " · " + r.meta.frames + " frames"));
  right.append(tags);
  for (const part of ["video", "audio"]) {
    right.append(el("h3", null, part));
    right.append(el("p", "text", r.gt_target.sections[part]));
    const signs = parts[part].signs || [];
    if (signs.length) {
      const s = el("div", "signs");
      signs.forEach(x => s.append(el("span", "sign", x.meaning + " (" + x.score + " " + x.value + ")")));
      right.append(s);
    }
  }
  const d = el("details"); d.append(el("summary", null, "Facts given to the writer"));
  for (const part of ["video", "audio"]) {
    const p = parts[part];
    d.append(el("p", null, part + ": " + (p.fake ? "FAKE (" + p.region + "): " + p.changed + (p.original ? "; " + p.original : "") : "REAL")));
  }
  right.append(d);
  c.append(left, right);
  return c;
}

function render() {
  const list = document.getElementById("list"); list.textContent = "";
  rows.filter(r => filter === "all" || r.gt_label === filter).forEach(r => list.append(card(r)));
}

function filters() {
  const f = document.getElementById("filters");
  for (const k of ["all", "RVRA", "FVRA", "RVFA", "FVFA"]) {
    const b = el("button", k === filter ? "on" : "", k === "all" ? "All" : k + " · " + LABELS[k]);
    b.onclick = () => { filter = k; [...f.children].forEach(x => x.classList.remove("on")); b.classList.add("on"); render(); };
    f.append(b);
  }
}

fetch("data.json").then(r => r.json()).then(d => { rows = d; filters(); render(); })
  .catch(e => { document.getElementById("list").textContent = "Could not load data.json: " + e; });
</script>
</body>
</html>