Spaces:
Running
Running
| <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> | |
| · | |
| <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> | |