Hugging Face's logo

Spaces:
nmata010
/
anycoder-2b38da41
Running

App Files Community
nmata010 commited on
Commit
5af9bbb
·
verified ·
1 Parent(s): 54ad553

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +1134 -19
index.html CHANGED
@@ -1,19 +1,1134 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CV Model Improvement Journey - Pothole Detection</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #6366f1;
11
+ --primary-dark: #4f46e5;
12
+ --secondary: #10b981;
13
+ --warning: #f59e0b;
14
+ --danger: #ef4444;
15
+ --bg-dark: #0f172a;
16
+ --bg-card: #1e293b;
17
+ --bg-card-hover: #334155;
18
+ --text-primary: #f8fafc;
19
+ --text-secondary: #94a3b8;
20
+ --border: #334155;
21
+ --success-gradient: linear-gradient(135deg, #10b981, #059669);
22
+ --primary-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
23
+ --warning-gradient: linear-gradient(135deg, #f59e0b, #d97706);
24
+ }
25
+
26
+ * {
27
+ margin: 0;
28
+ padding: 0;
29
+ box-sizing: border-box;
30
+ }
31
+
32
+ body {
33
+ font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
34
+ background: var(--bg-dark);
35
+ color: var(--text-primary);
36
+ line-height: 1.6;
37
+ min-height: 100vh;
38
+ }
39
+
40
+ .header {
41
+ background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-dark) 100%);
42
+ border-bottom: 1px solid var(--border);
43
+ padding: 1rem 2rem;
44
+ position: sticky;
45
+ top: 0;
46
+ z-index: 100;
47
+ backdrop-filter: blur(10px);
48
+ }
49
+
50
+ .header-content {
51
+ max-width: 1400px;
52
+ margin: 0 auto;
53
+ display: flex;
54
+ justify-content: space-between;
55
+ align-items: center;
56
+ flex-wrap: wrap;
57
+ gap: 1rem;
58
+ }
59
+
60
+ .logo {
61
+ display: flex;
62
+ align-items: center;
63
+ gap: 0.75rem;
64
+ }
65
+
66
+ .logo i {
67
+ font-size: 1.75rem;
68
+ background: var(--primary-gradient);
69
+ -webkit-background-clip: text;
70
+ -webkit-text-fill-color: transparent;
71
+ background-clip: text;
72
+ }
73
+
74
+ .logo h1 {
75
+ font-size: 1.25rem;
76
+ font-weight: 700;
77
+ }
78
+
79
+ .built-with {
80
+ color: var(--text-secondary);
81
+ text-decoration: none;
82
+ font-size: 0.875rem;
83
+ padding: 0.5rem 1rem;
84
+ border: 1px solid var(--border);
85
+ border-radius: 2rem;
86
+ transition: all 0.3s ease;
87
+ }
88
+
89
+ .built-with:hover {
90
+ border-color: var(--primary);
91
+ color: var(--primary);
92
+ background: rgba(99, 102, 241, 0.1);
93
+ }
94
+
95
+ .nav-tabs {
96
+ display: flex;
97
+ gap: 0.5rem;
98
+ padding: 1rem 2rem;
99
+ background: var(--bg-card);
100
+ border-bottom: 1px solid var(--border);
101
+ overflow-x: auto;
102
+ scrollbar-width: none;
103
+ }
104
+
105
+ .nav-tabs::-webkit-scrollbar {
106
+ display: none;
107
+ }
108
+
109
+ .nav-tab {
110
+ padding: 0.75rem 1.5rem;
111
+ border: none;
112
+ background: transparent;
113
+ color: var(--text-secondary);
114
+ cursor: pointer;
115
+ border-radius: 0.5rem;
116
+ font-size: 0.9rem;
117
+ font-weight: 500;
118
+ transition: all 0.3s ease;
119
+ white-space: nowrap;
120
+ display: flex;
121
+ align-items: center;
122
+ gap: 0.5rem;
123
+ }
124
+
125
+ .nav-tab:hover {
126
+ background: var(--bg-card-hover);
127
+ color: var(--text-primary);
128
+ }
129
+
130
+ .nav-tab.active {
131
+ background: var(--primary-gradient);
132
+ color: white;
133
+ }
134
+
135
+ .main-content {
136
+ max-width: 1400px;
137
+ margin: 0 auto;
138
+ padding: 2rem;
139
+ }
140
+
141
+ .section {
142
+ display: none;
143
+ }
144
+
145
+ .section.active {
146
+ display: block;
147
+ animation: fadeIn 0.4s ease;
148
+ }
149
+
150
+ @keyframes fadeIn {
151
+ from { opacity: 0; transform: translateY(10px); }
152
+ to { opacity: 1; transform: translateY(0); }
153
+ }
154
+
155
+ /* Overview Section */
156
+ .hero {
157
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.1));
158
+ border: 1px solid var(--border);
159
+ border-radius: 1rem;
160
+ padding: 2.5rem;
161
+ margin-bottom: 2rem;
162
+ position: relative;
163
+ overflow: hidden;
164
+ }
165
+
166
+ .hero::before {
167
+ content: '';
168
+ position: absolute;
169
+ top: -50%;
170
+ right: -50%;
171
+ width: 100%;
172
+ height: 100%;
173
+ background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
174
+ pointer-events: none;
175
+ }
176
+
177
+ .hero h2 {
178
+ font-size: 2rem;
179
+ margin-bottom: 1rem;
180
+ background: var(--primary-gradient);
181
+ -webkit-background-clip: text;
182
+ -webkit-text-fill-color: transparent;
183
+ background-clip: text;
184
+ }
185
+
186
+ .hero p {
187
+ color: var(--text-secondary);
188
+ font-size: 1.1rem;
189
+ max-width: 700px;
190
+ }
191
+
192
+ .usecase-badge {
193
+ display: inline-flex;
194
+ align-items: center;
195
+ gap: 0.5rem;
196
+ background: var(--success-gradient);
197
+ padding: 0.75rem 1.25rem;
198
+ border-radius: 2rem;
199
+ margin-top: 1.5rem;
200
+ font-weight: 600;
201
+ }
202
+
203
+ .stats-grid {
204
+ display: grid;
205
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
206
+ gap: 1.5rem;
207
+ margin-bottom: 2rem;
208
+ }
209
+
210
+ .stat-card {
211
+ background: var(--bg-card);
212
+ border: 1px solid var(--border);
213
+ border-radius: 1rem;
214
+ padding: 1.5rem;
215
+ text-align: center;
216
+ transition: all 0.3s ease;
217
+ }
218
+
219
+ .stat-card:hover {
220
+ transform: translateY(-5px);
221
+ border-color: var(--primary);
222
+ box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2);
223
+ }
224
+
225
+ .stat-value {
226
+ font-size: 2.5rem;
227
+ font-weight: 700;
228
+ background: var(--primary-gradient);
229
+ -webkit-background-clip: text;
230
+ -webkit-text-fill-color: transparent;
231
+ background-clip: text;
232
+ }
233
+
234
+ .stat-label {
235
+ color: var(--text-secondary);
236
+ font-size: 0.9rem;
237
+ margin-top: 0.5rem;
238
+ }
239
+
240
+ /* Timeline */
241
+ .timeline {
242
+ position: relative;
243
+ padding-left: 2rem;
244
+ }
245
+
246
+ .timeline::before {
247
+ content: '';
248
+ position: absolute;
249
+ left: 0;
250
+ top: 0;
251
+ bottom: 0;
252
+ width: 2px;
253
+ background: linear-gradient(to bottom, var(--primary), var(--secondary));
254
+ }
255
+
256
+ .timeline-item {
257
+ position: relative;
258
+ padding-bottom: 2rem;
259
+ padding-left: 2rem;
260
+ }
261
+
262
+ .timeline-item::before {
263
+ content: '';
264
+ position: absolute;
265
+ left: -2rem;
266
+ top: 0.5rem;
267
+ width: 12px;
268
+ height: 12px;
269
+ background: var(--primary);
270
+ border-radius: 50%;
271
+ border: 3px solid var(--bg-dark);
272
+ }
273
+
274
+ .timeline-item.completed::before {
275
+ background: var(--secondary);
276
+ }
277
+
278
+ .timeline-card {
279
+ background: var(--bg-card);
280
+ border: 1px solid var(--border);
281
+ border-radius: 1rem;
282
+ padding: 1.5rem;
283
+ transition: all 0.3s ease;
284
+ }
285
+
286
+ .timeline-card:hover {
287
+ border-color: var(--primary);
288
+ }
289
+
290
+ .timeline-step {
291
+ display: inline-flex;
292
+ align-items: center;
293
+ gap: 0.5rem;
294
+ background: rgba(99, 102, 241, 0.2);
295
+ padding: 0.25rem 0.75rem;
296
+ border-radius: 1rem;
297
+ font-size: 0.8rem;
298
+ color: var(--primary);
299
+ margin-bottom: 0.75rem;
300
+ }
301
+
302
+ .timeline-title {
303
+ font-size: 1.25rem;
304
+ margin-bottom: 0.5rem;
305
+ }
306
+
307
+ .timeline-desc {
308
+ color: var(--text-secondary);
309
+ font-size: 0.95rem;
310
+ }
311
+
312
+ /* Benchmark Table */
313
+ .table-container {
314
+ background: var(--bg-card);
315
+ border: 1px solid var(--border);
316
+ border-radius: 1rem;
317
+ overflow: hidden;
318
+ margin-bottom: 2rem;
319
+ }
320
+
321
+ .table-header {
322
+ display: flex;
323
+ justify-content: space-between;
324
+ align-items: center;
325
+ padding: 1.5rem;
326
+ border-bottom: 1px solid var(--border);
327
+ }
328
+
329
+ .table-header h3 {
330
+ font-size: 1.25rem;
331
+ }
332
+
333
+ .table-responsive {
334
+ overflow-x: auto;
335
+ }
336
+
337
+ table {
338
+ width: 100%;
339
+ border-collapse: collapse;
340
+ min-width: 800px;
341
+ }
342
+
343
+ th, td {
344
+ padding: 1rem 1.5rem;
345
+ text-align: left;
346
+ border-bottom: 1px solid var(--border);
347
+ }
348
+
349
+ th {
350
+ background: rgba(99, 102, 241, 0.1);
351
+ color: var(--text-secondary);
352
+ font-weight: 600;
353
+ font-size: 0.85rem;
354
+ text-transform: uppercase;
355
+ letter-spacing: 0.05em;
356
+ }
357
+
358
+ tr:hover {
359
+ background: var(--bg-card-hover);
360
+ }
361
+
362
+ .model-name {
363
+ font-family: 'Courier New', monospace;
364
+ font-size: 0.9rem;
365
+ background: rgba(99, 102, 241, 0.2);
366
+ padding: 0.25rem 0.5rem;
367
+ border-radius: 0.25rem;
368
+ }
369
+
370
+ .metric-value {
371
+ font-weight: 700;
372
+ font-size: 1.1rem;
373
+ }
374
+
375
+ .metric-value.success {
376
+ color: var(--secondary);
377
+ }
378
+
379
+ .metric-value.warning {
380
+ color: var(--warning);
381
+ }
382
+
383
+ .metric-value.danger {
384
+ color: var(--danger);
385
+ }
386
+
387
+ .improvement-badge {
388
+ display: inline-flex;
389
+ align-items: center;
390
+ gap: 0.25rem;
391
+ padding: 0.25rem 0.5rem;
392
+ border-radius: 0.25rem;
393
+ font-size: 0.8rem;
394
+ font-weight: 600;
395
+ }
396
+
397
+ .improvement-badge.positive {
398
+ background: rgba(16, 185, 129, 0.2);
399
+ color: var(--secondary);
400
+ }
401
+
402
+ .improvement-badge.negative {
403
+ background: rgba(239, 68, 68, 0.2);
404
+ color: var(--danger);
405
+ }
406
+
407
+ /* Progress Chart */
408
+ .chart-container {
409
+ background: var(--bg-card);
410
+ border: 1px solid var(--border);
411
+ border-radius: 1rem;
412
+ padding: 2rem;
413
+ margin-bottom: 2rem;
414
+ }
415
+
416
+ .chart-title {
417
+ font-size: 1.25rem;
418
+ margin-bottom: 1.5rem;
419
+ }
420
+
421
+ .bar-chart {
422
+ display: flex;
423
+ flex-direction: column;
424
+ gap: 1.5rem;
425
+ }
426
+
427
+ .bar-item {
428
+ display: grid;
429
+ grid-template-columns: 200px 1fr 80px;
430
+ align-items: center;
431
+ gap: 1rem;
432
+ }
433
+
434
+ .bar-label {
435
+ font-size: 0.9rem;
436
+ color: var(--text-secondary);
437
+ text-align: right;
438
+ }
439
+
440
+ .bar-wrapper {
441
+ background: var(--bg-dark);
442
+ border-radius: 0.5rem;
443
+ height: 2rem;
444
+ overflow: hidden;
445
+ position: relative;
446
+ }
447
+
448
+ .bar-fill {
449
+ height: 100%;
450
+ border-radius: 0.5rem;
451
+ transition: width 1s ease;
452
+ position: relative;
453
+ }
454
+
455
+ .bar-fill.baseline {
456
+ background: var(--danger);
457
+ width: 1%;
458
+ }
459
+
460
+ .bar-fill.epoch20 {
461
+ background: var(--warning);
462
+ width: 1%;
463
+ }
464
+
465
+ .bar-fill.newds {
466
+ background: var(--primary);
467
+ width: 24%;
468
+ }
469
+
470
+ .bar-fill.final {
471
+ background: var(--success-gradient);
472
+ width: 100%;
473
+ }
474
+
475
+ .bar-value {
476
+ font-weight: 700;
477
+ font-size: 0.9rem;
478
+ }
479
+
480
+ /* Insights Section */
481
+ .insights-grid {
482
+ display: grid;
483
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
484
+ gap: 1.5rem;
485
+ }
486
+
487
+ .insight-card {
488
+ background: var(--bg-card);
489
+ border: 1px solid var(--border);
490
+ border-radius: 1rem;
491
+ padding: 1.5rem;
492
+ transition: all 0.3s ease;
493
+ }
494
+
495
+ .insight-card:hover {
496
+ transform: translateY(-5px);
497
+ border-color: var(--primary);
498
+ }
499
+
500
+ .insight-icon {
501
+ width: 3rem;
502
+ height: 3rem;
503
+ border-radius: 0.75rem;
504
+ display: flex;
505
+ align-items: center;
506
+ justify-content: center;
507
+ font-size: 1.25rem;
508
+ margin-bottom: 1rem;
509
+ }
510
+
511
+ .insight-icon.data {
512
+ background: rgba(99, 102, 241, 0.2);
513
+ color: var(--primary);
514
+ }
515
+
516
+ .insight-icon.training {
517
+ background: rgba(16, 185, 129, 0.2);
518
+ color: var(--secondary);
519
+ }
520
+
521
+ .insight-icon.labeling {
522
+ background: rgba(245, 158, 11, 0.2);
523
+ color: var(--warning);
524
+ }
525
+
526
+ .insight-icon.benchmark {
527
+ background: rgba(239, 68, 68, 0.2);
528
+ color: var(--danger);
529
+ }
530
+
531
+ .insight-title {
532
+ font-size: 1.1rem;
533
+ margin-bottom: 0.5rem;
534
+ }
535
+
536
+ .insight-desc {
537
+ color: var(--text-secondary);
538
+ font-size: 0.9rem;
539
+ }
540
+
541
+ /* Methodology Section */
542
+ .methodology-steps {
543
+ display: grid;
544
+ gap: 1.5rem;
545
+ }
546
+
547
+ .method-card {
548
+ background: var(--bg-card);
549
+ border: 1px solid var(--border);
550
+ border-radius: 1rem;
551
+ padding: 1.5rem;
552
+ display: grid;
553
+ grid-template-columns: auto 1fr;
554
+ gap: 1.5rem;
555
+ transition: all 0.3s ease;
556
+ }
557
+
558
+ .method-card:hover {
559
+ border-color: var(--primary);
560
+ }
561
+
562
+ .method-number {
563
+ width: 3rem;
564
+ height: 3rem;
565
+ background: var(--primary-gradient);
566
+ border-radius: 50%;
567
+ display: flex;
568
+ align-items: center;
569
+ justify-content: center;
570
+ font-weight: 700;
571
+ font-size: 1.25rem;
572
+ }
573
+
574
+ .method-content h4 {
575
+ font-size: 1.1rem;
576
+ margin-bottom: 0.5rem;
577
+ }
578
+
579
+ .method-content p {
580
+ color: var(--text-secondary);
581
+ font-size: 0.95rem;
582
+ margin-bottom: 1rem;
583
+ }
584
+
585
+ .method-details {
586
+ background: var(--bg-dark);
587
+ border-radius: 0.5rem;
588
+ padding: 1rem;
589
+ font-size: 0.9rem;
590
+ }
591
+
592
+ .method-details ul {
593
+ list-style: none;
594
+ display: flex;
595
+ flex-direction: column;
596
+ gap: 0.5rem;
597
+ }
598
+
599
+ .method-details li {
600
+ display: flex;
601
+ align-items: flex-start;
602
+ gap: 0.5rem;
603
+ color: var(--text-secondary);
604
+ }
605
+
606
+ .method-details li i {
607
+ color: var(--secondary);
608
+ margin-top: 0.25rem;
609
+ }
610
+
611
+ /* Data Section */
612
+ .data-cards {
613
+ display: grid;
614
+ grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
615
+ gap: 1.5rem;
616
+ margin-bottom: 2rem;
617
+ }
618
+
619
+ .data-card {
620
+ background: var(--bg-card);
621
+ border: 1px solid var(--border);
622
+ border-radius: 1rem;
623
+ overflow: hidden;
624
+ transition: all 0.3s ease;
625
+ }
626
+
627
+ .data-card:hover {
628
+ transform: translateY(-5px);
629
+ border-color: var(--primary);
630
+ }
631
+
632
+ .data-card-header {
633
+ padding: 1.25rem;
634
+ border-bottom: 1px solid var(--border);
635
+ display: flex;
636
+ align-items: center;
637
+ gap: 0.75rem;
638
+ }
639
+
640
+ .data-card-header i {
641
+ font-size: 1.25rem;
642
+ color: var(--primary);
643
+ }
644
+
645
+ .data-card-body {
646
+ padding: 1.25rem;
647
+ }
648
+
649
+ .data-stat {
650
+ display: flex;
651
+ justify-content: space-between;
652
+ padding: 0.5rem 0;
653
+ border-bottom: 1px solid var(--border);
654
+ }
655
+
656
+ .data-stat:last-child {
657
+ border-bottom: none;
658
+ }
659
+
660
+ .data-stat-label {
661
+ color: var(--text-secondary);
662
+ font-size: 0.9rem;
663
+ }
664
+
665
+ .data-stat-value {
666
+ font-weight: 600;
667
+ }
668
+
669
+ /* Links Section */
670
+ .links-grid {
671
+ display: grid;
672
+ grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
673
+ gap: 1.5rem;
674
+ }
675
+
676
+ .link-card {
677
+ background: var(--bg-card);
678
+ border: 1px solid var(--border);
679
+ border-radius: 1rem;
680
+ padding: 1.5rem;
681
+ text-decoration: none;
682
+ color: inherit;
683
+ transition: all 0.3s ease;
684
+ display: flex;
685
+ align-items: center;
686
+ gap: 1rem;
687
+ }
688
+
689
+ .link-card:hover {
690
+ transform: translateY(-5px);
691
+ border-color: var(--primary);
692
+ background: var(--bg-card-hover);
693
+ }
694
+
695
+ .link-icon {
696
+ width: 3rem;
697
+ height: 3rem;
698
+ border-radius: 0.75rem;
699
+ display: flex;
700
+ align-items: center;
701
+ justify-content: center;
702
+ font-size: 1.25rem;
703
+ background: rgba(99, 102, 241, 0.2);
704
+ color: var(--primary);
705
+ }
706
+
707
+ .link-content h4 {
708
+ font-size: 1rem;
709
+ margin-bottom: 0.25rem;
710
+ }
711
+
712
+ .link-content p {
713
+ color: var(--text-secondary);
714
+ font-size: 0.85rem;
715
+ }
716
+
717
+ /* Conclusions */
718
+ .conclusion-box {
719
+ background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(5, 150, 105, 0.1));
720
+ border: 1px solid var(--secondary);
721
+ border-radius: 1rem;
722
+ padding: 2rem;
723
+ margin-bottom: 2rem;
724
+ }
725
+
726
+ .conclusion-box h3 {
727
+ color: var(--secondary);
728
+ margin-bottom: 1rem;
729
+ display: flex;
730
+ align-items: center;
731
+ gap: 0.5rem;
732
+ }
733
+
734
+ .conclusion-box p {
735
+ color: var(--text-secondary);
736
+ font-size: 1rem;
737
+ line-height: 1.8;
738
+ }
739
+
740
+ .conclusion-box strong {
741
+ color: var(--text-primary);
742
+ }
743
+
744
+ /* Responsive */
745
+ @media (max-width: 768px) {
746
+ .header-content {
747
+ flex-direction: column;
748
+ text-align: center;
749
+ }
750
+
751
+ .nav-tabs {
752
+ padding: 1rem;
753
+ }
754
+
755
+ .nav-tab {
756
+ padding: 0.5rem 1rem;
757
+ font-size: 0.85rem;
758
+ }
759
+
760
+ .main-content {
761
+ padding: 1rem;
762
+ }
763
+
764
+ .hero {
765
+ padding: 1.5rem;
766
+ }
767
+
768
+ .hero h2 {
769
+ font-size: 1.5rem;
770
+ }
771
+
772
+ .bar-item {
773
+ grid-template-columns: 1fr;
774
+ gap: 0.5rem;
775
+ }
776
+
777
+ .bar-label {
778
+ text-align: left;
779
+ }
780
+
781
+ .method-card {
782
+ grid-template-columns: 1fr;
783
+ }
784
+
785
+ .method-number {
786
+ width: 2.5rem;
787
+ height: 2.5rem;
788
+ font-size: 1rem;
789
+ }
790
+ }
791
+
792
+ /* Animations */
793
+ @keyframes pulse {
794
+ 0%, 100% { transform: scale(1); }
795
+ 50% { transform: scale(1.05); }
796
+ }
797
+
798
+ .pulse {
799
+ animation: pulse 2s infinite;
800
+ }
801
+
802
+ /* Code blocks */
803
+ code {
804
+ background: var(--bg-dark);
805
+ padding: 0.2rem 0.4rem;
806
+ border-radius: 0.25rem;
807
+ font-family: 'Courier New', monospace;
808
+ font-size: 0.9rem;
809
+ color: var(--primary);
810
+ }
811
+
812
+ /* Section headers */
813
+ .section-header {
814
+ margin-bottom: 2rem;
815
+ }
816
+
817
+ .section-header h2 {
818
+ font-size: 1.75rem;
819
+ margin-bottom: 0.5rem;
820
+ }
821
+
822
+ .section-header p {
823
+ color: var(--text-secondary);
824
+ }
825
+ </style>
826
+ </head>
827
+ <body>
828
+ <header class="header">
829
+ <div class="header-content">
830
+ <div class="logo">
831
+ <i class="fas fa-road"></i>
832
+ <h1>Pothole Detection Experiment</h1>
833
+ </div>
834
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
835
+ Built with anycoder
836
+ </a>
837
+ </div>
838
+ </header>
839
+
840
+ <nav class="nav-tabs">
841
+ <button class="nav-tab active" data-tab="overview">
842
+ <i class="fas fa-home"></i> Overview
843
+ </button>
844
+ <button class="nav-tab" data-tab="methodology">
845
+ <i class="fas fa-flask"></i> Methodology
846
+ </button>
847
+ <button class="nav-tab" data-tab="data">
848
+ <i class="fas fa-database"></i> Data Strategy
849
+ </button>
850
+ <button class="nav-tab" data-tab="benchmarks">
851
+ <i class="fas fa-chart-bar"></i> Benchmarks
852
+ </button>
853
+ <button class="nav-tab" data-tab="insights">
854
+ <i class="fas fa-lightbulb"></i> Key Insights
855
+ </button>
856
+ <button class="nav-tab" data-tab="resources">
857
+ <i class="fas fa-link"></i> Resources
858
+ </button>
859
+ </nav>
860
+
861
+ <main class="main-content">
862
+ <!-- Overview Section -->
863
+ <section id="overview" class="section active">
864
+ <div class="hero">
865
+ <h2>Domain Shift Problem in Computer Vision</h2>
866
+ <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>
867
+ <div class="usecase-badge">
868
+ <i class="fas fa-bullseye"></i>
869
+ Use Case: Detect potholes from overhead view on dirt roads with little traffic
870
+ </div>
871
+ </div>
872
+
873
+ <div class="stats-grid">
874
+ <div class="stat-card">
875
+ <div class="stat-value">95x</div>
876
+ <div class="stat-label">Improvement in mAP50</div>
877
+ </div>
878
+ <div class="stat-card">
879
+ <div class="stat-value">1,444</div>
880
+ <div class="stat-label">Manually Annotated Potholes</div>
881
+ </div>
882
+ <div class="stat-card">
883
+ <div class="stat-value">23</div>
884
+ <div class="stat-label">Benchmark Frames</div>
885
+ </div>
886
+ <div class="stat-card">
887
+ <div class="stat-value">0.429</div>
888
+ <div class="stat-label">Final mAP50 Score</div>
889
+ </div>
890
+ </div>
891
+
892
+ <div class="chart-container">
893
+ <h3 class="chart-title">Model Performance Progression (mAP50)</h3>
894
+ <div class="bar-chart">
895
+ <div class="bar-item">
896
+ <div class="bar-label">Baseline (1 Epoch)</div>
897
+ <div class="bar-wrapper">
898
+ <div class="bar-fill baseline" data-width="1"></div>
899
+ </div>
900
+ <div class="bar-value danger">0.0045</div>
901
+ </div>
902
+ <div class="bar-item">
903
+ <div class="bar-label">20 Epochs (Control)</div>
904
+ <div class="bar-wrapper">
905
+ <div class="bar-fill epoch20" data-width="1"></div>
906
+ </div>
907
+ <div class="bar-value danger">0.0042</div>
908
+ </div>
909
+ <div class="bar-item">
910
+ <div class="bar-label">New Dataset (1 Epoch)</div>
911
+ <div class="bar-wrapper">
912
+ <div class="bar-fill newds" data-width="24"></div>
913
+ </div>
914
+ <div class="bar-value warning">0.102</div>
915
+ </div>
916
+ <div class="bar-item">
917
+ <div class="bar-label">New Dataset (20 Epochs)</div>
918
+ <div class="bar-wrapper">
919
+ <div class="bar-fill final" data-width="100"></div>
920
+ </div>
921
+ <div class="bar-value success">0.429</div>
922
+ </div>
923
+ </div>
924
+ </div>
925
+
926
+ <div class="conclusion-box">
927
+ <h3><i class="fas fa-check-circle"></i> Key Finding</h3>
928
+ <p>
929
+ <strong>Domain-specific data is the primary driver of model performance improvement.</strong>
930
+ While increasing training epochs on the original dataset showed minimal improvement (0.0045 → 0.0042),
931
+ training on domain-specific aerial imagery resulted in a <strong>20x improvement</strong> after just 1 epoch.
932
+ Combining domain-specific data with extended training achieved a <strong>95x improvement</strong> over baseline.
933
+ </p>
934
+ </div>
935
+ </section>
936
+
937
+ <!-- Methodology Section -->
938
+ <section id="methodology" class="section">
939
+ <div class="section-header">
940
+ <h2>Experimental Methodology</h2>
941
+ <p>A structured 8-step approach to systematically improve model performance</p>
942
+ </div>
943
+
944
+ <div class="methodology-steps">
945
+ <div class="method-card">
946
+ <div class="method-number">1</div>
947
+ <div class="method-content">
948
+ <h4>Define the Problem</h4>
949
+ <p>Identify a specific, narrow use case to focus the experiment.</p>
950
+ <div class="method-details">
951
+ <ul>
952
+ <li><i class="fas fa-check"></i> Recognized domain shift issue from street-level to overhead imagery</li>
953
+ <li><i class="fas fa-check"></i> Defined use case: Overhead pothole detection on dirt roads</li>
954
+ <li><i class="fas fa-check"></i> Scope limited to low-traffic environments</li>
955
+ </ul>
956
+ </div>
957
+ </div>
958
+ </div>
959
+
960
+ <div class="method-card">
961
+ <div class="method-number">2</div>
962
+ <div class="method-content">
963
+ <h4>Hypothesize Data Requirements</h4>
964
+ <p>Determine what data characteristics are needed to solve the problem.</p>
965
+ <div class="method-details">
966
+ <ul>
967
+ <li><i class="fas fa-check"></i> Diverse overhead images of dirt roads</li>
968
+ <li><i class="fas fa-check"></i> Various weather conditions and angles</li>
969
+ <li><i class="fas fa-check"></i> Manual annotation requirement identified</li>
970
+ </ul>
971
+ </div>
972
+ </div>
973
+ </div>
974
+
975
+ <div class="method-card">
976
+ <div class="method-number">3</div>
977
+ <div class="method-content">
978
+ <h4>Define Success Metrics</h4>
979
+ <p>Establish measurable criteria to validate the hypothesis.</p>
980
+ <div class="method-details">
981
+ <ul>
982
+ <li><i class="fas fa-check"></i> Created benchmark set: 23 frames, 1,444 annotated potholes</li>
983
+ <li><i class="fas fa-check"></i> Target: Achieve mAP50 > 0.5 (baseline was 0.0045)</li>
984
+ <li><i class="fas fa-check"></i> Implemented <code>model.val()</code> for validation</li>
985
+ </ul>
986
+ </div>
987
+ </div>
988
+ </div>
989
+
990
+ <div class="method-card">
991
+ <div class="method-number">4</div>
992
+ <div class="method-content">
993
+ <h4>Source Training Data</h4>
994
+ <p>Acquire or create the necessary dataset for training.</p>
995
+ <div class="method-details">
996
+ <ul>
997
+ <li><i class="fas fa-check"></i> 3 stock videos from Pexels (free)</li>
998
+ <li><i class="fas fa-check"></i> 1 synthetic video from Nano Bananas</li>
999
+ <li><i class="fas fa-check"></i> Explored synthetic data generation options</li>
1000
+ </ul>
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+
1005
+ <div class="method-card">
1006
+ <div class="method-number">5</div>
1007
+ <div class="method-content">
1008
+ <h4>Prepare & Annotate Data</h4>
1009
+ <p>Process and label the data for training.</p>
1010
+ <div class="method-details">
1011
+ <ul>
1012
+ <li><i class="fas fa-check"></i> Used Roboflow with Meta's SAM3 for initial labeling</li>
1013
+ <li><i class="fas fa-check"></i> Manual labeling for challenging videos</li>
1014
+ <li><i class="fas fa-check"></i> Applied augmentation: brightness & exposure</li>
1015
+ <li><i class="fas fa-check"></i> Converted bounding boxes to polygons for better precision</li>
1016
+ </ul>
1017
+ </div>
1018
+ </div>
1019
+ </div>
1020
+
1021
+ <div class="method-card">
1022
+ <div class="method-number">6</div>
1023
+ <div class="method-content">
1024
+ <h4>Train Models</h4>
1025
+ <p>Train multiple model variants to test hypotheses.</p>
1026
+ <div class="method-details">
1027
+ <ul>
1028
+ <li><i class="fas fa-check"></i> Baseline: yolo11n.pt pretrained model</li>
1029
+ <li><i class="fas fa-check"></i> Control: 1 & 20 epochs on original dataset</li>
1030
+ <li><i class="fas fa-check"></i> Experimental: 1 & 20 epochs on new dataset</li>
1031
+ </ul>
1032
+ </div>
1033
+ </div>
1034
+ </div>
1035
+
1036
+ <div class="method-card">
1037
+ <div class="method-number">7</div>
1038
+ <div class="method-content">
1039
+ <h4>Test Hypotheses</h4>
1040
+ <p>Validate results against the benchmark dataset.</p>
1041
+ <div class="method-details">
1042
+ <ul>
1043
+ <li><i class="fas fa-check"></i> Ran validation on all model variants</li>
1044
+ <li><i class="fas fa-check"></i> Compared mAP50 and inference times</li>
1045
+ <li><i class="fas fa-check"></i> Created "proof of life" side-by-side comparisons</li>
1046
+ </ul>
1047
+ </div>
1048
+ </div>
1049
+ </div>
1050
+
1051
+ <div class="method-card">
1052
+ <div class="method-number">8</div>
1053
+ <div class="method-content">
1054
+ <h4>Draw Conclusions</h4>
1055
+ <p>Analyze results and determine next steps.</p>
1056
+ <div class="method-details">
1057
+ <ul>
1058
+ <li><i class="fas fa-check"></i> Hypothesis validated: Domain-specific data is critical</li>
1059
+ <li><i class="fas fa-check"></i> 95x improvement achieved with new data + training</li>
1060
+ <li><i class="fas fa-check"></i> Contributed validation scripts to OSS repo</li>
1061
+ </ul>
1062
+ </div>
1063
+ </div>
1064
+ </div>
1065
+ </div>
1066
+ </section>
1067
+
1068
+ <!-- Data Section -->
1069
+ <section id="data" class="section">
1070
+ <div class="section-header">
1071
+ <h2>Data Strategy</h2>
1072
+ <p>Understanding the importance of domain-specific training data</p>
1073
+ </div>
1074
+
1075
+ <div class="data-cards">
1076
+ <div class="data-card">
1077
+ <div class="data-card-header">
1078
+ <i class="fas fa-vial"></i>
1079
+ <h4>Benchmark Dataset</h4>
1080
+ </div>
1081
+ <div class="data-card-body">
1082
+ <div class="data-stat">
1083
+ <span class="data-stat-label">Total Frames</span>
1084
+ <span class="data-stat-value">23</span>
1085
+ </div>
1086
+ <div class="data-stat">
1087
+ <span class="data-stat-label">Annotated Potholes</span>
1088
+ <span class="data-stat-value">1,444</span>
1089
+ </div>
1090
+ <div class="data-stat">
1091
+ <span class="data-stat-label">Annotation Type</span>
1092
+ <span class="data-stat-value">Polygons</span>
1093
+ </div>
1094
+ <div class="data-stat">
1095
+ <span class="data-stat-label">Source</span>
1096
+ <span class="data-stat-value">Target Video</span>
1097
+ </div>
1098
+ </div>
1099
+ </div>
1100
+
1101
+ <div class="data-card">
1102
+ <div class="data-card-header">
1103
+ <i class="fas fa-graduation-cap"></i>
1104
+ <h4>Training Dataset</h4>
1105
+ </div>
1106
+ <div class="data-card-body">
1107
+ <div class="data-stat">
1108
+ <span class="data-stat-label">Video Sources</span>
1109
+ <span class="data-stat-value">4</span>
1110
+ </div>
1111
+ <div class="data-stat">
1112
+ <span class="data-stat-label">Stock Videos</span>
1113
+ <span class="data-stat-value">3 (Pexels)</span>
1114
+ </div>
1115
+ <div class="data-stat">
1116
+ <span class="data-stat-label">Synthetic Videos</span>
1117
+ <span class="data-stat-value">1</span>
1118
+ </div>
1119
+ <div class="data-stat">
1120
+ <span class="data-stat-label">Split Ratio</span>
1121
+ <span class="data-stat-value">90/10 Train/Val</span>
1122
+ </div>
1123
+ </div>
1124
+ </div>
1125
+
1126
+ <div class="data-card">
1127
+ <div class="data-card-header">
1128
+ <i class="fas fa-magic"></i>
1129
+ <h4>Augmentation</h4>
1130
+ </div>
1131
+ <div class="data-card-body">
1132
+ <div class="data-stat">
1133
+ <span class="data-stat-label">Brightness</span>
1134
+ <span class="data-