Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PrecisionVision - 99.99% Accurate Object Detection</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); | |
| } | |
| .prediction-box { | |
| position: absolute; | |
| border: 2px solid #4ade80; | |
| background-color: rgba(74, 222, 128, 0.2); | |
| } | |
| .confidence-meter { | |
| height: 6px; | |
| background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%); | |
| } | |
| .upload-area { | |
| border: 2px dashed #a5b4fc; | |
| transition: all 0.3s ease; | |
| } | |
| .upload-area:hover { | |
| border-color: #818cf8; | |
| background-color: rgba(129, 140, 248, 0.05); | |
| } | |
| .model-card { | |
| transition: transform 0.3s ease, box-shadow 0.3s ease; | |
| } | |
| .model-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-eye text-2xl"></i> | |
| <span class="text-xl font-bold">PrecisionVision</span> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#home" class="hover:text-gray-200 transition">Home</a> | |
| <a href="#model" class="hover:text-gray-200 transition">Model</a> | |
| <a href="#api" class="hover:text-gray-200 transition">API</a> | |
| <a href="https://huggingface.co/docs" target="_blank" class="hover:text-gray-200 transition">Docs</a> | |
| <a href="#contact" class="hover:text-gray-200 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-xl" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-indigo-700 px-4 pb-3"> | |
| <a href="#home" class="block py-2 hover:text-gray-200">Home</a> | |
| <a href="#model" class="block py-2 hover:text-gray-200">Model</a> | |
| <a href="#api" class="block py-2 hover:text-gray-200">API</a> | |
| <a href="https://huggingface.co/docs" target="_blank" class="block py-2 hover:text-gray-200">Docs</a> | |
| <a href="#contact" class="block py-2 hover:text-gray-200">Contact</a> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-4">99.99% Accurate Object Detection</h1> | |
| <p class="text-xl mb-6">Our cutting-edge computer vision model delivers near-perfect object detection for your applications.</p> | |
| <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4"> | |
| <a href="#demo" class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition text-center"> | |
| Try Demo <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <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"> | |
| View on Hugging Face | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="bg-white rounded-xl shadow-2xl overflow-hidden"> | |
| <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" | |
| alt="Object detection example" class="w-full h-auto"> | |
| <div class="prediction-box" style="top: 30%; left: 40%; width: 25%; height: 20%;"> | |
| <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Dog 99.99%</div> | |
| </div> | |
| <div class="prediction-box" style="top: 60%; left: 20%; width: 15%; height: 15%;"> | |
| <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Human 99.98%</div> | |
| </div> | |
| <div class="prediction-box" style="top: 50%; left: 70%; width: 20%; height: 25%;"> | |
| <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Grass 99.97%</div> | |
| </div> | |
| <div class="prediction-box" style="top: 10%; left: 10%; width: 15%; height: 15%;"> | |
| <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Sky 99.96%</div> | |
| </div> | |
| <div class="prediction-box" style="top: 75%; left: 60%; width: 10%; height: 10%;"> | |
| <div class="absolute -top-6 left-0 bg-green-500 text-white text-xs px-2 py-1 rounded">Leash 99.95%</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section id="demo" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Try Our Model</h2> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Upload Area --> | |
| <div class="lg:w-1/2"> | |
| <div class="upload-area rounded-xl p-8 text-center cursor-pointer mb-6"> | |
| <input type="file" id="image-upload" class="hidden" accept="image/*"> | |
| <div class="flex flex-col items-center justify-center py-12"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i> | |
| <h3 class="text-xl font-semibold text-gray-700 mb-2">Upload an Image</h3> | |
| <p class="text-gray-500 mb-4">or drag and drop</p> | |
| <p class="text-sm text-gray-400">PNG, JPG, JPEG up to 10MB</p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center"> | |
| <button id="sample-image-btn" class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition"> | |
| Use Sample Image | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Results Area --> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-100 rounded-xl p-4 min-h-96 flex items-center justify-center"> | |
| <div id="results-container" class="relative w-full"> | |
| <div id="placeholder-text" class="text-center text-gray-500"> | |
| <i class="fas fa-image text-4xl mb-4"></i> | |
| <p>Your detected objects will appear here</p> | |
| </div> | |
| <canvas id="result-canvas" class="hidden w-full h-auto rounded-lg"></canvas> | |
| </div> | |
| </div> | |
| <div id="confidence-display" class="mt-6 hidden"> | |
| <div class="flex justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-700">Model Confidence</span> | |
| <span id="confidence-value" class="text-sm font-medium text-green-600">99.99%</span> | |
| </div> | |
| <div class="confidence-meter w-full rounded-full"></div> | |
| <div class="mt-2 text-sm text-gray-500">Average confidence across all detected objects</div> | |
| </div> | |
| <div id="detections-list" class="mt-6 hidden"> | |
| <h4 class="font-semibold text-gray-700 mb-3">Detected Objects</h4> | |
| <div class="space-y-2" id="detections-container"> | |
| <!-- Detection items will be added here by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Model Features --> | |
| <section id="model" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Why Our Model Stands Out</h2> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="model-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-indigo-500 text-3xl mb-4"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Unmatched Accuracy</h3> | |
| <p class="text-gray-600">With 99.99% precision, our model outperforms all existing solutions in object detection benchmarks.</p> | |
| </div> | |
| <div class="model-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-indigo-500 text-3xl mb-4"> | |
| <i class="fas fa-rocket"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Real-Time Performance</h3> | |
| <p class="text-gray-600">Optimized for speed without compromising accuracy, perfect for live applications.</p> | |
| </div> | |
| <div class="model-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-indigo-500 text-3xl mb-4"> | |
| <i class="fas fa-shapes"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">1000+ Classes</h3> | |
| <p class="text-gray-600">Comprehensive detection across a vast range of objects, from everyday items to specialized equipment.</p> | |
| </div> | |
| <div class="model-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-indigo-500 text-3xl mb-4"> | |
| <i class="fas fa-cloud"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Cloud Optimized</h3> | |
| <p class="text-gray-600">Deploy seamlessly on Hugging Face with our pre-configured API endpoints.</p> | |
| </div> | |
| <div class="model-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-indigo-500 text-3xl mb-4"> | |
| <i class="fas fa-mobile-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Edge Compatible</h3> | |
| <p class="text-gray-600">Lightweight versions available for mobile and edge device deployment.</p> | |
| </div> | |
| <div class="model-card bg-white p-6 rounded-xl shadow-md"> | |
| <div class="text-indigo-500 text-3xl mb-4"> | |
| <i class="fas fa-cogs"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2 text-gray-800">Custom Training</h3> | |
| <p class="text-gray-600">Fine-tune the model with your custom datasets while maintaining core accuracy.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Performance Metrics --> | |
| <section id="api" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Benchmark Results</h2> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full bg-white rounded-lg overflow-hidden"> | |
| <thead class="bg-gray-100"> | |
| <tr> | |
| <th class="py-3 px-4 text-left text-gray-700 font-semibold">Model</th> | |
| <th class="py-3 px-4 text-left text-gray-700 font-semibold">mAP@0.5</th> | |
| <th class="py-3 px-4 text-left text-gray-700 font-semibold">Precision</th> | |
| <th class="py-3 px-4 text-left text-gray-700 font-semibold">Recall</th> | |
| <th class="py-3 px-4 text-left text-gray-700 font-semibold">FPS</th> | |
| </tr> | |
| </thead> | |
| <tbody class="divide-y divide-gray-200"> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="py-4 px-4 font-medium text-gray-900">PrecisionVision (Ours)</td> | |
| <td class="py-4 px-4 text-green-600 font-semibold">99.99%</td> | |
| <td class="py-4 px-4 text-green-600 font-semibold">99.99%</td> | |
| <td class="py-4 px-4 text-green-600 font-semibold">99.98%</td> | |
| <td class="py-4 px-4">62</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="py-4 px-4">YOLOv8</td> | |
| <td class="py-4 px-4">53.9%</td> | |
| <td class="py-4 px-4">66.2%</td> | |
| <td class="py-4 px-4">57.9%</td> | |
| <td class="py-4 px-4">78</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="py-4 px-4">Faster R-CNN</td> | |
| <td class="py-4 px-4">55.2%</td> | |
| <td class="py-4 px-4">68.1%</td> | |
| <td class="py-4 px-4">59.3%</td> | |
| <td class="py-4 px-4">26</td> | |
| </tr> | |
| <tr class="hover:bg-gray-50"> | |
| <td class="py-4 px-4">EfficientDet</td> | |
| <td class="py-4 px-4">52.2%</td> | |
| <td class="py-4 px-4">64.8%</td> | |
| <td class="py-4 px-4">56.1%</td> | |
| <td class="py-4 px-4">56</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-600 mb-4">Tested on COCO 2017 validation set with RTX 4090 GPU</p> | |
| <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"> | |
| View Full Benchmark Details | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Integrate 99.99% Accurate Vision?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Join hundreds of developers using PrecisionVision for their computer vision applications.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <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"> | |
| Get API Key <i class="fas fa-key ml-2"></i> | |
| </a> | |
| <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"> | |
| View Documentation <i class="fas fa-book ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer id="contact" class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-4"> | |
| <i class="fas fa-eye text-2xl"></i> | |
| <span class="text-xl font-bold">PrecisionVision</span> | |
| </div> | |
| <p class="text-gray-400">The most accurate object detection model available today.</p> | |
| <div class="flex space-x-4 mt-4"> | |
| <a href="https://github.com" target="_blank" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a> | |
| <a href="https://twitter.com" target="_blank" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a> | |
| <a href="https://linkedin.com" target="_blank" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Product</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#model" class="text-gray-400 hover:text-white">Features</a></li> | |
| <li><a href="https://huggingface.co/pricing" target="_blank" class="text-gray-400 hover:text-white">Pricing</a></li> | |
| <li><a href="#api" class="text-gray-400 hover:text-white">API</a></li> | |
| <li><a href="https://huggingface.co/integrations" target="_blank" class="text-gray-400 hover:text-white">Integrations</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="https://huggingface.co/docs" target="_blank" class="text-gray-400 hover:text-white">Documentation</a></li> | |
| <li><a href="https://huggingface.co/course" target="_blank" class="text-gray-400 hover:text-white">Tutorials</a></li> | |
| <li><a href="https://huggingface.co/blog" target="_blank" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="https://huggingface.co/contact" target="_blank" class="text-gray-400 hover:text-white">Support</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#about" class="text-gray-400 hover:text-white">About</a></li> | |
| <li><a href="https://huggingface.co/careers" target="_blank" class="text-gray-400 hover:text-white">Careers</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li> | |
| <li><a href="https://huggingface.co/legal" target="_blank" class="text-gray-400 hover:text-white">Legal</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 PrecisionVision. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Demo functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Mobile menu toggle | |
| const mobileMenuButton = document.getElementById('mobile-menu-button'); | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| mobileMenuButton.addEventListener('click', function() { | |
| mobileMenu.classList.toggle('hidden'); | |
| }); | |
| // Image detection functionality | |
| const uploadArea = document.querySelector('.upload-area'); | |
| const fileInput = document.getElementById('image-upload'); | |
| const placeholderText = document.getElementById('placeholder-text'); | |
| const resultCanvas = document.getElementById('result-canvas'); | |
| const confidenceDisplay = document.getElementById('confidence-display'); | |
| const detectionsContainer = document.getElementById('detections-container'); | |
| const sampleImageBtn = document.getElementById('sample-image-btn'); | |
| // Handle drag and drop | |
| uploadArea.addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| uploadArea.addEventListener('dragover', function(e) { | |
| e.preventDefault(); | |
| this.classList.add('border-indigo-500', 'bg-indigo-50'); | |
| }); | |
| uploadArea.addEventListener('dragleave', function() { | |
| this.classList.remove('border-indigo-500', 'bg-indigo-50'); | |
| }); | |
| uploadArea.addEventListener('drop', function(e) { | |
| e.preventDefault(); | |
| this.classList.remove('border-indigo-500', 'bg-indigo-50'); | |
| if (e.dataTransfer.files.length) { | |
| fileInput.files = e.dataTransfer.files; | |
| handleImageUpload(e.dataTransfer.files[0]); | |
| } | |
| }); | |
| fileInput.addEventListener('change', function() { | |
| if (this.files.length) { | |
| handleImageUpload(this.files[0]); | |
| } | |
| }); | |
| sampleImageBtn.addEventListener('click', function() { | |
| 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'; | |
| displayImageWithDetections(sampleImageUrl); | |
| }); | |
| function handleImageUpload(file) { | |
| if (!file.type.match('image.*')) { | |
| alert('Please upload an image file'); | |
| return; | |
| } | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| displayImageWithDetections(e.target.result); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| function displayImageWithDetections(imageSrc) { | |
| const img = new Image(); | |
| img.onload = function() { | |
| // Set canvas dimensions | |
| const maxWidth = 800; | |
| const scale = Math.min(maxWidth / img.width, 1); | |
| resultCanvas.width = img.width * scale; | |
| resultCanvas.height = img.height * scale; | |
| const ctx = resultCanvas.getContext('2d'); | |
| // Draw image | |
| ctx.drawImage(img, 0, 0, resultCanvas.width, resultCanvas.height); | |
| // Simulate detections (in a real app, this would come from your model) | |
| simulateDetections(ctx, img.width * scale, img.height * scale); | |
| // Show results | |
| placeholderText.classList.add('hidden'); | |
| resultCanvas.classList.remove('hidden'); | |
| confidenceDisplay.classList.remove('hidden'); | |
| // Populate detections list | |
| populateDetectionsList(); | |
| }; | |
| img.src = imageSrc; | |
| } | |
| function simulateDetections(ctx, imgWidth, imgHeight) { | |
| // These would be replaced with actual model predictions | |
| const simulatedDetections = [ | |
| { class: 'dog', confidence: 0.9999, x: 0.4, y: 0.3, width: 0.25, height: 0.2 }, | |
| { class: 'human', confidence: 0.9998, x: 0.2, y: 0.6, width: 0.15, height: 0.15 }, | |
| { class: 'grass', confidence: 0.9997, x: 0.7, y: 0.5, width: 0.2, height: 0.25 }, | |
| { class: 'sky', confidence: 0.9996, x: 0.1, y: 0.1, width: 0.15, height: 0.15 }, | |
| { class: 'leash', confidence: 0.9995, x: 0.6, y: 0.75, width: 0.1, height: 0.1 }, | |
| { class: 'collar', confidence: 0.9994, x: 0.45, y: 0.35, width: 0.05, height: 0.05 }, | |
| { class: 'fur', confidence: 0.9993, x: 0.35, y: 0.4, width: 0.3, height: 0.25 } | |
| ]; | |
| simulatedDetections.forEach(det => { | |
| const x = det.x * imgWidth; | |
| const y = det.y * imgHeight; | |
| const width = det.width * imgWidth; | |
| const height = det.height * imgHeight; | |
| // Draw bounding box | |
| ctx.strokeStyle = '#4ade80'; | |
| ctx.lineWidth = 2; | |
| ctx.strokeRect(x, y, width, height); | |
| // Draw background for label | |
| ctx.fillStyle = 'rgba(74, 222, 128, 0.8)'; | |
| const text = `${det.class} ${(det.confidence * 100).toFixed(2)}%`; | |
| const textWidth = ctx.measureText(text).width + 10; | |
| ctx.fillRect(x, y - 25, textWidth, 25); | |
| // Draw label text | |
| ctx.fillStyle = 'white'; | |
| ctx.font = 'bold 12px sans-serif'; | |
| ctx.fillText(text, x + 5, y - 8); | |
| }); | |
| } | |
| function populateDetectionsList() { | |
| // Simulated data - replace with actual model output | |
| const simulatedDetections = [ | |
| { class: 'Dog', confidence: 99.99, color: 'bg-green-500' }, | |
| { class: 'Human', confidence: 99.98, color: 'bg-blue-500' }, | |
| { class: 'Grass', confidence: 99.97, color: 'bg-purple-500' }, | |
| { class: 'Sky', confidence: 99.96, color: 'bg-indigo-500' }, | |
| { class: 'Leash', confidence: 99.95, color: 'bg-yellow-500' }, | |
| { class: 'Collar', confidence: 99.94, color: 'bg-red-500' }, | |
| { class: 'Fur', confidence: 99.93, color: 'bg-pink-500' } | |
| ]; | |
| detectionsContainer.innerHTML = simulatedDetections.map(det => ` | |
| <div class="flex items-center justify-between p-3 bg-gray-100 rounded-lg"> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 rounded-full ${det.color} mr-2"></span> | |
| <span class="font-medium">${det.class}</span> | |
| </div> | |
| <span class="font-semibold text-green-600">${det.confidence.toFixed(2)}%</span> | |
| </div> | |
| `).join(''); | |
| document.getElementById('detections-list').classList.remove('hidden'); | |
| } | |
| }); | |
| </script> | |
| <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> | |
| </html> |