architecture.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transformer 网络架构图</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: #f7f8fa;
      height: 100vh;
      display: flex;
      flex-direction: column;
      color: #333;
      overflow: hidden;
    }
    /* Header */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 32px;
      border-bottom: 1px solid #e5e7eb;
      background: #fff;
      flex-shrink: 0;
    }
    .header h1 {
      font-size: 18px;
      font-weight: 700;
      color: #1e293b;
    }
    .header .chips {
      display: flex;
      gap: 8px;
    }
    .chip {
      background: #f1f5f9;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 3px 10px;
      font-size: 11px;
      color: #64748b;
    }
    .chip b { color: #334155; font-weight: 600; font-family: "SF Mono", monospace; }

    /* Zoom controls */
    .zoom-controls {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-left: 16px;
    }
    .zoom-btn {
      width: 28px;
      height: 28px;
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      background: #f8fafc;
      color: #475569;
      font-size: 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
      user-select: none;
      font-weight: 300;
    }
    .zoom-btn:hover { background: #e2e8f0; }
    .zoom-btn:active { background: #cbd5e1; }
    .zoom-label {
      font-size: 11px;
      color: #94a3b8;
      font-family: "SF Mono", monospace;
      min-width: 38px;
      text-align: center;
    }


    /* Main canvas */
    .canvas-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 24px;
      overflow: auto;
    }
    .canvas {
      display: flex;
      align-items: center;
      gap: 0;
      max-height: 100%;
      transition: transform 0.2s ease;
      transform-origin: center center;
    }

    /* --- 通用节点 --- */
    .node {
      border-radius: 10px;
      padding: 10px 14px;
      text-align: center;
      border: 1.5px solid;
      flex-shrink: 0;
      min-width: 90px;
    }
    .node .name { font-size: 11px; font-weight: 600; line-height: 1.3; }
    .node .sub  { font-size: 9px; color: #94a3b8; margin-top: 2px; line-height: 1.3; }
    .node .shape { font-size: 8px; color: #b0b8c4; margin-top: 2px; font-family: "SF Mono", monospace; }

    /* 节点颜色 */
    .n-input   { background: #eff6ff; border-color: #bfdbfe; }
    .n-embed   { background: #f0fdf4; border-color: #bbf7d0; }
    .n-add     { background: #faf5ff; border-color: #e9d5ff; }
    .n-attn    { background: #fff7ed; border-color: #fed7aa; }
    .n-mlp     { background: #f0f9ff; border-color: #bae6fd; }
    .n-ln      { background: #f8fafc; border-color: #e2e8f0; }
    .n-output  { background: #fef2f2; border-color: #fecaca; }

    /* 箭头 */
    .arrow {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      padding: 0 2px;
    }
    .arrow .shaft {
      width: 18px;
      height: 1.5px;
      background: #cbd5e1;
      position: relative;
    }
    .arrow .shaft::after {
      content: '';
      position: absolute;
      right: -5px;
      top: 50%;
      transform: translateY(-50%);
      border-top: 4px solid transparent;
      border-bottom: 4px solid transparent;
      border-left: 5px solid #cbd5e1;
    }

    /* Block 容器 */
    .block-wrap {
      border: 1.5px dashed #f59e0b;
      border-radius: 14px;
      padding: 10px 12px;
      display: flex;
      align-items: center;
      gap: 0;
      position: relative;
      background: rgba(245, 158, 11, 0.03);
      flex-shrink: 0;
    }
    .block-wrap .badge {
      position: absolute;
      top: -10px;
      right: 14px;
      background: #f59e0b;
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      padding: 1px 10px;
      border-radius: 10px;
    }
    .block-inner {
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-items: center;
    }
    .block-inner .v-arrow {
      width: 1.5px;
      height: 8px;
      background: #cbd5e1;
      position: relative;
    }
    .block-inner .v-arrow::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      border-left: 3px solid transparent;
      border-right: 3px solid transparent;
      border-top: 4px solid #cbd5e1;
    }
    .block-inner .node {
      width: 130px;
      padding: 6px 8px;
    }
    .block-inner .node .name { font-size: 10px; }
    .block-inner .residual {
      font-size: 8px;
      color: #94a3b8;
      font-style: italic;
    }

    /* 底部统计 */
    .footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
      padding: 10px 32px;
      border-top: 1px solid #e5e7eb;
      background: #fff;
      flex-shrink: 0;
    }
    .footer .stat {
      font-size: 11px;
      color: #64748b;
    }
    .footer .stat b {
      color: #334155;
      font-family: "SF Mono", monospace;
      font-weight: 600;
    }
    .footer .total {
      font-size: 13px;
      font-weight: 700;
      color: #f59e0b;
    }
    .footer .total b { font-family: "SF Mono", monospace; }

    /* 左下角注释 */
    .legend {
      position: fixed;
      bottom: 48px;
      left: 24px;
      font-size: 10px;
      color: #94a3b8;
      line-height: 1.6;
      max-width: 360px;
    }
    .legend code {
      font-family: "SF Mono", monospace;
      background: #f1f5f9;
      padding: 0 3px;
      border-radius: 3px;
      color: #64748b;
    }

    /* 右下角计算公式 */
    .formulas {
      position: fixed;
      bottom: 48px;
      right: 24px;
      font-size: 10px;
      color: #94a3b8;
      line-height: 1.7;
      text-align: right;
    }
    .formulas code {
      font-family: "SF Mono", monospace;
      background: #f1f5f9;
      padding: 0 3px;
      border-radius: 3px;
      color: #64748b;
    }
    .formulas .title {
      font-size: 10px;
      font-weight: 600;
      color: #64748b;
      margin-bottom: 2px;
    }
  </style>
</head>
<body>

  <!-- Header -->
  <div class="header">
    <h1>Transformer Language Model Architecture</h1>
    <div style="display: flex; align-items: center;">
      <div class="chips">
        <div class="chip">Vocab <b>100,288</b></div>
        <div class="chip">Ctx <b>256</b></div>
        <div class="chip">Embed <b>512</b></div>
        <div class="chip">Heads <b>8</b></div>
        <div class="chip">Blocks <b>12</b></div>
        <div class="chip">Batch <b>16</b></div>
      </div>
      <div class="zoom-controls">
        <button class="zoom-btn" onclick="zoom(-1)" title="缩小">−</button>
        <span class="zoom-label" id="zoomLabel">100%</span>
        <button class="zoom-btn" onclick="zoom(1)" title="放大">+</button>
        <button class="zoom-btn" onclick="zoom(0)" title="重置" style="font-size:12px;">↺</button>
      </div>
    </div>
  </div>

  <!-- Main -->
  <div class="canvas-wrap">
    <div class="canvas">

      <!-- Input -->
      <div class="node n-input">
        <div class="name">Input<br>Token IDs</div>
        <div class="sub">输入 token 索引</div>
        <div class="shape">(B, T)</div>
      </div>
      <div class="arrow"><div class="shaft"></div></div>

      <!-- Token Embed -->
      <div class="node n-embed">
        <div class="name">Token<br>Embedding</div>
        <div class="sub">Embedding(100288, 512)</div>
        <div class="shape">51,347,456 params</div>
      </div>
      <div class="arrow"><div class="shaft"></div></div>

      <!-- Add -->
      <div class="node n-add">
        <div class="name">+ Position<br>Embedding</div>
        <div class="sub">Embedding(256, 512)</div>
        <div class="shape">131,072 params</div>
      </div>
      <div class="arrow"><div class="shaft"></div></div>

      <!-- Transformer Block ×12 -->
      <div class="block-wrap">
        <div class="badge">× 12</div>
        <div class="block-inner">

          <div class="node n-ln">
            <div class="name">LayerNorm</div>
          </div>
          <div class="v-arrow"></div>

          <div class="node n-attn">
            <div class="name">Causal Multi-Head<br>Self-Attention</div>
            <div class="sub">8 heads × 64d<br>Q/K/V (no bias) + Proj</div>
            <div class="shape">1,049,088 / block</div>
          </div>
          <div class="v-arrow"></div>
          <div class="residual">+ residual</div>
          <div class="v-arrow"></div>

          <div class="node n-ln">
            <div class="name">LayerNorm</div>
          </div>
          <div class="v-arrow"></div>

          <div class="node n-mlp">
            <div class="name">Feed-Forward<br>(MLP)</div>
            <div class="sub">512→2048 ReLU→512</div>
            <div class="shape">2,099,712 / block</div>
          </div>
          <div class="v-arrow"></div>
          <div class="residual">+ residual</div>

        </div>
      </div>
      <div class="arrow"><div class="shaft"></div></div>

      <!-- Final LN -->
      <div class="node n-ln">
        <div class="name">Final<br>LayerNorm</div>
        <div class="sub">LayerNorm(512)</div>
      </div>
      <div class="arrow"><div class="shaft"></div></div>

      <!-- LM Head -->
      <div class="node n-output" style="min-width: 100px;">
        <div class="name">LM Head</div>
        <div class="sub">Linear(512, 100288)</div>
        <div class="shape">51,447,744 params</div>
      </div>
      <div class="arrow"><div class="shaft"></div></div>

      <!-- Output -->
      <div class="node n-output">
        <div class="name">Logits<br>+ Loss</div>
        <div class="sub">Cross-Entropy</div>
        <div class="shape">(B×T, 100288)</div>
      </div>

    </div>
  </div>

  <!-- Footer stats -->
  <div class="footer">
    <div class="stat">Token Embed <b>51,347,456</b></div>
    <div class="stat">Pos Embed <b>131,072</b></div>
    <div class="stat">Attn ×12 <b>12,589,056</b></div>
    <div class="stat">MLP ×12 <b>25,196,544</b></div>
    <div class="stat">LN ×25 <b>25,600</b></div>
    <div class="stat">LM Head <b>51,447,744</b></div>
    <div class="total">Total <b>140,737,472</b></div>
  </div>

  <!-- 左下角 B/T 说明 -->
  <div class="legend">
    <code>B</code> = Batch Size（批大小，当前配置为 16）&emsp;
    <code>T</code> = Sequence Length（序列长度，最大 context_length = 256）<br>
    图中参数均为可学习参数；Q/K/V 投影无 bias，其余 Linear / Embedding 含 bias
  </div>

  <!-- 右下角参数量计算公式 -->
  <div class="formulas">
    <div class="title">Param Count Formulas</div>
    Token Embed: <code>100288 × 512 = 51,347,456</code><br>
    Pos Embed: <code>256 × 512 = 131,072</code><br>
    Attn / block: <code>8×(3×512×64) + (512²+512) = 1,049,088</code><br>
    Attn ×12: <code>1,049,088 × 12 = 12,589,056</code><br>
    MLP / block: <code>(512×2048+2048) + (2048×512+512) = 2,099,712</code><br>
    MLP ×12: <code>2,099,712 × 12 = 25,196,544</code><br>
    LayerNorm ×25: <code>(512+512) × 25 = 25,600</code><br>
    LM Head: <code>512×100288 + 100288 = 51,447,744</code><br>
    <b style="color:#64748b;">Total = 140,737,472 ≈ 140.74M</b>
  </div>

  <script>
    let scale = 1;
    const steps = [0.5, 0.6, 0.7, 0.8, 0.9, 1, 1.1, 1.2, 1.4, 1.6, 1.8, 2];
    let idx = steps.indexOf(1); // start at 100%
    function zoom(dir) {
      if (dir === 0) { idx = steps.indexOf(1); }
      else { idx = Math.max(0, Math.min(steps.length - 1, idx + dir)); }
      scale = steps[idx];
      document.querySelector('.canvas').style.transform = 'scale(' + scale + ')';
      document.getElementById('zoomLabel').textContent = Math.round(scale * 100) + '%';
    }
  </script>
</body>
</html>