Spaces:
Running
Running
| // The reviewed golden text and its rewrite, side by side: one card per clip, read from data.js (window.ROWS). View only. | |
| const rows = window.ROWS || []; | |
| const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({"&": "&", "<": "<", ">": ">", '"': """}[c])); | |
| const store = { | |
| get(k) { try { return localStorage.getItem(k); } catch { return null; } }, | |
| set(k, v) { try { localStorage.setItem(k, v); } catch {} }, | |
| }; | |
| const has = (r, start) => r.why.some((w) => w.startsWith(start)); | |
| const GROUPS = [ | |
| ["all", "All", () => true], | |
| ["review", "Reviewer notes", (r) => has(r, "review")], | |
| ["rewrite", "Rewrite drift", (r) => has(r, "rewrite")], | |
| ["original", "Original issues", (r) => has(r, "original")], | |
| ["signs", "With signs", (r) => r.signs.length > 0], | |
| ]; | |
| const GENERATOR = {facefusion: "FaceFusion", animate: "Animate", s2v: "S2V", real: "Real recording"}; | |
| const words = (t) => (t || "").split(/\s+/).filter(Boolean).length; | |
| function column(cls, title, note, r, sections, extra = "") { | |
| const fake = (p) => r.fake_parts.includes(p); | |
| const n = r.fake_parts.reduce((a, p) => a + words(sections[p]), 0); | |
| const body = ["video", "audio"].map((p) => `<div class="part"><div class="tag">${p}</div> | |
| <p class="${fake(p) ? "" : "real"}">${esc(sections[p])}</p></div>`).join(""); | |
| return `<section class="arm"><h3><span class="dot ${cls}"></span>${title}<small>${note}</small> | |
| <span class="words">${n} words</span></h3>${extra}${body}</section>`; | |
| } | |
| function card(r) { | |
| const parts = ["video", "audio"].map((p) => { | |
| const fake = r.fake_parts.includes(p); | |
| return `<span class="${fake ? "fake" : "real"}">${p[0].toUpperCase() + p.slice(1)} ${fake ? "fake" : "real"}</span>`; | |
| }).join(" · "); | |
| const dl = [["Picked", `<ul class="why">${r.why.map((w) => `<li>${esc(w)}</li>`).join("")}</ul>`]]; | |
| if (r.signs.length) dl.push(["Signs", r.signs.map(esc).join("<br>")]); | |
| const ref = r.reference ? `<button class="link" data-ref>Show the real clip</button> | |
| <div class="ref" hidden><video controls preload="none" src="${esc(r.reference)}"></video></div>` : ""; | |
| const kept = r.rewritten ? "" : '<p class="kept">No rewrite passed, so this clip keeps the original text.</p>'; | |
| return `<article class="clip"><div class="top"><div class="media"><video controls preload="metadata" src="${esc(r.clip)}"></video></div> | |
| <div class="info"><h2>Clip ${r.n}</h2><div class="meta">${GENERATOR[r.generator] || r.generator} · ${parts}</div> | |
| <dl class="facts">${dl.map(([k, v]) => `<dt>${k}</dt><dd>${v}</dd>`).join("")}</dl>${ref}</div></div> | |
| <div class="cols">${column("O", "Original", "reviewed", r, r.original)}${column("R", "Rewrite", "one paragraph", r, r.rewrite, kept)}</div></article>`; | |
| } | |
| function show(key) { | |
| const test = GROUPS.find((g) => g[0] === key)[2]; | |
| document.getElementById("clips").innerHTML = rows.filter(test).map(card).join(""); | |
| for (const b of document.querySelectorAll("#filters button")) b.classList.toggle("on", b.dataset.key === key); | |
| store.set("rvo:filter", key); | |
| } | |
| document.getElementById("filters").innerHTML = GROUPS.map(([k, label, test]) => | |
| `<button data-key="${k}">${label}<span class="count">${rows.filter(test).length}</span></button>`).join(""); | |
| document.getElementById("filters").onclick = (e) => { const b = e.target.closest("button"); if (b) show(b.dataset.key); }; | |
| document.addEventListener("click", (e) => { | |
| const b = e.target.closest("[data-ref]"); | |
| if (!b) return; | |
| const ref = b.nextElementSibling; | |
| ref.hidden = !ref.hidden; | |
| b.textContent = ref.hidden ? "Show the real clip" : "Hide the real clip"; | |
| }); | |
| const start = store.get("rvo:filter"); | |
| show(GROUPS.some((g) => g[0] === start) ? start : "all"); | |