File size: 14,180 Bytes
7c03039 1063a66 7c03039 1063a66 7c03039 de5916e 7c03039 de5916e 7c03039 1063a66 7c03039 1063a66 7c03039 1063a66 7c03039 1063a66 7c03039 1063a66 7c03039 de5916e 7c03039 de5916e 7c03039 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 | "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 };
})();
|