Hugging Face's logo

Spaces:
ConiferousYogi
/
AI_Powered_Fraud_Detection_for_UID_Aadhar
Sleeping

App Files Community
ConiferousYogi commited on
Commit
b0528ea
·
verified ·
1 Parent(s): dd539bb

Upload 2 files

Browse files
Files changed (2) hide show
  1. templates/analyzing.html +67 -0
  2. templates/upload.html +426 -0
templates/analyzing.html ADDED
@@ -0,0 +1,67 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI Aadhaar Fraud Detection - Analyzing</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="{{ url_for('static', filename='css/styles.css') }}"
11
+ />
12
+ <meta http-equiv="refresh" content="3;url={{ redirect_url }}" />
13
+ </head>
14
+ <body
15
+ class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50 flex items-center justify-center"
16
+ >
17
+ <div class="text-center">
18
+ <div
19
+ class="inline-flex items-center justify-center w-20 h-20 bg-blue-600 rounded-full mb-6 animate-pulse"
20
+ >
21
+ <svg
22
+ class="h-10 w-10 text-white animate-spin"
23
+ fill="none"
24
+ stroke="currentColor"
25
+ viewBox="0 0 24 24"
26
+ >
27
+ <path
28
+ stroke-linecap="round"
29
+ stroke-linejoin="round"
30
+ stroke-width="2"
31
+ d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
32
+ />
33
+ </svg>
34
+ </div>
35
+ <h2 class="text-2xl text-slate-900 mb-2">Analyzing Aadhaar Card</h2>
36
+ <p class="text-slate-600 mb-6">
37
+ Running AI-powered fraud detection algorithms...
38
+ </p>
39
+ <div class="max-w-md mx-auto space-y-2">
40
+ <div
41
+ class="flex items-center justify-between text-sm text-slate-600 px-4 py-2 bg-white rounded-lg border border-slate-200"
42
+ >
43
+ <span>OCR Processing</span>
44
+ <span class="text-green-600">✓ Complete</span>
45
+ </div>
46
+ <div
47
+ class="flex items-center justify-between text-sm text-slate-600 px-4 py-2 bg-white rounded-lg border border-slate-200"
48
+ >
49
+ <span>QR Code Decoding</span>
50
+ <span class="text-green-600">✓ Complete</span>
51
+ </div>
52
+ <div
53
+ class="flex items-center justify-between text-sm text-slate-600 px-4 py-2 bg-white rounded-lg border border-blue-200 bg-blue-50"
54
+ >
55
+ <span>Visual Analysis</span>
56
+ <span class="text-blue-600">⟳ In Progress</span>
57
+ </div>
58
+ <div
59
+ class="flex items-center justify-between text-sm text-slate-600 px-4 py-2 bg-white rounded-lg border border-slate-200"
60
+ >
61
+ <span>Metadata Extraction</span>
62
+ <span class="text-slate-400">○ Pending</span>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ </body>
67
+ </html>
templates/upload.html ADDED
@@ -0,0 +1,426 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>AI Aadhaar Fraud Detection - Upload</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link
9
+ rel="stylesheet"
10
+ href="{{ url_for('static', filename='css/styles.css') }}"
11
+ />
12
+ </head>
13
+ <body
14
+ class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50/30 to-slate-50"
15
+ >
16
+ <!-- Header -->
17
+ <header class="border-b bg-white/80 backdrop-blur-sm sticky top-0 z-10">
18
+ <div class="container mx-auto px-6 py-4">
19
+ <div class="flex items-center gap-3">
20
+ <div class="p-2 bg-blue-600 rounded-lg">
21
+ <svg
22
+ class="h-6 w-6 text-white"
23
+ fill="none"
24
+ stroke="currentColor"
25
+ viewBox="0 0 24 24"
26
+ >
27
+ <path
28
+ stroke-linecap="round"
29
+ stroke-linejoin="round"
30
+ stroke-width="2"
31
+ d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
32
+ />
33
+ </svg>
34
+ </div>
35
+ <div>
36
+ <h1 class="text-xl text-slate-900">
37
+ AI-Powered Fraud Detection for Aadhar
38
+ </h1>
39
+ <p class="text-sm text-slate-500">
40
+ Intelligent Document Verification System
41
+ </p>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </header>
46
+
47
+ <!-- Main Content -->
48
+ <main class="container mx-auto px-6 py-12">
49
+ <div class="max-w-5xl mx-auto">
50
+ <!-- Hero Section -->
51
+ <div class="text-center mb-12">
52
+ <div
53
+ class="inline-flex items-center gap-2 bg-blue-100 text-blue-700 px-4 py-2 rounded-full mb-4"
54
+ >
55
+ <svg
56
+ class="h-4 w-4"
57
+ fill="none"
58
+ stroke="currentColor"
59
+ viewBox="0 0 24 24"
60
+ >
61
+ <path
62
+ stroke-linecap="round"
63
+ stroke-linejoin="round"
64
+ stroke-width="2"
65
+ d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
66
+ />
67
+ </svg>
68
+ <span class="text-sm">Fast & Trustworthy</span>
69
+ </div>
70
+ <h2 class="text-3xl text-slate-900 mb-3">
71
+ Upload Aadhaar Card for Analysis
72
+ </h2>
73
+ <p class="text-lg text-slate-600 max-w-2xl mx-auto">
74
+ Our AI-powered system analyzes document authenticity, detects
75
+ tampering, and verifies data integrity using advanced machine
76
+ learning algorithms.
77
+ </p>
78
+ </div>
79
+
80
+ <!-- Upload Form -->
81
+ <form
82
+ id="upload-form"
83
+ action="/upload"
84
+ method="POST"
85
+ enctype="multipart/form-data"
86
+ >
87
+ <!-- Upload Cards -->
88
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
89
+ <!-- Front Card Upload -->
90
+ <div class="bg-white rounded-lg shadow-lg border border-slate-200">
91
+ <div class="p-6 border-b border-slate-200">
92
+ <h3 class="flex items-center gap-2 text-slate-900 mb-1">
93
+ <svg
94
+ class="h-5 w-5 text-blue-600"
95
+ fill="none"
96
+ stroke="currentColor"
97
+ viewBox="0 0 24 24"
98
+ >
99
+ <path
100
+ stroke-linecap="round"
101
+ stroke-linejoin="round"
102
+ stroke-width="2"
103
+ d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
104
+ />
105
+ </svg>
106
+ Front Side
107
+ </h3>
108
+ <p class="text-sm text-slate-500">
109
+ Upload the front side of the Aadhaar card
110
+ </p>
111
+ </div>
112
+ <div class="p-6">
113
+ <div
114
+ id="front-drop-zone"
115
+ class="border-2 border-dashed border-slate-300 bg-slate-50 rounded-lg p-8 text-center transition-all hover:border-blue-400 hover:bg-blue-50/50 cursor-pointer"
116
+ >
117
+ <div id="front-upload-content">
118
+ <svg
119
+ class="h-12 w-12 text-slate-400 mx-auto mb-3"
120
+ fill="none"
121
+ stroke="currentColor"
122
+ viewBox="0 0 24 24"
123
+ >
124
+ <path
125
+ stroke-linecap="round"
126
+ stroke-linejoin="round"
127
+ stroke-width="2"
128
+ d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
129
+ />
130
+ </svg>
131
+ <p class="text-sm text-slate-700 mb-1">
132
+ Drag & drop or click to upload
133
+ </p>
134
+ <p class="text-xs text-slate-500 mb-3">
135
+ PNG, JPG up to 10MB
136
+ </p>
137
+ <button
138
+ type="button"
139
+ class="inline-flex items-center px-4 py-2 border border-slate-300 rounded-lg text-sm bg-white hover:bg-slate-50 transition-colors"
140
+ onclick="event.stopPropagation(); document.getElementById('front-upload').click()"
141
+ >
142
+ Browse Files
143
+ </button>
144
+ </div>
145
+ <div id="front-file-info" class="hidden">
146
+ <svg
147
+ class="h-12 w-12 text-green-600 mx-auto mb-3"
148
+ fill="none"
149
+ stroke="currentColor"
150
+ viewBox="0 0 24 24"
151
+ >
152
+ <path
153
+ stroke-linecap="round"
154
+ stroke-linejoin="round"
155
+ stroke-width="2"
156
+ d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
157
+ />
158
+ </svg>
159
+ <p
160
+ class="text-sm text-slate-700 mb-1"
161
+ id="front-file-name"
162
+ ></p>
163
+ <p
164
+ class="text-xs text-slate-500 mb-3"
165
+ id="front-file-size"
166
+ ></p>
167
+ <button
168
+ type="button"
169
+ class="inline-flex items-center px-4 py-2 border border-slate-300 rounded-lg text-sm bg-white hover:bg-slate-50 transition-colors"
170
+ onclick="removeFrontFile(event)"
171
+ >
172
+ Remove
173
+ </button>
174
+ </div>
175
+ <input
176
+ type="file"
177
+ id="front-upload"
178
+ name="front_image"
179
+ class="hidden"
180
+ accept="image/*"
181
+ />
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <!-- Back Card Upload -->
187
+ <div class="bg-white rounded-lg shadow-lg border border-slate-200">
188
+ <div class="p-6 border-b border-slate-200">
189
+ <h3 class="flex items-center gap-2 text-slate-900 mb-1">
190
+ <svg
191
+ class="h-5 w-5 text-blue-600"
192
+ fill="none"
193
+ stroke="currentColor"
194
+ viewBox="0 0 24 24"
195
+ >
196
+ <path
197
+ stroke-linecap="round"
198
+ stroke-linejoin="round"
199
+ stroke-width="2"
200
+ d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
201
+ />
202
+ </svg>
203
+ Back Side
204
+ </h3>
205
+ <p class="text-sm text-slate-500">
206
+ Upload the back side of the Aadhaar card
207
+ </p>
208
+ </div>
209
+ <div class="p-6">
210
+ <div
211
+ id="back-drop-zone"
212
+ class="border-2 border-dashed border-slate-300 bg-slate-50 rounded-lg p-8 text-center transition-all hover:border-blue-400 hover:bg-blue-50/50 cursor-pointer"
213
+ >
214
+ <div id="back-upload-content">
215
+ <svg
216
+ class="h-12 w-12 text-slate-400 mx-auto mb-3"
217
+ fill="none"
218
+ stroke="currentColor"
219
+ viewBox="0 0 24 24"
220
+ >
221
+ <path
222
+ stroke-linecap="round"
223
+ stroke-linejoin="round"
224
+ stroke-width="2"
225
+ d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
226
+ />
227
+ </svg>
228
+ <p class="text-sm text-slate-700 mb-1">
229
+ Drag & drop or click to upload
230
+ </p>
231
+ <p class="text-xs text-slate-500 mb-3">
232
+ PNG, JPG up to 10MB
233
+ </p>
234
+ <button
235
+ type="button"
236
+ class="inline-flex items-center px-4 py-2 border border-slate-300 rounded-lg text-sm bg-white hover:bg-slate-50 transition-colors"
237
+ onclick="event.stopPropagation();document.getElementById('back-upload').click()"
238
+ >
239
+ Browse Files
240
+ </button>
241
+ </div>
242
+ <div id="back-file-info" class="hidden">
243
+ <svg
244
+ class="h-12 w-12 text-green-600 mx-auto mb-3"
245
+ fill="none"
246
+ stroke="currentColor"
247
+ viewBox="0 0 24 24"
248
+ >
249
+ <path
250
+ stroke-linecap="round"
251
+ stroke-linejoin="round"
252
+ stroke-width="2"
253
+ d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
254
+ />
255
+ </svg>
256
+ <p
257
+ class="text-sm text-slate-700 mb-1"
258
+ id="back-file-name"
259
+ ></p>
260
+ <p
261
+ class="text-xs text-slate-500 mb-3"
262
+ id="back-file-size"
263
+ ></p>
264
+ <button
265
+ type="button"
266
+ class="inline-flex items-center px-4 py-2 border border-slate-300 rounded-lg text-sm bg-white hover:bg-slate-50 transition-colors"
267
+ onclick="removeBackFile(event)"
268
+ >
269
+ Remove
270
+ </button>
271
+ </div>
272
+ <input
273
+ type="file"
274
+ id="back-upload"
275
+ name="back_image"
276
+ class="hidden"
277
+ accept="image/*"
278
+ />
279
+ </div>
280
+ </div>
281
+ </div>
282
+ </div>
283
+
284
+ <!-- Information Alert -->
285
+ <div class="mb-6 border border-blue-200 bg-blue-50 rounded-lg p-4">
286
+ <div class="flex gap-3">
287
+ <svg
288
+ class="h-4 w-4 text-blue-600 mt-0.5 flex-shrink-0"
289
+ fill="none"
290
+ stroke="currentColor"
291
+ viewBox="0 0 24 24"
292
+ >
293
+ <path
294
+ stroke-linecap="round"
295
+ stroke-linejoin="round"
296
+ stroke-width="2"
297
+ d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
298
+ />
299
+ </svg>
300
+ <p class="text-slate-700 text-sm">
301
+ All uploaded documents are processed securely. The analysis
302
+ typically takes 5-10 seconds.
303
+ </p>
304
+ </div>
305
+ </div>
306
+ <!--Check status-->
307
+ <div id="upload-status" class="text-center text-sm mt-4"></div>
308
+
309
+ <br />
310
+
311
+ <!-- Analyze Button -->
312
+ <div class="flex justify-center">
313
+ <button
314
+ type="submit"
315
+ id="analyze-btn"
316
+ class="inline-flex items-center px-8 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg shadow-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
317
+ disabled
318
+ >
319
+ <svg
320
+ class="h-5 w-5 mr-2"
321
+ fill="none"
322
+ stroke="currentColor"
323
+ viewBox="0 0 24 24"
324
+ >
325
+ <path
326
+ stroke-linecap="round"
327
+ stroke-linejoin="round"
328
+ stroke-width="2"
329
+ d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
330
+ />
331
+ </svg>
332
+ Analyze Document
333
+ </button>
334
+ </div>
335
+ </form>
336
+
337
+ <!-- Features Grid -->
338
+ <div class="grid md:grid-cols-3 gap-6 mt-16">
339
+ <div class="text-center p-6">
340
+ <div
341
+ class="inline-flex items-center justify-center w-12 h-12 bg-blue-100 rounded-lg mb-4"
342
+ >
343
+ <svg
344
+ class="h-6 w-6 text-blue-600"
345
+ fill="none"
346
+ stroke="currentColor"
347
+ viewBox="0 0 24 24"
348
+ >
349
+ <path
350
+ stroke-linecap="round"
351
+ stroke-linejoin="round"
352
+ stroke-width="2"
353
+ d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"
354
+ />
355
+ </svg>
356
+ </div>
357
+ <h3 class="text-slate-900 mb-2">AI-Powered Detection</h3>
358
+ <p class="text-sm text-slate-600">
359
+ Advanced machine learning algorithms detect subtle forgeries and
360
+ alterations
361
+ </p>
362
+ </div>
363
+ <div class="text-center p-6">
364
+ <div
365
+ class="inline-flex items-center justify-center w-12 h-12 bg-green-100 rounded-lg mb-4"
366
+ >
367
+ <svg
368
+ class="h-6 w-6 text-green-600"
369
+ fill="none"
370
+ stroke="currentColor"
371
+ viewBox="0 0 24 24"
372
+ >
373
+ <path
374
+ stroke-linecap="round"
375
+ stroke-linejoin="round"
376
+ stroke-width="2"
377
+ d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
378
+ />
379
+ </svg>
380
+ </div>
381
+ <h3 class="text-slate-900 mb-2">Multi-Layer Verification</h3>
382
+ <p class="text-sm text-slate-600">
383
+ OCR, QR code, metadata, and visual integrity checks for
384
+ comprehensive analysis
385
+ </p>
386
+ </div>
387
+ <div class="text-center p-6">
388
+ <div
389
+ class="inline-flex items-center justify-center w-12 h-12 bg-purple-100 rounded-lg mb-4"
390
+ >
391
+ <svg
392
+ class="h-6 w-6 text-purple-600"
393
+ fill="none"
394
+ stroke="currentColor"
395
+ viewBox="0 0 24 24"
396
+ >
397
+ <path
398
+ stroke-linecap="round"
399
+ stroke-linejoin="round"
400
+ stroke-width="2"
401
+ d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
402
+ />
403
+ </svg>
404
+ </div>
405
+ <h3 class="text-slate-900 mb-2">Instant Reports</h3>
406
+ <p class="text-sm text-slate-600">
407
+ Get detailed fraud analysis reports with annotated findings in
408
+ seconds
409
+ </p>
410
+ </div>
411
+ </div>
412
+ </div>
413
+ </main>
414
+
415
+ <!-- Footer -->
416
+ <footer class="border-t bg-white mt-16">
417
+ <div class="container mx-auto px-6 py-6">
418
+ <p class="text-center text-sm text-slate-500">
419
+ © 2025 AI Aadhaar Fraud Detection System. For authorized use only.
420
+ </p>
421
+ </div>
422
+ </footer>
423
+
424
+ <script src="{{ url_for('static', filename='js/upload.js') }}"></script>
425
+ </body>
426
+ </html>