Hugging Face's logo

Spaces:
Brokencircut3311
/
tins
Running

App Files Community
Brokencircut3311 commited on
Commit
4472622
·
verified ·
1 Parent(s): 797d7bc

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +644 -540
  2. prompts.txt +2 -1
index.html CHANGED
@@ -3,618 +3,722 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>VisionAI - High Resolution Object Detection</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
- <style>
10
- .drop-zone {
11
- border: 2px dashed #3b82f6;
12
- border-radius: 0.5rem;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  transition: all 0.3s ease;
14
  }
15
- .drop-zone:hover {
16
- border-color: #2563eb;
17
- background-color: #f8fafc;
 
 
 
 
 
 
18
  }
19
- .drop-zone.active {
20
- border-color: #1d4ed8;
21
- background-color: #eff6ff;
22
  }
23
- .object-tag {
24
- animation: fadeIn 0.3s ease forwards;
 
 
25
  }
26
- @keyframes fadeIn {
27
- from { opacity: 0; transform: translateY(10px); }
28
- to { opacity: 1; transform: translateY(0); }
 
 
 
 
 
 
 
 
29
  }
30
- .result-card {
31
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
32
- transition: transform 0.3s ease;
33
  }
34
- .result-card:hover {
35
- transform: translateY(-5px);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
36
  }
37
  </style>
38
  </head>
39
- <body class="bg-gray-50 min-h-screen">
40
- <!-- Navigation -->
41
- <nav class="bg-white shadow-sm">
42
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
43
- <div class="flex justify-between h-16">
44
- <div class="flex items-center">
45
- <div class="flex-shrink-0 flex items-center">
46
- <i class="fas fa-eye text-indigo-600 text-2xl mr-2"></i>
47
- <span class="text-xl font-bold text-gray-900">VisionAI</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </div>
49
  </div>
50
- <div class="hidden sm:ml-6 sm:flex sm:items-center space-x-4">
51
- <a href="#" class="text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Home</a>
52
- <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">About</a>
53
- <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Features</a>
54
- <a href="#" class="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">Contact</a>
55
- </div>
56
- <div class="-mr-2 flex items-center sm:hidden">
57
- <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100" aria-expanded="false">
58
- <span class="sr-only">Open main menu</span>
59
- <i class="fas fa-bars"></i>
60
  </button>
61
  </div>
62
  </div>
 
 
 
 
 
 
 
 
 
63
  </div>
64
- </nav>
65
-
66
- <!-- Hero Section -->
67
- <div class="relative bg-indigo-700 overflow-hidden">
68
- <div class="max-w-7xl mx-auto">
69
- <div class="relative z-10 pb-8 bg-indigo-700 sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
70
- <div class="pt-10 sm:pt-16 lg:pt-8 lg:pb-14 lg:overflow-hidden">
71
- <div class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
72
- <div class="sm:text-center lg:text-left">
73
- <h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
74
- <span class="block">Advanced Object Detection</span>
75
- <span class="block text-indigo-200">From High-Res Images</span>
76
- </h1>
77
- <p class="mt-3 text-base text-indigo-200 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
78
- Upload high-resolution images and get accurate text descriptions of detected objects with confidence scores and precise locations.
 
 
 
 
 
 
 
 
 
 
 
 
 
79
  </p>
80
- <div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
81
- <div class="rounded-md shadow">
82
- <a href="#upload-section" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
83
- Try It Now
84
- </a>
85
- </div>
86
- <div class="mt-3 sm:mt-0 sm:ml-3">
87
- <a href="#features" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
88
- Learn More
89
- </a>
90
- </div>
91
- </div>
92
  </div>
93
  </div>
94
  </div>
95
- </div>
96
- </div>
97
- <div class="lg:absolute lg:inset-y-0 lg:right-0 lg:w-1/2 hidden lg:block">
98
- <img class="h-56 w-full object-cover sm:h-72 md:h-96 lg:w-full lg:h-full" src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-1.2.1&auto=format&fit=crop&w=1900&h=600&q=80" alt="AI analyzing images">
99
- </div>
100
- </div>
101
-
102
- <!-- Upload Section -->
103
- <div id="upload-section" class="py-12 bg-white">
104
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
105
- <div class="lg:text-center">
106
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Image Analysis</h2>
107
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
108
- Upload Your High-Resolution Image
109
- </p>
110
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
111
- Our AI will detect objects with precision and provide detailed text descriptions.
112
- </p>
113
- </div>
114
-
115
- <div class="mt-10">
116
- <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
117
- <!-- Upload Area -->
118
- <div class="p-6">
119
- <div id="drop-zone" class="drop-zone h-96 flex flex-col items-center justify-center p-6 cursor-pointer">
120
- <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i>
121
- <h3 class="text-xl font-semibold text-gray-900 mb-2">Drag & Drop Image Here</h3>
122
- <p class="text-gray-500 mb-4">or click to browse</p>
123
- <input type="file" id="file-input" class="hidden" accept="image/*">
124
- <button id="upload-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
125
- Select Image
126
- </button>
127
- <p class="text-sm text-gray-500 mt-4">Supports JPG, PNG up to 20MB</p>
128
  </div>
129
- </div>
130
-
131
- <!-- Preview Area -->
132
- <div class="p-6">
133
- <div class="border rounded-lg overflow-hidden h-96 relative bg-gray-50">
134
- <div id="preview-container" class="w-full h-full flex items-center justify-center">
135
- <div class="text-center p-6">
136
- <i class="fas fa-image text-4xl text-gray-300 mb-4"></i>
137
- <p class="text-gray-500">Your image preview will appear here</p>
138
  </div>
 
139
  </div>
140
- <canvas id="image-canvas" class="absolute top-0 left-0 w-full h-full hidden"></canvas>
141
  </div>
142
- <div id="loading-indicator" class="mt-4 hidden">
143
- <div class="flex items-center">
144
- <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-600 mr-2"></div>
145
- <span class="text-gray-600">Processing image...</span>
 
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
  </div>
148
  </div>
149
  </div>
150
- </div>
151
- </div>
152
- </div>
153
-
154
- <!-- Results Section -->
155
- <div id="results-section" class="py-12 bg-gray-50 hidden">
156
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
157
- <div class="text-center mb-12">
158
- <h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
159
- Analysis Results
160
- </h2>
161
- <div class="mt-4 flex justify-center">
162
- <div class="inline-flex rounded-md shadow">
163
- <button id="download-btn" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50">
164
- <i class="fas fa-download mr-2"></i> Download Report
165
- </button>
166
  </div>
167
  </div>
168
- </div>
169
-
170
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
171
- <!-- Detected Objects -->
172
- <div class="result-card bg-white p-6 rounded-lg shadow-sm">
173
- <div class="flex items-center mb-4">
174
- <div class="p-3 rounded-full bg-indigo-50 text-indigo-600 mr-4">
175
- <i class="fas fa-tags text-lg"></i>
 
 
 
 
 
 
 
 
 
176
  </div>
177
- <h3 class="text-xl font-semibold text-gray-900">Detected Objects</h3>
178
  </div>
179
- <div id="objects-list" class="space-y-4">
180
- <!-- Objects will be added here dynamically -->
 
 
 
 
 
 
 
 
181
  </div>
182
  </div>
183
-
184
- <!-- Detailed Analysis -->
185
- <div class="result-card bg-white p-6 rounded-lg shadow-sm">
186
- <div class="flex items-center mb-4">
187
- <div class="p-3 rounded-full bg-indigo-50 text-indigo-600 mr-4">
188
- <i class="fas fa-chart-bar text-lg"></i>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
189
  </div>
190
- <h3 class="text-xl font-semibold text-gray-900">Detailed Analysis</h3>
191
  </div>
192
- <div id="analysis-info">
193
- <div class="mb-4">
194
- <h4 class="text-sm font-medium text-gray-500 mb-1">Image Dimensions</h4>
195
- <p id="dimensions" class="text-gray-900">-</p>
196
- </div>
197
- <div class="mb-4">
198
- <h4 class="text-sm font-medium text-gray-500 mb-1">Total Objects Detected</h4>
199
- <p id="object-count" class="text-gray-900">0</p>
200
- </div>
201
- <div class="mb-4">
202
- <h4 class="text-sm font-medium text-gray-500 mb-1">Processing Time</h4>
203
- <p id="processing-time" class="text-gray-900">-</p>
204
- </div>
205
- <div>
206
- <h4 class="text-sm font-medium text-gray-500 mb-1">Text Description</h4>
207
- <p id="text-description" class="text-gray-900 bg-gray-50 p-4 rounded">No description available yet.</p>
 
 
 
 
 
 
 
 
 
 
208
  </div>
209
  </div>
210
  </div>
211
- </div>
212
-
213
- <!-- Visualization -->
214
- <div class="mt-8 result-card bg-white p-6 rounded-lg shadow-sm">
215
- <div class="flex items-center mb-4">
216
- <div class="p-3 rounded-full bg-indigo-50 text-indigo-600 mr-4">
217
- <i class="fas fa-project-diagram text-lg"></i>
218
- </div>
219
- <h3 class="text-xl font-semibold text-gray-900">Objects Visualization</h3>
220
- </div>
221
- <div class="relative">
222
- <div id="visualization-container" class="border rounded-lg overflow-hidden h-96 bg-gray-50 flex items-center justify-center">
223
- <p class="text-gray-500">Visualization will appear here after processing</p>
 
 
 
224
  </div>
225
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
226
  </div>
227
- </div>
228
- </div>
229
-
230
- <!-- Features Section -->
231
- <div id="features" class="py-12 bg-white">
232
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
233
- <div class="lg:text-center">
234
- <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Features</h2>
235
- <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
236
- Powerful Image Analysis Capabilities
237
- </p>
238
- <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
239
- Our object detection system offers advanced features for precise image analysis.
240
- </p>
241
- </div>
242
-
243
- <div class="mt-10">
244
- <div class="grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
245
- <!-- Feature 1 -->
246
- <div class="result-card bg-gray-50 p-6 rounded-lg">
247
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
248
- <i class="fas fa-expand text-xl"></i>
249
- </div>
250
- <h3 class="text-lg font-medium text-gray-900 mb-2">High Resolution Support</h3>
251
- <p class="text-gray-500">
252
- Process images up to 20MP with precision, maintaining all details for accurate object detection.
253
- </p>
254
  </div>
255
-
256
- <!-- Feature 2 -->
257
- <div class="result-card bg-gray-50 p-6 rounded-lg">
258
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
259
- <i class="fas fa-list-ol text-xl"></i>
260
- </div>
261
- <h3 class="text-lg font-medium text-gray-900 mb-2">150+ Object Categories</h3>
262
- <p class="text-gray-500">
263
- Our AI recognizes a wide variety of objects from everyday items to specialized equipment.
264
- </p>
265
  </div>
266
-
267
- <!-- Feature 3 -->
268
- <div class="result-card bg-gray-50 p-6 rounded-lg">
269
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
270
- <i class="fas fa-bolt text-xl"></i>
271
- </div>
272
- <h3 class="text-lg font-medium text-gray-900 mb-2">Real-time Analysis</h3>
273
- <p class="text-gray-500">
274
- Get results in seconds with our optimized algorithms that prioritize both speed and accuracy.
275
- </p>
276
  </div>
277
-
278
- <!-- Feature 4 -->
279
- <div class="result-card bg-gray-50 p-6 rounded-lg">
280
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
281
- <i class="fas fa-project-diagram text-xl"></i>
282
- </div>
283
- <h3 class="text-lg font-medium text-gray-900 mb-2">Contextual Understanding</h3>
284
- <p class="text-gray-500">
285
- Our models understand relationships between objects for more meaningful descriptions.
286
- </p>
287
- </div>
288
-
289
- <!-- Feature 5 -->
290
- <div class="result-card bg-gray-50 p-6 rounded-lg">
291
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
292
- <i class="fas fa-chart-pie text-xl"></i>
293
- </div>
294
- <h3 class="text-lg font-medium text-gray-900 mb-2">Confidence Scoring</h3>
295
- <p class="text-gray-500">
296
- Each detection comes with a confidence score so you know how reliable the results are.
297
- </p>
298
- </div>
299
-
300
- <!-- Feature 6 -->
301
- <div class="result-card bg-gray-50 p-6 rounded-lg">
302
- <div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white mb-4">
303
- <i class="fas fa-file-export text-xl"></i>
304
- </div>
305
- <h3 class="text-lg font-medium text-gray-900 mb-2">Multiple Export Options</h3>
306
- <p class="text-gray-500">
307
- Export results as JSON, CSV, or plain text for easy integration with other systems.
308
- </p>
309
- </div>
310
- </div>
311
- </div>
312
- </div>
313
- </div>
314
-
315
- <!-- Footer -->
316
- <footer class="bg-gray-800">
317
- <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
318
- <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
319
- <div>
320
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Product</h3>
321
- <ul class="space-y-2">
322
- <li><a href="#" class="text-gray-300 hover:text-white">Features</a></li>
323
- <li><a href="#" class="text-gray-300 hover:text-white">Pricing</a></li>
324
- <li><a href="#" class="text-gray-300 hover:text-white">API</a></li>
325
- <li><a href="#" class="text-gray-300 hover:text-white">Integrations</a></li>
326
- </ul>
327
  </div>
328
- <div>
329
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Resources</h3>
330
- <ul class="space-y-2">
331
- <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li>
332
- <li><a href="#" class="text-gray-300 hover:text-white">Guides</a></li>
333
- <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
334
- <li><a href="#" class="text-gray-300 hover:text-white">Support</a></li>
335
- </ul>
336
- </div>
337
- <div>
338
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3>
339
- <ul class="space-y-2">
340
- <li><a href="#" class="text-gray-300 hover:text-white">About</a></li>
341
- <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
342
- <li><a href="#" class="text-gray-300 hover:text-white">Privacy</a></li>
343
- <li><a href="#" class="text-gray-300 hover:text-white">Terms</a></li>
344
- </ul>
345
- </div>
346
- <div>
347
- <h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3>
348
- <ul class="space-y-2">
349
- <li><a href="#" class="text-gray-300 hover:text-white">Twitter</a></li>
350
- <li><a href="#" class="text-gray-300 hover:text-white">GitHub</a></li>
351
- <li><a href="#" class="text-gray-300 hover:text-white">LinkedIn</a></li>
352
- <li><a href="#" class="text-gray-300 hover:text-white">Contact Us</a></li>
353
- </ul>
354
- </div>
355
- </div>
356
- <div class="mt-8 pt-8 border-t border-gray-700 flex flex-col md:flex-row justify-between items-center">
357
- <p class="text-gray-400 text-sm">© 2023 VisionAI. All rights reserved.</p>
358
- <div class="flex space-x-6 mt-4 md:mt-0">
359
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter text-lg"></i></a>
360
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github text-lg"></i></a>
361
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin text-lg"></i></a>
362
  </div>
363
  </div>
364
- </div>
365
- </footer>
366
-
367
  <script>
368
- document.addEventListener('DOMContentLoaded', function() {
369
- // DOM Elements
370
- const dropZone = document.getElementById('drop-zone');
371
- const fileInput = document.getElementById('file-input');
372
- const uploadBtn = document.getElementById('upload-btn');
373
- const previewContainer = document.getElementById('preview-container');
374
- const imageCanvas = document.getElementById('image-canvas');
375
- const ctx = imageCanvas.getContext('2d');
376
- const loadingIndicator = document.getElementById('loading-indicator');
377
- const resultsSection = document.getElementById('results-section');
378
- const objectsList = document.getElementById('objects-list');
379
- const dimensionsElement = document.getElementById('dimensions');
380
- const objectCountElement = document.getElementById('object-count');
381
- const processingTimeElement = document.getElementById('processing-time');
382
- const textDescriptionElement = document.getElementById('text-description');
383
- const visualizationContainer = document.getElementById('visualization-container');
384
- const downloadBtn = document.getElementById('download-btn');
385
 
386
- // Sample data for demonstration
387
- const sampleObjects = [
388
- { name: 'person', confidence: 0.95, box: [100, 100, 200, 300] },
389
- { name: 'car', confidence: 0.91, box: [300, 150, 450, 250] },
390
- { name: 'traffic light', confidence: 0.88, box: [500, 50, 520, 150] },
391
- { name: 'dog', confidence: 0.82, box: [180, 320, 250, 400] }
392
- ];
393
 
394
- // Convert box coordinates to percentage for responsive display
395
- function convertBoxToPercentage(box, imgWidth, imgHeight) {
396
- return [
397
- (box[0] / imgWidth) * 100,
398
- (box[1] / imgHeight) * 100,
399
- ((box[2] - box[0]) / imgWidth) * 100,
400
- ((box[3] - box[1]) / imgHeight) * 100
401
- ];
402
- }
403
 
404
- // Generate random color based on object name for consistent box colors
405
- function getObjectColor(name) {
406
- const colors = [
407
- '#F44336', '#E91E63', '#9C27B0', '#673AB7', '#3F51B5',
408
- '#2196F3', '#03A9F4', '#00BCD4', '#009688', '#4CAF50',
409
- '#8BC34A', '#CDDC39', '#FFC107', '#FF9800', '#FF5722'
410
- ];
411
- let hash = 0;
412
- for (let i = 0; i < name.length; i++) {
413
- hash = name.charCodeAt(i) + ((hash << 5) - hash);
414
- }
415
- return colors[Math.abs(hash) % colors.length];
416
  }
 
 
 
 
417
 
418
- // Draw bounding boxes on the canvas
419
- function drawBoundingBoxes(image, objects) {
420
- imageCanvas.width = image.width;
421
- imageCanvas.height = image.height;
422
- ctx.drawImage(image, 0, 0, imageCanvas.width, imageCanvas.height);
423
-
424
- objects.forEach(obj => {
425
- const [x, y, width, height] = obj.box;
426
- const color = getObjectColor(obj.name);
427
-
428
- // Draw box
429
- ctx.strokeStyle = color;
430
- ctx.lineWidth = 2;
431
- ctx.strokeRect(x, y, width - x, height - y);
432
-
433
- // Draw label background
434
- const text = `${obj.name} ${(obj.confidence * 100).toFixed(1)}%`;
435
- const textWidth = ctx.measureText(text).width;
436
- ctx.fillStyle = color;
437
- ctx.fillRect(x, y - 20, textWidth + 10, 20);
438
-
439
- // Draw label text
440
- ctx.fillStyle = '#ffffff';
441
- ctx.font = '14px Arial';
442
- ctx.fillText(text, x + 5, y - 5);
443
  });
 
 
 
 
 
444
 
445
- // Create visual representation for the visualization container
446
- const visualizationHTML = objects.map(obj => {
447
- const percentageBox = convertBoxToPercentage(obj.box, image.width, image.height);
448
- const color = getObjectColor(obj.name);
449
- const text = `${obj.name} ${(obj.confidence * 100).toFixed(1)}%`;
450
-
451
- return `
452
- <div class="absolute bg-opacity-20 border-2"
453
- style="left:${percentageBox[0]}%; top:${percentageBox[1]}%;
454
- width:${percentageBox[2]}%; height:${percentageBox[3]}%;
455
- border-color:${color}; background-color:${color}">
456
- <div class="text-white text-sm px-1" style="background-color:${color}">
457
- ${text}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
458
  </div>
 
459
  </div>
460
- `;
461
- }).join('');
 
 
 
 
 
 
462
 
463
- const imgSrc = imageCanvas.toDataURL('image/png');
464
- visualizationContainer.innerHTML = `
465
- <div class="relative w-full h-full overflow-hidden">
466
- <img src="${imgSrc}" class="w-full h-full object-contain" alt="Detected objects">
467
- ${visualizationHTML}
468
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
469
  `;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
470
  }
 
 
 
 
 
 
 
 
 
 
471
 
472
- // Generate text description from detected objects
473
- function generateTextDescription(objects) {
474
- if (objects.length === 0) {
475
- return "No objects were detected in the image.";
476
- }
477
-
478
- const primaryObjects = objects.filter(obj => obj.confidence > 0.8);
479
- const secondaryObjects = objects.filter(obj => obj.confidence <= 0.8);
 
 
 
 
 
 
 
 
 
 
 
 
480
 
481
- let description = "The image contains ";
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
482
 
483
- if (primaryObjects.length > 0) {
484
- const names = primaryObjects.map(obj => obj.name);
485
- description += names.join(', ');
486
- }
 
 
 
 
 
 
 
 
 
487
 
488
- if (secondaryObjects.length > 0) {
489
- description += primaryObjects.length > 0 ? " and possibly " : "";
490
- const possibleNames = secondaryObjects.map(obj => obj.name);
491
- description += possibleNames.join(', ');
492
- }
 
493
 
494
- description += ".";
 
 
495
 
496
- return description;
497
- }
498
-
499
- // Process the uploaded image
500
- function processImage(file) {
501
- if (!file.type.match('image.*')) {
502
- alert('Please select an image file.');
503
- return;
504
- }
505
-
506
- loadingIndicator.classList.remove('hidden');
507
- previewContainer.innerHTML = '<p class="text-gray-500">Processing image...</p>';
508
-
509
- const reader = new FileReader();
510
- reader.onload = function(e) {
511
- const img = new Image();
512
- img.onload = function() {
513
- // In a real app, this would be an API call to your object detection service
514
- // For this demo, we'll use sample data after a short delay
515
- setTimeout(() => {
516
- // Show the canvas with the image
517
- imageCanvas.classList.remove('hidden');
518
- drawBoundingBoxes(img, sampleObjects);
519
-
520
- // Update the UI with results
521
- dimensionsElement.textContent = `${img.width} × ${img.height} pixels`;
522
- objectCountElement.textContent = sampleObjects.length;
523
- processingTimeElement.textContent = `${(Math.random() * 500 + 300).toFixed(0)}ms`;
524
- textDescriptionElement.textContent = generateTextDescription(sampleObjects);
525
-
526
- // Populate the objects list
527
- objectsList.innerHTML = '';
528
- sampleObjects.forEach(obj => {
529
- const confidencePercent = (obj.confidence * 100).toFixed(1);
530
- const color = getObjectColor(obj.name);
531
-
532
- const objectElement = document.createElement('div');
533
- objectElement.className = 'object-tag bg-white p-4 rounded-lg border-l-4 shadow-sm';
534
- objectElement.style.borderLeftColor = color;
535
- objectElement.innerHTML = `
536
- <div class="flex justify-between items-center">
537
- <span class="font-medium">${obj.name}</span>
538
- <span class="text-xs px-2 py-1 rounded-full" style="background-color:${color + '20'}; color:${color}">
539
- ${confidencePercent}% confidence
540
- </span>
541
- </div>
542
- <div class="mt-2 text-sm text-gray-600">
543
- <div class="flex justify-between">
544
- <span>Position:</span>
545
- <span>(${obj.box[0]}, ${obj.box[1]}) to (${obj.box[2]}, ${obj.box[3]})</span>
546
- </div>
547
- </div>
548
- `;
549
- objectsList.appendChild(objectElement);
550
- });
551
-
552
- // Show the results section
553
- loadingIndicator.classList.add('hidden');
554
- resultsSection.classList.remove('hidden');
555
- resultsSection.scrollIntoView({ behavior: 'smooth' });
556
- }, 1500);
557
- };
558
- img.src = e.target.result;
559
- };
560
- reader.readAsDataURL(file);
561
- }
562
 
563
- // Event listeners
564
- uploadBtn.addEventListener('click', () => fileInput.click());
 
 
 
565
 
566
- fileInput.addEventListener('change', (e) => {
567
- if (e.target.files.length) {
568
- processImage(e.target.files[0]);
569
- }
570
- });
571
-
572
- dropZone.addEventListener('dragover', (e) => {
573
- e.preventDefault();
574
- dropZone.classList.add('active');
575
- });
576
-
577
- dropZone.addEventListener('dragleave', () => {
578
- dropZone.classList.remove('active');
579
- });
580
-
581
- dropZone.addEventListener('drop', (e) => {
582
- e.preventDefault();
583
- dropZone.classList.remove('active');
584
- if (e.dataTransfer.files.length) {
585
- processImage(e.dataTransfer.files[0]);
586
  }
587
- });
588
-
589
- dropZone.addEventListener('click', () => fileInput.click());
590
-
591
- // Download report functionality
592
- downloadBtn.addEventListener('click', () => {
593
- if (sampleObjects.length === 0) return;
594
-
595
- const report = {
596
- timestamp: new Date().toISOString(),
597
- imageDimensions: dimensionsElement.textContent,
598
- objectCount: sampleObjects.length,
599
- processingTime: processingTimeElement.textContent,
600
- textDescription: textDescriptionElement.textContent,
601
- detectedObjects: sampleObjects.map(obj => ({
602
- name: obj.name,
603
- confidence: obj.confidence,
604
- boundingBox: obj.box
605
- }))
606
- };
607
-
608
- const blob = new Blob([JSON.stringify(report, null, 2)], { type: 'application/json' });
609
- const url = URL.createObjectURL(blob);
610
- const a = document.createElement('a');
611
- a.href = url;
612
- a.download = 'visionai-object-detection-report.json';
613
- document.body.appendChild(a);
614
- a.click();
615
- document.body.removeChild(a);
616
- URL.revokeObjectURL(url);
617
- });
618
  });
619
  </script>
620
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Brokencircut3311/tins" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CyberScan Pro - Aggressive Scanner</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ cyberblue: '#0ff0fc',
15
+ cyberpurple: '#9467fe',
16
+ cyberpink: '#ff00c1',
17
+ cybergreen: '#0af060',
18
+ cyberdark: '#0b0a1d'
19
+ },
20
+ animation: {
21
+ 'pulse-fast': 'pulse 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite',
22
+ 'scan': 'scan 8s linear infinite',
23
+ },
24
+ keyframes: {
25
+ scan: {
26
+ '0%': { transform: 'translateY(-100%)' },
27
+ '100%': { transform: 'translateY(120%)' },
28
+ }
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <style type="text/css">
35
+ body {
36
+ background: linear-gradient(135deg, #0b0a1d 0%, #1c1b3a 100%);
37
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
38
+ color: #d9deea;
39
+ min-height: 100vh;
40
+ overflow-x: hidden;
41
+ }
42
+
43
+ .glow-box {
44
+ box-shadow: 0 0 15px rgba(79, 70, 229, 0.6);
45
  transition: all 0.3s ease;
46
  }
47
+
48
+ .glow-box:hover {
49
+ box-shadow: 0 0 30px rgba(79, 70, 229, 0.9);
50
+ }
51
+
52
+ .dashboard-card {
53
+ background: rgba(15, 23, 42, 0.8);
54
+ backdrop-filter: blur(6px);
55
+ border: 1px solid rgba(255, 255, 255, 0.1);
56
  }
57
+
58
+ .signal-icon {
59
+ text-shadow: 0 0 8px #0af060;
60
  }
61
+
62
+ .signal-bar {
63
+ position: relative;
64
+ overflow: hidden;
65
  }
66
+
67
+ .signal-bar::before {
68
+ content: '';
69
+ position: absolute;
70
+ top: 0;
71
+ left: 0;
72
+ right: 0;
73
+ bottom: 0;
74
+ background: linear-gradient(90deg, transparent, rgba(10, 240, 96, 0.4), transparent);
75
+ transform: translateX(-100%);
76
+ animation: scan 2s infinite;
77
  }
78
+
79
+ .cpu-overload {
80
+ animation: pulse-fast 0.8s infinite;
81
  }
82
+
83
+ .scanning-animation {
84
+ position: relative;
85
+ overflow: hidden;
86
+ }
87
+
88
+ .scanning-animation::after {
89
+ content: '';
90
+ position: absolute;
91
+ top: 0;
92
+ left: 0;
93
+ right: 0;
94
+ height: 4px;
95
+ background: linear-gradient(90deg, transparent, #9467fe, transparent);
96
+ animation: scan 1.5s linear infinite;
97
+ border-radius: 2px;
98
+ }
99
+
100
+ .device-dot {
101
+ position: absolute;
102
+ width: 12px;
103
+ height: 12px;
104
+ border-radius: 50%;
105
+ box-shadow: 0 0 10px 2px currentColor;
106
+ transform-origin: center;
107
+ }
108
+
109
+ .device-dot::after {
110
+ content: '';
111
+ position: absolute;
112
+ top: -8px;
113
+ left: -8px;
114
+ right: -8px;
115
+ bottom: -8px;
116
+ border: 2px solid currentColor;
117
+ border-radius: 50%;
118
+ opacity: 0;
119
+ animation: pulse-ripple 2s infinite linear;
120
+ }
121
+
122
+ @keyframes pulse-ripple {
123
+ 0% {
124
+ opacity: 1;
125
+ transform: scale(0.8);
126
+ }
127
+ 100% {
128
+ opacity: 0;
129
+ transform: scale(2);
130
+ }
131
+ }
132
+
133
+ .overload-icon {
134
+ animation: vibrate 0.2s infinite linear;
135
+ }
136
+
137
+ @keyframes vibrate {
138
+ 0% { transform: rotate(0deg); }
139
+ 25% { transform: rotate(5deg); }
140
+ 50% { transform: rotate(0deg); }
141
+ 75% { transform: rotate(-5deg); }
142
+ 100% { transform: rotate(0deg); }
143
+ }
144
+
145
+ .rtl-table {
146
+ direction: rtl;
147
+ overflow-x: auto;
148
+ }
149
+
150
+ .rtl-table tbody {
151
+ direction: ltr;
152
  }
153
  </style>
154
  </head>
155
+ <body>
156
+ <div class="container mx-auto px-4 py-6">
157
+ <!-- Header with scanner settings -->
158
+ <header class="mb-8 py-6 px-6 dashboard-card rounded-2xl flex flex-col lg:flex-row justify-between items-center">
159
+ <div class="w-full lg:w-1/3 mb-4 lg:mb-0">
160
+ <h1 class="text-3xl font-bold text-cyberblue flex items-center">
161
+ <i class="fas fa-wifi mr-3"></i> CyberScan <span class="text-cyberpink ml-2">Pro</span>
162
+ </h1>
163
+ <p class="text-gray-400 mt-2">Aggressive Wireless Network Scanner</p>
164
+ </div>
165
+
166
+ <div class="w-full lg:w-1/3">
167
+ <div class="flex items-center gap-4">
168
+ <div class="flex-1">
169
+ <div class="flex justify-between mb-1">
170
+ <span class="text-xs font-medium">CPU Load</span>
171
+ <span id="cpuPercentage" class="text-xs font-medium text-cybergreen">99%</span>
172
+ </div>
173
+ <div class="w-full bg-cyberdark h-2 rounded-full overflow-hidden">
174
+ <div class="bg-cybergreen h-2 rounded-full cpu-overload" style="width: 99%;">
175
+ <div class="absolute inset-0 bg-gradient-to-r from-transparent via-[#0af060] to-transparent h-full"></div>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ <div class="text-center bg-cyberdark px-4 py-2 rounded-full">
180
+ <i class="fas fa-bolt text-amber-400"></i>
181
+ <span id="tempDisplay" class="text-xs ml-1">87°C</span>
182
  </div>
183
  </div>
184
+ </div>
185
+
186
+ <div class="w-full lg:w-1/3 mt-4 lg:mt-0 flex justify-end">
187
+ <div class="space-x-3">
188
+ <button id="scanBtn" class="px-6 py-3 bg-cyberpink hover:bg-pink-600 font-semibold rounded-full transition-all duration-200 shadow-lg hover:shadow-pink-500/40">
189
+ <i class="fas fa-satellite-dish mr-2"></i>SCAN NOW
190
+ </button>
191
+ <button class="px-4 py-3 border border-gray-600 font-semibold rounded-full hover:bg-gray-800">
192
+ <i class="fas fa-cog"></i>
 
193
  </button>
194
  </div>
195
  </div>
196
+ </header>
197
+
198
+ <!-- Aggressive Scanning Overlay -->
199
+ <div id="overlay" class="fixed inset-0 z-50 pointer-events-none opacity-0">
200
+ <div class="absolute inset-0 bg-gradient-to-tr from-cyberpurple to-cyberblue opacity-5"></div>
201
+ <div class="absolute scanning-animation w-full h-0.5 bg-cyberblue shadow-lg shadow-cyan-400"></div>
202
+ <div class="device-dot" style="top: 25%; left: 20%; color: #ff00c1;"></div>
203
+ <div class="device-dot" style="top: 40%; left: 65%; color: #0af060;"></div>
204
+ <div class="device-dot" style="top: 70%; left: 45%; color: #9467fe;"></div>
205
  </div>
206
+
207
+ <!-- Main Dashboard -->
208
+ <main class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
209
+ <!-- Wi-Fi Scanner Panel -->
210
+ <section class="dashboard-card rounded-2xl p-6 scanning-animation">
211
+ <h2 class="text-xl font-bold text-cyberblue mb-4 flex items-center">
212
+ <i class="fas fa-wifi mr-3"></i> Wi-Fi Scanning
213
+ <span id="wifiCounter" class="ml-auto bg-cyberpurple bg-opacity-30 text-xs px-3 py-1 rounded-full">0 Networks</span>
214
+ </h2>
215
+
216
+ <div class="mb-4">
217
+ <div class="flex justify-between items-center mb-2">
218
+ <span class="text-cyberpurple font-medium"><i class="fas fa-network-wired mr-2"></i> Max Aggression Mode</span>
219
+ <div class="space-x-2">
220
+ <label class="relative inline-flex items-center cursor-pointer">
221
+ <input type="checkbox" value="" class="sr-only peer" checked id="wifiToggle">
222
+ <div class="w-12 h-6 bg-gray-600 rounded-full peer-checked:bg-cyberpink peer peer-checked:after:translate-x-6 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:h-5 after:w-5 after:rounded-full after:transition-all"></div>
223
+ </label>
224
+ </div>
225
+ </div>
226
+ <div class="text-xs bg-cyberdark p-3 rounded-lg">
227
+ <div class="overflow-hidden">
228
+ <p class="font-mono">
229
+ > Scanning on all available 2.4GHz, 5GHz, and 6GHz channels<br>
230
+ > Channel hopping rate: <span class="text-cyberpurple">200ms/channel</span><br>
231
+ > Sending probe requests to all SSIDs<br>
232
+ > Signal strength threshold: <span class="text-cyberpurple">-95 dBm</span><br>
233
+ > Packet injection: <span class="text-cybergreen">ACTIVE</span>
234
  </p>
 
 
 
 
 
 
 
 
 
 
 
 
235
  </div>
236
  </div>
237
  </div>
238
+
239
+ <div class="mb-4">
240
+ <h3 class="text-md font-bold mb-2">Signal Indicators</h3>
241
+ <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
242
+ <div class="bg-cyberdark py-3 px-4 rounded-xl">
243
+ <div class="text-cybergreen mb-1"><i class="fas fa-satellite-dish"></i> Strength</div>
244
+ <div class="signal-bar relative">
245
+ <div class="h-4 bg-gray-700 rounded-full overflow-hidden">
246
+ <div class="h-full bg-gradient-to-r from-cybergreen to-cyberblue" style="width: 100%"></div>
247
+ </div>
248
+ <div class="text-xs text-right mt-1">Maximum</div>
249
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
250
  </div>
251
+ <div class="bg-cyberdark py-3 px-4 rounded-xl">
252
+ <div class="text-cybergreen mb-1"><i class="fas fa-chart-simple"></i> Sensitivity</div>
253
+ <div class="signal-bar">
254
+ <div class="h-4 bg-gray-700 rounded-full overflow-hidden">
255
+ <div class="h-full bg-gradient-to-r from-cyan-400 to-cyberblue" style="width: 92%"></div>
 
 
 
 
256
  </div>
257
+ <div class="text-xs text-right mt-1">Aggressive Matrix</div>
258
  </div>
 
259
  </div>
260
+ <div class="bg-cyberdark py-3 px-4 rounded-xl">
261
+ <div class="text-cybergreen mb-1"><i class="fas fa-percent"></i> Noise Floor</div>
262
+ <div class="signal-bar">
263
+ <div class="h-4 bg-gray-700 rounded-full overflow-hidden">
264
+ <div class="h-full bg-gradient-to-r from-amber-400 to-orange-500" style="width: 67%"></div>
265
+ </div>
266
+ <div class="text-xs text-right mt-1">High</div>
267
+ </div>
268
+ </div>
269
+ <div class="bg-cyberdark py-3 px-4 rounded-xl">
270
+ <div class="text-cybergreen mb-1"><i class="fas fa-chart-line"></i> SNR Ratio</div>
271
+ <div class="signal-bar">
272
+ <div class="h-4 bg-gray-700 rounded-full overflow-hidden">
273
+ <div class="h-full bg-gradient-to-r from-cybergreen to-green-500" style="width: 84%"></div>
274
+ </div>
275
+ <div class="text-xs text-right mt-1">Good</div>
276
  </div>
277
  </div>
278
  </div>
279
  </div>
280
+
281
+ <div class="table-container max-h-80 overflow-y-auto">
282
+ <div class="rtl-table">
283
+ <table class="w-full bg-cyberdark rounded-xl overflow-hidden">
284
+ <thead class="sticky top-0 bg-cyberdark text-gray-400">
285
+ <tr>
286
+ <th class="text-left py-3 px-4">SSID</th>
287
+ <th class="text-left py-3 px-4">Security</th>
288
+ <th class="text-left py-3 px-4">Signal</th>
289
+ <th class="text-left py-3 px-4 hidden sm:table-cell">Channel</th>
290
+ </tr>
291
+ </thead>
292
+ <tbody id="wifiList">
293
+ <!-- WiFi results will populate here -->
294
+ </tbody>
295
+ </table>
296
  </div>
297
  </div>
298
+ </section>
299
+
300
+ <!-- Bluetooth Scanner Panel -->
301
+ <section class="dashboard-card rounded-2xl p-6 scanning-animation">
302
+ <h2 class="text-xl font-bold text-cyberblue mb-4 flex items-center">
303
+ <i class="fas fa-bluetooth mr-3"></i> Bluetooth Detection
304
+ <span id="btCounter" class="ml-auto bg-cyberpurple bg-opacity-30 text-xs px-3 py-1 rounded-full">0 Devices</span>
305
+ </h2>
306
+
307
+ <div class="mb-4">
308
+ <div class="flex justify-between items-center mb-2">
309
+ <span class="text-cyberpurple font-medium"><i class="fas fa-microchip mr-2"></i> Max Power Deep Scan</span>
310
+ <div class="space-x-2">
311
+ <label class="relative inline-flex items-center cursor-pointer">
312
+ <input type="checkbox" value="" class="sr-only peer" checked id="btToggle">
313
+ <div class="w-12 h-6 bg-gray-600 rounded-full peer-checked:bg-cyberpink peer peer-checked:after:translate-x-6 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:h-5 after:w-5 after:rounded-full after:transition-all"></div>
314
+ </label>
315
  </div>
 
316
  </div>
317
+ <div class="text-xs bg-cyberdark p-3 rounded-lg">
318
+ <div class="overflow-hidden">
319
+ <p class="font-mono">
320
+ > Bluetooth Classic, LE, EDR scanning<br>
321
+ > Class of device scanning: <span class="text-cybergreen">ENABLED</span><br>
322
+ > RSSI sampling: <span class="text-cyberpurple">500ms interval</span><br>
323
+ > Transmission power: <span class="text-cyberpurple">+20 dBm MAX</span><br>
324
+ > Service discovery: <span class="text-cyberpurple">ALL</span>
325
+ </p>
326
+ </div>
327
  </div>
328
  </div>
329
+
330
+ <div class="mb-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
331
+ <div class="dashboard-card rounded-xl p-4">
332
+ <div class="mx-auto w-48 h-48 relative">
333
+ <div class="absolute w-full h-full">
334
+ <!-- Radar Visualization -->
335
+ <div class="w-48 h-48 border-4 border-cyan-500 border-opacity-30 rounded-full absolute"></div>
336
+ <div class="w-36 h-36 border-4 border-cyan-500 border-opacity-50 rounded-full absolute left-6 top-6"></div>
337
+ <div class="w-24 h-24 border-4 border-cyan-500 rounded-full absolute left-12 top-12"></div>
338
+ <div class="w-12 h-12 border-4 border-cyan-500 border-opacity-80 rounded-full absolute left-18 top-18"></div>
339
+
340
+ <div class="w-48 h-48 absolute">
341
+ <div class="bt-signal-ring" style="--delay: 0s; left: 55%; top: 30%; --color: #ff00c1;"></div>
342
+ <div class="bt-signal-ring" style="--delay: 0.3s; left: 15%; top: 45%; --color: #0af060;"></div>
343
+ <div class="bt-signal-ring" style="--delay: 0.6s; left: 75%; top: 70%; --color: #9467fe;"></div>
344
+ </div>
345
+
346
+ <div id="bluetoothRadar" class="w-48 h-48">
347
+ <!-- Radar animation -->
348
+ <div class="radar-line absolute w-1 bg-cyberblue bottom-1/2 left-1/2 transform origin-bottom rotate-0 h-full">
349
+ <div class="radar-line w-1 h-1/2 bg-gradient-to-t from-cyan-500 to-cyan-900"></div>
350
+ </div>
351
+ </div>
352
+ </div>
353
  </div>
 
354
  </div>
355
+
356
+ <div>
357
+ <h3 class="text-md font-bold mb-3">Scanned Device Profile</h3>
358
+ <div class="dashboard-card p-4 rounded-xl">
359
+ <div class="flex items-start mb-3">
360
+ <div class="w-10 h-10 rounded-full bg-cyberblue bg-opacity-10 flex items-center justify-center">
361
+ <i class="fas fa-headphones text-cyberblue"></i>
362
+ </div>
363
+ <div class="ml-3">
364
+ <div class="font-bold">In-Ear Monitor Pro</div>
365
+ <div class="text-xs text-gray-400">Class 1, BR/EDR, A2DP</div>
366
+ </div>
367
+ <div class="ml-auto text-cybergreen">
368
+ <i class="fas fa-wave-square"></i> -45dBm
369
+ </div>
370
+ </div>
371
+
372
+ <div class="mt-4">
373
+ <h4 class="text-xs font-semibold mb-1">DISCOVERED SERVICES</h4>
374
+ <div class="flex flex-wrap gap-1">
375
+ <span class="px-2 py-1 bg-cyberdark text-xs rounded-md">Audio Sink</span>
376
+ <span class="px-2 py-1 bg-cyberdark text-xs rounded-md">HR Monitor</span>
377
+ <span class="px-2 py-1 bg-cyberdark text-xs rounded-md">Battery Service</span>
378
+ <span class="px-2 py-1 bg-cyberdark text-xs rounded-md">Device Info</span>
379
+ </div>
380
+ </div>
381
  </div>
382
  </div>
383
  </div>
384
+
385
+ <div class="table-container max-h-60 overflow-y-auto">
386
+ <div class="rtl-table">
387
+ <table class="w-full bg-cyberdark rounded-xl overflow-hidden">
388
+ <thead class="sticky top-0 bg-cyberdark text-gray-400">
389
+ <tr>
390
+ <th class="text-left py-3 px-4">Device Name</th>
391
+ <th class="text-left py-3 px-4">Type</th>
392
+ <th class="text-left py-3 px-4">RSSI</th>
393
+ <th class="text-left py-3 px-4 hidden sm:table-cell">UUID</th>
394
+ </tr>
395
+ </thead>
396
+ <tbody id="btList">
397
+ <!-- Bluetooth results will populate here -->
398
+ </tbody>
399
+ </table>
400
  </div>
401
  </div>
402
+ </section>
403
+ </main>
404
+
405
+ <!-- Console Output -->
406
+ <section class="dashboard-card rounded-2xl p-6 my-6">
407
+ <h2 class="text-xl font-bold text-cyberblue mb-4 flex items-center">
408
+ <i class="fas fa-terminal mr-3"></i> Scan Log
409
+ <div class="ml-auto text-xs text-gray-500" id="logCounter">0 messages</div>
410
+ </h2>
411
+
412
+ <div class="bg-cyberdark rounded-xl p-4 font-mono text-sm h-52 overflow-y-auto" id="consoleOutput">
413
+ <div class="text-cyberblue">CyberScan Pro v2.4.8 initialized</div>
414
+ <div class="text-gray-600">WARNING: Aggressive scanning mode may drain battery</div>
415
+ <div class="text-gray-600">> System ready. Capture mode: <span class="text-cybergreen">MAXIMUM</span></div>
416
+ <div class="mt-1">> Click "SCAN NOW" to begin aggressive scan</div>
417
  </div>
418
+ </section>
419
+
420
+ <!-- Footer status -->
421
+ <footer class="dashboard-card rounded-2xl p-4 mt-6">
422
+ <div class="flex flex-col sm:flex-row items-center justify-between">
423
+ <div class="flex flex-wrap gap-4">
424
+ <div class="flex items-center">
425
+ <div class="w-3 h-3 rounded-full bg-cybergreen"></div>
426
+ <span class="ml-2 text-sm">Scanning</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
427
  </div>
428
+ <div class="flex items-center">
429
+ <div class="w-3 h-3 rounded-full bg-amber-400"></div>
430
+ <span class="ml-2 text-sm">High CPU Usage</span>
 
 
 
 
 
 
 
431
  </div>
432
+ <div class="flex items-center">
433
+ <i class="fas fa-plug text-amber-400"></i>
434
+ <span class="ml-2 text-sm">Maximum Power Output</span>
 
 
 
 
 
 
 
435
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
436
  </div>
437
+ <div class="mt-3 sm:mt-0 flex items-center text-amber-400 animate-pulse">
438
+ <i class="fas fa-circle-radiation text-xl overload-icon mr-2"></i>
439
+ <span class="font-semibold">OVERLOAD PROTOCOL ACTIVE</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
440
  </div>
441
  </div>
442
+ </footer>
443
+ </div>
444
+
445
  <script>
446
+ // Functions to generate device names
447
+ function generateSSID() {
448
+ const prefixes = ['Home', 'Office', 'Free', 'Public', 'Secure', 'Hidden', 'TP-Link', 'Netgear', 'Dlink', 'ASUS', 'Guest'];
449
+ const suffixes = ['Wifi', 'Network', 'Zone', 'Spot', 'Access', 'Hub', 'Extended', '5G', 'Mesh'];
450
+ return `${prefixes[Math.floor(Math.random() * prefixes.length)]}-${suffixes[Math.floor(Math.random() * suffixes.length)]}-${Math.floor(Math.random() * 5000)}`;
451
+ }
 
 
 
 
 
 
 
 
 
 
 
452
 
453
+ function generateDeviceName() {
454
+ const types = ['Phone', 'Laptop', 'TV', 'Speaker', 'Headphones', 'Watch', 'Tablet', 'Pro Controller', 'Keyboard', 'Mouse'];
455
+ const brands = ['Apple', 'Samsung', 'Sony', 'Bose', 'Logitech', 'LG', 'Xiaomi', 'OnePlus', 'Microsoft', 'JBL'];
456
+ return `${brands[Math.floor(Math.random() * brands.length)]} ${Math.floor(Math.random() * 15)}${Math.floor(Math.random() * 10)} ${types[Math.floor(Math.random() * types.length)]}`;
457
+ }
 
 
458
 
459
+ function generateDeviceType() {
460
+ const types = ['Phone', 'Computer', 'Headset', 'Headphones', 'Keyboard', 'Mouse', 'Speaker', 'TV', 'Gamepad', 'Watch', 'IoT Device', 'Printer'];
461
+ return types[Math.floor(Math.random() * types.length)];
462
+ }
 
 
 
 
 
463
 
464
+ // Generate WiFi networks
465
+ function generateWifiNetworks(count) {
466
+ const networks = [];
467
+ const securityTypes = ['WPA2', 'WPA3', 'WPA2/WPA3', 'WEP', 'Open'];
468
+
469
+ for (let i = 0; i < count; i++) {
470
+ networks.push({
471
+ ssid: generateSSID(),
472
+ security: securityTypes[Math.floor(Math.random() * securityTypes.length)],
473
+ signal: Math.floor(Math.random() * 41) + 60, // 60-100%
474
+ channel: Math.floor(Math.random() * 11) + 1
475
+ });
476
  }
477
+
478
+ // Sort by signal strength
479
+ return networks.sort((a, b) => b.signal - a.signal);
480
+ }
481
 
482
+ // Generate Bluetooth devices
483
+ function generateBluetoothDevices(count) {
484
+ const devices = [];
485
+ const rssi = ['-35dBm', '-42dBm', '-55dBm', '-61dBm', '-70dBm', '-75dBm', '-85dBm'];
486
+
487
+ for (let i = 0; i < count; i++) {
488
+ const signal = rssi[Math.floor(Math.random() * rssi.length)];
489
+ devices.push({
490
+ name: generateDeviceName(),
491
+ type: generateDeviceType(),
492
+ rssi: signal,
493
+ uuid: `C4:XX:XX:XX:${Math.floor(Math.random() * 89 + 10).toString(16).toUpperCase()}${Math.floor(Math.random() * 89 + 10).toString(16).toUpperCase()}:XX`
 
 
 
 
 
 
 
 
 
 
 
 
 
494
  });
495
+ }
496
+
497
+ // Sort by RSSI (higher signal first)
498
+ return devices.sort((a, b) => parseInt(a.rssi) - parseInt(b.rssi));
499
+ }
500
 
501
+ // Update WiFi table
502
+ function updateWifiList(networks) {
503
+ const list = document.getElementById('wifiList');
504
+ const counter = document.getElementById('wifiCounter');
505
+
506
+ // Clear existing content
507
+ list.innerHTML = '';
508
+ counter.textContent = `${networks.length} Networks`;
509
+
510
+ // Add new networks
511
+ networks.forEach(network => {
512
+ const row = document.createElement('tr');
513
+ row.className = 'border-b border-gray-700 hover:bg-gray-800';
514
+ row.innerHTML = `
515
+ <td class="py-3 px-4">${network.ssid}</td>
516
+ <td class="py-3 px-4">
517
+ <span class="px-2 py-1 rounded-full ${
518
+ network.security === 'WPA3' ? 'bg-green-900 text-green-300' :
519
+ network.security === 'Open' ? 'bg-red-900 text-red-300' :
520
+ 'bg-purple-900 text-purple-300'
521
+ } text-xs">${network.security}</span>
522
+ </td>
523
+ <td class="py-3 px-4">
524
+ <div class="flex items-center">
525
+ <div class="w-24 bg-gray-700 h-2 rounded-full overflow-hidden mr-2">
526
+ <div class="h-full ${
527
+ network.signal > 80 ? 'bg-cybergreen' :
528
+ network.signal > 60 ? 'bg-amber-400' : 'bg-red-500'
529
+ }" style="width: ${network.signal}%"></div>
530
  </div>
531
+ <div class="text-xs">${network.signal}%</div>
532
  </div>
533
+ </td>
534
+ <td class="py-3 px-4 hidden sm:table-cell">
535
+ <span class="px-2 py-1 bg-cyberdark rounded-full text-xs">CH ${network.channel}</span>
536
+ </td>
537
+ `;
538
+ list.appendChild(row);
539
+ });
540
+ }
541
 
542
+ // Update Bluetooth table
543
+ function updateBtList(devices) {
544
+ const list = document.getElementById('btList');
545
+ const counter = document.getElementById('btCounter');
546
+
547
+ // Clear existing content
548
+ list.innerHTML = '';
549
+ counter.textContent = `${devices.length} Devices`;
550
+
551
+ // Add new devices
552
+ devices.forEach(device => {
553
+ const row = document.createElement('tr');
554
+ row.className = 'border-b border-gray-700 hover:bg-gray-800';
555
+ row.innerHTML = `
556
+ <td class="py-3 px-4">
557
+ <div class="flex items-center">
558
+ <i class="fas ${
559
+ device.type === 'Phone' ? 'fa-mobile-screen-button' :
560
+ device.type === 'Headset' || device.type === 'Headphones' ? 'fa-headphones' :
561
+ device.type === 'Speaker' ? 'fa-volume-high' :
562
+ device.type === 'TV' ? 'fa-tv' : 'fa-bluetooth'
563
+ } mr-2 text-gray-400"></i>
564
+ ${device.name}
565
+ </div>
566
+ </td>
567
+ <td class="py-3 px-4 text-xs">${device.type}</td>
568
+ <td class="py-3 px-4 ${device.rssi > -60 ? 'text-cybergreen' : 'text-amber-400'}">${device.rssi}</td>
569
+ <td class="py-3 px-4 text-xs text-gray-400 hidden sm:table-cell">${device.uuid}</td>
570
  `;
571
+ list.appendChild(row);
572
+ });
573
+ }
574
+
575
+ // Log message to console
576
+ function logToConsole(message, priority = 'log') {
577
+ const consoleOutput = document.getElementById('consoleOutput');
578
+ const counterEl = document.getElementById('logCounter');
579
+ const count = parseInt(counterEl.textContent);
580
+
581
+ const msgEl = document.createElement('div');
582
+
583
+ switch(priority) {
584
+ case 'warn':
585
+ msgEl.className = 'text-yellow-400';
586
+ break;
587
+ case 'error':
588
+ msgEl.className = 'text-red-500';
589
+ break;
590
+ case 'info':
591
+ msgEl.className = 'text-cyberblue';
592
+ break;
593
+ case 'success':
594
+ msgEl.className = 'text-cybergreen';
595
+ break;
596
+ default:
597
+ msgEl.className = 'text-gray-
598
+
599
+ 400';
600
  }
601
+
602
+ msgEl.innerHTML = `<span class="text-gray-500 mr-2">></span> ${message}`;
603
+ consoleOutput.appendChild(msgEl);
604
+
605
+ // Update counter
606
+ counterEl.textContent = `${Math.max(1, count) + 1} messages`;
607
+
608
+ // Scroll to bottom
609
+ consoleOutput.scrollTop = consoleOutput.scrollHeight;
610
+ }
611
 
612
+ // Scanning simulation
613
+ function startScanSimulation() {
614
+ const overlay = document.getElementById('overlay');
615
+ const cpuPercentage = document.getElementById('cpuPercentage');
616
+ const tempDisplay = document.getElementById('tempDisplay');
617
+ const scanBtn = document.getElementById('scanBtn');
618
+
619
+ // Show overlay and change button state
620
+ overlay.classList.remove('opacity-0');
621
+ overlay.classList.add('opacity-50');
622
+ scanBtn.innerHTML = '<i class="fas fa-circle-stop mr-2"></i>STP SCAN';
623
+ scanBtn.classList.remove('bg-cyberpink');
624
+ scanBtn.classList.add('bg-red-500', 'hover:bg-red-600');
625
+
626
+ // High CPU simulation
627
+ let cpu = 98;
628
+ let temp = 80;
629
+ const cpuInterval = setInterval(() => {
630
+ cpu = 98 + Math.random() * 2;
631
+ cpuPercentage.textContent = `${Math.round(cpu)}%`;
632
 
633
+ // Temperature effect
634
+ temp = 80 + Math.random() * 7;
635
+ tempDisplay.textContent = `${Math.round(temp)}°C`;
636
+ }, 1000);
637
+
638
+ // Start generating devices
639
+ const maxDevices = 20 + Math.floor(Math.random() * 15);
640
+ const maxNetworks = 15 + Math.floor(Math.random() * 10);
641
+
642
+ // WiFi results
643
+ let wifiResults = [];
644
+ const wifiInterval = setInterval(() => {
645
+ wifiResults = generateWifiNetworks(Math.min(wifiResults.length + 2, maxNetworks));
646
+ updateWifiList(wifiResults);
647
+ }, 800);
648
+
649
+ // Bluetooth results
650
+ let btResults = [];
651
+ const btInterval = setInterval(() => {
652
+ btResults = generateBluetoothDevices(Math.min(btResults.length + 3, maxDevices));
653
+ updateBtList(btResults);
654
+ }, 1200);
655
+
656
+ // Add logs
657
+ const logInterval = setInterval(() => {
658
+ const messages = [
659
+ 'Probe request sent: 255.255.255.255 - RESPONSE: [OK]',
660
+ 'Discovered new SSID: ' + generateSSID(),
661
+ 'BT device detected: ' + generateDeviceName(),
662
+ 'MAC: XX:XX:XX:XX:XX:XX Ch: ' + (Math.floor(Math.random() * 14) + 1),
663
+ 'Packet injection successful. Throughput: 54Mbps',
664
+ 'Channel noise level: ' + (Math.floor(Math.random() * 40) + 20) + 'dBm',
665
+ 'Scanning next channel: ' + (Math.floor(Math.random() * 11) + 1),
666
+ 'Bluetooth RSSI peak at -' + (Math.floor(Math.random() * 30) + 35) + 'dBm',
667
+ 'New network profile saved',
668
+ 'Saving capture results to trace/wireshark.pcapng'
669
+ ];
670
 
671
+ const priorities = ['log', 'success', 'info'];
672
+ const message = messages[Math.floor(Math.random() * messages.length)];
673
+ const priority = priorities[Math.floor(Math.random() * priorities.length)];
674
+ logToConsole(message, priority);
675
+ }, 700);
676
+
677
+ // Stop scan functionality
678
+ scanBtn.onclick = () => {
679
+ // Clear intervals
680
+ clearInterval(cpuInterval);
681
+ clearInterval(wifiInterval);
682
+ clearInterval(btInterval);
683
+ clearInterval(logInterval);
684
 
685
+ // Restore UI
686
+ overlay.classList.remove('opacity-50');
687
+ overlay.classList.add('opacity-0');
688
+ scanBtn.innerHTML = '<i class="fas fa-satellite-dish mr-2"></i>SCAN NOW';
689
+ scanBtn.classList.remove('bg-red-500', 'hover:bg-red-600');
690
+ scanBtn.classList.add('bg-cyberpink');
691
 
692
+ // Reset CPU display
693
+ cpuPercentage.textContent = '5%';
694
+ tempDisplay.textContent = '42°C';
695
 
696
+ // Restore click handler
697
+ scanBtn.onclick = startScanSimulation;
698
+ };
699
+ }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
700
 
701
+ // Initialize UI with some networks and devices
702
+ document.addEventListener('DOMContentLoaded', () => {
703
+ // Load some initial devices
704
+ updateWifiList(generateWifiNetworks(3));
705
+ updateBtList(generateBluetoothDevices(2));
706
 
707
+ // Add button click handlers
708
+ document.getElementById('scanBtn').addEventListener('click', startScanSimulation);
709
+
710
+ // Hardware overheat simulation effect
711
+ const tempDisplay = document.getElementById('tempDisplay');
712
+ let temp = 42;
713
+
714
+ setInterval(() => {
715
+ if (Math.random() > 0.7) {
716
+ // Random minor fluctuations when inactive
717
+ const fluctuation = Math.floor(Math.random() * 3) - 1;
718
+ temp = Math.min(Math.max(35, temp + fluctuation), 48);
719
+ tempDisplay.textContent = `${temp}°C`;
 
 
 
 
 
 
 
720
  }
721
+ }, 5000);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
722
  });
723
  </script>
724
  <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Brokencircut3311/tins" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- Object detection using image to text high resolution
 
 
1
+ Object detection using image to text high resolution
2
+ WiFi and Bluetooth detection aggressive scanning, use all CPU , maximum strength