Spaces:
Running
Running
Add 2 files
Browse files- index.html +101 -72
- 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="
|
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 |
-
<
|
79 |
Try Demo <i class="fas fa-arrow-right ml-2"></i>
|
80 |
-
</
|
81 |
-
<
|
82 |
View on Hugging Face
|
83 |
-
</
|
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-
|
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">
|
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">
|
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">
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
-
<
|
271 |
View Full Benchmark Details
|
272 |
-
</
|
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 |
-
<
|
284 |
Get API Key <i class="fas fa-key ml-2"></i>
|
285 |
-
</
|
286 |
-
<
|
287 |
View Documentation <i class="fas fa-book ml-2"></i>
|
288 |
-
</
|
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="
|
305 |
-
<a href="
|
306 |
-
<a href="
|
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="
|
314 |
-
<li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
|
315 |
-
<li><a href="
|
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="
|
322 |
-
<li><a href="
|
323 |
-
<li><a href="
|
324 |
-
<li><a href="
|
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="
|
332 |
-
<li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
|
333 |
-
<li><a href="
|
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
|
|
|
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 |
-
|
401 |
-
|
|
|
|
|
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: '
|
427 |
-
{ class: '
|
428 |
-
{ class: '
|
|
|
|
|
|
|
|
|
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: '
|
459 |
-
{ class: '
|
460 |
-
{ class: '
|
|
|
|
|
|
|
|
|
461 |
];
|
462 |
|
463 |
-
|
464 |
-
<
|
465 |
-
|
466 |
-
|
467 |
-
<
|
468 |
-
|
469 |
-
|
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
|