Deploy static space build

README.md

@@ -1,10 +1,61 @@
 ---
-title: Mesmer Screenshot
-emoji: 📚
+title: Free Website Screenshot API — Capture Any URL as an Image
+emoji: 📸
 colorFrom: yellow
-colorTo: blue
+colorTo: red
 sdk: static
 pinned: false
+short_description: Capture a screenshot of any website URL as an image. Free
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Free Website Screenshot API — Capture Any URL as an Image
+
+Paste any website URL, pick a size, and get back a JPG image. This is a free,
+no-signup demo of the **[MesmerTools Screenshot API](https://mesmer.tools/api-tools/screenshot)**
+that runs entirely in your browser — handy for previews, thumbnails, link cards,
+and quick visual checks of any public page.
+
+## What it does
+
+- **Screenshot any URL online** — enter `https://example.com` and capture it as an image.
+- **URL to image** — the API returns a hosted JPG on `cdn.mesmer.tools` you can open or download.
+- **Custom size** — set width (320–1920px, default 1280) and height (240–1080px, default 720),
+  or use the Desktop / Wide / Mobile presets.
+- **Cached + fast** — repeat captures of the same page are served from cache.
+
+## How it works
+
+This Space calls the public `GET /api/v1/screenshot` endpoint directly from your
+browser, so every visitor gets their own free quota (no shared key, no proxy):
+
+```
+GET https://mesmer.tools/api/v1/screenshot?url=https://github.com&width=1280&height=720
+→ { "url": "https://cdn.mesmer.tools/screenshots/api/….jpg", "width": 1280, "height": 720, "cached": false }
+```
+
+| Param  | Required | Range / default              |
+| ------ | -------- | ---------------------------- |
+| `url`  | yes      | a website URL (https://…)    |
+| `width`| no       | 320–1920, default 1280       |
+| `height`| no      | 240–1080, default 720        |
+
+## Free limits
+
+The free demo allows **10 screenshots per hour per visitor**. Need higher limits,
+batch capture, or full-page screenshots for production? Use the full tool:
+**[mesmer.tools/api-tools/screenshot](https://mesmer.tools/api-tools/screenshot)**.
+
+## More free tools on MesmerTools
+
+- [Site Logo / Favicon API](https://mesmer.tools/api-tools/site-logo) — fetch any website's logo.
+- [Text to Speech](https://mesmer.tools/api-tools/tts) — natural AI voices, free.
+- [AI Logo Maker](https://mesmer.tools/free-tools/ai-logo-maker) — generate a brand logo from a prompt.
+- [JSON Formatter](https://mesmer.tools/free-tools/json-formatter) — format and validate JSON.
+- [Token Price Calculator](https://mesmer.tools/free-tools/token-price-calculator) — estimate LLM API costs.
+
+Browse everything at **[mesmer.tools](https://mesmer.tools)** — free developer & AI tools.
+
+---
+
+**Keywords:** free website screenshot api, screenshot any url online, url to image,
+website screenshot generator, capture website as image, webpage screenshot api.

app.js

@@ -0,0 +1,213 @@
+import { createSpace, el } from "./shared/ui.js";
+import { callRest } from "./shared/api-client.js";
+import { ENDPOINTS, siteUrl } from "./shared/config.js";
+
+const TOOL_KEY = "screenshot";
+const API_PATH = ENDPOINTS[TOOL_KEY].apiPath; // "/api/v1/screenshot"
+const FULL_TOOL_URL = siteUrl(ENDPOINTS[TOOL_KEY].fullToolPath); // mesmer.tools/api-tools/screenshot
+
+// Allowed dimension ranges (validated client-side before the API call).
+const WIDTH = { min: 320, max: 1920, default: 1280 };
+const HEIGHT = { min: 240, max: 1080, default: 720 };
+
+const space = createSpace({
+  toolKey: TOOL_KEY,
+  emoji: "📸",
+  title: "Free Website Screenshot API",
+  subtitle: "Capture a screenshot of any website URL as an image. Paste a link, pick a size, get a JPG — free, no signup.",
+  intro: "Turn any URL into an image right from your browser. Great for previews, thumbnails, and link cards.",
+});
+
+/* --- Form ----------------------------------------------------------------- */
+
+const urlInput = el("input", {
+  className: "ms-input",
+  type: "url",
+  id: "url",
+  name: "url",
+  required: "",
+  placeholder: "https://example.com",
+  autocomplete: "off",
+  autocapitalize: "off",
+  spellcheck: "false",
+});
+
+const widthInput = el("input", {
+  className: "ms-input",
+  type: "number",
+  id: "width",
+  name: "width",
+  inputmode: "numeric",
+  min: String(WIDTH.min),
+  max: String(WIDTH.max),
+  step: "1",
+  placeholder: String(WIDTH.default),
+});
+
+const heightInput = el("input", {
+  className: "ms-input",
+  type: "number",
+  id: "height",
+  name: "height",
+  inputmode: "numeric",
+  min: String(HEIGHT.min),
+  max: String(HEIGHT.max),
+  step: "1",
+  placeholder: String(HEIGHT.default),
+});
+
+const widthHint = el("span", { className: "ms-hint", text: `Optional · ${WIDTH.min}–${WIDTH.max}, default ${WIDTH.default}` });
+const heightHint = el("span", { className: "ms-hint", text: `Optional · ${HEIGHT.min}–${HEIGHT.max}, default ${HEIGHT.default}` });
+
+function preset(label, w, h) {
+  return el("button", {
+    className: "ms-btn-ghost",
+    type: "button",
+    onClick: () => {
+      widthInput.value = String(w);
+      heightInput.value = String(h);
+      validate(widthInput, widthHint, WIDTH);
+      validate(heightInput, heightHint, HEIGHT);
+    },
+  }, label);
+}
+
+const submitBtn = el("button", { className: "ms-btn", type: "submit" }, "Capture screenshot");
+
+space.form.append(
+  el("div", { className: "ms-field" },
+    el("label", { for: "url", text: "Website URL" }),
+    urlInput,
+    el("span", { className: "ms-hint", text: "Any public page, e.g. https://github.com" }),
+  ),
+  el("div", { className: "ms-row" },
+    el("div", { className: "ms-field" },
+      el("label", { for: "width", text: "Width (px)" }),
+      widthInput,
+      widthHint,
+    ),
+    el("div", { className: "ms-field" },
+      el("label", { for: "height", text: "Height (px)" }),
+      heightInput,
+      heightHint,
+    ),
+  ),
+  el("div", { className: "ms-field" },
+    el("label", { text: "Size presets" }),
+    el("div", { className: "ms-presets" },
+      preset("Desktop 1280×720", 1280, 720),
+      preset("Wide 1920×1080", 1920, 1080),
+      preset("Mobile 390×844", 390, 844),
+    ),
+  ),
+  submitBtn,
+  el("p", { className: "ms-api-note" },
+    "Free demo: ",
+    String(ENDPOINTS[TOOL_KEY].freeLimitPerHour),
+    " screenshots/hour per visitor. Need more? ",
+    el("a", { href: FULL_TOOL_URL, target: "_blank", rel: "noopener", text: "Higher limits on mesmer.tools →" }),
+  ),
+);
+
+// Live-validate dimension fields as the user edits them.
+widthInput.addEventListener("input", () => validate(widthInput, widthHint, WIDTH));
+heightInput.addEventListener("input", () => validate(heightInput, heightHint, HEIGHT));
+
+/* --- Validation ----------------------------------------------------------- */
+
+/**
+ * Validates a dimension input. Empty means "use the default".
+ * Returns { value, ok }; on failure marks the hint red and value is null.
+ */
+function validate(input, hint, range) {
+  const raw = input.value.trim();
+  if (raw === "") {
+    resetHint(hint, range, "ok");
+    return { value: range.default, ok: true };
+  }
+  const n = Number(raw);
+  if (!Number.isInteger(n)) {
+    setHint(hint, "Enter a whole number of pixels.", true);
+    return { value: null, ok: false };
+  }
+  if (n < range.min || n > range.max) {
+    setHint(hint, `Must be between ${range.min} and ${range.max}px.`, true);
+    return { value: null, ok: false };
+  }
+  resetHint(hint, range, "ok");
+  return { value: n, ok: true };
+}
+
+function resetHint(hint, range, _state) {
+  const min = range === WIDTH ? WIDTH.min : HEIGHT.min;
+  const max = range === WIDTH ? WIDTH.max : HEIGHT.max;
+  setHint(hint, `Optional · ${min}–${max}, default ${range.default}`, false);
+}
+
+function setHint(hint, text, isError) {
+  hint.textContent = text;
+  hint.style.color = isError ? "#fca5a5" : "";
+}
+
+/* --- Submit --------------------------------------------------------------- */
+
+space.form.addEventListener("submit", async (e) => {
+  e.preventDefault();
+
+  const url = urlInput.value.trim();
+  if (!url) {
+    urlInput.focus();
+    return;
+  }
+
+  const w = validate(widthInput, widthHint, WIDTH);
+  const h = validate(heightInput, heightHint, HEIGHT);
+  if (!w.ok || !h.ok) {
+    (!w.ok ? widthInput : heightInput).focus();
+    return;
+  }
+
+  space.clearOutput();
+  space.setLoading(true, "Capturing screenshot…");
+  submitBtn.disabled = true;
+
+  try {
+    const data = await callRest(API_PATH, {
+      params: { url, width: w.value, height: h.value },
+    });
+    space.clearStatus();
+    renderResult(data);
+  } catch (err) {
+    space.clearOutput();
+    space.showError(err);
+  } finally {
+    submitBtn.disabled = false;
+  }
+});
+
+/* --- Result --------------------------------------------------------------- */
+
+function renderResult(data) {
+  // Success shape: { url, width, height, cached }
+  const imgUrl = data.url;
+  const width = data.width;
+  const height = data.height;
+
+  const filename = `screenshot-${width}x${height}.jpg`;
+
+  space.output.append(
+    el("div", { className: "ms-result-frame" },
+      el("img", {
+        src: imgUrl,
+        alt: `Screenshot of ${urlInput.value.trim()} at ${width}×${height}`,
+        loading: "lazy",
+      }),
+    ),
+    el("div", { className: "ms-result-actions" },
+      el("a", { className: "ms-btn-ghost", href: imgUrl, target: "_blank", rel: "noopener", text: "Open full size ↗" }),
+      el("a", { className: "ms-btn-ghost", href: imgUrl, download: filename, text: "Download" }),
+    ),
+    el("p", { className: "ms-meta",
+      text: `${width}×${height} · ${data.cached ? "served from cache" : "freshly captured"}` }),
+  );
+}

index.html

@@ -1,19 +1,34 @@
 <!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>Free Website Screenshot API — Capture Any URL as an Image</title>
+  <meta name="description" content="Capture a screenshot of any website URL as an image, free and with no signup. Paste a URL, pick a size, and get a JPG. Free website screenshot API for turning any URL to image online." />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="./shared/ui.css" />
+  <style>
+    /* Tool-specific touches layered on top of the shared theme. */
+    .ms-presets { display: flex; gap: 8px; flex-wrap: wrap; }
+    .ms-presets .ms-btn-ghost { padding: 8px 14px; font-size: 13px; font-weight: 600; }
+    .ms-api-note {
+      margin-top: 14px;
+      font-size: 12.5px;
+      color: var(--text-muted);
+    }
+    .ms-api-note code {
+      padding: 1px 5px;
+      border: 1px solid var(--border);
+      border-radius: 5px;
+      background: var(--bg-elevated);
+      color: var(--text-secondary);
+      font-size: 12px;
+    }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./app.js"></script>
+</body>
 </html>

shared/api-client.js

@@ -0,0 +1,114 @@
+/**
+ * Shared API client for all MesmerTools HuggingFace Spaces.
+ *
+ * Spaces are static pages that call the mesmer.tools API directly from the
+ * visitor's browser. That is deliberate: per-IP rate limits then apply per
+ * visitor instead of being shared through one Space backend. CORS on
+ * /api/v1/* is already `*`, so cross-origin fetches work with no proxy.
+ *
+ * Every helper throws `RateLimitError` on a 429 so the UI can surface the
+ * "use the full tool for higher limits" cross-sell, and `ApiError` otherwise.
+ */
+
+import { SITE } from "./config.js";
+
+export class RateLimitError extends Error {
+  constructor(message) {
+    super(message || "You've hit the free hourly limit.");
+    this.name = "RateLimitError";
+    this.isRateLimit = true;
+  }
+}
+
+export class ApiError extends Error {
+  constructor(message, status = 0) {
+    super(message || "Something went wrong.");
+    this.name = "ApiError";
+    this.status = status;
+  }
+}
+
+const DEFAULT_TIMEOUT = 60_000;
+
+async function doFetch(url, init, timeout) {
+  const ctrl = new AbortController();
+  const timer = setTimeout(() => ctrl.abort(), timeout ?? DEFAULT_TIMEOUT);
+  try {
+    return await fetch(url, { ...init, signal: ctrl.signal });
+  } catch (err) {
+    if (err && err.name === "AbortError") {
+      throw new ApiError(
+        "The request timed out. The free demo can be slow under load — try the full tool on mesmer.tools.",
+        408,
+      );
+    }
+    throw new ApiError("Network error. Check your connection and try again.", 0);
+  } finally {
+    clearTimeout(timer);
+  }
+}
+
+async function readJson(res) {
+  try {
+    return await res.json();
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * REST call. GET with `params`, or POST with a JSON `body`.
+ * @returns parsed JSON response
+ */
+export async function callRest(apiPath, { method = "GET", params, body, timeout } = {}) {
+  let url = SITE.origin + apiPath;
+  const init = { method, headers: {} };
+  if (params) {
+    const qs = new URLSearchParams(params).toString();
+    if (qs) url += (url.includes("?") ? "&" : "?") + qs;
+  }
+  if (body !== undefined) {
+    init.headers["Content-Type"] = "application/json";
+    init.body = JSON.stringify(body);
+  }
+  const res = await doFetch(url, init, timeout);
+  const data = await readJson(res);
+  if (res.status === 429) throw new RateLimitError(data && data.error);
+  if (!res.ok) throw new ApiError((data && data.error) || `Request failed (${res.status}).`, res.status);
+  return data;
+}
+
+/**
+ * tRPC v11 mutation (superjson transformer). Used by the logo space.
+ * Input is wrapped as `{ json: input }`; the unwrapped value is returned.
+ */
+export async function callTrpcMutation(trpcPath, input, { timeout } = {}) {
+  const res = await doFetch(
+    SITE.origin + trpcPath,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ json: input }),
+    },
+    timeout,
+  );
+  const data = await readJson(res);
+  if (res.status === 429) throw new RateLimitError(extractTrpcError(data));
+  if (!res.ok) throw new ApiError(extractTrpcError(data) || `Request failed (${res.status}).`, res.status);
+  // superjson success envelope: { result: { data: { json: <value> } } }
+  const out = data && data.result && data.result.data;
+  return out && typeof out === "object" && "json" in out ? out.json : out;
+}
+
+function extractTrpcError(data) {
+  if (!data || !data.error) return null;
+  // superjson error envelope: { error: { json: { message, data: {...} } } }
+  return (data.error.json && data.error.json.message) || data.error.message || null;
+}
+
+/** Fetch a generated JSON artifact (benchmark, voices) from mesmer.tools. */
+export async function fetchData(url, { timeout } = {}) {
+  const res = await doFetch(url, { method: "GET" }, timeout ?? 20_000);
+  if (!res.ok) throw new ApiError(`Could not load data (${res.status}).`, res.status);
+  return readJson(res);
+}

shared/config.js

@@ -0,0 +1,84 @@
+/**
+ * Single source of shared config for every MesmerTools HuggingFace Space.
+ * Authored once here and imported by all spaces so nothing is duplicated.
+ *
+ * Data that changes often (TTS voices, benchmark runs) is NOT hardcoded — it is
+ * fetched at runtime from generated JSON on mesmer.tools (see DATA) so the spaces
+ * always reflect the canonical constants in the main repo.
+ */
+
+export const SITE = {
+  name: "MesmerTools",
+  origin: "https://mesmer.tools",
+  cdn: "https://cdn.mesmer.tools",
+  tagline: "Free developer & AI tools.",
+};
+
+/**
+ * Per-endpoint contract.
+ * `freeLimitPerHour` is the per-IP free cap the API enforces (null = no hard
+ * hourly cap). Because each space calls the API directly from the visitor's
+ * browser, this limit is per-user — every HuggingFace visitor gets their own
+ * bucket. On a 429 the space points users at `fullToolPath` for higher limits.
+ */
+export const ENDPOINTS = {
+  screenshot: {
+    apiPath: "/api/v1/screenshot",
+    method: "GET",
+    freeLimitPerHour: 10,
+    fullToolPath: "/api-tools/screenshot",
+  },
+  siteLogo: {
+    apiPath: "/api/v1/site-logo",
+    method: "GET",
+    freeLimitPerHour: null, // cached server-side; no hard hourly cap
+    fullToolPath: "/api-tools/site-logo",
+  },
+  tts: {
+    apiPath: "/api/v1/tts",
+    method: "POST",
+    freeLimitPerHour: 20,
+    fullToolPath: "/api-tools/tts",
+  },
+  logo: {
+    trpcPath: "/api/trpc/logo.generate",
+    method: "POST",
+    freeLimitPerHour: 10,
+    fullToolPath: "/free-tools/ai-logo-maker",
+  },
+  benchmark: {
+    fullToolPath: "/benchmarks/ai-video-generation",
+  },
+};
+
+/**
+ * Live data endpoints. These serve JSON straight from the canonical constants
+ * in the main repo (no generated snapshot, no build step) so the spaces always
+ * reflect the current voices / benchmark dict. Edge-cached for an hour.
+ */
+export const DATA = {
+  ttsVoices: `${SITE.origin}/api/v1/tts/voices`,
+  videoBenchmark: `${SITE.origin}/api/v1/benchmarks/ai-video-generation`,
+};
+
+/**
+ * Cross-sell catalog shown in the footer strip of every space. These are the
+ * SEO backlinks to mesmer.tools. `key` matches ENDPOINTS keys so a space can
+ * exclude itself from its own strip.
+ */
+export const TOOL_CATALOG = [
+  { key: "logo", emoji: "🎨", name: "AI Logo Maker", desc: "Generate a brand logo from a prompt.", path: "/free-tools/ai-logo-maker" },
+  { key: "tts", emoji: "🔊", name: "Text to Speech", desc: "Natural AI voices, free.", path: "/api-tools/tts" },
+  { key: "screenshot", emoji: "📸", name: "Screenshot API", desc: "Capture any URL as an image.", path: "/api-tools/screenshot" },
+  { key: "siteLogo", emoji: "🏷️", name: "Site Logo / Favicon", desc: "Fetch any website's logo.", path: "/api-tools/site-logo" },
+  { key: "music", emoji: "🎵", name: "AI Music Maker", desc: "Generate short music clips.", path: "/free-tools/ai-music-maker" },
+  { key: "tokens", emoji: "🧮", name: "Token Price Calculator", desc: "Estimate LLM API costs.", path: "/free-tools/token-price-calculator" },
+  { key: "json", emoji: "{ }", name: "JSON Formatter", desc: "Format & validate JSON.", path: "/free-tools/json-formatter" },
+  { key: "synthid", emoji: "🔍", name: "Detect SynthID", desc: "Check images for AI watermarks.", path: "/free-tools/detect-synthid" },
+  { key: "benchmark", emoji: "🏁", name: "AI Video Benchmark", desc: "Which LLM codes the best video?", path: "/benchmarks/ai-video-generation" },
+];
+
+/** Absolute mesmer.tools URL for a path. */
+export function siteUrl(path) {
+  return `${SITE.origin}${path}`;
+}

shared/ui.css

@@ -0,0 +1,250 @@
+/* MesmerTools HuggingFace Spaces — shared dark theme.
+   Tokens mirror DESIGN.md so the spaces feel like the main site. */
+
+:root {
+  --bg: #0d0d0d;
+  --bg-elevated: #161616;
+  --bg-card: #1a1a1a;
+  --bg-card-hover: #222222;
+  --border: #2a2a2a;
+  --border-hover: #3a3a3a;
+  --amber: #f59e0b;
+  --amber-dim: rgba(245, 158, 11, 0.15);
+  --amber-glow: rgba(245, 158, 11, 0.35);
+  --sienna: #c2410c;
+  --text-primary: #eeeeee;
+  --text-secondary: #999999;
+  --text-muted: #666666;
+  --grad: linear-gradient(135deg, var(--amber), var(--sienna));
+  --radius: 10px;
+  --maxw: 880px;
+}
+
+* { box-sizing: border-box; }
+
+html { -webkit-text-size-adjust: 100%; }
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text-primary);
+  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  line-height: 1.5;
+}
+
+a { color: var(--amber); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* --- Header --------------------------------------------------------- */
+.ms-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  height: 56px;
+  padding: 0 20px;
+  background: rgba(13, 13, 13, 0.85);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid var(--border);
+}
+.ms-brand { display: flex; align-items: center; gap: 9px; color: var(--text-primary); }
+.ms-brand:hover { text-decoration: none; }
+.ms-brand-mark {
+  display: grid;
+  place-items: center;
+  width: 26px; height: 26px;
+  border-radius: 7px;
+  background: var(--grad);
+  color: var(--bg);
+  font-weight: 800;
+  font-size: 15px;
+}
+.ms-brand-name { font-weight: 700; letter-spacing: -0.3px; }
+.ms-header-link { color: var(--text-secondary); font-size: 13px; font-weight: 500; }
+.ms-header-link:hover { color: var(--amber); text-decoration: none; }
+
+/* --- Layout --------------------------------------------------------- */
+.ms-main {
+  max-width: var(--maxw);
+  margin: 0 auto;
+  padding: 40px 20px 8px;
+}
+
+.ms-hero { text-align: center; margin-bottom: 28px; }
+.ms-hero-emoji { font-size: 40px; line-height: 1; margin-bottom: 12px; }
+.ms-title {
+  margin: 0 0 10px;
+  font-size: clamp(26px, 5vw, 38px);
+  font-weight: 800;
+  letter-spacing: -0.8px;
+  background: var(--grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+.ms-subtitle { margin: 0 auto; max-width: 620px; color: var(--text-secondary); font-size: 16px; }
+.ms-intro { margin: 12px auto 0; max-width: 620px; color: var(--text-muted); font-size: 14px; }
+.ms-limit-note {
+  display: inline-block;
+  margin-top: 16px;
+  padding: 5px 12px;
+  border: 1px solid var(--border);
+  border-radius: 20px;
+  background: var(--bg-elevated);
+  color: var(--text-muted);
+  font-size: 12px;
+}
+
+/* --- Card ----------------------------------------------------------- */
+.ms-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 24px;
+}
+
+/* --- Forms (generic, reusable by every space) ----------------------- */
+.ms-form { display: flex; flex-direction: column; gap: 16px; }
+.ms-field { display: flex; flex-direction: column; gap: 6px; }
+.ms-field label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
+.ms-field .ms-hint { font-size: 12px; color: var(--text-muted); }
+.ms-row { display: flex; gap: 12px; flex-wrap: wrap; }
+.ms-row > .ms-field { flex: 1 1 160px; }
+
+.ms-input, .ms-textarea, .ms-select {
+  width: 100%;
+  padding: 11px 13px;
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-family: inherit;
+  font-size: 14px;
+  transition: border-color 0.15s, box-shadow 0.15s;
+}
+.ms-textarea { resize: vertical; min-height: 110px; }
+.ms-input:focus, .ms-textarea:focus, .ms-select:focus {
+  outline: none;
+  border-color: var(--amber);
+  box-shadow: 0 0 0 3px var(--amber-dim);
+}
+.ms-input::placeholder, .ms-textarea::placeholder { color: var(--text-muted); }
+.ms-select { appearance: none; cursor: pointer; }
+
+/* --- Buttons -------------------------------------------------------- */
+.ms-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 12px 20px;
+  border: none;
+  border-radius: 8px;
+  background: var(--grad);
+  color: #fff;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 700;
+  cursor: pointer;
+  transition: transform 0.15s, opacity 0.15s, filter 0.15s;
+}
+.ms-btn:hover { filter: brightness(1.08); }
+.ms-btn:active { transform: translateY(1px); }
+.ms-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
+.ms-btn-ghost {
+  background: var(--bg-elevated);
+  color: var(--text-primary);
+  border: 1px solid var(--border);
+}
+.ms-btn-ghost:hover { border-color: var(--border-hover); filter: none; }
+
+.ms-char-count { font-size: 12px; color: var(--text-muted); text-align: right; }
+
+/* --- Status banners ------------------------------------------------- */
+.ms-status:empty { display: none; }
+.ms-status { margin-top: 16px; }
+.ms-banner {
+  padding: 12px 14px;
+  border-radius: 8px;
+  font-size: 14px;
+  border: 1px solid var(--border);
+}
+.ms-banner-error { background: rgba(220, 38, 38, 0.1); border-color: rgba(220, 38, 38, 0.4); color: #fca5a5; }
+.ms-banner-limit { background: var(--amber-dim); border-color: var(--amber-glow); color: #fcd9a0; }
+.ms-banner-limit .ms-banner-cta { display: inline-block; margin-top: 4px; font-weight: 700; }
+.ms-banner-loading { display: flex; align-items: center; gap: 10px; background: var(--bg-elevated); color: var(--text-secondary); }
+.ms-spinner {
+  width: 16px; height: 16px;
+  border: 2px solid var(--border-hover);
+  border-top-color: var(--amber);
+  border-radius: 50%;
+  animation: ms-spin 0.7s linear infinite;
+}
+@keyframes ms-spin { to { transform: rotate(360deg); } }
+
+/* --- Output --------------------------------------------------------- */
+.ms-output:empty { display: none; }
+.ms-output { margin-top: 18px; }
+.ms-output img, .ms-output video { max-width: 100%; border-radius: 10px; display: block; }
+.ms-result-frame {
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  overflow: hidden;
+  background: var(--bg-elevated);
+}
+.ms-result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
+.ms-meta { margin-top: 10px; font-size: 12px; color: var(--text-muted); }
+.ms-audio { width: 100%; margin-top: 6px; }
+
+/* --- Footer cross-sell ---------------------------------------------- */
+.ms-footer {
+  max-width: var(--maxw);
+  margin: 48px auto 0;
+  padding: 28px 20px 56px;
+  border-top: 1px solid var(--border);
+}
+.ms-footer-title {
+  margin: 0 0 16px;
+  font-size: 13px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.6px;
+  color: var(--text-muted);
+}
+.ms-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 12px;
+}
+.ms-tool-card {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+  padding: 14px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s, background 0.2s;
+}
+.ms-tool-card:hover {
+  transform: translateY(-3px);
+  background: var(--bg-card-hover);
+  border-color: var(--amber-glow);
+  text-decoration: none;
+}
+.ms-tool-emoji { font-size: 20px; line-height: 1.3; }
+.ms-tool-text { display: flex; flex-direction: column; gap: 2px; }
+.ms-tool-name { color: var(--text-primary); font-weight: 600; font-size: 14px; }
+.ms-tool-desc { color: var(--text-secondary); font-size: 12.5px; }
+.ms-powered { margin: 22px 0 0; color: var(--text-muted); font-size: 12.5px; }
+
+/* --- Responsive ----------------------------------------------------- */
+@media (max-width: 560px) {
+  .ms-main { padding-top: 28px; }
+  .ms-card { padding: 18px; }
+  .ms-grid { grid-template-columns: 1fr; }
+}

shared/ui.js

@@ -0,0 +1,166 @@
+/**
+ * Shared page chrome for all MesmerTools HuggingFace Spaces.
+ *
+ * `createSpace()` builds the header, hero, a card with a <form> + output slot,
+ * a status area (errors + the rate-limit cross-sell banner), and the footer
+ * "more free tools" strip (the SEO backlinks). A tool space only has to fill
+ * the returned `form` and `output` elements and wire its submit handler.
+ */
+
+import { SITE, ENDPOINTS, TOOL_CATALOG, siteUrl } from "./config.js";
+import { RateLimitError } from "./api-client.js";
+
+/** Tiny hyperscript helper. `props` supports className, text, html, on*, attrs, dataset, style. */
+export function el(tag, props = {}, ...children) {
+  const node = document.createElement(tag);
+  for (const [key, value] of Object.entries(props || {})) {
+    if (value == null) continue;
+    if (key === "className") node.className = value;
+    else if (key === "text") node.textContent = value;
+    else if (key === "html") node.innerHTML = value;
+    else if (key === "dataset") Object.assign(node.dataset, value);
+    else if (key === "style" && typeof value === "object") Object.assign(node.style, value);
+    else if (key.startsWith("on") && typeof value === "function") {
+      node.addEventListener(key.slice(2).toLowerCase(), value);
+    } else node.setAttribute(key, value);
+  }
+  for (const child of children.flat()) {
+    if (child == null || child === false) continue;
+    node.appendChild(typeof child === "string" ? document.createTextNode(child) : child);
+  }
+  return node;
+}
+
+function header() {
+  return el("header", { className: "ms-header" },
+    el("a", { className: "ms-brand", href: SITE.origin, target: "_blank", rel: "noopener" },
+      el("span", { className: "ms-brand-mark", text: "M" }),
+      el("span", { className: "ms-brand-name", text: SITE.name }),
+    ),
+    el("a", { className: "ms-header-link", href: SITE.origin, target: "_blank", rel: "noopener",
+      html: "All tools <span aria-hidden=\"true\">↗</span>" }),
+  );
+}
+
+function crossSell(toolKey) {
+  const items = TOOL_CATALOG.filter((t) => t.key !== toolKey);
+  return el("footer", { className: "ms-footer" },
+    el("p", { className: "ms-footer-title", text: "More free tools on MesmerTools" }),
+    el("div", { className: "ms-grid" },
+      ...items.map((t) =>
+        el("a", { className: "ms-tool-card", href: siteUrl(t.path), target: "_blank", rel: "noopener" },
+          el("span", { className: "ms-tool-emoji", text: t.emoji }),
+          el("span", { className: "ms-tool-text" },
+            el("span", { className: "ms-tool-name", text: t.name }),
+            el("span", { className: "ms-tool-desc", text: t.desc }),
+          ),
+        ),
+      ),
+    ),
+    el("p", { className: "ms-powered" },
+      "Powered by ",
+      el("a", { href: SITE.origin, target: "_blank", rel: "noopener", text: "mesmer.tools" }),
+      " — runs on the public MesmerTools API.",
+    ),
+  );
+}
+
+/**
+ * @param {object} opts
+ * @param {string} opts.toolKey   key in ENDPOINTS / TOOL_CATALOG (also excluded from the strip)
+ * @param {string} opts.emoji
+ * @param {string} opts.title
+ * @param {string} opts.subtitle
+ * @param {string} [opts.intro]   optional longer paragraph under the subtitle
+ * @returns {{form: HTMLFormElement, output: HTMLElement, setLoading: Function,
+ *            showError: Function, showRateLimit: Function, clearStatus: Function,
+ *            clearOutput: Function, limitNote: string}}
+ */
+export function createSpace(opts) {
+  const { toolKey, emoji, title, subtitle, intro } = opts;
+  const endpoint = ENDPOINTS[toolKey] || {};
+  const limit = endpoint.freeLimitPerHour;
+  const limitNote = limit
+    ? `${limit} free requests/hour per user · higher limits on mesmer.tools`
+    : `Free · backed by mesmer.tools`;
+
+  const root = document.getElementById("app") || document.body;
+
+  const status = el("div", { className: "ms-status", role: "status", "aria-live": "polite" });
+  const form = el("form", { className: "ms-form" });
+  const output = el("div", { className: "ms-output" });
+
+  const hero = el("section", { className: "ms-hero" },
+    el("div", { className: "ms-hero-emoji", text: emoji }),
+    el("h1", { className: "ms-title", text: title }),
+    el("p", { className: "ms-subtitle", text: subtitle }),
+    intro ? el("p", { className: "ms-intro", text: intro }) : null,
+    el("p", { className: "ms-limit-note", text: limitNote }),
+  );
+
+  const card = el("section", { className: "ms-card" }, form, status, output);
+  const main = el("main", { className: "ms-main" }, hero, card);
+
+  root.appendChild(header());
+  root.appendChild(main);
+  root.appendChild(crossSell(toolKey));
+
+  function clearStatus() {
+    status.replaceChildren();
+  }
+
+  function showRateLimit() {
+    const full = siteUrl(endpoint.fullToolPath || "/");
+    const msg = limit
+      ? `You've used your ${limit} free requests this hour. Each visitor gets their own quota — `
+      : `You've hit a temporary limit — `;
+    clearStatus();
+    status.appendChild(
+      el("div", { className: "ms-banner ms-banner-limit" },
+        el("strong", { text: "Free limit reached. " }),
+        msg,
+        el("a", { className: "ms-banner-cta", href: full, target: "_blank", rel: "noopener",
+          text: "use the full tool on mesmer.tools →" }),
+      ),
+    );
+  }
+
+  /** Renders a RateLimitError as the cross-sell banner; anything else as an error. */
+  function showError(err) {
+    if (err instanceof RateLimitError || (err && err.isRateLimit)) {
+      showRateLimit();
+      return;
+    }
+    const text = typeof err === "string" ? err : (err && err.message) || "Something went wrong.";
+    clearStatus();
+    status.appendChild(el("div", { className: "ms-banner ms-banner-error", text }));
+  }
+
+  function setLoading(isLoading, label) {
+    card.classList.toggle("is-loading", !!isLoading);
+    if (isLoading) {
+      clearStatus();
+      status.appendChild(
+        el("div", { className: "ms-banner ms-banner-loading" },
+          el("span", { className: "ms-spinner", "aria-hidden": "true" }),
+          el("span", { text: label || "Working…" }),
+        ),
+      );
+    } else {
+      clearStatus();
+    }
+  }
+
+  function clearOutput() {
+    output.replaceChildren();
+  }
+
+  return { form, output, status, setLoading, showError, showRateLimit, clearStatus, clearOutput, limitNote };
+}
+
+/** Standalone footer for non-tool spaces (e.g. the benchmark) that build their own body. */
+export function mountChrome(toolKey) {
+  const root = document.getElementById("app") || document.body;
+  root.prepend(header());
+  root.appendChild(crossSell(toolKey));
+}