| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1105" width="1500" height="1105" 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="1500" height="1105"/> |
| <text class="title" x="24" y="34">align</text> |
| <text class="subtitle" x="24" y="54">multimodal · vision → projector → LLM · dense</text> |
| <line class="edge" x1="161" y1="120" x2="161" y2="851"/> |
| <g class=""><rect class="c-block" x="586" y="184" width="398" height="673" rx="14"/><text class="box-sub" x="598" y="202">AlignModel · base model</text></g> |
| <g class=""><title>12 × AlignTextLayer</title><rect class="c-block" x="594" y="257" width="382" height="560" rx="14"/><text class="box-sub" x="606" y="275">AlignTextLayer</text><text class="badge" x="964" y="277" text-anchor="end">× 12</text></g> |
| <g class=""><rect class="c-block" x="32" y="883" width="258" height="16" rx="14"/><text class="box-sub" x="44" y="901">image ⊕ text attention</text></g> |
| <g class=""><rect class="b c-attn " x="620" y="321" width="330" height="448" rx="11"/><rect class="sec-hbar" x="625" y="325" width="320" height="18" rx="5"/><text class="sec-h" x="632" y="338">Self-Attention · AlignTextAttention</text></g> |
| <g class=""><rect class="b c-vision " x="36" y="252" width="250" height="531" rx="11"/><rect class="sec-hbar" x="41" y="256" width="240" height="18" rx="5"/><text class="sec-h" x="48" y="269">Vision encoder · AlignVisionMod…</text><text class="badge" x="274" y="269" text-anchor="end">×64</text></g> |
| <g class=""><rect class="b c-vision " x="46" y="278" width="230" height="499" rx="11"/><rect class="sec-hbar" x="51" y="282" width="220" height="18" rx="5"/><text class="sec-h" x="58" y="295">AlignVisionBlock</text><text class="badge" x="264" y="295" text-anchor="end">×55</text></g> |
| <g class=""><rect class="b c-sub " x="630" y="446" width="310" height="121" rx="11"/><rect class="sec-hbar" x="635" y="450" width="300" height="18" rx="5"/><text class="sec-h" x="642" y="463">output · AlignTextSelfOutput</text></g> |
| <g class=""><rect class="b c-sub " x="54" y="473" width="214" height="171" rx="11"/><rect class="sec-hbar" x="59" y="477" width="204" height="18" rx="5"/><text class="sec-h" x="66" y="490">squeeze_excite · AlignVisionSqu…</text></g> |
| <g class=""><rect class="b c-sub " x="54" y="300" width="214" height="167" rx="11"/><rect class="sec-hbar" x="59" y="304" width="204" height="18" rx="5"/><text class="sec-h" x="66" y="317">depthwise_conv · AlignVisionDept…</text></g> |
| <g class=""><rect class="b c-sub " x="630" y="347" width="310" height="91" rx="11"/><rect class="sec-hbar" x="635" y="351" width="300" height="18" rx="5"/><text class="sec-h" x="642" y="364">self · AlignTextSelfAttention</text></g> |
| <g class=""><rect class="b c-proj " x="54" y="650" width="214" height="115" rx="11"/><rect class="sec-hbar" x="59" y="654" width="204" height="18" rx="5"/><text class="sec-h" x="66" y="667">projection · AlignVisionFinalBloc…</text></g> |
| <polyline class="residual" points="620,279 586,279 586,796 620,796" stroke-dasharray="6 4" marker-end="url(#ah-residual)"/> |
| <polyline class="flow" points="161,184 161,206" marker-end="url(#ah-flow)"/> |
| <polyline class="flow" points="161,236 161,252" marker-end="url(#ah-flow)"/> |
| <polyline class="flow" points="161,783 161,799" marker-end="url(#ah-flow)"/> |
| <polyline class="flow" points="286,825 453,825 453,220 620,220" marker-end="url(#ah-flow)"/> |
| <g class=""><rect class="b c-io" x="620" y="108" width="330" height="32" rx="16"/><text class="box-label sm" x="785.0" y="122.0" text-anchor="middle">input_ids</text><text class="box-sub" x="785.0" y="137.0" text-anchor="middle">tokenize("Hey, how are you?") → [1, 6]</text></g> |
| <g class=""><title>token 0: 'hey'</title><rect class="b c-sub" x="620" y="154" width="50" height="26" rx="9"/><text class="box-label sm" x="645.0" y="165.0" text-anchor="middle">hey</text><text class="box-sub" x="645.0" y="180.0" text-anchor="middle">0</text></g> |
| <g class=""><title>token 1: ','</title><rect class="b c-sub" x="675" y="154" width="50" height="26" rx="9"/><text class="box-label sm" x="700.0" y="165.0" text-anchor="middle">,</text><text class="box-sub" x="700.0" y="180.0" text-anchor="middle">1</text></g> |
| <g class=""><title>token 2: 'how'</title><rect class="b c-sub" x="731" y="154" width="50" height="26" rx="9"/><text class="box-label sm" x="756.0" y="165.0" text-anchor="middle">how</text><text class="box-sub" x="756.0" y="180.0" text-anchor="middle">2</text></g> |
| <g class=""><title>token 3: 'are'</title><rect class="b c-sub" x="787" y="154" width="50" height="26" rx="9"/><text class="box-label sm" x="812.0" y="165.0" text-anchor="middle">are</text><text class="box-sub" x="812.0" y="180.0" text-anchor="middle">3</text></g> |
| <g class=""><title>token 4: 'you'</title><rect class="b c-sub" x="843" y="154" width="50" height="26" rx="9"/><text class="box-label sm" x="868.0" y="165.0" text-anchor="middle">you</text><text class="box-sub" x="868.0" y="180.0" text-anchor="middle">4</text></g> |
| <g class=""><title>token 5: '?'</title><rect class="b c-sub" x="899" y="154" width="50" height="26" rx="9"/><text class="box-label sm" x="924.0" y="165.0" text-anchor="middle">?</text><text class="box-sub" x="924.0" y="180.0" text-anchor="middle">5</text></g> |
| <g class=""><rect class="b c-embed" x="620" y="198" width="330" height="45" rx="9"/><text class="box-label sm" x="785.0" y="218.5" text-anchor="middle">Token Embedding</text><text class="box-sub" x="785.0" y="233.5" text-anchor="middle">weight [30522 × 768] → [1, 6, 768]</text></g> |
| <g class=""><rect class="b c-norm" x="620" y="279" width="330" height="28" rx="9"/><text class="box-label sm" x="785.0" y="291.0" text-anchor="middle">Norm</text><text class="box-sub" x="785.0" y="306.0" text-anchor="middle">pre-attention [1, 6, 768]</text></g> |
| <g class=""><title>query: Linear [768→768]</title><rect class="b c-proj" x="638" y="372" width="143" height="22" rx="9"/><text class="box-label sm" x="709.5" y="387.5" text-anchor="middle">query [768→768]</text></g> |
| <g class=""><title>key: Linear [768→768]</title><rect class="b c-proj" x="789" y="372" width="143" height="22" rx="9"/><text class="box-label sm" x="860.5" y="387.5" text-anchor="middle">key [768→768]</text></g> |
| <g class=""><title>value: Linear [768→768]</title><rect class="b c-proj" x="638" y="402" width="143" height="22" rx="9"/><text class="box-label sm" x="709.5" y="417.5" text-anchor="middle">value [768→768]</text></g> |
| <g class=""><title>dropout: Dropout</title><rect class="b c-sub" x="789" y="402" width="143" height="22" rx="9"/><text class="box-label sm" x="860.5" y="417.5" text-anchor="middle">dropout Dropout</text></g> |
| <g class=""><title>dense: Linear [768→768]</title><rect class="b c-proj" x="638" y="471" width="294" height="22" rx="9"/><text class="box-label sm" x="785.0" y="486.5" text-anchor="middle">dense [768→768]</text></g> |
| <g class=""><title>LayerNorm: LayerNorm 768</title><rect class="b c-norm" x="638" y="501" width="294" height="22" rx="9"/><text class="box-label sm" x="785.0" y="516.5" text-anchor="middle">LayerNorm LayerNorm 768</text></g> |
| <g class=""><title>dropout: Dropout</title><rect class="b c-sub" x="638" y="531" width="294" height="22" rx="9"/><text class="box-label sm" x="785.0" y="546.5" text-anchor="middle">dropout Dropout</text></g> |
| <g class=""><rect class="b c-sub" x="630" y="575" width="310" height="30" rx="9"/><text class="box-label sm" x="785.0" y="588.0" text-anchor="middle">scaled dot-product attention</text><text class="box-sub" x="785.0" y="603.0" text-anchor="middle">12 heads · head_dim 64</text></g> |
| <g class=""><title>causal attention mask (q↓ × k→)</title><text class="box-sub" x="715" y="617">causal mask</text><rect class="mask-bg" x="715" y="623" width="140.0" height="140.0"/><rect class="mask-on" x="715.0" y="623.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="633.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="633.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="643.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="643.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="643.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="653.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="653.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="653.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="653.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="663.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="663.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="663.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="663.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="663.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="673.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="673.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="673.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="673.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="673.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="673.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="683.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="683.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="683.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="683.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="683.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="683.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="683.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="785.0" y="693.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="785.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="795.0" y="703.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="785.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="795.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="805.0" y="713.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="785.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="795.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="805.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="815.0" y="723.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="785.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="795.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="805.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="815.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="825.0" y="733.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="785.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="795.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="805.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="815.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="825.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="835.0" y="743.0" width="10.0" height="10.0"/><rect class="mask-on" x="715.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="725.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="735.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="745.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="755.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="765.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="775.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="785.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="795.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="805.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="815.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="825.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="835.0" y="753.0" width="10.0" height="10.0"/><rect class="mask-on" x="845.0" y="753.0" width="10.0" height="10.0"/><rect class="grid-frame" x="715" y="623" width="140.0" height="140.0"/></g> |
| <g class=""><title>residual add</title><circle class="b c-add " cx="785.0" cy="796" r="13"/><text class="glyph" x="785.0" y="802" text-anchor="middle">+</text></g> |
| <g class=""><rect class="b c-norm" x="620" y="823" width="330" height="28" rx="9"/><text class="box-label sm" x="785.0" y="835.0" text-anchor="middle">Final LayerNorm</text><text class="box-sub" x="785.0" y="850.0" text-anchor="middle">[1, 6, 768]</text></g> |
| <g class=""><rect class="b c-head" x="620" y="865" width="330" height="42" rx="9"/><text class="box-label sm" x="785.0" y="884.0" text-anchor="middle">LM Head</text><text class="box-sub" x="785.0" y="899.0" text-anchor="middle">Linear [768→30522]</text></g> |
| <g class=""><rect class="b c-soft" x="620" y="921" width="330" height="26" rx="9"/><text class="box-label sm" x="785.0" y="938.5" text-anchor="middle">Softmax</text></g> |
| <g class=""><rect class="b c-io" x="620" y="961" width="330" height="30" rx="15"/><text class="box-label sm" x="785.0" y="974.0" text-anchor="middle">logits</text><text class="box-sub" x="785.0" y="989.0" text-anchor="middle">[1, 6, 30522]</text></g> |
| <g class=""><rect class="b c-vision" x="123" y="120" width="76" height="64" rx="6"/><clipPath id="ic123120"><rect x="129" y="126" width="64" height="52" rx="3"/></clipPath><g clip-path="url(#ic123120)"><rect class="sky" x="129" y="126" width="64" height="52"/><circle class="sun" cx="175" cy="143" r="8"/><path class="hill" d="M129,178 L151,152 L167,178 Z"/><path class="hill" d="M158,178 L177,155 L193,178 Z"/></g><rect class="grid-frame" x="129" y="126" width="64" height="52" rx="3"/><text class="box-sub" x="161.0" y="196" text-anchor="middle">example image</text></g> |
| <g class=""><rect class="b c-io" x="36" y="206" width="250" height="30" rx="15"/><text class="box-label sm" x="161.0" y="219.0" text-anchor="middle">pixel_values</text><text class="box-sub" x="161.0" y="234.0" text-anchor="middle">[1, 3, 336, 336]</text></g> |
| <g class=""><title>depthwise_conv_pad: ZeroPad2d</title><rect class="b c-sub" x="62" y="325" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="340.5" text-anchor="middle">depthwise_conv_pad ZeroPad…</text></g> |
| <g class=""><title>depthwise_conv: AlignVisionDepthwiseConv2d</title><rect class="b c-conv" x="62" y="353" width="198" height="34" rx="9"/><text class="box-label sm" x="161.0" y="368.0" text-anchor="middle">depthwise_conv</text><text class="box-sub" x="161.0" y="383.0" text-anchor="middle">VisionDepthwiseConv2d</text></g> |
| <g class=""><title>depthwise_norm: BatchNorm2d 64</title><rect class="b c-norm" x="62" y="393" width="198" height="34" rx="9"/><text class="box-label sm" x="161.0" y="408.0" text-anchor="middle">depthwise_norm</text><text class="box-sub" x="161.0" y="423.0" text-anchor="middle">BatchNorm2d 64</text></g> |
| <g class=""><title>depthwise_act: SiLU</title><rect class="b c-act" x="62" y="433" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="448.5" text-anchor="middle">depthwise_act SiLU</text></g> |
| <g class=""><title>squeeze: AdaptiveAvgPool2d</title><rect class="b c-pool" x="62" y="498" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="513.5" text-anchor="middle">squeeze AdaptiveAvgPool2d</text></g> |
| <g class=""><title>reduce: Conv2d</title><rect class="b c-conv" x="62" y="526" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="541.5" text-anchor="middle">reduce Conv2d</text></g> |
| <g class=""><title>expand: Conv2d</title><rect class="b c-conv" x="62" y="554" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="569.5" text-anchor="middle">expand Conv2d</text></g> |
| <g class=""><title>act_reduce: SiLU</title><rect class="b c-act" x="62" y="582" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="597.5" text-anchor="middle">act_reduce SiLU</text></g> |
| <g class=""><title>act_expand: Sigmoid</title><rect class="b c-act" x="62" y="610" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="625.5" text-anchor="middle">act_expand Sigmoid</text></g> |
| <g class=""><title>project_conv: Conv2d</title><rect class="b c-conv" x="62" y="675" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="690.5" text-anchor="middle">project_conv Conv2d</text></g> |
| <g class=""><title>project_bn: BatchNorm2d 32</title><rect class="b c-norm" x="62" y="703" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="718.5" text-anchor="middle">project_bn BatchNorm2d 32</text></g> |
| <g class=""><title>dropout: Dropout</title><rect class="b c-sub" x="62" y="731" width="198" height="22" rx="9"/><text class="box-label sm" x="161.0" y="746.5" text-anchor="middle">dropout Dropout</text></g> |
| <g class=""><rect class="b c-proj" x="36" y="799" width="250" height="52" rx="9"/><text class="box-label sm" x="161.0" y="823.0" text-anchor="middle">Projector · Linear</text><text class="box-sub" x="161.0" y="838.0" text-anchor="middle">align features → text hidden dim</text></g> |
| <g class=""><rect class="b c-proj" x="375" y="190" width="168" height="18" rx="9"/><text class="box-label sm" x="459.0" y="203.5" text-anchor="middle">merge at modality tokens</text></g> |
| <g class=""><title>image↓text query × image|text key</title><text class="box-sub" x="83" y="899">5 img + 7 text · prefix-LM: i…</text><rect class="mask-bg" x="83" y="905" width="156.0" height="156.0"/><rect class="mask-on" x="83.0" y="905.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="905.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="905.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="905.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="905.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="918.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="918.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="918.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="918.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="918.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="931.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="931.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="931.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="931.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="931.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="944.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="944.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="944.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="944.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="944.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="957.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="957.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="957.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="957.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="957.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="970.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="970.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="970.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="970.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="970.0" width="13.0" height="13.0"/><rect class="mask-on" x="148.0" y="970.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="983.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="983.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="983.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="983.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="983.0" width="13.0" height="13.0"/><rect class="mask-on" x="148.0" y="983.0" width="13.0" height="13.0"/><rect class="mask-on" x="161.0" y="983.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="148.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="161.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="174.0" y="996.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="148.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="161.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="174.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="187.0" y="1009.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="148.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="161.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="174.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="187.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="200.0" y="1022.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="148.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="161.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="174.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="187.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="200.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="213.0" y="1035.0" width="13.0" height="13.0"/><rect class="mask-on" x="83.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="96.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="109.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="122.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="135.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="148.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="161.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="174.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="187.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="200.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="213.0" y="1048.0" width="13.0" height="13.0"/><rect class="mask-on" x="226.0" y="1048.0" width="13.0" height="13.0"/><line class="mask-div" x1="148.0" y1="905" x2="148.0" y2="1061.0"/><rect class="grid-frame" x="83" y="905" width="156.0" height="156.0"/></g> |
| <rect class="panel" x="1212" y="88" width="264" height="350" rx="8"/> |
| <text class="facts-k" x="1226" y="112">model id</text> |
| <text class="facts-v" x="1462" y="112" text-anchor="end">kakaobrain/align-base</text> |
| <text class="facts-k" x="1226" y="134">inputs</text> |
| <text class="facts-v" x="1462" y="134" text-anchor="end">input_ids, pixel_values</text> |
| <text class="facts-k" x="1226" y="156">model_type</text> |
| <text class="facts-v" x="1462" y="156" text-anchor="end">align</text> |
| <text class="facts-k" x="1226" y="178">config</text> |
| <text class="facts-v" x="1462" y="178" text-anchor="end">AlignConfig</text> |
| <text class="facts-k" x="1226" y="200">decoder</text> |
| <text class="facts-v" x="1462" y="200" text-anchor="end">dense</text> |
| <text class="facts-k" x="1226" y="222">layers</text> |
| <text class="facts-v" x="1462" y="222" text-anchor="end">12</text> |
| <text class="facts-k" x="1226" y="244">hidden</text> |
| <text class="facts-v" x="1462" y="244" text-anchor="end">768</text> |
| <text class="facts-k" x="1226" y="266">intermediate</text> |
| <text class="facts-v" x="1462" y="266" text-anchor="end">3,072</text> |
| <text class="facts-k" x="1226" y="288">heads / kv</text> |
| <text class="facts-v" x="1462" y="288" text-anchor="end">12 / 12</text> |
| <text class="facts-k" x="1226" y="310">attention</text> |
| <text class="facts-v" x="1462" y="310" text-anchor="end">MHA</text> |
| <text class="facts-k" x="1226" y="332">norm</text> |
| <text class="facts-v" x="1462" y="332" text-anchor="end">LayerNorm</text> |
| <text class="facts-k" x="1226" y="354">positional</text> |
| <text class="facts-v" x="1462" y="354" text-anchor="end">n/a</text> |
| <text class="facts-k" x="1226" y="376">vocab</text> |
| <text class="facts-v" x="1462" y="376" text-anchor="end">30,522</text> |
| <text class="facts-k" x="1226" y="398">max_pos</text> |
| <text class="facts-v" x="1462" y="398" text-anchor="end">512</text> |
| <text class="facts-k" x="1226" y="420">tie_embeddings</text> |
| <text class="facts-v" x="1462" y="420" text-anchor="end">None</text> |
| <text class="legend-t" x="1214" y="458" font-weight="700">legend</text> |
| <rect x="1216" y="469" width="16" height="12" rx="2" fill="var(--vision-s)"/> |
| <text class="legend-t" x="1240" y="479">vision encoder</text> |
| <rect x="1216" y="487" width="16" height="12" rx="2" fill="var(--attn-s)"/> |
| <text class="legend-t" x="1240" y="497">self-attention</text> |
| <rect x="1216" y="505" width="16" height="12" rx="2" fill="var(--proj-s)"/> |
| <text class="legend-t" x="1240" y="515">linear / proj</text> |
| <rect x="1216" y="523" width="16" height="12" rx="2" fill="var(--mlp-s)"/> |
| <text class="legend-t" x="1240" y="533">MLP / feed-forward</text> |
| <rect x="1216" y="541" width="16" height="12" rx="2" fill="var(--rope-s)"/> |
| <text class="legend-t" x="1240" y="551">RoPE</text> |
| <rect x="1216" y="559" width="16" height="12" rx="2" fill="var(--norm-s)"/> |
| <text class="legend-t" x="1240" y="569">normalization</text> |
| <rect x="1216" y="577" width="16" height="12" rx="2" fill="none" stroke="var(--residual)" stroke-width="3"/> |
| <text class="legend-t" x="1240" y="587">residual / skip</text> |
| <rect x="1216" y="595" width="16" height="12" rx="2" fill="var(--proj-s)"/> |
| <text class="legend-t" x="1240" y="605">projector / fusion</text> |
| </svg> |
