Hugging Face's logo

Spaces:
arevedudaa
/
OCR_extract
Paused

App Files Community
arevedudaa commited on
Commit
9656424
·
verified ·
1 Parent(s): 5c94cc3

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +315 -0
templates/index.html ADDED
@@ -0,0 +1,315 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Business Card Scanner</title>
7
+ <!-- Bootstrap CSS -->
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <style>
10
+ :root {
11
+ --primary-color: #0d6efd;
12
+ --secondary-color: #6c757d;
13
+ --success-color: #198754;
14
+ }
15
+
16
+ body {
17
+ background-color: #f8f9fa;
18
+ padding-bottom: 60px;
19
+ }
20
+
21
+ .navbar {
22
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
23
+ }
24
+
25
+ .navbar-brand {
26
+ font-weight: bold;
27
+ color: var(--primary-color) !important;
28
+ }
29
+
30
+ .upload-box {
31
+ border: 2px dashed #ccc;
32
+ padding: 30px 20px;
33
+ text-align: center;
34
+ background: white;
35
+ border-radius: 15px;
36
+ cursor: pointer;
37
+ transition: all 0.3s ease;
38
+ box-shadow: 0 2px 4px rgba(0,0,0,0.05);
39
+ }
40
+
41
+ .upload-box:hover {
42
+ border-color: var(--primary-color);
43
+ transform: translateY(-2px);
44
+ }
45
+
46
+ .card-preview {
47
+ max-width: 100%;
48
+ height: auto;
49
+ margin-bottom: 20px;
50
+ border-radius: 10px;
51
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
52
+ }
53
+
54
+ .upload-icon {
55
+ font-size: 3rem;
56
+ color: var(--primary-color);
57
+ margin-bottom: 15px;
58
+ }
59
+
60
+ #resultCard {
61
+ display: none;
62
+ border-radius: 15px;
63
+ overflow: hidden;
64
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
65
+ margin-top: 20px;
66
+ animation: slideUp 0.3s ease;
67
+ }
68
+
69
+ .card-header {
70
+ background-color: var(--primary-color);
71
+ color: white;
72
+ padding: 15px;
73
+ }
74
+
75
+ .info-item {
76
+ padding: 12px;
77
+ border-bottom: 1px solid #eee;
78
+ transition: background-color 0.2s ease;
79
+ }
80
+
81
+ .info-item:last-child {
82
+ border-bottom: none;
83
+ }
84
+
85
+ .info-item:hover {
86
+ background-color: #f8f9fa;
87
+ }
88
+
89
+ .info-label {
90
+ color: var(--secondary-color);
91
+ font-weight: 600;
92
+ margin-bottom: 4px;
93
+ }
94
+
95
+ .info-value {
96
+ color: #333;
97
+ word-break: break-word;
98
+ }
99
+
100
+ #errorAlert {
101
+ border-radius: 10px;
102
+ margin-top: 20px;
103
+ animation: shake 0.5s ease;
104
+ }
105
+
106
+ @media (max-width: 768px) {
107
+ .container {
108
+ padding: 10px;
109
+ }
110
+
111
+ .upload-box {
112
+ padding: 20px 15px;
113
+ margin: 10px;
114
+ }
115
+
116
+ .info-item {
117
+ padding: 15px;
118
+ }
119
+
120
+ .navbar-brand {
121
+ font-size: 1.2rem;
122
+ }
123
+
124
+ .nav-link {
125
+ padding: 0.5rem 0;
126
+ }
127
+
128
+ h2 {
129
+ font-size: 1.5rem;
130
+ }
131
+ }
132
+
133
+ @keyframes slideUp {
134
+ from {
135
+ opacity: 0;
136
+ transform: translateY(20px);
137
+ }
138
+ to {
139
+ opacity: 1;
140
+ transform: translateY(0);
141
+ }
142
+ }
143
+
144
+ @keyframes shake {
145
+ 0%, 100% { transform: translateX(0); }
146
+ 25% { transform: translateX(-10px); }
147
+ 75% { transform: translateX(10px); }
148
+ }
149
+
150
+ /* Loading animation */
151
+ .loading-spinner {
152
+ display: none;
153
+ width: 40px;
154
+ height: 40px;
155
+ margin: 20px auto;
156
+ border: 4px solid #f3f3f3;
157
+ border-top: 4px solid var(--primary-color);
158
+ border-radius: 50%;
159
+ animation: spin 1s linear infinite;
160
+ }
161
+
162
+ @keyframes spin {
163
+ 0% { transform: rotate(0deg); }
164
+ 100% { transform: rotate(360deg); }
165
+ }
166
+ </style>
167
+ </head>
168
+ <body>
169
+ <!-- Navigation -->
170
+ <nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top mb-4">
171
+ <div class="container">
172
+ <a class="navbar-brand" href="/">
173
+ <i class="fas fa-id-card me-2"></i>
174
+ Card Scanner
175
+ </a>
176
+ <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
177
+ <span class="navbar-toggler-icon"></span>
178
+ </button>
179
+ <div class="collapse navbar-collapse" id="navbarNav">
180
+ <ul class="navbar-nav ms-auto">
181
+ <li class="nav-item">
182
+ <a class="nav-link active" href="/"><i class="fas fa-home me-1"></i>Home</a>
183
+ </li>
184
+ <li class="nav-item">
185
+ <a class="nav-link" href="#" id="historyBtn"><i class="fas fa-history me-1"></i>History</a>
186
+ </li>
187
+ <li class="nav-item">
188
+ <a class="nav-link" href="#" id="helpBtn"><i class="fas fa-question-circle me-1"></i>Help</a>
189
+ </li>
190
+ </ul>
191
+ </div>
192
+ </div>
193
+ </nav>
194
+
195
+ <div class="container py-3">
196
+ <div class="row justify-content-center">
197
+ <div class="col-md-8">
198
+ <div class="text-center mb-4">
199
+ <h2 class="fw-bold">Scan Business Card</h2>
200
+ <p class="text-muted">Upload a business card image to extract information</p>
201
+ </div>
202
+
203
+ <div class="upload-box mb-4 shadow-sm" onclick="document.getElementById('fileInput').click()">
204
+ <img src="" id="preview" class="card-preview rounded" style="display: none;">
205
+ <div id="uploadPrompt">
206
+ <i class="fas fa-cloud-upload-alt upload-icon"></i>
207
+ <h4 class="mb-2">Click or Drag & Drop</h4>
208
+ <p class="text-muted mb-0">Supported formats: JPG, JPEG, PNG</p>
209
+ </div>
210
+ <input type="file" id="fileInput" accept=".jpg,.jpeg,.png" class="d-none">
211
+ </div>
212
+
213
+ <div class="loading-spinner" id="loadingSpinner"></div>
214
+
215
+ <div class="card shadow-sm" id="resultCard">
216
+ <div class="card-header d-flex align-items-center">
217
+ <i class="fas fa-check-circle me-2 text-success"></i>
218
+ <h5 class="mb-0">Extracted Information</h5>
219
+ </div>
220
+ <div class="card-body p-0">
221
+ <div class="info-item">
222
+ <div class="info-label"><i class="fas fa-building me-2"></i>Company Name</div>
223
+ <div class="info-value" id="companyName">-</div>
224
+ </div>
225
+ <div class="info-item">
226
+ <div class="info-label"><i class="fas fa-envelope me-2"></i>Email</div>
227
+ <div class="info-value" id="email">-</div>
228
+ </div>
229
+ <div class="info-item">
230
+ <div class="info-label"><i class="fas fa-phone me-2"></i>Contact</div>
231
+ <div class="info-value" id="contactNumber">-</div>
232
+ </div>
233
+ <div class="info-item">
234
+ <div class="info-label"><i class="fas fa-globe me-2"></i>Website</div>
235
+ <div class="info-value" id="website">-</div>
236
+ </div>
237
+ <div class="info-item">
238
+ <div class="info-label"><i class="fas fa-map-marker-alt me-2"></i>Address</div>
239
+ <div class="info-value" id="address">-</div>
240
+ </div>
241
+ </div>
242
+ </div>
243
+
244
+ <div class="alert alert-danger shadow-sm" id="errorAlert" style="display: none;">
245
+ </div>
246
+ </div>
247
+ </div>
248
+ </div>
249
+
250
+ <!-- Bootstrap Bundle with Popper -->
251
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
252
+ <!-- Font Awesome -->
253
+ <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
254
+
255
+ <script>
256
+ const fileInput = document.getElementById('fileInput');
257
+ const preview = document.getElementById('preview');
258
+ const uploadPrompt = document.getElementById('uploadPrompt');
259
+ const resultCard = document.getElementById('resultCard');
260
+ const errorAlert = document.getElementById('errorAlert');
261
+ const loadingSpinner = document.getElementById('loadingSpinner');
262
+
263
+ fileInput.addEventListener('change', function(e) {
264
+ const file = e.target.files[0];
265
+ if (file) {
266
+ // Show image preview
267
+ const reader = new FileReader();
268
+ reader.onload = function(e) {
269
+ preview.src = e.target.result;
270
+ preview.style.display = 'block';
271
+ uploadPrompt.style.display = 'none';
272
+ }
273
+ reader.readAsDataURL(file);
274
+
275
+ // Upload and process the image
276
+ const formData = new FormData();
277
+ formData.append('file', file);
278
+
279
+ fetch('/process_card', {
280
+ method: 'POST',
281
+ body: formData
282
+ })
283
+ .then(response => response.json())
284
+ .then(data => {
285
+ if (data.error) {
286
+ throw new Error(data.error);
287
+ }
288
+
289
+ // Display results
290
+ const card = data.businessCard;
291
+ document.getElementById('companyName').textContent = card.companyName || '-';
292
+ document.getElementById('email').textContent = card.email || '-';
293
+ document.getElementById('contactNumber').textContent = card.contactNumber || '-';
294
+ document.getElementById('website').textContent = card.website || '-';
295
+ document.getElementById('address').textContent = card.address || '-';
296
+
297
+ resultCard.style.display = 'block';
298
+ errorAlert.style.display = 'none';
299
+ loadingSpinner.style.display = 'none';
300
+ })
301
+ .catch(error => {
302
+ errorAlert.textContent = error.message;
303
+ errorAlert.style.display = 'block';
304
+ resultCard.style.display = 'none';
305
+ loadingSpinner.style.display = 'none';
306
+ });
307
+
308
+ // Show loading spinner
309
+ loadingSpinner.style.display = 'block';
310
+ loadingSpinner.innerHTML = '<img src="https://i.imgur.com/8mBjB77.gif">';
311
+ }
312
+ });
313
+ </script>
314
+ </body>
315
+ </html>