| "use strict"; |
|
|
| window.QuickRDPage = (function () { |
| const $ = (id) => document.getElementById(id); |
| const S = { |
| built: false, poll: null, rows: [], fsKind: null, mpMin: null, mpMax: null, |
| logx: true, logy: false, psnr: false, |
| show: { oldPresets: true, liveOldPresets: true, newPresets: true, jpeg: true, jp2: true, webp: true, jxl: true, avif: true, downsample: false, png: true }, |
| }; |
| const COLORS = { old: "#ff9b54", newer: "#ff3b41", jpeg: "#7d8cff", jp2: "#4fa3ff", webp: "#54c0ff", jxl: "#c084fc", avif: "#34d39a", downsample: "#e6e6e6", png: "#ef19ef" }; |
| const TOGGLES = [["oldPresets", "DB Old PBC Presets"], ["liveOldPresets", "Live Old PBC Presets"], ["newPresets", "Live New PBC Presets"], ["jpeg", "JPEG"], ["jp2", "JPEG2000"], ["webp", "WebP"], ["jxl", "JXL"], ["avif", "AVIF"], ["downsample", "Downsample"], ["png", "PNG"]]; |
| const P2D = { |
| qc: { x: "bpp", y: "mse", xt: "bpp", yt: "MSE", title: "MSE vs Compression", note: "↙ lower-left is best" }, |
| qs: { x: "speed", y: "mse", xt: "seconds", yt: "MSE", title: "MSE vs Speed", note: "↙ lower-left is best" }, |
| cs: { x: "speed", y: "bpp", xt: "seconds", yt: "bpp", title: "Compression vs Speed", note: "↙ lower-left is best" }, |
| qcs: { x: "speed", y: "eff", xt: "seconds", yt: "efficiency 1/(bpp·MSE)", title: "Efficiency vs Speed", note: "↖ upper-left is best" }, |
| }; |
| const FS_STYLE = ` |
| .sw-plot-box{position:relative;}.sw-fs-btn{position:absolute;top:10px;right:10px;z-index:5;background:rgba(18,18,20,.72);border:1px solid var(--border2);color:var(--text);border-radius:7px;width:28px;height:28px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}.sw-fs-btn:hover{border-color:var(--red-dim);color:#fff;background:rgba(18,18,20,.9)} |
| #qrd-fs{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);display:flex;padding:24px}#qrd-fs[hidden]{display:none}.sw-fs-inner{margin:auto;width:96vw;height:92vh;background:var(--surface);border:1px solid var(--border);border-radius:16px;display:flex;flex-direction:column;padding:14px 16px;box-shadow:0 24px 70px rgba(0,0,0,.55)}.sw-fs-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.sw-fs-bar span{font-size:13px;font-weight:600;color:var(--text)}#qrd-fs-plot{flex:1;min-height:0}`; |
|
|
| const fmt = (v, d = 4) => (v == null || isNaN(v)) ? "—" : (+v).toFixed(d); |
| const psnr = (mse) => mse <= 0 ? 99 : 10 * Math.log10(255 * 255 / mse); |
| const eff = (r) => (r.bpp > 0 && r.mse > 0) ? 1 / (r.bpp * r.mse) : 0; |
| const yMetric = (r) => S.psnr ? psnr(r.mse) : r.mse; |
| const codecKey = (c) => c === "JPEG2000" ? "jp2" : c.toLowerCase(); |
| const name = (r) => r.kind === "preset" ? `${r.source === "new" ? "New" : "Old"} ${r.preset}` : `${r.codec}${r.q != null ? " q" + r.q : ""}`; |
|
|
| function onShow() { build(); refreshResults(); refreshStatus(); resizeSoon(); } |
| function onHide() { stopPolling(); closeFs(); } |
|
|
| function resizeSoon() { |
| for (const delay of [0, 40, 160, 400]) { |
| setTimeout(() => { |
| for (const id of ["qrd-p-qc", "qrd-p-qs", "qrd-p-cs", "qrd-p-qcs", "qrd-fs-plot"]) { |
| const el = $(id); |
| if (el && el.data) Plotly.Plots.resize(el); |
| } |
| }, delay); |
| } |
| } |
|
|
| function build() { |
| if (S.built) return; |
| const st = document.createElement("style"); st.textContent = FS_STYLE; document.head.appendChild(st); |
| $("view-quick-rd").innerHTML = ` |
| <div class="sw-wrap"> |
| <div class="sw-card"> |
| <h3>Tuning database<span class="sub">loads old presets/codecs from pbc3_sweep.db</span></h3> |
| <div class="sw-row" style="gap:16px"> |
| <label class="sw-btn">Upload database<input id="qrd-upload" type="file" accept=".db" hidden></label> |
| <button id="qrd-download" class="sw-btn">Download tuning database</button> |
| </div> |
| <div id="qrd-dbmsg" class="sw-muted" style="margin-top:8px"></div> |
| </div> |
| <div class="sw-card"> |
| <h3>Quick RD benchmark<span class="sub">runs current 4 PBC3 presets over hpt_data/</span></h3> |
| <div class="sw-row" style="gap:16px;align-items:end"> |
| <div class="sw-f" style="min-width:220px"><label>n trials: <span id="qrd-n-val">1</span></label><input id="qrd-n" type="range" min="1" max="10" step="1" value="1"></div> |
| <label class="sw-muted" style="text-transform:none;letter-spacing:0"><input type="checkbox" id="qrd-run-old" checked> compare live old_pbc</label> |
| <button id="qrd-run" class="sw-btn primary">Run quick RD benchmark</button><button id="qrd-stop" class="sw-btn" disabled>Stop</button> |
| </div> |
| <div id="qrd-status" class="sw-muted" style="margin-top:10px"></div><pre id="qrd-log" class="run-log"></pre> |
| </div> |
| <div class="sw-card"> |
| <h3>Chart data</h3> |
| <div class="sw-row" style="gap:16px"> |
| <button id="qrd-refresh" class="sw-btn primary">Refresh</button> |
| <div class="sw-f"><label>MP ≥</label><input id="qrd-mpmin" class="sw-input" type="number" step="0.1" placeholder="any"></div> |
| <div class="sw-f"><label>MP ≤</label><input id="qrd-mpmax" class="sw-input" type="number" step="0.1" placeholder="any"></div> |
| <button id="qrd-mpreset" class="sw-btn sm">Reset MP</button> |
| </div> |
| <div id="qrd-msg" class="sw-muted" style="margin-top:8px"></div> |
| </div> |
| <div class="sw-card"> |
| <h3>Tradeoffs<span class="sub">old DB vs current code</span></h3> |
| <div class="sw-row" id="qrd-toggles" style="margin-bottom:10px"></div> |
| <div class="sw-row" style="margin-bottom:10px"><span class="sw-muted">Scale:</span> |
| <label class="sw-muted" style="text-transform:none;letter-spacing:0"><input type="checkbox" id="qrd-logx" checked> log x</label> |
| <label class="sw-muted" style="text-transform:none;letter-spacing:0"><input type="checkbox" id="qrd-logy"> log y</label> |
| <label class="sw-muted" style="text-transform:none;letter-spacing:0"><input type="checkbox" id="qrd-psnr"> PSNR</label> |
| </div> |
| <div class="sw-plots"> |
| <div class="sw-plot-box"><button class="sw-fs-btn" data-fs="qc">⤢</button><div id="qrd-p-qc" class="sw-plot"></div></div> |
| <div class="sw-plot-box"><button class="sw-fs-btn" data-fs="qs">⤢</button><div id="qrd-p-qs" class="sw-plot"></div></div> |
| <div class="sw-plot-box"><button class="sw-fs-btn" data-fs="cs">⤢</button><div id="qrd-p-cs" class="sw-plot"></div></div> |
| <div class="sw-plot-box"><button class="sw-fs-btn" data-fs="qcs">⤢</button><div id="qrd-p-qcs" class="sw-plot"></div></div> |
| </div> |
| </div> |
| <div id="qrd-fs" hidden><div class="sw-fs-inner"><div class="sw-fs-bar"><span id="qrd-fs-title"></span><button id="qrd-fs-close" class="sw-btn sm">Close ✕</button></div><div id="qrd-fs-plot"></div></div></div> |
| </div>`; |
| buildToggles(); |
| $("qrd-upload").onchange = e => e.target.files[0] && uploadDb(e.target.files[0]); |
| $("qrd-download").onclick = () => window.open("/api/sweeps/download_db", "_blank"); |
| $("qrd-n").oninput = e => $("qrd-n-val").textContent = e.target.value; |
| $("qrd-run").onclick = run; |
| $("qrd-stop").onclick = stop; |
| $("qrd-refresh").onclick = refreshResults; |
| ["qrd-mpmin", "qrd-mpmax"].forEach(id => $(id).addEventListener("change", refreshResults)); |
| $("qrd-mpreset").onclick = () => { $("qrd-mpmin").value = ""; $("qrd-mpmax").value = ""; refreshResults(); }; |
| $("qrd-logx").onchange = e => { S.logx = e.target.checked; render(); }; |
| $("qrd-logy").onchange = e => { S.logy = e.target.checked; render(); }; |
| $("qrd-psnr").onchange = e => { S.psnr = e.target.checked; render(); }; |
| $("view-quick-rd").querySelectorAll(".sw-fs-btn").forEach(b => b.onclick = () => openFs(b.dataset.fs)); |
| $("qrd-fs-close").onclick = closeFs; |
| document.addEventListener("keydown", e => { if (e.key === "Escape" && !$('qrd-fs').hidden) closeFs(); }); |
| S.built = true; |
| } |
|
|
| function buildToggles() { |
| $("qrd-toggles").innerHTML = `<span class="sw-muted">Show:</span>` + TOGGLES.map(([k, l]) => `<label class="sw-muted" style="text-transform:none;letter-spacing:0"><input type="checkbox" data-show="${k}" ${S.show[k] ? "checked" : ""}> ${l}</label>`).join(""); |
| $("qrd-toggles").querySelectorAll("input").forEach(el => el.onchange = () => { S.show[el.dataset.show] = el.checked; render(); }); |
| } |
|
|
| async function uploadDb(file) { const fd = new FormData(); fd.append("file", file); const d = await (await fetch("/api/sweeps/run/upload_db", { method: "POST", body: fd })).json(); $("qrd-dbmsg").textContent = d.error || "Database loaded."; refreshResults(); } |
| async function run() { |
| const body = { n_trials: +$("qrd-n").value, run_old: $("qrd-run-old").checked }; |
| const d = await (await fetch("/api/quick_rd/start", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) })).json(); |
| if (d.error) return alert(d.error); |
| startPolling(); refreshStatus(); |
| } |
| async function stop() { await fetch("/api/quick_rd/stop", { method: "POST" }); refreshStatus(); } |
| function startPolling() { if (!S.poll) S.poll = setInterval(refreshStatus, 2000); } |
| function stopPolling() { if (S.poll) { clearInterval(S.poll); S.poll = null; } } |
|
|
| async function refreshStatus() { |
| if (!S.built) return; |
| const s = await (await fetch("/api/quick_rd/status")).json(); |
| $("qrd-run").disabled = s.running; $("qrd-stop").disabled = !s.running; |
| $("qrd-status").innerHTML = s.running ? `Running · ${s.done}/${s.total || 4} · ${s.current || ""}` : (s.error ? `Error: ${s.error}` : "Idle."); |
| $("qrd-log").textContent = (s.log || []).slice(-30).join("\n"); |
| if (s.running) { startPolling(); refreshResults(); } else { stopPolling(); refreshResults(); } |
| } |
|
|
| async function refreshResults() { |
| const qs = new URLSearchParams(); |
| if ($("qrd-mpmin").value !== "") qs.set("mp_min", $("qrd-mpmin").value); |
| if ($("qrd-mpmax").value !== "") qs.set("mp_max", $("qrd-mpmax").value); |
| const d = await (await fetch("/api/quick_rd/results?" + qs.toString())).json(); |
| S.rows = (d.rows || []).map(r => ({ ...r, eff: eff(r) })).filter(r => r.speed != null && r.bpp != null && r.mse != null); |
| $("qrd-msg").textContent = `${S.rows.length} points · old DB ${d.old_db_exists ? "loaded" : "missing"} · new results ${d.new_exists ? "loaded" : "missing"}`; |
| render(); |
| } |
|
|
| function visibleRows() { |
| return S.rows.filter(r => { |
| if (r.kind === "preset") { |
| if (r.source === "new") return S.show.newPresets; |
| if (r.source === "old_live") return S.show.liveOldPresets; |
| return S.show.oldPresets; |
| } |
| return S.show[codecKey(r.codec)]; |
| }); |
| } |
| function traceFor(rows, label, color, symbol) { |
| return { x: rows.map(r => r._x), y: rows.map(r => r._y), mode: "markers+lines", type: "scatter", name: label, marker: { color, size: 9, symbol }, line: { color, width: 1.5 }, text: rows.map(r => `${name(r)}<br>MSE ${fmt(r.mse, 3)} · PSNR ${fmt(psnr(r.mse), 2)}<br>bpp ${fmt(r.bpp, 5)} · ${fmt(r.speed, 3)}s`), hovertemplate: "%{text}<extra></extra>" }; |
| } |
| function renderOne(kind, target) { |
| if (!window.Plotly) return; |
| const def = P2D[kind]; |
| const rows = visibleRows().map(r => ({ ...r, _x: r[def.x], _y: def.y === "mse" ? yMetric(r) : r[def.y] })); |
| const traces = []; |
| const old = rows.filter(r => r.kind === "preset" && r.source === "old"); if (old.length) traces.push(traceFor(old, "DB Old PBC Presets", COLORS.old, "diamond")); |
| const liveOld = rows.filter(r => r.kind === "preset" && r.source === "old_live"); if (liveOld.length) traces.push(traceFor(liveOld, "Live Old PBC Presets", "#ffb86b", "square")); |
| const newer = rows.filter(r => r.kind === "preset" && r.source === "new"); if (newer.length) traces.push(traceFor(newer, "Live New PBC Presets", COLORS.newer, "circle")); |
| for (const [key, label, color] of [["JPEG", "JPEG", COLORS.jpeg], ["JPEG2000", "JPEG2000", COLORS.jp2], ["WEBP", "WebP", COLORS.webp], ["JXL", "JXL", COLORS.jxl], ["AVIF", "AVIF", COLORS.avif], ["DOWNSAMPLE", "Downsample", COLORS.downsample], ["PNG", "PNG", COLORS.png]]) { |
| const pts = rows.filter(r => r.codec === key).sort((a, b) => (a.q || 0) - (b.q || 0)); |
| if (pts.length) traces.push(traceFor(pts, label, color, "diamond")); |
| } |
| const yt = def.y === "mse" && S.psnr ? "PSNR" : def.yt; |
| const title = def.y === "mse" && S.psnr ? def.title.replace("MSE", "PSNR") : def.title; |
| const el = $(target); |
| if (!el || el.offsetWidth < 50) return; |
| Plotly.react(el, traces, { autosize: true, title: { text: `${title} <span style="font-size:10px;color:#888">${def.note}</span>`, font: { size: 13, color: "#ddd" } }, paper_bgcolor: "transparent", plot_bgcolor: "transparent", font: { color: "#cfcfcf", size: 11 }, margin: { l: 56, r: 16, t: 42, b: 44 }, xaxis: { title: def.xt, type: S.logx ? "log" : "linear", tickformat: S.logx ? "~g" : undefined, gridcolor: "rgba(255,255,255,.08)", zeroline: false, automargin: true }, yaxis: { title: yt, type: S.logy ? "log" : "linear", tickformat: S.logy ? "~g" : undefined, autorange: def.y === "mse" && S.psnr ? true : undefined, gridcolor: "rgba(255,255,255,.08)", zeroline: false, automargin: true }, legend: { orientation: "h" } }, { responsive: true, displaylogo: false, displayModeBar: false }); |
| requestAnimationFrame(() => Plotly.Plots.resize(el)); |
| } |
| function render() { if (!S.built || $("view-quick-rd").hidden) return; for (const k of Object.keys(P2D)) renderOne(k, `qrd-p-${k}`); if (S.fsKind) renderFs(); resizeSoon(); } |
| function openFs(k) { S.fsKind = k; $("qrd-fs").hidden = false; renderFs(); } |
| function closeFs() { if (!S.built || $("qrd-fs").hidden) return; S.fsKind = null; try { Plotly.purge("qrd-fs-plot"); } catch {} $("qrd-fs").hidden = true; } |
| function renderFs() { if (!S.fsKind) return; $("qrd-fs-title").textContent = P2D[S.fsKind].title; renderOne(S.fsKind, "qrd-fs-plot"); setTimeout(() => Plotly.Plots.resize($("qrd-fs-plot")), 30); } |
|
|
| return { onShow, onHide, refreshResults }; |
| })(); |
|
|
