Daily limit: continue on megapotato.app

core.js

@@ -87,7 +87,11 @@ export class Demo {
     this.hfUser = null;
     this.active = null;
     this.busy = false;
-    this.limitedUntil = 0;
+    this.limitedUntil = 0; // a refused run's deadline
+    this.limitKind = null; // and its reason: "daily", "hourly", "budget" or "spend_limit"
+    this.limitSeq = 0; // the newest /config request at the time of that refusal
+    this.configSeq = 0; // /config requests started
+    this.configApplied = 0; // the newest one whose answer was taken
     this.turnstile = { widget: null, pending: null, ready: null };
     this.loginWallNoted = false;
     this.turnstileFailNoted = false;
@@ -97,10 +101,14 @@ export class Demo {
 
   // ------------------------------------------------------------------ links
 
-  /** A megapotato.app link with this Space's attribution slug (the site reads ?s=, not UTM). */
-  site(path = "/tool", content = "") {
+  /**
+   * A megapotato.app link with this Space's attribution slug (the site reads ?s=, not UTM). `scale` (1, 2, 4 or 8)
+   * is the factor the visitor chose here, so the site can open in the same mode; left out when none is chosen.
+   */
+  site(path = "/tool", content = "", scale = null) {
     const s = content ? `hf-${this.slug}-${content}` : `hf-${this.slug}`;
-    return `https://megapotato.app${path}?s=${s.slice(0, 40)}`;
+    const mode = [1, 2, 4, 8].includes(Number(scale)) ? `&scale=${Number(scale)}` : "";
+    return `https://megapotato.app${path}?s=${s.slice(0, 40)}${mode}`;
   }
 
   // ------------------------------------------------------------------ start
@@ -109,7 +117,7 @@ export class Demo {
     const login = this.hfLoginState();
     this.hfUser = await login;
     try {
-      this.config = await api("/config", { headers: this.hfHeaders() }, 10_000);
+      await this.readConfig();
     } catch {
       this.configFailed = true;
       return null;
@@ -121,7 +129,7 @@ export class Demo {
 
   async refresh() {
     try {
-      this.config = await api("/config", { headers: this.hfHeaders() }, 10_000);
+      await this.readConfig();
       this.configFailed = false;
     } catch {
       // keep the last config
@@ -130,6 +138,23 @@ export class Demo {
     return this.config;
   }
 
+  /**
+   * Read /config. Requests can overlap: an answer to an older request than the one already taken is dropped, so
+   * stale numbers never replace newer ones. A daily or hourly refusal gives way to a newer answer that shows runs
+   * left (a refund, a reset); a service refusal (budget, spend limit) keeps its own deadline.
+   */
+  async readConfig() {
+    const seq = ++this.configSeq;
+    const config = await api("/config", { headers: this.hfHeaders() }, 10_000);
+    if (seq < this.configApplied) return;
+    this.configApplied = seq;
+    this.config = config;
+    if (seq > this.limitSeq && (this.limitKind === "daily" || this.limitKind === "hourly") && config.me?.left > 0) {
+      this.limitedUntil = 0;
+      this.limitKind = null;
+    }
+  }
+
   /** When a limit ends (a refused run's retry time, or the allowance's reset), read the allowance again. */
   watchQuota() {
     clearTimeout(this.quotaTimer);
@@ -190,6 +215,20 @@ export class Demo {
     return Date.now() < this.limitedUntil || this.loginNeeded() || this.quotaOut();
   }
 
+  /**
+   * Why no run can start now, the login wall aside: { kind: "quota", retryAt } when the visitor's own runs are used
+   * up (the allowance says so, or a daily/hourly refusal stands); { kind: "paused", reason } while a service refusal
+   * (budget, spend limit) stands; null otherwise.
+   */
+  limitState() {
+    const refused = Date.now() < this.limitedUntil ? this.limitKind : null;
+    // A service pause outranks the visitor's own allowance: while it stands, more runs would not help.
+    if (refused && refused !== "daily" && refused !== "hourly") return { kind: "paused", reason: refused };
+    if (this.quotaOut()) return { kind: "quota", retryAt: this.config.me.retry_at ?? null };
+    if (refused) return { kind: "quota", retryAt: this.limitedUntil };
+    return null;
+  }
+
   runsLeft() {
     return this.config?.me?.left ?? null;
   }
@@ -463,6 +502,8 @@ export class Demo {
       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.limitKind = e.kind;
+        this.limitSeq = this.configSeq; // only an allowance read after this refusal can lift it
         this.watchQuota();
       }
       throw e;
@@ -664,17 +705,18 @@ export async function thumbnail(file, info, edge = 160) {
 // ---------------------------------------------------------------------- copy
 
 /**
- * Title and note for an error. `t`: { verb: "enhance", runs: "enhancements", site: (content) => url, inHub: bool }.
+ * Title and note for an error. `t`: { verb: "enhance", runs: "runs", spaceUrl, scale?: the chosen factor for site links }.
  * 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 link = (content, text = "megapotato.app") => `<a href="${demo.site("/tool", content, t.scale)}" 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 bonus = signupBonus(demo);
+  const more = `${link("limit", "Sign up on megapotato.app")}: ${bonus ? `${bonus}${NBSP}free chips` : "free chips"} to start, full-quality downloads.`;
   const still = "You can still explore the examples.";
   const table = {
     network: ["Could not reach the service.", "Check your connection, then press Resume."],
@@ -727,3 +769,14 @@ export function errorCopy(err, demo, t) {
   };
   return table[err.kind] ?? table.server;
 }
+
+/** The sign-up bonus the service reports, when it is a plain positive whole number (it goes into page text). */
+export function signupBonus(demo) {
+  const n = demo.config?.api?.signup_bonus;
+  return Number.isInteger(n) && n > 0 && n < 1_000_000 ? n : null;
+}
+
+/** The way on when the free runs here are used up: the product itself, with this Space's attribution. */
+export function limitActions(demo, scale = null) {
+  return [{ label: "Continue on megapotato.app ↗", href: demo.site("/tool", "limit", scale), primary: true }];
+}

ui.js

@@ -1,6 +1,6 @@
 // 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";
+import { DemoError, Demo, INFO_KINDS, NBSP, dims, errorCopy, escapeHtml, isResumable, limitActions, signupBonus, thumbnail, usd } from "./core.js";
 
 const SPACE_URL = "https://huggingface.co/spaces/MegaPotatoAI/Photo-Enhancer";
 const COPY = { verb: "enhance", runs: "runs", spaceUrl: SPACE_URL };
@@ -269,15 +269,17 @@ const demo = new Demo({
   },
 });
 
-function status({ busy = false, error = false, text, note = "", actions = [], at = null }) {
+/** `kind` names what the line is about ("run", "info", "limit"), so that only its owner replaces or clears it. */
+function status({ busy = false, error = false, text, note = "", actions = [], at = null, kind = "" }) {
   clearInterval(state.tick);
   els.status.hidden = false;
   els.status.dataset.state = error ? "error" : busy ? "busy" : "idle";
+  els.status.dataset.kind = kind;
   const acts = actions.length
     ? `<span class="actions">${actions
         .map((a, i) =>
           a.href
-            ? `<a href="${a.href}" target="_blank" rel="noopener">${a.label}</a>`
+            ? `<a class="${a.primary ? "primary" : ""}" 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>`
@@ -294,7 +296,12 @@ function status({ busy = false, error = false, text, note = "", actions = [], at
 
 function showError(err) {
   const [title, note] = errorCopy(err, demo, COPY);
-  if (INFO_KINDS.has(err.kind) && !demo.active?.op) return status({ text: title, note });
+  if (INFO_KINDS.has(err.kind) && !demo.active?.op) {
+    // no runs left here: the way on is the product, as a button next to the message
+    if (err.kind === "daily" || err.kind === "hourly") return showLimit(err.retry_at ?? demo.limitedUntil);
+    if (err.kind === "budget" || err.kind === "spend_limit") return showPaused(err.kind); // the service's pause, in its own words
+    return status({ text: title, note, kind: "info" });
+  }
   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()) });
@@ -307,7 +314,7 @@ function showError(err) {
         update();
       },
     });
-  status({ error: true, text: title, note, actions });
+  status({ error: true, text: title, note, actions, kind: "run" });
 }
 
 // ---------------------------------------------------------------------------- photo and plan
@@ -395,9 +402,63 @@ function update() {
   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";
+  els.run.textContent = working ? "Enhancing…" : pending ? "Resume" : login ? "Log in to enhance" : limited ? (demo.limitState()?.kind === "paused" ? "Paused right now" : "No runs left today") : "Enhance";
+  syncLimitNotice();
+}
+
+/**
+ * A visitor with no runs left here (today's are used, or a run was just refused) sees where to continue, unless the
+ * status line is busy with something else: a login notice, a run, or a result.
+ */
+function syncLimitNotice() {
+  const idle = !!demo.config && !demo.loginNeeded() && !demo.active && !demo.busy && !state.presenting;
+  const limit = idle ? demo.limitState() : null;
+  const mine = !els.status.hidden && (els.status.dataset.kind === "limit" || els.status.dataset.kind === "paused");
+  if (limit) {
+    if (!els.status.hidden && !mine) return; // a login notice, a run or a result is there
+    if (limit.kind === "quota") showLimit(limit.retryAt);
+    else showPaused(limit.reason);
+  } else if (mine && !demo.limited()) {
+    els.status.hidden = true; // runs are possible again
+  }
 }
 
+/** The factor the visitor has chosen (1: original size, or 2); the site links carry it. */
+function limitScale() {
+  return state.factor;
+}
+
+/**
+ * The limit line: the message, when a run comes back, the offer, and the product as the primary button. Drawn again
+ * only when something it shows changed (the time, the bonus, the factor in its links).
+ */
+function showLimit(retryAt) {
+  const scale = limitScale();
+  const sig = `${scale ?? ""}|${retryAt ?? ""}|${signupBonus(demo) ?? ""}`;
+  if (!els.status.hidden && els.status.dataset.kind === "limit" && els.status.dataset.sig === sig) return;
+  const [text, note] = errorCopy(new DemoError("daily", { retry_at: retryAt || null }), demo, { ...COPY, scale });
+  redraw(sig, { text, note, actions: limitActions(demo, scale), kind: "limit" });
+}
+
+/** The service refused for its own reasons (budget, spend limit): say that, not that the visitor's runs are used. */
+function showPaused(reason) {
+  if (!els.status.hidden && els.status.dataset.kind === "paused" && els.status.dataset.sig === reason) return;
+  const [text, note] = errorCopy(new DemoError(reason), demo, COPY);
+  redraw(reason, { text, note, kind: "paused" });
+}
+
+/** Draw a limit or pause line; a link that had the focus and is still the same link keeps it. */
+function redraw(sig, line) {
+  const links = [...els.status.querySelectorAll("a")];
+  const at = links.indexOf(document.activeElement);
+  const href = at >= 0 ? links[at].getAttribute("href") : null;
+  status(line);
+  els.status.dataset.sig = sig;
+  const again = at >= 0 ? els.status.querySelectorAll("a")[at] : null;
+  if (again && again.getAttribute("href") === href) again.focus();
+}
+
+
 // ---------------------------------------------------------------------------- run
 
 async function go(step) {
@@ -443,13 +504,14 @@ async function present(done) {
   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") }];
+  const actions = [{ label: "Open megapotato.app ↗", href: demo.site("/tool", "get-png", op.factor) }];
   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,
+    kind: "run",
   });
 }
 
@@ -529,6 +591,7 @@ function wire() {
   document.querySelectorAll('input[name="mode"]').forEach((r) =>
     r.addEventListener("change", () => {
       state.factor = Number(r.value);
+      update();
       refreshPlan();
     }),
   );