Spaces:
Running
Running
Stefatorus
Claude Opus 5.5
Why Agate: general image generation as a benchmark-friendly proxy
df091f0 | <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, as groundwork for glyph and symbol generation and vector-native fonts to go with our wordmarks. General image generation served as a benchmark-friendly proxy for those tasks (unlike, e.g., SDF generation); 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> | |