Hugging Face's logo

Spaces:
codelion
/
neural-drive
Running

App Files Community
codelion commited on
Commit
d05ec2b
·
verified ·
1 Parent(s): 7fc26f0

WebGPU real-time world model

Browse files
Files changed (6) hide show
  1. README.md +7 -3
  2. dit_fp16.onnx +3 -0
  3. index.html +307 -17
  4. meta.json +1 -0
  5. seeds.bin +3 -0
  6. vae.onnx +3 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
  title: Neural Drive
3
- emoji: 👁
4
  colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
 
 
1
  ---
2
  title: Neural Drive
3
+ emoji: 🏎️
4
  colorFrom: yellow
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
  ---
9
 
10
+ # Neural Drive — a world model you can steer, in your browser
11
+
12
+ Real-time interactive world model for SuperTuxKart, running entirely client-side on **WebGPU**
13
+ via onnxruntime-web. No game engine: each frame is predicted from the last 7 frames + your keys.
14
+ Arrow keys drive, N = nitro, D = drift. Trained in PyTorch on pystk self-play; fp16 build.
dit_fp16.onnx ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:1645d766bfda6ffd476d1d894bdf9ce438e185ad0293dbffe371cc3dbd55a0f0
3
+ size 261725939
index.html CHANGED
@@ -1,19 +1,309 @@
1
  <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
  <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6
+ <title>NEURAL DRIVE — a world model you can steer</title>
7
+ <link rel="preconnect" href="https://fonts.googleapis.com">
8
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
9
+ <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Azeret+Mono:wght@400;500;600&display=swap" rel="stylesheet">
10
+ <style>
11
+ :root{
12
+ --bg:#08090c; --bg2:#0d0f14; --panel:#111319; --line:#1d212b;
13
+ --amber:#ffb020; --amber-hot:#ff6a00; --cyan:#57e6d4; --ink:#eceae4;
14
+ --dim:#727a88; --dimmer:#3a404c; --red:#ff5566;
15
+ --grid:rgba(255,255,255,.028);
16
+ }
17
+ *{box-sizing:border-box;margin:0;padding:0}
18
+ html,body{height:100%}
19
+ body{
20
+ background:var(--bg); color:var(--ink);
21
+ font-family:'Chakra Petch',sans-serif; letter-spacing:.02em;
22
+ min-height:100%; overflow-x:hidden;
23
+ background-image:
24
+ radial-gradient(1200px 600px at 70% -10%, rgba(255,176,32,.06), transparent 60%),
25
+ radial-gradient(900px 500px at 10% 110%, rgba(87,230,212,.05), transparent 60%),
26
+ linear-gradient(var(--grid) 1px, transparent 1px),
27
+ linear-gradient(90deg, var(--grid) 1px, transparent 1px);
28
+ background-size:auto,auto,44px 44px,44px 44px;
29
+ }
30
+ /* film grain */
31
+ body::after{
32
+ content:""; position:fixed; inset:0; pointer-events:none; z-index:99; opacity:.05;
33
+ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
34
+ mix-blend-mode:overlay;
35
+ }
36
+ .wrap{max-width:980px; margin:0 auto; padding:34px 22px 60px; position:relative; z-index:1}
37
+
38
+ /* header */
39
+ header{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:22px}
40
+ .brand{display:flex; flex-direction:column; gap:6px}
41
+ .kicker{font-family:'Azeret Mono',monospace; font-size:11px; letter-spacing:.42em; color:var(--amber); text-transform:uppercase}
42
+ h1{font-size:clamp(30px,6vw,54px); font-weight:700; line-height:.92; letter-spacing:-.01em}
43
+ h1 .slash{color:var(--dimmer); font-weight:400}
44
+ h1 em{color:var(--cyan); font-style:normal}
45
+ .sub{font-family:'Azeret Mono',monospace; font-size:12px; color:var(--dim); max-width:42ch; line-height:1.5; margin-top:8px}
46
+ .spec{font-family:'Azeret Mono',monospace; font-size:11px; color:var(--dim); text-align:right; line-height:1.9; white-space:nowrap}
47
+ .spec b{color:var(--ink); font-weight:500}
48
+
49
+ /* console */
50
+ .console{
51
+ border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),#0b0d12);
52
+ border-radius:14px; padding:16px; position:relative;
53
+ box-shadow:0 40px 80px -40px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.03);
54
+ }
55
+ .viewport{position:relative; border-radius:9px; overflow:hidden; background:#000; aspect-ratio:2/1;
56
+ outline:1px solid var(--line); box-shadow:inset 0 0 0 1px rgba(0,0,0,.6), 0 0 60px -20px rgba(255,176,32,.25);}
57
+ #screen{width:100%; height:100%; display:block; image-rendering:pixelated; filter:saturate(1.06) contrast(1.03)}
58
+ /* scanlines + vignette + glow overlays on the viewport */
59
+ .viewport::before{content:""; position:absolute; inset:0; pointer-events:none; z-index:3;
60
+ background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px); mix-blend-mode:multiply; opacity:.5;}
61
+ .viewport::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
62
+ box-shadow:inset 0 0 120px 6px rgba(0,0,0,.6); background:radial-gradient(120% 120% at 50% 40%, transparent 60%, rgba(0,0,0,.35));}
63
+ /* HUD corner brackets */
64
+ .bkt{position:absolute; width:20px; height:20px; border:2px solid var(--amber); opacity:.55; z-index:5; pointer-events:none}
65
+ .bkt.tl{top:9px;left:9px;border-right:0;border-bottom:0}.bkt.tr{top:9px;right:9px;border-left:0;border-bottom:0}
66
+ .bkt.bl{bottom:9px;left:9px;border-right:0;border-top:0}.bkt.br{bottom:9px;right:9px;border-left:0;border-top:0}
67
+
68
+ /* boot overlay */
69
+ .boot{position:absolute; inset:0; z-index:8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
70
+ background:radial-gradient(120% 120% at 50% 30%, #10131a, #06070a); text-align:center; padding:24px}
71
+ .boot.hide{opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s}
72
+ .boot .big{font-size:clamp(18px,3.5vw,26px); font-weight:600; letter-spacing:.06em}
73
+ .boot .status{font-family:'Azeret Mono',monospace; font-size:12px; color:var(--dim); min-height:1.4em; letter-spacing:.05em}
74
+ .bar{width:min(70%,360px); height:6px; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#0a0c11}
75
+ .bar i{display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--amber-hot),var(--amber)); box-shadow:0 0 14px var(--amber); transition:width .2s}
76
+ .ignite{font-family:'Chakra Petch'; font-weight:700; letter-spacing:.28em; text-transform:uppercase; font-size:15px;
77
+ color:#0a0a0a; background:linear-gradient(180deg,var(--amber),var(--amber-hot)); border:0; padding:14px 30px; border-radius:8px; cursor:pointer;
78
+ box-shadow:0 0 34px -6px var(--amber); animation:pulse 1.8s ease-in-out infinite; display:none}
79
+ .ignite:hover{filter:brightness(1.08)}
80
+ @keyframes pulse{0%,100%{box-shadow:0 0 20px -6px var(--amber)}50%{box-shadow:0 0 40px 2px var(--amber)}}
81
+
82
+ /* telemetry strip */
83
+ .telem{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:14px}
84
+ .cell{border:1px solid var(--line); border-radius:8px; padding:10px 12px; background:#0b0d12}
85
+ .cell .l{font-family:'Azeret Mono',monospace; font-size:9.5px; letter-spacing:.24em; color:var(--dim); text-transform:uppercase}
86
+ .cell .v{font-family:'Azeret Mono',monospace; font-size:19px; font-weight:600; color:var(--ink); margin-top:3px}
87
+ .cell .v small{font-size:11px; color:var(--dim); font-weight:400}
88
+ .cell .v.hot{color:var(--amber)} .cell .v.cool{color:var(--cyan)}
89
+
90
+ /* controls */
91
+ .controls{display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-top:20px}
92
+ .keys{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
93
+ .kc{font-family:'Azeret Mono',monospace; font-size:12px; min-width:34px; height:34px; padding:0 9px; display:flex; align-items:center; justify-content:center;
94
+ border:1px solid var(--line); border-bottom-width:3px; border-radius:7px; background:#0e1016; color:var(--dim); transition:all .08s}
95
+ .kc.on{background:var(--amber); color:#0a0a0a; border-color:var(--amber-hot); box-shadow:0 0 18px -3px var(--amber); transform:translateY(1px)}
96
+ .kc small{font-size:9px; opacity:.7; margin-left:5px}
97
+ .btns{display:flex; gap:10px}
98
+ .btn{font-family:'Chakra Petch'; font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:12px; cursor:pointer;
99
+ border:1px solid var(--line); background:#0e1016; color:var(--ink); padding:11px 18px; border-radius:8px; transition:all .12s}
100
+ .btn:hover{border-color:var(--amber); color:var(--amber)}
101
+ .btn.ghost{color:var(--dim)}
102
+ footer{margin-top:26px; font-family:'Azeret Mono',monospace; font-size:11px; color:var(--dimmer); line-height:1.7}
103
+ footer a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--dimmer)}
104
+ .warn{color:var(--red)}
105
+ @media(max-width:620px){ .telem{grid-template-columns:repeat(2,1fr)} .spec{text-align:left} }
106
+ </style>
107
+ </head>
108
+ <body>
109
+ <div class="wrap">
110
+ <header>
111
+ <div class="brand">
112
+ <div class="kicker">world model · no game engine</div>
113
+ <h1>NEURAL<span class="slash">/</span><em>DRIVE</em></h1>
114
+ <div class="sub">You are steering a neural network's hallucination of SuperTuxKart. Each frame is predicted from the last 7 frames + your keys, then decoded — running entirely in your browser on WebGPU.</div>
115
+ </div>
116
+ <div class="spec">
117
+ MODEL&nbsp;&nbsp;<b>latent diffusion · 131M</b><br>
118
+ WEIGHTS&nbsp;<b>fp16 · 262 MB</b><br>
119
+ OUTPUT&nbsp;&nbsp;<b>384 × 192</b><br>
120
+ RUNTIME&nbsp;<b>onnxruntime-web</b>
121
+ </div>
122
+ </header>
123
+
124
+ <div class="console">
125
+ <div class="viewport">
126
+ <canvas id="screen" width="384" height="192"></canvas>
127
+ <span class="bkt tl"></span><span class="bkt tr"></span><span class="bkt bl"></span><span class="bkt br"></span>
128
+ <div class="boot" id="boot">
129
+ <div class="big" id="bootBig">IGNITION SEQUENCE</div>
130
+ <div class="bar"><i id="bar"></i></div>
131
+ <div class="status" id="bootStatus">initializing…</div>
132
+ <button class="ignite" id="ignite">▶ Ignition</button>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="telem">
137
+ <div class="cell"><div class="l">Framerate</div><div class="v hot" id="tFps">— <small>fps</small></div></div>
138
+ <div class="cell"><div class="l">Frame time</div><div class="v" id="tMs">— <small>ms</small></div></div>
139
+ <div class="cell"><div class="l">Compute</div><div class="v cool" id="tDev">—</div></div>
140
+ <div class="cell"><div class="l">Inputs</div><div class="v" id="tAct">idle</div></div>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="controls">
145
+ <div class="keys" id="keys">
146
+ <span class="kc" data-k="ArrowUp">↑<small>accel</small></span>
147
+ <span class="kc" data-k="ArrowLeft">←<small>left</small></span>
148
+ <span class="kc" data-k="ArrowDown">↓<small>brake</small></span>
149
+ <span class="kc" data-k="ArrowRight">→<small>right</small></span>
150
+ <span class="kc" data-k="KeyN">N<small>nitro</small></span>
151
+ <span class="kc" data-k="KeyD">D<small>drift</small></span>
152
+ </div>
153
+ <div class="btns">
154
+ <button class="btn" id="respawn">⟲ Respawn</button>
155
+ <button class="btn ghost" id="pause">Ⅱ Pause</button>
156
+ </div>
157
+ </div>
158
+
159
+ <footer id="foot">
160
+ trained in PyTorch on pystk self-play · ported to MLX (~10 fps on Apple Silicon) · quantized to 74 MB (4-bit) — this page runs the fp16 build on your GPU.
161
+ </footer>
162
+ </div>
163
+
164
+ <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/ort.webgpu.min.js"></script>
165
+ <script>
166
+ const $=id=>document.getElementById(id);
167
+ const bar=$("bar"), bootStatus=$("bootStatus"), boot=$("boot"), bootBig=$("bootBig"), ignite=$("ignite");
168
+ let META, SEEDS, dit, vae, ctx=[], acts=[], running=false, DEV="—";
169
+ let N, ROW, K;
170
+ const key={ArrowUp:0,ArrowDown:0,ArrowLeft:0,ArrowRight:0,KeyN:0,KeyD:0};
171
+
172
+ function setStatus(t){bootStatus.textContent=t}
173
+ function setBar(p){bar.style.width=(p*100).toFixed(0)+"%"}
174
+
175
+ async function fetchProgress(url, label){
176
+ const res=await fetch(url);
177
+ const total=+res.headers.get("content-length")||0;
178
+ const reader=res.body.getReader(); let recd=0; const chunks=[];
179
+ while(true){const{done,value}=await reader.read(); if(done)break; chunks.push(value); recd+=value.length;
180
+ if(total) setStatus(label+" "+(recd/1e6|0)+" / "+(total/1e6|0)+" MB"); }
181
+ const buf=new Uint8Array(recd); let o=0; for(const c of chunks){buf.set(c,o); o+=c.length;}
182
+ return buf;
183
+ }
184
+
185
+ // Box–Muller gaussian noise
186
+ function randn(n){const a=new Float32Array(n); for(let i=0;i<n;i+=2){
187
+ let u=0,v=0; while(u===0)u=Math.random(); while(v===0)v=Math.random();
188
+ const m=Math.sqrt(-2*Math.log(u)); a[i]=m*Math.cos(2*Math.PI*v); if(i+1<n)a[i+1]=m*Math.sin(2*Math.PI*v);} return a;}
189
+
190
+ async function boot_(){
191
+ try{
192
+ setStatus("loading manifest…");
193
+ META=await (await fetch("meta.json")).json();
194
+ N=META.z_ch*META.hz*META.wz; ROW=META.action_dim; K=META.k;
195
+ setStatus("loading seed states…");
196
+ const sb=await fetchProgress("seeds.bin","seed states");
197
+ SEEDS=new Float32Array(sb.buffer);
198
+
199
+ const hasGPU = !!navigator.gpu;
200
+ DEV = hasGPU ? "WebGPU" : "WASM";
201
+ ort.env.wasm.wasmPaths="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.20.1/dist/";
202
+ if(!hasGPU) ort.env.wasm.numThreads = Math.min(4, navigator.hardwareConcurrency||4);
203
+ const eps = hasGPU ? ["webgpu","wasm"] : ["wasm"];
204
+
205
+ setBar(.05);
206
+ setStatus("downloading dynamics model…");
207
+ const ditBuf=await fetchProgress("dit_fp16.onnx","dynamics"); setBar(.7);
208
+ setStatus("compiling dynamics on "+DEV+"…");
209
+ dit=await ort.InferenceSession.create(ditBuf,{executionProviders:eps, graphOptimizationLevel:"all"}); setBar(.85);
210
+ setStatus("downloading decoder…");
211
+ const vaeBuf=await fetchProgress("vae.onnx","decoder");
212
+ vae=await ort.InferenceSession.create(vaeBuf,{executionProviders:eps, graphOptimizationLevel:"all"}); setBar(1);
213
+
214
+ $("tDev").textContent=DEV;
215
+ spawn((Math.random()*META.seeds_shape[0])|0);
216
+ await warm();
217
+ bootBig.textContent = hasGPU ? "NEURAL ENGINE READY" : "READY (CPU — will be slow)";
218
+ if(!hasGPU) bootBig.classList.add("warn");
219
+ setStatus("arrow keys to drive · N nitro · D drift");
220
+ ignite.style.display="inline-block";
221
+ }catch(e){
222
+ bootBig.textContent="INITIALIZATION FAILED"; bootBig.classList.add("warn");
223
+ setStatus(String(e).slice(0,140));
224
+ console.error(e);
225
+ }
226
+ }
227
+
228
+ function spawn(i){
229
+ const per=META.ctx*N; const base=i*per;
230
+ ctx=[]; acts=[];
231
+ for(let f=0;f<META.ctx;f++){ ctx.push(SEEDS.subarray(base+f*N, base+(f+1)*N).slice()); acts.push(new Float32Array(ROW)); }
232
+ }
233
+
234
+ function curAction(){
235
+ // [accel, brake, left, right, nitro, drift]
236
+ return Float32Array.from([key.ArrowUp,key.ArrowDown,key.ArrowLeft,key.ArrowRight,key.KeyN,key.KeyD]);
237
+ }
238
+
239
+ async function genFrame(act){
240
+ const zbuf=new Float32Array(8*N);
241
+ for(let f=0;f<7;f++) zbuf.set(ctx[f], f*N);
242
+ const abuf=new Float32Array(8*ROW);
243
+ for(let f=0;f<7;f++) abuf.set(acts[f], f*ROW);
244
+ abuf.set(act, 7*ROW);
245
+ const aT=new ort.Tensor("float32",abuf,[1,8,ROW]);
246
+ let cur=randn(N);
247
+ for(let st=0; st<K; st++){
248
+ zbuf.set(cur, 7*N);
249
+ const zT=new ort.Tensor("float32",zbuf,[1,8,META.z_ch,META.hz,META.wz]);
250
+ const tb=new Float32Array(8).fill(1); tb[7]=st/K;
251
+ const tT=new ort.Tensor("float32",tb,[1,8]);
252
+ const out=await dit.run({z:zT,t:tT,a:aT});
253
+ const v=out.v.data; const base=7*N;
254
+ for(let j=0;j<N;j++) cur[j]+=(1/K)*v[base+j];
255
+ }
256
+ return cur;
257
+ }
258
+
259
+ const oc=$("screen").getContext("2d"); const IMG=oc.createImageData(384,192);
260
+ async function decode(lat){
261
+ const zT=new ort.Tensor("float32",lat,[1,META.z_ch,META.hz,META.wz]);
262
+ const out=await vae.run({zin:zT}); const p=out.img.data; // [1,3,192,384] CHW
263
+ const HW=192*384, d=IMG.data;
264
+ for(let i=0;i<HW;i++){
265
+ let r=p[i], g=p[HW+i], b=p[2*HW+i];
266
+ r=r>=0&&r<=1?r:(r<0?0:(r>1?1:0)); g=g>=0&&g<=1?g:(g<0?0:(g>1?1:0)); b=b>=0&&b<=1?b:(b<0?0:(b>1?1:0));
267
+ d[i*4]=r*255; d[i*4+1]=g*255; d[i*4+2]=b*255; d[i*4+3]=255;
268
+ }
269
+ oc.putImageData(IMG,0,0);
270
+ }
271
+
272
+ async function warm(){ const c=await genFrame(new Float32Array(ROW)); await decode(c); }
273
+
274
+ let ema=0;
275
+ async function loop(){
276
+ if(!running) return;
277
+ const t0=performance.now();
278
+ const act=curAction();
279
+ const cur=await genFrame(act);
280
+ ctx.push(cur); if(ctx.length>7)ctx.shift();
281
+ acts.push(act); if(acts.length>7)acts.shift();
282
+ await decode(cur);
283
+ const dt=performance.now()-t0; ema=ema?ema*.85+dt*.15:dt;
284
+ $("tMs").innerHTML=(ema|0)+" <small>ms</small>";
285
+ $("tFps").innerHTML=(1000/ema).toFixed(1)+" <small>fps</small>";
286
+ const names=["ACCEL","BRAKE","LEFT","RIGHT","NITRO","DRIFT"];
287
+ const on=[...act].map((v,i)=>v?names[i]:null).filter(Boolean);
288
+ $("tAct").textContent=on.length?on.join(" · "):"coast";
289
+ requestAnimationFrame(loop);
290
+ }
291
+ function start(){ if(running)return; running=true; boot.classList.add("hide"); loop(); }
292
+
293
+ // keyboard
294
+ const codes=Object.keys(key);
295
+ addEventListener("keydown",e=>{ if(codes.includes(e.code)){key[e.code]=1; paint(); if(["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(e.code))e.preventDefault();}});
296
+ addEventListener("keyup",e=>{ if(codes.includes(e.code)){key[e.code]=0; paint();}});
297
+ function paint(){ document.querySelectorAll(".kc").forEach(el=>el.classList.toggle("on", !!key[el.dataset.k])); }
298
+ // pointer support for the on-screen keycaps
299
+ document.querySelectorAll(".kc").forEach(el=>{
300
+ const k=el.dataset.k, dn=e=>{e.preventDefault();key[k]=1;paint()}, up=e=>{e.preventDefault();key[k]=0;paint()};
301
+ el.addEventListener("pointerdown",dn); el.addEventListener("pointerup",up); el.addEventListener("pointerleave",up);
302
+ });
303
+ $("ignite").onclick=start;
304
+ $("respawn").onclick=()=>{ spawn((Math.random()*META.seeds_shape[0])|0); if(!running){decode(ctx[6]);} };
305
+ $("pause").onclick=()=>{ running=!running; $("pause").textContent=running?"Ⅱ Pause":"▶ Resume"; if(running)loop(); };
306
+ boot_();
307
+ </script>
308
+ </body>
309
  </html>
meta.json ADDED
@@ -0,0 +1 @@
 
 
1
+ {"seeds_shape": [18, 7, 8, 24, 48], "z_ch": 8, "hz": 24, "wz": 48, "action_dim": 6, "ctx": 7, "k": 2}
seeds.bin ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:e1c14fe2af31fc7e858e181d05128eff7b80b6cfbea57d6d09b2754f8e5c2a95
3
+ size 4644864
vae.onnx ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ version https://git-lfs.github.com/spec/v1
2
+ oid sha256:e72bfacd1dcdc8d3fe590761356e4ac65bdbd3a32ccf257b9a6cb36ea968c089
3
+ size 29425024