github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-05-07 10:08:50 -05:00
Code Issues 85 Packages Projects Releases 24 Wiki Activity

polish(tinytorch/diagrams): soften strokes and tighten SVG canvas

Browse Source 
Apply a consistent polish pass across all 22 module diag SVGs and the
two site-wide overview SVGs (big-picture-module-flow,
modules-transformer-gpt-architecture):

  - soften primary strokes from #555 to #bbb so diagram linework reads
    as structural guides rather than bold borders
  - soften arrow marker fills from #555 to #bbb to match the lighter
    stroke weight
  - remove the opaque <rect fill="#ffffff"/> background so SVGs render
    correctly in both light and dark page contexts
  - narrow the canvas (viewBox 680 -> 640 where applicable) and adjust
    the group transform to remove excess whitespace around content

Net effect: every figure in the lab guide and the website reads lighter
and breathier, matching the minimalist neutral + single-accent
convention without losing any semantic detail.
This commit is contained in:
Vijay Janapa Reddi
2026-04-23 14:29:37 -04:00
parent 0e1f1caae7
commit 57f9abed56
22 changed files with 250 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
tinytorch/quarto/assets/images/diagrams/00_journey-diag-1.svg
View File

@@ -10,19 +10,19 @@
<rect x="40" y="60" width="600" height="160" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your TinyTorch Journey</text>
<rect x="60" y="100" width="100" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="60" y="100" width="100" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="110.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Install</text>
<text x="110.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">install.sh</text>
<rect x="175" y="100" width="100" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="175" y="100" width="100" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="225.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Setup</text>
<text x="225.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">tito setup</text>
<rect x="290" y="100" width="100" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="290" y="100" width="100" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Start</text>
<text x="340.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">begin module</text>
<rect x="405" y="100" width="100" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="405" y="100" width="100" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="455.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Complete</text>
<text x="455.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">export code</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 2.9 KiB

26
tinytorch/quarto/assets/images/diagrams/01_tensor-diag-1.svg
View File

@@ -1,31 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 280" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="280" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 580 280" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="580" height="280" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="240" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<rect x="40" y="60" width="500" height="240" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Tensor Class</text>
<rect x="70" y="100" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="130.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Properties</text>
<text x="130.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">shape, size, dtype</text>
<rect x="230" y="100" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="230" y="100" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="290.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Arithmetic</text>
<text x="290.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">+, -, *, /</text>
<rect x="390" y="100" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="390" y="100" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="450.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Matrix Ops</text>
<text x="450.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">matmul()</text>
<rect x="70" y="220" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="220" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="130.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Shape Ops</text>
<text x="130.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">reshape, transpose</text>
<rect x="230" y="220" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="230" y="220" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="290.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Reductions</text>
<text x="290.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">sum, mean, max</text>
<path d="M190 130 H230" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M350 130 H390" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M190 250 H230" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M190 130 H230" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M350 130 H390" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M190 250 H230" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

43
tinytorch/quarto/assets/images/diagrams/02_activations-diag-1.svg
View File

@@ -1,37 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 360" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="360" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 360" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="190" width="100" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<g transform="translate(-20,-40)">
<rect x="40" y="190" width="100" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="90.0" y="224.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Input Tensor</text>
<rect x="240" y="60" width="200" height="320" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="250" y="80" font-size="12" font-weight="700" fill="#333">Activation Functions</text>
<rect x="260" y="100" width="160" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="124.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">ReLU: max(0, x)</text>
<rect x="260" y="155" width="160" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="155" width="160" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="179.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Sigmoid: 1/(1+e^-x)</text>
<rect x="260" y="210" width="160" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="210" width="160" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="234.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Tanh: tanh(x)</text>
<rect x="260" y="265" width="160" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="265" width="160" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="289.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">GELU: x · Φ(x)</text>
<rect x="260" y="320" width="160" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="320" width="160" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="344.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Softmax: exp/sum(exp)</text>
<rect x="540" y="190" width="100" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="540" y="190" width="100" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="590.0" y="224.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Output Tensor</text>
<path d="M140 220 L260 120" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 175" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 230" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 285" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 340" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M440 120 L540 200" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M440 175 L540 210" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M440 230 L540 220" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M440 285 L540 230" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M440 340 L540 240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 120" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 175" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 230" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 285" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M140 220 L260 340" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M420 120 L540 200" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M420 175 L540 210" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M420 230 L540 220" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M420 285 L540 230" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M420 340 L540 240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.1 KiB

After

Width:  |  Height:  |  Size: 3.1 KiB

7
tinytorch/quarto/assets/images/diagrams/03_layers-diag-1.svg
View File

@@ -1,6 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 270" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="270" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
@@ -13,15 +12,15 @@
<text x="340" y="87" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Layer Base Class</text>
<text x="340" y="102" text-anchor="middle" font-size="9" font-weight="400" fill="#999">forward(), parameters()</text>
<rect x="80" y="170" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="80" y="170" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="160" y="197" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Linear Layer</text>
<text x="160" y="212" text-anchor="middle" font-size="9" font-weight="400" fill="#999">y = xW + b</text>
<rect x="260" y="170" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="170" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340" y="197" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Sequential Container</text>
<text x="340" y="212" text-anchor="middle" font-size="9" font-weight="400" fill="#999">layer composition</text>
<rect x="440" y="170" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="440" y="170" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="520" y="197" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Dropout Layer</text>
<text x="520" y="212" text-anchor="middle" font-size="9" font-weight="400" fill="#999">regularization</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

6
tinytorch/quarto/assets/images/diagrams/04_losses-diag-1.svg
View File

@@ -12,13 +12,13 @@
<rect x="250" y="100" width="180" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="340.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">log_softmax()</text>
<text x="340.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Numerical Stability</text>
<rect x="70" y="240" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="240" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="150.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MSELoss</text>
<text x="150.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Regression</text>
<rect x="260" y="240" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="240" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">CrossEntropyLoss</text>
<text x="340.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Classification</text>
<rect x="450" y="240" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="450" y="240" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="530.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">BCE Loss</text>
<text x="530.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Binary Decisions</text>
<path d="M340 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

25
tinytorch/quarto/assets/images/diagrams/05_dataloader-diag-1.svg
View File

@@ -1,32 +1,31 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 260" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="260" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 580 260" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="220" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<rect x="40" y="60" width="500" height="220" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Data Pipeline</text>
<rect x="70" y="100" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="120" height="60" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.2" rx="4"/>
<text x="130.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Dataset</text>
<text x="130.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">__len__, __getitem__</text>
<rect x="230" y="100" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="230" y="100" width="120" height="60" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.2" rx="4"/>
<text x="290.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">TensorDataset</text>
<text x="290.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">In-memory storage</text>
<rect x="390" y="100" width="120" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="450.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">DataLoader</text>
<text x="450.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Batching + Shuffling</text>
<rect x="390" y="220" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="390" y="220" width="120" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="450.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Iterator</text>
<text x="450.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Yields batches</text>
<rect x="190" y="220" width="180" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="190" y="220" width="180" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.2" rx="4"/>
<text x="280.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Training Loop</text>
<text x="280.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">for batch in loader</text>
<path d="M190 130 H230" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M350 130 H390" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M450 160 V220" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M390 250 H370" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M190 130 H230" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M350 130 H390" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M450 160 V220" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M390 250 H370" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

38
tinytorch/quarto/assets/images/diagrams/06_autograd-diag-1.svg
View File

@@ -9,24 +9,24 @@
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="240" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Autograd System</text>
<rect x="70" y="100" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="130.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Function</text>
<text x="130.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Base Class</text>
<rect x="230" y="100" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="290.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Operation Functions</text>
<text x="290.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Add, Mul, Matmul</text>
<rect x="390" y="100" width="120" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="450.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Backward Pass</text>
<text x="450.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Gradient Flow</text>
<rect x="230" y="220" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="290.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Computation Graph</text>
<text x="290.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Tracking</text>
<rect x="390" y="220" width="120" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="450.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">enable_autograd()</text>
<text x="450.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Global Activation</text>
<path d="M190 130 H230" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M350 130 H390" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M450 160 V220" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M390 250 H350" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<rect x="120" y="100" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="180.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Function</text>
<text x="180.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Base Class</text>
<rect x="280" y="100" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Operation Functions</text>
<text x="340.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Add, Mul, Matmul</text>
<rect x="440" y="100" width="120" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="500.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Backward Pass</text>
<text x="500.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Gradient Flow</text>
<rect x="280" y="220" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Computation Graph</text>
<text x="340.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Tracking</text>
<rect x="440" y="220" width="120" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="500.0" y="247.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">enable_autograd()</text>
<text x="500.0" y="262.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Global Activation</text>
<path d="M240 130 H280" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M400 130 H440" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M500 160 V220" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M440 250 H400" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

42
tinytorch/quarto/assets/images/diagrams/07_optimizers-diag-1.svg
View File

@@ -1,28 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 300" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="300" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 300" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="640" height="300" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="260" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Optimizer Classes</text>
<rect x="250" y="100" width="180" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="340.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Optimizer Base</text>
<text x="340.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">zero_grad(), step()</text>
<rect x="70" y="240" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="150.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">SGD</text>
<text x="150.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">momentum buffers</text>
<rect x="260" y="240" width="160" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="340.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Adam</text>
<text x="340.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">m, v buffers</text>
<rect x="450" y="240" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="530.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">AdamW</text>
<text x="530.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">decoupled decay</text>
<path d="M250 130 H150 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M340 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M430 130 H530 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<rect x="20" y="60" width="600" height="260" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="30" y="80" font-size="12" font-weight="700" fill="#333">Your Optimizer Classes</text>
<rect x="230" y="100" width="180" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="320.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Optimizer Base</text>
<text x="320.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">zero_grad(), step()</text>
<rect x="50" y="240" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="130.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">SGD</text>
<text x="130.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">momentum buffers</text>
<rect x="240" y="240" width="160" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="320.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Adam</text>
<text x="320.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">m, v buffers</text>
<rect x="430" y="240" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="510.0" y="267.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">AdamW</text>
<text x="510.0" y="282.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">decoupled decay</text>
<path d="M230 130 H130 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M320 160 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M410 130 H510 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

41
tinytorch/quarto/assets/images/diagrams/08_training-diag-1.svg
View File

@@ -1,46 +1,45 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 380" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="380" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="10 0 660 380" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="120" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Training Infrastructure</text>
<rect x="60" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="60" y="100" width="130" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="125.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">CosineSchedule</text>
<text x="125.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Adaptive LR</text>
<rect x="205" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="205" y="100" width="130" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="270.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">clip_grad_norm()</text>
<text x="270.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Gradient stability</text>
<rect x="350" y="100" width="130" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="415.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Trainer</text>
<text x="415.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Orchestration</text>
<rect x="495" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="495" y="100" width="130" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="560.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Checkpointing</text>
<text x="560.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Persistence</text>
<rect x="40" y="220" width="600" height="180" fill="#ffffff" stroke="#bbb" stroke-width="1.2" stroke-dasharray="3,2" rx="4"/>
<rect x="40" y="220" width="600" height="180" fill="none" stroke="#bbb" stroke-width="1.2" stroke-dasharray="3,2" rx="4"/>
<text x="50" y="240" font-size="12" font-weight="700" fill="#333">Training Loop Cycle</text>
<rect x="60" y="260" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="60" y="260" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="110.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Forward</text>
<rect x="175" y="260" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="175" y="260" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="225.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Loss</text>
<rect x="290" y="260" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="290" y="260" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Backward</text>
<rect x="405" y="260" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="405" y="260" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="455.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Clip</text>
<rect x="520" y="260" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="520" y="260" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="570.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Update</text>
<path d="M160 280 H175" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M275 280 H290" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M390 280 H405" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M505 280 H520" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M570 300 V340 H110 V300" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M160 280 H175" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M275 280 H290" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M390 280 H405" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M505 280 H520" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M570 300 V340 H110 V300" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<text x="340" y="335" text-anchor="middle" font-size="9" font-weight="400" fill="#999" font-style="italic">Next Batch</text>
<path d="M125 160 V220" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M270 160 V260" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M415 160 V220" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M125 160 V220" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M270 160 V260" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M415 160 V220" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

23
tinytorch/quarto/assets/images/diagrams/09_convolutions-diag-1.svg
View File

@@ -1,9 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 260" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="260" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
@@ -12,22 +11,22 @@
<rect x="70" y="100" width="160" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="150.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Conv2d</text>
<text x="150.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Feature Extraction</text>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MaxPool2d</text>
<text x="340.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Strong Selection</text>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="530.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">AvgPool2d</text>
<text x="530.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Smooth Averaging</text>
<rect x="100" y="240" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="100" y="240" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="150.0" y="264.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Input (B,C,H,W)</text>
<rect x="290" y="240" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="290" y="240" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="264.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Features (B,C',H',W')</text>
<rect x="480" y="240" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="480" y="240" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="530.0" y="264.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Pooled (B,C,H/2,W/2)</text>
<path d="M150 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M200 260 H290" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M340 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M390 260 H480" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M530 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M150 160 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M200 260 H290" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M340 160 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
<path d="M390 260 H480" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M530 160 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)" stroke-dasharray="3,2"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.8 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

6
tinytorch/quarto/assets/images/diagrams/10_tokenization-diag-1.svg
View File

@@ -9,16 +9,16 @@
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="330" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Tokenization System</text>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Base Tokenizer</text>
<text x="340.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">encode(), decode()</text>
<rect x="80" y="210" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="80" y="210" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="160.0" y="237.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">CharTokenizer</text>
<text x="160.0" y="252.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">character-level</text>
<rect x="440" y="210" width="160" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="520.0" y="237.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">BPETokenizer</text>
<text x="520.0" y="252.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">subword units</text>
<rect x="260" y="320" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="320" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="347.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Vocabulary Manager</text>
<text x="340.0" y="362.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">mappings &amp; special tokens</text>
<path d="M295 160 L195 210" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.3 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB

16
tinytorch/quarto/assets/images/diagrams/11_embeddings-diag-1.svg
View File

@@ -1,21 +1,21 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="320" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="550" height="320" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<g transform="translate(-20,-50)">
<rect x="40" y="60" width="510" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Embedding System</text>
<rect x="70" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="130" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="135.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Embedding</text>
<text x="135.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Token → Vector</text>
<rect x="230" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="230" y="100" width="130" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="295.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">PositionalEncoding</text>
<text x="295.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Learned Positions</text>
<rect x="390" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="390" y="100" width="130" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="455.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Sinusoidal PE</text>
<text x="455.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Math Patterns</text>
<rect x="70" y="240" width="450" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
@@ -25,4 +25,4 @@
<path d="M295 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M455 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

10
tinytorch/quarto/assets/images/diagrams/12_attention-diag-1.svg
View File

@@ -9,17 +9,17 @@
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="240" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Attention System</text>
<rect x="70" y="100" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="120.0" y="124.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Query (Q)</text>
<rect x="70" y="150" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="150" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="120.0" y="174.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Key (K)</text>
<rect x="70" y="230" width="100" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="230" width="100" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="120.0" y="254.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Value (V)</text>
<rect x="210" y="125" width="140" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="210" y="125" width="140" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="280.0" y="149.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">QKᵀ / √d_k</text>
<rect x="380" y="125" width="160" height="40" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="460.0" y="149.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Softmax (Weights)</text>
<rect x="380" y="230" width="160" height="40" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="380" y="230" width="160" height="40" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="460.0" y="254.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Weighted Output</text>
<path d="M170 120 L210 140" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M170 170 L210 150" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

15
tinytorch/quarto/assets/images/diagrams/14_profiling-diag-1.svg
View File

@@ -1,27 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="320" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Profiler Class</text>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="150.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Timer</text>
<text x="150.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Operation Latency</text>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MemoryProfiler</text>
<text x="340.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Allocation Tracking</text>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="530.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">ProfilerSummary</text>
<text x="530.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">Aggregation</text>
<rect x="70" y="240" width="540" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="340.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Performance Report</text>
<path d="M150 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M340 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M530 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M150 160 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M340 160 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M530 160 V240" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

33
tinytorch/quarto/assets/images/diagrams/15_quantization-diag-1.svg
View File

@@ -1,27 +1,26 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="320" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Quantization System</text>
<rect x="70" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="135.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MinMaxObserver</text>
<rect x="220" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="285.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MovingAverage</text>
<rect x="370" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="435.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">WeightQuant</text>
<rect x="520" y="100" width="130" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<text x="585.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">ActivationQuant</text>
<rect x="70" y="240" width="580" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="360.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">QuantizedModel (INT8)</text>
<path d="M135 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M285 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M435 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M585 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<rect x="55" y="100" width="120" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5" rx="4"/>
<text x="115.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MinMaxObserver</text>
<rect x="205" y="100" width="120" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5" rx="4"/>
<text x="265.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MovingAverage</text>
<rect x="355" y="100" width="120" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5" rx="4"/>
<text x="415.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">WeightQuant</text>
<rect x="505" y="100" width="120" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5" rx="4"/>
<text x="565.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">ActivationQuant</text>
<rect x="55" y="240" width="570" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.5" rx="4"/>
<text x="340.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">QuantizedModel (INT8)</text>
<path d="M115 160 V240" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M265 160 V240" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M415 160 V240" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M565 160 V240" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

12
tinytorch/quarto/assets/images/diagrams/16_compression-diag-1.svg
View File

@@ -1,19 +1,19 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="320" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="640" height="320" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<g transform="translate(-20,-50)">
<rect x="40" y="60" width="600" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Compression System</text>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="150.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Weight Pruning</text>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Distillation</text>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="530.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Structured Pruning</text>
<rect x="70" y="240" width="540" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="340.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">CompressedModel</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

7
tinytorch/quarto/assets/images/diagrams/17_acceleration-diag-1.svg
View File

@@ -1,6 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="320" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
@@ -9,11 +8,11 @@
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Acceleration Layer</text>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="160" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.2" rx="4"/>
<text x="150.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Vectorized Kernels</text>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.2" rx="4"/>
<text x="340.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">SIMD (AVX/NEON)</text>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="450" y="100" width="160" height="60" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.2" rx="4"/>
<text x="530.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Parallel Loops</text>
<rect x="70" y="240" width="540" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="340.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Accelerated Backend</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

17
tinytorch/quarto/assets/images/diagrams/18_memoization-diag-1.svg
View File

@@ -1,24 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="320" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 0 640 300" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your KV Cache System</text>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="150.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Cache Storage</text>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Update Logic</text>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="530.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Retrieval Flow</text>
<rect x="70" y="240" width="540" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="340.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Optimized Generation</text>
<path d="M150 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M340 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M530 160 V240" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M150 160 V240" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M340 160 V240" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
<path d="M530 160 V240" stroke="#bbb" stroke-width="1.5" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

7
tinytorch/quarto/assets/images/diagrams/19_benchmarking-diag-1.svg
View File

@@ -1,6 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 320" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="320" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
@@ -9,11 +8,11 @@
<g transform="translate(0,-50)">
<rect x="40" y="60" width="600" height="280" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Benchmarking System</text>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="70" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="150.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MetricCollector</text>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="260" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="340.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">StatsAnalyzer</text>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="450" y="100" width="160" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="530.0" y="134.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">ComparisonEngine</text>
<rect x="70" y="240" width="540" height="80" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<text x="340.0" y="284.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Benchmark Results</text>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

26
tinytorch/quarto/assets/images/diagrams/20_capstone-diag-1.svg
View File

@@ -1,38 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 300" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="300" fill="#ffffff"/>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 300" font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="640" height="300" fill="#ffffff"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
<path d="M0,0 L8,3 L0,6 Z" fill="#555"/>
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
</marker>
</defs>
<g transform="translate(0,-50)">
<g transform="translate(-20,-40)">
<rect x="40" y="60" width="600" height="260" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="50" y="80" font-size="12" font-weight="700" fill="#333">Your Submission Pipeline</text>
<rect x="60" y="105" width="130" height="50" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="60" y="105" width="130" height="50" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="125.0" y="127.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Baseline Model</text>
<text x="125.0" y="142.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">SimpleMLP</text>
<rect x="60" y="175" width="130" height="50" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="60" y="175" width="130" height="50" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="125.0" y="197.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Optimized Model</text>
<text x="125.0" y="212.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">+ quantization, pruning</text>
<rect x="220" y="135" width="140" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="220" y="135" width="140" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="290.0" y="160.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">BenchmarkReport</text>
<text x="290.0" y="175.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">latency · accuracy · memory</text>
<rect x="390" y="135" width="140" height="60" fill="#f7f7f7" stroke="#555" stroke-width="1.2" rx="4"/>
<rect x="390" y="135" width="140" height="60" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2" rx="4"/>
<text x="460.0" y="160.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">generate_submission()</text>
<text x="460.0" y="175.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">+ schema validation</text>
<rect x="560" y="135" width="80" height="60" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2" rx="4"/>
<rect x="560" y="135" width="80" height="60" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.2" rx="4"/>
<text x="600.0" y="160.0" text-anchor="middle" font-size="10" font-weight="700" fill="#333">results</text>
<text x="600.0" y="175.0" text-anchor="middle" font-size="9" font-weight="400" fill="#999">.json</text>
<path d="M190 130 L220 150" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M190 200 L220 180" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M360 165 H390" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M530 165 H560" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M190 130 L220 150" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M190 200 L220 180" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M360 165 H390" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
<path d="M530 165 H560" stroke="#bbb" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.7 KiB

45
tinytorch/quarto/assets/images/svg/big-picture-module-flow.svg
View File

@@ -1,9 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- Option 2: Layered stack. Tiers as horizontal bands stacked bottom-up;
the ML stack metaphor. Foundation at bottom, Capstone at top. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 720 500"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="20 0 680 500"
font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="720" height="500" fill="#fff"/>
<defs>
<marker id="arrow-up" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
@@ -22,7 +21,7 @@
<text x="60" y="123" font-size="9" fill="#555">running end-to-end</text>
<text x="60" y="140" font-size="8" fill="#555" font-style="italic">an MLPerf-style benchmark you submit: your framework, your trained model, your measured latency</text>
<rect x="340" y="98" width="200" height="24" rx="12" fill="#fff" stroke="#c87b2a" stroke-width="1.5"/>
<rect x="340" y="98" width="200" height="24" rx="12" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.5"/>
<text x="440" y="113" text-anchor="middle" font-size="11" font-weight="700" fill="#a31f34">20 Capstone</text>
<!-- ===== Layer 3 — Optimization ===== -->
@@ -33,17 +32,17 @@
<text x="60" y="240" font-size="8" fill="#999" font-style="italic">profile to find bottlenecks, then apply the right technique and benchmark the gain</text>
<g font-size="10" font-weight="700" fill="#333" text-anchor="middle">
<rect x="210" y="198" width="70" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="210" y="198" width="70" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="245" y="213">14 Prof</text>
<rect x="288" y="198" width="70" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="288" y="198" width="70" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="323" y="213">15 Quant</text>
<rect x="366" y="198" width="70" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="366" y="198" width="70" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="401" y="213">16 Compr</text>
<rect x="444" y="198" width="70" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="444" y="198" width="70" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="479" y="213">17 Accel</text>
<rect x="522" y="198" width="70" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="522" y="198" width="70" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="557" y="213">18 Memo</text>
<rect x="600" y="198" width="70" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="600" y="198" width="70" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="635" y="213">19 Bench</text>
</g>
@@ -55,16 +54,16 @@
<g font-size="10" font-weight="700" fill="#333" text-anchor="middle">
<!-- Vision -->
<rect x="210" y="298" width="74" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="210" y="298" width="74" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="247" y="313">09 CNNs</text>
<!-- Language -->
<rect x="344" y="298" width="74" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="344" y="298" width="74" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="381" y="313">10 Token</text>
<rect x="428" y="298" width="74" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="428" y="298" width="74" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="465" y="313">11 Embed</text>
<rect x="512" y="298" width="74" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="512" y="298" width="74" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="549" y="313">12 Atten</text>
<rect x="596" y="298" width="74" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="596" y="298" width="74" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="633" y="313">13 Trans</text>
</g>
<text x="247" y="338" text-anchor="middle" font-size="8" fill="#999" font-style="italic">vision</text>
@@ -78,21 +77,21 @@
<text x="60" y="440" font-size="8" fill="#999" font-style="italic">tensors, activations, layers, losses, dataloader, autograd, optimizers, training</text>
<g font-size="10" font-weight="700" fill="#333" text-anchor="middle">
<rect x="210" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="210" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="237" y="413">01 Tensor</text>
<rect x="268" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="268" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="295" y="413">02 Activ</text>
<rect x="326" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="326" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="353" y="413">03 Layer</text>
<rect x="384" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="384" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="411" y="413">04 Loss</text>
<rect x="442" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="442" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="469" y="413">05 Data</text>
<rect x="500" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="500" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="527" y="413">06 Grad</text>
<rect x="558" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="558" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="585" y="413">07 Optim</text>
<rect x="616" y="398" width="54" height="24" rx="12" fill="#fff" stroke="#bbb" stroke-width="1.2"/>
<rect x="616" y="398" width="54" height="24" rx="12" fill="#f7f7f7" stroke="#bbb" stroke-width="1.2"/>
<text x="643" y="413">08 Train</text>
</g>
@@ -103,4 +102,4 @@
<!-- ===== Footnote ===== -->
<text x="360" y="480" text-anchor="middle" font-size="9" fill="#999" font-style="italic">Data flows up the stack · each layer depends on everything below it</text>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.8 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

58
tinytorch/quarto/assets/images/svg/modules-transformer-gpt-architecture.svg
View File

@@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 460"
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 480"
font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
<rect width="680" height="460" fill="#fff" rx="4"/>
<rect width="500" height="480" fill="#f7f7f7" rx="4"/>
<defs>
<marker id="arrow" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
@@ -10,59 +10,59 @@
</defs>
<!-- ===== Title ===== -->
<text x="340" y="30" text-anchor="middle" font-size="13" font-weight="700" fill="#333">Complete GPT Architecture</text>
<text x="250" y="30" text-anchor="middle" font-size="13" font-weight="700" fill="#333">Complete GPT Architecture</text>
<!-- ===== Stage 1: Token IDs (entry / routing-orange) ===== -->
<rect x="230" y="50" width="220" height="40" rx="4" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.5"/>
<text x="340" y="68" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Token IDs</text>
<text x="340" y="82" text-anchor="middle" font-size="9" fill="#555">[15496, 1917]</text>
<rect x="140" y="50" width="220" height="40" rx="4" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.5"/>
<text x="250" y="68" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Token IDs</text>
<text x="250" y="82" text-anchor="middle" font-size="9" fill="#555">[15496, 1917]</text>
<!-- arrow 1 -->
<line x1="340" y1="90" x2="340" y2="105" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<line x1="250" y1="90" x2="250" y2="105" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<!-- ===== Stage 2: Embeddings (compute-blue) ===== -->
<rect x="230" y="110" width="220" height="40" rx="4" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5"/>
<text x="340" y="128" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Embeddings</text>
<text x="340" y="142" text-anchor="middle" font-size="9" fill="#555">Token + Position</text>
<rect x="140" y="110" width="220" height="40" rx="4" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5"/>
<text x="250" y="128" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Embeddings</text>
<text x="250" y="142" text-anchor="middle" font-size="9" fill="#555">Token + Position</text>
<!-- arrow 2 -->
<line x1="340" y1="150" x2="340" y2="165" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<line x1="250" y1="150" x2="250" y2="165" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<!-- ===== Stage 3: Transformer Block 1 (data/sync green) ===== -->
<rect x="230" y="170" width="220" height="40" rx="4" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.5"/>
<text x="340" y="188" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Transformer Block 1</text>
<text x="340" y="202" text-anchor="middle" font-size="9" fill="#555">Attention + MLP</text>
<rect x="140" y="170" width="220" height="40" rx="4" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.5"/>
<text x="250" y="188" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Transformer Block 1</text>
<text x="250" y="202" text-anchor="middle" font-size="9" fill="#555">Attention + MLP</text>
<!-- arrow 3 -->
<line x1="340" y1="210" x2="340" y2="225" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<line x1="250" y1="210" x2="250" y2="225" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<!-- ===== Stage 4: Transformer Block 2 (data/sync green) ===== -->
<rect x="230" y="230" width="220" height="40" rx="4" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.5"/>
<text x="340" y="248" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Transformer Block 2</text>
<text x="340" y="262" text-anchor="middle" font-size="9" fill="#555">Attention + MLP</text>
<rect x="140" y="230" width="220" height="40" rx="4" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.5"/>
<text x="250" y="248" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Transformer Block 2</text>
<text x="250" y="262" text-anchor="middle" font-size="9" fill="#555">Attention + MLP</text>
<!-- arrow 4 -->
<line x1="340" y1="270" x2="340" y2="285" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<line x1="250" y1="270" x2="250" y2="285" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<!-- ===== Stage 5: ... N Blocks ... (dashed repeating unit, green family) ===== -->
<rect x="230" y="290" width="220" height="30" rx="4" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.2" stroke-dasharray="4,2"/>
<text x="340" y="309" text-anchor="middle" font-size="11" font-weight="700" fill="#333">· · · N Blocks · · ·</text>
<rect x="140" y="290" width="220" height="30" rx="4" fill="#d4edda" stroke="#3d9e5a" stroke-width="1.2" stroke-dasharray="4,2"/>
<text x="250" y="309" text-anchor="middle" font-size="11" font-weight="700" fill="#333">· · · N Blocks · · ·</text>
<!-- arrow 5 -->
<line x1="340" y1="320" x2="340" y2="335" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<line x1="250" y1="320" x2="250" y2="335" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<!-- ===== Stage 6: Final LayerNorm (compute-blue) ===== -->
<rect x="230" y="340" width="220" height="30" rx="4" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5"/>
<text x="340" y="359" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Final LayerNorm</text>
<rect x="140" y="340" width="220" height="30" rx="4" fill="#cfe2f3" stroke="#4a90c4" stroke-width="1.5"/>
<text x="250" y="359" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Final LayerNorm</text>
<!-- arrow 6 -->
<line x1="340" y1="370" x2="340" y2="385" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<line x1="250" y1="370" x2="250" y2="385" stroke="#555" stroke-width="1.2" marker-end="url(#arrow)"/>
<!-- ===== Stage 7: Language Head (neutral container / exit) ===== -->
<rect x="230" y="390" width="220" height="40" rx="4" fill="#f7f7f7" stroke="#bbb" stroke-width="1.5"/>
<text x="340" y="408" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Language Head</text>
<text x="340" y="422" text-anchor="middle" font-size="9" fill="#555">Vocabulary Logits</text>
<rect x="140" y="390" width="220" height="40" rx="4" fill="#f7f7f7" stroke="#bbb" stroke-width="1.5"/>
<text x="250" y="408" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Language Head</text>
<text x="250" y="422" text-anchor="middle" font-size="9" fill="#555">Vocabulary Logits</text>
<!-- ===== Footnote ===== -->
<text x="340" y="448" text-anchor="middle" font-size="9" font-style="italic" fill="#999">Autoregressive stack: embed tokens, process through N transformer blocks, project to vocabulary.</text>
<text x="250" y="448" text-anchor="middle" font-size="9" font-style="italic" fill="#999">Autoregressive stack: embed tokens, process through N transformer blocks, project to vocabulary.</text>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.0 KiB