mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-11-09 10:39:41 -06:00
Vijay Janapa Reddi
4f3b0dfc7b
The page said five demos and claimed 44/44 unit tests, a count the video never shows. Demo 02 predated the test-name fix and showed AutogradCore and Module 06Completion.
223 lines
9.0 KiB
HTML
223 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Tiny🔥Torch · Showcase Tapes Gallery</title>
|
||
<style>
|
||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||
body {
|
||
background-color: #0b0f19;
|
||
color: #f1f5f9;
|
||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
padding: 2rem 1.5rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
header {
|
||
text-align: center;
|
||
max-width: 800px;
|
||
margin-bottom: 2.5rem;
|
||
}
|
||
h1 {
|
||
font-size: 2.2rem;
|
||
font-weight: 800;
|
||
color: #ffffff;
|
||
margin-bottom: 0.5rem;
|
||
letter-spacing: -0.02em;
|
||
}
|
||
h1 span {
|
||
color: #f97316;
|
||
}
|
||
p.subtitle {
|
||
font-size: 1.1rem;
|
||
color: #94a3b8;
|
||
margin-bottom: 1.25rem;
|
||
}
|
||
.back-btn {
|
||
display: inline-block;
|
||
background: #ea580c;
|
||
color: #ffffff;
|
||
padding: 0.6rem 1.4rem;
|
||
border-radius: 8px;
|
||
text-decoration: none;
|
||
font-weight: 600;
|
||
font-size: 0.95rem;
|
||
transition: background 0.2s ease, transform 0.15s ease;
|
||
}
|
||
.back-btn:hover {
|
||
background: #c2410c;
|
||
transform: translateY(-1px);
|
||
}
|
||
.gallery-grid {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 3rem;
|
||
max-width: 860px;
|
||
width: 100%;
|
||
}
|
||
.card {
|
||
background: #0f172a;
|
||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||
border-radius: 14px;
|
||
padding: 1.25rem;
|
||
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
|
||
}
|
||
.card-header {
|
||
margin-bottom: 1rem;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: baseline;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||
padding-bottom: 0.75rem;
|
||
}
|
||
.card-title {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
color: #f8fafc;
|
||
}
|
||
.card-tag {
|
||
font-size: 0.8rem;
|
||
font-family: monospace;
|
||
color: #fb923c;
|
||
background: rgba(251, 146, 60, 0.1);
|
||
padding: 2px 8px;
|
||
border-radius: 4px;
|
||
border: 1px solid rgba(251, 146, 60, 0.2);
|
||
}
|
||
.card-desc {
|
||
font-size: 0.9rem;
|
||
color: #94a3b8;
|
||
margin-bottom: 1rem;
|
||
}
|
||
.card-img-wrapper {
|
||
width: 100%;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: #090d16;
|
||
}
|
||
.card-img-wrapper img,
|
||
.card-img-wrapper video {
|
||
width: 100%;
|
||
height: auto;
|
||
display: block;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<h1>Tiny<span>🔥</span>Torch Showcase Tapes</h1>
|
||
<p class="subtitle">All 7 recorded from real terminal sessions running the current code. Long training stretches play at 5×, marked in the title bar.</p>
|
||
<a href="/index.html#terminal-showcase" class="back-btn">← Back to Interactive Carousel on Landing Page</a>
|
||
</header>
|
||
|
||
<div class="gallery-grid">
|
||
<!-- Tape 01 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">1. One-Line Install & Your First Module</div>
|
||
<div class="card-tag">01_install_and_run.tape</div>
|
||
</div>
|
||
<div class="card-desc">From <code>curl -fsSL https://mlsysbook.ai/tinytorch/install.sh | bash</code> to a working environment: the real installer runs, then <code>tito setup</code> and Module 01 is built, tested, and exported.</div>
|
||
<div class="card-img-wrapper">
|
||
<video autoplay loop muted playsinline poster="assets/images/demos/tinytorch-01-install-and-run.gif">
|
||
<source src="assets/images/demos/tinytorch-01-install-and-run.mp4" type="video/mp4">
|
||
<img src="assets/images/demos/tinytorch-01-install-and-run.gif" alt="Real TinyTorch install from one curl command, then tito setup and completing Module 01 (Tensor) with its tests" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tape 02 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">2. Module Mastery & Historical Milestones Grid</div>
|
||
<div class="card-tag">02_modules_mastery.tape</div>
|
||
</div>
|
||
<div class="card-desc">Completing Module 06 (Autograd Engine) with its unit and integration tests passing, then the full 20/20 module status and all seven historical milestones.</div>
|
||
<div class="card-img-wrapper">
|
||
<video autoplay loop muted playsinline poster="assets/images/demos/tinytorch-02-modules-mastery.gif">
|
||
<source src="assets/images/demos/tinytorch-02-modules-mastery.mp4" type="video/mp4">
|
||
<img src="assets/images/demos/tinytorch-02-modules-mastery.gif" alt="Completing autograd module and viewing 20/20 modules mastery progress grid" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tape 03 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">3. TinyGPT Conversational Chat (Live Typewriter Streaming)</div>
|
||
<div class="card-tag">03_tinygpt_chat.tape</div>
|
||
</div>
|
||
<div class="card-desc">Training TinyGPT on Q&A concepts, diagnosing generalization gaps with the Overfitting Detective, and streaming conversational responses token by token.</div>
|
||
<div class="card-img-wrapper">
|
||
<video autoplay loop muted playsinline poster="assets/images/demos/tinytorch-03-tinygpt-chat.gif">
|
||
<source src="assets/images/demos/tinytorch-03-tinygpt-chat.mp4" type="video/mp4">
|
||
<img src="assets/images/demos/tinytorch-03-tinygpt-chat.gif" alt="TinyGPT conversational interactive terminal chat with live streaming response" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tape 04 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">4. TinyCopilot on TinyPy (AST Compiler Validation)</div>
|
||
<div class="card-tag">04_tinycopilot.tape</div>
|
||
</div>
|
||
<div class="card-desc">Training on TinyPy code snippets, then completing Python function names the model never saw in training. Each greedy completion is checked by the AST parser; failures are shown alongside passes.</div>
|
||
<div class="card-img-wrapper">
|
||
<video autoplay loop muted playsinline poster="assets/images/demos/tinytorch-04-tinycopilot.gif">
|
||
<source src="assets/images/demos/tinytorch-04-tinycopilot.mp4" type="video/mp4">
|
||
<img src="assets/images/demos/tinytorch-04-tinycopilot.gif" alt="TinyCopilot trained on TinyPy completing unseen Python function prompts, with each greedy completion checked by the AST parser, some passing and some failing" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tape 05 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">5. MLPerf Hardware Optimization Olympics & Pareto Frontier</div>
|
||
<div class="card-tag">05_mlperf_opt.tape</div>
|
||
</div>
|
||
<div class="card-desc">Measuring INT8 quantization, pruning, im2col convolutions, and KV-cache memoization with pass gates on YOUR modules, and marking the Pareto frontier computed from those measurements.</div>
|
||
<div class="card-img-wrapper">
|
||
<video autoplay loop muted playsinline poster="assets/images/demos/tinytorch-05-mlperf-opt.gif">
|
||
<source src="assets/images/demos/tinytorch-05-mlperf-opt.mp4" type="video/mp4">
|
||
<img src="assets/images/demos/tinytorch-05-mlperf-opt.gif" alt="MLPerf optimization triad evaluating dense, spatial, and autoregressive models" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tape 06 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">6. Tito CLI Companion & System Health Diagnostics</div>
|
||
<div class="card-tag">06_tito_companion.tape</div>
|
||
</div>
|
||
<div class="card-desc">Interactive terminal companion launcher, quick reference guide, and automated environment diagnostic health checks.</div>
|
||
<div class="card-img-wrapper">
|
||
<video autoplay loop muted playsinline poster="assets/images/demos/tinytorch-06-tito-companion.gif">
|
||
<source src="assets/images/demos/tinytorch-06-tito-companion.mp4" type="video/mp4">
|
||
<img src="assets/images/demos/tinytorch-06-tito-companion.gif" alt="Tito CLI companion and automated system health diagnostic check" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tape 07 -->
|
||
<div class="card">
|
||
<div class="card-header">
|
||
<div class="card-title">7. TinyTorch Olympics & Hardware Arena</div>
|
||
<div class="card-tag">07_tito_olympics.tape</div>
|
||
</div>
|
||
<div class="card-desc">Competitive student benchmarking arena, event scoring, and hardware optimization leaderboards via the Tito CLI.</div>
|
||
<div class="card-img-wrapper">
|
||
<video autoplay loop muted playsinline poster="assets/images/demos/tinytorch-07-tito-olympics.gif">
|
||
<source src="assets/images/demos/tinytorch-07-tito-olympics.mp4" type="video/mp4">
|
||
<img src="assets/images/demos/tinytorch-07-tito-olympics.gif" alt="TinyTorch Olympics and hardware optimization competition arena" />
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|