fixes and sweep improvements.

PBC3_animation.py

@@ -98,38 +98,51 @@ def _fit(img, max_w, max_h):
 
 def _make_frame(canvas, color_space, patch_info, separated_channels, title, target=None, show_errors=False, output_size=(3840, 2160)):
     arr = np.clip(canvas, 0, 255).astype(np.uint8)
-    rgb = Image.fromarray(arr, color_space).convert("RGB")
-    if target is not None and target.shape[2] != arr.shape[2]:
-        if arr.shape[2] == 4 and target.shape[2] == 3:
+    n_ch = arr.shape[2]
+    has_alpha = n_ch == 4
+    rgb = Image.fromarray(np.ascontiguousarray(arr[:, :, :3]), color_space).convert("RGB")
+    alpha_img = Image.fromarray(arr[:, :, 3], "L").convert("RGB") if has_alpha else None
+
+    if target is not None and target.shape[2] != n_ch:
+        if n_ch == 4 and target.shape[2] == 3:
             target = np.dstack([target, np.full(target.shape[:2], 255, target.dtype)])
         else:
-            target = target[:, :, :arr.shape[2]]
+            target = target[:, :, :n_ch]
     error = None if target is None else target.astype(np.int32) - arr.astype(np.int32)
 
     if not separated_channels:
         panels = [(rgb, False)]
+        if has_alpha:
+            panels.append((alpha_img, False))
         if show_errors:
             if error is None:
                 raise ValueError("show_errors=True requires original_image")
             panels.append((_error_image(error, color_space), True))
-        cols, rows = 1, len(panels)
+        cols, rows = len(panels), 1
     else:
         panels = [
             (_colorize_channel(arr[:, :, 0], 0, color_space), False),
             (_colorize_channel(arr[:, :, 1], 1, color_space), False),
             (_colorize_channel(arr[:, :, 2], 2, color_space), False),
-            (rgb, False),
         ]
+        if has_alpha:
+            panels.append((alpha_img, False))
+        panels.append((rgb, False))
+        cols, rows = len(panels), 1
         if show_errors:
             if error is None:
                 raise ValueError("show_errors=True requires original_image")
-            panels.extend([
+            err_panels = [
                 (_error_image(error[:, :, 0], color_space, 0), True),
                 (_error_image(error[:, :, 1], color_space, 1), True),
                 (_error_image(error[:, :, 2], color_space, 2), True),
-                (_error_image(error, color_space), True),
-            ])
-        cols, rows = 4, 2 if show_errors else 1
+            ]
+            if has_alpha:
+                a_err = np.clip(np.abs(error[:, :, 3]), 0, 255).astype(np.uint8)
+                err_panels.append((Image.fromarray(np.stack([a_err] * 3, axis=2), "RGB"), True))
+            err_panels.append((_error_image(error, color_space), True))
+            panels.extend(err_panels)
+            rows = 2
 
     frame_w, frame_h = output_size
     frame = Image.new("RGB", output_size, "black")
@@ -156,7 +169,7 @@ def _make_frame(canvas, color_space, patch_info, separated_channels, title, targ
         py = y0 + (cell_h - fitted.height) // 2
         frame.paste(fitted, (px, py))
 
-        is_rgb_panel = (separated_channels and col == 3) or (not separated_channels and i == 0)
+        is_rgb_panel = (separated_channels and col == cols - 1) or (not separated_channels and i == 0)
         is_active_channel_panel = separated_channels and col == active_channel
         if patch_box is not None and not is_error and (is_rgb_panel or is_active_channel_panel):
             _draw_patch(draw, patch_box, scale, (px, py))
@@ -249,7 +262,7 @@ def animate_pbc3(
     (downsampled, original_w, original_h, w, h, color_space, channels, 
      channel_bits, positive_bias, has_alpha, patch_count, base_values, 
      warmup_on, warm_w, warm_h, warmup_split) = PBC3._read_header(br)
-    if channels != 3 and separated_channels:
+    if channels not in (3, 4) and separated_channels:
         separated_channels = False
     if show_errors and original_image is None:
         raise ValueError("show_errors=True requires original_image=...")

pbc3_sweep.py

@@ -3,8 +3,8 @@
 One mixed Optuna study ("pbc3") in pbc3_sweep.db, three MINIMIZED objectives
 (seconds, bpp, mse) averaged over every image in hpt_data/. Per-image rows and the
 resolved config live in trial user_attrs so the analyzer can re-aggregate by
-megapixel range. JPEG/AVIF baselines are logged once as tagged trials. Start/stop
-controlled from the web Sweep Runner."""
+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
 
@@ -25,8 +25,10 @@ DIRECTIONS = ("minimize", "minimize", "minimize")
 METRIC_NAMES = ("Seconds", "Compression (bpp)", "MSE")
 IMAGE_EXTS = ("*.png", "*.jpg", "*.jpeg", "*.webp", "*.bmp")
 
+# JPEG is a 1-95 scale (q=0 clamps to 1); AVIF/WEBP are true 0-100.
 JPEG_QUALITIES = (1, 2, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 95)
 AVIF_QUALITIES = (0, 1, 2, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 95)
+WEBP_QUALITIES = (0, 1, 2, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 95)
 
 # Optimizer search space. (name, kind, *args). Ranges are a starting guess — tweak freely.
 SEARCH_SPACE = [
@@ -59,10 +61,11 @@ def ensure_pbc_baselines(study, images):
         tag = f"preset_{name}"
         if tag in have:
             continue
-        _log(f"PBC preset baseline: {name}")
+        _log(f"PBC preset baseline: {name} started")
         cfg = dict(vars(getattr(PBC3Config, name)()))
         try:
-            rows = _eval_pbc3(cfg, images)
+            _new_bar()
+            rows = _eval_pbc3(cfg, images, on_image=_bar_tick)
         except Exception as e:
             _log(f"preset {name} failed: {e}")
             continue
@@ -117,7 +120,7 @@ def _avg(rows):
     return [float(np.mean([r[k] for r in rows])) for k in ("seconds", "bpp", "mse")]
 
 
-def _eval_pbc3(cfg, images):
+def _eval_pbc3(cfg, images, on_image=None):
     rows = []
     for im in images:
         arr = im["arr"]
@@ -126,10 +129,12 @@ def _eval_pbc3(cfg, images):
         recon = np.asarray(res.image.convert("RGB").resize((arr.shape[1], arr.shape[0])))
         rows.append({"name": im["name"], "mp": im["mp"], "seconds": float(res.encode_seconds),
                      "bpp": float(res.total_bits / pixels), "mse": _mse(arr, recon)})
+        if on_image:
+            on_image()
     return rows
 
 
-def _eval_codec(fmt, q, images):
+def _eval_codec(fmt, q, images, on_image=None):
     rows = []
     for im in images:
         arr = im["arr"]
@@ -141,6 +146,8 @@ def _eval_codec(fmt, q, images):
         recon = np.asarray(Image.open(io.BytesIO(buf.getvalue())).convert("RGB"))
         rows.append({"name": im["name"], "mp": im["mp"], "seconds": secs,
                      "bpp": len(buf.getvalue()) * 8 / pixels, "mse": _mse(arr, recon)})
+        if on_image:
+            on_image()
     return rows
 
 
@@ -162,14 +169,15 @@ 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), ("AVIF", AVIF_QUALITIES), ("WEBP", WEBP_QUALITIES)):
         for q in qs:
             tag = f"{fmt.lower()}_q{q}"
             if tag in have:
                 continue
-            _log(f"baseline {tag}")
+            _log(f"baseline {tag} started")
             try:
-                rows = _eval_codec(fmt, q, images)
+                _new_bar()
+                rows = _eval_codec(fmt, q, images, on_image=_bar_tick)
             except Exception as e:
                 _log(f"baseline {tag} failed: {e}")
                 continue
@@ -192,6 +200,19 @@ def _log(msg):
     print(f"[sweep] {msg}", flush=True)
 
 
+def _new_bar():
+    """Append a fresh, empty progress line that _bar_tick grows in place."""
+    with _LOCK:
+        _STATE["log"] = (_STATE["log"] + [""])[-60:]
+
+
+def _bar_tick():
+    """Add one '|' to the current progress line (called once per image)."""
+    with _LOCK:
+        if _STATE["log"]:
+            _STATE["log"][-1] += "|"
+
+
 def status():
     with _LOCK:
         s = dict(_STATE)
@@ -248,18 +269,21 @@ def _run(mode, spec):
                 cfg = _coerce(params)
                 with _LOCK:
                     _STATE["current"] = cfg
-                rows = _eval_pbc3(cfg, images)
+                _log(f"grid trial {i + 1}/{len(trials)} started")
+                _new_bar()
+                rows = _eval_pbc3(cfg, images, on_image=_bar_tick)
                 _add_completed(study, _avg(rows),
                                {"kind": "pbc3", "grid": True, "config": cfg, "per_image": rows})
                 with _LOCK:
                     _STATE["done"] = i + 1
-                _log(f"grid trial {i + 1}/{len(trials)} done")
         else:
             def objective(trial):
                 cfg = suggest_config(trial)
                 with _LOCK:
                     _STATE["current"] = cfg
-                rows = _eval_pbc3(cfg, images)
+                _log(f"optimizer trial {trial.number} started")
+                _new_bar()
+                rows = _eval_pbc3(cfg, images, on_image=_bar_tick)
                 trial.set_user_attr("kind", "pbc3")
                 trial.set_user_attr("config", cfg)
                 trial.set_user_attr("per_image", rows)
@@ -270,7 +294,6 @@ def _run(mode, spec):
                 n += 1
                 with _LOCK:
                     _STATE["done"] = n
-                _log(f"optimizer trial {n} done")
     except Exception as e:
         with _LOCK:
             _STATE["error"] = str(e)

server.py

@@ -356,11 +356,12 @@ async def decode(file: UploadFile = File(...)):
 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)],
 }
 # Quality samples for the tradeoff baselines (AVIF goes down to 0, JPEG stops at 1).
-JPEG_QUALITIES = (1, 2, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 95)
-AVIF_QUALITIES = (0, 1, 2, 3, 5, 8, 10, 15, 20, 30, 40, 60, 80, 95)
-
+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)
 
 def _q_bounds(fmt):
     return (1, 95) if fmt == "JPEG" else (0, 95)

static/app.js

@@ -317,6 +317,7 @@ function enterApp() {
   document.getElementById("app").hidden = false;
   landingActive = false;             // stop the teaser — no wasted compute
   if (streamAbort) streamAbort.abort();
+  gotoView("compress");
 }
 function exitToLanding() {
   document.getElementById("app").hidden = true;
@@ -750,7 +751,7 @@ function renderRegistry() {
 // raw (3 bytes RGB) / bpp.
 const bppToRate = (bpp) => 24 / bpp;
 
-const CODEC_COLOR = { jpeg: "#7d8cff", avif: "#34d39a" };
+const CODEC_COLOR = { jpeg: "#7d8cff", avif: "#34d39a", webp: "#ffb454"};
 const PBC_COLOR = "#ff3b41";
 
 function card(d) {
@@ -774,12 +775,13 @@ 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;
-  const compareBlock = (!d.decoded && d.original_image && !(haveJ && haveA))
+  const haveJ = !!d.jpeg_image, haveA = !!d.avif_image, haveW = !!d.webp_image;
+  const compareBlock = (!d.decoded && d.original_image && !(haveJ && haveA && haveW))
     ? `<div class="foot-row" style="align-items:center;gap:8px">
           <span class="k">Compare to:</span>
           ${haveJ ? "" : `<button class="chip" data-act="cmp-jpeg" style="color:#7d8cff;border-color:#7d8cff">JPEG</button>`}
           ${haveA ? "" : `<button class="chip" data-act="cmp-avif" style="color:#34d39a;border-color:#34d39a">AVIF</button>`}
+          ${haveW ? "" : `<button class="chip" data-act="cmp-webp" style="color:#ffb454;border-color:#ffb454">WebP</button>`}
         </div>`
     : "";
   const haveAnim = !!d.animation_url;
@@ -815,8 +817,10 @@ function card(d) {
   el.querySelector('[data-act="pbc"]').onclick = () => savePbc(d);
   const cmpJ = el.querySelector('[data-act="cmp-jpeg"]');
   const cmpA = el.querySelector('[data-act="cmp-avif"]');
+  const cmpW = el.querySelector('[data-act="cmp-webp"]');
   if (cmpJ) cmpJ.onclick = () => compareCodec(d, "jpeg", cmpJ);
   if (cmpA) cmpA.onclick = () => compareCodec(d, "avif", cmpA);
+  if (cmpW) cmpW.onclick = () => compareCodec(d, "webp", cmpW);
   const animBtn = el.querySelector('[data-act="anim"]');
   if (animBtn) animBtn.onclick = () => createAnimation(d, animBtn);
   el.querySelector('[data-act="delete"]').onclick = () => {
@@ -992,6 +996,7 @@ const viewerStage = document.getElementById("viewer-stage");
 const holdBtn = document.getElementById("hold-original");
 const holdJpeg = document.getElementById("hold-jpeg");
 const holdAvif = document.getElementById("hold-avif");
+const holdWebp = document.getElementById("hold-webp");
 const sbsToggle = document.getElementById("viewer-sbs");
 const prevBtn = document.getElementById("viewer-prev");
 const nextBtn = document.getElementById("viewer-next");
@@ -1025,7 +1030,10 @@ function step(dir) {
 }
 
 function compareSrcOf(d, kind) {
-  return kind === "original" ? d.original_image : kind === "jpeg" ? d.jpeg_image : kind === "avif" ? d.avif_image : null;
+  return kind === "original" ? d.original_image
+    : kind === "jpeg" ? d.jpeg_image
+    : kind === "avif" ? d.avif_image
+    : kind === "webp" ? d.webp_image : null;
 }
 
 function viewerCaption(d) {
@@ -1062,7 +1070,7 @@ function codecCompareCaptionHTML(d, codec) {
 function updateCaption() {
   const d = registry[viewIndex];
   if (!d) return;
-  if (sideBySide && (activeCompare === "jpeg" || activeCompare === "avif"))
+  if (sideBySide && (["jpeg", "avif", "webp"].includes(activeCompare)))
     capEl.innerHTML = `<div>${codecCompareParts(d, activeCompare).sentence}</div>`; // stats moved on top
   else
     capEl.textContent = viewerCaption(d);
@@ -1099,12 +1107,15 @@ function renderViewer() {
   holdBtn.hidden = !d.original_image;
   holdJpeg.hidden = !d.jpeg_image;
   holdAvif.hidden = !d.avif_image;
+  holdWebp.hidden = !d.webp_image;
   holdBtn.textContent = sideBySide ? "Original" : "Hold for original";
   holdJpeg.textContent = sideBySide ? "JPEG" : "Hold for JPEG";
   holdAvif.textContent = sideBySide ? "AVIF" : "Hold for AVIF";
+  holdWebp.textContent = sideBySide ? "WebP" : "Hold for WebP";
   holdBtn.classList.toggle("holding", sideBySide && activeCompare === "original");
   holdJpeg.classList.toggle("holding", sideBySide && activeCompare === "jpeg");
   holdAvif.classList.toggle("holding", sideBySide && activeCompare === "avif");
+  holdWebp.classList.toggle("holding", sideBySide && activeCompare === "webp");
 
   updateCaption();
   prevBtn.disabled = viewIndex <= 0;
@@ -1144,7 +1155,7 @@ function wireHold(btn, kind, getCaptionHTML) {
 wireHold(holdBtn, "original");
 wireHold(holdJpeg, "jpeg", d => codecCompareCaptionHTML(d, "jpeg"));
 wireHold(holdAvif, "avif", d => codecCompareCaptionHTML(d, "avif"));
-
+wireHold(holdWebp, "webp", d => codecCompareCaptionHTML(d, "webp"));
 /* ============================================================
    DOWNLOAD
 ============================================================ */

static/index.html

@@ -13,8 +13,9 @@
   /* JPEG/AVIF hold buttons reuse the codec colors from the Sweep Analyzer. */
   #hold-jpeg { --hc:#7d8cff; }
   #hold-avif { --hc:#34d39a; }
-  #hold-jpeg, #hold-avif { border-color: var(--hc); color: var(--hc); }
-  #hold-jpeg.holding, #hold-avif.holding { background: var(--hc); border-color: var(--hc); color: #fff; }
+  #hold-webp { --hc:#ffb454; }
+  #hold-jpeg, #hold-avif, #hold-webp { border-color: var(--hc); color: var(--hc); }
+  #hold-jpeg.holding, #hold-avif.holding, #hold-webp.holding { background: var(--hc); border-color: var(--hc); color: #fff; }
 </style>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>👁️</text></svg>">
 </head>
@@ -177,6 +178,7 @@
     <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-avif" class="hold-btn" hidden>Hold for AVIF</button>
+    <button id="hold-webp" class="hold-btn" hidden>Hold for WEBP</button>
   </div>
 </div>
 

static/sweep.js

@@ -16,15 +16,15 @@
     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, jpeg: false, avif: false },
+    show: { pbcAll: true, pbcPareto: true, jpeg: false, avif: false, webp: false },
     dyn: [], mpMin: null, mpMax: null,
   };
 
   const COLORS = {
     gray: "#56565d", pareto: "#ff9b2e", sel: "#ff3b41", base: "#34c6ff",
-    jpeg: "#7d8cff", avif: "#34d39a",
+    jpeg: "#7d8cff", avif: "#34d39a", webp: "#ffb454",
   };
-  const TOGGLES = [["pbcAll", "PBC All"], ["pbcPareto", "PBC Pareto"], ["jpeg", "JPEG"], ["avif", "AVIF"]];
+  const TOGGLES = [["pbcAll", "PBC All"], ["pbcPareto", "PBC Pareto"], ["jpeg", "JPEG"], ["avif", "AVIF"], ["webp", "WebP"]];
   // Recommendation weight presets: [speed, compression, mse].
   const PRESETS = { "Fast": [80, 15, 5], "Tiny File": [10, 80, 10], "Balanced": [33, 33, 34], "Best Quality": [5, 15, 80] };
 
@@ -242,8 +242,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");
-    S.codec = (jpeg.length || avif.length) ? { jpeg, avif } : null;
+    const jpeg = pick("JPEG"), avif = pick("AVIF"), webp = pick("WEBP");
+    S.codec = (jpeg.length || avif.length || webp.length) ? { jpeg, avif, webp } : null;
   }
 
   function renderSummary() {
@@ -407,7 +407,7 @@
     if (S.show.pbcAll) traces.push(ptTrace(all, xKey, yKey, { name: "PBC all", marker: { size: 5, color: COLORS.gray, opacity: .55 } }));
     if (S.show.pbcPareto) traces.push(ptTrace(all.filter((t) => t.pareto), xKey, yKey, { name: "PBC Pareto", marker: { size: 8, color: COLORS.pareto } }));
 
-    [["jpeg", COLORS.jpeg], ["avif", COLORS.avif]].forEach(([k, c]) => {
+    [["jpeg", COLORS.jpeg], ["avif", COLORS.avif], ["webp", COLORS.webp]].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));