Spaces:
Running
Running
| <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Aether -- Edge Mesh Inference</title> | |
| <style> | |
| *{margin:0;padding:0;box-sizing:border-box} | |
| body{background:#09090b;color:#fafafa;font-family:system-ui,sans-serif} | |
| .c{max-width:900px;margin:0 auto;padding:2rem 1rem} | |
| h1{font-size:2.2rem;font-weight:300;text-align:center;margin-bottom:.5rem} | |
| .a{color:#06b6d4} | |
| .sub{color:#71717a;text-align:center;font-size:.9rem;margin-bottom:2rem;line-height:1.6} | |
| .ir{display:flex;gap:1rem;margin-bottom:1rem} | |
| textarea{flex:1;background:#111114;border:1px solid #1f1f23;border-radius:8px;color:#fafafa;font-size:1rem;padding:1rem;resize:none;font-family:inherit;outline:none;min-height:80px} | |
| textarea:focus{border-color:#06b6d4} | |
| button{background:#06b6d4;border:none;border-radius:8px;color:#09090b;font-weight:600;font-size:.9rem;padding:.75rem 2rem;cursor:pointer} | |
| button:disabled{opacity:.5;cursor:not-allowed} | |
| .out{background:#0c0c0f;border:1px solid #1f1f23;border-radius:8px;padding:1.5rem;min-height:200px;margin:1rem 0;font-size:.95rem;line-height:1.6;white-space:pre-wrap} | |
| .stats{font-family:monospace;font-size:.8rem;color:#52525b;margin-top:.5rem} | |
| .mesh{text-align:center;margin:1rem 0;font-family:monospace;font-size:.8rem;color:#52525b;background:#0c0c0f;border:1px solid #1f1f23;border-radius:8px;padding:1rem} | |
| .mesh .active{color:#22c55e} | |
| .mesh .waiting{color:#f59e0b} | |
| .mesh .label{color:#71717a} | |
| .ch{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem} | |
| .ch span{background:#111114;border:1px solid #1f1f23;border-radius:6px;color:#a1a1aa;font-size:.85rem;padding:.4rem .8rem;cursor:pointer} | |
| .ch span:hover{border-color:#06b6d4;color:#fafafa} | |
| select{background:#111114;border:1px solid #1f1f23;border-radius:6px;color:#fafafa;padding:.5rem;font-size:.85rem;outline:none} | |
| .ft{text-align:center;padding:2rem 0;border-top:1px solid #1f1f23;margin-top:2rem;font-size:.8rem;color:#52525b} | |
| .ft a{color:#06b6d4;text-decoration:none} | |
| </style></head><body> | |
| <div class="c"> | |
| <h1><span class="a">Aether</span></h1> | |
| <p class="sub"> | |
| Edge mesh inference. Local WASM → Cloudflare Workers → Cloud Run.<br> | |
| Your request routes through the fastest available path.<br> | |
| Every query smoketests the mesh. Zero downloads. Instant start. | |
| </p> | |
| <div class="mesh" id="mesh"> | |
| <span class="label">MESH:</span> | |
| <span id="m-local" class="waiting">Local WASM</span> → | |
| <span id="m-edge" class="waiting">CF Workers</span> → | |
| <span id="m-cloud" class="waiting">Cloud Run</span> | |
| <br><span id="m-status" style="color:#52525b">idle</span> | |
| </div> | |
| <div class="ir"> | |
| <textarea id="pr" placeholder="What is the shape of failure?"></textarea> | |
| <div style="display:flex;flex-direction:column;gap:.5rem"> | |
| <select id="model"> | |
| <option value="cyrano-360m">SmolLM2-360M</option> | |
| </select> | |
| <button id="gn">Generate</button> | |
| </div> | |
| </div> | |
| <div class="ch"> | |
| <span onclick="document.getElementById('pr').value='hello'">hello</span> | |
| <span onclick="document.getElementById('pr').value='What is the shape of failure?'">shape of failure</span> | |
| <span onclick="document.getElementById('pr').value='Write a haiku about entropy.'">haiku</span> | |
| <span onclick="document.getElementById('pr').value='How do you handle rejection?'">rejection</span> | |
| <span onclick="document.getElementById('pr').value='Tell me about yourself.'">about you</span> | |
| </div> | |
| <div id="ou" class="out" style="color:#52525b">Response will stream here...</div> | |
| <div id="ss" class="stats"></div> | |
| <div class="ft"> | |
| <p>Aether inference mesh · WASM SIMD at edge · Glossolalia decoder · D1 persistence</p> | |
| <p style="margin-top:.5rem"> | |
| <a href="https://forkracefold.com/">Whitepaper</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/aether">Aether</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/the-void">The Void</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/buleyean-rl">Buleyean RL</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/glossolalia">Glossolalia</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/metacog">Metacog</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/five-bules">Five Bules</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/void-attention">Void Attention</a> · | |
| <a href="https://huggingface.co/spaces/forkjoin-ai/quark-personality">Quark Personality</a></p> | |
| <p style="margin-top:.5rem">φ² = φ + 1</p> | |
| <p style="margin-top:.5rem">Copyright 2026 forkjoin.ai</p> | |
| </div> | |
| </div> | |
| <script> | |
| const API = 'https://api.edgework.ai'; | |
| const $=id=>document.getElementById(id); | |
| function meshState(layer, state) { | |
| const el = $('m-' + layer); | |
| if (el) el.className = state; | |
| } | |
| async function generate() { | |
| const prompt = $('pr').value.trim(); | |
| if (!prompt) return; | |
| $('gn').disabled = true; | |
| $('ou').textContent = ''; | |
| $('ou').style.color = '#e4e4e7'; | |
| $('ss').textContent = ''; | |
| $('m-status').textContent = 'connecting...'; | |
| meshState('edge', 'active'); | |
| meshState('local', 'waiting'); | |
| meshState('cloud', 'waiting'); | |
| const model = $('model').value; | |
| const t0 = performance.now(); | |
| try { | |
| const resp = await fetch(`${API}/v1/chat/completions`, { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ | |
| model, | |
| messages: [{ role: 'user', content: prompt }], | |
| max_tokens: 256, | |
| temperature: 0.7, | |
| stream: true, | |
| }), | |
| }); | |
| if (!resp.ok) { | |
| const err = await resp.text(); | |
| $('ou').textContent = `[Edge error ${resp.status}: ${err.slice(0, 300)}]`; | |
| $('m-status').textContent = `error ${resp.status}`; | |
| meshState('edge', 'waiting'); | |
| $('gn').disabled = false; | |
| return; | |
| } | |
| $('m-status').textContent = 'streaming...'; | |
| // Check which backend responded via headers | |
| const backend = resp.headers.get('x-inference-backend') || resp.headers.get('x-served-by') || 'edge'; | |
| if (backend.includes('cloud') || backend.includes('gcp')) { | |
| meshState('cloud', 'active'); | |
| $('m-status').textContent = 'Cloud Run responding'; | |
| } else if (backend.includes('wasm') || backend.includes('local')) { | |
| meshState('local', 'active'); | |
| $('m-status').textContent = 'WASM inference (edge)'; | |
| } else { | |
| $('m-status').textContent = 'Edge responding'; | |
| } | |
| // Try streaming | |
| const contentType = resp.headers.get('content-type') || ''; | |
| let tokens = 0; | |
| let fullText = ''; | |
| if (contentType.includes('text/event-stream') || contentType.includes('application/json')) { | |
| const reader = resp.body.getReader(); | |
| const decoder = new TextDecoder(); | |
| let buffer = ''; | |
| while (true) { | |
| const { done, value } = await reader.read(); | |
| if (done) break; | |
| buffer += decoder.decode(value, { stream: true }); | |
| const lines = buffer.split('\n'); | |
| buffer = lines.pop() || ''; | |
| for (const line of lines) { | |
| if (!line.startsWith('data: ')) continue; | |
| const data = line.slice(6).trim(); | |
| if (data === '[DONE]') continue; | |
| try { | |
| const parsed = JSON.parse(data); | |
| const delta = parsed.choices?.[0]?.delta?.content || parsed.choices?.[0]?.text || ''; | |
| if (delta) { | |
| fullText += delta; | |
| tokens++; | |
| $('ou').textContent = fullText; | |
| const elapsed = (performance.now() - t0) / 1000; | |
| $('ss').textContent = `${tokens} tokens | ${elapsed.toFixed(1)}s | ${(elapsed*1000/tokens).toFixed(0)}ms/tok | via ${API}`; | |
| } | |
| } catch {} | |
| } | |
| } | |
| } | |
| // Non-streaming fallback | |
| if (!fullText) { | |
| const body = await resp.text(); | |
| try { | |
| const j = JSON.parse(body); | |
| fullText = j.choices?.[0]?.message?.content || j.choices?.[0]?.text || body; | |
| } catch { | |
| fullText = body; | |
| } | |
| $('ou').textContent = fullText; | |
| const elapsed = (performance.now() - t0) / 1000; | |
| $('ss').textContent = `${elapsed.toFixed(1)}s | via ${API}`; | |
| } | |
| $('m-status').textContent = `done (${((performance.now()-t0)/1000).toFixed(1)}s)`; | |
| } catch (e) { | |
| $('ou').textContent = `[Connection error: ${e.message}]`; | |
| $('m-status').textContent = 'connection failed'; | |
| meshState('edge', 'waiting'); | |
| } | |
| $('gn').disabled = false; | |
| } | |
| $('gn').addEventListener('click', generate); | |
| $('pr').addEventListener('keydown', e => { | |
| if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); generate(); } | |
| }); | |
| </script> | |
| </body></html> | |