Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta | |
| name="description" | |
| content="Share your GPU with a browser-based cluster. Run object detection, vision models and more on WebGPU, callable from any app via HTTP." | |
| /> | |
| <title>WebGPU Cluster — Distributed WebGPU inference</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link rel="stylesheet" href="/src/styles/landing.css" /> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div class="container"> | |
| <a href="/" class="logo" aria-label="WebGPU Cluster home"> | |
| <span class="logo-mark" aria-hidden="true">⚡</span> | |
| WebGPU Cluster | |
| </a> | |
| <nav class="nav-links" aria-label="Main"> | |
| <a href="#how-it-works" class="nav-hide-mobile">How it works</a> | |
| <a href="#features" class="nav-hide-mobile">Features</a> | |
| <a | |
| href="https://github.com/apssouza22/webgpu-video-cluster" | |
| rel="noopener noreferrer" | |
| class="nav-hide-mobile" | |
| >GitHub</a | |
| > | |
| <a href="/monitor.html">View the grid</a> | |
| <a href="/host.html" class="btn btn-primary btn-sm">Join the grid</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <main> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="badge"> | |
| <span class="badge-dot" aria-hidden="true"></span> | |
| Distributed GPU network | |
| </div> | |
| <h1> | |
| AI on the grid,<br /> | |
| <span class="gradient-text">powered by your WebGPU.</span> | |
| </h1> | |
| <p class="hero-lead"> | |
| 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. | |
| </p> | |
| <div class="hero-actions"> | |
| <a href="/host.html" class="btn btn-primary">Join the grid</a> | |
| <a href="/monitor.html" class="btn btn-secondary">View available grid</a> | |
| </div> | |
| <p class="hero-trust"> | |
| Powered by <strong>WebGPU</strong> & <strong>Transformers.js</strong> · No GPU | |
| drivers to install · Open HTTP API | |
| </p> | |
| <div class="live-stats" aria-live="polite" aria-label="Cluster status"> | |
| <div class="live-stat"> | |
| <div id="stat-online" class="live-stat-value online">…</div> | |
| <div class="live-stat-label">Hosts online</div> | |
| </div> | |
| <div class="live-stat"> | |
| <div id="stat-total" class="live-stat-value">…</div> | |
| <div class="live-stat-label">Hosts registered</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="features"> | |
| <div class="container"> | |
| <span class="section-label">Why join</span> | |
| <h2 class="section-title">Browser-native GPU sharing</h2> | |
| <p class="section-desc"> | |
| Contribute spare GPU cycles from your workstation. Clients send images over HTTP; | |
| your browser runs the model and returns results — privately, on your hardware. | |
| </p> | |
| <div class="features-grid"> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true">🖥️</div> | |
| <h3>Instant local hosting</h3> | |
| <p> | |
| Open a tab, pick a model, and start hosting. RF-DETR and SmolVLM load in a Web | |
| Worker on WebGPU — no Python environment or driver setup. | |
| </p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true">🔒</div> | |
| <h3>Your data stays local</h3> | |
| <p> | |
| Inference runs on your GPU in the browser. Images are processed on your machine; | |
| nothing is sent to third-party AI APIs. | |
| </p> | |
| </article> | |
| <article class="feature-card"> | |
| <div class="feature-icon" aria-hidden="true">🔌</div> | |
| <h3>Universal HTTP API</h3> | |
| <p> | |
| Connect from curl, Python, Node, or any HTTP client. Simple JSON endpoints for | |
| detection and image description — queue and broker included. | |
| </p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="how-it-works"> | |
| <div class="container"> | |
| <span class="section-label">Architecture</span> | |
| <h2 class="section-title">How the grid works</h2> | |
| <p class="section-desc"> | |
| A lightweight Node broker coordinates tasks. Browser hosts stay connected via SSE | |
| and pull jobs when idle. | |
| </p> | |
| <div class="arch-diagram" role="img" aria-label="Request flow diagram"> | |
| <div class="arch-flow"> | |
| <div class="arch-node"> | |
| <strong>Client</strong> | |
| curl / Python / app | |
| </div> | |
| <span class="arch-arrow" aria-hidden="true">→</span> | |
| <div class="arch-node"> | |
| <strong>Broker</strong> | |
| task queue · /v1/detect | |
| </div> | |
| <span class="arch-arrow" aria-hidden="true">→</span> | |
| <div class="arch-node highlight"> | |
| <strong>Browser host</strong> | |
| WebGPU inference | |
| </div> | |
| <span class="arch-arrow" aria-hidden="true">→</span> | |
| <div class="arch-node"> | |
| <strong>Response</strong> | |
| boxes · labels · text | |
| </div> | |
| </div> | |
| </div> | |
| <div class="steps" style="margin-top: 48px"> | |
| <div class="step"> | |
| <h3>Register your node</h3> | |
| <p> | |
| Open the host page, choose a host id and model, then click Start hosting. Keep | |
| the tab open while you share GPU time. | |
| </p> | |
| </div> | |
| <div class="step"> | |
| <h3>Jobs arrive via SSE</h3> | |
| <p> | |
| The broker forwards detection and description tasks to your browser. One job | |
| runs at a time per host. | |
| </p> | |
| </div> | |
| <div class="step"> | |
| <h3>Anyone can call the API</h3> | |
| <p> | |
| Point clients at <code>POST /v1/detect</code> or <code>/v1/describe</code> with | |
| your host id. Results return as JSON. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="api"> | |
| <div class="container"> | |
| <span class="section-label">API</span> | |
| <h2 class="section-title">Call the grid from anywhere</h2> | |
| <p class="section-desc"> | |
| Use the cluster monitor to see online hosts and copy ready-made curl examples. | |
| </p> | |
| <div class="code-panel"> | |
| <div class="code-header"> | |
| <span>detect.sh</span> | |
| <span>POST /v1/detect</span> | |
| </div> | |
| <pre><code>curl -X POST '<span class="str">http://localhost:5180/v1/detect</span>' \ | |
| -H <span class="str">'Content-Type: application/json'</span> \ | |
| -d <span class="str">'{ | |
| "host": "my-gpu-node", | |
| "image_url": "https://example.com/photo.jpg", | |
| "threshold": 0.5 | |
| }'</span></code></pre> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="models"> | |
| <div class="container"> | |
| <span class="section-label">Models</span> | |
| <h2 class="section-title">What you can host today</h2> | |
| <p class="section-desc"> | |
| Models download from Hugging Face on first load. Pick one per host session. | |
| </p> | |
| <div class="models-grid"> | |
| <article class="model-card"> | |
| <span class="model-tag">Detection</span> | |
| <h3>RF-DETR Medium</h3> | |
| <p> | |
| Real-time object detection (COCO) via ONNX on WebGPU. Endpoint: | |
| <code>POST /v1/detect</code> | |
| </p> | |
| </article> | |
| <article class="model-card"> | |
| <span class="model-tag">Vision-language</span> | |
| <h3>SmolVLM-500M</h3> | |
| <p> | |
| Describe images with a compact VLM on WebGPU. Endpoint: | |
| <code>POST /v1/describe</code> | |
| </p> | |
| </article> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="cta-section"> | |
| <div class="container"> | |
| <h2>Ready to power the grid?</h2> | |
| <p>Share your GPU or explore nodes already online.</p> | |
| <div class="cta-actions"> | |
| <a href="/host.html" class="btn btn-primary">Join the grid</a> | |
| <a href="/monitor.html" class="btn btn-secondary">View available grid</a> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <footer class="site-footer"> | |
| <div class="container"> | |
| <p> | |
| WebGPU Cluster · MIT · | |
| <a | |
| href="https://github.com/apssouza22/webgpu-video-cluster" | |
| rel="noopener noreferrer" | |
| >Source on GitHub</a | |
| > | |
| · | |
| <a | |
| href="https://huggingface.co/spaces/apssouza22/webgpu-cluster" | |
| rel="noopener noreferrer" | |
| >Live on Hugging Face</a | |
| > | |
| </p> | |
| </div> | |
| </footer> | |
| <script type="module" src="/src/pages/landing.ts"></script> | |
| </body> | |
| </html> | |