Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> | |
| <title>Open d1 WebGPU</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=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <main> | |
| <header> | |
| <h1>Open d1 <span class="tag">in your browser</span></h1> | |
| <p class="lede">Liquid AI's decision models: a state and some typed questions in, calibrated answers out of one forward pass. Runs locally on WebGPU, with a WASM fallback.</p> | |
| <p class="links"> | |
| <a href="https://huggingface.co/LiquidAI/d1-omni-600M" target="_blank" rel="noopener">d1-omni-600M</a> (text + image or voice) · | |
| <a href="https://huggingface.co/LiquidAI/d1-3B" target="_blank" rel="noopener">d1-3B</a> (text + image) · | |
| ONNX by <a href="https://huggingface.co/onnx-community" target="_blank" rel="noopener">onnx-community</a> | |
| </p> | |
| </header> | |
| <div class="grid"> | |
| <section class="panel" id="inputs"> | |
| <div class="field"> | |
| <span class="label">Model</span> | |
| <div class="seg" role="radiogroup" id="model"> | |
| <button role="radio" data-model="omni" aria-checked="true">d1-omni-600M <small>0.5 GB</small></button> | |
| <button role="radio" data-model="3b" aria-checked="false">d1-3B <small>2.4 GB</small></button> | |
| </div> | |
| </div> | |
| <label class="field"> | |
| <span class="label">State</span> | |
| <textarea id="state" rows="4" placeholder="Text or JSON the questions are about. Can be empty when an image or clip is the whole state."></textarea> | |
| </label> | |
| <div class="media"> | |
| <div class="drop" id="imageDrop" tabindex="0"> | |
| <input type="file" id="imageFile" accept="image/*" hidden /> | |
| <img id="imagePreview" alt="" hidden /> | |
| <span class="hint" id="imageHint">Image · drop or click</span> | |
| <button class="clear" id="imageClear" hidden aria-label="Remove image">×</button> | |
| </div> | |
| <div class="drop" id="audioDrop" tabindex="0"> | |
| <input type="file" id="audioFile" accept="audio/*" hidden /> | |
| <span class="hint" id="audioHint">Voice clip · drop or click</span> | |
| <audio id="audioPreview" controls hidden></audio> | |
| <div class="audio-actions"> | |
| <button class="small" id="recordBtn" type="button">Record</button> | |
| <button class="clear" id="audioClear" hidden aria-label="Remove clip">×</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="field"> | |
| <span class="label">Questions</span> | |
| <div id="questions"></div> | |
| <div class="qfoot"> | |
| <button class="small" id="addQ" type="button">Add question</button> | |
| <span class="help"><b>choice</b>: <code>name: description | name: description</code> · <b>score</b>: levels lowest first, split by <code>|</code> · <b>noul</b> (yes/no): optional <code>yes means | no means</code></span> | |
| </div> | |
| </div> | |
| <button class="primary" id="run" type="button">Decide</button> | |
| <div class="status" id="status" aria-live="polite"></div> | |
| <div class="bar" id="bar" hidden><span></span></div> | |
| </section> | |
| <section class="panel" id="outputs"> | |
| <div id="result" class="placeholder">Answers appear here.</div> | |
| </section> | |
| </div> | |
| <section class="examples"> | |
| <span class="label">Examples</span> | |
| <div id="examples"></div> | |
| </section> | |
| <footer><a href="https://x.com/realmrfakename" target="_blank" rel="noopener">Twitter / X</a></footer> | |
| </main> | |
| <script type="module" src="app.js"></script> | |
| </body> | |
| </html> | |