| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> |
| <meta name="theme-color" content="#18181e"> |
| <meta name="color-scheme" content="dark"> |
| <link rel="icon" href="./favicon.svg" type="image/svg+xml"> |
| <link rel="preload" href="./modal-cat-v1.png" as="image" type="image/png" fetchpriority="high"> |
| <meta name="description" content="Pi, MiniCPM5 and a bash workspace, running entirely in your browser."> |
| <meta property="og:type" content="website"> |
| <meta property="og:title" content="Pi, entirely in your browser."> |
| <meta property="og:description" content="MiniCPM5-2B, WebGPU inference, and a local shell. A coding agent running entirely in your browser."> |
| <meta property="og:image" content="https://huggingface.co/spaces/victor/MiniCPM5-2B-WebGPU-Pi/resolve/main/social-thumbnail-v3.png"> |
| <meta property="og:image:width" content="3136"> |
| <meta property="og:image:height" content="1984"> |
| <meta property="og:image:alt" content="A coding agent running entirely in your browser, above the Pi terminal and its pixel cat mascot."> |
| <meta name="twitter:card" content="summary_large_image"> |
| <meta name="twitter:title" content="Pi, entirely in your browser."> |
| <meta name="twitter:description" content="MiniCPM5-2B, WebGPU inference, and a local shell. A coding agent running entirely in your browser."> |
| <meta name="twitter:image" content="https://huggingface.co/spaces/victor/MiniCPM5-2B-WebGPU-Pi/resolve/main/social-thumbnail-v3.png"> |
| <meta name="twitter:image:alt" content="A coding agent running entirely in your browser, above the Pi terminal and its pixel cat mascot."> |
| <title>Pi · Coding agent in your browser</title> |
| <script type="module" crossorigin src="./assets/index-DnXFGQ8z.js"></script> |
| <link rel="stylesheet" crossorigin href="./assets/index-CLisF1Ml.css"> |
| <link rel="stylesheet" href="./assets/mascot-clip-81213051.css"> |
| </head> |
| <body> |
| <header><a class="brand" href="./" aria-label="Pi"><svg class="pi-logo" viewBox="165.29 165.29 469.43 469.43" width="18" height="18" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/><path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/></svg></a> |
| <div id="runtime-meter" class="runtime-meter" role="group" aria-label="Execution in this browser" data-state="idle"> |
| <div class="runtime-content"> |
| <span class="runtime-location"><span class="runtime-dot" aria-hidden="true"></span><span class="runtime-engine">WebGPU</span></span> |
| <span class="runtime-divider" aria-hidden="true"></span> |
| <svg class="runtime-sparkline" width="48" height="18" viewBox="0 0 48 18" aria-hidden="true" hidden><g class="runtime-bars" fill="currentColor"></g></svg> |
| <span class="runtime-value">Idle</span> |
| </div> |
| <span class="sr-only" role="status" aria-live="polite"></span> |
| </div> |
| <div class="model-panel"> |
| <div class="model-heading"><div><a class="header-model-source" href="https://huggingface.co/openbmb/MiniCPM5-2B-GGUF" target="_blank" rel="noopener noreferrer" aria-label="MiniCPM5-2B by OpenBMB on Hugging Face (opens in a new tab)" title="View MiniCPM5-2B GGUF weights on Hugging Face"><img src="./openbmb-avatar.webp" width="16" height="16" alt=""><strong>MiniCPM5-2B</strong></a><span class="badge">4-bit</span></div><button id="load" class="primary" aria-describedby="load-status load-detail">Load model</button></div> |
| <p id="load-status" class="sr-only" role="status">First download: about 1.6 GB (Q4_K_M). Browser caching is best effort.</p> |
| <progress id="progress" hidden max="100" value="0" aria-label="Model download"></progress> |
| <div id="load-detail" class="sr-only"></div> |
| </div> |
| </header> |
| <main> |
| <section id="conversation-panel" class="conversation" aria-label="Agent conversation"> |
| <div class="terminal-panel"> |
| <div id="pi-terminal" aria-label="Pi terminal"></div> |
| <div id="notice" role="status" hidden></div> |
| <a id="open-tab" class="button" target="_blank" rel="noopener noreferrer" hidden>Open workspace in a new tab ↗</a> |
| <div class="terminal-controls"><button id="new-chat" type="button">New chat</button><span id="activity" class="sr-only" role="status">Files and chat are saved on this device.</span><button id="newline" type="button" title="Insert a newline (Shift+Enter)">↵ Newline</button><button id="stop" type="button" hidden>Stop</button><button id="send" class="primary">Send ↑</button></div> |
| <footer>Pi TUI · xterm.js <span>Model and tools run in your browser</span></footer> |
| </div> |
| </section> |
| <div id="column-resizer" class="column-resizer" role="separator" tabindex="0" aria-label="Resize chat and workspace" aria-orientation="vertical" aria-controls="conversation-panel workspace-panel" aria-valuemin="0" aria-valuemax="100" aria-valuenow="55" title="Drag to resize · Arrow keys to adjust · Double-click or Enter to reset"></div> |
| <aside id="workspace-panel" class="workspace" aria-label="Workspace"> |
| <div class="workspace-heading"><h2>Workspace</h2><div><button id="add-file" class="quiet">+ File</button><label class="button quiet" for="upload">Import</label><input id="upload" type="file" multiple hidden><button id="export" class="quiet">Export</button></div></div> |
| <div class="file-area"><nav id="files" aria-label="Files"></nav><div class="editor-area"><div class="editor-heading"><span class="editor-file"><span id="filetype"></span><span id="filename">Select a file</span></span><button id="save" class="quiet" disabled>Save</button></div><label for="editor" class="sr-only">File contents</label><div class="editor-input"><pre id="editor-highlight" aria-hidden="true"></pre><textarea id="editor" wrap="off" autocomplete="off" autocapitalize="off" spellcheck="false" disabled placeholder="Select a file to inspect or edit it."></textarea></div></div></div> |
| <details class="terminal" open> |
| <summary>Shell <span>just-bash</span></summary> |
| <div class="shell-toolbar"><span>/workspace</span><button id="shell-clear" type="button" class="quiet" title="Clear shell output (Ctrl+L)">Clear</button></div> |
| <div id="terminal-output" role="log" aria-label="Shell output" aria-live="polite" tabindex="0"><div class="shell-empty"><strong>Ready in your workspace</strong><span>Try <code>ls -la</code> or <code>cat README.md</code>.</span></div></div> |
| <form id="shell-form"> |
| <span class="shell-prompt" aria-hidden="true">$</span><label for="command" class="sr-only">Shell command</label> |
| <div class="shell-input"><pre id="command-highlight" aria-hidden="true"></pre><textarea id="command" rows="1" autocomplete="off" autocapitalize="off" spellcheck="false" placeholder="Enter a shell command…" aria-describedby="shell-hint"></textarea></div> |
| <button id="shell-run" class="primary">Run</button> |
| </form> |
| <div id="shell-hint"><span>Enter to run · Shift+Enter for newline</span><span>↑↓ history</span></div> |
| </details> |
| <p class="workspace-note">Bash, text tools, and a virtual filesystem. Node.js, Python, and network commands are unavailable.</p> |
| </aside> |
| </main> |
| <dialog id="model-dialog" aria-labelledby="model-title" aria-describedby="model-description"> |
| <div class="setup-paws" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></div> |
| <div class="setup-cat" aria-hidden="true"><span class="setup-cat-tail"></span><img src="./modal-cat-v1.png" width="1254" height="1254" alt="" draggable="false" loading="eager" fetchpriority="high" decoding="async"><span class="setup-cat-eyelids"></span></div> |
| <div class="setup-heading"> |
| <h2 id="model-title">Download model weights</h2> |
| <button id="model-cancel" type="button" aria-label="Close model setup" title="Close model setup"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="m6 6 12 12M18 6 6 18"/></svg></button> |
| </div> |
| <div class="setup-body"> |
| <p id="model-description">Everything happens in your browser. Your prompts and files stay on this device.</p> |
| <dl class="setup-runtime"> |
| <div><dt>Model</dt><dd class="setup-model"><a class="model-org" href="https://huggingface.co/openbmb" target="_blank" rel="noopener noreferrer" aria-label="OpenBMB on Hugging Face (opens in a new tab)" title="OpenBMB on Hugging Face"><img src="./openbmb-avatar.webp" width="18" height="18" alt=""></a><a class="model-source" href="https://huggingface.co/openbmb/MiniCPM5-2B-GGUF" target="_blank" rel="noopener noreferrer" title="View MiniCPM5-2B GGUF weights on Hugging Face">MiniCPM5-2B</a></dd></div> |
| <div><dt>Inference</dt><dd>On your GPU</dd></div> |
| <div><dt>Shell</dt><dd>Bash in the browser</dd></div> |
| </dl> |
| <div class="setup-facts"><strong>About 1.6 GB on the first download</strong><span>Your browser may cache weights for faster starts.</span></div> |
| <p class="setup-label">Your message</p><div id="model-preview"></div> |
| <p id="model-error" role="alert" hidden></p> |
| <a id="model-open-tab" class="button" target="_blank" rel="noopener noreferrer" hidden>Open workspace in a new tab ↗</a> |
| <p class="setup-credits"><span>Powered by</span> |
| <a href="https://huggingface.co/openbmb/MiniCPM5-2B-GGUF" target="_blank" rel="noopener noreferrer" title="MiniCPM5 GGUF weights for local WebGPU inference (opens in a new tab)"><img src="./library-icons/huggingface.svg" width="14" height="14" alt="">GGUF · WebGPU</a> |
| <a href="https://github.com/earendil-works/pi" target="_blank" rel="noopener noreferrer" title="Pi terminal UI (opens in a new tab)"><svg class="credit-pi" viewBox="165.29 165.29 469.43 469.43" width="14" height="14" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M165.29 165.29H517.36V400H400V517.36H282.65V634.72H165.29ZM282.65 282.65V400H400V282.65Z"/><path fill="currentColor" d="M517.36 400H634.72V634.72H517.36Z"/></svg>Pi</a> |
| <a href="https://github.com/vercel-labs/just-bash" target="_blank" rel="noopener noreferrer" title="just-bash browser shell (opens in a new tab)"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="2.5" y="4" width="19" height="16" rx="3"/><path d="m6 9 3 3-3 3m7 0h5"/></svg>just-bash</a> |
| </p> |
| </div> |
| <div class="setup-actions"><button id="model-confirm" type="button" class="primary" autofocus>Load model & send</button></div> |
| </dialog> |
| </body> |
| </html> |
|
|
