src/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Agate 4-step WebGPU</title>
<meta name="description" content="An unofficial 4-step distillation of Agate Preview 002 (LogoLabs) running entirely in your browser on WebGPU. Redraws as you type.">
<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=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main class="page">
  <header>
    <h1>Agate 4-step <span class="tag">WebGPU</span></h1>
    <p class="lede">A 0.19B text-to-image model distilled to <b>4 steps with no guidance pass</b>, running on your own GPU.
      Nothing leaves your machine. Turn on <b>Live</b> and the image redraws as you type.</p>
  </header>

  <div id="nogpu" class="notice" hidden>
    <p id="nogpu-why"></p>
    <p>This page needs WebGPU (recent Chrome or Edge). You can still run it on the CPU, which takes a few seconds per image.</p>
    <button id="use-wasm" class="ghost">Use CPU instead</button>
  </div>

  <section class="panel">
    <div class="loadrow" id="loadrow">
      <button id="load" class="primary">Load model (about 530 MB, cached after the first visit)</button>
    </div>
    <div class="bar" aria-hidden="true"><div id="bar-fill"></div></div>
    <p class="status"><span id="status">Not loaded</span><span id="status-r"></span></p>

    <label for="prompt" class="label">Prompt</label>
    <textarea id="prompt" rows="3" spellcheck="false" placeholder="a red cube on top of a blue sphere">a lighthouse on a rocky coast under a stormy sky</textarea>
    <div class="chips" id="examples"></div>

    <div class="controls">
      <label class="switch"><input type="checkbox" id="live" checked> <span>Live (redraw on every keystroke)</span></label>
      <label class="seed">Seed <input id="seed" type="number" value="0" min="0" max="4294967295"></label>
      <button id="dice" class="ghost" title="New seed">New seed</button>
      <button id="go" class="primary" disabled>Generate</button>
    </div>
  </section>

  <section class="result">
    <div class="frame" id="frame">
      <canvas id="canvas" width="256" height="256"></canvas>
      <div class="placeholder" id="placeholder">Load the model to start</div>
    </div>
    <div class="side">
      <dl class="timings" id="timings"></dl>
      <button id="save" class="ghost" disabled>Save PNG</button>
      <p class="ai" id="ai-note" hidden>AI-generated image. It carries an invisible watermark and provenance fields in the saved PNG.</p>
    </div>
  </section>

  <section class="about">
    <h2>What this is</h2>
    <p><a href="https://huggingface.co/ML-Intern-lab/agate-preview-002-4step" target="_blank" rel="noopener">ML-Intern-lab/agate-preview-002-4step</a> is an
      <b>unofficial</b> distillation of <a href="https://huggingface.co/Logolabs/agate-preview-002" target="_blank" rel="noopener">Agate Preview 002</a> by LogoLabs.
      Classifier-free guidance was baked into the weights, then the 50-step sampler was halved four times (32 → 16 → 8 → 4).
      Each image is 4 network passes instead of Agate's 100. On the official GenEval scorer (4 images per prompt) it gets 0.536, against 0.563 for the teacher at 50 steps; the teacher itself run at 4 steps gets 0.466.</p>
    <p>256 × 256 only. No negative prompts (guidance is baked in). It inherits Agate's weaknesses: exact text, counts above three, negation.
      There is no safety filter in this page, and the base model can draw people partly unclothed without being asked.</p>
    <p class="fine">Runtime adapted from LogoLabs' <a href="https://huggingface.co/spaces/Logolabs/agate-webgpu" target="_blank" rel="noopener">agate-webgpu</a> (MIT):
      tokenizer, text encoder, sampler and TAESD decoder run through onnxruntime-web. Seeds use a JavaScript PRNG and do not match PyTorch seeds.
      This page is not affiliated with LogoLabs. Licence: MIT.</p>
  </section>
</main>
<script type="module" src="js/app.js"></script>
</body>
</html>