mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-07 10:08:50 -05:00
refactor(tinytorch/website): replace mermaid with lab-guide-style SVGs
Convert the six remaining mermaid code fences across the tier overviews (foundation, architecture, optimization) and tito developer pages (modules, data, testing) into hand-authored SVGs that match the minimalist convention used by the PDF lab-guide module diagrams: - neutral #f7f7f7 fill + #555 stroke for all boxes - one #fdebd0 / #c87b2a orange accent per figure marking the focal element (essential command, pivot step, destructive action, or deployable artifact) - #a31f34 MIT red pills reserved for year and achievement badges - panel header top-left at 12pt; fig-cap carries the long-form title - stroke-width 1.2 throughout; typography 12 / 10 / 9 pt Figures introduced: - tito-module-workflow.svg (5-step build/export/test cycle) - tito-progress-tracking.svg (6-step progress flow) - tito-test-hierarchy.svg (7-level test stack) - tiers-foundation-milestones.svg (1958 / 1969 / 1986) - tiers-architecture-milestones.svg (1998 / 2017) - tiers-optimization-milestones.svg (baseline -> MLPerf) Why: the deployed site rendered mermaid timelines and flowcharts as "syntax error in text" bombs on several pages (foundation, big-picture, etc.). Switching to hand-authored SVGs embedded via the standard Quarto figure-div pattern (::: {#fig-... fig-env=figure ...}) centers the figures correctly, supplies proper fig-cap / fig-alt, and routes through the existing svg-to-pdf.lua filter for HTML + PDF parity. The minimalist two-tone palette (neutral + single accent) mirrors the 22 module diagrams in assets/images/diagrams/, giving the site and the lab guide a single visual family.
This commit is contained in:
Vijay Janapa Reddi
@@ -0,0 +1,48 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Architecture tier milestones: two-era arc (1998 CNN, 2017 Transformer) along a horizontal timeline. Minimalist convention: neutral gray cards, MIT red pills as year badges. -->
|
||||
<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"/>
|
||||
|
||||
<!-- ===== Panel header ===== -->
|
||||
<text x="20" y="22" font-size="12" font-weight="700" fill="#333">Architecture Milestones</text>
|
||||
<text x="20" y="38" font-size="9" font-style="italic" fill="#999">vision and language breakthroughs recreated in modules 09-13</text>
|
||||
|
||||
<!-- ===== Timeline axis ===== -->
|
||||
<line x1="80" y1="66" x2="600" y2="66" stroke="#bbb" stroke-width="1"/>
|
||||
<line x1="220" y1="60" x2="220" y2="72" stroke="#bbb" stroke-width="1"/>
|
||||
<line x1="460" y1="60" x2="460" y2="72" stroke="#bbb" stroke-width="1"/>
|
||||
|
||||
<!-- ===== Year pills (MIT red accent) ===== -->
|
||||
<rect x="196" y="52" width="48" height="20" rx="10" fill="#a31f34"/>
|
||||
<text x="220" y="66" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">1998</text>
|
||||
|
||||
<rect x="436" y="52" width="48" height="20" rx="10" fill="#a31f34"/>
|
||||
<text x="460" y="66" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">2017</text>
|
||||
|
||||
<!-- ===== Milestone cards (w=220, h=130, y=96, centered on year) ===== -->
|
||||
<!-- Card 1: 1998 CNN -->
|
||||
<rect x="110" y="96" width="220" height="130" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="220" y="120" text-anchor="middle" font-size="11" font-weight="700" fill="#333">CNN Revolution</text>
|
||||
<line x1="130" y1="130" x2="310" y2="130" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="220" y="152" text-anchor="middle" font-size="9.5" fill="#555">75%+ accuracy on CIFAR-10</text>
|
||||
<text x="220" y="166" text-anchor="middle" font-size="9.5" fill="#555">with spatial intelligence</text>
|
||||
<text x="220" y="196" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">LeNet-5 proves convolution</text>
|
||||
<text x="220" y="208" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">beats fully connected</text>
|
||||
|
||||
<!-- Card 2: 2017 Transformer -->
|
||||
<rect x="350" y="96" width="220" height="130" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="460" y="120" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Transformer Era</text>
|
||||
<line x1="370" y1="130" x2="550" y2="130" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="460" y="152" text-anchor="middle" font-size="9.5" fill="#555">text generation powered</text>
|
||||
<text x="460" y="166" text-anchor="middle" font-size="9.5" fill="#555">by attention mechanisms</text>
|
||||
<text x="460" y="196" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">attention replaces recurrence</text>
|
||||
<text x="460" y="208" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">as the default for sequences</text>
|
||||
|
||||
<!-- ===== Connector drops ===== -->
|
||||
<line x1="220" y1="72" x2="220" y2="96" stroke="#bbb" stroke-width="0.8" stroke-dasharray="3,2"/>
|
||||
<line x1="460" y1="72" x2="460" y2="96" stroke="#bbb" stroke-width="0.8" stroke-dasharray="3,2"/>
|
||||
|
||||
<!-- ===== Footnote ===== -->
|
||||
<text x="340" y="248" text-anchor="middle" font-size="9" font-style="italic" fill="#999">After completing modules 09-13, your code recreates LeNet-5 and a working Transformer.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
@@ -0,0 +1,62 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Foundation tier milestones: three-decade arc (1958, 1969, 1986) along a horizontal timeline. Minimalist convention: neutral gray cards, MIT red pills as year/achievement badges (textbook-standard accent, retained for anchor labels). -->
|
||||
<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"/>
|
||||
|
||||
<!-- ===== Panel header ===== -->
|
||||
<text x="20" y="22" font-size="12" font-weight="700" fill="#333">Foundation Milestones</text>
|
||||
<text x="20" y="38" font-size="9" font-style="italic" fill="#999">three decades of neural-network breakthroughs recreated in modules 01-08</text>
|
||||
|
||||
<!-- ===== Timeline axis ===== -->
|
||||
<line x1="60" y1="66" x2="620" y2="66" stroke="#bbb" stroke-width="1"/>
|
||||
<line x1="140" y1="60" x2="140" y2="72" stroke="#bbb" stroke-width="1"/>
|
||||
<line x1="340" y1="60" x2="340" y2="72" stroke="#bbb" stroke-width="1"/>
|
||||
<line x1="540" y1="60" x2="540" y2="72" stroke="#bbb" stroke-width="1"/>
|
||||
|
||||
<!-- ===== Year pills (MIT red accent — textbook-standard year badge) ===== -->
|
||||
<rect x="116" y="52" width="48" height="20" rx="10" fill="#a31f34"/>
|
||||
<text x="140" y="66" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">1958</text>
|
||||
|
||||
<rect x="316" y="52" width="48" height="20" rx="10" fill="#a31f34"/>
|
||||
<text x="340" y="66" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">1969</text>
|
||||
|
||||
<rect x="516" y="52" width="48" height="20" rx="10" fill="#a31f34"/>
|
||||
<text x="540" y="66" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">1986</text>
|
||||
|
||||
<!-- ===== Milestone cards (w=180, h=130, y=96, centered on year) ===== -->
|
||||
<!-- Card 1: 1958 Perceptron -->
|
||||
<rect x="50" y="96" width="180" height="130" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="140" y="120" text-anchor="middle" font-size="11" font-weight="700" fill="#333">Perceptron</text>
|
||||
<line x1="70" y1="130" x2="210" y2="130" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="140" y="152" text-anchor="middle" font-size="9.5" fill="#555">Binary classification</text>
|
||||
<text x="140" y="166" text-anchor="middle" font-size="9.5" fill="#555">with gradient descent</text>
|
||||
<text x="140" y="196" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">Rosenblatt's</text>
|
||||
<text x="140" y="208" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">first learning machine</text>
|
||||
|
||||
<!-- Card 2: 1969 XOR -->
|
||||
<rect x="250" y="96" width="180" height="130" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="340" y="120" text-anchor="middle" font-size="11" font-weight="700" fill="#333">XOR Crisis Solved</text>
|
||||
<line x1="270" y1="130" x2="410" y2="130" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="340" y="152" text-anchor="middle" font-size="9.5" fill="#555">Hidden layers enable</text>
|
||||
<text x="340" y="166" text-anchor="middle" font-size="9.5" fill="#555">non-linear learning</text>
|
||||
<text x="340" y="196" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">the problem that</text>
|
||||
<text x="340" y="208" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">stumped single layers</text>
|
||||
|
||||
<!-- Card 3: 1986 MLP Revival -->
|
||||
<rect x="450" y="96" width="180" height="130" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="540" y="120" text-anchor="middle" font-size="11" font-weight="700" fill="#333">MLP Revival</text>
|
||||
<line x1="470" y1="130" x2="610" y2="130" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="540" y="152" text-anchor="middle" font-size="9.5" fill="#555">Multi-layer networks</text>
|
||||
<text x="540" y="166" text-anchor="middle" font-size="9.5" fill="#555">reach 95%+ on MNIST</text>
|
||||
<text x="540" y="196" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">backpropagation</text>
|
||||
<text x="540" y="208" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">ends the AI winter</text>
|
||||
|
||||
<!-- ===== Connector drops from timeline to cards ===== -->
|
||||
<line x1="140" y1="72" x2="140" y2="96" stroke="#bbb" stroke-width="0.8" stroke-dasharray="3,2"/>
|
||||
<line x1="340" y1="72" x2="340" y2="96" stroke="#bbb" stroke-width="0.8" stroke-dasharray="3,2"/>
|
||||
<line x1="540" y1="72" x2="540" y2="96" stroke="#bbb" stroke-width="0.8" stroke-dasharray="3,2"/>
|
||||
|
||||
<!-- ===== Footnote ===== -->
|
||||
<text x="340" y="248" text-anchor="middle" font-size="9" font-style="italic" fill="#999">After completing modules 01-08, your code recreates each of these breakthroughs on real data.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.5 KiB |
@@ -0,0 +1,81 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Optimization tier progression: six stages from a baseline model to an MLPerf-ready deployment. Minimalist convention: numbers tell the quantitative story; single orange accent on the MLPerf terminal box marks the deployable artifact. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 220"
|
||||
font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
|
||||
<rect width="680" height="220" 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>
|
||||
|
||||
<!-- ===== Panel header ===== -->
|
||||
<text x="20" y="22" font-size="12" font-weight="700" fill="#333">Optimization Progression</text>
|
||||
<text x="20" y="38" font-size="9" font-style="italic" fill="#999">baseline → size cuts → speed gains → MLPerf deployment (modules 14-19)</text>
|
||||
|
||||
<!-- ===== Six-stage progression (w=100, pitch=110, y=50, h=110) ===== -->
|
||||
<!-- 1. Baseline -->
|
||||
<rect x="15" y="50" width="100" height="110" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="65" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Baseline</text>
|
||||
<line x1="30" y1="82" x2="100" y2="82" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="65" y="100" text-anchor="middle" font-size="9" fill="#555">100 MB</text>
|
||||
<text x="65" y="114" text-anchor="middle" font-size="9" fill="#555">0.5 tok/s</text>
|
||||
<text x="65" y="128" text-anchor="middle" font-size="9" fill="#555">95% acc</text>
|
||||
<text x="65" y="150" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">reference</text>
|
||||
|
||||
<!-- 2. Quantization -->
|
||||
<rect x="125" y="50" width="100" height="110" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="175" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Quantization</text>
|
||||
<line x1="140" y1="82" x2="210" y2="82" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="175" y="100" text-anchor="middle" font-size="9" fill="#555">25 MB</text>
|
||||
<text x="175" y="115" text-anchor="middle" font-size="10" font-weight="700" fill="#333">4× smaller</text>
|
||||
<text x="175" y="130" text-anchor="middle" font-size="9" fill="#555">same acc</text>
|
||||
<text x="175" y="150" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">INT8 weights</text>
|
||||
|
||||
<!-- 3. Pruning -->
|
||||
<rect x="235" y="50" width="100" height="110" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="285" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Pruning</text>
|
||||
<line x1="250" y1="82" x2="320" y2="82" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="285" y="100" text-anchor="middle" font-size="9" fill="#555">12 MB</text>
|
||||
<text x="285" y="115" text-anchor="middle" font-size="10" font-weight="700" fill="#333">8× smaller</text>
|
||||
<text x="285" y="130" text-anchor="middle" font-size="9" fill="#555">94% acc</text>
|
||||
<text x="285" y="150" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">sparse weights</text>
|
||||
|
||||
<!-- 4. KV-Cache -->
|
||||
<rect x="345" y="50" width="100" height="110" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="395" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">KV-Cache</text>
|
||||
<line x1="360" y1="82" x2="430" y2="82" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="395" y="100" text-anchor="middle" font-size="9" fill="#555">50 tok/s</text>
|
||||
<text x="395" y="115" text-anchor="middle" font-size="10" font-weight="700" fill="#333">100× faster</text>
|
||||
<text x="395" y="130" text-anchor="middle" font-size="9" fill="#555">generation</text>
|
||||
<text x="395" y="150" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">reuse attn state</text>
|
||||
|
||||
<!-- 5. Batching -->
|
||||
<rect x="455" y="50" width="100" height="110" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="505" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Batching</text>
|
||||
<line x1="470" y1="82" x2="540" y2="82" stroke="#bbb" stroke-width="0.8"/>
|
||||
<text x="505" y="100" text-anchor="middle" font-size="9" fill="#555">500 tok/s</text>
|
||||
<text x="505" y="115" text-anchor="middle" font-size="10" font-weight="700" fill="#333">1000× xput</text>
|
||||
<text x="505" y="130" text-anchor="middle" font-size="9" fill="#555">amortized</text>
|
||||
<text x="505" y="150" text-anchor="middle" font-size="8.5" font-style="italic" fill="#999">group requests</text>
|
||||
|
||||
<!-- 6. MLPerf (accent: deployable artifact) -->
|
||||
<rect x="565" y="50" width="100" height="110" rx="4" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2"/>
|
||||
<rect x="583" y="62" width="64" height="20" rx="10" fill="#a31f34"/>
|
||||
<text x="615" y="76" text-anchor="middle" font-size="10" font-weight="700" fill="#fff">MLPERF</text>
|
||||
<line x1="580" y1="94" x2="650" y2="94" stroke="#c87b2a" stroke-width="0.8"/>
|
||||
<text x="615" y="114" text-anchor="middle" font-size="9" fill="#555">production</text>
|
||||
<text x="615" y="128" text-anchor="middle" font-size="9" fill="#555">deployment</text>
|
||||
<text x="615" y="150" text-anchor="middle" font-size="8.5" font-style="italic" fill="#555">benchmark submit</text>
|
||||
|
||||
<!-- ===== Arrows between stages ===== -->
|
||||
<path d="M115,105 L125,105" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M225,105 L235,105" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M335,105 L345,105" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M445,105 L455,105" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M555,105 L565,105" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- ===== Footnote ===== -->
|
||||
<text x="340" y="200" text-anchor="middle" font-size="9" font-style="italic" fill="#999">Quantization and pruning shrink the model 8×; KV-cache and batching lift throughput 1000×.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.9 KiB |
53
tinytorch/quarto/assets/images/svg/tito-module-workflow.svg
Normal file
53
tinytorch/quarto/assets/images/svg/tito-module-workflow.svg
Normal file
@@ -0,0 +1,53 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Module development workflow: five-step cycle from module start to advancing to the next module. Follows the TinyTorch minimalist convention: neutral gray boxes with a single orange accent (Complete & Export) marking the essential tito command. Dashed gray arrow routes under the chain as the next-module return path. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 180"
|
||||
font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
|
||||
<rect width="680" height="180" 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>
|
||||
<marker id="arrow-muted" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
|
||||
<path d="M0,0 L8,3 L0,6 Z" fill="#bbb"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- ===== Panel header (top-left, no centered title) ===== -->
|
||||
<text x="20" y="22" font-size="12" font-weight="700" fill="#333">Module Development Workflow</text>
|
||||
|
||||
<!-- ===== Five workflow stages (w=110, pitch=130, y=48, h=52) ===== -->
|
||||
<rect x="20" y="48" width="110" height="52" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="75" y="70" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Start / Resume</text>
|
||||
<text x="75" y="86" text-anchor="middle" font-size="9" fill="#999">tito module start</text>
|
||||
|
||||
<rect x="150" y="48" width="110" height="52" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="205" y="70" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Edit in Jupyter</text>
|
||||
<text x="205" y="86" text-anchor="middle" font-size="9" fill="#999">implement solution</text>
|
||||
|
||||
<!-- Accent: the essential command -->
|
||||
<rect x="280" y="48" width="110" height="52" rx="4" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2"/>
|
||||
<text x="335" y="70" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Complete & Export</text>
|
||||
<text x="335" y="86" text-anchor="middle" font-size="9" fill="#555">tito module complete</text>
|
||||
|
||||
<rect x="410" y="48" width="110" height="52" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="465" y="70" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Test Import</text>
|
||||
<text x="465" y="86" text-anchor="middle" font-size="9" fill="#999">pytest · nbgrader</text>
|
||||
|
||||
<rect x="540" y="48" width="110" height="52" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="595" y="70" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Next Module</text>
|
||||
<text x="595" y="86" text-anchor="middle" font-size="9" fill="#999">advance to N+1</text>
|
||||
|
||||
<!-- ===== Forward arrows between stages ===== -->
|
||||
<path d="M130,74 L150,74" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M260,74 L280,74" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M390,74 L410,74" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M520,74 L540,74" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- ===== Return loop (dashed, muted, routed under the chain) ===== -->
|
||||
<path d="M595,100 L595,128 L75,128 L75,100" stroke="#bbb" stroke-width="1" stroke-dasharray="4,3" fill="none" marker-end="url(#arrow-muted)"/>
|
||||
<text x="335" y="124" text-anchor="middle" font-size="9" font-style="italic" fill="#999">repeat for each module</text>
|
||||
|
||||
<!-- ===== Footnote ===== -->
|
||||
<text x="340" y="165" text-anchor="middle" font-size="9" font-style="italic" fill="#999">The essential command is tito module complete N — it exports your notebook to the tinytorch package.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.7 KiB |
@@ -0,0 +1,51 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Progress-tracking flow: six-step chain from building modules to tracking achievement. Follows the TinyTorch minimalist convention. Single orange accent on "Unlock Milestones" marks the pivot from building code to earning historical recreations. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 680 160"
|
||||
font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
|
||||
<rect width="680" height="160" 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>
|
||||
|
||||
<!-- ===== Panel header ===== -->
|
||||
<text x="20" y="22" font-size="12" font-weight="700" fill="#333">Progress Tracking Flow</text>
|
||||
|
||||
<!-- ===== Six-stage chain (w=96, pitch=107, y=48, h=56) ===== -->
|
||||
<rect x="20" y="48" width="96" height="56" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="68" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Build Modules</text>
|
||||
<text x="68" y="88" text-anchor="middle" font-size="9" fill="#999">implement code</text>
|
||||
|
||||
<rect x="127" y="48" width="96" height="56" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="175" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Complete 01-20</text>
|
||||
<text x="175" y="88" text-anchor="middle" font-size="9" fill="#999">all 20 modules</text>
|
||||
|
||||
<rect x="234" y="48" width="96" height="56" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="282" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Export to Package</text>
|
||||
<text x="282" y="88" text-anchor="middle" font-size="9" fill="#999">tito module complete</text>
|
||||
|
||||
<!-- Accent: the pivot from building to earning -->
|
||||
<rect x="341" y="48" width="96" height="56" rx="4" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2"/>
|
||||
<text x="389" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Unlock Milestones</text>
|
||||
<text x="389" y="88" text-anchor="middle" font-size="9" fill="#555">progressive tests</text>
|
||||
|
||||
<rect x="448" y="48" width="96" height="56" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="496" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Achieve 1958-2018</text>
|
||||
<text x="496" y="88" text-anchor="middle" font-size="9" fill="#999">6 historical eras</text>
|
||||
|
||||
<rect x="555" y="48" width="96" height="56" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="603" y="72" text-anchor="middle" font-size="10" font-weight="700" fill="#333">Track Progress</text>
|
||||
<text x="603" y="88" text-anchor="middle" font-size="9" fill="#999">tito progress</text>
|
||||
|
||||
<!-- ===== Arrows between stages ===== -->
|
||||
<path d="M116,76 L127,76" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M223,76 L234,76" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M330,76 L341,76" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M437,76 L448,76" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M544,76 L555,76" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- ===== Footnote ===== -->
|
||||
<text x="340" y="145" text-anchor="middle" font-size="9" font-style="italic" fill="#999">Module progress (what you build) and milestone achievements (what your code can do) advance together.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
63
tinytorch/quarto/assets/images/svg/tito-test-hierarchy.svg
Normal file
63
tinytorch/quarto/assets/images/svg/tito-test-hierarchy.svg
Normal file
@@ -0,0 +1,63 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- TinyTorch test hierarchy: seven levels from fast inline checks at the top to destructive release validation at the bottom. Follows the minimalist convention. Single orange accent on RELEASE VALIDATION marks the destructive, careful-handling step. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 450"
|
||||
font-family="Helvetica Neue, Helvetica, Arial, sans-serif">
|
||||
<rect width="520" height="450" 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>
|
||||
|
||||
<!-- ===== Panel header ===== -->
|
||||
<text x="20" y="22" font-size="12" font-weight="700" fill="#333">Test Hierarchy</text>
|
||||
<text x="20" y="38" font-size="9" font-style="italic" fill="#999">fast feedback on top, destructive release on the bottom</text>
|
||||
|
||||
<!-- ===== Seven test levels (w=400, h=46, pitch=52, x=60) ===== -->
|
||||
<!-- 1. INLINE -->
|
||||
<rect x="60" y="56" width="400" height="46" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="260" y="74" text-anchor="middle" font-size="10" font-weight="700" fill="#333">INLINE TESTS</text>
|
||||
<text x="260" y="90" text-anchor="middle" font-size="9" fill="#999">embedded nbgrader checks in src/ files · progressive build validation</text>
|
||||
|
||||
<!-- 2. UNIT -->
|
||||
<rect x="60" y="108" width="400" height="46" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="260" y="126" text-anchor="middle" font-size="10" font-weight="700" fill="#333">UNIT TESTS</text>
|
||||
<text x="260" y="142" text-anchor="middle" font-size="9" fill="#999">individual component tests · pytest in tests/</text>
|
||||
|
||||
<!-- 3. CLI -->
|
||||
<rect x="60" y="160" width="400" height="46" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="260" y="178" text-anchor="middle" font-size="10" font-weight="700" fill="#333">CLI TESTS</text>
|
||||
<text x="260" y="194" text-anchor="middle" font-size="9" fill="#999">command-line interface validation · TITO command testing</text>
|
||||
|
||||
<!-- 4. INTEGRATION -->
|
||||
<rect x="60" y="212" width="400" height="46" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="260" y="230" text-anchor="middle" font-size="10" font-weight="700" fill="#333">INTEGRATION TESTS</text>
|
||||
<text x="260" y="246" text-anchor="middle" font-size="9" fill="#999">cross-module interactions · Module N depends on Module N-1</text>
|
||||
|
||||
<!-- 5. E2E -->
|
||||
<rect x="60" y="264" width="400" height="46" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="260" y="282" text-anchor="middle" font-size="10" font-weight="700" fill="#333">END-TO-END TESTS</text>
|
||||
<text x="260" y="298" text-anchor="middle" font-size="9" fill="#999">complete user journeys · setup → module → milestone</text>
|
||||
|
||||
<!-- 6. MILESTONE -->
|
||||
<rect x="60" y="316" width="400" height="46" rx="4" fill="#f7f7f7" stroke="#555" stroke-width="1.2"/>
|
||||
<text x="260" y="334" text-anchor="middle" font-size="10" font-weight="700" fill="#333">MILESTONE TESTS</text>
|
||||
<text x="260" y="350" text-anchor="middle" font-size="9" fill="#999">historical ML recreations · require full TinyTorch package</text>
|
||||
|
||||
<!-- 7. RELEASE (accent: destructive focal) -->
|
||||
<rect x="60" y="368" width="400" height="46" rx="4" fill="#fdebd0" stroke="#c87b2a" stroke-width="1.2"/>
|
||||
<text x="260" y="386" text-anchor="middle" font-size="10" font-weight="700" fill="#333">RELEASE VALIDATION</text>
|
||||
<text x="260" y="402" text-anchor="middle" font-size="9" fill="#555">full curriculum rebuild + all tests · DESTRUCTIVE — releases only</text>
|
||||
|
||||
<!-- ===== Vertical arrows ===== -->
|
||||
<path d="M260,102 L260,108" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M260,154 L260,160" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M260,206 L260,212" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M260,258 L260,264" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M260,310 L260,316" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
<path d="M260,362 L260,368" stroke="#555" stroke-width="1.2" fill="none" marker-end="url(#arrow)"/>
|
||||
|
||||
<!-- ===== Footnote ===== -->
|
||||
<text x="260" y="435" text-anchor="middle" font-size="9" font-style="italic" fill="#999">Run the upper tiers frequently; reserve release validation for final cuts.</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
@@ -120,13 +120,11 @@ Vision and language students have different goals. A computer vision engineer bu
|
||||
|
||||
## What You Can Build After This Tier
|
||||
|
||||
```{mermaid}
|
||||
#| fig-cap: "**Architecture Tier Milestones.** After completing modules 09-13, you unlock computer vision (1998 CNN) and language understanding (2017 Transformer) breakthroughs."
|
||||
timeline
|
||||
title Historical Achievements Unlocked
|
||||
1998 : CNN Revolution : 75%+ accuracy on CIFAR-10 with spatial intelligence
|
||||
2017 : Transformer Era : Text generation with attention mechanisms
|
||||
```
|
||||
::: {#fig-architecture-milestones fig-env="figure" fig-pos="htb" fig-cap="**Architecture tier milestones.** After completing modules 09-13, you unlock two era-defining architectures — LeNet-5's CNN revolution (1998), which proved convolution beats fully connected on images, and the Transformer era (2017), which replaced recurrence with attention as the default for sequences." fig-alt="Horizontal timeline with two red year pills (1998, 2017) dropping to two blue milestone cards: CNN Revolution reaching 75%+ on CIFAR-10 with spatial intelligence; Transformer Era enabling text generation powered by attention mechanisms."}
|
||||
|
||||
|
||||
|
||||
:::
|
||||
|
||||
After completing the Architecture tier, you'll be able to:
|
||||
|
||||
|
||||
@@ -152,14 +152,11 @@ This order isn't arbitrary—it's the minimal dependency chain. You can't build
|
||||
|
||||
## What You Can Build After This Tier
|
||||
|
||||
```{mermaid}
|
||||
#| fig-cap: "**Foundation Tier Milestones.** After completing modules 01-08, you unlock three historical achievements spanning three decades of neural network breakthroughs."
|
||||
timeline
|
||||
title Historical Achievements Unlocked
|
||||
1958 : Perceptron : Binary classification with gradient descent
|
||||
1969 : XOR Crisis Solved : Hidden layers enable non-linear learning
|
||||
1986 : MLP Revival : Multi-layer networks achieve 95%+ on MNIST
|
||||
```
|
||||
::: {#fig-foundation-milestones fig-env="figure" fig-pos="htb" fig-cap="**Foundation tier milestones.** After completing modules 01-08, you unlock three historical breakthroughs spanning three decades — Rosenblatt's Perceptron (1958), the resolution of the XOR crisis with hidden layers (1969), and the MLP revival with backpropagation reaching 95%+ on MNIST (1986)." fig-alt="Horizontal timeline with three red year pills (1958, 1969, 1986) dropping to three blue milestone cards: Perceptron with binary classification and gradient descent; XOR Crisis Solved with hidden layers enabling non-linear learning; MLP Revival reaching 95%+ on MNIST via backpropagation."}
|
||||
|
||||
|
||||
|
||||
:::
|
||||
|
||||
After completing the Foundation tier, you'll be able to:
|
||||
|
||||
|
||||
@@ -109,17 +109,11 @@ The Optimization tier teaches you how to make ML systems fast, small, and deploy
|
||||
|
||||
## What You Can Build After This Tier
|
||||
|
||||
```{mermaid}
|
||||
#| fig-cap: "**Production Optimization Timeline.** Progressive improvements from baseline to production-ready: 8-16× smaller models and 12-40× faster inference."
|
||||
timeline
|
||||
title Production-Ready Systems
|
||||
Baseline : 100MB model, 0.5 tokens/sec, 95% accuracy
|
||||
Quantization : 25MB model (4× smaller), same accuracy
|
||||
Pruning : 12MB model (8× smaller), 94% accuracy
|
||||
KV-Cache : 50 tokens/sec (100× faster generation)
|
||||
Batching : 500 tokens/sec (1000× throughput)
|
||||
MLPerf Olympics : Production-ready transformer deployment
|
||||
```
|
||||
::: {#fig-optimization-milestones fig-env="figure" fig-pos="htb" fig-cap="**Optimization tier milestones.** Six stages that compound from a baseline model to an MLPerf-ready deployment. Size-reduction techniques (quantization, pruning) shrink the model 8× with at most 1 pp accuracy loss. Speed techniques (KV-cache, batching) lift throughput 1000× through reuse and amortization. The final MLPerf submission is the deployable artifact." fig-alt="Six boxes left to right: Baseline (gray, 100MB/0.5 tok/s), Quantization (orange, 4× smaller), Pruning (orange, 8× smaller), KV-Cache (green, 100× faster), Batching (green, 1000× throughput), and MLPerf (red accent pill, production-ready). Neutral arrows connect them. Phase labels underneath read REFERENCE, SIZE REDUCTION, SPEED GAINS, DEPLOY."}
|
||||
|
||||
|
||||
|
||||
:::
|
||||
|
||||
After completing the Optimization tier, you'll be able to:
|
||||
|
||||
|
||||
@@ -14,22 +14,11 @@ title: "Progress & Data Management"
|
||||
|
||||
TinyTorch uses a clean, simple approach to track your ML systems engineering journey:
|
||||
|
||||
```{mermaid}
|
||||
#| fig-cap: "**Progress Tracking Flow.** Build modules, export to package, unlock historical milestones, and track achievements through two parallel systems."
|
||||
graph LR
|
||||
A[Build Modules] --> B[Complete 01-20]
|
||||
B --> C[Export to Package]
|
||||
C --> D[Unlock Milestones]
|
||||
D --> E[Achieve 1958-2018]
|
||||
E --> F[Track Progress]
|
||||
::: {#fig-tito-progress-tracking fig-env="figure" fig-pos="htb" fig-cap="**Progress tracking flow.** Build modules, export them to the package, unlock historical milestones as progressive tests pass, and track progress through tito commands. Two parallel signals — module progress and milestone achievement — advance together." fig-alt="Six boxes left to right: Build Modules and Complete 01-20 in blue; Export to Package, Unlock Milestones, and Achieve 1958-2018 in green; Track Progress in orange. Neutral arrows connect them. Phase labels underneath read BUILD, UNLOCK, MONITOR."}
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#fffbeb
|
||||
style C fill:#f0fdf4
|
||||
style D fill:#fef3c7
|
||||
style E fill:#f3e5f5
|
||||
style F fill:#e8eaf6
|
||||
```
|
||||
|
||||
|
||||
:::
|
||||
|
||||
### The Two Systems
|
||||
|
||||
|
||||
@@ -14,20 +14,11 @@ title: "Module Workflow"
|
||||
|
||||
TinyTorch follows a simple build-export-validate cycle:
|
||||
|
||||
```{mermaid}
|
||||
#| fig-cap: "**Module Development Workflow.** The core cycle for building TinyTorch: start a module, edit in Jupyter, export to the package, test your imports, then move to the next module."
|
||||
graph LR
|
||||
A[Start/Resume Module] --> B[Edit in Jupyter]
|
||||
B --> C[Complete & Export]
|
||||
C --> D[Test Import]
|
||||
D --> E[Next Module]
|
||||
::: {#fig-tito-module-workflow fig-env="figure" fig-pos="htb" fig-cap="**Module development workflow.** The core build-export-validate cycle: start a module, edit it in Jupyter, export it to the package, test the import, then move to the next module. The dashed loop returns to the start for each new module." fig-alt="Five boxes in a horizontal chain: Start/Resume (blue), Edit in Jupyter (blue), Complete and Export (green), Test Import (orange), Next Module (blue). Solid arrows connect them left to right. A dashed gray arrow loops from Next Module back to Start/Resume under the chain, labeled repeat for each module."}
|
||||
|
||||
style A fill:#e3f2fd
|
||||
style B fill:#fffbeb
|
||||
style C fill:#f0fdf4
|
||||
style D fill:#fef3c7
|
||||
style E fill:#f3e5f5
|
||||
```
|
||||
|
||||
|
||||
:::
|
||||
|
||||
**The essential command**: `tito module complete XX` - exports your code to the TinyTorch package
|
||||
|
||||
|
||||
@@ -14,35 +14,11 @@ title: "Developer Testing Guide"
|
||||
|
||||
TinyTorch uses a **progressive testing hierarchy** that mirrors how the framework builds from simple components to full functionality:
|
||||
|
||||
```{mermaid}
|
||||
flowchart TB
|
||||
subgraph hierarchy["Test Hierarchy (Bottom to Top)"]
|
||||
direction TB
|
||||
::: {#fig-tito-test-hierarchy fig-env="figure" fig-pos="htb" fig-cap="**TinyTorch test hierarchy.** Fast feedback tests (inline, unit, CLI) run frequently during development. Coordination tests (integration, end-to-end) verify that modules compose correctly. Milestone tests recreate historical ML results to prove the whole framework works. Release validation is destructive and runs only at release cuts." fig-alt="Seven stacked boxes connected by vertical arrows. From top: INLINE TESTS, UNIT TESTS, CLI TESTS (all blue for fast feedback), INTEGRATION TESTS, END-TO-END TESTS (orange for coordination), MILESTONE TESTS (green for validation), RELEASE VALIDATION (red for destructive). Side labels mark fast, mid, full, destructive scopes."}
|
||||
|
||||
INLINE["<b>INLINE TESTS</b><br/>Embedded nbgrader tests in src/ files<br/><i>Progressive build validation</i>"]
|
||||
UNIT["<b>UNIT TESTS</b><br/>Individual component tests<br/><i>pytest in tests/</i>"]
|
||||
CLI["<b>CLI TESTS</b><br/>Command-line interface validation<br/><i>TITO command testing</i>"]
|
||||
INTEGRATION["<b>INTEGRATION TESTS</b><br/>Cross-module interactions<br/><i>Module 2 depends on Module 1</i>"]
|
||||
E2E["<b>END-TO-END TESTS</b><br/>Complete user journeys<br/><i>setup → module → milestone</i>"]
|
||||
MILESTONE["<b>MILESTONE TESTS</b><br/>Historical ML recreations<br/><i>Require full TinyTorch package</i>"]
|
||||
RELEASE["<b>RELEASE VALIDATION</b><br/>Full curriculum rebuild + all tests<br/><i>DESTRUCTIVE - releases only</i>"]
|
||||
|
||||
|
||||
INLINE --> UNIT
|
||||
UNIT --> CLI
|
||||
CLI --> INTEGRATION
|
||||
INTEGRATION --> E2E
|
||||
E2E --> MILESTONE
|
||||
MILESTONE --> RELEASE
|
||||
end
|
||||
|
||||
style INLINE fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
|
||||
style UNIT fill:#e3f2fd,stroke:#2196f3,stroke-width:2px
|
||||
style CLI fill:#e3f2fd,stroke:#2196f3,stroke-width:2px
|
||||
style INTEGRATION fill:#fff3e0,stroke:#ff9800,stroke-width:2px
|
||||
style E2E fill:#fff3e0,stroke:#ff9800,stroke-width:2px
|
||||
style MILESTONE fill:#fce4ec,stroke:#e91e63,stroke-width:2px
|
||||
style RELEASE fill:#ffebee,stroke:#f44336,stroke-width:3px
|
||||
```
|
||||
:::
|
||||
|
||||
## Quick Reference
|
||||
|
||||
|
||||
Reference in New Issue
Block a user