Add 2 files

index.html

@@ -56,46 +56,60 @@
                 <span class="text-xl font-bold">PrecisionVision</span>
             </div>
             <div class="hidden md:flex space-x-6">
-                <a href="#" class="hover:text-gray-200 transition">Home</a>
-                <a href="#" class="hover:text-gray-200 transition">Model</a>
-                <a href="#" class="hover:text-gray-200 transition">API</a>
-                <a href="#" class="hover:text-gray-200 transition">Docs</a>
-                <a href="#" class="hover:text-gray-200 transition">Contact</a>
+                <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">
+            <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 class="gradient-bg text-white py-16">
+    <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">
-                    <button class="bg-white text-indigo-600 px-6 py-3 rounded-lg font-semibold hover:bg-gray-100 transition">
+                    <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>
-                    </button>
-                    <button class="border border-white text-white px-6 py-3 rounded-lg font-semibold hover:bg-white hover:text-indigo-600 transition">
+                    </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
-                    </button>
+                    </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-1512917774080-9991f1c4c750?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" 
+                        <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">Person 99.99%</div>
+                            <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">Car 99.98%</div>
+                            <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">Building 99.97%</div>
+                            <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>
@@ -104,7 +118,7 @@
     </section>
 
     <!-- Demo Section -->
-    <section class="py-16 bg-white">
+    <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>
             
@@ -121,7 +135,7 @@
                         </div>
                     </div>
                     <div class="flex justify-center">
-                        <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">
+                        <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>
@@ -150,7 +164,7 @@
                     
                     <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">
+                        <div class="space-y-2" id="detections-container">
                             <!-- Detection items will be added here by JavaScript -->
                         </div>
                     </div>
@@ -160,7 +174,7 @@
     </section>
 
     <!-- Model Features -->
-    <section class="py-16 bg-gray-50">
+    <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>
             
@@ -217,7 +231,7 @@
     </section>
 
     <!-- Performance Metrics -->
-    <section class="py-16 bg-white">
+    <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>
             
@@ -267,9 +281,9 @@
             
             <div class="mt-8 text-center">
                 <p class="text-gray-600 mb-4">Tested on COCO 2017 validation set with RTX 4090 GPU</p>
-                <button class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold hover:bg-indigo-700 transition">
+                <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
-                </button>
+                </a>
             </div>
         </div>
     </section>
@@ -280,18 +294,18 @@
             <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">
-                <button class="bg-white text-indigo-600 px-8 py-4 rounded-lg font-semibold hover:bg-gray-100 transition text-lg">
+                <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>
-                </button>
-                <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">
+                </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>
-                </button>
+                </a>
             </div>
         </div>
     </section>
 
     <!-- Footer -->
-    <footer class="bg-gray-900 text-white py-12">
+    <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>
@@ -301,36 +315,36 @@
                     </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="#" class="text-gray-400 hover:text-white"><i class="fab fa-github"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-twitter"></i></a>
-                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin"></i></a>
+                        <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="#" class="text-gray-400 hover:text-white">Features</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Pricing</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">API</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Integrations</a></li>
+                        <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="#" class="text-gray-400 hover:text-white">Documentation</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Tutorials</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Support</a></li>
+                        <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="#" class="text-gray-400 hover:text-white">About</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Careers</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white">Legal</a></li>
+                        <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>
@@ -343,12 +357,22 @@
     <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 detectionsList = document.getElementById('detections-list');
+            const detectionsContainer = document.getElementById('detections-container');
+            const sampleImageBtn = document.getElementById('sample-image-btn');
             
             // Handle drag and drop
             uploadArea.addEventListener('click', function() {
@@ -380,6 +404,11 @@
                 }
             });
             
+            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');
@@ -397,8 +426,10 @@
                 const img = new Image();
                 img.onload = function() {
                     // Set canvas dimensions
-                    resultCanvas.width = img.width;
-                    resultCanvas.height = img.height;
+                    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');
                     
@@ -406,13 +437,12 @@
                     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, img.height);
+                    simulateDetections(ctx, img.width * scale, img.height * scale);
                     
                     // Show results
                     placeholderText.classList.add('hidden');
                     resultCanvas.classList.remove('hidden');
                     confidenceDisplay.classList.remove('hidden');
-                    detectionsList.classList.remove('hidden');
                     
                     // Populate detections list
                     populateDetectionsList();
@@ -423,9 +453,13 @@
             function simulateDetections(ctx, imgWidth, imgHeight) {
                 // These would be replaced with actual model predictions
                 const simulatedDetections = [
-                    { class: 'person', confidence: 0.9999, x: 0.4, y: 0.3, width: 0.25, height: 0.2 },
-                    { class: 'car', confidence: 0.9998, x: 0.2, y: 0.6, width: 0.15, height: 0.15 },
-                    { class: 'building', confidence: 0.9997, x: 0.7, y: 0.5, width: 0.2, height: 0.25 }
+                    { 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 => {
@@ -455,32 +489,27 @@
             function populateDetectionsList() {
                 // Simulated data - replace with actual model output
                 const simulatedDetections = [
-                    { class: 'Person', confidence: 99.99, color: 'bg-green-500' },
-                    { class: 'Car', confidence: 99.98, color: 'bg-blue-500' },
-                    { class: 'Building', confidence: 99.97, color: 'bg-purple-500' }
+                    { 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' }
                 ];
                 
-                detectionsList.innerHTML = `
-                    <h4 class="font-semibold text-gray-700 mb-3">Detected Objects</h4>
-                    <div class="space-y-2">
-                        ${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('')}
+                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');
             }
-            
-            // Sample image button
-            document.querySelector('button:contains("Use Sample Image")').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);
-            });
         });
     </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>

prompts.txt

@@ -1 +1,2 @@
-want to build a model to hugging face, that does perfect 99.99% object detection for computer visions, 
+want to build a model to hugging face, that does perfect 99.99% object detection for computer visions, 
+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