index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>0xBitNet Demo</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #0a0a0a;
      color: #e0e0e0;
      height: 100vh;
      display: flex;
      flex-direction: column;
    }

    header {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid #222;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    header h1 { font-size: 1.25rem; font-weight: 600; color: #fff; }

    header .badge {
      font-size: 0.7rem;
      padding: 0.15rem 0.5rem;
      border-radius: 9999px;
      background: #1a3a2a;
      color: #4ade80;
      font-weight: 500;
    }

    #status {
      padding: 0.75rem 1.5rem;
      background: #111;
      border-bottom: 1px solid #222;
      font-size: 0.85rem;
      color: #888;
      display: none;
    }

    .progress-bar {
      margin-top: 0.5rem;
      height: 4px;
      background: #222;
      border-radius: 2px;
      overflow: hidden;
    }

    .progress-fill {
      height: 100%;
      background: #4ade80;
      width: 0%;
      transition: width 0.3s;
    }

    #hero {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1.5rem;
      padding: 2rem;
      text-align: center;
    }

    #hero h2 {
      font-size: 1.5rem;
      color: #fff;
    }

    #hero p {
      max-width: 480px;
      color: #888;
      line-height: 1.6;
      font-size: 0.95rem;
    }

    #hero pre {
      background: #111;
      border: 1px solid #333;
      border-radius: 8px;
      padding: 1.25rem 1.5rem;
      max-width: 560px;
      width: 100%;
      text-align: left;
      font-size: 0.85rem;
      line-height: 1.7;
      color: #c9d1d9;
      overflow-x: auto;
    }

    #hero pre .kw { color: #ff7b72; }
    #hero pre .str { color: #a5d6ff; }
    #hero pre .fn { color: #d2a8ff; }
    #hero pre .cmt { color: #555; }

    #load-btn {
      padding: 0.85rem 2.5rem;
      border-radius: 8px;
      border: none;
      background: #166534;
      color: #fff;
      font-weight: 600;
      cursor: pointer;
      font-size: 1rem;
    }

    #load-btn:hover { background: #15803d; }
    #load-btn:disabled { opacity: 0.5; cursor: not-allowed; }

    #messages {
      flex: 1;
      overflow-y: auto;
      padding: 1.5rem;
      display: none;
      flex-direction: column;
      gap: 1rem;
    }

    .msg {
      max-width: 70%;
      padding: 0.75rem 1rem;
      border-radius: 12px;
      line-height: 1.5;
      white-space: pre-wrap;
      word-break: break-word;
    }

    .msg.user {
      align-self: flex-end;
      background: #1a365d;
      color: #bee3f8;
    }

    .msg.assistant {
      align-self: flex-start;
      background: #1a1a1a;
      border: 1px solid #333;
    }

    #input-area {
      padding: 1rem 1.5rem;
      border-top: 1px solid #222;
      display: none;
      gap: 0.75rem;
    }

    #input-area input {
      flex: 1;
      padding: 0.75rem 1rem;
      border-radius: 8px;
      border: 1px solid #333;
      background: #111;
      color: #e0e0e0;
      font-size: 0.95rem;
      outline: none;
    }

    #input-area input:focus { border-color: #4ade80; }

    #input-area button {
      padding: 0.75rem 1.5rem;
      border-radius: 8px;
      border: none;
      background: #166534;
      color: #fff;
      font-weight: 600;
      cursor: pointer;
    }

    #input-area button:hover { background: #15803d; }
    #input-area button:disabled { opacity: 0.5; cursor: not-allowed; }

    .npm-link {
      font-size: 0.8rem;
      color: #555;
    }

    .npm-link a { color: #4ade80; }
  </style>
  <script type="module" crossorigin src="./assets/index-gTdi7eoP.js"></script>
</head>
<body>
  <header>
    <h1>0xBitNet</h1>
    <span class="badge">WebGPU</span>
  </header>

  <div id="status">
    <span id="status-text">Loading model...</span>
    <div class="progress-bar">
      <div class="progress-fill" id="progress-fill"></div>
    </div>
  </div>

  <div id="hero">
    <h2>BitNet in the Browser. That's it.</h2>
    <pre><code><span class="kw">import</span> { BitNet } <span class="kw">from</span> <span class="str">"0xbitnet"</span>;

<span class="kw">const</span> model = <span class="kw">await</span> BitNet.<span class="fn">load</span>(url);

<span class="kw">for await</span> (<span class="kw">const</span> token <span class="kw">of</span> model.<span class="fn">generate</span>(messages)) {
  process.stdout.<span class="fn">write</span>(token);
}</code></pre>
    <button id="load-btn">Try It — Load BitNet 2B-4T (~700 MB)</button>
    <p class="npm-link"><code>npm install 0xbitnet</code> &mdash; <a href="https://github.com/m96-chan/0xBitNet" target="_blank">GitHub</a> &middot; <a href="https://www.npmjs.com/package/0xbitnet" target="_blank">npm</a></p>
  </div>

  <div id="messages"></div>

  <div id="input-area">
    <input type="text" id="user-input" placeholder="Type a message..." autocomplete="off" />
    <button id="send-btn" disabled>Send</button>
  </div>

</body>
</html>