| 1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720" width="1280" height="720"> |
| 2 | <defs> |
| 3 | <filter id="cardShadow" x="-10%" y="-10%" width="120%" height="120%"> |
| 4 | <feGaussianBlur in="SourceAlpha" stdDeviation="6"/> |
| 5 | <feOffset dx="0" dy="3"/> |
| 6 | <feFlood flood-color="#1A365D" flood-opacity="0.07"/> |
| 7 | <feComposite in2="SourceAlpha" operator="in"/> |
| 8 | <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge> |
| 9 | </filter> |
| 10 | </defs> |
| 11 | |
| 12 | <g id="bg"> |
| 13 | <rect width="1280" height="720" fill="#FFFFFF"/> |
| 14 | </g> |
| 15 | |
| 16 | <g id="header"> |
| 17 | <rect x="60" y="56" width="6" height="40" fill="#3182CE"/> |
| 18 | <text x="84" y="88" font-family="Georgia, "Microsoft YaHei", serif" font-size="36" font-weight="700" fill="#1A365D">Same skeleton, three asymmetries</text> |
| 19 | <text x="84" y="118" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" font-weight="700" fill="#4A5568" letter-spacing="1.5">ENCODER STACK · DECODER STACK · N = 6 · d_model = 512</text> |
| 20 | </g> |
| 21 | |
| 22 | <g id="card-encoder"> |
| 23 | <rect x="80" y="160" width="555" height="500" rx="14" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" filter="url(#cardShadow)"/> |
| 24 | <path d="M 94 160 h 527 a 14 14 0 0 1 14 14 v 90 h -555 v -90 a 14 14 0 0 1 14 -14 Z" fill="#1A365D"/> |
| 25 | <text x="357" y="212" text-anchor="middle" font-family="Georgia, "Microsoft YaHei", serif" font-size="28" font-weight="700" fill="#FFFFFF">Encoder</text> |
| 26 | <text x="357" y="240" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" font-weight="600" fill="#FFFFFF" fill-opacity="0.85" letter-spacing="1">N = 6 IDENTICAL LAYERS</text> |
| 27 | |
| 28 | <g id="enc-sublayer-1"> |
| 29 | <rect x="110" y="300" width="495" height="56" rx="8" fill="#F5F7FA" stroke="#1A365D" stroke-width="1.5"/> |
| 30 | <circle cx="138" cy="328" r="14" fill="#1A365D"/> |
| 31 | <text x="138" y="334" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" font-weight="700" fill="#FFFFFF">1</text> |
| 32 | <text x="166" y="324" font-family="Georgia, "Microsoft YaHei", serif" font-size="17" font-weight="700" fill="#1A365D">Multi-Head Self-Attention</text> |
| 33 | <text x="166" y="346" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#4A5568">Every position attends to every position</text> |
| 34 | </g> |
| 35 | |
| 36 | <g id="enc-sublayer-2"> |
| 37 | <rect x="110" y="372" width="495" height="56" rx="8" fill="#F5F7FA" stroke="#1A365D" stroke-width="1.5"/> |
| 38 | <circle cx="138" cy="400" r="14" fill="#1A365D"/> |
| 39 | <text x="138" y="406" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" font-weight="700" fill="#FFFFFF">2</text> |
| 40 | <text x="166" y="396" font-family="Georgia, "Microsoft YaHei", serif" font-size="17" font-weight="700" fill="#1A365D">Position-wise Feed Forward</text> |
| 41 | <text x="166" y="418" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#4A5568">Two linear layers, ReLU between</text> |
| 42 | </g> |
| 43 | |
| 44 | <text x="110" y="466" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" font-weight="700" fill="#3182CE" letter-spacing="1.5">WRAPPER AROUND EACH SUB-LAYER</text> |
| 45 | <text x="110" y="492" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="15" fill="#1A202C">Output = LayerNorm( x + Sublayer(x) )</text> |
| 46 | <text x="110" y="514" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#4A5568">— residual connection then layer normalization.</text> |
| 47 | |
| 48 | <rect x="110" y="544" width="495" height="80" rx="8" fill="#F5F7FA"/> |
| 49 | <text x="124" y="568" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" font-weight="700" fill="#1A365D" letter-spacing="1.5">SHAPE CONTRACT</text> |
| 50 | <text x="124" y="592" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#1A202C">All sub-layers and embeddings emit dimension <tspan font-family="Consolas, monospace" fill="#3182CE" font-weight="700">d_model = 512</tspan></text> |
| 51 | <text x="124" y="612" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#1A202C">so residual addition is well-defined.</text> |
| 52 | </g> |
| 53 | |
| 54 | <g id="card-decoder"> |
| 55 | <rect x="655" y="160" width="555" height="500" rx="14" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1.5" filter="url(#cardShadow)"/> |
| 56 | <path d="M 669 160 h 527 a 14 14 0 0 1 14 14 v 90 h -555 v -90 a 14 14 0 0 1 14 -14 Z" fill="#3182CE"/> |
| 57 | <text x="932" y="212" text-anchor="middle" font-family="Georgia, "Microsoft YaHei", serif" font-size="28" font-weight="700" fill="#FFFFFF">Decoder</text> |
| 58 | <text x="932" y="240" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" font-weight="600" fill="#FFFFFF" fill-opacity="0.9" letter-spacing="1">N = 6 IDENTICAL LAYERS · INSERTS A THIRD SUB-LAYER</text> |
| 59 | |
| 60 | <g id="dec-sublayer-1"> |
| 61 | <rect x="685" y="300" width="495" height="56" rx="8" fill="#FFFFFF" stroke="#3182CE" stroke-width="1.5"/> |
| 62 | <circle cx="713" cy="328" r="14" fill="#3182CE"/> |
| 63 | <text x="713" y="334" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" font-weight="700" fill="#FFFFFF">1</text> |
| 64 | <text x="741" y="324" font-family="Georgia, "Microsoft YaHei", serif" font-size="17" font-weight="700" fill="#1A365D"><tspan fill="#3182CE">Masked</tspan> Multi-Head Self-Attention</text> |
| 65 | <text x="741" y="346" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#4A5568">Position i attends only to positions ≤ i</text> |
| 66 | </g> |
| 67 | |
| 68 | <g id="dec-sublayer-2"> |
| 69 | <rect x="685" y="372" width="495" height="56" rx="8" fill="#FFFFFF" stroke="#3182CE" stroke-width="2.5"/> |
| 70 | <circle cx="713" cy="400" r="14" fill="#3182CE"/> |
| 71 | <text x="713" y="406" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" font-weight="700" fill="#FFFFFF">2</text> |
| 72 | <text x="741" y="396" font-family="Georgia, "Microsoft YaHei", serif" font-size="17" font-weight="700" fill="#1A365D"><tspan fill="#3182CE">Encoder-Decoder</tspan> Attention</text> |
| 73 | <text x="741" y="418" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#4A5568">Q from decoder · K, V from encoder output</text> |
| 74 | </g> |
| 75 | |
| 76 | <g id="dec-sublayer-3"> |
| 77 | <rect x="685" y="444" width="495" height="56" rx="8" fill="#F5F7FA" stroke="#3182CE" stroke-width="1.5"/> |
| 78 | <circle cx="713" cy="472" r="14" fill="#3182CE"/> |
| 79 | <text x="713" y="478" text-anchor="middle" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" font-weight="700" fill="#FFFFFF">3</text> |
| 80 | <text x="741" y="468" font-family="Georgia, "Microsoft YaHei", serif" font-size="17" font-weight="700" fill="#1A365D">Position-wise Feed Forward</text> |
| 81 | <text x="741" y="490" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="13" fill="#4A5568">Same shape as encoder FFN</text> |
| 82 | </g> |
| 83 | |
| 84 | <rect x="685" y="528" width="495" height="96" rx="8" fill="#EBF4FB"/> |
| 85 | <text x="699" y="552" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="12" font-weight="700" fill="#3182CE" letter-spacing="1.5">THREE ASYMMETRIES VS ENCODER</text> |
| 86 | <text x="699" y="578" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#1A202C">· third sub-layer attends to encoder output</text> |
| 87 | <text x="699" y="598" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#1A202C">· self-attention is masked (no peeking at future)</text> |
| 88 | <text x="699" y="618" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="14" fill="#1A202C">· output embeddings are offset by one position</text> |
| 89 | </g> |
| 90 | |
| 91 | <g id="footer"> |
| 92 | <text x="60" y="694" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#A0AEC0">Source: Vaswani et al. 2017, §3.1 Encoder and Decoder Stacks</text> |
| 93 | <text x="1220" y="694" text-anchor="end" font-family="Arial, "Microsoft YaHei", sans-serif" font-size="11" fill="#A0AEC0">06</text> |
| 94 | </g> |
| 95 | </svg> |
| 96 |