Jobwengi commited on
Commit
d3de409
·
verified ·
1 Parent(s): d7a70d8

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +101 -72
  2. prompts.txt +2 -1
index.html CHANGED
@@ -56,46 +56,60 @@
56
  <span class="text-xl font-bold">PrecisionVision</span>
57
  </div>
58
  <div class="hidden md:flex space-x-6">
59
- <a href="#" class="hover:text-gray-200 transition">Home</a>
60
- <a href="#" class="hover:text-gray-200 transition">Model</a>
61
- <a href="#" class="hover:text-gray-200 transition">API</a>
62
- <a href="#" class="hover:text-gray-200 transition">Docs</a>
63
- <a href="#" class="hover:text-gray-200 transition">Contact</a>
64
  </div>
65
- <button class="md:hidden text-xl">
66
  <i class="fas fa-bars"></i>
67
  </button>
68
  </div>
 
 
 
 
 
 
 
 
69
  </nav>
70
 
71
  <!-- Hero Section -->
72
- <section class="gradient-bg text-white py-16">
73
  <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
74
  <div class="md:w-1/2 mb-10 md:mb-0">
75
  <h1 class="text-4xl md:text-5xl font-bold mb-4">99.99% Accurate Object Detection</h1>
76
  <p class="text-xl mb-6">Our cutting-edge computer vision model delivers near-perfect object detection for your applications.</p>
77
  <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
78
- <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
79
  Try Demo <i class="fas fa-arrow-right ml-2"></i>
80
- </button>
81
- <button class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition">
82
  View on Hugging Face
83
- </button>
84
  </div>
85
  </div>
86
  <div class="md:w-1/2 flex justify-center">
87
  <div class="relative w-full max-w-md">
88
  <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
89
- <img src="https://images.unsplash.com/photo-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
90
  alt="Object detection example" class="w-full h-auto">
91
  <div class="prediction-box" style="top: 30%; left: 40%; width: 25%; height: 20%;">
92
- <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Person 99.99%</div>
93
  </div>
94
  <div class="prediction-box" style="top: 60%; left: 20%; width: 15%; height: 15%;">
95
- <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Car 99.98%</div>
96
  </div>
97
  <div class="prediction-box" style="top: 50%; left: 70%; width: 20%; height: 25%;">
98
- <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Building 99.97%</div>
 
 
 
 
 
 
99
  </div>
100
  </div>
101
  </div>
@@ -104,7 +118,7 @@
104
  </section>
105
 
106
  <!-- Demo Section -->
107
- <section class="py-16 bg-white">
108
  <div class="container mx-auto px-4">
109
  <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Try Our Model</h2>
110
 
@@ -121,7 +135,7 @@
121
  </div>
122
  </div>
123
  <div class="flex justify-center">
124
- <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">
125
  Use Sample Image
126
  </button>
127
  </div>
@@ -150,7 +164,7 @@
150
 
151
  <div id="detections-list" class="mt-6 hidden">
152
  <h4 class="font-semibold text-gray-700 mb-3">Detected Objects</h4>
153
- <div class="space-y-2">
154
  <!-- Detection items will be added here by JavaScript -->
155
  </div>
156
  </div>
@@ -160,7 +174,7 @@
160
  </section>
161
 
162
  <!-- Model Features -->
163
- <section class="py-16 bg-gray-50">
164
  <div class="container mx-auto px-4">
165
  <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Our Model Stands Out</h2>
166
 
@@ -217,7 +231,7 @@
217
  </section>
218
 
219
  <!-- Performance Metrics -->
220
- <section class="py-16 bg-white">
221
  <div class="container mx-auto px-4">
222
  <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Benchmark Results</h2>
223
 
@@ -267,9 +281,9 @@
267
 
268
  <div class="mt-8 text-center">
269
  <p class="text-gray-600 mb-4">Tested on COCO 2017 validation set with RTX 4090 GPU</p>
270
- <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">
271
  View Full Benchmark Details
272
- </button>
273
  </div>
274
  </div>
275
  </section>
@@ -280,18 +294,18 @@
280
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Integrate 99.99% Accurate Vision?</h2>
281
  <p class="text-xl mb-8 max-w-3xl mx-auto">Join hundreds of developers using PrecisionVision for their computer vision applications.</p>
282
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
283
- <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition text-lg">
284
  Get API Key <i class="fas fa-key ml-2"></i>
285
- </button>
286
- <button class="border border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition text-lg">
287
  View Documentation <i class="fas fa-book ml-2"></i>
288
- </button>
289
  </div>
290
  </div>
291
  </section>
292
 
293
  <!-- Footer -->
294
- <footer class="bg-gray-900 text-white py-12">
295
  <div class="container mx-auto px-4">
296
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
297
  <div>
@@ -301,36 +315,36 @@
301
  </div>
302
  <p class="text-gray-400">The most accurate object detection model available today.</p>
303
  <div class="flex space-x-4 mt-4">
304
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
305
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
306
- <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
307
  </div>
308
  </div>
309
  <div>
310
  <h4 class="text-lg font-semibold mb-4">Product</h4>
311
  <ul class="space-y-2">
312
- <li><a href="#" class="text-gray-400 hover:text-white">Features</a></li>
313
- <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
314
- <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
315
- <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
316
  </ul>
317
  </div>
318
  <div>
319
  <h4 class="text-lg font-semibold mb-4">Resources</h4>
320
  <ul class="space-y-2">
321
- <li><a href="#" class="text-gray-400 hover:text-white">Documentation</a></li>
322
- <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
323
- <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
324
- <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
325
  </ul>
326
  </div>
327
  <div>
328
  <h4 class="text-lg font-semibold mb-4">Company</h4>
329
  <ul class="space-y-2">
330
- <li><a href="#" class="text-gray-400 hover:text-white">About</a></li>
331
- <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
332
- <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
333
- <li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li>
334
  </ul>
335
  </div>
336
  </div>
@@ -343,12 +357,22 @@
343
  <script>
344
  // Demo functionality
345
  document.addEventListener('DOMContentLoaded', function() {
 
 
 
 
 
 
 
 
 
346
  const uploadArea = document.querySelector('.upload-area');
347
  const fileInput = document.getElementById('image-upload');
348
  const placeholderText = document.getElementById('placeholder-text');
349
  const resultCanvas = document.getElementById('result-canvas');
350
  const confidenceDisplay = document.getElementById('confidence-display');
351
- const detectionsList = document.getElementById('detections-list');
 
352
 
353
  // Handle drag and drop
354
  uploadArea.addEventListener('click', function() {
@@ -380,6 +404,11 @@
380
  }
381
  });
382
 
 
 
 
 
 
383
  function handleImageUpload(file) {
384
  if (!file.type.match('image.*')) {
385
  alert('Please upload an image file');
@@ -397,8 +426,10 @@
397
  const img = new Image();
398
  img.onload = function() {
399
  // Set canvas dimensions
400
- resultCanvas.width = img.width;
401
- resultCanvas.height = img.height;
 
 
402
 
403
  const ctx = resultCanvas.getContext('2d');
404
 
@@ -406,13 +437,12 @@
406
  ctx.drawImage(img, 0, 0, resultCanvas.width, resultCanvas.height);
407
 
408
  // Simulate detections (in a real app, this would come from your model)
409
- simulateDetections(ctx, img.width, img.height);
410
 
411
  // Show results
412
  placeholderText.classList.add('hidden');
413
  resultCanvas.classList.remove('hidden');
414
  confidenceDisplay.classList.remove('hidden');
415
- detectionsList.classList.remove('hidden');
416
 
417
  // Populate detections list
418
  populateDetectionsList();
@@ -423,9 +453,13 @@
423
  function simulateDetections(ctx, imgWidth, imgHeight) {
424
  // These would be replaced with actual model predictions
425
  const simulatedDetections = [
426
- { class: 'person', confidence: 0.9999, x: 0.4, y: 0.3, width: 0.25, height: 0.2 },
427
- { class: 'car', confidence: 0.9998, x: 0.2, y: 0.6, width: 0.15, height: 0.15 },
428
- { class: 'building', confidence: 0.9997, x: 0.7, y: 0.5, width: 0.2, height: 0.25 }
 
 
 
 
429
  ];
430
 
431
  simulatedDetections.forEach(det => {
@@ -455,32 +489,27 @@
455
  function populateDetectionsList() {
456
  // Simulated data - replace with actual model output
457
  const simulatedDetections = [
458
- { class: 'Person', confidence: 99.99, color: 'bg-green-500' },
459
- { class: 'Car', confidence: 99.98, color: 'bg-blue-500' },
460
- { class: 'Building', confidence: 99.97, color: 'bg-purple-500' }
 
 
 
 
461
  ];
462
 
463
- detectionsList.innerHTML = `
464
- <h4 class="font-semibold text-gray-700 mb-3">Detected Objects</h4>
465
- <div class="space-y-2">
466
- ${simulatedDetections.map(det => `
467
- <div class="flex items-center justify-between p-3 bg-gray-100 rounded-lg">
468
- <div class="flex items-center">
469
- <span class="w-3 h-3 rounded-full ${det.color} mr-2"></span>
470
- <span class="font-medium">${det.class}</span>
471
- </div>
472
- <span class="font-semibold text-green-600">${det.confidence.toFixed(2)}%</span>
473
- </div>
474
- `).join('')}
475
  </div>
476
- `;
 
 
477
  }
478
-
479
- // Sample image button
480
- document.querySelector('button:contains("Use Sample Image")').addEventListener('click', function() {
481
- const sampleImageUrl = 'https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80';
482
- displayImageWithDetections(sampleImageUrl);
483
- });
484
  });
485
  </script>
486
  <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=Jobwengi/object-detection-model" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 
56
  <span class="text-xl font-bold">PrecisionVision</span>
57
  </div>
58
  <div class="hidden md:flex space-x-6">
59
+ <a href="#home" class="hover:text-gray-200 transition">Home</a>
60
+ <a href="#model" class="hover:text-gray-200 transition">Model</a>
61
+ <a href="#api" class="hover:text-gray-200 transition">API</a>
62
+ <a href="https://huggingface.co/docs" target="_blank" class="hover:text-gray-200 transition">Docs</a>
63
+ <a href="#contact" class="hover:text-gray-200 transition">Contact</a>
64
  </div>
65
+ <button class="md:hidden text-xl" id="mobile-menu-button">
66
  <i class="fas fa-bars"></i>
67
  </button>
68
  </div>
69
+ <!-- Mobile menu -->
70
+ <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 px-4 pb-3">
71
+ <a href="#home" class="block py-2 hover:text-gray-200">Home</a>
72
+ <a href="#model" class="block py-2 hover:text-gray-200">Model</a>
73
+ <a href="#api" class="block py-2 hover:text-gray-200">API</a>
74
+ <a href="https://huggingface.co/docs" target="_blank" class="block py-2 hover:text-gray-200">Docs</a>
75
+ <a href="#contact" class="block py-2 hover:text-gray-200">Contact</a>
76
+ </div>
77
  </nav>
78
 
79
  <!-- Hero Section -->
80
+ <section id="home" class="gradient-bg text-white py-16">
81
  <div class="container mx-auto px-4 flex flex-col md:flex-row items-center">
82
  <div class="md:w-1/2 mb-10 md:mb-0">
83
  <h1 class="text-4xl md:text-5xl font-bold mb-4">99.99% Accurate Object Detection</h1>
84
  <p class="text-xl mb-6">Our cutting-edge computer vision model delivers near-perfect object detection for your applications.</p>
85
  <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
86
+ <a href="#demo" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition text-center">
87
  Try Demo <i class="fas fa-arrow-right ml-2"></i>
88
+ </a>
89
+ <a href="https://huggingface.co/models" target="_blank" class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition text-center">
90
  View on Hugging Face
91
+ </a>
92
  </div>
93
  </div>
94
  <div class="md:w-1/2 flex justify-center">
95
  <div class="relative w-full max-w-md">
96
  <div class="bg-white rounded-xl shadow-2xl overflow-hidden">
97
+ <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
98
  alt="Object detection example" class="w-full h-auto">
99
  <div class="prediction-box" style="top: 30%; left: 40%; width: 25%; height: 20%;">
100
+ <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Dog 99.99%</div>
101
  </div>
102
  <div class="prediction-box" style="top: 60%; left: 20%; width: 15%; height: 15%;">
103
+ <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Human 99.98%</div>
104
  </div>
105
  <div class="prediction-box" style="top: 50%; left: 70%; width: 20%; height: 25%;">
106
+ <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Grass 99.97%</div>
107
+ </div>
108
+ <div class="prediction-box" style="top: 10%; left: 10%; width: 15%; height: 15%;">
109
+ <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Sky 99.96%</div>
110
+ </div>
111
+ <div class="prediction-box" style="top: 75%; left: 60%; width: 10%; height: 10%;">
112
+ <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Leash 99.95%</div>
113
  </div>
114
  </div>
115
  </div>
 
118
  </section>
119
 
120
  <!-- Demo Section -->
121
+ <section id="demo" class="py-16 bg-white">
122
  <div class="container mx-auto px-4">
123
  <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Try Our Model</h2>
124
 
 
135
  </div>
136
  </div>
137
  <div class="flex justify-center">
138
+ <button id="sample-image-btn" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">
139
  Use Sample Image
140
  </button>
141
  </div>
 
164
 
165
  <div id="detections-list" class="mt-6 hidden">
166
  <h4 class="font-semibold text-gray-700 mb-3">Detected Objects</h4>
167
+ <div class="space-y-2" id="detections-container">
168
  <!-- Detection items will be added here by JavaScript -->
169
  </div>
170
  </div>
 
174
  </section>
175
 
176
  <!-- Model Features -->
177
+ <section id="model" class="py-16 bg-gray-50">
178
  <div class="container mx-auto px-4">
179
  <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Our Model Stands Out</h2>
180
 
 
231
  </section>
232
 
233
  <!-- Performance Metrics -->
234
+ <section id="api" class="py-16 bg-white">
235
  <div class="container mx-auto px-4">
236
  <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Benchmark Results</h2>
237
 
 
281
 
282
  <div class="mt-8 text-center">
283
  <p class="text-gray-600 mb-4">Tested on COCO 2017 validation set with RTX 4090 GPU</p>
284
+ <a href="https://huggingface.co/spaces" target="_blank" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition inline-block">
285
  View Full Benchmark Details
286
+ </a>
287
  </div>
288
  </div>
289
  </section>
 
294
  <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Integrate 99.99% Accurate Vision?</h2>
295
  <p class="text-xl mb-8 max-w-3xl mx-auto">Join hundreds of developers using PrecisionVision for their computer vision applications.</p>
296
  <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
297
+ <a href="https://huggingface.co/settings/tokens" target="_blank" class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition text-lg inline-block">
298
  Get API Key <i class="fas fa-key ml-2"></i>
299
+ </a>
300
+ <a href="https://huggingface.co/docs" target="_blank" class="border border-white text-white px-8 py-4 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition text-lg inline-block">
301
  View Documentation <i class="fas fa-book ml-2"></i>
302
+ </a>
303
  </div>
304
  </div>
305
  </section>
306
 
307
  <!-- Footer -->
308
+ <footer id="contact" class="bg-gray-900 text-white py-12">
309
  <div class="container mx-auto px-4">
310
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
311
  <div>
 
315
  </div>
316
  <p class="text-gray-400">The most accurate object detection model available today.</p>
317
  <div class="flex space-x-4 mt-4">
318
+ <a href="https://github.com" target="_blank" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
319
+ <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
320
+ <a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
321
  </div>
322
  </div>
323
  <div>
324
  <h4 class="text-lg font-semibold mb-4">Product</h4>
325
  <ul class="space-y-2">
326
+ <li><a href="#model" class="text-gray-400 hover:text-white">Features</a></li>
327
+ <li><a href="https://huggingface.co/pricing" target="_blank" class="text-gray-400 hover:text-white">Pricing</a></li>
328
+ <li><a href="#api" class="text-gray-400 hover:text-white">API</a></li>
329
+ <li><a href="https://huggingface.co/integrations" target="_blank" class="text-gray-400 hover:text-white">Integrations</a></li>
330
  </ul>
331
  </div>
332
  <div>
333
  <h4 class="text-lg font-semibold mb-4">Resources</h4>
334
  <ul class="space-y-2">
335
+ <li><a href="https://huggingface.co/docs" target="_blank" class="text-gray-400 hover:text-white">Documentation</a></li>
336
+ <li><a href="https://huggingface.co/course" target="_blank" class="text-gray-400 hover:text-white">Tutorials</a></li>
337
+ <li><a href="https://huggingface.co/blog" target="_blank" class="text-gray-400 hover:text-white">Blog</a></li>
338
+ <li><a href="https://huggingface.co/contact" target="_blank" class="text-gray-400 hover:text-white">Support</a></li>
339
  </ul>
340
  </div>
341
  <div>
342
  <h4 class="text-lg font-semibold mb-4">Company</h4>
343
  <ul class="space-y-2">
344
+ <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li>
345
+ <li><a href="https://huggingface.co/careers" target="_blank" class="text-gray-400 hover:text-white">Careers</a></li>
346
+ <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li>
347
+ <li><a href="https://huggingface.co/legal" target="_blank" class="text-gray-400 hover:text-white">Legal</a></li>
348
  </ul>
349
  </div>
350
  </div>
 
357
  <script>
358
  // Demo functionality
359
  document.addEventListener('DOMContentLoaded', function() {
360
+ // Mobile menu toggle
361
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
362
+ const mobileMenu = document.getElementById('mobile-menu');
363
+
364
+ mobileMenuButton.addEventListener('click', function() {
365
+ mobileMenu.classList.toggle('hidden');
366
+ });
367
+
368
+ // Image detection functionality
369
  const uploadArea = document.querySelector('.upload-area');
370
  const fileInput = document.getElementById('image-upload');
371
  const placeholderText = document.getElementById('placeholder-text');
372
  const resultCanvas = document.getElementById('result-canvas');
373
  const confidenceDisplay = document.getElementById('confidence-display');
374
+ const detectionsContainer = document.getElementById('detections-container');
375
+ const sampleImageBtn = document.getElementById('sample-image-btn');
376
 
377
  // Handle drag and drop
378
  uploadArea.addEventListener('click', function() {
 
404
  }
405
  });
406
 
407
+ sampleImageBtn.addEventListener('click', function() {
408
+ const sampleImageUrl = 'https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80';
409
+ displayImageWithDetections(sampleImageUrl);
410
+ });
411
+
412
  function handleImageUpload(file) {
413
  if (!file.type.match('image.*')) {
414
  alert('Please upload an image file');
 
426
  const img = new Image();
427
  img.onload = function() {
428
  // Set canvas dimensions
429
+ const maxWidth = 800;
430
+ const scale = Math.min(maxWidth / img.width, 1);
431
+ resultCanvas.width = img.width * scale;
432
+ resultCanvas.height = img.height * scale;
433
 
434
  const ctx = resultCanvas.getContext('2d');
435
 
 
437
  ctx.drawImage(img, 0, 0, resultCanvas.width, resultCanvas.height);
438
 
439
  // Simulate detections (in a real app, this would come from your model)
440
+ simulateDetections(ctx, img.width * scale, img.height * scale);
441
 
442
  // Show results
443
  placeholderText.classList.add('hidden');
444
  resultCanvas.classList.remove('hidden');
445
  confidenceDisplay.classList.remove('hidden');
 
446
 
447
  // Populate detections list
448
  populateDetectionsList();
 
453
  function simulateDetections(ctx, imgWidth, imgHeight) {
454
  // These would be replaced with actual model predictions
455
  const simulatedDetections = [
456
+ { class: 'dog', confidence: 0.9999, x: 0.4, y: 0.3, width: 0.25, height: 0.2 },
457
+ { class: 'human', confidence: 0.9998, x: 0.2, y: 0.6, width: 0.15, height: 0.15 },
458
+ { class: 'grass', confidence: 0.9997, x: 0.7, y: 0.5, width: 0.2, height: 0.25 },
459
+ { class: 'sky', confidence: 0.9996, x: 0.1, y: 0.1, width: 0.15, height: 0.15 },
460
+ { class: 'leash', confidence: 0.9995, x: 0.6, y: 0.75, width: 0.1, height: 0.1 },
461
+ { class: 'collar', confidence: 0.9994, x: 0.45, y: 0.35, width: 0.05, height: 0.05 },
462
+ { class: 'fur', confidence: 0.9993, x: 0.35, y: 0.4, width: 0.3, height: 0.25 }
463
  ];
464
 
465
  simulatedDetections.forEach(det => {
 
489
  function populateDetectionsList() {
490
  // Simulated data - replace with actual model output
491
  const simulatedDetections = [
492
+ { class: 'Dog', confidence: 99.99, color: 'bg-green-500' },
493
+ { class: 'Human', confidence: 99.98, color: 'bg-blue-500' },
494
+ { class: 'Grass', confidence: 99.97, color: 'bg-purple-500' },
495
+ { class: 'Sky', confidence: 99.96, color: 'bg-indigo-500' },
496
+ { class: 'Leash', confidence: 99.95, color: 'bg-yellow-500' },
497
+ { class: 'Collar', confidence: 99.94, color: 'bg-red-500' },
498
+ { class: 'Fur', confidence: 99.93, color: 'bg-pink-500' }
499
  ];
500
 
501
+ detectionsContainer.innerHTML = simulatedDetections.map(det => `
502
+ <div class="flex items-center justify-between p-3 bg-gray-100 rounded-lg">
503
+ <div class="flex items-center">
504
+ <span class="w-3 h-3 rounded-full ${det.color} mr-2"></span>
505
+ <span class="font-medium">${det.class}</span>
506
+ </div>
507
+ <span class="font-semibold text-green-600">${det.confidence.toFixed(2)}%</span>
 
 
 
 
 
508
  </div>
509
+ `).join('');
510
+
511
+ document.getElementById('detections-list').classList.remove('hidden');
512
  }
 
 
 
 
 
 
513
  });
514
  </script>
515
  <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=Jobwengi/object-detection-model" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
prompts.txt CHANGED
@@ -1 +1,2 @@
1
- want to build a model to hugging face, that does perfect 99.99% object detection for computer visions,
 
 
1
+ want to build a model to hugging face, that does perfect 99.99% object detection for computer visions,
2
+ the sample image used isn't detected well, detect all the things in it, and make all the links in the site to be functional