| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 949" width="1200" height="949" font-size="14"> |
| <style> |
| :root { |
| --bg: #ffffff; --fg: #1b1f24; --muted: #6b7280; --panel: #f6f8fa; --grid: #e5e7eb; |
| --embed: #dbeafe; --embed-s: #3b82f6; |
| --attn: #cffafe; --attn-s: #06b6d4; |
| --mamba: #dcfce7; --mamba-s: #22c55e; |
| --linattn: #fce7f3; --linattn-s: #ec4899; |
| --recur: #ede9fe; --recur-s: #8b5cf6; |
| --moe: #ffedd5; --moe-s: #f97316; |
| --mlp: #ede9fe; --mlp-s: #8b5cf6; |
| --norm: #e5e7eb; --norm-s: #9ca3af; |
| --head: #fee2e2; --head-s: #ef4444; |
| --config: #f1f5f9; --config-s: #64748b; |
| --rope: #fef9c3; --rope-s: #eab308; |
| --layer: #f8fafc; --layer-s: #cbd5e1; |
| --io: #f1f5f9; --io-s: #94a3b8; |
| --soft: #fae8ff; --soft-s: #c026d3; |
| --add: #ffffff; --add-s: #475569; |
| --block-s: #94a3b8; |
| --residual: #f59e0b; |
| --added: #16a34a; --over: #d97706; --deleted: #dc2626; |
| --lt-full: #06b6d4; --lt-sliding: #3b82f6; --lt-chunked: #8b5cf6; |
| --lt-compressed: #f97316; --lt-heavy: #dc2626; --lt-linear: #ec4899; --lt-mamba: #22c55e; |
| --cell-on: #0ea5e9; --cell-off: #e5e7eb; |
| --vision: #dcfce7; --vision-s: #16a34a; --audio: #fae8ff; --audio-s: #c026d3; |
| --proj: #fef3c7; --proj-s: #d97706; --xattn: #db2777; |
| --conv: #d1fae5; --conv-s: #10b981; --act: #ecfccb; --act-s: #65a30d; |
| --pool: #e0f2fe; --pool-s: #0284c7; --quant: #fae8ff; --quant-s: #c026d3; |
| } |
| @media (prefers-color-scheme: dark) { |
| :root { |
| --bg: #0d1117; --fg: #e6edf3; --muted: #8b949e; --panel: #161b22; --grid: #30363d; |
| --embed: #172554; --attn: #083344; --mamba: #052e16; --linattn: #500724; |
| --recur: #2e1065; --moe: #431407; --mlp: #2e1065; --norm: #21262d; --head: #450a0a; |
| --config: #1e293b; --rope: #422006; --layer: #161b22; |
| --conv: #022c22; --act: #1a2e05; --pool: #082f49; --quant: #3b0764; --proj: #422006; |
| --io: #1e293b; --soft: #3b0764; --add: #0d1117; --cell-off: #21262d; |
| } |
| } |
| .bg { fill: var(--bg); } |
| text { font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif; fill: var(--fg); } |
| .title { font-size: 22px; font-weight: 700; } |
| .subtitle { font-size: 13px; fill: var(--muted); } |
| .box-label { font-size: 14px; font-weight: 600; } |
| .box-label.sm { font-size: 12.5px; } |
| .box-sub { font-size: 11px; fill: var(--muted); } |
| .glyph { font-size: 18px; font-weight: 700; fill: var(--add-s); } |
| .badge { font-size: 12px; font-weight: 700; fill: var(--fg); } |
| .facts-k { font-size: 11.5px; fill: var(--muted); } |
| .facts-v { font-size: 11.5px; font-weight: 600; } |
| .legend-t { font-size: 11.5px; fill: var(--fg); } |
| .panel { fill: var(--panel); stroke: var(--grid); } |
| rect.b { rx: 9; stroke-width: 1.6; } |
| .c-embed { fill: var(--embed); stroke: var(--embed-s); } |
| .c-attn { fill: var(--attn); stroke: var(--attn-s); } |
| .c-mamba { fill: var(--mamba); stroke: var(--mamba-s); } |
| .c-linattn { fill: var(--linattn); stroke: var(--linattn-s); } |
| .c-recur { fill: var(--recur); stroke: var(--recur-s); } |
| .c-moe { fill: var(--moe); stroke: var(--moe-s); } |
| .c-mlp { fill: var(--mlp); stroke: var(--mlp-s); } |
| .c-norm { fill: var(--norm); stroke: var(--norm-s); } |
| .c-head { fill: var(--head); stroke: var(--head-s); } |
| .c-config{ fill: var(--config);stroke: var(--config-s); } |
| .c-rope { fill: var(--rope); stroke: var(--rope-s); } |
| .c-proj { fill: var(--proj); stroke: var(--proj-s); } |
| .c-conv { fill: var(--conv); stroke: var(--conv-s); } |
| .c-act { fill: var(--act); stroke: var(--act-s); } |
| .c-pool { fill: var(--pool); stroke: var(--pool-s); } |
| .c-quant { fill: var(--quant); stroke: var(--quant-s); } |
| .c-layer { fill: var(--layer); stroke: var(--layer-s); } |
| .c-io { fill: var(--io); stroke: var(--io-s); } |
| .c-soft { fill: var(--soft); stroke: var(--soft-s); } |
| .c-add { fill: var(--add); stroke: var(--add-s); } |
| .c-block { fill: none; stroke: var(--block-s); stroke-width: 1.6; stroke-dasharray: 7 5; } |
| .c-lt-full { fill: var(--lt-full); stroke: var(--lt-full); } |
| .c-lt-sliding { fill: var(--lt-sliding); stroke: var(--lt-sliding); } |
| .c-lt-chunked { fill: var(--lt-chunked); stroke: var(--lt-chunked); } |
| .c-lt-compressed { fill: var(--lt-compressed); stroke: var(--lt-compressed); } |
| .c-lt-heavy { fill: var(--lt-heavy); stroke: var(--lt-heavy); } |
| .c-lt-linear { fill: var(--lt-linear); stroke: var(--lt-linear); } |
| .c-lt-mamba { fill: var(--lt-mamba); stroke: var(--lt-mamba); } |
| .cell-on { fill: var(--cell-on); } |
| .cell-off { fill: var(--cell-off); } |
| .grid-frame { fill: none; stroke: var(--grid); stroke-width: 1; } |
| .mask-bg { fill: var(--cell-off); } |
| .mask-on { fill: #22c55e; } |
| .mask-div { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 3 2; } |
| .c-vision { fill: var(--vision); stroke: var(--vision-s); } |
| .c-audio { fill: var(--audio); stroke: var(--audio-s); } |
| .c-proj { fill: var(--proj); stroke: var(--proj-s); } |
| .c-sub { fill: var(--bg); stroke: var(--block-s); stroke-width: 1.2; } |
| .sec-h { font-size: 12px; font-weight: 700; } |
| .sec-hbar { fill: var(--bg); opacity: 0.82; } |
| .residual.xattn { stroke: var(--xattn); stroke-width: 2.4; } |
| .ghost { opacity: 0.32; stroke-dasharray: 4 3; } |
| .ch-added rect.b, rect.b.ch-added { stroke: var(--added); stroke-width: 3.2; } |
| .ch-over rect.b, rect.b.ch-over { stroke: var(--over); stroke-width: 3.2; } |
| .ch-deleted rect.b, rect.b.ch-deleted { stroke: var(--deleted); stroke-width: 3.2; } |
| .edge { stroke: var(--grid); stroke-width: 2; } |
| .flow { stroke: var(--grid); stroke-width: 2; fill: none; } |
| .residual { stroke: var(--residual); stroke-width: 2; fill: none; } |
| .rope { stroke: var(--rope-s); stroke-width: 2.2; fill: none; } |
| .xattn { stroke: var(--xattn); stroke-width: 2.4; fill: none; } |
| .cell-idx { font-size: 9px; fill: #ffffff; font-weight: 600; } |
| .sky { fill: #bae6fd; } .sun { fill: #fde047; } .hill { fill: #4ade80; } |
| </style> |
| <defs><marker id="ah-flow" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="var(--grid)"/></marker><marker id="ah-residual" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="var(--residual)"/></marker><marker id="ah-rope" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="var(--rope-s)"/></marker><marker id="ah-xattn" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse"><path d="M0,0 L10,5 L0,10 z" fill="var(--xattn)"/></marker></defs> |
| <rect class="bg" x="0" y="0" width="1200" height="949"/> |
| <text class="title" x="24" y="34">bert</text> |
| <text class="subtitle" x="24" y="54">BertModel · forward data flow (shapes from a dummy input pass)</text> |
| <g class=""><rect class="b c-sub " x="300" y="311" width="580" height="465" rx="11"/><rect class="sec-hbar" x="305" y="315" width="570" height="18" rx="5"/><text class="sec-h" x="312" y="328">encoder · Encoder → [1×8×768]</text></g> |
| <g class=""><rect class="b c-sub " x="310" y="339" width="560" height="424" rx="11"/><rect class="sec-hbar" x="315" y="343" width="550" height="18" rx="5"/><text class="sec-h" x="322" y="356">layer · 12× BertLayer</text></g> |
| <g class=""><rect class="b c-sub " x="318" y="364" width="544" height="223" rx="11"/><rect class="sec-hbar" x="323" y="368" width="534" height="18" rx="5"/><text class="sec-h" x="330" y="381">attention · BertAttention</text></g> |
| <g class=""><rect class="b c-embed " x="300" y="166" width="580" height="121" rx="11"/><rect class="sec-hbar" x="305" y="170" width="570" height="18" rx="5"/><text class="sec-h" x="312" y="183">embeddings · Embeddings → [1×8×768]</text></g> |
| <g class=""><rect class="b c-sub " x="318" y="661" width="544" height="89" rx="11"/><rect class="sec-hbar" x="323" y="665" width="534" height="18" rx="5"/><text class="sec-h" x="330" y="678">output · BertOutput</text></g> |
| <g class=""><rect class="b c-sub " x="326" y="389" width="528" height="89" rx="11"/><rect class="sec-hbar" x="331" y="393" width="518" height="18" rx="5"/><text class="sec-h" x="338" y="406">self · BertSelfAttention</text></g> |
| <g class=""><rect class="b c-sub " x="326" y="485" width="528" height="89" rx="11"/><rect class="sec-hbar" x="331" y="489" width="518" height="18" rx="5"/><text class="sec-h" x="338" y="502">output · BertSelfOutput</text></g> |
| <g class=""><rect class="b c-pool " x="300" y="800" width="580" height="63" rx="11"/><rect class="sec-hbar" x="305" y="804" width="570" height="18" rx="5"/><text class="sec-h" x="312" y="817">pooler · Pooler → [1×768]</text></g> |
| <g class=""><rect class="b c-sub " x="318" y="594" width="544" height="60" rx="11"/><rect class="sec-hbar" x="323" y="598" width="534" height="18" rx="5"/><text class="sec-h" x="330" y="611">intermediate · BertIntermediate</text></g> |
| <polyline class="flow" points="590.0,142 590.0,166" marker-end="url(#ah-flow)"/> |
| <polyline class="flow" points="590.0,287 590.0,311" marker-end="url(#ah-flow)"/> |
| <polyline class="flow" points="590.0,776 590.0,800" marker-end="url(#ah-flow)"/> |
| <polyline class="flow" points="590.0,863 590.0,887" marker-end="url(#ah-flow)"/> |
| <g class=""><rect class="b c-io" x="300" y="108" width="580" height="34" rx="17"/><text class="box-label sm" x="590.0" y="129.5" text-anchor="middle">input_ids [1, 8]</text></g> |
| <g class=""><title>word_embeddings: Embedding [30522×768]</title><rect class="b c-embed" x="310" y="194" width="276" height="22" rx="9"/><text class="box-label sm" x="448.0" y="209.5" text-anchor="middle">word_embeddings Embedding [30522×768]</text></g> |
| <g class=""><title>position_embeddings: Embedding [512×768]</title><rect class="b c-embed" x="593" y="194" width="276" height="22" rx="9"/><text class="box-label sm" x="731.0" y="209.5" text-anchor="middle">position_embeddings Embedding [512×768]</text></g> |
| <g class=""><title>token_type_embeddings: Embedding [2×768]</title><rect class="b c-embed" x="310" y="223" width="276" height="22" rx="9"/><text class="box-label sm" x="448.0" y="238.5" text-anchor="middle">token_type_embeddings Embedding [2×768]</text></g> |
| <g class=""><title>LayerNorm: LayerNorm 768</title><rect class="b c-norm" x="593" y="223" width="276" height="22" rx="9"/><text class="box-label sm" x="731.0" y="238.5" text-anchor="middle">LayerNorm LayerNorm 768</text></g> |
| <g class=""><title>dropout: Dropout</title><rect class="b c-sub" x="310" y="252" width="560" height="22" rx="9"/><text class="box-label sm" x="590.0" y="267.5" text-anchor="middle">dropout Dropout</text></g> |
| <g class=""><title>query: Linear [768→768]</title><rect class="b c-proj" x="334" y="414" width="166" height="22" rx="9"/><text class="box-label sm" x="417.0" y="429.5" text-anchor="middle">query [768→768]</text></g> |
| <g class=""><title>key: Linear [768→768]</title><rect class="b c-proj" x="507" y="414" width="166" height="22" rx="9"/><text class="box-label sm" x="590.0" y="429.5" text-anchor="middle">key [768→768]</text></g> |
| <g class=""><title>value: Linear [768→768]</title><rect class="b c-proj" x="680" y="414" width="166" height="22" rx="9"/><text class="box-label sm" x="763.0" y="429.5" text-anchor="middle">value [768→768]</text></g> |
| <g class=""><title>dropout: Dropout</title><rect class="b c-sub" x="334" y="443" width="512" height="22" rx="9"/><text class="box-label sm" x="590.0" y="458.5" text-anchor="middle">dropout Dropout</text></g> |
| <g class=""><title>dense: Linear [768→768]</title><rect class="b c-proj" x="334" y="510" width="252" height="22" rx="9"/><text class="box-label sm" x="460.0" y="525.5" text-anchor="middle">dense [768→768]</text></g> |
| <g class=""><title>LayerNorm: LayerNorm 768</title><rect class="b c-norm" x="593" y="510" width="252" height="22" rx="9"/><text class="box-label sm" x="719.0" y="525.5" text-anchor="middle">LayerNorm LayerNorm 768</text></g> |
| <g class=""><title>dropout: Dropout</title><rect class="b c-sub" x="334" y="539" width="512" height="22" rx="9"/><text class="box-label sm" x="590.0" y="554.5" text-anchor="middle">dropout Dropout</text></g> |
| <g class=""><title>dense: Linear [768→3072]</title><rect class="b c-proj" x="326" y="619" width="260" height="22" rx="9"/><text class="box-label sm" x="456.0" y="634.5" text-anchor="middle">dense [768→3072]</text></g> |
| <g class=""><title>intermediate_act_fn: GELUActivation</title><rect class="b c-act" x="593" y="619" width="260" height="22" rx="9"/><text class="box-label sm" x="723.0" y="634.5" text-anchor="middle">intermediate_act_fn GELU</text></g> |
| <g class=""><title>dense: Linear [3072→768]</title><rect class="b c-proj" x="326" y="686" width="260" height="22" rx="9"/><text class="box-label sm" x="456.0" y="701.5" text-anchor="middle">dense [3072→768]</text></g> |
| <g class=""><title>LayerNorm: LayerNorm 768</title><rect class="b c-norm" x="593" y="686" width="260" height="22" rx="9"/><text class="box-label sm" x="723.0" y="701.5" text-anchor="middle">LayerNorm LayerNorm 768</text></g> |
| <g class=""><title>dropout: Dropout</title><rect class="b c-sub" x="326" y="715" width="528" height="22" rx="9"/><text class="box-label sm" x="590.0" y="730.5" text-anchor="middle">dropout Dropout</text></g> |
| <g class=""><title>dense: Linear [768→768]</title><rect class="b c-proj" x="310" y="828" width="276" height="22" rx="9"/><text class="box-label sm" x="448.0" y="843.5" text-anchor="middle">dense [768→768]</text></g> |
| <g class=""><title>activation: Tanh</title><rect class="b c-act" x="593" y="828" width="276" height="22" rx="9"/><text class="box-label sm" x="731.0" y="843.5" text-anchor="middle">activation Tanh</text></g> |
| <g class=""><rect class="b c-io" x="300" y="887" width="580" height="34" rx="17"/><text class="box-label sm" x="590.0" y="908.5" text-anchor="middle">output [1×8×768]</text></g> |
| <rect class="panel" x="912" y="88" width="264" height="328" rx="8"/> |
| <text class="facts-k" x="926" y="112">model id</text> |
| <text class="facts-v" x="1162" y="112" text-anchor="end">google-bert/bert-base-uncased</text> |
| <text class="facts-k" x="926" y="134">model_type</text> |
| <text class="facts-v" x="1162" y="134" text-anchor="end">bert</text> |
| <text class="facts-k" x="926" y="156">config</text> |
| <text class="facts-v" x="1162" y="156" text-anchor="end">BertConfig</text> |
| <text class="facts-k" x="926" y="178">decoder</text> |
| <text class="facts-v" x="1162" y="178" text-anchor="end">dense</text> |
| <text class="facts-k" x="926" y="200">layers</text> |
| <text class="facts-v" x="1162" y="200" text-anchor="end">12</text> |
| <text class="facts-k" x="926" y="222">hidden</text> |
| <text class="facts-v" x="1162" y="222" text-anchor="end">768</text> |
| <text class="facts-k" x="926" y="244">intermediate</text> |
| <text class="facts-v" x="1162" y="244" text-anchor="end">3,072</text> |
| <text class="facts-k" x="926" y="266">heads / kv</text> |
| <text class="facts-v" x="1162" y="266" text-anchor="end">12 / 12</text> |
| <text class="facts-k" x="926" y="288">attention</text> |
| <text class="facts-v" x="1162" y="288" text-anchor="end">MHA</text> |
| <text class="facts-k" x="926" y="310">norm</text> |
| <text class="facts-v" x="1162" y="310" text-anchor="end">LayerNorm</text> |
| <text class="facts-k" x="926" y="332">positional</text> |
| <text class="facts-v" x="1162" y="332" text-anchor="end">n/a</text> |
| <text class="facts-k" x="926" y="354">vocab</text> |
| <text class="facts-v" x="1162" y="354" text-anchor="end">30,522</text> |
| <text class="facts-k" x="926" y="376">max_pos</text> |
| <text class="facts-v" x="1162" y="376" text-anchor="end">512</text> |
| <text class="facts-k" x="926" y="398">tie_embeddings</text> |
| <text class="facts-v" x="1162" y="398" text-anchor="end">True</text> |
| <text class="legend-t" x="914" y="436" font-weight="700">legend</text> |
| <rect x="916" y="447" width="16" height="12" rx="2" fill="var(--embed-s)"/> |
| <text class="legend-t" x="940" y="457">embedding</text> |
| <rect x="916" y="465" width="16" height="12" rx="2" fill="var(--attn-s)"/> |
| <text class="legend-t" x="940" y="475">attention</text> |
| <rect x="916" y="483" width="16" height="12" rx="2" fill="var(--mamba-s)"/> |
| <text class="legend-t" x="940" y="493">Mamba / SSM</text> |
| <rect x="916" y="501" width="16" height="12" rx="2" fill="var(--moe-s)"/> |
| <text class="legend-t" x="940" y="511">MoE / experts</text> |
| <rect x="916" y="519" width="16" height="12" rx="2" fill="var(--proj-s)"/> |
| <text class="legend-t" x="940" y="529">linear / proj</text> |
| <rect x="916" y="537" width="16" height="12" rx="2" fill="var(--grid)"/> |
| <text class="legend-t" x="940" y="547">convolution</text> |
| <rect x="916" y="555" width="16" height="12" rx="2" fill="var(--norm-s)"/> |
| <text class="legend-t" x="940" y="565">normalization</text> |
| <rect x="916" y="573" width="16" height="12" rx="2" fill="var(--grid)"/> |
| <text class="legend-t" x="940" y="583">activation</text> |
| <rect x="916" y="591" width="16" height="12" rx="2" fill="var(--grid)"/> |
| <text class="legend-t" x="940" y="601">pooling</text> |
| <rect x="916" y="609" width="16" height="12" rx="2" fill="var(--head-s)"/> |
| <text class="legend-t" x="940" y="619">head</text> |
| </svg> |
