Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CV Model Improvement Journey - Pothole Detection</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6366f1; | |
| --primary-dark: #4f46e5; | |
| --secondary: #10b981; | |
| --warning: #f59e0b; | |
| --danger: #ef4444; | |
| --bg-dark: #0f172a; | |
| --bg-card: #1e293b; | |
| --bg-card-hover: #334155; | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --border: #334155; | |
| --success-gradient: linear-gradient(135deg, #10b981, #059669); | |
| --primary-gradient: linear-gradient(135deg, #6366f1, #8b5cf6); | |
| --warning-gradient: linear-gradient(135deg, #f59e0b, #d97706); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; | |
| background: var(--bg-dark); | |
| color: var(--text-primary); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%); | |
| border-bottom: 1px solid var(--border); | |
| padding: 1rem 2rem; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| backdrop-filter: blur(10px); | |
| } | |
| .header-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .logo i { | |
| font-size: 1.75rem; | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .logo h1 { | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| } | |
| .built-with { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-size: 0.875rem; | |
| padding: 0.5rem 1rem; | |
| border: 1px solid var(--border); | |
| border-radius: 2rem; | |
| transition: all 0.3s ease; | |
| } | |
| .built-with:hover { | |
| border-color: var(--primary); | |
| color: var(--primary); | |
| background: rgba(99, 102, 241, 0.1); | |
| } | |
| .nav-tabs { | |
| display: flex; | |
| gap: 0.5rem; | |
| padding: 1rem 2rem; | |
| background: var(--bg-card); | |
| border-bottom: 1px solid var(--border); | |
| overflow-x: auto; | |
| scrollbar-width: none; | |
| } | |
| .nav-tabs::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .nav-tab { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| background: transparent; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| border-radius: 0.5rem; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| transition: all 0.3s ease; | |
| white-space: nowrap; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .nav-tab:hover { | |
| background: var(--bg-card-hover); | |
| color: var(--text-primary); | |
| } | |
| .nav-tab.active { | |
| background: var(--primary-gradient); | |
| color: white; | |
| } | |
| .main-content { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 2rem; | |
| } | |
| .section { | |
| display: none; | |
| } | |
| .section.active { | |
| display: block; | |
| animation: fadeIn 0.4s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| /* Overview Section */ | |
| .hero { | |
| background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1)); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 2.5rem; | |
| margin-bottom: 2rem; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .hero::before { | |
| content: ''; | |
| position: absolute; | |
| top: -50%; | |
| right: -50%; | |
| width: 100%; | |
| height: 100%; | |
| background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%); | |
| pointer-events: none; | |
| } | |
| .hero h2 { | |
| font-size: 2rem; | |
| margin-bottom: 1rem; | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .hero p { | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| max-width: 700px; | |
| } | |
| .usecase-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: var(--success-gradient); | |
| padding: 0.75rem 1.25rem; | |
| border-radius: 2rem; | |
| margin-top: 1.5rem; | |
| font-weight: 600; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .stat-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| text-align: center; | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2); | |
| } | |
| .stat-value { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| background: var(--primary-gradient); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| margin-top: 0.5rem; | |
| } | |
| /* Timeline */ | |
| .timeline { | |
| position: relative; | |
| padding-left: 2rem; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, var(--primary), var(--secondary)); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| padding-bottom: 2rem; | |
| padding-left: 2rem; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -2rem; | |
| top: 0.5rem; | |
| width: 12px; | |
| height: 12px; | |
| background: var(--primary); | |
| border-radius: 50%; | |
| border: 3px solid var(--bg-dark); | |
| } | |
| .timeline-item.completed::before { | |
| background: var(--secondary); | |
| } | |
| .timeline-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .timeline-card:hover { | |
| border-color: var(--primary); | |
| } | |
| .timeline-step { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| background: rgba(99, 102, 241, 0.2); | |
| padding: 0.25rem 0.75rem; | |
| border-radius: 1rem; | |
| font-size: 0.8rem; | |
| color: var(--primary); | |
| margin-bottom: 0.75rem; | |
| } | |
| .timeline-title { | |
| font-size: 1.25rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .timeline-desc { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| } | |
| /* Benchmark Table */ | |
| .table-container { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| margin-bottom: 2rem; | |
| } | |
| .table-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 1.5rem; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .table-header h3 { | |
| font-size: 1.25rem; | |
| } | |
| .table-responsive { | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| min-width: 800px; | |
| } | |
| th, td { | |
| padding: 1rem 1.5rem; | |
| text-align: left; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| th { | |
| background: rgba(99, 102, 241, 0.1); | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| font-size: 0.85rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| tr:hover { | |
| background: var(--bg-card-hover); | |
| } | |
| .model-name { | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9rem; | |
| background: rgba(99, 102, 241, 0.2); | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| } | |
| .metric-value { | |
| font-weight: 700; | |
| font-size: 1.1rem; | |
| } | |
| .metric-value.success { | |
| color: var(--secondary); | |
| } | |
| .metric-value.warning { | |
| color: var(--warning); | |
| } | |
| .metric-value.danger { | |
| color: var(--danger); | |
| } | |
| .improvement-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.25rem; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.8rem; | |
| font-weight: 600; | |
| } | |
| .improvement-badge.positive { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--secondary); | |
| } | |
| .improvement-badge.negative { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--danger); | |
| } | |
| /* Progress Chart */ | |
| .chart-container { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .chart-title { | |
| font-size: 1.25rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .bar-chart { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1.5rem; | |
| } | |
| .bar-item { | |
| display: grid; | |
| grid-template-columns: 200px 1fr 80px; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .bar-label { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| text-align: right; | |
| } | |
| .bar-wrapper { | |
| background: var(--bg-dark); | |
| border-radius: 0.5rem; | |
| height: 2rem; | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .bar-fill { | |
| height: 100%; | |
| border-radius: 0.5rem; | |
| transition: width 1s ease; | |
| position: relative; | |
| } | |
| .bar-fill.baseline { | |
| background: var(--danger); | |
| width: 1%; | |
| } | |
| .bar-fill.epoch20 { | |
| background: var(--warning); | |
| width: 1%; | |
| } | |
| .bar-fill.newds { | |
| background: var(--primary); | |
| width: 24%; | |
| } | |
| .bar-fill.final { | |
| background: var(--success-gradient); | |
| width: 100%; | |
| } | |
| .bar-value { | |
| font-weight: 700; | |
| font-size: 0.9rem; | |
| } | |
| /* Insights Section */ | |
| .insights-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .insight-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .insight-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| } | |
| .insight-icon { | |
| width: 3rem; | |
| height: 3rem; | |
| border-radius: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| margin-bottom: 1rem; | |
| } | |
| .insight-icon.data { | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--primary); | |
| } | |
| .insight-icon.training { | |
| background: rgba(16, 185, 129, 0.2); | |
| color: var(--secondary); | |
| } | |
| .insight-icon.labeling { | |
| background: rgba(245, 158, 11, 0.2); | |
| color: var(--warning); | |
| } | |
| .insight-icon.benchmark { | |
| background: rgba(239, 68, 68, 0.2); | |
| color: var(--danger); | |
| } | |
| .insight-title { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .insight-desc { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| /* Methodology Section */ | |
| .methodology-steps { | |
| display: grid; | |
| gap: 1.5rem; | |
| } | |
| .method-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| display: grid; | |
| grid-template-columns: auto 1fr; | |
| gap: 1.5rem; | |
| transition: all 0.3s ease; | |
| } | |
| .method-card:hover { | |
| border-color: var(--primary); | |
| } | |
| .method-number { | |
| width: 3rem; | |
| height: 3rem; | |
| background: var(--primary-gradient); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 700; | |
| font-size: 1.25rem; | |
| } | |
| .method-content h4 { | |
| font-size: 1.1rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .method-content p { | |
| color: var(--text-secondary); | |
| font-size: 0.95rem; | |
| margin-bottom: 1rem; | |
| } | |
| .method-details { | |
| background: var(--bg-dark); | |
| border-radius: 0.5rem; | |
| padding: 1rem; | |
| font-size: 0.9rem; | |
| } | |
| .method-details ul { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .method-details li { | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 0.5rem; | |
| color: var(--text-secondary); | |
| } | |
| .method-details li i { | |
| color: var(--secondary); | |
| margin-top: 0.25rem; | |
| } | |
| /* Data Section */ | |
| .data-cards { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |
| gap: 1.5rem; | |
| margin-bottom: 2rem; | |
| } | |
| .data-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .data-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| } | |
| .data-card-header { | |
| padding: 1.25rem; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .data-card-header i { | |
| font-size: 1.25rem; | |
| color: var(--primary); | |
| } | |
| .data-card-body { | |
| padding: 1.25rem; | |
| } | |
| .data-stat { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0.5rem 0; | |
| border-bottom: 1px solid var(--border); | |
| } | |
| .data-stat:last-child { | |
| border-bottom: none; | |
| } | |
| .data-stat-label { | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .data-stat-value { | |
| font-weight: 600; | |
| } | |
| /* Links Section */ | |
| .links-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .link-card { | |
| background: var(--bg-card); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 1.5rem; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: all 0.3s ease; | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| } | |
| .link-card:hover { | |
| transform: translateY(-5px); | |
| border-color: var(--primary); | |
| background: var(--bg-card-hover); | |
| } | |
| .link-icon { | |
| width: 3rem; | |
| height: 3rem; | |
| border-radius: 0.75rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.25rem; | |
| background: rgba(99, 102, 241, 0.2); | |
| color: var(--primary); | |
| } | |
| .link-content h4 { | |
| font-size: 1rem; | |
| margin-bottom: 0.25rem; | |
| } | |
| .link-content p { | |
| color: var(--text-secondary); | |
| font-size: 0.85rem; | |
| } | |
| /* Conclusions */ | |
| .conclusion-box { | |
| background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1)); | |
| border: 1px solid var(--secondary); | |
| border-radius: 1rem; | |
| padding: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .conclusion-box h3 { | |
| color: var(--secondary); | |
| margin-bottom: 1rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .conclusion-box p { | |
| color: var(--text-secondary); | |
| font-size: 1rem; | |
| line-height: 1.8; | |
| } | |
| .conclusion-box strong { | |
| color: var(--text-primary); | |
| } | |
| /* Responsive */ | |
| @media (max-width: 768px) { | |
| .header-content { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .nav-tabs { | |
| padding: 1rem; | |
| } | |
| .nav-tab { | |
| padding: 0.5rem 1rem; | |
| font-size: 0.85rem; | |
| } | |
| .main-content { | |
| padding: 1rem; | |
| } | |
| .hero { | |
| padding: 1.5rem; | |
| } | |
| .hero h2 { | |
| font-size: 1.5rem; | |
| } | |
| .bar-item { | |
| grid-template-columns: 1fr; | |
| gap: 0.5rem; | |
| } | |
| .bar-label { | |
| text-align: left; | |
| } | |
| .method-card { | |
| grid-template-columns: 1fr; | |
| } | |
| .method-number { | |
| width: 2.5rem; | |
| height: 2.5rem; | |
| font-size: 1rem; | |
| } | |
| } | |
| /* Animations */ | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| } | |
| .pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| /* Code blocks */ | |
| code { | |
| background: var(--bg-dark); | |
| padding: 0.2rem 0.4rem; | |
| border-radius: 0.25rem; | |
| font-family: 'Courier New', monospace; | |
| font-size: 0.9rem; | |
| color: var(--primary); | |
| } | |
| /* Section headers */ | |
| .section-header { | |
| margin-bottom: 2rem; | |
| } | |
| .section-header h2 { | |
| font-size: 1.75rem; | |
| margin-bottom: 0.5rem; | |
| } | |
| .section-header p { | |
| color: var(--text-secondary); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-road"></i> | |
| <h1>Pothole Detection Experiment</h1> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </header> | |
| <nav class="nav-tabs"> | |
| <button class="nav-tab active" data-tab="overview"> | |
| <i class="fas fa-home"></i> Overview | |
| </button> | |
| <button class="nav-tab" data-tab="methodology"> | |
| <i class="fas fa-flask"></i> Methodology | |
| </button> | |
| <button class="nav-tab" data-tab="data"> | |
| <i class="fas fa-database"></i> Data Strategy | |
| </button> | |
| <button class="nav-tab" data-tab="benchmarks"> | |
| <i class="fas fa-chart-bar"></i> Benchmarks | |
| </button> | |
| <button class="nav-tab" data-tab="insights"> | |
| <i class="fas fa-lightbulb"></i> Key Insights | |
| </button> | |
| <button class="nav-tab" data-tab="resources"> | |
| <i class="fas fa-link"></i> Resources | |
| </button> | |
| </nav> | |
| <main class="main-content"> | |
| <!-- Overview Section --> | |
| <section id="overview" class="section active"> | |
| <div class="hero"> | |
| <h2>Domain Shift Problem in Computer Vision</h2> | |
| <p>A systematic experiment to improve pothole detection from overhead aerial imagery, addressing the challenge of models trained on street-level data failing on different perspectives.</p> | |
| <div class="usecase-badge"> | |
| <i class="fas fa-bullseye"></i> | |
| Use Case: Detect potholes from overhead view on dirt roads with little traffic | |
| </div> | |
| </div> | |
| <div class="stats-grid"> | |
| <div class="stat-card"> | |
| <div class="stat-value">95x</div> | |
| <div class="stat-label">Improvement in mAP50</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">1,444</div> | |
| <div class="stat-label">Manually Annotated Potholes</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">23</div> | |
| <div class="stat-label">Benchmark Frames</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-value">0.429</div> | |
| <div class="stat-label">Final mAP50 Score</div> | |
| </div> | |
| </div> | |
| <div class="chart-container"> | |
| <h3 class="chart-title">Model Performance Progression (mAP50)</h3> | |
| <div class="bar-chart"> | |
| <div class="bar-item"> | |
| <div class="bar-label">Baseline (1 Epoch)</div> | |
| <div class="bar-wrapper"> | |
| <div class="bar-fill baseline" data-width="1"></div> | |
| </div> | |
| <div class="bar-value danger">0.0045</div> | |
| </div> | |
| <div class="bar-item"> | |
| <div class="bar-label">20 Epochs (Control)</div> | |
| <div class="bar-wrapper"> | |
| <div class="bar-fill epoch20" data-width="1"></div> | |
| </div> | |
| <div class="bar-value danger">0.0042</div> | |
| </div> | |
| <div class="bar-item"> | |
| <div class="bar-label">New Dataset (1 Epoch)</div> | |
| <div class="bar-wrapper"> | |
| <div class="bar-fill newds" data-width="24"></div> | |
| </div> | |
| <div class="bar-value warning">0.102</div> | |
| </div> | |
| <div class="bar-item"> | |
| <div class="bar-label">New Dataset (20 Epochs)</div> | |
| <div class="bar-wrapper"> | |
| <div class="bar-fill final" data-width="100"></div> | |
| </div> | |
| <div class="bar-value success">0.429</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="conclusion-box"> | |
| <h3><i class="fas fa-check-circle"></i> Key Finding</h3> | |
| <p> | |
| <strong>Domain-specific data is the primary driver of model performance improvement.</strong> | |
| While increasing training epochs on the original dataset showed minimal improvement (0.0045 → 0.0042), | |
| training on domain-specific aerial imagery resulted in a <strong>20x improvement</strong> after just 1 epoch. | |
| Combining domain-specific data with extended training achieved a <strong>95x improvement</strong> over baseline. | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Methodology Section --> | |
| <section id="methodology" class="section"> | |
| <div class="section-header"> | |
| <h2>Experimental Methodology</h2> | |
| <p>A structured 8-step approach to systematically improve model performance</p> | |
| </div> | |
| <div class="methodology-steps"> | |
| <div class="method-card"> | |
| <div class="method-number">1</div> | |
| <div class="method-content"> | |
| <h4>Define the Problem</h4> | |
| <p>Identify a specific, narrow use case to focus the experiment.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Recognized domain shift issue from street-level to overhead imagery</li> | |
| <li><i class="fas fa-check"></i> Defined use case: Overhead pothole detection on dirt roads</li> | |
| <li><i class="fas fa-check"></i> Scope limited to low-traffic environments</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="method-card"> | |
| <div class="method-number">2</div> | |
| <div class="method-content"> | |
| <h4>Hypothesize Data Requirements</h4> | |
| <p>Determine what data characteristics are needed to solve the problem.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Diverse overhead images of dirt roads</li> | |
| <li><i class="fas fa-check"></i> Various weather conditions and angles</li> | |
| <li><i class="fas fa-check"></i> Manual annotation requirement identified</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="method-card"> | |
| <div class="method-number">3</div> | |
| <div class="method-content"> | |
| <h4>Define Success Metrics</h4> | |
| <p>Establish measurable criteria to validate the hypothesis.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Created benchmark set: 23 frames, 1,444 annotated potholes</li> | |
| <li><i class="fas fa-check"></i> Target: Achieve mAP50 > 0.5 (baseline was 0.0045)</li> | |
| <li><i class="fas fa-check"></i> Implemented <code>model.val()</code> for validation</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="method-card"> | |
| <div class="method-number">4</div> | |
| <div class="method-content"> | |
| <h4>Source Training Data</h4> | |
| <p>Acquire or create the necessary dataset for training.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> 3 stock videos from Pexels (free)</li> | |
| <li><i class="fas fa-check"></i> 1 synthetic video from Nano Bananas</li> | |
| <li><i class="fas fa-check"></i> Explored synthetic data generation options</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="method-card"> | |
| <div class="method-number">5</div> | |
| <div class="method-content"> | |
| <h4>Prepare & Annotate Data</h4> | |
| <p>Process and label the data for training.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Used Roboflow with Meta's SAM3 for initial labeling</li> | |
| <li><i class="fas fa-check"></i> Manual labeling for challenging videos</li> | |
| <li><i class="fas fa-check"></i> Applied augmentation: brightness & exposure</li> | |
| <li><i class="fas fa-check"></i> Converted bounding boxes to polygons for better precision</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="method-card"> | |
| <div class="method-number">6</div> | |
| <div class="method-content"> | |
| <h4>Train Models</h4> | |
| <p>Train multiple model variants to test hypotheses.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Baseline: yolo11n.pt pretrained model</li> | |
| <li><i class="fas fa-check"></i> Control: 1 & 20 epochs on original dataset</li> | |
| <li><i class="fas fa-check"></i> Experimental: 1 & 20 epochs on new dataset</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="method-card"> | |
| <div class="method-number">7</div> | |
| <div class="method-content"> | |
| <h4>Test Hypotheses</h4> | |
| <p>Validate results against the benchmark dataset.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Ran validation on all model variants</li> | |
| <li><i class="fas fa-check"></i> Compared mAP50 and inference times</li> | |
| <li><i class="fas fa-check"></i> Created "proof of life" side-by-side comparisons</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="method-card"> | |
| <div class="method-number">8</div> | |
| <div class="method-content"> | |
| <h4>Draw Conclusions</h4> | |
| <p>Analyze results and determine next steps.</p> | |
| <div class="method-details"> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Hypothesis validated: Domain-specific data is critical</li> | |
| <li><i class="fas fa-check"></i> 95x improvement achieved with new data + training</li> | |
| <li><i class="fas fa-check"></i> Contributed validation scripts to OSS repo</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Data Section --> | |
| <section id="data" class="section"> | |
| <div class="section-header"> | |
| <h2>Data Strategy</h2> | |
| <p>Understanding the importance of domain-specific training data</p> | |
| </div> | |
| <div class="data-cards"> | |
| <div class="data-card"> | |
| <div class="data-card-header"> | |
| <i class="fas fa-vial"></i> | |
| <h4>Benchmark Dataset</h4> | |
| </div> | |
| <div class="data-card-body"> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Total Frames</span> | |
| <span class="data-stat-value">23</span> | |
| </div> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Annotated Potholes</span> | |
| <span class="data-stat-value">1,444</span> | |
| </div> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Annotation Type</span> | |
| <span class="data-stat-value">Polygons</span> | |
| </div> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Source</span> | |
| <span class="data-stat-value">Target Video</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card"> | |
| <div class="data-card-header"> | |
| <i class="fas fa-graduation-cap"></i> | |
| <h4>Training Dataset</h4> | |
| </div> | |
| <div class="data-card-body"> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Video Sources</span> | |
| <span class="data-stat-value">4</span> | |
| </div> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Stock Videos</span> | |
| <span class="data-stat-value">3 (Pexels)</span> | |
| </div> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Synthetic Videos</span> | |
| <span class="data-stat-value">1</span> | |
| </div> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Split Ratio</span> | |
| <span class="data-stat-value">90/10 Train/Val</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="data-card"> | |
| <div class="data-card-header"> | |
| <i class="fas fa-magic"></i> | |
| <h4>Augmentation</h4> | |
| </div> | |
| <div class="data-card-body"> | |
| <div class="data-stat"> | |
| <span class="data-stat-label">Brightness</span> | |
| <span class="data- |