Hugging Face's logo

Spaces:
Brokencircut3311
/
tins
Running

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

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +621 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Tins
3
- emoji: 🐢
4
- colorFrom: pink
5
- colorTo: green
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: tins
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,621 @@
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>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>
621
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Object detection using image to text high resolution