Initial release

.gitattributes

@@ -33,3 +33,7 @@ saved_model/**/* 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
+*.png filter=lfs diff=lfs merge=lfs -text
+*.webp filter=lfs diff=lfs merge=lfs -text
+*.woff2 filter=lfs diff=lfs merge=lfs -text
+*.jpg filter=lfs diff=lfs merge=lfs -text

LICENSE

@@ -0,0 +1,28 @@
+MIT License
+
+Copyright (c) 2026 MegaPotato
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+This license covers the code of this demo. It does not cover the example
+images (public-domain or no-known-restrictions archive photographs, see
+examples/examples.json; the results are MegaPotato outputs), the fonts in
+assets/fonts (MP Sans, a subset of Liberation Sans under the SIL Open Font
+License 1.1, see assets/fonts/OFL.txt), the MegaPotato name, or the MegaPotato
+model and API.

README.md

@@ -1,10 +1,70 @@
 ---
 title: Photo Enhancer
-emoji: 👀
-colorFrom: yellow
-colorTo: blue
+emoji: 🖼️
+colorFrom: gray
+colorTo: red
 sdk: static
+app_file: index.html
 pinned: false
+license: mit
+short_description: "Refine grainy, soft and compressed photos with AI"
+tags:
+  - image-enhancement
+  - photo-enhancement
+  - image-restoration
+  - image-denoising
+  - super-resolution
+  - image-to-image
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Photo Enhancer by the MegaPotato AI upscaler (megapotato.app)
+
+A free online photo enhancer from the [MegaPotato AI upscaler](https://megapotato.app/?s=hf-photo-enhancer-readme).
+It restores detail in noisy, soft or heavily compressed photos, at the same size or 2× larger, and works with what is
+in the photo instead of drawing new faces or text.
+
+## How to enhance a photo
+
+1. Choose or drop a PNG, JPEG or WebP photo.
+2. Pick **Original size** or **2×** and press **Enhance**.
+3. Compare Before and After side by side; zoom to 100% or 200%, or use **Inspect** on a phone.
+4. To download the full-size result, upload the photo on [megapotato.app](https://megapotato.app/tool?s=hf-photo-enhancer-readme)
+   (new accounts get free chips).
+
+The examples are real results.
+
+## Free demo limits
+
+Log in to Hugging Face to enhance your own photos: **2 runs a day** in this Space (per network address, rolling
+24 hours), with the same model and size limits as the product. The examples work for everyone.
+
+## Benchmark
+
+In MegaPotato's [blind test of 18 AI upscalers](https://megapotato.app/blog/best-ai-image-upscalers-2026?s=hf-photo-enhancer-readme)
+the model turned none of 67 faces into a different person; creative upscalers changed up to three in four. It is
+MegaPotato's own evaluation and MegaPotato is one of the products compared; the article gives the method, the results
+and open data under CC BY 4.0.
+
+## How this Space works
+
+This Space is a static HTML page. Uploads go to a MegaPotato service on Cloudflare that holds the API key, applies
+the demo limits and passes the image to the MegaPotato API. The proprietary model runs on MegaPotato's GPUs; the
+model weights are not published. Images are handled under the MegaPotato
+[Privacy Policy](https://megapotato.app/privacy) and [Terms](https://megapotato.app/terms). Every image is reviewed
+automatically before processing, and images that may not meet our content rules are refused. The original is deleted
+once the run finishes and the result about an hour after the upload.
+
+The same model is available through the [MegaPotato REST API](https://megapotato.app/developers?s=hf-photo-enhancer-readme).
+
+## Feedback
+
+Use this Space's Community tab to report errors or share feedback. Only share images you are comfortable making
+public.
+
+## Credits and licensing
+
+Example photos, from Wikimedia Commons: Wil Blanche and Jack Corn (Documerica, U.S. National Archives) and Jack
+Delano (FSA/OWI, Library of Congress) are U.S. federal government works in the public domain; the two Harris & Ewing
+photographs (Library of Congress) are marked "no known restrictions on publication". Sources are listed in `examples/examples.json`. Font: MP Sans, a subset of Liberation
+Sans under the SIL Open Font License (`assets/fonts/OFL.txt`). Demo code: MIT license; access to the proprietary
+model and API is governed by the MegaPotato service terms.

assets/fonts/OFL.txt

@@ -0,0 +1,102 @@
+MP Sans is a subset of Liberation Sans 2.1.5 (Regular, Bold), renamed as the SIL Open Font License requires for
+a Modified Version (Reserved Font Names: Liberation; Arimo).
+
+Digitized data copyright (c) 2010 Google Corporation with Reserved Font Arimo, Tinos and Cousine.
+Copyright (c) 2012 Red Hat, Inc. with Reserved Font Name Liberation.
+
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+
+PREAMBLE The goals of the Open Font License (OFL) are to stimulate
+worldwide development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to provide
+a free and open framework in which fonts may be shared and improved in
+partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves.
+The fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works.  The fonts and derivatives,
+however, cannot be released under any other type of license.  The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such.
+This may include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components
+as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting ? in part or in whole ?
+any of the components of the Original Version, by changing formats or
+by porting the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical writer
+or other person who contributed to the Font Software.
+
+
+PERMISSION & CONDITIONS
+
+Permission is hereby granted, free of charge, to any person obtaining a
+copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,in
+   Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+   redistributed and/or sold with any software, provided that each copy
+   contains the above copyright notice and this license. These can be
+   included either as stand-alone text files, human-readable headers or
+   in the appropriate machine-readable metadata fields within text or
+   binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+   Name(s) unless explicit written permission is granted by the
+   corresponding Copyright Holder. This restriction only applies to the
+   primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+   Software shall not be used to promote, endorse or advertise any
+   Modified Version, except to acknowledge the contribution(s) of the
+   Copyright Holder(s) and the Author(s) or with their explicit written
+   permission.
+
+5) The Font Software, modified or unmodified, in part or in whole, must
+   be distributed entirely under this license, and must not be distributed
+   under any other license. The requirement for fonts to remain under
+   this license does not apply to any document created using the Font
+   Software.
+
+
+
+TERMINATION
+This license becomes null and void if any of the above conditions are not met.
+
+
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT.  IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER
+DEALINGS IN THE FONT SOFTWARE.

core.js

@@ -0,0 +1,729 @@
+// Shared client of the MegaPotato demo Spaces: the demo API (config, quote, upload, poll, result), the Cloudflare
+// human check, the Hub's login state and the upload preparation. No page markup here: each Space draws its own UI.
+
+import { readImageInfo } from "./imageinfo.js";
+
+export { readImageInfo };
+
+export const API = "https://demo-api.megapotato.app";
+const HF_ORIGIN = "https://huggingface.co";
+export const MAX_FILE_BYTES = 50 * 1024 * 1024;
+export const MAX_SOURCE_PIXELS = 60_000_000;
+const MAX_UPLOAD_BYTES = 40 * 1024 * 1024; // the site's and the API's upload limit
+// Browsers cap a canvas (Safari: 16.7 MP); a photo larger than that is drawn at that size instead of failing.
+const CANVAS_MAX_PIXELS = 16_777_216;
+const JOB_DEADLINE_MS = 30 * 60_000;
+const MIN_POLL_MS = 2000;
+export const NBSP = " ";
+
+export const fmt = (n) => Math.round(n).toLocaleString("en-US").replace(/,/g, NBSP);
+export const dims = (w, h) => `${fmt(w)}${NBSP}×${NBSP}${fmt(h)}`;
+export const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+export const escapeHtml = (s) =>
+  String(s).replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+export const usd = (x) => (x >= 0.1 ? `$${x.toFixed(2)}` : `$${x.toFixed(3).replace(/0$/, "")}`);
+
+export function untilText(ms) {
+  if (!ms) return "later";
+  const d = new Date(ms);
+  const hhmm = `${String(d.getUTCHours()).padStart(2, "0")}:${String(d.getUTCMinutes()).padStart(2, "0")}${NBSP}UTC`;
+  return d.toISOString().slice(0, 10) === new Date().toISOString().slice(0, 10) ? `at ${hhmm}` : `tomorrow at ${hhmm}`;
+}
+
+export class DemoError extends Error {
+  constructor(kind, extra = {}) {
+    super(kind);
+    this.kind = kind;
+    Object.assign(this, extra);
+  }
+}
+
+const RESUMABLE = new Set(["network", "server", "timeout"]);
+export const isResumable = (err) => RESUMABLE.has(err.kind);
+export const INFO_KINDS = new Set(["hourly", "daily", "budget", "spend_limit", "auth", "credits", "busy", "crowded", "login", "reduced"]);
+
+function randomHex(bytes = 16) {
+  return Array.from(crypto.getRandomValues(new Uint8Array(bytes)), (b) => b.toString(16).padStart(2, "0")).join("");
+}
+
+function withTimeout(promise, ms, kind) {
+  return Promise.race([promise, new Promise((_, reject) => setTimeout(() => reject(new DemoError(kind)), ms))]);
+}
+
+async function api(path, init = {}, timeoutMs = 30_000) {
+  let resp;
+  try {
+    resp = await fetch(API + path, { ...init, signal: AbortSignal.timeout(timeoutMs) });
+  } catch {
+    throw new DemoError("network");
+  }
+  let data = {};
+  try {
+    data = await resp.json();
+  } catch {
+    data = {};
+  }
+  if (!resp.ok) throw new DemoError(data.error || (resp.status >= 500 ? "server" : "network"), data);
+  return data;
+}
+
+/**
+ * One demo page's connection to the service.
+ * `slug`: the Space ("photo-enhancer", "4k-upscaler"), used for storage keys and site attribution.
+ * `onPhase(phase, info)`: "preparing" | "uploading" | "queued" | "running" | "loading" (info: { elapsed, eta, cold }).
+ * `onQuota()`: the visitor's allowance changed (re-read after a run or when a limit ends).
+ */
+export class Demo {
+  constructor({ slug, turnstileEl, turnstileTheme = "auto", onPhase = () => {}, onQuota = () => {} }) {
+    this.slug = slug;
+    this.sessionKey = `mp-${slug}-active`;
+    this.passKey = "mp-demo-pass";
+    this.turnstileEl = turnstileEl;
+    this.turnstileTheme = turnstileTheme;
+    this.onPhase = onPhase;
+    this.onQuota = onQuota;
+    this.config = null;
+    this.configFailed = false;
+    this.hfUser = null;
+    this.active = null;
+    this.busy = false;
+    this.limitedUntil = 0;
+    this.turnstile = { widget: null, pending: null, ready: null };
+    this.loginWallNoted = false;
+    this.turnstileFailNoted = false;
+    this.prepared = null; // an upload prepared smaller than quoted, kept for the confirming click
+    this.quotaTimer = 0;
+  }
+
+  // ------------------------------------------------------------------ links
+
+  /** A megapotato.app link with this Space's attribution slug (the site reads ?s=, not UTM). */
+  site(path = "/tool", content = "") {
+    const s = content ? `hf-${this.slug}-${content}` : `hf-${this.slug}`;
+    return `https://megapotato.app${path}?s=${s.slice(0, 40)}`;
+  }
+
+  // ------------------------------------------------------------------ start
+
+  async init() {
+    const login = this.hfLoginState();
+    this.hfUser = await login;
+    try {
+      this.config = await api("/config", { headers: this.hfHeaders() }, 10_000);
+    } catch {
+      this.configFailed = true;
+      return null;
+    }
+    if (this.config.turnstile_site_key) this.loadTurnstile(this.config.turnstile_site_key);
+    this.watchQuota();
+    return this.config;
+  }
+
+  async refresh() {
+    try {
+      this.config = await api("/config", { headers: this.hfHeaders() }, 10_000);
+      this.configFailed = false;
+    } catch {
+      // keep the last config
+    }
+    this.watchQuota();
+    return this.config;
+  }
+
+  /** When a limit ends (a refused run's retry time, or the allowance's reset), read the allowance again. */
+  watchQuota() {
+    clearTimeout(this.quotaTimer);
+    const now = Date.now();
+    const me = this.config?.me;
+    const ends = [this.limitedUntil, me && me.left <= 0 ? me.retry_at : 0].filter((t) => Number.isFinite(t) && t > now);
+    if (!ends.length) return;
+    this.quotaTimer = setTimeout(
+      async () => {
+        await this.refresh();
+        this.onQuota();
+      },
+      Math.min(Math.min(...ends) - now + 1500, 6 * 3600_000),
+    );
+  }
+
+  hfHeaders() {
+    return this.hfUser ? { "X-HF-User": this.hfUser } : {};
+  }
+
+  /** Ask the Hugging Face page whether the visitor is logged in ("anonymous", "free" or "pro"); only the Hub answers. */
+  hfLoginState() {
+    if (window.self === window.top) return Promise.resolve("anonymous");
+    return new Promise((resolve) => {
+      const done = (user) => {
+        clearTimeout(timer);
+        window.removeEventListener("message", onMessage);
+        resolve(user);
+      };
+      const onMessage = (e) => {
+        if (e.origin !== HF_ORIGIN || e.data?.type !== "USER_PLAN") return;
+        const user = e.data.plan?.user;
+        done(user === "free" || user === "pro" ? user : "anonymous");
+      };
+      const timer = setTimeout(() => done("anonymous"), 2000);
+      window.addEventListener("message", onMessage);
+      try {
+        window.parent.postMessage({ type: "USER_PLAN_REQUEST" }, HF_ORIGIN);
+      } catch {
+        done("anonymous");
+      }
+    });
+  }
+
+  loginNeeded() {
+    const c = this.config;
+    const me = c?.me;
+    return (!!c?.anon_jobs || !!c?.login_required) && !!me && !me.logged_in && me.left <= 0;
+  }
+
+  /** No runs left in the current allowance (logged in or not), until its reset time when the service gave one. */
+  quotaOut() {
+    const me = this.config?.me;
+    return !!me && me.left <= 0 && !(me.retry_at && Date.now() >= me.retry_at);
+  }
+
+  limited() {
+    return Date.now() < this.limitedUntil || this.loginNeeded() || this.quotaOut();
+  }
+
+  runsLeft() {
+    return this.config?.me?.left ?? null;
+  }
+
+  /** Once per visit: the login wall stopped someone who wanted to run (the page blocks the button, nothing is sent). */
+  noteLoginWall() {
+    if (this.loginWallNoted) return;
+    this.loginWallNoted = true;
+    this.event({ kind: "login_wall" });
+  }
+
+  event(body) {
+    fetch(`${API}/event`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body) }).catch(() => {});
+  }
+
+  // ------------------------------------------------------------------ human check
+
+  loadTurnstile(siteKey) {
+    if (this.turnstile.ready) return;
+    this.turnstile.ready = new Promise((resolve, reject) => {
+      window.mpTurnstileReady = () => {
+        try {
+          this.turnstile.widget = window.turnstile.render(this.turnstileEl, {
+            sitekey: siteKey,
+            action: "upscale",
+            appearance: "interaction-only",
+            execution: "execute",
+            theme: typeof this.turnstileTheme === "function" ? this.turnstileTheme() : this.turnstileTheme,
+            // Retries are ours (counted), not Cloudflare's timer: a generic failure often passes on a later run.
+            retry: "never",
+            callback: (token) => this.turnstile.pending?.resolve(token),
+            "error-callback": (code) => {
+              this.retryTurnstile(`error:${String(code ?? "unknown").slice(0, 12)}`);
+              return true;
+            },
+            "timeout-callback": () => this.retryTurnstile("interaction-timeout"),
+            "expired-callback": () => window.turnstile.reset(this.turnstile.widget),
+          });
+          resolve();
+        } catch {
+          reject(new DemoError("turnstile"));
+        }
+      };
+      const s = document.createElement("script");
+      s.src = "https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=mpTurnstileReady";
+      s.async = true;
+      s.onerror = () => {
+        this.noteTurnstileFail("script");
+        reject(new DemoError("turnstile"));
+      };
+      document.head.appendChild(s);
+    });
+    this.turnstile.ready.catch(() => undefined);
+  }
+
+  retryTurnstile(reason) {
+    const p = this.turnstile.pending;
+    if (!p) return;
+    if (p.attempts < 5) {
+      p.attempts += 1;
+      try {
+        window.turnstile.reset(this.turnstile.widget);
+        window.turnstile.execute(this.turnstile.widget);
+        return;
+      } catch {
+        // fall through: give up
+      }
+    }
+    this.noteTurnstileFail(reason);
+    p.reject(new DemoError("challenge"));
+  }
+
+  noteTurnstileFail(code) {
+    if (this.turnstileFailNoted) return;
+    this.turnstileFailNoted = true;
+    this.event({ kind: "turnstile_fail", code });
+  }
+
+  async turnstileToken() {
+    if (!this.turnstile.ready) return "";
+    await withTimeout(this.turnstile.ready, 20_000, "turnstile");
+    const t = window.turnstile;
+    t.reset(this.turnstile.widget);
+    try {
+      return await withTimeout(
+        new Promise((resolve, reject) => {
+          this.turnstile.pending = { resolve, reject, attempts: 1 };
+          t.execute(this.turnstile.widget);
+        }),
+        90_000,
+        "turnstile",
+      );
+    } finally {
+      this.turnstile.pending = null;
+    }
+  }
+
+  // A passed check is good for an hour (signed by the service, bound to this visitor). Kept for the tab only.
+  currentPass() {
+    try {
+      const p = JSON.parse(sessionStorage.getItem(this.passKey) || "null");
+      return p && typeof p.t === "string" && p.until - Date.now() > 120_000 ? p.t : null;
+    } catch {
+      return null;
+    }
+  }
+
+  savePass(t, ttl) {
+    try {
+      if (typeof t === "string" && Number.isFinite(ttl)) sessionStorage.setItem(this.passKey, JSON.stringify({ t, until: Date.now() + ttl }));
+    } catch {
+      // no storage: the next upload runs the check again
+    }
+  }
+
+  clearPass() {
+    try {
+      sessionStorage.removeItem(this.passKey);
+    } catch {
+      // ignore
+    }
+  }
+
+  // ------------------------------------------------------------------ file and plan
+
+  /** Header facts of a chosen file, or a DemoError to show. */
+  async inspect(file) {
+    if (file.size > MAX_FILE_BYTES) throw new DemoError("too_large");
+    let info = null;
+    try {
+      info = await readImageInfo(file);
+    } catch {
+      info = null;
+    }
+    if (!info) throw new DemoError(/hei[cf]|avif|gif/i.test(file.type + file.name) ? "unsupported" : "unreadable");
+    if (info.animated) throw new DemoError("animated");
+    if (info.width * info.height > MAX_SOURCE_PIXELS) throw new DemoError("huge");
+    return info;
+  }
+
+  async quote(width, height, factor) {
+    const plan = await api(
+      "/quote",
+      { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ width, height, factor }) },
+      20_000,
+    );
+    return { ...plan, factor, source: { width, height } };
+  }
+
+  // ------------------------------------------------------------------ run
+
+  /**
+   * Prepare the upload exactly as sent (PNG, or JPEG when the PNG is over the upload limit) and start the run. When
+   * the browser can only prepare a smaller image than quoted, nothing is sent: the smaller size is quoted and thrown
+   * as DemoError("reduced", { plan, from, file }) for the visitor to confirm with the next start (which reuses it).
+   */
+  async start(file, plan) {
+    if (this.busy) throw new DemoError("busy");
+    this.busy = true;
+    let prepared;
+    try {
+      this.onPhase("preparing", {});
+      const kept = this.prepared;
+      this.prepared = null;
+      prepared = kept && kept.file === file && kept.w === plan.in_w && kept.h === plan.in_h ? kept : await normalize(file, plan);
+      const { width: w, height: h } = prepared.canvas;
+      if (w !== plan.in_w || h !== plan.in_h) {
+        const smaller = await this.quote(w, h, plan.factor);
+        if (smaller.in_w === w && smaller.in_h === h) this.prepared = { file, w, h, blob: prepared.blob, canvas: prepared.canvas };
+        throw new DemoError("reduced", { plan: { ...smaller, source: plan.source, resized: true, browserLimited: true }, from: plan, file });
+      }
+    } catch (err) {
+      this.busy = false;
+      throw err instanceof DemoError ? err : new DemoError("unreadable");
+    }
+    this.forget();
+    this.active = {
+      requestId: randomHex(),
+      factor: plan.factor,
+      in_w: prepared.canvas.width,
+      in_h: prepared.canvas.height,
+      blob: prepared.blob,
+      beforeUrl: URL.createObjectURL(prepared.blob),
+      canvas: prepared.canvas,
+      op: null,
+      at: Date.now(),
+    };
+    this.save();
+    this.busy = false;
+    return this.continue(true);
+  }
+
+  /** Resume a saved run after a reload; null when there is nothing to resume. */
+  async resume() {
+    let saved = null;
+    try {
+      saved = JSON.parse(sessionStorage.getItem(this.sessionKey) ?? "null");
+    } catch {
+      saved = null;
+    }
+    if (!saved?.requestId || !/^[0-9a-f]{32}$/.test(saved.requestId) || Date.now() - saved.at > 24 * 3600_000) return null;
+    this.active = {
+      requestId: saved.requestId,
+      factor: saved.factor,
+      in_w: saved.in_w,
+      in_h: saved.in_h,
+      blob: null,
+      beforeUrl: null,
+      canvas: null,
+      op: saved.op ? { op: saved.op, status: "queued" } : null,
+      at: saved.at,
+    };
+    return this.continue();
+  }
+
+  /** Drop an upload kept from a reduced preparation (another photo was chosen). */
+  dropPrepared() {
+    this.prepared = null;
+  }
+
+  hasSaved() {
+    try {
+      return !!sessionStorage.getItem(this.sessionKey);
+    } catch {
+      return false;
+    }
+  }
+
+  /**
+   * Upload (if needed), wait and load the result: { op, beforeUrl, afterUrl, canvas }. Throws DemoError. The run is
+   * kept (also across a reload) until the page reports it shown with shown(), so a failed display can load it again.
+   */
+  async continue(fresh = false) {
+    const a = this.active;
+    if (!a) throw new DemoError("unconfirmed");
+    if (this.busy) throw new DemoError("busy");
+    this.busy = true;
+    try {
+      if (!a.op && !fresh) {
+        try {
+          a.op = await api(`/requests/${a.requestId}`, {}, 20_000);
+        } catch (err) {
+          if (err.kind !== "not_found") throw err;
+        }
+      }
+      if (!a.op && !a.blob) {
+        this.forget();
+        throw new DemoError("unconfirmed");
+      }
+      if (a.op?.status === "unknown" && !this.canResend(a)) throw new DemoError("unconfirmed");
+      if (!a.op || a.op.status === "unknown") {
+        this.onPhase("uploading", {});
+        const token = a.op || this.currentPass() ? "" : await this.turnstileToken();
+        a.op = await this.submit(a, token);
+        this.save();
+      }
+      a.op = await this.follow(a);
+      this.save();
+      this.onPhase("loading", {});
+      const afterUrl = await loadResult(a.op.result);
+      return { op: a.op, beforeUrl: a.beforeUrl, afterUrl, canvas: a.canvas };
+    } catch (err) {
+      const e = err instanceof DemoError ? err : new DemoError("server");
+      if (e.op && !a.op) a.op = { op: e.op, status: "unknown" };
+      // A refusal without an operation id means nothing was created: no resume, a retry is a fresh attempt.
+      const settled =
+        ["failed", "stale", "expired", "not_found", "unconfirmed"].includes(e.kind) ||
+        (["content", "check_unavailable"].includes(e.kind) && !e.op);
+      const refusedBeforeCreation = !a.op && !e.op && !RESUMABLE.has(e.kind) && e.kind !== "download";
+      if (settled || refusedBeforeCreation) this.forget();
+      if (e.kind === "login" && this.config?.me) this.config.me = { logged_in: false, left: 0, retry_at: null };
+      if (["daily", "hourly", "budget", "spend_limit"].includes(e.kind)) {
+        this.limitedUntil = e.retry_at ?? Date.now() + 3600_000;
+        this.watchQuota();
+      }
+      throw e;
+    } finally {
+      this.busy = false;
+    }
+  }
+
+  /**
+   * The page has shown the result of `done`: the run is over. Counts it once against the shown allowance (only a run
+   * started in this tab; after a reload the allowance read at start already includes it), then re-reads it.
+   */
+  shown(done) {
+    const a = this.active;
+    if (!a || a.op?.op !== done.op.op) return;
+    const me = this.config?.me;
+    if (a.beforeUrl && me) me.left = Math.max(0, me.left - 1);
+    this.active = null; // its before image now belongs to the page
+    try {
+      sessionStorage.removeItem(this.sessionKey);
+    } catch {
+      // ignore
+    }
+    this.refresh().then(() => this.onQuota());
+  }
+
+  canResend(a) {
+    return !!a.blob && (!a.op?.recoverable_until || Date.now() < a.op.recoverable_until);
+  }
+
+  async submit(a, token) {
+    let lastErr = null;
+    for (let attempt = 0; attempt < 3; attempt++) {
+      const headers = { "Content-Type": a.blob.type || "image/png", "X-Factor": String(a.factor), "X-Request-Id": a.requestId, ...this.hfHeaders() };
+      const pass = token ? null : this.currentPass();
+      if (token) headers["X-Turnstile"] = token;
+      else if (pass) headers["X-Pass"] = pass;
+      try {
+        const op = await api("/ops", { method: "POST", headers, body: a.blob }, 120_000);
+        if (op?.pass) this.savePass(op.pass, op.pass_ttl_ms);
+        return op;
+      } catch (err) {
+        lastErr = err;
+        if (err.kind === "challenge" && attempt === 0 && this.turnstile.ready) {
+          this.clearPass(); // an expired or refused pass: run the check after all
+          token = await this.turnstileToken();
+          continue;
+        }
+        const unclear = err.kind === "network" || (err.kind === "server" && err.op);
+        if (!unclear) throw err;
+        await sleep(2000 * (attempt + 1));
+      }
+    }
+    throw lastErr ?? new DemoError("server");
+  }
+
+  async follow(a) {
+    const started = Date.now();
+    let backoff = 3000;
+    let op = a.op;
+    while (true) {
+      if (op.status === "completed") return op;
+      if (op.status === "failed") throw new DemoError("failed");
+      if (op.status === "stale") throw new DemoError("stale");
+      if (Date.now() - started > JOB_DEADLINE_MS) throw new DemoError("timeout");
+      if (op.status === "unknown") {
+        if (!this.canResend(a)) throw new DemoError("unconfirmed");
+        await sleep(backoff);
+        backoff = Math.min(backoff * 2, 20_000);
+        op = await this.submit(a, "");
+        a.op = op;
+        continue;
+      }
+      const running = op.status === "running";
+      this.onPhase(running ? "running" : "queued", {
+        at: a.at,
+        eta: op.eta ?? null,
+        cold: !running && Date.now() - a.at > 20_000,
+      });
+      const t0 = Date.now();
+      try {
+        op = await api(`/ops/${op.op}`, {}, 45_000);
+        a.op = op;
+        backoff = 3000;
+        const spent = Date.now() - t0;
+        if (spent < MIN_POLL_MS && op.status !== "completed") await sleep(MIN_POLL_MS - spent);
+      } catch (err) {
+        if (["expired", "not_found"].includes(err.kind)) throw err;
+        await sleep(err.kind === "slow_down" ? 10_000 : backoff);
+        backoff = Math.min(backoff * 2, 20_000);
+      }
+    }
+  }
+
+  save() {
+    const a = this.active;
+    if (!a) return;
+    try {
+      sessionStorage.setItem(
+        this.sessionKey,
+        JSON.stringify({ requestId: a.requestId, op: a.op?.op ?? null, factor: a.factor, in_w: a.in_w, in_h: a.in_h, at: a.at }),
+      );
+    } catch {
+      // ignore
+    }
+  }
+
+  forget() {
+    if (this.active?.beforeUrl) URL.revokeObjectURL(this.active.beforeUrl);
+    this.active = null;
+    try {
+      sessionStorage.removeItem(this.sessionKey);
+    } catch {
+      // ignore
+    }
+  }
+}
+
+// ---------------------------------------------------------------------- upload preparation
+
+async function normalize(file, plan) {
+  const { in_w: w, in_h: h } = plan;
+  try {
+    return await encodeUpload(file, w, h);
+  } catch (err) {
+    if (w * h <= CANVAS_MAX_PIXELS || (err instanceof DemoError && err.kind === "too_big_for_demo")) throw err;
+  }
+  const k = Math.sqrt(CANVAS_MAX_PIXELS / (w * h));
+  return encodeUpload(file, Math.max(1, Math.floor(w * k)), Math.max(1, Math.floor(h * k)));
+}
+
+// PNG, as the site sends; a photo whose PNG is over the upload limit goes as a high-quality JPEG instead.
+async function encodeUpload(file, w, h) {
+  let source;
+  try {
+    source = await createImageBitmap(file, { imageOrientation: "from-image", resizeWidth: w, resizeHeight: h, resizeQuality: "high" });
+  } catch {
+    throw new DemoError("unreadable");
+  }
+  const canvas = document.createElement("canvas");
+  canvas.width = w;
+  canvas.height = h;
+  const ctx = canvas.getContext("2d", { alpha: false, colorSpace: "srgb" });
+  if (!ctx) throw new DemoError("unreadable");
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, w, h);
+  ctx.drawImage(source, 0, 0, w, h);
+  source.close();
+  let blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/png"));
+  if (!blob || blob.type !== "image/png") throw new DemoError("unreadable");
+  if (blob.size > MAX_UPLOAD_BYTES) {
+    blob = await new Promise((resolve) => canvas.toBlob(resolve, "image/jpeg", 0.97));
+    if (!blob || blob.type !== "image/jpeg") throw new DemoError("unreadable");
+  }
+  if (blob.size > MAX_UPLOAD_BYTES) throw new DemoError("too_big_for_demo");
+  return { blob, canvas };
+}
+
+async function loadResult(path) {
+  let resp;
+  try {
+    // The full-size JPEG (~20 MB at 16K); the demo API sends the PNG instead when there is no JPEG for this run.
+    const url = API + path + (path.includes("?") ? "&" : "?") + "format=jpeg";
+    resp = await fetch(url, { signal: AbortSignal.timeout(30 * 60_000) }); // a full-size PNG can be hundreds of MB
+  } catch {
+    throw new DemoError("download");
+  }
+  const type = resp.headers.get("Content-Type");
+  if (!resp.ok || (type !== "image/png" && type !== "image/jpeg")) throw new DemoError("download");
+  try {
+    return URL.createObjectURL(await resp.blob());
+  } catch {
+    throw new DemoError("download");
+  }
+}
+
+/** A small preview of a chosen file (object URL), or null. */
+export async function thumbnail(file, info, edge = 160) {
+  try {
+    const k = Math.min(1, edge / Math.max(info.width, info.height));
+    const bmp = await createImageBitmap(file, {
+      imageOrientation: "from-image",
+      resizeQuality: "medium",
+      resizeWidth: Math.max(1, Math.round(info.width * k)),
+      resizeHeight: Math.max(1, Math.round(info.height * k)),
+    });
+    const c = document.createElement("canvas");
+    c.width = bmp.width;
+    c.height = bmp.height;
+    c.getContext("2d").drawImage(bmp, 0, 0);
+    bmp.close();
+    const blob = await new Promise((r) => c.toBlob(r, "image/jpeg", 0.85));
+    return blob ? URL.createObjectURL(blob) : null;
+  } catch {
+    return null;
+  }
+}
+
+// ---------------------------------------------------------------------- copy
+
+/**
+ * Title and note for an error. `t`: { verb: "enhance", runs: "enhancements", site: (content) => url, inHub: bool }.
+ * Returns [title, noteHtml].
+ */
+export function errorCopy(err, demo, t) {
+  const link = (content, text = "megapotato.app") => `<a href="${demo.site("/tool", content)}" target="_blank" rel="noopener">${text}</a>`;
+  const perDay = `${demo.config?.jobs_per_day ?? 2}${NBSP}${t.runs}`;
+  const loginHint =
+    window.self !== window.top
+      ? `Log in to Hugging Face (top right) for ${perDay} a day.`
+      : `Open this demo on <a href="${t.spaceUrl}" target="_blank" rel="noopener">Hugging Face</a> and log in for ${perDay} a day.`;
+  const more = `Want more? ${link("limit", "Sign up on megapotato.app")} for downloads and full access.`;
+  const still = "You can still explore the examples.";
+  const table = {
+    network: ["Could not reach the service.", "Check your connection, then press Resume."],
+    server: ["The service had a hiccup.", "Press Resume: the same upload is picked up, not charged again."],
+    download: ["The result could not be loaded.", "Press Load again."],
+    auth: ["The live demo is paused right now.", still],
+    credits: ["The live demo is paused right now.", still],
+    spend_limit: ["The live demo is paused right now.", still],
+    budget: ["The live demo is paused right now.", still],
+    login: [`Log in to Hugging Face to ${t.verb} your own photo.`, `${loginHint} ${still}`],
+    content: [
+      "This image can't be processed.",
+      "Our automated review found that it may not meet our content rules. If you believe this is a mistake, contact support@megapotato.app.",
+    ],
+    check_unavailable: ["We can't accept images right now.", "Please try again in a minute."],
+    hourly: ["You've used today's free runs here.", `Another run becomes available ${untilText(err.retry_at)}. ${more}`],
+    daily: ["You've used today's free runs here.", `Another run becomes available ${untilText(err.retry_at)}. ${more}`],
+    busy: ["Your previous run is still going.", "Wait for it to finish, then start the next one."],
+    crowded: ["The demo is busy right now.", "Please try again in a minute."],
+    rate_limit: ["The demo is busy right now.", "Please try again in a minute."],
+    slow_down: ["Too many requests in a short time.", "Please wait a moment and try again."],
+    challenge: [
+      "Cloudflare's quick human check didn't pass.",
+      "This usually happens with an ad or privacy blocker, or a VPN. Allow challenges.cloudflare.com, turn the VPN off or try another browser, then try again.",
+    ],
+    turnstile: [
+      "Cloudflare's quick human check couldn't load.",
+      "An ad or privacy blocker may be blocking challenges.cloudflare.com. Allow it, turn the VPN off or try another browser, then reload.",
+    ],
+    too_small: ["This image is too small.", "Please use an image at least 16 pixels on each side."],
+    too_big_for_demo: ["This image is too large to process here.", `Upload the original file on ${link("too-big")}.`],
+    too_large: ["This file is too large.", "Please use an image under 50 MB."],
+    unsupported: ["This file type is not supported here.", "Use a PNG, JPEG or WebP image."],
+    unreadable: ["This file could not be read as an image.", "Use a PNG, JPEG or WebP image."],
+    animated: ["Animated images are not supported.", "Export a single frame as PNG or JPEG and try again."],
+    huge: ["This image is too large to open in the browser.", "Please use an image under 60 megapixels."],
+    failed: ["That run did not succeed.", "Nothing was charged. Please try again, or try another image."],
+    stale: ["This is taking much longer than usual.", "Please try again later."],
+    timeout: ["This is taking longer than usual.", "The job keeps running. Press Resume to check again."],
+    unconfirmed: ["That upload could not be confirmed.", "Nothing more will happen with it. Please start again."],
+    expired: ["This result has expired.", "Results stay available here for about an hour after the upload."],
+    not_found: ["This result is no longer available.", "Results stay available here for about an hour after the upload."],
+    invalid: ["The image could not be processed.", "Try another image."],
+    reduced: [
+      "This browser can't prepare the image at full size.",
+      err.plan
+        ? `It would go at ${dims(err.plan.in_w, err.plan.in_h)}, for an output of ${dims(err.plan.out_w, err.plan.out_h)}. Press the button again to continue.`
+        : "Press the button again to continue at a smaller size.",
+    ],
+  };
+  return table[err.kind] ?? table.server;
+}

examples/examples.json

@@ -0,0 +1,102 @@
+[
+  {
+    "id": "street_stall",
+    "title": "Street stall, 1970s",
+    "caption": "Phone photo at night",
+    "factor": 1,
+    "input": "examples/street_stall.png",
+    "result": "examples/street_stall_x1.png",
+    "thumb": "examples/thumbs/street_stall.webp",
+    "in": [
+      1500,
+      1018
+    ],
+    "out": [
+      1500,
+      1018
+    ],
+    "credit": "Memorial Day at Battery Park, Lower Manhattan, by Wil Blanche (Documerica, U.S. National Archives), Wikimedia Commons. Reduced to 1 500 × 1 018. The demo input was damaged on purpose to show what the enhancer restores: simulated low-light sensor noise and JPEG.",
+    "source": "https://commons.wikimedia.org/wiki/File:PEOPLE_ENJOYING_MEMORIAL_DAY_HOLIDAY_AT_BATTERY_PARK_IN_LOWER_MANHATTAN_-_NARA_-_549315.jpg",
+    "licence": "Public domain (U.S. federal government work)."
+  },
+  {
+    "id": "visitors_1930s",
+    "title": "Visitors, 1930s",
+    "caption": "Sent through a messenger",
+    "factor": 1,
+    "input": "examples/visitors_1930s.png",
+    "result": "examples/visitors_1930s_x1.png",
+    "thumb": "examples/thumbs/visitors_1930s.webp",
+    "in": [
+      1162,
+      1500
+    ],
+    "out": [
+      1162,
+      1500
+    ],
+    "credit": "Albert Sarraut leaving the White House, Harris & Ewing (Library of Congress), Wikimedia Commons. Reduced to 1 162 × 1 500. The demo input was damaged on purpose to show what the enhancer restores: shrunk and re-saved as a low-quality JPEG three times, then enlarged back.",
+    "source": "https://commons.wikimedia.org/wiki/File:France%27s_ex-prime_minister_visits_President_Roosevelt,_Washington,_D.C.,_September_8._Albert_Sarraut,_former_Prime_Minister_of_France_%3F_leaving_the_White_House_after_having_paid_a_visit_to_LCCN2016878422.tif",
+    "licence": "No known restrictions on publication (Library of Congress)."
+  },
+  {
+    "id": "washington_1910s",
+    "title": "Washington, 1910s",
+    "caption": "Old digital camera",
+    "factor": 1,
+    "input": "examples/washington_1910s.png",
+    "result": "examples/washington_1910s_x1.png",
+    "thumb": "examples/thumbs/washington_1910s.webp",
+    "in": [
+      1120,
+      1500
+    ],
+    "out": [
+      1120,
+      1500
+    ],
+    "credit": "Roger W. Babson with Secretary of Labor W. B. Wilson, Harris & Ewing (Library of Congress), Wikimedia Commons. Reduced to 1 120 × 1 500. The demo input was damaged on purpose to show what the enhancer restores: simulated soft lens, blotchy colour noise and JPEG.",
+    "source": "https://commons.wikimedia.org/wiki/File:BABSON,_ROGER_W._OF_LABOR_DEPARTMENT._LEFT,_WITH_SEC._W.B._WILSON_LCCN2016869781.jpg",
+    "licence": "No known restrictions on publication (Library of Congress)."
+  },
+  {
+    "id": "fairground_1941",
+    "title": "Fairground, 1941",
+    "caption": "Phone photo at dusk",
+    "factor": 1,
+    "input": "examples/fairground_1941.png",
+    "result": "examples/fairground_1941_x1.png",
+    "thumb": "examples/thumbs/fairground_1941.webp",
+    "in": [
+      1600,
+      1051
+    ],
+    "out": [
+      1600,
+      1051
+    ],
+    "credit": "At the Vermont State Fair, Rutland, by Jack Delano (FSA/OWI, Library of Congress), Wikimedia Commons. Reduced to 1 600 × 1 051. The demo input was damaged on purpose to show what the enhancer restores: simulated low-light sensor noise and JPEG.",
+    "source": "https://commons.wikimedia.org/wiki/File:At_the_Vermont_State_Fair,_Rutland_(LOC_fsac.1a33910).jpg",
+    "licence": "Public domain (U.S. federal government work)."
+  },
+  {
+    "id": "waiting_room",
+    "title": "Waiting room, 1970s",
+    "caption": "Small, shared copy",
+    "factor": 2,
+    "input": "examples/waiting_room.png",
+    "result": "examples/waiting_room_x2.png",
+    "thumb": "examples/thumbs/waiting_room.webp",
+    "in": [
+      625,
+      422
+    ],
+    "out": [
+      1250,
+      844
+    ],
+    "credit": "People waiting for a Black Lung Association meeting, Beckley, West Virginia, by Jack Corn (Documerica, U.S. National Archives), Wikimedia Commons. The demo input was damaged on purpose to show what the enhancer restores: shrunk to 625 px, blurred, with noise, saved as a JPEG twice.",
+    "source": "https://commons.wikimedia.org/wiki/File:PICTURE_OF_PEOPLE_SEATED_AND_WAITING_FOR_THE_BECKLEY_(WEST_VIRGINIA)_BLACK_LUNG_ASSOCIATION_MEETING_TO_BEGIN._THIS..._-_NARA_-_556450.jpg",
+    "licence": "Public domain (U.S. federal government work)."
+  }
+]

imageinfo.js

@@ -0,0 +1,90 @@
+// Image size from the file header, without decoding: PNG, JPEG (with EXIF orientation) and WebP.
+// Anything else (GIF, BMP, HEIC, AVIF, …) returns null and is refused before any decoding.
+// Returns { width, height, format, rotated } with width/height as displayed (after EXIF rotation), or null.
+
+const HEAD_BYTES = 512 * 1024;
+
+export async function readImageInfo(file) {
+  const buf = new Uint8Array(await file.slice(0, HEAD_BYTES).arrayBuffer());
+  return png(buf) ?? jpeg(buf) ?? webp(buf);
+}
+
+const u16be = (b, i) => (b[i] << 8) | b[i + 1];
+const u16le = (b, i) => b[i] | (b[i + 1] << 8);
+const u32be = (b, i) => ((b[i] << 24) | (b[i + 1] << 16) | (b[i + 2] << 8) | b[i + 3]) >>> 0;
+const u32le = (b, i) => (b[i] | (b[i + 1] << 8) | (b[i + 2] << 16) | (b[i + 3] << 24)) >>> 0;
+const ascii = (b, i, n) => String.fromCharCode(...b.subarray(i, i + n));
+
+function result(width, height, format, orientation = 1) {
+  if (!width || !height) return null;
+  const rotated = orientation >= 5 && orientation <= 8;
+  return { width: rotated ? height : width, height: rotated ? width : height, format, rotated };
+}
+
+function png(b) {
+  if (b.length < 24 || u32be(b, 0) !== 0x89504e47 || ascii(b, 12, 4) !== "IHDR") return null;
+  let at = 8;
+  while (at + 8 <= b.length) {
+    const len = u32be(b, at);
+    const type = ascii(b, at + 4, 4);
+    if (type === "acTL") return { ...result(u32be(b, 16), u32be(b, 20), "png"), animated: true };
+    if (type === "IDAT") return result(u32be(b, 16), u32be(b, 20), "png");
+    at += 12 + len;
+  }
+  return null;
+}
+
+function exifOrientation(b, start, len) {
+  if (ascii(b, start, 4) !== "Exif") return 1;
+  const tiff = start + 6;
+  if (tiff + 8 > b.length) return 1;
+  const little = ascii(b, tiff, 2) === "II";
+  const r16 = (i) => (little ? u16le(b, i) : u16be(b, i));
+  const r32 = (i) => (little ? u32le(b, i) : u32be(b, i));
+  const ifd = tiff + r32(tiff + 4);
+  if (ifd + 2 > Math.min(b.length, start + len)) return 1;
+  const count = r16(ifd);
+  for (let k = 0; k < count; k++) {
+    const e = ifd + 2 + k * 12;
+    if (e + 12 > b.length) break;
+    if (r16(e) === 0x0112) return r16(e + 8) || 1;
+  }
+  return 1;
+}
+
+function jpeg(b) {
+  if (b.length < 4 || b[0] !== 0xff || b[1] !== 0xd8) return null;
+  let at = 2;
+  let orientation = 1;
+  while (at + 4 <= b.length) {
+    if (b[at] !== 0xff) return null;
+    const marker = b[at + 1];
+    if (marker === 0xd8 || (marker >= 0xd0 && marker <= 0xd7) || marker === 0x01) {
+      at += 2;
+      continue;
+    }
+    const len = u16be(b, at + 2);
+    if (marker === 0xe1) orientation = exifOrientation(b, at + 4, len - 2);
+    const isSof = marker >= 0xc0 && marker <= 0xcf && marker !== 0xc4 && marker !== 0xc8 && marker !== 0xcc;
+    if (isSof && at + 9 <= b.length) return result(u16be(b, at + 7), u16be(b, at + 5), "jpeg", orientation);
+    at += 2 + len;
+  }
+  return null;
+}
+
+function webp(b) {
+  if (b.length < 30 || ascii(b, 0, 4) !== "RIFF" || ascii(b, 8, 4) !== "WEBP") return null;
+  const kind = ascii(b, 12, 4);
+  if (kind === "VP8 ") return result(u16le(b, 26) & 0x3fff, u16le(b, 28) & 0x3fff, "webp");
+  if (kind === "VP8L") {
+    const bits = u32le(b, 21);
+    return result((bits & 0x3fff) + 1, ((bits >> 14) & 0x3fff) + 1, "webp");
+  }
+  if (kind === "VP8X") {
+    const animated = (b[20] & 0x02) !== 0;
+    const w = 1 + (b[24] | (b[25] << 8) | (b[26] << 16));
+    const h = 1 + (b[27] | (b[28] << 8) | (b[29] << 16));
+    return { ...result(w, h, "webp"), animated };
+  }
+  return null;
+}

index.html

@@ -1,19 +1,120 @@
 <!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>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Photo Enhancer: clean up noisy, soft and compressed photos · MegaPotato AI upscaler (megapotato.app)</title>
+  <meta name="description" content="Photo enhancer demo of the MegaPotato AI upscaler (megapotato.app). Restore detail in noisy, soft or compressed photos at the original size or 2× larger, and compare before and after side by side.">
+  <meta name="referrer" content="strict-origin">
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://challenges.cloudflare.com; frame-src https://challenges.cloudflare.com; connect-src 'self' https://demo-api.megapotato.app; img-src 'self' data: blob: https://demo-api.megapotato.app https://*.hf.co https://*.huggingface.co; style-src 'self' 'unsafe-inline'; font-src 'self' https://*.hf.co; base-uri 'none'; form-action 'none'; object-src 'none'">
+  <meta name="color-scheme" content="light dark">
+  <meta property="og:title" content="Photo Enhancer · MegaPotato AI upscaler (megapotato.app)">
+  <meta property="og:description" content="Restore detail in noisy, soft or compressed photos. Same size, or 2× larger.">
+  <link rel="preload" href="assets/fonts/mp-sans-regular.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="preload" href="assets/fonts/mp-sans-bold.woff2" as="font" type="font/woff2" crossorigin>
+  <script src="theme.js"></script>
+  <link rel="stylesheet" href="style.css">
+  <script type="module" src="ui.js"></script>
+</head>
+<body>
+<div class="page">
+
+  <header class="masthead">
+    <div class="masthead-row">
+      <h1>Photo Enhancer</h1>
+      <a class="site" href="https://megapotato.app/?s=hf-photo-enhancer" target="_blank" rel="noopener">megapotato.app<span class="arrow" aria-hidden="true">↗</span></a>
+    </div>
+    <p class="lead">Restores detail in noisy, soft or compressed photos. Same size, or 2× larger. It works with what is in the photo instead of drawing new faces or text.</p>
+    <p class="proof">In <a href="https://megapotato.app/blog/best-ai-image-upscalers-2026?s=hf-photo-enhancer#scoreboard" target="_blank" rel="noopener">our blind test of 18 AI upscalers</a> it turned none of 67 faces into a different person. Creative upscalers changed up to three in four.</p>
+    <p class="brand">A demo of the <a href="https://megapotato.app/?s=hf-photo-enhancer" target="_blank" rel="noopener">MegaPotato AI upscaler</a> · megapotato.app</p>
+  </header>
+
+  <div id="notice" class="notice" role="status" hidden></div>
+
+  <section class="bench" aria-label="Enhance your photo">
+    <div class="bench-row">
+      <div class="pick">
+        <label id="drop" class="pick-button">
+          <input id="file" type="file" accept="image/png,image/jpeg,image/webp">
+          <span id="file-label">Choose photo</span>
+        </label>
+        <span class="pick-meta">
+          <img id="drop-thumb" class="pick-thumb" alt="" hidden>
+          <span id="file-meta" class="pick-text"><span class="note-mouse">or drop it anywhere on the page · </span>PNG, JPEG, WebP up to 50 MB</span>
+        </span>
+      </div>
+
+      <fieldset class="seg" aria-label="Output size">
+        <label class="seg-option"><input type="radio" name="mode" value="1" checked><span>Original size</span></label>
+        <label class="seg-option"><input type="radio" name="mode" value="2"><span>2×</span></label>
+      </fieldset>
+
+      <button id="run" class="primary run" type="button" disabled>Enhance</button>
+
+      <p id="quota" class="quota">Preview only · 2 free runs a day</p>
+    </div>
+
+    <div class="bench-line">
+      <p id="plan" class="plan"></p>
+      <div id="status" class="status" aria-live="polite" hidden></div>
+    </div>
+    <div id="turnstile" class="turnstile"></div>
+  </section>
+
+  <section id="viewer-wrap" class="viewer" data-inspect="false" aria-label="Before and after">
+    <div class="viewer-head">
+      <span id="before-label" class="label-before">Before</span>
+      <div class="label-after">
+        <span>After</span>
+        <div class="zoom" role="group" aria-label="Zoom">
+          <button type="button" data-zoom="fit" aria-pressed="true">Fit</button>
+          <button type="button" data-zoom="1" aria-pressed="false">100%</button>
+          <button type="button" data-zoom="2" aria-pressed="false">200%</button>
+          <button id="inspect" class="inspect" type="button" aria-pressed="false">Inspect</button>
+        </div>
+      </div>
+    </div>
+
+    <div id="viewer" class="diptych">
+      <figure class="pane" data-side="before">
+        <div class="pane-frame"><img alt="Before" draggable="false"><p class="pane-empty" hidden>The original is not kept after a reload.</p></div>
+      </figure>
+      <figure class="pane" data-side="after">
+        <div class="pane-frame"><img alt="After" draggable="false"></div>
+      </figure>
+      <div class="loading" hidden><span></span></div>
+    </div>
+
+    <div class="viewer-foot">
+      <p id="caption" class="caption"></p>
+      <p class="hint"><span class="note-mouse">Drag either frame to look around. Ctrl + scroll zooms, double-click shows 100%.</span><span class="note-touch">Tap Inspect to pan and pinch both frames together.</span></p>
+    </div>
+  </section>
+
+  <section class="gallery" aria-label="Examples">
+    <p class="gallery-head">Examples, real results</p>
+    <ul id="examples" class="examples"></ul>
+  </section>
+
+  <footer class="colophon">
+    <nav class="colophon-links" aria-label="More">
+      <a href="https://megapotato.app/developers?s=hf-photo-enhancer" target="_blank" rel="noopener">API</a>
+      <a href="https://megapotato.app/blog/best-ai-image-upscalers-2026?s=hf-photo-enhancer" target="_blank" rel="noopener">Benchmark</a>
+      <a href="https://megapotato.app/pricing?s=hf-photo-enhancer" target="_blank" rel="noopener">Pricing</a>
+    </nav>
+    <details id="about" class="about">
+      <summary>About this demo, your images and privacy</summary>
+      <div class="about-body">
+        <p>A free demo of the <a href="https://megapotato.app/?s=hf-photo-enhancer" target="_blank" rel="noopener">MegaPotato AI upscaler</a>. Your image goes to the MegaPotato API, is processed on MegaPotato's GPUs and comes back to this page. The model weights are not published. Through the API the same model enhances at the original size (<code>upscale=1</code>) or enlarges ×2, ×4 and ×8.</p>
+        <h2 id="privacy">Your images and privacy</h2>
+        <p>Images you enhance are sent through a small MegaPotato service on Cloudflare to the MegaPotato API and handled under its <a href="https://megapotato.app/privacy" target="_blank" rel="noopener">Privacy Policy</a> and <a href="https://megapotato.app/terms" target="_blank" rel="noopener">Terms</a>. Every image is reviewed automatically before processing, and images that may not meet our content rules are refused. The original is deleted once the run finishes and the result about an hour after the upload. The demo asks the Hugging Face page only whether you are logged in (not who you are) and counts runs per network address, stored only as a keyed hash; Cloudflare processes it to run the service and the Turnstile check that helps limit automated abuse. Results open only inside this demo page. Please upload only images you have the right to use.</p>
+        <h2>Example images</h2>
+        <ul id="credits" class="credits"></ul>
+        <p>Demo code: MIT license. Font: MP Sans, a subset of Liberation Sans (SIL Open Font License, <a href="assets/fonts/OFL.txt">text</a>).</p>
+      </div>
+    </details>
+  </footer>
+</div>
+<div id="dropzone" class="dropzone" aria-hidden="true"><span>Drop the photo to enhance it</span></div>
+</body>
 </html>

style.css

@@ -1,28 +1,807 @@
+@font-face {
+  font-family: "MP Sans";
+  font-weight: 400;
+  font-display: swap;
+  src: url(assets/fonts/mp-sans-regular.woff2) format("woff2");
+}
+@font-face {
+  font-family: "MP Sans";
+  font-weight: 700;
+  font-display: swap;
+  src: url(assets/fonts/mp-sans-bold.woff2) format("woff2");
+}
+
+/* A gallery wall: white paper, warm ink, the photographs carry all the colour. One typeface, two sizes that matter. */
+:root {
+  --paper: #ffffff;
+  --ink: #171511;
+  --ink-2: #625c53;
+  --ink-3: #9d968b;
+  --ink-hint: #716a61; /* small text: >= 4.5:1 on paper, well and hover */
+  --line: #e4e0d9;
+  --line-strong: #c9c3ba;
+  --well: #f1efea;
+  --hover: #f6f4f0;
+  --focus: #171511;
+  --error: #b5361f;
+  --ui: "MP Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  color-scheme: light;
+}
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    --paper: #1a1917;
+    --ink: #f1ede6;
+    --ink-2: #a6a097;
+    --ink-3: #6f6a62;
+    --ink-hint: #8f8a81;
+    --line: #2f2d29;
+    --line-strong: #4a4740;
+    --well: #131210;
+    --hover: #232220;
+    --focus: #f1ede6;
+    --error: #ff9a85;
+    color-scheme: dark;
+  }
+}
+:root[data-theme="dark"] {
+  --paper: #1a1917;
+  --ink: #f1ede6;
+  --ink-2: #a6a097;
+  --ink-3: #6f6a62;
+  --ink-hint: #8f8a81;
+  --line: #2f2d29;
+  --line-strong: #4a4740;
+  --well: #131210;
+  --hover: #232220;
+  --focus: #f1ede6;
+  --error: #ff9a85;
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+[hidden] {
+  display: none !important;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+}
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  margin: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font: 400 15px/1.45 var(--ui);
+  font-feature-settings: "kern";
+}
+button,
+input {
+  font: inherit;
+  color: inherit;
+}
+figure,
+fieldset,
+p,
+h1,
+h2,
+ul {
+  margin: 0;
+}
+fieldset {
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+ul {
+  padding: 0;
+  list-style: none;
+}
+a {
+  color: inherit;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  text-decoration-color: var(--line-strong);
+}
+a:hover {
+  text-decoration-color: currentColor;
+}
+button {
+  min-height: 44px;
+  padding: 0 16px;
+  border: 1px solid var(--line-strong);
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+}
+button:hover:not(:disabled) {
+  background: var(--hover);
+  border-color: var(--ink);
+}
+:where(button, a, summary):focus-visible,
+.pick-button:focus-within,
+.seg-option:has(input:focus-visible),
+.example:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 3px;
+}
+.primary {
+  border-color: var(--ink);
+  background: var(--ink);
+  color: var(--paper);
+  font-weight: 700;
+}
+.primary:hover:not(:disabled) {
+  background: var(--ink);
+  color: var(--paper);
+  opacity: 0.86;
+}
+.primary:disabled {
+  background: var(--well);
+  color: var(--ink-3);
+  border-color: var(--well);
+  cursor: default;
+}
+.numeric {
+  font-variant-numeric: lining-nums tabular-nums;
+}
+code {
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* ------------------------------------------------------------------ page */
+
+.page {
+  max-width: 1320px;
+  margin: 0 auto;
+  padding: 36px 40px 28px;
 }
 
+/* ------------------------------------------------------------------ masthead */
+
+.masthead {
+  display: grid;
+  gap: 6px;
+  margin-bottom: 30px;
+}
+.masthead-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 24px;
+  margin-bottom: 8px;
+}
 h1 {
-	font-size: 16px;
-	margin-top: 0;
+  font-size: 60px;
+  line-height: 0.96;
+  font-weight: 700;
+  letter-spacing: -0.035em;
+}
+.site {
+  font-size: 15px;
+  text-decoration: none;
+  white-space: nowrap;
+  color: var(--ink);
+}
+.site .arrow {
+  display: inline-block;
+  margin-left: 0.2em;
+  transition: transform 0.2s;
+}
+.site:hover .arrow {
+  transform: translate(2px, -2px);
+}
+.lead {
+  max-width: 800px;
+  font-size: 19px;
+  line-height: 1.35;
+  letter-spacing: -0.012em;
+}
+.brand {
+  font-size: 14px;
+  color: var(--ink-2);
+}
+.proof {
+  max-width: 800px;
+  font-size: 15px;
+  line-height: 1.45;
+}
+
+.notice {
+  margin-bottom: 16px;
+  padding: 10px 0;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+  font-size: 14px;
+}
+
+/* ------------------------------------------------------------------ bench: one row of controls */
+
+.bench {
+  padding: 16px 0 14px;
+  border-top: 1px solid var(--ink);
+  border-bottom: 1px solid var(--line);
+}
+.bench-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px 28px;
+}
+.pick {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+  flex: 1 1 320px;
+}
+.pick-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 44px;
+  padding: 0 16px;
+  border: 1px solid var(--ink);
+  border-radius: 6px;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 0.15s;
+}
+.pick-button:hover {
+  background: var(--hover);
+}
+.pick-button input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.pick-meta {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  color: var(--ink-2);
+  font-size: 14px;
+}
+.pick-thumb {
+  width: 36px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 3px;
+  flex: none;
+}
+.pick-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.pick-text strong {
+  color: var(--ink);
+  font-weight: 400;
+}
+
+.seg {
+  display: inline-flex;
+  padding: 3px;
+  border: 1px solid var(--line-strong);
+  border-radius: 8px;
+}
+.seg-option {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 0 14px;
+  border-radius: 5px;
+  cursor: pointer;
+  color: var(--ink-2);
+  white-space: nowrap;
+  transition: background-color 0.15s, color 0.15s;
+}
+.seg-option:hover {
+  color: var(--ink);
+}
+.seg-option input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+}
+.seg-option:has(input:checked) {
+  background: var(--ink);
+  color: var(--paper);
+}
+.run {
+  min-width: 128px;
+}
+.quota {
+  margin-left: auto;
+  max-width: 480px;
+  text-align: right;
+  font-size: 13px;
+  line-height: 1.35;
+  color: var(--ink-2);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+.bench-line {
+  display: grid;
+  gap: 8px;
+  justify-items: start;
+}
+.bench-line:has(.plan:not(:empty)),
+.bench-line:has(.status:not([hidden])) {
+  margin-top: 12px;
+}
+.plan {
+  font-size: 14px;
+  color: var(--ink-2);
+  font-variant-numeric: lining-nums tabular-nums;
+}
+.plan:empty {
+  display: none;
+}
+.plan-error {
+  color: var(--error);
+}
+.status {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 16px;
+  font-size: 15px;
+}
+.status[data-state="error"] .status-text strong {
+  color: var(--error);
+}
+.status-text strong {
+  font-weight: 700;
+}
+.status-text .meta {
+  color: var(--ink-2);
+}
+.status .actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.status .actions a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 40px;
+  padding: 0 14px;
+  border: 1px solid var(--ink);
+  border-radius: 6px;
+  text-decoration: none;
+  font-weight: 700;
+}
+.status .actions button {
+  min-height: 40px;
 }
+.spinner {
+  display: inline-block;
+  width: 13px;
+  height: 13px;
+  margin-right: 8px;
+  vertical-align: -1px;
+  border: 2px solid var(--line);
+  border-top-color: var(--ink);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.turnstile:empty {
+  display: none;
+}
+
+/* ------------------------------------------------------------------ viewer */
+
+.viewer {
+  margin-top: 22px;
+}
+.viewer-head {
+  display: grid;
+  grid-template-columns: var(--fw, 1fr) var(--fw, 1fr);
+  justify-content: center;
+  align-items: end;
+  gap: var(--gap, 10px);
+  margin-bottom: 10px;
+  font-size: 14px;
+}
+.label-before {
+  color: var(--ink-2);
+}
+.label-after {
+  display: flex;
+  justify-content: space-between;
+  align-items: end;
+  gap: 16px;
+  font-weight: 700;
+}
+.zoom {
+  display: flex;
+  gap: 2px;
+}
+.zoom button {
+  min-height: 32px;
+  padding: 0 10px;
+  border-color: transparent;
+  font-size: 14px;
+  color: var(--ink-2);
+}
+.zoom button:hover:not(:disabled) {
+  border-color: transparent;
+  color: var(--ink);
+}
+.zoom [aria-pressed="true"] {
+  color: var(--ink);
+  background: var(--well);
+}
+.inspect {
+  display: none;
+  min-height: 32px;
+  margin-left: 6px;
+  border-color: var(--line-strong);
+}
+
+.diptych {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  gap: var(--gap, 10px);
+  user-select: none;
+  -webkit-user-select: none;
+}
+.pane {
+  min-width: 0;
+}
+.pane-frame {
+  position: relative;
+  width: var(--fw, 50%);
+  height: var(--fh, 480px);
+  overflow: hidden;
+  background: var(--well);
+  cursor: grab;
+  touch-action: pan-y pinch-zoom;
+}
+.pane-frame:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.pane-frame.is-dragging {
+  cursor: grabbing;
+}
+.viewer[data-inspect="true"] .pane-frame {
+  touch-action: none;
+}
+.pane-frame img {
+  position: absolute;
+  left: 0;
+  top: 0;
+  max-width: none;
+  max-height: none;
+  transform-origin: 0 0;
+  pointer-events: none;
+}
+.pane-empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  text-align: center;
+  color: var(--ink-2);
+  font-size: 14px;
+}
+.loading {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  pointer-events: none;
+}
+.loading span {
+  width: 26px;
+  height: 26px;
+  border: 2px solid rgba(255, 255, 255, 0.45);
+  border-top-color: var(--ink);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+.viewer-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 4px 24px;
+  margin-top: 12px;
+}
+.caption {
+  font-size: 15px;
+}
+.caption strong {
+  font-weight: 700;
+}
+.caption .meta {
+  color: var(--ink-2);
+  margin-left: 8px;
+}
+.hint {
+  font-size: 13px;
+  color: var(--ink-hint);
+}
+.note-touch {
+  display: none;
+}
+
+/* ------------------------------------------------------------------ gallery: the five examples in one justified row */
+
+.gallery {
+  margin-top: 36px;
+}
+.gallery-head {
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: var(--ink-2);
+}
+.examples {
+  display: flex;
+  gap: 10px;
+}
+.examples li {
+  display: flex;
+  flex: var(--ar) 1 0;
+  min-width: 0;
+}
+.example {
+  display: grid;
+  grid-template-rows: 1fr auto;
+  width: 100%;
+  min-height: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+}
+.example:hover:not(:disabled) {
+  background: transparent;
+}
+.example-image {
+  position: relative;
+  aspect-ratio: var(--ar);
+  overflow: hidden;
+  background: var(--well);
+}
+.example-image img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: opacity 0.2s;
+}
+.example:hover .example-image img {
+  opacity: 0.85;
+}
+.example-image::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  box-shadow: inset 0 0 0 0 var(--ink);
+  transition: box-shadow 0.15s;
+  pointer-events: none;
+}
+.example[aria-pressed="true"] .example-image::after {
+  box-shadow: inset 0 0 0 3px var(--ink);
+}
+.example-text {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding-top: 8px;
+  font-size: 13px;
+  line-height: 1.3;
+  color: var(--ink-2);
+}
+.example[aria-pressed="true"] .example-text {
+  color: var(--ink);
+}
+.example-text span {
+  min-width: 0;
+}
+.example-text small {
+  font-size: 13px;
+  white-space: nowrap;
+  color: var(--ink-hint);
+}
+
+/* ------------------------------------------------------------------ colophon */
+
+.colophon {
+  margin-top: 40px;
+  padding-top: 14px;
+  border-top: 1px solid var(--line);
+  font-size: 14px;
+  color: var(--ink-2);
+}
+.colophon-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  min-height: 32px;
+  align-items: center;
+}
+.about summary {
+  cursor: pointer;
+  padding: 8px 0;
+  list-style: none;
+}
+.about summary::-webkit-details-marker {
+  display: none;
+}
+.about summary::before {
+  content: "+";
+  display: inline-block;
+  width: 16px;
+  font-weight: 700;
+}
+.about[open] summary::before {
+  content: "–";
+}
+.about-body {
+  max-width: 76ch;
+  display: grid;
+  gap: 10px;
+  padding: 4px 0 16px 16px;
+}
+.about-body h2 {
+  margin-top: 8px;
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--ink);
+}
+.credits {
+  display: grid;
+  gap: 4px;
+}
+
+/* ------------------------------------------------------------------ drop anywhere */
+
+.dropzone {
+  position: fixed;
+  inset: 12px;
+  display: none;
+  place-items: center;
+  border: 2px dashed var(--ink);
+  background: color-mix(in srgb, var(--paper) 80%, transparent);
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  z-index: 10;
+  pointer-events: none;
+}
+body[data-dragover="true"] .dropzone {
+  display: grid;
+}
+
+/* ------------------------------------------------------------------ input modes */
+
+@media (hover: none) {
+  .note-mouse {
+    display: none;
+  }
+  .note-touch {
+    display: inline;
+  }
+  .inspect {
+    display: inline-flex;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition: none !important;
+    animation-duration: 0.01ms !important;
+  }
+}
+
+/* ------------------------------------------------------------------ narrow */
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@media (max-width: 1000px) {
+  .quota {
+    margin-left: 0;
+    max-width: none;
+    text-align: left;
+    flex-basis: 100%;
+  }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 720px) {
+  .page {
+    padding: 22px 16px 24px;
+  }
+  .masthead {
+    margin-bottom: 22px;
+  }
+  .masthead-row {
+    flex-wrap: wrap;
+    gap: 8px 16px;
+  }
+  h1 {
+    font-size: 38px;
+  }
+  .lead {
+    font-size: 17px;
+  }
+  .bench-row {
+    gap: 10px;
+  }
+  .pick {
+    flex-basis: 100%;
+    flex-wrap: wrap;
+  }
+  .pick-button {
+    width: 100%;
+    justify-content: center;
+  }
+  .seg {
+    width: 100%;
+  }
+  .seg-option {
+    flex: 1;
+  }
+  .run {
+    width: 100%;
+  }
+  .viewer-head {
+    display: flex;
+    justify-content: flex-end;
+  }
+  .label-before,
+  .label-after > :not(.zoom) {
+    display: none;
+  }
+  .diptych {
+    flex-direction: column;
+    gap: 8px;
+  }
+  .pane {
+    position: relative;
+  }
+  .pane::before {
+    content: attr(data-label);
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 1;
+    padding: 4px 8px;
+    background: var(--paper);
+    font-size: 13px;
+    font-weight: 700;
+  }
+  .pane-frame {
+    width: 100% !important;
+  }
+  .examples {
+    overflow-x: auto;
+    gap: 8px;
+    margin: 0 -16px;
+    padding: 0 16px 4px;
+    scrollbar-width: none;
+  }
+  .examples li {
+    flex: none;
+    width: calc(130px * var(--ar));
+  }
+  .example-text {
+    display: grid;
+    gap: 0;
+  }
 }

theme.js

@@ -0,0 +1,5 @@
+// Apply ?__theme=light|dark (set by Hugging Face) before the stylesheet paints, so the page does not flash.
+(() => {
+  const t = new URLSearchParams(location.search).get("__theme");
+  if (t === "dark" || t === "light") document.documentElement.dataset.theme = t;
+})();

ui.js

@@ -0,0 +1,572 @@
+// Photo Enhancer (MegaPotato): enhance at the original size or 2×, compare two frames side by side.
+
+import { DemoError, Demo, INFO_KINDS, NBSP, dims, errorCopy, escapeHtml, isResumable, thumbnail, usd } from "./core.js";
+
+const SPACE_URL = "https://huggingface.co/spaces/MegaPotatoAI/Photo-Enhancer";
+const COPY = { verb: "enhance", runs: "runs", spaceUrl: SPACE_URL };
+
+const $ = (sel) => document.querySelector(sel);
+const els = {
+  notice: $("#notice"),
+  file: $("#file"),
+  thumb: $("#drop-thumb"),
+  fileLabel: $("#file-label"),
+  fileMeta: $("#file-meta"),
+  plan: $("#plan"),
+  quota: $("#quota"),
+  run: $("#run"),
+  status: $("#status"),
+  caption: $("#caption"),
+  examples: $("#examples"),
+  credits: $("#credits"),
+  beforeLabel: $("#before-label"),
+  emptyNote: $(".pane-empty"),
+  viewerWrap: $("#viewer-wrap"),
+  inspect: $("#inspect"),
+};
+
+// selection: the chosen photo; quote: the plan for it (a new quote never cancels a selection still being read)
+const state = { file: null, info: null, thumbUrl: null, factor: 1, plan: null, selection: 0, quote: 0, view: 0, presenting: false, examples: [], shown: [], tick: null };
+const PICK = { label: els.fileLabel.textContent, meta: els.fileMeta.innerHTML };
+const sizeName = (f) => (f === 1 ? "Original size" : `${f}×`);
+const phone = () => matchMedia("(max-width: 720px)").matches;
+
+// ---------------------------------------------------------------------------- the two frames share one view
+
+class Diptych {
+  constructor(root, wrap) {
+    this.root = root;
+    this.wrap = wrap;
+    this.loading = root.querySelector(".loading");
+    this.panes = [...root.querySelectorAll(".pane-frame")].map((frame) => ({ frame, img: frame.querySelector("img") }));
+    this.W = 0;
+    this.H = 0;
+    this.s = 1;
+    this.x = 0;
+    this.y = 0;
+    this.zoom = "fit";
+    this.token = 0;
+    this.pointers = new Map();
+    this.onZoom = () => {};
+    for (const { frame } of this.panes) this.bind(frame);
+    new ResizeObserver(() => this.W && this.layout()).observe(root);
+    addEventListener("resize", () => this.W && this.layout());
+  }
+
+  frame() {
+    const f = this.panes[0].frame;
+    return { w: f.clientWidth, h: f.clientHeight };
+  }
+
+  fitScale() {
+    const { w, h } = this.frame();
+    return Math.min(w / this.W, h / this.H);
+  }
+
+  /** Frames follow the photo: two frames of its aspect ratio, as large as the row and the window allow. */
+  layout() {
+    const gap = phone() ? 8 : 10;
+    const total = this.root.clientWidth;
+    const maxH = Math.min(Math.max(320, innerHeight * (phone() ? 0.62 : 0.74)), 860);
+    let fw = phone() ? total : (total - gap) / 2;
+    let fh = (fw * this.H) / this.W;
+    if (fh > maxH) {
+      fh = maxH;
+      fw = (fh * this.W) / this.H;
+    }
+    fh = Math.max(fh, phone() ? 200 : 240);
+    this.wrap.style.setProperty("--fw", `${Math.floor(fw)}px`);
+    this.wrap.style.setProperty("--fh", `${Math.round(fh)}px`);
+    this.wrap.style.setProperty("--gap", `${gap}px`);
+    if (this.zoom === "fit") this.setZoom("fit", false);
+    else this.apply();
+  }
+
+  async show({ before, after, width, height }) {
+    const token = ++this.token;
+    this.loading.hidden = false;
+    // Each call loads into its own images; only the newest one swaps them in, together with the size.
+    const load = (src, like) => {
+      const img = new Image();
+      img.alt = like.alt;
+      img.draggable = false;
+      if (!src) return Promise.resolve(img);
+      // A rejected decode() is a failed display (the run stays saved for Load again), not something to show.
+      return new Promise((resolve, reject) => {
+        img.onload = () => resolve();
+        img.onerror = () => reject(new Error("load"));
+        img.src = src;
+      })
+        .then(() => img.decode?.())
+        .then(() => img);
+    };
+    let pair;
+    try {
+      pair = await Promise.all([load(before, this.panes[0].img), load(after, this.panes[1].img)]);
+    } catch {
+      if (token !== this.token) return "superseded";
+      this.loading.hidden = true;
+      return "error";
+    }
+    if (token !== this.token) return "superseded";
+    pair.forEach((img, i) => {
+      this.panes[i].img.replaceWith(img);
+      this.panes[i].img = img;
+    });
+    this.loading.hidden = true;
+    this.panes[0].img.hidden = !before;
+    els.emptyNote.hidden = !!before;
+    this.W = width;
+    this.H = height;
+    this.zoom = "fit";
+    this.layout();
+    this.onZoom("fit");
+    return "shown";
+  }
+
+  setZoom(z, announce = true) {
+    if (!this.W) return;
+    this.zoom = z;
+    this.s = z === "fit" ? this.fitScale() : Number(z);
+    if (z === "fit") {
+      this.x = this.W / 2;
+      this.y = this.H / 2;
+    }
+    this.apply();
+    if (announce) this.onZoom(z);
+  }
+
+  zoomAt(scale, sx, sy) {
+    const fit = this.fitScale();
+    const next = Math.min(8, Math.max(Math.min(fit, 1), scale));
+    const { w, h } = this.frame();
+    const px = this.x + (sx - w / 2) / this.s;
+    const py = this.y + (sy - h / 2) / this.s;
+    this.s = next;
+    this.x = px - (sx - w / 2) / this.s;
+    this.y = py - (sy - h / 2) / this.s;
+    this.zoom = Math.abs(next - 1) < 1e-6 ? "1" : Math.abs(next - 2) < 1e-6 ? "2" : "custom";
+    this.apply();
+    this.onZoom(this.zoom);
+  }
+
+  clamp() {
+    const { w, h } = this.frame();
+    const hw = w / (2 * this.s);
+    const hh = h / (2 * this.s);
+    this.x = this.W * this.s <= w ? this.W / 2 : Math.min(this.W - hw, Math.max(hw, this.x));
+    this.y = this.H * this.s <= h ? this.H / 2 : Math.min(this.H - hh, Math.max(hh, this.y));
+  }
+
+  apply() {
+    this.clamp();
+    const { w, h } = this.frame();
+    const tx = Math.round(w / 2 - this.x * this.s);
+    const ty = Math.round(h / 2 - this.y * this.s);
+    for (const { img } of this.panes) {
+      img.style.width = `${this.W * this.s}px`;
+      img.style.height = `${this.H * this.s}px`;
+      img.style.transform = `translate(${tx}px, ${ty}px)`;
+      img.style.imageRendering = this.s > 1.5 ? "pixelated" : "auto";
+    }
+  }
+
+  bind(frame) {
+    const usable = (e) => e.pointerType === "mouse" || els.viewerWrap.dataset.inspect === "true";
+    frame.addEventListener("pointerdown", (e) => {
+      if (!this.W || !usable(e)) return;
+      frame.setPointerCapture(e.pointerId);
+      this.pointers.set(e.pointerId, { x: e.clientX, y: e.clientY });
+      frame.classList.add("is-dragging");
+    });
+    frame.addEventListener("pointermove", (e) => {
+      const prev = this.pointers.get(e.pointerId);
+      if (!prev) return;
+      const now = { x: e.clientX, y: e.clientY };
+      if (this.pointers.size === 1) {
+        this.x -= (now.x - prev.x) / this.s;
+        this.y -= (now.y - prev.y) / this.s;
+        this.pointers.set(e.pointerId, now);
+        if (this.zoom === "fit") {
+          this.zoom = "custom";
+          this.onZoom("custom");
+        }
+        this.apply();
+        return;
+      }
+      const [a, b] = [...this.pointers.values()];
+      const before = Math.hypot(a.x - b.x, a.y - b.y);
+      this.pointers.set(e.pointerId, now);
+      const [c, d] = [...this.pointers.values()];
+      const after = Math.hypot(c.x - d.x, c.y - d.y);
+      if (before > 0) {
+        const r = frame.getBoundingClientRect();
+        this.zoomAt(this.s * (after / before), (c.x + d.x) / 2 - r.left, (c.y + d.y) / 2 - r.top);
+      }
+    });
+    const end = (e) => {
+      this.pointers.delete(e.pointerId);
+      if (!this.pointers.size) frame.classList.remove("is-dragging");
+    };
+    frame.addEventListener("pointerup", end);
+    frame.addEventListener("pointercancel", end);
+    // a plain wheel scrolls the page; Ctrl/⌘ + wheel (and trackpad pinch) zooms
+    frame.addEventListener(
+      "wheel",
+      (e) => {
+        if (!this.W || !(e.ctrlKey || e.metaKey)) return;
+        e.preventDefault();
+        const r = frame.getBoundingClientRect();
+        this.zoomAt(this.s * Math.exp(-e.deltaY * 0.004), e.clientX - r.left, e.clientY - r.top);
+      },
+      { passive: false },
+    );
+    frame.addEventListener("dblclick", (e) => {
+      const r = frame.getBoundingClientRect();
+      if (this.zoom === "fit") this.zoomAt(1, e.clientX - r.left, e.clientY - r.top);
+      else this.setZoom("fit");
+    });
+    // keyboard: arrows pan both frames (Shift: bigger steps), + and - zoom, Home fits
+    frame.tabIndex = 0;
+    frame.setAttribute("role", "group");
+    frame.setAttribute("aria-label", "Arrow keys move both frames, + and - zoom, Home fits");
+    frame.addEventListener("keydown", (e) => {
+      if (!this.W || e.altKey || e.ctrlKey || e.metaKey) return;
+      const step = (e.shiftKey ? 160 : 40) / this.s;
+      const moves = { ArrowLeft: [-step, 0], ArrowRight: [step, 0], ArrowUp: [0, -step], ArrowDown: [0, step] };
+      const { w, h } = this.frame();
+      if (moves[e.key]) {
+        this.x += moves[e.key][0];
+        this.y += moves[e.key][1];
+        this.apply();
+      } else if (e.key === "+" || e.key === "=") this.zoomAt(this.s * 1.5, w / 2, h / 2);
+      else if (e.key === "-" || e.key === "_") this.zoomAt(this.s / 1.5, w / 2, h / 2);
+      else if (e.key === "Home") this.setZoom("fit");
+      else return;
+      e.preventDefault();
+    });
+  }
+}
+
+const viewer = new Diptych($("#viewer"), els.viewerWrap);
+viewer.onZoom = (z) => document.querySelectorAll("[data-zoom]").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.zoom === z)));
+
+// ---------------------------------------------------------------------------- status: one line
+
+const demo = new Demo({
+  slug: "photo-enhancer",
+  onQuota: () => update(),
+  turnstileEl: "#turnstile",
+  turnstileTheme: () => {
+    const t = document.documentElement.dataset.theme;
+    if (t === "dark" || t === "light") return t;
+    return matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  },
+  onPhase: (phase, info) => {
+    update();
+    const text = { preparing: "Preparing…", uploading: "Uploading…", queued: "Waiting for a GPU…", running: "Enhancing…", loading: "Loading result…" }[phase] ?? "Working…";
+    status({ busy: true, text, at: info.at ?? demo.active?.at, note: info.cold ? "The first run after a quiet spell can take 2–3 minutes." : "" });
+  },
+});
+
+function status({ busy = false, error = false, text, note = "", actions = [], at = null }) {
+  clearInterval(state.tick);
+  els.status.hidden = false;
+  els.status.dataset.state = error ? "error" : busy ? "busy" : "idle";
+  const acts = actions.length
+    ? `<span class="actions">${actions
+        .map((a, i) =>
+          a.href
+            ? `<a href="${a.href}" target="_blank" rel="noopener">${a.label}</a>`
+            : `<button type="button" class="${a.primary ? "primary" : ""}" data-i="${i}">${a.label}</button>`,
+        )
+        .join("")}</span>`
+    : "";
+  els.status.innerHTML = `<span class="status-text">${busy ? '<span class="spinner" aria-hidden="true"></span>' : ""}<strong>${text}</strong>${note ? ` <span class="meta">${note}</span>` : ""}<span class="meta elapsed"></span></span>${acts}`;
+  els.status.querySelectorAll("button[data-i]").forEach((b) => b.addEventListener("click", () => actions[Number(b.dataset.i)].run()));
+  if (at) {
+    const el = els.status.querySelector(".elapsed");
+    const upd = () => (el.textContent = ` · ${Math.round((Date.now() - at) / 1000)}${NBSP}s`);
+    upd();
+    state.tick = setInterval(upd, 1000);
+  }
+}
+
+function showError(err) {
+  const [title, note] = errorCopy(err, demo, COPY);
+  if (INFO_KINDS.has(err.kind) && !demo.active?.op) return status({ text: title, note });
+  const actions = [];
+  if (isResumable(err) && demo.active) actions.push({ label: "Resume", primary: true, run: () => go(() => demo.continue()) });
+  if (err.kind === "download" && demo.active?.op) actions.push({ label: "Load again", primary: true, run: () => go(() => demo.continue()) });
+  if (demo.active && actions.length)
+    actions.push({
+      label: "Start over",
+      run: () => {
+        demo.forget();
+        els.status.hidden = true;
+        update();
+      },
+    });
+  status({ error: true, text: title, note, actions });
+}
+
+// ---------------------------------------------------------------------------- photo and plan
+
+async function selectFile(file) {
+  if (!file || demo.busy) return;
+  const sel = ++state.selection;
+  state.quote++; // a quote still running is for the previous photo
+  state.file = null;
+  state.info = null;
+  state.plan = null;
+  demo.dropPrepared();
+  update();
+  if (!demo.active) els.status.hidden = true;
+  let info;
+  try {
+    info = await demo.inspect(file);
+  } catch (err) {
+    if (sel !== state.selection) return;
+    clearPhoto();
+    return planError(err);
+  }
+  const thumb = await thumbnail(file, info, 120);
+  if (sel !== state.selection) return thumb && URL.revokeObjectURL(thumb);
+  if (state.thumbUrl) URL.revokeObjectURL(state.thumbUrl);
+  state.file = file;
+  state.info = info;
+  state.thumbUrl = thumb;
+  els.thumb.hidden = !thumb;
+  if (thumb) els.thumb.src = thumb;
+  els.fileLabel.textContent = "Change photo";
+  els.fileMeta.innerHTML = `<strong>${escapeHtml(file.name || "Pasted photo")}</strong> · <span class="numeric">${dims(info.width, info.height)}</span>`;
+  refreshPlan();
+}
+
+/** No photo: the file, its size, its plan and its preview go together. */
+function clearPhoto() {
+  if (state.thumbUrl) URL.revokeObjectURL(state.thumbUrl);
+  Object.assign(state, { file: null, info: null, plan: null, thumbUrl: null });
+  els.thumb.hidden = true;
+  els.thumb.removeAttribute("src");
+  els.fileLabel.textContent = PICK.label;
+  els.fileMeta.innerHTML = PICK.meta;
+}
+
+function planError(err, current = () => true) {
+  if (!current()) return;
+  const [title, note] = errorCopy(err, demo, COPY);
+  els.plan.innerHTML = `<span class="plan-error"><strong>${title}</strong></span> ${note}`;
+  state.plan = null;
+  update();
+}
+
+function applyPlan(plan) {
+  state.plan = plan;
+  const price = demo.config.price;
+  const api = plan.chips ? ` · via the API ${plan.chips}${NBSP}chip${plan.chips === 1 ? "" : "s"}${price ? ` (${usd(plan.chips * price.min)}–${usd(plan.chips * price.max)})` : ""}` : "";
+  const reduced = plan.resized ? ` · reduced from ${dims(plan.source.width, plan.source.height)}` : "";
+  els.plan.textContent = `Output ${dims(plan.out_w, plan.out_h)}${reduced}${api}`;
+}
+
+async function refreshPlan() {
+  const { file, info } = state;
+  if (!file || !info) return;
+  if (demo.loginNeeded()) demo.noteLoginWall();
+  const sel = state.selection;
+  const q = ++state.quote;
+  const current = () => q === state.quote && sel === state.selection;
+  state.plan = null;
+  update();
+  if (!demo.config) return; // start() quotes again once the service answers
+  try {
+    const plan = await demo.quote(info.width, info.height, state.factor);
+    if (!current()) return;
+    applyPlan(plan);
+  } catch (err) {
+    planError(err, current);
+  }
+  update();
+}
+
+function update() {
+  const login = demo.loginNeeded();
+  const limited = demo.limited();
+  const working = demo.busy || state.presenting;
+  const pending = !!demo.active && !working;
+  els.run.disabled = working || (!pending && (!state.plan || demo.configFailed || limited));
+  els.run.textContent = working ? "Enhancing…" : pending ? "Resume" : login ? "Log in to enhance" : limited ? "No runs left today" : "Enhance";
+}
+
+// ---------------------------------------------------------------------------- run
+
+async function go(step) {
+  update();
+  try {
+    const done = await step();
+    state.presenting = true;
+    update();
+    await present(done);
+  } catch (err) {
+    const e = err instanceof DemoError ? err : new DemoError("server");
+    // The browser could prepare only a smaller image: show that plan; the next press sends it.
+    if (e.kind === "reduced" && e.plan && e.file === state.file && e.from === state.plan) applyPlan(e.plan);
+    showError(e);
+  } finally {
+    state.presenting = false;
+    update();
+  }
+}
+
+function setBeforeLabel(factor) {
+  const text = factor === 1 ? "Before" : `Before · resized ${factor}×`;
+  els.beforeLabel.textContent = text;
+  viewer.panes[0].frame.closest(".pane").dataset.label = text;
+}
+
+async function present(done) {
+  const view = ++state.view;
+  const op = done.op;
+  setBeforeLabel(op.factor);
+  const outcome = await viewer.show({ before: done.beforeUrl, after: done.afterUrl, width: op.out_w, height: op.out_h });
+  if (outcome !== "shown" || view !== state.view) {
+    // Not on screen: the run stays saved, so it can be loaded again (Load again, Resume, or after a reload).
+    URL.revokeObjectURL(done.afterUrl);
+    if (outcome === "error") throw new DemoError("download");
+    if (demo.active?.op?.op === op.op)
+      status({ text: "Your result is ready.", actions: [{ label: "Show it", primary: true, run: () => go(() => demo.continue()) }] });
+    return;
+  }
+  demo.shown(done);
+  for (const u of state.shown) URL.revokeObjectURL(u);
+  state.shown = [done.afterUrl, done.beforeUrl].filter(Boolean);
+  markExample(null);
+  els.caption.innerHTML = `<strong>Your photo</strong><span class="meta numeric">${sizeName(op.factor)} · ${dims(op.out_w, op.out_h)}</span>`;
+  const left = demo.runsLeft();
+  const actions = [{ label: "Open megapotato.app ↗", href: demo.site("/tool", "get-png") }];
+  if (phone())
+    actions.push({ label: "View result", run: () => els.viewerWrap.scrollIntoView({ behavior: matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth" }) });
+  status({
+    text: `Ready${left !== null ? ` · ${left} run${left === 1 ? "" : "s"} left today` : ""}`,
+    note: "Upload your image on megapotato.app to download it.",
+    actions,
+  });
+}
+
+// ---------------------------------------------------------------------------- examples
+
+async function loadExamples() {
+  try {
+    state.examples = await (await fetch("examples/examples.json")).json();
+  } catch {
+    state.examples = [];
+  }
+  els.examples.innerHTML = state.examples
+    .map(
+      (ex, i) => `<li style="--ar:${(ex.in[0] / ex.in[1]).toFixed(4)}"><button type="button" class="example" data-i="${i}" aria-pressed="false">
+        <span class="example-image"><img src="${escapeHtml(ex.thumb)}" alt="" loading="lazy"></span>
+        <span class="example-text"><span>${escapeHtml(ex.title)}</span><small>${sizeName(ex.factor)}</small></span>
+      </button></li>`,
+    )
+    .join("");
+  els.credits.innerHTML = state.examples
+    .map((ex) => `<li>${escapeHtml(ex.credit)} <a href="${escapeHtml(ex.source)}" target="_blank" rel="noopener">Source</a>. ${escapeHtml(ex.licence ?? "")}</li>`)
+    .join("");
+  els.examples.querySelectorAll(".example").forEach((b) => b.addEventListener("click", () => showExample(Number(b.dataset.i))));
+}
+
+function markExample(index) {
+  els.examples.querySelectorAll(".example").forEach((b, i) => b.setAttribute("aria-pressed", String(i === index)));
+}
+
+async function showExample(i) {
+  const ex = state.examples[i];
+  if (!ex) return;
+  const view = ++state.view;
+  markExample(i);
+  setBeforeLabel(ex.factor);
+  els.caption.innerHTML = `<strong>${escapeHtml(ex.title)}</strong><span class="meta numeric">${escapeHtml(ex.caption)} · ${sizeName(ex.factor)} · ${dims(ex.out[0], ex.out[1])}</span>`;
+  const outcome = await viewer.show({ before: ex.input, after: ex.result, width: ex.out[0], height: ex.out[1] });
+  if (view === state.view && outcome === "shown") {
+    for (const u of state.shown) URL.revokeObjectURL(u);
+    state.shown = [];
+  }
+}
+
+// ---------------------------------------------------------------------------- wiring
+
+function wire() {
+  els.file.addEventListener("change", () => selectFile(els.file.files?.[0]));
+  // the whole page is the drop target
+  let depth = 0;
+  const hasFiles = (e) => [...(e.dataTransfer?.types ?? [])].includes("Files");
+  document.addEventListener("dragenter", (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    depth += 1;
+    document.body.dataset.dragover = "true";
+  });
+  document.addEventListener("dragover", (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+  });
+  document.addEventListener("dragleave", (e) => {
+    if (!hasFiles(e)) return;
+    depth = Math.max(0, depth - 1);
+    if (!depth) delete document.body.dataset.dragover;
+  });
+  document.addEventListener("drop", (e) => {
+    if (!hasFiles(e)) return;
+    e.preventDefault();
+    depth = 0;
+    delete document.body.dataset.dragover;
+    selectFile(e.dataTransfer?.files?.[0]);
+  });
+  document.addEventListener("paste", (e) => {
+    const item = [...(e.clipboardData?.items ?? [])].find((it) => it.kind === "file" && it.type.startsWith("image/"));
+    if (item) selectFile(item.getAsFile());
+  });
+  document.querySelectorAll('input[name="mode"]').forEach((r) =>
+    r.addEventListener("change", () => {
+      state.factor = Number(r.value);
+      refreshPlan();
+    }),
+  );
+  document.querySelectorAll("[data-zoom]").forEach((b) => b.addEventListener("click", () => viewer.setZoom(b.dataset.zoom)));
+  els.inspect.addEventListener("click", () => {
+    const on = els.viewerWrap.dataset.inspect !== "true";
+    els.viewerWrap.dataset.inspect = String(on);
+    els.inspect.setAttribute("aria-pressed", String(on));
+    els.inspect.textContent = on ? "Done" : "Inspect";
+  });
+  els.run.addEventListener("click", () => {
+    if (demo.active) return go(() => demo.continue());
+    if (state.file && state.plan) go(() => demo.start(state.file, state.plan));
+  });
+  viewer.panes[1].frame.closest(".pane").dataset.label = "After";
+}
+
+async function start() {
+  wire();
+  const saved = demo.hasSaved();
+  await loadExamples();
+  if (state.examples.length) showExample(0);
+  const c = await demo.init();
+  if (!c) {
+    els.notice.hidden = false;
+    els.notice.textContent = "Live enhancing is unavailable right now. The examples still work.";
+    return update();
+  }
+  els.quota.textContent = c.login_required
+    ? `Preview only · ${c.jobs_per_day} free runs a day · Log in to Hugging Face (top right) to run`
+    : `${c.jobs_per_day} free runs a day`;
+  update();
+  refreshPlan(); // a photo chosen while the page was still starting gets its plan now
+  if (!saved && demo.loginNeeded()) showError(new DemoError("login"));
+  if (saved) {
+    status({ busy: true, text: "Picking up your last run…" });
+    await go(() => demo.resume().then((r) => r ?? Promise.reject(new DemoError("unconfirmed"))));
+  }
+}
+
+start();