Upload 4 files

server.py

@@ -1,3 +1,4 @@
+import ast
 import base64
 import io
 import math
@@ -43,6 +44,11 @@ def _i(v, d):
     return int(_f(v, d))
 
 
+@app.get("/api/multlist")
+def multlist(bit_count: int = 2, min: int = -10, max: int = 20, mode: str = "Stable_Uniform"):
+    return {"list": list(PBC.generate_multlist(bit_count, min, max, mode))}
+
+
 @app.post("/api/compress")
 async def compress(
     image: UploadFile = File(...),
@@ -60,10 +66,7 @@ async def compress(
     decay_cutoff: str = Form(""),
     decay_softness: str = Form(""),
     decay_progress: str = Form(""),
-    multlist_mode: str = Form("Stable_Uniform"),
-    mult_bit_count: str = Form("2"),
-    mult_min: str = Form("-10"),
-    mult_max: str = Form("20"),
+    mult_list: str = Form(""),
     strokes_per_quadrant: str = Form("100"),
     quadrant_warmup_time: str = Form("0.5"),
     quadrant_max_bits: str = Form("8"),
@@ -92,10 +95,15 @@ async def compress(
             "softness": _f(decay_softness, 0.5),
             "progress": _f(decay_progress, 0.5),
         }
+        try:
+            mlist = [int(x) for x in ast.literal_eval(mult_list)]
+            assert mlist
+        except (ValueError, SyntaxError, AssertionError, TypeError):
+            mlist = [-10, 0, 5, 20]
         kwargs = dict(
             stroke_count=_i(stroke_count, -1),
             size_range=(_f(size_range_start, 0.3), _f(size_range_end, 0.01)),
-            mult_list=PBC.generate_multlist(_i(mult_bit_count, 2), _i(mult_min, -10), _i(mult_max, 20), multlist_mode),
+            mult_list=mlist,
             start_mode=start_mode,
             decay_params=decay,
             strokes_per_quadrant=_i(strokes_per_quadrant, 100),
@@ -141,7 +149,7 @@ async def compress(
         "mse": round(mse, 1),
         "psnr": round(psnr, 2),
         "time_seconds": round(elapsed, 2),
-        "params": {"mode": mode, **{k: (list(v) if isinstance(v, tuple) else v) for k, v in kwargs.items() if k not in ("mult_list", "downsample_alg", "decay_params")}},
+        "params": {"mode": mode, **{k: (list(v) if isinstance(v, tuple) else v) for k, v in kwargs.items() if k not in ("downsample_alg", "decay_params")}},
     })
 
 

static/app.js

@@ -18,10 +18,12 @@ const SAMPLES = [
 const CANVAS = 256;                 // internal canvas resolution
 const SCALE = CANVAS / 512;         // spec defined for a 512 canvas
 const RADIUS = 100 * SCALE;         // 100px brush radius (clicks only)
-const START_SIZE = 40 * SCALE;      // 40x40 strokes to start
+const GLOBAL_START = 500 * SCALE;   // global auto strokes: 500x500 …
+const GLOBAL_END = 10 * SCALE;      // … down to 10x10
+const GLOBAL_T = 5;                 // … over 5 seconds
+const CLICK_T = 2;                  // click strokes shrink to 1x1 over 2s
 const STROKES_PER_FRAME = 18;
 const CYCLE_MS = 5000;
-const CLICK_SHRINK_S = 2;           // click strokes 40→1 in 2s
 const N = 5;                        // pairs in the ring (3 visible)
 
 const SLOTS = [
@@ -33,9 +35,11 @@ const SLOTS = [
 ];
 
 let pairs = [], offset = 0, activePair = null, activeStart = 0, pressStart = 0, srcCursor = 0;
-let mouse = { down: false, x: 0, y: 0, target: null };
+let mouse = { down: false, x: 0, y: 0, target: null, startSize: GLOBAL_START };
 
-const sizeAt = (t, T) => t >= T ? 1 : Math.max(1, Math.round(START_SIZE * Math.exp(-(Math.log(START_SIZE) / T) * t)));
+// Exponential (fast-then-slow) interpolation from s0 to s1 over T seconds.
+const expSize = (s0, s1, t, T) => Math.max(1, Math.round(s0 * Math.pow(s1 / s0, Math.min(t, T) / T)));
+const globalSizeNow = () => expSize(GLOBAL_START, GLOBAL_END, (performance.now() - activeStart) / 1000, GLOBAL_T);
 
 function makePair() {
   const el = document.createElement("div");
@@ -136,16 +140,16 @@ function paintLoop() {
   if (p && p.srcData) {
     const clicking = mouse.down && mouse.target === p;
     if (clicking) {
-      // Each press restarts the 40→1 (2s) schedule, painted within a circle at the cursor.
-      const size = sizeAt((performance.now() - pressStart) / 1000, CLICK_SHRINK_S);
+      // Each press shrinks from the current global size down to 1x1 over 2s, within a circle at the cursor.
+      const size = expSize(mouse.startSize, 1, (performance.now() - pressStart) / 1000, CLICK_T);
       for (let i = 0; i < STROKES_PER_FRAME * 2; i++) {
         const a = Math.random() * Math.PI * 2;
         const d = Math.random() * Math.max(0, RADIUS - size);
         fillStroke(p, mouse.x + Math.cos(a) * d - size / 2, mouse.y + Math.sin(a) * d - size / 2, size);
       }
     } else {
-      // Default: global random placement across the whole canvas, 40→1 over the full pair lifetime.
-      const size = sizeAt((performance.now() - activeStart) / 1000, CYCLE_MS / 1000);
+      // Default: global random placement across the whole canvas, 500→10 over the full lifetime.
+      const size = globalSizeNow();
       for (let i = 0; i < STROKES_PER_FRAME; i++) {
         fillStroke(p, Math.random() * (CANVAS - size), Math.random() * (CANVAS - size), size);
       }
@@ -172,6 +176,7 @@ function initRoster() {
     const p = pairs.find(x => x.canvas === cv);
     if (p !== activePair) return;
     mouse.down = true; mouse.target = p; pressStart = performance.now();
+    mouse.startSize = globalSizeNow();
     moveMouse(e, cv);
   });
   roster.addEventListener("mousemove", e => {
@@ -229,10 +234,11 @@ const PARAMS = [
   { id: "decay_softness", label: "Decay softness", group: "Decay", modes: ["Manual"], type: "slider", min: 0, max: 1, step: 0.01, value: 0.5 },
   { id: "decay_progress", label: "Decay progress", group: "Decay", modes: ["Manual"], type: "slider", min: 0, max: 1, step: 0.01, value: 0.5 },
 
-  { id: "multlist_mode", label: "Multiplier list gen", group: "Multiplier list", modes: ["Manual"], type: "select", options: ["Stable_Uniform", "Uniform", "Random"], value: "Stable_Uniform" },
+  { id: "multlist_mode", label: "Generator mode", group: "Multiplier list", modes: ["Manual"], type: "select", options: ["Stable_Uniform", "Uniform", "Random"], value: "Stable_Uniform" },
   { id: "mult_bit_count", label: "Multiplier bit count", group: "Multiplier list", modes: ["Manual"], type: "slider", min: 1, max: 9, step: 1, value: 2 },
   { id: "mult_min", label: "Multiplier minimum", group: "Multiplier list", modes: ["Manual"], type: "slider", min: -255, max: 255, step: 1, value: -10 },
   { id: "mult_max", label: "Multiplier maximum", group: "Multiplier list", modes: ["Manual"], type: "slider", min: -255, max: 255, step: 1, value: 20 },
+  { id: "mult_list", label: "Multiplier list", hint: "editable", group: "Multiplier list", modes: ["Manual"], type: "text", value: "[-10, 0, 5, 20]", gen: true },
 
   { id: "strokes_per_quadrant", label: "Strokes / quadrant", group: "Quadrants", modes: ["Manual"], type: "slider", min: 10, max: 1000, step: 10, value: 100 },
   { id: "quadrant_warmup_time", label: "Quadrant warmup", group: "Quadrants", modes: ["Manual"], type: "slider", min: 0, max: 1, step: 0.01, value: 0.5 },
@@ -276,13 +282,22 @@ function renderParams() {
   paramsBody.querySelectorAll("[data-pid]").forEach(el => {
     el.addEventListener("input", () => {
       const id = el.dataset.pid;
-      const v = el.type === "checkbox" ? el.checked : el.value;
-      paramState[id] = v;
-      if (el.type === "range" || el.type === "number") {
+      paramState[id] = el.type === "checkbox" ? el.checked : el.value;
+      if (el.type === "range" || el.type === "number")
         paramsBody.querySelectorAll(`[data-pid="${id}"]`).forEach(o => { if (o !== el) o.value = el.value; });
-      }
     });
   });
+
+  const gen = paramsBody.querySelector("#gen-mult_list");
+  if (gen) gen.addEventListener("click", async () => {
+    const q = new URLSearchParams({ bit_count: paramState.mult_bit_count, min: paramState.mult_min, max: paramState.mult_max, mode: paramState.multlist_mode });
+    try {
+      const { list } = await (await fetch("/api/multlist?" + q)).json();
+      const s = "[" + list.join(", ") + "]";
+      paramState.mult_list = s;
+      paramsBody.querySelector('[data-pid="mult_list"]').value = s;
+    } catch { toast("Could not generate list"); }
+  });
 }
 
 function control(p) {
@@ -291,6 +306,12 @@ function control(p) {
     return `<div class="param"><label>${p.label}</label><select data-pid="${p.id}">${p.options.map(o => `<option ${o == v ? "selected" : ""}>${o}</option>`).join("")}</select></div>`;
   if (p.type === "check")
     return `<div class="param"><label>${p.label}</label><label class="check-row"><input type="checkbox" data-pid="${p.id}" ${v ? "checked" : ""}> enabled</label></div>`;
+  if (p.type === "text")
+    return `<div class="param full"><label>${p.label}${p.hint ? ` <i>${p.hint}</i>` : ""}</label>
+      <div class="slider-row">
+        <input type="text" class="num" data-pid="${p.id}" value="${v}" style="flex:1;text-align:left">
+        ${p.gen ? `<button type="button" class="gen-btn" id="gen-${p.id}">Generate</button>` : ""}
+      </div></div>`;
   return `<div class="param ${p.full ? "full" : ""}">
       <label>${p.label}${p.hint ? ` <i>${p.hint}</i>` : ""}</label>
       <div class="slider-row">
@@ -458,24 +479,59 @@ function escapeParams(p) {
 ============================================================ */
 const viewer = document.getElementById("viewer");
 const viewerStage = document.getElementById("viewer-stage");
+const holdBtn = document.getElementById("hold-original");
+const prevBtn = document.getElementById("viewer-prev");
+const nextBtn = document.getElementById("viewer-next");
+let viewIndex = -1;
+
 document.getElementById("viewer-close").addEventListener("click", closeViewer);
 viewer.addEventListener("click", e => { if (e.target === viewer) closeViewer(); });
-window.addEventListener("keydown", e => { if (e.key === "Escape") closeViewer(); });
+prevBtn.addEventListener("click", () => step(-1));
+nextBtn.addEventListener("click", () => step(1));
+window.addEventListener("keydown", e => {
+  if (viewer.hidden) return;
+  if (e.key === "Escape") closeViewer();
+  else if (e.key === "ArrowLeft") step(-1);
+  else if (e.key === "ArrowRight") step(1);
+});
 
-function openViewer(d) {
+function openViewer(d) { viewIndex = registry.indexOf(d); renderViewer(); viewer.hidden = false; }
+function closeViewer() { viewer.hidden = true; }
+function step(dir) {
+  const i = viewIndex + dir;
+  if (i >= 0 && i < registry.length) { viewIndex = i; renderViewer(); }
+}
+
+function renderViewer() {
+  const d = registry[viewIndex];
+  if (!d) return;
   const horizontal = d.width >= d.height;
   if (d.compare) {
     viewerStage.className = `viewer-stage pair ${horizontal ? "vert" : ""}`;
     viewerStage.innerHTML = `<img src="${d.original_image}"><img src="${d.reconstructed_image}">`;
-    document.getElementById("viewer-caption").textContent = "original  /  compressed";
+    holdBtn.hidden = true;
   } else {
     viewerStage.className = "viewer-stage";
     viewerStage.innerHTML = `<img src="${d.reconstructed_image}">`;
-    document.getElementById("viewer-caption").textContent = `compressed · ${d.compression_rate}× · ${d.psnr} dB`;
+    holdBtn.hidden = false;
   }
-  viewer.hidden = false;
+  holdBtn.classList.remove("holding");
+  document.getElementById("viewer-caption").textContent =
+    `Compressed ${d.compression_rate}× in ${d.time_seconds}s  |  MSE: ${d.mse}  |  PSNR: ${d.psnr} dB`;
+  prevBtn.disabled = viewIndex <= 0;
+  nextBtn.disabled = viewIndex >= registry.length - 1;
 }
-function closeViewer() { viewer.hidden = true; }
+
+function holdOriginal(on) {
+  const d = registry[viewIndex];
+  const img = viewerStage.querySelector("img");
+  if (!d || !img) return;
+  img.src = on ? d.original_image : d.reconstructed_image;
+  holdBtn.classList.toggle("holding", on);
+}
+holdBtn.addEventListener("pointerdown", e => { e.preventDefault(); holdOriginal(true); });
+holdBtn.addEventListener("pointerup", () => holdOriginal(false));
+holdBtn.addEventListener("pointerleave", () => holdBtn.classList.contains("holding") && holdOriginal(false));
 
 /* ============================================================
    DOWNLOAD / SHARE

static/index.html

@@ -115,8 +115,13 @@
 <!-- FULLSCREEN VIEWER -->
 <div id="viewer" class="viewer" hidden>
   <button id="viewer-close" class="viewer-close" aria-label="Close">×</button>
+  <button id="viewer-prev" class="viewer-nav prev" aria-label="Previous">‹</button>
+  <button id="viewer-next" class="viewer-nav next" aria-label="Next">›</button>
   <div id="viewer-stage" class="viewer-stage"></div>
   <p id="viewer-caption" class="viewer-caption"></p>
+  <div class="viewer-controls">
+    <button id="hold-original" class="hold-btn" hidden>Hold for original</button>
+  </div>
 </div>
 
 <div id="toast" class="toast"></div>

static/styles.css

@@ -155,6 +155,12 @@ em{font-style:normal;color:var(--red);}
 .param select:focus,.param .num:focus{border-color:var(--red-dim);}
 .slider-row{display:flex;align-items:center;gap:.7rem;}
 .slider-row .num{width:96px;flex:none;text-align:right;}
+.gen-btn{
+  background:var(--surface2);border:1px solid var(--border2);color:var(--muted);
+  font-family:inherit;font-size:12.5px;padding:9px 14px;border-radius:7px;cursor:pointer;
+  flex:none;white-space:nowrap;transition:.15s;
+}
+.gen-btn:hover{color:var(--text);border-color:var(--red-dim);}
 input[type=range]{
   -webkit-appearance:none;appearance:none;flex:1;height:4px;border-radius:3px;
   background:var(--border2);outline:none;cursor:pointer;
@@ -226,17 +232,34 @@ input[type=range]::-moz-range-thumb{
   position:fixed;inset:0;z-index:60;background:rgba(8,8,10,.94);backdrop-filter:blur(6px);
   display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;gap:1rem;
 }
-.viewer-stage{max-width:92vw;max-height:82vh;display:flex;gap:14px;align-items:center;justify-content:center;}
+.viewer-stage{max-width:92vw;max-height:78vh;display:flex;gap:14px;align-items:center;justify-content:center;}
 .viewer-stage.vert{flex-direction:column;}
-.viewer-stage img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:8px;border:1px solid var(--border2);}
+.viewer-stage img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:8px;border:1px solid var(--border2);}
 .viewer-stage.pair img{max-width:46vw;}
-.viewer-stage.vert.pair img{max-width:80vw;max-height:39vh;}
+.viewer-stage.vert.pair img{max-width:80vw;max-height:38vh;}
 .viewer-close{
   position:absolute;top:22px;right:26px;background:var(--surface2);border:1px solid var(--border2);
   color:var(--text);width:40px;height:40px;border-radius:50%;font-size:22px;cursor:pointer;transition:.15s;
 }
 .viewer-close:hover{color:var(--red);border-color:var(--red-dim);}
-.viewer-caption{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--dim);}
+.viewer-nav{
+  position:absolute;top:50%;transform:translateY(-50%);background:var(--surface2);
+  border:1px solid var(--border2);color:var(--text);width:46px;height:46px;border-radius:50%;
+  font-size:24px;line-height:1;cursor:pointer;transition:.15s;
+}
+.viewer-nav:hover{color:var(--red);border-color:var(--red-dim);}
+.viewer-nav.prev{left:26px;}
+.viewer-nav.next{right:26px;}
+.viewer-nav[disabled]{opacity:.25;cursor:default;}
+.viewer-caption{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--muted);text-align:center;}
+.viewer-controls{display:flex;gap:.7rem;}
+.hold-btn{
+  background:var(--surface2);border:1px solid var(--border2);color:var(--muted);
+  font-family:inherit;font-size:13px;padding:9px 18px;border-radius:8px;cursor:pointer;
+  user-select:none;transition:.15s;
+}
+.hold-btn:hover{color:var(--text);border-color:var(--red-dim);}
+.hold-btn.holding{background:var(--red);color:#fff;border-color:var(--red);}
 
 /* ===== TOAST ===== */
 .toast{