Spaces:

Logolabs
/

agate-webgpu

Running

Stefatorus Claude Opus 5.5 commited on 4 days ago

Commit

8d1a72e

1 Parent(s): 146ba97

Why Agate: scope (glyph/symbol and vector-native font generation), released to share our architectural efforts

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018EtDckYfNgMbkwqVmTsdha

Files changed (2) hide show

README.md +113 -105
index.html +147 -146

README.md CHANGED Viewed

@@ -1,105 +1,113 @@
----
-title: Agate WebGPU
-colorFrom: red
-colorTo: gray
-sdk: static
-app_file: index.html
-pinned: false
-license: mit
-short_description: Agate text-to-image, 100% in your browser on WebGPU
-custom_headers:
-  cross-origin-embedder-policy: require-corp
-  cross-origin-opener-policy: same-origin
-  cross-origin-resource-policy: cross-origin
-models:
-- Logolabs/agate-preview-003
-- Logolabs/agate-preview-002
-- Logolabs/agate-preview-001
----
-# Agate WebGPU
-LogoLabs' Agate text-to-image models (a ~0.19B flow generator with a 68M text encoder) running as a static page.
-The tokenizer, text encoder, 50-step flow sampler with classifier-free guidance and the TAESD decoder all run
-on your own GPU through WebGPU (onnxruntime-web).
-**Runs entirely in your browser — prompts never leave your machine.** There is no server and no API call.
-## Models
-Pick a model at the top of the page. A first visit gets Preview 003; the page remembers your last choice in
-this browser.
-| model | resolution | notes | download |
-|---|---|---|---|
-| [Preview 003](https://huggingface.co/Logolabs/agate-preview-003) | 512 px (or 256) | multi-resolution model; prompt pipeline: normaliser, quoted text spelled out, object counts coded, "no X" moved to the negative prompt; SD3 timestep shift 2 at 512 | 531 MB (both resolutions share one weights file) |
-| [Preview 002](https://huggingface.co/Logolabs/agate-preview-002) | 256 px | same network as 001, trained longer | 530 MB |
-| [Preview 001](https://huggingface.co/Logolabs/agate-preview-001) | 256 px | the first preview | 530 MB |
-Each model is downloaded once and kept in the browser's Cache Storage. The files live in each release's model repo
-under `webgpu/v2/` (e.g. [Logolabs/agate-preview-003/webgpu/v2](https://huggingface.co/Logolabs/agate-preview-003/tree/main/webgpu/v2)),
-with a `manifest.json` holding sizes and sha256s (the cache keys). `models/` in this Space is the original 001 build
-(without the plan output), kept for `?models=./models/`.
-## Show thinker
-Agate's thinker lays the picture out on a 16 × 16 grid (the plan) that steers the renderer. With **Show thinker**
-(on by default; it does not slow sampling: previews are read back asynchronously and coloured in a Web Worker) the page shows, at every step, the plan of the conditional branch as
-colours and the image the model currently expects (x₁ = z + (1 − t)·v, with the SD latent→RGB approximation) —
-the same live preview as the [ComfyUI nodes](https://github.com/logolabs/agate-comfyui): the plan's cells are
-projected on its top three principal components, fitted at the first step with the 2% / 98% quantiles fixed then,
-so a colour keeps its meaning while the plan evolves.
-## Requirements
-A browser with WebGPU: a recent Chrome or Edge (113+). Safari and Firefox may lack WebGPU or need it enabled in
-their settings; without it the page offers a WebAssembly (CPU) path that works but takes minutes per image.
-## Speed and accuracy (RTX 4060 laptop, Edge, WebGPU, warm, 50 steps)
-| model | per step (CFG batch of 2) | image | before (2026-09-29 morning) |
-|---|---|---|---|
-| 003 at 512 px | ~161 ms | **~8.1 s** (Fast, 25 steps: ~4.1 s) | 275 ms, 14 s |
-| 003 at 256 px | ~70 ms | ~3.5 s | 120 ms, 6.1 s |
-| 002 / 001 | ~65 ms | ~3.3 s | 105 ms, 5.3 s |
-How: each step is one graph run that also does the CFG mix and the Euler update, so the latent never leaves the
-GPU between steps (the only readback is the final latent); the network computes in **fp16** (WebGPU `shader-f16`;
-WGSL has no bf16), with fp32 kept for the graph I/O, the CFG/Euler arithmetic, the timestep / resolution / count
-embeddings (sin(1000·t·f) needs fp32) and `Range`; the transposed-conv upsamplers run as 1x1 conv + depth-to-space.
-The thinker preview never blocks sampling: its tensors are downloaded asynchronously, coloured in a Web Worker,
-and frames are dropped while one is pending (measured cost: none).
-fp16 compute moves the result slightly: against the fp32 PyTorch reference with the same initial noise, 001 is
-within 16/255 (PSNR 48 dB), 002 36 dB, 003 at 256 px 42 dB and 003 at 512 px 31 dB (mean 0.6-1.8/255). For scale,
-the Python package's own CUDA path (bf16) is 14 dB from that fp32 reference for the same noise. Run `?parity=1`.
-Seeds use a JavaScript PRNG, so a seed gives the same image in every browser, but not the same image as the
-PyTorch pipeline with that seed. The Python packages decode with the full SD-VAE by default; this page uses TAESD.
-## AI-generated content marking
-Every image the page makes is marked as AI-generated (EU AI Act Art. 50(2)), with the same marks as the Python
-packages:
-- an invisible watermark in the pixels: [invisible-watermark](https://github.com/ShieldMnt/invisible-watermark)'s
-  `dwtDctSvd` method, ported to JavaScript bit for bit, with the 64-bit payload `AGATE` + release
-  (`AGATE003`, ...). `agate.detect_watermark(img)` from the model packages reads it;
-- in the saved PNG: text fields `ai_generated`, `generator`, `model` and `watermark`. The prompt is not written;
-- a visible "AI-generated" note next to each result.
-Neither mark is tamper-proof: screenshots and re-encodes drop the metadata, and heavy edits can remove the
-watermark. If you publish images made here, label them as AI-generated.
-Query parameters: `?v=001|002|003` picks a model, `?res=256` picks 003's resolution, `?autoload=1` loads the
-model immediately, `?ep=wasm` forces the CPU backend, `?parity=1` runs the parity self-test, `?golden=1` checks
-003's prompt pipeline against the Python package's output (38 prompts).
-## Links
-- [logolabs.org](https://logolabs.org)
-- [huggingface.co/Logolabs](https://huggingface.co/Logolabs)
-Licence: MIT.
-We acknowledge EuroHPC JU for awarding the project ID EHPC-AIF-2026PG01-907 access to resources on
-Arrhenius GPU at NAISS, Sweden.

+---
+title: Agate WebGPU
+colorFrom: red
+colorTo: gray
+sdk: static
+app_file: index.html
+pinned: false
+license: mit
+short_description: Agate text-to-image, 100% in your browser on WebGPU
+custom_headers:
+  cross-origin-embedder-policy: require-corp
+  cross-origin-opener-policy: same-origin
+  cross-origin-resource-policy: cross-origin
+models:
+- Logolabs/agate-preview-003
+- Logolabs/agate-preview-002
+- Logolabs/agate-preview-001
+---
+# Agate WebGPU
+LogoLabs' Agate text-to-image models (a ~0.19B flow generator with a 68M text encoder) running as a static page.
+The tokenizer, text encoder, 50-step flow sampler with classifier-free guidance and the TAESD decoder all run
+on your own GPU through WebGPU (onnxruntime-web).
+**Runs entirely in your browser — prompts never leave your machine.** There is no server and no API call.
+**Why we built Agate.** Agate is LogoLabs' search for the best architecture for small-scale image generation. It is
+not meant as a general image model: it is the groundwork for glyph and symbol generation, so that we can generate
+vector-native fonts to go with the wordmarks we make at LogoLabs. Font and SVG generation have almost no established
+benchmarks, so we tested the architecture on natural images, where GenEval, Qwen-Image-Bench and FID exist, as a proxy
+for architectural performance. Next, we plan to build on it to generate SVGs with our vectoriser, Inkvec, and to
+improve Inkvec's prior with flow matching to help trace the fonts. We decided to release Agate to share
+these architectural efforts.
+## Models
+Pick a model at the top of the page. A first visit gets Preview 003; the page remembers your last choice in
+this browser.
+| model | resolution | notes | download |
+|---|---|---|---|
+| [Preview 003](https://huggingface.co/Logolabs/agate-preview-003) | 512 px (or 256) | multi-resolution model; prompt pipeline: normaliser, quoted text spelled out, object counts coded, "no X" moved to the negative prompt; SD3 timestep shift 2 at 512 | 531 MB (both resolutions share one weights file) |
+| [Preview 002](https://huggingface.co/Logolabs/agate-preview-002) | 256 px | same network as 001, trained longer | 530 MB |
+| [Preview 001](https://huggingface.co/Logolabs/agate-preview-001) | 256 px | the first preview | 530 MB |
+Each model is downloaded once and kept in the browser's Cache Storage. The files live in each release's model repo
+under `webgpu/v2/` (e.g. [Logolabs/agate-preview-003/webgpu/v2](https://huggingface.co/Logolabs/agate-preview-003/tree/main/webgpu/v2)),
+with a `manifest.json` holding sizes and sha256s (the cache keys). `models/` in this Space is the original 001 build
+(without the plan output), kept for `?models=./models/`.
+## Show thinker
+Agate's thinker lays the picture out on a 16 × 16 grid (the plan) that steers the renderer. With **Show thinker**
+(on by default; it does not slow sampling: previews are read back asynchronously and coloured in a Web Worker) the page shows, at every step, the plan of the conditional branch as
+colours and the image the model currently expects (x₁ = z + (1 − t)·v, with the SD latent→RGB approximation) —
+the same live preview as the [ComfyUI nodes](https://github.com/logolabs/agate-comfyui): the plan's cells are
+projected on its top three principal components, fitted at the first step with the 2% / 98% quantiles fixed then,
+so a colour keeps its meaning while the plan evolves.
+## Requirements
+A browser with WebGPU: a recent Chrome or Edge (113+). Safari and Firefox may lack WebGPU or need it enabled in
+their settings; without it the page offers a WebAssembly (CPU) path that works but takes minutes per image.
+## Speed and accuracy (RTX 4060 laptop, Edge, WebGPU, warm, 50 steps)
+| model | per step (CFG batch of 2) | image | before (2026-09-29 morning) |
+|---|---|---|---|
+| 003 at 512 px | ~161 ms | **~8.1 s** (Fast, 25 steps: ~4.1 s) | 275 ms, 14 s |
+| 003 at 256 px | ~70 ms | ~3.5 s | 120 ms, 6.1 s |
+| 002 / 001 | ~65 ms | ~3.3 s | 105 ms, 5.3 s |
+How: each step is one graph run that also does the CFG mix and the Euler update, so the latent never leaves the
+GPU between steps (the only readback is the final latent); the network computes in **fp16** (WebGPU `shader-f16`;
+WGSL has no bf16), with fp32 kept for the graph I/O, the CFG/Euler arithmetic, the timestep / resolution / count
+embeddings (sin(1000·t·f) needs fp32) and `Range`; the transposed-conv upsamplers run as 1x1 conv + depth-to-space.
+The thinker preview never blocks sampling: its tensors are downloaded asynchronously, coloured in a Web Worker,
+and frames are dropped while one is pending (measured cost: none).
+fp16 compute moves the result slightly: against the fp32 PyTorch reference with the same initial noise, 001 is
+within 16/255 (PSNR 48 dB), 002 36 dB, 003 at 256 px 42 dB and 003 at 512 px 31 dB (mean 0.6-1.8/255). For scale,
+the Python package's own CUDA path (bf16) is 14 dB from that fp32 reference for the same noise. Run `?parity=1`.
+Seeds use a JavaScript PRNG, so a seed gives the same image in every browser, but not the same image as the
+PyTorch pipeline with that seed. The Python packages decode with the full SD-VAE by default; this page uses TAESD.
+## AI-generated content marking
+Every image the page makes is marked as AI-generated (EU AI Act Art. 50(2)), with the same marks as the Python
+packages:
+- an invisible watermark in the pixels: [invisible-watermark](https://github.com/ShieldMnt/invisible-watermark)'s
+  `dwtDctSvd` method, ported to JavaScript bit for bit, with the 64-bit payload `AGATE` + release
+  (`AGATE003`, ...). `agate.detect_watermark(img)` from the model packages reads it;
+- in the saved PNG: text fields `ai_generated`, `generator`, `model` and `watermark`. The prompt is not written;
+- a visible "AI-generated" note next to each result.
+Neither mark is tamper-proof: screenshots and re-encodes drop the metadata, and heavy edits can remove the
+watermark. If you publish images made here, label them as AI-generated.
+Query parameters: `?v=001|002|003` picks a model, `?res=256` picks 003's resolution, `?autoload=1` loads the
+model immediately, `?ep=wasm` forces the CPU backend, `?parity=1` runs the parity self-test, `?golden=1` checks
+003's prompt pipeline against the Python package's output (38 prompts).
+## Links
+- [logolabs.org](https://logolabs.org)
+- [huggingface.co/Logolabs](https://huggingface.co/Logolabs)
+Licence: MIT.
+We acknowledge EuroHPC JU for awarding the project ID EHPC-AIF-2026PG01-907 access to resources on
+Arrhenius GPU at NAISS, Sweden.

index.html CHANGED Viewed

@@ -1,146 +1,147 @@
-<!doctype html>
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>Agate — in your browser</title>
-<meta name="description" content="Agate Preview 001, 002 and 003, LogoLabs' 0.26B text-to-image models, running entirely in your browser on WebGPU.">
-<link rel="icon" href="assets/agate-a.svg" type="image/svg+xml">
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Inter+Tight:wght@700;800&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="css/style.css">
-</head>
-<body>
-<div class="page">
-  <header class="mast">
-    <div class="mast-left">
-      <img class="lockup" src="assets/agate-lockup.svg" alt="Agate">
-      <div class="mast-meta">
-        <span class="label"><i class="sq"></i><span id="mast-version">Preview 003</span></span>
-        <span class="label dim" id="mast-spec">0.26B · text-to-image · 512 px</span>
-      </div>
-    </div>
-    <a class="imprint" href="https://logolabs.org" target="_blank" rel="noopener">
-      <img src="assets/logolabs-mark.svg" alt="" width="22" height="30">
-      <span class="label">LogoLabs</span>
-    </a>
-  </header>
-  <hr class="rule">
-  <section class="intro">
-    <h1>Agate, in your browser.</h1>
-    <p>A 0.19B-parameter flow model with a 68M text encoder, running on your own GPU through WebGPU.
-      The first visit downloads the chosen model once (<span id="dl-size">about 530 MB</span>); after that it loads from the browser cache.</p>
-  </section>
-  <section class="versions" aria-labelledby="ver-label">
-    <span class="label" id="ver-label">Model</span>
-    <div class="seg" role="radiogroup" aria-labelledby="ver-label" id="versions"></div>
-    <p class="ver-note" id="ver-note"></p>
-  </section>
-  <div id="nogpu" class="notice" hidden>
-    <span class="label"><i class="sq red"></i>WebGPU unavailable</span>
-    <p id="nogpu-why"></p>
-    <p>Agate needs WebGPU for usable speed: use a recent Chrome or Edge (113+) on Windows, macOS or ChromeOS,
-      or Chrome on Android 121+; on Linux and in Firefox/Safari WebGPU may have to be enabled in the browser's flags.
-      You can still run it on the CPU (WebAssembly) — correct, but several minutes per image (far longer at 512 px).</p>
-    <button id="use-wasm" class="btn ghost">Run on CPU instead</button>
-  </div>
-  <main class="grid">
-    <section class="panel controls">
-      <label class="label" for="prompt">Prompt</label>
-      <textarea id="prompt" rows="3" spellcheck="false">a green teapot and a red cup on a table</textarea>
-      <div class="examples" id="examples">
-        <span class="label dim">Try</span>
-      </div>
-      <label class="label" for="negative">Avoid <span class="dim" id="neg-hint">(optional negative prompt)</span></label>
-      <input id="negative" type="text" spellcheck="false" placeholder="e.g. text, blur">
-      <div class="row">
-        <div class="field">
-          <label class="label" for="seed">Seed</label>
-          <div class="seed-row">
-            <input id="seed" type="number" min="0" max="4294967295" step="1" value="0">
-            <button id="dice" class="btn icon" title="Random seed" aria-label="Random seed">⟳</button>
-          </div>
-        </div>
-        <div class="field">
-          <label class="label" for="steps">Steps <b id="steps-v">50</b>
-            <span class="toggle fast" title="25 steps: about twice as fast; detail holds, the layout can change"><input type="checkbox" id="fast"> Fast</span></label>
-          <input id="steps" type="range" min="4" max="50" step="1" value="50">
-        </div>
-        <div class="field">
-          <label class="label" for="cfg">CFG <b id="cfg-v">3.0</b></label>
-          <input id="cfg" type="range" min="1" max="8" step="0.5" value="3">
-        </div>
-      </div>
-      <div class="row res-row" id="res-row" hidden>
-        <div class="field">
-          <span class="label">Resolution</span>
-          <div class="seg small" role="radiogroup" id="res"></div>
-        </div>
-      </div>
-      <button id="go" class="btn primary" disabled>Load model</button>
-      <div class="progress" aria-live="polite">
-        <div class="bar"><div id="bar-fill"></div></div>
-        <div class="progress-text"><span id="status" class="label">Idle</span><span id="status-r" class="label dim"></span></div>
-      </div>
-      <p class="prepared" id="prepared" hidden></p>
-    </section>
-    <section class="panel output">
-      <div class="out-head">
-        <span class="label"><i class="sq"></i><span id="out-label">Output · 512 × 512</span></span>
-        <span class="toggles">
-          <label class="label toggle" title="Show the thinker's 16 x 16 plan and the expected final image at every step"><input type="checkbox" id="show-thinker" checked> Show thinker</label>
-          <label class="label toggle"><input type="checkbox" id="crisp"> Crisp pixels</label>
-        </span>
-      </div>
-      <div class="frame" id="frame">
-        <canvas id="canvas" width="512" height="512"></canvas>
-        <div class="placeholder" id="placeholder">
-          <img src="assets/agate-a.svg" alt="">
-        </div>
-      </div>
-      <div class="thinker" id="thinker" hidden>
-        <figure><canvas id="plan-canvas" width="16" height="16"></canvas>
-          <figcaption class="label dim">Thinker plan · 16 × 16</figcaption></figure>
-        <figure><canvas id="pred-canvas" width="32" height="32"></canvas>
-          <figcaption class="label dim">Expected · <span id="thinker-step">0 / 0</span></figcaption></figure>
-        <p class="thinker-note">The thinker lays the picture out on a 16 × 16 grid before the renderer paints it.
-          Colours are the plan's three main directions (fixed at the first step, as in the ComfyUI nodes); the
-          expected image is x₁ = z + (1 − t)·v, shown with the SD latent→RGB approximation.</p>
-      </div>
-      <p class="ai-note" id="ai-note" hidden><i class="sq red"></i><span><b>AI-generated image.</b>
-        Made by <span id="ai-model">Agate Preview 003</span>; it carries an invisible watermark and, when saved, PNG provenance metadata (no prompt).</span></p>
-      <div class="out-foot">
-        <dl class="timings" id="timings"></dl>
-        <a id="save" class="btn ghost small" download="agate.png" hidden>Save PNG</a>
-      </div>
-    </section>
-  </main>
-  <div id="parity" class="notice" hidden></div>
-  <hr class="rule">
-  <footer class="foot">
-    <p class="strong">Runs entirely in your browser on WebGPU — nothing leaves your machine.</p>
-    <p class="small-print">Every image made here is marked as AI-generated (EU AI Act Art. 50): an invisible watermark in the
-      pixels (invisible-watermark “dwtDctSvd”, payload AGATE + release) and, in the saved PNG, text fields
-      <code>ai_generated</code>, <code>generator</code>, <code>model</code>. Neither survives every edit; please label AI images you publish.</p>
-    <p class="label dim">
-      <a href="https://logolabs.org" target="_blank" rel="noopener">logolabs.org</a> ·
-      <a href="https://huggingface.co/Logolabs" target="_blank" rel="noopener">huggingface.co/Logolabs</a> ·
-      MIT licence · <span id="backend">backend: —</span>
-    </p>
-  </footer>
-</div>
-<script src="js/config.js"></script>
-<script type="module" src="js/app.js"></script>
-</body>
-</html>

+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Agate — in your browser</title>
+<meta name="description" content="Agate Preview 001, 002 and 003, LogoLabs' 0.26B text-to-image models, running entirely in your browser on WebGPU.">
+<link rel="icon" href="assets/agate-a.svg" type="image/svg+xml">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link crossorigin="anonymous" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600&family=Inter+Tight:wght@700;800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+<div class="page">
+  <header class="mast">
+    <div class="mast-left">
+      <img class="lockup" src="assets/agate-lockup.svg" alt="Agate">
+      <div class="mast-meta">
+        <span class="label"><i class="sq"></i><span id="mast-version">Preview 003</span></span>
+        <span class="label dim" id="mast-spec">0.26B · text-to-image · 512 px</span>
+      </div>
+    </div>
+    <a class="imprint" href="https://logolabs.org" target="_blank" rel="noopener">
+      <img src="assets/logolabs-mark.svg" alt="" width="22" height="30">
+      <span class="label">LogoLabs</span>
+    </a>
+  </header>
+  <hr class="rule">
+  <section class="intro">
+    <h1>Agate, in your browser.</h1>
+    <p>A 0.19B-parameter flow model with a 68M text encoder, running on your own GPU through WebGPU.
+      The first visit downloads the chosen model once (<span id="dl-size">about 530 MB</span>); after that it loads from the browser cache.</p>
+  </section>
+  <section class="versions" aria-labelledby="ver-label">
+    <span class="label" id="ver-label">Model</span>
+    <div class="seg" role="radiogroup" aria-labelledby="ver-label" id="versions"></div>
+    <p class="ver-note" id="ver-note"></p>
+  </section>
+  <div id="nogpu" class="notice" hidden>
+    <span class="label"><i class="sq red"></i>WebGPU unavailable</span>
+    <p id="nogpu-why"></p>
+    <p>Agate needs WebGPU for usable speed: use a recent Chrome or Edge (113+) on Windows, macOS or ChromeOS,
+      or Chrome on Android 121+; on Linux and in Firefox/Safari WebGPU may have to be enabled in the browser's flags.
+      You can still run it on the CPU (WebAssembly) — correct, but several minutes per image (far longer at 512 px).</p>
+    <button id="use-wasm" class="btn ghost">Run on CPU instead</button>
+  </div>
+  <main class="grid">
+    <section class="panel controls">
+      <label class="label" for="prompt">Prompt</label>
+      <textarea id="prompt" rows="3" spellcheck="false">a green teapot and a red cup on a table</textarea>
+      <div class="examples" id="examples">
+        <span class="label dim">Try</span>
+      </div>
+      <label class="label" for="negative">Avoid <span class="dim" id="neg-hint">(optional negative prompt)</span></label>
+      <input id="negative" type="text" spellcheck="false" placeholder="e.g. text, blur">
+      <div class="row">
+        <div class="field">
+          <label class="label" for="seed">Seed</label>
+          <div class="seed-row">
+            <input id="seed" type="number" min="0" max="4294967295" step="1" value="0">
+            <button id="dice" class="btn icon" title="Random seed" aria-label="Random seed">⟳</button>
+          </div>
+        </div>
+        <div class="field">
+          <label class="label" for="steps">Steps <b id="steps-v">50</b>
+            <span class="toggle fast" title="25 steps: about twice as fast; detail holds, the layout can change"><input type="checkbox" id="fast"> Fast</span></label>
+          <input id="steps" type="range" min="4" max="50" step="1" value="50">
+        </div>
+        <div class="field">
+          <label class="label" for="cfg">CFG <b id="cfg-v">3.0</b></label>
+          <input id="cfg" type="range" min="1" max="8" step="0.5" value="3">
+        </div>
+      </div>
+      <div class="row res-row" id="res-row" hidden>
+        <div class="field">
+          <span class="label">Resolution</span>
+          <div class="seg small" role="radiogroup" id="res"></div>
+        </div>
+      </div>
+      <button id="go" class="btn primary" disabled>Load model</button>
+      <div class="progress" aria-live="polite">
+        <div class="bar"><div id="bar-fill"></div></div>
+        <div class="progress-text"><span id="status" class="label">Idle</span><span id="status-r" class="label dim"></span></div>
+      </div>
+      <p class="prepared" id="prepared" hidden></p>
+    </section>
+    <section class="panel output">
+      <div class="out-head">
+        <span class="label"><i class="sq"></i><span id="out-label">Output · 512 × 512</span></span>
+        <span class="toggles">
+          <label class="label toggle" title="Show the thinker's 16 x 16 plan and the expected final image at every step"><input type="checkbox" id="show-thinker" checked> Show thinker</label>
+          <label class="label toggle"><input type="checkbox" id="crisp"> Crisp pixels</label>
+        </span>
+      </div>
+      <div class="frame" id="frame">
+        <canvas id="canvas" width="512" height="512"></canvas>
+        <div class="placeholder" id="placeholder">
+          <img src="assets/agate-a.svg" alt="">
+        </div>
+      </div>
+      <div class="thinker" id="thinker" hidden>
+        <figure><canvas id="plan-canvas" width="16" height="16"></canvas>
+          <figcaption class="label dim">Thinker plan · 16 × 16</figcaption></figure>
+        <figure><canvas id="pred-canvas" width="32" height="32"></canvas>
+          <figcaption class="label dim">Expected · <span id="thinker-step">0 / 0</span></figcaption></figure>
+        <p class="thinker-note">The thinker lays the picture out on a 16 × 16 grid before the renderer paints it.
+          Colours are the plan's three main directions (fixed at the first step, as in the ComfyUI nodes); the
+          expected image is x₁ = z + (1 − t)·v, shown with the SD latent→RGB approximation.</p>
+      </div>
+      <p class="ai-note" id="ai-note" hidden><i class="sq red"></i><span><b>AI-generated image.</b>
+        Made by <span id="ai-model">Agate Preview 003</span>; it carries an invisible watermark and, when saved, PNG provenance metadata (no prompt).</span></p>
+      <div class="out-foot">
+        <dl class="timings" id="timings"></dl>
+        <a id="save" class="btn ghost small" download="agate.png" hidden>Save PNG</a>
+      </div>
+    </section>
+  </main>
+  <div id="parity" class="notice" hidden></div>
+  <hr class="rule">
+  <footer class="foot">
+    <p class="strong">Runs entirely in your browser on WebGPU — nothing leaves your machine.</p>
+    <p class="small-print">Every image made here is marked as AI-generated (EU AI Act Art. 50): an invisible watermark in the
+      pixels (invisible-watermark “dwtDctSvd”, payload AGATE + release) and, in the saved PNG, text fields
+      <code>ai_generated</code>, <code>generator</code>, <code>model</code>. Neither survives every edit; please label AI images you publish.</p>
+    <p class="small-print">Why Agate: LogoLabs' search for the best small-scale image architecture, the groundwork for glyph and symbol generation and vector-native fonts to go with our wordmarks. Natural images served as a benchmarkable proxy; next it feeds SVG generation with Inkvec. Released to share these architectural efforts.</p>
+    <p class="label dim">
+      <a href="https://logolabs.org" target="_blank" rel="noopener">logolabs.org</a> ·
+      <a href="https://huggingface.co/Logolabs" target="_blank" rel="noopener">huggingface.co/Logolabs</a> ·
+      MIT licence · <span id="backend">backend: —</span>
+    </p>
+  </footer>
+</div>
+<script src="js/config.js"></script>
+<script type="module" src="js/app.js"></script>
+</body>
+</html>