a9039df6de
The subscribe modal (shared across the book, site, labs, kits, and mlsysim subsites) was a plain div overlay: - No role="dialog", aria-modal, or accessible name, so screen readers never announced it as a dialog and could wander into the page behind the overlay. - No focus trap: Tab walked out of the modal into the visually hidden background page. - Focus was never returned to the triggering element on close, dropping keyboard users at the top of the document. - Open/close animations played regardless of prefers-reduced-motion. Changes to the canonical shared/scripts/subscribe-modal.js: - role="dialog" aria-modal="true" aria-labelledby on the container, with an id on the existing title. - Tab/Shift+Tab now cycle within the modal's visible, enabled controls (computed per keypress, so the trap also works on the post-submit success view). - The opener element is saved on openModal() and refocused on close. - Animations are disabled under prefers-reduced-motion: reduce. Mirrors regenerated with shared/scripts/sync-mirrors.sh (CI drift check). Escape-to-close and overlay-click behavior unchanged.
Note
📌 Early release (2026)
Co-Labs shipped with the 2026 MLSysBook refresh. Lab notebooks, WASM builds, and scoring flows are actively iterated as we refine the hands-on curriculum.
Feedback — GitHub issues or pull requests.
Co-Labs
34 Interactive Labs Powered by MLSys·IM
Predict → Discover → Explain
What Are Co-Labs?
Co-Labs are interactive Marimo notebooks that bridge the gap between reading about ML systems (the textbook) and building them from scratch (TinyTorch). Every lab runs in your browser via WebAssembly — no installation required.
How Labs Work
Each lab follows a consistent structure:
- Briefing — Learning objectives, prerequisites, and the core question
- Parts A–E — Tabbed explorations, each with a prediction lock, interactive instruments, and a reveal
- Synthesis — Key takeaways, textbook connections, and a pointer to the next lab
Every prediction is structured (radio buttons or numeric entry, never free text). You predict first, then explore the instruments to discover whether you were right. The gap between prediction and reality is the learning moment.
Lab Inventory
Volume I: Foundations (17 labs · Single-machine ML systems)
| # | Slug | Title |
|---|---|---|
| 00 | lab_00_introduction |
The Architect's Portal (orientation) |
| 01 | lab_01_ml_intro |
The AI Triad |
| 02 | lab_02_ml_systems |
The Iron Law |
| 03 | lab_03_ml_workflow |
The Silent Degradation Loop |
| 04 | lab_04_data_engr |
The Data Gravity Trap |
| 05 | lab_05_nn_compute |
The Activation Tax |
| 06 | lab_06_nn_arch |
The Quadratic Wall |
| 07 | lab_07_ml_frameworks |
The Kernel Fusion Dividend |
| 08 | lab_08_model_train |
The Training Memory Budget |
| 09 | lab_09_data_selection |
The Data Selection Tradeoff |
| 10 | lab_10_model_compress |
The Compression Frontier |
| 11 | lab_11_hw_accel |
The Roofline |
| 12 | lab_12_perf_bench |
The Speedup Ceiling |
| 13 | lab_13_model_serving |
The Tail Latency Trap |
| 14 | lab_14_ml_ops |
The Silent Degradation Problem |
| 15 | lab_15_responsible_engr |
There Is No Free Fairness |
| 16 | lab_16_ml_conclusion |
The Architect's Audit (capstone) |
Volume II: At Scale (16 labs · Distributed ML systems)
| # | Slug | Title |
|---|---|---|
| 01 | lab_01_introduction |
The Scale Illusion |
| 02 | lab_02_compute_infra |
The Compute Infrastructure Wall |
| 03 | lab_03_communication |
Network Fabric Design |
| 04 | lab_04_data_storage |
The Data Pipeline Wall |
| 05 | lab_05_dist_train |
The Parallelism Puzzle |
| 06 | lab_06_collective_communication |
Collective Communication |
| 07 | lab_07_fault_tolerance |
When Failure Is Routine |
| 08 | lab_08_fleet_orch |
The Scheduling Trap |
| 09 | lab_09_perf_engineering |
The Optimization Trap |
| 10 | lab_10_inference |
The Inference Economy |
| 11 | lab_11_edge_intelligence |
The Edge Thermodynamics Lab |
| 12 | lab_12_ops_scale |
The Silent Fleet |
| 13 | lab_13_security_privacy |
The Price of Privacy |
| 14 | lab_14_robust_ai |
The Robustness Budget |
| 15 | lab_15_sustainable_ai |
The Carbon Budget |
| 16 | lab_16_responsible_ai |
The Fairness Budget |
| 17 | lab_17_fleet_synthesis |
The Fleet Synthesis (capstone) |
The Design Ledger
Every lab saves your predictions and design decisions to the Design Ledger — an IndexedDB-backed persistence layer in your browser, with a local file fallback when running outside WebAssembly. Later labs read earlier decisions: Lab 08's training memory budget builds on Lab 05's activation analysis, which builds on Lab 01's magnitude calibration. The capstone labs synthesize your full Design Ledger into a portfolio.
Running Labs
In the Browser (Recommended)
Visit the Co-Labs site and click any lab. They run via Marimo + WebAssembly with zero setup.
Locally
git clone https://github.com/harvard-edge/cs249r_book.git
cd cs249r_book
python3 -m pip install -r labs/requirements.txt
python3 -m pip install -e mlsysim
cd labs
marimo run vol1/lab_01_ml_intro.py
Development
See PROTOCOL.md for the lab development specification and TEMPLATE.md for the cell architecture and quality checklist.
Running Tests
pytest tests/test_static.py -v
Related Resources
| Resource | Description |
|---|---|
| Textbook | ML Systems principles and practices |
| TinyTorch | Build your own ML framework from scratch |
| Discussions | Ask questions, share feedback |
Contributors
Thanks to these wonderful people who helped build the labs!
Legend: 🪲 Bug Hunter · ⚡ Code Warrior · 📚 Documentation Hero · 🎨 Design Artist · 🧠 Idea Generator · 🔎 Code Reviewer · 🧪 Test Engineer · 🛠️ Tool Builder
 Rocky 🪲 🧑💻 🎨 ✍️ 🧪 |
 Farhan Asghar 🪲 🧑💻 🎨 ✍️ |
 Vijay Janapa Reddi 🧑💻 🎨 ✍️ |
 Peter Koellner 🪲 🧑💻 |
 Salman Chishti 🧑💻 |
 Pratham Chaudhary 🧑💻 |
Recognize a contributor: Comment on any issue or PR:
@all-contributors please add @username for code, tutorial, test, or doc
Predict. Discover. Explain.