V3

app/static/js/script.js

@@ -1,57 +1,90 @@
 document.addEventListener('DOMContentLoaded', () => {
+    console.log("DOM entièrement chargé et analysé. Initialisation du script.");
+
     const uploadForm = document.getElementById('upload-form');
     const imageFilesInput = document.getElementById('image-files');
     const messageArea = document.getElementById('message-area');
-    // const fileList = document.getElementById('file-list'); // N'est plus utilisé pour afficher les résultats
     
     const progressContainer = document.getElementById('progress-container');
     const progressBarFill = document.getElementById('progress-bar');
     const progressTextElement = document.getElementById('progress-text');
 
+    // Vérification initiale des éléments DOM essentiels
+    if (!uploadForm) console.error("ERREUR CRITIQUE: L'élément 'upload-form' est introuvable dans le HTML.");
+    if (!imageFilesInput) console.error("ERREUR CRITIQUE: L'élément 'image-files' est introuvable.");
+    if (!messageArea) console.error("ERREUR CRITIQUE: L'élément 'message-area' est introuvable.");
+    if (!progressContainer) console.error("ERREUR CRITIQUE: L'élément 'progress-container' est introuvable.");
+    if (!progressBarFill) console.error("ERREUR CRITIQUE: L'élément 'progress-bar' est introuvable.");
+    if (!progressTextElement) console.error("ERREUR CRITIQUE: L'élément 'progress-text' est introuvable.");
+
+    if (!uploadForm || !imageFilesInput || !messageArea || !progressContainer || !progressBarFill || !progressTextElement) {
+        const errorMsg = "Un ou plusieurs éléments d'interface utilisateur sont manquants. L'application ne peut pas fonctionner correctement. Veuillez vérifier les IDs dans les fichiers HTML et JS.";
+        console.error(errorMsg);
+        if (messageArea) { // Tenter d'afficher une erreur à l'utilisateur si possible
+            messageArea.textContent = errorMsg;
+            messageArea.className = 'error';
+        }
+        // Afficher une alerte pour être sûr que l'utilisateur voit le problème critique
+        alert(errorMsg); 
+        return; // Arrêter l'exécution si les éléments critiques ne sont pas là
+    }
+    console.log("Tous les éléments DOM principaux ont été trouvés.");
+
     uploadForm.addEventListener('submit', async (event) => {
-        event.preventDefault();
-        messageArea.textContent = '';
-        messageArea.className = ''; // Effacer les classes précédentes [cite: 134]
-        // fileList.innerHTML = ''; // Plus nécessaire [cite: 134]
+        console.log("Événement 'submit' du formulaire capturé.");
+        event.preventDefault(); 
+        console.log("event.preventDefault() a été appelé pour empêcher la soumission standard.");
 
-        const files = imageFilesInput.files;
-        const numFiles = files.length;
+        try {
+            messageArea.textContent = '';
+            messageArea.className = ''; 
 
-        if (numFiles === 0) {
-            messageArea.textContent = 'Veuillez sélectionner au moins une image.';
-            messageArea.classList.add('error'); // [cite: 135]
-            return;
-        }
+            const files = imageFilesInput.files;
+            const numFiles = files.length;
+            console.log(`Nombre de fichiers sélectionnés par l'utilisateur : ${numFiles}`);
+
+            if (numFiles === 0) {
+                messageArea.textContent = 'Veuillez sélectionner au moins une image.';
+                messageArea.classList.add('error');
+                console.warn("Aucun fichier sélectionné, soumission annulée par le script.");
+                return;
+            }
 
-        progressTextElement.textContent = `Préparation de ${numFiles} image(s)...`;
-        progressBarFill.style.width = '0%';
-        progressBarFill.classList.remove('determinate'); // Activer l'animation indéterminée
-        progressBarFill.textContent = '';
-        progressContainer.style.display = 'block';
+            console.log("Configuration de l'affichage de la barre de progression...");
+            progressTextElement.textContent = `Préparation de ${numFiles} image(s)...`;
+            progressBarFill.style.width = '0%';
+            progressBarFill.classList.remove('determinate'); 
+            progressBarFill.textContent = '';
+            progressContainer.style.display = 'block';
+            console.log("Barre de progression configurée et affichée.");
 
-        const formData = new FormData();
-        for (const file of files) { // [cite: 138]
-            formData.append('files', file); // [cite: 139]
-        }
+            const formData = new FormData();
+            for (const file of files) {
+                formData.append('files', file);
+            }
+            console.log("FormData construit avec les fichiers.");
 
-        try {
             progressTextElement.textContent = `Traitement de ${numFiles} image(s) en cours, veuillez patienter...`;
+            console.log("Début de la requête fetch vers l'API /api/upload-images/...");
             
             const response = await fetch('/api/upload-images/', {
                 method: 'POST',
                 body: formData,
             });
+            console.log(`Réponse reçue du serveur avec le statut : ${response.status} ${response.statusText}`);
 
             if (response.ok) {
-                // Le serveur renvoie un fichier ZIP
+                console.log("Réponse OK (statut 2xx). Traitement du blob ZIP en cours...");
                 const blob = await response.blob();
                 const contentDisposition = response.headers.get('content-disposition');
-                let filename = "captions.zip"; // Nom par défaut
+                let filename = "captions_output.zip"; // Nom par défaut
                 if (contentDisposition) {
                     const filenameMatch = contentDisposition.match(/filename="?(.+)"?/i);
-                    if (filenameMatch && filenameMatch.length === 2)
+                    if (filenameMatch && filenameMatch.length === 2) {
                         filename = filenameMatch[1];
+                    }
                 }
+                console.log(`Nom du fichier ZIP à télécharger (extrait des en-têtes ou par défaut) : ${filename}`);
 
                 const link = document.createElement('a');
                 link.href = URL.createObjectURL(blob);
@@ -59,33 +92,44 @@ document.addEventListener('DOMContentLoaded', () => {
                 document.body.appendChild(link);
                 link.click();
                 document.body.removeChild(link);
-                URL.revokeObjectURL(link.href); // Libérer l'objet URL
+                URL.revokeObjectURL(link.href); 
+                console.log("Téléchargement du fichier ZIP initié via un clic simulé.");
 
                 messageArea.textContent = `${numFiles} image(s) traitée(s). Le fichier ZIP '${filename}' est en cours de téléchargement.`;
                 messageArea.classList.add('success');
                 
                 progressBarFill.style.width = '100%';
-                progressBarFill.classList.add('determinate'); // Stopper l'animation
+                progressBarFill.classList.add('determinate'); // Arrêter l'animation indéterminée
                 progressBarFill.textContent = 'Terminé !';
                 progressTextElement.textContent = "Traitement terminé avec succès !";
-
+                console.log("Interface utilisateur mise à jour pour indiquer le succès et la fin du traitement.");
 
             } else {
-                // Gérer les erreurs HTTP (ex: 400, 401, 500, 503)
-                const errorResult = await response.json().catch(() => null); // Essayer de parser JSON, sinon null
-                if (errorResult && errorResult.detail) {
-                    messageArea.textContent = `Erreur: ${errorResult.detail}`;
-                } else {
-                    messageArea.textContent = `Une erreur est survenue (code: ${response.status}). Veuillez réessayer.`;
+                console.error(`Erreur HTTP côté serveur : ${response.status} ${response.statusText}`);
+                // Essayer de lire le corps de l'erreur, qui pourrait être du JSON ou du texte brut.
+                let errorDetail = `Erreur ${response.status}.`;
+                try {
+                    const errorResult = await response.json(); // Tenter de parser comme JSON
+                    if (errorResult && errorResult.detail) {
+                        errorDetail = errorResult.detail;
+                    }
+                } catch (e) {
+                    // Si ce n'est pas du JSON, tenter de lire comme texte brut
+                    const errorText = await response.text().catch(() => "Impossible de lire le corps de l'erreur du serveur.");
+                    errorDetail += ` ${errorText.substring(0, 300)}`; // Limiter la longueur pour l'affichage
                 }
+                
+                messageArea.textContent = `Une erreur est survenue : ${errorDetail}`;
+                console.error(`Détail de l'erreur du serveur : ${errorDetail}`);
                 messageArea.classList.add('error');
-                progressContainer.style.display = 'none'; // Cacher la barre en cas d'erreur
+                if (progressContainer) progressContainer.style.display = 'none'; 
             }
         } catch (error) {
-            console.error('Upload error:', error); // [cite: 149]
-            messageArea.textContent = 'Erreur de connexion ou le serveur ne répond pas. Vérifiez la console du navigateur et du serveur.'; // [cite: 148]
-            messageArea.classList.add('error'); // [cite: 148]
-            progressContainer.style.display = 'none'; // Cacher la barre
+            console.error('Une erreur globale est survenue dans le gestionnaire de soumission du formulaire (try...catch externe) :', error);
+            messageArea.textContent = 'Une erreur critique est survenue dans le script de la page. Veuillez vérifier la console du navigateur pour plus de détails.';
+            messageArea.classList.add('error');
+            if (progressContainer) progressContainer.style.display = 'none'; // Masquer la barre en cas d'erreur grave
         }
     });
+    console.log("Le gestionnaire d'événement 'submit' a été attaché au formulaire.");
 });

app/templates/index.html

@@ -15,22 +15,26 @@
     </header>
     <main>
         <section id="upload-section">
-            <h2>Téléverser des Images</h2> <form id="upload-form" enctype="multipart/form-data">
+            <h2>Téléverser des Images</h2>
+            <form id="upload-form" enctype="multipart/form-data">
                 <input type="file" id="image-files" name="files" multiple accept="image/*">
                 <button type="submit">Générer les Descriptions</button>
             </form>
-            <div id="progress-container" style="display:none;"> <p id="progress-text">Traitement des images en cours...</p>
+            <div id="progress-container" style="display:none;">
+                <p id="progress-text">Traitement des images en cours...</p>
                 <div class="progress-bar-wrapper">
                     <div id="progress-bar" class="progress-bar-fill"></div>
                 </div>
             </div>
         </section>
         <section id="results-section">
-            <h2>Résultats</h2> <div id="message-area"></div>
-            </section>
+            <h2>Résultats</h2>
+            <div id="message-area"></div>
+        </section>
     </main>
     <footer>
-        <p>&copy; 2025 Votre Application AutoCaption</p> </footer>
+        <p>&copy; 2025 Votre Application AutoCaption</p>
+    </footer>
     <script src="{{ url_for('static', path='/js/script.js') }}"></script>
 </body>
 </html>