mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-07-24 08:47:40 -05:00
2074 lines
98 KiB
HTML
2074 lines
98 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
|
||
|
||
<meta charset="utf-8">
|
||
<meta name="generator" content="quarto-1.9.38">
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||
|
||
|
||
<title>Page Not Found – TinyTorch</title>
|
||
<style>
|
||
/* Default styles provided by pandoc.
|
||
** See https://pandoc.org/MANUAL.html#variables-for-html for config info.
|
||
*/
|
||
code{white-space: pre-wrap;}
|
||
span.smallcaps{font-variant: small-caps;}
|
||
div.columns{display: flex; gap: min(4vw, 1.5em);}
|
||
div.column{flex: auto; overflow-x: auto;}
|
||
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
|
||
ul.task-list{list-style: none;}
|
||
ul.task-list li input[type="checkbox"] {
|
||
width: 0.8em;
|
||
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
|
||
vertical-align: middle;
|
||
}
|
||
</style>
|
||
|
||
|
||
<script src="/tinytorch/site_libs/quarto-nav/quarto-nav.js"></script>
|
||
<script src="/tinytorch/site_libs/clipboard/clipboard.min.js"></script>
|
||
<script src="/tinytorch/site_libs/quarto-search/autocomplete.umd.js"></script>
|
||
<script src="/tinytorch/site_libs/quarto-search/fuse.min.js"></script>
|
||
<script src="/tinytorch/site_libs/quarto-search/quarto-search.js"></script>
|
||
<meta name="quarto:offset" content="/tinytorch/">
|
||
<link href="/tinytorch/./assets/images/favicon.svg" rel="icon" type="image/svg+xml">
|
||
<script src="/tinytorch/site_libs/quarto-html/quarto.js" type="module"></script>
|
||
<script src="/tinytorch/site_libs/quarto-html/tabsets/tabsets.js" type="module"></script>
|
||
<script src="/tinytorch/site_libs/quarto-html/popper.min.js"></script>
|
||
<script src="/tinytorch/site_libs/quarto-html/tippy.umd.min.js"></script>
|
||
<script src="/tinytorch/site_libs/quarto-html/anchor.min.js"></script>
|
||
<link href="/tinytorch/site_libs/quarto-html/tippy.css" rel="stylesheet">
|
||
<link href="/tinytorch/site_libs/quarto-html/quarto-syntax-highlighting-d58168542e1b05ab509c510cbeb13b13.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
|
||
<link href="/tinytorch/site_libs/quarto-html/quarto-syntax-highlighting-dark-88e37a8f5ac5aee93fe4de4f1f74577c.css" rel="stylesheet" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
|
||
<link href="/tinytorch/site_libs/quarto-html/quarto-syntax-highlighting-d58168542e1b05ab509c510cbeb13b13.css" rel="stylesheet" class="quarto-color-scheme-extra" id="quarto-text-highlighting-styles">
|
||
<script src="/tinytorch/site_libs/bootstrap/bootstrap.min.js"></script>
|
||
<link href="/tinytorch/site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
|
||
<link href="/tinytorch/site_libs/bootstrap/bootstrap-2bab33dbe7817173bbc4a78ab485562b.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
|
||
<link href="/tinytorch/site_libs/bootstrap/bootstrap-dark-41c6c8aaa029f41185ba15883681b9bb.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="light">
|
||
<link href="/tinytorch/site_libs/bootstrap/bootstrap-2bab33dbe7817173bbc4a78ab485562b.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme-extra" id="quarto-bootstrap" data-mode="light">
|
||
<script id="quarto-search-options" type="application/json">{
|
||
"location": "navbar",
|
||
"copy-button": false,
|
||
"collapse-after": 3,
|
||
"panel-placement": "end",
|
||
"type": "overlay",
|
||
"limit": 50,
|
||
"keyboard-shortcut": [
|
||
"/"
|
||
],
|
||
"language": {
|
||
"search-no-results-text": "No results",
|
||
"search-matching-documents-text": "matching documents",
|
||
"search-copy-link-title": "Copy link to search",
|
||
"search-hide-matches-text": "Hide additional matches",
|
||
"search-more-match-text": "more match in this document",
|
||
"search-more-matches-text": "more matches in this document",
|
||
"search-clear-button-title": "Clear",
|
||
"search-text-placeholder": "",
|
||
"search-detached-cancel-button-title": "Cancel",
|
||
"search-submit-button-title": "Submit",
|
||
"search-label": "Search"
|
||
}
|
||
}</script>
|
||
<!-- Shared head includes — MLSysBook ecosystem -->
|
||
|
||
<!--
|
||
theme-persist (inline, sync) — applies stored color-scheme before first paint.
|
||
Inlined deliberately: runs before any other <script>, no extra round-trip,
|
||
and avoids per-subsite asset path differences. Canonical source:
|
||
shared/scripts/theme-persist.js (kept identical for documentation/testability).
|
||
If you change one, mirror the change to the other.
|
||
-->
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
var STORAGE_KEY = 'quarto-color-scheme';
|
||
// Quarto's toggle writes 'alternate'/'default' (alternate = dark, the
|
||
// layered sheet); sibling non-Quarto sites write 'dark'/'light'. Both
|
||
// hit the same key, so we accept either. Quarto's own startup still
|
||
// checks `=== 'alternate'`, so we mirror onto <html> rather than rewrite.
|
||
function normalize(v) {
|
||
if (v === 'dark' || v === 'alternate') return 'dark';
|
||
if (v === 'light' || v === 'default') return 'light';
|
||
return null;
|
||
}
|
||
function preferredScheme() {
|
||
try {
|
||
var n = normalize(window.localStorage.getItem(STORAGE_KEY));
|
||
if (n) return n;
|
||
} catch (e) {}
|
||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||
return 'dark';
|
||
}
|
||
return 'light';
|
||
}
|
||
function apply(scheme) {
|
||
var html = document.documentElement;
|
||
if (!html) return;
|
||
html.setAttribute('data-bs-theme', scheme);
|
||
html.setAttribute('data-quarto-color-scheme', scheme);
|
||
html.style.colorScheme = scheme;
|
||
// Bridge to legacy `.quarto-dark` body class — about.css,
|
||
// community.css, and newsletter.css key their dark-mode CSS
|
||
// variables off `.quarto-dark { ... }`. Quarto's own toggle adds
|
||
// that class on click, but the OS-pref / first-paint path never
|
||
// does. Mirror the scheme onto body so those CSS variables fire
|
||
// on every dark path, not just toggle clicks. body may not exist
|
||
// yet on the first call (this script runs in <head>); a
|
||
// MutationObserver below catches it as soon as it parses.
|
||
var body = document.body;
|
||
if (body) body.classList.toggle('quarto-dark', scheme === 'dark');
|
||
}
|
||
apply(preferredScheme());
|
||
// Catch the FOUC window between <head> apply() and DOMContentLoaded:
|
||
// <body> may not exist yet at first apply(), but as soon as the
|
||
// parser appends it we want the legacy class bridge in place so any
|
||
// CSS keyed on `.quarto-dark` paints correctly on first render.
|
||
if (!document.body) {
|
||
var earlyObserver = new MutationObserver(function () {
|
||
if (document.body) {
|
||
apply(preferredScheme());
|
||
earlyObserver.disconnect();
|
||
}
|
||
});
|
||
earlyObserver.observe(document.documentElement, { childList: true });
|
||
}
|
||
// Quarto's toggle updates localStorage but not <html>, so wrap it to
|
||
// mirror the new value onto data-bs-theme; otherwise clicking the toggle
|
||
// leaves CSS keyed off [data-bs-theme="dark"] rendering against the wrong
|
||
// stylesheet until the next reload.
|
||
function syncFromStorage() {
|
||
try {
|
||
var n = normalize(window.localStorage.getItem(STORAGE_KEY));
|
||
if (n) apply(n);
|
||
} catch (e) {}
|
||
}
|
||
function wrapToggle() {
|
||
var orig = window.quartoToggleColorScheme;
|
||
if (typeof orig !== 'function' || orig.__mlsbWrapped) return;
|
||
var wrapped = function () { var r = orig.apply(this, arguments); syncFromStorage(); return r; };
|
||
wrapped.__mlsbWrapped = true;
|
||
window.quartoToggleColorScheme = wrapped;
|
||
}
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', function () { wrapToggle(); syncFromStorage(); });
|
||
} else {
|
||
wrapToggle(); syncFromStorage();
|
||
}
|
||
// Defend the legacy `.quarto-dark` body class against Quarto's own
|
||
// `toggleBodyColor(mode)`, which runs *after* this script and re-asserts
|
||
// the body class based on `mode` — and `mode` defaults to 'light' when
|
||
// there's no stored quarto-color-scheme value, even when the OS / first
|
||
// paint already resolved to dark via `data-bs-theme`. Without this
|
||
// observer, on every fresh visit Quarto would clobber our bridge and
|
||
// restore `.quarto-light`, leaving `.quarto-dark`-keyed CSS variables
|
||
// (about/community/newsletter pages) at their light-mode defaults
|
||
// against the dark `data-bs-theme="dark"` background.
|
||
function bridgeBody() {
|
||
var body = document.body;
|
||
if (!body) return;
|
||
var wantDark = document.documentElement.getAttribute('data-bs-theme') === 'dark';
|
||
if (wantDark && !body.classList.contains('quarto-dark')) {
|
||
body.classList.add('quarto-dark');
|
||
body.classList.remove('quarto-light');
|
||
} else if (!wantDark && body.classList.contains('quarto-dark')) {
|
||
body.classList.remove('quarto-dark');
|
||
body.classList.add('quarto-light');
|
||
}
|
||
}
|
||
function watchBody() {
|
||
if (!document.body) return;
|
||
bridgeBody();
|
||
var bodyObs = new MutationObserver(bridgeBody);
|
||
bodyObs.observe(document.body, { attributes: true, attributeFilter: ['class'] });
|
||
var htmlObs = new MutationObserver(bridgeBody);
|
||
htmlObs.observe(document.documentElement, { attributes: true, attributeFilter: ['data-bs-theme'] });
|
||
}
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', watchBody);
|
||
} else {
|
||
watchBody();
|
||
}
|
||
window.addEventListener('storage', function (ev) {
|
||
if (ev.key !== STORAGE_KEY) return;
|
||
var n = normalize(ev.newValue);
|
||
if (n) apply(n);
|
||
});
|
||
if (window.matchMedia) {
|
||
try {
|
||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (ev) {
|
||
try { if (window.localStorage.getItem(STORAGE_KEY)) return; } catch (e) {}
|
||
apply(ev.matches ? 'dark' : 'light');
|
||
});
|
||
} catch (e) {}
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<!--
|
||
Build-stamp styling. Tiny, neutral, dark-mode aware. The actual stamp text
|
||
is injected by shared/scripts/inject-build-stamp.sh into footer markup
|
||
containing the literal MLSB_BUILD_STAMP HTML-comment token (see that
|
||
script for the exact pattern — we cannot write it here because HTML
|
||
comments cannot nest and the inner closer would terminate this block).
|
||
-->
|
||
<style>
|
||
.mlsb-build-stamp {
|
||
display: inline-block;
|
||
margin-top: 0.25rem;
|
||
font-size: 0.75rem;
|
||
opacity: 0.6;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
[data-bs-theme="dark"] .mlsb-build-stamp { opacity: 0.5; }
|
||
</style>
|
||
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||
<link rel="icon" href="https://mlsysbook.ai/vol1/assets/images/icons/favicon.png" type="image/png">
|
||
|
||
<!--
|
||
navbar-theme-toggle-relocate — moves the Quarto theme toggle into the
|
||
navbar's right-side .navbar-nav group at page load, so it collapses into
|
||
the hamburger menu alongside Subscribe/Star/Support/GitHub at narrow widths
|
||
instead of being stranded in the middle by Quarto's mx-auto brand layout.
|
||
|
||
Why JS: Quarto auto-injects the toggle into .quarto-navbar-tools (outside
|
||
.navbar-collapse). CSS can't move DOM nodes between containers, and CSS
|
||
positioning hacks (absolute/right: 50px) fight Bootstrap's responsive
|
||
layout below 992px. Moving the node once at startup is the standard
|
||
approach used across Quarto-based sites with the same problem.
|
||
-->
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
function relocateThemeToggle() {
|
||
var tools = document.querySelector('.quarto-navbar-tools');
|
||
if (!tools) return;
|
||
var toggle = tools.querySelector('.quarto-color-scheme-toggle');
|
||
if (!toggle) return;
|
||
var navRight = document.querySelector(
|
||
'.navbar .navbar-collapse .navbar-nav.ms-auto'
|
||
) || document.querySelector(
|
||
'.navbar .navbar-collapse .navbar-nav:last-of-type'
|
||
);
|
||
if (!navRight) return;
|
||
var li = document.createElement('li');
|
||
li.className = 'nav-item navbar-theme-toggle-item';
|
||
toggle.classList.add('nav-link');
|
||
li.appendChild(toggle);
|
||
navRight.appendChild(li);
|
||
tools.style.display = 'none';
|
||
}
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', relocateThemeToggle);
|
||
} else {
|
||
relocateThemeToggle();
|
||
}
|
||
})();
|
||
</script>
|
||
|
||
<!--
|
||
navbar-brand-href-fix — force the navbar brand link to the ecosystem root
|
||
(https://mlsysbook.ai/) on every subsite.
|
||
|
||
Quarto sets each subsite's `site-url` to `https://mlsysbook.ai/<subsite>/`
|
||
and then relativizes any navbar.href value that lives inside the
|
||
site-url's domain. The shared `href: https://mlsysbook.ai/` in
|
||
navbar-common.yml therefore gets emitted as `./index.html`, which on
|
||
vol1/vol2/tinytorch/etc. resolves to *that subsite's* root rather than
|
||
the ecosystem landing page. Override the brand link href in JS after
|
||
Quarto's render: this is a one-line user-experience fix that does not
|
||
fight Quarto's URL machinery.
|
||
-->
|
||
<script>
|
||
(function () {
|
||
'use strict';
|
||
function fixBrandHref() {
|
||
var brand = document.querySelectorAll(
|
||
'.navbar .navbar-brand, .navbar .navbar-brand-logo'
|
||
);
|
||
for (var i = 0; i < brand.length; i++) {
|
||
brand[i].setAttribute('href', 'https://mlsysbook.ai/');
|
||
}
|
||
}
|
||
if (document.readyState === 'loading') {
|
||
document.addEventListener('DOMContentLoaded', fixBrandHref);
|
||
} else {
|
||
fixBrandHref();
|
||
}
|
||
})();
|
||
</script>
|
||
<link rel="apple-touch-icon" href="/tinytorch/assets/images/logos/logo-tinytorch.png">
|
||
<meta name="theme-color" content="#D4740C">
|
||
<!-- Release identity (rendered into the footer pill below).
|
||
The publish workflow drops release-manifest.json at
|
||
/tinytorch/release-manifest.json before deploy; preview
|
||
and local renders silently no-op. -->
|
||
<meta name="release-manifest" content="/tinytorch/release-manifest.json">
|
||
|
||
|
||
<meta property="og:title" content="Page Not Found – TinyTorch">
|
||
<meta property="og:image" content="https://mlsysbook.ai/tinytorch/assets/images/logos/logo-tinytorch.png">
|
||
<meta property="og:site_name" content="TinyTorch">
|
||
<meta property="og:locale" content="en_US">
|
||
<meta property="og:image:height" content="328">
|
||
<meta property="og:image:width" content="583">
|
||
<meta name="twitter:title" content="Page Not Found – TinyTorch">
|
||
<meta name="twitter:image" content="https://mlsysbook.ai/tinytorch/assets/images/logos/logo-tinytorch.png">
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:image-height" content="328">
|
||
<meta name="twitter:image-width" content="583">
|
||
</head>
|
||
|
||
<body class="nav-fixed quarto-light"><script id="quarto-html-before-body" type="application/javascript">
|
||
const toggleBodyColorMode = (bsSheetEl) => {
|
||
const mode = bsSheetEl.getAttribute("data-mode");
|
||
const bodyEl = window.document.querySelector("body");
|
||
if (mode === "dark") {
|
||
bodyEl.classList.add("quarto-dark");
|
||
bodyEl.classList.remove("quarto-light");
|
||
} else {
|
||
bodyEl.classList.add("quarto-light");
|
||
bodyEl.classList.remove("quarto-dark");
|
||
}
|
||
}
|
||
const toggleBodyColorPrimary = () => {
|
||
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap:not([rel=disabled-stylesheet])");
|
||
if (bsSheetEl) {
|
||
toggleBodyColorMode(bsSheetEl);
|
||
}
|
||
}
|
||
const setColorSchemeToggle = (alternate) => {
|
||
const toggles = window.document.querySelectorAll('.quarto-color-scheme-toggle');
|
||
for (let i=0; i < toggles.length; i++) {
|
||
const toggle = toggles[i];
|
||
if (toggle) {
|
||
if (alternate) {
|
||
toggle.classList.add("alternate");
|
||
} else {
|
||
toggle.classList.remove("alternate");
|
||
}
|
||
}
|
||
}
|
||
};
|
||
const toggleColorMode = (alternate) => {
|
||
// Switch the stylesheets
|
||
const primaryStylesheets = window.document.querySelectorAll('link.quarto-color-scheme:not(.quarto-color-alternate)');
|
||
const alternateStylesheets = window.document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
|
||
manageTransitions('#quarto-margin-sidebar .nav-link', false);
|
||
if (alternate) {
|
||
// note: dark is layered on light, we don't disable primary!
|
||
enableStylesheet(alternateStylesheets);
|
||
for (const sheetNode of alternateStylesheets) {
|
||
if (sheetNode.id === "quarto-bootstrap") {
|
||
toggleBodyColorMode(sheetNode);
|
||
}
|
||
}
|
||
} else {
|
||
disableStylesheet(alternateStylesheets);
|
||
enableStylesheet(primaryStylesheets)
|
||
toggleBodyColorPrimary();
|
||
}
|
||
manageTransitions('#quarto-margin-sidebar .nav-link', true);
|
||
// Switch the toggles
|
||
setColorSchemeToggle(alternate)
|
||
// Hack to workaround the fact that safari doesn't
|
||
// properly recolor the scrollbar when toggling (#1455)
|
||
if (navigator.userAgent.indexOf('Safari') > 0 && navigator.userAgent.indexOf('Chrome') == -1) {
|
||
manageTransitions("body", false);
|
||
window.scrollTo(0, 1);
|
||
setTimeout(() => {
|
||
window.scrollTo(0, 0);
|
||
manageTransitions("body", true);
|
||
}, 40);
|
||
}
|
||
}
|
||
const disableStylesheet = (stylesheets) => {
|
||
for (let i=0; i < stylesheets.length; i++) {
|
||
const stylesheet = stylesheets[i];
|
||
stylesheet.rel = 'disabled-stylesheet';
|
||
}
|
||
}
|
||
const enableStylesheet = (stylesheets) => {
|
||
for (let i=0; i < stylesheets.length; i++) {
|
||
const stylesheet = stylesheets[i];
|
||
if(stylesheet.rel !== 'stylesheet') { // for Chrome, which will still FOUC without this check
|
||
stylesheet.rel = 'stylesheet';
|
||
}
|
||
}
|
||
}
|
||
const manageTransitions = (selector, allowTransitions) => {
|
||
const els = window.document.querySelectorAll(selector);
|
||
for (let i=0; i < els.length; i++) {
|
||
const el = els[i];
|
||
if (allowTransitions) {
|
||
el.classList.remove('notransition');
|
||
} else {
|
||
el.classList.add('notransition');
|
||
}
|
||
}
|
||
}
|
||
const isFileUrl = () => {
|
||
return window.location.protocol === 'file:';
|
||
}
|
||
const hasAlternateSentinel = () => {
|
||
let styleSentinel = getColorSchemeSentinel();
|
||
if (styleSentinel !== null) {
|
||
return styleSentinel === "alternate";
|
||
} else {
|
||
return false;
|
||
}
|
||
}
|
||
const setStyleSentinel = (alternate) => {
|
||
const value = alternate ? "alternate" : "default";
|
||
if (!isFileUrl()) {
|
||
window.localStorage.setItem("quarto-color-scheme", value);
|
||
} else {
|
||
localAlternateSentinel = value;
|
||
}
|
||
}
|
||
const getColorSchemeSentinel = () => {
|
||
if (!isFileUrl()) {
|
||
const storageValue = window.localStorage.getItem("quarto-color-scheme");
|
||
return storageValue != null ? storageValue : localAlternateSentinel;
|
||
} else {
|
||
return localAlternateSentinel;
|
||
}
|
||
}
|
||
const toggleGiscusIfUsed = (isAlternate, darkModeDefault) => {
|
||
const baseTheme = document.querySelector('#giscus-base-theme')?.value ?? 'light';
|
||
const alternateTheme = document.querySelector('#giscus-alt-theme')?.value ?? 'dark';
|
||
let newTheme = '';
|
||
if(authorPrefersDark) {
|
||
newTheme = isAlternate ? baseTheme : alternateTheme;
|
||
} else {
|
||
newTheme = isAlternate ? alternateTheme : baseTheme;
|
||
}
|
||
const changeGiscusTheme = () => {
|
||
// From: https://github.com/giscus/giscus/issues/336
|
||
const sendMessage = (message) => {
|
||
const iframe = document.querySelector('iframe.giscus-frame');
|
||
if (!iframe) return;
|
||
iframe.contentWindow.postMessage({ giscus: message }, 'https://giscus.app');
|
||
}
|
||
sendMessage({
|
||
setConfig: {
|
||
theme: newTheme
|
||
}
|
||
});
|
||
}
|
||
const isGiscussLoaded = window.document.querySelector('iframe.giscus-frame') !== null;
|
||
if (isGiscussLoaded) {
|
||
changeGiscusTheme();
|
||
}
|
||
};
|
||
const authorPrefersDark = false;
|
||
const queryPrefersDark = window.matchMedia('(prefers-color-scheme: dark)');
|
||
const darkModeDefault = queryPrefersDark.matches;
|
||
document.querySelector('link#quarto-text-highlighting-styles.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
|
||
document.querySelector('link#quarto-bootstrap.quarto-color-scheme-extra').rel = 'disabled-stylesheet';
|
||
let localAlternateSentinel = darkModeDefault ? 'alternate' : 'default';
|
||
// Dark / light mode switch
|
||
window.quartoToggleColorScheme = () => {
|
||
// Read the current dark / light value
|
||
let toAlternate = !hasAlternateSentinel();
|
||
toggleColorMode(toAlternate);
|
||
setStyleSentinel(toAlternate);
|
||
toggleGiscusIfUsed(toAlternate, darkModeDefault);
|
||
window.dispatchEvent(new Event('resize'));
|
||
};
|
||
queryPrefersDark.addEventListener("change", e => {
|
||
if(window.localStorage.getItem("quarto-color-scheme") !== null)
|
||
return;
|
||
const alternate = e.matches
|
||
toggleColorMode(alternate);
|
||
localAlternateSentinel = e.matches ? 'alternate' : 'default'; // this is used alongside local storage!
|
||
toggleGiscusIfUsed(alternate, darkModeDefault);
|
||
});
|
||
// Switch to dark mode if need be
|
||
if (hasAlternateSentinel()) {
|
||
toggleColorMode(true);
|
||
} else {
|
||
toggleColorMode(false);
|
||
}
|
||
</script>
|
||
|
||
<div id="quarto-search-results"></div>
|
||
<header id="quarto-header" class="headroom fixed-top">
|
||
<nav class="navbar navbar-expand-xl " data-bs-theme="dark">
|
||
<div class="navbar-container container-fluid">
|
||
<div class="navbar-brand-container mx-auto">
|
||
<a href="/tinytorch/index.html" class="navbar-brand navbar-brand-logo">
|
||
<img src="/tinytorch/assets/images/logo.png" alt="" class="navbar-logo light-content">
|
||
<img src="/tinytorch/assets/images/logo.png" alt="" class="navbar-logo dark-content">
|
||
</a>
|
||
<a class="navbar-brand" href="/tinytorch/index.html">
|
||
<span class="navbar-title">Machine Learning Systems</span>
|
||
</a>
|
||
</div>
|
||
<div id="quarto-search" class="" title="Search"></div>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" role="menu" aria-expanded="false" aria-label="Toggle navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarCollapse">
|
||
<ul class="navbar-nav navbar-nav-scroll me-auto">
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-tinytorch" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<span class="menu-text">TinyTorch</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="nav-menu-tinytorch">
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/index.html"><i class="bi bi-fire" role="img">
|
||
</i>
|
||
<span class="dropdown-text">TinyTorch Home</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/getting-started.html">
|
||
<span class="dropdown-text">Getting Started</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/big-picture.html">
|
||
<span class="dropdown-text">Big Picture</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/tiers/foundation.html">
|
||
<span class="dropdown-text">Foundation Tier</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/tiers/architecture.html">
|
||
<span class="dropdown-text">Architecture Tier</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/tiers/optimization.html">
|
||
<span class="dropdown-text">Optimization Tier</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/tiers/olympics.html">
|
||
<span class="dropdown-text">Torch Olympics</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/milestones/index.html">
|
||
<span class="dropdown-text">Historical Milestones</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/tito/overview.html">
|
||
<span class="dropdown-text">TITO CLI</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/datasets.html">
|
||
<span class="dropdown-text">Datasets Guide</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/assets/downloads/TinyTorch-Guide.pdf" target="_blank"><i class="bi bi-file-pdf" role="img">
|
||
</i>
|
||
<span class="dropdown-text">TinyTorch Guide (PDF)</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="/tinytorch/assets/downloads/TinyTorch-Paper.pdf" target="_blank"><i class="bi bi-file-pdf" role="img">
|
||
</i>
|
||
<span class="dropdown-text">TinyTorch Paper (PDF)</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-read" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<span class="menu-text">Read</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="nav-menu-read">
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/vol1/"><i class="bi bi-journal" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Volume I: Foundations</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/vol2/"><i class="bi bi-journal" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Volume II: At Scale</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/vol1/assets/downloads/Machine-Learning-Systems-Vol1.pdf" target="_blank"><i class="bi bi-file-pdf" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Volume I PDF</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/vol1/assets/downloads/Machine-Learning-Systems-Vol1.epub" target="_blank"><i class="bi bi-journal-text" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Volume I EPUB</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/vol2/assets/downloads/Machine-Learning-Systems-Vol2.pdf" target="_blank"><i class="bi bi-file-pdf" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Volume II PDF</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/vol2/assets/downloads/Machine-Learning-Systems-Vol2.epub" target="_blank"><i class="bi bi-journal-text" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Volume II EPUB</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-build" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<span class="menu-text">Build</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="nav-menu-build">
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/labs/"><i class="bi bi-sliders" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Labs</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/tinytorch/"><i class="bi bi-fire" role="img">
|
||
</i>
|
||
<span class="dropdown-text">TinyTorch</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/kits/"><i class="bi bi-cpu" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Hardware Kits</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/mlsysim/"><i class="bi bi-calculator" role="img">
|
||
</i>
|
||
<span class="dropdown-text">MLSys·im</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-teach" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<span class="menu-text">Teach</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="nav-menu-teach">
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/instructors/course-map.html"><i class="bi bi-signpost-split" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Course Map</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/slides/"><i class="bi bi-easel" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Lecture Slides</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/instructors/"><i class="bi bi-person-video3" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Instructor Hub</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-prepare" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<span class="menu-text">Prepare</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="nav-menu-prepare">
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/staffml/"><i class="bi bi-mortarboard" role="img">
|
||
</i>
|
||
<span class="dropdown-text">StaffML</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/staffml/plans"><i class="bi bi-map" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Study Plans</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/staffml/gauntlet"><i class="bi bi-lightning" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Gauntlet Mode</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/staffml/downloads/StaffML-Paper.pdf" target="_blank"><i class="bi bi-file-pdf" role="img">
|
||
</i>
|
||
<span class="dropdown-text">StaffML Paper</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-connect" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<span class="menu-text">Connect</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="nav-menu-connect">
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/newsletter/"><i class="bi bi-envelope" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Newsletter</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/community/"><i class="bi bi-globe" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Global Network</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/community/events.html"><i class="bi bi-calendar-event" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Workshops & Events</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/community/partners.html"><i class="bi bi-people" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Partners & Sponsors</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-about" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<span class="menu-text">About</span>
|
||
</a>
|
||
<ul class="dropdown-menu" aria-labelledby="nav-menu-about">
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/about/"><i class="bi bi-bullseye" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Mission</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/about/#story"><i class="bi bi-book" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Our Story</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/about/people.html"><i class="bi bi-person-lines-fill" role="img">
|
||
</i>
|
||
<span class="dropdown-text">People</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/about/contributors.html"><i class="bi bi-people" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Contributors</span></a>
|
||
</li>
|
||
<li><hr class="dropdown-divider"></li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://mlsysbook.ai/about/license.html"><i class="bi bi-cc-circle" role="img">
|
||
</i>
|
||
<span class="dropdown-text">License</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
<ul class="navbar-nav navbar-nav-scroll ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="/tinytorch/#subscribe"> <i class="bi bi-envelope" role="img">
|
||
</i>
|
||
<span class="menu-text">Subscribe</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://github.com/harvard-edge/cs249r_book" target="_blank"> <i class="bi bi-star" role="img">
|
||
</i>
|
||
<span class="menu-text">Star</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="https://opencollective.com/mlsysbook" target="_blank"> <i class="bi bi-heart" role="img">
|
||
</i>
|
||
<span class="menu-text">Support</span></a>
|
||
</li>
|
||
<li class="nav-item dropdown ">
|
||
<a class="nav-link dropdown-toggle" href="#" id="nav-menu-github" role="link" data-bs-toggle="dropdown" aria-expanded="false">
|
||
<i class="bi bi-github" role="img">
|
||
</i>
|
||
<span class="menu-text">GitHub</span>
|
||
</a>
|
||
<ul class="dropdown-menu dropdown-menu-end" aria-labelledby="nav-menu-github">
|
||
<li>
|
||
<a class="dropdown-item" href="https://github.com/harvard-edge/cs249r_book/discussions" target="_blank"><i class="bi bi-chat" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Discussions</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://github.com/harvard-edge/cs249r_book" target="_blank"><i class="bi bi-pencil" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Edit this page</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://github.com/harvard-edge/cs249r_book/issues/new" target="_blank"><i class="bi bi-bug" role="img">
|
||
</i>
|
||
<span class="dropdown-text">Report an issue</span></a>
|
||
</li>
|
||
<li>
|
||
<a class="dropdown-item" href="https://github.com/harvard-edge/cs249r_book" target="_blank"><i class="bi bi-code" role="img">
|
||
</i>
|
||
<span class="dropdown-text">View source</span></a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div> <!-- /navcollapse -->
|
||
<div class="quarto-navbar-tools">
|
||
<a href="" class="quarto-color-scheme-toggle quarto-navigation-tool px-1" onclick="window.quartoToggleColorScheme(); return false;" title="Toggle dark mode"><i class="bi"></i></a>
|
||
</div>
|
||
</div> <!-- /container-fluid -->
|
||
</nav>
|
||
<div id="quarto-announcement" data-announcement-id="c1dc8b193ceca4e572bc367803d37925" class="alert alert-primary hidden"><i class="bi bi-megaphone quarto-announcement-icon"></i><div class="quarto-announcement-content">
|
||
<p>🔥 <strong>TinyTorch</strong> — build your own ML framework from scratch; the companion framework to the textbook.<br> 📘 <strong>The book:</strong> <a href="https://mlsysbook.ai/vol1/">Vol I: Foundations</a> · <a href="https://mlsysbook.ai/vol2/">Vol II: At Scale</a> — open access, free forever.<br> 🛠️ <strong>Alongside the book:</strong> <a href="https://mlsysbook.ai/kits/">Hardware Kits</a> (deploy) · <a href="https://mlsysbook.ai/mlsysim/">MLSys·im</a> (model) · <a href="https://mlsysbook.ai/labs/">Labs</a> (explore) · <a href="https://mlsysbook.ai/staffml/">StaffML</a> (practice)<br> 📬 <strong>Newsletter:</strong> ML Systems insights & updates — <a href="https://mlsysbook.ai/newsletter/">Subscribe →</a></p>
|
||
</div><i class="bi bi-x-lg quarto-announcement-action"></i></div>
|
||
</header>
|
||
<!-- content -->
|
||
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article page-navbar">
|
||
<!-- sidebar -->
|
||
<!-- margin-sidebar -->
|
||
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar zindex-bottom">
|
||
|
||
</div>
|
||
<!-- main -->
|
||
<main class="content" id="quarto-document-content">
|
||
|
||
|
||
<header id="title-block-header" class="quarto-title-block default">
|
||
<div class="quarto-title">
|
||
<h1 class="title">Page Not Found</h1>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="quarto-title-meta">
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
|
||
|
||
</header>
|
||
|
||
|
||
<style>
|
||
.j404-wrap { max-width: 720px; margin: 4rem auto 2rem; padding: 0 1.5rem; text-align: center; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
|
||
.j404-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #a31f34; margin-bottom: 1.5rem; }
|
||
.j404-illustration { max-width: 520px; margin: 0 auto 1.75rem; }
|
||
.j404-illustration svg { width: 100%; height: auto; display: block; }
|
||
.j404-joke { font-size: 1.3rem; font-weight: 500; line-height: 1.45; color: #1a1a1a; margin: 0 auto 1.25rem; font-style: italic; min-height: 3.5rem; }
|
||
.j404-sub { color: #555; font-size: 1rem; margin-bottom: 2.25rem; }
|
||
.j404-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; margin-bottom: 1rem; }
|
||
.j404-btn { padding: 0.7rem 1.4rem; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: 0.95rem; transition: transform 0.1s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease; display: inline-block; }
|
||
.j404-btn:hover { transform: translateY(-1px); }
|
||
.j404-btn { text-decoration: none !important; }
|
||
.j404-btn-primary { background: #a31f34 !important; color: #fff !important; }
|
||
.j404-btn-primary:hover { background: #8c1a2c !important; color: #fff !important; }
|
||
.j404-btn-secondary { background: #fff !important; color: #1a1a1a !important; border: 1.5px solid #d0d0d0; }
|
||
.j404-btn-secondary:hover { border-color: #a31f34 !important; color: #a31f34 !important; }
|
||
.j404-refresh { margin: 0 auto 2.5rem; display: block; font-size: 0.82rem; color: #888; background: none; border: none; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; font-family: inherit; }
|
||
.j404-refresh:hover { color: #a31f34 !important; }
|
||
.j404-meta-row { display: flex; gap: 0.6rem 0.9rem; align-items: center; justify-content: center; flex-wrap: wrap; margin: 0 auto 2.5rem; }
|
||
.j404-meta-row .j404-refresh { margin: 0; display: inline; }
|
||
.j404-meta-sep { color: #ccc; font-size: 0.85rem; user-select: none; }
|
||
.j404-nav { display: flex; gap: 0.6rem 1.1rem; flex-wrap: wrap; justify-content: center; font-size: 0.85rem; border-top: 1px solid #e5e5e5; padding-top: 1.5rem; }
|
||
.j404-nav a { color: #555 !important; text-decoration: none !important; }
|
||
.j404-nav a:hover { color: #a31f34 !important; }
|
||
@media (max-width: 540px) { .j404-wrap { margin-top: 2.5rem; } .j404-joke { font-size: 1.1rem; } }
|
||
@media (prefers-color-scheme: dark) {
|
||
.j404-joke { color: #f0f0f0; }
|
||
.j404-sub { color: #aaa; }
|
||
.j404-btn-secondary { background: transparent !important; color: #f0f0f0 !important; border-color: #444; }
|
||
.j404-btn-secondary:hover { border-color: #ff6b80 !important; color: #ff6b80 !important; }
|
||
.j404-refresh { color: #999; }
|
||
.j404-refresh:hover { color: #ff6b80 !important; }
|
||
.j404-meta-sep { color: #555; }
|
||
.j404-nav { border-top-color: #333; }
|
||
.j404-nav a { color: #aaa !important; }
|
||
.j404-nav a:hover { color: #ff6b80 !important; }
|
||
}
|
||
body.quarto-dark .j404-joke { color: #f0f0f0; }
|
||
body.quarto-dark .j404-sub { color: #aaa; }
|
||
body.quarto-dark .j404-btn-secondary { background: transparent !important; color: #f0f0f0 !important; border-color: #444; }
|
||
body.quarto-dark .j404-btn-secondary:hover { border-color: #ff6b80 !important; color: #ff6b80 !important; }
|
||
body.quarto-dark .j404-refresh { color: #999; }
|
||
body.quarto-dark .j404-refresh:hover { color: #ff6b80 !important; }
|
||
body.quarto-dark .j404-meta-sep { color: #555; }
|
||
body.quarto-dark .j404-nav { border-top-color: #333; }
|
||
body.quarto-dark .j404-nav a { color: #aaa !important; }
|
||
body.quarto-dark .j404-nav a:hover { color: #ff6b80 !important; }
|
||
</style>
|
||
|
||
<div class="j404-wrap">
|
||
<p class="j404-eyebrow">Route not found</p>
|
||
<div class="j404-illustration">
|
||
<svg viewbox="0 0 680 280" xmlns="http://www.w3.org/2000/svg" font-family="Helvetica Neue, Helvetica, Arial, sans-serif" role="img" aria-labelledby="r404-title r404-desc">
|
||
<title id="r404-title">Roofline plot: the requested page is outside the achievable region</title>
|
||
<desc id="r404-desc">A roofline plot. The Y axis is throughput in FLOPs per second. The X axis is arithmetic intensity in FLOPs per byte. A blue memory-bandwidth slope rises from the origin to a ridge point, where it meets a green horizontal compute roof. The achievable region under the lines is shaded faintly. A red X marks the requested page far above the slope at low arithmetic intensity, in unreachable territory, with the annotation "your page (404)".</desc>
|
||
<defs>
|
||
<marker id="r404-arrow-red" markerwidth="8" markerheight="6" refx="7" refy="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#a31f34"></path></marker>
|
||
<marker id="r404-arrow" markerwidth="8" markerheight="6" refx="7" refy="3" orient="auto"><path d="M0,0 L8,3 L0,6 Z" fill="#555"></path></marker>
|
||
</defs>
|
||
<rect width="680" height="280" fill="#fff" rx="4"></rect>
|
||
<!-- Faint grid -->
|
||
<g stroke="#eee" stroke-width="0.8">
|
||
<line x1="100" y1="80" x2="620" y2="80"></line>
|
||
<line x1="100" y1="120" x2="620" y2="120"></line>
|
||
<line x1="100" y1="160" x2="620" y2="160"></line>
|
||
<line x1="100" y1="200" x2="620" y2="200"></line>
|
||
<line x1="200" y1="40" x2="200" y2="240"></line>
|
||
<line x1="300" y1="40" x2="300" y2="240"></line>
|
||
<line x1="400" y1="40" x2="400" y2="240"></line>
|
||
<line x1="500" y1="40" x2="500" y2="240"></line>
|
||
<line x1="600" y1="40" x2="600" y2="240"></line>
|
||
</g>
|
||
<!-- Achievable region (faint shade) -->
|
||
<path d="M 100,240 L 340,80 L 610,80 L 610,240 Z" fill="#f7f7f7"></path>
|
||
<!-- Title -->
|
||
<text x="340" y="22" text-anchor="middle" font-size="16" font-weight="700" fill="#333">Roofline analysis of your request</text>
|
||
<!-- Axes -->
|
||
<line x1="100" y1="240" x2="100" y2="40" stroke="#555" stroke-width="1.2" marker-end="url(#r404-arrow)"></line>
|
||
<line x1="100" y1="240" x2="630" y2="240" stroke="#555" stroke-width="1.2" marker-end="url(#r404-arrow)"></line>
|
||
<!-- Memory-bandwidth slope (blue = compute / data movement boundary) -->
|
||
<line x1="100" y1="240" x2="340" y2="80" stroke="#4a90c4" stroke-width="2.5"></line>
|
||
<!-- Compute roof (green = compute-bound region) -->
|
||
<line x1="340" y1="80" x2="610" y2="80" stroke="#3d9e5a" stroke-width="2.5"></line>
|
||
<!-- Ridge point -->
|
||
<circle cx="340" cy="80" r="3.5" fill="#333"></circle>
|
||
<text x="340" y="64" text-anchor="middle" font-size="13" fill="#555">ridge point</text>
|
||
<!-- Region labels -->
|
||
<text x="200" y="155" text-anchor="middle" font-size="14" font-weight="700" fill="#4a90c4">memory-bound</text>
|
||
<text x="490" y="120" text-anchor="middle" font-size="14" font-weight="700" fill="#3d9e5a">compute-bound</text>
|
||
<!-- "Achievable" italics inside the shaded region -->
|
||
<text x="430" y="200" text-anchor="middle" font-size="12" font-style="italic" fill="#999">achievable region</text>
|
||
<!-- The X marker for "your page" - placed above the slope (unreachable) -->
|
||
<g stroke="#a31f34" stroke-width="3" stroke-linecap="round">
|
||
<line x1="155" y1="115" x2="175" y2="135"></line>
|
||
<line x1="175" y1="115" x2="155" y2="135"></line>
|
||
</g>
|
||
<!-- Curved annotation arrow + label -->
|
||
<path d="M 280 145 Q 230 138 188 130" fill="none" stroke="#a31f34" stroke-width="1.4" marker-end="url(#r404-arrow-red)"></path>
|
||
<text x="290" y="149" text-anchor="start" font-size="16" font-weight="700" fill="#a31f34">your page (404)</text>
|
||
<!-- Axis labels -->
|
||
<text x="50" y="140" text-anchor="middle" font-size="14" fill="#555" transform="rotate(-90 50 140)">throughput (FLOP/s)</text>
|
||
<text x="365" y="265" text-anchor="middle" font-size="14" fill="#555">arithmetic intensity (FLOP/byte)</text>
|
||
</svg>
|
||
</div>
|
||
<p class="j404-joke" id="j404-joke"> </p>
|
||
<div class="j404-actions">
|
||
<a class="j404-btn j404-btn-primary" href="/tinytorch/index.html">← TinyTorch home</a>
|
||
<a class="j404-btn j404-btn-secondary" href="https://mlsysbook.ai/games/">Open the playground →</a>
|
||
</div>
|
||
<div class="j404-meta-row">
|
||
<button class="j404-refresh" type="button" onclick="window.j404Pick && window.j404Pick()">↻ another joke</button>
|
||
<span class="j404-meta-sep" aria-hidden="true">·</span>
|
||
<a class="j404-refresh" href="https://github.com/harvard-edge/cs249r_book/issues/new?template=404_joke.yml" target="_blank" rel="noopener">✎ contribute one</a>
|
||
</div>
|
||
<nav class="j404-nav" aria-label="Site navigation">
|
||
<a href="/tinytorch/getting-started.html">Getting started</a>
|
||
<a href="/tinytorch/big-picture.html">Big picture</a>
|
||
<a href="/tinytorch/tiers/foundation.html">Foundation tier</a>
|
||
<a href="https://mlsysbook.ai/">mlsysbook.ai</a>
|
||
<a href="https://mlsysbook.ai/vol1/">Volume I</a>
|
||
<a href="https://mlsysbook.ai/vol2/">Volume II</a>
|
||
<a href="https://github.com/harvard-edge/cs249r_book/issues/new">Report broken link</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<script>
|
||
(function() {
|
||
const jokes = [
|
||
"Attention is all you need. This page needed something else.",
|
||
"L1 missed. L2 missed. L3 missed. HBM missed. Your weights are in another castle.",
|
||
"We trained on this page. It was in the test set the whole time.",
|
||
"p50 says the page exists. p99 disagrees. p99.9 timed out mid-decode.",
|
||
"The decoder hallucinated a 404 with high confidence and low calibration.",
|
||
"Cold start. The container is downloading 80 GB of weights to serve you a 404.",
|
||
"OOM during prefill. The prompt was longer than the context window we lied about supporting.",
|
||
"Head-of-line blocking. A 32k-token request landed in the batch ahead of you and just started decoding.",
|
||
"Pipeline parallel stage 3 stalled. The bubble ate your URL.",
|
||
"The router in our MoE never activated this expert. It atrophied.",
|
||
"Loss went to NaN at step 47,000. We rolled back to step 46,500. The page rolled back further.",
|
||
"Position embedding ran out at index 4096. The page lived at 4097.",
|
||
"Catastrophic forgetting claimed this route during continual learning.",
|
||
"The teacher model knew this page. The student did not absorb it during distillation.",
|
||
"Training-serving skew: the URL existed at training time but not at inference.",
|
||
"Hot-swap loaded the new model. The new model has never heard of this URL.",
|
||
"Canary saw 0.4 percent error and held the rollout. You are in the 0.4 percent.",
|
||
"The arithmetic intensity here is 0.3 FLOPs per byte. We are firmly memory-bound and pageless.",
|
||
"The energy budget was 1 mJ per inference. The page cost 2 mJ to find.",
|
||
"The mixture-of-experts gating function routed your request to expert 0, which is unimplemented.",
|
||
"Megatron sharded the page tensor-parallel across 8 ways. We needed 9.",
|
||
"Pipeline bubble fraction hit 100 percent. The whole training run was bubble.",
|
||
"Weak scaling held until we asked for the page. Then communication ate the gradient.",
|
||
"Rendezvous timed out at 30 minutes. The straggler with your shard showed up at 31.",
|
||
"Data parallel replica 17 has a different version of this page. AllReduce will not be reconciling.",
|
||
"Tensor parallel rank 0 has the page. Tensor parallel rank 1 disagrees. The all-gather chose chaos.",
|
||
"Launched the run on 8,192 H100s. Your shard sits on the one in the Reno DC that just lost cooling.",
|
||
"We trained for 47 hours. The loss diverged at hour 46. So did the page.",
|
||
"Training cost: 4.2 million dollars. The page was cut in the post-mortem.",
|
||
"Pipeline schedule was 1F1B. The page was the F that never reached its B.",
|
||
"The all-to-all for expert parallelism routed the page to expert 64 of 64. There are 63 experts.",
|
||
"Reward model assigned this page a score of -2.3. The policy stopped sampling it.",
|
||
"RLHF raters labeled this URL as unhelpful. The policy learned.",
|
||
"The page exists, but only at temperature 0.0. You queried at 0.7.",
|
||
"Compute-optimal scaling told us to train on fewer tokens. This page was one of them.",
|
||
"We computed the gradient with respect to this page and found it identically zero.",
|
||
"Sharded across 8 GPUs. The GPU with your shard is busy on someone else's training job.",
|
||
"GPU memory is fragmented enough that we can fit the page or the KV cache, not both.",
|
||
"Inference latency budget consumed entirely by tokenization. No tokens were generated.",
|
||
"Decode phase is memory-bound. So is the team's enthusiasm for fixing this.",
|
||
"Distribution shift: 404s are now the dominant class.",
|
||
"Batch size auto-tuner picked 1. We are now serving you, alone, at the wrong end of the roofline.",
|
||
"The model registry pointed at v3. v3 was deleted by the cleanup job last Tuesday.",
|
||
"Retraining was triggered by your request. Come back in 6 to 8 weeks.",
|
||
"Stale weights served this page until 14 minutes ago. Now no checkpoint serves it.",
|
||
"Vector index has not been rebuilt since the last embedding model swap. Neither has trust.",
|
||
"The thermal sensor read 95 C. The accelerator throttled the page to a lower frequency, then to zero tokens per second.",
|
||
"Tensor cores idle. SMs idle. The page is also idle, somewhere on the die.",
|
||
"We pruned 90 percent of the weights to fit the MCU. We pruned the page too.",
|
||
"We tried 1-bit quantization on the URL. The page rounded to zero.",
|
||
"The KV cache was offloaded to swap. There is no swap on a microcontroller.",
|
||
"NCCL hung at 86 percent of the AllReduce. The remaining 14 percent contained the page.",
|
||
"Elastic training rescaled the world size mid-step. The page belonged to the old world.",
|
||
"Fault recovery loaded the last checkpoint. The page was added a thousand steps after.",
|
||
"We bucketed gradients at 25 MB. The page was 26.",
|
||
"Recomputation skipped the layer with the page. Backward pass produced confident garbage.",
|
||
"Wall-clock time to convergence: 19 days. Wall-clock time to find this page: longer.",
|
||
"The tokenizer split this URL into bytes the BPE merges had never seen before.",
|
||
"Continuous batching evicted this page mid-generation. No tokens were saved.",
|
||
"The KV cache for this route was flushed when the replica hot-swapped weights.",
|
||
"Request queue depth exceeded the batcher's patience. Dropped before prefill.",
|
||
"Batch window closed before your request joined. The next decode step is in 40 ms, or never.",
|
||
"Speculative decoding accepted 73 percent of drafted tokens. Today's page was in the 27.",
|
||
"This route violated the throughput SLO and was demoted to best-effort inference.",
|
||
"Traffic shifted 5 percent to the new model. You were in the 5 percent. The new model never saw this page in training.",
|
||
"Shadow inference served this page. Production never noticed it was missing.",
|
||
"Data drift detector fired on this URL. The route was retrained out of existence.",
|
||
"Warm pool of model replicas was sized for predicted traffic. Your traffic was unpredicted.",
|
||
"Prefix cache hit. The prefix matched a different prompt by 31 of 32 tokens.",
|
||
"The page was quantized to INT4 for the edge. The decimal point wandered off.",
|
||
"This page was scheduled on the systolic array. Row 7 is still propagating partial sums.",
|
||
"The ridge point is at 76 FLOPs per byte. This page came in at 0.4.",
|
||
"NVLink saturated between GPUs. The page was queued behind the gradient AllReduce.",
|
||
"Ring AllReduce completed in 2(N-1) hops. The page was at hop 2N.",
|
||
"GPU-direct RDMA bypassed the CPU on the gradient path. It also bypassed this page.",
|
||
"Gradient bucketing flushed the bucket containing this page into the void.",
|
||
"Training resumed from a checkpoint that predated the page by 3,000 steps.",
|
||
"Micro-batch 14 of 16 contained the page. Micro-batch 14 was skipped to fit the pipeline schedule.",
|
||
"ZeRO-2 offloaded the gradient for this page to CPU. The CPU was OOM."
|
||
];
|
||
function pick() {
|
||
const el = document.getElementById('j404-joke');
|
||
if (!el) return;
|
||
let i = Math.floor(Math.random() * jokes.length);
|
||
if (el.dataset.lastIdx === String(i) && jokes.length > 1) i = (i + 1) % jokes.length;
|
||
el.dataset.lastIdx = String(i);
|
||
el.textContent = jokes[i];
|
||
}
|
||
window.j404Pick = pick;
|
||
pick();
|
||
})();
|
||
</script>
|
||
|
||
|
||
|
||
<a onclick="window.scrollTo(0, 0); return false;" role="button" id="quarto-back-to-top"><i class="bi bi-arrow-up"></i> Back to top</a></main> <!-- /main -->
|
||
<script id="quarto-html-after-body" type="application/javascript">
|
||
window.document.addEventListener("DOMContentLoaded", function (event) {
|
||
// Ensure there is a toggle, if there isn't float one in the top right
|
||
if (window.document.querySelector('.quarto-color-scheme-toggle') === null) {
|
||
const a = window.document.createElement('a');
|
||
a.classList.add('top-right');
|
||
a.classList.add('quarto-color-scheme-toggle');
|
||
a.href = "";
|
||
a.onclick = function() { try { window.quartoToggleColorScheme(); } catch {} return false; };
|
||
const i = window.document.createElement("i");
|
||
i.classList.add('bi');
|
||
a.appendChild(i);
|
||
window.document.body.appendChild(a);
|
||
}
|
||
setColorSchemeToggle(hasAlternateSentinel())
|
||
const icon = "";
|
||
const anchorJS = new window.AnchorJS();
|
||
anchorJS.options = {
|
||
placement: 'right',
|
||
icon: icon
|
||
};
|
||
anchorJS.add('.anchored');
|
||
const isCodeAnnotation = (el) => {
|
||
for (const clz of el.classList) {
|
||
if (clz.startsWith('code-annotation-')) {
|
||
return true;
|
||
}
|
||
}
|
||
return false;
|
||
}
|
||
const onCopySuccess = function(e) {
|
||
// button target
|
||
const button = e.trigger;
|
||
// don't keep focus
|
||
button.blur();
|
||
// flash "checked"
|
||
button.classList.add('code-copy-button-checked');
|
||
var currentTitle = button.getAttribute("title");
|
||
button.setAttribute("title", "Copied!");
|
||
let tooltip;
|
||
if (window.bootstrap) {
|
||
button.setAttribute("data-bs-toggle", "tooltip");
|
||
button.setAttribute("data-bs-placement", "left");
|
||
button.setAttribute("data-bs-title", "Copied!");
|
||
tooltip = new bootstrap.Tooltip(button,
|
||
{ trigger: "manual",
|
||
customClass: "code-copy-button-tooltip",
|
||
offset: [0, -8]});
|
||
tooltip.show();
|
||
}
|
||
setTimeout(function() {
|
||
if (tooltip) {
|
||
tooltip.hide();
|
||
button.removeAttribute("data-bs-title");
|
||
button.removeAttribute("data-bs-toggle");
|
||
button.removeAttribute("data-bs-placement");
|
||
}
|
||
button.setAttribute("title", currentTitle);
|
||
button.classList.remove('code-copy-button-checked');
|
||
}, 1000);
|
||
// clear code selection
|
||
e.clearSelection();
|
||
}
|
||
const getTextToCopy = function(trigger) {
|
||
const outerScaffold = trigger.parentElement.cloneNode(true);
|
||
const codeEl = outerScaffold.querySelector('code');
|
||
for (const childEl of codeEl.children) {
|
||
if (isCodeAnnotation(childEl)) {
|
||
childEl.remove();
|
||
}
|
||
}
|
||
return codeEl.innerText;
|
||
}
|
||
const clipboard = new window.ClipboardJS('.code-copy-button:not([data-in-quarto-modal])', {
|
||
text: getTextToCopy
|
||
});
|
||
clipboard.on('success', onCopySuccess);
|
||
if (window.document.getElementById('quarto-embedded-source-code-modal')) {
|
||
const clipboardModal = new window.ClipboardJS('.code-copy-button[data-in-quarto-modal]', {
|
||
text: getTextToCopy,
|
||
container: window.document.getElementById('quarto-embedded-source-code-modal')
|
||
});
|
||
clipboardModal.on('success', onCopySuccess);
|
||
}
|
||
var localhostRegex = new RegExp(/^(?:http|https):\/\/localhost\:?[0-9]*\//);
|
||
var mailtoRegex = new RegExp(/^mailto:/);
|
||
var filterRegex = new RegExp("https:\/\/mlsysbook\.ai\/tinytorch\/");
|
||
var isInternal = (href) => {
|
||
return filterRegex.test(href) || localhostRegex.test(href) || mailtoRegex.test(href);
|
||
}
|
||
// Inspect non-navigation links and adorn them if external
|
||
var links = window.document.querySelectorAll('a[href]:not(.nav-link):not(.navbar-brand):not(.toc-action):not(.sidebar-link):not(.sidebar-item-toggle):not(.pagination-link):not(.no-external):not([aria-hidden]):not(.dropdown-item):not(.quarto-navigation-tool):not(.about-link)');
|
||
for (var i=0; i<links.length; i++) {
|
||
const link = links[i];
|
||
if (!isInternal(link.href)) {
|
||
// undo the damage that might have been done by quarto-nav.js in the case of
|
||
// links that we want to consider external
|
||
if (link.dataset.originalHref !== undefined) {
|
||
link.href = link.dataset.originalHref;
|
||
}
|
||
// target, if specified
|
||
link.setAttribute("target", "_blank");
|
||
if (link.getAttribute("rel") === null) {
|
||
link.setAttribute("rel", "noopener");
|
||
}
|
||
}
|
||
}
|
||
function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
|
||
const config = {
|
||
allowHTML: true,
|
||
maxWidth: 500,
|
||
delay: 100,
|
||
arrow: false,
|
||
appendTo: function(el) {
|
||
return el.parentElement;
|
||
},
|
||
interactive: true,
|
||
interactiveBorder: 10,
|
||
theme: 'quarto',
|
||
placement: 'bottom-start',
|
||
};
|
||
if (contentFn) {
|
||
config.content = contentFn;
|
||
}
|
||
if (onTriggerFn) {
|
||
config.onTrigger = onTriggerFn;
|
||
}
|
||
if (onUntriggerFn) {
|
||
config.onUntrigger = onUntriggerFn;
|
||
}
|
||
window.tippy(el, config);
|
||
}
|
||
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
|
||
for (var i=0; i<noterefs.length; i++) {
|
||
const ref = noterefs[i];
|
||
tippyHover(ref, function() {
|
||
// use id or data attribute instead here
|
||
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
|
||
try { href = new URL(href).hash; } catch {}
|
||
const id = href.replace(/^#\/?/, "");
|
||
const note = window.document.getElementById(id);
|
||
if (note) {
|
||
return note.innerHTML;
|
||
} else {
|
||
return "";
|
||
}
|
||
});
|
||
}
|
||
const xrefs = window.document.querySelectorAll('a.quarto-xref');
|
||
const processXRef = (id, note) => {
|
||
// Strip column container classes
|
||
const stripColumnClz = (el) => {
|
||
el.classList.remove("page-full", "page-columns");
|
||
if (el.children) {
|
||
for (const child of el.children) {
|
||
stripColumnClz(child);
|
||
}
|
||
}
|
||
}
|
||
stripColumnClz(note)
|
||
if (id === null || id.startsWith('sec-')) {
|
||
// Special case sections, only their first couple elements
|
||
const container = document.createElement("div");
|
||
if (note.children && note.children.length > 2) {
|
||
container.appendChild(note.children[0].cloneNode(true));
|
||
for (let i = 1; i < note.children.length; i++) {
|
||
const child = note.children[i];
|
||
if (child.tagName === "P" && child.innerText === "") {
|
||
continue;
|
||
} else {
|
||
container.appendChild(child.cloneNode(true));
|
||
break;
|
||
}
|
||
}
|
||
if (window.Quarto?.typesetMath) {
|
||
window.Quarto.typesetMath(container);
|
||
}
|
||
return container.innerHTML
|
||
} else {
|
||
if (window.Quarto?.typesetMath) {
|
||
window.Quarto.typesetMath(note);
|
||
}
|
||
return note.innerHTML;
|
||
}
|
||
} else {
|
||
// Remove any anchor links if they are present
|
||
const anchorLink = note.querySelector('a.anchorjs-link');
|
||
if (anchorLink) {
|
||
anchorLink.remove();
|
||
}
|
||
if (window.Quarto?.typesetMath) {
|
||
window.Quarto.typesetMath(note);
|
||
}
|
||
if (note.classList.contains("callout")) {
|
||
return note.outerHTML;
|
||
} else {
|
||
return note.innerHTML;
|
||
}
|
||
}
|
||
}
|
||
for (var i=0; i<xrefs.length; i++) {
|
||
const xref = xrefs[i];
|
||
tippyHover(xref, undefined, function(instance) {
|
||
instance.disable();
|
||
let url = xref.getAttribute('href');
|
||
let hash = undefined;
|
||
if (url.startsWith('#')) {
|
||
hash = url;
|
||
} else {
|
||
try { hash = new URL(url).hash; } catch {}
|
||
}
|
||
if (hash) {
|
||
const id = hash.replace(/^#\/?/, "");
|
||
const note = window.document.getElementById(id);
|
||
if (note !== null) {
|
||
try {
|
||
const html = processXRef(id, note.cloneNode(true));
|
||
instance.setContent(html);
|
||
} finally {
|
||
instance.enable();
|
||
instance.show();
|
||
}
|
||
} else {
|
||
// See if we can fetch this
|
||
fetch(url.split('#')[0])
|
||
.then(res => res.text())
|
||
.then(html => {
|
||
const parser = new DOMParser();
|
||
const htmlDoc = parser.parseFromString(html, "text/html");
|
||
const note = htmlDoc.getElementById(id);
|
||
if (note !== null) {
|
||
const html = processXRef(id, note);
|
||
instance.setContent(html);
|
||
}
|
||
}).finally(() => {
|
||
instance.enable();
|
||
instance.show();
|
||
});
|
||
}
|
||
} else {
|
||
// See if we can fetch a full url (with no hash to target)
|
||
// This is a special case and we should probably do some content thinning / targeting
|
||
fetch(url)
|
||
.then(res => res.text())
|
||
.then(html => {
|
||
const parser = new DOMParser();
|
||
const htmlDoc = parser.parseFromString(html, "text/html");
|
||
const note = htmlDoc.querySelector('main.content');
|
||
if (note !== null) {
|
||
// This should only happen for chapter cross references
|
||
// (since there is no id in the URL)
|
||
// remove the first header
|
||
if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
|
||
note.children[0].remove();
|
||
}
|
||
const html = processXRef(null, note);
|
||
instance.setContent(html);
|
||
}
|
||
}).finally(() => {
|
||
instance.enable();
|
||
instance.show();
|
||
});
|
||
}
|
||
}, function(instance) {
|
||
});
|
||
}
|
||
let selectedAnnoteEl;
|
||
const selectorForAnnotation = ( cell, annotation) => {
|
||
let cellAttr = 'data-code-cell="' + cell + '"';
|
||
let lineAttr = 'data-code-annotation="' + annotation + '"';
|
||
const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
|
||
return selector;
|
||
}
|
||
const selectCodeLines = (annoteEl) => {
|
||
const doc = window.document;
|
||
const targetCell = annoteEl.getAttribute("data-target-cell");
|
||
const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
|
||
const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
|
||
const lines = annoteSpan.getAttribute("data-code-lines").split(",");
|
||
const lineIds = lines.map((line) => {
|
||
return targetCell + "-" + line;
|
||
})
|
||
let top = null;
|
||
let height = null;
|
||
let parent = null;
|
||
if (lineIds.length > 0) {
|
||
//compute the position of the single el (top and bottom and make a div)
|
||
const el = window.document.getElementById(lineIds[0]);
|
||
top = el.offsetTop;
|
||
height = el.offsetHeight;
|
||
parent = el.parentElement.parentElement;
|
||
if (lineIds.length > 1) {
|
||
const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
|
||
const bottom = lastEl.offsetTop + lastEl.offsetHeight;
|
||
height = bottom - top;
|
||
}
|
||
if (top !== null && height !== null && parent !== null) {
|
||
// cook up a div (if necessary) and position it
|
||
let div = window.document.getElementById("code-annotation-line-highlight");
|
||
if (div === null) {
|
||
div = window.document.createElement("div");
|
||
div.setAttribute("id", "code-annotation-line-highlight");
|
||
div.style.position = 'absolute';
|
||
parent.appendChild(div);
|
||
}
|
||
div.style.top = top - 2 + "px";
|
||
div.style.height = height + 4 + "px";
|
||
div.style.left = 0;
|
||
let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
|
||
if (gutterDiv === null) {
|
||
gutterDiv = window.document.createElement("div");
|
||
gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
|
||
gutterDiv.style.position = 'absolute';
|
||
const codeCell = window.document.getElementById(targetCell);
|
||
const gutter = codeCell.querySelector('.code-annotation-gutter');
|
||
gutter.appendChild(gutterDiv);
|
||
}
|
||
gutterDiv.style.top = top - 2 + "px";
|
||
gutterDiv.style.height = height + 4 + "px";
|
||
}
|
||
selectedAnnoteEl = annoteEl;
|
||
}
|
||
};
|
||
const unselectCodeLines = () => {
|
||
const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
|
||
elementsIds.forEach((elId) => {
|
||
const div = window.document.getElementById(elId);
|
||
if (div) {
|
||
div.remove();
|
||
}
|
||
});
|
||
selectedAnnoteEl = undefined;
|
||
};
|
||
// Handle positioning of the toggle
|
||
window.addEventListener(
|
||
"resize",
|
||
throttle(() => {
|
||
elRect = undefined;
|
||
if (selectedAnnoteEl) {
|
||
selectCodeLines(selectedAnnoteEl);
|
||
}
|
||
}, 10)
|
||
);
|
||
function throttle(fn, ms) {
|
||
let throttle = false;
|
||
let timer;
|
||
return (...args) => {
|
||
if(!throttle) { // first call gets through
|
||
fn.apply(this, args);
|
||
throttle = true;
|
||
} else { // all the others get throttled
|
||
if(timer) clearTimeout(timer); // cancel #2
|
||
timer = setTimeout(() => {
|
||
fn.apply(this, args);
|
||
timer = throttle = false;
|
||
}, ms);
|
||
}
|
||
};
|
||
}
|
||
// Attach click handler to the DT
|
||
const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
|
||
for (const annoteDlNode of annoteDls) {
|
||
annoteDlNode.addEventListener('click', (event) => {
|
||
const clickedEl = event.target;
|
||
if (clickedEl !== selectedAnnoteEl) {
|
||
unselectCodeLines();
|
||
const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
|
||
if (activeEl) {
|
||
activeEl.classList.remove('code-annotation-active');
|
||
}
|
||
selectCodeLines(clickedEl);
|
||
clickedEl.classList.add('code-annotation-active');
|
||
} else {
|
||
// Unselect the line
|
||
unselectCodeLines();
|
||
clickedEl.classList.remove('code-annotation-active');
|
||
}
|
||
});
|
||
}
|
||
const findCites = (el) => {
|
||
const parentEl = el.parentElement;
|
||
if (parentEl) {
|
||
const cites = parentEl.dataset.cites;
|
||
if (cites) {
|
||
return {
|
||
el,
|
||
cites: cites.split(' ')
|
||
};
|
||
} else {
|
||
return findCites(el.parentElement)
|
||
}
|
||
} else {
|
||
return undefined;
|
||
}
|
||
};
|
||
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
|
||
for (var i=0; i<bibliorefs.length; i++) {
|
||
const ref = bibliorefs[i];
|
||
const citeInfo = findCites(ref);
|
||
if (citeInfo) {
|
||
tippyHover(citeInfo.el, function() {
|
||
var popup = window.document.createElement('div');
|
||
citeInfo.cites.forEach(function(cite) {
|
||
var citeDiv = window.document.createElement('div');
|
||
citeDiv.classList.add('hanging-indent');
|
||
citeDiv.classList.add('csl-entry');
|
||
var biblioDiv = window.document.getElementById('ref-' + cite);
|
||
if (biblioDiv) {
|
||
citeDiv.innerHTML = biblioDiv.innerHTML;
|
||
}
|
||
popup.appendChild(citeDiv);
|
||
});
|
||
return popup.innerHTML;
|
||
});
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</div> <!-- /content -->
|
||
<footer class="footer">
|
||
<div class="nav-footer">
|
||
<div class="nav-footer-left">
|
||
<p>© 2024-2026 Harvard University. Licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC-BY-NC-SA 4.0</a></p>
|
||
</div>
|
||
<div class="nav-footer-center">
|
||
<p>Part of the <a href="https://mlsysbook.ai">Machine Learning Systems</a> textbook</p>
|
||
</div>
|
||
<div class="nav-footer-right">
|
||
<ul class="footer-items list-unstyled">
|
||
<li class="nav-item compact">
|
||
<a class="nav-link" href="https://github.com/harvard-edge/cs249r_book">
|
||
<i class="bi bi-github" role="img" aria-label="View source on GitHub">
|
||
</i>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item compact">
|
||
<a class="nav-link" href="https://github.com/harvard-edge/cs249r_book">
|
||
<i class="bi bi-star" role="img" aria-label="Star this repository">
|
||
</i>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<script>
|
||
/**
|
||
* Subscribe Modal Component for TinyTorch (Quarto version)
|
||
* Elegant popup subscription form
|
||
*/
|
||
|
||
(function() {
|
||
'use strict';
|
||
|
||
function createModalHTML() {
|
||
return `
|
||
<div id="subscribe-modal" class="modal-overlay" style="display: none;">
|
||
<div class="modal-container">
|
||
<button class="modal-close" data-close-modal aria-label="Close">×</button>
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<div class="modal-brand-row">
|
||
<span class="modal-brand-item">📚 MLSysBook</span>
|
||
</div>
|
||
<h2 class="modal-title">Stay in the Loop</h2>
|
||
<p class="modal-subtitle">Get updates on new chapters, hands-on labs, and ML systems resources.</p>
|
||
</div>
|
||
<form id="subscribe-modal-form" class="subscribe-form" action="https://buttondown.email/api/emails/embed-subscribe/mlsysbook" method="post">
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="modal-first-name">First name</label>
|
||
<input type="text" id="modal-first-name" name="metadata__first_name" required placeholder="Jane">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal-last-name">Last name</label>
|
||
<input type="text" id="modal-last-name" name="metadata__last_name" required placeholder="Smith">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal-email">Email</label>
|
||
<input type="email" id="modal-email" name="email" required placeholder="jane@university.edu">
|
||
</div>
|
||
<div class="form-group">
|
||
<label>I am a...</label>
|
||
<div class="role-options role-options-three-compact">
|
||
<label class="role-option">
|
||
<input type="radio" name="metadata__role" value="educator" required>
|
||
<span class="role-label">👨🏫 Educator</span>
|
||
</label>
|
||
<label class="role-option">
|
||
<input type="radio" name="metadata__role" value="student">
|
||
<span class="role-label">🎓 Student</span>
|
||
</label>
|
||
<label class="role-option">
|
||
<input type="radio" name="metadata__role" value="industry">
|
||
<span class="role-label">💼 Industry</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal-organization">Organization <span class="optional-label">(optional)</span></label>
|
||
<input type="text" id="modal-organization" name="metadata__organization" placeholder="University or company">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="modal-motivation">What brings you here? <span class="optional-label">(optional)</span></label>
|
||
<textarea id="modal-motivation" name="metadata__motivation" rows="2" placeholder="e.g., teaching a course, learning ML systems, building edge devices..."></textarea>
|
||
</div>
|
||
<input type="hidden" name="tag" value="tinytorch-site">
|
||
<button type="submit" class="btn btn-primary subscribe-btn">Subscribe</button>
|
||
<p class="form-note">No spam, ever. Unsubscribe anytime.</p>
|
||
</form>
|
||
<div id="modal-subscribe-success" class="subscribe-success" style="display: none;">
|
||
<div class="success-icon">🎉</div>
|
||
<h3>You're in!</h3>
|
||
<p>Welcome to the ML systems community. We'll keep you updated on new content.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
}
|
||
|
||
function createModalCSS() {
|
||
const style = document.createElement('style');
|
||
style.textContent = `
|
||
.modal-overlay {
|
||
position: fixed; top: 0; left: 0; right: 0; bottom: 0;
|
||
background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(4px);
|
||
z-index: 10001; align-items: center; justify-content: center;
|
||
padding: 1rem; animation: fadeIn 0.2s ease;
|
||
}
|
||
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
|
||
@keyframes slideUp { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
|
||
.modal-container {
|
||
background: white; border-radius: 16px; max-width: 440px; width: 100%;
|
||
max-height: 90vh; overflow-y: auto; position: relative;
|
||
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
||
animation: slideUp 0.3s ease; margin: auto;
|
||
}
|
||
.modal-close {
|
||
position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px;
|
||
border: none; background: #f8fafc; border-radius: 50%; font-size: 1.5rem;
|
||
color: #64748b; cursor: pointer; display: flex; align-items: center;
|
||
justify-content: center; transition: all 0.2s ease; z-index: 10; line-height: 1;
|
||
}
|
||
.modal-close:hover { background: white; color: #0f172a; transform: scale(1.05); }
|
||
.modal-content { padding: 2rem 2.5rem 2.5rem 2.5rem; }
|
||
.modal-header { text-align: center; margin-bottom: 1.5rem; display: flex; flex-direction: column; align-items: center; }
|
||
.modal-brand-row { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
|
||
.modal-brand-item { font-size: 0.8rem; font-weight: 600; color: #374151; background: #f3f4f6; padding: 0.3rem 0.6rem; border-radius: 5px; }
|
||
.modal-title { font-size: 1.5rem; font-weight: 700; color: #0f172a; margin: 0 0 0.4rem 0; line-height: 1.2; width: 100%; }
|
||
.modal-subtitle { font-size: 0.9rem; color: #64748b; margin: 0; line-height: 1.5; max-width: 320px; }
|
||
.subscribe-form { display: flex; flex-direction: column; gap: 1.25rem; }
|
||
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||
.form-row .form-group { min-width: 0; }
|
||
.form-row .form-group input { width: 100%; box-sizing: border-box; }
|
||
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
|
||
.form-group label { font-size: 0.9rem; font-weight: 600; color: #0f172a; }
|
||
.optional-label { font-weight: 400; color: #64748b; }
|
||
.form-group input[type="text"], .form-group input[type="email"], .form-group textarea {
|
||
padding: 0.875rem 1rem; border: 1px solid #cbd5e1; border-radius: 8px;
|
||
font-size: 1rem; transition: all 0.2s ease; background: #f8fafc; font-family: inherit;
|
||
}
|
||
.form-group textarea { resize: vertical; min-height: 60px; }
|
||
.form-group input:focus, .form-group textarea:focus {
|
||
outline: none; border-color: #3b82f6; background: white;
|
||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||
}
|
||
.form-group input::placeholder, .form-group textarea::placeholder { color: #94a3b8; }
|
||
.role-options { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
|
||
.role-options-three-compact { grid-template-columns: repeat(3, 1fr); }
|
||
.role-option { cursor: pointer; }
|
||
.role-option input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
|
||
.role-label {
|
||
display: flex; align-items: center; justify-content: center; gap: 0.5rem;
|
||
padding: 0.75rem 1rem; border: 2px solid #e2e8f0; border-radius: 8px;
|
||
font-size: 0.9rem; font-weight: 500; color: #475569; transition: all 0.2s ease; background: #f8fafc;
|
||
}
|
||
.role-options-three-compact .role-label { padding: 0.625rem 0.5rem; font-size: 0.8rem; text-align: center; }
|
||
.role-option input[type="radio"]:checked + .role-label { border-color: #3b82f6; background: rgba(59, 130, 246, 0.08); color: #3b82f6; }
|
||
.role-option:hover .role-label { border-color: #cbd5e1; background: white; }
|
||
.subscribe-btn { width: 100%; padding: 1rem; font-size: 1rem; margin-top: 0.5rem;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
border-radius: 8px; text-decoration: none; font-weight: 600; border: none; cursor: pointer;
|
||
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); color: white; font-family: inherit;
|
||
}
|
||
.subscribe-btn:hover { background: linear-gradient(135deg, #fb923c 0%, #f97316 100%); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3); }
|
||
.form-note { text-align: center; font-size: 0.85rem; color: #64748b; margin: 0; }
|
||
.subscribe-success { text-align: center; padding: 2rem 1rem; }
|
||
.success-icon { font-size: 3rem; margin-bottom: 1rem; }
|
||
.subscribe-success h3 { font-size: 1.5rem; font-weight: 600; color: #0f172a; margin-bottom: 0.5rem; }
|
||
.subscribe-success p { color: #475569; font-size: 1rem; }
|
||
|
||
/* Quarto dark mode */
|
||
.quarto-dark .modal-container, html[data-bs-theme="dark"] .modal-container { background: #1e293b; }
|
||
.quarto-dark .modal-close, html[data-bs-theme="dark"] .modal-close { background: #0f172a; color: #94a3b8; }
|
||
.quarto-dark .modal-title, html[data-bs-theme="dark"] .modal-title,
|
||
.quarto-dark .form-group label, html[data-bs-theme="dark"] .form-group label { color: #f1f5f9; }
|
||
.quarto-dark .modal-subtitle, html[data-bs-theme="dark"] .modal-subtitle { color: #cbd5e1; }
|
||
.quarto-dark .form-group input, html[data-bs-theme="dark"] .form-group input,
|
||
.quarto-dark .form-group textarea, html[data-bs-theme="dark"] .form-group textarea { background: #0f172a; border-color: #334155; color: #f1f5f9; }
|
||
.quarto-dark .role-label, html[data-bs-theme="dark"] .role-label { background: #0f172a; border-color: #334155; color: #cbd5e1; }
|
||
|
||
@media (max-width: 640px) { .modal-content { padding: 2rem 1.5rem; } .form-row { grid-template-columns: 1fr; } }
|
||
`;
|
||
return style;
|
||
}
|
||
|
||
function initModal() {
|
||
document.head.appendChild(createModalCSS());
|
||
const modalDiv = document.createElement('div');
|
||
modalDiv.innerHTML = createModalHTML();
|
||
document.body.appendChild(modalDiv.firstElementChild);
|
||
|
||
const modal = document.getElementById('subscribe-modal');
|
||
const form = document.getElementById('subscribe-modal-form');
|
||
const success = document.getElementById('modal-subscribe-success');
|
||
|
||
window.openSubscribeModal = function() {
|
||
modal.style.display = 'flex';
|
||
document.body.style.overflow = 'hidden';
|
||
setTimeout(() => { const fi = document.getElementById('modal-first-name'); if (fi) fi.focus(); }, 100);
|
||
};
|
||
|
||
window.closeSubscribeModal = function() {
|
||
modal.style.display = 'none';
|
||
document.body.style.overflow = '';
|
||
setTimeout(() => { form.style.display = 'flex'; form.reset(); success.style.display = 'none'; }, 300);
|
||
};
|
||
|
||
modal.addEventListener('click', (e) => { if (e.target === modal) closeSubscribeModal(); });
|
||
const closeBtn = modal.querySelector('[data-close-modal]');
|
||
if (closeBtn) closeBtn.addEventListener('click', closeSubscribeModal);
|
||
document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && modal.style.display === 'flex') closeSubscribeModal(); });
|
||
|
||
form.addEventListener('submit', function() {
|
||
setTimeout(() => { form.style.display = 'none'; success.style.display = 'block'; setTimeout(closeSubscribeModal, 5000); }, 100);
|
||
});
|
||
|
||
if (window.location.hash === '#subscribe') setTimeout(() => openSubscribeModal(), 300);
|
||
window.addEventListener('hashchange', function() { if (window.location.hash === '#subscribe') openSubscribeModal(); });
|
||
|
||
setTimeout(() => {
|
||
document.querySelectorAll('#navbar-subscribe-btn, a[href*="#subscribe"], a.subscribe-link').forEach(link => {
|
||
link.addEventListener('click', function(e) { e.preventDefault(); openSubscribeModal(); });
|
||
});
|
||
}, 1000);
|
||
}
|
||
|
||
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initModal);
|
||
else initModal();
|
||
})();
|
||
</script>
|
||
<script>
|
||
/**
|
||
* Interactive ML History Timeline (Quarto version)
|
||
* Handles popup functionality for milestone cards
|
||
*/
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const timelineData = {
|
||
perceptron: {
|
||
year: "1958", title: "The Perceptron", researcher: "Frank Rosenblatt",
|
||
subtitle: "The first neural network architecture starts the field",
|
||
achievement: "Binary classification with a forward pass",
|
||
architecture: "Input → Linear → Sigmoid → Output",
|
||
whatYouBuild: ["Binary classification with random weights", "Simple but revolutionary architecture", "YOUR Linear layer recreates history"],
|
||
systemsInsights: ["Memory: O(n) parameters", "Compute: O(n) operations", "Limitation: Only linearly separable problems"],
|
||
modules: "After Modules 01-03", expectedResults: "~50% with untrained random weights",
|
||
commands: ["tito milestone run perceptron"]
|
||
},
|
||
xor: {
|
||
year: "1969", title: "The XOR Crisis", researcher: "Minsky & Papert",
|
||
subtitle: "Hidden layers solve non-linear problems that nearly ended AI research",
|
||
achievement: "Non-linear learning through hidden representations",
|
||
architecture: "Input → Linear → ReLU → Linear → Output",
|
||
whatYouBuild: ["Hidden layers enable non-linear solutions", "Multi-layer networks break through limitations", "YOUR autograd makes it possible"],
|
||
systemsInsights: ["Memory: O(n²) with hidden layers", "Compute: O(n²) operations", "Breakthrough: Hidden representations"],
|
||
modules: "After Modules 02-06", expectedResults: "50% (single layer) → 100% (multi-layer) on XOR",
|
||
commands: ["tito milestone run xor"]
|
||
},
|
||
mlp: {
|
||
year: "1986", title: "MLP Revival", researcher: "Backpropagation Era",
|
||
subtitle: "Backpropagation enables training deep networks on real datasets",
|
||
achievement: "Multi-class digit recognition",
|
||
architecture: "Images → Flatten → Linear → ReLU → Linear → ReLU → Linear → Classes",
|
||
whatYouBuild: ["XOR solved with hidden layers", "TinyDigits classification", "YOUR training pipeline learns real images"],
|
||
systemsInsights: ["Memory: ~2.4K parameters for TinyDigits", "Compute: Dense matrix operations", "Architecture: Multi-layer feature learning"],
|
||
modules: "After Modules 01-08", expectedResults: "Solves XOR, 85%+ on TinyDigits",
|
||
commands: ["tito milestone run mlp"]
|
||
},
|
||
cnn: {
|
||
year: "1998", title: "CNN Revolution", researcher: "Yann LeCun",
|
||
subtitle: "CNNs exploit spatial structure for computer vision—enabling modern AI",
|
||
achievement: "Spatial intelligence for computer vision",
|
||
architecture: "Images → Conv → ReLU → Pool → Conv → ReLU → Pool → Flatten → Linear → Classes",
|
||
whatYouBuild: ["Convolutional feature extraction", "Natural image classification (CIFAR-10)", "YOUR Conv2d + MaxPool2d unlock spatial intelligence"],
|
||
systemsInsights: ["Memory: ~1M parameters (weight sharing reduces vs dense)", "Compute: Convolution is intensive but parallelizable", "Architecture: Local connectivity + translation invariance"],
|
||
modules: "After Modules 02-09", expectedResults: "75%+ accuracy on CIFAR-10 ✨",
|
||
commands: ["tito milestone run cnn"], northStar: true
|
||
},
|
||
transformer: {
|
||
year: "2017", title: "Transformer Era", researcher: "Vaswani et al.",
|
||
subtitle: "Attention mechanism launches the LLM revolution (GPT, BERT, ChatGPT)",
|
||
achievement: "Self-attention for language understanding",
|
||
architecture: "Tokens → Embeddings → Attention → FFN → ... → Attention → Output",
|
||
whatYouBuild: ["Self-attention mechanisms", "Autoregressive text generation", "YOUR attention implementation generates language"],
|
||
systemsInsights: ["Memory: O(n²) attention requires careful management", "Compute: Highly parallelizable", "Architecture: Long-range dependencies"],
|
||
modules: "After Modules 02-13", expectedResults: "Loss < 1.5, coherent responses to questions",
|
||
commands: ["tito milestone run transformer"]
|
||
},
|
||
olympics: {
|
||
year: "2018", title: "MLPerf Torch Olympics", researcher: "MLCommons (founded 2018)",
|
||
subtitle: "Systematic optimization becomes essential as models grow larger",
|
||
achievement: "Production-ready optimization",
|
||
architecture: "Profile → Compress → Accelerate",
|
||
whatYouBuild: ["Performance profiling and bottleneck analysis", "Model compression (quantization + pruning)", "Inference acceleration (KV-cache + batching)"],
|
||
systemsInsights: ["Memory: 4-16× compression through quantization/pruning", "Speed: 12-40× faster generation with KV-cache + batching", "Workflow: Systematic 'measure → optimize → validate' methodology"],
|
||
modules: "After Modules 14-18", expectedResults: "8-16× smaller models, 12-40× faster inference",
|
||
commands: ["tito milestone run mlperf"]
|
||
}
|
||
};
|
||
|
||
// Create popup element
|
||
let popup = document.getElementById('ml-timeline-popup');
|
||
if (!popup) {
|
||
popup = document.createElement('div');
|
||
popup.id = 'ml-timeline-popup';
|
||
popup.className = 'ml-timeline-popup-overlay';
|
||
popup.innerHTML = '<div class="ml-timeline-popup"></div>';
|
||
document.body.appendChild(popup);
|
||
}
|
||
|
||
// Handle clicks on timeline items
|
||
document.querySelectorAll('.ml-timeline-content').forEach(card => {
|
||
card.style.cursor = 'pointer';
|
||
card.addEventListener('click', function() {
|
||
const item = this.closest('.ml-timeline-item');
|
||
// Get milestone type from class list (second class after 'ml-timeline-item' and 'left'/'right')
|
||
const classes = Array.from(item.classList);
|
||
const milestoneType = classes.find(c => !['ml-timeline-item', 'left', 'right'].includes(c));
|
||
const data = timelineData[milestoneType];
|
||
if (!data) return;
|
||
|
||
const popupInner = popup.querySelector('.ml-timeline-popup');
|
||
popupInner.innerHTML = `
|
||
<button class="ml-timeline-popup-close" aria-label="Close">×</button>
|
||
<h3><span style="color: #f97316; font-size: 0.85rem; display: block; margin-bottom: 0.25rem;">${data.year}</span>${data.title}</h3>
|
||
<p style="color: #64748b; margin: 0.5rem 0 1rem 0;">${data.subtitle}</p>
|
||
${data.northStar ? '<div style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 1rem; border-radius: 0.5rem; margin: 1rem 0; border-left: 4px solid #f59e0b;"><strong>🎯 North Star Achievement</strong> — This is a major milestone in your TinyTorch journey!</div>' : ''}
|
||
<div style="margin: 1rem 0;"><h4 style="font-size: 0.95rem; margin: 0 0 0.5rem 0;">The ${data.researcher} Breakthrough</h4><p><strong>${data.achievement}</strong></p></div>
|
||
<div style="margin: 1rem 0;"><h4 style="font-size: 0.95rem; margin: 0 0 0.5rem 0;">Architecture</h4><div style="background: #f8fafc; padding: 0.75rem; border-radius: 0.375rem; font-family: monospace; font-size: 0.85rem;">${data.architecture}</div></div>
|
||
<div style="margin: 1rem 0;"><h4 style="font-size: 0.95rem; margin: 0 0 0.5rem 0;">What You'll Build</h4><ul>${data.whatYouBuild.map(i => `<li>${i}</li>`).join('')}</ul></div>
|
||
<div style="margin: 1rem 0;"><h4 style="font-size: 0.95rem; margin: 0 0 0.5rem 0;">Systems Insights</h4><ul>${data.systemsInsights.map(i => `<li>${i}</li>`).join('')}</ul></div>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0;">
|
||
<div style="background: #f8fafc; padding: 0.75rem; border-radius: 0.375rem;"><div style="font-size: 0.75rem; color: #64748b; margin-bottom: 0.25rem;">Prerequisites</div><div style="font-weight: 600;">${data.modules}</div></div>
|
||
<div style="background: #f8fafc; padding: 0.75rem; border-radius: 0.375rem;"><div style="font-size: 0.75rem; color: #64748b; margin-bottom: 0.25rem;">Expected Results</div><div style="font-weight: 600;">${data.expectedResults}</div></div>
|
||
</div>
|
||
<div style="margin: 1rem 0;"><h4 style="font-size: 0.95rem; margin: 0 0 0.5rem 0;">Try It Yourself</h4><div style="background: #f8fafc; padding: 0.75rem; border-radius: 0.375rem; font-family: monospace; font-size: 0.85rem;">${data.commands.join('\n')}</div></div>
|
||
`;
|
||
|
||
popup.classList.add('active');
|
||
popup.style.display = 'flex';
|
||
|
||
popup.querySelector('.ml-timeline-popup-close').addEventListener('click', () => {
|
||
popup.classList.remove('active');
|
||
popup.style.display = 'none';
|
||
});
|
||
});
|
||
});
|
||
|
||
// Close on background click
|
||
popup.addEventListener('click', function(e) { if (e.target === popup) { popup.classList.remove('active'); popup.style.display = 'none'; } });
|
||
// Close on ESC
|
||
document.addEventListener('keydown', function(e) { if (e.key === 'Escape' && popup.classList.contains('active')) { popup.classList.remove('active'); popup.style.display = 'none'; } });
|
||
});
|
||
</script>
|
||
<script>
|
||
// Inject subtitle + framework version chip under sidebar logo.
|
||
// The chip's version literal is sourced from tinytorch/settings.ini and
|
||
// kept in sync by the tinytorch-publish-live workflow's UPDATE_VERSION
|
||
// step on each release. Update marker for sed: TINYTORCH_VERSION_CHIP.
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const sidebarLogo = document.querySelector('.sidebar-logo');
|
||
if (!sidebarLogo) return;
|
||
|
||
// The logo <img> sits inside Quarto's <a class="sidebar-logo-link"> wrapper.
|
||
// Inserting our subtitle as a sibling of the <img> would nest the subtitle's
|
||
// link INSIDE that anchor — invalid HTML, so the browser fires the outer logo
|
||
// link (./index.html) instead of navigating to the textbook. Insert AFTER the
|
||
// logo anchor, as a child of .sidebar-header, so our links are not nested.
|
||
const logoLink = sidebarLogo.closest('.sidebar-logo-link') || sidebarLogo;
|
||
const anchorHost = logoLink.parentElement;
|
||
|
||
// 1. Existing subtitle — what TinyTorch IS in relation to the textbook.
|
||
const subtitle = document.createElement('div');
|
||
subtitle.className = 'sidebar-subtitle';
|
||
subtitle.innerHTML = 'A Build-It-Yourself Companion to the<br><a href="https://mlsysbook.ai" style="color: #D4740C; text-decoration: none;">Machine Learning Systems</a> textbook';
|
||
anchorHost.insertBefore(subtitle, logoLink.nextSibling);
|
||
|
||
// 2. Framework version chip — explicitly identifies TinyTorch's version,
|
||
// not the textbook's. Visually separated so the reader does not parse
|
||
// the version as part of the subtitle prose. Click → GitHub Releases
|
||
// filtered for tinytorch tags (the canonical changelog destination).
|
||
const chipWrap = document.createElement('div');
|
||
chipWrap.className = 'tinytorch-version-chip-wrap';
|
||
|
||
const chip = document.createElement('a');
|
||
chip.className = 'tinytorch-version-chip';
|
||
chip.href = 'https://github.com/harvard-edge/cs249r_book/releases?q=tinytorch';
|
||
chip.target = '_blank';
|
||
chip.rel = 'noopener';
|
||
chip.innerHTML = '🔥 TinyTorch v0.1.13 →'; // TINYTORCH_VERSION_CHIP
|
||
|
||
chipWrap.appendChild(chip);
|
||
subtitle.parentNode.insertBefore(chipWrap, subtitle.nextSibling);
|
||
});
|
||
</script>
|
||
<style>
|
||
.sidebar-subtitle {
|
||
text-align: center;
|
||
font-size: 0.8rem;
|
||
color: #6b7280;
|
||
line-height: 1.4;
|
||
padding: 0 1rem 0.5rem 1rem;
|
||
margin-top: 0.5rem;
|
||
}
|
||
.sidebar-subtitle a:hover {
|
||
color: #f97316 !important;
|
||
}
|
||
|
||
/* Version chip — divider above + amber pill anchored to TinyTorch brand */
|
||
.tinytorch-version-chip-wrap {
|
||
text-align: center;
|
||
margin: 0 1rem;
|
||
padding: 0.5rem 0 0.75rem;
|
||
border-top: 1px solid #e5e7eb;
|
||
}
|
||
.tinytorch-version-chip {
|
||
display: inline-block;
|
||
padding: 0.15rem 0.65rem;
|
||
border: 1px solid #D4740C;
|
||
border-radius: 999px;
|
||
background: rgba(212, 116, 12, 0.08);
|
||
color: #D4740C !important; /* override Quarto's default link color */
|
||
font-size: 0.72rem;
|
||
font-weight: 600;
|
||
text-decoration: none !important;
|
||
white-space: nowrap;
|
||
letter-spacing: 0.01em;
|
||
transition: background-color 0.15s ease;
|
||
}
|
||
.tinytorch-version-chip:hover {
|
||
background: rgba(212, 116, 12, 0.18);
|
||
color: #D4740C !important;
|
||
text-decoration: none;
|
||
}
|
||
|
||
/* Dark-mode overrides — brighter amber to match dark-mode.scss $accent */
|
||
[data-bs-theme="dark"] .tinytorch-version-chip-wrap {
|
||
border-top-color: #454d55;
|
||
}
|
||
[data-bs-theme="dark"] .tinytorch-version-chip {
|
||
border-color: #F59E0B;
|
||
color: #F59E0B !important;
|
||
background: rgba(245, 158, 11, 0.1);
|
||
}
|
||
[data-bs-theme="dark"] .tinytorch-version-chip:hover {
|
||
background: rgba(245, 158, 11, 0.2);
|
||
color: #F59E0B !important;
|
||
}
|
||
</style>
|
||
<!--
|
||
MLSysBook release-pill — shared footer version chip for Quarto + static sites.
|
||
|
||
Renders a small "v0.1.0 · Apr 26, 2026" chip from a deployed
|
||
release-manifest.json. Best-effort chrome: silent on any fetch failure
|
||
(manifest missing, offline, CORS). Use at any site that emits a manifest
|
||
via scripts/version/release.py emit-manifest.
|
||
|
||
── Standardized placement (all MLSysBook sites) ──
|
||
|
||
The chip lives in the page-footer, right slot, so it reads as an
|
||
intentional part of the footer bar (not dangling below the page). Two
|
||
pieces per site:
|
||
|
||
1. This file loads the style + populator script site-wide:
|
||
|
||
format:
|
||
html:
|
||
include-in-header:
|
||
- text: |
|
||
<meta name="release-manifest" content="/<project-base>/release-manifest.json">
|
||
include-after-body:
|
||
- file: ../shared/release/release-pill.html
|
||
|
||
2. Each page-footer places the chip span where it should render:
|
||
|
||
website:
|
||
page-footer:
|
||
right:
|
||
- text: |
|
||
<span class="release-pill" data-release-pill></span>
|
||
- icon: github
|
||
href: ...
|
||
|
||
The meta tag tells the script where to find the manifest. The script
|
||
populates every span carrying data-release-pill, so the chip can sit in
|
||
the footer (canonical), an about page, or anywhere else.
|
||
|
||
── Manifest contract ──
|
||
|
||
The manifest is the JSON written by scripts/version/release.py
|
||
emit-manifest. Required keys: releaseId, releaseHash. Optional but
|
||
recommended: buildDate, project. Anything else is ignored.
|
||
|
||
── Why runtime fetch instead of build-time templating ──
|
||
|
||
Build-time templating would be deterministic but requires per-project
|
||
Lua/template machinery. Runtime fetch is project-agnostic and works
|
||
identically across Quarto, Next.js, and plain HTML. The one fetch per
|
||
page-load is cheap and the chip degrades to nothing on failure.
|
||
-->
|
||
|
||
<style>
|
||
/* Fixed muted gray on every site — the chip must look identical regardless of
|
||
each Quarto theme's accent colors (do NOT inherit --bs-secondary / link color). */
|
||
.release-pill {
|
||
display: inline-flex;
|
||
align-items: baseline;
|
||
gap: 0.25em;
|
||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
|
||
font-size: 0.75rem;
|
||
line-height: 1;
|
||
color: var(--release-pill-color, #6c757d);
|
||
}
|
||
.release-pill a,
|
||
.release-pill a:visited,
|
||
.release-pill-version,
|
||
.release-pill-date {
|
||
color: var(--release-pill-color, #6c757d);
|
||
text-decoration: none;
|
||
}
|
||
.release-pill a:hover {
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
.release-pill-date {
|
||
opacity: 0.75;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
(function () {
|
||
var pills = document.querySelectorAll('[data-release-pill]');
|
||
if (!pills.length) return;
|
||
|
||
// Manifest URL resolution order:
|
||
// 1. data-manifest attribute on the pill (per-page override)
|
||
// 2. <meta name="release-manifest" content="..."> in <head>
|
||
// 3. './release-manifest.json' relative to current page (fallback)
|
||
var meta = document.querySelector('meta[name="release-manifest"]');
|
||
var metaPath = meta && meta.getAttribute('content');
|
||
|
||
fetch(metaPath || './release-manifest.json', { cache: 'no-store' })
|
||
.then(function (res) { return res.ok ? res.json() : null; })
|
||
.then(function (m) {
|
||
if (!m || !m.releaseId || !m.releaseHash) return;
|
||
var date = m.buildDate
|
||
? new Date(m.buildDate).toLocaleDateString('en-US',
|
||
{ year: 'numeric', month: 'short', day: 'numeric' })
|
||
: '';
|
||
var shortHash = String(m.releaseHash).slice(0, 7);
|
||
var title =
|
||
(m.project ? m.project + ' ' : '') +
|
||
'v' + m.releaseId +
|
||
(date ? ' · built ' + date : '') +
|
||
' · hash ' + shortHash;
|
||
|
||
pills.forEach(function (el) {
|
||
var linkHref = el.getAttribute('data-link') || '#release';
|
||
var a = document.createElement('a');
|
||
a.href = linkHref;
|
||
a.title = title;
|
||
a.setAttribute('aria-label',
|
||
'Release v' + m.releaseId + (date ? ', built ' + date : ''));
|
||
var v = document.createElement('span');
|
||
v.className = 'release-pill-version';
|
||
v.textContent = 'v' + m.releaseId;
|
||
a.appendChild(v);
|
||
if (date) {
|
||
var d = document.createElement('span');
|
||
d.className = 'release-pill-date';
|
||
d.textContent = ' · ' + date;
|
||
a.appendChild(d);
|
||
}
|
||
el.innerHTML = '';
|
||
el.appendChild(a);
|
||
});
|
||
})
|
||
.catch(function () { /* silent: best-effort chrome */ });
|
||
})();
|
||
</script>
|
||
|
||
|
||
|
||
|
||
</body></html> |