Spaces:
Running on Zero
Running on Zero
POC
Browse filesthink of a mix of bittorrent and freenet and .... llm
- browsermesh.html +675 -0
- hearthnet-mesh.html +742 -0
browsermesh.html
ADDED
|
@@ -0,0 +1,675 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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">
|
| 6 |
+
<title>BrowserMesh — distributed LLM inference over WebRTC</title>
|
| 7 |
+
<style>
|
| 8 |
+
:root {
|
| 9 |
+
--bg: #fafaf7; --fg: #1a1a18; --muted: #6b6b65; --line: #d8d6cd;
|
| 10 |
+
--card: #ffffff; --accent: #534ab7; --accent-soft: #eeedfe;
|
| 11 |
+
--ok: #0f6e56; --ok-soft: #e1f5ee;
|
| 12 |
+
--warn: #854f0b; --warn-soft: #faeeda;
|
| 13 |
+
--err: #791f1f; --err-soft: #fcebeb;
|
| 14 |
+
--code: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
|
| 15 |
+
--sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
| 16 |
+
}
|
| 17 |
+
@media (prefers-color-scheme: dark) {
|
| 18 |
+
:root {
|
| 19 |
+
--bg: #1a1a18; --fg: #f0eee6; --muted: #a8a69d; --line: #3a3a36;
|
| 20 |
+
--card: #242421; --accent: #afa9ec; --accent-soft: #2a2655;
|
| 21 |
+
--ok: #5dcaa5; --ok-soft: #0a3a2e;
|
| 22 |
+
--warn: #ef9f27; --warn-soft: #3a2a0a;
|
| 23 |
+
--err: #f09595; --err-soft: #3a1010;
|
| 24 |
+
}
|
| 25 |
+
}
|
| 26 |
+
* { box-sizing: border-box; }
|
| 27 |
+
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 15px; line-height: 1.55; }
|
| 28 |
+
.wrap { max-width: 920px; margin: 0 auto; padding: 32px 24px 64px; }
|
| 29 |
+
header { margin-bottom: 32px; }
|
| 30 |
+
h1 { font-size: 24px; font-weight: 500; margin: 0 0 4px; letter-spacing: -0.01em; }
|
| 31 |
+
h2 { font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin: 0 0 12px; }
|
| 32 |
+
.sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
|
| 33 |
+
section { margin-bottom: 28px; }
|
| 34 |
+
.card { background: var(--card); border: 0.5px solid var(--line); border-radius: 10px; padding: 16px 18px; }
|
| 35 |
+
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
|
| 36 |
+
.row > input[type=text], .row > select, .row > textarea { flex: 1; min-width: 200px; }
|
| 37 |
+
input, select, textarea, button { font-family: inherit; font-size: 14px; }
|
| 38 |
+
input[type=text], textarea, select {
|
| 39 |
+
background: var(--bg); color: var(--fg); border: 0.5px solid var(--line);
|
| 40 |
+
border-radius: 6px; padding: 8px 10px;
|
| 41 |
+
}
|
| 42 |
+
input[type=text]:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
|
| 43 |
+
textarea { font-family: inherit; resize: vertical; min-height: 60px; width: 100%; }
|
| 44 |
+
button {
|
| 45 |
+
background: var(--card); color: var(--fg); border: 0.5px solid var(--line);
|
| 46 |
+
border-radius: 6px; padding: 8px 14px; cursor: pointer; transition: background .12s;
|
| 47 |
+
}
|
| 48 |
+
button:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent); }
|
| 49 |
+
button:disabled { opacity: 0.5; cursor: not-allowed; }
|
| 50 |
+
button.primary { background: var(--accent); color: white; border-color: var(--accent); }
|
| 51 |
+
button.primary:hover:not(:disabled) { background: #3c3489; }
|
| 52 |
+
code, .mono { font-family: var(--code); font-size: 13px; }
|
| 53 |
+
.pill {
|
| 54 |
+
display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 12px;
|
| 55 |
+
background: var(--accent-soft); color: var(--accent); font-family: var(--code);
|
| 56 |
+
}
|
| 57 |
+
.pill.ok { background: var(--ok-soft); color: var(--ok); }
|
| 58 |
+
.pill.warn { background: var(--warn-soft); color: var(--warn); }
|
| 59 |
+
.pill.err { background: var(--err-soft); color: var(--err); }
|
| 60 |
+
.my-id { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--accent-soft); border-radius: 8px; }
|
| 61 |
+
.my-id code { font-size: 14px; color: var(--accent); font-weight: 500; }
|
| 62 |
+
.peers-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
|
| 63 |
+
.peer-card { padding: 10px 14px; border: 0.5px solid var(--line); border-radius: 8px; background: var(--card); }
|
| 64 |
+
.peer-card .head { display: flex; justify-content: space-between; align-items: center; }
|
| 65 |
+
.peer-card .caps { font-size: 12px; color: var(--muted); margin-top: 4px; }
|
| 66 |
+
.progress { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 8px; }
|
| 67 |
+
.progress > div { height: 100%; background: var(--accent); transition: width .15s; width: 0%; }
|
| 68 |
+
.modes { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
|
| 69 |
+
.modes label {
|
| 70 |
+
padding: 6px 12px; border: 0.5px solid var(--line); border-radius: 16px; cursor: pointer; font-size: 13px;
|
| 71 |
+
background: var(--card);
|
| 72 |
+
}
|
| 73 |
+
.modes label.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
|
| 74 |
+
.modes input { display: none; }
|
| 75 |
+
.results { display: grid; gap: 10px; margin-top: 14px; }
|
| 76 |
+
.result { padding: 12px 14px; border-radius: 8px; border: 0.5px solid var(--line); background: var(--card); }
|
| 77 |
+
.result .head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
|
| 78 |
+
.result .text { white-space: pre-wrap; word-wrap: break-word; font-size: 14px; }
|
| 79 |
+
.result .text:empty::before { content: '…'; color: var(--muted); }
|
| 80 |
+
.log { background: var(--bg); border: 0.5px solid var(--line); border-radius: 6px; padding: 10px 12px; max-height: 200px; overflow-y: auto; font-family: var(--code); font-size: 12px; line-height: 1.5; }
|
| 81 |
+
.log .l { color: var(--muted); }
|
| 82 |
+
.log .l b { color: var(--fg); font-weight: 500; }
|
| 83 |
+
.footnote { font-size: 12px; color: var(--muted); margin-top: 6px; }
|
| 84 |
+
.info { padding: 10px 14px; border-radius: 6px; background: var(--warn-soft); color: var(--warn); font-size: 13px; border-left: 3px solid var(--warn); }
|
| 85 |
+
.danger { padding: 10px 14px; border-radius: 6px; background: var(--err-soft); color: var(--err); font-size: 13px; border-left: 3px solid var(--err); }
|
| 86 |
+
</style>
|
| 87 |
+
</head>
|
| 88 |
+
<body>
|
| 89 |
+
<div class="wrap">
|
| 90 |
+
<header>
|
| 91 |
+
<h1>BrowserMesh</h1>
|
| 92 |
+
<p class="sub">Distributed LLM inference across browser peers, via WebRTC. Open this URL in two tabs (or send to a friend), connect, load the model in each, and run inference together.</p>
|
| 93 |
+
<div class="my-id">
|
| 94 |
+
<span style="font-size: 13px; color: var(--muted);">Your peer ID:</span>
|
| 95 |
+
<code id="my-peer-id">connecting to broker…</code>
|
| 96 |
+
<button id="copy-link" style="margin-left:auto" disabled>Copy invite link</button>
|
| 97 |
+
</div>
|
| 98 |
+
</header>
|
| 99 |
+
|
| 100 |
+
<section>
|
| 101 |
+
<h2>Mesh</h2>
|
| 102 |
+
<div class="card">
|
| 103 |
+
<div class="row" style="margin-bottom: 12px;">
|
| 104 |
+
<input type="text" id="connect-input" placeholder="Paste a peer ID to connect">
|
| 105 |
+
<button id="connect-btn" disabled>Connect</button>
|
| 106 |
+
</div>
|
| 107 |
+
<div class="peers-grid" id="peers-list">
|
| 108 |
+
<div class="footnote">No peers connected. Share your invite link to add some.</div>
|
| 109 |
+
</div>
|
| 110 |
+
</div>
|
| 111 |
+
</section>
|
| 112 |
+
|
| 113 |
+
<section>
|
| 114 |
+
<h2>This browser</h2>
|
| 115 |
+
<div class="card">
|
| 116 |
+
<div id="caps-display" class="footnote">Detecting capabilities…</div>
|
| 117 |
+
<div class="row" style="margin-top: 14px;">
|
| 118 |
+
<select id="model-select">
|
| 119 |
+
<option value="onnx-community/Qwen2.5-0.5B-Instruct">Qwen2.5-0.5B-Instruct · q4 · ~400MB</option>
|
| 120 |
+
<option value="HuggingFaceTB/SmolLM2-360M-Instruct">SmolLM2-360M-Instruct · q4 · ~250MB</option>
|
| 121 |
+
<option value="onnx-community/Llama-3.2-1B-Instruct">Llama-3.2-1B-Instruct · q4 · ~700MB</option>
|
| 122 |
+
</select>
|
| 123 |
+
<button id="load-model-btn" class="primary">Load model</button>
|
| 124 |
+
</div>
|
| 125 |
+
<div class="progress" style="margin-top: 10px;"><div id="model-progress-bar"></div></div>
|
| 126 |
+
<div class="footnote" id="model-status">Click to download and load. Cached after first use.</div>
|
| 127 |
+
</div>
|
| 128 |
+
</section>
|
| 129 |
+
|
| 130 |
+
<section>
|
| 131 |
+
<h2>Inference</h2>
|
| 132 |
+
<div class="card">
|
| 133 |
+
<div class="modes">
|
| 134 |
+
<label class="on"><input type="radio" name="mode" value="ensemble" checked>Ensemble <span class="pill ok">working</span></label>
|
| 135 |
+
<label><input type="radio" name="mode" value="pipeline">Pipeline parallel <span class="pill warn">protocol only</span></label>
|
| 136 |
+
<label><input type="radio" name="mode" value="moe">MoE expert routing <span class="pill warn">protocol only</span></label>
|
| 137 |
+
</div>
|
| 138 |
+
<textarea id="prompt-input" rows="3" placeholder="Enter a prompt. Try: "Explain WebRTC ICE traversal in one paragraph.""></textarea>
|
| 139 |
+
<div class="row" style="margin-top: 10px;">
|
| 140 |
+
<button id="run-btn" class="primary" disabled>Run on mesh</button>
|
| 141 |
+
<span class="footnote" id="run-hint">Load the model first.</span>
|
| 142 |
+
</div>
|
| 143 |
+
<div class="results" id="results"></div>
|
| 144 |
+
</div>
|
| 145 |
+
</section>
|
| 146 |
+
|
| 147 |
+
<section>
|
| 148 |
+
<h2>Mesh log</h2>
|
| 149 |
+
<div class="log" id="log"></div>
|
| 150 |
+
</section>
|
| 151 |
+
|
| 152 |
+
<section>
|
| 153 |
+
<h2>Deployment notes</h2>
|
| 154 |
+
<div class="card" style="font-size: 13px; line-height: 1.7; color: var(--muted);">
|
| 155 |
+
<p style="margin: 0 0 8px;"><b style="color: var(--fg)">Signaling.</b> This demo uses the public PeerJS broker at <code>0.peerjs.com</code> — rate-limited and shared. For production, run your own PeerServer (<code>npm install peer</code> or the Docker image) and pass <code>{host, port, path, key}</code> to <code>new Peer()</code>. Or write a PHP signaling server — it's just WebSocket + relay-room-by-id.</p>
|
| 156 |
+
<p style="margin: 0 0 8px;"><b style="color: var(--fg)">NAT traversal.</b> Default ICE uses Google's public STUN. If two peers can't connect (corporate NAT, symmetric NAT) you need a TURN server. Coturn on a small VPS handles thousands of users.</p>
|
| 157 |
+
<p style="margin: 0 0 8px;"><b style="color: var(--fg)">CORS / COEP.</b> transformers.js downloads from <code>huggingface.co</code> CDN (CORS-enabled). No special headers required unless you later add SharedArrayBuffer/threaded WASM, then add <code>Cross-Origin-Opener-Policy: same-origin</code> and <code>Cross-Origin-Embedder-Policy: require-corp</code>.</p>
|
| 158 |
+
<p style="margin: 0;"><b style="color: var(--fg)">Pipeline / MoE.</b> The protocol layer (capability ad, request routing, error handling, circuit breaker) is fully wired. The inference handlers return <code>{ unimplemented: true }</code> — implementing them requires a custom transformers.js fork that exposes intermediate hidden states between transformer blocks. See the <code>handlePipelineStage</code> and <code>handleMoeExpert</code> stubs at the bottom of the script for the TODO contract.</p>
|
| 159 |
+
</div>
|
| 160 |
+
</section>
|
| 161 |
+
</div>
|
| 162 |
+
|
| 163 |
+
<script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
|
| 164 |
+
<script type="module">
|
| 165 |
+
import { pipeline, env, TextStreamer } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.2';
|
| 166 |
+
|
| 167 |
+
env.allowLocalModels = false;
|
| 168 |
+
env.useBrowserCache = true;
|
| 169 |
+
|
| 170 |
+
// ─── state ────────────────────────────────────────────────────────────────
|
| 171 |
+
const PROTO_VERSION = 1;
|
| 172 |
+
const state = {
|
| 173 |
+
peer: null,
|
| 174 |
+
myId: null,
|
| 175 |
+
peers: {}, // peerId -> { conn, caps, lastSeen }
|
| 176 |
+
myCaps: null,
|
| 177 |
+
generator: null,
|
| 178 |
+
modelId: null,
|
| 179 |
+
inflight: {}, // requestId -> { results, mode, prompt, startedAt }
|
| 180 |
+
};
|
| 181 |
+
|
| 182 |
+
const $ = id => document.getElementById(id);
|
| 183 |
+
const log = (msg, peerId) => {
|
| 184 |
+
const el = $('log');
|
| 185 |
+
const time = new Date().toLocaleTimeString();
|
| 186 |
+
const who = peerId ? `<b>${peerId.slice(0,8)}</b> ` : '';
|
| 187 |
+
el.innerHTML += `<div class="l">[${time}] ${who}${msg}</div>`;
|
| 188 |
+
el.scrollTop = el.scrollHeight;
|
| 189 |
+
};
|
| 190 |
+
|
| 191 |
+
// ─── capability detection ─────────────────────────────────────────────────
|
| 192 |
+
async function detectCapabilities() {
|
| 193 |
+
const caps = {
|
| 194 |
+
peerId: state.myId,
|
| 195 |
+
ts: Date.now(),
|
| 196 |
+
device: {
|
| 197 |
+
webgpu: !!navigator.gpu,
|
| 198 |
+
cores: navigator.hardwareConcurrency || null,
|
| 199 |
+
memoryGB: navigator.deviceMemory || null,
|
| 200 |
+
ua: (navigator.userAgent.match(/(Chrome|Firefox|Safari|Edge)\/[\d.]+/) || ['unknown'])[0],
|
| 201 |
+
},
|
| 202 |
+
gpu: null,
|
| 203 |
+
network: { bandwidthKbps: null, rttMs: null },
|
| 204 |
+
models: [],
|
| 205 |
+
capabilities: ['inference.ensemble'],
|
| 206 |
+
};
|
| 207 |
+
if (navigator.gpu) {
|
| 208 |
+
try {
|
| 209 |
+
const adapter = await navigator.gpu.requestAdapter();
|
| 210 |
+
if (adapter) {
|
| 211 |
+
const info = adapter.info || {};
|
| 212 |
+
caps.gpu = {
|
| 213 |
+
vendor: info.vendor || 'unknown',
|
| 214 |
+
architecture: info.architecture || 'unknown',
|
| 215 |
+
device: info.device || '',
|
| 216 |
+
};
|
| 217 |
+
}
|
| 218 |
+
} catch (e) { /* ignore */ }
|
| 219 |
+
}
|
| 220 |
+
// crude bandwidth probe: fetch a known small asset, measure
|
| 221 |
+
try {
|
| 222 |
+
const url = 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.7.2/package.json';
|
| 223 |
+
const t0 = performance.now();
|
| 224 |
+
const r = await fetch(url, { cache: 'no-store' });
|
| 225 |
+
const text = await r.text();
|
| 226 |
+
const dt = performance.now() - t0;
|
| 227 |
+
caps.network.bandwidthKbps = Math.round((text.length * 8) / (dt / 1000) / 1024);
|
| 228 |
+
caps.network.rttMs = Math.round(dt);
|
| 229 |
+
} catch (e) { /* ignore */ }
|
| 230 |
+
return caps;
|
| 231 |
+
}
|
| 232 |
+
|
| 233 |
+
function renderCaps() {
|
| 234 |
+
const c = state.myCaps;
|
| 235 |
+
if (!c) return;
|
| 236 |
+
const bits = [];
|
| 237 |
+
bits.push(c.device.webgpu ? '<span class="pill ok">WebGPU</span>' : '<span class="pill warn">WASM only</span>');
|
| 238 |
+
if (c.gpu?.vendor) bits.push(`<span class="pill">${c.gpu.vendor}${c.gpu.architecture ? ' · ' + c.gpu.architecture : ''}</span>`);
|
| 239 |
+
if (c.device.cores) bits.push(`<span class="pill">${c.device.cores} cores</span>`);
|
| 240 |
+
if (c.device.memoryGB) bits.push(`<span class="pill">${c.device.memoryGB} GB RAM</span>`);
|
| 241 |
+
if (c.network.bandwidthKbps) bits.push(`<span class="pill">${(c.network.bandwidthKbps/1024).toFixed(1)} Mbps to CDN</span>`);
|
| 242 |
+
bits.push(`<span class="pill">${c.device.ua}</span>`);
|
| 243 |
+
$('caps-display').innerHTML = bits.join(' ');
|
| 244 |
+
}
|
| 245 |
+
|
| 246 |
+
// ─── peer mesh setup (PeerJS / WebRTC) ────────────────────────────────────
|
| 247 |
+
function setupPeer() {
|
| 248 |
+
// public PeerJS broker. for prod: pass {host, port, path, key} for your own server.
|
| 249 |
+
state.peer = new Peer({ debug: 1 });
|
| 250 |
+
|
| 251 |
+
state.peer.on('open', async id => {
|
| 252 |
+
state.myId = id;
|
| 253 |
+
$('my-peer-id').textContent = id;
|
| 254 |
+
$('connect-btn').disabled = false;
|
| 255 |
+
$('copy-link').disabled = false;
|
| 256 |
+
log(`broker connected, peer id ${id}`);
|
| 257 |
+
state.myCaps = await detectCapabilities();
|
| 258 |
+
renderCaps();
|
| 259 |
+
});
|
| 260 |
+
|
| 261 |
+
state.peer.on('connection', conn => {
|
| 262 |
+
log(`incoming connection from ${conn.peer.slice(0,8)}`);
|
| 263 |
+
wireConnection(conn);
|
| 264 |
+
});
|
| 265 |
+
|
| 266 |
+
state.peer.on('error', err => {
|
| 267 |
+
log(`peer error: ${err.type} — ${err.message}`);
|
| 268 |
+
if (err.type === 'peer-unavailable') {
|
| 269 |
+
log('peer not online or wrong ID');
|
| 270 |
+
}
|
| 271 |
+
});
|
| 272 |
+
|
| 273 |
+
state.peer.on('disconnected', () => {
|
| 274 |
+
log('disconnected from broker, attempting reconnect…');
|
| 275 |
+
state.peer.reconnect();
|
| 276 |
+
});
|
| 277 |
+
}
|
| 278 |
+
|
| 279 |
+
function wireConnection(conn) {
|
| 280 |
+
conn.on('open', () => {
|
| 281 |
+
state.peers[conn.peer] = { conn, caps: null, lastSeen: Date.now() };
|
| 282 |
+
renderPeers();
|
| 283 |
+
// exchange capabilities
|
| 284 |
+
send(conn, { type: 'capability_advertise', payload: state.myCaps });
|
| 285 |
+
log(`connection open to ${conn.peer.slice(0,8)}, advertising capabilities`);
|
| 286 |
+
});
|
| 287 |
+
|
| 288 |
+
conn.on('data', data => {
|
| 289 |
+
if (typeof data !== 'object' || data.v !== PROTO_VERSION) {
|
| 290 |
+
log(`dropping malformed message from ${conn.peer.slice(0,8)}`);
|
| 291 |
+
return;
|
| 292 |
+
}
|
| 293 |
+
handleMessage(conn.peer, data);
|
| 294 |
+
});
|
| 295 |
+
|
| 296 |
+
conn.on('close', () => {
|
| 297 |
+
delete state.peers[conn.peer];
|
| 298 |
+
log(`disconnected from ${conn.peer.slice(0,8)}`);
|
| 299 |
+
renderPeers();
|
| 300 |
+
});
|
| 301 |
+
|
| 302 |
+
conn.on('error', err => {
|
| 303 |
+
log(`connection error with ${conn.peer.slice(0,8)}: ${err.message}`);
|
| 304 |
+
});
|
| 305 |
+
}
|
| 306 |
+
|
| 307 |
+
function send(conn, msg) {
|
| 308 |
+
conn.send({ v: PROTO_VERSION, ts: Date.now(), ...msg });
|
| 309 |
+
}
|
| 310 |
+
|
| 311 |
+
function broadcast(msg) {
|
| 312 |
+
for (const p of Object.values(state.peers)) {
|
| 313 |
+
if (p.conn.open) send(p.conn, msg);
|
| 314 |
+
}
|
| 315 |
+
}
|
| 316 |
+
|
| 317 |
+
function connectToPeer() {
|
| 318 |
+
const id = $('connect-input').value.trim();
|
| 319 |
+
if (!id || id === state.myId || state.peers[id]) return;
|
| 320 |
+
log(`connecting to ${id.slice(0,8)}…`);
|
| 321 |
+
const conn = state.peer.connect(id, { reliable: true });
|
| 322 |
+
wireConnection(conn);
|
| 323 |
+
$('connect-input').value = '';
|
| 324 |
+
}
|
| 325 |
+
|
| 326 |
+
function renderPeers() {
|
| 327 |
+
const list = $('peers-list');
|
| 328 |
+
const peers = Object.entries(state.peers);
|
| 329 |
+
if (peers.length === 0) {
|
| 330 |
+
list.innerHTML = '<div class="footnote">No peers connected. Share your invite link to add some.</div>';
|
| 331 |
+
return;
|
| 332 |
+
}
|
| 333 |
+
list.innerHTML = peers.map(([id, p]) => {
|
| 334 |
+
const c = p.caps;
|
| 335 |
+
const cap = c ? [
|
| 336 |
+
c.device.webgpu ? 'WebGPU' : 'WASM',
|
| 337 |
+
c.gpu?.vendor || '',
|
| 338 |
+
c.device.cores ? c.device.cores + 'c' : '',
|
| 339 |
+
c.models.length ? `models: ${c.models.join(', ')}` : 'no model loaded',
|
| 340 |
+
].filter(Boolean).join(' · ') : 'capabilities pending…';
|
| 341 |
+
return `<div class="peer-card">
|
| 342 |
+
<div class="head"><code>${id.slice(0,12)}…</code><span class="pill ok">connected</span></div>
|
| 343 |
+
<div class="caps">${cap}</div>
|
| 344 |
+
</div>`;
|
| 345 |
+
}).join('');
|
| 346 |
+
}
|
| 347 |
+
|
| 348 |
+
// ─── protocol message dispatch ────────────────────────────────────────────
|
| 349 |
+
function handleMessage(fromPeer, msg) {
|
| 350 |
+
state.peers[fromPeer].lastSeen = Date.now();
|
| 351 |
+
switch (msg.type) {
|
| 352 |
+
case 'capability_advertise':
|
| 353 |
+
state.peers[fromPeer].caps = msg.payload;
|
| 354 |
+
log(`capabilities received`, fromPeer);
|
| 355 |
+
renderPeers();
|
| 356 |
+
// reply with our own if we haven't yet
|
| 357 |
+
break;
|
| 358 |
+
case 'inference_request':
|
| 359 |
+
handleInferenceRequest(fromPeer, msg.payload, msg.id);
|
| 360 |
+
break;
|
| 361 |
+
case 'inference_chunk':
|
| 362 |
+
handleInferenceChunk(fromPeer, msg.payload, msg.id);
|
| 363 |
+
break;
|
| 364 |
+
case 'inference_done':
|
| 365 |
+
handleInferenceDone(fromPeer, msg.payload, msg.id);
|
| 366 |
+
break;
|
| 367 |
+
case 'inference_error':
|
| 368 |
+
handleInferenceError(fromPeer, msg.payload, msg.id);
|
| 369 |
+
break;
|
| 370 |
+
case 'ping':
|
| 371 |
+
send(state.peers[fromPeer].conn, { type: 'pong', id: msg.id });
|
| 372 |
+
break;
|
| 373 |
+
case 'pong':
|
| 374 |
+
// could compute RTT here
|
| 375 |
+
break;
|
| 376 |
+
default:
|
| 377 |
+
log(`unknown message type: ${msg.type}`, fromPeer);
|
| 378 |
+
}
|
| 379 |
+
}
|
| 380 |
+
|
| 381 |
+
// ─── model loading ────────────────────────────────────────────────────────
|
| 382 |
+
async function loadModel() {
|
| 383 |
+
const modelId = $('model-select').value;
|
| 384 |
+
$('load-model-btn').disabled = true;
|
| 385 |
+
$('model-select').disabled = true;
|
| 386 |
+
$('model-status').textContent = 'Downloading…';
|
| 387 |
+
|
| 388 |
+
const device = state.myCaps.device.webgpu ? 'webgpu' : 'wasm';
|
| 389 |
+
log(`loading ${modelId} on ${device}`);
|
| 390 |
+
|
| 391 |
+
try {
|
| 392 |
+
state.generator = await pipeline('text-generation', modelId, {
|
| 393 |
+
dtype: 'q4',
|
| 394 |
+
device,
|
| 395 |
+
progress_callback: p => {
|
| 396 |
+
if (p.status === 'progress' && p.total) {
|
| 397 |
+
const pct = Math.round((p.loaded / p.total) * 100);
|
| 398 |
+
$('model-progress-bar').style.width = pct + '%';
|
| 399 |
+
$('model-status').textContent = `${p.file} — ${pct}%`;
|
| 400 |
+
} else if (p.status === 'done') {
|
| 401 |
+
$('model-status').textContent = `${p.file} ready`;
|
| 402 |
+
}
|
| 403 |
+
},
|
| 404 |
+
});
|
| 405 |
+
state.modelId = modelId;
|
| 406 |
+
state.myCaps.models = [modelId];
|
| 407 |
+
$('model-progress-bar').style.width = '100%';
|
| 408 |
+
$('model-status').innerHTML = `<span class="pill ok">loaded</span> ${modelId} on ${device}`;
|
| 409 |
+
$('run-btn').disabled = false;
|
| 410 |
+
$('run-hint').textContent = 'Ready. Enter a prompt and run.';
|
| 411 |
+
log(`model ready: ${modelId}`);
|
| 412 |
+
// re-advertise with model list
|
| 413 |
+
broadcast({ type: 'capability_advertise', payload: state.myCaps });
|
| 414 |
+
renderCaps();
|
| 415 |
+
} catch (err) {
|
| 416 |
+
$('model-status').innerHTML = `<span class="pill err">error</span> ${err.message}`;
|
| 417 |
+
log(`model load failed: ${err.message}`);
|
| 418 |
+
$('load-model-btn').disabled = false;
|
| 419 |
+
$('model-select').disabled = false;
|
| 420 |
+
}
|
| 421 |
+
}
|
| 422 |
+
|
| 423 |
+
// ─── local inference (the part that actually runs the model) ──────────────
|
| 424 |
+
async function runLocalInference(prompt, onChunk) {
|
| 425 |
+
if (!state.generator) throw new Error('model not loaded');
|
| 426 |
+
const messages = [
|
| 427 |
+
{ role: 'system', content: 'You are a helpful assistant. Be concise.' },
|
| 428 |
+
{ role: 'user', content: prompt },
|
| 429 |
+
];
|
| 430 |
+
let fullText = '';
|
| 431 |
+
const streamer = new TextStreamer(state.generator.tokenizer, {
|
| 432 |
+
skip_prompt: true,
|
| 433 |
+
skip_special_tokens: true,
|
| 434 |
+
callback_function: text => {
|
| 435 |
+
fullText += text;
|
| 436 |
+
if (onChunk) onChunk(text, fullText);
|
| 437 |
+
},
|
| 438 |
+
});
|
| 439 |
+
const t0 = performance.now();
|
| 440 |
+
await state.generator(messages, {
|
| 441 |
+
max_new_tokens: 200,
|
| 442 |
+
temperature: 0.7,
|
| 443 |
+
do_sample: true,
|
| 444 |
+
streamer,
|
| 445 |
+
});
|
| 446 |
+
const elapsed = performance.now() - t0;
|
| 447 |
+
return { text: fullText, elapsedMs: Math.round(elapsed) };
|
| 448 |
+
}
|
| 449 |
+
|
| 450 |
+
// ─── coordinator: run inference across the mesh ──────────────────────────
|
| 451 |
+
async function runInference() {
|
| 452 |
+
const prompt = $('prompt-input').value.trim();
|
| 453 |
+
if (!prompt) return;
|
| 454 |
+
const mode = document.querySelector('input[name=mode]:checked').value;
|
| 455 |
+
const reqId = crypto.randomUUID();
|
| 456 |
+
|
| 457 |
+
$('run-btn').disabled = true;
|
| 458 |
+
$('run-hint').textContent = `Running ${mode}…`;
|
| 459 |
+
$('results').innerHTML = '';
|
| 460 |
+
|
| 461 |
+
const peersWithModel = Object.entries(state.peers).filter(([id, p]) => p.caps?.models?.length > 0);
|
| 462 |
+
log(`request ${reqId.slice(0,8)} · mode=${mode} · ${peersWithModel.length + 1} workers (self + peers)`);
|
| 463 |
+
|
| 464 |
+
state.inflight[reqId] = { results: {}, mode, prompt, startedAt: Date.now() };
|
| 465 |
+
|
| 466 |
+
if (mode === 'ensemble') {
|
| 467 |
+
// every worker runs the full model on the same prompt; coordinator gathers all completions
|
| 468 |
+
// worker = self + every peer that has a model loaded
|
| 469 |
+
|
| 470 |
+
// create result slots
|
| 471 |
+
addResult(reqId, state.myId, 'this browser', 'running');
|
| 472 |
+
for (const [pid, p] of peersWithModel) {
|
| 473 |
+
addResult(reqId, pid, p.caps.models[0] + ' on ' + (p.caps.gpu?.vendor || 'cpu'), 'running');
|
| 474 |
+
}
|
| 475 |
+
|
| 476 |
+
// dispatch to peers
|
| 477 |
+
for (const [pid, p] of peersWithModel) {
|
| 478 |
+
send(p.conn, {
|
| 479 |
+
type: 'inference_request',
|
| 480 |
+
id: reqId,
|
| 481 |
+
payload: { mode: 'ensemble', prompt, params: { max_new_tokens: 200, temperature: 0.7 } },
|
| 482 |
+
});
|
| 483 |
+
}
|
| 484 |
+
|
| 485 |
+
// run locally with streaming
|
| 486 |
+
try {
|
| 487 |
+
const out = await runLocalInference(prompt, (chunk, full) => {
|
| 488 |
+
updateResult(reqId, state.myId, full, 'running');
|
| 489 |
+
});
|
| 490 |
+
updateResult(reqId, state.myId, out.text, 'done', `${out.elapsedMs}ms · local`);
|
| 491 |
+
} catch (err) {
|
| 492 |
+
updateResult(reqId, state.myId, `error: ${err.message}`, 'error');
|
| 493 |
+
}
|
| 494 |
+
|
| 495 |
+
// peer results arrive async via handleInferenceDone
|
| 496 |
+
checkComplete(reqId);
|
| 497 |
+
} else if (mode === 'pipeline' || mode === 'moe') {
|
| 498 |
+
// protocol-only modes: dispatch real request, expect peers to return unimplemented
|
| 499 |
+
// this exercises the wiring; replace handler stubs to ship the real thing
|
| 500 |
+
addResult(reqId, state.myId, `${mode} coordinator`, 'running');
|
| 501 |
+
if (peersWithModel.length === 0) {
|
| 502 |
+
updateResult(reqId, state.myId, `${mode} mode requires at least one peer with a loaded model.\n\nFor a real implementation, see the handle${mode === 'pipeline' ? 'PipelineStage' : 'MoeExpert'} stub at the bottom of the script. The protocol is wired — only the inference handler is TODO.`, 'done');
|
| 503 |
+
$('run-btn').disabled = false;
|
| 504 |
+
$('run-hint').textContent = 'Ready.';
|
| 505 |
+
return;
|
| 506 |
+
}
|
| 507 |
+
for (const [pid, p] of peersWithModel) {
|
| 508 |
+
addResult(reqId, pid, `${mode} stage on ${p.caps.gpu?.vendor || 'cpu'}`, 'running');
|
| 509 |
+
send(p.conn, {
|
| 510 |
+
type: 'inference_request',
|
| 511 |
+
id: reqId,
|
| 512 |
+
payload: mode === 'pipeline'
|
| 513 |
+
? { mode: 'pipeline_stage', prompt, layers: [0, 7], input_hidden: null }
|
| 514 |
+
: { mode: 'moe_expert', prompt, expert_id: 'general', input_hidden: null },
|
| 515 |
+
});
|
| 516 |
+
}
|
| 517 |
+
updateResult(reqId, state.myId, `Dispatched to ${peersWithModel.length} peer(s). Awaiting responses…`, 'done');
|
| 518 |
+
setTimeout(() => checkComplete(reqId), 5000);
|
| 519 |
+
}
|
| 520 |
+
}
|
| 521 |
+
|
| 522 |
+
function addResult(reqId, peerId, label, status) {
|
| 523 |
+
const el = document.createElement('div');
|
| 524 |
+
el.className = 'result';
|
| 525 |
+
el.id = `r-${reqId}-${peerId}`;
|
| 526 |
+
el.innerHTML = `
|
| 527 |
+
<div class="head">
|
| 528 |
+
<span>${label} <code>${peerId.slice(0,8)}</code></span>
|
| 529 |
+
<span class="pill ${status === 'running' ? '' : status === 'done' ? 'ok' : 'err'}" data-status>${status}</span>
|
| 530 |
+
</div>
|
| 531 |
+
<div class="text" data-text></div>`;
|
| 532 |
+
$('results').appendChild(el);
|
| 533 |
+
}
|
| 534 |
+
|
| 535 |
+
function updateResult(reqId, peerId, text, status, meta) {
|
| 536 |
+
const el = $(`r-${reqId}-${peerId}`);
|
| 537 |
+
if (!el) return;
|
| 538 |
+
el.querySelector('[data-text]').textContent = text;
|
| 539 |
+
const s = el.querySelector('[data-status]');
|
| 540 |
+
s.textContent = meta || status;
|
| 541 |
+
s.className = `pill ${status === 'running' ? '' : status === 'done' ? 'ok' : 'err'}`;
|
| 542 |
+
}
|
| 543 |
+
|
| 544 |
+
function checkComplete(reqId) {
|
| 545 |
+
const inflight = state.inflight[reqId];
|
| 546 |
+
if (!inflight) return;
|
| 547 |
+
const elapsed = Date.now() - inflight.startedAt;
|
| 548 |
+
if (elapsed > 60000) {
|
| 549 |
+
delete state.inflight[reqId];
|
| 550 |
+
}
|
| 551 |
+
$('run-btn').disabled = false;
|
| 552 |
+
$('run-hint').textContent = 'Ready.';
|
| 553 |
+
}
|
| 554 |
+
|
| 555 |
+
// ─── inference request handler (we are a worker for someone else) ─────────
|
| 556 |
+
async function handleInferenceRequest(fromPeer, payload, reqId) {
|
| 557 |
+
log(`inference request: mode=${payload.mode}`, fromPeer);
|
| 558 |
+
const conn = state.peers[fromPeer].conn;
|
| 559 |
+
|
| 560 |
+
if (!state.generator) {
|
| 561 |
+
send(conn, { type: 'inference_error', id: reqId, payload: { reason: 'no model loaded' } });
|
| 562 |
+
return;
|
| 563 |
+
}
|
| 564 |
+
|
| 565 |
+
try {
|
| 566 |
+
if (payload.mode === 'ensemble') {
|
| 567 |
+
const out = await runLocalInference(payload.prompt, (chunk, full) => {
|
| 568 |
+
send(conn, { type: 'inference_chunk', id: reqId, payload: { text: full } });
|
| 569 |
+
});
|
| 570 |
+
send(conn, { type: 'inference_done', id: reqId, payload: { text: out.text, elapsedMs: out.elapsedMs, model: state.modelId } });
|
| 571 |
+
} else if (payload.mode === 'pipeline_stage') {
|
| 572 |
+
const result = await handlePipelineStage(payload);
|
| 573 |
+
send(conn, { type: 'inference_done', id: reqId, payload: result });
|
| 574 |
+
} else if (payload.mode === 'moe_expert') {
|
| 575 |
+
const result = await handleMoeExpert(payload);
|
| 576 |
+
send(conn, { type: 'inference_done', id: reqId, payload: result });
|
| 577 |
+
} else {
|
| 578 |
+
send(conn, { type: 'inference_error', id: reqId, payload: { reason: `unknown mode: ${payload.mode}` } });
|
| 579 |
+
}
|
| 580 |
+
} catch (err) {
|
| 581 |
+
send(conn, { type: 'inference_error', id: reqId, payload: { reason: err.message } });
|
| 582 |
+
}
|
| 583 |
+
}
|
| 584 |
+
|
| 585 |
+
function handleInferenceChunk(fromPeer, payload, reqId) {
|
| 586 |
+
updateResult(reqId, fromPeer, payload.text, 'running');
|
| 587 |
+
}
|
| 588 |
+
|
| 589 |
+
function handleInferenceDone(fromPeer, payload, reqId) {
|
| 590 |
+
log(`inference done in ${payload.elapsedMs || '?'}ms`, fromPeer);
|
| 591 |
+
if (payload.unimplemented) {
|
| 592 |
+
updateResult(reqId, fromPeer, `[${payload.mode}] TODO — handler is a stub.\nReturned: ${JSON.stringify(payload, null, 2)}`, 'done', 'unimplemented');
|
| 593 |
+
} else {
|
| 594 |
+
updateResult(reqId, fromPeer, payload.text, 'done', `${payload.elapsedMs}ms · ${payload.model || ''}`);
|
| 595 |
+
}
|
| 596 |
+
checkComplete(reqId);
|
| 597 |
+
}
|
| 598 |
+
|
| 599 |
+
function handleInferenceError(fromPeer, payload, reqId) {
|
| 600 |
+
log(`inference error: ${payload.reason}`, fromPeer);
|
| 601 |
+
updateResult(reqId, fromPeer, `error: ${payload.reason}`, 'error');
|
| 602 |
+
checkComplete(reqId);
|
| 603 |
+
}
|
| 604 |
+
|
| 605 |
+
// ─── pipeline / MoE handlers (TODO: real implementation needs modeling fork) ─
|
| 606 |
+
// Contract: caller sends { layers: [start, end], input_hidden: Float32Array or null for first stage, prompt: string (first stage only) }.
|
| 607 |
+
// Implementer should:
|
| 608 |
+
// 1. Load the model weights for just the assigned layer range (custom transformers.js fork; ONNX export per stage)
|
| 609 |
+
// 2. If input_hidden is null, run embedding + the assigned layers, output hidden state
|
| 610 |
+
// 3. Else, accept input_hidden, run the assigned layers, output hidden state
|
| 611 |
+
// 4. If layers includes lm_head, run final norm + lm_head + sampling, output token + new prompt for next iter
|
| 612 |
+
// The coordinator chains stages by forwarding output_hidden to the next peer in the pipeline.
|
| 613 |
+
async function handlePipelineStage(payload) {
|
| 614 |
+
return {
|
| 615 |
+
unimplemented: true,
|
| 616 |
+
mode: 'pipeline_stage',
|
| 617 |
+
layers_requested: payload.layers,
|
| 618 |
+
note: 'Splitting transformers.js inference by layer requires either (a) ONNX exports per stage, or (b) a forked modeling file that exposes hidden states between blocks. Neither is built-in. See https://github.com/huggingface/transformers.js for the modeling layer.',
|
| 619 |
+
};
|
| 620 |
+
}
|
| 621 |
+
|
| 622 |
+
// Contract: caller sends { expert_id: string, input_hidden: Float32Array, prompt: string (first call) }.
|
| 623 |
+
// Implementer should:
|
| 624 |
+
// 1. Load only the expert weights for expert_id (a LoRA adapter, a sub-FFN, or a small specialist model)
|
| 625 |
+
// 2. Run the expert on the input hidden state
|
| 626 |
+
// 3. Return output_hidden plus a confidence/gating score
|
| 627 |
+
// The coordinator (router) is responsible for picking top-k experts per token based on gating logits.
|
| 628 |
+
async function handleMoeExpert(payload) {
|
| 629 |
+
return {
|
| 630 |
+
unimplemented: true,
|
| 631 |
+
mode: 'moe_expert',
|
| 632 |
+
expert_id: payload.expert_id,
|
| 633 |
+
note: 'MoE expert hosting works best by treating each peer as a LoRA-adapted specialist of a small base model. Each peer keeps the base in memory (cheap) and swaps adapters per request. Router picks top-k experts using a gating model. Real Mixtral-style sharding needs per-expert ONNX exports.',
|
| 634 |
+
};
|
| 635 |
+
}
|
| 636 |
+
|
| 637 |
+
// ─── UI wiring ────────────────────────────────────────────────────────────
|
| 638 |
+
$('connect-btn').addEventListener('click', connectToPeer);
|
| 639 |
+
$('connect-input').addEventListener('keydown', e => { if (e.key === 'Enter') connectToPeer(); });
|
| 640 |
+
$('copy-link').addEventListener('click', () => {
|
| 641 |
+
const url = `${location.origin}${location.pathname}?peer=${state.myId}`;
|
| 642 |
+
navigator.clipboard.writeText(url).then(() => {
|
| 643 |
+
$('copy-link').textContent = 'Copied!';
|
| 644 |
+
setTimeout(() => { $('copy-link').textContent = 'Copy invite link'; }, 1500);
|
| 645 |
+
});
|
| 646 |
+
});
|
| 647 |
+
$('load-model-btn').addEventListener('click', loadModel);
|
| 648 |
+
$('run-btn').addEventListener('click', runInference);
|
| 649 |
+
document.querySelectorAll('.modes label').forEach(l => {
|
| 650 |
+
l.addEventListener('click', () => {
|
| 651 |
+
document.querySelectorAll('.modes label').forEach(x => x.classList.remove('on'));
|
| 652 |
+
l.classList.add('on');
|
| 653 |
+
});
|
| 654 |
+
});
|
| 655 |
+
|
| 656 |
+
// auto-connect if ?peer= in URL
|
| 657 |
+
const urlParams = new URLSearchParams(location.search);
|
| 658 |
+
const incomingPeer = urlParams.get('peer');
|
| 659 |
+
if (incomingPeer) {
|
| 660 |
+
log(`auto-connect target from URL: ${incomingPeer.slice(0,8)}`);
|
| 661 |
+
$('connect-input').value = incomingPeer;
|
| 662 |
+
// wait for our own broker connection before connecting
|
| 663 |
+
const tryConnect = () => {
|
| 664 |
+
if (state.myId) connectToPeer();
|
| 665 |
+
else setTimeout(tryConnect, 200);
|
| 666 |
+
};
|
| 667 |
+
setTimeout(tryConnect, 500);
|
| 668 |
+
}
|
| 669 |
+
|
| 670 |
+
// ─── go ───────────────────────────────────────────────────────────────────
|
| 671 |
+
setupPeer();
|
| 672 |
+
log('BrowserMesh booted. waiting for peer ID from broker…');
|
| 673 |
+
</script>
|
| 674 |
+
</body>
|
| 675 |
+
</html>
|
hearthnet-mesh.html
ADDED
|
@@ -0,0 +1,742 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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.0">
|
| 6 |
+
<title>HearthNet · browser-mesh inference</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=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
| 10 |
+
<style>
|
| 11 |
+
:root {
|
| 12 |
+
--bg: #0a0e14;
|
| 13 |
+
--surface: #0f141b;
|
| 14 |
+
--surface-2: #161c25;
|
| 15 |
+
--border: #1f2731;
|
| 16 |
+
--border-strong: #2a3441;
|
| 17 |
+
--text: #c5cdd8;
|
| 18 |
+
--text-dim: #6b7785;
|
| 19 |
+
--text-faint: #3f4a58;
|
| 20 |
+
--accent: #5ccfb6;
|
| 21 |
+
--accent-dim: #1f4d44;
|
| 22 |
+
--warn: #d4a657;
|
| 23 |
+
--bad: #e06c75;
|
| 24 |
+
--good: #98c379;
|
| 25 |
+
--info: #61afef;
|
| 26 |
+
--mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
|
| 27 |
+
}
|
| 28 |
+
* { box-sizing: border-box; }
|
| 29 |
+
::selection { background: var(--accent-dim); color: var(--accent); }
|
| 30 |
+
html, body { margin: 0; padding: 0; background: var(--bg); }
|
| 31 |
+
body {
|
| 32 |
+
color: var(--text);
|
| 33 |
+
font-family: var(--mono);
|
| 34 |
+
font-size: 13px;
|
| 35 |
+
line-height: 1.55;
|
| 36 |
+
padding: 28px;
|
| 37 |
+
min-height: 100vh;
|
| 38 |
+
}
|
| 39 |
+
.app { max-width: 1280px; margin: 0 auto; }
|
| 40 |
+
header {
|
| 41 |
+
display: flex; align-items: baseline; justify-content: space-between;
|
| 42 |
+
padding: 0 0 18px;
|
| 43 |
+
border-bottom: 1px solid var(--border);
|
| 44 |
+
margin-bottom: 24px;
|
| 45 |
+
}
|
| 46 |
+
.brand { display: flex; align-items: baseline; gap: 12px; }
|
| 47 |
+
.logo { font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); }
|
| 48 |
+
.logo::before { content: '\25C6 '; color: var(--accent); }
|
| 49 |
+
.tag { font-size: 11px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; }
|
| 50 |
+
.id-row { font-size: 12px; color: var(--text-dim); }
|
| 51 |
+
.id-row .pid { color: var(--accent); font-weight: 500; }
|
| 52 |
+
h2 {
|
| 53 |
+
font-size: 10px; font-weight: 600; text-transform: uppercase;
|
| 54 |
+
letter-spacing: 0.12em; color: var(--text-dim);
|
| 55 |
+
margin: 0 0 12px; padding-bottom: 6px;
|
| 56 |
+
border-bottom: 1px solid var(--border);
|
| 57 |
+
}
|
| 58 |
+
h2 .count { color: var(--accent); font-weight: 500; }
|
| 59 |
+
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
|
| 60 |
+
.card { background: var(--surface); border: 1px solid var(--border); padding: 16px; }
|
| 61 |
+
.card.full { margin-bottom: 16px; }
|
| 62 |
+
button {
|
| 63 |
+
background: transparent; color: var(--text);
|
| 64 |
+
border: 1px solid var(--border-strong);
|
| 65 |
+
padding: 6px 14px;
|
| 66 |
+
font-family: inherit; font-size: 12px;
|
| 67 |
+
cursor: pointer;
|
| 68 |
+
transition: border-color 80ms, color 80ms, background 80ms;
|
| 69 |
+
letter-spacing: 0.02em;
|
| 70 |
+
}
|
| 71 |
+
button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
|
| 72 |
+
button.primary { border-color: var(--accent); color: var(--accent); }
|
| 73 |
+
button.primary:hover:not(:disabled) { background: var(--accent-dim); }
|
| 74 |
+
button:disabled { opacity: 0.35; cursor: not-allowed; }
|
| 75 |
+
input, textarea, select {
|
| 76 |
+
background: var(--bg); color: var(--text);
|
| 77 |
+
border: 1px solid var(--border-strong);
|
| 78 |
+
padding: 6px 10px;
|
| 79 |
+
font-family: inherit; font-size: 12px;
|
| 80 |
+
width: 100%; outline: none;
|
| 81 |
+
}
|
| 82 |
+
input:focus, textarea:focus, select:focus { border-color: var(--accent); }
|
| 83 |
+
textarea { min-height: 60px; resize: vertical; line-height: 1.6; }
|
| 84 |
+
.row { display: flex; gap: 8px; align-items: center; }
|
| 85 |
+
.row + .row { margin-top: 8px; }
|
| 86 |
+
.kv { list-style: none; padding: 0; margin: 0; }
|
| 87 |
+
.kv li { display: flex; justify-content: space-between; padding: 5px 0; border-bottom: 1px dashed var(--border); font-size: 12px; }
|
| 88 |
+
.kv li:last-child { border-bottom: none; }
|
| 89 |
+
.kv .k { color: var(--text-dim); }
|
| 90 |
+
.kv .v { color: var(--text); }
|
| 91 |
+
.ok { color: var(--good); }
|
| 92 |
+
.bad { color: var(--bad); }
|
| 93 |
+
.warn { color: var(--warn); }
|
| 94 |
+
.faint { color: var(--text-faint); }
|
| 95 |
+
.peers { list-style: none; padding: 0; margin: 0; max-height: 180px; overflow-y: auto; }
|
| 96 |
+
.peers li { padding: 8px 10px; border: 1px solid var(--border); margin-bottom: 6px; font-size: 11px; }
|
| 97 |
+
.peers li:last-child { margin-bottom: 0; }
|
| 98 |
+
.peers .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
|
| 99 |
+
.peers .pid { color: var(--accent); font-weight: 500; }
|
| 100 |
+
.peers .dot { display: inline-block; width: 6px; height: 6px; background: var(--good); margin-right: 6px; }
|
| 101 |
+
.peers .dot.dead { background: var(--bad); }
|
| 102 |
+
.peers .meta { color: var(--text-dim); font-size: 10px; }
|
| 103 |
+
.empty { color: var(--text-faint); font-size: 11px; font-style: italic; padding: 6px 0; }
|
| 104 |
+
.mode-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
|
| 105 |
+
.mode-tabs button {
|
| 106 |
+
border: none; border-bottom: 2px solid transparent;
|
| 107 |
+
background: transparent;
|
| 108 |
+
padding: 8px 16px;
|
| 109 |
+
font-size: 11px; letter-spacing: 0.04em;
|
| 110 |
+
color: var(--text-dim);
|
| 111 |
+
text-transform: uppercase;
|
| 112 |
+
}
|
| 113 |
+
.mode-tabs button:hover { color: var(--text); }
|
| 114 |
+
.mode-tabs button.on { color: var(--accent); border-bottom-color: var(--accent); }
|
| 115 |
+
.mode-tabs button.on:hover { color: var(--accent); }
|
| 116 |
+
.results { display: grid; gap: 8px; margin-top: 12px; }
|
| 117 |
+
.result { background: var(--surface-2); border: 1px solid var(--border); padding: 10px 12px; font-size: 12px; }
|
| 118 |
+
.result.streaming { border-color: var(--accent); }
|
| 119 |
+
.result .head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 10px; color: var(--text-dim); letter-spacing: 0.04em; }
|
| 120 |
+
.result .head .pid { color: var(--accent); }
|
| 121 |
+
.result .text { white-space: pre-wrap; word-break: break-word; color: var(--text); line-height: 1.6; }
|
| 122 |
+
.result .text:empty::after { content: '\258D'; color: var(--accent); }
|
| 123 |
+
.log { background: var(--bg); border: 1px solid var(--border); padding: 10px 12px; height: 200px; overflow-y: auto; font-size: 11px; color: var(--text-dim); }
|
| 124 |
+
.log .line { padding: 1px 0; }
|
| 125 |
+
.log .line.in { color: var(--accent); }
|
| 126 |
+
.log .line.out { color: var(--info); }
|
| 127 |
+
.log .line.err { color: var(--bad); }
|
| 128 |
+
.log .line .t { color: var(--text-faint); margin-right: 8px; }
|
| 129 |
+
.prog { height: 2px; background: var(--border); margin-top: 6px; overflow: hidden; }
|
| 130 |
+
.prog > div { height: 100%; background: var(--accent); transition: width 120ms; width: 0; }
|
| 131 |
+
.pill { display: inline-block; padding: 2px 8px; font-size: 10px; border: 1px solid var(--border-strong); color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; }
|
| 132 |
+
.pill.ok { color: var(--good); border-color: var(--accent-dim); }
|
| 133 |
+
.pill.loading { color: var(--warn); border-color: var(--warn); }
|
| 134 |
+
.pill.bad { color: var(--bad); border-color: var(--bad); }
|
| 135 |
+
.note { margin-top: 12px; padding: 10px 12px; background: var(--surface-2); border-left: 2px solid var(--accent); font-size: 11px; color: var(--text-dim); line-height: 1.7; }
|
| 136 |
+
.note strong { color: var(--text); font-weight: 500; }
|
| 137 |
+
.footer { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-faint); letter-spacing: 0.04em; text-align: center; }
|
| 138 |
+
.scaffold-info { padding: 14px; font-size: 12px; line-height: 1.7; background: var(--surface-2); border: 1px dashed var(--border-strong); color: var(--text-dim); }
|
| 139 |
+
.scaffold-info strong { color: var(--accent); font-weight: 500; }
|
| 140 |
+
.scaffold-info ol { margin: 8px 0; padding-left: 20px; }
|
| 141 |
+
.scaffold-info li { margin-bottom: 3px; }
|
| 142 |
+
code { background: var(--bg); color: var(--accent); padding: 1px 5px; font-size: 11px; border: 1px solid var(--border); }
|
| 143 |
+
::-webkit-scrollbar { width: 8px; height: 8px; }
|
| 144 |
+
::-webkit-scrollbar-track { background: var(--bg); }
|
| 145 |
+
::-webkit-scrollbar-thumb { background: var(--border-strong); }
|
| 146 |
+
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
|
| 147 |
+
</style>
|
| 148 |
+
</head>
|
| 149 |
+
<body>
|
| 150 |
+
<div class="app">
|
| 151 |
+
<header>
|
| 152 |
+
<div class="brand">
|
| 153 |
+
<span class="logo">hearthnet</span>
|
| 154 |
+
<span class="tag">browser-mesh inference \u00B7 v0.1</span>
|
| 155 |
+
</div>
|
| 156 |
+
<div class="id-row">
|
| 157 |
+
peer: <span class="pid" id="my-peer-id">connecting\u2026</span>
|
| 158 |
+
<button id="copy-id" style="margin-left: 10px; padding: 3px 8px; font-size: 10px;">copy</button>
|
| 159 |
+
</div>
|
| 160 |
+
</header>
|
| 161 |
+
|
| 162 |
+
<div class="grid-2">
|
| 163 |
+
<div class="card">
|
| 164 |
+
<h2>local capabilities</h2>
|
| 165 |
+
<ul class="kv" id="my-caps"></ul>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="card">
|
| 168 |
+
<h2>mesh <span class="count" id="peer-count">(0)</span></h2>
|
| 169 |
+
<div class="row" style="margin-bottom: 10px;">
|
| 170 |
+
<input id="remote-id" placeholder="paste remote peer id">
|
| 171 |
+
<button id="connect-btn" class="primary">dial</button>
|
| 172 |
+
</div>
|
| 173 |
+
<ul class="peers" id="peer-list">
|
| 174 |
+
<li class="empty">no peers connected</li>
|
| 175 |
+
</ul>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<div class="card full">
|
| 180 |
+
<h2>local model</h2>
|
| 181 |
+
<div class="row">
|
| 182 |
+
<span id="model-status" class="pill loading">not loaded</span>
|
| 183 |
+
<span class="faint" style="font-size: 11px;">onnx-community/Qwen2.5-0.5B-Instruct \u00B7 webgpu \u00B7 q4f16</span>
|
| 184 |
+
<button id="load-model" style="margin-left: auto;">load model (~500MB)</button>
|
| 185 |
+
</div>
|
| 186 |
+
<div class="prog" id="model-progress" style="display: none;"><div></div></div>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<div class="card full">
|
| 190 |
+
<h2>inference</h2>
|
| 191 |
+
<div class="mode-tabs">
|
| 192 |
+
<button data-mode="ensemble" class="on">ensemble \u00B7 working</button>
|
| 193 |
+
<button data-mode="moe">moe routing \u00B7 scaffold</button>
|
| 194 |
+
<button data-mode="pipeline">pipeline parallel \u00B7 scaffold</button>
|
| 195 |
+
</div>
|
| 196 |
+
<textarea id="prompt" placeholder="ask the mesh something\u2026">Write a haiku about distributed systems.</textarea>
|
| 197 |
+
<div class="row" style="margin-top: 10px;">
|
| 198 |
+
<button id="run-btn" class="primary" disabled>run inference</button>
|
| 199 |
+
<span id="run-hint" class="faint" style="font-size: 11px;">load the model first</span>
|
| 200 |
+
</div>
|
| 201 |
+
<div class="results" id="results"></div>
|
| 202 |
+
<div class="note" id="mode-note"></div>
|
| 203 |
+
</div>
|
| 204 |
+
|
| 205 |
+
<div class="card full">
|
| 206 |
+
<h2>protocol log</h2>
|
| 207 |
+
<div class="log" id="log"></div>
|
| 208 |
+
</div>
|
| 209 |
+
|
| 210 |
+
<div class="footer">hearthnet \u00B7 webrtc via peerjs cloud \u00B7 inference via transformers.js</div>
|
| 211 |
+
</div>
|
| 212 |
+
|
| 213 |
+
<script type="module">
|
| 214 |
+
import { Peer } from 'https://esm.sh/peerjs@1.5.4';
|
| 215 |
+
import { pipeline, TextStreamer } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.2';
|
| 216 |
+
|
| 217 |
+
const S = {
|
| 218 |
+
peer: null, peerId: null, connections: new Map(),
|
| 219 |
+
model: null, modelLoaded: false, mode: 'ensemble', caps: null, inflight: new Map(),
|
| 220 |
+
};
|
| 221 |
+
|
| 222 |
+
const logEl = document.getElementById('log');
|
| 223 |
+
function log(msg, type = '') {
|
| 224 |
+
const t = new Date().toTimeString().slice(0, 8);
|
| 225 |
+
const line = document.createElement('div');
|
| 226 |
+
line.className = 'line ' + type;
|
| 227 |
+
line.innerHTML = `<span class="t">${t}</span>${escapeHtml(msg)}`;
|
| 228 |
+
logEl.appendChild(line);
|
| 229 |
+
logEl.scrollTop = logEl.scrollHeight;
|
| 230 |
+
while (logEl.children.length > 300) logEl.removeChild(logEl.firstChild);
|
| 231 |
+
}
|
| 232 |
+
function escapeHtml(s) {
|
| 233 |
+
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
| 234 |
+
}
|
| 235 |
+
const short = id => id ? id.slice(0, 10) : '????';
|
| 236 |
+
|
| 237 |
+
async function detectCapabilities() {
|
| 238 |
+
const caps = {
|
| 239 |
+
webgpu: !!navigator.gpu, adapter: null,
|
| 240 |
+
deviceMemoryGB: navigator.deviceMemory || null,
|
| 241 |
+
cores: navigator.hardwareConcurrency || null,
|
| 242 |
+
modelLoaded: null, experts: [], pipelineStages: [], bandwidthMbps: null, ts: Date.now()
|
| 243 |
+
};
|
| 244 |
+
if (caps.webgpu) {
|
| 245 |
+
try {
|
| 246 |
+
const adapter = await navigator.gpu.requestAdapter();
|
| 247 |
+
if (adapter) {
|
| 248 |
+
const info = adapter.info || {};
|
| 249 |
+
caps.adapter = {
|
| 250 |
+
vendor: info.vendor || 'unknown',
|
| 251 |
+
arch: info.architecture || '',
|
| 252 |
+
device: info.device || '',
|
| 253 |
+
maxBuffer: adapter.limits?.maxBufferSize || null,
|
| 254 |
+
};
|
| 255 |
+
} else { caps.adapter = { error: 'no adapter' }; }
|
| 256 |
+
} catch (e) { caps.adapter = { error: e.message }; }
|
| 257 |
+
}
|
| 258 |
+
return caps;
|
| 259 |
+
}
|
| 260 |
+
|
| 261 |
+
function renderMyCaps() {
|
| 262 |
+
const c = S.caps;
|
| 263 |
+
const adapter = c.adapter?.error ? `<span class="bad">${c.adapter.error}</span>`
|
| 264 |
+
: c.adapter ? `${c.adapter.vendor}${c.adapter.arch ? ' / ' + c.adapter.arch : ''}` : '\u2014';
|
| 265 |
+
const rows = [
|
| 266 |
+
['webgpu', c.webgpu ? '<span class="ok">enabled</span>' : '<span class="bad">unavailable</span>'],
|
| 267 |
+
['gpu', adapter],
|
| 268 |
+
['max buffer', c.adapter?.maxBuffer ? (c.adapter.maxBuffer / 1024 / 1024).toFixed(0) + ' MB' : '\u2014'],
|
| 269 |
+
['device ram', c.deviceMemoryGB ? c.deviceMemoryGB + ' GB' : 'unknown'],
|
| 270 |
+
['cores', c.cores || 'unknown'],
|
| 271 |
+
['model', S.modelLoaded ? `<span class="ok">${c.modelLoaded}</span>` : '<span class="warn">not loaded</span>'],
|
| 272 |
+
['experts', c.experts.length ? c.experts.join(',') : '<span class="faint">none</span>'],
|
| 273 |
+
['pipeline stages', c.pipelineStages.length ? c.pipelineStages.map(s => '['+s.join('-')+']').join(' ') : '<span class="faint">none</span>'],
|
| 274 |
+
];
|
| 275 |
+
document.getElementById('my-caps').innerHTML =
|
| 276 |
+
rows.map(([k, v]) => `<li><span class="k">${k}</span><span class="v">${v}</span></li>`).join('');
|
| 277 |
+
}
|
| 278 |
+
|
| 279 |
+
// PeerJS uses the free PeerServer cloud for signaling.
|
| 280 |
+
// For production, run your own: `npm i -g peer && peerjs --port 9000 --path /myapp`
|
| 281 |
+
// then: new Peer(undefined, { host: 'your.host', port: 9000, path: '/myapp', secure: true })
|
| 282 |
+
function initPeer() {
|
| 283 |
+
S.peer = new Peer(undefined, { debug: 1 });
|
| 284 |
+
S.peer.on('open', id => {
|
| 285 |
+
S.peerId = id;
|
| 286 |
+
document.getElementById('my-peer-id').textContent = id;
|
| 287 |
+
log(`peer opened: ${id}`, 'in');
|
| 288 |
+
});
|
| 289 |
+
S.peer.on('connection', conn => {
|
| 290 |
+
log(`<-- incoming connection from ${short(conn.peer)}`, 'in');
|
| 291 |
+
wireConnection(conn, false);
|
| 292 |
+
});
|
| 293 |
+
S.peer.on('disconnected', () => {
|
| 294 |
+
log('disconnected from signaling, reconnecting\u2026', 'err');
|
| 295 |
+
try { S.peer.reconnect(); } catch (_) {}
|
| 296 |
+
});
|
| 297 |
+
S.peer.on('error', err => log(`peer error: ${err.type || err.message}`, 'err'));
|
| 298 |
+
}
|
| 299 |
+
|
| 300 |
+
function wireConnection(conn, isInitiator) {
|
| 301 |
+
conn.on('open', () => {
|
| 302 |
+
if (!S.connections.has(conn.peer)) {
|
| 303 |
+
S.connections.set(conn.peer, { conn, caps: null, health: 'ok', lastPong: Date.now(), rttMs: null });
|
| 304 |
+
}
|
| 305 |
+
renderPeers();
|
| 306 |
+
send(conn, { type: 'HELLO', from: S.peerId, caps: S.caps });
|
| 307 |
+
log(`channel open \u00B7 ${short(conn.peer)}`, 'in');
|
| 308 |
+
});
|
| 309 |
+
conn.on('data', msg => handleMessage(conn.peer, msg));
|
| 310 |
+
conn.on('close', () => {
|
| 311 |
+
S.connections.delete(conn.peer);
|
| 312 |
+
renderPeers();
|
| 313 |
+
log(`channel closed \u00B7 ${short(conn.peer)}`, 'out');
|
| 314 |
+
});
|
| 315 |
+
conn.on('error', err => log(`channel error \u00B7 ${short(conn.peer)} \u00B7 ${err.message || err}`, 'err'));
|
| 316 |
+
}
|
| 317 |
+
|
| 318 |
+
function send(conn, msg) {
|
| 319 |
+
try { conn.send(msg); }
|
| 320 |
+
catch (e) { log(`send failed \u00B7 ${short(conn.peer)} \u00B7 ${e.message}`, 'err'); }
|
| 321 |
+
}
|
| 322 |
+
function broadcast(msg) { for (const p of S.connections.values()) send(p.conn, msg); }
|
| 323 |
+
|
| 324 |
+
document.getElementById('connect-btn').addEventListener('click', () => {
|
| 325 |
+
const target = document.getElementById('remote-id').value.trim();
|
| 326 |
+
if (!target) return;
|
| 327 |
+
if (target === S.peerId) { log('cannot dial self', 'err'); return; }
|
| 328 |
+
if (S.connections.has(target)) { log('already connected', 'err'); return; }
|
| 329 |
+
log(`--> dialing ${short(target)}\u2026`, 'out');
|
| 330 |
+
const conn = S.peer.connect(target, { reliable: true, serialization: 'json' });
|
| 331 |
+
wireConnection(conn, true);
|
| 332 |
+
document.getElementById('remote-id').value = '';
|
| 333 |
+
});
|
| 334 |
+
|
| 335 |
+
document.getElementById('copy-id').addEventListener('click', () => {
|
| 336 |
+
if (S.peerId) navigator.clipboard.writeText(S.peerId).then(() => log('peer id copied', 'in'));
|
| 337 |
+
});
|
| 338 |
+
|
| 339 |
+
const HEALTH_INTERVAL = 4000;
|
| 340 |
+
const HEALTH_TIMEOUT = 12000;
|
| 341 |
+
setInterval(() => {
|
| 342 |
+
const now = Date.now();
|
| 343 |
+
for (const [pid, p] of S.connections) {
|
| 344 |
+
if (p.health === 'dead') continue;
|
| 345 |
+
if (now - p.lastPong > HEALTH_TIMEOUT) {
|
| 346 |
+
p.health = 'dead';
|
| 347 |
+
log(`peer ${short(pid)} marked dead (no pong)`, 'err');
|
| 348 |
+
}
|
| 349 |
+
send(p.conn, { type: 'PING', t: now });
|
| 350 |
+
}
|
| 351 |
+
renderPeers();
|
| 352 |
+
}, HEALTH_INTERVAL);
|
| 353 |
+
|
| 354 |
+
async function handleMessage(fromId, msg) {
|
| 355 |
+
if (!msg || !msg.type) return;
|
| 356 |
+
const p = S.connections.get(fromId);
|
| 357 |
+
switch (msg.type) {
|
| 358 |
+
case 'HELLO':
|
| 359 |
+
if (p) { p.caps = msg.caps; renderPeers(); }
|
| 360 |
+
log(`HELLO from ${short(fromId)} \u00B7 webgpu=${msg.caps?.webgpu} model=${msg.caps?.modelLoaded || 'none'}`, 'in');
|
| 361 |
+
if (p) send(p.conn, { type: 'CAPS', caps: S.caps });
|
| 362 |
+
break;
|
| 363 |
+
case 'CAPS':
|
| 364 |
+
if (p) { p.caps = msg.caps; renderPeers(); }
|
| 365 |
+
break;
|
| 366 |
+
case 'PING':
|
| 367 |
+
if (p) send(p.conn, { type: 'PONG', t: msg.t });
|
| 368 |
+
break;
|
| 369 |
+
case 'PONG':
|
| 370 |
+
if (p) {
|
| 371 |
+
p.lastPong = Date.now();
|
| 372 |
+
p.rttMs = Date.now() - msg.t;
|
| 373 |
+
if (p.health === 'dead') log(`peer ${short(fromId)} recovered`, 'in');
|
| 374 |
+
p.health = 'ok';
|
| 375 |
+
}
|
| 376 |
+
break;
|
| 377 |
+
case 'CAPS_UPDATE':
|
| 378 |
+
if (p) { p.caps = msg.caps; renderPeers(); }
|
| 379 |
+
log(`CAPS_UPDATE from ${short(fromId)}`, 'in');
|
| 380 |
+
break;
|
| 381 |
+
case 'INFER_REQ':
|
| 382 |
+
await handleInferRequest(fromId, msg);
|
| 383 |
+
break;
|
| 384 |
+
case 'INFER_PARTIAL':
|
| 385 |
+
appendResultText(msg.reqId, fromId, msg.text);
|
| 386 |
+
break;
|
| 387 |
+
case 'INFER_DONE':
|
| 388 |
+
finalizeResult(msg.reqId, fromId, msg.text, msg.elapsedMs);
|
| 389 |
+
break;
|
| 390 |
+
case 'INFER_ERR':
|
| 391 |
+
finalizeResult(msg.reqId, fromId, '[error: ' + msg.error + ']', 0, true);
|
| 392 |
+
break;
|
| 393 |
+
default:
|
| 394 |
+
log(`unknown msg type ${msg.type} from ${short(fromId)}`, 'err');
|
| 395 |
+
}
|
| 396 |
+
}
|
| 397 |
+
|
| 398 |
+
function renderPeers() {
|
| 399 |
+
const ul = document.getElementById('peer-list');
|
| 400 |
+
document.getElementById('peer-count').textContent = `(${S.connections.size})`;
|
| 401 |
+
if (S.connections.size === 0) {
|
| 402 |
+
ul.innerHTML = '<li class="empty">no peers connected</li>';
|
| 403 |
+
return;
|
| 404 |
+
}
|
| 405 |
+
ul.innerHTML = '';
|
| 406 |
+
for (const [pid, p] of S.connections) {
|
| 407 |
+
const li = document.createElement('li');
|
| 408 |
+
const dead = p.health !== 'ok';
|
| 409 |
+
const gpu = p.caps?.webgpu ? (p.caps.adapter?.vendor || 'gpu') : 'cpu only';
|
| 410 |
+
const model = p.caps?.modelLoaded || 'no model';
|
| 411 |
+
const rtt = p.rttMs != null ? p.rttMs + 'ms' : '\u2014';
|
| 412 |
+
li.innerHTML = `
|
| 413 |
+
<div class="top">
|
| 414 |
+
<span><span class="dot ${dead ? 'dead' : ''}"></span><span class="pid">${short(pid)}\u2026</span></span>
|
| 415 |
+
<span class="meta">${rtt}</span>
|
| 416 |
+
</div>
|
| 417 |
+
<div class="meta">${gpu} \u00B7 ${model}</div>
|
| 418 |
+
`;
|
| 419 |
+
ul.appendChild(li);
|
| 420 |
+
}
|
| 421 |
+
}
|
| 422 |
+
|
| 423 |
+
async function loadModel() {
|
| 424 |
+
const btn = document.getElementById('load-model');
|
| 425 |
+
const status = document.getElementById('model-status');
|
| 426 |
+
const prog = document.getElementById('model-progress');
|
| 427 |
+
const bar = prog.querySelector('div');
|
| 428 |
+
btn.disabled = true;
|
| 429 |
+
status.textContent = 'loading\u2026';
|
| 430 |
+
status.className = 'pill loading';
|
| 431 |
+
prog.style.display = 'block';
|
| 432 |
+
log('loading model\u2026', 'out');
|
| 433 |
+
|
| 434 |
+
try {
|
| 435 |
+
S.model = await pipeline(
|
| 436 |
+
'text-generation',
|
| 437 |
+
'onnx-community/Qwen2.5-0.5B-Instruct',
|
| 438 |
+
{
|
| 439 |
+
device: 'webgpu',
|
| 440 |
+
dtype: 'q4f16',
|
| 441 |
+
progress_callback: (p) => {
|
| 442 |
+
if (p.status === 'progress' && typeof p.progress === 'number') {
|
| 443 |
+
bar.style.width = p.progress + '%';
|
| 444 |
+
} else if (p.status === 'ready' || p.status === 'done') {
|
| 445 |
+
bar.style.width = '100%';
|
| 446 |
+
}
|
| 447 |
+
}
|
| 448 |
+
}
|
| 449 |
+
);
|
| 450 |
+
S.modelLoaded = true;
|
| 451 |
+
S.caps.modelLoaded = 'Qwen2.5-0.5B-Instruct';
|
| 452 |
+
status.textContent = 'ready';
|
| 453 |
+
status.className = 'pill ok';
|
| 454 |
+
prog.style.display = 'none';
|
| 455 |
+
btn.style.display = 'none';
|
| 456 |
+
document.getElementById('run-btn').disabled = false;
|
| 457 |
+
document.getElementById('run-hint').textContent = 'ready \u00B7 ' + (S.connections.size > 0 ? S.connections.size + ' peer(s) in mesh' : 'standalone (no peers)');
|
| 458 |
+
log('model loaded', 'in');
|
| 459 |
+
renderMyCaps();
|
| 460 |
+
broadcast({ type: 'CAPS_UPDATE', caps: S.caps });
|
| 461 |
+
} catch (e) {
|
| 462 |
+
log('model load failed: ' + e.message, 'err');
|
| 463 |
+
status.textContent = 'failed';
|
| 464 |
+
status.className = 'pill bad';
|
| 465 |
+
btn.disabled = false;
|
| 466 |
+
}
|
| 467 |
+
}
|
| 468 |
+
document.getElementById('load-model').addEventListener('click', loadModel);
|
| 469 |
+
|
| 470 |
+
async function runLocalGeneration(prompt, maxTokens, onPartial) {
|
| 471 |
+
if (!S.modelLoaded) throw new Error('model not loaded');
|
| 472 |
+
const start = performance.now();
|
| 473 |
+
const messages = [{ role: 'user', content: prompt }];
|
| 474 |
+
let accumulated = '';
|
| 475 |
+
|
| 476 |
+
const streamer = new TextStreamer(S.model.tokenizer, {
|
| 477 |
+
skip_prompt: true,
|
| 478 |
+
skip_special_tokens: true,
|
| 479 |
+
callback_function: (text) => {
|
| 480 |
+
accumulated += text;
|
| 481 |
+
if (onPartial) onPartial(text);
|
| 482 |
+
}
|
| 483 |
+
});
|
| 484 |
+
|
| 485 |
+
const out = await S.model(messages, {
|
| 486 |
+
max_new_tokens: maxTokens,
|
| 487 |
+
do_sample: true,
|
| 488 |
+
temperature: 0.7,
|
| 489 |
+
top_p: 0.9,
|
| 490 |
+
streamer,
|
| 491 |
+
});
|
| 492 |
+
|
| 493 |
+
const elapsedMs = Math.round(performance.now() - start);
|
| 494 |
+
let finalText = accumulated;
|
| 495 |
+
try {
|
| 496 |
+
const g = out?.[0]?.generated_text;
|
| 497 |
+
if (Array.isArray(g)) {
|
| 498 |
+
const last = g[g.length - 1];
|
| 499 |
+
if (last?.content) finalText = last.content;
|
| 500 |
+
} else if (typeof g === 'string') {
|
| 501 |
+
finalText = g;
|
| 502 |
+
}
|
| 503 |
+
} catch (_) {}
|
| 504 |
+
return { text: finalText, elapsedMs };
|
| 505 |
+
}
|
| 506 |
+
|
| 507 |
+
function makeResultCol(label, isSelf = false) {
|
| 508 |
+
const col = document.createElement('div');
|
| 509 |
+
col.className = 'result streaming';
|
| 510 |
+
col.innerHTML = `
|
| 511 |
+
<div class="head">
|
| 512 |
+
<span class="pid">${label}${isSelf ? ' \u00B7 self' : ''}</span>
|
| 513 |
+
<span class="meta"></span>
|
| 514 |
+
</div>
|
| 515 |
+
<div class="text"></div>
|
| 516 |
+
`;
|
| 517 |
+
document.getElementById('results').appendChild(col);
|
| 518 |
+
return { el: col, textEl: col.querySelector('.text'), metaEl: col.querySelector('.meta'), text: '' };
|
| 519 |
+
}
|
| 520 |
+
|
| 521 |
+
async function runEnsemble(prompt) {
|
| 522 |
+
const reqId = 'r_' + Math.random().toString(36).slice(2, 10);
|
| 523 |
+
document.getElementById('results').innerHTML = '';
|
| 524 |
+
|
| 525 |
+
const peersWithModel = [...S.connections.entries()]
|
| 526 |
+
.filter(([_, p]) => p.health === 'ok' && p.caps?.modelLoaded);
|
| 527 |
+
|
| 528 |
+
log(`ensemble \u00B7 reqId=${reqId} \u00B7 self + ${peersWithModel.length} peer(s)`, 'out');
|
| 529 |
+
|
| 530 |
+
const cols = new Map();
|
| 531 |
+
cols.set('__self__', makeResultCol(short(S.peerId), true));
|
| 532 |
+
for (const [pid] of peersWithModel) {
|
| 533 |
+
cols.set(pid, makeResultCol(short(pid)));
|
| 534 |
+
}
|
| 535 |
+
S.inflight.set(reqId, { mode: 'ensemble', cols, started: Date.now() });
|
| 536 |
+
|
| 537 |
+
for (const [pid, p] of peersWithModel) {
|
| 538 |
+
send(p.conn, { type: 'INFER_REQ', reqId, mode: 'ensemble', prompt, maxTokens: 120 });
|
| 539 |
+
log(`--> INFER_REQ ${reqId} to ${short(pid)}`, 'out');
|
| 540 |
+
}
|
| 541 |
+
|
| 542 |
+
const selfCol = cols.get('__self__');
|
| 543 |
+
try {
|
| 544 |
+
const { text, elapsedMs } = await runLocalGeneration(prompt, 120, (partial) => {
|
| 545 |
+
selfCol.text += partial;
|
| 546 |
+
selfCol.textEl.textContent = selfCol.text;
|
| 547 |
+
});
|
| 548 |
+
selfCol.text = text;
|
| 549 |
+
selfCol.textEl.textContent = text;
|
| 550 |
+
selfCol.el.classList.remove('streaming');
|
| 551 |
+
const wps = text.split(/\s+/).filter(Boolean).length / (elapsedMs / 1000);
|
| 552 |
+
selfCol.metaEl.textContent = `${elapsedMs}ms \u00B7 ${wps.toFixed(1)} wps`;
|
| 553 |
+
} catch (e) {
|
| 554 |
+
selfCol.textEl.textContent = '[error: ' + e.message + ']';
|
| 555 |
+
selfCol.el.classList.remove('streaming');
|
| 556 |
+
log('local generation failed: ' + e.message, 'err');
|
| 557 |
+
}
|
| 558 |
+
}
|
| 559 |
+
|
| 560 |
+
function appendResultText(reqId, fromId, text) {
|
| 561 |
+
const req = S.inflight.get(reqId);
|
| 562 |
+
if (!req) return;
|
| 563 |
+
const c = req.cols.get(fromId);
|
| 564 |
+
if (!c) return;
|
| 565 |
+
c.text += text;
|
| 566 |
+
c.textEl.textContent = c.text;
|
| 567 |
+
}
|
| 568 |
+
|
| 569 |
+
function finalizeResult(reqId, fromId, text, elapsedMs, isErr = false) {
|
| 570 |
+
const req = S.inflight.get(reqId);
|
| 571 |
+
if (!req) return;
|
| 572 |
+
const c = req.cols.get(fromId);
|
| 573 |
+
if (!c) { log(`finalize for unknown col ${short(fromId)} reqId=${reqId}`, 'err'); return; }
|
| 574 |
+
c.text = text;
|
| 575 |
+
c.textEl.textContent = text;
|
| 576 |
+
c.el.classList.remove('streaming');
|
| 577 |
+
if (!isErr && elapsedMs) {
|
| 578 |
+
const wps = text.split(/\s+/).filter(Boolean).length / (elapsedMs / 1000);
|
| 579 |
+
c.metaEl.textContent = `${elapsedMs}ms \u00B7 ${wps.toFixed(1)} wps`;
|
| 580 |
+
} else if (isErr) {
|
| 581 |
+
c.metaEl.textContent = 'error';
|
| 582 |
+
c.metaEl.style.color = 'var(--bad)';
|
| 583 |
+
}
|
| 584 |
+
log(`<-- ${isErr ? 'INFER_ERR' : 'INFER_DONE'} ${reqId} from ${short(fromId)}`, 'in');
|
| 585 |
+
}
|
| 586 |
+
|
| 587 |
+
async function handleInferRequest(fromId, msg) {
|
| 588 |
+
const p = S.connections.get(fromId);
|
| 589 |
+
if (!p) return;
|
| 590 |
+
log(`<-- INFER_REQ ${msg.reqId} mode=${msg.mode} from ${short(fromId)}`, 'in');
|
| 591 |
+
|
| 592 |
+
if (msg.mode === 'ensemble') {
|
| 593 |
+
if (!S.modelLoaded) {
|
| 594 |
+
send(p.conn, { type: 'INFER_ERR', reqId: msg.reqId, error: 'model not loaded on this peer' });
|
| 595 |
+
return;
|
| 596 |
+
}
|
| 597 |
+
try {
|
| 598 |
+
const { text, elapsedMs } = await runLocalGeneration(msg.prompt, msg.maxTokens || 120, (partial) => {
|
| 599 |
+
send(p.conn, { type: 'INFER_PARTIAL', reqId: msg.reqId, text: partial });
|
| 600 |
+
});
|
| 601 |
+
send(p.conn, { type: 'INFER_DONE', reqId: msg.reqId, text, elapsedMs });
|
| 602 |
+
log(`--> INFER_DONE ${msg.reqId} to ${short(fromId)} (${elapsedMs}ms)`, 'out');
|
| 603 |
+
} catch (e) {
|
| 604 |
+
send(p.conn, { type: 'INFER_ERR', reqId: msg.reqId, error: e.message });
|
| 605 |
+
}
|
| 606 |
+
} else if (msg.mode === 'moe') {
|
| 607 |
+
// SCAFFOLD: would run expert(s) over msg.hidden, return new hidden state weighted by gating.
|
| 608 |
+
await new Promise(r => setTimeout(r, 20 + Math.random() * 30));
|
| 609 |
+
send(p.conn, {
|
| 610 |
+
type: 'INFER_DONE', reqId: msg.reqId,
|
| 611 |
+
text: `[expert ${msg.expertId} ack \u00B7 ${short(S.peerId)}]`,
|
| 612 |
+
elapsedMs: 25
|
| 613 |
+
});
|
| 614 |
+
} else if (msg.mode === 'pipeline') {
|
| 615 |
+
// SCAFFOLD: would run layers [stageLo..stageHi] on msg.hidden, forward to next stage.
|
| 616 |
+
await new Promise(r => setTimeout(r, 30 + Math.random() * 40));
|
| 617 |
+
send(p.conn, {
|
| 618 |
+
type: 'INFER_DONE', reqId: msg.reqId,
|
| 619 |
+
text: `[stage ${msg.stage} ack \u00B7 ${short(S.peerId)} \u00B7 ${msg.hiddenLen}-dim hidden]`,
|
| 620 |
+
elapsedMs: 50
|
| 621 |
+
});
|
| 622 |
+
}
|
| 623 |
+
}
|
| 624 |
+
|
| 625 |
+
function runMoEScaffold() {
|
| 626 |
+
const resultsEl = document.getElementById('results');
|
| 627 |
+
resultsEl.innerHTML = '';
|
| 628 |
+
const info = document.createElement('div');
|
| 629 |
+
info.className = 'scaffold-info';
|
| 630 |
+
info.innerHTML = `
|
| 631 |
+
<strong>MoE expert routing \u00B7 protocol scaffold</strong>
|
| 632 |
+
<p style="margin: 8px 0;">The wire protocol works (run it to see real round-trips below). Real inference needs:</p>
|
| 633 |
+
<ol>
|
| 634 |
+
<li>An MoE model (Mixtral 8x7B, DeepSeek-V2, Qwen-MoE)</li>
|
| 635 |
+
<li>Each peer pre-loads N experts; advertises ids in <code>caps.experts</code></li>
|
| 636 |
+
<li>Router computes top-k from gating logits per token</li>
|
| 637 |
+
<li>Coordinator calls top-k peers in parallel: <code>INFER_REQ{mode:"moe", expertId, hidden}</code></li>
|
| 638 |
+
<li>Hidden states weighted by gating, summed, fed to next layer</li>
|
| 639 |
+
</ol>
|
| 640 |
+
<p style="margin: 8px 0;">Path forward: fork transformers.js modeling code OR call ONNX Runtime Web directly with per-expert subgraphs. Maps 1:1 onto HearthNet capability bus.</p>
|
| 641 |
+
`;
|
| 642 |
+
resultsEl.appendChild(info);
|
| 643 |
+
|
| 644 |
+
const peers = [...S.connections.entries()].filter(([_, p]) => p.health === 'ok');
|
| 645 |
+
if (peers.length === 0) { log('moe scaffold: no peers to call', 'err'); return; }
|
| 646 |
+
const reqIdBase = 'm_' + Math.random().toString(36).slice(2, 8);
|
| 647 |
+
const topK = Math.min(2, peers.length);
|
| 648 |
+
log(`moe scaffold \u00B7 top-${topK} of ${peers.length} peers`, 'out');
|
| 649 |
+
for (let i = 0; i < topK; i++) {
|
| 650 |
+
const [pid, p] = peers[i];
|
| 651 |
+
const reqId = reqIdBase + '_' + i;
|
| 652 |
+
const col = makeResultCol(short(pid) + ' \u00B7 expert ' + i);
|
| 653 |
+
S.inflight.set(reqId, { mode: 'moe', cols: new Map([[pid, col]]), started: Date.now() });
|
| 654 |
+
send(p.conn, { type: 'INFER_REQ', reqId, mode: 'moe', expertId: i, hiddenLen: 4096 });
|
| 655 |
+
log(`--> INFER_REQ ${reqId} mode=moe expert=${i} to ${short(pid)}`, 'out');
|
| 656 |
+
}
|
| 657 |
+
}
|
| 658 |
+
|
| 659 |
+
function runPipelineScaffold() {
|
| 660 |
+
const resultsEl = document.getElementById('results');
|
| 661 |
+
resultsEl.innerHTML = '';
|
| 662 |
+
const info = document.createElement('div');
|
| 663 |
+
info.className = 'scaffold-info';
|
| 664 |
+
info.innerHTML = `
|
| 665 |
+
<strong>Pipeline parallel \u00B7 protocol scaffold</strong>
|
| 666 |
+
<p style="margin: 8px 0;">Chain-building and forward-pass messages are wired. Real inference needs:</p>
|
| 667 |
+
<ol>
|
| 668 |
+
<li>Layer-split modeling: load only layers [lo..hi] per peer</li>
|
| 669 |
+
<li>Capability ad includes <code>pipelineStages: [[0,7],[8,15],\u2026]</code></li>
|
| 670 |
+
<li>Coordinator builds chain plan: peer A \u2192 B \u2192 C \u2192 self</li>
|
| 671 |
+
<li>Per token: ship hidden_dim \u00D7 fp16 bytes per hop (~8KB for 4096-d)</li>
|
| 672 |
+
<li>KV cache pinned to its stage \u2014 cross-stage transfer is the bandwidth killer</li>
|
| 673 |
+
<li>Peer drops: find replacement with same layer range, resume</li>
|
| 674 |
+
</ol>
|
| 675 |
+
<p style="margin: 8px 0;">transformers.js needs a custom loader to drop out-of-stage layers. Petals does this in PyTorch; the browser equivalent is greenfield work.</p>
|
| 676 |
+
`;
|
| 677 |
+
resultsEl.appendChild(info);
|
| 678 |
+
|
| 679 |
+
const peers = [...S.connections.entries()].filter(([_, p]) => p.health === 'ok');
|
| 680 |
+
if (peers.length === 0) { log('pipeline scaffold: no peers in chain', 'err'); return; }
|
| 681 |
+
log(`pipeline scaffold \u00B7 chain of ${peers.length} stage(s)`, 'out');
|
| 682 |
+
|
| 683 |
+
(async () => {
|
| 684 |
+
for (let i = 0; i < peers.length; i++) {
|
| 685 |
+
const [pid, p] = peers[i];
|
| 686 |
+
const reqId = 'p_' + Math.random().toString(36).slice(2, 8);
|
| 687 |
+
const col = makeResultCol(short(pid) + ' \u00B7 stage ' + i);
|
| 688 |
+
S.inflight.set(reqId, { mode: 'pipeline', cols: new Map([[pid, col]]), started: Date.now() });
|
| 689 |
+
send(p.conn, { type: 'INFER_REQ', reqId, mode: 'pipeline', stage: i, hiddenLen: 4096 });
|
| 690 |
+
log(`--> stage ${i} INFER_REQ ${reqId} to ${short(pid)}`, 'out');
|
| 691 |
+
await new Promise(r => setTimeout(r, 250));
|
| 692 |
+
}
|
| 693 |
+
})();
|
| 694 |
+
}
|
| 695 |
+
|
| 696 |
+
const MODE_NOTES = {
|
| 697 |
+
ensemble: '<strong>Ensemble mode is fully working.</strong> Every peer with the model loaded runs the full prompt locally and streams tokens back. Use for throughput (batch many prompts across the mesh), ensemble quality (compare or vote across outputs), or speculative decoding pairing. No layer surgery, no specialized model \u2014 works with any model transformers.js supports.',
|
| 698 |
+
moe: '<strong>MoE mode is a protocol scaffold.</strong> Wire protocol, capability advertisement, top-k routing, and round-trip plumbing are real. The actual expert forward pass returns a mock ack today. Wiring real expert inference needs either a forked transformers.js modeling backend or direct ONNX Runtime Web with a Mixtral-class model split into per-expert subgraphs.',
|
| 699 |
+
pipeline: '<strong>Pipeline mode is a protocol scaffold.</strong> Stage chain construction, forward-pass message format, and KV-cache notes are real. Layer-split inference is the greenfield piece \u2014 needs a custom model loader that drops layers outside the assigned stage. Bandwidth math: ~8 KB/token at hidden_dim=4096 fp16, KV cache transfer is the cliff to avoid.'
|
| 700 |
+
};
|
| 701 |
+
|
| 702 |
+
function setMode(mode) {
|
| 703 |
+
S.mode = mode;
|
| 704 |
+
document.querySelectorAll('.mode-tabs button').forEach(b => {
|
| 705 |
+
b.classList.toggle('on', b.dataset.mode === mode);
|
| 706 |
+
});
|
| 707 |
+
document.getElementById('mode-note').innerHTML = MODE_NOTES[mode];
|
| 708 |
+
document.getElementById('results').innerHTML = '';
|
| 709 |
+
}
|
| 710 |
+
document.querySelectorAll('.mode-tabs button').forEach(b => {
|
| 711 |
+
b.addEventListener('click', () => setMode(b.dataset.mode));
|
| 712 |
+
});
|
| 713 |
+
|
| 714 |
+
document.getElementById('run-btn').addEventListener('click', () => {
|
| 715 |
+
const prompt = document.getElementById('prompt').value.trim();
|
| 716 |
+
if (!prompt && S.mode === 'ensemble') return;
|
| 717 |
+
log(`run \u00B7 mode=${S.mode}`, 'out');
|
| 718 |
+
if (S.mode === 'ensemble') runEnsemble(prompt);
|
| 719 |
+
else if (S.mode === 'moe') runMoEScaffold();
|
| 720 |
+
else if (S.mode === 'pipeline') runPipelineScaffold();
|
| 721 |
+
});
|
| 722 |
+
|
| 723 |
+
document.getElementById('prompt').addEventListener('keydown', (e) => {
|
| 724 |
+
if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
|
| 725 |
+
e.preventDefault();
|
| 726 |
+
document.getElementById('run-btn').click();
|
| 727 |
+
}
|
| 728 |
+
});
|
| 729 |
+
|
| 730 |
+
(async () => {
|
| 731 |
+
S.caps = await detectCapabilities();
|
| 732 |
+
renderMyCaps();
|
| 733 |
+
setMode('ensemble');
|
| 734 |
+
initPeer();
|
| 735 |
+
log('boot complete \u00B7 webgpu=' + S.caps.webgpu, 'in');
|
| 736 |
+
if (!S.caps.webgpu) {
|
| 737 |
+
log('warning: webgpu unavailable \u00B7 model load will fail \u00B7 use Chrome/Edge with WebGPU', 'err');
|
| 738 |
+
}
|
| 739 |
+
})();
|
| 740 |
+
</script>
|
| 741 |
+
</body>
|
| 742 |
+
</html>
|