Hugging Face's logo

Spaces:
Logolabs
/
agate-webgpu
Running

App Files Community
agate-webgpu
File size: 8,305 Bytes
7a7d8dc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2dc8d66
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
146ba97
 
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
:root {
  --paper: #FCFCF7;
  --ink: #0B0A08;
  --red: #F4291F;
  --mute: #6B6862;
  --hair: 1.5px solid var(--ink);
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --head: "Inter Tight", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--red); }

.page { max-width: 1080px; margin: 0 auto; padding: 28px 24px 40px; }
.rule { border: 0; border-top: var(--hair); margin: 22px 0; }

.label { font: 500 11.5px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; }
.label.dim { color: var(--mute); }
.label b { font-weight: 600; color: var(--red); letter-spacing: .06em; }
.sq { display: inline-block; width: 8px; height: 8px; background: var(--ink); flex: none; }
.sq.red { background: var(--red); }

.mast { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.mast-left { display: flex; align-items: flex-end; gap: 22px; }
.lockup { height: 96px; width: auto; display: block; }
.mast-meta { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.imprint { display: flex; align-items: center; gap: 10px; text-decoration: none; padding-bottom: 6px; }

.intro h1 { font: 800 clamp(34px, 5.4vw, 58px)/1.02 var(--head); letter-spacing: -.02em; margin: 6px 0 12px; }
.intro p { max-width: 62ch; margin: 0; color: #2a2824; }

.notice { border: var(--hair); padding: 16px 18px; margin: 22px 0 0; background: #fff; }
.notice p { margin: 8px 0; }
.notice.ok { border-color: var(--ink); }

.grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; margin-top: 26px; }
@media (max-width: 820px) { .grid { grid-template-columns: 1fr; } .lockup { height: 72px; } }

.panel { border-top: var(--hair); padding-top: 14px; }
textarea, input[type=number] {
  width: 100%; font: 16px/1.45 var(--sans); color: var(--ink); background: #fff;
  border: var(--hair); border-radius: 0; padding: 10px 12px; margin-top: 8px; resize: vertical;
}
textarea:focus, input:focus { outline: 2px solid var(--red); outline-offset: 1px; }

.examples { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 18px; }
.chip { font: 13px/1.2 var(--sans); background: transparent; border: 1px solid var(--ink); padding: 5px 9px; cursor: pointer; color: var(--ink); text-align: left; }
.chip:hover { background: var(--ink); color: var(--paper); }

.row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 480px) { .row { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; }
.seed-row { display: flex; gap: 6px; align-items: stretch; }
.seed-row input { margin-top: 8px; }
input[type=range] { width: 100%; margin-top: 16px; accent-color: var(--red); }

.btn { font: 600 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; border: var(--hair); background: var(--paper); color: var(--ink); padding: 14px 18px; cursor: pointer; border-radius: 0; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn.primary { width: 100%; background: var(--ink); color: var(--paper); }
.btn.primary:hover:not(:disabled) { background: var(--red); border-color: var(--red); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.icon { margin-top: 8px; padding: 0 12px; font-size: 18px; letter-spacing: 0; }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }
.btn.small { padding: 9px 12px; font-size: 11px; }

.progress { margin-top: 16px; }
.bar { height: 8px; border: var(--hair); background: #fff; }
#bar-fill { height: 100%; width: 0; background: var(--red); transition: width .12s linear; }
.progress-text { display: flex; justify-content: space-between; margin-top: 8px; gap: 12px; }

.out-head, .out-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.out-foot { align-items: flex-start; margin-top: 12px; }
.toggle { cursor: pointer; }
.toggle input { accent-color: var(--red); margin: 0; }
.frame { position: relative; margin-top: 10px; border: var(--hair); background: #fff; aspect-ratio: 1 / 1; width: 100%; }
#canvas { width: 100%; height: 100%; display: block; image-rendering: auto; }
.frame.crisp #canvas { image-rendering: pixelated; }
.placeholder { position: absolute; inset: 0; display: grid; place-items: center; background: var(--paper); }
.placeholder img { width: 28%; opacity: .14; }
.frame.busy .placeholder img { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .32; } }

.timings { display: grid; grid-template-columns: auto auto; gap: 2px 14px; margin: 0; font: 12px/1.5 var(--mono); }
.timings dt { color: var(--mute); text-transform: uppercase; letter-spacing: .1em; font-size: 11px; }
.timings dd { margin: 0; }

.foot p { margin: 0 0 8px; }
.foot .strong { font: 700 18px/1.3 var(--head); }
.foot .label { display: flex; flex-wrap: wrap; gap: 4px 8px; }
@media (max-width: 520px) {
  .page { padding: 20px 16px 32px; }
  .mast-meta .label.dim { display: none; }
  .progress-text { flex-wrap: wrap; }
}

/* version selector, resolution, AI-generated note (2026-09-29) */
.versions { margin-top: 24px; }
.seg { display: flex; flex-wrap: wrap; gap: 0; margin-top: 8px; }
.seg button { font: 600 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--paper); color: var(--ink);
  border: var(--hair); margin-left: -1.5px; padding: 11px 16px; cursor: pointer; border-radius: 0; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.seg button:first-child { margin-left: 0; }
.seg button small { font: 400 11px/1 var(--mono); letter-spacing: .06em; text-transform: none; color: var(--mute); }
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }
.seg button[aria-checked="true"] small { color: #c9c6bf; }
.seg button:hover:not([aria-checked="true"]):not(:disabled) { background: #fff; color: var(--red); }
.seg button:disabled { opacity: .45; cursor: default; }
.seg.small button { padding: 9px 12px; font-size: 12px; }
.ver-note { margin: 10px 0 0; max-width: 70ch; color: #2a2824; font-size: 15px; }
input[type=text] { width: 100%; font: 15px/1.45 var(--sans); color: var(--ink); background: #fff; border: var(--hair); border-radius: 0; padding: 8px 12px; margin: 8px 0 18px; }
.label .dim { color: var(--mute); text-transform: none; letter-spacing: .02em; }
.res-row { grid-template-columns: 1fr; }
.prepared { font: 12px/1.5 var(--mono); color: var(--mute); margin: 12px 0 0; overflow-wrap: anywhere; }
.ai-note { display: flex; gap: 10px; align-items: baseline; margin: 10px 0 0; font-size: 14px; line-height: 1.45; border-left: 3px solid var(--red); padding: 6px 0 6px 10px; background: #fff; }
.ai-note .sq { position: relative; top: 1px; }
.small-print { font-size: 13.5px; color: #2a2824; max-width: 90ch; }
.small-print code { font: 12.5px var(--mono); }
@media (max-width: 520px) {
  #versions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #versions button { padding: 10px 8px; font-size: 12px; letter-spacing: .06em; }
}

/* thinker preview (plan + expected image), 2026-09-29 */
.toggles { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.thinker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.thinker figure { margin: 0; }
.thinker canvas { width: 100%; aspect-ratio: 1 / 1; display: block; border: var(--hair); image-rendering: pixelated; background: #fff; }
.thinker #pred-canvas { image-rendering: auto; }
.thinker figcaption { margin-top: 6px; }
.thinker-note { grid-column: 1 / -1; margin: 0; font-size: 13px; color: var(--mute); }
.label .toggle.fast { margin-left: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink); }
.label .toggle.fast input { accent-color: var(--red); margin: 0 4px 0 0; vertical-align: -1px; }