Hugging Face's logo

Spaces:
raomyousaf
/
anycoder-93a1d1af
Running

App Files Community
raomyousaf commited on
Commit
6eb91da
·
verified ·
1 Parent(s): a0c7984

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +657 -19
index.html CHANGED
@@ -1,19 +1,657 @@
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>OCR + Form Data Extraction Tool</title>
7
+
8
+ <!-- Fonts -->
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
10
+
11
+ <!-- Icons -->
12
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
13
+
14
+ <style>
15
+ :root {
16
+ --primary: #6366f1;
17
+ --secondary: #a855f7;
18
+ --accent: #ec4899;
19
+ --bg-dark: #0f172a;
20
+ --bg-card: #1e293b;
21
+ --text-main: #f8fafc;
22
+ --text-muted: #94a3b8;
23
+ --success: #10b981;
24
+ --border: #334155;
25
+ --glass: rgba(30, 41, 58, 0.7);
26
+ --scan-color: #00ff9d;
27
+ }
28
+
29
+ * {
30
+ box-sizing: boxed;
31
+ margin: 0;
32
+ padding: 0;
33
+ font-family: 'Inter', sans-serif;
34
+ }
35
+
36
+ body {
37
+ background-color: var(--bg-dark);
38
+ color: var(--text-main);
39
+ height: 100vh;
40
+ display: flex;
41
+ overflow: hidden;
42
+ background-image: radial-gradient(circle at 10% 20%, rgba(63, 66, 241, 0.1) 0%, transparent 20%),
43
+ radial-gradient(circle at 90% 80%, rgba(236, 72, 153, 0.1) 0%, transparent 20%);
44
+ }
45
+
46
+ /* --- Layout --- */
47
+ .app-container {
48
+ display: flex;
49
+ width: 100%;
50
+ height: 100%;
51
+ }
52
+
53
+ /* Sidebar */
54
+ .sidebar {
55
+ width: 280px;
56
+ background: var(--bg-card);
57
+ border-right: 1px solid var(--border);
58
+ display: flex;
59
+ flex-direction: column;
60
+ padding: 20px;
61
+ transition: transform 0.3s ease;
62
+ z-index: 10;
63
+ }
64
+
65
+ .logo-area {
66
+ display: flex;
67
+ align-items: center;
68
+ gap: 10px;
69
+ margin-bottom: 30px;
70
+ font-weight: 700;
71
+ font-size: 1.2rem;
72
+ color: var(--primary);
73
+ }
74
+
75
+ .logo-area i {
76
+ font-size: 1.5rem;
77
+ }
78
+
79
+ .nav-item {
80
+ padding: 12px 15px;
81
+ border-radius: 8px;
82
+ color: var(--text-muted);
83
+ cursor: pointer;
84
+ transition: all 0.2s;
85
+ display: flex;
86
+ align-items: center;
87
+ gap: 12px;
88
+ margin-bottom: 5px;
89
+ }
90
+
91
+ .nav-item:hover, .nav-item.active {
92
+ background: rgba(63, 66, 241, 0.1);
93
+ color: var(--text-main);
94
+ }
95
+
96
+ .nav-item.active {
97
+ border-left: 3px solid var(--primary);
98
+ }
99
+
100
+ .history-section {
101
+ margin-top: 40px;
102
+ flex-grow: 1;
103
+ }
104
+
105
+ .history-title {
106
+ font-size: 0.8rem;
107
+ text-transform: uppercase;
108
+ letter-spacing: 1px;
109
+ color: var(--text-muted);
110
+ margin-bottom: 15px;
111
+ }
112
+
113
+ .history-item {
114
+ padding: 10px;
115
+ border-bottom: 1px solid var(--border);
116
+ font-size: 0.9rem;
117
+ color: var(--text-muted);
118
+ cursor: pointer;
119
+ }
120
+
121
+ .history-item:hover {
122
+ color: var(--text-main);
123
+ }
124
+
125
+ /* Main Content */
126
+ .main-content {
127
+ flex-grow: 1;
128
+ padding: 30px;
129
+ overflow-y: auto;
130
+ display: flex;
131
+ flex-direction: column;
132
+ gap: 20px;
133
+ position: relative;
134
+ }
135
+
136
+ /* Header */
137
+ header {
138
+ display: flex;
139
+ justify-content: space-between;
140
+ align-items: center;
141
+ margin-bottom: 20px;
142
+ }
143
+
144
+ .header-title h1 {
145
+ font-size: 1.8rem;
146
+ margin-bottom: 5px;
147
+ }
148
+
149
+ .header-title p {
150
+ color: var(--text-muted);
151
+ font-size: 0.9rem;
152
+ }
153
+
154
+ .anycoder-badge {
155
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
156
+ padding: 8px 16px;
157
+ border-radius: 20px;
158
+ font-size: 0.8rem;
159
+ font-weight: 600;
160
+ color: white;
161
+ text-decoration: none;
162
+ box-shadow: 0 4px 15px rgba(63, 66, 241, 0.3);
163
+ transition: transform 0.2s;
164
+ }
165
+
166
+ .anycoder-badge:hover {
167
+ transform: translateY(-2px);
168
+ }
169
+
170
+ /* Workspace Grid */
171
+ .workspace {
172
+ display: grid;
173
+ grid-template-columns: 1fr 1fr;
174
+ gap: 20px;
175
+ height: 100%;
176
+ }
177
+
178
+ /* Card Styles */
179
+ .card {
180
+ background: var(--bg-card);
181
+ border: 1px solid var(--border);
182
+ border-radius: 16px;
183
+ padding: 20px;
184
+ display: flex;
185
+ flex-direction: column;
186
+ position: relative;
187
+ overflow: hidden;
188
+ }
189
+
190
+ .card-header {
191
+ display: flex;
192
+ justify-content: space-between;
193
+ align-items: center;
194
+ margin-bottom: 20px;
195
+ border-bottom: 1px solid var(--border);
196
+ padding-bottom: 10px;
197
+ }
198
+
199
+ .card-title {
200
+ font-weight: 600;
201
+ display: flex;
202
+ align-items: center;
203
+ gap: 8px;
204
+ }
205
+
206
+ /* Upload Zone */
207
+ .upload-zone {
208
+ flex-grow: 1;
209
+ border: 2px dashed var(--border);
210
+ border-radius: 12px;
211
+ display: flex;
212
+ flex-direction: column;
213
+ align-items: center;
214
+ justify-content: center;
215
+ cursor: pointer;
216
+ transition: all 0.3s;
217
+ position: relative;
218
+ background: rgba(15, 23, 42, 0.3);
219
+ }
220
+
221
+ .upload-zone:hover {
222
+ border-color: var(--primary);
223
+ background: rgba(63, 66, 241, 0.05);
224
+ }
225
+
226
+ .upload-icon {
227
+ font-size: 3rem;
228
+ color: var(--text-muted);
229
+ margin-bottom: 15px;
230
+ }
231
+
232
+ .upload-text {
233
+ color: var(--text-muted);
234
+ font-weight: 500;
235
+ }
236
+
237
+ .upload-subtext {
238
+ color: var(--text-muted);
239
+ font-size: 0.8rem;
240
+ opacity: 0.7;
241
+ margin-top: 5px;
242
+ }
243
+
244
+ /* Image Preview Area */
245
+ .preview-container {
246
+ position: relative;
247
+ width: 100%;
248
+ height: 100%;
249
+ display: none; /* Hidden by default */
250
+ background: #000;
251
+ border-radius: 12px;
252
+ overflow: hidden;
253
+ }
254
+
255
+ .preview-image {
256
+ width: 100%;
257
+ height: 100%;
258
+ object-fit: cover;
259
+ opacity: 0.6;
260
+ }
261
+
262
+ /* Scanner Effect */
263
+ .scanner-overlay {
264
+ position: absolute;
265
+ top: 0;
266
+ left: 0;
267
+ width: 100%;
268
+ height: 100%;
269
+ background: linear-gradient(to bottom, transparent, rgba(0, 255, 157, 0.2), transparent);
270
+ animation: scan 3s linear infinite;
271
+ display: none;
272
+ }
273
+
274
+ @keyframes scan {
275
+ 0% { top: -100%; }
276
+ 100% { top: 100%; }
277
+ }
278
+
279
+ /* Results Panel */
280
+ .results-content {
281
+ flex-grow: 1;
282
+ overflow-y: auto;
283
+ }
284
+
285
+ .data-field {
286
+ background: rgba(15, 23, 42, 0.5);
287
+ padding: 15px;
288
+ border-radius: 8px;
289
+ margin-bottom: 15px;
290
+ border: 1px solid var(--border);
291
+ transition: border-color 0.3s;
292
+ }
293
+
294
+ .data-field:hover {
295
+ border-color: var(--secondary);
296
+ }
297
+
298
+ .field-label {
299
+ font-size: 0.8rem;
300
+ color: var(--text-muted);
301
+ margin-bottom: 5px;
302
+ text-transform: uppercase;
303
+ letter-spacing: 0.5px;
304
+ }
305
+
306
+ .field-value {
307
+ font-size: 1.1rem;
308
+ font-weight: 600;
309
+ color: var(--text-main);
310
+ }
311
+
312
+ .confidence-badge {
313
+ font-size: 0.7rem;
314
+ padding: 2px 6px;
315
+ background: var(--success);
316
+ color: #fff;
317
+ border-radius: 4px;
318
+ margin-left: 10px;
319
+ float: right;
320
+ }
321
+
322
+ /* Loading State */
323
+ .processing-state {
324
+ display: none;
325
+ flex-direction: column;
326
+ align-items: center;
327
+ justify-content: center;
328
+ height: 100%;
329
+ }
330
+
331
+ .loader {
332
+ width: 50px;
333
+ height: 50px;
334
+ border: 3px solid transparent;
335
+ border-top-color: var(--primary);
336
+ border-radius: 50%;
337
+ animation: spin 1s linear infinite;
338
+ }
339
+
340
+ @keyframes spin {
341
+ to { transform: rotate(360deg); }
342
+ }
343
+
344
+ .loader-text {
345
+ margin-top: 20px;
346
+ color: var(--text-main);
347
+ font-weight: 600;
348
+ }
349
+
350
+ /* Toast Notification */
351
+ .toast {
352
+ position: fixed;
353
+ bottom: 20px;
354
+ right: 20px;
355
+ background: var(--bg-card);
356
+ border-left: 4px solid var(--success);
357
+ padding: 15px 25px;
358
+ border-radius: 8px;
359
+ color: var(--text-main);
360
+ box-shadow: 0 5px 15px rgba(0,0,0,0.3);
361
+ transform: translateY(100px);
362
+ opacity: 0;
363
+ transition: all 0.3s;
364
+ z-index: 100;
365
+ }
366
+
367
+ .toast.show {
368
+ transform: translateY(0);
369
+ opacity: 1;
370
+ }
371
+
372
+ /* Responsive */
373
+ @media (max-width: 900px) {
374
+ .workspace {
375
+ grid-template-columns: 1fr;
376
+ }
377
+ .sidebar {
378
+ display: none; /* Simplify for mobile */
379
+ }
380
+ .app-container {
381
+ display: block;
382
+ }
383
+ .main-content {
384
+ padding: 15px;
385
+ }
386
+ }
387
+ </style>
388
+ </head>
389
+ <body>
390
+
391
+ <div class="app-container">
392
+ <!-- Sidebar -->
393
+ <aside class="sidebar">
394
+ <div class="logo-area">
395
+ <i class="fa-solid fa-eye"></i>
396
+ <span>VisionExtract</span>
397
+ </div>
398
+
399
+ <div class="nav-item active">
400
+ <i class="fa-solid fa-layer-group"></i>
401
+ <span>New Extraction</span>
402
+ </div>
403
+ <div class="nav-item">
404
+ <i class="fa-solid fa-bolt"></i>
405
+ <span>Batch Process</span>
406
+ </div>
407
+ <div class="nav-item">
408
+ <i class="fa-solid fa-cog"></i>
409
+ <span>Settings</span>
410
+ </div>
411
+
412
+ <div class="history-section">
413
+ <div class="history-title">Recent Scans</div>
414
+ <div class="history-item">Invoice_001.png</div>
415
+ <div class="history-item">Form_Submit_22.jpg</div>
416
+ <div class="history-item">Receipt_Starbucks.png</div>
417
+ </div>
418
+
419
+ <div style="margin-top: 20px; font-size: 0.7rem; color: var(--text-muted);">
420
+ v2.4.0 Stable
421
+ </div>
422
+ </aside>
423
+
424
+ <!-- Main Content -->
425
+ <main class="main-content">
426
+ <header>
427
+ <div class="header-title">
428
+ <h1>OCR Data Extraction</h1>
429
+ <p>Upload a document to automatically extract structured fields.</p>
430
+ </div>
431
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-badge">
432
+ Built with anycoder
433
+ </a>
434
+ </header>
435
+
436
+ <div class="workspace">
437
+ <!-- Left Column: Upload/Preview -->
438
+ <div class="card">
439
+ <div class="card-header">
440
+ <div class="card-title">
441
+ <i class="fa-solid fa-image"></i> Source Document
442
+ </div>
443
+ <button id="clearBtn" class="nav-item" style="padding: 5px 10px; font-size: 0.8rem;">
444
+ <i class="fa-solid fa-trash"></i> Clear
445
+ </button>
446
+ </div>
447
+
448
+ <!-- Upload Zone -->
449
+ <div class="upload-zone" id="dropZone">
450
+ <input type="file" id="fileInput" hidden accept="image/png, image/jpeg">
451
+ <i class="fa-solid fa-cloud-arrow-up upload-icon"></i>
452
+ <div class="upload-text">Click or Drag image here</div>
453
+ <div class="upload-subtext">Supports PNG, JPG (Max 5MB)</div>
454
+ </div>
455
+
456
+ <!-- Preview Container (Hidden initially) -->
457
+ <div class="preview-container" id="previewContainer">
458
+ <img src="" alt="Preview" class="preview-image" id="previewImage">
459
+ <div class="scanner-overlay" id="scannerOverlay"></div>
460
+ </div>
461
+
462
+ <!-- Processing State (Hidden initially) -->
463
+ <div class="processing-state" id="processingState">
464
+ <div class="loader"></div>
465
+ <div class="loader-text">Analyzing Document...</div>
466
+ <div style="font-size: 0.8rem; color: var(--text-muted); margin-top: 5px;">Extracting fields: Name, Date, Total...</div>
467
+ </div>
468
+ </div>
469
+
470
+ <!-- Right Column: Results -->
471
+ <div class="card">
472
+ <div class="card-header">
473
+ <div class="card-title">
474
+ <i class="fa-solid fa-file-code"></i> Extracted Data
475
+ </div>
476
+ <button id="copyJsonBtn" class="nav-item" style="padding: 5px 10px; font-size: 0.8rem;">
477
+ <i class="fa-solid fa-copy"></i> Copy JSON
478
+ </button>
479
+ </div>
480
+
481
+ <div class="results-content" id="resultsContent">
482
+ <div style="text-align: center; color: var(--text-muted); padding: 40px;">
483
+ <i class="fa-solid fa-robot" style="font-size: 2rem; opacity: 0.5; margin-bottom: 10px;"></i>
484
+ <p>Waiting for input...</p>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </div>
489
+ </main>
490
+ </div>
491
+
492
+ <!-- Toast Notification -->
493
+ <div class="toast" id="toast">
494
+ <i class="fa-solid fa-check-circle" style="color: var(--success); margin-right: 10px;"></i>
495
+ <span id="toastMessage">Action completed successfully</span>
496
+ </div>
497
+
498
+ <script>
499
+ // --- DOM Elements ---
500
+ const dropZone = document.getElementById('dropZone');
501
+ const fileInput = document.getElementById('fileInput');
502
+ const previewContainer = document.getElementById('previewContainer');
503
+ const previewImage = document.getElementById('previewImage');
504
+ const scannerOverlay = document.getElementById('scannerOverlay');
505
+ const processingState = document.getElementById('processingState');
506
+ const resultsContent = document.getElementById('resultsContent');
507
+ const copyJsonBtn = document.getElementById('copyJsonBtn');
508
+ const clearBtn = document.getElementById('clearBtn');
509
+ const toast = document.getElementById('toast');
510
+ const toastMessage = document.getElementById('toastMessage');
511
+
512
+ // --- Event Handlers ---
513
+
514
+ // Drag & Drop
515
+ dropZone.addEventListener('click', () => fileInput.click());
516
+
517
+ dropZone.addEventListener('dragover', (e) => {
518
+ e.preventDefault();
519
+ dropZone.style.borderColor = '#6366f1';
520
+ dropZone.style.background = 'rgba(63, 66, 241, 0.1)';
521
+ });
522
+
523
+ dropZone.addEventListener('dragleave', (e) => {
524
+ e.preventDefault();
525
+ dropZone.style.borderColor = '#334155';
526
+ dropZone.style.background = 'rgba(15, 23, 42, 0.3)';
527
+ });
528
+
529
+ dropZone.addEventListener('drop', (e) => {
530
+ e.preventDefault();
531
+ dropZone.style.borderColor = '#334155';
532
+ dropZone.style.background = 'rgba(15, 23, 42, 0.3)';
533
+ if (e.dataTransfer.files.length) {
534
+ handleFile(e.dataTransfer.files[0]);
535
+ }
536
+ });
537
+
538
+ fileInput.addEventListener('change', (e) => {
539
+ if (e.target.files.length) {
540
+ handleFile(e.target.files[0]);
541
+ }
542
+ });
543
+
544
+ clearBtn.addEventListener('click', resetUI);
545
+
546
+ copyJsonBtn.addEventListener('click', copyToClipboard);
547
+
548
+ // --- Core Logic ---
549
+
550
+ function handleFile(file) {
551
+ if (!file.type.startsWith('image/')) {
552
+ showToast('Please upload an image file.');
553
+ return;
554
+ }
555
+
556
+ // 1. Show Preview
557
+ const reader = new FileReader();
558
+ reader.onload = (e) => {
559
+ previewImage.src = e.target.result;
560
+ dropZone.style.display = 'none';
561
+ previewContainer.style.display = 'block';
562
+
563
+ // 2. Start Simulation
564
+ startProcessing();
565
+ };
566
+ reader.readAsDataURL(file);
567
+ }
568
+
569
+ function startProcessing() {
570
+ // UI Transition
571
+ previewContainer.style.display = 'none';
572
+ processingState.style.display = 'flex';
573
+ scannerOverlay.style.display = 'block'; // Show scanner animation
574
+
575
+ // Simulate OCR Delay (2.5 seconds)
576
+ setTimeout(() => {
577
+ processingState.style.display = 'none';
578
+ scannerOverlay.style.display = 'none';
579
+ previewContainer.style.display = 'block'; // Keep image visible
580
+
581
+ // Generate Mock Data
582
+ generateMockResults();
583
+ showToast('Extraction Complete');
584
+ }, 2500);
585
+ }
586
+
587
+ function generateMockResults() {
588
+ // Mock Data representing what an OCR engine might find
589
+ const mockData = {
590
+ "document_type": "Invoice",
591
+ "invoice_number": "INV-2023-0045",
592
+ "date": "2023-10-15",
593
+ "client": "Acme Corp",
594
+ "total_amount": "$1,250.00",
595
+ "tax": "$125.00",
596
+ "status": "Paid"
597
+ };
598
+
599
+ let html = '';
600
+ for (const [key, value] of Object.entries(mockData)) {
601
+ html += `
602
+ <div class="data-field">
603
+ <div class="field-label">
604
+ ${key.replace('_', ' ').toUpperCase()}
605
+ <span class="confidence-badge">98% Conf</span>
606
+ </div>
607
+ <div class="field-value">${value}</div>
608
+ </div>
609
+ `;
610
+ }
611
+
612
+ // Add raw JSON view toggle logic (optional enhancement)
613
+ html += `
614
+ <div class="data-field" style="background: #0f172a; border: 1px solid #334155;">
615
+ <div class="field-label">RAW JSON OUTPUT</div>
616
+ <pre style="color: #a855f7; font-size: 0.8rem; overflow-x: auto;">
617
+ ${JSON.stringify(mockData, null, 2)}
618
+ </pre>
619
+ </div>
620
+ `;
621
+
622
+ resultsContent.innerHTML = html;
623
+ }
624
+
625
+ function copyToClipboard() {
626
+ // Extract text from the pre tag
627
+ const rawJson = resultsContent.querySelector('pre').innerText;
628
+ navigator.clipboard.writeText(rawJson).then(() => {
629
+ showToast('JSON copied to clipboard');
630
+ });
631
+ }
632
+
633
+ function resetUI() {
634
+ dropZone.style.display = 'flex';
635
+ previewContainer.style.display = 'none';
636
+ processingState.style.display = 'none';
637
+ scannerOverlay.style.display = 'none';
638
+ fileInput.value = '';
639
+ previewImage.src = '';
640
+ resultsContent.innerHTML = `
641
+ <div style="text-align: center; color: var(--text-muted); padding: 40px;">
642
+ <i class="fa-solid fa-robot" style="font-size: 2rem; opacity: 0.5; margin-bottom: 10px;"></i>
643
+ <p>Waiting for input...</p>
644
+ </div>
645
+ `;
646
+ }
647
+
648
+ function showToast(message) {
649
+ toastMessage.innerText = message;
650
+ toast.classList.add('show');
651
+ setTimeout(() => {
652
+ toast.classList.remove('show');
653
+ }, 3000);
654
+ }
655
+ </script>
656
+ </body>
657
+ </html>