Update templates/svt.html

templates/svt.html

@@ -46,7 +46,7 @@
     <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-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-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-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 */
         }
 
@@ -82,7 +82,7 @@
         }
 
         @keyframes spin {
-            0% { transform: rotate(0deg); }
+            0% { transform: rotate(0deg)' ; }
             100% { transform: rotate(360deg); }
         }
 
@@ -225,14 +225,14 @@
             <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">
+                    <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" id="fileInput"
+                                <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
@@ -259,10 +259,8 @@
         <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">Objets Détectés</h3>
-                    <div id="detectedObjects" class="space-y-3">
-                        <!-- Les résultats seront insérés ici -->
-                    </div>
+                    <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>
@@ -338,78 +336,44 @@
             }
         });
 
-        // Gestion du formulaire
-        document.getElementById('uploadForm').addEventListener('submit', async function(e) {
+        // Gestion du formulaire avec Fetch API
+        document.getElementById('uploadForm').addEventListener('submit', function(e) {
             e.preventDefault();
 
-            const fileInput = document.getElementById('fileInput');
+            const formData = new FormData(this);
             const loader = document.getElementById('loader');
             const resultsSection = document.getElementById('results');
-            const detectedObjectsDiv = document.getElementById('detectedObjects');
+            const processedImage = document.getElementById('processedImage');
             const descriptionDiv = document.getElementById('description');
 
-            // Vérifier si un fichier a été sélectionné
-            if (!fileInput.files[0]) {
-                alert('Veuillez sélectionner une image.');
-                return;
-            }
-
-            // Afficher le loader
             loader.style.display = 'block';
 
-            // Simulation de l'analyse (à remplacer par votre API)
-            // Attendre 3 secondes pour simuler une analyse longue
-            await new Promise(resolve => setTimeout(resolve, 3000));
-
-            // Masquer le loader
-            loader.style.display = 'none';
-
-            // Afficher la section résultats avec une animation
-            resultsSection.classList.add('fade-in');
-
-            // Simulation des résultats (à remplacer par les résultats de votre API)
-            detectedObjectsDiv.innerHTML = `
-                <div class="space-y-2 animate-pulse">
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                        <span class="text-camo-brown">Bâtiments</span>
-                        <div class="w-32 bg-gray-200 rounded-full h-2">
-                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 85%"></div>
-                        </div>
-                    </div>
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                        <span class="text-camo-brown">Routes</span>
-                        <div class="w-32 bg-gray-200 rounded-full h-2">
-                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 70%"></div>
-                        </div>
-                    </div>
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                        <span class="text-camo-brown">Végétation</span>
-                        <div class="w-32 bg-gray-200 rounded-full h-2">
-                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 90%"></div>
-                        </div>
-                    </div>
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                        <span class="text-camo-brown">Eau</span>
-                        <div class="w-32 bg-gray-200 rounded-full h-2">
-                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 60%"></div>
-                        </div>
-                    </div>
-                    <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
-                        <span class="text-camo-brown">Véhicules</span>
-                        <div class="w-32 bg-gray-200 rounded-full h-2">
-                            <div class="bg-primary-camo h-2 rounded-full progress-bar" style="width: 50%"></div>
-                        </div>
-                    </div>
-                </div>
-            `;
-            descriptionDiv.innerHTML = "<p class='text-camo-brown'>Analyse détaillée de l'image satellite. La détection a permis d'identifier plusieurs types d'objets avec une grande précision.</p>";
-
-            // Animer les barres de progression
-            setTimeout(() => {
-                document.querySelectorAll('.progress-bar').forEach(bar => {
-                    bar.style.width = bar.parentElement.dataset.value || '75%';
-                });
-            }, 100);
+            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;
+
+                // Mettre à jour l'image traitée
+                processedImage.src = data.image_path;
+
+                // Mettre à jour la description
+                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>