Add 3 files

README.md

@@ -1,10 +1,12 @@
 ---
-title: Presentation
-emoji: 🌍
-colorFrom: yellow
-colorTo: gray
+title: presentation
+emoji: 🐳
+colorFrom: gray
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,281 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Road Hazard 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>
+        .slide {
+            display: none;
+            animation: fadeIn 0.5s ease-in-out;
+        }
+        .slide.active {
+            display: block;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
+        }
+        .tech-card {
+            transition: all 0.3s ease;
+        }
+        .tech-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
+        }
+        .dataset-card {
+            border-left: 4px solid;
+            transition: all 0.3s ease;
+        }
+        .dataset-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body class="font-sans bg-gray-50">
+    <!-- Navigation Dots -->
+    <div class="fixed right-6 top-1/2 transform -translate-y-1/2 z-50 hidden md:block">
+        <div class="flex flex-col space-y-4" id="nav-dots"></div>
+    </div>
+
+    <!-- Slides Container -->
+    <div class="relative overflow-hidden">
+        <!-- Previous slides remain the same until slide 7 -->
+        <!-- ... (previous slides 1-6 remain unchanged) ... -->
+
+        <!-- Slide 7: Dataset -->
+        <div class="slide min-h-screen bg-white">
+            <div class="container mx-auto px-6 py-20">
+                <h2 class="text-4xl font-bold text-center mb-16 text-gray-800">Our Dataset</h2>
+                
+                <div class="max-w-5xl mx-auto">
+                    <div class="grid md:grid-cols-2 gap-8 mb-12">
+                        <!-- Public Dataset -->
+                        <div class="dataset-card bg-white rounded-xl p-6 shadow-lg border-l-blue-500">
+                            <div class="flex items-center mb-4">
+                                <div class="bg-blue-100 rounded-lg p-3 mr-4">
+                                    <i class="fas fa-database text-blue-600 text-2xl"></i>
+                                </div>
+                                <h3 class="text-2xl font-bold text-gray-800">Public Dataset</h3>
+                            </div>
+                            <p class="text-gray-600 mb-4">
+                                We started with publicly available road datasets containing labeled images of potholes and speed bumps from various sources.
+                            </p>
+                            <div class="bg-gray-50 rounded-lg p-4">
+                                <ul class="space-y-2 text-gray-700">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>10,000+ images from open repositories</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>Various lighting and weather conditions</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-blue-500 mt-1 mr-2"></i>
+                                        <span>Multiple road types (urban, rural, highways)</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                        
+                        <!-- Our Custom Dataset -->
+                        <div class="dataset-card bg-white rounded-xl p-6 shadow-lg border-l-purple-500">
+                            <div class="flex items-center mb-4">
+                                <div class="bg-purple-100 rounded-lg p-3 mr-4">
+                                    <i class="fas fa-camera text-purple-600 text-2xl"></i>
+                                </div>
+                                <h3 class="text-2xl font-bold text-gray-800">Our Custom Dataset</h3>
+                            </div>
+                            <p class="text-gray-600 mb-4">
+                                Each team member contributed by collecting and labeling images from their local areas to enhance diversity.
+                            </p>
+                            <div class="bg-gray-50 rounded-lg p-4">
+                                <ul class="space-y-2 text-gray-700">
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>5,000+ new images collected locally</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>Each town's unique road conditions captured</span>
+                                    </li>
+                                    <li class="flex items-start">
+                                        <i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
+                                        <span>Seasonal variations included</span>
+                                    </li>
+                                </ul>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-gray-50 rounded-xl shadow-lg p-8 mb-10">
+                        <h3 class="text-2xl font-bold text-center mb-6 text-gray-800">Annotation Process</h3>
+                        <div class="grid md:grid-cols-3 gap-6">
+                            <div class="text-center">
+                                <div class="bg-blue-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
+                                    <i class="fas fa-tag text-blue-600 text-2xl"></i>
+                                </div>
+                                <h4 class="font-semibold mb-2">Roboflow</h4>
+                                <p class="text-sm text-gray-600">Used for consistent labeling across all images</p>
+                            </div>
+                            <div class="text-center">
+                                <div class="bg-purple-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
+                                    <i class="fas fa-object-group text-purple-600 text-2xl"></i>
+                                </div>
+                                <h4 class="font-semibold mb-2">Bounding Boxes</h4>
+                                <p class="text-sm text-gray-600">Precise annotation of potholes and speed bumps</p>
+                            </div>
+                            <div class="text-center">
+                                <div class="bg-green-100 w-16 h-16 mx-auto rounded-full flex items-center justify-center mb-3">
+                                    <i class="fas fa-random text-green-600 text-2xl"></i>
+                                </div>
+                                <h4 class="font-semibold mb-2">Augmentation</h4>
+                                <p class="text-sm text-gray-600">Applied transformations to increase diversity</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-10">
+                        <div class="md:flex">
+                            <div class="md:w-1/2 p-8">
+                                <h3 class="text-2xl font-bold mb-4 text-gray-800">Final Merged Dataset</h3>
+                                <p class="text-gray-600 mb-6">
+                                    After careful processing and validation, we combined both datasets to create a robust training set.
+                                </p>
+                                <div class="space-y-4">
+                                    <div class="flex items-start">
+                                        <div class="bg-blue-100 rounded-full p-2 mr-4">
+                                            <i class="fas fa-chart-pie text-blue-600"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-semibold">Dataset Statistics</h4>
+                                            <ul class="text-sm text-gray-600 mt-1 space-y-1">
+                                                <li>15,000+ total images</li>
+                                                <li>25,000+ labeled potholes</li>
+                                                <li>8,000+ labeled speed bumps</li>
+                                                <li>Class balance maintained</li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                    <div class="flex items-start">
+                                        <div class="bg-purple-100 rounded-full p-2 mr-4">
+                                            <i class="fas fa-sliders-h text-purple-600"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-semibold">Split</h4>
+                                            <ul class="text-sm text-gray-600 mt-1 space-y-1">
+                                                <li>70% training set</li>
+                                                <li>20% validation set</li>
+                                                <li>10% test set</li>
+                                            </ul>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="md:w-1/2 bg-gray-100 flex items-center justify-center p-6">
+                                <img src="https://miro.medium.com/v2/resize:fit:1400/1*Q3TGVXm5W0V5yG5y5y5y5Q.png" 
+                                     alt="Dataset samples" class="w-full rounded-lg shadow">
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="text-center">
+                        <button onclick="prevSlide()" class="px-6 py-2 border border-gray-300 rounded-full font-medium hover:bg-gray-100 transition duration-300 mr-4">
+                            <i class="fas fa-arrow-left mr-2"></i> Back
+                        </button>
+                        <button onclick="nextSlide()" class="px-6 py-2 bg-purple-600 text-white rounded-full font-medium hover:bg-purple-700 transition duration-300">
+                            Next <i class="fas fa-arrow-right ml-2"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- The remaining slides (now shifted down by one) -->
+        <!-- Slide 8 becomes Slide 7 (Future Work) -->
+        <!-- Slide 9 becomes Slide 8 (Conclusion) -->
+        <!-- ... (remaining slides are unchanged except for their numbering) ... -->
+
+    </div>
+
+    <script>
+        // Initialize slides
+        const slides = document.querySelectorAll('.slide');
+        const navDots = document.getElementById('nav-dots');
+        let currentSlide = 0;
+        
+        // Create navigation dots
+        slides.forEach((slide, index) => {
+            const dot = document.createElement('button');
+            dot.className = 'w-3 h-3 rounded-full bg-white bg-opacity-30 focus:outline-none transition duration-300';
+            dot.addEventListener('click', () => goToSlide(index));
+            navDots.appendChild(dot);
+        });
+        
+        // Update navigation dots
+        function updateNavDots() {
+            const dots = navDots.querySelectorAll('button');
+            dots.forEach((dot, index) => {
+                if (index === currentSlide) {
+                    dot.className = 'w-3 h-3 rounded-full bg-white focus:outline-none transition duration-300';
+                } else {
+                    dot.className = 'w-3 h-3 rounded-full bg-white bg-opacity-30 focus:outline-none transition duration-300';
+                }
+            });
+        }
+        
+        // Show current slide
+        function showSlide() {
+            slides.forEach((slide, index) => {
+                if (index === currentSlide) {
+                    slide.classList.add('active');
+                } else {
+                    slide.classList.remove('active');
+                }
+            });
+            updateNavDots();
+        }
+        
+        // Next slide
+        function nextSlide() {
+            if (currentSlide < slides.length - 1) {
+                currentSlide++;
+                showSlide();
+            }
+        }
+        
+        // Previous slide
+        function prevSlide() {
+            if (currentSlide > 0) {
+                currentSlide--;
+                showSlide();
+            }
+        }
+        
+        // Go to specific slide
+        function goToSlide(index) {
+            currentSlide = index;
+            showSlide();
+        }
+        
+        // Keyboard navigation
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'ArrowRight') {
+                nextSlide();
+            } else if (e.key === 'ArrowLeft') {
+                prevSlide();
+            }
+        });
+        
+        // Initialize
+        showSlide();
+    </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=sovitich28/presentation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>