Blame for ui.js

// 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();