apssouza22/webgpu-cluster
0
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 <meta7 name="description"8 content="Share your GPU with a browser-based cluster. Run object detection, vision models and more on WebGPU, callable from any app via HTTP."9 />10 <title>WebGPU Cluster — Distributed WebGPU inference</title>11 <link rel="preconnect" href="https://fonts.googleapis.com" />12 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />13 <link14 href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap"15 rel="stylesheet"16 />17 <link rel="stylesheet" href="/src/styles/landing.css" />18 </head>19 <body>20 <header class="site-header">21 <div class="container">22 <a href="/" class="logo" aria-label="WebGPU Cluster home">23 <span class="logo-mark" aria-hidden="true">⚡</span>24 WebGPU Cluster25 </a>26 <nav class="nav-links" aria-label="Main">27 <a href="#how-it-works" class="nav-hide-mobile">How it works</a>28 <a href="#features" class="nav-hide-mobile">Features</a>29 <a30 href="https://github.com/apssouza22/webgpu-video-cluster"31 rel="noopener noreferrer"32 class="nav-hide-mobile"33 >GitHub</a34 >35 <a href="/monitor.html">View the grid</a>36 <a href="/host.html" class="btn btn-primary btn-sm">Join the grid</a>37 </nav>38 </div>39 </header>40 41 <main>42 <section class="hero">43 <div class="container">44 <div class="badge">45 <span class="badge-dot" aria-hidden="true"></span>46 Distributed GPU network47 </div>48 <h1>49 AI on the grid,<br />50 <span class="gradient-text">powered by your WebGPU.</span>51 </h1>52 <p class="hero-lead">53 Turn any browser with WebGPU into a cluster node. Share inference for LLM models — Host a model on your powerful workstation and access it securely from your phone, laptop, or let others connect to it.54 </p>55 <div class="hero-actions">56 <a href="/host.html" class="btn btn-primary">Join the grid</a>57 <a href="/monitor.html" class="btn btn-secondary">View available grid</a>58 </div>59 <p class="hero-trust">60 Powered by <strong>WebGPU</strong> & <strong>Transformers.js</strong> · No GPU61 drivers to install · Open HTTP API62 </p>63 64 <div class="live-stats" aria-live="polite" aria-label="Cluster status">65 <div class="live-stat">66 <div id="stat-online" class="live-stat-value online">…</div>67 <div class="live-stat-label">Hosts online</div>68 </div>69 <div class="live-stat">70 <div id="stat-total" class="live-stat-value">…</div>71 <div class="live-stat-label">Hosts registered</div>72 </div>73 </div>74 </div>75 </section>76 77 <section id="features">78 <div class="container">79 <span class="section-label">Why join</span>80 <h2 class="section-title">Browser-native GPU sharing</h2>81 <p class="section-desc">82 Contribute spare GPU cycles from your workstation. Clients send images over HTTP;83 your browser runs the model and returns results — privately, on your hardware.84 </p>85 <div class="features-grid">86 <article class="feature-card">87 <div class="feature-icon" aria-hidden="true">🖥️</div>88 <h3>Instant local hosting</h3>89 <p>90 Open a tab, pick a model, and start hosting. RF-DETR and SmolVLM load in a Web91 Worker on WebGPU — no Python environment or driver setup.92 </p>93 </article>94 <article class="feature-card">95 <div class="feature-icon" aria-hidden="true">🔒</div>96 <h3>Your data stays local</h3>97 <p>98 Inference runs on your GPU in the browser. Images are processed on your machine;99 nothing is sent to third-party AI APIs.100 </p>101 </article>102 <article class="feature-card">103 <div class="feature-icon" aria-hidden="true">🔌</div>104 <h3>Universal HTTP API</h3>105 <p>106 Connect from curl, Python, Node, or any HTTP client. Simple JSON endpoints for107 detection and image description — queue and broker included.108 </p>109 </article>110 </div>111 </div>112 </section>113 114 <section id="how-it-works">115 <div class="container">116 <span class="section-label">Architecture</span>117 <h2 class="section-title">How the grid works</h2>118 <p class="section-desc">119 A lightweight Node broker coordinates tasks. Browser hosts stay connected via SSE120 and pull jobs when idle.121 </p>122 <div class="arch-diagram" role="img" aria-label="Request flow diagram">123 <div class="arch-flow">124 <div class="arch-node">125 <strong>Client</strong>126 curl / Python / app127 </div>128 <span class="arch-arrow" aria-hidden="true">→</span>129 <div class="arch-node">130 <strong>Broker</strong>131 task queue · /v1/detect132 </div>133 <span class="arch-arrow" aria-hidden="true">→</span>134 <div class="arch-node highlight">135 <strong>Browser host</strong>136 WebGPU inference137 </div>138 <span class="arch-arrow" aria-hidden="true">→</span>139 <div class="arch-node">140 <strong>Response</strong>141 boxes · labels · text142 </div>143 </div>144 </div>145 <div class="steps" style="margin-top: 48px">146 <div class="step">147 <h3>Register your node</h3>148 <p>149 Open the host page, choose a host id and model, then click Start hosting. Keep150 the tab open while you share GPU time.151 </p>152 </div>153 <div class="step">154 <h3>Jobs arrive via SSE</h3>155 <p>156 The broker forwards detection and description tasks to your browser. One job157 runs at a time per host.158 </p>159 </div>160 <div class="step">161 <h3>Anyone can call the API</h3>162 <p>163 Point clients at <code>POST /v1/detect</code> or <code>/v1/describe</code> with164 your host id. Results return as JSON.165 </p>166 </div>167 </div>168 </div>169 </section>170 171 <section id="api">172 <div class="container">173 <span class="section-label">API</span>174 <h2 class="section-title">Call the grid from anywhere</h2>175 <p class="section-desc">176 Use the cluster monitor to see online hosts and copy ready-made curl examples.177 </p>178 <div class="code-panel">179 <div class="code-header">180 <span>detect.sh</span>181 <span>POST /v1/detect</span>182 </div>183 <pre><code>curl -X POST '<span class="str">http://localhost:5180/v1/detect</span>' \184 -H <span class="str">'Content-Type: application/json'</span> \185 -d <span class="str">'{186 "host": "my-gpu-node",187 "image_url": "https://example.com/photo.jpg",188 "threshold": 0.5189 }'</span></code></pre>190 </div>191 </div>192 </section>193 194 <section id="models">195 <div class="container">196 <span class="section-label">Models</span>197 <h2 class="section-title">What you can host today</h2>198 <p class="section-desc">199 Models download from Hugging Face on first load. Pick one per host session.200 </p>201 <div class="models-grid">202 <article class="model-card">203 <span class="model-tag">Detection</span>204 <h3>RF-DETR Medium</h3>205 <p>206 Real-time object detection (COCO) via ONNX on WebGPU. Endpoint:207 <code>POST /v1/detect</code>208 </p>209 </article>210 <article class="model-card">211 <span class="model-tag">Vision-language</span>212 <h3>SmolVLM-500M</h3>213 <p>214 Describe images with a compact VLM on WebGPU. Endpoint:215 <code>POST /v1/describe</code>216 </p>217 </article>218 </div>219 </div>220 </section>221 222 <section class="cta-section">223 <div class="container">224 <h2>Ready to power the grid?</h2>225 <p>Share your GPU or explore nodes already online.</p>226 <div class="cta-actions">227 <a href="/host.html" class="btn btn-primary">Join the grid</a>228 <a href="/monitor.html" class="btn btn-secondary">View available grid</a>229 </div>230 </div>231 </section>232 </main>233 234 <footer class="site-footer">235 <div class="container">236 <p>237 WebGPU Cluster · MIT ·238 <a239 href="https://github.com/apssouza22/webgpu-video-cluster"240 rel="noopener noreferrer"241 >Source on GitHub</a242 >243 ·244 <a245 href="https://huggingface.co/spaces/apssouza22/webgpu-cluster"246 rel="noopener noreferrer"247 >Live on Hugging Face</a248 >249 </p>250 </div>251 </footer>252 253 <script type="module" src="/src/pages/landing.ts"></script>254 </body>255</html>256