Hugging Face's logo

Spaces:
sovitich28
/
presentation
Running

App Files Community
presentation / index.html
sovitich28's picture
sovitich28
Add 3 files
cef4dba verified
Raw History Blame Contribute Delete
14.9 kB
<!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>