Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Join the grid — GPU cluster host</title> | |
| <style> | |
| :root { | |
| color-scheme: dark; | |
| font-family: system-ui, sans-serif; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 24px; | |
| background: #111; | |
| color: #eee; | |
| } | |
| main { | |
| max-width: 720px; | |
| margin: 0 auto; | |
| } | |
| h1 { | |
| margin: 0 0 8px; | |
| font-size: 1.4rem; | |
| } | |
| p { | |
| color: #bdbdbd; | |
| line-height: 1.5; | |
| } | |
| a { | |
| color: #9eb6ff; | |
| } | |
| .nav { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| margin: 0 0 20px; | |
| font-size: 14px; | |
| } | |
| .row { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| margin: 16px 0; | |
| } | |
| input, | |
| select, | |
| button { | |
| font: inherit; | |
| } | |
| input, | |
| select { | |
| flex: 1; | |
| min-width: 200px; | |
| padding: 10px 12px; | |
| border: 1px solid #333; | |
| border-radius: 8px; | |
| background: #0d1117; | |
| color: #eee; | |
| } | |
| select { | |
| cursor: pointer; | |
| } | |
| .field { | |
| flex: 1; | |
| min-width: 200px; | |
| } | |
| .field label { | |
| display: block; | |
| margin-bottom: 6px; | |
| font-size: 12px; | |
| color: #8b949e; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| } | |
| .field select { | |
| width: 100%; | |
| box-sizing: border-box; | |
| } | |
| button { | |
| padding: 10px 16px; | |
| border: 0; | |
| border-radius: 8px; | |
| background: #4f46e5; | |
| color: #fff; | |
| cursor: pointer; | |
| } | |
| button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| pre { | |
| margin: 0; | |
| padding: 16px; | |
| overflow-x: auto; | |
| border: 1px solid #2b2b2b; | |
| border-radius: 12px; | |
| background: #0d1117; | |
| font: 12px/1.5 ui-monospace, monospace; | |
| color: #c9d1d9; | |
| white-space: pre-wrap; | |
| } | |
| #status { | |
| margin-top: 16px; | |
| font: 13px/1.5 ui-monospace, monospace; | |
| color: #7eb8ff; | |
| white-space: pre-wrap; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <nav class="nav" aria-label="Site"> | |
| <a href="/">Home</a> | |
| <a href="/monitor.html">View the grid</a> | |
| </nav> | |
| <h1>Join the grid</h1> | |
| <p> | |
| Keep this tab open. Inference runs here on WebGPU; the Node broker forwards jobs from | |
| curl, Python, or other apps (<code>/v1/detect</code> or <code>/v1/describe</code>). | |
| </p> | |
| <div class="row"> | |
| <input id="host-id" type="text" placeholder="Host id" autocomplete="off" /> | |
| <div class="field"> | |
| <label for="model-select">Model to share</label> | |
| <select id="model-select" aria-label="Model to share with the cluster"></select> | |
| </div> | |
| <button id="register-btn" type="button">Start hosting</button> | |
| </div> | |
| <p>Example once hosting is active:</p> | |
| <pre id="curl-example"></pre> | |
| <p id="status">Initializing…</p> | |
| </main> | |
| <script type="module" src="/src/pages/addNode.ts"></script> | |
| </body> | |
| </html> | |