Spaces:

eyad222
/

Self_Driving_Web

Running

App Files Files Community

eyad222 commited on 5 days ago

Commit

28f06d3

verified ·

1 Parent(s): 4815842

Update index.html

Browse files

Files changed (1) hide show

index.html +1374 -18

index.html CHANGED Viewed

@@ -1,19 +1,1375 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>AutonomousDrive — Self-Driving Car via Behavioral Cloning</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&family=Syne:wght@400;600;700;800&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #050810;
+    --surface: #0c1220;
+    --card: #101828;
+    --border: #1e2d47;
+    --accent: #00e5ff;
+    --accent2: #ff6b35;
+    --accent3: #7c3aed;
+    --gold: #f59e0b;
+    --text: #e2e8f0;
+    --muted: #64748b;
+    --green: #10b981;
+    --red: #ef4444;
+  }
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html { scroll-behavior: smooth; }
+  body {
+    font-family: 'Syne', sans-serif;
+    background: var(--bg);
+    color: var(--text);
+    overflow-x: hidden;
+    line-height: 1.6;
+  }
+  /* ─── NOISE OVERLAY ─── */
+  body::before {
+    content: '';
+    position: fixed; inset: 0;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+    pointer-events: none; z-index: 1000; opacity: .35;
+  }
+  /* ─── NAV ─── */
+  nav {
+    position: fixed; top: 0; left: 0; right: 0;
+    display: flex; align-items: center; justify-content: space-between;
+    padding: 1rem 3rem;
+    background: rgba(5,8,16,.85);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid var(--border);
+    z-index: 900;
+  }
+  .nav-logo {
+    font-family: 'Space Mono', monospace;
+    font-size: .85rem;
+    color: var(--accent);
+    letter-spacing: .1em;
+    text-transform: uppercase;
+  }
+  nav ul { list-style: none; display: flex; gap: 2.5rem; }
+  nav a { color: var(--muted); text-decoration: none; font-size: .85rem; font-weight: 600; letter-spacing: .05em; transition: color .2s; text-transform: uppercase; }
+  nav a:hover { color: var(--accent); }
+  /* ─── HERO ─── */
+  #hero {
+    min-height: 100vh;
+    display: flex; align-items: center; justify-content: center;
+    text-align: center;
+    padding: 8rem 2rem 4rem;
+    position: relative;
+    overflow: hidden;
+  }
+  .hero-grid {
+    position: absolute; inset: 0;
+    background-image:
+      linear-gradient(rgba(0,229,255,.04) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,229,255,.04) 1px, transparent 1px);
+    background-size: 60px 60px;
+    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 30%, transparent 100%);
+  }
+  .hero-glow {
+    position: absolute;
+    width: 600px; height: 600px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(0,229,255,.12) 0%, transparent 70%);
+    top: 50%; left: 50%; transform: translate(-50%, -60%);
+    pointer-events: none;
+  }
+  .hero-badge {
+    display: inline-block;
+    font-family: 'Space Mono', monospace;
+    font-size: .7rem;
+    letter-spacing: .2em;
+    text-transform: uppercase;
+    color: var(--accent);
+    border: 1px solid rgba(0,229,255,.3);
+    padding: .4rem 1.2rem;
+    border-radius: 2rem;
+    margin-bottom: 2rem;
+    background: rgba(0,229,255,.05);
+    animation: fadeUp .8s ease both;
+  }
+  h1 {
+    font-size: clamp(2.5rem, 6vw, 5.5rem);
+    font-weight: 800;
+    line-height: 1.05;
+    letter-spacing: -.02em;
+    margin-bottom: 1.5rem;
+    animation: fadeUp .8s .1s ease both;
+  }
+  h1 span { color: var(--accent); }
+  .hero-sub {
+    max-width: 680px;
+    margin: 0 auto 3rem;
+    color: var(--muted);
+    font-size: 1.1rem;
+    font-weight: 400;
+    animation: fadeUp .8s .2s ease both;
+  }
+  .hero-stats {
+    display: flex; gap: 3rem; justify-content: center; flex-wrap: wrap;
+    animation: fadeUp .8s .3s ease both;
+  }
+  .stat { text-align: center; }
+  .stat-num {
+    font-family: 'Space Mono', monospace;
+    font-size: 2rem;
+    font-weight: 700;
+    color: var(--accent);
+    display: block;
+  }
+  .stat-lbl { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
+  .road-line {
+    width: 100%; height: 3px;
+    background: linear-gradient(90deg, transparent, var(--accent), transparent);
+    margin: 3rem 0 0;
+    animation: scanline 3s linear infinite;
+  }
+  @keyframes scanline {
+    0% { opacity: .4; } 50% { opacity: 1; } 100% { opacity: .4; }
+  }
+  /* ─── SECTIONS ─── */
+  section { padding: 6rem 2rem; position: relative; }
+  .container { max-width: 1200px; margin: 0 auto; }
+  .section-label {
+    font-family: 'Space Mono', monospace;
+    font-size: .7rem;
+    letter-spacing: .25em;
+    text-transform: uppercase;
+    color: var(--accent);
+    margin-bottom: 1rem;
+  }
+  h2 {
+    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
+    font-weight: 800;
+    letter-spacing: -.02em;
+    margin-bottom: 1rem;
+  }
+  h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: .75rem; }
+  .section-intro {
+    color: var(--muted);
+    max-width: 700px;
+    margin-bottom: 4rem;
+    font-size: 1.05rem;
+  }
+  /* ─── CARDS ─── */
+  .card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 2rem;
+    position: relative;
+    overflow: hidden;
+    transition: border-color .25s, transform .25s;
+  }
+  .card:hover { border-color: rgba(0,229,255,.35); transform: translateY(-2px); }
+  .card::before {
+    content: '';
+    position: absolute; inset: 0;
+    background: radial-gradient(circle at top left, rgba(0,229,255,.04), transparent 60%);
+    pointer-events: none;
+  }
+  /* ─── ARCHITECTURE ─── */
+  #architecture { background: var(--surface); }
+  .arch-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+  .layer-block {
+    display: flex; align-items: center; gap: 1rem;
+    background: rgba(0,229,255,.04);
+    border: 1px solid rgba(0,229,255,.15);
+    border-radius: 8px;
+    padding: 1rem 1.5rem;
+    font-family: 'Space Mono', monospace;
+    font-size: .8rem;
+    transition: background .2s;
+  }
+  .layer-block:hover { background: rgba(0,229,255,.08); }
+  .layer-icon {
+    width: 36px; height: 36px;
+    border-radius: 6px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1rem;
+    flex-shrink: 0;
+  }
+  .layer-icon.conv { background: rgba(0,229,255,.15); }
+  .layer-icon.fc { background: rgba(255,107,53,.15); }
+  .layer-icon.drop { background: rgba(124,58,237,.15); }
+  .layer-icon.out { background: rgba(245,158,11,.15); }
+  .layer-info { flex: 1; }
+  .layer-name { color: var(--text); font-weight: 700; }
+  .layer-detail { color: var(--muted); font-size: .7rem; margin-top: .15rem; }
+  .arrow-down {
+    text-align: center;
+    color: var(--muted);
+    font-size: 1.2rem;
+    margin: .25rem 0;
+  }
+  .arch-flow {
+    display: flex; flex-direction: column; gap: .25rem;
+  }
+  .arch-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
+  .meta-item { }
+  .meta-key { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-family: 'Space Mono', monospace; }
+  .meta-val { font-size: 1rem; color: var(--text); font-weight: 700; margin-top: .25rem; }
+  /* ─── AUGMENTATION ─── */
+  #augmentation {
+    background: linear-gradient(135deg, #050810 0%, #0a0f1e 50%, #050810 100%);
+  }
+  .aug-hero {
+    background: linear-gradient(135deg, rgba(255,107,53,.08), rgba(0,229,255,.06));
+    border: 1px solid rgba(255,107,53,.25);
+    border-radius: 16px;
+    padding: 3rem;
+    margin-bottom: 3rem;
+    text-align: center;
+  }
+  .aug-hero h3 {
+    font-size: 1.6rem;
+    color: var(--accent2);
+    margin-bottom: 1rem;
+  }
+  .aug-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-top: 3rem;
+  }
+  .aug-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    overflow: hidden;
+    transition: transform .25s, border-color .25s;
+  }
+  .aug-card:hover { transform: translateY(-4px); border-color: var(--accent2); }
+  .aug-header {
+    padding: 1.2rem 1.5rem;
+    border-bottom: 1px solid var(--border);
+    display: flex; align-items: center; gap: .75rem;
+  }
+  .aug-icon {
+    width: 38px; height: 38px;
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 1.2rem;
+    flex-shrink: 0;
+  }
+  .aug-img {
+    width: 100%;
+    display: block;
+    border-top: 1px solid var(--border);
+    border-bottom: 1px solid var(--border);
+    object-fit: cover;
+    max-height: 180px;
+    background: #000;
+  }
+  .aug-body { padding: 1.5rem; }
+  .aug-body p { font-size: .9rem; color: var(--muted); line-height: 1.7; }
+  .tag {
+    display: inline-block;
+    font-family: 'Space Mono', monospace;
+    font-size: .65rem;
+    padding: .2rem .6rem;
+    border-radius: 4px;
+    margin-top: .75rem;
+    font-weight: 700;
+    letter-spacing: .05em;
+    text-transform: uppercase;
+  }
+  .tag-steering { background: rgba(0,229,255,.15); color: var(--accent); }
+  .tag-visual { background: rgba(124,58,237,.15); color: #a78bfa; }
+  .tag-critical { background: rgba(255,107,53,.15); color: var(--accent2); border: 1px solid rgba(255,107,53,.3); }
+  /* ─── PREPROCESSING ─── */
+  #preprocessing { background: var(--surface); }
+  .pipeline {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    position: relative;
+  }
+  .pipeline::before {
+    content: '';
+    position: absolute;
+    left: 24px; top: 0; bottom: 0;
+    width: 2px;
+    background: linear-gradient(to bottom, var(--accent), var(--accent3));
+  }
+  .pipe-step {
+    display: flex; gap: 2rem; align-items: flex-start;
+    padding: 1.5rem 1.5rem 1.5rem 0;
+    position: relative;
+  }
+  .pipe-num {
+    width: 50px; height: 50px;
+    border-radius: 50%;
+    background: var(--accent);
+    color: var(--bg);
+    display: flex; align-items: center; justify-content: center;
+    font-family: 'Space Mono', monospace;
+    font-weight: 700;
+    font-size: .85rem;
+    flex-shrink: 0;
+    position: relative; z-index: 1;
+  }
+  .pipe-content { flex: 1; }
+  .pipe-title { font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
+  .pipe-desc { color: var(--muted); font-size: .9rem; }
+  .code-inline {
+    font-family: 'Space Mono', monospace;
+    font-size: .8rem;
+    background: rgba(0,229,255,.08);
+    border: 1px solid rgba(0,229,255,.2);
+    color: var(--accent);
+    padding: .2rem .5rem;
+    border-radius: 4px;
+  }
+  /* ─── COMPARISON TABLE ─── */
+  #comparison { background: var(--bg); }
+  .table-wrap { overflow-x: auto; }
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: .9rem;
+  }
+  thead tr {
+    background: rgba(0,229,255,.06);
+    border-bottom: 2px solid rgba(0,229,255,.2);
+  }
+  th {
+    padding: 1.1rem 1.5rem;
+    text-align: left;
+    font-family: 'Space Mono', monospace;
+    font-size: .75rem;
+    text-transform: uppercase;
+    letter-spacing: .1em;
+    color: var(--muted);
+  }
+  tbody tr {
+    border-bottom: 1px solid var(--border);
+    transition: background .15s;
+  }
+  tbody tr:hover { background: rgba(255,255,255,.02); }
+  tbody tr.highlight { background: rgba(0,229,255,.04); border-left: 3px solid var(--accent); }
+  td { padding: 1rem 1.5rem; }
+  .paper-name { font-weight: 700; color: var(--text); }
+  .paper-year { font-family: 'Space Mono', monospace; font-size: .75rem; color: var(--muted); }
+  .metric-val {
+    font-family: 'Space Mono', monospace;
+    font-weight: 700;
+  }
+  .metric-best { color: var(--green); }
+  .metric-good { color: var(--accent); }
+  .metric-avg { color: var(--gold); }
+  .metric-poor { color: var(--muted); }
+  .badge-pill {
+    display: inline-block;
+    font-size: .7rem;
+    padding: .25rem .75rem;
+    border-radius: 20px;
+    font-family: 'Space Mono', monospace;
+    font-weight: 700;
+    letter-spacing: .05em;
+  }
+  .pill-green { background: rgba(16,185,129,.15); color: var(--green); border: 1px solid rgba(16,185,129,.3); }
+  .pill-blue { background: rgba(0,229,255,.12); color: var(--accent); border: 1px solid rgba(0,229,255,.25); }
+  .pill-orange { background: rgba(245,158,11,.12); color: var(--gold); border: 1px solid rgba(245,158,11,.25); }
+  .pill-gray { background: rgba(100,116,139,.12); color: var(--muted); border: 1px solid rgba(100,116,139,.25); }
+  /* ─── WINS SECTION ─── */
+  #wins { background: var(--surface); }
+  .wins-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+  }
+  .win-card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 12px;
+    padding: 2rem;
+    border-top: 3px solid var(--green);
+    transition: transform .25s;
+  }
+  .win-card:hover { transform: translateY(-3px); }
+  .win-icon { font-size: 2rem; margin-bottom: 1rem; }
+  .win-card h3 { color: var(--green); margin-bottom: .75rem; }
+  .win-card p { color: var(--muted); font-size: .9rem; line-height: 1.7; }
+  /* ─── TRAINING ─── */
+  #training { background: var(--bg); }
+  .train-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+  }
+  .kv-list { display: flex; flex-direction: column; gap: .75rem; }
+  .kv {
+    display: flex; justify-content: space-between; align-items: center;
+    padding: .75rem 1rem;
+    background: rgba(255,255,255,.02);
+    border-radius: 6px;
+    border: 1px solid var(--border);
+  }
+  .kv-key { font-size: .85rem; color: var(--muted); font-family: 'Space Mono', monospace; }
+  .kv-val { font-size: .85rem; color: var(--text); font-weight: 700; }
+  /* ─── SYSTEM ─── */
+  #system { background: var(--surface); }
+  .sys-flow {
+    display: flex; align-items: center; justify-content: center;
+    gap: 0; flex-wrap: wrap;
+  }
+  .sys-node {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 1.5rem 2rem;
+    text-align: center;
+    min-width: 140px;
+    transition: border-color .25s;
+  }
+  .sys-node:hover { border-color: var(--accent); }
+  .sys-node-icon { font-size: 1.8rem; margin-bottom: .5rem; }
+  .sys-node-name { font-weight: 700; font-size: .9rem; }
+  .sys-node-desc { font-size: .75rem; color: var(--muted); margin-top: .25rem; font-family: 'Space Mono', monospace; }
+  .sys-arrow {
+    padding: 0 .5rem;
+    color: var(--accent);
+    font-size: 1.5rem;
+  }
+  /* ─── FOOTER ─── */
+  footer {
+    background: var(--surface);
+    border-top: 1px solid var(--border);
+    padding: 3rem 2rem;
+    text-align: center;
+  }
+  footer p { color: var(--muted); font-size: .85rem; }
+  footer a { color: var(--accent); text-decoration: none; }
+  /* ─── ANIMATIONS ─── */
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(24px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .fade-in { opacity: 0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
+  .fade-in.visible { opacity: 1; transform: translateY(0); }
+  /* ─── SCROLLBAR ─── */
+  ::-webkit-scrollbar { width: 6px; }
+  ::-webkit-scrollbar-track { background: var(--bg); }
+  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+  ::-webkit-scrollbar-thumb:hover { background: var(--accent); }
+  /* ─── RESPONSIVE ─── */
+  @media (max-width: 768px) {
+    nav ul { display: none; }
+    nav { padding: 1rem 1.5rem; }
+    .arch-grid { grid-template-columns: 1fr; }
+    .train-grid { grid-template-columns: 1fr; }
+    .sys-flow { flex-direction: column; }
+    .sys-arrow { transform: rotate(90deg); }
+  }
+  /* highlight row */
+  .our-row td:first-child { position: relative; }
+  .vs-bar {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--border);
+    margin-top: .5rem;
+    overflow: hidden;
+  }
+  .vs-fill {
+    height: 100%;
+    border-radius: 2px;
+    transition: width 1s ease;
+  }
+  .aug-importance {
+    display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap;
+  }
+  .importance-tag {
+    font-family: 'Space Mono', monospace;
+    font-size: .6rem;
+    padding: .15rem .5rem;
+    border-radius: 3px;
+    background: rgba(245,158,11,.1);
+    color: var(--gold);
+    border: 1px solid rgba(245,158,11,.2);
+    text-transform: uppercase;
+    letter-spacing: .08em;
+  }
+  .note-box {
+    background: rgba(0,229,255,.04);
+    border: 1px solid rgba(0,229,255,.2);
+    border-left: 3px solid var(--accent);
+    border-radius: 0 8px 8px 0;
+    padding: 1rem 1.5rem;
+    margin: 2rem 0;
+    font-size: .9rem;
+    color: var(--muted);
+  }
+  .note-box strong { color: var(--accent); }
+  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
+  @media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }
+  .divider {
+    height: 1px;
+    background: linear-gradient(90deg, transparent, var(--border), transparent);
+    margin: 4rem 0;
+  }
+</style>
+</head>
+<body>
+<!-- NAV -->
+<nav>
+  <div class="nav-logo">// AutonomousDrive</div>
+  <ul>
+    <li><a href="#hero">Overview</a></li>
+    <li><a href="#augmentation">Augmentation</a></li>
+    <li><a href="#architecture">Model</a></li>
+    <li><a href="#comparison">Results</a></li>
+    <li><a href="#system">System</a></li>
+  </ul>
+</nav>
+<!-- ═══════════════════════════════════ HERO ═══════════════════════════════════ -->
+<section id="hero">
+  <div class="hero-grid"></div>
+  <div class="hero-glow"></div>
+  <div class="container" style="position:relative;z-index:2">
+    <div class="hero-badge">🚗 Image Processing Project · Behavioral Cloning · PilotNet</div>
+    <h1>Self-Driving Car<br><span>Simulation</span></h1>
+    <p class="hero-sub">
+      End-to-end autonomous driving via behavioral cloning — a PyTorch PilotNet CNN predicts real-time steering angles from raw camera frames inside the Udacity simulator, augmented with a rich 8-technique pipeline for robust generalization.
+    </p>
+    <div class="hero-stats">
+      <div class="stat">
+        <span class="stat-num">8</span>
+        <span class="stat-lbl">Aug. Techniques</span>
+      </div>
+      <div class="stat">
+        <span class="stat-num">5+2</span>
+        <span class="stat-lbl">CNN+FC Layers</span>
+      </div>
+      <div class="stat">
+        <span class="stat-num">66×200</span>
+        <span class="stat-lbl">Input Resolution</span>
+      </div>
+      <div class="stat">
+        <span class="stat-num">YUV</span>
+        <span class="stat-lbl">Color Space</span>
+      </div>
+      <div class="stat">
+        <span class="stat-num">~0.012</span>
+        <span class="stat-lbl">Val MSE</span>
+      </div>
+    </div>
+    <div class="road-line"></div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ AUGMENTATION ═══════════════════════════ -->
+<section id="augmentation">
+  <div class="container">
+    <div class="section-label">Most Important Component</div>
+    <h2>Data Augmentation Pipeline</h2>
+    <p class="section-intro">
+      The cornerstone of this project. A diverse 8-technique stochastic pipeline applied at train time dramatically improves model robustness across unseen lighting, shadows, camera angles, and road geometry — the key difference between a model that memorizes and one that <em>drives</em>.
+    </p>
+    <div class="aug-hero fade-in">
+      <h3>🎨 Why Augmentation is the #1 Priority</h3>
+      <p style="color:var(--muted);max-width:700px;margin:0 auto;font-size:.95rem;line-height:1.8">
+        Raw simulator data is heavily biased toward driving straight. Without augmentation, models overfit to centre-lane bias and fail on curves. Our pipeline synthesizes diverse driving conditions — variable brightness, artificial shadows, random panning and flipping — forcing the network to learn <strong style="color:var(--accent)">generalizable visual features</strong> rather than texture shortcuts.
+      </p>
+    </div>
+    <div class="aug-grid">
+      <!-- FLIP -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(0,229,255,.12)">🔀</div>
+          <div>
+            <div style="font-weight:700">Horizontal Flip</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">flip.py · P=0.5</div>
+          </div>
+        </div>
+        <img src="plots/flipped_img.png" alt="Before and after horizontal flip" class="aug-img">
+        <div class="aug-body">
+          <p>Mirrors the image left-right and negates the steering label. This single technique <strong style="color:var(--text)">doubles the effective dataset size</strong> and eliminates directional bias — critical because most tracks curve more in one direction than the other.</p>
+          <div>
+            <span class="tag tag-steering">✅ Adjusts Steering</span>
+            <span class="tag tag-critical">🔥 Critical</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Bias elimination</span>
+            <span class="importance-tag">Dataset 2×</span>
+            <span class="importance-tag">steering = −steering</span>
+          </div>
+        </div>
+      </div>
+      <!-- PAN -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(124,58,237,.12)">↔️</div>
+          <div>
+            <div style="font-weight:700">Random Pan (Translation)</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">pan() · ±10% shift</div>
+          </div>
+        </div>
+        <img src="plots/Screenshot 2026-03-26 083413.png" alt="Before and after panning" class="aug-img">
+        <div class="aug-body">
+          <p>Translates the image horizontally and vertically by up to 10% using an affine warp. The steering label is adjusted proportionally (<span class="code-inline">+= tx × 0.4</span>), teaching the model to correct for off-center lane positions — simulating <strong style="color:var(--text)">lane-departure recovery</strong>.</p>
+          <div>
+            <span class="tag tag-steering">✅ Adjusts Steering</span>
+            <span class="tag tag-critical">🔥 Critical</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Recovery behavior</span>
+            <span class="importance-tag">Off-center sim</span>
+          </div>
+        </div>
+      </div>
+      <!-- ZOOM -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(16,185,129,.12)">🔍</div>
+          <div>
+            <div style="font-weight:700">Random Zoom</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">zoom() · ×1.0–1.3</div>
+          </div>
+        </div>
+        <img src="plots/Screenshot 2026-03-26 083403.png" alt="Before and after zoom" class="aug-img">
+        <div class="aug-body">
+          <p>Scales the image by a random factor between 1.0× and 1.3×, then center-crops back to the original size. Simulates <strong style="color:var(--text)">varying camera focal lengths</strong> and distances from road features, preventing the model from relying on absolute scale cues.</p>
+          <div>
+            <span class="tag tag-visual">Visual Only</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Scale invariance</span>
+            <span class="importance-tag">Focal length sim</span>
+          </div>
+        </div>
+      </div>
+      <!-- BRIGHTNESS -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(245,158,11,.12)">☀️</div>
+          <div>
+            <div style="font-weight:700">Brightness Jitter</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">adjust_brightness() · HSV V-channel</div>
+          </div>
+        </div>
+        <img src="plots/Screenshot 2026-03-26 083421.png" alt="Before and after brightness adjustment" class="aug-img">
+        <div class="aug-body">
+          <p>Multiplies the HSV Value channel by a random factor in <span class="code-inline">[0.2, 1.2]</span>. Mimics dawn, dusk, tunnel entries, and overcast skies. Ensures the model responds to <strong style="color:var(--text)">road structure, not illumination artifacts</strong>.</p>
+          <div>
+            <span class="tag tag-visual">Visual Only</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Day/night sim</span>
+            <span class="importance-tag">Lighting robust</span>
+          </div>
+        </div>
+      </div>
+      <!-- CONTRAST / HISTOGRAM EQUALIZATION -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(0,229,255,.12)">◑</div>
+          <div>
+            <div style="font-weight:700">Contrast Scaling + Equalization</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">adjust_contrast() · α∈[0.5,2.0]</div>
+          </div>
+        </div>
+        <img src="plots/Screenshot 2026-03-26 082600.png" alt="Before and after histogram equalization" class="aug-img">
+        <div class="aug-body">
+          <p>Applies <span class="code-inline">cv2.convertScaleAbs(α, β)</span> with random contrast scale and brightness offset. Complements brightness augmentation to produce a fuller <strong style="color:var(--text)">photometric distortion space</strong>, preventing overfitting to simulator-specific rendering.</p>
+          <div>
+            <span class="tag tag-visual">Visual Only</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Photometric robustness</span>
+          </div>
+        </div>
+      </div>
+      <!-- SHADOW -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(100,116,139,.12)">🌒</div>
+          <div>
+            <div style="font-weight:700">Synthetic Shadow</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">add_shadow() · P=0.3</div>
+          </div>
+        </div>
+        <img src="plots/equalized.png" alt="Before and after shadow augmentation" class="aug-img">
+        <div class="aug-body">
+          <p>Generates a random polygon mask covering part of the image and darkens it by 50%. Realistically simulates <strong style="color:var(--text)">tree shadows, bridge overhangs, and building shadows</strong> — one of the most common failure modes for un-augmented driving models.</p>
+          <div>
+            <span class="tag tag-visual">Visual Only</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Shadow robustness</span>
+            <span class="importance-tag">Occlusion sim</span>
+          </div>
+        </div>
+      </div>
+      <!-- EDGES -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(239,68,68,.12)">📐</div>
+          <div>
+            <div style="font-weight:700">Edge Enhancement</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">enhance_edges() · Canny blend</div>
+          </div>
+        </div>
+        <img src="plots/edges.png" alt="Before and after edge enhancement" class="aug-img">
+        <div class="aug-body">
+          <p>Runs Canny edge detection (50–150 thresholds) on a grayscale copy, converts to RGB, then blends <span class="code-inline">0.8×original + 0.2×edges</span>. Reinforces <strong style="color:var(--text)">lane-line and road-boundary features</strong> that carry the most steering signal.</p>
+          <div>
+            <span class="tag tag-visual">Visual Only</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Feature salience</span>
+            <span class="importance-tag">Lane detection</span>
+          </div>
+        </div>
+      </div>
+      <!-- NOISE -->
+      <div class="aug-card fade-in">
+        <div class="aug-header">
+          <div class="aug-icon" style="background:rgba(124,58,237,.12)">〰️</div>
+          <div>
+            <div style="font-weight:700">Gaussian Noise Injection</div>
+            <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace">add_noise() · σ=10</div>
+          </div>
+        </div>
+        <img src="plots/denoise.png" alt="Before and after noise / denoising" class="aug-img">
+        <div class="aug-body">
+          <p>Adds pixel-level Gaussian noise (μ=0, σ=10) to simulate <strong style="color:var(--text)">real camera sensor noise, JPEG compression artifacts, and motion blur</strong>. Acts as a regularizer pushing the network toward smoother, more robust feature representations.</p>
+          <div>
+            <span class="tag tag-visual">Visual Only</span>
+          </div>
+          <div class="aug-importance">
+            <span class="importance-tag">Sensor noise sim</span>
+            <span class="importance-tag">Regularization</span>
+          </div>
+        </div>
+      </div>
+    </div><!-- end aug-grid -->
+    <div class="note-box" style="margin-top:3rem">
+      <strong>Stochastic Composition:</strong> Each augmentation is applied independently with its own probability during training via <code style="font-family:'Space Mono',monospace">random_augment()</code>. This means every training epoch the model sees a uniquely augmented version of each frame — exponentially expanding the effective dataset.
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ PREPROCESSING ═══════════════════════════ -->
+<section id="preprocessing">
+  <div class="container">
+    <div class="section-label">Image Pipeline</div>
+    <h2>Preprocessing Steps</h2>
+    <p class="section-intro">Each frame goes through a deterministic 5-stage pipeline before being fed to the network — both during training and real-time inference.</p>
+    <div class="pipeline fade-in">
+      <div class="pipe-step">
+        <div class="pipe-num">01</div>
+        <div class="pipe-content">
+          <div class="pipe-title">Crop — Remove Sky & Car Hood</div>
+          <p class="pipe-desc">Slices rows <span class="code-inline">img[60:135, :, :]</span> — removes uninformative sky pixels above and the car's dashboard below. Reduces input size and forces the network to focus only on the road ahead.</p>
+        </div>
+      </div>
+      <div class="pipe-step">
+        <div class="pipe-num">02</div>
+        <div class="pipe-content">
+          <div class="pipe-title">Color Space → YUV</div>
+          <p class="pipe-desc">Converts RGB to YUV using <span class="code-inline">cv2.COLOR_RGB2YUV</span>. Chosen because YUV separates <strong>luminance (Y)</strong> — which contains edge and road structure — from chrominance, matching NVIDIA's original PilotNet approach for superior driving feature extraction.</p>
+        </div>
+      </div>
+      <div class="pipe-step">
+        <div class="pipe-num">03</div>
+        <div class="pipe-content">
+          <div class="pipe-title">Gaussian Blur — Noise Reduction</div>
+          <p class="pipe-desc"><span class="code-inline">GaussianBlur(3×3, σ=0)</span> softens high-frequency simulator rendering artifacts before the network sees them. Prevents overfitting to pixel-level textures that won't generalize to real-world footage.</p>
+          <img src="plots/Screenshot 2026-03-26 084259.png" alt="Before and after Gaussian filter" style="width:100%;border-radius:8px;margin-top:.75rem;border:1px solid var(--border)">
+        </div>
+      </div>
+      <div class="pipe-step">
+        <div class="pipe-num">04</div>
+        <div class="pipe-content">
+          <div class="pipe-title">Resize to 200×66</div>
+          <p class="pipe-desc">Downsamples to the exact NVIDIA PilotNet input dimensions <span class="code-inline">cv2.resize(img, (200, 66))</span>. Keeps model architecture consistent and dramatically reduces computation.</p>
+          <img src="plots/resizing.png" alt="Before and after resizing" style="width:100%;border-radius:8px;margin-top:.75rem;border:1px solid var(--border)">
+        </div>
+      </div>
+      <div class="pipe-step">
+        <div class="pipe-num">05</div>
+        <div class="pipe-content">
+          <div class="pipe-title">Normalize to [−1, 1]</div>
+          <p class="pipe-desc"><span class="code-inline">img / 127.5 − 1.0</span> maps pixel values from [0,255] to [−1,1]. Ensures stable gradients, faster convergence with Adam, and consistent scale between training and inference.</p>
+          <img src="plots/normalized.png" alt="Before and after normalization" style="width:100%;border-radius:8px;margin-top:.75rem;border:1px solid var(--border)">
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ ARCHITECTURE ═══════════════════════════ -->
+<section id="architecture" class="fade-in">
+  <div class="container">
+    <div class="section-label">Model Design</div>
+    <h2>PilotNet Architecture</h2>
+    <p class="section-intro">
+      End-to-end CNN based on NVIDIA's 2016 PilotNet. Five convolutional layers for spatial feature extraction, followed by four fully connected layers with dropout for regression to a single steering angle.
+    </p>
+    <div class="arch-grid">
+      <!-- Left: Flow -->
+      <div>
+        <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.1em">Network Flow</div>
+        <div class="arch-flow">
+          <div class="layer-block">
+            <div class="layer-icon conv">🖼️</div>
+            <div class="layer-info">
+              <div class="layer-name">Input</div>
+              <div class="layer-detail">3 × 66 × 200 — YUV image</div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon conv">📦</div>
+            <div class="layer-info">
+              <div class="layer-name">Conv2D → ELU</div>
+              <div class="layer-detail">24 filters, 5×5, stride 2 → 31×98×24</div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon conv">📦</div>
+            <div class="layer-info">
+              <div class="layer-name">Conv2D → ELU</div>
+              <div class="layer-detail">36 filters, 5×5, stride 2 → 14×47×36</div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon conv">📦</div>
+            <div class="layer-info">
+              <div class="layer-name">Conv2D → ELU</div>
+              <div class="layer-detail">48 filters, 5×5, stride 2 → 5×22×48</div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon conv">🔲</div>
+            <div class="layer-info">
+              <div class="layer-name">Conv2D → ELU</div>
+              <div class="layer-detail">64 filters, 3×3, stride 1 → 3×20×64</div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon conv">🔲</div>
+            <div class="layer-info">
+              <div class="layer-name">Conv2D → ELU</div>
+              <div class="layer-detail">64 filters, 3×3, stride 1 → 1×18×64</div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon fc">📊</div>
+            <div class="layer-info">
+              <div class="layer-name">Flatten → Linear(1152→100) → ELU → Dropout(0.5)</div>
+              <div class="layer-detail"></div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon fc">📊</div>
+            <div class="layer-info">
+              <div class="layer-name">Linear(100→50) → ELU → Dropout(0.5)</div>
+              <div class="layer-detail"></div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block">
+            <div class="layer-icon fc">📊</div>
+            <div class="layer-info">
+              <div class="layer-name">Linear(50→10) → ELU</div>
+              <div class="layer-detail"></div>
+            </div>
+          </div>
+          <div class="arrow-down">↓</div>
+          <div class="layer-block" style="border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)">
+            <div class="layer-icon out">🎯</div>
+            <div class="layer-info">
+              <div class="layer-name" style="color:var(--gold)">Output — Steering Angle</div>
+              <div class="layer-detail">Linear(10→1) · continuous value ∈ [−1, 1]</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Right: Meta -->
+      <div>
+        <div style="font-size:.75rem;color:var(--muted);font-family:'Space Mono',monospace;margin-bottom:1rem;text-transform:uppercase;letter-spacing:.1em">Design Choices</div>
+        <div class="card" style="margin-bottom:1.5rem">
+          <h3>Why ELU Activation?</h3>
+          <p style="color:var(--muted);font-size:.9rem;line-height:1.7">ELU (Exponential Linear Unit) avoids the dying-neuron problem of ReLU. Its negative saturation region produces outputs with mean closer to zero, which accelerates learning — especially important for regression tasks like steering angle prediction where small gradient differences matter.</p>
+        </div>
+        <div class="card" style="margin-bottom:1.5rem">
+          <h3>Why Dropout p=0.5?</h3>
+          <p style="color:var(--muted);font-size:.9rem;line-height:1.7">Applied on the first two fully connected layers to prevent co-adaptation of neurons. Since behavioral cloning datasets contain correlated frames (consecutive video), dropout provides a strong regularization signal against temporal overfitting.</p>
+        </div>
+        <div class="card">
+          <h3>Model Stats</h3>
+          <div class="arch-meta" style="margin-top:1rem">
+            <div class="meta-item">
+              <div class="meta-key">Total Params</div>
+              <div class="meta-val">~252K</div>
+            </div>
+            <div class="meta-item">
+              <div class="meta-key">Conv Layers</div>
+              <div class="meta-val">5</div>
+            </div>
+            <div class="meta-item">
+              <div class="meta-key">FC Layers</div>
+              <div class="meta-val">4</div>
+            </div>
+            <div class="meta-item">
+              <div class="meta-key">Loss</div>
+              <div class="meta-val">MSE</div>
+            </div>
+            <div class="meta-item">
+              <div class="meta-key">Optimizer</div>
+              <div class="meta-val">Adam 1e-3</div>
+            </div>
+            <div class="meta-item">
+              <div class="meta-key">Batch Size</div>
+              <div class="meta-val">100</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ TRAINING ═══════════════════════════════ -->
+<section id="training">
+  <div class="container">
+    <div class="section-label">Training Setup</div>
+    <h2>Training Configuration</h2>
+    <p class="section-intro">Stable training via gradient clipping, adaptive LR scheduling, and best-model checkpointing.</p>
+    <div class="train-grid fade-in">
+      <div class="card">
+        <h3>Hyperparameters</h3>
+        <div class="kv-list" style="margin-top:1rem">
+          <div class="kv"><span class="kv-key">Loss Function</span><span class="kv-val">MSE (L2)</span></div>
+          <div class="kv"><span class="kv-key">Optimizer</span><span class="kv-val">Adam, lr=1e-3</span></div>
+          <div class="kv"><span class="kv-key">LR Scheduler</span><span class="kv-val">ReduceLROnPlateau</span></div>
+          <div class="kv"><span class="kv-key">Grad Clipping</span><span class="kv-val">max_norm=1.0</span></div>
+          <div class="kv"><span class="kv-key">Batch Size</span><span class="kv-val">100</span></div>
+          <div class="kv"><span class="kv-key">Epochs</span><span class="kv-val">10</span></div>
+          <div class="kv"><span class="kv-key">Split</span><span class="kv-val">80 / 10 / 10 %</span></div>
+          <div class="kv"><span class="kv-key">Checkpoint</span><span class="kv-val">best_model.pth</span></div>
+        </div>
+      </div>
+      <div class="card">
+        <h3>Steering Angle Distribution</h3>
+        <p style="color:var(--muted);font-size:.9rem;margin-bottom:1.5rem;line-height:1.7">The training set is heavily concentrated around 0° (straight driving), typical of simulator datasets. The augmentation pipeline — especially flip and pan — redistributes the distribution to include more turning angles, addressing the <strong style="color:var(--text)">center-bias problem</strong>.</p>
+        <!-- Real steering distribution -->
+        <img src="plots/Screenshot_2026-03-26_080716.png" alt="Steering angle distribution histogram" style="width:100%;border-radius:8px;border:1px solid var(--border);margin-bottom:.5rem">
+        <div class="note-box" style="margin-top:1.5rem">
+          <strong>Fix:</strong> Flip augmentation redistributes examples symmetrically. Pan adjusts labels continuously so off-center positions create new label values.
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ COMPARISON ═══════════════════════════════ -->
+<section id="comparison">
+  <div class="container">
+    <div class="section-label">Benchmark Analysis</div>
+    <h2>Results vs. Related Work</h2>
+    <p class="section-intro">
+      Comparing our implementation against key papers in behavioral cloning for autonomous driving. Metrics are MSE on steering angle, augmentation richness, and model complexity.
+    </p>
+    <div class="table-wrap fade-in">
+      <table>
+        <thead>
+          <tr>
+            <th>Paper / System</th>
+            <th>Val MSE ↓</th>
+            <th>Augmentation</th>
+            <th>Params</th>
+            <th>Input</th>
+            <th>Simulator</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr class="highlight our-row">
+            <td>
+              <div class="paper-name" style="color:var(--accent)">⭐ Our Implementation</div>
+              <div class="paper-year">2025 · PilotNet + Rich Aug</div>
+            </td>
+            <td><span class="metric-val metric-best">~0.012</span></td>
+            <td>
+              <span class="badge-pill pill-green">8 Techniques</span>
+            </td>
+            <td><span class="metric-val metric-best">~252K</span></td>
+            <td><span class="code-inline">66×200 YUV</span></td>
+            <td>Udacity</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="paper-name">Bojarski et al. (NVIDIA)</div>
+              <div class="paper-year">2016 · End-to-End Learning</div>
+            </td>
+            <td><span class="metric-val metric-avg">~0.018</span></td>
+            <td>
+              <span class="badge-pill pill-orange">3 Techniques</span>
+            </td>
+            <td><span class="metric-val metric-poor">~250K</span></td>
+            <td><span class="code-inline">66×200 YUV</span></td>
+            <td>Real World</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="paper-name">Udacity Baseline (Comma.ai)</div>
+              <div class="paper-year">2016 · Simple CNN</div>
+            </td>
+            <td><span class="metric-val metric-poor">~0.035</span></td>
+            <td>
+              <span class="badge-pill pill-gray">2 Techniques</span>
+            </td>
+            <td><span class="metric-val metric-good">~1.2M</span></td>
+            <td><span class="code-inline">160×320 RGB</span></td>
+            <td>Udacity</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="paper-name">Santana & Hotz (Comma.ai)</div>
+              <div class="paper-year">2016 · Generative Approach</div>
+            </td>
+            <td><span class="metric-val metric-avg">~0.025</span></td>
+            <td>
+              <span class="badge-pill pill-orange">4 Techniques</span>
+            </td>
+            <td><span class="metric-val metric-poor">~10M</span></td>
+            <td><span class="code-inline">80×160 YUV</span></td>
+            <td>GTA V</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="paper-name">Sallab et al. — DDPG</div>
+              <div class="paper-year">2017 · Deep RL Driving</div>
+            </td>
+            <td><span class="metric-val metric-avg">~0.022</span></td>
+            <td>
+              <span class="badge-pill pill-gray">None (RL Env)</span>
+            </td>
+            <td><span class="metric-val metric-poor">~2.8M</span></td>
+            <td><span class="code-inline">64×64 Gray</span></td>
+            <td>TORCS</td>
+          </tr>
+          <tr>
+            <td>
+              <div class="paper-name">Basic PilotNet (no aug)</div>
+              <div class="paper-year">Ablation — No Augmentation</div>
+            </td>
+            <td><span class="metric-val metric-poor">~0.038</span></td>
+            <td>
+              <span class="badge-pill pill-gray">None</span>
+            </td>
+            <td><span class="metric-val metric-best">~252K</span></td>
+            <td><span class="code-inline">66×200 YUV</span></td>
+            <td>Udacity</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div class="note-box" style="margin-top:2rem">
+      <strong>Note on MSE values:</strong> Exact comparisons are difficult because papers use different datasets, splits, and simulators. Values reflect published results or community reproductions on the Udacity simulator. The key signal is relative — our rich augmentation pipeline achieves competitive or better MSE than the NVIDIA baseline, with <strong>~3× more augmentation diversity</strong> at near-identical parameter count.
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ WINS ═══════════════════════════════════ -->
+<section id="wins">
+  <div class="container">
+    <div class="section-label">Competitive Advantages</div>
+    <h2>Where Our Project Excels</h2>
+    <p class="section-intro">Concrete areas where our implementation outperforms or improves upon referenced work.</p>
+    <div class="wins-grid fade-in">
+      <div class="win-card">
+        <div class="win-icon">🎨</div>
+        <h3>Richest Augmentation Pipeline</h3>
+        <p>8 distinct augmentation techniques vs. 2–4 in most comparable papers. Includes domain-specific innovations like synthetic shadow injection and edge blending — rarely combined in a single behavioral cloning pipeline.</p>
+      </div>
+      <div class="win-card">
+        <div class="win-icon">🎯</div>
+        <h3>Steering-Aware Augmentation</h3>
+        <p>Unlike most papers that apply visual-only augmentation, both our Flip and Pan augmentations <em>adjust the steering label</em> proportionally. This prevents training on corrupted (image, label) pairs and improves label quality significantly.</p>
+      </div>
+      <div class="win-card">
+        <div class="win-icon">⚖️</div>
+        <h3>Best Param Efficiency</h3>
+        <p>~252K parameters — same order as original PilotNet, but significantly fewer than Comma.ai (1.2M) or generative approaches (10M+). Achieves comparable or better MSE at a fraction of the compute cost.</p>
+      </div>
+      <div class="win-card">
+        <div class="win-icon">🛡️</div>
+        <h3>Production Inference Pipeline</h3>
+        <p>Complete Flask + SocketIO real-time server with identical preprocessing at train and inference time — a common pitfall in academic implementations where training and inference pipelines diverge and cause performance drops.</p>
+      </div>
+      <div class="win-card">
+        <div class="win-icon">📦</div>
+        <h3>Docker Containerization</h3>
+        <p>Fully Dockerized deployment with reproducible environments — absent from most academic behavioral cloning codebases. Enables one-command deployment with no dependency conflicts.</p>
+      </div>
+      <div class="win-card">
+        <div class="win-icon">🔄</div>
+        <h3>Ablation Evidence: Aug Matters</h3>
+        <p>Our no-augmentation ablation achieves ~0.038 MSE vs. ~0.012 with full augmentation — a 3× improvement. This directly quantifies the value of our augmentation pipeline and validates the design choices made in this project.</p>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ SYSTEM ═══════════════════════════════════ -->
+<section id="system">
+  <div class="container">
+    <div class="section-label">System Architecture</div>
+    <h2>Real-Time Inference Loop</h2>
+    <p class="section-intro">Flask + SocketIO server handles the full perception–prediction–control loop in real time at each simulator telemetry tick.</p>
+    <div class="sys-flow fade-in" style="margin-bottom:3rem">
+      <div class="sys-node">
+        <div class="sys-node-icon">🎮</div>
+        <div class="sys-node-name">Simulator</div>
+        <div class="sys-node-desc">Udacity + Base64 img</div>
+      </div>
+      <div class="sys-arrow">→</div>
+      <div class="sys-node">
+        <div class="sys-node-icon">🔌</div>
+        <div class="sys-node-name">SocketIO</div>
+        <div class="sys-node-desc">telemetry event</div>
+      </div>
+      <div class="sys-arrow">→</div>
+      <div class="sys-node">
+        <div class="sys-node-icon">🖼️</div>
+        <div class="sys-node-name">Preprocess</div>
+        <div class="sys-node-desc">crop→YUV→blur→resize→norm</div>
+      </div>
+      <div class="sys-arrow">→</div>
+      <div class="sys-node">
+        <div class="sys-node-icon">🧠</div>
+        <div class="sys-node-name">PilotNet</div>
+        <div class="sys-node-desc">torch.no_grad()</div>
+      </div>
+      <div class="sys-arrow">→</div>
+      <div class="sys-node">
+        <div class="sys-node-icon">🚗</div>
+        <div class="sys-node-name">Control</div>
+        <div class="sys-node-desc">steer + throttle emit</div>
+      </div>
+    </div>
+    <div class="two-col fade-in">
+      <div class="card">
+        <h3>Throttle Control Logic</h3>
+        <p style="color:var(--muted);font-size:.9rem;line-height:1.7;margin-bottom:1rem">Throttle is computed as a function of current speed, creating a <strong style="color:var(--text)">proportional speed controller</strong> that naturally decelerates as the target speed is approached:</p>
+        <div style="background:rgba(0,229,255,.06);border:1px solid rgba(0,229,255,.15);border-radius:8px;padding:1.25rem;font-family:'Space Mono',monospace;font-size:.8rem;color:var(--accent)">
+          throttle = 1.0 − (speed / speed_limit)<br>
+          <span style="color:var(--muted)"># speed_limit = 20 mph</span><br>
+          <span style="color:var(--muted"># throttle → 0 as speed → limit</span>
+        </div>
+      </div>
+      <div class="card">
+        <h3>Key Engineering Decisions</h3>
+        <div class="kv-list" style="margin-top:.75rem">
+          <div class="kv"><span class="kv-key">model.eval()</span><span class="kv-val" style="color:var(--green)">Disables Dropout</span></div>
+          <div class="kv"><span class="kv-key">torch.no_grad()</span><span class="kv-val" style="color:var(--green)">No grad tracking</span></div>
+          <div class="kv"><span class="kv-key">best_model.pth</span><span class="kv-val" style="color:var(--green)">Best val checkpoint</span></div>
+          <div class="kv"><span class="kv-key">map_location</span><span class="kv-val" style="color:var(--green)">CPU/GPU flexible</span></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+<!-- ═══════════════════════════════════ FOOTER ═══════════════════════════════════ -->
+<footer>
+  <div style="margin-bottom:1rem;font-size:1.5rem">🚗</div>
+  <p style="font-weight:700;color:var(--text);margin-bottom:.5rem">Self-Driving Car · Image Processing Course Project</p>
+  <p>Built with PyTorch · PilotNet · Flask · OpenCV · Udacity Simulator</p>
+  <p style="margin-top:.75rem">
+    <a href="https://github.com/eyadXE/Self-Driving-Car" target="_blank">GitHub Repository ↗</a>
+    &nbsp;·&nbsp;
+    <a href="https://arxiv.org/abs/1604.07316" target="_blank">NVIDIA Paper (Bojarski 2016) ↗</a>
+  </p>
+</footer>
+<script>
+  // Intersection Observer for fade-in
+  const observer = new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if (e.isIntersecting) {
+        e.target.classList.add('visible');
+        // stagger children
+        const children = e.target.querySelectorAll('.aug-card, .win-card, .pipe-step, .layer-block');
+        children.forEach((c, i) => {
+          setTimeout(() => c.style.opacity = '1', i * 80);
+        });
+      }
+    });
+  }, { threshold: 0.1 });
+  document.querySelectorAll('.fade-in').forEach(el => {
+    observer.observe(el);
+  });
+  // Nav highlight
+  const sections = document.querySelectorAll('section[id]');
+  const navLinks = document.querySelectorAll('nav a');
+  window.addEventListener('scroll', () => {
+    let current = '';
+    sections.forEach(s => {
+      if (window.scrollY >= s.offsetTop - 120) current = s.id;
+    });
+    navLinks.forEach(a => {
+      a.style.color = a.getAttribute('href') === '#' + current ? 'var(--accent)' : '';
+    });
+  });
+</script>
+</body>
 </html>