forkjoin-ai/aether-browser
0
1<!DOCTYPE html>2<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">3<title>Aether -- Edge Mesh Inference</title>4<style>5*{margin:0;padding:0;box-sizing:border-box}6body{background:#09090b;color:#fafafa;font-family:system-ui,sans-serif}7.c{max-width:900px;margin:0 auto;padding:2rem 1rem}8h1{font-size:2.2rem;font-weight:300;text-align:center;margin-bottom:.5rem}9.a{color:#06b6d4}10.sub{color:#71717a;text-align:center;font-size:.9rem;margin-bottom:2rem;line-height:1.6}11.ir{display:flex;gap:1rem;margin-bottom:1rem}12textarea{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}13textarea:focus{border-color:#06b6d4}14button{background:#06b6d4;border:none;border-radius:8px;color:#09090b;font-weight:600;font-size:.9rem;padding:.75rem 2rem;cursor:pointer}15button:disabled{opacity:.5;cursor:not-allowed}16.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}17.stats{font-family:monospace;font-size:.8rem;color:#52525b;margin-top:.5rem}18.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}19.mesh .active{color:#22c55e}20.mesh .waiting{color:#f59e0b}21.mesh .label{color:#71717a}22.ch{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}23.ch span{background:#111114;border:1px solid #1f1f23;border-radius:6px;color:#a1a1aa;font-size:.85rem;padding:.4rem .8rem;cursor:pointer}24.ch span:hover{border-color:#06b6d4;color:#fafafa}25select{background:#111114;border:1px solid #1f1f23;border-radius:6px;color:#fafafa;padding:.5rem;font-size:.85rem;outline:none}26.ft{text-align:center;padding:2rem 0;border-top:1px solid #1f1f23;margin-top:2rem;font-size:.8rem;color:#52525b}27.ft a{color:#06b6d4;text-decoration:none}28</style></head><body>29<div class="c">30<h1><span class="a">Aether</span></h1>31<p class="sub">32 Edge mesh inference. Local WASM → Cloudflare Workers → Cloud Run.<br>33 Your request routes through the fastest available path.<br>34 Every query smoketests the mesh. Zero downloads. Instant start.35</p>36 37<div class="mesh" id="mesh">38 <span class="label">MESH:</span>39 <span id="m-local" class="waiting">Local WASM</span> →40 <span id="m-edge" class="waiting">CF Workers</span> →41 <span id="m-cloud" class="waiting">Cloud Run</span>42 <br><span id="m-status" style="color:#52525b">idle</span>43</div>44 45<div class="ir">46 <textarea id="pr" placeholder="What is the shape of failure?"></textarea>47 <div style="display:flex;flex-direction:column;gap:.5rem">48 <select id="model">49 <option value="cyrano-360m">SmolLM2-360M</option>50 </select>51 <button id="gn">Generate</button>52 </div>53</div>54 55<div class="ch">56 <span onclick="document.getElementById('pr').value='hello'">hello</span>57 <span onclick="document.getElementById('pr').value='What is the shape of failure?'">shape of failure</span>58 <span onclick="document.getElementById('pr').value='Write a haiku about entropy.'">haiku</span>59 <span onclick="document.getElementById('pr').value='How do you handle rejection?'">rejection</span>60 <span onclick="document.getElementById('pr').value='Tell me about yourself.'">about you</span>61</div>62 63<div id="ou" class="out" style="color:#52525b">Response will stream here...</div>64<div id="ss" class="stats"></div>65 66<div class="ft">67 <p>Aether inference mesh · WASM SIMD at edge · Glossolalia decoder · D1 persistence</p>68 <p style="margin-top:.5rem">69 <a href="https://forkracefold.com/">Whitepaper</a> ·70 <a href="https://huggingface.co/spaces/forkjoin-ai/aether">Aether</a> ·71 <a href="https://huggingface.co/spaces/forkjoin-ai/the-void">The Void</a> ·72 <a href="https://huggingface.co/spaces/forkjoin-ai/buleyean-rl">Buleyean RL</a> ·73 <a href="https://huggingface.co/spaces/forkjoin-ai/glossolalia">Glossolalia</a> ·74 <a href="https://huggingface.co/spaces/forkjoin-ai/metacog">Metacog</a> ·75 <a href="https://huggingface.co/spaces/forkjoin-ai/five-bules">Five Bules</a> ·76 <a href="https://huggingface.co/spaces/forkjoin-ai/void-attention">Void Attention</a> ·77 <a href="https://huggingface.co/spaces/forkjoin-ai/quark-personality">Quark Personality</a></p>78 <p style="margin-top:.5rem">φ² = φ + 1</p>79 <p style="margin-top:.5rem">Copyright 2026 forkjoin.ai</p>80</div>81</div>82 83<script>84const API = 'https://api.edgework.ai';85const $=id=>document.getElementById(id);86 87function meshState(layer, state) {88 const el = $('m-' + layer);89 if (el) el.className = state;90}91 92async function generate() {93 const prompt = $('pr').value.trim();94 if (!prompt) return;95 $('gn').disabled = true;96 $('ou').textContent = '';97 $('ou').style.color = '#e4e4e7';98 $('ss').textContent = '';99 $('m-status').textContent = 'connecting...';100 meshState('edge', 'active');101 meshState('local', 'waiting');102 meshState('cloud', 'waiting');103 104 const model = $('model').value;105 const t0 = performance.now();106 107 try {108 const resp = await fetch(`${API}/v1/chat/completions`, {109 method: 'POST',110 headers: { 'Content-Type': 'application/json' },111 body: JSON.stringify({112 model,113 messages: [{ role: 'user', content: prompt }],114 max_tokens: 256,115 temperature: 0.7,116 stream: true,117 }),118 });119 120 if (!resp.ok) {121 const err = await resp.text();122 $('ou').textContent = `[Edge error ${resp.status}: ${err.slice(0, 300)}]`;123 $('m-status').textContent = `error ${resp.status}`;124 meshState('edge', 'waiting');125 $('gn').disabled = false;126 return;127 }128 129 $('m-status').textContent = 'streaming...';130 131 // Check which backend responded via headers132 const backend = resp.headers.get('x-inference-backend') || resp.headers.get('x-served-by') || 'edge';133 if (backend.includes('cloud') || backend.includes('gcp')) {134 meshState('cloud', 'active');135 $('m-status').textContent = 'Cloud Run responding';136 } else if (backend.includes('wasm') || backend.includes('local')) {137 meshState('local', 'active');138 $('m-status').textContent = 'WASM inference (edge)';139 } else {140 $('m-status').textContent = 'Edge responding';141 }142 143 // Try streaming144 const contentType = resp.headers.get('content-type') || '';145 let tokens = 0;146 let fullText = '';147 148 if (contentType.includes('text/event-stream') || contentType.includes('application/json')) {149 const reader = resp.body.getReader();150 const decoder = new TextDecoder();151 let buffer = '';152 153 while (true) {154 const { done, value } = await reader.read();155 if (done) break;156 buffer += decoder.decode(value, { stream: true });157 const lines = buffer.split('\n');158 buffer = lines.pop() || '';159 160 for (const line of lines) {161 if (!line.startsWith('data: ')) continue;162 const data = line.slice(6).trim();163 if (data === '[DONE]') continue;164 try {165 const parsed = JSON.parse(data);166 const delta = parsed.choices?.[0]?.delta?.content || parsed.choices?.[0]?.text || '';167 if (delta) {168 fullText += delta;169 tokens++;170 $('ou').textContent = fullText;171 const elapsed = (performance.now() - t0) / 1000;172 $('ss').textContent = `${tokens} tokens | ${elapsed.toFixed(1)}s | ${(elapsed*1000/tokens).toFixed(0)}ms/tok | via ${API}`;173 }174 } catch {}175 }176 }177 }178 179 // Non-streaming fallback180 if (!fullText) {181 const body = await resp.text();182 try {183 const j = JSON.parse(body);184 fullText = j.choices?.[0]?.message?.content || j.choices?.[0]?.text || body;185 } catch {186 fullText = body;187 }188 $('ou').textContent = fullText;189 const elapsed = (performance.now() - t0) / 1000;190 $('ss').textContent = `${elapsed.toFixed(1)}s | via ${API}`;191 }192 193 $('m-status').textContent = `done (${((performance.now()-t0)/1000).toFixed(1)}s)`;194 195 } catch (e) {196 $('ou').textContent = `[Connection error: ${e.message}]`;197 $('m-status').textContent = 'connection failed';198 meshState('edge', 'waiting');199 }200 201 $('gn').disabled = false;202}203 204$('gn').addEventListener('click', generate);205$('pr').addEventListener('keydown', e => {206 if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); generate(); }207});208</script>209</body></html>210