jpeg 2000 + magnifying glass fix

pbc3_sweep.py

@@ -6,7 +6,7 @@ resolved config live in trial user_attrs so the analyzer can re-aggregate by
 megapixel range. JPEG/AVIF/WEBP baselines are logged once as tagged trials.
 Start/stop controlled from the web Sweep Runner."""
 
-import glob, io, itertools, os, threading, time
+import glob, io, itertools, math, os, threading, time
 
 import numpy as np
 import optuna
@@ -33,6 +33,7 @@ IMAGE_EXTS = ("*.png", "*.jpg", "*.jpeg", "*.webp", "*.bmp")
 JPEG_QUALITIES = (1, 3, 5, 10, 20, 40, 70, 95)
 AVIF_QUALITIES = (0, 1, 3, 5, 10, 20, 40, 70, 95)
 WEBP_QUALITIES = (0, 1, 3, 5, 10, 20, 40, 70, 95)
+JP2_QUALITIES = (0, 1, 3, 5, 10, 20, 40, 70, 95)
 JXL_QUALITIES = (0, 1, 3, 5, 10, 20, 40, 70, 95)
 DOWNSAMPLE_FACTORS = (1, 1.5, 2, 3, 4, 5, 8, 10, 15, 20, 32, 64, 128)
 
@@ -176,6 +177,20 @@ def _eval_pbc3(cfg, images, on_image=None):
     return rows
 
 
+def _jp2_rate(q):
+    q = max(0.0, min(95.0, float(q))) / 95.0
+    return 200.0 ** (1.0 - q)
+
+
+def _encode_codec_bytes(img, fmt, q):
+    buf = io.BytesIO()
+    if fmt == "JPEG2000":
+        img.save(buf, format="JPEG2000", quality_mode="rates", quality_layers=[_jp2_rate(q)])
+    else:
+        img.save(buf, format=fmt, quality=q)
+    return buf.getvalue()
+
+
 def _eval_codec(fmt, q, images, on_image=None):
     rows = []
     for im in images:
@@ -183,13 +198,12 @@ def _eval_codec(fmt, q, images, on_image=None):
             raise InterruptedError("sweep stopped")
         arr = im["arr"]
         pixels = arr.shape[0] * arr.shape[1]
-        buf = io.BytesIO()
         t = time.perf_counter()
-        Image.fromarray(arr).save(buf, format=fmt, quality=q)
+        data = _encode_codec_bytes(Image.fromarray(arr), fmt, q)
         secs = time.perf_counter() - t
-        recon = np.asarray(Image.open(io.BytesIO(buf.getvalue())).convert("RGB"))
+        recon = np.asarray(Image.open(io.BytesIO(data)).convert("RGB"))
         rows.append({"name": im["name"], "mp": im["mp"], "seconds": secs,
-                     "bpp": len(buf.getvalue()) * 8 / pixels, "mse": _mse(arr, recon)})
+                     "bpp": len(data) * 8 / pixels, "mse": _mse(arr, recon)})
         if on_image:
             on_image()
     return rows
@@ -235,7 +249,7 @@ def _add_completed(study, values, attrs):
 
 def ensure_baselines(study, images):
     have = {t.user_attrs.get("baseline") for t in study.trials}
-    for fmt, qs in (("JPEG", JPEG_QUALITIES), ("AVIF", AVIF_QUALITIES),
+    for fmt, qs in (("JPEG", JPEG_QUALITIES), ("JPEG2000", JP2_QUALITIES), ("AVIF", AVIF_QUALITIES),
                     ("WEBP", WEBP_QUALITIES), ("JXL", JXL_QUALITIES)):
         for q in qs:
             if _STOP.is_set():

server.py

@@ -430,18 +430,34 @@ BPP_GUIDE = {
     "JPEG": [(1, 0.17), (5, 0.21), (10, 0.29), (20, 0.44), (40, 0.65), (60, 0.85), (80, 1.26), (95, 2.77)],
     "AVIF": [(0, 0.01), (2, 0.02), (5, 0.04), (10, 0.06), (20, 0.12), (40, 0.30), (60, 0.68), (80, 1.16), (95, 2.69)],
     "WEBP": [(0, 0.06), (5, 0.13), (10, 0.17), (20, 0.25), (40, 0.40), (60, 0.55), (80, 0.85), (95, 1.80)],
+    "JPEG2000": [(0, 0.03), (5, 0.05), (10, 0.08), (20, 0.14), (40, 0.30), (60, 0.65), (80, 1.20), (95, 2.50)],
     "JXL":  [(0, 0.02), (2, 0.03), (5, 0.05), (10, 0.08), (20, 0.15), (40, 0.34), (60, 0.70), (80, 1.20), (95, 2.60)],
 }
 # Quality samples for the tradeoff baselines (AVIF goes down to 0, JPEG stops at 1).
 JPEG_QUALITIES = (1, 2, 3, 5, 8, 10, 20, 40, 60, 80, 95)
 AVIF_QUALITIES = (0, 1, 2, 3, 5, 8, 10, 20, 40, 60, 80, 95)
 WEBP_QUALITIES = (0, 1, 2, 3, 5, 8, 10, 20, 40, 60, 80, 95)
+JP2_QUALITIES = (0, 1, 2, 3, 5, 8, 10, 20, 40, 60, 80, 95)
 JXL_QUALITIES = (0, 1, 2, 3, 5, 8, 10, 20, 40, 60, 80, 95)
 
 def _q_bounds(fmt):
     return (1, 95) if fmt == "JPEG" else (0, 95)
 
 
+def _jp2_rate(q):
+    q = max(0.0, min(95.0, float(q))) / 95.0
+    return 200.0 ** (1.0 - q)
+
+
+def _encode_codec_bytes(img, fmt, q):
+    buf = io.BytesIO()
+    if fmt == "JPEG2000":
+        img.save(buf, format="JPEG2000", quality_mode="rates", quality_layers=[_jp2_rate(q)])
+    else:
+        img.save(buf, format=fmt, quality=int(q))
+    return buf.getvalue()
+
+
 def _guess_quality(fmt, target_bpp):
     """Inverse-interpolate the guideline table to pick a starting quality for `target_bpp`."""
     g = BPP_GUIDE[fmt]
@@ -478,13 +494,12 @@ def _match_codec_gen(img, fmt, target_bpp, pixels, max_iters=12):
         q = int(max(qmin, min(qmax, round(q))))
         if q in tried:
             return tried[q], False
-        buf = io.BytesIO()
         try:
-            img.save(buf, format=fmt, quality=q)
+            data = _encode_codec_bytes(img, fmt, q)
         except Exception:
             tried[q] = None
             return None, False
-        r = {"q": q, "bpp": len(buf.getvalue()) * 8 / pixels, "data": buf.getvalue()}
+        r = {"q": q, "bpp": len(data) * 8 / pixels, "data": data}
         tried[q] = r
         if better(r):
             best["ref"] = r
@@ -712,9 +727,9 @@ async def match_codec(image: UploadFile = File(...), codec: str = Form("jpeg"),
         img = src.convert("RGBA") if has_alpha else src.convert("RGB")
     except Exception as exc:
         return JSONResponse({"error": f"Could not read image: {exc}"}, status_code=400)
-    fmt = {"jpeg": "JPEG", "avif": "AVIF", "webp": "WEBP", "jxl": "JXL"}.get(codec.lower(), "JPEG")
+    fmt = {"jpeg": "JPEG", "jp2": "JPEG2000", "jpeg2000": "JPEG2000", "avif": "AVIF", "webp": "WEBP", "jxl": "JXL"}.get(codec.lower(), "JPEG")
     pixels = img.size[0] * img.size[1]
-    enc_img = img if (has_alpha and fmt in ("WEBP", "AVIF", "JXL")) else img.convert("RGB")
+    enc_img = img if (has_alpha and fmt in ("WEBP", "AVIF", "JXL", "JPEG2000")) else img.convert("RGB")
 
     def gen():
         best = None

static/app.js

@@ -784,7 +784,8 @@ function renderRegistry() {
 // raw (3 bytes RGB) / bpp.
 const bppToRate = (bpp) => 24 / bpp;
 
-const CODEC_COLOR = { jpeg: "#7d8cff", avif: "#34d39a", webp: "#54c0ff", jxl: "#c084fc" };
+const CODEC_COLOR = { jpeg: "#7d8cff", jp2: "#4fa3ff", avif: "#34d39a", webp: "#54c0ff", jxl: "#c084fc" };
+const CODEC_LABEL = { jpeg: "JPEG", jp2: "JPEG2000", webp: "WebP", jxl: "JPEG XL", avif: "AVIF" };
 const PBC_COLOR = "#ff3b41";
 
 function card(d) {
@@ -808,14 +809,19 @@ function card(d) {
     : "";
 
   // Only show codecs that haven't been generated yet; drop the whole row once both exist.
-  const haveJ = !!d.jpeg_image, haveA = !!d.avif_image, haveW = !!d.webp_image, haveX = !!d.jxl_image;
-  const compareBlock = (!d.decoded && d.original_image && !(haveJ && haveA && haveW && haveX))
-    ? `<div class="foot-row" style="align-items:center;gap:8px">
+  const haveJ = !!d.jpeg_image, haveP = !!d.jp2_image, haveA = !!d.avif_image, haveW = !!d.webp_image, haveX = !!d.jxl_image;
+  const compareBlock = (!d.decoded && d.original_image && !(haveJ && haveP && haveA && haveW && haveX))
+    ? `<div class="compare-codecs">
           <span class="k">Compare to:</span>
-          ${haveJ ? "" : `<button class="chip" data-act="cmp-jpeg" style="color:#7d8cff;border-color:#7d8cff">JPEG</button>`}
-          ${haveW ? "" : `<button class="chip" data-act="cmp-webp" style="color:#54c0ff;border-color:#54c0ff">WebP</button>`}
-          ${haveX ? "" : `<button class="chip" data-act="cmp-jxl" style="color:#c084fc;border-color:#c084fc">JXL</button>`}
-          ${haveA ? "" : `<button class="chip" data-act="cmp-avif" style="color:#34d39a;border-color:#34d39a">AVIF</button>`}
+          <div class="compare-codec-row">
+            ${haveJ ? "" : `<button class="chip" data-act="cmp-jpeg" style="color:#7d8cff;border-color:#7d8cff">JPEG</button>`}
+            ${haveP ? "" : `<button class="chip" data-act="cmp-jp2" style="color:#4fa3ff;border-color:#4fa3ff">JPEG2000</button>`}
+            ${haveW ? "" : `<button class="chip" data-act="cmp-webp" style="color:#54c0ff;border-color:#54c0ff">WebP</button>`}
+          </div>
+          <div class="compare-codec-row">
+            ${haveX ? "" : `<button class="chip" data-act="cmp-jxl" style="color:#c084fc;border-color:#c084fc">JPEG XL</button>`}
+            ${haveA ? "" : `<button class="chip" data-act="cmp-avif" style="color:#34d39a;border-color:#34d39a">AVIF</button>`}
+          </div>
         </div>`
     : "";
   const haveAnim = !!d.animation_url;
@@ -850,10 +856,12 @@ function card(d) {
   el.querySelector('[data-act="png"]').onclick = () => savePng(d);
   el.querySelector('[data-act="pbc"]').onclick = () => savePbc(d);
   const cmpJ = el.querySelector('[data-act="cmp-jpeg"]');
+  const cmpP = el.querySelector('[data-act="cmp-jp2"]');
   const cmpA = el.querySelector('[data-act="cmp-avif"]');
   const cmpW = el.querySelector('[data-act="cmp-webp"]');
   const cmpX = el.querySelector('[data-act="cmp-jxl"]');
   if (cmpJ) cmpJ.onclick = () => compareCodec(d, "jpeg", cmpJ);
+  if (cmpP) cmpP.onclick = () => compareCodec(d, "jp2", cmpP);
   if (cmpA) cmpA.onclick = () => compareCodec(d, "avif", cmpA);
   if (cmpW) cmpW.onclick = () => compareCodec(d, "webp", cmpW);
   if (cmpX) cmpX.onclick = () => compareCodec(d, "jxl", cmpX);
@@ -872,7 +880,7 @@ function card(d) {
 // codec is cached on the entry, so the chip is removed and a repeat click is impossible.
 async function compareCodec(d, codec, btn) {
   if (!d.original_image || d[codec + "_image"]) return;
-  const label = codec.toUpperCase();
+  const label = CODEC_LABEL[codec] || codec.toUpperCase();
   btn.disabled = true;
   btn.textContent = label + "…";
   const job = createJob(`${label} match`);
@@ -1031,6 +1039,7 @@ const viewer = document.getElementById("viewer");
 const viewerStage = document.getElementById("viewer-stage");
 const holdBtn = document.getElementById("hold-original");
 const holdJpeg = document.getElementById("hold-jpeg");
+const holdJp2 = document.getElementById("hold-jp2");
 const holdAvif = document.getElementById("hold-avif");
 const holdWebp = document.getElementById("hold-webp");
 const holdJxl = document.getElementById("hold-jxl");
@@ -1040,7 +1049,7 @@ const nextBtn = document.getElementById("viewer-next");
 const capEl = document.getElementById("viewer-caption");
 let viewIndex = -1;
 let sideBySide = false;
-let activeCompare = null;            // 'original' | 'jpeg' | 'avif' (side-by-side mode only)
+let activeCompare = null;            // side-by-side selected comparison key
 let viewerDownTarget = null;         // where the last pointerdown started (backdrop-close guard)
 
 document.getElementById("viewer-close").addEventListener("click", closeViewer);
@@ -1069,6 +1078,7 @@ function step(dir) {
 function compareSrcOf(d, kind) {
   return kind === "original" ? d.original_image
     : kind === "jpeg" ? d.jpeg_image
+    : kind === "jp2" ? d.jp2_image
     : kind === "avif" ? d.avif_image
     : kind === "webp" ? d.webp_image
     : kind === "jxl" ? d.jxl_image : null;
@@ -1082,7 +1092,7 @@ function viewerCaption(d) {
 // Two-line, colored comparison summary (size + MSE only; no composite quality).
 // Reusable pieces of the comparison summary (size + MSE only).
 function codecCompareParts(d, codec) {
-  const label = codec.toUpperCase();
+  const label = CODEC_LABEL[codec] || codec.toUpperCase();
   const cc = CODEC_COLOR[codec];
   const fmtSize = d[codec + "_size_kb"], fmtMse = d[codec + "_mse"], q = d[codec + "_q"];
   const pct = (a, b) => Math.abs((a - b) / (b || 1e-9) * 100).toFixed(0);
@@ -1108,7 +1118,7 @@ function codecCompareCaptionHTML(d, codec) {
 function updateCaption() {
   const d = registry[viewIndex];
   if (!d) return;
-  if (sideBySide && (["jpeg", "avif", "webp", "jxl"].includes(activeCompare)))
+  if (sideBySide && (["jpeg", "jp2", "avif", "webp", "jxl"].includes(activeCompare)))
     capEl.innerHTML = `<div>${codecCompareParts(d, activeCompare).sentence}</div>`; // stats moved on top
   else
     capEl.textContent = viewerCaption(d);
@@ -1126,7 +1136,7 @@ function renderViewer() {
     viewerStage.className = "viewer-stage dual " + (colScale > rowScale ? "col" : "row");
 
     let leftCap, rightCap;
-    if (["jpeg", "avif", "webp", "jxl"].includes(activeCompare)) {
+    if (["jpeg", "jp2", "avif", "webp", "jxl"].includes(activeCompare)) {
       const p = codecCompareParts(d, activeCompare);
       leftCap = `<figcaption class="cmp-stat">${p.codecStat}</figcaption>`;
       rightCap = `<figcaption class="cmp-stat">${p.pbcStat}</figcaption>`;
@@ -1144,16 +1154,19 @@ function renderViewer() {
 
   holdBtn.hidden = !d.original_image;
   holdJpeg.hidden = !d.jpeg_image;
+  holdJp2.hidden = !d.jp2_image;
   holdAvif.hidden = !d.avif_image;
   holdWebp.hidden = !d.webp_image;
   holdJxl.hidden = !d.jxl_image;
   holdBtn.textContent = sideBySide ? "Original" : "Hold for original";
   holdJpeg.textContent = sideBySide ? "JPEG" : "Hold for JPEG";
+  holdJp2.textContent = sideBySide ? "JPEG2000" : "Hold for JPEG2000";
   holdAvif.textContent = sideBySide ? "AVIF" : "Hold for AVIF";
   holdWebp.textContent = sideBySide ? "WebP" : "Hold for WebP";
   holdJxl.textContent = sideBySide ? "JXL" : "Hold for JXL";
   holdBtn.classList.toggle("holding", sideBySide && activeCompare === "original");
   holdJpeg.classList.toggle("holding", sideBySide && activeCompare === "jpeg");
+  holdJp2.classList.toggle("holding", sideBySide && activeCompare === "jp2");
   holdAvif.classList.toggle("holding", sideBySide && activeCompare === "avif");
   holdWebp.classList.toggle("holding", sideBySide && activeCompare === "webp");
   holdJxl.classList.toggle("holding", sideBySide && activeCompare === "jxl");
@@ -1195,6 +1208,7 @@ function wireHold(btn, kind, getCaptionHTML) {
 }
 wireHold(holdBtn, "original");
 wireHold(holdJpeg, "jpeg", d => codecCompareCaptionHTML(d, "jpeg"));
+wireHold(holdJp2, "jp2", d => codecCompareCaptionHTML(d, "jp2"));
 wireHold(holdAvif, "avif", d => codecCompareCaptionHTML(d, "avif"));
 wireHold(holdWebp, "webp", d => codecCompareCaptionHTML(d, "webp"));
 wireHold(holdJxl, "jxl", d => codecCompareCaptionHTML(d, "jxl"));

static/index.html

@@ -12,22 +12,22 @@
 <link rel="stylesheet" href="/viewer_magnifier.css?v=20260622b">
 <style>
   #hold-jpeg { --hc:#7d8cff; }
+  #hold-jp2 { --hc:#4fa3ff; }
   #hold-webp { --hc:#54c0ff; }
   #hold-jxl  { --hc:#c084fc; }
   #hold-avif { --hc:#34d39a; }
-  #hold-jpeg, #hold-webp, #hold-jxl, #hold-avif { border-color: var(--hc); color: var(--hc); }
+  #hold-jpeg, #hold-jp2, #hold-webp, #hold-jxl, #hold-avif { border-color: var(--hc); color: var(--hc); }
   #hold-jpeg.holding, #hold-webp.holding, #hold-jxl.holding, #hold-avif.holding { background: var(--hc); border-color: var(--hc); color: #fff; }
-  .foot-row [data-act="cmp-jpeg"] { order: 1; }
-  .foot-row [data-act="cmp-webp"] { order: 2; }
-  .foot-row [data-act="cmp-jxl"]  { order: 3; }
-  .foot-row [data-act="cmp-avif"] { order: 4; }
+  .compare-codecs { display:flex; flex-direction:column; gap:7px; margin-top:2px; }
+  .compare-codec-row { display:flex; flex-wrap:wrap; gap:8px; }
 
   .viewer-controls #viewer-sbs { order: 0; }
   .viewer-controls #hold-original { order: 1; }
   .viewer-controls #hold-jpeg { order: 2; }
-  .viewer-controls #hold-webp { order: 3; }
-  .viewer-controls #hold-jxl { order: 4; }
-  .viewer-controls #hold-avif { order: 5; }
+  .viewer-controls #hold-jp2 { order: 3; }
+  .viewer-controls #hold-webp { order: 4; }
+  .viewer-controls #hold-jxl { order: 5; }
+  .viewer-controls #hold-avif { order: 6; }
 
   /* Training Lab */
   .tr-fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; }
@@ -216,6 +216,7 @@
     <label class="sbs-toggle"><input type="checkbox" id="viewer-sbs"> Side by side</label>
     <button id="hold-original" class="hold-btn" hidden>Hold for original</button>
     <button id="hold-jpeg" class="hold-btn" hidden>Hold for JPEG</button>
+    <button id="hold-jp2" class="hold-btn" hidden>Hold for JPEG2000</button>
     <button id="hold-webp" class="hold-btn" hidden>Hold for WEBP</button>
     <button id="hold-jxl" class="hold-btn" hidden>Hold for JXL</button>
     <button id="hold-avif" class="hold-btn" hidden>Hold for AVIF</button>

static/sweep.js

@@ -18,16 +18,16 @@
     study: null, trials: [], filtered: [],
     selected: null, codec: null, built: false, fsKind: null,
     sort: { key: "mse", dir: 1 },   // MSE ascending = best first
-    show: { pbcAll: true, pbcPareto: true, presets: true, jpeg: false, avif: false, webp: false, jxl: false, downsample: false, png: false },
+    show: { pbcAll: true, pbcPareto: true, presets: true, jpeg: false, jp2: false, avif: false, webp: false, jxl: false, downsample: false, png: false },
     dyn: [], mpMin: null, mpMax: null, logx: true, logy: false, psnr: false,
     fnum: { mse: NaN, bpp: NaN, sp: NaN },   // numeric metric filters (apply to PBC + codec curves)
   };
 
   const COLORS = {
     gray: "#5c3839", pareto: "#ff3b41", sel: "#ffce2e", base: "#ff280c",
-    jpeg: "#7d8cff", avif: "#34d39a", webp: "#54c0ff", jxl: "#c084fc", downsample: "#e6e6e6", png: "#ef19ef",
+    jpeg: "#7d8cff", jp2: "#4fa3ff", avif: "#34d39a", webp: "#54c0ff", jxl: "#c084fc", downsample: "#e6e6e6", png: "#ef19ef",
   };
-  const TOGGLES = [["pbcAll", "PBC All"], ["pbcPareto", "PBC Pareto"], ["presets", "PBC Presets"], ["jpeg", "JPEG"], ["avif", "AVIF"], ["webp", "WebP"], ["jxl", "JXL"], ["downsample", "Downsample"], ["png", "PNG"]];
+  const TOGGLES = [["pbcAll", "PBC All"], ["pbcPareto", "PBC Pareto"], ["presets", "PBC Presets"], ["jpeg", "JPEG"], ["jp2", "JPEG2000"], ["webp", "WebP"], ["jxl", "JXL"], ["avif", "AVIF"], ["downsample", "Downsample"], ["png", "PNG"]];
 
   // 2D plot defs. efficiency = 1/(bpp·mse) (higher is better).
   const P2D = {
@@ -239,8 +239,8 @@
   function buildCodec(all) {
     const pick = (c) => all.filter((t) => t.codec === c)
       .map((t) => ({ q: t.q, bpp: t.bpp, mse: t.mse, speed: t.speed, eff: t.eff })).sort((a, b) => a.q - b.q);
-    const jpeg = pick("JPEG"), avif = pick("AVIF"), webp = pick("WEBP"), jxl = pick("JXL"), downsample = pick("DOWNSAMPLE"), png = pick("PNG");
-    S.codec = (jpeg.length || avif.length || webp.length || jxl.length || downsample.length || png.length) ? { jpeg, avif, webp, jxl, downsample, png } : null;
+    const jpeg = pick("JPEG"), jp2 = pick("JPEG2000"), avif = pick("AVIF"), webp = pick("WEBP"), jxl = pick("JXL"), downsample = pick("DOWNSAMPLE"), png = pick("PNG");
+    S.codec = (jpeg.length || jp2.length || avif.length || webp.length || jxl.length || downsample.length || png.length) ? { jpeg, jp2, avif, webp, jxl, downsample, png } : null;
   }
 
   function renderSummary() {
@@ -420,7 +420,7 @@
 
   function scatter2d(xKey, yKey, usePsnr = false) {
     const all = S.filtered, traces = [];
-    const CODECS = ["jpeg", "avif", "webp", "jxl", "downsample", "png"];
+    const CODECS = ["jpeg", "jp2", "webp", "jxl", "avif", "downsample", "png"];
     const yfn = usePsnr ? mseToPsnr : null;
     const logy = S.logy && !usePsnr;
     const plotFloor = (key) => {
@@ -436,7 +436,7 @@
     if (S.show.pbcAll) traces.push(ptTrace(all, xKey, yKey, { name: "PBC all", marker: { size: 5, color: COLORS.gray, opacity: .55 } }, fx, fy, yfn, logy));
     if (S.show.pbcPareto) traces.push(ptTrace(all.filter((t) => t.pareto), xKey, yKey, { name: "PBC Pareto", marker: { size: 8, color: COLORS.pareto } }, fx, fy, yfn, logy));
 
-    [["jpeg", COLORS.jpeg], ["avif", COLORS.avif], ["webp", COLORS.webp], ["jxl", COLORS.jxl], ["downsample", COLORS.downsample], ["png", COLORS.png]].forEach(([k, c]) => {
+    [["jpeg", COLORS.jpeg], ["jp2", COLORS.jp2], ["webp", COLORS.webp], ["jxl", COLORS.jxl], ["avif", COLORS.avif], ["downsample", COLORS.downsample], ["png", COLORS.png]].forEach(([k, c]) => {
       if (!S.show[k]) return;
       const pts = codecPoints(k);
       if (pts && pts.length) traces.push(codecTrace([...pts].sort((a, b) => a[xKey] - b[xKey]), xKey, yKey, k.toUpperCase(), c, fx, fy, yfn, logy));

static/viewer_magnifier.js

@@ -6,6 +6,7 @@
 
   const SCALE = 4;
   let activePointer = null;
+  let activeImage = null;
 
   const clamp = (v) => Math.max(0, Math.min(1, v));
 
@@ -23,24 +24,24 @@
     return e.target.closest ? e.target.closest(".viewer-img-frame img") : null;
   }
 
-  function setZoom(e) {
-    const img = eventImage(e);
-    if (!img) return;
+  function setZoom(e, sourceImage = activeImage || eventImage(e)) {
+    if (!sourceImage) return;
 
-    const rect = img.getBoundingClientRect();
+    const rect = sourceImage.getBoundingClientRect();
     const x = clamp((e.clientX - rect.left) / rect.width);
     const y = clamp((e.clientY - rect.top) / rect.height);
     const origin = `${(x * 100).toFixed(2)}% ${(y * 100).toFixed(2)}%`;
 
     stage.querySelectorAll(".viewer-img-frame").forEach((frame) => frame.classList.add("magnifying"));
-    stage.querySelectorAll(".viewer-img-frame img").forEach((im) => {
-      im.style.transformOrigin = origin;
-      im.style.transform = `scale(${SCALE})`;
+    stage.querySelectorAll(".viewer-img-frame img").forEach((img) => {
+      img.style.transformOrigin = origin;
+      img.style.transform = `scale(${SCALE})`;
     });
   }
 
   function clearZoom() {
     activePointer = null;
+    activeImage = null;
     stage.querySelectorAll(".viewer-img-frame").forEach((frame) => frame.classList.remove("magnifying"));
     stage.querySelectorAll(".viewer-img-frame img").forEach((img) => {
       img.style.transform = "";
@@ -52,12 +53,14 @@
   wrapImages();
 
   stage.addEventListener("pointerdown", (e) => {
-    if (!eventImage(e)) return;
+    const img = eventImage(e);
+    if (!img) return;
     e.preventDefault();
     e.stopPropagation();
     activePointer = e.pointerId;
+    activeImage = img;
     try { stage.setPointerCapture(e.pointerId); } catch (_) {}
-    setZoom(e);
+    setZoom(e, img);
   });
 
   stage.addEventListener("pointermove", (e) => {
@@ -71,4 +74,4 @@
     if (activePointer === e.pointerId) clearZoom();
   });
   window.addEventListener("blur", clearZoom);
-})();
+})();