mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-03-09 07:15:51 -05:00
09602445de
- Vol1: chapter updates across backmatter, benchmarking, data, frameworks, etc. - Vol2: content updates, new appendices (assumptions, communication, fleet, reliability) - Quarto: config, styles, formulas, constants - Add SEMINAL_PAPERS_V2.md, learning_objectives_bolding_parallel.sh - VSCode extension: package.json, chapterNavigatorProvider - Landing page and docs updates
723 lines
20 KiB
HTML
723 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AI Engineering | Machine Learning Systems</title>
|
||
<meta name="description" content="AI Engineering: The discipline of building, optimizing, and deploying intelligent systems. Open educational resources from Harvard University.">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="AI Engineering | Machine Learning Systems">
|
||
<meta property="og:description" content="The discipline of building, optimizing, and deploying intelligent systems.">
|
||
<meta property="og:image" content="https://mlsysbook.ai/book/assets/images/covers/cover-hardcover-book.png">
|
||
<meta property="og:url" content="https://mlsysbook.ai">
|
||
<meta property="og:type" content="website">
|
||
|
||
<!-- Twitter Card -->
|
||
<meta name="twitter:card" content="summary_large_image">
|
||
<meta name="twitter:title" content="AI Engineering | Machine Learning Systems">
|
||
<meta name="twitter:description" content="The discipline of building, optimizing, and deploying intelligent systems.">
|
||
<meta name="twitter:image" content="https://mlsysbook.ai/book/assets/images/covers/cover-hardcover-book.png">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/png" href="logo.png">
|
||
|
||
<!-- Fonts -->
|
||
<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=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||
|
||
<style>
|
||
:root {
|
||
--color-bg: #0a0a0f;
|
||
--color-bg-elevated: #12121a;
|
||
--color-bg-card: #1a1a24;
|
||
--color-border: #2a2a3a;
|
||
--color-text: #e8e8f0;
|
||
--color-text-muted: #9090a0;
|
||
--color-accent: #6366f1;
|
||
--color-accent-bright: #818cf8;
|
||
--color-accent-glow: rgba(99, 102, 241, 0.15);
|
||
--color-harvard: #a51c30;
|
||
--font-display: 'Instrument Serif', Georgia, serif;
|
||
--font-body: 'Outfit', system-ui, sans-serif;
|
||
--font-mono: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
html {
|
||
scroll-behavior: smooth;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-body);
|
||
background: var(--color-bg);
|
||
color: var(--color-text);
|
||
line-height: 1.6;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
/* Background Pattern */
|
||
.bg-pattern {
|
||
position: fixed;
|
||
inset: 0;
|
||
background-image:
|
||
radial-gradient(ellipse 80% 50% at 50% -20%, var(--color-accent-glow), transparent),
|
||
radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08), transparent 40%),
|
||
radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.06), transparent 40%);
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
.grid-overlay {
|
||
position: fixed;
|
||
inset: 0;
|
||
background-image:
|
||
linear-gradient(var(--color-border) 1px, transparent 1px),
|
||
linear-gradient(90deg, var(--color-border) 1px, transparent 1px);
|
||
background-size: 60px 60px;
|
||
opacity: 0.03;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
/* Header */
|
||
header {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 1rem 2rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
background: rgba(10, 10, 15, 0.8);
|
||
backdrop-filter: blur(12px);
|
||
border-bottom: 1px solid var(--color-border);
|
||
z-index: 100;
|
||
}
|
||
|
||
.logo {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
text-decoration: none;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.logo img {
|
||
width: 32px;
|
||
height: 32px;
|
||
}
|
||
|
||
.logo-text {
|
||
font-family: var(--font-mono);
|
||
font-size: 0.875rem;
|
||
font-weight: 500;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
|
||
.header-links {
|
||
display: flex;
|
||
gap: 1.5rem;
|
||
align-items: center;
|
||
}
|
||
|
||
.header-links a {
|
||
color: var(--color-text-muted);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
font-weight: 400;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.header-links a:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.header-links .btn-github {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 6px;
|
||
color: var(--color-text);
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.header-links .btn-github:hover {
|
||
background: var(--color-bg-elevated);
|
||
border-color: var(--color-accent);
|
||
}
|
||
|
||
/* Hero */
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 8rem 2rem 4rem;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.hero-badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.5rem 1rem;
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 100px;
|
||
font-size: 0.8rem;
|
||
color: var(--color-text-muted);
|
||
margin-bottom: 2rem;
|
||
animation: fade-in 0.6s ease-out;
|
||
}
|
||
|
||
.hero-badge .dot {
|
||
width: 6px;
|
||
height: 6px;
|
||
background: var(--color-accent);
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.5; }
|
||
}
|
||
|
||
.hero h1 {
|
||
font-family: var(--font-display);
|
||
font-size: clamp(3rem, 8vw, 5.5rem);
|
||
font-weight: 400;
|
||
line-height: 1.1;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 1.5rem;
|
||
animation: fade-in 0.6s ease-out 0.1s backwards;
|
||
}
|
||
|
||
.hero h1 em {
|
||
font-style: italic;
|
||
color: var(--color-accent-bright);
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.25rem;
|
||
color: var(--color-text-muted);
|
||
max-width: 600px;
|
||
margin-bottom: 3rem;
|
||
animation: fade-in 0.6s ease-out 0.2s backwards;
|
||
}
|
||
|
||
.hero-cta {
|
||
display: flex;
|
||
gap: 1rem;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
animation: fade-in 0.6s ease-out 0.3s backwards;
|
||
}
|
||
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 0.875rem 1.5rem;
|
||
border-radius: 8px;
|
||
font-size: 0.95rem;
|
||
font-weight: 500;
|
||
text-decoration: none;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: var(--color-accent);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background: var(--color-accent-bright);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 8px 30px var(--color-accent-glow);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border);
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: var(--color-bg-elevated);
|
||
border-color: var(--color-text-muted);
|
||
}
|
||
|
||
@keyframes fade-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Section Styles */
|
||
section {
|
||
padding: 6rem 2rem;
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.section-header {
|
||
text-align: center;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.section-header h2 {
|
||
font-family: var(--font-display);
|
||
font-size: 2.5rem;
|
||
font-weight: 400;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.section-header p {
|
||
color: var(--color-text-muted);
|
||
font-size: 1.1rem;
|
||
max-width: 600px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* What is AI Engineering */
|
||
.manifesto {
|
||
background: var(--color-bg-elevated);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 16px;
|
||
padding: 3rem;
|
||
margin-bottom: 4rem;
|
||
}
|
||
|
||
.manifesto-content {
|
||
display: grid;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.manifesto-content p {
|
||
font-size: 1.15rem;
|
||
line-height: 1.8;
|
||
color: var(--color-text-muted);
|
||
}
|
||
|
||
.manifesto-content p:first-child {
|
||
font-size: 1.35rem;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.manifesto-content strong {
|
||
color: var(--color-text);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Resources Grid */
|
||
.resources-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||
gap: 1.5rem;
|
||
}
|
||
|
||
.resource-card {
|
||
background: var(--color-bg-card);
|
||
border: 1px solid var(--color-border);
|
||
border-radius: 12px;
|
||
padding: 2rem;
|
||
text-decoration: none;
|
||
color: var(--color-text);
|
||
transition: all 0.3s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.resource-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: var(--card-accent, var(--color-accent));
|
||
opacity: 0;
|
||
transition: opacity 0.3s;
|
||
}
|
||
|
||
.resource-card:hover {
|
||
border-color: var(--card-accent, var(--color-accent));
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 40px rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.resource-card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.resource-card.primary {
|
||
grid-column: span 2;
|
||
background: linear-gradient(135deg, var(--color-bg-card), var(--color-bg-elevated));
|
||
}
|
||
|
||
@media (max-width: 640px) {
|
||
.resource-card.primary {
|
||
grid-column: span 1;
|
||
}
|
||
}
|
||
|
||
.resource-icon {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.resource-card h3 {
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.resource-card .subtitle {
|
||
font-size: 0.875rem;
|
||
color: var(--color-accent-bright);
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.resource-card p {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.95rem;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.resource-card .arrow {
|
||
position: absolute;
|
||
bottom: 1.5rem;
|
||
right: 1.5rem;
|
||
opacity: 0;
|
||
transform: translateX(-10px);
|
||
transition: all 0.3s;
|
||
color: var(--card-accent, var(--color-accent));
|
||
}
|
||
|
||
.resource-card:hover .arrow {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
/* Volume Cards */
|
||
.volume-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 1.5rem;
|
||
margin-top: 2rem;
|
||
}
|
||
|
||
.volume-card {
|
||
--card-accent: #22c55e;
|
||
}
|
||
|
||
.volume-card.vol2 {
|
||
--card-accent: #f59e0b;
|
||
}
|
||
|
||
.volume-card.full {
|
||
--card-accent: var(--color-accent);
|
||
}
|
||
|
||
/* Audience Section */
|
||
.audience-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 2rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.audience-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
.audience-card {
|
||
text-align: center;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.audience-icon {
|
||
font-size: 3rem;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.audience-card h3 {
|
||
font-size: 1.25rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.audience-card p {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.95rem;
|
||
}
|
||
|
||
/* Footer */
|
||
footer {
|
||
border-top: 1px solid var(--color-border);
|
||
padding: 3rem 2rem;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.footer-logo {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 1rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
.footer-logo img {
|
||
height: 40px;
|
||
}
|
||
|
||
.footer-links {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 2rem;
|
||
margin-bottom: 1.5rem;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.footer-links a {
|
||
color: var(--color-text-muted);
|
||
text-decoration: none;
|
||
font-size: 0.875rem;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.footer-links a:hover {
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.footer-legal {
|
||
color: var(--color-text-muted);
|
||
font-size: 0.8rem;
|
||
}
|
||
|
||
.footer-legal a {
|
||
color: var(--color-text-muted);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* Mobile */
|
||
@media (max-width: 640px) {
|
||
header {
|
||
padding: 1rem;
|
||
}
|
||
|
||
.header-links {
|
||
display: none;
|
||
}
|
||
|
||
.hero {
|
||
padding: 6rem 1.5rem 3rem;
|
||
}
|
||
|
||
section {
|
||
padding: 4rem 1.5rem;
|
||
}
|
||
|
||
.manifesto {
|
||
padding: 2rem 1.5rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-pattern"></div>
|
||
<div class="grid-overlay"></div>
|
||
|
||
<header>
|
||
<a href="/" class="logo">
|
||
<img src="logo.png" alt="MLSysBook">
|
||
<span class="logo-text">mlsysbook.ai</span>
|
||
</a>
|
||
<nav class="header-links">
|
||
<a href="/book/">Textbook</a>
|
||
<a href="/tinytorch/">TinyTorch</a>
|
||
<a href="/kits/">Hardware Kits</a>
|
||
<a href="https://github.com/harvard-edge/cs249r_book" class="btn-github" target="_blank">
|
||
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
|
||
Star
|
||
</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<div class="hero-badge">
|
||
<span class="dot"></span>
|
||
Open Educational Resource
|
||
</div>
|
||
<h1><em>AI Engineering</em></h1>
|
||
<p class="hero-subtitle">
|
||
The discipline of building, optimizing, and deploying intelligent systems.
|
||
From silicon to software, from training to production.
|
||
</p>
|
||
<div class="hero-cta">
|
||
<a href="/book/" class="btn btn-primary">
|
||
Start Learning
|
||
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
|
||
</a>
|
||
<a href="https://github.com/harvard-edge/cs249r_book" class="btn btn-secondary" target="_blank">
|
||
View on GitHub
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="about">
|
||
<div class="manifesto">
|
||
<div class="manifesto-content">
|
||
<p>
|
||
AI is no longer just a research field. It's becoming infrastructure.
|
||
</p>
|
||
<p>
|
||
<strong>AI Engineering</strong> is the emerging discipline that bridges the gap between
|
||
machine learning research and deployed systems. It encompasses the entire lifecycle:
|
||
understanding hardware constraints, optimizing models for efficiency, building robust
|
||
training pipelines, deploying to edge devices, and maintaining systems in production.
|
||
</p>
|
||
<p>
|
||
This isn't about knowing the latest model architecture. It's about understanding
|
||
<strong>why</strong> certain architectures work on certain hardware, <strong>how</strong>
|
||
to make tradeoffs between accuracy and latency, and <strong>when</strong> to choose
|
||
different deployment strategies.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="resources">
|
||
<div class="section-header">
|
||
<h2>Resources</h2>
|
||
<p>A comprehensive ecosystem for learning AI Engineering</p>
|
||
</div>
|
||
|
||
<div class="volume-cards">
|
||
<a href="/vol1/" class="resource-card volume-card">
|
||
<div class="resource-icon">📘</div>
|
||
<h3>Volume I: Foundations</h3>
|
||
<p class="subtitle">Introduction to Machine Learning Systems</p>
|
||
<p>Hardware fundamentals, ML basics, training pipelines, and optimization techniques. Start here.</p>
|
||
<span class="arrow">→</span>
|
||
</a>
|
||
|
||
<a href="/vol2/" class="resource-card volume-card vol2">
|
||
<div class="resource-icon">📙</div>
|
||
<h3>Volume II: At Scale</h3>
|
||
<p class="subtitle">Machine Learning Systems at Scale</p>
|
||
<p>Distributed training, production deployment, security, responsible AI, and emerging architectures.</p>
|
||
<span class="arrow">→</span>
|
||
</a>
|
||
|
||
<a href="/book/" class="resource-card volume-card full">
|
||
<div class="resource-icon">📚</div>
|
||
<h3>Full Textbook</h3>
|
||
<p class="subtitle">Both Volumes Combined</p>
|
||
<p>The complete Machine Learning Systems textbook with all chapters, references, and supplementary material.</p>
|
||
<span class="arrow">→</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="resources-grid" style="margin-top: 1.5rem;">
|
||
<a href="/tinytorch/" class="resource-card" style="--card-accent: #ef4444;">
|
||
<div class="resource-icon">🔥</div>
|
||
<h3>TinyTorch</h3>
|
||
<p class="subtitle">Learn by Building</p>
|
||
<p>Build a deep learning framework from scratch. Understand every layer, from tensors to transformers.</p>
|
||
<span class="arrow">→</span>
|
||
</a>
|
||
|
||
<a href="/kits/" class="resource-card" style="--card-accent: #06b6d4;">
|
||
<div class="resource-icon">🛠️</div>
|
||
<h3>Hardware Kits</h3>
|
||
<p class="subtitle">Edge Deployment</p>
|
||
<p>Hands-on guides for Arduino, Raspberry Pi, and Seeed devices. Deploy ML to real hardware.</p>
|
||
<span class="arrow">→</span>
|
||
</a>
|
||
|
||
<a href="/labs/" class="resource-card" style="--card-accent: #a855f7;">
|
||
<div class="resource-icon">🧪</div>
|
||
<h3>Labs</h3>
|
||
<p class="subtitle">Coming 2026</p>
|
||
<p>Structured exercises and assignments for classroom use. Perfect for courses and self-study.</p>
|
||
<span class="arrow">→</span>
|
||
</a>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="audience">
|
||
<div class="section-header">
|
||
<h2>Who is this for?</h2>
|
||
<p>Whether you're starting out or scaling up</p>
|
||
</div>
|
||
|
||
<div class="audience-grid">
|
||
<div class="audience-card">
|
||
<div class="audience-icon">🎓</div>
|
||
<h3>Students</h3>
|
||
<p>Build a solid foundation in ML systems. Understand not just how models work, but how to deploy them efficiently.</p>
|
||
</div>
|
||
|
||
<div class="audience-card">
|
||
<div class="audience-icon">💼</div>
|
||
<h3>Practitioners</h3>
|
||
<p>Level up from model training to production systems. Learn optimization, deployment, and operational best practices.</p>
|
||
</div>
|
||
|
||
<div class="audience-card">
|
||
<div class="audience-icon">🔬</div>
|
||
<h3>Researchers</h3>
|
||
<p>Ground your research in systems reality. Understand the constraints and opportunities of real hardware.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="footer-content">
|
||
<div class="footer-logo">
|
||
<img src="logo.png" alt="MLSysBook">
|
||
</div>
|
||
<div class="footer-links">
|
||
<a href="/book/">Textbook</a>
|
||
<a href="/tinytorch/">TinyTorch</a>
|
||
<a href="/kits/">Hardware Kits</a>
|
||
<a href="https://github.com/harvard-edge/cs249r_book" target="_blank">GitHub</a>
|
||
<a href="https://opencollective.com/mlsysbook" target="_blank">Support</a>
|
||
</div>
|
||
<p class="footer-legal">
|
||
© 2024–2026 Harvard University. Licensed under
|
||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a>.
|
||
</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|