MiniCPM5-2B-WebGPU-Pi-HTTP

Running

File size: 12,749 Bytes

<!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:url" content="https://mike0021-minicpm5-2b-webgpu-pi-http.static.hf.space/">
  <meta property="og:image" content="https://huggingface.co/spaces/Mike0021/MiniCPM5-2B-WebGPU-Pi-HTTP/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/Mike0021/MiniCPM5-2B-WebGPU-Pi-HTTP/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-CdBuZzGZ.js"></script>
  <link rel="stylesheet" crossorigin href="./assets/index-D2YMAIXb.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" target="_blank" rel="noopener noreferrer" aria-label="MiniCPM5-2B by OpenBMB on Hugging Face (opens in a new tab)" title="View MiniCPM5-2B 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">One download, about 1.84 GB. Cached in this browser for next time.</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="folder-controls"><button id="open-folder" type="button" class="quiet"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg><span>Link a folder</span></button><button id="reconnect-folder" type="button" class="quiet" hidden>Reconnect folder</button></div>
      <div id="local-folder-bar" hidden>
        <strong id="local-folder-name"></strong><span id="local-folder-hint" role="status"></span>
        <div class="folder-actions"><button id="review-changes" type="button">Review &amp; apply</button><button id="refresh-folder" type="button" class="quiet" title="Reload files from disk and start a fresh chat">Refresh</button><button id="disconnect-folder" type="button" class="quiet">Back to demo</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">HTTP: curl can request any HTTPS URL. Browser CORS applies. <a href="./http-help.html" target="_blank" rel="noopener">HTTP help ↗</a></p>
    </aside>
  </main>
  <dialog id="local-review" aria-labelledby="review-title" aria-describedby="review-description">
    <div class="review-heading"><h2 id="review-title">Review local changes</h2><button id="review-close" type="button" aria-label="Close change review">×</button></div>
    <p id="review-description"></p><div id="review-files"></div><p id="review-error" role="alert"></p>
    <div class="review-actions"><button id="review-discard" type="button">Discard changes</button><button id="review-apply" type="button" class="primary">Apply to folder</button></div>
  </dialog>
  <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">The model and shell run in your browser. HTTP commands can send requests and data to external services.</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" target="_blank" rel="noopener noreferrer" title="View MiniCPM5-2B 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.84 GB on the first download</strong><span>Saved in this browser for faster starts next time.</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/docs/transformers.js/index" target="_blank" rel="noopener noreferrer" title="Transformers.js documentation (opens in a new tab)"><img src="./library-icons/huggingface.svg" width="14" height="14" alt="">Transformers.js</a>
      <a href="https://onnxruntime.ai/docs/" target="_blank" rel="noopener noreferrer" title="ONNX Runtime documentation (opens in a new tab)"><img src="./library-icons/onnxruntime.ico" width="14" height="14" alt="">ONNX Runtime</a>
      <a href="https://github.com/earendil-works/pi" target="_blank" rel="noopener noreferrer" title="Pi agent toolkit (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 &amp; send</button></div>
  </dialog>
</body>
</html>