Build update — 2026-05-22T18:34:00.912Z

.gitattributes

@@ -1,35 +1,14 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
 *.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
 *.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text
+*.ttf filter=lfs diff=lfs merge=lfs -text
+*.woff filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
+*.eot filter=lfs diff=lfs merge=lfs -text
+*.otf filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
+*.gif filter=lfs diff=lfs merge=lfs -text
+*.ico filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,12 +1,28 @@
 ---
-title: Updraft
-emoji: 🐨
-colorFrom: indigo
-colorTo: red
+title: Updraft Upscaler
+colorFrom: blue
+colorTo: indigo
 sdk: static
 pinned: false
 license: mit
-short_description: Updraft Local In-Browser Upscaling
+short_description: In-browser image upscaler — no upload, no install
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Updraft
+
+In-browser image upscaler running ONNX models client-side. Your images never leave your device.
+
+This Space ships a curated subset of models. For the full model lineup (including the larger DAT and TinySR diffusion-refiner models) plus video upscaling, use the main site:
+
+→ **https://nickcelestin.com/applications/aitools/index.html**
+
+## Models in this Space
+
+- `models/4x-UpdraftSmall.onnx`
+- `models/4x-ClearRealityV1.onnx`
+- `models/DAT_light_x4_dyn_OTF_4.onnx`
+- `models/4x-UltraSharpV2_Lite.onnx`

assets/shared.css

@@ -0,0 +1,33 @@
+/* === AI Tools — Global Overrides === */
+
+:root {
+    --pico-font-size: 100%;
+    scrollbar-width: thin;
+    scrollbar-color: var(--pico-secondary-border) var(--pico-background-color);
+}
+
+/* Nav brand */
+nav .brand {
+    color: #6366f1;
+}
+nav .brand-icon {
+    height: 2.25em;
+    vertical-align: -0.35em;
+    margin: 0 -0.5em;
+}
+
+/* Compact form controls inside tool UIs */
+.controls select,
+.controls input {
+    margin-bottom: 0;
+}
+
+/* Feature sections */
+[id^="feature-"] {
+    animation: fadeIn 0.15s ease-in;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}

components/compare-slider.js

@@ -0,0 +1,469 @@
+/**
+ * <compare-slider> — before/after image comparison slider.
+ *
+ * The slider is always on. Left-click / drag positions the divider. Right-click
+ * snaps the divider to whichever extreme it isn't currently nearer to (left
+ * or right edge), so a single right-click flips between the before-only and
+ * after-only views.
+ */
+
+import { morph } from 'lib/morph';
+import { canvasToBlobUrl } from 'lib/canvas';
+
+class CompareSlider extends HTMLElement {
+  #dragging = false;
+  #beforeSrc = '';
+  #afterSrc = '';
+  #positionFrac = 0.5;
+  #downloadSrc = '';
+  #downloadName = '';
+  #beforeCanvas = null;
+  #afterCanvas = null;
+  #lazyBlobURL = '';
+
+  #onWindowMouseMove = (e) => { if (this.#dragging) this.#setPosition(this.#getFrac(e)); };
+  #onWindowTouchMove = (e) => { if (this.#dragging) this.#setPosition(this.#getFrac(e)); };
+  #onWindowMouseUp = () => {
+    this.#dragging = false;
+    this.classList.remove('dragging');
+  };
+  #onWindowTouchEnd = () => {
+    this.#dragging = false;
+    this.classList.remove('dragging');
+  };
+
+  #knobScheduled = false;
+  #knobFullWidth = 0;
+  #resizeObserver = null;
+  #scheduleKnobUpdate = () => {
+    if (this.#knobScheduled) return;
+    this.#knobScheduled = true;
+    requestAnimationFrame(() => {
+      this.#knobScheduled = false;
+      this.#updateKnobPosition();
+    });
+  };
+  #onResize = () => {
+    // Knob's measured full width may change with font-metric / DPR shifts.
+    this.#knobFullWidth = 0;
+    this.#scheduleKnobUpdate();
+  };
+
+  connectedCallback() {
+    this.classList.add('compare');
+    // Belt-and-suspenders: also set display:none inline so the slider is
+    // definitely hidden before show() has been called. The class CSS rule
+    // does this too, but it lives inside our own <style> block — there's a
+    // brief window between when the host is added to the DOM (with the
+    // class but no inner content) and when #render() lands the style tag,
+    // during which the absolutely-positioned handle would render.
+    this.style.display = 'none';
+    this.#render();
+
+    this.addEventListener('mousedown', e => {
+      if (e.button !== 0) return; // left-button only — right-click handled below
+      e.preventDefault(); this.#dragging = true; this.classList.add('dragging');
+      this.#setPosition(this.#getFrac(e));
+    });
+    this.addEventListener('touchstart', e => {
+      this.#dragging = true; this.classList.add('dragging');
+      this.#setPosition(this.#getFrac(e));
+    }, { passive: true });
+
+    this.addEventListener('contextmenu', (e) => {
+      // Right-click flips the divider to whichever extreme it's currently
+      // farther from — single click toggles between full-before and full-after.
+      e.preventDefault();
+      this.#setPosition(this.#positionFrac < 0.5 ? 1 : 0);
+    });
+
+    window.addEventListener('mousemove', this.#onWindowMouseMove);
+    window.addEventListener('touchmove', this.#onWindowTouchMove, { passive: true });
+    window.addEventListener('mouseup', this.#onWindowMouseUp);
+    window.addEventListener('touchend', this.#onWindowTouchEnd);
+    // Keep the (fixed-position) knob aligned as the user scrolls / resizes.
+    window.addEventListener('scroll', this.#scheduleKnobUpdate, { passive: true });
+    window.addEventListener('resize', this.#onResize);
+    // native-size mode scrolls inside the slider itself, not the page.
+    this.addEventListener('scroll', this.#scheduleKnobUpdate, { passive: true });
+    // Catch view-mode swaps (e.g. .expanded ↔ .native-size) where the host
+    // class flips but no scroll/resize fires — without this the knob keeps
+    // its previous logical position until the next drag.
+    if (typeof ResizeObserver !== 'undefined') {
+      this.#resizeObserver = new ResizeObserver(this.#scheduleKnobUpdate);
+      this.#resizeObserver.observe(this);
+    }
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('mousemove', this.#onWindowMouseMove);
+    window.removeEventListener('touchmove', this.#onWindowTouchMove);
+    window.removeEventListener('mouseup', this.#onWindowMouseUp);
+    window.removeEventListener('touchend', this.#onWindowTouchEnd);
+    window.removeEventListener('scroll', this.#scheduleKnobUpdate);
+    window.removeEventListener('resize', this.#onResize);
+    this.#resizeObserver?.disconnect();
+    this.#resizeObserver = null;
+  }
+
+  /**
+   * @param {string|HTMLCanvasElement} beforeSrc
+   * @param {string|HTMLCanvasElement} afterSrc
+   * @param {{ downloadSrc?: string, downloadName?: string }} [opts]
+   */
+  async show(beforeSrc, afterSrc, opts = {}) {
+    const canvasMode = beforeSrc instanceof HTMLCanvasElement;
+    if (canvasMode) {
+      this.#beforeCanvas = beforeSrc;
+      this.#afterCanvas = afterSrc;
+      this.#beforeSrc = '';
+      this.#afterSrc = '';
+      this.#downloadSrc = '';
+    } else {
+      this.#beforeCanvas = null;
+      this.#afterCanvas = null;
+      this.#beforeSrc = beforeSrc;
+      this.#afterSrc = afterSrc;
+      this.#downloadSrc = opts.downloadSrc || afterSrc;
+    }
+    this.#downloadName = opts.downloadName || 'download.png';
+    this.#render();
+
+    if (!canvasMode) {
+      const imgs = this.querySelectorAll('.compare-after, .compare-before-wrap img');
+      await Promise.all([...imgs].map(img =>
+        img.complete ? Promise.resolve() : new Promise(r => { img.onload = r; })
+      ));
+    }
+
+    const afterEl = this.querySelector('.compare-after');
+    const natW = canvasMode
+      ? (this.#afterCanvas?.width || 0)
+      : (afterEl?.naturalWidth || 0);
+    const natH = canvasMode
+      ? (this.#afterCanvas?.height || 0)
+      : (afterEl?.naturalHeight || 0);
+    if (natW && natH) {
+      this.style.setProperty('--ar', `${natW} / ${natH}`);
+      // --ar-num is a plain number (w/h) used by calc() to derive the host
+      // width in fit-height mode. Block elements with width:auto +
+      // aspect-ratio don't reliably derive width from the aspect — the
+      // "stretch to containing block" default often wins. Computing the
+      // width explicitly via calc avoids that ambiguity.
+      this.style.setProperty('--ar-num', `${natW / natH}`);
+      this.style.setProperty('--natural-w', `${natW}px`);
+    }
+
+    this.style.display = 'block';
+    this.#setPosition(this.#positionFrac);
+    this.#updateKnobPosition();
+    if (canvasMode) this.#prepareLazyDownload();
+  }
+
+  hide() {
+    this.style.display = 'none';
+    const knob = this.querySelector('.handle-knob');
+    if (knob) knob.style.visibility = 'hidden';
+    this.style.removeProperty('--ar');
+    this.style.removeProperty('--ar-num');
+    this.style.removeProperty('--natural-w');
+    this.#beforeCanvas = null;
+    this.#afterCanvas = null;
+    if (this.#lazyBlobURL) {
+      URL.revokeObjectURL(this.#lazyBlobURL);
+      this.#lazyBlobURL = '';
+      this.#downloadSrc = '';
+    }
+  }
+
+  async openInTab() {
+    const url = this.#downloadSrc || await this.#ensureDownloadURL();
+    if (url) window.open(url, '_blank');
+  }
+
+  async download() {
+    const url = this.#downloadSrc || await this.#ensureDownloadURL();
+    if (!url) return;
+    const a = document.createElement('a');
+    a.download = this.#downloadName || 'download.png';
+    a.href = url;
+    a.click();
+  }
+
+  #getFrac(e) {
+    // Use the stage rect (the natural-size box that wraps the after canvas
+    // and the before-wrap clip) instead of the host. In normal modes the
+    // stage fills the host so this is equivalent, but in native-size mode
+    // the host is a scrollable container while the stage is at the canvas's
+    // natural pixel size — only the stage rect tracks the actual image
+    // coordinates the slider divides.
+    const stage = this.querySelector('.compare-stage');
+    const rect = (stage || this).getBoundingClientRect();
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    return Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+  }
+
+  #setPosition(frac) {
+    const clamped = Math.max(0, Math.min(1, frac));
+    this.#positionFrac = clamped;
+    const pct = (clamped * 100).toFixed(2) + '%';
+    const wrap = this.querySelector('.compare-before-wrap');
+    const handle = this.querySelector('.compare-handle');
+    if (wrap) wrap.style.width = pct;
+    if (handle) handle.style.left = pct;
+    this.#updateKnobPosition();
+  }
+
+  /**
+   * Position the (fixed) knob inside the visible portion of the slider's
+   * stage — i.e. the image area, which is the "workspace" the divider
+   * actually lives in. The knob follows the user vertically (target =
+   * viewport center) but is clamped to the stage's visible rect on both
+   * axes. When clamped to a horizontal edge, only the icon for the side
+   * currently in view is shown, matching the "icon-clipped-by-canvas"
+   * behavior the slider had at extreme drag positions when the image fit
+   * the workspace.
+   */
+  #updateKnobPosition() {
+    const knob = this.querySelector('.handle-knob');
+    if (!knob) return;
+    if (getComputedStyle(this).display === 'none') {
+      knob.style.visibility = 'hidden';
+      return;
+    }
+    const stage = this.querySelector('.compare-stage');
+    if (!stage) return;
+    const stageRect = stage.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    // Visible stage = intersection of stage bounds and viewport.
+    const visLeft = Math.max(stageRect.left, 0);
+    const visRight = Math.min(stageRect.right, vw);
+    const visTop = Math.max(stageRect.top, 0);
+    const visBottom = Math.min(stageRect.bottom, vh);
+    if (visRight <= visLeft || visBottom <= visTop ||
+        stageRect.width === 0 || stageRect.height === 0) {
+      knob.style.visibility = 'hidden';
+      return;
+    }
+    knob.style.visibility = '';
+
+    // Cache the knob's full (unclipped) width. The clip classes hide one
+    // half of the knob, which would otherwise shrink offsetWidth and cause
+    // the would-clip threshold to oscillate as the user drags near an edge.
+    if (this.#knobFullWidth === 0) {
+      const hadClipLeft = knob.classList.contains('clip-at-left');
+      const hadClipRight = knob.classList.contains('clip-at-right');
+      if (hadClipLeft) knob.classList.remove('clip-at-left');
+      if (hadClipRight) knob.classList.remove('clip-at-right');
+      this.#knobFullWidth = knob.offsetWidth;
+      if (hadClipLeft) knob.classList.add('clip-at-left');
+      if (hadClipRight) knob.classList.add('clip-at-right');
+    }
+    const halfKnob = this.#knobFullWidth / 2;
+
+    const logicalX = stageRect.left + this.#positionFrac * stageRect.width;
+    // The knob clips when its bounding box (not just its centerline) would
+    // extend past the visible stage. Before the knob was position:fixed it
+    // got this for free from the slider's overflow:hidden; now we have to
+    // detect it ourselves.
+    const wouldClipLeft = logicalX - halfKnob < visLeft;
+    const wouldClipRight = logicalX + halfKnob > visRight && !wouldClipLeft;
+    knob.classList.toggle('clip-at-left', wouldClipLeft);
+    knob.classList.toggle('clip-at-right', wouldClipRight);
+
+    let leftPx;
+    if (wouldClipLeft) leftPx = visLeft;
+    else if (wouldClipRight) leftPx = visRight;
+    else leftPx = logicalX;
+    const targetY = vh / 2;
+    const clampedY = Math.max(visTop, Math.min(visBottom, targetY));
+    knob.style.left = leftPx + 'px';
+    knob.style.top = clampedY + 'px';
+  }
+
+  #drawCanvasSources() {
+    const afterEl = this.querySelector('canvas.compare-after');
+    if (afterEl && this.#afterCanvas) {
+      afterEl.getContext('2d').drawImage(this.#afterCanvas, 0, 0);
+    }
+    const beforeEl = this.querySelector('.compare-before-wrap canvas');
+    if (beforeEl && this.#beforeCanvas) {
+      beforeEl.getContext('2d').drawImage(this.#beforeCanvas, 0, 0);
+    }
+  }
+
+  async #ensureDownloadURL() {
+    if (this.#downloadSrc) return this.#downloadSrc;
+    if (!this.#afterCanvas) return '';
+    this.#lazyBlobURL = await canvasToBlobUrl(this.#afterCanvas);
+    this.#downloadSrc = this.#lazyBlobURL;
+    return this.#downloadSrc;
+  }
+
+  async #prepareLazyDownload() {
+    const canvas = this.#afterCanvas;
+    if (!canvas) return;
+    const url = await canvasToBlobUrl(canvas);
+    if (this.#afterCanvas !== canvas) {
+      URL.revokeObjectURL(url);
+      return;
+    }
+    this.#lazyBlobURL = url;
+    this.#downloadSrc = this.#lazyBlobURL;
+  }
+
+  #render() {
+    const cm = !!this.#afterCanvas;
+    const afterTag = cm
+      ? `<canvas class="compare-after" width="${this.#afterCanvas.width}" height="${this.#afterCanvas.height}"></canvas>`
+      : `<img class="compare-after" src="${this.#afterSrc}">`;
+    const beforeTag = cm
+      ? `<canvas width="${this.#beforeCanvas.width}" height="${this.#beforeCanvas.height}"></canvas>`
+      : `<img src="${this.#beforeSrc}">`;
+    morph(this, `
+      <style>
+        .compare {
+          display: none; position: relative; overflow: hidden;
+          border: 1px solid var(--pico-muted-border-color, #333);
+          border-radius: var(--pico-border-radius, 4px);
+          cursor: col-resize; user-select: none; max-width: 100%;
+        }
+        .compare:not(.expanded):not(.native-size) {
+          width: 100%;
+          max-width: 100%;
+          aspect-ratio: var(--ar, auto);
+          margin-inline: auto;
+        }
+        .compare.expanded {
+          height: calc(100vh - 1rem);
+          width: calc((100vh - 1rem) * var(--ar-num, 1));
+          max-width: none;
+          margin-inline: auto;
+        }
+        .compare img, .compare canvas { display: block; width: 100%; height: auto; pointer-events: none; }
+        /* compare-stage is the natural-size containing block for the after
+           canvas, the before-wrap clip and the slider handle. In normal modes
+           it just fills the host (width: 100%); in native-size it shrinks to
+           the canvas's natural dimensions so before-wrap's percentage width
+           / handle's percentage left line up with the same native pixels the
+           after canvas is showing. */
+        .compare .compare-stage {
+          position: relative;
+          display: block;
+          width: 100%;
+        }
+        .compare .compare-before-wrap {
+          position: absolute; top: 0; left: 0; height: 100%; overflow: hidden;
+          width: 50%; border-right: 2px solid rgba(255,255,255,0.35);
+          transition: border-color 0.2s ease;
+        }
+        .compare.dragging .compare-before-wrap {
+          border-right-color: #fff;
+        }
+        .compare .compare-before-wrap img,
+        .compare .compare-before-wrap canvas { width: auto; height: 100%; max-width: none; }
+        .compare .compare-handle {
+          position: absolute; top: 0; bottom: 0; width: 2px; background: #fff;
+          left: 50%; margin-left: -1px; z-index: 2; pointer-events: none;
+          opacity: 0.35;
+          transition: opacity 0.2s ease;
+        }
+        .compare.dragging .compare-handle {
+          opacity: 1;
+        }
+        /* The knob is positioned in viewport coordinates (position: fixed)
+           and re-placed on scroll/resize/drag by #updateKnobPosition. JS
+           sets its top/left; transform anchors the box around that point
+           (centered by default, left-anchored when clamped to the viewport's
+           left edge, right-anchored when clamped to the right edge). */
+        .compare .compare-handle .handle-knob {
+          position: fixed; top: 50%; left: 50%;
+          transform: translate(-50%, -50%);
+          display: inline-flex; align-items: center; gap: 8px;
+          padding: 4px 8px;
+          border-radius: 999px;
+          background: rgba(255,255,255,0.92);
+          border: 2px solid #333;
+          box-shadow: 0 0 6px rgba(0,0,0,0.5);
+          color: #333;
+          white-space: nowrap;
+          z-index: 3;
+          pointer-events: none;
+        }
+        .compare .compare-handle .handle-knob.clip-at-left {
+          transform: translate(0, -50%);
+        }
+        .compare .compare-handle .handle-knob.clip-at-right {
+          transform: translate(-100%, -50%);
+        }
+        /* When clamped to a viewport edge, drop the icon for the side the
+           user *isn't* looking at so the knob unambiguously labels what's
+           currently in view. */
+        .compare .compare-handle .handle-knob.clip-at-left .handle-side-before {
+          display: none;
+        }
+        .compare .compare-handle .handle-knob.clip-at-right .handle-side-after {
+          display: none;
+        }
+        .compare .compare-handle .handle-side {
+          display: inline-flex; align-items: center; gap: 3px;
+        }
+        .compare .compare-handle .handle-side .fas {
+          font-size: 11px;
+        }
+        .compare .compare-handle .handle-arrow {
+          font-size: 9px; line-height: 1;
+        }
+        /* native-size renders content at native pixel dimensions inline.
+           The host stays in normal flow but scrolls internally when content
+           exceeds its bounds. Flex + margin:auto centers the stage when the
+           image is smaller than the host and keeps it scrollable when
+           larger. */
+        .compare.native-size {
+          width: 100%;
+          max-width: 100%;
+          height: calc(100vh - 1rem);
+          max-height: calc(100vh - 1rem);
+          aspect-ratio: auto;
+          overflow: auto;
+          cursor: default;
+          display: flex;
+        }
+        .compare.native-size .compare-stage {
+          margin: auto;
+          width: max-content;
+          height: max-content;
+          flex: 0 0 auto;
+        }
+        .compare.native-size .compare-after {
+          width: auto;
+          max-width: none;
+          height: auto;
+          display: block;
+        }
+      </style>
+      <div class="compare-stage">
+        ${afterTag}
+        <div class="compare-before-wrap">
+          ${beforeTag}
+        </div>
+        <div class="compare-handle" aria-hidden="true">
+          <div class="handle-knob">
+            <span class="handle-side handle-side-before" aria-label="Original">
+              <i class="fas fa-eye-low-vision"></i>
+              <span class="handle-arrow">◀</span>
+            </span>
+            <span class="handle-side handle-side-after" aria-label="Enhanced">
+              <span class="handle-arrow">▶</span>
+              <i class="fas fa-eye"></i>
+            </span>
+          </div>
+        </div>
+      </div>
+    `);
+    if (cm) this.#drawCanvasSources();
+  }
+}
+
+customElements.define('compare-slider', CompareSlider);

components/image-cropper.js

@@ -0,0 +1,243 @@
+/**
+ * <image-cropper> — optional bounding-box selection on the source image.
+ *
+ * Events:
+ *   crop-changed  — detail: { crop: { x, y, w, h } | null }
+ */
+
+import { morph } from 'lib/morph';
+import { cropToCanvas } from 'lib/canvas';
+
+class ImageCropper extends HTMLElement {
+  #image = null;
+  #crop = null;
+  #dragging = false;
+  #dragStart = null;
+  #dragCurrent = null;
+
+  #onWindowMouseMove = (e) => { if (this.#dragging) { this.#dragCurrent = this.#eventToElement(e); this.#drawOverlay(); } };
+  #onWindowTouchMove = (e) => { if (this.#dragging) { this.#dragCurrent = this.#eventToElement(e); this.#drawOverlay(); } };
+  #onWindowMouseUp = () => { if (this.#dragging) this.#finishDrag(); };
+  #onWindowTouchEnd = () => { if (this.#dragging) this.#finishDrag(); };
+
+  connectedCallback() {
+    this.classList.add('image-cropper');
+    this.#render();
+
+    this.addEventListener('mousedown', e => {
+      const canvas = e.target.closest('canvas');
+      if (!canvas) return;
+      this.#dragging = true;
+      this.#dragStart = this.#eventToElement(e);
+      this.#dragCurrent = this.#dragStart;
+      this.#crop = null;
+      this.#drawOverlay();
+    });
+    this.addEventListener('touchstart', e => {
+      const canvas = e.target.closest('canvas');
+      if (!canvas) return;
+      this.#dragging = true;
+      this.#dragStart = this.#eventToElement(e);
+      this.#dragCurrent = this.#dragStart;
+      this.#crop = null;
+      this.#drawOverlay();
+    }, { passive: true });
+
+    window.addEventListener('mousemove', this.#onWindowMouseMove);
+    window.addEventListener('touchmove', this.#onWindowTouchMove, { passive: true });
+    window.addEventListener('mouseup', this.#onWindowMouseUp);
+    window.addEventListener('touchend', this.#onWindowTouchEnd);
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('mousemove', this.#onWindowMouseMove);
+    window.removeEventListener('touchmove', this.#onWindowTouchMove);
+    window.removeEventListener('mouseup', this.#onWindowMouseUp);
+    window.removeEventListener('touchend', this.#onWindowTouchEnd);
+  }
+
+  show(image) {
+    // Preserve the existing crop selection when re-shown with the same image
+    // reference (e.g. when the upscaler navigates back to crop mode from the
+    // compare view). A genuinely new image still resets the crop.
+    const sameImage = image === this.#image;
+    this.#image = image;
+    if (!sameImage) this.#crop = null;
+    this.style.setProperty('--ar', `${image.width} / ${image.height}`);
+    this.style.setProperty('--ar-num', `${image.width / image.height}`);
+    this.style.setProperty('--natural-w', `${image.width}px`);
+    this.#render();
+    this.style.display = 'block';
+    this.#resizeCanvas();
+    this.#drawOverlay();
+  }
+
+  hide() {
+    this.style.display = 'none';
+    this.style.removeProperty('--ar');
+    this.style.removeProperty('--ar-num');
+    this.style.removeProperty('--natural-w');
+    this.#image = null;
+    this.#crop = null;
+    const canvas = this.querySelector('canvas');
+    if (canvas) { canvas.width = 0; canvas.height = 0; }
+  }
+
+  clearCrop() {
+    this.#crop = null;
+    this.#render();
+    this.#resizeCanvas();
+    this.#drawOverlay();
+    this.dispatchEvent(new CustomEvent('crop-changed', { bubbles: true, detail: { crop: null } }));
+  }
+
+  get crop() { return this.#crop; }
+
+  extractImage() {
+    const img = this.#image;
+    if (!img) throw new Error('No image loaded');
+    if (!this.#crop) return img;
+    return cropToCanvas(img, this.#crop);
+  }
+
+  #resizeCanvas() {
+    if (!this.#image) return;
+    const canvas = this.querySelector('canvas');
+    if (!canvas) return;
+    canvas.width = this.#image.width;
+    canvas.height = this.#image.height;
+  }
+
+  #eventToElement(e) {
+    const canvas = this.querySelector('canvas');
+    if (!canvas) return { ex: 0, ey: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX;
+    const clientY = e.touches ? e.touches[0].clientY : e.clientY;
+    return {
+      ex: Math.max(0, Math.min(rect.width, clientX - rect.left)),
+      ey: Math.max(0, Math.min(rect.height, clientY - rect.top)),
+    };
+  }
+
+  #finishDrag() {
+    this.#dragging = false;
+    if (!this.#dragStart || !this.#dragCurrent || !this.#image) return;
+
+    const canvas = this.querySelector('canvas');
+    const scaleX = this.#image.width / canvas.clientWidth;
+    const scaleY = this.#image.height / canvas.clientHeight;
+
+    const x1 = Math.min(this.#dragStart.ex, this.#dragCurrent.ex);
+    const y1 = Math.min(this.#dragStart.ey, this.#dragCurrent.ey);
+    const x2 = Math.max(this.#dragStart.ex, this.#dragCurrent.ex);
+    const y2 = Math.max(this.#dragStart.ey, this.#dragCurrent.ey);
+
+    const ix = Math.round(x1 * scaleX);
+    const iy = Math.round(y1 * scaleY);
+    const iw = Math.round((x2 - x1) * scaleX);
+    const ih = Math.round((y2 - y1) * scaleY);
+
+    if (iw < 16 || ih < 16) {
+      this.#crop = null;
+      this.#render();
+      this.#resizeCanvas();
+      this.#drawOverlay();
+      this.dispatchEvent(new CustomEvent('crop-changed', { bubbles: true, detail: { crop: null } }));
+      return;
+    }
+
+    this.#crop = { x: ix, y: iy, w: iw, h: ih };
+    this.#render();
+    this.#resizeCanvas();
+    this.#drawOverlay();
+    this.dispatchEvent(new CustomEvent('crop-changed', { bubbles: true, detail: { crop: this.#crop } }));
+  }
+
+  #drawOverlay() {
+    const canvas = this.querySelector('canvas');
+    if (!canvas || !this.#image) return;
+    const ctx = canvas.getContext('2d');
+    const cw = canvas.width;
+    const ch = canvas.height;
+
+    ctx.drawImage(this.#image, 0, 0, cw, ch);
+
+    let sx, sy, sw, sh;
+    if (this.#dragging && this.#dragStart && this.#dragCurrent) {
+      const scaleX = cw / canvas.clientWidth;
+      const scaleY = ch / canvas.clientHeight;
+      sx = Math.min(this.#dragStart.ex, this.#dragCurrent.ex) * scaleX;
+      sy = Math.min(this.#dragStart.ey, this.#dragCurrent.ey) * scaleY;
+      sw = Math.abs(this.#dragCurrent.ex - this.#dragStart.ex) * scaleX;
+      sh = Math.abs(this.#dragCurrent.ey - this.#dragStart.ey) * scaleY;
+    } else if (this.#crop) {
+      sx = this.#crop.x;
+      sy = this.#crop.y;
+      sw = this.#crop.w;
+      sh = this.#crop.h;
+    } else {
+      return;
+    }
+
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+    ctx.fillRect(0, 0, cw, sy);
+    ctx.fillRect(0, sy, sx, sh);
+    ctx.fillRect(sx + sw, sy, cw - sx - sw, sh);
+    ctx.fillRect(0, sy + sh, cw, ch - sy - sh);
+
+    ctx.strokeStyle = 'var(--pico-primary, #4c8)';
+    ctx.lineWidth = 2;
+    ctx.strokeRect(sx, sy, sw, sh);
+  }
+
+  #render() {
+    morph(this, `
+      <style>
+        .image-cropper { display: none; }
+        .image-cropper:not(.expanded) {
+          width: 100%;
+          max-width: 100%;
+          aspect-ratio: var(--ar, auto);
+          margin-inline: auto;
+        }
+        .image-cropper.expanded {
+          height: calc(100vh - 1rem);
+          width: calc((100vh - 1rem) * var(--ar-num, 1));
+          max-width: none;
+          margin-inline: auto;
+        }
+        /* native-size: canvas at its natural pixel dimensions, centered in
+           a workspace-sized scroll container. Mirrors the compare-slider. */
+        .image-cropper.native-size {
+          width: 100%;
+          max-width: 100%;
+          height: calc(100vh - 1rem);
+          max-height: calc(100vh - 1rem);
+          overflow: auto;
+          display: flex;
+          margin-inline: auto;
+        }
+        .image-cropper.native-size canvas {
+          margin: auto;
+          width: auto;
+          height: auto;
+          max-width: none;
+          flex: 0 0 auto;
+        }
+        .image-cropper canvas {
+          display: block;
+          width: 100%;
+          height: auto;
+          max-width: 100%;
+          border: 1px solid var(--pico-muted-border-color, #333);
+          border-radius: var(--pico-border-radius, 4px);
+          cursor: crosshair;
+        }
+      </style>
+      <canvas></canvas>
+    `);
+  }
+}
+
+customElements.define('image-cropper', ImageCropper);

components/image-drop-zone.js

@@ -0,0 +1,90 @@
+/**
+ * <image-drop-zone> — file picker + drag-and-drop image loader.
+ *
+ * Events:
+ *   image-loaded  — detail: { image: HTMLImageElement }
+ */
+
+import { morph } from 'lib/morph';
+
+class ImageDropZone extends HTMLElement {
+  connectedCallback() {
+    this.classList.add('drop-zone');
+    this.#render();
+
+    this.addEventListener('click', e => {
+      if (e.target.closest('.drop-zone-area')) this.querySelector('input[type="file"]').click();
+    });
+    this.addEventListener('dragover', e => {
+      if (e.target.closest('.drop-zone-area')) { e.preventDefault(); e.target.closest('.drop-zone-area').classList.add('dragover'); }
+    });
+    this.addEventListener('dragleave', e => {
+      if (e.target.closest('.drop-zone-area')) e.target.closest('.drop-zone-area').classList.remove('dragover');
+    });
+    this.addEventListener('drop', e => {
+      const area = e.target.closest('.drop-zone-area');
+      if (!area) return;
+      e.preventDefault();
+      area.classList.remove('dragover');
+      if (e.dataTransfer.files.length) this.#handleFile(e.dataTransfer.files[0]);
+    });
+    this.addEventListener('change', e => {
+      if (e.target.matches('input[type="file"]') && e.target.files.length) this.#handleFile(e.target.files[0]);
+    });
+    document.addEventListener('paste', e => {
+      const items = e.clipboardData?.items;
+      if (!items) return;
+      for (const item of items) {
+        if (item.type.startsWith('image/')) {
+          e.preventDefault();
+          this.#handleFile(item.getAsFile());
+          return;
+        }
+      }
+    });
+  }
+
+  #handleFile(file) {
+    if (!file.type.startsWith('image/')) return;
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = () => {
+        this.dispatchEvent(new CustomEvent('image-loaded', { bubbles: true, detail: { image: img } }));
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  }
+
+  show() {
+    this.style.display = '';
+    const input = this.querySelector('input[type="file"]');
+    if (input) input.value = '';
+  }
+  hide() { this.style.display = 'none'; }
+
+  #render() {
+    morph(this, `
+      <style>
+        .drop-zone .drop-zone-area {
+          border: 2px dashed var(--pico-muted-border-color, #444);
+          border-radius: 8px; padding: 3rem; text-align: center;
+          color: var(--pico-muted-color, #666); font-size: 0.9rem;
+          cursor: pointer; transition: border-color 0.2s;
+        }
+        .drop-zone .drop-zone-area.dragover {
+          border-color: var(--pico-primary, #4c8);
+          color: var(--pico-primary, #4c8);
+        }
+      </style>
+      <input type="file" accept="image/*" hidden>
+      <div class="drop-zone-area">
+        <i class="fas fa-cloud-upload-alt" style="font-size:1.5rem; display:block; margin-bottom:0.5rem"></i>
+        Drop an image here, paste from clipboard, or click to browse
+      </div>
+    `);
+  }
+}
+
+customElements.define('image-drop-zone', ImageDropZone);

components/status-bar.js

@@ -0,0 +1,179 @@
+/**
+ * <status-bar> — colored state icon + title + details (tooltip) + progress row.
+ *
+ * State icon: filled circle (FA fa-circle) colored by state:
+ *   idle    — grey
+ *   running — blue (subtle pulse)
+ *   success — green
+ *   warning — orange (success with a non-fatal fallback/skip)
+ *   error   — red
+ *
+ * Title is the brief "what's happening right now" line. Details live in a
+ * hover tooltip on the icon — used for the longer narrative (which EP,
+ * what error, etc.). Progress row shows a fractional bar with an optional
+ * tile count to the right.
+ *
+ * Primary API:
+ *   sb.set({ title, state, details, progress, tileCount })
+ *     - any subset; unspecified fields are left as-is
+ *     - state: 'idle' | 'running' | 'success' | 'warning' | 'error'
+ *     - progress: 0..1, -1 to hide, -2 indeterminate
+ *     - tileCount: { done, total } or null
+ *
+ * Convenience aliases preserved for incremental callers:
+ *   sb.message = '...'        ≡ sb.set({ title })
+ *   sb.showProgress(frac)     ≡ sb.set({ progress: frac })
+ *   sb.hideProgress()         ≡ sb.set({ progress: -1, tileCount: null })
+ *   sb.showIndeterminate()    ≡ sb.set({ progress: -2 })
+ */
+
+import { morph } from 'lib/morph';
+
+const esc = (s) => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+const STATES = ['idle', 'running', 'success', 'warning', 'error'];
+
+class StatusBar extends HTMLElement {
+  #title = '';
+  #state = 'idle';
+  #details = '';
+  #progress = -1;
+  #tileCount = null;
+
+  connectedCallback() {
+    this.classList.add('status-bar');
+    this.#render();
+  }
+
+  set(fields) {
+    if (fields.title !== undefined) this.#title = fields.title;
+    if (fields.state !== undefined && STATES.includes(fields.state)) this.#state = fields.state;
+    if (fields.details !== undefined) this.#details = fields.details;
+    if (fields.progress !== undefined) this.#progress = fields.progress;
+    if (fields.tileCount !== undefined) this.#tileCount = fields.tileCount;
+    this.#render();
+  }
+
+  set message(msg) { this.set({ title: msg }); }
+  showProgress(frac) { this.set({ progress: frac }); }
+  hideProgress() { this.set({ progress: -1, tileCount: null }); }
+  showIndeterminate() { this.set({ progress: -2 }); }
+
+  #render() {
+    const showProgress = this.#progress !== -1;
+    const indeterminate = this.#progress === -2;
+    const fillWidth = indeterminate ? 100 : Math.max(0, Math.min(1, this.#progress)) * 100;
+    const fillAnim = indeterminate ? 'animation: status-indeterminate 1.5s ease-in-out infinite;' : '';
+    const tc = this.#tileCount;
+    const hasTileCount = tc && Number.isFinite(tc.done) && Number.isFinite(tc.total);
+    const tileText = hasTileCount ? `${tc.done} / ${tc.total}` : '';
+    const ariaLabel = this.#details ? `${this.#title} — ${this.#details}` : this.#title;
+
+    morph(this, `
+      <style>
+        .status-bar .status-row {
+          display: flex;
+          align-items: center;
+          gap: 0.4rem;
+          min-width: 0;
+          width: 100%;
+        }
+        .status-bar .status-icon-wrap {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          flex-shrink: 0;
+          outline: none;
+        }
+        .status-bar .status-icon {
+          font-size: 0.7em;
+          line-height: 1;
+        }
+        .status-bar .status-icon.idle    { color: var(--pico-muted-color, #888); }
+        .status-bar .status-icon.running { color: #3b82f6; animation: status-pulse 1.4s ease-in-out infinite; }
+        .status-bar .status-icon.success { color: #16a34a; }
+        .status-bar .status-icon.warning { color: #d97706; }
+        .status-bar .status-icon.error   { color: var(--pico-del-color, #c62828); }
+        @keyframes status-pulse {
+          0%, 100% { opacity: 0.55; }
+          50%      { opacity: 1; }
+        }
+        .status-bar .status-tooltip {
+          display: none;
+          position: absolute;
+          bottom: calc(100% + 0.45rem);
+          left: 0;
+          background: var(--pico-card-background-color, #1e1e2e);
+          color: var(--pico-color, #cdd6f4);
+          border: 1px solid var(--pico-muted-border-color);
+          border-radius: var(--pico-border-radius);
+          padding: 0.4rem 0.55rem;
+          font-size: 0.75rem;
+          line-height: 1.4;
+          white-space: pre-wrap;
+          width: max-content;
+          max-width: 22rem;
+          z-index: 100;
+          pointer-events: none;
+          box-shadow: 0 2px 8px rgba(0,0,0,.25);
+          mix-blend-mode: normal;
+        }
+        .status-bar .status-icon-wrap:hover .status-tooltip,
+        .status-bar .status-icon-wrap:focus-within .status-tooltip {
+          display: block;
+        }
+        .status-bar .status-text {
+          font-size: 0.85rem;
+          color: var(--pico-muted-color, #aaa);
+          margin-bottom: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          flex: 0 1 auto;
+          min-width: 0;
+        }
+        .status-bar .progress-track {
+          flex: 1 1 auto;
+          height: 6px;
+          background: var(--pico-muted-border-color, #333);
+          border-radius: 3px;
+          overflow: hidden;
+          min-width: 0;
+        }
+        .status-bar .progress-fill {
+          height: 100%;
+          background: var(--pico-primary, #4c8);
+          width: 0%;
+          transition: width 0.2s;
+        }
+        .status-bar .progress-count {
+          font-size: 0.72rem;
+          color: var(--pico-muted-color, #aaa);
+          font-variant-numeric: tabular-nums;
+          white-space: nowrap;
+          flex-shrink: 0;
+        }
+        @keyframes status-indeterminate {
+          0%   { width: 20%; margin-left: 0; }
+          50%  { width: 40%; margin-left: 30%; }
+          100% { width: 20%; margin-left: 80%; }
+        }
+      </style>
+
+      <div class="status-row">
+        <span class="status-icon-wrap" ${this.#details ? 'tabindex="0"' : ''} aria-label="${esc(ariaLabel)}">
+          <i class="fas fa-circle status-icon ${this.#state}" aria-hidden="true"></i>
+          ${this.#details ? `<span class="status-tooltip" role="tooltip">${esc(this.#details)}</span>` : ''}
+        </span>
+        <div class="status-text">${esc(this.#title)}</div>
+        ${showProgress ? `
+          <div class="progress-track" aria-hidden="true">
+            <div class="progress-fill" style="width:${fillWidth}%;${fillAnim}"></div>
+          </div>
+          ${hasTileCount ? `<span class="progress-count">${esc(tileText)}</span>` : ''}
+        ` : ''}
+      </div>
+    `);
+  }
+}
+
+customElements.define('status-bar', StatusBar);

components/view-mode-controls.js

@@ -0,0 +1,97 @@
+/**
+ * <view-mode-controls> — segmented icon-button radio for the canvas view mode.
+ *
+ * Renders one button per mode; the currently-selected mode is marked with
+ * `aria-pressed="true"`. Clicking a different button switches and emits
+ * `mode-change` { detail: { mode } }.
+ *
+ * Mode keys: 'fit-width' | 'fit-height' | 'one-to-one'.
+ */
+
+const VIEW_MODES = [
+  { key: 'fit-width',   label: 'Fit Width',   icon: 'fa-arrows-left-right' },
+  { key: 'fit-height',  label: 'Fit Height',  icon: 'fa-arrows-up-down' },
+  { key: 'one-to-one',  label: '1:1',         icon: 'fa-vector-square' },
+];
+
+class ViewModeControls extends HTMLElement {
+  #mode = 'fit-width';
+
+  connectedCallback() {
+    this.#render();
+    this.addEventListener('click', this.#onClick);
+  }
+
+  get mode() { return this.#mode; }
+  set mode(value) {
+    if (!VIEW_MODES.find(m => m.key === value)) return;
+    if (this.#mode === value) return;
+    this.#mode = value;
+    this.#render();
+  }
+
+  #onClick = (e) => {
+    const btn = e.target.closest('button[data-mode]');
+    if (!btn) return;
+    e.stopPropagation();
+    if (btn.dataset.mode === this.#mode) return;
+    this.#mode = btn.dataset.mode;
+    this.#render();
+    this.dispatchEvent(new CustomEvent('mode-change', { detail: { mode: this.#mode } }));
+  };
+
+  #render() {
+    const buttons = VIEW_MODES.map(m => `
+      <button type="button" class="secondary outline" data-mode="${m.key}"
+              aria-pressed="${m.key === this.#mode}"
+              title="${m.label}" aria-label="${m.label}">
+        <i class="fas ${m.icon}"></i>
+      </button>
+    `).join('');
+    this.innerHTML = `
+      <style>
+        view-mode-controls {
+          display: inline-flex;
+          vertical-align: middle;
+        }
+        view-mode-controls .vm-row {
+          display: inline-flex;
+          gap: 0;
+        }
+        view-mode-controls .vm-row > button {
+          border-radius: 0;
+        }
+        view-mode-controls .vm-row > button:first-child {
+          border-top-left-radius: var(--pico-border-radius);
+          border-bottom-left-radius: var(--pico-border-radius);
+        }
+        view-mode-controls .vm-row > button:last-child {
+          border-top-right-radius: var(--pico-border-radius);
+          border-bottom-right-radius: var(--pico-border-radius);
+        }
+        view-mode-controls .vm-row > button:not(:first-child) {
+          margin-left: -1px;
+        }
+        view-mode-controls button .fas {
+          margin-right: 0 !important;
+        }
+        /* Pressed state: disable the host toolbar's mix-blend-mode trick and
+           paint a solid filled background so the active mode is unambiguous
+           against the surrounding outline buttons. */
+        view-mode-controls button[aria-pressed="true"] {
+          mix-blend-mode: normal !important;
+          background: rgba(255, 255, 255, 0.22) !important;
+          opacity: 1 !important;
+          border-color: #fff !important;
+          color: #fff !important;
+          z-index: 1;
+        }
+      </style>
+      <div class="vm-row" role="radiogroup" aria-label="View mode">
+        ${buttons}
+      </div>
+    `;
+  }
+}
+
+customElements.define('view-mode-controls', ViewModeControls);

features/bg-removal/bg-removal-app.js

@@ -0,0 +1,564 @@
+/**
+ * <bg-removal-app> — orchestrates the background removal feature.
+ */
+
+import { morph } from 'lib/morph';
+import { canvasToBlobUrl, imageToBlobUrl } from 'lib/canvas';
+import { trackBackendEvents, friendlyBackend, realizedIsGpu } from 'lib/backend-events';
+import 'components/image-drop-zone';
+import 'components/status-bar';
+import 'components/compare-slider';
+import 'components/image-cropper';
+import 'components/view-mode-controls';
+import { BgRemovalEngine } from './bg-removal-engine.js';
+
+/**
+ * Draw a checkerboard pattern + transparent image onto a canvas, return as blob URL.
+ */
+function checkerboardComposite(transparentCanvas) {
+  const w = transparentCanvas.width;
+  const h = transparentCanvas.height;
+  const c = document.createElement('canvas');
+  c.width = w;
+  c.height = h;
+  const ctx = c.getContext('2d');
+
+  const size = 16;
+  for (let y = 0; y < h; y += size) {
+    for (let x = 0; x < w; x += size) {
+      ctx.fillStyle = ((x / size + y / size) & 1) ? '#ccc' : '#fff';
+      ctx.fillRect(x, y, size, size);
+    }
+  }
+
+  ctx.drawImage(transparentCanvas, 0, 0);
+  return canvasToBlobUrl(c);
+}
+
+class BgRemovalApp extends HTMLElement {
+  static BRIA_MODEL_KEY = 'rmbg-1.4';
+
+  #loadedImage = null;
+  #running = false;
+  #engine = new BgRemovalEngine();
+  #abortController = null;
+  #resultBlobUrl = null;
+  #checkerBlobUrl = null;
+  #beforeBlobUrl = null;
+  #transparentBlobUrl = null;
+  #viewState = { mode: 'fit-width' };
+  static #VIEW_MODES = ['fit-width', 'fit-height', 'one-to-one'];
+
+  connectedCallback() {
+    this.#render();
+    this.#setupEvents();
+    this.#restoreViewState();
+  }
+
+  #q(sel) { return this.querySelector(sel); }
+
+  #cleanup() {
+    if (this.#resultBlobUrl) { URL.revokeObjectURL(this.#resultBlobUrl); this.#resultBlobUrl = null; }
+    if (this.#checkerBlobUrl) { URL.revokeObjectURL(this.#checkerBlobUrl); this.#checkerBlobUrl = null; }
+    if (this.#beforeBlobUrl) { URL.revokeObjectURL(this.#beforeBlobUrl); this.#beforeBlobUrl = null; }
+    if (this.#transparentBlobUrl) { URL.revokeObjectURL(this.#transparentBlobUrl); this.#transparentBlobUrl = null; }
+  }
+
+  #applyViewState() {
+    const mode = this.#viewState.mode;
+    const isFitHeight = mode === 'fit-height';
+    const isOneToOne = mode === 'one-to-one';
+    for (const sel of ['image-cropper', 'compare-slider']) {
+      const el = this.#q(sel);
+      if (!el) continue;
+      el.classList.toggle('expanded', isFitHeight);
+      el.classList.toggle('native-size', isOneToOne);
+    }
+  }
+
+  #persistViewState() {
+    localStorage.setItem('bgremoval_view_mode', this.#viewState.mode);
+  }
+
+  #setMode(mode) {
+    if (!BgRemovalApp.#VIEW_MODES.includes(mode)) return;
+    if (this.#viewState.mode === mode) return;
+    this.#viewState.mode = mode;
+    const vmc = this.#q('view-mode-controls');
+    if (vmc) vmc.mode = mode;
+    this.#applyViewState();
+    this.#persistViewState();
+  }
+
+  #defaultModeForImage(image) {
+    const vw = window.innerWidth || 1;
+    const vh = window.innerHeight || 1;
+    const imgRatio = image.width / image.height;
+    const vpRatio = vw / vh;
+    return imgRatio >= vpRatio ? 'fit-width' : 'fit-height';
+  }
+
+  #restoreViewState() {
+    const savedMode = localStorage.getItem('bgremoval_view_mode');
+    if (BgRemovalApp.#VIEW_MODES.includes(savedMode)) {
+      this.#viewState.mode = savedMode;
+    }
+    this.#q('view-mode-controls').mode = this.#viewState.mode;
+    this.#applyViewState();
+  }
+
+  #getVisibleCanvasElement() {
+    for (const sel of ['compare-slider', 'image-cropper', 'image-drop-zone']) {
+      const el = this.#q(sel);
+      if (el && el.offsetParent !== null) return el;
+    }
+    return null;
+  }
+
+  #snapCenterVisibleCanvas() {
+    const el = this.#getVisibleCanvasElement();
+    if (!el) return;
+    requestAnimationFrame(() => {
+      const rect = el.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const fullyVisible = rect.top >= 0 && rect.bottom <= vh;
+      if (fullyVisible) return;
+      el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    });
+  }
+
+  #setupEvents() {
+    const backendEl   = this.#q('.backend-select');
+    const removeBtn   = this.#q('.remove-btn');
+    const stopBtn     = this.#q('.stop-btn');
+    const startOverBtn = this.#q('.startover-btn');
+    const backToCropBtn = this.#q('.back-to-crop-btn');
+    const clearCropBtn = this.#q('.clear-crop-btn');
+    const viewModeControls = this.#q('view-mode-controls');
+    const openInTabBtn = this.#q('.open-in-tab-btn');
+    const downloadBtn = this.#q('.download-btn');
+    const toolbarLeft = this.#q('.canvas-toolbar-left');
+    const toolbarRight = this.#q('.canvas-toolbar-right');
+
+    const statusBar     = this.#q('status-bar');
+    const dropZone      = this.#q('image-drop-zone');
+    const cropper       = this.#q('image-cropper');
+    const compareSlider = this.#q('compare-slider');
+
+    const showCompareControls = () => {
+      backToCropBtn.style.display = 'inline-block';
+      toolbarRight.hidden = false;
+    };
+    const hideCompareControls = () => {
+      backToCropBtn.style.display = 'none';
+      toolbarRight.hidden = true;
+    };
+
+    statusBar.set({ title: '', state: 'idle', details: '', progress: -1, tileCount: null });
+
+    const idleDetails = (img, crop) => crop
+      ? `${img.width}\u00d7${img.height}, cropped to ${crop.w}\u00d7${crop.h}. Click Remove Background.`
+      : `${img.width}\u00d7${img.height}. Drag to crop (optional), then click Remove Background.`;
+
+    const resetToStart = () => {
+      this.#loadedImage = null;
+      this.#running = false;
+      this.#abortController = null;
+      this.#cleanup();
+      removeBtn.disabled = true;
+      stopBtn.style.display = 'none';
+      startOverBtn.style.display = 'none';
+      clearCropBtn.style.display = 'none';
+      hideCompareControls();
+      toolbarLeft.hidden = true;
+      cropper.hide();
+      compareSlider.hide();
+      dropZone.show();
+      statusBar.set({ title: '', state: 'idle', details: '', progress: -1, tileCount: null });
+    };
+
+    const showReady = () => {
+      removeBtn.disabled = false;
+      startOverBtn.style.display = 'inline-block';
+      hideCompareControls();
+      toolbarLeft.hidden = false;
+      compareSlider.hide();
+      dropZone.hide();
+      cropper.show(this.#loadedImage);
+      const existingCrop = cropper.crop;
+      clearCropBtn.style.display = existingCrop ? 'inline-block' : 'none';
+      statusBar.set({
+        title: existingCrop ? 'Crop selected' : 'Image loaded',
+        state: 'idle',
+        details: idleDetails(this.#loadedImage, existingCrop),
+        progress: -1,
+        tileCount: null,
+      });
+    };
+
+    dropZone.addEventListener('image-loaded', (e) => {
+      if (this.#running) {
+        this.#abortController?.abort();
+        this.#running = false;
+        this.#abortController = null;
+        stopBtn.style.display = 'none';
+      }
+      this.#loadedImage = e.detail.image;
+      this.#setMode(this.#defaultModeForImage(this.#loadedImage));
+      showReady();
+    });
+
+    cropper.addEventListener('crop-changed', (e) => {
+      const crop = e.detail.crop;
+      clearCropBtn.style.display = crop ? 'inline-block' : 'none';
+      statusBar.set({
+        title: crop ? 'Crop selected' : 'Image loaded',
+        state: 'idle',
+        details: idleDetails(this.#loadedImage, crop),
+      });
+    });
+
+    clearCropBtn.addEventListener('click', () => {
+      cropper.clearCrop();
+    });
+
+    backToCropBtn.addEventListener('click', () => {
+      if (this.#running || !this.#loadedImage) return;
+      showReady();
+    });
+
+    viewModeControls.addEventListener('mode-change', (e) => {
+      this.#viewState.mode = e.detail.mode;
+      this.#applyViewState();
+      this.#persistViewState();
+      this.#snapCenterVisibleCanvas();
+    });
+
+    openInTabBtn.addEventListener('click', () => {
+      compareSlider.openInTab();
+    });
+    downloadBtn.addEventListener('click', () => {
+      compareSlider.download();
+    });
+
+    removeBtn.addEventListener('click', async () => {
+      if (this.#running || !this.#loadedImage) return;
+      this.#running = true;
+      this.#cleanup();
+      removeBtn.disabled = true;
+      stopBtn.style.display = 'inline-block';
+      startOverBtn.style.display = 'none';
+      clearCropBtn.style.display = 'none';
+      hideCompareControls();
+      compareSlider.hide();
+
+      this.#abortController = new AbortController();
+      const { signal } = this.#abortController;
+      const inputImage = cropper.extractImage();
+      cropper.style.display = 'none';
+
+      // runState is monotonic: 'running' \u2192 'warning' (locked once warned).
+      let runState = 'running';
+      const tracker = trackBackendEvents((ev) => {
+        if (ev.kind === 'attempt') {
+          statusBar.set({ title: `Loading on ${friendlyBackend(ev.backend)}`, state: runState });
+        } else if (ev.kind === 'success') {
+          statusBar.set({ title: `Running on ${friendlyBackend(ev.backend)}`, state: runState });
+        } else if (ev.kind === 'fallback') {
+          runState = 'warning';
+          statusBar.set({ title: `Fallback from ${friendlyBackend(ev.backend)}`, state: runState });
+        } else if (ev.kind === 'skipped') {
+          runState = 'warning';
+          statusBar.set({ title: `Skipping ${friendlyBackend(ev.backend)}`, state: runState });
+        }
+      });
+
+      try {
+        statusBar.set({
+          title: 'Loading model',
+          state: 'running',
+          details: '',
+          progress: 0,
+          tileCount: null,
+        });
+        await this.#engine.loadModel(BgRemovalApp.BRIA_MODEL_KEY, backendEl.value, (frac, msg) => {
+          statusBar.set({ progress: frac, details: msg });
+        });
+
+        statusBar.set({
+          title: 'Removing background',
+          state: runState,
+          details: 'Running inference\u2026',
+          progress: -2,
+        });
+
+        const resultCanvas = await this.#engine.removeBackground(inputImage, signal);
+
+        const w = inputImage.width;
+        const h = inputImage.height;
+        const summary = tracker.summary();
+        const userWantsGpu = backendEl.value === 'gpu';
+        const ranOnCpuDespiteIntent = userWantsGpu && summary.activeBackend && !realizedIsGpu(summary.activeBackend);
+        const finalState = (summary.hadFallback || summary.hadSkip || ranOnCpuDespiteIntent) ? 'warning' : 'success';
+        const via = summary.activeBackend ? ` via ${friendlyBackend(summary.activeBackend)}` : '';
+        const detailsLines = [`${w}\u00d7${h}${via}`];
+        if (ranOnCpuDespiteIntent && !summary.hadFallback) {
+          detailsLines.push(`Requested GPU but running on ${friendlyBackend(summary.activeBackend)} (prior fallback this session \u2014 reload to retry GPU).`);
+        }
+        if (summary.lines.length) detailsLines.push(...summary.lines);
+        statusBar.set({
+          title: 'Done',
+          state: finalState,
+          details: detailsLines.join('\n'),
+          progress: -1,
+          tileCount: null,
+        });
+
+        this.#transparentBlobUrl = await canvasToBlobUrl(resultCanvas);
+        this.#checkerBlobUrl = await checkerboardComposite(resultCanvas);
+        this.#beforeBlobUrl = await imageToBlobUrl(inputImage);
+
+        await compareSlider.show(this.#beforeBlobUrl, this.#checkerBlobUrl, {
+          downloadSrc: this.#transparentBlobUrl,
+          downloadName: 'bg_removed.png',
+        });
+        this.#applyViewState();
+        showCompareControls();
+
+      } catch (e) {
+        if (e.name === 'AbortError') {
+          statusBar.set({
+            title: 'Cancelled',
+            state: 'idle',
+            details: 'You stopped this run.',
+            progress: -1,
+            tileCount: null,
+          });
+        } else {
+          console.error(e);
+          statusBar.set({
+            title: 'Error',
+            state: 'error',
+            details: e.message || String(e),
+            progress: -1,
+            tileCount: null,
+          });
+        }
+      } finally {
+        tracker.stop();
+      }
+
+      this.#running = false;
+      this.#abortController = null;
+      stopBtn.style.display = 'none';
+      startOverBtn.style.display = 'inline-block';
+      removeBtn.disabled = false;
+    });
+
+    stopBtn.addEventListener('click', () => {
+      this.#abortController?.abort();
+    });
+
+    startOverBtn.addEventListener('click', () => {
+      if (this.#running) this.#abortController?.abort();
+      resetToStart();
+    });
+
+  }
+
+  #render() {
+    morph(this, `
+      <style>
+        bg-removal-app .controls {
+          display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem;
+          align-items: center; margin-bottom: 1rem;
+        }
+        bg-removal-app .controls label {
+          display: inline-flex; align-items: center; gap: 0.35rem;
+          font-size: 0.85rem; margin-bottom: 0; white-space: nowrap;
+        }
+        bg-removal-app .controls select {
+          margin-bottom: 0; padding: 0.3rem 0.5rem;
+          font-size: 0.85rem; width: auto;
+        }
+        bg-removal-app .canvas-stack {
+          position: relative;
+          background: rgba(0, 0, 0, 0.4);
+          border-radius: var(--pico-border-radius);
+          padding: 0.5rem;
+        }
+        bg-removal-app .canvas-toolbar-rail {
+          position: sticky;
+          top: 0.75rem;
+          height: 0;
+          z-index: 10;
+          pointer-events: none;
+        }
+        bg-removal-app .canvas-toolbar {
+          position: absolute;
+          top: 0;
+          display: inline-flex;
+          gap: 0.25rem;
+          align-items: center;
+          padding: 0.25rem 0.3rem;
+          background: color-mix(in oklab, var(--pico-card-background-color, #1e1e2e) 32%, transparent);
+          border: 1px solid color-mix(in oklab, var(--pico-muted-border-color) 45%, transparent);
+          border-radius: var(--pico-border-radius);
+          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
+          backdrop-filter: blur(10px) saturate(1.1);
+          -webkit-backdrop-filter: blur(10px) saturate(1.1);
+          pointer-events: auto;
+          max-width: calc(100% - 1.5rem);
+        }
+        bg-removal-app .canvas-toolbar-left {
+          left: 0.75rem;
+        }
+        bg-removal-app .canvas-toolbar-right {
+          right: 0.75rem;
+        }
+        bg-removal-app .canvas-toolbar[hidden] {
+          display: none;
+        }
+        bg-removal-app .canvas-toolbar-stack-left {
+          position: absolute;
+          top: 0;
+          left: 0.75rem;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+          max-width: calc(100% - 1.5rem);
+          pointer-events: none;
+        }
+        bg-removal-app .canvas-toolbar-stack-left > * {
+          pointer-events: auto;
+        }
+        bg-removal-app .canvas-toolbar-stack-left > .canvas-toolbar {
+          position: static;
+          left: auto;
+          top: auto;
+          max-width: 100%;
+        }
+        bg-removal-app .canvas-toolbar button {
+          margin-bottom: 0;
+          padding: 0.25rem 0.5rem;
+          font-size: 0.72rem;
+          line-height: 1.2;
+          width: auto;
+          white-space: nowrap;
+        }
+        bg-removal-app .canvas-toolbar button.secondary,
+        bg-removal-app .canvas-toolbar button.outline {
+          opacity: 0.78;
+          transition: opacity 0.15s ease;
+          background: transparent;
+          border-color: currentColor;
+          color: #fff;
+          mix-blend-mode: difference;
+        }
+        bg-removal-app .canvas-toolbar button.secondary:hover,
+        bg-removal-app .canvas-toolbar button.outline:hover,
+        bg-removal-app .canvas-toolbar button.secondary:focus-visible,
+        bg-removal-app .canvas-toolbar button.outline:focus-visible {
+          opacity: 1;
+          background: transparent;
+          border-color: currentColor;
+          color: #fff;
+        }
+        bg-removal-app .canvas-toolbar button .fas {
+          font-size: 0.78em;
+          margin-right: 0.15rem;
+        }
+        bg-removal-app .canvas-toolbar button .btn-label {
+          display: inline;
+        }
+        @media (max-width: 768px) {
+          bg-removal-app .canvas-toolbar button .btn-label {
+            display: none;
+          }
+          bg-removal-app .canvas-toolbar button .fas {
+            margin-right: 0;
+          }
+        }
+        bg-removal-app .canvas-toolbar status-bar {
+          display: inline-flex;
+          flex-direction: column;
+          align-items: stretch;
+          justify-content: center;
+          gap: 0.15rem;
+          margin-left: 0.3rem;
+          min-width: 0;
+          max-width: 20rem;
+        }
+        bg-removal-app .canvas-toolbar status-bar .status-text {
+          font-size: 0.68rem;
+          line-height: 1.25;
+          min-height: 0;
+          margin-bottom: 0;
+          color: #fff;
+          mix-blend-mode: difference;
+        }
+        bg-removal-app .canvas-toolbar status-bar .progress-track {
+          width: 100%;
+          max-width: 180px;
+          height: 3px;
+          margin-bottom: 0;
+          mix-blend-mode: difference;
+        }
+      </style>
+
+      <h2>
+        <i class="fas fa-eraser"></i> Background Removal
+        <span style="font-size:0.7rem; color:var(--pico-muted-color)">(in-browser, ONNX Runtime)</span>
+      </h2>
+
+      <div class="controls">
+        <label>Backend:
+          <select class="backend-select">
+            <option value="gpu">GPU</option>
+            <option value="cpu">CPU</option>
+          </select>
+        </label>
+      </div>
+
+      <div class="canvas-stack">
+        <div class="canvas-toolbar-rail" aria-hidden="true">
+          <div class="canvas-toolbar-stack-left">
+            <div class="canvas-toolbar canvas-toolbar-left" hidden>
+              <button class="back-to-crop-btn secondary outline" style="display:none" type="button" title="Back to crop / change selection">
+                <i class="fas fa-arrow-left"></i><i class="fas fa-crop-simple"></i> <span class="btn-label">Edit Crop</span>
+              </button>
+              <button class="remove-btn" disabled title="Remove background">
+                <i class="fas fa-eraser"></i> <span class="btn-label">Remove Background</span>
+              </button>
+              <button class="stop-btn secondary" style="display:none" title="Stop background removal">
+                <i class="fas fa-stop"></i> <span class="btn-label">Stop</span>
+              </button>
+              <view-mode-controls></view-mode-controls>
+              <button class="clear-crop-btn secondary outline" style="display:none" type="button" title="Clear the selected crop region">
+                <i class="fas fa-eraser"></i> <span class="btn-label">Clear Selection</span>
+              </button>
+              <button class="startover-btn secondary outline" style="display:none" title="Clear and start over with a new image">
+                <i class="fas fa-xmark"></i> <span class="btn-label">Clear</span>
+              </button>
+              <status-bar></status-bar>
+            </div>
+          </div>
+          <div class="canvas-toolbar canvas-toolbar-right" hidden>
+            <button class="open-in-tab-btn secondary outline" type="button" title="Open the result image in a new tab">
+              <i class="fas fa-up-right-from-square"></i> <span class="btn-label">Open in Tab</span>
+            </button>
+            <button class="download-btn secondary outline" type="button" title="Download the transparent PNG">
+              <i class="fas fa-download"></i> <span class="btn-label">Download</span>
+            </button>
+          </div>
+        </div>
+        <image-drop-zone></image-drop-zone>
+        <image-cropper></image-cropper>
+        <compare-slider after-label="BG Removed"></compare-slider>
+      </div>
+    `);
+  }
+}
+
+customElements.define('bg-removal-app', BgRemovalApp);

features/bg-removal/bg-removal-engine.js

@@ -0,0 +1,230 @@
+/**
+ * BgRemovalEngine — pure inference logic, zero DOM dependency.
+ * Downloads an ONNX segmentation model, creates a session,
+ * and runs background removal on an image.
+ */
+
+import { fetchWithProgress } from 'lib/fetch-progress';
+import { dispatchBackendEvent } from 'lib/backend-events';
+import { loadSession } from 'lib/backend';
+
+const MODELS = {
+  'isnet': {
+    url: 'https://huggingface.co/onnx-community/ISNet-ONNX/resolve/main/onnx/model_quantized.onnx',
+    inputSize: 1024,
+    label: 'IS-Net (General Use, ~42 MB)',
+    // preprocessor_config: do_rescale=false, mean=[128,128,128], std=[256,256,256]
+    preprocess(pixel) { return (pixel - 128) / 256; },
+  },
+  'rmbg-1.4': {
+    url: 'https://huggingface.co/briaai/RMBG-1.4/resolve/main/onnx/model_quantized.onnx',
+    inputSize: 1024,
+    label: 'BRIA RMBG-1.4 (High Quality, ~44 MB)',
+    // preprocessor_config: do_rescale=true (1/255), mean=[0.5,0.5,0.5], std=[1,1,1]
+    preprocess(pixel) { return pixel / 255 - 0.5; },
+  },
+};
+
+export { MODELS };
+
+export class BgRemovalEngine {
+  #session = null;
+  #modelBuffer = null;
+  #currentModelKey = null;
+  #intent = null;
+  // Set by loadSession; kept current by #backendListener so a runtime EP
+  // fallback (worker drops from CoreML to CPU between calls) doesn't leave
+  // a stale label that the loadModel early-return re-announces later.
+  #realizedBackend = null;
+  #backendListener = null;
+
+  get isLoaded() { return this.#session !== null; }
+  get currentModel() { return this.#currentModelKey; }
+  get realizedBackend() { return this.#realizedBackend; }
+  get intent() { return this.#intent; }
+
+  #trackRealizedBackend() {
+    if (this.#backendListener) return;
+    this.#backendListener = (e) => {
+      const d = e?.detail;
+      if (d && d.kind === 'success' && typeof d.backend === 'string') {
+        this.#realizedBackend = d.backend;
+      }
+    };
+    document.addEventListener('aitools:backend-event', this.#backendListener);
+  }
+  #untrackRealizedBackend() {
+    if (!this.#backendListener) return;
+    document.removeEventListener('aitools:backend-event', this.#backendListener);
+    this.#backendListener = null;
+  }
+
+  async loadModel(modelKey, intent = 'cpu', onProgress) {
+    if (onProgress != null && typeof onProgress !== 'function') {
+      console.warn('[BgRemovalEngine] Ignoring non-function onProgress callback.', {
+        type: typeof onProgress,
+        value: onProgress,
+        modelKey,
+        intent,
+      });
+    }
+    intent = normalizeIntent(intent);
+    const report = typeof onProgress === 'function' ? onProgress : null;
+    if (this.#session && this.#currentModelKey === modelKey && this.#intent === intent) {
+      // Same model + same intent \u2014 re-announce so per-run tracker captures
+      // the active backend label.
+      if (this.#realizedBackend) {
+        dispatchBackendEvent({ kind: 'success', backend: this.#realizedBackend });
+      }
+      return;
+    }
+
+    const cfg = MODELS[modelKey];
+    if (!cfg) throw new Error(`Unknown model: ${modelKey}`);
+
+    // Release old session if switching models or intent.
+    if (this.#session) {
+      this.#session.release();
+      this.#session = null;
+    }
+    if (this.#currentModelKey !== modelKey) {
+      this.#modelBuffer = null;
+    }
+
+    if (!this.#modelBuffer) {
+      this.#modelBuffer = await fetchWithProgress(cfg.url, report);
+    }
+
+    report?.(1, 'Loading model into runtime\u2026');
+
+    const { session, realizedBackend } = await loadSession(this.#modelBuffer, intent);
+    this.#session = session;
+    this.#intent = intent;
+    this.#realizedBackend = realizedBackend;
+    this.#currentModelKey = modelKey;
+    this.#trackRealizedBackend();
+    report?.(1, 'Model loaded.');
+  }
+
+  async removeBackground(image, signal) {
+    if (!this.#session) throw new Error('Model not loaded — call loadModel() first');
+    if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError');
+
+    const cfg = MODELS[this.#currentModelKey];
+    const inputSize = cfg.inputSize;
+    const origW = image.width;
+    const origH = image.height;
+
+    // --- Resize input to model dimensions ---
+    const tmpCanvas = document.createElement('canvas');
+    tmpCanvas.width = inputSize;
+    tmpCanvas.height = inputSize;
+    const tmpCtx = tmpCanvas.getContext('2d');
+    tmpCtx.drawImage(image, 0, 0, inputSize, inputSize);
+    const imageData = tmpCtx.getImageData(0, 0, inputSize, inputSize);
+
+    // --- Convert to CHW Float32 with model-specific normalization ---
+    const planeSize = inputSize * inputSize;
+    const float32 = new Float32Array(3 * planeSize);
+    const px = imageData.data;
+    const preprocess = cfg.preprocess;
+
+    for (let i = 0; i < planeSize; i++) {
+      const si = i * 4;
+      float32[i]                 = preprocess(px[si]);
+      float32[planeSize + i]     = preprocess(px[si + 1]);
+      float32[2 * planeSize + i] = preprocess(px[si + 2]);
+    }
+
+    // Free temp canvas memory
+    tmpCanvas.width = 0;
+    tmpCanvas.height = 0;
+
+    if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError');
+
+    // --- Run inference ---
+    const tensor = new ort.Tensor('float32', float32, [1, 3, inputSize, inputSize]);
+    const inputName = this.#session.inputNames[0];
+    const outputName = this.#session.outputNames[0];
+
+    const results = await this.#session.run({ [inputName]: tensor });
+    const rawMask = results[outputName].data;
+
+    tensor.dispose();
+
+    // --- Sigmoid + clamp to 0-1 ---
+    const maskSize = inputSize * inputSize;
+    const mask = new Float32Array(maskSize);
+    for (let i = 0; i < maskSize; i++) {
+      const v = rawMask[i];
+      // Apply sigmoid if value is outside 0-1 (raw logits)
+      mask[i] = (v < 0 || v > 1) ? 1 / (1 + Math.exp(-v)) : v;
+    }
+
+    results[outputName].dispose();
+
+    // --- Write mask to canvas, resize to original dimensions ---
+    const maskCanvas = document.createElement('canvas');
+    maskCanvas.width = inputSize;
+    maskCanvas.height = inputSize;
+    const maskCtx = maskCanvas.getContext('2d');
+    const maskImgData = maskCtx.createImageData(inputSize, inputSize);
+    for (let i = 0; i < maskSize; i++) {
+      const v = Math.round(mask[i] * 255);
+      maskImgData.data[i * 4]     = v;
+      maskImgData.data[i * 4 + 1] = v;
+      maskImgData.data[i * 4 + 2] = v;
+      maskImgData.data[i * 4 + 3] = 255;
+    }
+    maskCtx.putImageData(maskImgData, 0, 0);
+
+    // Resize mask to original image dimensions (bilinear via drawImage)
+    const fullMaskCanvas = document.createElement('canvas');
+    fullMaskCanvas.width = origW;
+    fullMaskCanvas.height = origH;
+    const fullMaskCtx = fullMaskCanvas.getContext('2d');
+    fullMaskCtx.drawImage(maskCanvas, 0, 0, origW, origH);
+    const fullMaskData = fullMaskCtx.getImageData(0, 0, origW, origH);
+
+    // Free small mask canvas
+    maskCanvas.width = 0;
+    maskCanvas.height = 0;
+
+    // --- Apply mask as alpha channel to original image ---
+    const resultCanvas = document.createElement('canvas');
+    resultCanvas.width = origW;
+    resultCanvas.height = origH;
+    const resultCtx = resultCanvas.getContext('2d');
+    resultCtx.drawImage(image, 0, 0);
+    const resultData = resultCtx.getImageData(0, 0, origW, origH);
+
+    for (let i = 0; i < origW * origH; i++) {
+      resultData.data[i * 4 + 3] = fullMaskData.data[i * 4]; // R channel = mask
+    }
+    resultCtx.putImageData(resultData, 0, 0);
+
+    // Free full mask canvas
+    fullMaskCanvas.width = 0;
+    fullMaskCanvas.height = 0;
+
+    return resultCanvas;
+  }
+
+  release() {
+    this.#untrackRealizedBackend();
+    if (this.#session) {
+      this.#session.release();
+      this.#session = null;
+    }
+    this.#modelBuffer = null;
+    this.#currentModelKey = null;
+    this.#intent = null;
+    this.#realizedBackend = null;
+  }
+}
+
+function normalizeIntent(value) {
+  if (value === 'webgpu' || value === 'gpu') return 'gpu';
+  if (value === 'wasm'   || value === 'cpu') return 'cpu';
+  return 'cpu';
+}

features/upscaler/custom-models/custom-model-inspector.js

@@ -0,0 +1,336 @@
+import { readMetaEntry, isFp16InputType } from 'lib/onnx-meta';
+
+function normalizeDims(dims) {
+  if (!Array.isArray(dims)) return [];
+  return dims.map((d) => (typeof d === 'number' ? d : Number.NaN));
+}
+
+/**
+ * The ValueMetadata shape array is `shape` in ORT-Web 1.20+; older
+ * versions called the same field `dimensions`. Read either and let the
+ * caller handle the array of (number | string) entries.
+ */
+function readMetaShape(meta) {
+  return meta?.shape ?? meta?.dimensions ?? null;
+}
+
+function detectLayout(dims) {
+  if (dims.length !== 4) return 'unknown';
+  const cAt1 = dims[1];
+  const cAt3 = dims[3];
+  if (cAt1 === 3 || cAt1 === 1) return 'nchw';
+  if (cAt3 === 3 || cAt3 === 1) return 'nhwc';
+  return 'unknown';
+}
+
+function inferScaleFromStaticDims(inDims, outDims, layout) {
+  if (inDims.length !== 4 || outDims.length !== 4) return null;
+  let inH, inW, outH, outW;
+  if (layout === 'nhwc') {
+    inH = inDims[1];
+    inW = inDims[2];
+    outH = outDims[1];
+    outW = outDims[2];
+  } else {
+    inH = inDims[2];
+    inW = inDims[3];
+    outH = outDims[2];
+    outW = outDims[3];
+  }
+  if (![inH, inW, outH, outW].every(Number.isFinite)) return null;
+  if (inH <= 0 || inW <= 0) return null;
+  const sx = outW / inW;
+  const sy = outH / inH;
+  if (!Number.isFinite(sx) || !Number.isFinite(sy) || sx !== sy) return null;
+  if (sx < 1 || sx > 16) return null;
+  return Math.round(sx);
+}
+
+function rangeFromInputType(inputType) {
+  if (typeof inputType !== 'string') return 1;
+  if (inputType.includes('uint8') || inputType.includes('int8')) return 255;
+  return 1;
+}
+
+function createProbeTensor(ort, inputType, layout, size, range) {
+  const dims = layout === 'nhwc' ? [1, size, size, 3] : [1, 3, size, size];
+  const count = dims.reduce((acc, v) => acc * v, 1);
+  const type = String(inputType || 'float32').toLowerCase();
+  if (type.includes('uint8')) {
+    const data = new Uint8Array(count);
+    data.fill(range === 255 ? 128 : 1);
+    return new ort.Tensor('uint8', data, dims);
+  }
+  if (type.includes('int8')) {
+    const data = new Int8Array(count);
+    data.fill(0);
+    return new ort.Tensor('int8', data, dims);
+  }
+  if (type.includes('float16')) {
+    const data = new Uint16Array(count);
+    return new ort.Tensor('float16', data, dims);
+  }
+  const data = new Float32Array(count);
+  data.fill(range === 255 ? 128 : 0.5);
+  return new ort.Tensor('float32', data, dims);
+}
+
+function getPrimaryOutput(results, outputName) {
+  if (!results || typeof results !== 'object') return null;
+  if (outputName && results[outputName]) return results[outputName];
+  const first = Object.values(results)[0];
+  return first || null;
+}
+
+function inferScaleFromProbeOutput(layout, inputSize, outDims) {
+  if (!Array.isArray(outDims) || outDims.length !== 4) return null;
+  const dims = normalizeDims(outDims);
+  const outH = layout === 'nhwc' ? dims[1] : dims[2];
+  const outW = layout === 'nhwc' ? dims[2] : dims[3];
+  if (![outH, outW].every(Number.isFinite) || inputSize <= 0) return null;
+  const sx = outW / inputSize;
+  const sy = outH / inputSize;
+  if (!Number.isFinite(sx) || !Number.isFinite(sy) || sx !== sy) return null;
+  if (sx < 1 || sx > 16) return null;
+  return Math.round(sx);
+}
+
+function inferMultipleFromReshapeError(rawError) {
+  const raw = String(rawError || '');
+  const match = raw.match(/requested shape:\{([^}]*)\}/i);
+  if (!match) return null;
+  const requested = match[1]
+    .split(',')
+    .map((v) => parseInt(v.trim(), 10))
+    .filter(Number.isFinite);
+  const pow2 = requested.filter((d) => d > 1 && d <= 256 && (d & (d - 1)) === 0);
+  if (!pow2.length) return null;
+  return Math.max(...pow2);
+}
+
+/**
+ * Detect a hard upper bound on input size by probing at increasing sizes.
+ * Some ONNX exports (notably PyTorch traces of models with shape-dependent
+ * conditionals — e.g. DAT-style window attention) bake in window counts as
+ * Constants and only accept inputs near the trace size. The auto-detect
+ * sweet-spot probe at 64 alone can't catch this, so we sweep a few common
+ * tile sizes upward and report the largest size that still runs.
+ *
+ * Returns `null` if the model worked at every probed size (i.e. no upper
+ * bound was found within the tested range).
+ */
+async function probeMaxInputSize(session, ort, baseProbeArgs, knownWorkingSize, report) {
+  const candidates = [128, 256];
+  let lastWorking = knownWorkingSize;
+  let foundUpperBound = false;
+  for (const size of candidates) {
+    if (size <= lastWorking) continue;
+    report?.(`testing maximum tile size at ${size}\u00d7${size}…`);
+    const probe = await runProbe(session, ort, { ...baseProbeArgs, size });
+    if (probe.ok) {
+      lastWorking = size;
+    } else {
+      foundUpperBound = true;
+      break;
+    }
+  }
+  return foundUpperBound ? lastWorking : null;
+}
+
+async function runProbe(session, ort, { inputName, outputName, inputType, layout, size, range }) {
+  const inputTensor = createProbeTensor(ort, inputType, layout, size, range);
+  try {
+    const results = await session.run({ [inputName]: inputTensor });
+    const output = getPrimaryOutput(results, outputName);
+    const outDims = output?.dims || [];
+    for (const tensor of Object.values(results)) {
+      try { tensor?.dispose?.(); } catch {}
+    }
+    return { ok: true, outDims };
+  } catch (error) {
+    return { ok: false, error };
+  } finally {
+    try { inputTensor.dispose?.(); } catch {}
+  }
+}
+
+export class CustomModelInspector {
+  async inspectFile(file, { onProgress } = {}) {
+    if (!(file instanceof File)) {
+      throw new Error('Expected an ONNX file.');
+    }
+    const report = typeof onProgress === 'function' ? onProgress : null;
+    const ort = globalThis.ort;
+    if (!ort?.InferenceSession) {
+      return {
+        scale: 4,
+        range: 1,
+        layout: 'nchw',
+        multipleOf: 1,
+        maxTileSize: null,
+        inputType: 'float32',
+        precision: 'fp32',
+        scaleSource: 'default',
+        multipleOfSource: 'default',
+        notes: ['ONNX Runtime not loaded yet; using defaults (4x, range 1).'],
+      };
+    }
+
+    report?.('reading ONNX metadata and loading session…');
+    const bytes = await file.arrayBuffer();
+    // Probe on WebGPU first when available — fp16 models will only run there,
+    // and fp32 models work fine on either EP, so WebGPU is the right default.
+    // Fall back to WASM when WebGPU is unavailable or session creation fails.
+    const hasWebGpu = !!(navigator.gpu && ort.env?.webgpu);
+    let session = null;
+    let probeBackend = null;
+    if (hasWebGpu) {
+      try {
+        report?.('loading session on WebGPU…');
+        session = await ort.InferenceSession.create(bytes, {
+          executionProviders: [{ name: 'webgpu', preferredLayout: 'NCHW' }],
+          graphOptimizationLevel: 'all',
+        });
+        probeBackend = 'webgpu';
+      } catch (err) {
+        console.warn('[CustomModelInspector] WebGPU probe session failed, falling back to WASM:', err);
+      }
+    }
+    if (!session) {
+      report?.('loading session on CPU/WASM…');
+      session = await ort.InferenceSession.create(bytes, {
+        executionProviders: ['wasm'],
+        graphOptimizationLevel: 'all',
+      });
+      probeBackend = 'wasm';
+    }
+    try {
+      const inputName = session.inputNames?.[0];
+      const outputName = session.outputNames?.[0];
+      if (!inputName) {
+        return {
+          scale: 4,
+          range: 1,
+          layout: 'nchw',
+          multipleOf: 1,
+          maxTileSize: null,
+          inputType: 'float32',
+          precision: 'fp32',
+          scaleSource: 'default',
+          multipleOfSource: 'default',
+          notes: ['Model has no detectable input tensor; using defaults.'],
+        };
+      }
+      const inMeta = readMetaEntry(session.inputMetadata, inputName, 0);
+      const outMeta = readMetaEntry(session.outputMetadata, outputName, 0);
+      const inDims = normalizeDims(readMetaShape(inMeta));
+      const outDims = normalizeDims(readMetaShape(outMeta));
+      const layout = detectLayout(inDims);
+      const inputType = inMeta?.type || 'float32';
+      const range = rangeFromInputType(inputType);
+      const precision = isFp16InputType(inputType) ? 'fp16' : 'fp32';
+      const notes = [];
+      if (precision === 'fp16' && probeBackend !== 'webgpu') {
+        notes.push('This model is fp16 but probing fell back to CPU/WASM, which has limited fp16 op coverage. Probe results may be unreliable; the model itself will require WebGPU at run time.');
+      }
+      const layoutCandidates = layout === 'unknown'
+        ? ['nchw', 'nhwc']
+        : [layout, layout === 'nchw' ? 'nhwc' : 'nchw'];
+
+      let chosenLayout = layout === 'nhwc' ? 'nhwc' : 'nchw';
+      let probeScale = null;
+      let probeWorked = false;
+      for (const candidateLayout of layoutCandidates) {
+        report?.(`testing ${candidateLayout.toUpperCase()} layout at 64\u00d764…`);
+        const probe = await runProbe(session, ort, {
+          inputName,
+          outputName,
+          inputType,
+          layout: candidateLayout,
+          size: 64,
+          range,
+        });
+        if (!probe.ok) continue;
+        probeWorked = true;
+        chosenLayout = candidateLayout;
+        probeScale = inferScaleFromProbeOutput(candidateLayout, 64, probe.outDims);
+        break;
+      }
+      if (!probeWorked) {
+        notes.push('Layout probe failed for both NCHW and NHWC; using defaults.');
+      } else if (chosenLayout === 'nhwc') {
+        notes.push('Detected NHWC layout from probe; this can run, but may be slower than NCHW.');
+      }
+
+      const staticScale = inferScaleFromStaticDims(inDims, outDims, chosenLayout);
+      const scale = probeScale || staticScale || 4;
+      const scaleSource = probeScale ? 'probe' : staticScale ? 'metadata' : 'default';
+
+      let multipleOf = 1;
+      let multipleOfSource = 'default';
+      if (probeWorked) {
+        report?.('checking window-size alignment at 60\u00d760…');
+        const mismatchProbe = await runProbe(session, ort, {
+          inputName,
+          outputName,
+          inputType,
+          layout: chosenLayout,
+          size: 60,
+          range,
+        });
+        if (!mismatchProbe.ok) {
+          const inferred = inferMultipleFromReshapeError(mismatchProbe.error?.message);
+          if (Number.isFinite(inferred) && inferred > 1) {
+            multipleOf = inferred;
+            multipleOfSource = 'probe';
+          }
+        }
+      }
+
+      let maxTileSize = null;
+      if (probeWorked) {
+        maxTileSize = await probeMaxInputSize(
+          session,
+          ort,
+          { inputName, outputName, inputType, layout: chosenLayout, range },
+          64,
+          report,
+        );
+        if (Number.isFinite(maxTileSize)) {
+          // Some exports (e.g. DAT with window-count constants baked in) only
+          // accept inputs in a narrow band around the trace size. To keep
+          // every padded edge tile inside that band, force the alignment to
+          // equal the discovered max — combined with a tile-size cap in the
+          // engine, every inference then runs at exactly maxTileSize.
+          if (maxTileSize > multipleOf) {
+            multipleOf = maxTileSize;
+            multipleOfSource = 'probe';
+          }
+          notes.push(
+            `Model rejected inputs larger than ${maxTileSize}\u00d7${maxTileSize}; tile size will be capped at ${maxTileSize}.`,
+          );
+        }
+      }
+
+      return {
+        scale,
+        range,
+        layout: chosenLayout,
+        multipleOf,
+        maxTileSize,
+        inputType,
+        precision,
+        scaleSource,
+        multipleOfSource,
+        notes,
+      };
+    } finally {
+      try { session.release?.(); } catch {}
+    }
+  }
+}
+
+export async function inspectCustomModelFile(file, opts) {
+  const inspector = new CustomModelInspector();
+  return inspector.inspectFile(file, opts);
+}

features/upscaler/custom-models/custom-model-store.js

@@ -0,0 +1,205 @@
+import { CUSTOM_MODEL_URL_PREFIX, getModelCache } from 'lib/fetch-progress';
+
+const CUSTOM_MODELS_KEY = 'upscaler_custom_models';
+
+function sanitizeScale(scale) {
+  const parsed = parseInt(scale, 10);
+  if (!Number.isFinite(parsed) || parsed < 1) return 1;
+  if (parsed > 16) return 16;
+  return parsed;
+}
+
+function sanitizeRange(range) {
+  const parsed = parseInt(range, 10);
+  if (parsed === 255) return 255;
+  return 1;
+}
+
+function sanitizeLayout(layout) {
+  const normalized = String(layout || '').toLowerCase();
+  if (normalized === 'nhwc') return 'nhwc';
+  return 'nchw';
+}
+
+function sanitizeMultipleOf(multipleOf) {
+  const parsed = parseInt(multipleOf, 10);
+  if (!Number.isFinite(parsed) || parsed < 1) return 1;
+  if (parsed > 256) return 256;
+  return parsed;
+}
+
+function sanitizeMaxTileSize(maxTileSize) {
+  if (maxTileSize == null || maxTileSize === '') return null;
+  const parsed = parseInt(maxTileSize, 10);
+  if (!Number.isFinite(parsed) || parsed < 1) return null;
+  if (parsed > 4096) return 4096;
+  return parsed;
+}
+
+function sanitizePrecision(precision) {
+  return String(precision || '').toLowerCase() === 'fp16' ? 'fp16' : 'fp32';
+}
+
+function sanitizeUpscaleBefore(value) {
+  if (value === true || value === 'true' || value === 1 || value === '1') return true;
+  return false;
+}
+
+function sanitizeTileBlend(value) {
+  return value === 'gaussian' ? 'gaussian' : 'overlapCrop';
+}
+
+function normalizeLabel(label) {
+  const trimmed = (label || '').trim();
+  return trimmed || 'Custom ONNX';
+}
+
+function toModelRecord(raw = {}) {
+  const id = String(raw.id || '');
+  if (!id) return null;
+  const scale = sanitizeScale(raw.scale);
+  const range = sanitizeRange(raw.range);
+  const layout = sanitizeLayout(raw.layout);
+  const multipleOf = sanitizeMultipleOf(raw.multipleOf);
+  const maxTileSize = sanitizeMaxTileSize(raw.maxTileSize);
+  const precision = sanitizePrecision(raw.precision);
+  const upscaleBefore = sanitizeUpscaleBefore(raw.upscaleBefore);
+  const tileBlend = sanitizeTileBlend(raw.tileBlend);
+  const sizeBytes = Number.isFinite(raw.sizeBytes) ? Math.max(0, raw.sizeBytes) : 0;
+  const sizeMB = Number((sizeBytes / (1024 * 1024)).toFixed(1));
+  return {
+    id,
+    url: `${CUSTOM_MODEL_URL_PREFIX}${id}`,
+    label: normalizeLabel(raw.label),
+    scale,
+    range,
+    layout,
+    multipleOf,
+    maxTileSize,
+    precision,
+    upscaleBefore,
+    tileBlend,
+    sizeBytes,
+    sizeMB,
+    custom: true,
+  };
+}
+
+function readStoredRecords() {
+  try {
+    const json = localStorage.getItem(CUSTOM_MODELS_KEY);
+    if (!json) return [];
+    const parsed = JSON.parse(json);
+    if (!Array.isArray(parsed)) return [];
+    return parsed
+      .map(toModelRecord)
+      .filter(Boolean);
+  } catch {
+    return [];
+  }
+}
+
+function persistRecords(records) {
+  const payload = records.map(({ id, label, scale, range, layout, multipleOf, maxTileSize, precision, upscaleBefore, tileBlend, sizeBytes }) => ({
+    id,
+    label,
+    scale,
+    range,
+    layout,
+    multipleOf,
+    maxTileSize,
+    precision,
+    upscaleBefore,
+    tileBlend,
+    sizeBytes,
+  }));
+  localStorage.setItem(CUSTOM_MODELS_KEY, JSON.stringify(payload));
+}
+
+export function listCustomModels() {
+  return readStoredRecords();
+}
+
+export function getUploadCustomOptionHTML() {
+  return '<option value="__upload_custom__">Upload custom…</option>';
+}
+
+export function getCustomModelByUrl(url) {
+  if (!url || typeof url !== 'string') return null;
+  return readStoredRecords().find((model) => model.url === url) || null;
+}
+
+export async function saveCustomModel({ file, label, scale, range, layout, multipleOf, maxTileSize, precision, upscaleBefore, tileBlend }) {
+  if (!(file instanceof File)) {
+    throw new Error('Missing ONNX file for custom model upload.');
+  }
+  const idSeed = `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  const id = `custom-${idSeed}`;
+  const url = `${CUSTOM_MODEL_URL_PREFIX}${id}`;
+  const bytes = await file.arrayBuffer();
+
+  const cache = await getModelCache();
+  if (!cache) {
+    throw new Error('Browser Cache API is unavailable, cannot store custom model.');
+  }
+  await cache.put(url, new Response(bytes, {
+    headers: {
+      'content-type': 'application/octet-stream',
+      'content-length': String(bytes.byteLength),
+    },
+  }));
+
+  const records = readStoredRecords();
+  const model = toModelRecord({
+    id, label, scale, range, layout, multipleOf, maxTileSize,
+    precision, upscaleBefore, tileBlend,
+    sizeBytes: bytes.byteLength,
+  });
+  records.unshift(model);
+  persistRecords(records);
+  return model;
+}
+
+/**
+ * Update an existing custom model's metadata (label / scale / range / layout /
+ * multipleOf). The cached ONNX file and id/url are preserved. Unspecified
+ * fields are left unchanged. Returns the updated model record, or `null` if
+ * no model matches `url`.
+ */
+export function updateCustomModelByUrl(url, updates = {}) {
+  if (!url || typeof url !== 'string') return null;
+  const records = readStoredRecords();
+  const index = records.findIndex((entry) => entry.url === url);
+  if (index === -1) return null;
+
+  const current = records[index];
+  const merged = toModelRecord({
+    id: current.id,
+    label: 'label' in updates ? updates.label : current.label,
+    scale: 'scale' in updates ? updates.scale : current.scale,
+    range: 'range' in updates ? updates.range : current.range,
+    layout: 'layout' in updates ? updates.layout : current.layout,
+    multipleOf: 'multipleOf' in updates ? updates.multipleOf : current.multipleOf,
+    maxTileSize: 'maxTileSize' in updates ? updates.maxTileSize : current.maxTileSize,
+    precision: 'precision' in updates ? updates.precision : current.precision,
+    upscaleBefore: 'upscaleBefore' in updates ? updates.upscaleBefore : current.upscaleBefore,
+    tileBlend: 'tileBlend' in updates ? updates.tileBlend : current.tileBlend,
+    sizeBytes: current.sizeBytes,
+  });
+  records[index] = merged;
+  persistRecords(records);
+  return merged;
+}
+
+export async function deleteCustomModelByUrl(url) {
+  if (!url || typeof url !== 'string') return false;
+  const records = readStoredRecords();
+  const model = records.find((entry) => entry.url === url);
+  if (!model) return false;
+
+  const cache = await getModelCache();
+  await cache?.delete(url);
+
+  persistRecords(records.filter((entry) => entry.id !== model.id));
+  return true;
+}

features/upscaler/custom-models/custom-model-upload-dialog.js

@@ -0,0 +1,460 @@
+/**
+ * <custom-model-upload-dialog> — modal for uploading a custom ONNX model.
+ *
+ * Self-contained UX: file selection, automatic ONNX inspection, manual
+ * overrides for scale / range / layout / multiple-of, validation, and save
+ * via the custom-model store.
+ *
+ * Usage:
+ *   const dialog = document.querySelector('custom-model-upload-dialog');
+ *   const model = await dialog.open({ defaultScale: 4 });
+ *   if (model) { ... } else { user cancelled }
+ */
+
+import { morph } from 'lib/morph';
+import { saveCustomModel, updateCustomModelByUrl } from './custom-model-store.js';
+import { inspectCustomModelFile } from './custom-model-inspector.js';
+
+class CustomModelUploadDialog extends HTMLElement {
+  connectedCallback() {
+    this.classList.add('custom-model-upload-dialog');
+    this.#render();
+  }
+
+  /**
+   * Show the modal and resolve with the saved CustomModel — or null if the
+   * user cancelled or closed the dialog.
+   *
+   * When `editModel` is provided, the dialog opens in edit mode: the file
+   * picker is hidden, fields are pre-filled, auto-detection is skipped, and
+   * Save updates the existing record's metadata in place.
+   *
+   * @param {{ defaultScale?: number, editModel?: import('./custom-model-store.js').CustomModel }} [opts]
+   */
+  open({ defaultScale = 4, editModel = null } = {}) {
+    const dialog        = this.querySelector('dialog');
+    const form          = this.querySelector('.custom-model-form');
+    const titleEl       = this.querySelector('.custom-model-title');
+    const fileLabel     = this.querySelector('.custom-model-file-label');
+    const fileInput     = this.querySelector('.custom-model-file');
+    const analyzeRow    = this.querySelector('.custom-model-analyze-row');
+    const analyzeBtn    = this.querySelector('.custom-model-analyze-btn');
+    const labelInput    = this.querySelector('.custom-model-label');
+    const scaleInput    = this.querySelector('.custom-model-scale');
+    const rangeInput    = this.querySelector('.custom-model-range');
+    const layoutInput   = this.querySelector('.custom-model-layout');
+    const multipleInput = this.querySelector('.custom-model-multiple');
+    const maxTileInput  = this.querySelector('.custom-model-maxtile');
+    const precisionInput = this.querySelector('.custom-model-precision');
+    const upscaleBeforeInput = this.querySelector('.custom-model-upscalebefore');
+    const tileBlendInput = this.querySelector('.custom-model-tileblend');
+    const sizeLabel     = this.querySelector('.custom-model-size');
+    const detectLabel   = this.querySelector('.custom-model-detected');
+    const errorLabel    = this.querySelector('.custom-model-error');
+    const saveBtn       = this.querySelector('.custom-model-save-btn');
+    const cancelBtn     = this.querySelector('.custom-model-cancel-btn');
+
+    const isEdit = !!editModel;
+    const ANALYZE_BTN_HTML = '<i class="fas fa-flask"></i> Analyze model';
+    titleEl.textContent = isEdit ? 'Edit custom ONNX model' : 'Upload custom ONNX model';
+    fileLabel.hidden = isEdit;
+    fileInput.required = !isEdit;
+    analyzeRow.hidden = isEdit;
+    detectLabel.hidden = isEdit;
+    analyzeBtn.innerHTML = ANALYZE_BTN_HTML;
+    analyzeBtn.disabled = true;
+    saveBtn.textContent = isEdit ? 'Save changes' : 'Save model';
+
+    fileInput.value = '';
+    if (isEdit) {
+      labelInput.value = editModel.label || '';
+      scaleInput.value = String(editModel.scale ?? defaultScale);
+      rangeInput.value = String(editModel.range === 255 ? 255 : 1);
+      layoutInput.value = editModel.layout === 'nhwc' ? 'nhwc' : 'nchw';
+      multipleInput.value = String(Math.max(1, editModel.multipleOf || 1));
+      maxTileInput.value = editModel.maxTileSize != null ? String(editModel.maxTileSize) : '';
+      precisionInput.value = editModel.precision === 'fp16' ? 'fp16' : 'fp32';
+      upscaleBeforeInput.value = editModel.upscaleBefore ? 'true' : 'false';
+      tileBlendInput.value = editModel.tileBlend === 'gaussian' ? 'gaussian' : 'overlapCrop';
+      sizeLabel.textContent = editModel.sizeMB != null
+        ? `Model size: ~${editModel.sizeMB} MB`
+        : 'Model size: -';
+    } else {
+      labelInput.value = '';
+      scaleInput.value = String(defaultScale);
+      rangeInput.value = '1';
+      layoutInput.value = 'nchw';
+      multipleInput.value = '1';
+      maxTileInput.value = '';
+      precisionInput.value = 'fp32';
+      upscaleBeforeInput.value = 'false';
+      tileBlendInput.value = 'overlapCrop';
+      sizeLabel.textContent = 'Model size: -';
+    }
+    errorLabel.textContent = '';
+    detectLabel.innerHTML = '';
+    saveBtn.disabled = false;
+
+    return new Promise((resolve) => {
+      let settled = false;
+      let inspectSeq = 0;
+      const cleanup = () => {
+        form.removeEventListener('submit', onSubmit);
+        fileInput.removeEventListener('change', onFileChange);
+        analyzeBtn.removeEventListener('click', onAnalyzeClick);
+        cancelBtn.removeEventListener('click', onCancel);
+        dialog.removeEventListener('cancel', onCancel);
+        dialog.removeEventListener('close', onClose);
+      };
+      const finish = (result) => {
+        if (settled) return;
+        settled = true;
+        cleanup();
+        resolve(result);
+      };
+      const onFileChange = () => {
+        // Bumping inspectSeq cancels any in-flight analysis whose result is
+        // about to come back: we don't want stale probe data overwriting
+        // form values for the file the user just switched to.
+        ++inspectSeq;
+        const file = fileInput.files?.[0];
+        errorLabel.textContent = '';
+        if (!file) {
+          sizeLabel.textContent = 'Model size: -';
+          detectLabel.innerHTML = '';
+          analyzeBtn.disabled = true;
+          analyzeBtn.innerHTML = ANALYZE_BTN_HTML;
+          return;
+        }
+        const sizeMB = (file.size / (1024 * 1024)).toFixed(1);
+        sizeLabel.textContent = `Model size: ~${sizeMB} MB`;
+        if (!labelInput.value.trim()) {
+          labelInput.value = file.name.replace(/\.onnx$/i, '');
+        }
+        const sizeHint = parseFloat(sizeMB) > 50
+          ? ' (this model is large — probing may take 30s+)'
+          : ' (probing typically takes 5–20s)';
+        detectLabel.innerHTML = `Auto-detect: <em>ready — click <strong>Analyze model</strong> to probe the file${sizeHint}.</em>`;
+        analyzeBtn.disabled = false;
+        analyzeBtn.innerHTML = ANALYZE_BTN_HTML;
+      };
+      const onAnalyzeClick = () => {
+        const file = fileInput.files?.[0];
+        if (!file) return;
+        const seq = ++inspectSeq;
+        errorLabel.textContent = '';
+        analyzeBtn.disabled = true;
+        analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Analyzing…';
+        saveBtn.disabled = true;
+        detectLabel.textContent = 'Auto-detect: starting — running inference probes (WebGPU when available, otherwise CPU/WASM); this can take a while on large models.';
+        inspectCustomModelFile(file, {
+          onProgress: (message) => {
+            if (seq !== inspectSeq || settled) return;
+            detectLabel.textContent = `Auto-detect: ${message}`;
+          },
+        }).then((result) => {
+          if (seq !== inspectSeq || settled) return;
+          if (Number.isFinite(result?.scale)) {
+            scaleInput.value = String(result.scale);
+          }
+          rangeInput.value = String(result?.range === 255 ? 255 : 1);
+          layoutInput.value = result?.layout === 'nhwc' ? 'nhwc' : 'nchw';
+          if (Number.isFinite(result?.multipleOf)) {
+            multipleInput.value = String(Math.max(1, result.multipleOf));
+          }
+          maxTileInput.value = Number.isFinite(result?.maxTileSize)
+            ? String(result.maxTileSize)
+            : '';
+          precisionInput.value = result?.precision === 'fp16' ? 'fp16' : 'fp32';
+          const parts = [];
+          if (result?.layout) parts.push(`layout ${result.layout.toUpperCase()}`);
+          if (Number.isFinite(result?.multipleOf)) {
+            const suffix = result?.multipleOfSource === 'probe' ? ' (probed)' : '';
+            parts.push(`multiple ${result.multipleOf}${suffix}`);
+          }
+          if (Number.isFinite(result?.maxTileSize)) {
+            parts.push(`max tile ${result.maxTileSize}\u00d7${result.maxTileSize} (probed)`);
+          }
+          if (result?.inputType) parts.push(`input ${result.inputType}`);
+          if (Number.isFinite(result?.scale)) {
+            const suffix = result?.scaleSource === 'probe' ? ' (probed)' : result?.scaleSource === 'metadata' ? ' (metadata)' : ' (default)';
+            parts.push(`scale ${result.scale}x${suffix}`);
+          }
+          detectLabel.textContent = parts.length
+            ? `Auto-detected: ${parts.join(', ')}.`
+            : 'Auto-detect finished with defaults.';
+          if (Array.isArray(result?.notes) && result.notes.length) {
+            errorLabel.textContent = result.notes[0];
+          }
+          analyzeBtn.disabled = false;
+          analyzeBtn.innerHTML = '<i class="fas fa-rotate"></i> Re-analyze';
+          saveBtn.disabled = false;
+        }).catch((err) => {
+          if (seq !== inspectSeq || settled) return;
+          detectLabel.textContent = 'Auto-detect failed; you can adjust the fields manually and save anyway.';
+          errorLabel.textContent = err?.message || 'Could not inspect model metadata.';
+          analyzeBtn.disabled = false;
+          analyzeBtn.innerHTML = ANALYZE_BTN_HTML;
+          saveBtn.disabled = false;
+        });
+      };
+      const onCancel = (e) => {
+        e?.preventDefault?.();
+        if (dialog.open) dialog.close();
+        finish(null);
+      };
+      const onClose = () => finish(null);
+      const onSubmit = async (e) => {
+        e.preventDefault();
+        errorLabel.textContent = '';
+        if (isEdit) {
+          saveBtn.disabled = true;
+          try {
+            const model = updateCustomModelByUrl(editModel.url, {
+              label: labelInput.value,
+              scale: scaleInput.value,
+              range: rangeInput.value,
+              layout: layoutInput.value,
+              multipleOf: multipleInput.value,
+              maxTileSize: maxTileInput.value,
+              precision: precisionInput.value,
+              upscaleBefore: upscaleBeforeInput.value === 'true',
+              tileBlend: tileBlendInput.value,
+            });
+            if (!model) {
+              errorLabel.textContent = 'Model not found; it may have been removed.';
+              saveBtn.disabled = false;
+              return;
+            }
+            if (dialog.open) dialog.close();
+            finish(model);
+          } catch (err) {
+            errorLabel.textContent = err?.message || 'Failed to update model.';
+            saveBtn.disabled = false;
+          }
+          return;
+        }
+        const file = fileInput.files?.[0];
+        if (!file) {
+          errorLabel.textContent = 'Choose an ONNX model file first.';
+          return;
+        }
+        if (!/\.onnx$/i.test(file.name)) {
+          errorLabel.textContent = 'Only .onnx files are supported.';
+          return;
+        }
+        saveBtn.disabled = true;
+        try {
+          const model = await saveCustomModel({
+            file,
+            label: labelInput.value,
+            scale: scaleInput.value,
+            range: rangeInput.value,
+            layout: layoutInput.value,
+            multipleOf: multipleInput.value,
+            maxTileSize: maxTileInput.value,
+            precision: precisionInput.value,
+            upscaleBefore: upscaleBeforeInput.value === 'true',
+            tileBlend: tileBlendInput.value,
+          });
+          if (dialog.open) dialog.close();
+          finish(model);
+        } catch (err) {
+          errorLabel.textContent = err?.message || 'Failed to save model.';
+          saveBtn.disabled = false;
+        }
+      };
+
+      form.addEventListener('submit', onSubmit);
+      if (!isEdit) {
+        fileInput.addEventListener('change', onFileChange);
+        analyzeBtn.addEventListener('click', onAnalyzeClick);
+      }
+      cancelBtn.addEventListener('click', onCancel);
+      dialog.addEventListener('cancel', onCancel);
+      dialog.addEventListener('close', onClose);
+      dialog.showModal();
+    });
+  }
+
+  #render() {
+    morph(this, `
+      <style>
+        .custom-model-upload-dialog dialog {
+          width: min(34rem, calc(100vw - 2rem));
+        }
+        .custom-model-upload-dialog .custom-model-form {
+          display: grid;
+          gap: 0.6rem;
+          margin: 0;
+        }
+        .custom-model-upload-dialog .custom-model-form label {
+          display: grid;
+          gap: 0.25rem;
+          margin: 0;
+          font-size: 0.85rem;
+        }
+        .custom-model-upload-dialog .custom-model-row {
+          display: grid;
+          gap: 0.5rem;
+          grid-template-columns: minmax(0, 1fr) auto auto auto auto auto auto;
+          align-items: end;
+        }
+        .custom-model-upload-dialog .custom-model-scale { width: 8ch; }
+        .custom-model-upload-dialog .custom-model-range { width: 9ch; }
+        .custom-model-upload-dialog .custom-model-layout { width: 9ch; }
+        .custom-model-upload-dialog .custom-model-multiple { width: 9ch; }
+        .custom-model-upload-dialog .custom-model-maxtile { width: 9ch; }
+        .custom-model-upload-dialog .custom-model-precision { width: 9ch; }
+        @media (max-width: 900px) {
+          .custom-model-upload-dialog .custom-model-row {
+            grid-template-columns: minmax(0, 1fr) auto auto;
+          }
+        }
+        .custom-model-upload-dialog .custom-model-meta {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 0.5rem;
+          font-size: 0.8rem;
+          color: var(--pico-muted-color);
+        }
+        .custom-model-upload-dialog .custom-model-detected {
+          font-size: 0.8rem;
+          color: var(--pico-muted-color);
+        }
+        .custom-model-upload-dialog .custom-model-detected em {
+          font-style: normal;
+          opacity: 0.85;
+        }
+        .custom-model-upload-dialog .custom-model-file-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: baseline;
+          gap: 0.5rem;
+        }
+        .custom-model-upload-dialog .custom-model-download-link {
+          font-size: 0.78rem;
+          font-weight: normal;
+        }
+        .custom-model-upload-dialog .custom-model-analyze-row {
+          display: flex;
+          align-items: center;
+          gap: 0.6rem;
+          flex-wrap: wrap;
+          margin: -0.3rem 0 0.1rem;
+        }
+        .custom-model-upload-dialog .custom-model-analyze-btn {
+          margin: 0;
+          padding: 0.35rem 0.75rem;
+          font-size: 0.85rem;
+          width: auto;
+          flex: 0 0 auto;
+        }
+        .custom-model-upload-dialog .custom-model-analyze-hint {
+          font-size: 0.75rem;
+          color: var(--pico-muted-color);
+          flex: 1 1 18ch;
+          min-width: 0;
+        }
+        .custom-model-upload-dialog .custom-model-error {
+          color: var(--pico-del-color, #c62828);
+          min-height: 1.1rem;
+          font-size: 0.8rem;
+        }
+        .custom-model-upload-dialog .custom-model-actions {
+          display: flex;
+          justify-content: flex-end;
+          gap: 0.5rem;
+          margin-top: 0.4rem;
+        }
+      </style>
+      <dialog>
+        <form class="custom-model-form" method="dialog">
+          <h3 class="custom-model-title" style="margin:0">Upload custom ONNX model</h3>
+          <label class="custom-model-file-label">
+            <span class="custom-model-file-header">
+              Model file
+              <a class="custom-model-download-link" href="https://huggingface.co/notaneimu/onnx-image-models/tree/main" target="_blank" rel="noopener noreferrer">
+                <i class="fas fa-arrow-up-right-from-square"></i> Download More Models
+              </a>
+            </span>
+            <input class="custom-model-file" type="file" accept=".onnx,application/octet-stream" required>
+          </label>
+          <div class="custom-model-analyze-row">
+            <button type="button" class="secondary custom-model-analyze-btn" disabled>
+              <i class="fas fa-flask"></i> Analyze model
+            </button>
+            <span class="custom-model-analyze-hint">
+              Probe model to auto-fill values.
+            </span>
+          </div>
+          <div class="custom-model-row">
+            <label>
+              Label
+              <input class="custom-model-label" type="text" maxlength="80" placeholder="My custom model">
+            </label>
+            <label>
+              Scale
+              <input class="custom-model-scale" type="number" min="1" max="16" step="1" value="4" required>
+            </label>
+            <label>
+              Range
+              <select class="custom-model-range">
+                <option value="1">1</option>
+                <option value="255">255</option>
+              </select>
+            </label>
+            <label>
+              Layout
+              <select class="custom-model-layout">
+                <option value="nchw">NCHW</option>
+                <option value="nhwc">NHWC</option>
+              </select>
+            </label>
+            <label>
+              Multiple-of
+              <input class="custom-model-multiple" type="number" min="1" max="256" step="1" value="1">
+            </label>
+            <label title="Hard upper bound on input tile size accepted by the model. Leave blank if the model is fully dynamic.">
+              Max tile
+              <input class="custom-model-maxtile" type="number" min="1" max="4096" step="1" placeholder="auto">
+            </label>
+            <label title="Tensor element precision. fp16 models require WebGPU; CPU/WASM has very limited fp16 op coverage and will usually fail.">
+              Precision
+              <select class="custom-model-precision">
+                <option value="fp32">fp32</option>
+                <option value="fp16">fp16</option>
+              </select>
+            </label>
+            <label title="HR-space refiner — the engine bicubic-upsamples LR to HR before feeding tiles to the model. Multiple-of and Max tile stay in LR-pixel units.">
+              Upscale before
+              <select class="custom-model-upscalebefore">
+                <option value="false">No</option>
+                <option value="true">Yes</option>
+              </select>
+            </label>
+            <label title="Tile blend: 'overlap' is a half-overlap hard crop (fast). 'gaussian' is float32 weighted accumulation that hides seams on diffusion-style models — forces CPU readback path.">
+              Tile blend
+              <select class="custom-model-tileblend">
+                <option value="overlapCrop">overlap</option>
+                <option value="gaussian">gaussian</option>
+              </select>
+            </label>
+          </div>
+          <div class="custom-model-detected">Auto-detect: waiting for model file…</div>
+          <div class="custom-model-meta">
+            <span class="custom-model-size">Model size: -</span>
+          </div>
+          <div class="custom-model-error"></div>
+          <div class="custom-model-actions">
+            <button type="button" class="secondary custom-model-cancel-btn">Cancel</button>
+            <button type="submit" class="custom-model-save-btn">Save model</button>
+          </div>
+        </form>
+      </dialog>
+    `);
+  }
+}
+
+customElements.define('custom-model-upload-dialog', CustomModelUploadDialog);

features/upscaler/engine/face-detector-engine.js

@@ -0,0 +1,368 @@
+import { fetchWithProgress } from 'lib/fetch-progress';
+import { loadSession } from 'lib/backend';
+import { dispatchBackendEvent } from 'lib/backend-events';
+
+const DETECTORS = {
+  'face-yunet': {
+    label: 'Face (YuNet)',
+    url: 'https://huggingface.co/opencv/face_detection_yunet/resolve/main/face_detection_yunet_2023mar.onnx',
+    inputWidth: 640,
+    inputHeight: 640,
+    scoreThreshold: 0.7,
+    iouThreshold: 0.3,
+    topK: 20,
+  },
+};
+
+export { DETECTORS };
+
+function clamp(v, min, max) {
+  return v < min ? min : v > max ? max : v;
+}
+
+
+function tensorToRows(tensor) {
+  const dims = tensor.dims || [];
+  const data = tensor.data;
+  if (!data || !dims.length) return null;
+
+  // [N, C]
+  if (dims.length === 2) {
+    return {
+      rows: dims[0],
+      cols: dims[1],
+      at: (row, col) => data[row * dims[1] + col],
+    };
+  }
+
+  // [1, N, C]
+  if (dims.length === 3 && dims[0] === 1) {
+    return {
+      rows: dims[1],
+      cols: dims[2],
+      at: (row, col) => data[row * dims[2] + col],
+    };
+  }
+
+  return null;
+}
+
+function nms(boxes, iouThreshold, topK) {
+  const sorted = [...boxes].sort((a, b) => b.score - a.score);
+  const kept = [];
+
+  function iou(a, b) {
+    const x1 = Math.max(a.x, b.x);
+    const y1 = Math.max(a.y, b.y);
+    const x2 = Math.min(a.x + a.w, b.x + b.w);
+    const y2 = Math.min(a.y + a.h, b.y + b.h);
+    const iw = Math.max(0, x2 - x1);
+    const ih = Math.max(0, y2 - y1);
+    const inter = iw * ih;
+    const union = a.w * a.h + b.w * b.h - inter;
+    return union <= 0 ? 0 : inter / union;
+  }
+
+  for (const cand of sorted) {
+    if (kept.length >= topK) break;
+    let suppressed = false;
+    for (const k of kept) {
+      if (iou(cand, k) > iouThreshold) {
+        suppressed = true;
+        break;
+      }
+    }
+    if (!suppressed) kept.push(cand);
+  }
+
+  return kept;
+}
+
+function parseDecodedDetections(outputTensor, scoreThreshold, srcW, srcH, inW, inH) {
+  const rows = tensorToRows(outputTensor);
+  if (!rows || rows.cols < 15) return [];
+  const sx = srcW / inW;
+  const sy = srcH / inH;
+  const faces = [];
+
+  for (let i = 0; i < rows.rows; i++) {
+    const score = rows.at(i, 14);
+    if (score < scoreThreshold) continue;
+
+    const x = rows.at(i, 0) * sx;
+    const y = rows.at(i, 1) * sy;
+    const w = rows.at(i, 2) * sx;
+    const h = rows.at(i, 3) * sy;
+    if (w <= 1 || h <= 1) continue;
+
+    faces.push({ x, y, w, h, score });
+  }
+
+  return faces;
+}
+
+function readFeatureVector(tensor, anchorIndex, featureCount) {
+  const dims = tensor.dims || [];
+  const data = tensor.data;
+  if (!data) return null;
+
+  // [1, A, F]
+  if (dims.length === 3 && dims[0] === 1 && dims[2] >= featureCount) {
+    const off = anchorIndex * dims[2];
+    const out = new Array(featureCount);
+    for (let i = 0; i < featureCount; i++) out[i] = data[off + i];
+    return out;
+  }
+
+  // [1, F, H, W]
+  if (dims.length === 4 && dims[0] === 1 && dims[1] >= featureCount) {
+    const anchors = dims[2] * dims[3];
+    if (anchorIndex >= anchors) return null;
+    const out = new Array(featureCount);
+    for (let i = 0; i < featureCount; i++) out[i] = data[i * anchors + anchorIndex];
+    return out;
+  }
+
+  // [1, H, W, F]
+  if (dims.length === 4 && dims[0] === 1 && dims[3] >= featureCount) {
+    const off = anchorIndex * dims[3];
+    const out = new Array(featureCount);
+    for (let i = 0; i < featureCount; i++) out[i] = data[off + i];
+    return out;
+  }
+
+  const off = anchorIndex * featureCount;
+  if (off + featureCount - 1 >= data.length) return null;
+  const out = new Array(featureCount);
+  for (let i = 0; i < featureCount; i++) out[i] = data[off + i];
+  return out;
+}
+
+function decodeRawYunet(results, scoreThreshold, srcW, srcH, padW, padH) {
+  const sx = srcW / padW;
+  const sy = srcH / padH;
+  const outByName = new Map(Object.entries(results));
+  const faces = [];
+  const strides = [8, 16, 32];
+
+  for (const stride of strides) {
+    const cls = outByName.get(`cls_${stride}`);
+    const obj = outByName.get(`obj_${stride}`);
+    const bbox = outByName.get(`bbox_${stride}`);
+    if (!cls || !obj || !bbox) continue;
+
+    const fmW = Math.floor(padW / stride);
+    const fmH = Math.floor(padH / stride);
+    const anchorCount = fmW * fmH;
+
+    for (let i = 0; i < anchorCount; i++) {
+      const clsVec = readFeatureVector(cls, i, 1);
+      const objVec = readFeatureVector(obj, i, 1);
+      if (!clsVec || !objVec) continue;
+      const clsScore = clamp(clsVec[0], 0, 1);
+      const objScore = clamp(objVec[0], 0, 1);
+      const score = Math.sqrt(clsScore * objScore);
+      if (score < scoreThreshold) continue;
+
+      const bb = readFeatureVector(bbox, i, 4);
+      if (!bb) continue;
+      const [dx, dy, dw, dh] = bb;
+
+      const c = i % fmW;
+      const r = Math.floor(i / fmW);
+      const cx = (c + dx) * stride;
+      const cy = (r + dy) * stride;
+      const w = Math.exp(dw) * stride;
+      const h = Math.exp(dh) * stride;
+      const x1 = cx - w / 2;
+      const y1 = cy - h / 2;
+      if (w <= 1 || h <= 1) continue;
+
+      faces.push({
+        x: clamp(x1 * sx, 0, srcW - 1),
+        y: clamp(y1 * sy, 0, srcH - 1),
+        w: Math.min(w * sx, srcW),
+        h: Math.min(h * sy, srcH),
+        score,
+      });
+    }
+  }
+
+  return faces;
+}
+
+export class FaceDetectorEngine {
+  #session = null;
+  #modelBuffer = null;
+  #currentDetectorKey = null;
+  #intent = null;
+  // Set by loadSession; kept current by #backendListener so a runtime EP
+  // fallback doesn't leave a stale label that the loadModel early-return
+  // re-announces later.
+  #realizedBackend = null;
+  #backendListener = null;
+  get isLoaded() { return this.#session !== null; }
+  get realizedBackend() { return this.#realizedBackend; }
+  get intent() { return this.#intent; }
+  get currentDetector() { return this.#currentDetectorKey; }
+
+  #trackRealizedBackend() {
+    if (this.#backendListener) return;
+    this.#backendListener = (e) => {
+      const d = e?.detail;
+      if (d && d.kind === 'success' && typeof d.backend === 'string') {
+        this.#realizedBackend = d.backend;
+      }
+    };
+    document.addEventListener('aitools:backend-event', this.#backendListener);
+  }
+  #untrackRealizedBackend() {
+    if (!this.#backendListener) return;
+    document.removeEventListener('aitools:backend-event', this.#backendListener);
+    this.#backendListener = null;
+  }
+
+  async loadModel(detectorKey = 'face-yunet', intent = 'cpu', onProgress) {
+    if (onProgress != null && typeof onProgress !== 'function') {
+      console.warn('[FaceDetectorEngine] Ignoring non-function onProgress callback.', {
+        type: typeof onProgress,
+        value: onProgress,
+        detectorKey,
+        intent,
+      });
+    }
+    intent = normalizeIntent(intent);
+    const report = typeof onProgress === 'function' ? onProgress : null;
+    if (this.#session && this.#currentDetectorKey === detectorKey && this.#intent === intent) {
+      if (this.#realizedBackend) {
+        dispatchBackendEvent({ kind: 'success', backend: this.#realizedBackend });
+      }
+      return;
+    }
+
+    const cfg = DETECTORS[detectorKey];
+    if (!cfg) throw new Error(`Unknown detector: ${detectorKey}`);
+
+    if (this.#session) {
+      try { this.#session.release(); } catch {}
+      this.#session = null;
+    }
+    if (this.#currentDetectorKey !== detectorKey) {
+      this.#modelBuffer = null;
+    }
+
+    if (!this.#modelBuffer) {
+      this.#modelBuffer = await fetchWithProgress(cfg.url, report);
+    }
+
+    report?.(1, 'Loading detector into runtime...');
+    console.info(`[FaceDetectorEngine] Loading detector "${detectorKey}" with intent "${intent}"`);
+    const { session, realizedBackend } = await loadSession(this.#modelBuffer, intent);
+    this.#session = session;
+    this.#intent = intent;
+    this.#realizedBackend = realizedBackend;
+    this.#currentDetectorKey = detectorKey;
+    this.#trackRealizedBackend();
+    console.info(`[FaceDetectorEngine] Detector ready on ${realizedBackend}`);
+    report?.(1, 'Detector loaded.');
+  }
+
+  async detectFaces(image, {
+    detectorKey = 'face-yunet',
+    scoreThreshold,
+    iouThreshold,
+    topK,
+    signal,
+  } = {}) {
+    if (!this.#session || this.#currentDetectorKey !== detectorKey) {
+      throw new Error('Detector not loaded — call loadModel() first');
+    }
+    if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError');
+
+    const cfg = DETECTORS[detectorKey];
+    const minScore = Number.isFinite(scoreThreshold) ? scoreThreshold : cfg.scoreThreshold;
+    const maxIou = Number.isFinite(iouThreshold) ? iouThreshold : cfg.iouThreshold;
+    const maxKeep = Number.isFinite(topK) ? topK : cfg.topK;
+    const srcW = image.width;
+    const srcH = image.height;
+    const inW = cfg.inputWidth;
+    const inH = cfg.inputHeight;
+
+    const prepCanvas = document.createElement('canvas');
+    prepCanvas.width = inW;
+    prepCanvas.height = inH;
+    const prepCtx = prepCanvas.getContext('2d');
+    prepCtx.drawImage(image, 0, 0, inW, inH);
+    const imageData = prepCtx.getImageData(0, 0, inW, inH);
+    const px = imageData.data;
+
+    const planeSize = inW * inH;
+    const input = new Float32Array(3 * planeSize);
+    for (let i = 0; i < planeSize; i++) {
+      const si = i * 4;
+      // Match OpenCV DNN blobFromImage defaults used by FaceDetectorYN:
+      // BGR order, no scale, zero mean.
+      input[i] = px[si + 2];
+      input[planeSize + i] = px[si + 1];
+      input[2 * planeSize + i] = px[si];
+    }
+
+    prepCanvas.width = 0;
+    prepCanvas.height = 0;
+
+    if (signal?.aborted) throw new DOMException('Cancelled', 'AbortError');
+
+    const ort = globalThis.ort;
+    const tensor = new ort.Tensor('float32', input, [1, 3, inH, inW]);
+    const inputName = this.#session.inputNames[0];
+    const results = await this.#session.run({ [inputName]: tensor });
+    tensor.dispose();
+
+    let candidates = [];
+    const outputNames = this.#session.outputNames || [];
+    if (outputNames.length === 1) {
+      const raw = results[outputNames[0]];
+      candidates = parseDecodedDetections(raw, minScore, srcW, srcH, inW, inH);
+    }
+
+    if (!candidates.length) {
+      candidates = decodeRawYunet(results, minScore, srcW, srcH, inW, inH);
+    }
+
+    for (const name of outputNames) {
+      try { results[name]?.dispose?.(); } catch {}
+    }
+
+    const filtered = nms(
+      candidates,
+      maxIou,
+      maxKeep,
+    );
+
+    return filtered.map(face => ({
+      ...face,
+      x: clamp(face.x, 0, srcW - 1),
+      y: clamp(face.y, 0, srcH - 1),
+      w: clamp(face.w, 1, srcW),
+      h: clamp(face.h, 1, srcH),
+    }));
+  }
+
+  release() {
+    this.#untrackRealizedBackend();
+    if (this.#session) {
+      try { this.#session.release(); } catch {}
+      this.#session = null;
+    }
+    this.#modelBuffer = null;
+    this.#currentDetectorKey = null;
+    this.#intent = null;
+    this.#realizedBackend = null;
+  }
+}
+
+function normalizeIntent(value) {
+  if (value === 'webgpu' || value === 'gpu') return 'gpu';
+  if (value === 'wasm'   || value === 'cpu') return 'cpu';
+  return 'cpu';
+}

features/upscaler/engine/gpu-frame-extractor.js

@@ -0,0 +1,201 @@
+/**
+ * GpuFrameExtractor — uploads a video/image frame to a GPU texture and
+ * extracts CHW float32 tiles via a compute shader, avoiding CPU-side
+ * getImageData() + extractTileCHW() entirely.
+ *
+ * Usage:
+ *   const extractor = new GpuFrameExtractor(device);
+ *   extractor.uploadFrame(videoElement, width, height);
+ *   const gpuBuffer = extractor.extractTile(tx, ty, tw, th, modelValueRange);
+ *   // gpuBuffer contains CHW float32 data for the tile
+ *   extractor.destroy();
+ */
+
+const SHADER = /* wgsl */ `
+struct Params {
+  tileX: u32,
+  tileY: u32,
+  tileW: u32,
+  tileH: u32,
+  scale: f32,
+}
+
+@group(0) @binding(0) var src: texture_2d<f32>;
+@group(0) @binding(1) var<storage, read_write> out: array<f32>;
+@group(0) @binding(2) var<uniform> params: Params;
+
+@compute @workgroup_size(16, 16)
+fn main(@builtin(global_invocation_id) gid: vec3u) {
+  let col = gid.x;
+  let row = gid.y;
+  if (col >= params.tileW || row >= params.tileH) { return; }
+
+  let pixel = textureLoad(src, vec2u(params.tileX + col, params.tileY + row), 0);
+  let plane = params.tileW * params.tileH;
+  let idx = row * params.tileW + col;
+
+  // Texture values are [0,1]; scale converts to model's expected range
+  // (1.0 keeps [0,1], 255.0 produces [0,255]).
+  out[idx]               = pixel.r * params.scale;
+  out[plane + idx]       = pixel.g * params.scale;
+  out[2u * plane + idx]  = pixel.b * params.scale;
+}
+`;
+
+const PARAMS_SIZE = 5 * 4;
+const PARAMS_BUFFER_SIZE = Math.ceil(PARAMS_SIZE / 16) * 16;
+
+export class GpuFrameExtractor {
+  #device;
+  #pipeline;
+  #bindGroupLayout;
+  #paramsBuffer;
+  #frameTexture = null;
+  #tileBuffer = null;
+  #tileBufferSize = 0;
+  #lost = false;
+
+  constructor(device) {
+    this.#device = device;
+    this.#initPipeline();
+    this.#device.lost.then((info) => {
+      this.#lost = true;
+      console.warn('[GpuFrameExtractor] GPU device lost:', info.message);
+    });
+  }
+
+  get lost() { return this.#lost; }
+
+  /**
+   * Upload a frame source to the internal GPU texture.
+   * Accepts HTMLVideoElement, HTMLImageElement, HTMLCanvasElement,
+   * ImageBitmap, VideoFrame, OffscreenCanvas — anything valid for
+   * copyExternalImageToTexture().
+   */
+  uploadFrame(source, width, height) {
+    if (this.#frameTexture &&
+        (this.#frameTexture.width !== width || this.#frameTexture.height !== height)) {
+      this.#frameTexture.destroy();
+      this.#frameTexture = null;
+    }
+
+    if (!this.#frameTexture) {
+      this.#frameTexture = this.#device.createTexture({
+        size: [width, height],
+        format: 'rgba8unorm',
+        usage:
+          GPUTextureUsage.TEXTURE_BINDING |
+          GPUTextureUsage.COPY_DST |
+          GPUTextureUsage.RENDER_ATTACHMENT,
+      });
+    }
+
+    this.#device.queue.copyExternalImageToTexture(
+      { source },
+      { texture: this.#frameTexture },
+      [width, height],
+    );
+  }
+
+  /**
+   * Run the compute shader to extract a tile as CHW float32 into a
+   * reusable GPU storage buffer.
+   *
+   * @param {number} tx - source tile X
+   * @param {number} ty - source tile Y
+   * @param {number} tw - tile width
+   * @param {number} th - tile height
+   * @param {number} modelValueRange - upper bound of the model's expected value range (1 or 255);
+   *   texture values are [0,1] so this acts as a multiplier.
+   * @returns {GPUBuffer} containing 3×tw×th float32 values in CHW order
+   */
+  extractTile(tx, ty, tw, th, modelValueRange) {
+    const byteSize = 3 * tw * th * 4;
+
+    if (this.#tileBufferSize < byteSize) {
+      this.#tileBuffer?.destroy();
+      this.#tileBuffer = this.#device.createBuffer({
+        size: byteSize,
+        usage:
+          GPUBufferUsage.STORAGE |
+          GPUBufferUsage.COPY_SRC |
+          GPUBufferUsage.COPY_DST,
+      });
+      this.#tileBufferSize = byteSize;
+    }
+
+    const paramsData = new ArrayBuffer(PARAMS_BUFFER_SIZE);
+    const u32 = new Uint32Array(paramsData);
+    const f32 = new Float32Array(paramsData);
+    u32[0] = tx;
+    u32[1] = ty;
+    u32[2] = tw;
+    u32[3] = th;
+    f32[4] = modelValueRange;
+    this.#device.queue.writeBuffer(this.#paramsBuffer, 0, paramsData);
+
+    const bindGroup = this.#device.createBindGroup({
+      layout: this.#bindGroupLayout,
+      entries: [
+        { binding: 0, resource: this.#frameTexture.createView() },
+        { binding: 1, resource: { buffer: this.#tileBuffer, size: byteSize } },
+        { binding: 2, resource: { buffer: this.#paramsBuffer } },
+      ],
+    });
+
+    const encoder = this.#device.createCommandEncoder();
+    const pass = encoder.beginComputePass();
+    pass.setPipeline(this.#pipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.dispatchWorkgroups(Math.ceil(tw / 16), Math.ceil(th / 16));
+    pass.end();
+    this.#device.queue.submit([encoder.finish()]);
+
+    return this.#tileBuffer;
+  }
+
+  destroy() {
+    this.#frameTexture?.destroy();
+    this.#frameTexture = null;
+    this.#tileBuffer?.destroy();
+    this.#tileBuffer = null;
+    this.#paramsBuffer?.destroy();
+    this.#paramsBuffer = null;
+  }
+
+  #initPipeline() {
+    const module = this.#device.createShaderModule({ code: SHADER });
+
+    this.#bindGroupLayout = this.#device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.COMPUTE,
+          texture: { sampleType: 'float' },
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.COMPUTE,
+          buffer: { type: 'storage' },
+        },
+        {
+          binding: 2,
+          visibility: GPUShaderStage.COMPUTE,
+          buffer: { type: 'uniform' },
+        },
+      ],
+    });
+
+    this.#pipeline = this.#device.createComputePipeline({
+      layout: this.#device.createPipelineLayout({
+        bindGroupLayouts: [this.#bindGroupLayout],
+      }),
+      compute: { module, entryPoint: 'main' },
+    });
+
+    this.#paramsBuffer = this.#device.createBuffer({
+      size: PARAMS_BUFFER_SIZE,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+  }
+}

features/upscaler/engine/gpu-tile-renderer.js

@@ -0,0 +1,251 @@
+/**
+ * GpuTileRenderer — renders CHW float32 ORT output buffers directly to a
+ * GPU texture via a WGSL fragment shader, avoiding the GPU→CPU readback.
+ *
+ * Usage:
+ *   const renderer = new GpuTileRenderer(device);
+ *   renderer.configure(canvas, outW, outH);
+ *   // per tile:
+ *   renderer.renderTile(gpuBuffer, tileW, tileH, destX, destY, overlap, outputScale);
+ *   renderer.presentToCanvas();
+ *   // cleanup:
+ *   renderer.destroy();
+ */
+
+import { overlapCrop } from './tiling.js';
+
+const SHADER = /* wgsl */ `
+struct Params {
+  tileW: u32,
+  tileH: u32,
+  destX: u32,
+  destY: u32,
+  outputScale: f32,
+}
+
+@group(0) @binding(0) var<storage, read> chw: array<f32>;
+@group(0) @binding(1) var<uniform> params: Params;
+
+@vertex fn vs(@builtin(vertex_index) vi: u32) -> @builtin(position) vec4f {
+  var pos = array<vec2f, 6>(
+    vec2f(-1, -1), vec2f(1, -1), vec2f(-1, 1),
+    vec2f(-1, 1),  vec2f(1, -1), vec2f(1, 1),
+  );
+  return vec4f(pos[vi], 0, 1);
+}
+
+@fragment fn fs(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+  let x = u32(pos.x) - params.destX;
+  let y = u32(pos.y) - params.destY;
+  let plane = params.tileW * params.tileH;
+  let s = params.outputScale;
+  return vec4f(
+    clamp(chw[y * params.tileW + x] * s, 0.0, 1.0),
+    clamp(chw[plane + y * params.tileW + x] * s, 0.0, 1.0),
+    clamp(chw[2u * plane + y * params.tileW + x] * s, 0.0, 1.0),
+    1.0,
+  );
+}
+`;
+
+const PARAMS_SIZE = 5 * 4; // 5 u32/f32 fields × 4 bytes, padded to 16-byte alignment
+const PARAMS_BUFFER_SIZE = Math.ceil(PARAMS_SIZE / 16) * 16;
+
+/**
+ * Thrown by GpuTileRenderer.configure() when the requested canvas/texture
+ * dimensions exceed the device's maxTextureDimension2D. Callers can catch
+ * this and fall back to a CPU readback path instead of silently producing
+ * a black canvas (which is what WebGPU does on validation failure).
+ */
+export class GpuOutputTooLargeError extends Error {
+  constructor(width, height, maxDim) {
+    super(`Output ${width}×${height} exceeds GPU max texture dimension (${maxDim}).`);
+    this.name = 'GpuOutputTooLargeError';
+    this.width = width;
+    this.height = height;
+    this.maxDim = maxDim;
+  }
+}
+
+export class GpuTileRenderer {
+  #device;
+  #pipeline = null;
+  #bindGroupLayout = null;
+  #paramsBuffer = null;
+  #outputTexture = null;
+  #canvasCtx = null;
+  #canvasFormat;
+  #width = 0;
+  #height = 0;
+  #lost = false;
+
+  constructor(device) {
+    this.#device = device;
+    this.#canvasFormat = navigator.gpu.getPreferredCanvasFormat();
+    this.#initPipeline();
+    this.#device.lost.then((info) => {
+      this.#lost = true;
+      console.warn('[GpuTileRenderer] GPU device lost:', info.message);
+    });
+  }
+
+  get lost() { return this.#lost; }
+
+  /**
+   * @throws {GpuOutputTooLargeError} when width/height exceeds
+   *   device.limits.maxTextureDimension2D. Both the WebGPU canvas surface
+   *   and the persistent output texture are subject to that cap; exceeding
+   *   it causes WebGPU to silently produce a black canvas, so we surface
+   *   the failure up-front instead.
+   */
+  configure(canvas, width, height) {
+    const maxDim = this.#device.limits?.maxTextureDimension2D ?? 8192;
+    if (width > maxDim || height > maxDim) {
+      throw new GpuOutputTooLargeError(width, height, maxDim);
+    }
+
+    this.#canvasCtx = canvas.getContext('webgpu');
+    this.#canvasCtx.configure({
+      device: this.#device,
+      format: this.#canvasFormat,
+      alphaMode: 'opaque',
+      usage: GPUTextureUsage.RENDER_ATTACHMENT | GPUTextureUsage.COPY_DST,
+    });
+
+    this.#width = width;
+    this.#height = height;
+
+    this.#outputTexture?.destroy();
+    this.#outputTexture = this.#device.createTexture({
+      size: [width, height],
+      format: this.#canvasFormat,
+      usage:
+        GPUTextureUsage.RENDER_ATTACHMENT |
+        GPUTextureUsage.COPY_SRC |
+        GPUTextureUsage.TEXTURE_BINDING,
+    });
+
+    // Clear the persistent texture to black
+    const encoder = this.#device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [{
+        view: this.#outputTexture.createView(),
+        loadOp: 'clear',
+        clearValue: { r: 0, g: 0, b: 0, a: 1 },
+        storeOp: 'store',
+      }],
+    });
+    pass.end();
+    this.#device.queue.submit([encoder.finish()]);
+  }
+
+  /**
+   * Render one tile from an ORT GPU buffer onto the persistent output texture.
+   *
+   * @param {GPUBuffer} gpuBuffer - ORT output tensor's GPUBuffer (CHW float32)
+   * @param {number} tileW - output tile width in pixels
+   * @param {number} tileH - output tile height in pixels
+   * @param {number} destX - destination X on the output texture
+   * @param {number} destY - destination Y on the output texture
+   * @param {number} overlap - overlap in output-space pixels
+   * @param {number} outputScale - multiply CHW values by this (1.0 for 0-1 models, 1/255 for 0-255 models)
+   */
+  renderTile(gpuBuffer, tileW, tileH, destX, destY, overlap, outputScale) {
+    const scissor = overlapCrop(destX, destY, tileW, tileH, this.#width, this.#height, overlap);
+    if (scissor.w <= 0 || scissor.h <= 0) return;
+
+    // Write tile params to uniform buffer
+    const paramsData = new ArrayBuffer(PARAMS_BUFFER_SIZE);
+    const u32 = new Uint32Array(paramsData);
+    const f32 = new Float32Array(paramsData);
+    u32[0] = tileW;
+    u32[1] = tileH;
+    u32[2] = destX;
+    u32[3] = destY;
+    f32[4] = outputScale;
+    this.#device.queue.writeBuffer(this.#paramsBuffer, 0, paramsData);
+
+    const bindGroup = this.#device.createBindGroup({
+      layout: this.#bindGroupLayout,
+      entries: [
+        { binding: 0, resource: { buffer: gpuBuffer } },
+        { binding: 1, resource: { buffer: this.#paramsBuffer } },
+      ],
+    });
+
+    const encoder = this.#device.createCommandEncoder();
+    const pass = encoder.beginRenderPass({
+      colorAttachments: [{
+        view: this.#outputTexture.createView(),
+        loadOp: 'load',
+        storeOp: 'store',
+      }],
+    });
+
+    pass.setPipeline(this.#pipeline);
+    pass.setBindGroup(0, bindGroup);
+    pass.setViewport(destX, destY, tileW, tileH, 0, 1);
+    pass.setScissorRect(scissor.x, scissor.y, scissor.w, scissor.h);
+    pass.draw(6);
+    pass.end();
+
+    this.#device.queue.submit([encoder.finish()]);
+  }
+
+  /** Copy the persistent output texture to the canvas for display / toBlob. */
+  presentToCanvas() {
+    const canvasTex = this.#canvasCtx.getCurrentTexture();
+    const encoder = this.#device.createCommandEncoder();
+    encoder.copyTextureToTexture(
+      { texture: this.#outputTexture },
+      { texture: canvasTex },
+      [this.#width, this.#height],
+    );
+    this.#device.queue.submit([encoder.finish()]);
+  }
+
+  destroy() {
+    this.#outputTexture?.destroy();
+    this.#outputTexture = null;
+    this.#paramsBuffer?.destroy();
+    this.#paramsBuffer = null;
+  }
+
+  #initPipeline() {
+    const module = this.#device.createShaderModule({ code: SHADER });
+
+    this.#bindGroupLayout = this.#device.createBindGroupLayout({
+      entries: [
+        {
+          binding: 0,
+          visibility: GPUShaderStage.FRAGMENT,
+          buffer: { type: 'read-only-storage' },
+        },
+        {
+          binding: 1,
+          visibility: GPUShaderStage.FRAGMENT,
+          buffer: { type: 'uniform' },
+        },
+      ],
+    });
+
+    const pipelineLayout = this.#device.createPipelineLayout({
+      bindGroupLayouts: [this.#bindGroupLayout],
+    });
+
+    this.#pipeline = this.#device.createRenderPipeline({
+      layout: pipelineLayout,
+      vertex: { module, entryPoint: 'vs' },
+      fragment: {
+        module,
+        entryPoint: 'fs',
+        targets: [{ format: this.#canvasFormat }],
+      },
+    });
+
+    this.#paramsBuffer = this.#device.createBuffer({
+      size: PARAMS_BUFFER_SIZE,
+      usage: GPUBufferUsage.UNIFORM | GPUBufferUsage.COPY_DST,
+    });
+  }
+}

features/upscaler/engine/tiling.js

@@ -0,0 +1,168 @@
+/**
+ * Tiling utilities — dividing images into overlapping tiles and
+ * reassembling them with seam-free stitching.
+ */
+
+/**
+ * Compute the interior region a tile should contribute, trimming overlap
+ * margins at seams. Returns a canvas-space rect { x, y, w, h }.
+ *
+ * Each side touching another tile is trimmed by half the overlap;
+ * edges against the canvas boundary keep their full extent.
+ */
+export function overlapCrop(destX, destY, tileW, tileH, canvasW, canvasH, overlap) {
+  const cropL = destX > 0 ? (overlap / 2) | 0 : 0;
+  const cropT = destY > 0 ? (overlap / 2) | 0 : 0;
+  const cropR = (destX + tileW) < canvasW ? (overlap / 2) | 0 : 0;
+  const cropB = (destY + tileH) < canvasH ? (overlap / 2) | 0 : 0;
+  return {
+    x: destX + cropL,
+    y: destY + cropT,
+    w: tileW - cropL - cropR,
+    h: tileH - cropT - cropB,
+  };
+}
+
+/**
+ * Build the grid of overlapping source tiles that cover the image.
+ * Returns an array of { x, y, w, h } in source-pixel coordinates.
+ */
+export function buildTileGrid(srcW, srcH, tileSize, overlap) {
+  const noTiling = tileSize <= 0;
+  const size = noTiling ? Math.max(srcW, srcH) : tileSize;
+  const step = noTiling ? size : size - overlap;
+  const tiles = [];
+  for (let ty = 0; ty < srcH; ty += step) {
+    for (let tx = 0; tx < srcW; tx += step) {
+      tiles.push({
+        x: tx, y: ty,
+        w: Math.min(size, srcW - tx),
+        h: Math.min(size, srcH - ty),
+      });
+    }
+  }
+  return tiles;
+}
+
+/** Write an ImageData to the canvas, trimming overlap margins at tile seams. */
+export function pasteTileCropped(ctx, imgData, dx, dy, canvasW, canvasH, overlap) {
+  const crop = overlapCrop(dx, dy, imgData.width, imgData.height, canvasW, canvasH, overlap);
+  if (crop.w <= 0 || crop.h <= 0) return;
+  ctx.putImageData(imgData, dx, dy, crop.x - dx, crop.y - dy, crop.w, crop.h);
+}
+
+// ─── Gaussian tile blending ────────────────────────────────────────────
+// For diffusion-style refiners (e.g. TinySR) the tile-edge artifacts are
+// strong enough that the half-overlap hard crop above shows visible seams.
+// `makeGaussianWeights2D` produces a per-pixel weight kernel matching
+// TinySR's pipeline.js: variance=0.01 scaled by tile^2 so the shape is
+// scale-invariant. Engines that opt in maintain a float32 accumulator and
+// a contribution buffer, then divide once at the end.
+
+/**
+ * 2D Gaussian weight kernel for tile blending. Returns a Float32Array of
+ * length tileH*tileW with pixel-space weights (single channel — apply the
+ * same weight to all 3 colour channels at accumulation time).
+ *
+ * Matches the formula in tinysr/tools/web/pipeline.js:makeGaussianWeights
+ * so the visual behaviour ports over directly.
+ */
+export function makeGaussianWeights2D(tileH, tileW) {
+  const variance = 0.01;
+  const midX = (tileW - 1) / 2;
+  const midY = tileH / 2;  // intentional asymmetry — matches the upstream
+  const denomX = tileW * tileW * 2 * variance;
+  const denomY = tileH * tileH * 2 * variance;
+  const norm = 1 / Math.sqrt(2 * Math.PI * variance);
+  const xs = new Float32Array(tileW);
+  const ys = new Float32Array(tileH);
+  for (let i = 0; i < tileW; i++) xs[i] = norm * Math.exp(-((i - midX) ** 2) / denomX);
+  for (let i = 0; i < tileH; i++) ys[i] = norm * Math.exp(-((i - midY) ** 2) / denomY);
+  const out = new Float32Array(tileH * tileW);
+  for (let y = 0; y < tileH; y++) {
+    const yw = ys[y];
+    const rowOff = y * tileW;
+    for (let x = 0; x < tileW; x++) out[rowOff + x] = yw * xs[x];
+  }
+  return out;
+}
+
+/**
+ * Accumulate one model-output tile into the canvas-sized float32 buffers
+ * `accumRGB` (3*outW*outH, RGB-planar) and `accumW` (outW*outH), weighted
+ * by `weights`. `srcRGB` is in [0, modelValueRange]; `layout` is 'chw' for
+ * RGB-planar input or 'hwc' for RGB-interleaved. Crops to the top-left
+ * (tileW × tileH) region if the model output was padded.
+ */
+export function accumulateGaussianTile(
+  accumRGB, accumW, outW, outH,
+  srcRGB, srcStrideW, srcStrideH,
+  tileW, tileH, destX, destY,
+  weights, valueScale, layout,
+) {
+  const outPlane = outW * outH;
+  const isCHW = layout === 'chw';
+  const chanStride = isCHW ? srcStrideW * srcStrideH : 1;
+  const colStride = isCHW ? 1 : 3;
+  const rowStride = isCHW ? srcStrideW : srcStrideW * 3;
+  for (let y = 0; y < tileH; y++) {
+    const dy = destY + y;
+    if (dy < 0 || dy >= outH) continue;
+    const wRow = y * tileW;
+    const sRow = y * rowStride;
+    const dRow = dy * outW;
+    for (let x = 0; x < tileW; x++) {
+      const dx = destX + x;
+      if (dx < 0 || dx >= outW) continue;
+      const w = weights[wRow + x];
+      const srcIdx = sRow + x * colStride;
+      const dstIdx = dRow + dx;
+      accumRGB[dstIdx]                += srcRGB[srcIdx]                  * valueScale * w;
+      accumRGB[outPlane + dstIdx]     += srcRGB[srcIdx + chanStride]     * valueScale * w;
+      accumRGB[2 * outPlane + dstIdx] += srcRGB[srcIdx + 2 * chanStride] * valueScale * w;
+      accumW[dstIdx] += w;
+    }
+  }
+}
+
+/**
+ * Divide accumulated RGB by weights inside a rectangular region of the
+ * output canvas, clamp to [0,255], and write via putImageData. Called
+ * after each tile accumulates so the user sees progressive preview; the
+ * last tile to touch any given pixel ends up writing the final value
+ * (which is the same value a single full-canvas finalize would produce).
+ *
+ * Clips the region to the canvas bounds, so callers can pass tile-sized
+ * rects without worrying about edge tiles.
+ */
+export function finalizeGaussianRegion(ctx, outX, outY, regionW, regionH, outW, outH, accumRGB, accumW) {
+  const x0 = Math.max(0, outX | 0);
+  const y0 = Math.max(0, outY | 0);
+  const x1 = Math.min(outW, (outX + regionW) | 0);
+  const y1 = Math.min(outH, (outY + regionH) | 0);
+  const w = x1 - x0;
+  const h = y1 - y0;
+  if (w <= 0 || h <= 0) return;
+  const imgData = ctx.createImageData(w, h);
+  const px = imgData.data;
+  const plane = outW * outH;
+  for (let y = 0; y < h; y++) {
+    const srcRow = (y0 + y) * outW;
+    const dstRow = y * w;
+    for (let x = 0; x < w; x++) {
+      // accumW is zero only if no tile covered this pixel — shouldn't
+      // happen for pixels reached by this call, but guard against NaN.
+      const srcIdx = srcRow + x0 + x;
+      const wAcc = accumW[srcIdx] || 1;
+      const r = accumRGB[srcIdx] / wAcc;
+      const g = accumRGB[plane + srcIdx] / wAcc;
+      const b = accumRGB[2 * plane + srcIdx] / wAcc;
+      const o = (dstRow + x) * 4;
+      px[o]     = r < 0 ? 0 : r > 255 ? 255 : (r + 0.5) | 0;
+      px[o + 1] = g < 0 ? 0 : g > 255 ? 255 : (g + 0.5) | 0;
+      px[o + 2] = b < 0 ? 0 : b > 255 ? 255 : (b + 0.5) | 0;
+      px[o + 3] = 255;
+    }
+  }
+  ctx.putImageData(imgData, x0, y0);
+}

features/upscaler/engine/upscaler-engine.js

@@ -0,0 +1,924 @@
+/**
+ * UpscalerEngine — tiled ONNX super-resolution inference.
+ * Downloads a model, creates a session, runs tiled inference on images.
+ * Uses Canvas 2D for pixel I/O in the WASM/WebGL path; GPU paths avoid readback.
+ */
+
+import { fetchWithProgress } from 'lib/fetch-progress';
+import { GpuTileRenderer, GpuOutputTooLargeError } from './gpu-tile-renderer.js';
+import { GpuFrameExtractor } from './gpu-frame-extractor.js';
+import {
+  buildTileGrid,
+  pasteTileCropped,
+  overlapCrop,
+  makeGaussianWeights2D,
+  accumulateGaussianTile,
+  finalizeGaussianRegion,
+} from './tiling.js';
+import { readMetaEntry, isFp16InputType } from 'lib/onnx-meta';
+import { dispatchBackendEvent } from 'lib/backend-events';
+import { loadSession } from 'lib/backend';
+
+const DEFAULT_SCALE = 4;
+const DEFAULT_OVERLAP = 16;
+
+function clampByte(v) {
+  return v < 0 ? 0 : v > 255 ? 255 : (v + 0.5) | 0;
+}
+
+// Normalize the various aliases the caller might pass for backend intent.
+// New code should pass 'gpu' or 'cpu' directly; the legacy ORT-Web strings
+// 'webgpu' and 'wasm' are still accepted so a half-migrated UI keeps working.
+function normalizeIntent(value) {
+  if (value === 'webgpu' || value === 'gpu') return 'gpu';
+  if (value === 'wasm'   || value === 'cpu') return 'cpu';
+  return 'cpu';
+}
+
+function yieldToEventLoop() {
+  return new Promise(resolve => {
+    const ch = new MessageChannel();
+    ch.port1.onmessage = resolve;
+    ch.port2.postMessage(undefined);
+  });
+}
+
+function clampCoord(v, max) {
+  if (v < 0) return 0;
+  if (v > max) return max;
+  return v;
+}
+
+/**
+ * Extract a tile from ImageData as Float32 in CHW layout
+ * (channels-first: [R plane, G plane, B plane]), with edge replication padding.
+ *
+ * @param {number} valueScale - multiply each pixel byte by this (e.g. 1/255 for [0,1] output)
+ */
+function extractTileNCHW(imageData, tx, ty, tw, th, padW, padH, valueScale) {
+  const { data, width } = imageData;
+  const out = new Float32Array(3 * padH * padW);
+  const planeSize = padH * padW;
+  const maxX = tx + tw - 1;
+  const maxY = ty + th - 1;
+  for (let row = 0; row < padH; row++) {
+    for (let col = 0; col < padW; col++) {
+      const srcX = clampCoord(tx + col, maxX);
+      const srcY = clampCoord(ty + row, maxY);
+      const srcIdx = (srcY * width + srcX) * 4;
+      const dstIdx = row * padW + col;
+      out[dstIdx]                 = data[srcIdx]     * valueScale;
+      out[planeSize + dstIdx]     = data[srcIdx + 1] * valueScale;
+      out[2 * planeSize + dstIdx] = data[srcIdx + 2] * valueScale;
+    }
+  }
+  return out;
+}
+
+/**
+ * Extract a tile from ImageData as Float32 in HWC layout
+ * (channels-last: [R,G,B, R,G,B, ...]), with edge replication padding.
+ */
+function extractTileNHWC(imageData, tx, ty, tw, th, padW, padH, valueScale) {
+  const { data, width } = imageData;
+  const out = new Float32Array(padH * padW * 3);
+  const maxX = tx + tw - 1;
+  const maxY = ty + th - 1;
+  for (let row = 0; row < padH; row++) {
+    for (let col = 0; col < padW; col++) {
+      const srcX = clampCoord(tx + col, maxX);
+      const srcY = clampCoord(ty + row, maxY);
+      const srcIdx = (srcY * width + srcX) * 4;
+      const dstIdx = (row * padW + col) * 3;
+      out[dstIdx] = data[srcIdx] * valueScale;
+      out[dstIdx + 1] = data[srcIdx + 1] * valueScale;
+      out[dstIdx + 2] = data[srcIdx + 2] * valueScale;
+    }
+  }
+  return out;
+}
+
+/**
+ * Convert CHW float32 data (channels-first: [R plane, G plane, B plane])
+ * back into an RGBA ImageData. Inverse of extractTileCHW.
+ *
+ * @param {number} valueScale - multiply each CHW value by this to get [0,255] bytes
+ */
+function chwToImageData(chwData, width, height, valueScale) {
+  const imgData = new ImageData(width, height);
+  const px = imgData.data;
+  const planeSize = width * height;
+  for (let row = 0; row < height; row++) {
+    for (let col = 0; col < width; col++) {
+      const srcIdx = row * width + col;
+      const dstIdx = srcIdx * 4;
+      px[dstIdx]     = clampByte(chwData[srcIdx] * valueScale);
+      px[dstIdx + 1] = clampByte(chwData[planeSize + srcIdx] * valueScale);
+      px[dstIdx + 2] = clampByte(chwData[2 * planeSize + srcIdx] * valueScale);
+      px[dstIdx + 3] = 255;
+    }
+  }
+  return imgData;
+}
+
+/**
+ * Convert HWC float32 data (channels-last: [R,G,B, R,G,B, …] per pixel)
+ * into an RGBA ImageData. Used when the WebGPU EP returns NHWC-ordered output.
+ */
+function hwcToImageData(hwcData, width, height, valueScale) {
+  const imgData = new ImageData(width, height);
+  const px = imgData.data;
+  for (let row = 0; row < height; row++) {
+    for (let col = 0; col < width; col++) {
+      const srcIdx = (row * width + col) * 3;
+      const dstIdx = (row * width + col) * 4;
+      px[dstIdx]     = clampByte(hwcData[srcIdx]     * valueScale);
+      px[dstIdx + 1] = clampByte(hwcData[srcIdx + 1] * valueScale);
+      px[dstIdx + 2] = clampByte(hwcData[srcIdx + 2] * valueScale);
+      px[dstIdx + 3] = 255;
+    }
+  }
+  return imgData;
+}
+
+// ---------------------------------------------------------------------------
+// fp16 packing — ORT-Web fp16 tensors take/return a Uint16Array of IEEE-754
+// binary16 bit patterns. We use the platform's Float16Array when available
+// (Chromium 122+, Safari 18.2+) and fall back to a manual packer otherwise.
+// fp16 only kicks in when the model is declared fp16; everything else stays
+// fp32 with no extra work.
+// ---------------------------------------------------------------------------
+
+const HAS_NATIVE_FLOAT16 = typeof globalThis.Float16Array === 'function';
+
+function packFloat32ToFloat16Bits(f32) {
+  if (HAS_NATIVE_FLOAT16) {
+    const f16 = new globalThis.Float16Array(f32);
+    return new Uint16Array(f16.buffer, f16.byteOffset, f16.length);
+  }
+  const out = new Uint16Array(f32.length);
+  // f32arr is a Float32Array; reinterpret as Uint32 to read bit fields.
+  const u32 = new Uint32Array(f32.buffer, f32.byteOffset, f32.length);
+  for (let i = 0; i < f32.length; i++) {
+    const x = u32[i];
+    const sign = (x >>> 16) & 0x8000;
+    const expRaw = (x >>> 23) & 0xff;
+    const mantissa = x & 0x7fffff;
+    let exp = expRaw - 127 + 15;
+    if (expRaw === 0xff) {
+      out[i] = sign | 0x7c00 | (mantissa ? 0x200 : 0);
+    } else if (exp >= 31) {
+      out[i] = sign | 0x7c00;
+    } else if (exp <= 0) {
+      if (exp < -10) {
+        out[i] = sign;
+      } else {
+        const m = mantissa | 0x800000;
+        out[i] = sign | (m >>> (14 - exp));
+      }
+    } else {
+      out[i] = sign | (exp << 10) | (mantissa >>> 13);
+    }
+  }
+  return out;
+}
+
+function unpackFloat16BitsToFloat32(u16) {
+  if (HAS_NATIVE_FLOAT16) {
+    const f16 = new globalThis.Float16Array(u16.buffer, u16.byteOffset, u16.length);
+    return new Float32Array(f16);
+  }
+  const out = new Float32Array(u16.length);
+  const u32 = new Uint32Array(out.buffer);
+  for (let i = 0; i < u16.length; i++) {
+    const h = u16[i];
+    const sign = (h & 0x8000) << 16;
+    const exp = (h >> 10) & 0x1f;
+    const mantissa = h & 0x3ff;
+    if (exp === 0) {
+      if (mantissa === 0) {
+        u32[i] = sign;
+      } else {
+        let e = -14;
+        let m = mantissa;
+        while (!(m & 0x400)) { m <<= 1; e--; }
+        m &= 0x3ff;
+        u32[i] = sign | ((e + 127) << 23) | (m << 13);
+      }
+    } else if (exp === 0x1f) {
+      u32[i] = sign | 0x7f800000 | (mantissa << 13);
+    } else {
+      u32[i] = sign | ((exp - 15 + 127) << 23) | (mantissa << 13);
+    }
+  }
+  return out;
+}
+
+// TODO(ort-web): remove this whole block when ORT-Web fixes
+// program-manager.ts normalizeDispatchGroupSize, which today does a lossy
+// rewrite of dispatch shape (X, 1, 1) → (sqrt(X), sqrt(X), 1) and breaks
+// the (X=col, Y=row) contract Conv2DMatMul and MatMul shaders expect.
+//
+// What goes wrong: ORT reshuffles whenever X > maxComputeWorkgroupsPerDimension
+// (65535). Conv2DMatMul/MatMul then treat the synthesised Y as a row-tile
+// index, the row-bounds guard rejects ~99% of writes, and the output
+// buffer is left mostly uninitialised — visible as scrambled output for
+// any model whose post-PixelShuffle activation has H*W > ~2.1M pixels.
+//
+// Workaround: monkey-patch device.createShaderModule to recover the
+// effective column from both workgroup ids when dim_a_outer is small
+// enough that the original dispatch Y was 1.
+
+const WGPU_DISPATCH_FIX_INSTALLED = Symbol.for('updraft.wgslDispatchOverflowFix');
+
+const CONV2D_MM_FIND =
+  'let globalRowStart = i32(workgroupId.y) * 32;\n' +
+  '    let globalColStart = i32(workgroupId.x) * 32;';
+const CONV2D_MM_REPLACE =
+  'let p_isSmallA = uniforms.dim_a_outer <= 32;\n' +
+  '    let p_totalCols = (u32(uniforms.dim_b_outer) + 31u) / 32u;\n' +
+  '    let p_dispatchX = u32(ceil(sqrt(f32(p_totalCols))));\n' +
+  '    let p_effectiveCol = workgroupId.x + workgroupId.y * p_dispatchX;\n' +
+  '    let globalRowStart = select(i32(workgroupId.y) * 32, 0, p_isSmallA);\n' +
+  '    let globalColStart = select(i32(workgroupId.x) * 32, i32(p_effectiveCol) * 32, p_isSmallA);';
+
+const MATMUL_FIND =
+  'let globalRow =i32(globalId.y) * rowPerThread;\n' +
+  '  let globalCol = i32(globalId.x);';
+const MATMUL_REPLACE =
+  'let p_isSmallA = uniforms.dim_a_outer <= 8;\n' +
+  '  let p_totalVecCols = (u32(uniforms.dim_b_outer) + 31u) / 32u;\n' +
+  '  let p_dispatchX = u32(ceil(sqrt(f32(p_totalVecCols))));\n' +
+  '  let p_effectiveWgX = workgroupId.x + workgroupId.y * p_dispatchX;\n' +
+  '  let globalRow = select(i32(globalId.y) * rowPerThread, i32(localId.y) * rowPerThread, p_isSmallA);\n' +
+  '  let globalCol = select(i32(globalId.x), i32(p_effectiveWgX) * 8 + i32(localId.x), p_isSmallA);';
+
+function patchWGSLForDispatchOverflow(code, label) {
+  if (label === 'Conv2DMatMul' && code.includes(CONV2D_MM_FIND)) {
+    return code.split(CONV2D_MM_FIND).join(CONV2D_MM_REPLACE);
+  }
+  if (label === 'MatMul' && code.includes(MATMUL_FIND)) {
+    return code.split(MATMUL_FIND).join(MATMUL_REPLACE);
+  }
+  return code;
+}
+
+function installWebGPUDispatchFix(device) {
+  if (!device || device[WGPU_DISPATCH_FIX_INSTALLED]) return false;
+  const origCreate = device.createShaderModule.bind(device);
+  device.createShaderModule = (descriptor) => {
+    const patched = patchWGSLForDispatchOverflow(descriptor.code, descriptor.label || '');
+    if (patched === descriptor.code) return origCreate(descriptor);
+    return origCreate({ ...descriptor, code: patched });
+  };
+  device[WGPU_DISPATCH_FIX_INSTALLED] = true;
+  return true;
+}
+
+export class UpscalerEngine {
+  #session = null;
+  #modelBuffer = null;
+  #modelUrl;
+  #scale;
+  #overlap;
+  #modelValueRange;
+  #modelLayout;
+  #modelInputMultiple;
+  #modelPrecision;
+  #upscaleBefore;
+  #tileBlend;
+  #profiling = false;
+  // What the user actually got: a label like 'web-webgpu', 'web-wasm',
+  // 'native-coreml/MLProgram', 'native-cpu'. Set by loadSession on every
+  // successful load AND kept current by #backendListener for the rest of
+  // the session — without that, runtime EP fallbacks (e.g. native worker
+  // drops from CoreML to CPU mid-tile) would leave it stale and the
+  // loadModel early-return path would mis-announce on the next run.
+  #realizedBackend = null;
+  #backendListener = null;
+  // What the caller asked for ('gpu' | 'cpu'). The loadModel short-circuit
+  // keys off this so the engine doesn't pointlessly reload when the user
+  // re-runs with the same intent.
+  #intent = null;
+  #device = null;
+  #gpuRenderer = null;
+  #gpuExtractor = null;
+
+  constructor({
+    modelUrl,
+    scale = DEFAULT_SCALE,
+    overlap = DEFAULT_OVERLAP,
+    modelValueRange = 1,
+    modelLayout = 'nchw',
+    modelInputMultiple = 1,
+    modelPrecision = 'fp32',
+    // upscaleBefore=true: the model operates in HR pixel space (e.g. a
+    // refiner that takes a pre-upsampled LR image and returns an HR image
+    // at the SAME resolution). Tile coordinates and modelInputMultiple
+    // stay in LR-pixel units (consistent with regular SR models advertised
+    // with scale > 1); the engine bicubic-upsamples LR->HR before tile
+    // extraction and multiplies extraction coords by `scale` so the
+    // backend sees HR tensors. All GPU fast paths remain viable — they're
+    // coordinate-agnostic.
+    upscaleBefore = false,
+    // tileBlend='gaussian' replaces the default half-overlap hard crop
+    // with float32 Gaussian-weighted accumulation. Use for diffusion-
+    // style models with visible tile seams. Costs ~16 bytes/HR-pixel
+    // working memory and forces the CPU readback path (the GPU output
+    // renderer writes directly to the bgra8unorm canvas surface, which
+    // can't host the float32 accumulator).
+    tileBlend = 'overlapCrop',
+    profile = false,
+  }) {
+    this.#modelUrl = modelUrl;
+    this.#scale = scale;
+    this.#overlap = overlap;
+    this.#modelValueRange = modelValueRange;
+    this.#modelLayout = modelLayout === 'nhwc' ? 'nhwc' : 'nchw';
+    this.#modelInputMultiple = Number.isFinite(modelInputMultiple) ? Math.max(1, Math.floor(modelInputMultiple)) : 1;
+    this.#modelPrecision = modelPrecision === 'fp16' ? 'fp16' : 'fp32';
+    this.#upscaleBefore = !!upscaleBefore;
+    this.#tileBlend = tileBlend === 'gaussian' ? 'gaussian' : 'overlapCrop';
+    this.#profiling = profile;
+  }
+
+  get scale() { return this.#scale; }
+  // The realized backend label (e.g. 'web-webgpu', 'native-coreml/MLProgram').
+  // For UI display via friendlyBackend; not used for identity checks.
+  get realizedBackend() { return this.#realizedBackend; }
+  // The user's load intent ('gpu' | 'cpu'). EnginePool and loadModel both
+  // key off this for "do we already have the right session?" decisions.
+  get intent() { return this.#intent; }
+  get isLoaded() { return this.#session !== null; }
+  get profiling() { return this.#profiling; }
+  set profiling(v) { this.#profiling = !!v; }
+  get modelPrecision() { return this.#modelPrecision; }
+
+  async loadModel(intent = 'cpu', onProgress) {
+    if (onProgress != null && typeof onProgress !== 'function') {
+      console.warn('[UpscalerEngine] Ignoring non-function onProgress callback.', {
+        type: typeof onProgress,
+        value: onProgress,
+        intent,
+      });
+    }
+    intent = normalizeIntent(intent);
+    const report = typeof onProgress === 'function' ? onProgress : null;
+    if (this.#session && this.#intent === intent) {
+      // Reusing the existing session; re-announce so per-run backend
+      // trackers (status bar's "Done via X" line) record a success this run.
+      if (this.#realizedBackend) {
+        dispatchBackendEvent({ kind: 'success', backend: this.#realizedBackend });
+      }
+      return;
+    }
+    this.#releaseSession();
+
+    if (!this.#modelBuffer) {
+      this.#modelBuffer = await fetchWithProgress(this.#modelUrl, report);
+    }
+
+    report?.(1, 'Loading model into runtime\u2026');
+
+    // The GPU fast paths (zero-copy input extract via GpuFrameExtractor and
+    // zero-readback output render via GpuTileRenderer) both assume fp32
+    // storage buffers in their WGSL shaders. fp16 models go through the
+    // standard CPU readback path: ONNX still runs on the GPU, but the tile
+    // tensors round-trip through the CPU as Uint16 bit patterns. We make the
+    // initial decision from the configured precision, then re-validate after
+    // the session is created (the model's declared input dtype is the source
+    // of truth — see comment below).
+    let canUseGpuFastPath =
+      this.#modelPrecision !== 'fp16' &&
+      this.#modelLayout === 'nchw' &&
+      this.#modelInputMultiple === 1;
+    const sessionLoadOpts = { profile: this.#profiling };
+    if (intent === 'gpu' && canUseGpuFastPath) {
+      sessionLoadOpts.preferredOutputLocation = 'gpu-buffer';
+    }
+
+    // loadSession picks between native (desktop bridge) and web (ort-web)
+    // based on whether __nativeOrt is exposed; it dispatches its own
+    // attempt/fallback/success backend-events so we don't need to here.
+    const { session, realizedBackend } = await loadSession(this.#modelBuffer, intent, sessionLoadOpts);
+    this.#session = session;
+    this.#intent = intent;
+    this.#realizedBackend = realizedBackend;
+    this.#trackRealizedBackend();
+
+    // Self-correct modelPrecision from the model's declared input dtype.
+    // Stale custom-model records (e.g. uploaded before fp16 support existed,
+    // or before the inspector started reading the right metadata field)
+    // can carry the wrong precision; the model graph itself doesn't lie.
+    // Without this, the engine would build fp32 tensors for an fp16 model
+    // and ORT would throw "Unexpected input data type" at the first run.
+    const sessionInputName = this.#session.inputNames?.[0];
+    const sessionInMeta = readMetaEntry(this.#session.inputMetadata, sessionInputName, 0);
+    const declaredInputType = sessionInMeta?.type;
+    const detectedPrecision = isFp16InputType(declaredInputType)
+      ? 'fp16'
+      : 'fp32';
+    if (detectedPrecision !== this.#modelPrecision) {
+      console.warn(
+        `[UpscalerEngine] Configured precision (${this.#modelPrecision}) disagrees with the model's declared input dtype (${declaredInputType}); using ${detectedPrecision}. ` +
+        `If this is a saved custom model, edit it and set Precision = ${detectedPrecision} to make this explicit.`,
+      );
+      this.#modelPrecision = detectedPrecision;
+      canUseGpuFastPath =
+        this.#modelPrecision !== 'fp16' &&
+        this.#modelLayout === 'nchw' &&
+        this.#modelInputMultiple === 1;
+    }
+
+    if (this.#realizedBackend === 'web-webgpu') {
+      const ort = globalThis.ort;
+      try {
+        this.#device = await ort.env.webgpu.device;
+        // installWebGPUDispatchFix is idempotent across model loads. If we
+        // install it here for the first time, the just-created session's
+        // shader modules were compiled by ORT-Web BEFORE the wrapper
+        // existed — release and recreate so all shaders go through it now.
+        if (installWebGPUDispatchFix(this.#device)) {
+          await this.#session.release();
+          const reloaded = await loadSession(this.#modelBuffer, intent, sessionLoadOpts);
+          this.#session = reloaded.session;
+          this.#realizedBackend = reloaded.realizedBackend;
+        }
+        if (canUseGpuFastPath) {
+          this.#gpuRenderer = new GpuTileRenderer(this.#device);
+        }
+        if (canUseGpuFastPath && typeof ort.Tensor.fromGpuBuffer === 'function') {
+          this.#gpuExtractor = new GpuFrameExtractor(this.#device);
+        }
+      } catch (err) {
+        console.warn('[UpscalerEngine] GPU pipeline init failed, using CPU fallback:', err);
+        this.#device = null;
+        this.#gpuRenderer = null;
+        this.#gpuExtractor = null;
+      }
+    }
+
+    this.#modelBuffer = null;
+    report?.(1, 'Model loaded.');
+  }
+
+  async upscale(img, tileSize, { onTile, signal } = {}) {
+    if (!this.#session) throw new Error('Model not loaded — call loadModel() first');
+
+    const perf = {
+      setup: 0,
+      extract: 0,
+      inference: 0,
+      inferenceEstimated: 0,
+      readback: 0,
+      gpuRender: 0,
+      writeTile: 0,
+      dispose: 0,
+      total: 0,
+    };
+    const tTotal = performance.now();
+
+    const scale = this.#scale;
+    const overlap = this.#overlap;
+    const srcW = img.videoWidth ?? img.width;
+    const srcH = img.videoHeight ?? img.height;
+    const outW = srcW * scale;
+    const outH = srcH * scale;
+    const gaussianBlend = this.#tileBlend === 'gaussian';
+    // The GPU output renderer writes via fragment shader directly to the
+    // canvas's bgra8unorm surface, so it can't host the float32
+    // accumulator Gaussian blending needs. Force the CPU readback path.
+    let useGpu = this.#gpuRenderer !== null && !gaussianBlend;
+    const useGpuInput = this.#gpuExtractor !== null;
+
+    // In upscaleBefore mode the model takes HR-sized tiles, so we
+    // multiply all input-side tile coords/dims by `scale`. The output
+    // side already uses HR coords (tx*scale, outTW=tw*scale, …) for
+    // every model, so the GPU output renderer needs no changes.
+    const pixelScale = this.#upscaleBefore ? scale : 1;
+
+    // Gaussian accumulator buffers + a per-tile-size weight cache. The
+    // accumRGB stores values in [0, 255] before clamping (matching what
+    // the existing chwToImageData decoder produces), so finalize can do
+    // a single divide+clamp+pack pass.
+    const accumRGB = gaussianBlend ? new Float32Array(3 * outW * outH) : null;
+    const accumW = gaussianBlend ? new Float32Array(outW * outH) : null;
+    const gaussWeightCache = gaussianBlend ? new Map() : null;
+
+    // The WebGPU canvas surface and the renderer's persistent output texture
+    // are both bounded by maxTextureDimension2D (commonly 8192, sometimes
+    // 16384). Exceeding this cap doesn't throw — WebGPU pushes a validation
+    // error and the canvas stays black — so we proactively fall back to the
+    // CPU readback path whenever the destination is too big. ONNX inference
+    // continues to run on WebGPU; only the output rendering path changes.
+    if (useGpu) {
+      const maxDim = this.#device?.limits?.maxTextureDimension2D ?? 8192;
+      if (outW > maxDim || outH > maxDim) {
+        console.info(
+          `[UpscalerEngine] Output ${outW}\u00d7${outH} exceeds GPU max texture dimension ${maxDim}; using CPU readback path for this image.`,
+        );
+        useGpu = false;
+      }
+    }
+
+    // For upscaleBefore models, pre-rasterize an HR bicubic upsample on
+    // a 2D canvas and use that as the source for tile extraction. The
+    // GPU extractor and CPU getImageData paths both accept any canvas;
+    // they just see a larger texture/ImageData with HR coordinates.
+    let extractImg = img;
+    let extractW = srcW;
+    let extractH = srcH;
+    if (this.#upscaleBefore) {
+      const hrCanvas = document.createElement('canvas');
+      hrCanvas.width = outW;
+      hrCanvas.height = outH;
+      const hrCtx = hrCanvas.getContext('2d');
+      hrCtx.imageSmoothingEnabled = true;
+      hrCtx.imageSmoothingQuality = 'high';
+      hrCtx.drawImage(img, 0, 0, outW, outH);
+      extractImg = hrCanvas;
+      extractW = outW;
+      extractH = outH;
+    }
+
+    const srcData = this.#prepareSource(extractImg, extractW, extractH, useGpuInput, perf);
+
+    const outCanvas = document.createElement('canvas');
+    outCanvas.width = outW;
+    outCanvas.height = outH;
+
+    let outCtx = null;
+    if (useGpu) {
+      try {
+        this.#gpuRenderer.configure(outCanvas, outW, outH);
+      } catch (err) {
+        if (err instanceof GpuOutputTooLargeError) {
+          console.info(
+            `[UpscalerEngine] ${err.message} Using CPU readback path for this image.`,
+          );
+        } else {
+          console.warn(
+            '[UpscalerEngine] GPU canvas configure failed, falling back to CPU readback:',
+            err,
+          );
+        }
+        useGpu = false;
+      }
+    }
+    if (!useGpu) {
+      outCtx = outCanvas.getContext('2d');
+    }
+
+    const tiles = buildTileGrid(srcW, srcH, tileSize, overlap);
+
+    const inputName = this.#session.inputNames[0];
+    const outputName = this.#session.outputNames[0];
+
+    if (this.#profiling) try { this.#session.startProfiling(); } catch {}
+
+    let firstInferAt = 0;
+    let callbackMs = 0;
+    let yieldMs = 0;
+    for (let i = 0; i < tiles.length; i++) {
+      if (signal?.aborted) throw new DOMException('Upscale cancelled', 'AbortError');
+      const rendererLost = useGpu && this.#gpuRenderer?.lost;
+      const extractorLost = useGpuInput && this.#gpuExtractor?.lost;
+      if (rendererLost || extractorLost) {
+        throw new Error('GPU device was lost (browser or OS interrupted). Please retry or switch to the WASM backend.');
+      }
+
+      const { x: tx, y: ty, w: tw, h: th } = tiles[i];
+
+      const paddedTW = this.#alignToMultiple(tw);
+      const paddedTH = this.#alignToMultiple(th);
+      const tExtract = performance.now();
+      // In upscaleBefore mode the source canvas is HR-sized, so extraction
+      // coords/dims scale up. Equality checks against the LR-side padded
+      // values are unaffected (both sides scale by the same factor).
+      const tensor = this.#createTileTensor(
+        srcData,
+        tx * pixelScale,
+        ty * pixelScale,
+        tw * pixelScale,
+        th * pixelScale,
+        paddedTW * pixelScale,
+        paddedTH * pixelScale,
+        useGpuInput && paddedTW === tw && paddedTH === th,
+      );
+      const extractMs = performance.now() - tExtract;
+      perf.extract += extractMs;
+
+      const tInfer = performance.now();
+      if (!firstInferAt) firstInferAt = tInfer;
+      const results = await this.#session.run({ [inputName]: tensor });
+      const inferenceMs = performance.now() - tInfer;
+      perf.inference += inferenceMs;
+
+      const outTW = tw * scale;
+      const outTH = th * scale;
+      const outPaddedTW = paddedTW * scale;
+      const outPaddedTH = paddedTH * scale;
+      let renderMs = 0, readbackMs = 0;
+
+      if (useGpu && outPaddedTW === outTW && outPaddedTH === outTH) {
+        const tGpu = performance.now();
+        this.#gpuRenderer.renderTile(
+          results[outputName].gpuBuffer, outTW, outTH,
+          tx * scale, ty * scale, overlap * scale, 1 / this.#modelValueRange,
+        );
+        this.#gpuRenderer.presentToCanvas();
+        renderMs = performance.now() - tGpu;
+        perf.gpuRender += renderMs;
+      } else {
+        const tReadback = performance.now();
+        const outTensor = results[outputName];
+        // When the session was opened with preferredOutputLocation:'gpu-buffer'
+        // (gpu fast path enabled at load time) but we're falling back per-image
+        // because the destination canvas would exceed maxTextureDimension2D,
+        // the tensor lives on the GPU and `.data` is empty. getData(true)
+        // downloads the data and releases the GPU buffer in one step.
+        const rawOutData = outTensor.location === 'gpu-buffer'
+          ? await outTensor.getData(true)
+          : outTensor.data;
+        // fp16 output tensors expose a Uint16Array of bit patterns; unpack
+        // to Float32 once so the existing CHW/HWC decoders can stay fp32.
+        const outData = outTensor.type === 'float16'
+          ? unpackFloat16BitsToFloat32(rawOutData)
+          : rawOutData;
+        readbackMs = performance.now() - tReadback;
+        perf.readback += readbackMs;
+
+        const tWrite = performance.now();
+        const dims = outTensor.dims;
+        const isNHWC = dims.length === 4 && dims[3] === 3 && dims[1] !== 3;
+        if (gaussianBlend) {
+          // Look up / build the weight kernel for this tile's HR-side
+          // content dimensions (outTH, outTW). Edge tiles can be smaller
+          // than interior tiles; cache by key.
+          const key = `${outTH}x${outTW}`;
+          let weights = gaussWeightCache.get(key);
+          if (!weights) {
+            weights = makeGaussianWeights2D(outTH, outTW);
+            gaussWeightCache.set(key, weights);
+          }
+          const valueScale = 255 / this.#modelValueRange;
+          accumulateGaussianTile(
+            accumRGB, accumW, outW, outH,
+            outData, outPaddedTW, outPaddedTH,
+            outTW, outTH, tx * scale, ty * scale,
+            weights, valueScale, isNHWC ? 'hwc' : 'chw',
+          );
+          // Finalize just the rectangle this tile touched so the user
+          // sees progressive preview. Overlapping tiles will rewrite
+          // their shared region as they accumulate; the last tile to
+          // touch a pixel writes the same value a final full-canvas
+          // finalize would.
+          finalizeGaussianRegion(
+            outCtx, tx * scale, ty * scale, outTW, outTH,
+            outW, outH, accumRGB, accumW,
+          );
+        } else {
+          const decode = isNHWC ? hwcToImageData : chwToImageData;
+          const paddedImgData = decode(outData, outPaddedTW, outPaddedTH, 255 / this.#modelValueRange);
+          const imgData = outPaddedTW === outTW && outPaddedTH === outTH
+            ? paddedImgData
+            : this.#cropImageData(paddedImgData, outTW, outTH);
+          pasteTileCropped(outCtx, imgData, tx * scale, ty * scale, outW, outH, overlap * scale);
+        }
+        renderMs = performance.now() - tWrite;
+        perf.writeTile += renderMs;
+      }
+
+      const tDispose = performance.now();
+      tensor.dispose();
+      results[outputName].dispose();
+      const disposeMs = performance.now() - tDispose;
+      perf.dispose += disposeMs;
+
+      const crop = overlapCrop(tx * scale, ty * scale, outTW, outTH, outW, outH, overlap * scale);
+      const tCallback = performance.now();
+      onTile?.({
+        index: i, total: tiles.length, tileMs: inferenceMs, tilePixels: tw * th,
+        canvas: outCanvas, outX: tx * scale, outY: ty * scale, outW: outTW, outH: outTH,
+        crop,
+        perf: { extractMs, inferenceMs, readbackMs, renderMs, disposeMs },
+      });
+      callbackMs += performance.now() - tCallback;
+
+      const tYield = performance.now();
+      await yieldToEventLoop();
+      yieldMs += performance.now() - tYield;
+    }
+
+    if (useGpu) {
+      this.#gpuRenderer.presentToCanvas();
+      await this.#waitForGpuWork();
+    }
+
+    const tDone = performance.now();
+    perf.total = tDone - tTotal;
+    if (useGpu && firstInferAt) {
+      const gpuSpanMs = tDone - firstInferAt;
+      const otherTrackedMs =
+        perf.extract +
+        perf.gpuRender +
+        perf.readback +
+        perf.writeTile +
+        perf.dispose +
+        callbackMs +
+        yieldMs;
+      perf.inferenceEstimated = Math.max(0, gpuSpanMs - otherTrackedMs);
+    }
+
+    let ortProfile = null;
+    if (this.#profiling) {
+      ortProfile = this.#collectOrtProfile();
+    }
+
+    // 'gpu-gpu' = GPU input extract + GPU output render (zero readback).
+    // 'gpu'     = ONNX runs on GPU but at least one of input/output uses CPU
+    //             (e.g., per-image fallback when output exceeds maxTexDim).
+    // 'cpu'     = WASM/CPU end-to-end.
+    const pipeline = useGpu && useGpuInput
+      ? 'gpu-gpu'
+      : (useGpu || useGpuInput) ? 'gpu' : 'cpu';
+    return {
+      canvas: outCanvas,
+      perf: { ...perf, tiles: tiles.length, tileSize, srcW, srcH, outW, outH, pipeline },
+      ortProfile,
+    };
+  }
+
+  destroy() {
+    this.#releaseSession();
+    this.#modelBuffer = null;
+  }
+
+  #releaseSession() {
+    this.#untrackRealizedBackend();
+    this.#gpuRenderer?.destroy();
+    this.#gpuRenderer = null;
+    this.#gpuExtractor?.destroy();
+    this.#gpuExtractor = null;
+    this.#device = null;
+    try { this.#session?.release(); } catch {}
+    this.#session = null;
+    this.#realizedBackend = null;
+    this.#intent = null;
+  }
+
+  // While a session is alive, follow runtime backend changes via the
+  // backend-event channel — the native worker can fall back from CoreML to
+  // CPU between tiles, and that's the only signal we get. Without this the
+  // next loadModel-early-return announces a stale realizedBackend.
+  #trackRealizedBackend() {
+    if (this.#backendListener) return;
+    this.#backendListener = (e) => {
+      const d = e?.detail;
+      if (d && d.kind === 'success' && typeof d.backend === 'string') {
+        this.#realizedBackend = d.backend;
+      }
+    };
+    document.addEventListener('aitools:backend-event', this.#backendListener);
+  }
+
+  #untrackRealizedBackend() {
+    if (!this.#backendListener) return;
+    document.removeEventListener('aitools:backend-event', this.#backendListener);
+    this.#backendListener = null;
+  }
+
+  #prepareSource(img, srcW, srcH, useGpuInput, perf) {
+    const tSetup = performance.now();
+    let srcData = null;
+    if (useGpuInput) {
+      this.#gpuExtractor.uploadFrame(img, srcW, srcH);
+    } else {
+      const tmpC = document.createElement('canvas');
+      tmpC.width = srcW;
+      tmpC.height = srcH;
+      const tmpCtx = tmpC.getContext('2d');
+      tmpCtx.drawImage(img, 0, 0);
+      srcData = tmpCtx.getImageData(0, 0, srcW, srcH);
+      tmpC.width = 0;
+      tmpC.height = 0;
+    }
+    perf.setup = performance.now() - tSetup;
+    return srcData;
+  }
+
+  #alignToMultiple(value) {
+    const m = this.#modelInputMultiple;
+    if (!Number.isFinite(m) || m <= 1) return value;
+    return Math.ceil(value / m) * m;
+  }
+
+  #cropImageData(imgData, width, height) {
+    if (imgData.width === width && imgData.height === height) return imgData;
+    const out = new ImageData(width, height);
+    const src = imgData.data;
+    const dst = out.data;
+    const srcStride = imgData.width * 4;
+    const dstStride = width * 4;
+    for (let row = 0; row < height; row++) {
+      const srcStart = row * srcStride;
+      const dstStart = row * dstStride;
+      dst.set(src.subarray(srcStart, srcStart + dstStride), dstStart);
+    }
+    return out;
+  }
+
+  #createTileTensor(srcData, tx, ty, tw, th, paddedTW, paddedTH, useGpuInput) {
+    const ort = globalThis.ort;
+    if (useGpuInput) {
+      // GPU input fast path is gated to fp32 in loadModel(), so we only
+      // reach here when the model is fp32.
+      const gpuBuf = this.#gpuExtractor.extractTile(tx, ty, tw, th, this.#modelValueRange);
+      return ort.Tensor.fromGpuBuffer(gpuBuf, {
+        dataType: 'float32',
+        dims: [1, 3, th, tw],
+        dispose: () => {},
+      });
+    }
+    const isNHWC = this.#modelLayout === 'nhwc';
+    const extract = isNHWC ? extractTileNHWC : extractTileNCHW;
+    const dims = isNHWC ? [1, paddedTH, paddedTW, 3] : [1, 3, paddedTH, paddedTW];
+    const f32 = extract(
+      srcData,
+      tx,
+      ty,
+      tw,
+      th,
+      paddedTW,
+      paddedTH,
+      this.#modelValueRange / 255,
+    );
+    if (this.#modelPrecision === 'fp16') {
+      const u16 = packFloat32ToFloat16Bits(f32);
+      return new ort.Tensor('float16', u16, dims);
+    }
+    return new ort.Tensor('float32', f32, dims);
+  }
+
+  async #waitForGpuWork() {
+    try {
+      if (this.#device?.queue?.onSubmittedWorkDone) {
+        await this.#device.queue.onSubmittedWorkDone();
+      }
+    } catch {
+      // Ignore sync failures and let the caller continue.
+    }
+  }
+
+  /**
+   * Capture ORT's profiling output (logged to console by endProfiling)
+   * and return it as structured data instead of formatted strings.
+   */
+  #collectOrtProfile() {
+    const captured = [];
+    const origLog = console.log;
+    const origWarn = console.warn;
+    const intercept = (...args) => captured.push(args.join(' '));
+    console.log = intercept;
+    console.warn = intercept;
+    try { this.#session.endProfiling(); } catch {}
+    console.log = origLog;
+    console.warn = origWarn;
+
+    if (!captured.length) return null;
+    let events;
+    try {
+      const raw = captured.join('\n');
+      events = JSON.parse(raw.substring(raw.indexOf('['), raw.lastIndexOf(']') + 1));
+    } catch { return null; }
+
+    const nodes = events.filter(e => e.cat === 'Node');
+    const runs = events.filter(e => e.name === 'model_run');
+    if (!nodes.length) return null;
+
+    const gpuOps = {}, cpuOps = {};
+    let toHostUs = 0, toHostN = 0, fromHostUs = 0, fromHostN = 0;
+
+    for (const n of nodes) {
+      const op = n.args?.op_name ?? n.name;
+      const us = n.dur ?? 0;
+      if (op === 'MemcpyToHost') { toHostUs += us; toHostN++; continue; }
+      if (op === 'MemcpyFromHost') { fromHostUs += us; fromHostN++; continue; }
+      const bucket = n.args?.provider === 'CPUExecutionProvider' ? cpuOps : gpuOps;
+      bucket[op] ??= { us: 0, n: 0 };
+      bucket[op].us += us;
+      bucket[op].n++;
+    }
+
+    return {
+      runs: runs.length,
+      modelRunUs: runs.reduce((s, r) => s + (r.dur ?? 0), 0),
+      gpuOps,
+      cpuOps,
+      memcpy: {
+        toHost: { us: toHostUs, n: toHostN },
+        fromHost: { us: fromHostUs, n: fromHostN },
+      },
+    };
+  }
+}

features/upscaler/model-registry.js

@@ -0,0 +1,135 @@
+// Generated by deploy-hf-space.js — do not edit by hand.
+
+export const UPSCALER_MODELS = [
+  {
+    "url": "models/4x-UpdraftSmall.onnx",
+    "scale": 4,
+    "label": "Updraft Small (Custom)",
+    "sizeMB": 1.4,
+    "multipleOf": 32
+  },
+  {
+    "url": "models/4x-ClearRealityV1.onnx",
+    "scale": 4,
+    "label": "ClearReality (SPAN)",
+    "sizeMB": 1.9
+  },
+  {
+    "url": "models/DAT_light_x4_dyn_OTF_4.onnx",
+    "scale": 4,
+    "label": "DAT Light Restore (DAT-Light OTF)",
+    "sizeMB": 5
+  },
+  {
+    "url": "models/4x-UltraSharpV2_Lite.onnx",
+    "scale": 4,
+    "label": "UltraSharp V2 Lite (RealPLKSR)",
+    "sizeMB": 30
+  }
+];
+
+export const UPSCALER_RESAMPLER_MODELS = [
+  {
+    "url": "builtin:lanczos-4x",
+    "scale": 4,
+    "label": "Lanczos"
+  },
+  {
+    "url": "builtin:bicubic-4x",
+    "scale": 4,
+    "label": "Bicubic"
+  }
+];
+
+/**
+ * Shared model definitions for the image and video upscaler features.
+ * Single source of truth — all model <select> elements render from this list.
+ */
+
+export const UPSCALER_MODELS = [
+  { url: 'models/4x-UpdraftSmall.onnx', scale: 4, label: 'Updraft Small (Custom)', sizeMB: 1.4, multipleOf: 32 },
+  { url: 'models/4x-ClearRealityV1.onnx', scale: 4, label: 'ClearReality (SPAN)', sizeMB: 1.9 },
+  { url: 'models/DAT_light_x4_dyn_OTF_4.onnx', scale: 4, label: 'DAT Light Restore (DAT-Light OTF)', sizeMB: 5 },
+  { url: 'models/4x-UltraSharpV2_Lite.onnx', scale: 4, label: 'UltraSharp V2 Lite (RealPLKSR)', sizeMB: 30 },
+  { url: 'models/4x-UltraSharpV2.onnx', scale: 4, label: 'UltraSharp V2 (DAT)', sizeMB: 52 },
+  // { url: 'models/super.onnx', scale: 4, label: 'Apple Super 188k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_2.onnx', scale: 4, label: 'Apple Super 2 202k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_3.onnx', scale: 4, label: 'Apple Super 3 244k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_4.onnx', scale: 4, label: 'Apple Super 4 308k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_5.onnx', scale: 4, label: 'Apple Super 5 358k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_6.onnx', scale: 4, label: 'Apple Super 6 416k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_7.onnx', scale: 4, label: 'Apple Super 7 450k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_8.onnx', scale: 4, label: 'Apple Super 8 488k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_9.onnx', scale: 4, label: 'Apple Super 9 521k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_10.onnx', scale: 4, label: 'Apple Super 10 570k', sizeMB: 5.5, multipleOf: 32 },
+  // { url: 'models/super_11.onnx', scale: 4, label: 'Apple Super 11 617k', sizeMB: 5.5, multipleOf: 32 },
+
+  
+
+
+
+
+
+
+
+
+  {
+    url: 'models/tinysr_fused.onnx',
+    scale: 4,
+    label: 'TinySR (DiT refiner)',
+    sizeMB: 687,
+    multipleOf: 128,        // 128 LR × 4 = 512 HR (the fixed model input)
+    maxTileSize: 128,       // same — every tile pads/crops to exactly 128 LR
+    precision: 'fp16',
+    upscaleBefore: true,
+    tileBlend: 'gaussian',  // diffusion-style: hard-overlap shows seams
+  }
+
+];
+
+export const UPSCALER_RESAMPLER_MODELS = [
+  { url: 'builtin:lanczos-4x', scale: 4, label: 'Lanczos' },
+  { url: 'builtin:bicubic-4x', scale: 4, label: 'Bicubic' },
+];
+
+/**
+ * Render <option> elements for a model <select>.
+ * @param {typeof UPSCALER_MODELS} [models]
+ * @param {{ selected?: string, includeResamplers?: boolean }} [opts]
+ *   - `selected` is matched against model URL
+ *   - `includeResamplers` appends built-in non-ONNX upscale methods
+ */
+export function modelOptionsHTML(models = UPSCALER_MODELS, { selected, includeResamplers = false } = {}) {
+  const modelList = includeResamplers
+    ? [...models, ...UPSCALER_RESAMPLER_MODELS]
+    : models;
+
+  return modelList.map(m => {
+    const attrs = [
+      `value="${m.url}"`,
+      `data-scale="${m.scale}"`,
+    ];
+    if (m.range) attrs.push(`data-range="${m.range}"`);
+    if (m.backend) attrs.push(`data-backend="${m.backend}"`);
+    if (m.sizeMB != null) attrs.push(`data-sizemb="${m.sizeMB}"`);
+    if (Number.isFinite(m.maxTileSize)) attrs.push(`data-maxtilesize="${m.maxTileSize}"`);
+    if (Number.isFinite(m.multipleOf) && m.multipleOf > 1) {
+      attrs.push(`data-multipleof="${m.multipleOf}"`);
+    }
+    // Default precision is fp32; only emit data-precision when the model is
+    // fp16 so unannotated registry entries stay legible.
+    if (m.precision === 'fp16') attrs.push(`data-precision="fp16"`);
+    // upscaleBefore=true marks HR-space refiners (e.g. fused diffusion SR
+    // graphs). The engine bicubic-upsamples LR->HR before tiling so the
+    // model sees HR pixel patches; multipleOf / maxTileSize stay in LR units.
+    if (m.upscaleBefore) attrs.push(`data-upscalebefore="true"`);
+    // tileBlend='gaussian' switches the tile stitcher to float32 Gaussian-
+    // weighted accumulation (forces CPU readback path). Use for diffusion-
+    // style models where the default half-overlap hard crop shows seams.
+    if (m.tileBlend === 'gaussian') attrs.push(`data-tileblend="gaussian"`);
+    if (m.url === selected) attrs.push('selected');
+    const sizeStr = m.sizeMB != null ? ` (~${m.sizeMB}MB)` : '';
+    return `<option ${attrs.join(' ')}>${m.label}${sizeStr}</option>`;
+  }).join('\n              ');
+}
+

features/upscaler/ui/perf-monitor.js

@@ -0,0 +1,305 @@
+/**
+ * <perf-monitor> — fixed-position performance overlay.
+ * Consumes events from the upscaler engine to display live tile stats,
+ * session timing breakdowns, and optional ORT kernel profiles.
+ */
+
+import { morph } from 'lib/morph';
+
+function fmtTime(ms) {
+  if (ms < 1000) return ms.toFixed(0) + ' ms';
+  const s = ms / 1000;
+  if (s < 60) return s.toFixed(1) + ' s';
+  const m = Math.floor(s / 60);
+  return m + ':' + String(Math.floor(s % 60)).padStart(2, '0');
+}
+
+function fmtMs(ms) {
+  return ms.toFixed(1) + ' ms';
+}
+
+function fmtMB(bytes) {
+  return (bytes / 1048576).toFixed(1) + ' MB';
+}
+
+function humanStepName(step) {
+  const names = {
+    tiledUpscale: 'Base pass',
+    blendAll: 'All-pass blend',
+    detectFaces: 'Face detection',
+    enhanceFaces: 'Face enhance',
+    pipeline: 'Pipeline',
+  };
+  return names[step] || step || '—';
+}
+
+class PerfMonitor extends HTMLElement {
+  #tileTimes = [];
+  #startTime = 0;
+  #heapInterval = null;
+  #state = 'idle';
+  #tilePerf = null;
+  #currentStep = null;
+
+  #stats = {
+    backend: '\u2014', tile: '\u2014', tileTime: '\u2014', avgTile: '\u2014',
+    elapsed: '\u2014', eta: '\u2014', heap: '\u2014', heapLimit: '\u2014',
+    heapPct: 0, heapClass: '', throughput: '\u2014', stage: '\u2014',
+  };
+
+  #results = null;
+
+  connectedCallback() {
+    this.classList.add('perf-monitor');
+    this.style.display = 'none';
+    this.#render();
+    this.addEventListener('click', (e) => {
+      if (e.target.closest('.perf-close')) this.hide();
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.#heapInterval) {
+      clearInterval(this.#heapInterval);
+      this.#heapInterval = null;
+    }
+  }
+
+  start(backend) {
+    this.#tileTimes = [];
+    this.#startTime = performance.now();
+    this.#state = 'running';
+    this.#tilePerf = null;
+    this.#currentStep = null;
+    this.#results = null;
+
+    const s = this.#stats;
+    s.backend = backend.toUpperCase();
+    s.tile = '\u2014'; s.tileTime = '\u2014'; s.avgTile = '\u2014';
+    s.elapsed = '0 s'; s.eta = '\u2014'; s.throughput = '\u2014';
+    s.stage = '\u2014';
+
+    this.#refreshHeap();
+    this.style.display = 'block';
+    this.#render();
+    this.#heapInterval = setInterval(() => { this.#refreshHeap(); this.#render(); }, 500);
+  }
+
+  update({ step, index, total, tileMs, tilePixels, perf: tilePerf }) {
+    if (step && step !== this.#currentStep) {
+      this.#currentStep = step;
+      this.#tileTimes = [];
+    }
+    this.#tileTimes.push(tileMs);
+    this.#tilePerf = tilePerf || null;
+    const elapsed = performance.now() - this.#startTime;
+    const avg = this.#tileTimes.reduce((a, b) => a + b, 0) / this.#tileTimes.length;
+    const remaining = (total - index - 1) * avg;
+    const totalPixels = this.#tileTimes.length * tilePixels;
+    const mpxPerSec = (totalPixels / (elapsed / 1000)) / 1e6;
+
+    const s = this.#stats;
+    s.stage = humanStepName(step);
+    s.tile = `${index + 1} / ${total}`;
+    s.tileTime = fmtTime(tileMs);
+    s.avgTile = fmtTime(avg);
+    s.elapsed = fmtTime(elapsed);
+    s.eta = remaining > 0 ? '~' + fmtTime(remaining) : '\u2014';
+    s.throughput = mpxPerSec.toFixed(2) + ' Mpx/s';
+
+    this.#refreshHeap();
+    this.#render();
+  }
+
+  updateStage({ step, phase, message }) {
+    if (this.#state !== 'running') return;
+    const label = humanStepName(step);
+    this.#stats.stage = phase === 'done' && label ? `${label} done` : label;
+    if (message) this.#stats.tile = message;
+    this.#render();
+  }
+
+  showResults(perf, ortProfile, pipelinePerf) {
+    this.#state = 'done';
+    this.#results = { perf, ortProfile, pipelinePerf };
+    if (this.#heapInterval) {
+      clearInterval(this.#heapInterval);
+      this.#heapInterval = null;
+    }
+    this.#refreshHeap();
+    this.#render();
+  }
+
+  stop() {
+    if (this.#heapInterval) {
+      clearInterval(this.#heapInterval);
+      this.#heapInterval = null;
+    }
+    if (this.#state === 'running') {
+      this.#stats.eta = 'Done';
+      this.#state = 'done';
+    }
+    this.#render();
+  }
+
+  get elapsedFormatted() {
+    return fmtTime(performance.now() - this.#startTime);
+  }
+
+  show() { this.style.display = 'block'; this.#render(); }
+  hide() { this.style.display = 'none'; }
+  get visible() { return this.style.display !== 'none'; }
+
+  #refreshHeap() {
+    const s = this.#stats;
+    const mem = performance.memory;
+    if (!mem) {
+      s.heap = 'N/A'; s.heapLimit = 'N/A'; s.heapPct = 0; s.heapClass = '';
+      return;
+    }
+    const used = mem.usedJSHeapSize;
+    const limit = mem.jsHeapSizeLimit;
+    const pct = (used / limit) * 100;
+    s.heap = fmtMB(used);
+    s.heapLimit = fmtMB(limit);
+    s.heapPct = pct;
+    s.heapClass = pct > 80 ? ' crit' : pct > 60 ? ' warn' : '';
+  }
+
+  #render() {
+    const s = this.#stats;
+    const r = this.#results;
+    const tp = this.#tilePerf;
+    const isRunning = this.#state === 'running';
+    const isDone = this.#state === 'done';
+
+    let tileBreakdownHtml = '';
+    if (isRunning && tp) {
+      tileBreakdownHtml = `
+        <div class="perf-row sub"><span class="perf-label">Extract</span><span class="perf-value">${fmtMs(tp.extractMs)}</span></div>
+        <div class="perf-row sub"><span class="perf-label">Inference</span><span class="perf-value">${fmtMs(tp.inferenceMs)}</span></div>
+        <div class="perf-row sub"><span class="perf-label">Render</span><span class="perf-value">${fmtMs(tp.renderMs)}</span></div>
+        <div class="perf-row sub"><span class="perf-label">Dispose</span><span class="perf-value">${fmtMs(tp.disposeMs)}</span></div>`;
+    }
+
+    let resultsHtml = '';
+    if (isDone && r?.perf) {
+      const p = r.perf;
+      const pipelineLabel = p.pipeline === 'gpu-gpu' ? 'GPU\u2192GPU' : p.pipeline === 'gpu' ? 'GPU' : 'CPU';
+      const tileSizeLabel = p.tileSize > 0 ? p.tileSize + 'px' : 'full';
+      const isGpuPipeline = p.pipeline === 'gpu' || p.pipeline === 'gpu-gpu';
+      resultsHtml = `
+        <div class="perf-divider"></div>
+        <div class="perf-section-title">Session Summary</div>
+        <div class="perf-row"><span class="perf-label">Pipeline</span><span class="perf-value">${pipelineLabel}</span></div>
+        <div class="perf-row"><span class="perf-label">Resolution</span><span class="perf-value">${p.srcW}\u00d7${p.srcH} \u2192 ${p.outW}\u00d7${p.outH}</span></div>
+        <div class="perf-row"><span class="perf-label">Tiles</span><span class="perf-value">${p.tiles} @ ${tileSizeLabel}</span></div>
+        <div class="perf-row"><span class="perf-label">Total</span><span class="perf-value em">${fmtMs(p.total)}</span></div>
+        ${p.modelLoad > 0 ? `<div class="perf-row sub"><span class="perf-label">Model load</span><span class="perf-value">${fmtMs(p.modelLoad)}</span></div>` : ''}
+        <div class="perf-row sub"><span class="perf-label">Setup</span><span class="perf-value">${fmtMs(p.setup)}</span></div>
+        <div class="perf-row sub"><span class="perf-label">Extract</span><span class="perf-value">${fmtMs(p.extract)}</span></div>
+        <div class="perf-row sub"><span class="perf-label">${isGpuPipeline ? 'Inference est.' : 'Inference'}</span><span class="perf-value">${fmtMs(isGpuPipeline ? (p.inferenceEstimated || 0) : p.inference)}</span></div>
+        ${p.readback > 0 ? `<div class="perf-row sub"><span class="perf-label">Readback</span><span class="perf-value">${fmtMs(p.readback)}</span></div>` : ''}
+        ${p.gpuRender > 0 ? `<div class="perf-row sub"><span class="perf-label">GPU render</span><span class="perf-value">${fmtMs(p.gpuRender)}</span></div>` : ''}
+        ${p.writeTile > 0 ? `<div class="perf-row sub"><span class="perf-label">Write tiles</span><span class="perf-value">${fmtMs(p.writeTile)}</span></div>` : ''}
+        <div class="perf-row sub"><span class="perf-label">Dispose</span><span class="perf-value">${fmtMs(p.dispose)}</span></div>`;
+
+      if (r.ortProfile) {
+        const ort = r.ortProfile;
+        const ms = us => (us / 1000).toFixed(1) + 'ms';
+        const gpuTotal = Object.values(ort.gpuOps).reduce((acc, e) => acc + e.us, 0);
+        const cpuTotal = Object.values(ort.cpuOps).reduce((acc, e) => acc + e.us, 0);
+        const topGpuOps = Object.entries(ort.gpuOps)
+          .sort(([, a], [, b]) => b.us - a.us)
+          .slice(0, 4)
+          .map(([op, { us, n }]) => `${op}\u00d7${n} ${ms(us)}`)
+          .join(', ');
+
+        resultsHtml += `
+        <div class="perf-divider"></div>
+        <div class="perf-section-title">ORT Profile</div>
+        <div class="perf-row"><span class="perf-label">Runs</span><span class="perf-value">${ort.runs}, model_run ${ms(ort.modelRunUs)}</span></div>
+        ${gpuTotal ? `<div class="perf-row"><span class="perf-label">GPU ops</span><span class="perf-value">${ms(gpuTotal)}</span></div>
+        <div class="perf-row sub"><span class="perf-label"></span><span class="perf-value dim">${topGpuOps}</span></div>` : ''}
+        ${cpuTotal ? `<div class="perf-row"><span class="perf-label">CPU ops</span><span class="perf-value">${ms(cpuTotal)}</span></div>` : ''}
+        ${ort.memcpy.toHost.n ? `<div class="perf-row"><span class="perf-label">GPU\u2192CPU</span><span class="perf-value">${ms(ort.memcpy.toHost.us)} \u00d7${ort.memcpy.toHost.n}</span></div>` : ''}
+        ${ort.memcpy.fromHost.n ? `<div class="perf-row"><span class="perf-label">CPU\u2192GPU</span><span class="perf-value">${ms(ort.memcpy.fromHost.us)} \u00d7${ort.memcpy.fromHost.n}</span></div>` : ''}`;
+      }
+      if (r.pipelinePerf?.steps) {
+        const rows = Object.entries(r.pipelinePerf.steps)
+          .map(([name, data]) => {
+            const tiles = data.perf?.tiles ? ` (${data.perf.tiles} tiles)` : '';
+            return `<div class="perf-row sub"><span class="perf-label">${humanStepName(name)}</span><span class="perf-value dim">${fmtMs(data.durationMs)}${tiles}</span></div>`;
+          })
+          .join('');
+        resultsHtml += `
+        <div class="perf-divider"></div>
+        <div class="perf-section-title">Pipeline Steps</div>
+        ${rows}
+        <div class="perf-row"><span class="perf-label">Pipeline total</span><span class="perf-value">${fmtMs(r.pipelinePerf.totalMs || 0)}</span></div>`;
+      }
+    }
+
+    morph(this, `
+      <style>
+        .perf-monitor {
+          display: none; position: fixed; bottom: 12px; right: 12px; z-index: 9999;
+          background: rgba(0,0,0,0.85); border: 1px solid #333; border-radius: 6px;
+          padding: 10px 14px; font-family: 'SF Mono', 'Consolas', monospace; font-size: 0.72rem;
+          color: #ccc; min-width: 240px; max-height: calc(100vh - 24px); overflow-y: auto;
+          backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+        }
+        .perf-monitor .perf-title {
+          font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em;
+          color: #666; margin-bottom: 6px; border-bottom: 1px solid #333; padding-bottom: 4px;
+          display: flex; justify-content: space-between; align-items: center;
+        }
+        .perf-monitor .perf-close {
+          background: none; border: none; color: #666; cursor: pointer; font-size: 0.85rem;
+          padding: 0 2px; line-height: 1; width: auto; margin: 0;
+        }
+        .perf-monitor .perf-close:hover { color: #ccc; }
+        .perf-monitor .perf-row { display: flex; justify-content: space-between; padding: 1px 0; gap: 1rem; }
+        .perf-monitor .perf-row.sub { padding-left: 10px; }
+        .perf-monitor .perf-row.sub .perf-label { color: #666; font-size: 0.68rem; }
+        .perf-monitor .perf-row.sub .perf-value { color: #999; font-size: 0.68rem; }
+        .perf-monitor .perf-label { color: #888; white-space: nowrap; }
+        .perf-monitor .perf-value { color: var(--pico-primary, #4c8); font-weight: 600; text-align: right; }
+        .perf-monitor .perf-value.em { color: #fff; }
+        .perf-monitor .perf-value.dim { color: #777; font-weight: 400; font-size: 0.65rem; }
+        .perf-monitor .perf-bar-track {
+          height: 3px; background: #333; border-radius: 2px; margin-top: 4px; overflow: hidden;
+        }
+        .perf-monitor .perf-bar-fill { height: 100%; background: var(--pico-primary, #4c8); transition: width 0.3s; width: 0%; }
+        .perf-monitor .perf-bar-fill.warn { background: #c84; }
+        .perf-monitor .perf-bar-fill.crit { background: #c44; }
+        .perf-monitor .perf-divider { border-top: 1px solid #333; margin: 6px 0; }
+        .perf-monitor .perf-section-title {
+          font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em;
+          color: #555; margin-bottom: 4px;
+        }
+      </style>
+      <div class="perf-title">
+        <span>Performance${isDone ? ' \u2014 Done' : ''}</span>
+        <button class="perf-close" title="Close">\u00d7</button>
+      </div>
+      <div class="perf-row"><span class="perf-label">Backend</span><span class="perf-value">${s.backend}</span></div>
+      <div class="perf-row"><span class="perf-label">Stage</span><span class="perf-value">${s.stage}</span></div>
+      <div class="perf-row"><span class="perf-label">Tile</span><span class="perf-value">${s.tile}</span></div>
+      <div class="perf-row"><span class="perf-label">Tile time</span><span class="perf-value">${s.tileTime}</span></div>
+      ${tileBreakdownHtml}
+      <div class="perf-row"><span class="perf-label">Avg tile</span><span class="perf-value">${s.avgTile}</span></div>
+      <div class="perf-row"><span class="perf-label">Elapsed</span><span class="perf-value">${s.elapsed}</span></div>
+      <div class="perf-row"><span class="perf-label">ETA</span><span class="perf-value">${s.eta}</span></div>
+      <div class="perf-row"><span class="perf-label">JS Heap</span><span class="perf-value">${s.heap}</span></div>
+      <div class="perf-bar-track">
+        <div class="perf-bar-fill${s.heapClass}" style="width:${s.heapPct.toFixed(1)}%"></div>
+      </div>
+      <div class="perf-row" style="margin-top:4px"><span class="perf-label">Heap limit</span><span class="perf-value">${s.heapLimit}</span></div>
+      <div class="perf-row"><span class="perf-label">Throughput</span><span class="perf-value">${s.throughput}</span></div>
+      ${resultsHtml}
+    `);
+  }
+}
+
+customElements.define('perf-monitor', PerfMonitor);

features/upscaler/ui/upscale-preview.js

@@ -0,0 +1,117 @@
+/**
+ * <upscale-preview> — canvas that shows live tile-by-tile upscale progress.
+ *
+ * Pure presentation component. The parent orchestrates engines and the
+ * upscale pipeline; this element just renders tiles as they arrive.
+ */
+
+import { morph } from 'lib/morph';
+
+class UpscalePreview extends HTMLElement {
+  #ctx = null;
+
+  connectedCallback() {
+    this.classList.add('upscale-preview');
+    this.#render();
+  }
+
+  /**
+   * Set up the canvas with a dimmed version of the source image,
+   * indicating that upscaling is about to begin.
+   */
+  showDimmedPreview(image, outW, outH) {
+    this.style.setProperty('--ar', `${outW} / ${outH}`);
+    this.style.setProperty('--ar-num', `${outW / outH}`);
+    this.style.setProperty('--natural-w', `${outW}px`);
+    this.#render();
+    this.style.display = 'block';
+
+    const canvas = this.querySelector('canvas');
+    canvas.width = outW;
+    canvas.height = outH;
+    const ctx = canvas.getContext('2d');
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(image, 0, 0, outW, outH);
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.45)';
+    ctx.fillRect(0, 0, outW, outH);
+    this.#ctx = ctx;
+  }
+
+  /**
+   * Draw a completed tile onto the preview canvas.
+   * Uses the overlap-cropped rect when available so each pixel is written
+   * exactly once per step (avoids double-blend artifacts at tile seams).
+   * @param {{ canvas: HTMLCanvasElement, outX: number, outY: number, outW: number, outH: number, crop?: {x:number,y:number,w:number,h:number} }} tileInfo
+   * @param {{ opacity?: number }} [opts]
+   */
+  drawTile(tileInfo, { opacity = 1 } = {}) {
+    if (!this.#ctx) return;
+    const { x, y, w, h } = tileInfo.crop ?? {
+      x: tileInfo.outX, y: tileInfo.outY, w: tileInfo.outW, h: tileInfo.outH,
+    };
+    const needsAlpha = opacity < 1;
+    if (needsAlpha) { this.#ctx.save(); this.#ctx.globalAlpha = opacity; }
+    this.#ctx.drawImage(tileInfo.canvas, x, y, w, h, x, y, w, h);
+    if (needsAlpha) this.#ctx.restore();
+  }
+
+  hide() {
+    this.style.display = 'none';
+    this.style.removeProperty('--ar');
+    this.style.removeProperty('--ar-num');
+    this.style.removeProperty('--natural-w');
+    const canvas = this.querySelector('canvas');
+    if (canvas) { canvas.width = 0; canvas.height = 0; }
+    this.#ctx = null;
+  }
+
+  #render() {
+    morph(this, `
+      <style>
+        .upscale-preview { display: none; position: relative; }
+        .upscale-preview:not(.expanded) {
+          width: 100%;
+          max-width: 100%;
+          aspect-ratio: var(--ar, auto);
+          margin-inline: auto;
+        }
+        .upscale-preview.expanded {
+          height: calc(100vh - 1rem);
+          width: calc((100vh - 1rem) * var(--ar-num, 1));
+          max-width: none;
+          margin-inline: auto;
+        }
+        /* native-size: canvas at its natural pixel dimensions, centered in
+           a workspace-sized scroll container. Mirrors the compare-slider. */
+        .upscale-preview.native-size {
+          width: 100%;
+          max-width: 100%;
+          height: calc(100vh - 1rem);
+          max-height: calc(100vh - 1rem);
+          overflow: auto;
+          display: flex;
+          margin-inline: auto;
+        }
+        .upscale-preview.native-size canvas {
+          margin: auto;
+          width: auto;
+          height: auto;
+          max-width: none;
+          flex: 0 0 auto;
+        }
+        .upscale-preview canvas {
+          display: block;
+          width: 100%;
+          height: auto;
+          max-width: 100%;
+          border: 1px solid var(--pico-muted-border-color, #333);
+          border-radius: var(--pico-border-radius, 4px);
+          background: #000;
+        }
+      </style>
+      <canvas></canvas>
+    `);
+  }
+}
+
+customElements.define('upscale-preview', UpscalePreview);

features/upscaler/ui/upscaler-canvas-area.js

@@ -0,0 +1,146 @@
+import 'components/image-drop-zone';
+import 'components/image-cropper';
+import './upscale-preview.js';
+import 'components/compare-slider';
+
+class UpscalerCanvasArea extends HTMLElement {
+  #image = null;
+  #viewMode = 'fit-width';
+
+  connectedCallback() {
+    this.#render();
+    this.#wireEvents();
+  }
+
+  #q(sel) { return this.querySelector(sel); }
+
+  // ── Public surface ─────────────────────────────────────────────────────
+
+  get image() { return this.#image; }
+
+  get currentCrop() {
+    return this.#q('image-cropper')?.crop || null;
+  }
+
+  /**
+   * Extract the image (cropped or not) to feed the pipeline. Throws if no
+   * image is loaded.
+   */
+  get croppedImage() {
+    return this.#q('image-cropper').extractImage();
+  }
+
+  get viewMode() { return this.#viewMode; }
+  set viewMode(mode) {
+    if (!['fit-width', 'fit-height', 'one-to-one'].includes(mode)) return;
+    if (mode === this.#viewMode) return;
+    this.#viewMode = mode;
+    this.#applyViewState();
+  }
+
+  /**
+   * Pick a default mode based on the loaded image's aspect ratio vs. the
+   * viewport: fit-width when the image is at least as wide (relative to
+   * height) as the viewport, fit-height otherwise.
+   */
+  defaultModeForImage(image) {
+    const vw = window.innerWidth || 1;
+    const vh = window.innerHeight || 1;
+    const imgRatio = image.width / image.height;
+    const vpRatio = vw / vh;
+    return imgRatio >= vpRatio ? 'fit-width' : 'fit-height';
+  }
+
+  showInitial() {
+    this.#q('image-cropper').hide();
+    this.#q('upscale-preview').hide();
+    this.#q('compare-slider').hide();
+    this.#q('image-drop-zone').show();
+  }
+
+  showCropping(image) {
+    this.#image = image;
+    this.#q('upscale-preview').hide();
+    this.#q('compare-slider').hide();
+    this.#q('image-drop-zone').hide();
+    this.#q('image-cropper').show(image);
+  }
+
+  showPreview(image, outW, outH) {
+    this.#q('image-cropper').style.display = 'none';
+    this.#q('compare-slider').hide();
+    this.#q('upscale-preview').showDimmedPreview(image, outW, outH);
+  }
+
+  drawPreviewTile(info, opts) {
+    this.#q('upscale-preview').drawTile(info, opts);
+  }
+
+  async showResult(beforeCanvas, afterCanvas, opts) {
+    this.#q('image-cropper').style.display = 'none';
+    this.#q('upscale-preview').hide();
+    await this.#q('compare-slider').show(beforeCanvas, afterCanvas, opts);
+    this.#applyViewState();
+  }
+
+  clearCrop() { this.#q('image-cropper').clearCrop(); }
+  openInTab() { this.#q('compare-slider').openInTab(); }
+  download()  { this.#q('compare-slider').download(); }
+
+  /**
+   * Scroll the currently-visible stage into view. Useful after a view-mode
+   * change resizes the stage and pushes it offscreen.
+   */
+  snapCenterVisible() {
+    const el = this.#visibleStage();
+    if (!el) return;
+    requestAnimationFrame(() => {
+      const rect = el.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const fullyVisible = rect.top >= 0 && rect.bottom <= vh;
+      if (fullyVisible) return;
+      el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+    });
+  }
+
+  // ── Internal ───────────────────────────────────────────────────────────
+
+  #visibleStage() {
+    for (const sel of ['compare-slider', 'upscale-preview', 'image-cropper', 'image-drop-zone']) {
+      const el = this.#q(sel);
+      if (el && el.offsetParent !== null) return el;
+    }
+    return null;
+  }
+
+  #applyViewState() {
+    const mode = this.#viewMode;
+    const isFitHeight = mode === 'fit-height';
+    const isOneToOne = mode === 'one-to-one';
+    for (const sel of ['image-cropper', 'upscale-preview', 'compare-slider']) {
+      const el = this.#q(sel);
+      if (!el) continue;
+      el.classList.toggle('expanded', isFitHeight);
+      el.classList.toggle('native-size', isOneToOne);
+    }
+  }
+
+  #wireEvents() {
+    // Hold the image reference locally; image-loaded also bubbles up so the
+    // orchestrator can react. crop-changed similarly bubbles from the cropper.
+    this.#q('image-drop-zone').addEventListener('image-loaded', (e) => {
+      this.#image = e.detail.image;
+    });
+  }
+
+  #render() {
+    this.innerHTML = `
+      <image-drop-zone></image-drop-zone>
+      <image-cropper></image-cropper>
+      <upscale-preview></upscale-preview>
+      <compare-slider></compare-slider>
+    `;
+  }
+}
+
+customElements.define('upscaler-canvas-area', UpscalerCanvasArea);

features/upscaler/ui/upscaler-controls.js

@@ -0,0 +1,874 @@
+import { morph } from 'lib/morph';
+import { modelOptionsHTML } from '../model-registry.js';
+import {
+  deleteCustomModelByUrl,
+  getCustomModelByUrl,
+  getUploadCustomOptionHTML,
+  listCustomModels,
+} from '../custom-models/custom-model-store.js';
+import '../custom-models/custom-model-upload-dialog.js';
+
+// User-facing backend selector returns 'gpu' or 'cpu' (the engine's intent
+// vocabulary). Older builds stored 'webgpu' / 'wasm' in localStorage; this
+// normalizer keeps a returning user from getting a broken dropdown.
+function normalizeIntent(value) {
+  if (value === 'webgpu' || value === 'gpu') return 'gpu';
+  if (value === 'wasm'   || value === 'cpu') return 'cpu';
+  return 'gpu';
+}
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;');
+}
+
+const UPLOAD_CUSTOM_VALUE = '__upload_custom__';
+
+// Single source of truth for localStorage <-> form control wiring.
+// `kind` is 'value' for inputs/selects, 'checked' for checkboxes.
+const PERSISTED_CONTROLS = [
+  { selector: '.tilesize-select',         key: 'upscaler_tilesize',                kind: 'value',   event: 'change' },
+  { selector: '.backend-select',          key: 'upscaler_backend',                 kind: 'value',   event: 'change' },
+  { selector: '.output-select',           key: 'upscaler_output',                  kind: 'value',   event: 'change' },
+  { selector: '.pass-all-enabled',        key: 'upscaler_pass_all_enabled',        kind: 'checked', event: 'change' },
+  { selector: '.pass-all-blend',          key: 'upscaler_pass_all_blend',          kind: 'value',   event: 'input' },
+  { selector: '.pass-all-model',          key: 'upscaler_pass_all_model',          kind: 'value',   event: 'change' },
+  { selector: '.pass-compare-enabled',    key: 'upscaler_pass_compare_enabled',    kind: 'checked', event: 'change' },
+  { selector: '.pass-compare-model',      key: 'upscaler_pass_compare_model',      kind: 'value',   event: 'change' },
+  { selector: '.detector-face-enabled',   key: 'upscaler_detector_face_enabled',   kind: 'checked', event: 'change' },
+  { selector: '.detector-face-padding',   key: 'upscaler_detector_face_padding_px', kind: 'value',   event: 'input' },
+  { selector: '.detector-face-score',     key: 'upscaler_detector_face_score',     kind: 'value',   event: 'input' },
+  { selector: '.detector-face-blend',     key: 'upscaler_detector_face_blend',     kind: 'value',   event: 'input' },
+  { selector: '.detector-face-model',     key: 'upscaler_detector_face_model',     kind: 'value',   event: 'change' },
+];
+
+function readControl(el, kind) {
+  return kind === 'checked' ? (el.checked ? '1' : '0') : el.value;
+}
+function writeControl(el, kind, saved) {
+  if (kind === 'checked') el.checked = saved === '1';
+  else el.value = saved;
+}
+
+class UpscalerControls extends HTMLElement {
+  #customModels = [];
+  #previousModelValue = '';
+  #outputBaseLabels = null;
+  #isRunning = false;
+
+  connectedCallback() {
+    this.#render();
+    this.#customModels = listCustomModels();
+    this.#refreshModelSelectOptions(localStorage.getItem('upscaler_model') || undefined);
+    this.#setupPersistence();
+    this.#wireEvents();
+    this.#restoreSettings();
+  }
+
+  #q(sel) { return this.querySelector(sel); }
+  #isBuiltInResampler(modelOpt) { return !!modelOpt?.value?.startsWith('builtin:'); }
+
+  // ── Public surface ─────────────────────────────────────────────────────
+
+  get selectedModelOption() {
+    return this.#q('.model-select')?.selectedOptions?.[0] || null;
+  }
+
+  get outputScale() {
+    const parsed = parseInt(this.#q('.output-select')?.value, 10);
+    return Number.isFinite(parsed) ? parsed : 4;
+  }
+
+  // The user's load intent: 'gpu' or 'cpu'. Per-model-option overrides via
+  // data-backend take precedence over the global select. Legacy values
+  // ('webgpu', 'wasm') from prior localStorage are normalized so a returning
+  // user doesn't get a broken dropdown.
+  get backend() {
+    const raw = this.selectedModelOption?.dataset.backend
+      || this.#q('.backend-select')?.value
+      || 'gpu';
+    return normalizeIntent(raw);
+  }
+
+  set isRunning(b) {
+    this.#isRunning = !!b;
+    this.#q('.clear-cache-btn').disabled = this.#isRunning;
+    this.#updateCustomDeleteVisibility();
+  }
+
+  refreshAfterCustomModelChange(url) {
+    this.#customModels = listCustomModels();
+    this.#refreshModelSelectOptions(url);
+    if (url) {
+      this.#previousModelValue = url;
+      localStorage.setItem('upscaler_model', url);
+    }
+    this.#updateModelBoundControls();
+    this.#updateCustomDeleteVisibility();
+  }
+
+  /**
+   * Build the Pipeline config from current form state. Caller adds `profile`
+   * from the perf-monitor's visibility — the controls component doesn't see
+   * the perf monitor (lives at the orchestrator level).
+   */
+  get config() {
+    const opt = this.#q('.model-select').selectedOptions[0];
+    const modelUrl = opt.value;
+    const scale = parseInt(opt.dataset.scale, 10) || 4;
+    const modelValueRange = parseInt(opt.dataset.range, 10) || 1;
+    const modelLayout = opt.dataset.layout || 'nchw';
+    const modelInputMultiple = parseInt(opt.dataset.multipleof, 10) || 1;
+    const modelPrecision = opt.dataset.precision === 'fp16' ? 'fp16' : 'fp32';
+    const upscaleBefore = opt.dataset.upscalebefore === 'true';
+    const tileBlend = opt.dataset.tileblend === 'gaussian' ? 'gaussian' : 'overlapCrop';
+    const backend = opt.dataset.backend || this.#q('.backend-select').value;
+    let tileSize = parseInt(this.#q('.tilesize-select').value, 10);
+
+    const config = { modelUrl, scale, modelValueRange, modelLayout, modelInputMultiple, modelPrecision, upscaleBefore, tileBlend, backend, tileSize };
+
+    const optionsForClamp = [opt];
+
+    // Comparison runs the base + a second SR pass and shows them side-by-
+    // side; All/Faces would mutate the base canvas the slider is supposed to
+    // expose, so we suppress them entirely whenever Comparison is on. The UI
+    // already disables those rows — this is the matching defensive guard at
+    // the config layer.
+    const compareOn = this.#q('.pass-compare-enabled').checked;
+
+    if (compareOn) {
+      const copt = this.#q('.pass-compare-model').selectedOptions[0];
+      if (copt) optionsForClamp.push(copt);
+      config.comparison = {
+        modelUrl: copt?.value || modelUrl,
+        scale: parseInt(copt?.dataset.scale, 10) || scale,
+        modelValueRange: parseInt(copt?.dataset.range, 10) || 1,
+        modelLayout: copt?.dataset.layout || 'nchw',
+        modelInputMultiple: parseInt(copt?.dataset.multipleof, 10) || 1,
+        modelPrecision: copt?.dataset.precision === 'fp16' ? 'fp16' : 'fp32',
+        upscaleBefore: copt?.dataset.upscalebefore === 'true',
+        tileBlend: copt?.dataset.tileblend === 'gaussian' ? 'gaussian' : 'overlapCrop',
+        backend: copt?.dataset.backend || backend,
+      };
+    } else {
+      if (this.#q('.pass-all-enabled').checked) {
+        const aopt = this.#q('.pass-all-model').selectedOptions[0];
+        if (aopt) optionsForClamp.push(aopt);
+        config.all = {
+          modelUrl: aopt?.value || modelUrl,
+          scale: parseInt(aopt?.dataset.scale, 10) || scale,
+          modelValueRange: parseInt(aopt?.dataset.range, 10) || 1,
+          modelLayout: aopt?.dataset.layout || 'nchw',
+          modelInputMultiple: parseInt(aopt?.dataset.multipleof, 10) || 1,
+          modelPrecision: aopt?.dataset.precision === 'fp16' ? 'fp16' : 'fp32',
+          upscaleBefore: aopt?.dataset.upscalebefore === 'true',
+          tileBlend: aopt?.dataset.tileblend === 'gaussian' ? 'gaussian' : 'overlapCrop',
+          backend: aopt?.dataset.backend || backend,
+          blendOpacity: parseFloat(this.#q('.pass-all-blend').value),
+        };
+      }
+
+      if (this.#q('.detector-face-enabled').checked) {
+        const fopt = this.#q('.detector-face-model').selectedOptions[0];
+        if (fopt) optionsForClamp.push(fopt);
+        config.face = {
+          modelUrl: fopt?.value || modelUrl,
+          scale: parseInt(fopt?.dataset.scale, 10) || scale,
+          modelValueRange: parseInt(fopt?.dataset.range, 10) || 1,
+          modelLayout: fopt?.dataset.layout || 'nchw',
+          modelInputMultiple: parseInt(fopt?.dataset.multipleof, 10) || 1,
+          modelPrecision: fopt?.dataset.precision === 'fp16' ? 'fp16' : 'fp32',
+          upscaleBefore: fopt?.dataset.upscalebefore === 'true',
+          tileBlend: fopt?.dataset.tileblend === 'gaussian' ? 'gaussian' : 'overlapCrop',
+          backend: fopt?.dataset.backend || backend,
+          paddingPx: parseInt(this.#q('.detector-face-padding').value, 10) || 0,
+          featherPx: 16,
+          blendOpacity: parseFloat(this.#q('.detector-face-blend').value),
+          scoreThreshold: parseFloat(this.#q('.detector-face-score').value),
+        };
+      }
+    }
+
+    // Models with a hard input-size cap (e.g. DAT exports with baked-in
+    // window counts) only accept tiles up to a fixed dim. Clamp the shared
+    // tile size to the strictest selected model. When multipleOf ===
+    // maxTileSize the model has a fixed input size: smaller tiles still
+    // work via edge-replication padding but pay the same per-tile cost over
+    // a smaller real region, so floor to the fixed size too.
+    const fixedSizes = optionsForClamp
+      .map((o) => {
+        const m = parseInt(o?.dataset?.multipleof, 10);
+        const c = parseInt(o?.dataset?.maxtilesize, 10);
+        return (Number.isFinite(m) && Number.isFinite(c) && m === c && m >= 1) ? c : null;
+      })
+      .filter((v) => v != null);
+    if (fixedSizes.length) {
+      const floor = Math.max(...fixedSizes);
+      if (tileSize > 0 && tileSize < floor) tileSize = floor;
+    }
+    const caps = optionsForClamp
+      .map((o) => parseInt(o?.dataset?.maxtilesize, 10))
+      .filter((v) => Number.isFinite(v) && v >= 1);
+    if (caps.length) {
+      const minCap = Math.min(...caps);
+      if (tileSize <= 0 || tileSize > minCap) tileSize = minCap;
+      config.tileSize = tileSize;
+    }
+
+    return config;
+  }
+
+  // ── Custom model select rendering ──────────────────────────────────────
+
+  #getCustomModelOptionsHTML(selected) {
+    if (!this.#customModels.length) return '';
+    return this.#customModels.map((model) => {
+      const attrs = [
+        `value="${model.url}"`,
+        `data-scale="${model.scale}"`,
+        `data-range="${model.range || 1}"`,
+        `data-layout="${model.layout || 'nchw'}"`,
+        `data-multipleof="${model.multipleOf || 1}"`,
+        `data-sizemb="${model.sizeMB}"`,
+      ];
+      if (Number.isFinite(model.maxTileSize)) {
+        attrs.push(`data-maxtilesize="${model.maxTileSize}"`);
+      }
+      if (model.precision === 'fp16') attrs.push(`data-precision="fp16"`);
+      if (model.url === selected) attrs.push('selected');
+      const sizeStr = model.sizeMB != null ? ` (~${model.sizeMB}MB)` : '';
+      return `<option ${attrs.join(' ')}>${escapeHtml(model.label)}${sizeStr}</option>`;
+    }).join('\n              ');
+  }
+
+  #refreshModelSelectOptions(selected) {
+    const modelEl = this.#q('.model-select');
+    if (!modelEl) return;
+    modelEl.innerHTML = [
+      modelOptionsHTML(undefined, { selected, includeResamplers: true }),
+      this.#getCustomModelOptionsHTML(selected),
+      getUploadCustomOptionHTML(),
+    ].filter(Boolean).join('\n              ');
+    if (selected) modelEl.value = selected;
+    if (!modelEl.selectedOptions.length) modelEl.selectedIndex = 0;
+
+    // Pass selectors share the same custom-model list as the primary select.
+    // We only refresh their option lists — never their selection — so adding
+    // or editing a custom model from the main select doesn't disturb whatever
+    // the user has chosen for the all-pass / face-pass.
+    this.#refreshPassModelSelect('.pass-all-model');
+    this.#refreshPassModelSelect('.pass-compare-model');
+    this.#refreshPassModelSelect('.detector-face-model');
+  }
+
+  #refreshPassModelSelect(selector) {
+    const el = this.#q(selector);
+    if (!el) return;
+    const previousValue = el.value;
+    el.innerHTML = [
+      modelOptionsHTML(undefined, { selected: previousValue }),
+      this.#getCustomModelOptionsHTML(previousValue),
+    ].filter(Boolean).join('\n              ');
+    if (previousValue) {
+      el.value = previousValue;
+      if (!el.selectedOptions.length) el.selectedIndex = 0;
+    } else if (!el.selectedOptions.length) {
+      el.selectedIndex = 0;
+    }
+  }
+
+  // ── Persistence ────────────────────────────────────────────────────────
+
+  #setupPersistence() {
+    for (const { selector, key, kind, event } of PERSISTED_CONTROLS) {
+      const el = this.#q(selector);
+      el.addEventListener(event, () => localStorage.setItem(key, readControl(el, kind)));
+    }
+  }
+
+  #restoreSettings() {
+    for (const { selector, key, kind } of PERSISTED_CONTROLS) {
+      const saved = localStorage.getItem(key);
+      if (saved === null) continue;
+      writeControl(this.#q(selector), kind, saved);
+    }
+    const modelEl = this.#q('.model-select');
+    if (!modelEl.selectedOptions.length) modelEl.selectedIndex = 0;
+    this.#previousModelValue = modelEl.value;
+    this.#syncComparisonExclusion();
+    this.#updateModelBoundControls();
+    this.#updateInputMirrors();
+    this.#updateCustomDeleteVisibility();
+  }
+
+  // ── Event wiring ───────────────────────────────────────────────────────
+
+  #wireEvents() {
+    const modelEl = this.#q('.model-select');
+    const editCustomBtn = this.#q('.edit-custom-model-btn');
+    const deleteCustomBtn = this.#q('.delete-custom-model-btn');
+    const dialog = this.#q('custom-model-upload-dialog');
+
+    modelEl.addEventListener('change', async () => {
+      if (modelEl.value === UPLOAD_CUSTOM_VALUE) {
+        const previousOption = Array.from(modelEl.options).find((opt) => opt.value === this.#previousModelValue);
+        const defaultScale = parseInt(previousOption?.dataset.scale, 10) || 4;
+        const customModel = await dialog.open({ defaultScale });
+        if (!customModel) {
+          modelEl.value = this.#previousModelValue;
+        } else {
+          this.refreshAfterCustomModelChange(customModel.url);
+          this.#emitStatus('Model added', `Added "${customModel.label}" (${customModel.scale}x, ~${customModel.sizeMB}MB).`);
+          return;
+        }
+      } else {
+        this.#previousModelValue = modelEl.value;
+      }
+      localStorage.setItem('upscaler_model', modelEl.value);
+      this.#updateModelBoundControls();
+      this.#updateCustomDeleteVisibility();
+    });
+
+    editCustomBtn.addEventListener('click', async () => {
+      if (this.#isRunning) return;
+      const selected = getCustomModelByUrl(modelEl.value);
+      if (!selected) return;
+      const updated = await dialog.open({ editModel: selected });
+      if (!updated) return;
+      this.refreshAfterCustomModelChange(updated.url);
+      this.#emitStatus('Model updated', `Updated "${updated.label}".`);
+    });
+
+    deleteCustomBtn.addEventListener('click', async () => {
+      if (this.#isRunning) return;
+      const selected = getCustomModelByUrl(modelEl.value);
+      if (!selected) return;
+      const ok = globalThis.confirm(`Delete custom model "${selected.label}"?\n\nThis will remove it from the local model cache.`);
+      if (!ok) return;
+      await deleteCustomModelByUrl(selected.url);
+      this.#customModels = listCustomModels();
+      this.#refreshModelSelectOptions();
+      if (modelEl.value === UPLOAD_CUSTOM_VALUE && modelEl.options.length > 1) {
+        modelEl.selectedIndex = 0;
+      }
+      this.#previousModelValue = modelEl.value;
+      localStorage.setItem('upscaler_model', modelEl.value);
+      this.#updateModelBoundControls();
+      this.#updateCustomDeleteVisibility();
+      this.#emitStatus('Model deleted', `Deleted "${selected.label}".`);
+    });
+
+    this.#q('.tilesize-select').addEventListener('change', () => this.#updateHangWarning());
+    this.#q('.backend-select').addEventListener('change', () => this.#updateHangWarning());
+
+    // Toggling a pass on/off or switching its model can change the strictest
+    // selected max-tile cap, so refresh the tile-size dropdown the same way
+    // a primary-model change does.
+    for (const sel of [
+      '.pass-all-enabled',
+      '.pass-all-model',
+      '.pass-compare-enabled',
+      '.pass-compare-model',
+      '.detector-face-enabled',
+      '.detector-face-model',
+    ]) {
+      this.#q(sel)?.addEventListener('change', () => this.#updateModelBoundControls());
+    }
+
+    this.#q('.pass-compare-enabled').addEventListener('change', () => this.#syncComparisonExclusion());
+
+    const wireMirror = (selector, mirrorSelector) => {
+      this.#q(selector).addEventListener('input', (e) => {
+        this.#q(mirrorSelector).textContent = e.target.value;
+      });
+    };
+    wireMirror('.pass-all-blend',      '.pass-all-blend-val');
+    wireMirror('.detector-face-score', '.detector-face-score-val');
+    wireMirror('.detector-face-blend', '.detector-face-blend-val');
+
+    const bubble = (name) => this.dispatchEvent(new CustomEvent(name, { bubbles: true }));
+    this.#q('.perf-toggle-btn').addEventListener('click', () => bubble('perf-toggle'));
+    this.#q('.clear-cache-btn').addEventListener('click', () => bubble('clear-cache'));
+  }
+
+  #emitStatus(title, details) {
+    this.dispatchEvent(new CustomEvent('status-message', {
+      bubbles: true,
+      detail: {
+        title,
+        state: 'idle',
+        details: details || '',
+        progress: -1,
+        tileCount: null,
+      },
+    }));
+  }
+
+  #emitModelChange() {
+    const opt = this.selectedModelOption;
+    const scale = parseInt(opt?.dataset.scale, 10) || 4;
+    const verb = scale === 1 ? 'Enhance' : 'Upscale';
+    this.dispatchEvent(new CustomEvent('model-change', {
+      bubbles: true, detail: { scale, verb, isBuiltInResampler: this.#isBuiltInResampler(opt) },
+    }));
+  }
+
+  // ── Model-bound UI sync ────────────────────────────────────────────────
+
+  #updateModelBoundControls() {
+    const modelEl = this.#q('.model-select');
+    const outputEl = this.#q('.output-select');
+    const tileEl = this.#q('.tilesize-select');
+
+    if (!this.#outputBaseLabels) {
+      this.#outputBaseLabels = new Map(Array.from(outputEl.options).map(opt => [
+        opt.value,
+        opt.textContent.replace(/\s+\(no downscale\)$/i, ''),
+      ]));
+    }
+
+    const modelOpt = modelEl.selectedOptions[0];
+    const scale = parseInt(modelOpt?.dataset.scale, 10) || 4;
+    const maxOutputScale = Math.max(1, Math.min(scale, 4));
+    const isBuiltInResampler = this.#isBuiltInResampler(modelOpt);
+    const previousOutputScale = parseInt(outputEl.value, 10);
+
+    for (const opt of outputEl.options) {
+      const optionScale = parseInt(opt.value, 10) || 1;
+      const baseLabel = this.#outputBaseLabels.get(opt.value) || `${optionScale}x`;
+      opt.textContent = !isBuiltInResampler && optionScale === maxOutputScale
+        ? `${baseLabel} (no downscale)`
+        : baseLabel;
+      opt.disabled = optionScale > maxOutputScale;
+    }
+
+    const preferredScale = Number.isFinite(previousOutputScale) ? previousOutputScale : maxOutputScale;
+    const nextOutputScale = Math.max(1, Math.min(maxOutputScale, preferredScale));
+    outputEl.value = String(nextOutputScale);
+    localStorage.setItem('upscaler_output', outputEl.value);
+    this.#q('.backend-select').disabled = isBuiltInResampler;
+    tileEl.disabled = isBuiltInResampler;
+
+    // Strictest tile-size cap from the main model plus enabled pass models.
+    const capCandidates = [modelOpt];
+    if (this.#q('.pass-all-enabled')?.checked) {
+      capCandidates.push(this.#q('.pass-all-model')?.selectedOptions[0]);
+    }
+    if (this.#q('.pass-compare-enabled')?.checked) {
+      capCandidates.push(this.#q('.pass-compare-model')?.selectedOptions[0]);
+    }
+    if (this.#q('.detector-face-enabled')?.checked) {
+      capCandidates.push(this.#q('.detector-face-model')?.selectedOptions[0]);
+    }
+    const caps = capCandidates
+      .map((o) => parseInt(o?.dataset?.maxtilesize, 10))
+      .filter((v) => Number.isFinite(v) && v >= 1);
+    const hasMaxTile = caps.length > 0;
+    const maxTileSize = hasMaxTile ? Math.min(...caps) : Infinity;
+    const fixedSizes = capCandidates
+      .map((o) => {
+        const m = parseInt(o?.dataset?.multipleof, 10);
+        const c = parseInt(o?.dataset?.maxtilesize, 10);
+        return (Number.isFinite(m) && Number.isFinite(c) && m === c && m >= 1) ? c : null;
+      })
+      .filter((v) => v != null);
+    const tileFloor = fixedSizes.length ? Math.max(...fixedSizes) : 0;
+    let largestEnabledTileVal = null;
+    for (const opt of tileEl.options) {
+      const optVal = parseInt(opt.value, 10);
+      const isFullImage = optVal === 0;
+      const exceeds = hasMaxTile && (isFullImage || optVal > maxTileSize);
+      const belowFloor = tileFloor > 0 && !isFullImage && optVal < tileFloor;
+      opt.disabled = exceeds || belowFloor;
+      if (!opt.disabled && Number.isFinite(optVal) && optVal > 0) {
+        if (largestEnabledTileVal === null || optVal > largestEnabledTileVal) {
+          largestEnabledTileVal = optVal;
+        }
+      }
+    }
+    if ((hasMaxTile || tileFloor > 0) && tileEl.selectedOptions[0]?.disabled && largestEnabledTileVal != null) {
+      tileEl.value = String(largestEnabledTileVal);
+      localStorage.setItem('upscaler_tilesize', tileEl.value);
+    }
+
+    this.#updateHangWarning();
+    this.#emitModelChange();
+  }
+
+  #updateCustomDeleteVisibility() {
+    const modelEl = this.#q('.model-select');
+    const editCustomBtn = this.#q('.edit-custom-model-btn');
+    const deleteCustomBtn = this.#q('.delete-custom-model-btn');
+    const selected = getCustomModelByUrl(modelEl.value);
+    deleteCustomBtn.hidden = !selected;
+    deleteCustomBtn.disabled = !selected || this.#isRunning;
+    deleteCustomBtn.title = selected ? `Delete custom model "${selected.label}"` : 'Delete selected custom model';
+    editCustomBtn.hidden = !selected;
+    editCustomBtn.disabled = !selected || this.#isRunning;
+    editCustomBtn.title = selected ? `Edit custom model "${selected.label}"` : 'Edit selected custom model';
+  }
+
+  #updateInputMirrors() {
+    this.#q('.pass-all-blend-val').textContent = this.#q('.pass-all-blend').value;
+    this.#q('.detector-face-score-val').textContent = this.#q('.detector-face-score').value;
+    this.#q('.detector-face-blend-val').textContent = this.#q('.detector-face-blend').value;
+  }
+
+  // When Comparison is on, the All/Faces passes are mutually exclusive — they
+  // would muddy what the slider is showing. Disable their controls and dim
+  // the rows, but leave the underlying values untouched so toggling
+  // Comparison off restores the user's prior pass setup verbatim.
+  #syncComparisonExclusion() {
+    const compareOn = !!this.#q('.pass-compare-enabled')?.checked;
+    const otherRows = this.querySelectorAll('.detector-row:not(.pass-compare-row)');
+    for (const row of otherRows) {
+      row.classList.toggle('passes-disabled', compareOn);
+      for (const ctrl of row.querySelectorAll('input, select')) {
+        ctrl.disabled = compareOn;
+      }
+    }
+  }
+
+  #updateHangWarning() {
+    const warnEl = this.#q('.hang-warn');
+    const tipEl = this.#q('.hang-warn-tip');
+    const modelOpt = this.#q('.model-select').selectedOptions[0];
+    if (this.#isBuiltInResampler(modelOpt)) {
+      warnEl.classList.remove('visible');
+      return;
+    }
+    const sizeMB = parseFloat(modelOpt?.dataset.sizemb) || 0;
+    const tileSize = parseInt(this.#q('.tilesize-select').value, 10);
+    const isLargeOnBigTile = sizeMB > 10 && tileSize > 128;
+
+    // fp16 inference effectively requires GPU — ORT-Web's WASM EP has very
+    // limited fp16 op coverage so most fp16 models throw a kernel-not-found
+    // or input-dtype error. Surface this before the user runs.
+    const backend = normalizeIntent(modelOpt?.dataset.backend || this.#q('.backend-select').value);
+    const isFp16OnCpu = modelOpt?.dataset.precision === 'fp16' && backend !== 'gpu';
+
+    const show = isLargeOnBigTile || isFp16OnCpu;
+    warnEl.classList.toggle('visible', show);
+    if (!show) return;
+
+    const messages = [];
+    if (isFp16OnCpu) {
+      messages.push(
+        `<strong>fp16 model on CPU backend:</strong> this model uses 16-bit precision, which ONNX Runtime's CPU/WASM backend has very limited support for. Inference will almost certainly fail with an "unexpected input data type" or "kernel not found" error. Switch <em>Backend</em> to <em>GPU</em>.`,
+      );
+    }
+    if (isLargeOnBigTile) {
+      messages.push(
+        `<strong>Large model with big tiles:</strong> models &gt;10 MB combined with tile sizes above 128 can block the browser's main thread for extended periods, causing the UI to freeze. You may not be able to click Stop until the current tile finishes. Consider reducing the tile size or using a smaller model.`,
+      );
+    }
+    tipEl.innerHTML = messages.join('<br><br>');
+  }
+
+  // ── Template ───────────────────────────────────────────────────────────
+
+  #render() {
+    morph(this, `
+      <style>
+        upscaler-controls .controls {
+          display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem;
+          align-items: center; margin-bottom: 1rem;
+        }
+        upscaler-controls .controls label {
+          display: inline-flex; align-items: center; gap: 0.35rem;
+          font-size: 0.85rem; margin-bottom: 0; white-space: nowrap;
+        }
+        upscaler-controls .controls select,
+        upscaler-controls .controls input {
+          margin-bottom: 0; padding: 0.3rem 0.5rem;
+          font-size: 0.85rem; width: auto;
+        }
+        upscaler-controls select:not([multiple], [size]) {
+          max-width: 100%;
+          padding-left: 0.7rem;
+          padding-right: 2.25rem;
+          padding-inline-start: 0.7rem;
+          padding-inline-end: 2.25rem;
+          background-position: center right 0.7rem;
+          overflow: hidden;
+          white-space: nowrap;
+        }
+        upscaler-controls select.model-select,
+        upscaler-controls select.pass-all-model,
+        upscaler-controls select.pass-compare-model,
+        upscaler-controls select.detector-face-model {
+          width: min(100%, 25em);
+          max-width: 25em;
+          text-overflow: ellipsis;
+        }
+        upscaler-controls select.output-select {
+          width: min(100%, calc(2ch + 0.7rem + 2.25rem));
+          max-width: calc(2ch + 0.7rem + 2.25rem);
+        }
+        upscaler-controls select.tilesize-select {
+          width: min(100%, calc(3ch + 0.7rem + 2.25rem));
+          max-width: calc(3ch + 0.7rem + 2.25rem);
+        }
+        upscaler-controls select.backend-select {
+          width: min(100%, calc(4ch + 0.7rem + 2.25rem));
+          max-width: calc(4ch + 0.7rem + 2.25rem);
+        }
+        upscaler-controls .delete-custom-model-btn,
+        upscaler-controls .edit-custom-model-btn {
+          padding: 0.3rem 0.55rem;
+          min-width: 2rem;
+        }
+        upscaler-controls .controls button {
+          margin-bottom: 0; padding: 0.4rem 0.8rem;
+          font-size: 0.85rem; width: auto;
+        }
+        upscaler-controls .local-controls {
+          display: inline-flex; flex-wrap: wrap; gap: 0.4rem 0.75rem;
+          align-items: center;
+        }
+        upscaler-controls .passes-panel {
+          margin-bottom: 1rem;
+          padding: 0.6rem 0.7rem;
+          border: 1px solid var(--pico-muted-border-color);
+          border-radius: var(--pico-border-radius);
+        }
+        upscaler-controls .passes-panel > summary {
+          cursor: pointer;
+          font-size: 0.9rem;
+          user-select: none;
+          margin-bottom: 0;
+          padding: 0.15rem 0;
+        }
+        upscaler-controls .detector-row {
+          display: grid;
+          grid-template-columns:
+            minmax(11rem, 1fr)
+            minmax(17rem, 2.2fr)
+            minmax(13rem, 1.2fr)
+            minmax(14rem, 1.35fr);
+          gap: 0.35rem 0.55rem;
+          align-items: center;
+          width: 100%;
+          max-width: none;
+          margin-top: 0.45rem;
+        }
+        upscaler-controls .detector-row:first-of-type {
+          margin-top: 0;
+        }
+        upscaler-controls .detector-row.passes-disabled {
+          opacity: 0.5;
+        }
+        upscaler-controls .detector-row label {
+          margin-bottom: 0;
+          display: grid;
+          grid-template-columns: auto minmax(0, 1fr);
+          align-items: center;
+          column-gap: 0.35rem;
+          font-size: 0.85rem;
+          min-height: 2rem;
+          width: 100%;
+        }
+        upscaler-controls .detector-row .check-control {
+          display: inline-flex;
+          align-items: center;
+          gap: 0.35rem;
+          width: auto;
+        }
+        upscaler-controls .detector-row .range-control {
+          grid-template-columns: auto auto;
+        }
+        upscaler-controls .detector-row .range-field {
+          display: inline-grid;
+          grid-auto-flow: column;
+          align-items: center;
+          column-gap: 0.3rem;
+        }
+        upscaler-controls .detector-row .range-input {
+          width: 7rem;
+          vertical-align: middle;
+        }
+        upscaler-controls .detector-row .range-value {
+          min-width: 4ch;
+          font-variant-numeric: tabular-nums;
+        }
+        upscaler-controls .detector-row input,
+        upscaler-controls .detector-row select {
+          margin-bottom: 0;
+        }
+        upscaler-controls .detector-row input[type="checkbox"] {
+          margin-top: 0;
+        }
+        upscaler-controls .detector-row .model-control select {
+          width: 100%;
+          min-width: 0;
+        }
+        upscaler-controls .detector-row .model-control {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        @media (max-width: 980px) {
+          upscaler-controls .detector-row {
+            grid-template-columns: 1fr;
+          }
+        }
+        upscaler-controls .hang-warn {
+          display: none;
+          position: relative;
+          color: var(--pico-del-color, #c62828);
+          font-size: 1rem;
+          cursor: help;
+          align-self: center;
+        }
+        upscaler-controls .hang-warn.visible {
+          display: inline-flex;
+        }
+        upscaler-controls .hang-warn .hang-warn-tip {
+          display: none;
+          position: absolute;
+          bottom: calc(100% + 0.45rem);
+          left: 50%;
+          transform: translateX(-50%);
+          background: var(--pico-card-background-color, #1e1e2e);
+          color: var(--pico-color, #cdd6f4);
+          border: 1px solid var(--pico-muted-border-color);
+          border-radius: var(--pico-border-radius);
+          padding: 0.5rem 0.65rem;
+          font-size: 0.78rem;
+          line-height: 1.4;
+          white-space: normal;
+          width: max-content;
+          max-width: 26rem;
+          z-index: 10;
+          pointer-events: none;
+          box-shadow: 0 2px 8px rgba(0,0,0,.25);
+        }
+        upscaler-controls .hang-warn:hover .hang-warn-tip {
+          display: block;
+        }
+      </style>
+
+      <div class="controls">
+        <span class="local-controls">
+          <label>Model:
+            <select class="model-select">
+              ${modelOptionsHTML(undefined, { includeResamplers: true })}
+              ${getUploadCustomOptionHTML()}
+            </select>
+          </label>
+          <button class="secondary outline edit-custom-model-btn" type="button" hidden title="Edit selected custom model" aria-label="Edit selected custom model">
+            <i class="fas fa-pen"></i>
+          </button>
+          <button class="secondary outline delete-custom-model-btn" type="button" hidden title="Delete selected custom model" aria-label="Delete selected custom model">
+            <i class="fas fa-trash"></i>
+          </button>
+          <label>Backend:
+            <select class="backend-select">
+              <option value="gpu">GPU</option>
+              <option value="cpu">CPU</option>
+            </select>
+          </label>
+          <label>Tile size:
+            <select class="tilesize-select">
+              <option value="64">64</option>
+              <option value="80">80</option>
+              <option value="128">128</option>
+              <option value="192" selected>192</option>
+              <option value="256">256</option>
+              <option value="384">384</option>
+              <option value="512">512</option>
+              <option value="0">Full image (no tiling)</option>
+            </select>
+          </label>
+          <label>Final Output:
+            <select class="output-select">
+              <option value="1">1x</option>
+              <option value="2">2x</option>
+              <option value="3">3x</option>
+              <option value="4" selected>4x (no downscale)</option>
+            </select>
+          </label>
+        </span>
+
+        <button class="perf-toggle-btn secondary outline" title="Toggle performance monitor">
+          <i class="fas fa-gauge-high"></i>
+        </button>
+        <span class="hang-warn" aria-label="Performance warning">
+          <i class="fas fa-triangle-exclamation"></i>
+          <span class="hang-warn-tip"></span>
+        </span>
+        <button class="clear-cache-btn secondary outline" hidden title="Clear cached ONNX models (frees memory)">
+          <i class="fas fa-broom"></i> Clear Cache
+        </button>
+      </div>
+
+      <details class="passes-panel">
+        <summary><i class="fas fa-user-check"></i> Additional Passes</summary>
+        <div class="detector-row pass-compare-row">
+          <label class="check-control">
+            <input class="pass-compare-enabled" type="checkbox">
+            Comparison
+          </label>
+          <label class="model-control">
+            <select class="pass-compare-model" aria-label="Comparison pass model">
+              ${modelOptionsHTML()}
+            </select>
+          </label>
+        </div>
+        <div class="detector-row pass-all-row">
+          <label class="check-control">
+            <input class="pass-all-enabled" type="checkbox">
+            All (full image blend)
+          </label>
+          <label class="model-control">
+            <select class="pass-all-model" aria-label="All pass model">
+              ${modelOptionsHTML()}
+            </select>
+          </label>
+          <label class="range-control" title="Blend opacity of the secondary full-image pass over the base upscale">
+            Blend:
+            <span class="range-field">
+              <input class="pass-all-blend range-input" type="range" min="0" max="1" step="0.05" value="0.40">
+              <span class="pass-all-blend-val range-value">0.40</span>
+            </span>
+          </label>
+        </div>
+        <div class="detector-row pass-faces-row">
+          <label class="check-control">
+            <input class="detector-face-enabled" type="checkbox">
+            Faces (YuNet)
+          </label>
+          <label class="model-control">
+            <select class="detector-face-model" aria-label="Face pass model">
+              ${modelOptionsHTML(undefined, { selected: 'models/RMBN_M4C8_FACES_x4.onnx' })}
+            </select>
+          </label>
+          <label class="range-control" title="Blend opacity of the face patch over the base upscale (1 = full replace, lower = transparent blend)">
+            Blend:
+            <span class="range-field">
+              <input class="detector-face-blend range-input" type="range" min="0" max="1" step="0.05" value="0.65">
+              <span class="detector-face-blend-val range-value">0.65</span>
+            </span>
+          </label>
+          <label hidden>Padding:
+            <input class="detector-face-padding" type="number" min="0" max="512" step="1" value="20" style="width:7ch">
+            px
+          </label>
+          <label class="range-control" title="Minimum face detection confidence">
+            Confidence Threshold:
+            <span class="range-field">
+              <input class="detector-face-score range-input" type="range" min="0.3" max="0.95" step="0.01" value="0.70">
+              <span class="detector-face-score-val range-value">0.70</span>
+            </span>
+          </label>
+        </div>
+      </details>
+
+      <custom-model-upload-dialog></custom-model-upload-dialog>
+    `);
+  }
+}
+
+customElements.define('upscaler-controls', UpscalerControls);

features/upscaler/ui/upscaler-toolbar.js

@@ -0,0 +1,247 @@
+import 'components/status-bar';
+import 'components/view-mode-controls';
+
+const STATES = ['empty', 'ready', 'running', 'done'];
+
+class UpscalerToolbar extends HTMLElement {
+  #state = 'empty';
+  #hasCrop = false;
+
+  connectedCallback() {
+    this.#render();
+    this.#wireEvents();
+    this.#applyState();
+  }
+
+  #q(sel) { return this.querySelector(sel); }
+
+  // ── Public surface ─────────────────────────────────────────────────────
+
+  get state() { return this.#state; }
+  set state(s) {
+    if (!STATES.includes(s)) return;
+    this.#state = s;
+    this.#applyState();
+  }
+
+  set hasCrop(b) {
+    this.#hasCrop = !!b;
+    this.#applyState();
+  }
+
+  get viewMode() { return this.#q('view-mode-controls').mode; }
+  set viewMode(mode) {
+    const vmc = this.#q('view-mode-controls');
+    if (vmc) vmc.mode = mode;
+  }
+
+  setUpscaleLabel(label) {
+    const span = this.#q('.upscale-btn .btn-label');
+    if (span) span.textContent = label;
+  }
+
+  // status-bar lives inside this component visually; expose it so the
+  // orchestrator can write progress/messages directly during a run.
+  get statusBar() { return this.#q('status-bar'); }
+
+  // ── Internal ───────────────────────────────────────────────────────────
+
+  #applyState() {
+    const setDisplay = (sel, show) => {
+      const el = this.#q(sel);
+      if (el) el.style.display = show ? 'inline-block' : 'none';
+    };
+    const setHidden = (sel, hidden) => {
+      const el = this.#q(sel);
+      if (el) el.hidden = hidden;
+    };
+
+    const s = this.#state;
+    const upscaleBtn = this.#q('.upscale-btn');
+    upscaleBtn.disabled = s === 'empty' || s === 'running';
+
+    setDisplay('.stop-btn',         s === 'running');
+    setDisplay('.startover-btn',    s === 'ready' || s === 'done');
+    setDisplay('.back-to-crop-btn', s === 'done');
+    setDisplay('.clear-crop-btn',   s === 'ready' && this.#hasCrop);
+
+    setHidden('.canvas-toolbar-left',  s === 'empty');
+    setHidden('.canvas-toolbar-right', s !== 'done');
+  }
+
+  #wireEvents() {
+    const fire = (name) => () => this.dispatchEvent(
+      new CustomEvent(name, { bubbles: true }),
+    );
+
+    this.#q('.upscale-btn'      ).addEventListener('click', fire('upscale-click'));
+    this.#q('.stop-btn'         ).addEventListener('click', fire('stop-click'));
+    this.#q('.startover-btn'    ).addEventListener('click', fire('start-over-click'));
+    this.#q('.clear-crop-btn'   ).addEventListener('click', fire('clear-crop-click'));
+    this.#q('.back-to-crop-btn' ).addEventListener('click', fire('back-to-crop-click'));
+    this.#q('.open-in-tab-btn'  ).addEventListener('click', fire('open-in-tab-click'));
+    this.#q('.download-btn'     ).addEventListener('click', fire('download-click'));
+
+    // Re-emit view-mode-controls' change as a bubbling event so the
+    // orchestrator can forward to canvas-area without poking through.
+    this.#q('view-mode-controls').addEventListener('mode-change', (e) => {
+      this.dispatchEvent(new CustomEvent('view-mode-change', {
+        bubbles: true, detail: { mode: e.detail.mode },
+      }));
+    });
+  }
+
+  #render() {
+    this.innerHTML = `
+      <style>
+        upscaler-toolbar {
+          position: sticky;
+          top: 0.75rem;
+          height: 0;
+          z-index: 10;
+          pointer-events: none;
+          display: block;
+        }
+        upscaler-toolbar .canvas-toolbar-stack-left {
+          position: absolute;
+          top: 0;
+          left: 0.75rem;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          gap: 0.25rem;
+          max-width: calc(100% - 1.5rem);
+          pointer-events: none;
+        }
+        upscaler-toolbar .canvas-toolbar-stack-left > * {
+          pointer-events: auto;
+        }
+        upscaler-toolbar .canvas-toolbar {
+          display: inline-flex;
+          gap: 0.25rem;
+          align-items: center;
+          padding: 0.25rem 0.3rem;
+          background: color-mix(in oklab, var(--pico-card-background-color, #1e1e2e) 32%, transparent);
+          border: 1px solid color-mix(in oklab, var(--pico-muted-border-color) 45%, transparent);
+          border-radius: var(--pico-border-radius);
+          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
+          backdrop-filter: blur(10px) saturate(1.1);
+          -webkit-backdrop-filter: blur(10px) saturate(1.1);
+          pointer-events: auto;
+          max-width: 100%;
+        }
+        upscaler-toolbar .canvas-toolbar-right {
+          position: absolute;
+          top: 0;
+          right: 0.75rem;
+          max-width: calc(100% - 1.5rem);
+          pointer-events: auto;
+        }
+        upscaler-toolbar .canvas-toolbar[hidden] {
+          display: none;
+        }
+        upscaler-toolbar .canvas-toolbar button {
+          margin-bottom: 0;
+          padding: 0.25rem 0.5rem;
+          font-size: 0.72rem;
+          line-height: 1.2;
+          width: auto;
+          white-space: nowrap;
+        }
+        upscaler-toolbar .canvas-toolbar button.secondary,
+        upscaler-toolbar .canvas-toolbar button.outline {
+          opacity: 0.78;
+          transition: opacity 0.15s ease;
+          background: transparent;
+          border-color: currentColor;
+          color: #fff;
+          mix-blend-mode: difference;
+        }
+        upscaler-toolbar .canvas-toolbar button.secondary:hover,
+        upscaler-toolbar .canvas-toolbar button.outline:hover,
+        upscaler-toolbar .canvas-toolbar button.secondary:focus-visible,
+        upscaler-toolbar .canvas-toolbar button.outline:focus-visible {
+          opacity: 1;
+          background: transparent;
+          border-color: currentColor;
+          color: #fff;
+        }
+        upscaler-toolbar .canvas-toolbar button .fas {
+          font-size: 0.78em;
+          margin-right: 0.15rem;
+        }
+        upscaler-toolbar .canvas-toolbar button .btn-label {
+          display: inline;
+        }
+        @media (max-width: 768px) {
+          upscaler-toolbar .canvas-toolbar button .btn-label {
+            display: none;
+          }
+          upscaler-toolbar .canvas-toolbar button .fas {
+            margin-right: 0;
+          }
+        }
+        upscaler-toolbar .canvas-toolbar status-bar {
+          display: inline-flex;
+          align-items: center;
+          margin-left: 0.3rem;
+          flex: 1 1 8rem;
+          min-width: 0;
+          max-width: 22rem;
+        }
+        upscaler-toolbar .canvas-toolbar status-bar .status-text {
+          font-size: 0.68rem;
+          line-height: 1.25;
+          margin-bottom: 0;
+          color: #fff;
+          mix-blend-mode: difference;
+          flex-shrink: 0;
+          overflow: visible;
+        }
+        upscaler-toolbar .canvas-toolbar status-bar .progress-track {
+          height: 5px;
+          margin-bottom: 0;
+          flex: 1 1 10rem;
+          min-width: 3rem;
+        }
+        upscaler-toolbar .canvas-toolbar status-bar .progress-count {
+          font-size: 0.62rem;
+          color: #fff;
+          mix-blend-mode: difference;
+        }
+      </style>
+
+      <div class="canvas-toolbar-stack-left">
+        <div class="canvas-toolbar canvas-toolbar-left" hidden>
+          <button class="back-to-crop-btn secondary outline" style="display:none" type="button" title="Back to crop / change selection">
+            <i class="fas fa-arrow-left"></i><i class="fas fa-crop-simple"></i> <span class="btn-label">Edit Crop</span>
+          </button>
+          <button class="upscale-btn" disabled title="Upscale image">
+            <i class="fas fa-wand-magic-sparkles"></i> <span class="btn-label">Upscale 4x</span>
+          </button>
+          <button class="stop-btn secondary" style="display:none" title="Stop upscale">
+            <i class="fas fa-stop"></i> <span class="btn-label">Stop</span>
+          </button>
+          <view-mode-controls></view-mode-controls>
+          <button class="clear-crop-btn secondary outline" style="display:none" type="button" title="Clear the selected crop region">
+            <i class="fas fa-eraser"></i> <span class="btn-label">Clear Selection</span>
+          </button>
+          <button class="startover-btn secondary outline" style="display:none" title="Clear and start over with a new image">
+            <i class="fas fa-xmark"></i> <span class="btn-label">Clear</span>
+          </button>
+          <status-bar></status-bar>
+        </div>
+      </div>
+      <div class="canvas-toolbar canvas-toolbar-right" hidden>
+        <button class="open-in-tab-btn secondary outline" type="button" title="Open the upscaled image in a new tab">
+          <i class="fas fa-up-right-from-square"></i> <span class="btn-label">Open in Tab</span>
+        </button>
+        <button class="download-btn secondary outline" type="button" title="Download the upscaled image">
+          <i class="fas fa-download"></i> <span class="btn-label">Download</span>
+        </button>
+      </div>
+    `;
+  }
+}
+
+customElements.define('upscaler-toolbar', UpscalerToolbar);

features/upscaler/upscale-pipeline.js

@@ -0,0 +1,536 @@
+/**
+ * Step-based upscale pipeline — unified processing for image and video upscaling.
+ * Only the Pipeline class is exported; everything else is module-private.
+ */
+
+import { UpscalerEngine } from './engine/upscaler-engine.js';
+import { FaceDetectorEngine } from './engine/face-detector-engine.js';
+import {
+  expandRect,
+  cropToCanvas,
+  compositeFeathered,
+  computeFeatherPx,
+  ensureCanvas,
+  blendCanvas,
+} from 'lib/canvas';
+import { buildTileGrid } from './engine/tiling.js';
+
+// ---------------------------------------------------------------------------
+// Engine pool — caches engines by tag, recreates when config diverges.
+// ---------------------------------------------------------------------------
+
+class EnginePool {
+  #slots = new Map();
+
+  #evict(tag) {
+    const slot = this.#slots.get(tag);
+    if (!slot) return;
+    this.#slots.delete(tag);
+    (slot.engine.destroy ?? slot.engine.release)?.call(slot.engine);
+  }
+
+  getUpscaler(tag, { modelUrl, scale, modelValueRange, modelLayout = 'nchw', modelInputMultiple = 1, modelPrecision = 'fp32', upscaleBefore = false, tileBlend = 'overlapCrop', profile = false }) {
+    // Backend isn't a construction-time parameter — the engine's loadModel
+    // handles intent transitions internally (release session, load new). The
+    // pool's identity is purely the things the engine can't change after the
+    // fact: model URL, layout, precision, tile-blend strategy.
+    const slot = this.#slots.get(tag);
+    if (
+      slot &&
+      slot.modelUrl === modelUrl &&
+      slot.modelLayout === modelLayout &&
+      slot.modelInputMultiple === modelInputMultiple &&
+      slot.modelPrecision === modelPrecision &&
+      slot.upscaleBefore === upscaleBefore &&
+      slot.tileBlend === tileBlend
+    ) {
+      slot.engine.profiling = profile;
+      return slot.engine;
+    }
+    this.#evict(tag);
+    const engine = new UpscalerEngine({ modelUrl, scale, modelValueRange, modelLayout, modelInputMultiple, modelPrecision, upscaleBefore, tileBlend, profile });
+    this.#slots.set(tag, { engine, modelUrl, modelLayout, modelInputMultiple, modelPrecision, upscaleBefore, tileBlend });
+    return engine;
+  }
+
+  getDetector(tag) {
+    // Backend transitions are handled inside FaceDetectorEngine.loadModel;
+    // the pool just returns the persistent engine instance.
+    let slot = this.#slots.get(tag);
+    if (slot) return slot.engine;
+    const engine = new FaceDetectorEngine();
+    this.#slots.set(tag, { engine });
+    return engine;
+  }
+
+  destroyAll() {
+    for (const { engine } of this.#slots.values()) {
+      (engine.destroy ?? engine.release)?.call(engine);
+    }
+    this.#slots.clear();
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Steps — { name, shouldRun?(ctx), run(ctx, cb) → ctx }
+// ---------------------------------------------------------------------------
+
+const tiledUpscaleStep = {
+  name: 'tiledUpscale',
+  async run(ctx, cb) {
+    const { modelUrl, scale, modelValueRange, modelLayout, modelInputMultiple, modelPrecision, upscaleBefore, tileBlend, backend, tileSize, profile } = ctx.config;
+    const engine = ctx.pool.getUpscaler('base', {
+      modelUrl,
+      scale,
+      modelValueRange,
+      modelLayout,
+      modelInputMultiple,
+      modelPrecision,
+      upscaleBefore,
+      tileBlend,
+      backend,
+      profile,
+    });
+    emitStage(cb, 'tiledUpscale', 'loading', { message: 'Loading base model…' });
+    const tLoad = performance.now();
+    await engine.loadModel(backend, (frac, msg) => {
+      cb.onProgress?.(frac, msg);
+      emitStage(cb, 'tiledUpscale', 'loading', { progress: frac, message: msg });
+    });
+    const modelLoadMs = Number((performance.now() - tLoad).toFixed(1));
+    emitStage(cb, 'tiledUpscale', 'running', { message: 'Running base upscale pass…' });
+    const { canvas, perf, ortProfile } = await engine.upscale(ctx.image, tileSize, {
+      onTile: (info) => cb.onTile?.({ ...info, step: 'tiledUpscale' }),
+      signal: cb.signal,
+    });
+    return {
+      ...ctx,
+      image: canvas,
+      scale: engine.scale,
+      perf,
+      ortProfile,
+      stepPerf: { ...(ctx.stepPerf || {}), tiledUpscale: { ...perf, modelLoadMs } },
+    };
+  },
+};
+
+const comparisonStep = {
+  name: 'comparison',
+  shouldRun: (ctx) => !!ctx.config.comparison,
+  async run(ctx, cb) {
+    const { comparison, backend, tileSize } = ctx.config;
+    const passBackend = comparison.backend || backend;
+    const engine = ctx.pool.getUpscaler('comparison-upscaler', {
+      modelUrl: comparison.modelUrl,
+      scale: comparison.scale,
+      modelValueRange: comparison.modelValueRange,
+      modelLayout: comparison.modelLayout,
+      modelInputMultiple: comparison.modelInputMultiple,
+      modelPrecision: comparison.modelPrecision,
+      upscaleBefore: comparison.upscaleBefore,
+      tileBlend: comparison.tileBlend,
+      backend: passBackend,
+    });
+    emitStage(cb, 'comparison', 'loading', { message: 'Loading comparison model…' });
+    const tLoad = performance.now();
+    await engine.loadModel(passBackend, (progress, message) => {
+      emitStage(cb, 'comparison', 'loading', { progress, message });
+    });
+    const modelLoadMs = Number((performance.now() - tLoad).toFixed(1));
+    emitStage(cb, 'comparison', 'running', { message: 'Running comparison upscale pass…' });
+
+    const { canvas, perf } = await engine.upscale(ctx.source, tileSize, {
+      onTile: (info) => cb.onTile?.({ ...info, step: 'comparison' }),
+      signal: cb.signal,
+    });
+    return {
+      ...ctx,
+      comparisonImage: canvas,
+      stepPerf: { ...(ctx.stepPerf || {}), comparison: { ...perf, modelLoadMs } },
+    };
+  },
+};
+
+const blendAllStep = {
+  name: 'blendAll',
+  shouldRun: (ctx) => !!ctx.config.all,
+  async run(ctx, cb) {
+    const { all, backend, tileSize } = ctx.config;
+    const passBackend = all.backend || backend;
+    const engine = ctx.pool.getUpscaler('all-upscaler', {
+      modelUrl: all.modelUrl,
+      scale: all.scale,
+      modelValueRange: all.modelValueRange,
+      modelLayout: all.modelLayout,
+      modelInputMultiple: all.modelInputMultiple,
+      modelPrecision: all.modelPrecision,
+      upscaleBefore: all.upscaleBefore,
+      tileBlend: all.tileBlend,
+      backend: passBackend,
+    });
+    emitStage(cb, 'blendAll', 'loading', { message: 'Loading all-pass model…' });
+    const tLoad = performance.now();
+    await engine.loadModel(passBackend, (progress, message) => {
+      emitStage(cb, 'blendAll', 'loading', { progress, message });
+    });
+    const modelLoadMs = Number((performance.now() - tLoad).toFixed(1));
+    emitStage(cb, 'blendAll', 'running', { message: 'Running all-pass tiled blend…' });
+
+    const { canvas: overlayRaw, perf } = await engine.upscale(ctx.source, tileSize, {
+      onTile: (info) => cb.onTile?.({ ...info, step: 'blendAll' }),
+      signal: cb.signal,
+    });
+    let baseCanvas = ensureCanvas(ctx.image);
+    let overlayCanvas = overlayRaw;
+    if (overlayRaw.width !== baseCanvas.width || overlayRaw.height !== baseCanvas.height) {
+      overlayCanvas = document.createElement('canvas');
+      overlayCanvas.width = baseCanvas.width;
+      overlayCanvas.height = baseCanvas.height;
+      overlayCanvas.getContext('2d').drawImage(overlayRaw, 0, 0, baseCanvas.width, baseCanvas.height);
+    }
+    baseCanvas = blendCanvas(baseCanvas, overlayCanvas, all.blendOpacity);
+    return {
+      ...ctx,
+      image: baseCanvas,
+      stepPerf: { ...(ctx.stepPerf || {}), blendAll: { ...perf, modelLoadMs } },
+    };
+  },
+};
+
+const detectFacesStep = {
+  name: 'detectFaces',
+  shouldRun: (ctx) => !!ctx.config.face,
+  async run(ctx, cb) {
+    const { backend, face } = ctx.config;
+    const detector = ctx.pool.getDetector('face-detector');
+    emitStage(cb, 'detectFaces', 'loading', { message: 'Loading face detector…' });
+    const tLoad = performance.now();
+    await detector.loadModel('face-yunet', backend, (progress, message) => {
+      emitStage(cb, 'detectFaces', 'loading', { progress, message });
+    });
+    const modelLoadMs = Number((performance.now() - tLoad).toFixed(1));
+    emitStage(cb, 'detectFaces', 'running', { message: 'Detecting faces…' });
+    const tDetect = performance.now();
+    const faces = await detector.detectFaces(ctx.source, {
+      detectorKey: 'face-yunet',
+      scoreThreshold: face.scoreThreshold,
+      signal: cb.signal,
+    });
+    const detectPerf = {
+      modelLoadMs,
+      total: performance.now() - tDetect,
+      detections: faces.length,
+    };
+    emitStage(cb, 'detectFaces', 'running', { message: `Detected ${faces.length} face(s).` });
+    return {
+      ...ctx,
+      detections: { ...ctx.detections, face: faces },
+      stepPerf: { ...(ctx.stepPerf || {}), detectFaces: detectPerf },
+    };
+  },
+};
+
+const enhanceFacesStep = {
+  name: 'enhanceFaces',
+  shouldRun: (ctx) => ctx.detections.face?.length > 0,
+  async run(ctx, cb) {
+    const { face, backend } = ctx.config;
+    const faceBackend = face.backend || backend;
+    const { source, scale } = ctx;
+
+    let canvas = ensureCanvas(ctx.image);
+
+    const engine = ctx.pool.getUpscaler('face-upscaler', {
+      modelUrl: face.modelUrl,
+      scale: face.scale,
+      modelValueRange: face.modelValueRange,
+      modelLayout: face.modelLayout,
+      modelInputMultiple: face.modelInputMultiple,
+      modelPrecision: face.modelPrecision,
+      upscaleBefore: face.upscaleBefore,
+      tileBlend: face.tileBlend,
+      backend: faceBackend,
+    });
+    emitStage(cb, 'enhanceFaces', 'loading', { message: 'Loading face enhancer model…' });
+    const tLoad = performance.now();
+    await engine.loadModel(faceBackend, (progress, message) => {
+      emitStage(cb, 'enhanceFaces', 'loading', { progress, message });
+    });
+    const modelLoadMs = Number((performance.now() - tLoad).toFixed(1));
+    emitStage(cb, 'enhanceFaces', 'running', { message: 'Enhancing detected faces…' });
+
+    const srcW = source.naturalWidth ?? source.width;
+    const srcH = source.naturalHeight ?? source.height;
+    const faces = ctx.detections.face || [];
+    const configuredFaceTileSize = Number.isFinite(face.tileSize) ? face.tileSize : ctx.config.tileSize;
+    const agg = {
+      setup: 0, extract: 0, inference: 0, inferenceEstimated: 0, readback: 0, gpuRender: 0, writeTile: 0, dispose: 0, total: 0, tiles: 0, modelLoadMs,
+    };
+
+    for (let faceIndex = 0; faceIndex < faces.length; faceIndex++) {
+      const det = faces[faceIndex];
+      if (cb.signal?.aborted) throw new DOMException('Cancelled', 'AbortError');
+      emitStage(cb, 'enhanceFaces', 'running', {
+        message: `Enhancing face ${faceIndex + 1}/${faces.length}…`,
+      });
+
+      const roi = expandRect(det, face.paddingPx, srcW, srcH);
+      if (roi.w < 1 || roi.h < 1) continue;
+
+      const crop = cropToCanvas(source, roi);
+      if (!crop) continue;
+
+      const maxTileForRoi = Math.max(1, Math.min(roi.w, roi.h));
+      const requestedTileSize = Number.isFinite(configuredFaceTileSize) ? configuredFaceTileSize : 192;
+      // Honor selected tile size for face patches so large faces are not over-tiled.
+      const tileSize = requestedTileSize <= 0
+        ? 0
+        : Math.min(maxTileForRoi, Math.max(64, requestedTileSize));
+      const faceTileTotal = buildTileGrid(roi.w, roi.h, tileSize, 16).length;
+      const { canvas: patchRaw, perf } = await engine.upscale(crop, tileSize, {
+        onTile: (info) => cb.onTile?.({
+          ...info,
+          step: 'enhanceFaces',
+          faceIndex,
+          faceTotal: faces.length,
+          faceTileTotal,
+        }),
+        signal: cb.signal,
+      });
+      agg.setup += perf.setup;
+      agg.extract += perf.extract;
+      agg.inference += perf.inference;
+      agg.inferenceEstimated += perf.inferenceEstimated || 0;
+      agg.readback += perf.readback;
+      agg.gpuRender += perf.gpuRender;
+      agg.writeTile += perf.writeTile;
+      agg.dispose += perf.dispose;
+      agg.total += perf.total;
+      agg.tiles += perf.tiles;
+
+      const tw = roi.w * scale;
+      const th = roi.h * scale;
+      const patch = document.createElement('canvas');
+      patch.width = tw;
+      patch.height = th;
+      const pctx = patch.getContext('2d');
+      pctx.imageSmoothingEnabled = true;
+      pctx.imageSmoothingQuality = 'high';
+      pctx.drawImage(patchRaw, 0, 0, tw, th);
+
+      const roiOutX = roi.x * scale;
+      const roiOutY = roi.y * scale;
+      compositeFeathered(canvas, patch, roiOutX, roiOutY, {
+        featherPx: computeFeatherPx({
+          configuredFeatherPx: face.featherPx ?? 16,
+          regionW: det.w, regionH: det.h,
+          patchW: tw, patchH: th,
+          paddingPx: face.paddingPx,
+          scale,
+        }),
+        innerRect: {
+          x: Math.max(0, (det.x - roi.x) * scale),
+          y: Math.max(0, (det.y - roi.y) * scale),
+          w: Math.max(1, det.w * scale),
+          h: Math.max(1, det.h * scale),
+        },
+        blendOpacity: face.blendOpacity,
+      });
+
+      cb.onTile?.({
+        canvas,
+        outX: roiOutX,
+        outY: roiOutY,
+        outW: tw,
+        outH: th,
+        step: 'enhanceFaces',
+        faceIndex,
+        faceTotal: faces.length,
+        composited: true,
+        index: faceIndex,
+        total: faces.length,
+      });
+
+      crop.width = crop.height = 0;
+      patch.width = patch.height = 0;
+      patchRaw.width = patchRaw.height = 0;
+    }
+
+    return { ...ctx, image: canvas, stepPerf: { ...(ctx.stepPerf || {}), enhanceFaces: agg } };
+  },
+};
+
+// ---------------------------------------------------------------------------
+// Step runner
+// ---------------------------------------------------------------------------
+
+const STEPS = [tiledUpscaleStep, comparisonStep, blendAllStep, detectFacesStep, enhanceFacesStep];
+
+function getImageSize(image) {
+  if (!image) return null;
+  const width = image.naturalWidth ?? image.videoWidth ?? image.width ?? 0;
+  const height = image.naturalHeight ?? image.videoHeight ?? image.height ?? 0;
+  return width > 0 && height > 0 ? `${width}x${height}` : null;
+}
+
+function logStep(event, stepName, details = {}) {
+  console.debug(`[UpscalePipeline] ${event} ${stepName}`, details);
+}
+
+function emitStage(cb, step, phase, details = {}) {
+  cb.onStage?.({ step, phase, ...details });
+}
+
+const UPSCALE_PERF_KEYS = [
+  'setup',
+  'extract',
+  'inference',
+  'inferenceEstimated',
+  'readback',
+  'gpuRender',
+  'writeTile',
+  'dispose',
+];
+
+function getImageDims(image) {
+  return {
+    width: image?.naturalWidth ?? image?.videoWidth ?? image?.width ?? 0,
+    height: image?.naturalHeight ?? image?.videoHeight ?? image?.height ?? 0,
+  };
+}
+
+function looksLikeUpscalePerf(perf) {
+  return perf && typeof perf === 'object' && (
+    Number.isFinite(perf.inference) ||
+    Number.isFinite(perf.setup) ||
+    Number.isFinite(perf.gpuRender)
+  );
+}
+
+function aggregateSessionPerf(stepPerf, ctx, input, config, totalMs) {
+  const src = getImageDims(input);
+  const out = getImageDims(ctx.image);
+  const session = {
+    setup: 0,
+    extract: 0,
+    inference: 0,
+    inferenceEstimated: 0,
+    readback: 0,
+    gpuRender: 0,
+    writeTile: 0,
+    dispose: 0,
+    modelLoad: 0,
+    total: totalMs,
+    tiles: 0,
+    tileSize: Number.isFinite(config.tileSize) ? config.tileSize : 0,
+    srcW: src.width,
+    srcH: src.height,
+    outW: out.width,
+    outH: out.height,
+    pipeline: config.backend === 'webgpu' ? 'gpu' : 'cpu',
+  };
+
+  for (const { perf } of Object.values(stepPerf)) {
+    if (!perf) continue;
+    if (Number.isFinite(perf.modelLoadMs)) session.modelLoad += perf.modelLoadMs;
+    if (!looksLikeUpscalePerf(perf)) continue;
+    if (Number.isFinite(perf.tiles)) session.tiles += perf.tiles;
+    if (perf.pipeline === 'gpu-gpu') session.pipeline = 'gpu-gpu';
+    else if (perf.pipeline === 'gpu' && session.pipeline !== 'gpu-gpu') session.pipeline = 'gpu';
+    for (const key of UPSCALE_PERF_KEYS) {
+      if (Number.isFinite(perf[key])) session[key] += perf[key];
+    }
+  }
+
+  return session;
+}
+
+async function runSteps(steps, pool, input, config, cb = {}) {
+  let ctx = {
+    image: input,
+    source: input,
+    scale: 1,
+    detections: {},
+    perf: null,
+    ortProfile: null,
+    config,
+    pool,
+  };
+  const tPipeline = performance.now();
+  const stepPerf = {};
+  logStep('start', 'pipeline', {
+    steps: steps.length,
+    input: getImageSize(input),
+    backend: config.backend,
+    tileSize: config.tileSize,
+  });
+  for (const step of steps) {
+    if (cb.signal?.aborted) throw new DOMException('Cancelled', 'AbortError');
+    if (step.shouldRun && !step.shouldRun(ctx)) {
+      logStep('skip', step.name);
+      emitStage(cb, step.name, 'skip');
+      continue;
+    }
+    const tStep = performance.now();
+    emitStage(cb, step.name, 'start');
+    logStep('start', step.name);
+    try {
+      ctx = await step.run(ctx, cb);
+      const durationMs = Number((performance.now() - tStep).toFixed(1));
+      stepPerf[step.name] = {
+        durationMs,
+        ...(ctx.stepPerf?.[step.name] ? { perf: ctx.stepPerf[step.name] } : {}),
+      };
+      emitStage(cb, step.name, 'done', { durationMs });
+      logStep('done', step.name, {
+        durationMs,
+        output: getImageSize(ctx.image),
+      });
+    } catch (error) {
+      emitStage(cb, step.name, 'error', { message: error?.message || String(error) });
+      console.warn(`[UpscalePipeline] failed ${step.name}`, error);
+      throw error;
+    }
+  }
+  const totalMs = Number((performance.now() - tPipeline).toFixed(1));
+  emitStage(cb, 'pipeline', 'done', { durationMs: totalMs });
+  logStep('done', 'pipeline', {
+    durationMs: totalMs,
+    output: getImageSize(ctx.image),
+  });
+  const sessionPerf = aggregateSessionPerf(stepPerf, ctx, input, config, totalMs);
+  return { ...ctx, perf: sessionPerf, pipelinePerf: { totalMs, steps: stepPerf } };
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+export class Pipeline {
+  #pool = new EnginePool();
+
+  async run(input, config, callbacks) {
+    return runSteps(STEPS, this.#pool, input, config, callbacks);
+  }
+
+  async warmup(config, { onProgress } = {}) {
+    const { modelUrl, scale, modelValueRange, modelLayout, modelInputMultiple, modelPrecision, upscaleBefore, tileBlend, backend, profile } = config;
+    const engine = this.#pool.getUpscaler('base', {
+      modelUrl,
+      scale,
+      modelValueRange,
+      modelLayout,
+      modelInputMultiple,
+      modelPrecision,
+      upscaleBefore,
+      tileBlend,
+      backend,
+      profile,
+    });
+    await engine.loadModel(backend, onProgress);
+  }
+
+  destroy() {
+    this.#pool.destroyAll();
+  }
+}

features/upscaler/upscaler-app.js

@@ -0,0 +1,558 @@
+import { morph } from 'lib/morph';
+import { trackBackendEvents, friendlyBackend, realizedIsGpu } from 'lib/backend-events';
+import { Pipeline } from './upscale-pipeline.js';
+import './ui/upscaler-controls.js';
+import './ui/upscaler-canvas-area.js';
+import './ui/upscaler-toolbar.js';
+import './ui/perf-monitor.js';
+
+/**
+ * Format a pipeline/inference error for end users.
+ * Detects the ONNX reshape-window-size failure and adds a remediation hint
+ * derived from the model's declared layout/multiple-of/maxTileSize and any
+ * dimensions the runtime reported in the raw error. Pure: caller passes the
+ * relevant model facts so this function stays DOM-free and unit-testable.
+ */
+function formatUpscaleErrorMessage(error, { layout = 'nchw', multipleOf = 1, maxTileSize = null, precision = 'fp32', backend = null } = {}) {
+  const raw = error?.message || String(error || 'Unknown error');
+
+  const isFp16DtypeError =
+    /Unexpected input data type/i.test(raw) && /tensor\(float16\)/i.test(raw);
+  const isFp16KernelMissing =
+    precision === 'fp16' && backend !== 'gpu' &&
+    (/kernel.*not.*found/i.test(raw) || /not.*supported/i.test(raw) || /no kernel/i.test(raw));
+  if (isFp16DtypeError && backend === 'gpu') {
+    return `Model precision metadata was stale: this model declares fp16 inputs but the engine had it tagged as fp32. The engine has now corrected itself — try running again. (If the error persists, open the model from the Edit pencil and set Precision = fp16, or re-upload it.) Raw error: ${raw}`;
+  }
+  if (isFp16DtypeError || isFp16KernelMissing) {
+    return `This model uses fp16 (16-bit) precision, which the CPU backend does not fully support. Switch Backend to "GPU" and run again. Raw error: ${raw}`;
+  }
+
+  const isReshapeWindowError =
+    /reshape_helper\.h/i.test(raw) ||
+    /input_shape_size == size/i.test(raw) ||
+    /cannot be reshaped to the requested shape/i.test(raw);
+  if (!isReshapeWindowError) return raw;
+
+  const upperLayout = String(layout).toUpperCase();
+  const altLayout = upperLayout === 'NHWC' ? 'NCHW' : 'NHWC';
+  const parseShape = (text) => String(text || '')
+    .split(',')
+    .map((v) => parseInt(v.trim(), 10))
+    .filter(Number.isFinite);
+  const shapeMatch = raw.match(/Input shape:\{([^}]*)\}.*requested shape:\{([^}]*)\}/i);
+  const inputDims = shapeMatch ? parseShape(shapeMatch[1]) : [];
+  const requestedDims = shapeMatch ? parseShape(shapeMatch[2]) : [];
+
+  // When the model is known to have a hard input-size cap (detected by the
+  // inspector or set manually), the right remediation is to reduce tile size,
+  // not to bump Multiple-of — bumping it would push padded edge tiles past
+  // the cap.
+  if (Number.isFinite(maxTileSize) && maxTileSize >= 1) {
+    return `Model reshape failed: this model only accepts inputs up to ${maxTileSize}×${maxTileSize}. Reduce Tile size to ≤ ${maxTileSize} and set Multiple-of = ${maxTileSize} so edge tiles get padded back into range. Raw error: ${raw}`;
+  }
+
+  let inferredMultiple = 0;
+  const pow2Requested = requestedDims.filter((d) => d > 1 && d <= 256 && (d & (d - 1)) === 0);
+  if (pow2Requested.length) {
+    inferredMultiple = Math.max(...pow2Requested);
+  }
+  if (inputDims.length > 0 && requestedDims.length > 1) {
+    const likelyGroup = requestedDims[1];
+    if (Number.isFinite(likelyGroup) && likelyGroup > 1 && inputDims[0] % likelyGroup !== 0) {
+      inferredMultiple = Math.max(inferredMultiple, likelyGroup);
+    }
+  }
+
+  const suggestedMultiple = Math.max(multipleOf > 1 ? multipleOf : 8, inferredMultiple || 0);
+  const specificHint = inferredMultiple > 8
+    ? ` Based on the reported reshape, try Multiple-of ${inferredMultiple} first.`
+    : '';
+  return `Model reshape failed (likely window-size constraint). Try setting Multiple-of to ${suggestedMultiple} (common values: 8/16/32/64) and/or switch Layout to ${altLayout}.${specificHint} If reducing the tile size below ~64 makes it work, the model may have a hard upper bound — set "Max tile" on the custom model. Raw error: ${raw}`;
+}
+
+const STEP_LABEL = {
+  tiledUpscale: 'Upscaling',
+  comparison: 'Comparison',
+  blendAll: 'All-pass',
+  detectFaces: 'Detecting',
+  enhanceFaces: 'Faces',
+};
+
+function scaleCanvasToOutput(srCanvas, image, outputScale) {
+  const targetScale = Math.max(1, outputScale || Math.round(srCanvas.width / image.width) || 1);
+  const w = image.width * targetScale;
+  const h = image.height * targetScale;
+  if (srCanvas.width === w && srCanvas.height === h) return srCanvas;
+  const out = document.createElement('canvas');
+  out.width = w;
+  out.height = h;
+  const ctx = out.getContext('2d');
+  ctx.imageSmoothingEnabled = true;
+  ctx.imageSmoothingQuality = 'high';
+  ctx.drawImage(srCanvas, 0, 0, w, h);
+  return out;
+}
+
+function makeComparisonCanvases(resultCanvas, image, outputScale) {
+  const afterCanvas = scaleCanvasToOutput(resultCanvas, image, outputScale);
+  const w = afterCanvas.width;
+  const h = afterCanvas.height;
+  const beforeCanvas = document.createElement('canvas');
+  beforeCanvas.width = w;
+  beforeCanvas.height = h;
+  const bCtx = beforeCanvas.getContext('2d');
+  bCtx.imageSmoothingEnabled = false;
+  bCtx.drawImage(image, 0, 0, w, h);
+  return { beforeCanvas, afterCanvas };
+}
+
+// For Comparison mode: both layers are SR canvases of the same size, so the
+// before slot is the base SR (no pixelated LR upscale) and the after slot
+// is the comparison SR. We still honor the user's Final Output downscale.
+function makeComparisonPairCanvases(baseSR, comparisonSR, image, outputScale) {
+  return {
+    beforeCanvas: scaleCanvasToOutput(baseSR, image, outputScale),
+    afterCanvas: scaleCanvasToOutput(comparisonSR, image, outputScale),
+  };
+}
+
+class UpscalerApp extends HTMLElement {
+  #pipeline = new Pipeline();
+  #abortController = null;
+  #running = false;
+  #generation = 0;
+
+  connectedCallback() {
+    this.#render();
+    this.#wire();
+    this.#restoreViewState();
+  }
+
+  #q(sel) { return this.querySelector(sel); }
+
+  // ── Wiring ─────────────────────────────────────────────────────────────
+
+  #wire() {
+    const controls   = this.#q('upscaler-controls');
+    const canvasArea = this.#q('upscaler-canvas-area');
+    const toolbar    = this.#q('upscaler-toolbar');
+    const perfMon    = this.#q('perf-monitor');
+
+    // Empty initial state — no "Ready" copy; icon alone communicates "waiting".
+    toolbar.statusBar.set({ title: '', state: 'idle', details: '', progress: -1, tileCount: null });
+
+    // Status updates from controls (custom-model upload/edit/delete) carry
+    // their own { title, state, details } payload; forward verbatim.
+    this.addEventListener('status-message', (e) => {
+      toolbar.statusBar.set(e.detail);
+    });
+
+    // Model change → update upscale button label.
+    this.addEventListener('model-change', (e) => {
+      toolbar.setUpscaleLabel(`${e.detail.verb} ${e.detail.scale}x`);
+    });
+
+    // Image loaded → switch to ready phase, pick a default view mode that
+    // keeps the whole image on screen.
+    canvasArea.addEventListener('image-loaded', (e) => {
+      if (this.#running) {
+        this.#abortController?.abort();
+        this.#running = false;
+        this.#generation++;
+        this.#abortController = null;
+      }
+      const img = e.detail.image;
+      this.#setMode(canvasArea.defaultModeForImage(img));
+      canvasArea.showCropping(img);
+      toolbar.state = 'ready';
+      toolbar.hasCrop = false;
+      toolbar.statusBar.set({
+        title: 'Image loaded',
+        state: 'idle',
+        details: `${img.width}×${img.height}. Drag to crop (optional), then click Upscale.`,
+        progress: -1,
+        tileCount: null,
+      });
+    });
+
+    canvasArea.addEventListener('crop-changed', (e) => {
+      const crop = e.detail.crop;
+      const img = canvasArea.image;
+      toolbar.hasCrop = !!crop;
+      toolbar.statusBar.set(crop ? {
+        title: 'Crop selected',
+        state: 'idle',
+        details: `${img.width}×${img.height}, cropped to ${crop.w}×${crop.h}.`,
+      } : {
+        title: 'Image loaded',
+        state: 'idle',
+        details: `${img.width}×${img.height}. Drag to crop (optional), then click Upscale.`,
+      });
+    });
+
+    // View mode (toolbar → canvas).
+    toolbar.addEventListener('view-mode-change', (e) => {
+      this.#setMode(e.detail.mode);
+      canvasArea.snapCenterVisible();
+    });
+
+    // Button events from toolbar.
+    toolbar.addEventListener('upscale-click',     () => this.#runUpscale());
+    toolbar.addEventListener('stop-click',        () => this.#abortController?.abort());
+    toolbar.addEventListener('start-over-click',  () => {
+      if (this.#running) this.#abortController?.abort();
+      this.#reset();
+    });
+    toolbar.addEventListener('back-to-crop-click', () => {
+      if (this.#running || !canvasArea.image) return;
+      this.#showReady();
+    });
+    toolbar.addEventListener('clear-crop-click',  () => canvasArea.clearCrop());
+    toolbar.addEventListener('open-in-tab-click', () => canvasArea.openInTab());
+    toolbar.addEventListener('download-click',    () => canvasArea.download());
+
+    // perf-toggle + clear-cache buttons live inside <upscaler-controls>
+    // but their actions are orchestrator-level (perf monitor, pipeline cache).
+    this.addEventListener('perf-toggle', () => {
+      perfMon.visible ? perfMon.hide() : perfMon.show();
+    });
+    this.addEventListener('clear-cache', () => {
+      if (this.#running) return;
+      this.#pipeline.destroy();
+      toolbar.statusBar.set({
+        title: 'Cache cleared',
+        state: 'idle',
+        details: 'Model cache cleared. Next run will re-download.',
+      });
+    });
+  }
+
+  // ── Phase helpers ──────────────────────────────────────────────────────
+
+  #showReady() {
+    const canvasArea = this.#q('upscaler-canvas-area');
+    const toolbar = this.#q('upscaler-toolbar');
+    const img = canvasArea.image;
+    canvasArea.showCropping(img);
+    const existingCrop = canvasArea.currentCrop;
+    toolbar.state = 'ready';
+    toolbar.hasCrop = !!existingCrop;
+    toolbar.statusBar.set(existingCrop ? {
+      title: 'Crop selected',
+      state: 'idle',
+      details: `${img.width}×${img.height}, cropped to ${existingCrop.w}×${existingCrop.h}.`,
+      progress: -1,
+      tileCount: null,
+    } : {
+      title: 'Image loaded',
+      state: 'idle',
+      details: `${img.width}×${img.height}. Drag to crop (optional), then click Upscale.`,
+      progress: -1,
+      tileCount: null,
+    });
+  }
+
+  #reset() {
+    this.#running = false;
+    this.#generation++;
+    this.#abortController = null;
+    const canvasArea = this.#q('upscaler-canvas-area');
+    const toolbar = this.#q('upscaler-toolbar');
+    canvasArea.showInitial();
+    toolbar.state = 'empty';
+    toolbar.hasCrop = false;
+    toolbar.statusBar.set({ title: '', state: 'idle', details: '', progress: -1, tileCount: null });
+  }
+
+  // ── View-mode persistence (orchestrator-level so it survives across phases) ──
+
+  #setMode(mode) {
+    const canvasArea = this.#q('upscaler-canvas-area');
+    const toolbar = this.#q('upscaler-toolbar');
+    if (canvasArea.viewMode === mode) return;
+    canvasArea.viewMode = mode;
+    toolbar.viewMode = mode;
+    localStorage.setItem('upscaler_view_mode', mode);
+  }
+
+  #restoreViewState() {
+    const saved = localStorage.getItem('upscaler_view_mode');
+    const mode = ['fit-width', 'fit-height', 'one-to-one'].includes(saved) ? saved : 'fit-width';
+    this.#q('upscaler-canvas-area').viewMode = mode;
+    this.#q('upscaler-toolbar').viewMode = mode;
+  }
+
+  // ── Upscale run flow ───────────────────────────────────────────────────
+
+  async #runUpscale() {
+    if (this.#running) return;
+    const controls   = this.#q('upscaler-controls');
+    const canvasArea = this.#q('upscaler-canvas-area');
+    const toolbar    = this.#q('upscaler-toolbar');
+    const perfMon    = this.#q('perf-monitor');
+    const status     = toolbar.statusBar;
+
+    if (!canvasArea.image) return;
+    this.#running = true;
+    const gen = ++this.#generation;
+    this.#abortController = new AbortController();
+    const signal = this.#abortController.signal;
+
+    controls.isRunning = true;
+    toolbar.state = 'running';
+
+    // runState is monotonic: 'running' → 'warning' (stays once warned).
+    // The tracker updates it as backend events arrive; the orchestrator
+    // reads it on completion to pick the final icon color.
+    let runState = 'running';
+    const tracker = trackBackendEvents((ev) => {
+      if (ev.kind === 'attempt') {
+        status.set({ title: `Loading on ${friendlyBackend(ev.backend)}`, state: runState });
+      } else if (ev.kind === 'success') {
+        status.set({ title: `Running on ${friendlyBackend(ev.backend)}`, state: runState });
+      } else if (ev.kind === 'fallback') {
+        runState = 'warning';
+        status.set({ title: `Fallback from ${friendlyBackend(ev.backend)}`, state: runState });
+      } else if (ev.kind === 'skipped') {
+        runState = 'warning';
+        status.set({ title: `Skipping ${friendlyBackend(ev.backend)}`, state: runState });
+      }
+    });
+
+    try {
+      status.set({
+        title: 'Loading model',
+        state: 'running',
+        details: '',
+        progress: 0,
+        tileCount: null,
+      });
+      const inputImage = canvasArea.croppedImage;
+      const requestedOutputScale = controls.outputScale;
+
+      const { beforeCanvas, afterCanvas, scale, comparison } =
+        await this.#runPipeline(controls, canvasArea, perfMon, status, signal, inputImage, requestedOutputScale, () => runState);
+
+      const outW = inputImage.width * scale;
+      const outH = inputImage.height * scale;
+      const summary = tracker.summary();
+      // The tracker only flags hadFallback when a fallback event fires *this
+      // run*. After a prior runtime fallback (CoreML→CPU), the worker's
+      // session is already on CPU, so the next run produces no fallback
+      // event of its own — yet the user asked for GPU and is silently on
+      // CPU. Treat that intent/reality mismatch as warning-worthy too.
+      const userWantsGpu = controls.backend === 'gpu';
+      const ranOnCpuDespiteIntent = userWantsGpu && summary.activeBackend && !realizedIsGpu(summary.activeBackend);
+      const finalState = (summary.hadFallback || summary.hadSkip || ranOnCpuDespiteIntent) ? 'warning' : 'success';
+      const via = summary.activeBackend ? ` via ${friendlyBackend(summary.activeBackend)}` : '';
+      const detailsLines = [`${inputImage.width}×${inputImage.height} → ${outW}×${outH}${via}`];
+      if (ranOnCpuDespiteIntent && !summary.hadFallback) {
+        detailsLines.push(`Requested GPU but running on ${friendlyBackend(summary.activeBackend)} (prior fallback this session — reload to retry GPU).`);
+      }
+      if (summary.lines.length) detailsLines.push(...summary.lines);
+      status.set({
+        title: 'Done',
+        state: finalState,
+        details: detailsLines.join('\n'),
+        progress: -1,
+        tileCount: null,
+      });
+
+      await canvasArea.showResult(beforeCanvas, afterCanvas, {
+        downloadName: comparison ? `comparison_${scale}x.png` : `upscaled_${scale}x.png`,
+      });
+      toolbar.state = 'done';
+    } catch (e) {
+      if (e.name === 'AbortError') {
+        status.set({
+          title: 'Cancelled',
+          state: 'idle',
+          details: 'You stopped this run.',
+          progress: -1,
+          tileCount: null,
+        });
+      } else {
+        console.error(e);
+        const opt = controls.selectedModelOption;
+        const parsedMaxTile = parseInt(opt?.dataset?.maxtilesize, 10);
+        const errMsg = formatUpscaleErrorMessage(e, {
+          layout: opt?.dataset?.layout,
+          multipleOf: parseInt(opt?.dataset?.multipleof, 10),
+          maxTileSize: Number.isFinite(parsedMaxTile) ? parsedMaxTile : null,
+          precision: opt?.dataset?.precision === 'fp16' ? 'fp16' : 'fp32',
+          backend: controls.backend,
+        });
+        status.set({
+          title: 'Error',
+          state: 'error',
+          details: errMsg,
+          progress: -1,
+          tileCount: null,
+        });
+      }
+      perfMon.stop();
+      // Fall back to ready so the user can adjust and retry.
+      if (this.#generation === gen) toolbar.state = canvasArea.image ? 'ready' : 'empty';
+    } finally {
+      tracker.stop();
+    }
+
+    if (this.#generation === gen) {
+      this.#running = false;
+      this.#abortController = null;
+      controls.isRunning = false;
+    }
+  }
+
+  async #runPipeline(controls, canvasArea, perfMon, status, signal, inputImage, requestedOutputScale, getRunState) {
+    const modelOpt = controls.selectedModelOption;
+    const isBuiltInResampler = !!modelOpt?.value?.startsWith('builtin:');
+
+    if (isBuiltInResampler) {
+      return this.#runBuiltInResample(inputImage, modelOpt.value, requestedOutputScale, canvasArea, status, signal);
+    }
+
+    const config = { ...controls.config, profile: perfMon.visible };
+    if (perfMon.visible) perfMon.start(config.backend);
+
+    const outW = inputImage.width * config.scale;
+    const outH = inputImage.height * config.scale;
+    canvasArea.showPreview(inputImage, outW, outH);
+
+    const result = await this.#pipeline.run(inputImage, config, {
+      onProgress(frac, msg) {
+        status.set({ progress: frac, details: msg });
+      },
+      onStage(stage) {
+        const label = STEP_LABEL[stage.step] || stage.step;
+        const updates = { state: getRunState() };
+        if (typeof stage.progress === 'number') updates.progress = stage.progress;
+        if (stage.message) {
+          updates.title = label;
+          updates.details = stage.message;
+        } else if (stage.phase === 'start') {
+          updates.title = label;
+        }
+        status.set(updates);
+        if (perfMon.visible) perfMon.updateStage(stage);
+      },
+      onTile: (info) => {
+        if (info.step === 'tiledUpscale' || info.step === 'comparison') {
+          canvasArea.drawPreviewTile(info);
+        } else if (info.step === 'blendAll') {
+          canvasArea.drawPreviewTile(info, { opacity: config.all?.blendOpacity ?? 1 });
+        } else if (info.step === 'enhanceFaces' && info.composited) {
+          canvasArea.drawPreviewTile(info);
+        }
+        const label = STEP_LABEL[info.step] || info.step || 'Pass';
+        const progress = (info.index + 1) / info.total;
+        if (info.step === 'enhanceFaces') {
+          if (info.composited) {
+            status.set({
+              title: label,
+              state: getRunState(),
+              details: `face ${(info.faceIndex ?? 0) + 1}/${info.faceTotal ?? '?'} done`,
+              progress,
+              tileCount: { done: info.index + 1, total: info.total },
+            });
+          } else {
+            const faceN = Number.isFinite(info.faceIndex) ? info.faceIndex + 1 : null;
+            const faceTotal = Number.isFinite(info.faceTotal) ? info.faceTotal : null;
+            const facePrefix = faceN && faceTotal ? `face ${faceN}/${faceTotal}, ` : '';
+            const faceTileTotal = Number.isFinite(info.faceTileTotal) ? info.faceTileTotal : info.total;
+            status.set({
+              title: label,
+              state: getRunState(),
+              details: `${facePrefix}tile ${info.index + 1}/${faceTileTotal}`,
+              progress,
+              tileCount: { done: info.index + 1, total: faceTileTotal },
+            });
+          }
+        } else {
+          status.set({
+            title: label,
+            state: getRunState(),
+            details: `tile ${info.index + 1}/${info.total} — ${inputImage.width}×${inputImage.height} → ${outW}×${outH}`,
+            progress,
+            tileCount: { done: info.index + 1, total: info.total },
+          });
+        }
+        if (perfMon.visible) perfMon.update({
+          step: info.step,
+          index: info.index, total: info.total,
+          tileMs: info.tileMs, tilePixels: info.tilePixels, perf: info.perf,
+        });
+      },
+      signal,
+    });
+
+    if (result.perf || result.pipelinePerf) {
+      perfMon.showResults(result.perf, result.ortProfile, result.pipelinePerf);
+    }
+
+    const outputScale = Math.max(1, Math.min(requestedOutputScale, result.scale));
+    if (config.comparison && result.comparisonImage) {
+      const canvases = makeComparisonPairCanvases(result.image, result.comparisonImage, inputImage, outputScale);
+      return { ...canvases, scale: outputScale, comparison: true };
+    }
+    const canvases = makeComparisonCanvases(result.image, inputImage, outputScale);
+    return { ...canvases, scale: outputScale, comparison: false };
+  }
+
+  async #runBuiltInResample(inputImage, modelUrl, requestedOutputScale, canvasArea, status, signal) {
+    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+
+    const isLanczos = modelUrl === 'builtin:lanczos-4x';
+    const methodLabel = isLanczos ? 'Lanczos' : 'Bicubic';
+    const scale = 4;
+    const outW = inputImage.width * scale;
+    const outH = inputImage.height * scale;
+
+    canvasArea.showPreview(inputImage, outW, outH);
+    status.set({
+      title: 'Resampling',
+      state: 'running',
+      details: `${methodLabel} resampling, ${inputImage.width}×${inputImage.height} → ${outW}×${outH}`,
+      progress: 0.25,
+    });
+
+    const resultCanvas = document.createElement('canvas');
+    resultCanvas.width = outW;
+    resultCanvas.height = outH;
+    const ctx = resultCanvas.getContext('2d');
+    ctx.imageSmoothingEnabled = true;
+    ctx.imageSmoothingQuality = isLanczos ? 'high' : 'medium';
+    ctx.drawImage(inputImage, 0, 0, outW, outH);
+
+    if (signal?.aborted) throw new DOMException('Aborted', 'AbortError');
+
+    status.set({ progress: 1 });
+    const outputScale = Math.max(1, Math.min(requestedOutputScale, scale));
+    const canvases = makeComparisonCanvases(resultCanvas, inputImage, outputScale);
+    return { ...canvases, scale: outputScale, comparison: false };
+  }
+
+  // ── Template ───────────────────────────────────────────────────────────
+
+  #render() {
+    morph(this, `
+      <style>
+        upscaler-app .canvas-stack {
+          position: relative;
+          background: rgba(0, 0, 0, 0.4);
+          border-radius: var(--pico-border-radius);
+          padding: 0.5rem;
+        }
+      </style>
+      <upscaler-controls></upscaler-controls>
+      <div class="canvas-stack">
+        <upscaler-toolbar></upscaler-toolbar>
+        <upscaler-canvas-area></upscaler-canvas-area>
+      </div>
+      <perf-monitor></perf-monitor>
+    `);
+  }
+}
+
+customElements.define('upscaler-app', UpscalerApp);

index.html

@@ -1,19 +1,88 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="en" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="color-scheme" content="dark">
+    <title>AI Tools</title>
+    <link rel="icon" type="image/svg+xml" href="assets/favicon.svg">
+    <link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="assets/favicon-180x180.png">
+    <link rel="stylesheet" href="vendor/picocss/pico.min.css">
+    <link rel="stylesheet" href="vendor/font-awesome/css/all.min.css">
+    <link rel="stylesheet" href="assets/shared.css">
+</head>
+<body>
+    <nav class="container-fluid">
+        <ul>
+            <li class="brand"><strong>up<img src="assets/favicon.svg" alt="" class="brand-icon">draft</strong></li>
+        </ul>
+        <ul>
+            <li><a href="#" data-feature="upscaler" aria-current="page">
+                <i class="fas fa-expand"></i> Upscaler
+            </a></li>
+            <li><a href="#" data-feature="bg-removal">
+                <i class="fas fa-eraser"></i> Background Removal
+            </a></li>
+            <li><a href="https://nickcelestin.com/applications/aitools/index.html" target="_blank" rel="noopener">
+                <i class="fas fa-arrow-up-right-from-square"></i> Full version
+            </a></li>
+        </ul>
+    </nav>
+
+    <main class="container-fluid">
+        <section id="feature-upscaler">
+            <upscaler-app></upscaler-app>
+        </section>
+        <section id="feature-bg-removal" style="display: none;">
+            <bg-removal-app></bg-removal-app>
+        </section>
+    </main>
+
+    <script src="vendor/idiomorph/idiomorph.min.js"></script>
+    <script src="vendor/onnxruntime-web/ort.all.min.js"></script>
+    <script type="importmap">
+    {
+      "imports": {
+        "lib/morph":                    "./lib/morph.js",
+        "lib/fetch-progress":           "./lib/fetch-progress.js",
+        "lib/canvas":                   "./lib/canvas.js",
+        "lib/onnx-meta":                "./lib/onnx-meta.js",
+        "lib/backend-events":           "./lib/backend-events.js",
+        "lib/backend":                  "./lib/backend.js",
+        "components/image-drop-zone":   "./components/image-drop-zone.js",
+        "components/status-bar":        "./components/status-bar.js",
+        "components/compare-slider":    "./components/compare-slider.js",
+        "components/image-cropper":     "./components/image-cropper.js",
+        "components/view-mode-controls": "./components/view-mode-controls.js"
+      }
+    }
+    </script>
+    <script type="module">
+        import './features/upscaler/upscaler-app.js';
+        import './features/bg-removal/bg-removal-app.js';
+        function activateFeature(link) {
+            const feature = link.dataset.feature;
+            document.querySelectorAll('nav a[data-feature]').forEach(l => {
+                if (l === link) l.setAttribute('aria-current', 'page');
+                else l.removeAttribute('aria-current');
+            });
+            document.querySelectorAll('[id^="feature-"]').forEach(el => {
+                el.style.display = el.id === 'feature-' + feature ? '' : 'none';
+            });
+            localStorage.setItem('aitools_feature', feature);
+        }
+
+        document.querySelectorAll('nav a[data-feature]').forEach(link => {
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                activateFeature(link);
+            });
+        });
+
+        const savedFeature = localStorage.getItem('aitools_feature');
+        const savedLink = savedFeature && document.querySelector(`nav a[data-feature="${savedFeature}"]`);
+        if (savedLink) activateFeature(savedLink);
+    </script>
+</body>
 </html>

lib/backend-events.js

@@ -0,0 +1,134 @@
+/**
+ * Unified channel for inference-backend narrative events. Both the web-mode
+ * engine (when it tries WebGPU then falls back to WASM) and the native
+ * desktop bridge (when its EP ladder tries CoreML/CUDA/DML then falls back
+ * to CPU) emit events on `document` with the same shape:
+ *
+ *   document.dispatchEvent(new CustomEvent('aitools:backend-event', {
+ *     detail: {
+ *       kind:    'attempt' | 'success' | 'fallback' | 'skipped',
+ *       backend: string,           // canonical EP name
+ *       reason?: string,           // short failure or skip reason
+ *     }
+ *   }));
+ *
+ * `trackBackendEvents()` lets a feature orchestrator subscribe for the
+ * duration of one run, then ask for a summary on completion.
+ */
+
+const CHANNEL = 'aitools:backend-event';
+
+export function dispatchBackendEvent(detail) {
+  document.dispatchEvent(new CustomEvent(CHANNEL, { detail }));
+}
+
+export function trackBackendEvents(onEvent) {
+  const events = [];
+  const handler = (e) => {
+    events.push(e.detail);
+    onEvent?.(e.detail);
+  };
+  document.addEventListener(CHANNEL, handler);
+  return {
+    stop() { document.removeEventListener(CHANNEL, handler); },
+    events: () => events.slice(),
+    summary() {
+      let activeBackend = null;
+      let hadFallback = false;
+      let hadSkip = false;
+      const lines = [];
+      for (const e of events) {
+        if (e.kind === 'success') {
+          activeBackend = e.backend || activeBackend;
+        } else if (e.kind === 'fallback') {
+          hadFallback = true;
+          const friendly = friendlyBackend(e.backend);
+          lines.push(e.reason ? `Failed on ${friendly}: ${e.reason}` : `Failed on ${friendly}`);
+        } else if (e.kind === 'skipped') {
+          hadSkip = true;
+          const friendly = friendlyBackend(e.backend);
+          lines.push(e.reason ? `Skipped ${friendly} (${e.reason})` : `Skipped ${friendly}`);
+        }
+      }
+      return { activeBackend, hadFallback, hadSkip, lines };
+    },
+  };
+}
+
+/**
+ * Trim a runtime error message down to the first useful signal phrase, or
+ * the first 120 chars if no known phrase matches. ORT/native errors tend
+ * to be long and noisy; the tooltip wants something compact.
+ */
+export function shortenReason(e) {
+  const s = String(e?.message || e || '');
+  const m = s.match(/Error in building plan|Non-zero status code returned|Failed to load|Could not create|cannot be reshaped|Unexpected input data type|kernel.*not.*found/i);
+  if (m) return m[0];
+  return s.length > 120 ? s.slice(0, 117) + '…' : s;
+}
+
+/**
+ * True if the realized backend label denotes a GPU-class execution provider.
+ *
+ * 'web-webgpu' counts; everything 'native-*' except 'native-cpu' counts
+ * (coreml / dml / cuda / rocm all run on the GPU or neural accelerator).
+ * 'web-wasm' and 'native-cpu' are CPU.
+ *
+ * Used by status-bar logic to detect intent/reality mismatches like
+ * "user asked for GPU but a warm CPU session is what's actually serving".
+ */
+export function realizedIsGpu(backend) {
+  if (!backend) return false;
+  if (backend === 'web-wasm' || backend === 'native-cpu') return false;
+  return true;
+}
+
+/**
+ * Map a realized backend identifier to a user-facing label.
+ *
+ * The canonical shape produced by lib/backend.js is two-part: a mode prefix
+ * (`web-` or `native-`) plus the concrete EP. We unpack both — the prefix
+ * tells the user whether they're on the browser stack or the native one,
+ * which materially affects perf and error shape.
+ *
+ *   'web-webgpu'              → 'WebGPU'
+ *   'web-wasm'                → 'CPU (WASM)'
+ *   'native-cpu'              → 'CPU (native)'
+ *   'native-cuda'             → 'CUDA'
+ *   'native-rocm'             → 'ROCm'
+ *   'native-dml'              → 'DirectML'
+ *   'native-coreml/MLProgram' → 'CoreML (MLProgram)'
+ *
+ * Legacy values from before the refactor are also accepted so a half-migrated
+ * caller doesn't render "unknown".
+ */
+export function friendlyBackend(b) {
+  if (!b) return 'unknown';
+
+  // New-style two-part labels.
+  if (b === 'web-webgpu') return 'WebGPU';
+  if (b === 'web-wasm')   return 'CPU (WASM)';
+  if (b.startsWith('native-')) {
+    const ep = b.slice('native-'.length);
+    if (ep === 'cpu')  return 'CPU (native)';
+    if (ep === 'cuda') return 'CUDA';
+    if (ep === 'rocm') return 'ROCm';
+    if (ep === 'dml')  return 'DirectML';
+    if (ep.startsWith('coreml')) {
+      const variant = ep.includes('/') ? ep.split('/')[1] : null;
+      return variant ? `CoreML (${variant})` : 'CoreML';
+    }
+    return ep;
+  }
+
+  // Legacy single-token forms (kept for any not-yet-migrated callers).
+  if (b === 'webgpu')              return 'WebGPU';
+  if (b === 'wasm' || b === 'cpu') return 'CPU';
+  if (b === 'cuda')                return 'CUDA';
+  if (b === 'dml')                 return 'DirectML';
+  if (b.startsWith('coreml')) {
+    const variant = b.includes('/') ? b.split('/')[1] : null;
+    return variant ? `CoreML (${variant})` : 'CoreML';
+  }
+  return b;
+}

lib/backend.js

@@ -0,0 +1,207 @@
+// Unified session loader for inference engines. One entry point, two arms.
+//
+//   loadSession(bytes, intent, opts) -> { session, realizedBackend }
+//
+//   intent          'gpu' | 'cpu'                          — what the user wants
+//   realizedBackend 'web-webgpu' | 'web-wasm'              — what actually ran
+//                 | 'native-cpu' | 'native-coreml/...'     — (display only)
+//                 | 'native-dml' | 'native-cuda' | ...
+//
+// Callers (the engines) shouldn't need to know whether we're running native
+// (Electron + onnxruntime-node) or web (browser + ort-web). They pass intent
+// in; they get a session-shaped object out plus a string label of what it's
+// running on. No magic options-bag properties, no synthesised exceptions to
+// drive control flow, no monkey-patching of ORT-Web's surface.
+
+import { dispatchBackendEvent, shortenReason } from 'lib/backend-events';
+
+// ───── Mode detection ──────────────────────────────────────────────────────
+// `__nativeOrt` is installed by desktop/preload.cjs only when the renderer is
+// running inside Electron *and* AITOOLS_NATIVE isn't explicitly disabled. Its
+// presence is the entire signal — no `enabled` flag to interrogate.
+
+export function isNativeMode() {
+  return !!globalThis.__nativeOrt;
+}
+
+// ───── Auto-disable on worker crash ────────────────────────────────────────
+// If the native worker crashes mid-session, we trip a one-way switch so the
+// rest of this page's loads fall through to the web path. Same semantics as
+// the old inject.js `tripAutoDisable`, just lifted here.
+
+let nativeAutoDisabled = false;
+
+function isWorkerCrash(err) {
+  const m = err && err.message;
+  return !!m && /worker crashed|worker not available|native ort unavailable/i.test(m);
+}
+
+// ───── Wire tensor codec ───────────────────────────────────────────────────
+// Mirrors WIRE_DTYPES in ort-worker.cjs.
+
+const WIRE_DTYPES = {
+  float32: Float32Array, float16: Uint16Array,
+  int32: Int32Array, int64: BigInt64Array, uint8: Uint8Array,
+};
+
+// ───── Public entry point ──────────────────────────────────────────────────
+
+/**
+ * Load a model and return a session-shaped object plus the realized backend.
+ *
+ * @param {Uint8Array|ArrayBuffer} modelBytes
+ * @param {'gpu'|'cpu'} intent
+ * @param {{
+ *   profile?: boolean,
+ *   preferredOutputLocation?: 'gpu-buffer' | 'cpu',
+ * }} [opts]
+ *   `preferredOutputLocation` is forwarded only on the web-webgpu path; it
+ *   enables zero-readback output tensors for the upscaler's GPU fast path.
+ *   Ignored on web-wasm and on native.
+ * @returns {Promise<{ session: object, realizedBackend: string }>}
+ */
+export async function loadSession(modelBytes, intent, opts = {}) {
+  if (intent !== 'gpu' && intent !== 'cpu') {
+    throw new Error(`loadSession: unknown intent ${JSON.stringify(intent)} (expected 'gpu' or 'cpu')`);
+  }
+  if (isNativeMode() && !nativeAutoDisabled) {
+    try {
+      return await loadNative(modelBytes, intent);
+    } catch (e) {
+      if (isWorkerCrash(e)) {
+        nativeAutoDisabled = true;
+        console.warn(`[backend] native ORT auto-disabled for this page session: ${e.message} Future loads use ORT-Web. Reload to retry native.`);
+        // Fall through to web path so this load still has a chance.
+      } else {
+        throw e;
+      }
+    }
+  }
+  return loadWeb(modelBytes, intent, opts);
+}
+
+// ───── Native arm ──────────────────────────────────────────────────────────
+
+let nativeSeq = 0;
+
+async function loadNative(modelBytes, intent) {
+  const transferable = toArrayBuffer(modelBytes);
+  const key = `m${++nativeSeq}_${transferable.byteLength}`;
+  // Host emits attempt/fallback/skipped events via the model-event channel
+  // (forwarded to backend-events by desktop/inject.js). We don't synthesise
+  // an attempt here — let the worker's actual rung outcomes speak.
+  const meta = await globalThis.__nativeOrt.load(key, transferable, { intent });
+  console.log(`[backend] native session ${key}: ${meta.inputNames.join(',')} -> ${meta.outputNames.join(',')} via ${meta.rung}`);
+  return {
+    session: makeNativeSession(key, meta),
+    realizedBackend: `native-${meta.rung}`,
+  };
+}
+
+function makeNativeSession(key, meta) {
+  // ORT-Web sessions expose inputMetadata / outputMetadata as arrays of
+  // {name, type, dimensions}; the engines self-correct from dims so a narrow
+  // 'tensor(float)' placeholder is fine.
+  const inputMetadata  = meta.inputNames.map(name => ({ name, type: 'tensor(float)', dimensions: [] }));
+  const outputMetadata = meta.outputNames.map(name => ({ name, type: 'tensor(float)', dimensions: [] }));
+
+  return {
+    inputNames: meta.inputNames,
+    outputNames: meta.outputNames,
+    inputMetadata,
+    outputMetadata,
+
+    async run(feeds /*, runOptions */) {
+      const wire = {};
+      for (const [name, t] of Object.entries(feeds)) {
+        const data = t.data;
+        const ab = data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength);
+        wire[name] = { type: t.type, dims: t.dims, data: ab };
+      }
+      let raw;
+      try {
+        raw = await globalThis.__nativeOrt.run(key, wire);
+      } catch (e) {
+        if (isWorkerCrash(e)) {
+          // Native is now dead for this page. The caller's current run still
+          // fails (we can't reload mid-session-run), but subsequent loadSession
+          // calls will fall through to the web path via nativeAutoDisabled.
+          nativeAutoDisabled = true;
+          console.warn(`[backend] native ORT auto-disabled mid-run: ${e.message}`);
+        }
+        throw e;
+      }
+      const out = {};
+      for (const [name, t] of Object.entries(raw)) {
+        const Arr = WIRE_DTYPES[t.type];
+        if (!Arr) throw new Error(`[backend] unsupported output tensor type: ${t.type}`);
+        const ortGlobal = globalThis.ort;
+        const tensor = new ortGlobal.Tensor(t.type, new Arr(t.data), t.dims);
+        if (typeof tensor.dispose !== 'function') tensor.dispose = () => {};
+        out[name] = tensor;
+      }
+      return out;
+    },
+
+    async release() {
+      try { await globalThis.__nativeOrt.release(key); } catch {}
+    },
+    startProfiling() {},
+    endProfiling() {},
+  };
+}
+
+// ───── Web arm ─────────────────────────────────────────────────────────────
+
+async function loadWeb(modelBytes, intent, { profile = false, preferredOutputLocation } = {}) {
+  const ort = globalThis.ort;
+  if (!ort) throw new Error('[backend] ort-web is not loaded — include vendor/onnxruntime-web/ort.all.min.js before using loadSession');
+
+  ort.env.wasm.wasmPaths =
+    globalThis.__ORT_WASM_PATHS__ ||
+    new URL('vendor/onnxruntime-web/', document.baseURI).toString();
+  ort.env.wasm.numThreads = navigator.hardwareConcurrency || 4;
+
+  // ort.env.webgpu.profilingMode is global; clear when not profiling so a
+  // prior run can't leave it stuck on.
+  if (ort.env.webgpu) {
+    ort.env.webgpu.profilingMode = (profile && intent === 'gpu') ? 'default' : 'off';
+  }
+
+  const sessionOpts = {
+    graphOptimizationLevel: 'all',
+    ...(profile && { enableProfiling: true }),
+  };
+
+  if (intent === 'gpu') {
+    sessionOpts.executionProviders = [{ name: 'webgpu', preferredLayout: 'NCHW' }];
+    if (preferredOutputLocation) sessionOpts.preferredOutputLocation = preferredOutputLocation;
+    dispatchBackendEvent({ kind: 'attempt', backend: 'web-webgpu' });
+    try {
+      const session = await ort.InferenceSession.create(modelBytes, sessionOpts);
+      dispatchBackendEvent({ kind: 'success', backend: 'web-webgpu' });
+      return { session, realizedBackend: 'web-webgpu' };
+    } catch (e) {
+      console.warn(`[backend] WebGPU failed, falling back to WASM. Reason:`, e);
+      dispatchBackendEvent({ kind: 'fallback', backend: 'web-webgpu', reason: shortenReason(e) });
+      // Strip WebGPU-only opts before retrying on WASM.
+      delete sessionOpts.preferredOutputLocation;
+    }
+  }
+
+  sessionOpts.executionProviders = ['wasm'];
+  dispatchBackendEvent({ kind: 'attempt', backend: 'web-wasm' });
+  const session = await ort.InferenceSession.create(modelBytes, sessionOpts);
+  dispatchBackendEvent({ kind: 'success', backend: 'web-wasm' });
+  return { session, realizedBackend: 'web-wasm' };
+}
+
+// ───── helpers ─────────────────────────────────────────────────────────────
+
+function toArrayBuffer(modelBytes) {
+  if (modelBytes instanceof ArrayBuffer) return modelBytes;
+  if (modelBytes instanceof Uint8Array) {
+    return modelBytes.buffer.slice(modelBytes.byteOffset, modelBytes.byteOffset + modelBytes.byteLength);
+  }
+  throw new Error(`[backend] modelBytes must be ArrayBuffer or Uint8Array, got ${typeof modelBytes}`);
+}

lib/canvas.js

@@ -0,0 +1,175 @@
+function clamp(v, min, max) {
+  return v < min ? min : v > max ? max : v;
+}
+
+function smoothstep(edge0, edge1, x) {
+  if (edge1 <= edge0) return x >= edge1 ? 1 : 0;
+  const t = clamp((x - edge0) / (edge1 - edge0), 0, 1);
+  return t * t * (3 - 2 * t);
+}
+
+export function expandRect(rect, paddingPx, maxW, maxH) {
+  const x1 = clamp(rect.x - paddingPx, 0, maxW);
+  const y1 = clamp(rect.y - paddingPx, 0, maxH);
+  const x2 = clamp(rect.x + rect.w + paddingPx, 0, maxW);
+  const y2 = clamp(rect.y + rect.h + paddingPx, 0, maxH);
+  return {
+    x: Math.floor(x1),
+    y: Math.floor(y1),
+    w: Math.max(1, Math.ceil(x2 - x1)),
+    h: Math.max(1, Math.ceil(y2 - y1)),
+  };
+}
+
+export function ensureCanvas(imageLike) {
+  if (imageLike?.getContext?.('2d')) return imageLike;
+  const copy = document.createElement('canvas');
+  copy.width = imageLike.width;
+  copy.height = imageLike.height;
+  copy.getContext('2d').drawImage(imageLike, 0, 0);
+  return copy;
+}
+
+export function cropToCanvas(image, rect) {
+  const c = document.createElement('canvas');
+  c.width = rect.w;
+  c.height = rect.h;
+  const ctx = c.getContext('2d');
+  if (!ctx) return null;
+  ctx.drawImage(
+    image,
+    rect.x, rect.y, rect.w, rect.h,
+    0, 0, rect.w, rect.h,
+  );
+  return c;
+}
+
+export function canvasToBlobUrl(canvas) {
+  return new Promise(resolve => canvas.toBlob(blob => resolve(URL.createObjectURL(blob)), 'image/png'));
+}
+
+export function imageToBlobUrl(image) {
+  const c = document.createElement('canvas');
+  c.width = image.width;
+  c.height = image.height;
+  c.getContext('2d').drawImage(image, 0, 0);
+  return canvasToBlobUrl(c);
+}
+
+export function blendCanvas(destCanvas, srcCanvas, opacity) {
+  const alpha = clamp(opacity, 0, 1);
+  if (alpha <= 0) return destCanvas;
+  const ctx = destCanvas.getContext('2d');
+  if (!ctx) return destCanvas;
+  ctx.save();
+  ctx.globalAlpha = alpha;
+  ctx.drawImage(srcCanvas, 0, 0, destCanvas.width, destCanvas.height);
+  ctx.restore();
+  return destCanvas;
+}
+
+// Composite `patch` onto `dest` at (x, y) with a feathered alpha mask.
+// `innerRect` (in patch-local coords) marks the unfeathered region; pixels
+// outside it fade out over `featherPx`. Without it, feathering runs from
+// the patch edges inward.
+export function compositeFeathered(destCanvas, patchCanvas, x, y, {
+  featherPx = 8,
+  innerRect = null,
+  blendOpacity = 1,
+} = {}) {
+  const w = patchCanvas.width;
+  const h = patchCanvas.height;
+  if (w < 1 || h < 1) return false;
+  const opacity = clamp(blendOpacity, 0, 1);
+  if (opacity <= 0) return true;
+  const minDim = Math.min(w, h);
+  const t = Math.max(1, Math.min(Math.floor(featherPx), Math.floor(minDim / 2)));
+
+  const maskCanvas = document.createElement('canvas');
+  maskCanvas.width = w;
+  maskCanvas.height = h;
+  const mctx = maskCanvas.getContext('2d');
+  if (!mctx) return false;
+  const mask = mctx.createImageData(w, h);
+  const mpx = mask.data;
+  for (let py = 0; py < h; py++) {
+    for (let px = 0; px < w; px++) {
+      const idx = (py * w + px) * 4;
+      let a = 0;
+      if (innerRect) {
+        const ix1 = innerRect.x;
+        const iy1 = innerRect.y;
+        const ix2 = innerRect.x + innerRect.w;
+        const iy2 = innerRect.y + innerRect.h;
+        const ox = px < ix1 ? (ix1 - px) : px >= ix2 ? (px - ix2 + 1) : 0;
+        const oy = py < iy1 ? (iy1 - py) : py >= iy2 ? (py - iy2 + 1) : 0;
+        const d = Math.hypot(ox, oy);
+        a = d <= 0 ? 1 : (1 - smoothstep(0, t, d));
+      } else {
+        const dx = Math.min(px, w - 1 - px);
+        const dy = Math.min(py, h - 1 - py);
+        const d = Math.min(dx, dy);
+        a = smoothstep(0, t, d);
+      }
+      const alpha = Math.max(0, Math.min(255, Math.round(a * opacity * 255)));
+      mpx[idx] = 255;
+      mpx[idx + 1] = 255;
+      mpx[idx + 2] = 255;
+      mpx[idx + 3] = alpha;
+    }
+  }
+  mctx.putImageData(mask, 0, 0);
+
+  const patchMasked = document.createElement('canvas');
+  patchMasked.width = w;
+  patchMasked.height = h;
+  const pctx = patchMasked.getContext('2d');
+  if (!pctx) return false;
+  pctx.drawImage(patchCanvas, 0, 0);
+  pctx.globalCompositeOperation = 'destination-in';
+  pctx.drawImage(maskCanvas, 0, 0);
+
+  const dctx = destCanvas.getContext('2d');
+  if (!dctx) return false;
+  dctx.drawImage(patchMasked, x, y);
+
+  maskCanvas.width = 0;
+  maskCanvas.height = 0;
+  patchMasked.width = 0;
+  patchMasked.height = 0;
+  return true;
+}
+
+// Feather width (output px) for compositing a detection patch back onto an
+// upscaled canvas. Scales with the detected region's min dimension, clamped
+// by the padding ring and patch size so the transition stays inside the pad.
+export function computeFeatherPx({
+  configuredFeatherPx,
+  regionW,
+  regionH,
+  patchW,
+  patchH,
+  paddingPx,
+  scale,
+}) {
+  const minOut = 4;
+  const maxOut = 12;
+  const configuredOut = Math.max(0, configuredFeatherPx * scale);
+  const regionMinOut = Math.max(1, Math.min(regionW, regionH) * scale);
+  const regionDriven = Math.round(regionMinOut * 0.015);
+  let feather = clamp(
+    Math.max(configuredOut, regionDriven),
+    minOut,
+    maxOut,
+  );
+
+  const paddingOut = Math.max(0, paddingPx * scale);
+  if (paddingOut > 0) {
+    feather = Math.min(feather, Math.max(4, Math.round(paddingOut * 0.9)));
+  } else {
+    feather = Math.min(feather, 12);
+  }
+
+  const patchLimit = Math.max(2, Math.floor(Math.min(patchW, patchH) / 4));
+  return Math.max(2, Math.min(Math.round(feather), patchLimit));
+}

lib/fetch-progress.js

@@ -0,0 +1,121 @@
+/**
+ * Fetch a URL with streaming download progress and Cache API persistence.
+ *
+ * Built-in models use relative URLs (e.g. `models/foo.onnx`). In the web
+ * app those resolve against the deploy origin and just work. In the
+ * desktop app they resolve against `http://127.0.0.1:<random>/`, where
+ * the file is only present if the user bundled it at download time. When
+ * the local fetch 404s and `branding.json` defines a `remoteOrigin`, we
+ * re-fetch from there — turning the local bundle into a preload
+ * optimization rather than a hard gate.
+ *
+ * Cache keys are normalised against `remoteOrigin` (when configured) so
+ * the Cache API entry survives across desktop launches even though the
+ * localhost port is ephemeral.
+ *
+ * @param {string} url
+ * @param {(frac: number, message: string) => void} [onProgress]
+ * @returns {Promise<ArrayBuffer>}
+ */
+
+const MODEL_CACHE_NAME = 'aitools-models-v1';
+export const CUSTOM_MODEL_URL_PREFIX = 'https://cache.aitools.local/custom-model/';
+const LEGACY_CUSTOM_MODEL_URL_PREFIX = 'aitools-custom-model://';
+
+export async function getModelCache() {
+  try { return await caches.open(MODEL_CACHE_NAME); }
+  catch { return null; }
+}
+
+export function isCustomModelUrl(url) {
+  return typeof url === 'string' && (
+    url.startsWith(CUSTOM_MODEL_URL_PREFIX) ||
+    url.startsWith(LEGACY_CUSTOM_MODEL_URL_PREFIX)
+  );
+}
+
+function isRelativeHttpUrl(url) {
+  return typeof url === 'string' && !/^https?:\/\//i.test(url) && !isCustomModelUrl(url);
+}
+
+let _remoteOriginPromise = null;
+function getRemoteOrigin() {
+  if (_remoteOriginPromise) return _remoteOriginPromise;
+  _remoteOriginPromise = fetch('branding.json', { cache: 'no-store' })
+    .then((r) => (r.ok ? r.json() : null))
+    .then((b) => b?.remoteOrigin || null)
+    .catch(() => null);
+  return _remoteOriginPromise;
+}
+
+// A cache key that doesn't depend on the (possibly ephemeral) origin we
+// fetched from. In desktop mode the localhost port changes each launch,
+// so caching under that URL would mean a fresh download every run.
+async function stableCacheKey(url) {
+  if (!isRelativeHttpUrl(url)) return url;
+  const remoteOrigin = await getRemoteOrigin();
+  return remoteOrigin ? new URL(url, remoteOrigin).toString() : url;
+}
+
+export async function fetchWithProgress(url, onProgress) {
+  if (onProgress != null && typeof onProgress !== 'function') {
+    console.warn('[fetchWithProgress] Ignoring non-function onProgress callback.', {
+      type: typeof onProgress,
+      value: onProgress,
+      url,
+    });
+  }
+  const report = typeof onProgress === 'function' ? onProgress : null;
+  const cache = await getModelCache();
+  const cacheKey = await stableCacheKey(url);
+
+  if (cache) {
+    const cached = await cache.match(cacheKey);
+    if (cached) {
+      report?.(1, 'Loading model from cache…');
+      return cached.arrayBuffer();
+    }
+    if (isCustomModelUrl(url)) {
+      throw new Error('Custom model not found in cache. Please re-upload the model file.');
+    }
+  }
+
+  report?.(0, 'Downloading model…');
+  let resp = await fetch(url);
+  if (!resp.ok && resp.status === 404 && isRelativeHttpUrl(url)) {
+    const remoteOrigin = await getRemoteOrigin();
+    if (remoteOrigin) {
+      const remoteUrl = new URL(url, remoteOrigin).toString();
+      report?.(0, 'Model not in local bundle, fetching from server…');
+      resp = await fetch(remoteUrl);
+    }
+  }
+  if (!resp.ok) throw new Error(`Model download failed: HTTP ${resp.status}`);
+
+  const respForCache = resp.clone();
+
+  const total = parseInt(resp.headers.get('content-length') || '0', 10);
+  const reader = resp.body.getReader();
+  const chunks = [];
+  let loaded = 0;
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    chunks.push(value);
+    loaded += value.length;
+    if (total) {
+      const frac = loaded / total;
+      report?.(frac, `Downloading model… ${(loaded / 1e6).toFixed(1)} / ${(total / 1e6).toFixed(1)} MB`);
+    }
+  }
+
+  if (cache) {
+    cache.put(cacheKey, respForCache).catch(() => {});
+  }
+
+  const buf = new Uint8Array(loaded);
+  let off = 0;
+  for (const c of chunks) { buf.set(c, off); off += c.length; }
+  return buf.buffer;
+}

lib/morph.js

@@ -0,0 +1,32 @@
+/**
+ * Idiomorph wrapper — uses the global Idiomorph loaded via CDN.
+ * Prevents nested custom elements from being torn down and re-created.
+ */
+
+export function morph(component, html) {
+    Idiomorph.morph(component, html, {
+        morphStyle: 'innerHTML',
+        ignoreActiveValue: true,
+        callbacks: {
+            beforeNodeMorphed(oldNode, newNode) {
+                if (isNestedCustomElement(oldNode, component)) {
+                    syncAttributes(oldNode, newNode);
+                    return false;
+                }
+            }
+        }
+    });
+}
+
+function isNestedCustomElement(node, owner) {
+    return node instanceof Element && node.tagName.includes('-') && node !== owner;
+}
+
+function syncAttributes(oldNode, newNode) {
+    if (!(newNode instanceof Element)) return;
+    for (const attr of newNode.attributes) {
+        if (oldNode.getAttribute(attr.name) !== attr.value) {
+            oldNode.setAttribute(attr.name, attr.value);
+        }
+    }
+}

lib/onnx-meta.js

@@ -0,0 +1,18 @@
+// ORT-Web 1.18+ exposes inputMetadata/outputMetadata as a readonly array of
+// ValueMetadata ordered to match inputNames/outputNames. Older versions
+// exposed it as a Record keyed by tensor name. Accept both shapes.
+export function readMetaEntry(metaCollection, name, index = 0) {
+  if (!metaCollection) return null;
+  if (Array.isArray(metaCollection)) {
+    if (name) {
+      const byName = metaCollection.find((m) => m?.name === name);
+      if (byName) return byName;
+    }
+    return metaCollection[index] || null;
+  }
+  return (name && metaCollection[name]) || null;
+}
+
+export function isFp16InputType(inputType) {
+  return typeof inputType === 'string' && inputType.toLowerCase().includes('float16');
+}

models/4x-ClearRealityV1.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:58381c8df79457670dbb286d36921a044c506eacfe8826bbb6aefc644826f91a
+size 1904717

models/4x-UltraSharpV2_Lite.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:931e668b639175e4e98a993b5bc7fed65685f3583bad57a0d132bc125a66e349
+size 29745754

models/4x-UpdraftSmall.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c7c550b52fbe36e03670fe1a229395c740111d002d361c3520cfa831a7a7f7dc
+size 1414617

models/DAT_light_x4_dyn_OTF_4.onnx

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d5ece82fef2c1511b80f77b3fe014297dfc21e38320c47983991e0e909428e5
+size 5085946

style.css

@@ -1,28 +0,0 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-
-h1 {
-	font-size: 16px;
-	margin-top: 0;
-}
-
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
-}
-
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
-}
-
-.card p:last-child {
-	margin-bottom: 0;
-}

vendor/fflate/index.mjs

@@ -0,0 +1,2665 @@
+// DEFLATE is a complex format; to read this code, you should probably check the RFC first:
+// https://tools.ietf.org/html/rfc1951
+// You may also wish to take a look at the guide I made about this program:
+// https://gist.github.com/101arrowz/253f31eb5abc3d9275ab943003ffecad
+// Some of the following code is similar to that of UZIP.js:
+// https://github.com/photopea/UZIP.js
+// However, the vast majority of the codebase has diverged from UZIP.js to increase performance and reduce bundle size.
+// Sometimes 0 will appear where -1 would be more appropriate. This is because using a uint
+// is better for memory in most engines (I *think*).
+var ch2 = {};
+var wk = (function (c, id, msg, transfer, cb) {
+    var w = new Worker(ch2[id] || (ch2[id] = URL.createObjectURL(new Blob([
+        c + ';addEventListener("error",function(e){e=e.error;postMessage({$e$:[e.message,e.code,e.stack]})})'
+    ], { type: 'text/javascript' }))));
+    w.onmessage = function (e) {
+        var d = e.data, ed = d.$e$;
+        if (ed) {
+            var err = new Error(ed[0]);
+            err['code'] = ed[1];
+            err.stack = ed[2];
+            cb(err, null);
+        }
+        else
+            cb(null, d);
+    };
+    w.postMessage(msg, transfer);
+    return w;
+});
+
+// aliases for shorter compressed code (most minifers don't do this)
+var u8 = Uint8Array, u16 = Uint16Array, i32 = Int32Array;
+// fixed length extra bits
+var fleb = new u8([0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 0, /* unused */ 0, 0, /* impossible */ 0]);
+// fixed distance extra bits
+var fdeb = new u8([0, 0, 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, /* unused */ 0, 0]);
+// code length index map
+var clim = new u8([16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15]);
+// get base, reverse index map from extra bits
+var freb = function (eb, start) {
+    var b = new u16(31);
+    for (var i = 0; i < 31; ++i) {
+        b[i] = start += 1 << eb[i - 1];
+    }
+    // numbers here are at max 18 bits
+    var r = new i32(b[30]);
+    for (var i = 1; i < 30; ++i) {
+        for (var j = b[i]; j < b[i + 1]; ++j) {
+            r[j] = ((j - b[i]) << 5) | i;
+        }
+    }
+    return { b: b, r: r };
+};
+var _a = freb(fleb, 2), fl = _a.b, revfl = _a.r;
+// we can ignore the fact that the other numbers are wrong; they never happen anyway
+fl[28] = 258, revfl[258] = 28;
+var _b = freb(fdeb, 0), fd = _b.b, revfd = _b.r;
+// map of value to reverse (assuming 16 bits)
+var rev = new u16(32768);
+for (var i = 0; i < 32768; ++i) {
+    // reverse table algorithm from SO
+    var x = ((i & 0xAAAA) >> 1) | ((i & 0x5555) << 1);
+    x = ((x & 0xCCCC) >> 2) | ((x & 0x3333) << 2);
+    x = ((x & 0xF0F0) >> 4) | ((x & 0x0F0F) << 4);
+    rev[i] = (((x & 0xFF00) >> 8) | ((x & 0x00FF) << 8)) >> 1;
+}
+// create huffman tree from u8 "map": index -> code length for code index
+// mb (max bits) must be at most 15
+// TODO: optimize/split up?
+var hMap = (function (cd, mb, r) {
+    var s = cd.length;
+    // index
+    var i = 0;
+    // u16 "map": index -> # of codes with bit length = index
+    var l = new u16(mb);
+    // length of cd must be 288 (total # of codes)
+    for (; i < s; ++i) {
+        if (cd[i])
+            ++l[cd[i] - 1];
+    }
+    // u16 "map": index -> minimum code for bit length = index
+    var le = new u16(mb);
+    for (i = 1; i < mb; ++i) {
+        le[i] = (le[i - 1] + l[i - 1]) << 1;
+    }
+    var co;
+    if (r) {
+        // u16 "map": index -> number of actual bits, symbol for code
+        co = new u16(1 << mb);
+        // bits to remove for reverser
+        var rvb = 15 - mb;
+        for (i = 0; i < s; ++i) {
+            // ignore 0 lengths
+            if (cd[i]) {
+                // num encoding both symbol and bits read
+                var sv = (i << 4) | cd[i];
+                // free bits
+                var r_1 = mb - cd[i];
+                // start value
+                var v = le[cd[i] - 1]++ << r_1;
+                // m is end value
+                for (var m = v | ((1 << r_1) - 1); v <= m; ++v) {
+                    // every 16 bit value starting with the code yields the same result
+                    co[rev[v] >> rvb] = sv;
+                }
+            }
+        }
+    }
+    else {
+        co = new u16(s);
+        for (i = 0; i < s; ++i) {
+            if (cd[i]) {
+                co[i] = rev[le[cd[i] - 1]++] >> (15 - cd[i]);
+            }
+        }
+    }
+    return co;
+});
+// fixed length tree
+var flt = new u8(288);
+for (var i = 0; i < 144; ++i)
+    flt[i] = 8;
+for (var i = 144; i < 256; ++i)
+    flt[i] = 9;
+for (var i = 256; i < 280; ++i)
+    flt[i] = 7;
+for (var i = 280; i < 288; ++i)
+    flt[i] = 8;
+// fixed distance tree
+var fdt = new u8(32);
+for (var i = 0; i < 32; ++i)
+    fdt[i] = 5;
+// fixed length map
+var flm = /*#__PURE__*/ hMap(flt, 9, 0), flrm = /*#__PURE__*/ hMap(flt, 9, 1);
+// fixed distance map
+var fdm = /*#__PURE__*/ hMap(fdt, 5, 0), fdrm = /*#__PURE__*/ hMap(fdt, 5, 1);
+// find max of array
+var max = function (a) {
+    var m = a[0];
+    for (var i = 1; i < a.length; ++i) {
+        if (a[i] > m)
+            m = a[i];
+    }
+    return m;
+};
+// read d, starting at bit p and mask with m
+var bits = function (d, p, m) {
+    var o = (p / 8) | 0;
+    return ((d[o] | (d[o + 1] << 8)) >> (p & 7)) & m;
+};
+// read d, starting at bit p continuing for at least 16 bits
+var bits16 = function (d, p) {
+    var o = (p / 8) | 0;
+    return ((d[o] | (d[o + 1] << 8) | (d[o + 2] << 16)) >> (p & 7));
+};
+// get end of byte
+var shft = function (p) { return ((p + 7) / 8) | 0; };
+// typed array slice - allows garbage collector to free original reference,
+// while being more compatible than .slice
+var slc = function (v, s, e) {
+    if (s == null || s < 0)
+        s = 0;
+    if (e == null || e > v.length)
+        e = v.length;
+    // can't use .constructor in case user-supplied
+    return new u8(v.subarray(s, e));
+};
+/**
+ * Codes for errors generated within this library
+ */
+export var FlateErrorCode = {
+    UnexpectedEOF: 0,
+    InvalidBlockType: 1,
+    InvalidLengthLiteral: 2,
+    InvalidDistance: 3,
+    StreamFinished: 4,
+    NoStreamHandler: 5,
+    InvalidHeader: 6,
+    NoCallback: 7,
+    InvalidUTF8: 8,
+    ExtraFieldTooLong: 9,
+    InvalidDate: 10,
+    FilenameTooLong: 11,
+    StreamFinishing: 12,
+    InvalidZipData: 13,
+    UnknownCompressionMethod: 14
+};
+// error codes
+var ec = [
+    'unexpected EOF',
+    'invalid block type',
+    'invalid length/literal',
+    'invalid distance',
+    'stream finished',
+    'no stream handler',
+    ,
+    'no callback',
+    'invalid UTF-8 data',
+    'extra field too long',
+    'date not in range 1980-2099',
+    'filename too long',
+    'stream finishing',
+    'invalid zip data'
+    // determined by unknown compression method
+];
+;
+var err = function (ind, msg, nt) {
+    var e = new Error(msg || ec[ind]);
+    e.code = ind;
+    if (Error.captureStackTrace)
+        Error.captureStackTrace(e, err);
+    if (!nt)
+        throw e;
+    return e;
+};
+// expands raw DEFLATE data
+var inflt = function (dat, st, buf, dict) {
+    // source length       dict length
+    var sl = dat.length, dl = dict ? dict.length : 0;
+    if (!sl || st.f && !st.l)
+        return buf || new u8(0);
+    var noBuf = !buf;
+    // have to estimate size
+    var resize = noBuf || st.i != 2;
+    // no state
+    var noSt = st.i;
+    // Assumes roughly 33% compression ratio average
+    if (noBuf)
+        buf = new u8(sl * 3);
+    // ensure buffer can fit at least l elements
+    var cbuf = function (l) {
+        var bl = buf.length;
+        // need to increase size to fit
+        if (l > bl) {
+            // Double or set to necessary, whichever is greater
+            var nbuf = new u8(Math.max(bl * 2, l));
+            nbuf.set(buf);
+            buf = nbuf;
+        }
+    };
+    //  last chunk         bitpos           bytes
+    var final = st.f || 0, pos = st.p || 0, bt = st.b || 0, lm = st.l, dm = st.d, lbt = st.m, dbt = st.n;
+    // total bits
+    var tbts = sl * 8;
+    do {
+        if (!lm) {
+            // BFINAL - this is only 1 when last chunk is next
+            final = bits(dat, pos, 1);
+            // type: 0 = no compression, 1 = fixed huffman, 2 = dynamic huffman
+            var type = bits(dat, pos + 1, 3);
+            pos += 3;
+            if (!type) {
+                // go to end of byte boundary
+                var s = shft(pos) + 4, l = dat[s - 4] | (dat[s - 3] << 8), t = s + l;
+                if (t > sl) {
+                    if (noSt)
+                        err(0);
+                    break;
+                }
+                // ensure size
+                if (resize)
+                    cbuf(bt + l);
+                // Copy over uncompressed data
+                buf.set(dat.subarray(s, t), bt);
+                // Get new bitpos, update byte count
+                st.b = bt += l, st.p = pos = t * 8, st.f = final;
+                continue;
+            }
+            else if (type == 1)
+                lm = flrm, dm = fdrm, lbt = 9, dbt = 5;
+            else if (type == 2) {
+                //  literal                            lengths
+                var hLit = bits(dat, pos, 31) + 257, hcLen = bits(dat, pos + 10, 15) + 4;
+                var tl = hLit + bits(dat, pos + 5, 31) + 1;
+                pos += 14;
+                // length+distance tree
+                var ldt = new u8(tl);
+                // code length tree
+                var clt = new u8(19);
+                for (var i = 0; i < hcLen; ++i) {
+                    // use index map to get real code
+                    clt[clim[i]] = bits(dat, pos + i * 3, 7);
+                }
+                pos += hcLen * 3;
+                // code lengths bits
+                var clb = max(clt), clbmsk = (1 << clb) - 1;
+                // code lengths map
+                var clm = hMap(clt, clb, 1);
+                for (var i = 0; i < tl;) {
+                    var r = clm[bits(dat, pos, clbmsk)];
+                    // bits read
+                    pos += r & 15;
+                    // symbol
+                    var s = r >> 4;
+                    // code length to copy
+                    if (s < 16) {
+                        ldt[i++] = s;
+                    }
+                    else {
+                        //  copy   count
+                        var c = 0, n = 0;
+                        if (s == 16)
+                            n = 3 + bits(dat, pos, 3), pos += 2, c = ldt[i - 1];
+                        else if (s == 17)
+                            n = 3 + bits(dat, pos, 7), pos += 3;
+                        else if (s == 18)
+                            n = 11 + bits(dat, pos, 127), pos += 7;
+                        while (n--)
+                            ldt[i++] = c;
+                    }
+                }
+                //    length tree                 distance tree
+                var lt = ldt.subarray(0, hLit), dt = ldt.subarray(hLit);
+                // max length bits
+                lbt = max(lt);
+                // max dist bits
+                dbt = max(dt);
+                lm = hMap(lt, lbt, 1);
+                dm = hMap(dt, dbt, 1);
+            }
+            else
+                err(1);
+            if (pos > tbts) {
+                if (noSt)
+                    err(0);
+                break;
+            }
+        }
+        // Make sure the buffer can hold this + the largest possible addition
+        // Maximum chunk size (practically, theoretically infinite) is 2^17
+        if (resize)
+            cbuf(bt + 131072);
+        var lms = (1 << lbt) - 1, dms = (1 << dbt) - 1;
+        var lpos = pos;
+        for (;; lpos = pos) {
+            // bits read, code
+            var c = lm[bits16(dat, pos) & lms], sym = c >> 4;
+            pos += c & 15;
+            if (pos > tbts) {
+                if (noSt)
+                    err(0);
+                break;
+            }
+            if (!c)
+                err(2);
+            if (sym < 256)
+                buf[bt++] = sym;
+            else if (sym == 256) {
+                lpos = pos, lm = null;
+                break;
+            }
+            else {
+                var add = sym - 254;
+                // no extra bits needed if less
+                if (sym > 264) {
+                    // index
+                    var i = sym - 257, b = fleb[i];
+                    add = bits(dat, pos, (1 << b) - 1) + fl[i];
+                    pos += b;
+                }
+                // dist
+                var d = dm[bits16(dat, pos) & dms], dsym = d >> 4;
+                if (!d)
+                    err(3);
+                pos += d & 15;
+                var dt = fd[dsym];
+                if (dsym > 3) {
+                    var b = fdeb[dsym];
+                    dt += bits16(dat, pos) & (1 << b) - 1, pos += b;
+                }
+                if (pos > tbts) {
+                    if (noSt)
+                        err(0);
+                    break;
+                }
+                if (resize)
+                    cbuf(bt + 131072);
+                var end = bt + add;
+                if (bt < dt) {
+                    var shift = dl - dt, dend = Math.min(dt, end);
+                    if (shift + bt < 0)
+                        err(3);
+                    for (; bt < dend; ++bt)
+                        buf[bt] = dict[shift + bt];
+                }
+                for (; bt < end; ++bt)
+                    buf[bt] = buf[bt - dt];
+            }
+        }
+        st.l = lm, st.p = lpos, st.b = bt, st.f = final;
+        if (lm)
+            final = 1, st.m = lbt, st.d = dm, st.n = dbt;
+    } while (!final);
+    // don't reallocate for streams or user buffers
+    return bt != buf.length && noBuf ? slc(buf, 0, bt) : buf.subarray(0, bt);
+};
+// starting at p, write the minimum number of bits that can hold v to d
+var wbits = function (d, p, v) {
+    v <<= p & 7;
+    var o = (p / 8) | 0;
+    d[o] |= v;
+    d[o + 1] |= v >> 8;
+};
+// starting at p, write the minimum number of bits (>8) that can hold v to d
+var wbits16 = function (d, p, v) {
+    v <<= p & 7;
+    var o = (p / 8) | 0;
+    d[o] |= v;
+    d[o + 1] |= v >> 8;
+    d[o + 2] |= v >> 16;
+};
+// creates code lengths from a frequency table
+var hTree = function (d, mb) {
+    // Need extra info to make a tree
+    var t = [];
+    for (var i = 0; i < d.length; ++i) {
+        if (d[i])
+            t.push({ s: i, f: d[i] });
+    }
+    var s = t.length;
+    var t2 = t.slice();
+    if (!s)
+        return { t: et, l: 0 };
+    if (s == 1) {
+        var v = new u8(t[0].s + 1);
+        v[t[0].s] = 1;
+        return { t: v, l: 1 };
+    }
+    t.sort(function (a, b) { return a.f - b.f; });
+    // after i2 reaches last ind, will be stopped
+    // freq must be greater than largest possible number of symbols
+    t.push({ s: -1, f: 25001 });
+    var l = t[0], r = t[1], i0 = 0, i1 = 1, i2 = 2;
+    t[0] = { s: -1, f: l.f + r.f, l: l, r: r };
+    // efficient algorithm from UZIP.js
+    // i0 is lookbehind, i2 is lookahead - after processing two low-freq
+    // symbols that combined have high freq, will start processing i2 (high-freq,
+    // non-composite) symbols instead
+    // see https://reddit.com/r/photopea/comments/ikekht/uzipjs_questions/
+    while (i1 != s - 1) {
+        l = t[t[i0].f < t[i2].f ? i0++ : i2++];
+        r = t[i0 != i1 && t[i0].f < t[i2].f ? i0++ : i2++];
+        t[i1++] = { s: -1, f: l.f + r.f, l: l, r: r };
+    }
+    var maxSym = t2[0].s;
+    for (var i = 1; i < s; ++i) {
+        if (t2[i].s > maxSym)
+            maxSym = t2[i].s;
+    }
+    // code lengths
+    var tr = new u16(maxSym + 1);
+    // max bits in tree
+    var mbt = ln(t[i1 - 1], tr, 0);
+    if (mbt > mb) {
+        // more algorithms from UZIP.js
+        // TODO: find out how this code works (debt)
+        //  ind    debt
+        var i = 0, dt = 0;
+        //    left            cost
+        var lft = mbt - mb, cst = 1 << lft;
+        t2.sort(function (a, b) { return tr[b.s] - tr[a.s] || a.f - b.f; });
+        for (; i < s; ++i) {
+            var i2_1 = t2[i].s;
+            if (tr[i2_1] > mb) {
+                dt += cst - (1 << (mbt - tr[i2_1]));
+                tr[i2_1] = mb;
+            }
+            else
+                break;
+        }
+        dt >>= lft;
+        while (dt > 0) {
+            var i2_2 = t2[i].s;
+            if (tr[i2_2] < mb)
+                dt -= 1 << (mb - tr[i2_2]++ - 1);
+            else
+                ++i;
+        }
+        for (; i >= 0 && dt; --i) {
+            var i2_3 = t2[i].s;
+            if (tr[i2_3] == mb) {
+                --tr[i2_3];
+                ++dt;
+            }
+        }
+        mbt = mb;
+    }
+    return { t: new u8(tr), l: mbt };
+};
+// get the max length and assign length codes
+var ln = function (n, l, d) {
+    return n.s == -1
+        ? Math.max(ln(n.l, l, d + 1), ln(n.r, l, d + 1))
+        : (l[n.s] = d);
+};
+// length codes generation
+var lc = function (c) {
+    var s = c.length;
+    // Note that the semicolon was intentional
+    while (s && !c[--s])
+        ;
+    var cl = new u16(++s);
+    //  ind      num         streak
+    var cli = 0, cln = c[0], cls = 1;
+    var w = function (v) { cl[cli++] = v; };
+    for (var i = 1; i <= s; ++i) {
+        if (c[i] == cln && i != s)
+            ++cls;
+        else {
+            if (!cln && cls > 2) {
+                for (; cls > 138; cls -= 138)
+                    w(32754);
+                if (cls > 2) {
+                    w(cls > 10 ? ((cls - 11) << 5) | 28690 : ((cls - 3) << 5) | 12305);
+                    cls = 0;
+                }
+            }
+            else if (cls > 3) {
+                w(cln), --cls;
+                for (; cls > 6; cls -= 6)
+                    w(8304);
+                if (cls > 2)
+                    w(((cls - 3) << 5) | 8208), cls = 0;
+            }
+            while (cls--)
+                w(cln);
+            cls = 1;
+            cln = c[i];
+        }
+    }
+    return { c: cl.subarray(0, cli), n: s };
+};
+// calculate the length of output from tree, code lengths
+var clen = function (cf, cl) {
+    var l = 0;
+    for (var i = 0; i < cl.length; ++i)
+        l += cf[i] * cl[i];
+    return l;
+};
+// writes a fixed block
+// returns the new bit pos
+var wfblk = function (out, pos, dat) {
+    // no need to write 00 as type: TypedArray defaults to 0
+    var s = dat.length;
+    var o = shft(pos + 2);
+    out[o] = s & 255;
+    out[o + 1] = s >> 8;
+    out[o + 2] = out[o] ^ 255;
+    out[o + 3] = out[o + 1] ^ 255;
+    for (var i = 0; i < s; ++i)
+        out[o + i + 4] = dat[i];
+    return (o + 4 + s) * 8;
+};
+// writes a block
+var wblk = function (dat, out, final, syms, lf, df, eb, li, bs, bl, p) {
+    wbits(out, p++, final);
+    ++lf[256];
+    var _a = hTree(lf, 15), dlt = _a.t, mlb = _a.l;
+    var _b = hTree(df, 15), ddt = _b.t, mdb = _b.l;
+    var _c = lc(dlt), lclt = _c.c, nlc = _c.n;
+    var _d = lc(ddt), lcdt = _d.c, ndc = _d.n;
+    var lcfreq = new u16(19);
+    for (var i = 0; i < lclt.length; ++i)
+        ++lcfreq[lclt[i] & 31];
+    for (var i = 0; i < lcdt.length; ++i)
+        ++lcfreq[lcdt[i] & 31];
+    var _e = hTree(lcfreq, 7), lct = _e.t, mlcb = _e.l;
+    var nlcc = 19;
+    for (; nlcc > 4 && !lct[clim[nlcc - 1]]; --nlcc)
+        ;
+    var flen = (bl + 5) << 3;
+    var ftlen = clen(lf, flt) + clen(df, fdt) + eb;
+    var dtlen = clen(lf, dlt) + clen(df, ddt) + eb + 14 + 3 * nlcc + clen(lcfreq, lct) + 2 * lcfreq[16] + 3 * lcfreq[17] + 7 * lcfreq[18];
+    if (bs >= 0 && flen <= ftlen && flen <= dtlen)
+        return wfblk(out, p, dat.subarray(bs, bs + bl));
+    var lm, ll, dm, dl;
+    wbits(out, p, 1 + (dtlen < ftlen)), p += 2;
+    if (dtlen < ftlen) {
+        lm = hMap(dlt, mlb, 0), ll = dlt, dm = hMap(ddt, mdb, 0), dl = ddt;
+        var llm = hMap(lct, mlcb, 0);
+        wbits(out, p, nlc - 257);
+        wbits(out, p + 5, ndc - 1);
+        wbits(out, p + 10, nlcc - 4);
+        p += 14;
+        for (var i = 0; i < nlcc; ++i)
+            wbits(out, p + 3 * i, lct[clim[i]]);
+        p += 3 * nlcc;
+        var lcts = [lclt, lcdt];
+        for (var it = 0; it < 2; ++it) {
+            var clct = lcts[it];
+            for (var i = 0; i < clct.length; ++i) {
+                var len = clct[i] & 31;
+                wbits(out, p, llm[len]), p += lct[len];
+                if (len > 15)
+                    wbits(out, p, (clct[i] >> 5) & 127), p += clct[i] >> 12;
+            }
+        }
+    }
+    else {
+        lm = flm, ll = flt, dm = fdm, dl = fdt;
+    }
+    for (var i = 0; i < li; ++i) {
+        var sym = syms[i];
+        if (sym > 255) {
+            var len = (sym >> 18) & 31;
+            wbits16(out, p, lm[len + 257]), p += ll[len + 257];
+            if (len > 7)
+                wbits(out, p, (sym >> 23) & 31), p += fleb[len];
+            var dst = sym & 31;
+            wbits16(out, p, dm[dst]), p += dl[dst];
+            if (dst > 3)
+                wbits16(out, p, (sym >> 5) & 8191), p += fdeb[dst];
+        }
+        else {
+            wbits16(out, p, lm[sym]), p += ll[sym];
+        }
+    }
+    wbits16(out, p, lm[256]);
+    return p + ll[256];
+};
+// deflate options (nice << 13) | chain
+var deo = /*#__PURE__*/ new i32([65540, 131080, 131088, 131104, 262176, 1048704, 1048832, 2114560, 2117632]);
+// empty
+var et = /*#__PURE__*/ new u8(0);
+// compresses data into a raw DEFLATE buffer
+var dflt = function (dat, lvl, plvl, pre, post, st) {
+    var s = st.z || dat.length;
+    var o = new u8(pre + s + 5 * (1 + Math.ceil(s / 7000)) + post);
+    // writing to this writes to the output buffer
+    var w = o.subarray(pre, o.length - post);
+    var lst = st.l;
+    var pos = (st.r || 0) & 7;
+    if (lvl) {
+        if (pos)
+            w[0] = st.r >> 3;
+        var opt = deo[lvl - 1];
+        var n = opt >> 13, c = opt & 8191;
+        var msk_1 = (1 << plvl) - 1;
+        //    prev 2-byte val map    curr 2-byte val map
+        var prev = st.p || new u16(32768), head = st.h || new u16(msk_1 + 1);
+        var bs1_1 = Math.ceil(plvl / 3), bs2_1 = 2 * bs1_1;
+        var hsh = function (i) { return (dat[i] ^ (dat[i + 1] << bs1_1) ^ (dat[i + 2] << bs2_1)) & msk_1; };
+        // 24576 is an arbitrary number of maximum symbols per block
+        // 424 buffer for last block
+        var syms = new i32(25000);
+        // length/literal freq   distance freq
+        var lf = new u16(288), df = new u16(32);
+        //  l/lcnt  exbits  index          l/lind  waitdx          blkpos
+        var lc_1 = 0, eb = 0, i = st.i || 0, li = 0, wi = st.w || 0, bs = 0;
+        for (; i + 2 < s; ++i) {
+            // hash value
+            var hv = hsh(i);
+            // index mod 32768    previous index mod
+            var imod = i & 32767, pimod = head[hv];
+            prev[imod] = pimod;
+            head[hv] = imod;
+            // We always should modify head and prev, but only add symbols if
+            // this data is not yet processed ("wait" for wait index)
+            if (wi <= i) {
+                // bytes remaining
+                var rem = s - i;
+                if ((lc_1 > 7000 || li > 24576) && (rem > 423 || !lst)) {
+                    pos = wblk(dat, w, 0, syms, lf, df, eb, li, bs, i - bs, pos);
+                    li = lc_1 = eb = 0, bs = i;
+                    for (var j = 0; j < 286; ++j)
+                        lf[j] = 0;
+                    for (var j = 0; j < 30; ++j)
+                        df[j] = 0;
+                }
+                //  len    dist   chain
+                var l = 2, d = 0, ch_1 = c, dif = imod - pimod & 32767;
+                if (rem > 2 && hv == hsh(i - dif)) {
+                    var maxn = Math.min(n, rem) - 1;
+                    var maxd = Math.min(32767, i);
+                    // max possible length
+                    // not capped at dif because decompressors implement "rolling" index population
+                    var ml = Math.min(258, rem);
+                    while (dif <= maxd && --ch_1 && imod != pimod) {
+                        if (dat[i + l] == dat[i + l - dif]) {
+                            var nl = 0;
+                            for (; nl < ml && dat[i + nl] == dat[i + nl - dif]; ++nl)
+                                ;
+                            if (nl > l) {
+                                l = nl, d = dif;
+                                // break out early when we reach "nice" (we are satisfied enough)
+                                if (nl > maxn)
+                                    break;
+                                // now, find the rarest 2-byte sequence within this
+                                // length of literals and search for that instead.
+                                // Much faster than just using the start
+                                var mmd = Math.min(dif, nl - 2);
+                                var md = 0;
+                                for (var j = 0; j < mmd; ++j) {
+                                    var ti = i - dif + j & 32767;
+                                    var pti = prev[ti];
+                                    var cd = ti - pti & 32767;
+                                    if (cd > md)
+                                        md = cd, pimod = ti;
+                                }
+                            }
+                        }
+                        // check the previous match
+                        imod = pimod, pimod = prev[imod];
+                        dif += imod - pimod & 32767;
+                    }
+                }
+                // d will be nonzero only when a match was found
+                if (d) {
+                    // store both dist and len data in one int32
+                    // Make sure this is recognized as a len/dist with 28th bit (2^28)
+                    syms[li++] = 268435456 | (revfl[l] << 18) | revfd[d];
+                    var lin = revfl[l] & 31, din = revfd[d] & 31;
+                    eb += fleb[lin] + fdeb[din];
+                    ++lf[257 + lin];
+                    ++df[din];
+                    wi = i + l;
+                    ++lc_1;
+                }
+                else {
+                    syms[li++] = dat[i];
+                    ++lf[dat[i]];
+                }
+            }
+        }
+        for (i = Math.max(i, wi); i < s; ++i) {
+            syms[li++] = dat[i];
+            ++lf[dat[i]];
+        }
+        pos = wblk(dat, w, lst, syms, lf, df, eb, li, bs, i - bs, pos);
+        if (!lst) {
+            st.r = (pos & 7) | w[(pos / 8) | 0] << 3;
+            // shft(pos) now 1 less if pos & 7 != 0
+            pos -= 7;
+            st.h = head, st.p = prev, st.i = i, st.w = wi;
+        }
+    }
+    else {
+        for (var i = st.w || 0; i < s + lst; i += 65535) {
+            // end
+            var e = i + 65535;
+            if (e >= s) {
+                // write final block
+                w[(pos / 8) | 0] = lst;
+                e = s;
+            }
+            pos = wfblk(w, pos + 1, dat.subarray(i, e));
+        }
+        st.i = s;
+    }
+    return slc(o, 0, pre + shft(pos) + post);
+};
+// CRC32 table
+var crct = /*#__PURE__*/ (function () {
+    var t = new Int32Array(256);
+    for (var i = 0; i < 256; ++i) {
+        var c = i, k = 9;
+        while (--k)
+            c = ((c & 1) && -306674912) ^ (c >>> 1);
+        t[i] = c;
+    }
+    return t;
+})();
+// CRC32
+var crc = function () {
+    var c = -1;
+    return {
+        p: function (d) {
+            // closures have awful performance
+            var cr = c;
+            for (var i = 0; i < d.length; ++i)
+                cr = crct[(cr & 255) ^ d[i]] ^ (cr >>> 8);
+            c = cr;
+        },
+        d: function () { return ~c; }
+    };
+};
+// Adler32
+var adler = function () {
+    var a = 1, b = 0;
+    return {
+        p: function (d) {
+            // closures have awful performance
+            var n = a, m = b;
+            var l = d.length | 0;
+            for (var i = 0; i != l;) {
+                var e = Math.min(i + 2655, l);
+                for (; i < e; ++i)
+                    m += n += d[i];
+                n = (n & 65535) + 15 * (n >> 16), m = (m & 65535) + 15 * (m >> 16);
+            }
+            a = n, b = m;
+        },
+        d: function () {
+            a %= 65521, b %= 65521;
+            return (a & 255) << 24 | (a & 0xFF00) << 8 | (b & 255) << 8 | (b >> 8);
+        }
+    };
+};
+;
+// deflate with opts
+var dopt = function (dat, opt, pre, post, st) {
+    if (!st) {
+        st = { l: 1 };
+        if (opt.dictionary) {
+            var dict = opt.dictionary.subarray(-32768);
+            var newDat = new u8(dict.length + dat.length);
+            newDat.set(dict);
+            newDat.set(dat, dict.length);
+            dat = newDat;
+            st.w = dict.length;
+        }
+    }
+    return dflt(dat, opt.level == null ? 6 : opt.level, opt.mem == null ? (st.l ? Math.ceil(Math.max(8, Math.min(13, Math.log(dat.length))) * 1.5) : 20) : (12 + opt.mem), pre, post, st);
+};
+// Walmart object spread
+var mrg = function (a, b) {
+    var o = {};
+    for (var k in a)
+        o[k] = a[k];
+    for (var k in b)
+        o[k] = b[k];
+    return o;
+};
+// worker clone
+// This is possibly the craziest part of the entire codebase, despite how simple it may seem.
+// The only parameter to this function is a closure that returns an array of variables outside of the function scope.
+// We're going to try to figure out the variable names used in the closure as strings because that is crucial for workerization.
+// We will return an object mapping of true variable name to value (basically, the current scope as a JS object).
+// The reason we can't just use the original variable names is minifiers mangling the toplevel scope.
+// This took me three weeks to figure out how to do.
+var wcln = function (fn, fnStr, td) {
+    var dt = fn();
+    var st = fn.toString();
+    var ks = st.slice(st.indexOf('[') + 1, st.lastIndexOf(']')).replace(/\s+/g, '').split(',');
+    for (var i = 0; i < dt.length; ++i) {
+        var v = dt[i], k = ks[i];
+        if (typeof v == 'function') {
+            fnStr += ';' + k + '=';
+            var st_1 = v.toString();
+            if (v.prototype) {
+                // for global objects
+                if (st_1.indexOf('[native code]') != -1) {
+                    var spInd = st_1.indexOf(' ', 8) + 1;
+                    fnStr += st_1.slice(spInd, st_1.indexOf('(', spInd));
+                }
+                else {
+                    fnStr += st_1;
+                    for (var t in v.prototype)
+                        fnStr += ';' + k + '.prototype.' + t + '=' + v.prototype[t].toString();
+                }
+            }
+            else
+                fnStr += st_1;
+        }
+        else
+            td[k] = v;
+    }
+    return fnStr;
+};
+var ch = [];
+// clone bufs
+var cbfs = function (v) {
+    var tl = [];
+    for (var k in v) {
+        if (v[k].buffer) {
+            tl.push((v[k] = new v[k].constructor(v[k])).buffer);
+        }
+    }
+    return tl;
+};
+// use a worker to execute code
+var wrkr = function (fns, init, id, cb) {
+    if (!ch[id]) {
+        var fnStr = '', td_1 = {}, m = fns.length - 1;
+        for (var i = 0; i < m; ++i)
+            fnStr = wcln(fns[i], fnStr, td_1);
+        ch[id] = { c: wcln(fns[m], fnStr, td_1), e: td_1 };
+    }
+    var td = mrg({}, ch[id].e);
+    return wk(ch[id].c + ';onmessage=function(e){for(var k in e.data)self[k]=e.data[k];onmessage=' + init.toString() + '}', id, td, cbfs(td), cb);
+};
+// base async inflate fn
+var bInflt = function () { return [u8, u16, i32, fleb, fdeb, clim, fl, fd, flrm, fdrm, rev, ec, hMap, max, bits, bits16, shft, slc, err, inflt, inflateSync, pbf, gopt]; };
+var bDflt = function () { return [u8, u16, i32, fleb, fdeb, clim, revfl, revfd, flm, flt, fdm, fdt, rev, deo, et, hMap, wbits, wbits16, hTree, ln, lc, clen, wfblk, wblk, shft, slc, dflt, dopt, deflateSync, pbf]; };
+// gzip extra
+var gze = function () { return [gzh, gzhl, wbytes, crc, crct]; };
+// gunzip extra
+var guze = function () { return [gzs, gzl]; };
+// zlib extra
+var zle = function () { return [zlh, wbytes, adler]; };
+// unzlib extra
+var zule = function () { return [zls]; };
+// post buf
+var pbf = function (msg) { return postMessage(msg, [msg.buffer]); };
+// get opts
+var gopt = function (o) { return o && {
+    out: o.size && new u8(o.size),
+    dictionary: o.dictionary
+}; };
+// async helper
+var cbify = function (dat, opts, fns, init, id, cb) {
+    var w = wrkr(fns, init, id, function (err, dat) {
+        w.terminate();
+        cb(err, dat);
+    });
+    w.postMessage([dat, opts], opts.consume ? [dat.buffer] : []);
+    return function () { w.terminate(); };
+};
+// auto stream
+var astrm = function (strm) {
+    strm.ondata = function (dat, final) { return postMessage([dat, final], [dat.buffer]); };
+    return function (ev) {
+        if (ev.data.length) {
+            strm.push(ev.data[0], ev.data[1]);
+            postMessage([ev.data[0].length]);
+        }
+        else
+            strm.flush();
+    };
+};
+// async stream attach
+var astrmify = function (fns, strm, opts, init, id, flush, ext) {
+    var t;
+    var w = wrkr(fns, init, id, function (err, dat) {
+        if (err)
+            w.terminate(), strm.ondata.call(strm, err);
+        else if (!Array.isArray(dat))
+            ext(dat);
+        else if (dat.length == 1) {
+            strm.queuedSize -= dat[0];
+            if (strm.ondrain)
+                strm.ondrain(dat[0]);
+        }
+        else {
+            if (dat[1])
+                w.terminate();
+            strm.ondata.call(strm, err, dat[0], dat[1]);
+        }
+    });
+    w.postMessage(opts);
+    strm.queuedSize = 0;
+    strm.push = function (d, f) {
+        if (!strm.ondata)
+            err(5);
+        if (t)
+            strm.ondata(err(4, 0, 1), null, !!f);
+        strm.queuedSize += d.length;
+        w.postMessage([d, t = f], [d.buffer]);
+    };
+    strm.terminate = function () { w.terminate(); };
+    if (flush) {
+        strm.flush = function () { w.postMessage([]); };
+    }
+};
+// read 2 bytes
+var b2 = function (d, b) { return d[b] | (d[b + 1] << 8); };
+// read 4 bytes
+var b4 = function (d, b) { return (d[b] | (d[b + 1] << 8) | (d[b + 2] << 16) | (d[b + 3] << 24)) >>> 0; };
+var b8 = function (d, b) { return b4(d, b) + (b4(d, b + 4) * 4294967296); };
+// write bytes
+var wbytes = function (d, b, v) {
+    for (; v; ++b)
+        d[b] = v, v >>>= 8;
+};
+// gzip header
+var gzh = function (c, o) {
+    var fn = o.filename;
+    c[0] = 31, c[1] = 139, c[2] = 8, c[8] = o.level < 2 ? 4 : o.level == 9 ? 2 : 0, c[9] = 3; // assume Unix
+    if (o.mtime != 0)
+        wbytes(c, 4, Math.floor(new Date(o.mtime || Date.now()) / 1000));
+    if (fn) {
+        c[3] = 8;
+        for (var i = 0; i <= fn.length; ++i)
+            c[i + 10] = fn.charCodeAt(i);
+    }
+};
+// gzip footer: -8 to -4 = CRC, -4 to -0 is length
+// gzip start
+var gzs = function (d) {
+    if (d[0] != 31 || d[1] != 139 || d[2] != 8)
+        err(6, 'invalid gzip data');
+    var flg = d[3];
+    var st = 10;
+    if (flg & 4)
+        st += (d[10] | d[11] << 8) + 2;
+    for (var zs = (flg >> 3 & 1) + (flg >> 4 & 1); zs > 0; zs -= !d[st++])
+        ;
+    return st + (flg & 2);
+};
+// gzip length
+var gzl = function (d) {
+    var l = d.length;
+    return (d[l - 4] | d[l - 3] << 8 | d[l - 2] << 16 | d[l - 1] << 24) >>> 0;
+};
+// gzip header length
+var gzhl = function (o) { return 10 + (o.filename ? o.filename.length + 1 : 0); };
+// zlib header
+var zlh = function (c, o) {
+    var lv = o.level, fl = lv == 0 ? 0 : lv < 6 ? 1 : lv == 9 ? 3 : 2;
+    c[0] = 120, c[1] = (fl << 6) | (o.dictionary && 32);
+    c[1] |= 31 - ((c[0] << 8) | c[1]) % 31;
+    if (o.dictionary) {
+        var h = adler();
+        h.p(o.dictionary);
+        wbytes(c, 2, h.d());
+    }
+};
+// zlib start
+var zls = function (d, dict) {
+    if ((d[0] & 15) != 8 || (d[0] >> 4) > 7 || ((d[0] << 8 | d[1]) % 31))
+        err(6, 'invalid zlib data');
+    if ((d[1] >> 5 & 1) == +!dict)
+        err(6, 'invalid zlib data: ' + (d[1] & 32 ? 'need' : 'unexpected') + ' dictionary');
+    return (d[1] >> 3 & 4) + 2;
+};
+function StrmOpt(opts, cb) {
+    if (typeof opts == 'function')
+        cb = opts, opts = {};
+    this.ondata = cb;
+    return opts;
+}
+/**
+ * Streaming DEFLATE compression
+ */
+var Deflate = /*#__PURE__*/ (function () {
+    function Deflate(opts, cb) {
+        if (typeof opts == 'function')
+            cb = opts, opts = {};
+        this.ondata = cb;
+        this.o = opts || {};
+        this.s = { l: 0, i: 32768, w: 32768, z: 32768 };
+        // Buffer length must always be 0 mod 32768 for index calculations to be correct when modifying head and prev
+        // 98304 = 32768 (lookback) + 65536 (common chunk size)
+        this.b = new u8(98304);
+        if (this.o.dictionary) {
+            var dict = this.o.dictionary.subarray(-32768);
+            this.b.set(dict, 32768 - dict.length);
+            this.s.i = 32768 - dict.length;
+        }
+    }
+    Deflate.prototype.p = function (c, f) {
+        this.ondata(dopt(c, this.o, 0, 0, this.s), f);
+    };
+    /**
+     * Pushes a chunk to be deflated
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    Deflate.prototype.push = function (chunk, final) {
+        if (!this.ondata)
+            err(5);
+        if (this.s.l)
+            err(4);
+        var endLen = chunk.length + this.s.z;
+        if (endLen > this.b.length) {
+            if (endLen > 2 * this.b.length - 32768) {
+                var newBuf = new u8(endLen & -32768);
+                newBuf.set(this.b.subarray(0, this.s.z));
+                this.b = newBuf;
+            }
+            var split = this.b.length - this.s.z;
+            this.b.set(chunk.subarray(0, split), this.s.z);
+            this.s.z = this.b.length;
+            this.p(this.b, false);
+            this.b.set(this.b.subarray(-32768));
+            this.b.set(chunk.subarray(split), 32768);
+            this.s.z = chunk.length - split + 32768;
+            this.s.i = 32766, this.s.w = 32768;
+        }
+        else {
+            this.b.set(chunk, this.s.z);
+            this.s.z += chunk.length;
+        }
+        this.s.l = final & 1;
+        if (this.s.z > this.s.w + 8191 || final) {
+            this.p(this.b, final || false);
+            this.s.w = this.s.i, this.s.i -= 2;
+        }
+    };
+    /**
+     * Flushes buffered uncompressed data. Useful to immediately retrieve the
+     * deflated output for small inputs.
+     */
+    Deflate.prototype.flush = function () {
+        if (!this.ondata)
+            err(5);
+        if (this.s.l)
+            err(4);
+        this.p(this.b, false);
+        this.s.w = this.s.i, this.s.i -= 2;
+    };
+    return Deflate;
+}());
+export { Deflate };
+/**
+ * Asynchronous streaming DEFLATE compression
+ */
+var AsyncDeflate = /*#__PURE__*/ (function () {
+    function AsyncDeflate(opts, cb) {
+        astrmify([
+            bDflt,
+            function () { return [astrm, Deflate]; }
+        ], this, StrmOpt.call(this, opts, cb), function (ev) {
+            var strm = new Deflate(ev.data);
+            onmessage = astrm(strm);
+        }, 6, 1);
+    }
+    return AsyncDeflate;
+}());
+export { AsyncDeflate };
+export function deflate(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    return cbify(data, opts, [
+        bDflt,
+    ], function (ev) { return pbf(deflateSync(ev.data[0], ev.data[1])); }, 0, cb);
+}
+/**
+ * Compresses data with DEFLATE without any wrapper
+ * @param data The data to compress
+ * @param opts The compression options
+ * @returns The deflated version of the data
+ */
+export function deflateSync(data, opts) {
+    return dopt(data, opts || {}, 0, 0);
+}
+/**
+ * Streaming DEFLATE decompression
+ */
+var Inflate = /*#__PURE__*/ (function () {
+    function Inflate(opts, cb) {
+        // no StrmOpt here to avoid adding to workerizer
+        if (typeof opts == 'function')
+            cb = opts, opts = {};
+        this.ondata = cb;
+        var dict = opts && opts.dictionary && opts.dictionary.subarray(-32768);
+        this.s = { i: 0, b: dict ? dict.length : 0 };
+        this.o = new u8(32768);
+        this.p = new u8(0);
+        if (dict)
+            this.o.set(dict);
+    }
+    Inflate.prototype.e = function (c) {
+        if (!this.ondata)
+            err(5);
+        if (this.d)
+            err(4);
+        if (!this.p.length)
+            this.p = c;
+        else if (c.length) {
+            var n = new u8(this.p.length + c.length);
+            n.set(this.p), n.set(c, this.p.length), this.p = n;
+        }
+    };
+    Inflate.prototype.c = function (final) {
+        this.s.i = +(this.d = final || false);
+        var bts = this.s.b;
+        var dt = inflt(this.p, this.s, this.o);
+        this.ondata(slc(dt, bts, this.s.b), this.d);
+        this.o = slc(dt, this.s.b - 32768), this.s.b = this.o.length;
+        this.p = slc(this.p, (this.s.p / 8) | 0), this.s.p &= 7;
+    };
+    /**
+     * Pushes a chunk to be inflated
+     * @param chunk The chunk to push
+     * @param final Whether this is the final chunk
+     */
+    Inflate.prototype.push = function (chunk, final) {
+        this.e(chunk), this.c(final);
+    };
+    return Inflate;
+}());
+export { Inflate };
+/**
+ * Asynchronous streaming DEFLATE decompression
+ */
+var AsyncInflate = /*#__PURE__*/ (function () {
+    function AsyncInflate(opts, cb) {
+        astrmify([
+            bInflt,
+            function () { return [astrm, Inflate]; }
+        ], this, StrmOpt.call(this, opts, cb), function (ev) {
+            var strm = new Inflate(ev.data);
+            onmessage = astrm(strm);
+        }, 7, 0);
+    }
+    return AsyncInflate;
+}());
+export { AsyncInflate };
+export function inflate(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    return cbify(data, opts, [
+        bInflt
+    ], function (ev) { return pbf(inflateSync(ev.data[0], gopt(ev.data[1]))); }, 1, cb);
+}
+/**
+ * Expands DEFLATE data with no wrapper
+ * @param data The data to decompress
+ * @param opts The decompression options
+ * @returns The decompressed version of the data
+ */
+export function inflateSync(data, opts) {
+    return inflt(data, { i: 2 }, opts && opts.out, opts && opts.dictionary);
+}
+// before you yell at me for not just using extends, my reason is that TS inheritance is hard to workerize.
+/**
+ * Streaming GZIP compression
+ */
+var Gzip = /*#__PURE__*/ (function () {
+    function Gzip(opts, cb) {
+        this.c = crc();
+        this.l = 0;
+        this.v = 1;
+        Deflate.call(this, opts, cb);
+    }
+    /**
+     * Pushes a chunk to be GZIPped
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    Gzip.prototype.push = function (chunk, final) {
+        this.c.p(chunk);
+        this.l += chunk.length;
+        Deflate.prototype.push.call(this, chunk, final);
+    };
+    Gzip.prototype.p = function (c, f) {
+        var raw = dopt(c, this.o, this.v && gzhl(this.o), f && 8, this.s);
+        if (this.v)
+            gzh(raw, this.o), this.v = 0;
+        if (f)
+            wbytes(raw, raw.length - 8, this.c.d()), wbytes(raw, raw.length - 4, this.l);
+        this.ondata(raw, f);
+    };
+    /**
+     * Flushes buffered uncompressed data. Useful to immediately retrieve the
+     * GZIPped output for small inputs.
+     */
+    Gzip.prototype.flush = function () {
+        Deflate.prototype.flush.call(this);
+    };
+    return Gzip;
+}());
+export { Gzip };
+/**
+ * Asynchronous streaming GZIP compression
+ */
+var AsyncGzip = /*#__PURE__*/ (function () {
+    function AsyncGzip(opts, cb) {
+        astrmify([
+            bDflt,
+            gze,
+            function () { return [astrm, Deflate, Gzip]; }
+        ], this, StrmOpt.call(this, opts, cb), function (ev) {
+            var strm = new Gzip(ev.data);
+            onmessage = astrm(strm);
+        }, 8, 1);
+    }
+    return AsyncGzip;
+}());
+export { AsyncGzip };
+export function gzip(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    return cbify(data, opts, [
+        bDflt,
+        gze,
+        function () { return [gzipSync]; }
+    ], function (ev) { return pbf(gzipSync(ev.data[0], ev.data[1])); }, 2, cb);
+}
+/**
+ * Compresses data with GZIP
+ * @param data The data to compress
+ * @param opts The compression options
+ * @returns The gzipped version of the data
+ */
+export function gzipSync(data, opts) {
+    if (!opts)
+        opts = {};
+    var c = crc(), l = data.length;
+    c.p(data);
+    var d = dopt(data, opts, gzhl(opts), 8), s = d.length;
+    return gzh(d, opts), wbytes(d, s - 8, c.d()), wbytes(d, s - 4, l), d;
+}
+/**
+ * Streaming single or multi-member GZIP decompression
+ */
+var Gunzip = /*#__PURE__*/ (function () {
+    function Gunzip(opts, cb) {
+        this.v = 1;
+        this.r = 0;
+        Inflate.call(this, opts, cb);
+    }
+    /**
+     * Pushes a chunk to be GUNZIPped
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    Gunzip.prototype.push = function (chunk, final) {
+        Inflate.prototype.e.call(this, chunk);
+        this.r += chunk.length;
+        if (this.v) {
+            var p = this.p.subarray(this.v - 1);
+            var s = p.length > 3 ? gzs(p) : 4;
+            if (s > p.length) {
+                if (!final)
+                    return;
+            }
+            else if (this.v > 1 && this.onmember) {
+                this.onmember(this.r - p.length);
+            }
+            this.p = p.subarray(s), this.v = 0;
+        }
+        // necessary to prevent TS from using the closure value
+        // This allows for workerization to function correctly
+        Inflate.prototype.c.call(this, final);
+        // process concatenated GZIP
+        if (this.s.f && !this.s.l && !final) {
+            this.v = shft(this.s.p) + 9;
+            this.s = { i: 0 };
+            this.o = new u8(0);
+            this.push(new u8(0), final);
+        }
+    };
+    return Gunzip;
+}());
+export { Gunzip };
+/**
+ * Asynchronous streaming single or multi-member GZIP decompression
+ */
+var AsyncGunzip = /*#__PURE__*/ (function () {
+    function AsyncGunzip(opts, cb) {
+        var _this = this;
+        astrmify([
+            bInflt,
+            guze,
+            function () { return [astrm, Inflate, Gunzip]; }
+        ], this, StrmOpt.call(this, opts, cb), function (ev) {
+            var strm = new Gunzip(ev.data);
+            strm.onmember = function (offset) { return postMessage(offset); };
+            onmessage = astrm(strm);
+        }, 9, 0, function (offset) { return _this.onmember && _this.onmember(offset); });
+    }
+    return AsyncGunzip;
+}());
+export { AsyncGunzip };
+export function gunzip(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    return cbify(data, opts, [
+        bInflt,
+        guze,
+        function () { return [gunzipSync]; }
+    ], function (ev) { return pbf(gunzipSync(ev.data[0], ev.data[1])); }, 3, cb);
+}
+/**
+ * Expands GZIP data
+ * @param data The data to decompress
+ * @param opts The decompression options
+ * @returns The decompressed version of the data
+ */
+export function gunzipSync(data, opts) {
+    var st = gzs(data);
+    if (st + 8 > data.length)
+        err(6, 'invalid gzip data');
+    return inflt(data.subarray(st, -8), { i: 2 }, opts && opts.out || new u8(gzl(data)), opts && opts.dictionary);
+}
+/**
+ * Streaming Zlib compression
+ */
+var Zlib = /*#__PURE__*/ (function () {
+    function Zlib(opts, cb) {
+        this.c = adler();
+        this.v = 1;
+        Deflate.call(this, opts, cb);
+    }
+    /**
+     * Pushes a chunk to be zlibbed
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    Zlib.prototype.push = function (chunk, final) {
+        this.c.p(chunk);
+        Deflate.prototype.push.call(this, chunk, final);
+    };
+    Zlib.prototype.p = function (c, f) {
+        var raw = dopt(c, this.o, this.v && (this.o.dictionary ? 6 : 2), f && 4, this.s);
+        if (this.v)
+            zlh(raw, this.o), this.v = 0;
+        if (f)
+            wbytes(raw, raw.length - 4, this.c.d());
+        this.ondata(raw, f);
+    };
+    /**
+     * Flushes buffered uncompressed data. Useful to immediately retrieve the
+     * zlibbed output for small inputs.
+     */
+    Zlib.prototype.flush = function () {
+        Deflate.prototype.flush.call(this);
+    };
+    return Zlib;
+}());
+export { Zlib };
+/**
+ * Asynchronous streaming Zlib compression
+ */
+var AsyncZlib = /*#__PURE__*/ (function () {
+    function AsyncZlib(opts, cb) {
+        astrmify([
+            bDflt,
+            zle,
+            function () { return [astrm, Deflate, Zlib]; }
+        ], this, StrmOpt.call(this, opts, cb), function (ev) {
+            var strm = new Zlib(ev.data);
+            onmessage = astrm(strm);
+        }, 10, 1);
+    }
+    return AsyncZlib;
+}());
+export { AsyncZlib };
+export function zlib(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    return cbify(data, opts, [
+        bDflt,
+        zle,
+        function () { return [zlibSync]; }
+    ], function (ev) { return pbf(zlibSync(ev.data[0], ev.data[1])); }, 4, cb);
+}
+/**
+ * Compress data with Zlib
+ * @param data The data to compress
+ * @param opts The compression options
+ * @returns The zlib-compressed version of the data
+ */
+export function zlibSync(data, opts) {
+    if (!opts)
+        opts = {};
+    var a = adler();
+    a.p(data);
+    var d = dopt(data, opts, opts.dictionary ? 6 : 2, 4);
+    return zlh(d, opts), wbytes(d, d.length - 4, a.d()), d;
+}
+/**
+ * Streaming Zlib decompression
+ */
+var Unzlib = /*#__PURE__*/ (function () {
+    function Unzlib(opts, cb) {
+        Inflate.call(this, opts, cb);
+        this.v = opts && opts.dictionary ? 2 : 1;
+    }
+    /**
+     * Pushes a chunk to be unzlibbed
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    Unzlib.prototype.push = function (chunk, final) {
+        Inflate.prototype.e.call(this, chunk);
+        if (this.v) {
+            if (this.p.length < 6 && !final)
+                return;
+            this.p = this.p.subarray(zls(this.p, this.v - 1)), this.v = 0;
+        }
+        if (final) {
+            if (this.p.length < 4)
+                err(6, 'invalid zlib data');
+            this.p = this.p.subarray(0, -4);
+        }
+        // necessary to prevent TS from using the closure value
+        // This allows for workerization to function correctly
+        Inflate.prototype.c.call(this, final);
+    };
+    return Unzlib;
+}());
+export { Unzlib };
+/**
+ * Asynchronous streaming Zlib decompression
+ */
+var AsyncUnzlib = /*#__PURE__*/ (function () {
+    function AsyncUnzlib(opts, cb) {
+        astrmify([
+            bInflt,
+            zule,
+            function () { return [astrm, Inflate, Unzlib]; }
+        ], this, StrmOpt.call(this, opts, cb), function (ev) {
+            var strm = new Unzlib(ev.data);
+            onmessage = astrm(strm);
+        }, 11, 0);
+    }
+    return AsyncUnzlib;
+}());
+export { AsyncUnzlib };
+export function unzlib(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    return cbify(data, opts, [
+        bInflt,
+        zule,
+        function () { return [unzlibSync]; }
+    ], function (ev) { return pbf(unzlibSync(ev.data[0], gopt(ev.data[1]))); }, 5, cb);
+}
+/**
+ * Expands Zlib data
+ * @param data The data to decompress
+ * @param opts The decompression options
+ * @returns The decompressed version of the data
+ */
+export function unzlibSync(data, opts) {
+    return inflt(data.subarray(zls(data, opts && opts.dictionary), -4), { i: 2 }, opts && opts.out, opts && opts.dictionary);
+}
+// Default algorithm for compression (used because having a known output size allows faster decompression)
+export { gzip as compress, AsyncGzip as AsyncCompress };
+export { gzipSync as compressSync, Gzip as Compress };
+/**
+ * Streaming GZIP, Zlib, or raw DEFLATE decompression
+ */
+var Decompress = /*#__PURE__*/ (function () {
+    function Decompress(opts, cb) {
+        this.o = StrmOpt.call(this, opts, cb) || {};
+        this.G = Gunzip;
+        this.I = Inflate;
+        this.Z = Unzlib;
+    }
+    // init substream
+    // overriden by AsyncDecompress
+    Decompress.prototype.i = function () {
+        var _this = this;
+        this.s.ondata = function (dat, final) {
+            _this.ondata(dat, final);
+        };
+    };
+    /**
+     * Pushes a chunk to be decompressed
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    Decompress.prototype.push = function (chunk, final) {
+        if (!this.ondata)
+            err(5);
+        if (!this.s) {
+            if (this.p && this.p.length) {
+                var n = new u8(this.p.length + chunk.length);
+                n.set(this.p), n.set(chunk, this.p.length);
+            }
+            else
+                this.p = chunk;
+            if (this.p.length > 2) {
+                this.s = (this.p[0] == 31 && this.p[1] == 139 && this.p[2] == 8)
+                    ? new this.G(this.o)
+                    : ((this.p[0] & 15) != 8 || (this.p[0] >> 4) > 7 || ((this.p[0] << 8 | this.p[1]) % 31))
+                        ? new this.I(this.o)
+                        : new this.Z(this.o);
+                this.i();
+                this.s.push(this.p, final);
+                this.p = null;
+            }
+        }
+        else
+            this.s.push(chunk, final);
+    };
+    return Decompress;
+}());
+export { Decompress };
+/**
+ * Asynchronous streaming GZIP, Zlib, or raw DEFLATE decompression
+ */
+var AsyncDecompress = /*#__PURE__*/ (function () {
+    function AsyncDecompress(opts, cb) {
+        Decompress.call(this, opts, cb);
+        this.queuedSize = 0;
+        this.G = AsyncGunzip;
+        this.I = AsyncInflate;
+        this.Z = AsyncUnzlib;
+    }
+    AsyncDecompress.prototype.i = function () {
+        var _this = this;
+        this.s.ondata = function (err, dat, final) {
+            _this.ondata(err, dat, final);
+        };
+        this.s.ondrain = function (size) {
+            _this.queuedSize -= size;
+            if (_this.ondrain)
+                _this.ondrain(size);
+        };
+    };
+    /**
+     * Pushes a chunk to be decompressed
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    AsyncDecompress.prototype.push = function (chunk, final) {
+        this.queuedSize += chunk.length;
+        Decompress.prototype.push.call(this, chunk, final);
+    };
+    return AsyncDecompress;
+}());
+export { AsyncDecompress };
+export function decompress(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    return (data[0] == 31 && data[1] == 139 && data[2] == 8)
+        ? gunzip(data, opts, cb)
+        : ((data[0] & 15) != 8 || (data[0] >> 4) > 7 || ((data[0] << 8 | data[1]) % 31))
+            ? inflate(data, opts, cb)
+            : unzlib(data, opts, cb);
+}
+/**
+ * Expands compressed GZIP, Zlib, or raw DEFLATE data, automatically detecting the format
+ * @param data The data to decompress
+ * @param opts The decompression options
+ * @returns The decompressed version of the data
+ */
+export function decompressSync(data, opts) {
+    return (data[0] == 31 && data[1] == 139 && data[2] == 8)
+        ? gunzipSync(data, opts)
+        : ((data[0] & 15) != 8 || (data[0] >> 4) > 7 || ((data[0] << 8 | data[1]) % 31))
+            ? inflateSync(data, opts)
+            : unzlibSync(data, opts);
+}
+// flatten a directory structure
+var fltn = function (d, p, t, o) {
+    for (var k in d) {
+        var val = d[k], n = p + k, op = o;
+        if (Array.isArray(val))
+            op = mrg(o, val[1]), val = val[0];
+        if (val instanceof u8)
+            t[n] = [val, op];
+        else {
+            t[n += '/'] = [new u8(0), op];
+            fltn(val, n, t, o);
+        }
+    }
+};
+// text encoder
+var te = typeof TextEncoder != 'undefined' && /*#__PURE__*/ new TextEncoder();
+// text decoder
+var td = typeof TextDecoder != 'undefined' && /*#__PURE__*/ new TextDecoder();
+// text decoder stream
+var tds = 0;
+try {
+    td.decode(et, { stream: true });
+    tds = 1;
+}
+catch (e) { }
+// decode UTF8
+var dutf8 = function (d) {
+    for (var r = '', i = 0;;) {
+        var c = d[i++];
+        var eb = (c > 127) + (c > 223) + (c > 239);
+        if (i + eb > d.length)
+            return { s: r, r: slc(d, i - 1) };
+        if (!eb)
+            r += String.fromCharCode(c);
+        else if (eb == 3) {
+            c = ((c & 15) << 18 | (d[i++] & 63) << 12 | (d[i++] & 63) << 6 | (d[i++] & 63)) - 65536,
+                r += String.fromCharCode(55296 | (c >> 10), 56320 | (c & 1023));
+        }
+        else if (eb & 1)
+            r += String.fromCharCode((c & 31) << 6 | (d[i++] & 63));
+        else
+            r += String.fromCharCode((c & 15) << 12 | (d[i++] & 63) << 6 | (d[i++] & 63));
+    }
+};
+/**
+ * Streaming UTF-8 decoding
+ */
+var DecodeUTF8 = /*#__PURE__*/ (function () {
+    /**
+     * Creates a UTF-8 decoding stream
+     * @param cb The callback to call whenever data is decoded
+     */
+    function DecodeUTF8(cb) {
+        this.ondata = cb;
+        if (tds)
+            this.t = new TextDecoder();
+        else
+            this.p = et;
+    }
+    /**
+     * Pushes a chunk to be decoded from UTF-8 binary
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    DecodeUTF8.prototype.push = function (chunk, final) {
+        if (!this.ondata)
+            err(5);
+        final = !!final;
+        if (this.t) {
+            this.ondata(this.t.decode(chunk, { stream: true }), final);
+            if (final) {
+                if (this.t.decode().length)
+                    err(8);
+                this.t = null;
+            }
+            return;
+        }
+        if (!this.p)
+            err(4);
+        var dat = new u8(this.p.length + chunk.length);
+        dat.set(this.p);
+        dat.set(chunk, this.p.length);
+        var _a = dutf8(dat), s = _a.s, r = _a.r;
+        if (final) {
+            if (r.length)
+                err(8);
+            this.p = null;
+        }
+        else
+            this.p = r;
+        this.ondata(s, final);
+    };
+    return DecodeUTF8;
+}());
+export { DecodeUTF8 };
+/**
+ * Streaming UTF-8 encoding
+ */
+var EncodeUTF8 = /*#__PURE__*/ (function () {
+    /**
+     * Creates a UTF-8 decoding stream
+     * @param cb The callback to call whenever data is encoded
+     */
+    function EncodeUTF8(cb) {
+        this.ondata = cb;
+    }
+    /**
+     * Pushes a chunk to be encoded to UTF-8
+     * @param chunk The string data to push
+     * @param final Whether this is the last chunk
+     */
+    EncodeUTF8.prototype.push = function (chunk, final) {
+        if (!this.ondata)
+            err(5);
+        if (this.d)
+            err(4);
+        this.ondata(strToU8(chunk), this.d = final || false);
+    };
+    return EncodeUTF8;
+}());
+export { EncodeUTF8 };
+/**
+ * Converts a string into a Uint8Array for use with compression/decompression methods
+ * @param str The string to encode
+ * @param latin1 Whether or not to interpret the data as Latin-1. This should
+ *               not need to be true unless decoding a binary string.
+ * @returns The string encoded in UTF-8/Latin-1 binary
+ */
+export function strToU8(str, latin1) {
+    if (latin1) {
+        var ar_1 = new u8(str.length);
+        for (var i = 0; i < str.length; ++i)
+            ar_1[i] = str.charCodeAt(i);
+        return ar_1;
+    }
+    if (te)
+        return te.encode(str);
+    var l = str.length;
+    var ar = new u8(str.length + (str.length >> 1));
+    var ai = 0;
+    var w = function (v) { ar[ai++] = v; };
+    for (var i = 0; i < l; ++i) {
+        if (ai + 5 > ar.length) {
+            var n = new u8(ai + 8 + ((l - i) << 1));
+            n.set(ar);
+            ar = n;
+        }
+        var c = str.charCodeAt(i);
+        if (c < 128 || latin1)
+            w(c);
+        else if (c < 2048)
+            w(192 | (c >> 6)), w(128 | (c & 63));
+        else if (c > 55295 && c < 57344)
+            c = 65536 + (c & 1023 << 10) | (str.charCodeAt(++i) & 1023),
+                w(240 | (c >> 18)), w(128 | ((c >> 12) & 63)), w(128 | ((c >> 6) & 63)), w(128 | (c & 63));
+        else
+            w(224 | (c >> 12)), w(128 | ((c >> 6) & 63)), w(128 | (c & 63));
+    }
+    return slc(ar, 0, ai);
+}
+/**
+ * Converts a Uint8Array to a string
+ * @param dat The data to decode to string
+ * @param latin1 Whether or not to interpret the data as Latin-1. This should
+ *               not need to be true unless encoding to binary string.
+ * @returns The original UTF-8/Latin-1 string
+ */
+export function strFromU8(dat, latin1) {
+    if (latin1) {
+        var r = '';
+        for (var i = 0; i < dat.length; i += 16384)
+            r += String.fromCharCode.apply(null, dat.subarray(i, i + 16384));
+        return r;
+    }
+    else if (td) {
+        return td.decode(dat);
+    }
+    else {
+        var _a = dutf8(dat), s = _a.s, r = _a.r;
+        if (r.length)
+            err(8);
+        return s;
+    }
+}
+;
+// deflate bit flag
+var dbf = function (l) { return l == 1 ? 3 : l < 6 ? 2 : l == 9 ? 1 : 0; };
+// skip local zip header
+var slzh = function (d, b) { return b + 30 + b2(d, b + 26) + b2(d, b + 28); };
+// read zip header
+var zh = function (d, b, z) {
+    var fnl = b2(d, b + 28), fn = strFromU8(d.subarray(b + 46, b + 46 + fnl), !(b2(d, b + 8) & 2048)), es = b + 46 + fnl, bs = b4(d, b + 20);
+    var _a = z && bs == 4294967295 ? z64e(d, es) : [bs, b4(d, b + 24), b4(d, b + 42)], sc = _a[0], su = _a[1], off = _a[2];
+    return [b2(d, b + 10), sc, su, fn, es + b2(d, b + 30) + b2(d, b + 32), off];
+};
+// read zip64 extra field
+var z64e = function (d, b) {
+    for (; b2(d, b) != 1; b += 4 + b2(d, b + 2))
+        ;
+    return [b8(d, b + 12), b8(d, b + 4), b8(d, b + 20)];
+};
+// extra field length
+var exfl = function (ex) {
+    var le = 0;
+    if (ex) {
+        for (var k in ex) {
+            var l = ex[k].length;
+            if (l > 65535)
+                err(9);
+            le += l + 4;
+        }
+    }
+    return le;
+};
+// write zip header
+var wzh = function (d, b, f, fn, u, c, ce, co) {
+    var fl = fn.length, ex = f.extra, col = co && co.length;
+    var exl = exfl(ex);
+    wbytes(d, b, ce != null ? 0x2014B50 : 0x4034B50), b += 4;
+    if (ce != null)
+        d[b++] = 20, d[b++] = f.os;
+    d[b] = 20, b += 2; // spec compliance? what's that?
+    d[b++] = (f.flag << 1) | (c < 0 && 8), d[b++] = u && 8;
+    d[b++] = f.compression & 255, d[b++] = f.compression >> 8;
+    var dt = new Date(f.mtime == null ? Date.now() : f.mtime), y = dt.getFullYear() - 1980;
+    if (y < 0 || y > 119)
+        err(10);
+    wbytes(d, b, (y << 25) | ((dt.getMonth() + 1) << 21) | (dt.getDate() << 16) | (dt.getHours() << 11) | (dt.getMinutes() << 5) | (dt.getSeconds() >> 1)), b += 4;
+    if (c != -1) {
+        wbytes(d, b, f.crc);
+        wbytes(d, b + 4, c < 0 ? -c - 2 : c);
+        wbytes(d, b + 8, f.size);
+    }
+    wbytes(d, b + 12, fl);
+    wbytes(d, b + 14, exl), b += 16;
+    if (ce != null) {
+        wbytes(d, b, col);
+        wbytes(d, b + 6, f.attrs);
+        wbytes(d, b + 10, ce), b += 14;
+    }
+    d.set(fn, b);
+    b += fl;
+    if (exl) {
+        for (var k in ex) {
+            var exf = ex[k], l = exf.length;
+            wbytes(d, b, +k);
+            wbytes(d, b + 2, l);
+            d.set(exf, b + 4), b += 4 + l;
+        }
+    }
+    if (col)
+        d.set(co, b), b += col;
+    return b;
+};
+// write zip footer (end of central directory)
+var wzf = function (o, b, c, d, e) {
+    wbytes(o, b, 0x6054B50); // skip disk
+    wbytes(o, b + 8, c);
+    wbytes(o, b + 10, c);
+    wbytes(o, b + 12, d);
+    wbytes(o, b + 16, e);
+};
+/**
+ * A pass-through stream to keep data uncompressed in a ZIP archive.
+ */
+var ZipPassThrough = /*#__PURE__*/ (function () {
+    /**
+     * Creates a pass-through stream that can be added to ZIP archives
+     * @param filename The filename to associate with this data stream
+     */
+    function ZipPassThrough(filename) {
+        this.filename = filename;
+        this.c = crc();
+        this.size = 0;
+        this.compression = 0;
+    }
+    /**
+     * Processes a chunk and pushes to the output stream. You can override this
+     * method in a subclass for custom behavior, but by default this passes
+     * the data through. You must call this.ondata(err, chunk, final) at some
+     * point in this method.
+     * @param chunk The chunk to process
+     * @param final Whether this is the last chunk
+     */
+    ZipPassThrough.prototype.process = function (chunk, final) {
+        this.ondata(null, chunk, final);
+    };
+    /**
+     * Pushes a chunk to be added. If you are subclassing this with a custom
+     * compression algorithm, note that you must push data from the source
+     * file only, pre-compression.
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    ZipPassThrough.prototype.push = function (chunk, final) {
+        if (!this.ondata)
+            err(5);
+        this.c.p(chunk);
+        this.size += chunk.length;
+        if (final)
+            this.crc = this.c.d();
+        this.process(chunk, final || false);
+    };
+    return ZipPassThrough;
+}());
+export { ZipPassThrough };
+// I don't extend because TypeScript extension adds 1kB of runtime bloat
+/**
+ * Streaming DEFLATE compression for ZIP archives. Prefer using AsyncZipDeflate
+ * for better performance
+ */
+var ZipDeflate = /*#__PURE__*/ (function () {
+    /**
+     * Creates a DEFLATE stream that can be added to ZIP archives
+     * @param filename The filename to associate with this data stream
+     * @param opts The compression options
+     */
+    function ZipDeflate(filename, opts) {
+        var _this = this;
+        if (!opts)
+            opts = {};
+        ZipPassThrough.call(this, filename);
+        this.d = new Deflate(opts, function (dat, final) {
+            _this.ondata(null, dat, final);
+        });
+        this.compression = 8;
+        this.flag = dbf(opts.level);
+    }
+    ZipDeflate.prototype.process = function (chunk, final) {
+        try {
+            this.d.push(chunk, final);
+        }
+        catch (e) {
+            this.ondata(e, null, final);
+        }
+    };
+    /**
+     * Pushes a chunk to be deflated
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    ZipDeflate.prototype.push = function (chunk, final) {
+        ZipPassThrough.prototype.push.call(this, chunk, final);
+    };
+    return ZipDeflate;
+}());
+export { ZipDeflate };
+/**
+ * Asynchronous streaming DEFLATE compression for ZIP archives
+ */
+var AsyncZipDeflate = /*#__PURE__*/ (function () {
+    /**
+     * Creates an asynchronous DEFLATE stream that can be added to ZIP archives
+     * @param filename The filename to associate with this data stream
+     * @param opts The compression options
+     */
+    function AsyncZipDeflate(filename, opts) {
+        var _this = this;
+        if (!opts)
+            opts = {};
+        ZipPassThrough.call(this, filename);
+        this.d = new AsyncDeflate(opts, function (err, dat, final) {
+            _this.ondata(err, dat, final);
+        });
+        this.compression = 8;
+        this.flag = dbf(opts.level);
+        this.terminate = this.d.terminate;
+    }
+    AsyncZipDeflate.prototype.process = function (chunk, final) {
+        this.d.push(chunk, final);
+    };
+    /**
+     * Pushes a chunk to be deflated
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    AsyncZipDeflate.prototype.push = function (chunk, final) {
+        ZipPassThrough.prototype.push.call(this, chunk, final);
+    };
+    return AsyncZipDeflate;
+}());
+export { AsyncZipDeflate };
+// TODO: Better tree shaking
+/**
+ * A zippable archive to which files can incrementally be added
+ */
+var Zip = /*#__PURE__*/ (function () {
+    /**
+     * Creates an empty ZIP archive to which files can be added
+     * @param cb The callback to call whenever data for the generated ZIP archive
+     *           is available
+     */
+    function Zip(cb) {
+        this.ondata = cb;
+        this.u = [];
+        this.d = 1;
+    }
+    /**
+     * Adds a file to the ZIP archive
+     * @param file The file stream to add
+     */
+    Zip.prototype.add = function (file) {
+        var _this = this;
+        if (!this.ondata)
+            err(5);
+        // finishing or finished
+        if (this.d & 2)
+            this.ondata(err(4 + (this.d & 1) * 8, 0, 1), null, false);
+        else {
+            var f = strToU8(file.filename), fl_1 = f.length;
+            var com = file.comment, o = com && strToU8(com);
+            var u = fl_1 != file.filename.length || (o && (com.length != o.length));
+            var hl_1 = fl_1 + exfl(file.extra) + 30;
+            if (fl_1 > 65535)
+                this.ondata(err(11, 0, 1), null, false);
+            var header = new u8(hl_1);
+            wzh(header, 0, file, f, u, -1);
+            var chks_1 = [header];
+            var pAll_1 = function () {
+                for (var _i = 0, chks_2 = chks_1; _i < chks_2.length; _i++) {
+                    var chk = chks_2[_i];
+                    _this.ondata(null, chk, false);
+                }
+                chks_1 = [];
+            };
+            var tr_1 = this.d;
+            this.d = 0;
+            var ind_1 = this.u.length;
+            var uf_1 = mrg(file, {
+                f: f,
+                u: u,
+                o: o,
+                t: function () {
+                    if (file.terminate)
+                        file.terminate();
+                },
+                r: function () {
+                    pAll_1();
+                    if (tr_1) {
+                        var nxt = _this.u[ind_1 + 1];
+                        if (nxt)
+                            nxt.r();
+                        else
+                            _this.d = 1;
+                    }
+                    tr_1 = 1;
+                }
+            });
+            var cl_1 = 0;
+            file.ondata = function (err, dat, final) {
+                if (err) {
+                    _this.ondata(err, dat, final);
+                    _this.terminate();
+                }
+                else {
+                    cl_1 += dat.length;
+                    chks_1.push(dat);
+                    if (final) {
+                        var dd = new u8(16);
+                        wbytes(dd, 0, 0x8074B50);
+                        wbytes(dd, 4, file.crc);
+                        wbytes(dd, 8, cl_1);
+                        wbytes(dd, 12, file.size);
+                        chks_1.push(dd);
+                        uf_1.c = cl_1, uf_1.b = hl_1 + cl_1 + 16, uf_1.crc = file.crc, uf_1.size = file.size;
+                        if (tr_1)
+                            uf_1.r();
+                        tr_1 = 1;
+                    }
+                    else if (tr_1)
+                        pAll_1();
+                }
+            };
+            this.u.push(uf_1);
+        }
+    };
+    /**
+     * Ends the process of adding files and prepares to emit the final chunks.
+     * This *must* be called after adding all desired files for the resulting
+     * ZIP file to work properly.
+     */
+    Zip.prototype.end = function () {
+        var _this = this;
+        if (this.d & 2) {
+            this.ondata(err(4 + (this.d & 1) * 8, 0, 1), null, true);
+            return;
+        }
+        if (this.d)
+            this.e();
+        else
+            this.u.push({
+                r: function () {
+                    if (!(_this.d & 1))
+                        return;
+                    _this.u.splice(-1, 1);
+                    _this.e();
+                },
+                t: function () { }
+            });
+        this.d = 3;
+    };
+    Zip.prototype.e = function () {
+        var bt = 0, l = 0, tl = 0;
+        for (var _i = 0, _a = this.u; _i < _a.length; _i++) {
+            var f = _a[_i];
+            tl += 46 + f.f.length + exfl(f.extra) + (f.o ? f.o.length : 0);
+        }
+        var out = new u8(tl + 22);
+        for (var _b = 0, _c = this.u; _b < _c.length; _b++) {
+            var f = _c[_b];
+            wzh(out, bt, f, f.f, f.u, -f.c - 2, l, f.o);
+            bt += 46 + f.f.length + exfl(f.extra) + (f.o ? f.o.length : 0), l += f.b;
+        }
+        wzf(out, bt, this.u.length, tl, l);
+        this.ondata(null, out, true);
+        this.d = 2;
+    };
+    /**
+     * A method to terminate any internal workers used by the stream. Subsequent
+     * calls to add() will fail.
+     */
+    Zip.prototype.terminate = function () {
+        for (var _i = 0, _a = this.u; _i < _a.length; _i++) {
+            var f = _a[_i];
+            f.t();
+        }
+        this.d = 2;
+    };
+    return Zip;
+}());
+export { Zip };
+export function zip(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    var r = {};
+    fltn(data, '', r, opts);
+    var k = Object.keys(r);
+    var lft = k.length, o = 0, tot = 0;
+    var slft = lft, files = new Array(lft);
+    var term = [];
+    var tAll = function () {
+        for (var i = 0; i < term.length; ++i)
+            term[i]();
+    };
+    var cbd = function (a, b) {
+        mt(function () { cb(a, b); });
+    };
+    mt(function () { cbd = cb; });
+    var cbf = function () {
+        var out = new u8(tot + 22), oe = o, cdl = tot - o;
+        tot = 0;
+        for (var i = 0; i < slft; ++i) {
+            var f = files[i];
+            try {
+                var l = f.c.length;
+                wzh(out, tot, f, f.f, f.u, l);
+                var badd = 30 + f.f.length + exfl(f.extra);
+                var loc = tot + badd;
+                out.set(f.c, loc);
+                wzh(out, o, f, f.f, f.u, l, tot, f.m), o += 16 + badd + (f.m ? f.m.length : 0), tot = loc + l;
+            }
+            catch (e) {
+                return cbd(e, null);
+            }
+        }
+        wzf(out, o, files.length, cdl, oe);
+        cbd(null, out);
+    };
+    if (!lft)
+        cbf();
+    var _loop_1 = function (i) {
+        var fn = k[i];
+        var _a = r[fn], file = _a[0], p = _a[1];
+        var c = crc(), size = file.length;
+        c.p(file);
+        var f = strToU8(fn), s = f.length;
+        var com = p.comment, m = com && strToU8(com), ms = m && m.length;
+        var exl = exfl(p.extra);
+        var compression = p.level == 0 ? 0 : 8;
+        var cbl = function (e, d) {
+            if (e) {
+                tAll();
+                cbd(e, null);
+            }
+            else {
+                var l = d.length;
+                files[i] = mrg(p, {
+                    size: size,
+                    crc: c.d(),
+                    c: d,
+                    f: f,
+                    m: m,
+                    u: s != fn.length || (m && (com.length != ms)),
+                    compression: compression
+                });
+                o += 30 + s + exl + l;
+                tot += 76 + 2 * (s + exl) + (ms || 0) + l;
+                if (!--lft)
+                    cbf();
+            }
+        };
+        if (s > 65535)
+            cbl(err(11, 0, 1), null);
+        if (!compression)
+            cbl(null, file);
+        else if (size < 160000) {
+            try {
+                cbl(null, deflateSync(file, p));
+            }
+            catch (e) {
+                cbl(e, null);
+            }
+        }
+        else
+            term.push(deflate(file, p, cbl));
+    };
+    // Cannot use lft because it can decrease
+    for (var i = 0; i < slft; ++i) {
+        _loop_1(i);
+    }
+    return tAll;
+}
+/**
+ * Synchronously creates a ZIP file. Prefer using `zip` for better performance
+ * with more than one file.
+ * @param data The directory structure for the ZIP archive
+ * @param opts The main options, merged with per-file options
+ * @returns The generated ZIP archive
+ */
+export function zipSync(data, opts) {
+    if (!opts)
+        opts = {};
+    var r = {};
+    var files = [];
+    fltn(data, '', r, opts);
+    var o = 0;
+    var tot = 0;
+    for (var fn in r) {
+        var _a = r[fn], file = _a[0], p = _a[1];
+        var compression = p.level == 0 ? 0 : 8;
+        var f = strToU8(fn), s = f.length;
+        var com = p.comment, m = com && strToU8(com), ms = m && m.length;
+        var exl = exfl(p.extra);
+        if (s > 65535)
+            err(11);
+        var d = compression ? deflateSync(file, p) : file, l = d.length;
+        var c = crc();
+        c.p(file);
+        files.push(mrg(p, {
+            size: file.length,
+            crc: c.d(),
+            c: d,
+            f: f,
+            m: m,
+            u: s != fn.length || (m && (com.length != ms)),
+            o: o,
+            compression: compression
+        }));
+        o += 30 + s + exl + l;
+        tot += 76 + 2 * (s + exl) + (ms || 0) + l;
+    }
+    var out = new u8(tot + 22), oe = o, cdl = tot - o;
+    for (var i = 0; i < files.length; ++i) {
+        var f = files[i];
+        wzh(out, f.o, f, f.f, f.u, f.c.length);
+        var badd = 30 + f.f.length + exfl(f.extra);
+        out.set(f.c, f.o + badd);
+        wzh(out, o, f, f.f, f.u, f.c.length, f.o, f.m), o += 16 + badd + (f.m ? f.m.length : 0);
+    }
+    wzf(out, o, files.length, cdl, oe);
+    return out;
+}
+/**
+ * Streaming pass-through decompression for ZIP archives
+ */
+var UnzipPassThrough = /*#__PURE__*/ (function () {
+    function UnzipPassThrough() {
+    }
+    UnzipPassThrough.prototype.push = function (data, final) {
+        this.ondata(null, data, final);
+    };
+    UnzipPassThrough.compression = 0;
+    return UnzipPassThrough;
+}());
+export { UnzipPassThrough };
+/**
+ * Streaming DEFLATE decompression for ZIP archives. Prefer AsyncZipInflate for
+ * better performance.
+ */
+var UnzipInflate = /*#__PURE__*/ (function () {
+    /**
+     * Creates a DEFLATE decompression that can be used in ZIP archives
+     */
+    function UnzipInflate() {
+        var _this = this;
+        this.i = new Inflate(function (dat, final) {
+            _this.ondata(null, dat, final);
+        });
+    }
+    UnzipInflate.prototype.push = function (data, final) {
+        try {
+            this.i.push(data, final);
+        }
+        catch (e) {
+            this.ondata(e, null, final);
+        }
+    };
+    UnzipInflate.compression = 8;
+    return UnzipInflate;
+}());
+export { UnzipInflate };
+/**
+ * Asynchronous streaming DEFLATE decompression for ZIP archives
+ */
+var AsyncUnzipInflate = /*#__PURE__*/ (function () {
+    /**
+     * Creates a DEFLATE decompression that can be used in ZIP archives
+     */
+    function AsyncUnzipInflate(_, sz) {
+        var _this = this;
+        if (sz < 320000) {
+            this.i = new Inflate(function (dat, final) {
+                _this.ondata(null, dat, final);
+            });
+        }
+        else {
+            this.i = new AsyncInflate(function (err, dat, final) {
+                _this.ondata(err, dat, final);
+            });
+            this.terminate = this.i.terminate;
+        }
+    }
+    AsyncUnzipInflate.prototype.push = function (data, final) {
+        if (this.i.terminate)
+            data = slc(data, 0);
+        this.i.push(data, final);
+    };
+    AsyncUnzipInflate.compression = 8;
+    return AsyncUnzipInflate;
+}());
+export { AsyncUnzipInflate };
+/**
+ * A ZIP archive decompression stream that emits files as they are discovered
+ */
+var Unzip = /*#__PURE__*/ (function () {
+    /**
+     * Creates a ZIP decompression stream
+     * @param cb The callback to call whenever a file in the ZIP archive is found
+     */
+    function Unzip(cb) {
+        this.onfile = cb;
+        this.k = [];
+        this.o = {
+            0: UnzipPassThrough
+        };
+        this.p = et;
+    }
+    /**
+     * Pushes a chunk to be unzipped
+     * @param chunk The chunk to push
+     * @param final Whether this is the last chunk
+     */
+    Unzip.prototype.push = function (chunk, final) {
+        var _this = this;
+        if (!this.onfile)
+            err(5);
+        if (!this.p)
+            err(4);
+        if (this.c > 0) {
+            var len = Math.min(this.c, chunk.length);
+            var toAdd = chunk.subarray(0, len);
+            this.c -= len;
+            if (this.d)
+                this.d.push(toAdd, !this.c);
+            else
+                this.k[0].push(toAdd);
+            chunk = chunk.subarray(len);
+            if (chunk.length)
+                return this.push(chunk, final);
+        }
+        else {
+            var f = 0, i = 0, is = void 0, buf = void 0;
+            if (!this.p.length)
+                buf = chunk;
+            else if (!chunk.length)
+                buf = this.p;
+            else {
+                buf = new u8(this.p.length + chunk.length);
+                buf.set(this.p), buf.set(chunk, this.p.length);
+            }
+            var l = buf.length, oc = this.c, add = oc && this.d;
+            var _loop_2 = function () {
+                var _a;
+                var sig = b4(buf, i);
+                if (sig == 0x4034B50) {
+                    f = 1, is = i;
+                    this_1.d = null;
+                    this_1.c = 0;
+                    var bf = b2(buf, i + 6), cmp_1 = b2(buf, i + 8), u = bf & 2048, dd = bf & 8, fnl = b2(buf, i + 26), es = b2(buf, i + 28);
+                    if (l > i + 30 + fnl + es) {
+                        var chks_3 = [];
+                        this_1.k.unshift(chks_3);
+                        f = 2;
+                        var sc_1 = b4(buf, i + 18), su_1 = b4(buf, i + 22);
+                        var fn_1 = strFromU8(buf.subarray(i + 30, i += 30 + fnl), !u);
+                        if (sc_1 == 4294967295) {
+                            _a = dd ? [-2] : z64e(buf, i), sc_1 = _a[0], su_1 = _a[1];
+                        }
+                        else if (dd)
+                            sc_1 = -1;
+                        i += es;
+                        this_1.c = sc_1;
+                        var d_1;
+                        var file_1 = {
+                            name: fn_1,
+                            compression: cmp_1,
+                            start: function () {
+                                if (!file_1.ondata)
+                                    err(5);
+                                if (!sc_1)
+                                    file_1.ondata(null, et, true);
+                                else {
+                                    var ctr = _this.o[cmp_1];
+                                    if (!ctr)
+                                        file_1.ondata(err(14, 'unknown compression type ' + cmp_1, 1), null, false);
+                                    d_1 = sc_1 < 0 ? new ctr(fn_1) : new ctr(fn_1, sc_1, su_1);
+                                    d_1.ondata = function (err, dat, final) { file_1.ondata(err, dat, final); };
+                                    for (var _i = 0, chks_4 = chks_3; _i < chks_4.length; _i++) {
+                                        var dat = chks_4[_i];
+                                        d_1.push(dat, false);
+                                    }
+                                    if (_this.k[0] == chks_3 && _this.c)
+                                        _this.d = d_1;
+                                    else
+                                        d_1.push(et, true);
+                                }
+                            },
+                            terminate: function () {
+                                if (d_1 && d_1.terminate)
+                                    d_1.terminate();
+                            }
+                        };
+                        if (sc_1 >= 0)
+                            file_1.size = sc_1, file_1.originalSize = su_1;
+                        this_1.onfile(file_1);
+                    }
+                    return "break";
+                }
+                else if (oc) {
+                    if (sig == 0x8074B50) {
+                        is = i += 12 + (oc == -2 && 8), f = 3, this_1.c = 0;
+                        return "break";
+                    }
+                    else if (sig == 0x2014B50) {
+                        is = i -= 4, f = 3, this_1.c = 0;
+                        return "break";
+                    }
+                }
+            };
+            var this_1 = this;
+            for (; i < l - 4; ++i) {
+                var state_1 = _loop_2();
+                if (state_1 === "break")
+                    break;
+            }
+            this.p = et;
+            if (oc < 0) {
+                var dat = f ? buf.subarray(0, is - 12 - (oc == -2 && 8) - (b4(buf, is - 16) == 0x8074B50 && 4)) : buf.subarray(0, i);
+                if (add)
+                    add.push(dat, !!f);
+                else
+                    this.k[+(f == 2)].push(dat);
+            }
+            if (f & 2)
+                return this.push(buf.subarray(i), final);
+            this.p = buf.subarray(i);
+        }
+        if (final) {
+            if (this.c)
+                err(13);
+            this.p = null;
+        }
+    };
+    /**
+     * Registers a decoder with the stream, allowing for files compressed with
+     * the compression type provided to be expanded correctly
+     * @param decoder The decoder constructor
+     */
+    Unzip.prototype.register = function (decoder) {
+        this.o[decoder.compression] = decoder;
+    };
+    return Unzip;
+}());
+export { Unzip };
+var mt = typeof queueMicrotask == 'function' ? queueMicrotask : typeof setTimeout == 'function' ? setTimeout : function (fn) { fn(); };
+export function unzip(data, opts, cb) {
+    if (!cb)
+        cb = opts, opts = {};
+    if (typeof cb != 'function')
+        err(7);
+    var term = [];
+    var tAll = function () {
+        for (var i = 0; i < term.length; ++i)
+            term[i]();
+    };
+    var files = {};
+    var cbd = function (a, b) {
+        mt(function () { cb(a, b); });
+    };
+    mt(function () { cbd = cb; });
+    var e = data.length - 22;
+    for (; b4(data, e) != 0x6054B50; --e) {
+        if (!e || data.length - e > 65558) {
+            cbd(err(13, 0, 1), null);
+            return tAll;
+        }
+    }
+    ;
+    var lft = b2(data, e + 8);
+    if (lft) {
+        var c = lft;
+        var o = b4(data, e + 16);
+        var z = o == 4294967295 || c == 65535;
+        if (z) {
+            var ze = b4(data, e - 12);
+            z = b4(data, ze) == 0x6064B50;
+            if (z) {
+                c = lft = b4(data, ze + 32);
+                o = b4(data, ze + 48);
+            }
+        }
+        var fltr = opts && opts.filter;
+        var _loop_3 = function (i) {
+            var _a = zh(data, o, z), c_1 = _a[0], sc = _a[1], su = _a[2], fn = _a[3], no = _a[4], off = _a[5], b = slzh(data, off);
+            o = no;
+            var cbl = function (e, d) {
+                if (e) {
+                    tAll();
+                    cbd(e, null);
+                }
+                else {
+                    if (d)
+                        files[fn] = d;
+                    if (!--lft)
+                        cbd(null, files);
+                }
+            };
+            if (!fltr || fltr({
+                name: fn,
+                size: sc,
+                originalSize: su,
+                compression: c_1
+            })) {
+                if (!c_1)
+                    cbl(null, slc(data, b, b + sc));
+                else if (c_1 == 8) {
+                    var infl = data.subarray(b, b + sc);
+                    // Synchronously decompress under 512KB, or barely-compressed data
+                    if (su < 524288 || sc > 0.8 * su) {
+                        try {
+                            cbl(null, inflateSync(infl, { out: new u8(su) }));
+                        }
+                        catch (e) {
+                            cbl(e, null);
+                        }
+                    }
+                    else
+                        term.push(inflate(infl, { size: su }, cbl));
+                }
+                else
+                    cbl(err(14, 'unknown compression type ' + c_1, 1), null);
+            }
+            else
+                cbl(null, null);
+        };
+        for (var i = 0; i < c; ++i) {
+            _loop_3(i);
+        }
+    }
+    else
+        cbd(null, {});
+    return tAll;
+}
+/**
+ * Synchronously decompresses a ZIP archive. Prefer using `unzip` for better
+ * performance with more than one file.
+ * @param data The raw compressed ZIP file
+ * @param opts The ZIP extraction options
+ * @returns The decompressed files
+ */
+export function unzipSync(data, opts) {
+    var files = {};
+    var e = data.length - 22;
+    for (; b4(data, e) != 0x6054B50; --e) {
+        if (!e || data.length - e > 65558)
+            err(13);
+    }
+    ;
+    var c = b2(data, e + 8);
+    if (!c)
+        return {};
+    var o = b4(data, e + 16);
+    var z = o == 4294967295 || c == 65535;
+    if (z) {
+        var ze = b4(data, e - 12);
+        z = b4(data, ze) == 0x6064B50;
+        if (z) {
+            c = b4(data, ze + 32);
+            o = b4(data, ze + 48);
+        }
+    }
+    var fltr = opts && opts.filter;
+    for (var i = 0; i < c; ++i) {
+        var _a = zh(data, o, z), c_2 = _a[0], sc = _a[1], su = _a[2], fn = _a[3], no = _a[4], off = _a[5], b = slzh(data, off);
+        o = no;
+        if (!fltr || fltr({
+            name: fn,
+            size: sc,
+            originalSize: su,
+            compression: c_2
+        })) {
+            if (!c_2)
+                files[fn] = slc(data, b, b + sc);
+            else if (c_2 == 8)
+                files[fn] = inflateSync(data.subarray(b, b + sc), { out: new u8(su) });
+            else
+                err(14, 'unknown compression type ' + c_2);
+        }
+    }
+    return files;
+}

vendor/font-awesome/webfonts/fa-brands-400.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:e28096fa75a96ac77020155ea3a6dd7312983e84115366d4cf49a0c312ec6d51
+size 209128

vendor/font-awesome/webfonts/fa-brands-400.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:232c6f6a7678304f9efaa26f30b1610debc2ba9f4cd636b5e6751c8d73761b92
+size 117852

vendor/font-awesome/webfonts/fa-regular-400.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:9174757efc83e072436e873c22be1663d3c103b0a16d7fb73569af4918d4d351
+size 67860

vendor/font-awesome/webfonts/fa-regular-400.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c27da6f833431da5aa295c44540bfac0fd8270ba6a3c4346427006d8a7b34b76
+size 25392

vendor/font-awesome/webfonts/fa-solid-900.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b4990d0d0c5f5d38d62e936eea120674e584c7eea8dcee38a975c0cf9a37539b
+size 420332

vendor/font-awesome/webfonts/fa-solid-900.woff2

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ae17c16afbea216707b2203ea1cf9bdb45b9bfe47d0f4ae3258ddbc6294dd02f
+size 156400