github-starred/cs249r_book
2
0
Fork 0
mirror of https://github.com/harvard-edge/cs249r_book.git synced 2026-07-23 14:31:14 -05:00
Code Issues 276 Packages Projects Releases 26 Wiki Activity
Files
5cb41f2c6a157e4388ef9cf5f311b5af8900a7cf
cs249r_book/404.html
T

1576 lines
67 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!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 – Machine Learning Systems</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="/site_libs/quarto-nav/quarto-nav.js"></script>
<script src="/site_libs/clipboard/clipboard.min.js"></script>
<script src="/site_libs/quarto-search/autocomplete.umd.js"></script>
<script src="/site_libs/quarto-search/fuse.min.js"></script>
<script src="/site_libs/quarto-search/quarto-search.js"></script>
<meta name="quarto:offset" content="/">
<script src="/site_libs/quarto-html/quarto.js" type="module"></script>
<script src="/site_libs/quarto-html/tabsets/tabsets.js" type="module"></script>
<script src="/site_libs/quarto-html/popper.min.js"></script>
<script src="/site_libs/quarto-html/tippy.umd.min.js"></script>
<script src="/site_libs/quarto-html/anchor.min.js"></script>
<link href="/site_libs/quarto-html/tippy.css" rel="stylesheet">
<link href="/site_libs/quarto-html/quarto-syntax-highlighting-07314a9cf6582ab18f4f031a2d4fd43d.css" rel="stylesheet" class="quarto-color-scheme" id="quarto-text-highlighting-styles">
<link href="/site_libs/quarto-html/quarto-syntax-highlighting-dark-5b9c4d9438c2366fdf56ac55b12b357f.css" rel="stylesheet" class="quarto-color-scheme quarto-color-alternate" id="quarto-text-highlighting-styles">
<link href="/site_libs/quarto-html/quarto-syntax-highlighting-07314a9cf6582ab18f4f031a2d4fd43d.css" rel="stylesheet" class="quarto-color-scheme-extra" id="quarto-text-highlighting-styles">
<script src="/site_libs/bootstrap/bootstrap.min.js"></script>
<link href="/site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="/site_libs/bootstrap/bootstrap-7362de55b16c8f027cf6706e64a956b9.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme" id="quarto-bootstrap" data-mode="light">
<link href="/site_libs/bootstrap/bootstrap-dark-98821bc8f9602166cec9339ff8539b2d.min.css" rel="stylesheet" append-hash="true" class="quarto-color-scheme quarto-color-alternate" id="quarto-bootstrap" data-mode="light">
<link href="/site_libs/bootstrap/bootstrap-7362de55b16c8f027cf6706e64a956b9.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": [
"shift+?"
],
"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>
<script async="" src="https://www.googletagmanager.com/gtag/js?id=G-M21L0CBCVN"></script>
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-M21L0CBCVN', { 'anonymize_ip': true});
</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&amp;family=JetBrains+Mono:wght@400;500&amp;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>
<meta name="theme-color" content="#A51C30">
<script src="/assets/scripts/subscribe-modal.js" defer=""></script>
<meta property="og:title" content="Page Not Found – Machine Learning Systems">
<meta property="og:image" content="https://mlsysbook.ai/vol1/assets/images/covers/cover-hardcover-book-vol1.png">
<meta property="og:site_name" content="Machine Learning Systems">
<meta property="og:locale" content="en_US">
<meta name="twitter:title" content="Page Not Found – Machine Learning Systems">
<meta name="twitter:image" content="https://mlsysbook.ai/vol1/assets/images/covers/cover-hardcover-book-vol1.png">
<meta name="twitter:card" content="summary_large_image">
</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="/index.html" class="navbar-brand navbar-brand-logo">
<img src="/assets/logo-seas-shield.png" alt="" class="navbar-logo light-content">
<img src="/assets/logo-seas-shield.png" alt="" class="navbar-logo dark-content">
</a>
<a class="navbar-brand" href="/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-home" role="link" data-bs-toggle="dropdown" aria-expanded="false">
<span class="menu-text">Home</span>
</a>
<ul class="dropdown-menu" aria-labelledby="nav-menu-home">
<li>
<a class="dropdown-item" href="/index.html"><i class="bi bi-house" role="img">
</i>
<span class="dropdown-text">Landing Page</span></a>
</li>
<li><hr class="dropdown-divider"></li>
<li>
<a class="dropdown-item" href="/about/index.html"><i class="bi bi-bullseye" role="img">
</i>
<span class="dropdown-text">Mission</span></a>
</li>
<li>
<a class="dropdown-item" href="/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="/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="/community/index.html"><i class="bi bi-globe" role="img">
</i>
<span class="dropdown-text">Community</span></a>
</li>
<li>
<a class="dropdown-item" href="/community/events.html"><i class="bi bi-calendar-event" role="img">
</i>
<span class="dropdown-text">Events</span></a>
</li>
<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>
</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 &amp; 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 &amp; 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="https://mlsysbook.ai/newsletter/"> <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="02394d55ca579bb063fe13b787a94798" class="alert alert-primary hidden"><i class="bi bi-megaphone quarto-announcement-icon"></i><div class="quarto-announcement-content">
<p>📖 <strong>ML Systems</strong> — an open-access textbook on the engineering of intelligent systems. <a href="https://mlsysbook.ai/vol1/">Vol I: Foundations →</a> · <a href="https://mlsysbook.ai/vol2/">Vol II: At Scale →</a><br> 🛠️ <strong>Alongside the book:</strong> <a href="https://mlsysbook.ai/tinytorch/">TinyTorch</a> (build) · <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 &amp; 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-full page-navbar">
<!-- sidebar -->
<!-- margin-sidebar -->
<!-- main -->
<main class="content column-page" 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 column-page">
</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">&nbsp;</p>
<div class="j404-actions">
<a class="j404-btn j404-btn-primary" href="/">← Go home</a>
<a class="j404-btn j404-btn-secondary" href="/games/">Open the playground →</a>
</div>
<div class="j404-meta-row">
<button class="j404-refresh" type="button" onclick="window.j404Pick &amp;&amp; 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="/vol1/">Volume I</a>
<a href="/vol2/">Volume II</a>
<a href="/tinytorch/">TinyTorch</a>
<a href="/labs/">Labs</a>
<a href="/kits/">Kits</a>
<a href="/slides/">Slides</a>
<a href="/instructors/">Instructors</a>
<a href="/mlsysim/">MLSys·im</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>
</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\/");
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;
}
}
}
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><br> <!-- MLSB_BUILD_STAMP --></p>
</div>
<div class="nav-footer-center">
<p><a href="https://mlsysbook.ai/vol1/">Volume I</a> · <a href="https://mlsysbook.ai/vol2/">Volume II</a> · <a href="https://mlsysbook.ai/about/">About</a> · <a href="https://mlsysbook.ai/community/">Community</a> · <a href="https://mlsysbook.ai/newsletter/">Newsletter</a></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>
</ul>
</div>
</div>
</footer>
</body></html>
Reference in New Issue View Git Blame Copy Permalink