Update templates/index.html

templates/index.html

@@ -5,6 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Générateur de Manga BD</title>
     <style>
+        /* ... (TOUT VOTRE CSS RESTE IDENTIQUE) ... */
         * {
             margin: 0;
             padding: 0;
@@ -217,6 +218,31 @@
             border: 2px solid #68d391;
         }
 
+        /* NOUVEAUX STYLES POUR LA GRILLE D'IMAGES */
+        .preview-section {
+            background: rgba(255, 255, 255, 0.95);
+            padding: 30px;
+            border-radius: 15px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+            margin-top: 30px;
+            display: none; /* Caché par défaut */
+        }
+
+        .image-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+            gap: 20px;
+        }
+
+        .image-grid img {
+            width: 100%;
+            height: auto;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+            object-fit: cover;
+            aspect-ratio: 2 / 3; /* Ratio commun pour les pages de manga */
+        }
+        
         @media (max-width: 768px) {
             .main-content {
                 grid-template-columns: 1fr;
@@ -241,6 +267,7 @@
         </div>
 
         <div class="main-content">
+            <!-- ... (La section input reste la même) ... -->
             <div class="input-section">
                 <h2>📝 Configuration du Manga</h2>
                 <textarea 
@@ -257,7 +284,6 @@
                     🚀 Générer le Manga
                 </button>
             </div>
-
             <div class="status-section">
                 <h2>📊 Statut de Génération</h2>
                 <div id="statusContainer">
@@ -268,7 +294,16 @@
                 </div>
             </div>
         </div>
+        
+        <!-- NOUVELLE SECTION POUR L'AFFICHAGE DES IMAGES -->
+        <div id="previewSection" class="preview-section">
+            <h2>🖼️ Prévisualisation des Pages</h2>
+            <div id="imageGrid" class="image-grid">
+                <!-- Les images générées apparaîtront ici -->
+            </div>
+        </div>
 
+        <!-- ... (La section exemple reste la même) ... -->
         <div class="example-section">
             <h2>📋 Format JSON Attendu</h2>
             <p style="margin-bottom: 20px;">
@@ -289,21 +324,29 @@
     </div>
 
     <script>
+        // ... (Les variables globales restent les mêmes) ...
         let currentTaskId = null;
         let statusInterval = null;
 
         const generateBtn = document.getElementById('generateBtn');
         const jsonInput = document.getElementById('jsonInput');
         const statusContainer = document.getElementById('statusContainer');
+        const previewSection = document.getElementById('previewSection');
+        const imageGrid = document.getElementById('imageGrid');
 
         generateBtn.addEventListener('click', async () => {
-            const jsonText = jsonInput.value.trim();
+            // ... (Cette fonction reste quasi identique, on ajoute juste un reset de l'affichage)
             
+            // Reset de l'interface
+            imageGrid.innerHTML = '';
+            previewSection.style.display = 'none';
+
+            const jsonText = jsonInput.value.trim();
             if (!jsonText) {
                 showAlert('Veuillez saisir une configuration JSON', 'error');
                 return;
             }
-
+            // ... (Le reste du code de la fonction est inchangé)
             let jsonData;
             try {
                 jsonData = JSON.parse(jsonText);
@@ -348,6 +391,7 @@
             }
         });
 
+        // La fonction startStatusPolling reste la même
         function startStatusPolling() {
             if (statusInterval) {
                 clearInterval(statusInterval);
@@ -378,6 +422,7 @@
             }, 2000); // Vérifier toutes les 2 secondes
         }
 
+        // MISE À JOUR MAJEURE DE CETTE FONCTION
         function updateStatusDisplay(status) {
             const container = statusContainer;
             
@@ -396,10 +441,10 @@
                     statusIcon = '🎨';
                     statusText = 'Génération en cours';
                     break;
-                case 'creating_pdf':
+                case 'creating_zip': // STATUT MIS À JOUR
                     statusClass = 'generating';
-                    statusIcon = '📄';
-                    statusText = 'Création du PDF';
+                    statusIcon = '🗜️'; // Icône de compression
+                    statusText = 'Création de l\'archive ZIP';
                     break;
                 case 'completed':
                     statusClass = 'completed';
@@ -413,6 +458,7 @@
                     break;
             }
 
+            // ... (La logique de la barre de progression reste la même)
             let progressHtml = '';
             if (status.total_pages && status.current_page) {
                 const progress = (status.current_page / status.total_pages) * 100;
@@ -431,16 +477,18 @@
             if (status.status === 'completed') {
                 downloadHtml = `
                     <a href="/download/${currentTaskId}" class="download-btn" style="width: 100%; text-align: center; margin-top: 15px;">
-                        📥 Télécharger le PDF
+                        📥 Télécharger l'archive ZIP
                     </a>
                 `;
             }
 
+            // ... (Le HTML pour l'erreur reste le même)
             let errorHtml = '';
             if (status.error) {
                 errorHtml = `<div class="alert alert-error">${status.error}</div>`;
             }
-
+            
+            // Affichage du statut
             container.innerHTML = `
                 <div class="status-card ${statusClass}">
                     <h3>${statusIcon} ${statusText}</h3>
@@ -452,15 +500,33 @@
                     ${downloadHtml}
                 </div>
             `;
+            
+            // NOUVELLE PARTIE : Affichage des images
+            if (status.image_urls && status.image_urls.length > 0) {
+                previewSection.style.display = 'block';
+                
+                status.image_urls.forEach(url => {
+                    // Vérifier si l'image n'est pas déjà affichée
+                    if (!document.querySelector(`img[src="${url}"]`)) {
+                        const img = document.createElement('img');
+                        img.src = url;
+                        img.alt = `Page générée pour la tâche ${currentTaskId}`;
+                        img.onload = () => img.style.opacity = 1; // Effet d'apparition
+                        img.style.opacity = 0;
+                        img.style.transition = 'opacity 0.5s';
+                        imageGrid.appendChild(img);
+                    }
+                });
+            }
         }
 
+        // ... (Le reste du script JS reste identique)
         function showAlert(message, type) {
             const alertClass = type === 'error' ? 'alert-error' : 'alert-success';
             const alertHtml = `<div class="alert ${alertClass}">${message}</div>`;
             
             statusContainer.innerHTML = alertHtml + statusContainer.innerHTML;
             
-            // Retirer l'alerte après 5 secondes
             setTimeout(() => {
                 const alert = statusContainer.querySelector('.alert');
                 if (alert) {
@@ -469,20 +535,18 @@
             }, 5000);
         }
 
-        // Nettoyer l'intervalle quand la page est fermée
         window.addEventListener('beforeunload', () => {
             if (statusInterval) {
                 clearInterval(statusInterval);
             }
         });
 
-        // Auto-formatter le JSON
         jsonInput.addEventListener('blur', () => {
             try {
                 const parsed = JSON.parse(jsonInput.value);
                 jsonInput.value = JSON.stringify(parsed, null, 2);
             } catch (error) {
-                // Ignorer les erreurs de parsing
+                // Ignorer les erreurs
             }
         });
     </script>