| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Analyse Satellite Avancée</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| 'primary-camo': '#5a6249', |
| 'secondary-camo': '#1e293b', |
| 'camo-green': '#4a5538', |
| 'camo-brown': '#6d5835', |
| 'camo-tan': '#d2b48c', |
| }, |
| animation: { |
| 'gradient': 'gradient 8s linear infinite', |
| 'spinner': 'spin 1.5s linear infinite', |
| }, |
| keyframes: { |
| gradient: { |
| '0%, 100%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'left center' |
| }, |
| '50%': { |
| 'background-size': '200% 200%', |
| 'background-position': 'right center' |
| } |
| }, |
| spin: { |
| '0%': { transform: 'rotate(0deg)' }, |
| '100%': { transform: 'rotate(360deg)' } |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| /* Camouflage Background */ |
| body { |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%235a6249' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); |
| background-size: 200px 200px; /* Ajustez la taille du motif selon vos préférences */ |
| } |
|
|
| .gradient-animate { |
| background: linear-gradient(270deg, #5a6249, #4a5538); |
| background-size: 200% 200%; |
| animation: gradient 8s ease infinite; |
| } |
| |
| .card-hover { |
| transition: transform 0.3s ease-in-out; |
| background-color: rgba(255, 255, 255, 0.8); /* Légère transparence pour les cartes */ |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| } |
| |
| .progress-bar { |
| width: 0%; |
| transition: width 0.5s ease-in-out; |
| } |
|
|
| .loader { |
| border: 8px solid #f3f3f3; |
| border-top: 8px solid #5a6249; |
| border-radius: 50%; |
| width: 60px; |
| height: 60px; |
| animation: spin 1.5s linear infinite; |
| display: none; /* Initially hidden */ |
| margin: 20px auto; |
| } |
|
|
| @keyframes spin { |
| 0% { transform: rotate(0deg)' ; } |
| 100% { transform: rotate(360deg); } |
| } |
|
|
| .fade-in { |
| opacity: 0; |
| animation: fadeIn 1s ease-in-out forwards; |
| } |
|
|
| @keyframes fadeIn { |
| to { |
| opacity: 1; |
| } |
| } |
|
|
| .slide-up { |
| transform: translateY(50px); |
| opacity: 0; |
| transition: transform 0.8s ease-out, opacity 0.8s ease-out; |
| } |
|
|
| .slide-up.active { |
| transform: translateY(0); |
| opacity: 1; |
| } |
|
|
| #imagePreview { |
| max-width: 100%; |
| max-height: 300px; |
| margin-top: 20px; |
| display: none; |
| } |
|
|
| /* Style pour les éléments de texte importants */ |
| .text-camo-green { |
| color: #4a5538; |
| } |
|
|
| .text-camo-brown { |
| color: #6d5835; |
| } |
|
|
| .text-camo-tan { |
| color: #d2b48c; |
| } |
| nav, footer{ |
| background-color: #5a6249 !important; |
| } |
| nav span, footer h3, footer a, footer p{ |
| color: #d2b48c !important; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <nav class="shadow-lg fixed w-full z-50"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between h-16"> |
| <div class="flex items-center"> |
| <span class="text-xl font-bold">Red Eye</span> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="https://github.com/Yusufibin" target="_blank" |
| class="flex items-center space-x-2 hover:text-primary-camo transition-colors"> |
| <i class="fab fa-github text-xl"></i> |
| <span>GitHub</span> |
| </a> |
| </div> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <header class="pt-24 pb-12 gradient-animate"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center text-camo-tan"> |
| <h1 class="text-4xl font-bold mb-4">Reconnaissance d'Objets Satellite</h1> |
| <p class="text-xl mb-8">Analyse avancée d'images satellite alimentée par deep learning</p> |
| <div class="flex justify-center space-x-4"> |
| <a href="#upload" class="bg-camo-tan text-primary-camo px-6 py-3 rounded-lg font-medium hover:bg-camo-brown hover:text-camo-tan transition-colors"> |
| Commencer l'analyse |
| </a> |
| <a href="#about" class="border border-camo-tan text-camo-tan px-6 py-3 rounded-lg font-medium hover:bg-camo-tan hover:text-primary-camo transition-colors"> |
| En savoir plus |
| </a> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
| |
| <section id="about" class="mb-16"> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up"> |
| <h2 class="text-2xl font-bold text-camo-green mb-4">À propos du projet</h2> |
| <p class="text-camo-brown mb-4"> |
| Ce système utilise un modele de deep learning pour analyser des images satellite et détecter automatiquement les objets présents. |
| Il combine la puissance du deep learning avec une interface utilisateur intuitive pour fournir des analyses détaillées |
| et précises des images satellite. |
| </p> |
| <ul class="space-y-2 text-camo-brown"> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-camo-green mr-2"></i> |
| Détection d'objets en temps réel |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-camo-green mr-2"></i> |
| Analyse détaillée du contenu |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check text-camo-green mr-2"></i> |
| Interface utilisateur moderne |
| </li> |
| </ul> |
| </div> |
| <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up"> |
| <h2 class="text-2xl font-bold text-camo-green mb-4">Technologies utilisées</h2> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="flex items-center space-x-2"> |
| <i class="fab fa-python text-2xl text-blue-500"></i> |
| <span class="text-camo-brown">Python/Flask</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <i class="fab fa-js text-2xl text-yellow-500"></i> |
| <span class="text-camo-brown">JavaScript</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <i class="fab fa-google text-2xl text-primary-camo"></i> |
| <span class="text-camo-brown">Deep Learning</span> |
| </div> |
| <div class="flex items-center space-x-2"> |
| <i class="fab fa-css3 text-2xl text-blue-400"></i> |
| <span class="text-camo-brown">Tailwind CSS</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="upload" class="mb-16"> |
| <div class="card-hover bg-white rounded-xl shadow-lg p-8 slide-up"> |
| <h2 class="text-2xl font-bold text-camo-green mb-6">Analyse d'image</h2> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 transition-colors hover:border-primary-camo"> |
| <form id="uploadForm" class="space-y-6" action="/analyze" method="POST" enctype="multipart/form-data"> |
| <div class="text-center"> |
| <i class="fas fa-satellite text-5xl text-primary-camo mb-4"></i> |
| <div class="mt-4"> |
| <label class="block text-lg font-medium text-camo-brown mb-2"> |
| Sélectionner une image satellite |
| </label> |
| <input type="file" name="file" id="fileInput" |
| class="mt-1 block w-full text-sm text-gray-500 |
| file:mr-4 file:py-2 file:px-4 |
| file:rounded-full file:border-0 |
| file:text-sm file:font-semibold |
| file:bg-primary-camo file:text-camo-tan |
| hover:file:bg-camo-green |
| transition-colors" |
| accept="image/*"> |
| <img id="imagePreview" src="#" alt="Prévisualisation de l'image" /> |
| </div> |
| </div> |
| <div class="flex justify-center"> |
| <button type="submit" class="bg-primary-camo text-camo-tan px-8 py-3 rounded-full font-semibold hover:bg-camo-green transition-colors"> |
| Lancer l'analyse |
| </button> |
| </div> |
| <div id="loader" class="loader"></div> |
| </form> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="results" class="opacity-0"> |
| <div class="grid md:grid-cols-2 gap-8"> |
| <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up"> |
| <h3 class="text-xl font-bold text-camo-green mb-4">Image traitée</h3> |
| <img id="processedImage" src="" alt="Image traitée" class="w-full h-auto rounded-lg"> |
| </div> |
| <div class="card-hover bg-white rounded-xl shadow-lg p-6 slide-up"> |
| <h3 class="text-xl font-bold text-camo-green mb-4">Description Détaillée</h3> |
| <div id="description" class="prose text-camo-brown"> |
| |
| </div> |
| </div> |
| </div> |
| </section> |
| </main> |
|
|
| |
| <footer class="text-camo-tan py-8 mt-16"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex justify-between items-center"> |
| <div> |
| <h3 class="text-lg font-semibold">Red Eye</h3> |
| <p class="text-gray-400">Développé par Yusufibin</p> |
| </div> |
| <div> |
| <a href="https://github.com/Yusufibin" target="_blank" |
| class="hover:text-camo-brown transition-colors"> |
| <i class="fab fa-github text-2xl"></i> |
| </a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| gsap.registerPlugin(ScrollTrigger); |
| |
| |
| gsap.from("header", { |
| opacity: 0, |
| y: -50, |
| duration: 1, |
| ease: "power3.out" |
| }); |
| |
| |
| gsap.utils.toArray(".slide-up").forEach((el, index) => { |
| gsap.from(el, { |
| scrollTrigger: { |
| trigger: el, |
| start: "top bottom-=100", |
| onEnter: () => { |
| el.classList.add("active"); |
| }, |
| }, |
| }); |
| }); |
| |
| |
| const fileInput = document.getElementById('fileInput'); |
| const imagePreview = document.getElementById('imagePreview'); |
| |
| fileInput.addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| const reader = new FileReader(); |
| |
| reader.onload = function(e) { |
| imagePreview.src = e.target.result; |
| imagePreview.style.display = 'block'; |
| } |
| |
| if (file) { |
| reader.readAsDataURL(file); |
| } else { |
| imagePreview.src = '#'; |
| imagePreview.style.display = 'none'; |
| } |
| }); |
| |
| |
| document.getElementById('uploadForm').addEventListener('submit', function(e) { |
| e.preventDefault(); |
| |
| const formData = new FormData(this); |
| const loader = document.getElementById('loader'); |
| const resultsSection = document.getElementById('results'); |
| const processedImage = document.getElementById('processedImage'); |
| const descriptionDiv = document.getElementById('description'); |
| |
| loader.style.display = 'block'; |
| |
| fetch('/analyze', { |
| method: 'POST', |
| body: formData |
| }) |
| .then(response => { |
| if (!response.ok) { |
| throw new Error('Network response was not ok'); |
| } |
| return response.json(); |
| }) |
| .then(data => { |
| loader.style.display = 'none'; |
| resultsSection.classList.add('fade-in'); |
| resultsSection.style.opacity = 1; |
| |
| |
| if (data.image_path) { |
| processedImage.src = data.image_path; |
| processedImage.style.display = 'block'; |
| } else { |
| processedImage.style.display = 'none'; |
| } |
| |
| |
| descriptionDiv.innerHTML = data.description; |
| }) |
| .catch(error => { |
| console.error('Erreur lors de la requête fetch:', error); |
| loader.style.display = 'none'; |
| alert('Une erreur est survenue lors de l\'analyse de l\'image.'); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
