asna14 commited on
Commit
e671eb4
Β·
verified Β·
1 Parent(s): f80c0f9

Upload folder using huggingface_hub

Browse files
Files changed (2) hide show
  1. README.md +5 -5
  2. index.html +603 -18
README.md CHANGED
@@ -1,10 +1,10 @@
1
  ---
2
  title: GradicAI
3
- emoji: 🐒
4
- colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
-
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
  title: GradicAI
3
+ emoji: πŸŽ“
4
+ colorFrom: indigo
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ license: mit
9
+ short_description: AI-powered exam proctoring model documentation
10
  ---
 
 
index.html CHANGED
@@ -1,19 +1,604 @@
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>GradicAI β€” AI Proctoring Model</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
8
+ <style>
9
+ *, *::before, *::after {
10
+ margin: 0;
11
+ padding: 0;
12
+ box-sizing: border-box;
13
+ }
14
+
15
+ :root {
16
+ --bg-primary: #0f0f1a;
17
+ --bg-secondary: #1a1a2e;
18
+ --bg-card: rgba(30, 30, 50, 0.7);
19
+ --text-primary: #f0f0f5;
20
+ --text-secondary: #a0a0b8;
21
+ --accent-indigo: #667eea;
22
+ --accent-purple: #764ba2;
23
+ --accent-cyan: #06d6a0;
24
+ --accent-amber: #f59e0b;
25
+ --accent-red: #ef4444;
26
+ --border-color: rgba(102, 126, 234, 0.2);
27
+ --glow-indigo: rgba(102, 126, 234, 0.15);
28
+ }
29
+
30
+ body {
31
+ font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
32
+ background: var(--bg-primary);
33
+ color: var(--text-primary);
34
+ line-height: 1.7;
35
+ min-height: 100vh;
36
+ overflow-x: hidden;
37
+ }
38
+
39
+ /* Animated background */
40
+ body::before {
41
+ content: '';
42
+ position: fixed;
43
+ top: 0; left: 0; right: 0; bottom: 0;
44
+ background:
45
+ radial-gradient(ellipse at 20% 20%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
46
+ radial-gradient(ellipse at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%),
47
+ radial-gradient(ellipse at 50% 50%, rgba(6, 214, 160, 0.03) 0%, transparent 50%);
48
+ z-index: -1;
49
+ animation: bgPulse 8s ease-in-out infinite alternate;
50
+ }
51
+
52
+ @keyframes bgPulse {
53
+ 0% { opacity: 0.7; }
54
+ 100% { opacity: 1; }
55
+ }
56
+
57
+ .container {
58
+ max-width: 900px;
59
+ margin: 0 auto;
60
+ padding: 2rem 1.5rem;
61
+ }
62
+
63
+ /* Hero Section */
64
+ .hero {
65
+ text-align: center;
66
+ padding: 3rem 0 2.5rem;
67
+ position: relative;
68
+ }
69
+
70
+ .hero-badge {
71
+ display: inline-flex;
72
+ align-items: center;
73
+ gap: 0.5rem;
74
+ padding: 0.4rem 1rem;
75
+ background: rgba(102, 126, 234, 0.1);
76
+ border: 1px solid rgba(102, 126, 234, 0.3);
77
+ border-radius: 50px;
78
+ font-size: 0.8rem;
79
+ font-weight: 500;
80
+ color: var(--accent-indigo);
81
+ margin-bottom: 1.5rem;
82
+ letter-spacing: 0.05em;
83
+ text-transform: uppercase;
84
+ }
85
+
86
+ .hero-badge .dot {
87
+ width: 6px;
88
+ height: 6px;
89
+ border-radius: 50%;
90
+ background: var(--accent-cyan);
91
+ animation: pulse 2s ease-in-out infinite;
92
+ }
93
+
94
+ @keyframes pulse {
95
+ 0%, 100% { opacity: 1; transform: scale(1); }
96
+ 50% { opacity: 0.5; transform: scale(0.8); }
97
+ }
98
+
99
+ .hero h1 {
100
+ font-size: 3rem;
101
+ font-weight: 800;
102
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #06d6a0 100%);
103
+ -webkit-background-clip: text;
104
+ -webkit-text-fill-color: transparent;
105
+ background-clip: text;
106
+ margin-bottom: 0.75rem;
107
+ letter-spacing: -0.02em;
108
+ }
109
+
110
+ .hero p {
111
+ font-size: 1.15rem;
112
+ color: var(--text-secondary);
113
+ max-width: 600px;
114
+ margin: 0 auto;
115
+ }
116
+
117
+ /* Model Stats Bar */
118
+ .stats-bar {
119
+ display: flex;
120
+ justify-content: center;
121
+ gap: 2rem;
122
+ margin: 2rem 0;
123
+ flex-wrap: wrap;
124
+ }
125
+
126
+ .stat {
127
+ text-align: center;
128
+ padding: 0.75rem 1.25rem;
129
+ background: var(--bg-card);
130
+ border: 1px solid var(--border-color);
131
+ border-radius: 12px;
132
+ backdrop-filter: blur(10px);
133
+ min-width: 120px;
134
+ transition: transform 0.2s, border-color 0.3s;
135
+ }
136
+
137
+ .stat:hover {
138
+ transform: translateY(-2px);
139
+ border-color: var(--accent-indigo);
140
+ }
141
+
142
+ .stat-value {
143
+ font-size: 1.4rem;
144
+ font-weight: 700;
145
+ color: var(--accent-indigo);
146
+ }
147
+
148
+ .stat-label {
149
+ font-size: 0.75rem;
150
+ color: var(--text-secondary);
151
+ text-transform: uppercase;
152
+ letter-spacing: 0.08em;
153
+ margin-top: 0.15rem;
154
+ }
155
+
156
+ /* Cards */
157
+ .card {
158
+ background: var(--bg-card);
159
+ border: 1px solid var(--border-color);
160
+ border-radius: 16px;
161
+ padding: 1.75rem;
162
+ margin-bottom: 1.5rem;
163
+ backdrop-filter: blur(10px);
164
+ transition: border-color 0.3s;
165
+ }
166
+
167
+ .card:hover {
168
+ border-color: rgba(102, 126, 234, 0.4);
169
+ }
170
+
171
+ .card h2 {
172
+ font-size: 1.3rem;
173
+ font-weight: 700;
174
+ margin-bottom: 1rem;
175
+ display: flex;
176
+ align-items: center;
177
+ gap: 0.6rem;
178
+ }
179
+
180
+ .card h2 .icon {
181
+ font-size: 1.4rem;
182
+ }
183
+
184
+ /* Detection Table */
185
+ .detection-grid {
186
+ display: grid;
187
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
188
+ gap: 0.75rem;
189
+ }
190
+
191
+ .detection-item {
192
+ display: flex;
193
+ align-items: center;
194
+ gap: 0.75rem;
195
+ padding: 0.85rem 1rem;
196
+ background: rgba(15, 15, 26, 0.5);
197
+ border: 1px solid rgba(255, 255, 255, 0.05);
198
+ border-radius: 10px;
199
+ transition: all 0.2s;
200
+ }
201
+
202
+ .detection-item:hover {
203
+ background: rgba(102, 126, 234, 0.08);
204
+ border-color: rgba(102, 126, 234, 0.2);
205
+ transform: translateX(4px);
206
+ }
207
+
208
+ .detection-icon {
209
+ font-size: 1.5rem;
210
+ width: 40px;
211
+ height: 40px;
212
+ display: flex;
213
+ align-items: center;
214
+ justify-content: center;
215
+ border-radius: 10px;
216
+ flex-shrink: 0;
217
+ }
218
+
219
+ .detection-icon.warning { background: rgba(245, 158, 11, 0.15); }
220
+ .detection-icon.danger { background: rgba(239, 68, 68, 0.15); }
221
+ .detection-icon.info { background: rgba(102, 126, 234, 0.15); }
222
+
223
+ .detection-label {
224
+ font-weight: 500;
225
+ font-size: 0.9rem;
226
+ }
227
+
228
+ .detection-desc {
229
+ font-size: 0.78rem;
230
+ color: var(--text-secondary);
231
+ }
232
+
233
+ /* Code Block */
234
+ .code-block {
235
+ background: #0d0d1a;
236
+ border: 1px solid rgba(255, 255, 255, 0.06);
237
+ border-radius: 12px;
238
+ overflow: hidden;
239
+ }
240
+
241
+ .code-header {
242
+ display: flex;
243
+ justify-content: space-between;
244
+ align-items: center;
245
+ padding: 0.6rem 1rem;
246
+ background: rgba(255, 255, 255, 0.03);
247
+ border-bottom: 1px solid rgba(255, 255, 255, 0.06);
248
+ }
249
+
250
+ .code-lang {
251
+ font-size: 0.75rem;
252
+ color: var(--accent-indigo);
253
+ font-weight: 600;
254
+ text-transform: uppercase;
255
+ letter-spacing: 0.05em;
256
+ }
257
+
258
+ .copy-btn {
259
+ background: none;
260
+ border: 1px solid rgba(255, 255, 255, 0.1);
261
+ color: var(--text-secondary);
262
+ padding: 0.25rem 0.6rem;
263
+ border-radius: 6px;
264
+ font-size: 0.72rem;
265
+ cursor: pointer;
266
+ transition: all 0.2s;
267
+ font-family: inherit;
268
+ }
269
+
270
+ .copy-btn:hover {
271
+ background: rgba(102, 126, 234, 0.15);
272
+ color: var(--accent-indigo);
273
+ border-color: var(--accent-indigo);
274
+ }
275
+
276
+ .code-content {
277
+ padding: 1rem 1.25rem;
278
+ overflow-x: auto;
279
+ }
280
+
281
+ .code-content pre {
282
+ font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
283
+ font-size: 0.82rem;
284
+ line-height: 1.6;
285
+ color: #c9d1d9;
286
+ white-space: pre;
287
+ }
288
+
289
+ .code-content .keyword { color: #ff7b72; }
290
+ .code-content .string { color: #a5d6ff; }
291
+ .code-content .comment { color: #8b949e; font-style: italic; }
292
+ .code-content .func { color: #d2a8ff; }
293
+ .code-content .var { color: #ffa657; }
294
+
295
+ /* Violation Flow */
296
+ .flow {
297
+ display: flex;
298
+ align-items: center;
299
+ justify-content: center;
300
+ gap: 0.5rem;
301
+ flex-wrap: wrap;
302
+ padding: 1rem 0;
303
+ }
304
+
305
+ .flow-step {
306
+ padding: 0.5rem 1rem;
307
+ background: rgba(102, 126, 234, 0.1);
308
+ border: 1px solid rgba(102, 126, 234, 0.25);
309
+ border-radius: 8px;
310
+ font-size: 0.85rem;
311
+ font-weight: 500;
312
+ }
313
+
314
+ .flow-step.danger {
315
+ background: rgba(239, 68, 68, 0.1);
316
+ border-color: rgba(239, 68, 68, 0.25);
317
+ color: var(--accent-red);
318
+ }
319
+
320
+ .flow-arrow {
321
+ color: var(--text-secondary);
322
+ font-size: 1.2rem;
323
+ }
324
+
325
+ /* CTA / Download */
326
+ .cta-row {
327
+ display: flex;
328
+ gap: 1rem;
329
+ flex-wrap: wrap;
330
+ margin-top: 1.25rem;
331
+ }
332
+
333
+ .btn {
334
+ display: inline-flex;
335
+ align-items: center;
336
+ gap: 0.5rem;
337
+ padding: 0.7rem 1.5rem;
338
+ border-radius: 10px;
339
+ font-size: 0.9rem;
340
+ font-weight: 600;
341
+ text-decoration: none;
342
+ transition: all 0.2s;
343
+ border: none;
344
+ cursor: pointer;
345
+ font-family: inherit;
346
+ }
347
+
348
+ .btn-primary {
349
+ background: linear-gradient(135deg, var(--accent-indigo), var(--accent-purple));
350
+ color: white;
351
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
352
+ }
353
+
354
+ .btn-primary:hover {
355
+ transform: translateY(-2px);
356
+ box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
357
+ }
358
+
359
+ .btn-secondary {
360
+ background: rgba(255, 255, 255, 0.05);
361
+ color: var(--text-primary);
362
+ border: 1px solid var(--border-color);
363
+ }
364
+
365
+ .btn-secondary:hover {
366
+ background: rgba(102, 126, 234, 0.1);
367
+ border-color: var(--accent-indigo);
368
+ }
369
+
370
+ /* Footer */
371
+ .footer {
372
+ text-align: center;
373
+ padding: 2rem 0 1rem;
374
+ color: var(--text-secondary);
375
+ font-size: 0.82rem;
376
+ }
377
+
378
+ .footer a {
379
+ color: var(--accent-indigo);
380
+ text-decoration: none;
381
+ }
382
+
383
+ .footer a:hover {
384
+ text-decoration: underline;
385
+ }
386
+
387
+ /* Responsive */
388
+ @media (max-width: 640px) {
389
+ .hero h1 { font-size: 2rem; }
390
+ .stats-bar { gap: 0.75rem; }
391
+ .stat { min-width: 90px; padding: 0.5rem 0.75rem; }
392
+ .stat-value { font-size: 1.1rem; }
393
+ .detection-grid { grid-template-columns: 1fr; }
394
+ .container { padding: 1rem; }
395
+ }
396
+ </style>
397
+ </head>
398
+ <body>
399
+ <div class="container">
400
+ <!-- Hero -->
401
+ <div class="hero">
402
+ <div class="hero-badge">
403
+ <span class="dot"></span>
404
+ YOLOv8n Object Detection Model
405
+ </div>
406
+ <h1>πŸŽ“ GradicAI</h1>
407
+ <p>AI-powered exam proctoring with real-time object detection β€” detects phones, books, and multiple persons during online exams</p>
408
+ </div>
409
+
410
+ <!-- Stats -->
411
+ <div class="stats-bar">
412
+ <div class="stat">
413
+ <div class="stat-value">3.2M</div>
414
+ <div class="stat-label">Parameters</div>
415
+ </div>
416
+ <div class="stat">
417
+ <div class="stat-value">~6 MB</div>
418
+ <div class="stat-label">Model Size</div>
419
+ </div>
420
+ <div class="stat">
421
+ <div class="stat-value">80</div>
422
+ <div class="stat-label">COCO Classes</div>
423
+ </div>
424
+ <div class="stat">
425
+ <div class="stat-value">3</div>
426
+ <div class="stat-label">Used in Proctoring</div>
427
+ </div>
428
+ <div class="stat">
429
+ <div class="stat-value">640px</div>
430
+ <div class="stat-label">Input Size</div>
431
+ </div>
432
+ </div>
433
+
434
+ <!-- What It Detects -->
435
+ <div class="card">
436
+ <h2><span class="icon">πŸ”</span> What It Detects</h2>
437
+ <div class="detection-grid">
438
+ <div class="detection-item">
439
+ <div class="detection-icon warning">πŸ“±</div>
440
+ <div>
441
+ <div class="detection-label">Mobile Phone</div>
442
+ <div class="detection-desc">COCO class #67</div>
443
+ </div>
444
+ </div>
445
+ <div class="detection-item">
446
+ <div class="detection-icon warning">πŸ“–</div>
447
+ <div>
448
+ <div class="detection-label">Book / Notes</div>
449
+ <div class="detection-desc">COCO class #73</div>
450
+ </div>
451
+ </div>
452
+ <div class="detection-item">
453
+ <div class="detection-icon danger">πŸ‘₯</div>
454
+ <div>
455
+ <div class="detection-label">Multiple Persons</div>
456
+ <div class="detection-desc">COCO class #0 (count > 1)</div>
457
+ </div>
458
+ </div>
459
+ <div class="detection-item">
460
+ <div class="detection-icon info">🚫</div>
461
+ <div>
462
+ <div class="detection-label">No Person</div>
463
+ <div class="detection-desc">COCO class #0 (count = 0)</div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <!-- Violation Flow -->
470
+ <div class="card">
471
+ <h2><span class="icon">⚑</span> Violation Flow</h2>
472
+ <p style="color: var(--text-secondary); margin-bottom: 0.75rem;">
473
+ The proctoring system issues up to 3 warnings before terminating the exam.
474
+ </p>
475
+ <div class="flow">
476
+ <span class="flow-step">Detection</span>
477
+ <span class="flow-arrow">β†’</span>
478
+ <span class="flow-step">⚠️ Warning 1</span>
479
+ <span class="flow-arrow">β†’</span>
480
+ <span class="flow-step">⚠️ Warning 2</span>
481
+ <span class="flow-arrow">β†’</span>
482
+ <span class="flow-step danger">🚫 Warning 3 β€” Terminated</span>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- Usage -->
487
+ <div class="card">
488
+ <h2><span class="icon">πŸš€</span> Quick Start</h2>
489
+
490
+ <div class="code-block" style="margin-bottom: 1rem;">
491
+ <div class="code-header">
492
+ <span class="code-lang">bash</span>
493
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
494
+ </div>
495
+ <div class="code-content">
496
+ <pre>pip install ultralytics</pre>
497
+ </div>
498
+ </div>
499
+
500
+ <div class="code-block">
501
+ <div class="code-header">
502
+ <span class="code-lang">python</span>
503
+ <button class="copy-btn" onclick="copyCode(this)">Copy</button>
504
+ </div>
505
+ <div class="code-content">
506
+ <pre><span class="keyword">from</span> ultralytics <span class="keyword">import</span> YOLO
507
+ <span class="keyword">from</span> huggingface_hub <span class="keyword">import</span> hf_hub_download
508
+
509
+ <span class="comment"># Download model from Hugging Face</span>
510
+ model_path = <span class="func">hf_hub_download</span>(
511
+ repo_id=<span class="string">"asna14/yolov8n-proctoring"</span>,
512
+ filename=<span class="string">"yolov8n.pt"</span>
513
+ )
514
+
515
+ <span class="comment"># Load and run inference</span>
516
+ model = <span class="func">YOLO</span>(model_path)
517
+ results = model(<span class="string">"exam_frame.jpg"</span>, conf=<span class="var">0.25</span>)
518
+
519
+ <span class="comment"># Process detections</span>
520
+ <span class="keyword">for</span> box <span class="keyword">in</span> results[<span class="var">0</span>].boxes:
521
+ cls = <span class="func">int</span>(box.cls[<span class="var">0</span>])
522
+ conf = <span class="func">float</span>(box.conf[<span class="var">0</span>])
523
+ label = results[<span class="var">0</span>].names[cls]
524
+ <span class="func">print</span>(<span class="string">f"Detected: </span>{label} ({conf:.2f})<span class="string">"</span>)</pre>
525
+ </div>
526
+ </div>
527
+
528
+ <div class="cta-row">
529
+ <a href="https://huggingface.co/asna14/yolov8n-proctoring" class="btn btn-primary" target="_blank">
530
+ πŸ“₯ Download Model
531
+ </a>
532
+ <a href="https://docs.ultralytics.com/" class="btn btn-secondary" target="_blank">
533
+ πŸ“š Ultralytics Docs
534
+ </a>
535
+ </div>
536
+ </div>
537
+
538
+ <!-- Tech Stack -->
539
+ <div class="card">
540
+ <h2><span class="icon">πŸ› </span> Part of GradicAI Platform</h2>
541
+ <p style="color: var(--text-secondary); margin-bottom: 1rem;">
542
+ This model powers the proctoring feature of <strong style="color: var(--text-primary);">GradicAI</strong> β€”
543
+ a full-stack AI exam & grading platform.
544
+ </p>
545
+ <div class="detection-grid">
546
+ <div class="detection-item">
547
+ <div class="detection-icon info">πŸ€–</div>
548
+ <div>
549
+ <div class="detection-label">AI Grading</div>
550
+ <div class="detection-desc">GPT-4o powered</div>
551
+ </div>
552
+ </div>
553
+ <div class="detection-item">
554
+ <div class="detection-icon info">πŸ“Ή</div>
555
+ <div>
556
+ <div class="detection-label">Live Proctoring</div>
557
+ <div class="detection-desc">YOLOv8 + WebSocket</div>
558
+ </div>
559
+ </div>
560
+ <div class="detection-item">
561
+ <div class="detection-icon info">πŸ“</div>
562
+ <div>
563
+ <div class="detection-label">Structured Exams</div>
564
+ <div class="detection-desc">Forms-style UI</div>
565
+ </div>
566
+ </div>
567
+ <div class="detection-item">
568
+ <div class="detection-icon info">πŸ“š</div>
569
+ <div>
570
+ <div class="detection-label">AI Quizzes</div>
571
+ <div class="detection-desc">Auto-generated</div>
572
+ </div>
573
+ </div>
574
+ </div>
575
+ </div>
576
+
577
+ <!-- Footer -->
578
+ <div class="footer">
579
+ <p>
580
+ <strong>GradicAI</strong> Β· Model: <a href="https://huggingface.co/asna14/yolov8n-proctoring">YOLOv8n</a> by
581
+ <a href="https://docs.ultralytics.com/">Ultralytics</a> Β·
582
+ Licensed under AGPL-3.0
583
+ </p>
584
+ </div>
585
+ </div>
586
+
587
+ <script>
588
+ function copyCode(btn) {
589
+ const codeBlock = btn.closest('.code-block');
590
+ const code = codeBlock.querySelector('pre').textContent;
591
+ navigator.clipboard.writeText(code).then(() => {
592
+ btn.textContent = 'Copied!';
593
+ btn.style.color = '#06d6a0';
594
+ btn.style.borderColor = '#06d6a0';
595
+ setTimeout(() => {
596
+ btn.textContent = 'Copy';
597
+ btn.style.color = '';
598
+ btn.style.borderColor = '';
599
+ }, 2000);
600
+ });
601
+ }
602
+ </script>
603
+ </body>
604
  </html>