Hugging Face's logo

Spaces:
Logolabs
/
agate-webgpu
Running

App Files Community
agate-webgpu
File size: 8,102 Bytes
8d1a72e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
df091f0
8d1a72e
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
<!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, 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>