— 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 = `
+ Extract${fmtMs(tp.extractMs)}
+ Inference${fmtMs(tp.inferenceMs)}
+ Render${fmtMs(tp.renderMs)}
+ Dispose${fmtMs(tp.disposeMs)}
`;
+ }
+
+ 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 = `
+
+ Session Summary
+ Pipeline${pipelineLabel}
+ Resolution${p.srcW}\u00d7${p.srcH} \u2192 ${p.outW}\u00d7${p.outH}
+ Tiles${p.tiles} @ ${tileSizeLabel}
+ Total${fmtMs(p.total)}
+ ${p.modelLoad > 0 ? `Model load${fmtMs(p.modelLoad)}
` : ''}
+ Setup${fmtMs(p.setup)}
+ Extract${fmtMs(p.extract)}
+ ${isGpuPipeline ? 'Inference est.' : 'Inference'}${fmtMs(isGpuPipeline ? (p.inferenceEstimated || 0) : p.inference)}
+ ${p.readback > 0 ? `Readback${fmtMs(p.readback)}
` : ''}
+ ${p.gpuRender > 0 ? `GPU render${fmtMs(p.gpuRender)}
` : ''}
+ ${p.writeTile > 0 ? `Write tiles${fmtMs(p.writeTile)}
` : ''}
+ Dispose${fmtMs(p.dispose)}
`;
+
+ 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 += `
+
+ ORT Profile
+ Runs${ort.runs}, model_run ${ms(ort.modelRunUs)}
+ ${gpuTotal ? `GPU ops${ms(gpuTotal)}
+ ${topGpuOps}
` : ''}
+ ${cpuTotal ? `CPU ops${ms(cpuTotal)}
` : ''}
+ ${ort.memcpy.toHost.n ? `GPU\u2192CPU${ms(ort.memcpy.toHost.us)} \u00d7${ort.memcpy.toHost.n}
` : ''}
+ ${ort.memcpy.fromHost.n ? `CPU\u2192GPU${ms(ort.memcpy.fromHost.us)} \u00d7${ort.memcpy.fromHost.n}
` : ''}`;
+ }
+ if (r.pipelinePerf?.steps) {
+ const rows = Object.entries(r.pipelinePerf.steps)
+ .map(([name, data]) => {
+ const tiles = data.perf?.tiles ? ` (${data.perf.tiles} tiles)` : '';
+ return `${humanStepName(name)}${fmtMs(data.durationMs)}${tiles}
`;
+ })
+ .join('');
+ resultsHtml += `
+
+ Pipeline Steps
+ ${rows}
+ Pipeline total${fmtMs(r.pipelinePerf.totalMs || 0)}
`;
+ }
+ }
+
+ morph(this, `
+
+
+ Performance${isDone ? ' \u2014 Done' : ''}
+
+
+ Backend${s.backend}
+ Stage${s.stage}
+ Tile${s.tile}
+ Tile time${s.tileTime}
+ ${tileBreakdownHtml}
+ Avg tile${s.avgTile}
+ Elapsed${s.elapsed}
+ ETA${s.eta}
+ JS Heap${s.heap}
+
+ Heap limit${s.heapLimit}
+ Throughput${s.throughput}
+ ${resultsHtml}
+ `);
+ }
+}
+
+customElements.define('perf-monitor', PerfMonitor);
diff --git a/features/upscaler/ui/upscale-preview.js b/features/upscaler/ui/upscale-preview.js
new file mode 100644
index 0000000000000000000000000000000000000000..e17e26503b554f6ba04219ef2b711b7aec133151
--- /dev/null
+++ b/features/upscaler/ui/upscale-preview.js
@@ -0,0 +1,117 @@
+/**
+ * — 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, `
+
+
+ `);
+ }
+}
+
+customElements.define('upscale-preview', UpscalePreview);
diff --git a/features/upscaler/ui/upscaler-canvas-area.js b/features/upscaler/ui/upscaler-canvas-area.js
new file mode 100644
index 0000000000000000000000000000000000000000..769c6c1c7b562816b437640aae25cf3ca04e26d3
--- /dev/null
+++ b/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 = `
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('upscaler-canvas-area', UpscalerCanvasArea);
diff --git a/features/upscaler/ui/upscaler-controls.js b/features/upscaler/ui/upscaler-controls.js
new file mode 100644
index 0000000000000000000000000000000000000000..71d6454bc6760735f74acd01808717deda5f1151
--- /dev/null
+++ b/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, '>')
+ .replace(/"/g, '"')
+ .replace(/'/g, ''');
+}
+
+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 ``;
+ }).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(
+ `fp16 model on CPU backend: 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 Backend to GPU.`,
+ );
+ }
+ if (isLargeOnBigTile) {
+ messages.push(
+ `Large model with big tiles: models >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('
');
+ }
+
+ // ── Template ───────────────────────────────────────────────────────────
+
+ #render() {
+ morph(this, `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Additional Passes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `);
+ }
+}
+
+customElements.define('upscaler-controls', UpscalerControls);
diff --git a/features/upscaler/ui/upscaler-toolbar.js b/features/upscaler/ui/upscaler-toolbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..d8da6d0695d4e5681eef536254fd9e97e205a6ec
--- /dev/null
+++ b/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 = `
+
+
+
+
+
+
+
+ `;
+ }
+}
+
+customElements.define('upscaler-toolbar', UpscalerToolbar);
diff --git a/features/upscaler/upscale-pipeline.js b/features/upscaler/upscale-pipeline.js
new file mode 100644
index 0000000000000000000000000000000000000000..93b456a1a00d7fc1ae8b07847b796d03941882c5
--- /dev/null
+++ b/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();
+ }
+}
diff --git a/features/upscaler/upscaler-app.js b/features/upscaler/upscaler-app.js
new file mode 100644
index 0000000000000000000000000000000000000000..5b59a07fa1a57cebd6828efed618f5084d9fb1df
--- /dev/null
+++ b/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
+ // 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, `
+
+
+
+
+
+
+
+ `);
+ }
+}
+
+customElements.define('upscaler-app', UpscalerApp);
diff --git a/index.html b/index.html
index b0c4b3666032a737f3903db53e6a8a9272483e28..7b3687f51d62467d0059554e88930273dc7ee0ca 100644
--- a/index.html
+++ b/index.html
@@ -1,19 +1,88 @@
-
-
-
-
-
- My static Space
-
-
-
-
-
Welcome to your static Space!
-
You can modify this app directly by editing index.html in the Files and versions tab.
-
- Also don't forget to check the
- Spaces documentation.
-
-