Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Rock, Paper, d1</title> | |
| <meta name="description" content="Rock, Paper, Scissors where Liquid AI's d1-3B reads your hand from the webcam, on your GPU. Nothing leaves the page." /> | |
| <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22%3E%3Ctext y=%2213%22 font-size=%2213%22%3E%E2%9C%8A%3C/text%3E%3C/svg%3E" /> | |
| <script type="module" crossorigin src="./assets/index-BUlVfxYS.js"></script> | |
| <link rel="stylesheet" crossorigin href="./assets/index-BX0GKCoJ.css"> | |
| </head> | |
| <body> | |
| <header> | |
| <h1>Rock, Paper, <span>d1</span></h1> | |
| <p> | |
| Liquid AI's <a href="https://huggingface.co/LiquidAI/d1-3B" target="_blank" rel="noreferrer">d1-3B</a>, a 3B decision model, reads your hand from the webcam | |
| and calls the round. It runs on your GPU with WebGPU: your camera never leaves this page. | |
| </p> | |
| </header> | |
| <main> | |
| <section class="stage"> | |
| <div class="you"> | |
| <div class="label">You</div> | |
| <div class="cam"> | |
| <video id="video" playsinline muted></video> | |
| <div id="beat" class="beat" hidden></div> | |
| <div id="cam-off" class="cam-off">Camera off</div> | |
| </div> | |
| <div id="meter" class="meter"></div> | |
| <div id="read-info" class="muted small"></div> | |
| </div> | |
| <div class="vs">vs</div> | |
| <div class="bot"> | |
| <div class="label">d1's opponent</div> | |
| <div id="card" class="card down"><span id="card-face">?</span></div> | |
| <div class="muted small">Picks at random before the countdown, face down. d1 only referees.</div> | |
| </div> | |
| </section> | |
| <section class="controls"> | |
| <button id="start" class="primary">Load d1 and start camera</button> | |
| <button id="play" class="primary" hidden>Play round</button> | |
| <div id="progress" class="progress" hidden><div></div></div> | |
| <div id="status" class="muted"></div> | |
| </section> | |
| <section class="score"> | |
| <div><span id="score-you">0</span><small>you</small></div> | |
| <div class="round" id="round">Best of 5</div> | |
| <div><span id="score-bot">0</span><small>bot</small></div> | |
| </section> | |
| <div id="result" class="result"></div> | |
| </main> | |
| <footer class="muted small"> | |
| Model: <a href="https://huggingface.co/LiquidAI/d1-3B" target="_blank" rel="noreferrer">LiquidAI/d1-3B</a> (LFM Open License v1.0), converted to | |
| <a href="https://huggingface.co/onnx-community/d1-3B-ONNX" target="_blank" rel="noreferrer">ONNX</a> and run with | |
| <a href="https://huggingface.co/docs/transformers.js" target="_blank" rel="noreferrer">Transformers.js</a>. Each read is one forward pass over one frame | |
| and one typed question (rock, paper, scissors or none); the answer is a softmax over the options, as in d1's own <code>system_one</code>. | |
| Desktop Chrome with WebGPU; about 3.8 GB on first load, cached after. | |
| </footer> | |
| </body> | |
| </html> | |