Hugging Face's logo

Spaces:
Robertogdl
/
faceseeker-pro
Running

App Files Community
Robertogdl commited on
Commit
ad8d311
·
verified ·
1 Parent(s): 48f7cdd

Usa deepseek para crear una app funcional para buscar personas en internet usando una foto de su rostro

Browse files
Files changed (2) hide show
  1. README.md +8 -5
  2. index.html +410 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Faceseeker Pro
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: FaceSeeker Pro 🔍
3
+ colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
index.html CHANGED
@@ -1,19 +1,410 @@
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>FaceSeeker Pro - AI Facial Recognition Search</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <script src="https://unpkg.com/feather-icons"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+
15
+ :root {
16
+ --primary: #6366f1;
17
+ --secondary: #10b981;
18
+ }
19
+
20
+ body {
21
+ font-family: 'Inter', sans-serif;
22
+ }
23
+
24
+ .bg-primary-500 { background-color: var(--primary); }
25
+ .bg-secondary-500 { background-color: var(--secondary); }
26
+ .text-primary-500 { color: var(--primary); }
27
+ .text-secondary-500 { color: var(--secondary); }
28
+ .border-primary-500 { border-color: var(--primary); }
29
+ .border-secondary-500 { border-color: var(--secondary); }
30
+
31
+ .upload-area {
32
+ border: 2px dashed #d1d5db;
33
+ transition: all 0.3s ease;
34
+ }
35
+
36
+ .upload-area.dragover {
37
+ border-color: var(--primary);
38
+ background-color: rgba(99, 102, 241, 0.05);
39
+ }
40
+
41
+ .result-card {
42
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
43
+ }
44
+
45
+ .result-card:hover {
46
+ transform: translateY(-5px);
47
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
48
+ }
49
+
50
+ .confidence-bar {
51
+ background: linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
52
+ }
53
+
54
+ .loading-spinner {
55
+ border: 3px solid #f3f4f6;
56
+ border-top: 3px solid var(--primary);
57
+ border-radius: 50%;
58
+ animation: spin 1s linear infinite;
59
+ }
60
+
61
+ @keyframes spin {
62
+ 0% { transform: rotate(0deg); }
63
+ 100% { transform: rotate(360deg); }
64
+ }
65
+
66
+ .platform-icon {
67
+ width: 24px;
68
+ height: 24px;
69
+ border-radius: 4px;
70
+ display: flex;
71
+ align-items: center;
72
+ justify-content: center;
73
+ font-size: 12px;
74
+ font-weight: 600;
75
+ }
76
+ </style>
77
+ </head>
78
+ <body class="bg-gray-50 min-h-screen">
79
+ <!-- Animated Background -->
80
+ <div id="vanta-bg" class="fixed inset-0 z-0"></div>
81
+
82
+ <!-- Main Content -->
83
+ <div class="relative z-10 min-h-screen flex flex-col">
84
+ <!-- Header -->
85
+ <header class="bg-white/80 backdrop-blur-lg border-b border-gray-200 sticky top-0 z-20">
86
+ <div class="container mx-auto px-4 py-4">
87
+ <div class="flex items-center justify-between">
88
+ <div class="flex items-center space-x-3">
89
+ <div class="w-10 h-10 bg-primary-500 rounded-lg flex items-center justify-center">
90
+ <i data-feather="search" class="text-white"></i>
91
+ </div>
92
+ <h1 class="text-2xl font-bold text-gray-900">FaceSeeker Pro</h1>
93
+ </div>
94
+ <nav class="hidden md:flex space-x-6">
95
+ <a href="#" class="text-gray-700 hover:text-primary-500 font-medium">Home</a>
96
+ <a href="#" class="text-gray-700 hover:text-primary-500 font-medium">How It Works</a>
97
+ <a href="#" class="text-gray-700 hover:text-primary-500 font-medium">Privacy</a>
98
+ <a href="#" class="text-gray-700 hover:text-primary-500 font-medium">Contact</a>
99
+ </nav>
100
+ <button class="md:hidden">
101
+ <i data-feather="menu" class="text-gray-700"></i>
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </header>
106
+
107
+ <!-- Hero Section -->
108
+ <section class="flex-1 flex items-center justify-center py-12 px-4">
109
+ <div class="max-w-4xl mx-auto text-center">
110
+ <h2 class="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
111
+ Find Anyone with Just a <span class="text-primary-500">Photo</span>
112
+ </h2>
113
+ <p class="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
114
+ Upload a facial photograph and let our advanced AI search across multiple platforms to find potential matches with confidence scores.
115
+ </p>
116
+
117
+ <!-- Upload Section -->
118
+ <div class="bg-white/80 backdrop-blur-lg rounded-2xl shadow-xl p-8 mb-8">
119
+ <div id="uploadArea" class="upload-area rounded-xl p-8 text-center cursor-pointer">
120
+ <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
121
+ <i data-feather="upload" class="text-primary-500 w-8 h-8"></i>
122
+ </div>
123
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Upload Facial Photo</h3>
124
+ <p class="text-gray-600 mb-4">Drag & drop your image or click to browse</p>
125
+ <input type="file" id="fileInput" class="hidden" accept="image/*">
126
+ <button onclick="document.getElementById('fileInput').click()" class="bg-primary-500 text-white px-6 py-3 rounded-lg font-medium hover:bg-primary-600 transition-colors">
127
+ Choose File
128
+ </button>
129
+ <p class="text-sm text-gray-500 mt-4">Supported formats: JPG, PNG, WEBP • Max size: 10MB</p>
130
+ </div>
131
+
132
+ <!-- Preview Section -->
133
+ <div id="previewSection" class="hidden mt-6">
134
+ <div class="flex items-center justify-between mb-4">
135
+ <h4 class="text-lg font-semibold text-gray-900">Image Preview</h4>
136
+ <button onclick="clearUpload()" class="text-red-500 hover:text-red-700">
137
+ <i data-feather="x" class="w-5 h-5"></i>
138
+ </button>
139
+ </div>
140
+ <div class="flex flex-col md:flex-row items-center gap-6">
141
+ <div class="relative">
142
+ <img id="imagePreview" class="w-48 h-48 object-cover rounded-lg shadow-md">
143
+ <div class="absolute inset-0 bg-black bg-opacity-50 rounded-lg flex items-center justify-center hidden" id="processingOverlay">
144
+ <div class="loading-spinner w-8 h-8"></div>
145
+ </div>
146
+ </div>
147
+ <div class="flex-1">
148
+ <div class="mb-4">
149
+ <label class="block text-sm font-medium text-gray-700 mb-2">Search Platforms</label>
150
+ <div class="flex flex-wrap gap-2">
151
+ <label class="inline-flex items-center">
152
+ <input type="checkbox" class="rounded border-gray-300 text-primary-500" checked>
153
+ <span class="ml-2 text-sm">Social Media</span>
154
+ </label>
155
+ <label class="inline-flex items-center">
156
+ <input type="checkbox" class="rounded border-gray-300 text-primary-500" checked>
157
+ <span class="ml-2 text-sm">Professional Networks</span>
158
+ </label>
159
+ <label class="inline-flex items-center">
160
+ <input type="checkbox" class="rounded border-gray-300 text-primary-500">
161
+ <span class="ml-2 text-sm">Public Records</span>
162
+ </label>
163
+ </div>
164
+ </div>
165
+ <button onclick="startSearch()" class="w-full bg-primary-500 text-white py-3 rounded-lg font-medium hover:bg-primary-600 transition-colors flex items-center justify-center gap-2">
166
+ <i data-feather="search" class="w-5 h-5"></i>
167
+ Start Deep Search
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Features Grid -->
175
+ <div class="grid md:grid-cols-3 gap-6 mb-12">
176
+ <div class="bg-white/80 backdrop-blur-lg rounded-xl p-6 text-center">
177
+ <div class="w-12 h-12 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4">
178
+ <i data-feather="shield" class="text-secondary-500"></i>
179
+ </div>
180
+ <h4 class="font-semibold text-gray-900 mb-2">Secure & Private</h4>
181
+ <p class="text-gray-600 text-sm">Your data is encrypted and never stored on our servers</p>
182
+ </div>
183
+ <div class="bg-white/80 backdrop-blur-lg rounded-xl p-6 text-center">
184
+ <div class="w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center mx-auto mb-4">
185
+ <i data-feather="zap" class="text-primary-500"></i>
186
+ </div>
187
+ <h4 class="font-semibold text-gray-900 mb-2">AI-Powered</h4>
188
+ <p class="text-gray-600 text-sm">Advanced facial recognition with DeepSeek technology</p>
189
+ </div>
190
+ <div class="bg-white/80 backdrop-blur-lg rounded-xl p-6 text-center">
191
+ <div class="w-12 h-12 bg-secondary-100 rounded-full flex items-center justify-center mx-auto mb-4">
192
+ <i data-feather="globe" class="text-secondary-500"></i>
193
+ </div>
194
+ <h4 class="font-semibold text-gray-900 mb-2">Multi-Platform</h4>
195
+ <p class="text-gray-600 text-sm">Search across dozens of online platforms simultaneously</p>
196
+ </div>
197
+ </div>
198
+ </div>
199
+ </section>
200
+
201
+ <!-- Results Section -->
202
+ <section id="resultsSection" class="hidden bg-white/90 backdrop-blur-lg py-12 px-4">
203
+ <div class="container mx-auto max-w-6xl">
204
+ <div class="flex items-center justify-between mb-8">
205
+ <h2 class="text-3xl font-bold text-gray-900">Search Results</h2>
206
+ <div class="flex items-center gap-4">
207
+ <span class="text-sm text-gray-600">Sort by:</span>
208
+ <select class="border border-gray-300 rounded-lg px-3 py-2 text-sm">
209
+ <option>Confidence Score</option>
210
+ <option>Platform</option>
211
+ <option>Recency</option>
212
+ </select>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Results Grid -->
217
+ <div id="resultsGrid" class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
218
+ <!-- Results will be populated here -->
219
+ </div>
220
+
221
+ <!-- Loading State -->
222
+ <div id="loadingState" class="hidden text-center py-12">
223
+ <div class="loading-spinner w-12 h-12 mx-auto mb-4"></div>
224
+ <p class="text-gray-600">Searching across platforms...</p>
225
+ </div>
226
+
227
+ <!-- Error State -->
228
+ <div id="errorState" class="hidden text-center py-12">
229
+ <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-4">
230
+ <i data-feather="alert-triangle" class="text-red-500"></i>
231
+ </div>
232
+ <h3 class="text-xl font-semibold text-gray-900 mb-2">Search Failed</h3>
233
+ <p class="text-gray-600 mb-4" id="errorMessage"></p>
234
+ <button onclick="retrySearch()" class="bg-primary-500 text-white px-6 py-2 rounded-lg font-medium">
235
+ Try Again
236
+ </button>
237
+ </div>
238
+ </div>
239
+ </section>
240
+
241
+ <!-- Footer -->
242
+ <footer class="bg-gray-900 text-white py-8 mt-auto">
243
+ <div class="container mx-auto px-4 text-center">
244
+ <p class="text-gray-400">&copy; 2024 FaceSeeker Pro. All rights reserved.</p>
245
+ <div class="flex justify-center space-x-6 mt-4">
246
+ <a href="#" class="text-gray-400 hover:text-white">Privacy Policy</a>
247
+ <a href="#" class="text-gray-400 hover:text-white">Terms of Service</a>
248
+ <a href="#" class="text-gray-400 hover:text-white">Contact</a>
249
+ </div>
250
+ </div>
251
+ </footer>
252
+ </div>
253
+
254
+ <script>
255
+ // Initialize Vanta.js background
256
+ VANTA.NET({
257
+ el: "#vanta-bg",
258
+ mouseControls: true,
259
+ touchControls: true,
260
+ gyroControls: false,
261
+ minHeight: 200.00,
262
+ minWidth: 200.00,
263
+ scale: 1.00,
264
+ scaleMobile: 1.00,
265
+ color: 0x6366f1,
266
+ backgroundColor: 0xf8fafc,
267
+ points: 12.00,
268
+ maxDistance: 22.00,
269
+ spacing: 18.00
270
+ });
271
+
272
+ // File upload handling
273
+ const fileInput = document.getElementById('fileInput');
274
+ const uploadArea = document.getElementById('uploadArea');
275
+ const previewSection = document.getElementById('previewSection');
276
+ const imagePreview = document.getElementById('imagePreview');
277
+ const resultsSection = document.getElementById('resultsSection');
278
+ const resultsGrid = document.getElementById('resultsGrid');
279
+ const loadingState = document.getElementById('loadingState');
280
+ const errorState = document.getElementById('errorState');
281
+ const processingOverlay = document.getElementById('processingOverlay');
282
+
283
+ // Drag and drop functionality
284
+ uploadArea.addEventListener('dragover', (e) => {
285
+ e.preventDefault();
286
+ uploadArea.classList.add('dragover');
287
+ });
288
+
289
+ uploadArea.addEventListener('dragleave', () => {
290
+ uploadArea.classList.remove('dragover');
291
+ });
292
+
293
+ uploadArea.addEventListener('drop', (e) => {
294
+ e.preventDefault();
295
+ uploadArea.classList.remove('dragover');
296
+ const files = e.dataTransfer.files;
297
+ if (files.length > 0) {
298
+ handleFileSelect(files[0]);
299
+ }
300
+ });
301
+
302
+ fileInput.addEventListener('change', (e) => {
303
+ if (e.target.files.length > 0) {
304
+ handleFileSelect(e.target.files[0]);
305
+ }
306
+ });
307
+
308
+ function handleFileSelect(file) {
309
+ if (!file.type.match('image.*')) {
310
+ showError('Please select a valid image file (JPG, PNG, WEBP)');
311
+ return;
312
+ }
313
+
314
+ if (file.size > 10 * 1024 * 1024) {
315
+ showError('File size must be less than 10MB');
316
+ return;
317
+ }
318
+
319
+ const reader = new FileReader();
320
+ reader.onload = (e) => {
321
+ imagePreview.src = e.target.result;
322
+ previewSection.classList.remove('hidden');
323
+ uploadArea.classList.add('hidden');
324
+ };
325
+ reader.readAsDataURL(file);
326
+ }
327
+
328
+ function clearUpload() {
329
+ fileInput.value = '';
330
+ previewSection.classList.add('hidden');
331
+ uploadArea.classList.remove('hidden');
332
+ resultsSection.classList.add('hidden');
333
+ }
334
+
335
+ function startSearch() {
336
+ processingOverlay.classList.remove('hidden');
337
+ loadingState.classList.remove('hidden');
338
+ resultsSection.classList.remove('hidden');
339
+ errorState.classList.add('hidden');
340
+
341
+ // Simulate API call delay
342
+ setTimeout(() => {
343
+ processingOverlay.classList.add('hidden');
344
+ loadingState.classList.add('hidden');
345
+ displayResults(generateMockResults());
346
+ }, 3000);
347
+ }
348
+
349
+ function retrySearch() {
350
+ startSearch();
351
+ }
352
+
353
+ function showError(message) {
354
+ errorState.classList.remove('hidden');
355
+ document.getElementById('errorMessage').textContent = message;
356
+ loadingState.classList.add('hidden');
357
+ resultsSection.classList.remove('hidden');
358
+ }
359
+
360
+ function generateMockResults() {
361
+ return [
362
+ {
363
+ name: "Alex Johnson",
364
+ confidence: 92,
365
+ platform: "LinkedIn",
366
+ image: "http://static.photos/people/200x200/1",
367
+ profileUrl: "#",
368
+ lastSeen: "2 days ago"
369
+ },
370
+ {
371
+ name: "Alexandra Johnson",
372
+ confidence: 87,
373
+ platform: "Facebook",
374
+ image: "http://static.photos/people/200x200/2",
375
+ profileUrl: "#",
376
+ lastSeen: "1 week ago"
377
+ },
378
+ {
379
+ name: "Alex J.",
380
+ confidence: 78,
381
+ platform: "Instagram",
382
+ image: "http://static.photos/people/200x200/3",
383
+ profileUrl: "#",
384
+ lastSeen: "3 days ago"
385
+ },
386
+ {
387
+ name: "A. Johnson",
388
+ confidence: 65,
389
+ platform: "Twitter",
390
+ image: "http://static.photos/people/200x200/4",
391
+ profileUrl: "#",
392
+ lastSeen: "1 month ago"
393
+ },
394
+ {
395
+ name: "Alex J. Smith",
396
+ confidence: 58,
397
+ platform: "GitHub",
398
+ image: "http://static.photos/people/200x200/5",
399
+ profileUrl: "#",
400
+ lastSeen: "2 weeks ago"
401
+ },
402
+ {
403
+ name: "Johnson Alex",
404
+ confidence: 45,
405
+ platform: "Reddit",
406
+ image: "http://static.photos/people/200x200/6",
407
+ profileUrl: "#",
408
+ last
409
+ </body>
410
+ </html>