Update templates/index.html

templates/index.html

@@ -192,7 +192,7 @@
             object-fit: cover;
         }
         .preview-item .pdf-icon {
-            font-size: 3rem; /* Adjust as needed */
+            font-size: 3rem;
             color: var(--danger-color);
         }
         .preview-item span {
@@ -203,7 +203,6 @@
             text-align: center;
         }
 
-
         .button {
             width: 100%;
             padding: var(--spacing-unit);
@@ -230,13 +229,12 @@
         
         .clear-button {
             background-color: var(--danger-color);
-            margin-top: 0; /* No top margin if it follows directly */
+            margin-top: 0;
         }
         .clear-button:hover:not(:disabled) {
             background-color: var(--danger-hover);
         }
 
-
         .copy-button {
             background-color: var(--secondary-color);
         }
@@ -245,6 +243,23 @@
             background-color: var(--secondary-hover);
         }
 
+        .cooldown-notice {
+            background-color: #fff3cd;
+            border: 1px solid #ffeaa7;
+            border-radius: 0.5rem;
+            padding: var(--spacing-unit);
+            margin: var(--spacing-unit) 0;
+            text-align: center;
+            color: #856404;
+            font-weight: 500;
+        }
+
+        .cooldown-timer {
+            font-size: 1.2rem;
+            color: #d63031;
+            font-weight: bold;
+        }
+
         #solving-container {
             display: none;
             background-color: #f9f9f9;
@@ -383,6 +398,10 @@
             </div>
         </div>
 
+        <div id="cooldown-notice" class="cooldown-notice" style="display: none;">
+            ⏰ Veuillez attendre <span id="cooldown-timer" class="cooldown-timer">2:00</span> avant de pouvoir soumettre à nouveau.
+        </div>
+
         <div id="upload-section" class="upload-section">
             <div class="upload-icon">📤</div>
             <p>Cliquez ou glissez-déposez vos images et/ou 1 fichier PDF ici</p>
@@ -422,13 +441,66 @@
             const copyButton = document.getElementById('copy-button');
             const statusElement = document.getElementById('status');
             const loadingText = document.getElementById('loading-text');
+            const cooldownNotice = document.getElementById('cooldown-notice');
+            const cooldownTimer = document.getElementById('cooldown-timer');
             
-            let selectedFiles = []; // Tableau pour stocker les fichiers sélectionnés
+            let selectedFiles = [];
+            let cooldownEndTime = 0;
+            let cooldownInterval = null;
+            
+            // Vérifier le cooldown au chargement de la page
+            checkCooldownOnLoad();
             
             window.selectStyle = function(style) {
                 document.getElementById(`style-${style}`).checked = true;
             };
             
+            function checkCooldownOnLoad() {
+                const savedCooldownEndTime = localStorage.getItem('mariamCooldownEndTime');
+                if (savedCooldownEndTime) {
+                    const endTime = parseInt(savedCooldownEndTime);
+                    const now = Date.now();
+                    if (now < endTime) {
+                        cooldownEndTime = endTime;
+                        startCooldownTimer();
+                    } else {
+                        localStorage.removeItem('mariamCooldownEndTime');
+                    }
+                }
+            }
+            
+            function startCooldown() {
+                cooldownEndTime = Date.now() + (2 * 60 * 1000); // 2 minutes
+                localStorage.setItem('mariamCooldownEndTime', cooldownEndTime.toString());
+                startCooldownTimer();
+            }
+            
+            function startCooldownTimer() {
+                cooldownNotice.style.display = 'block';
+                solveButton.disabled = true;
+                
+                cooldownInterval = setInterval(() => {
+                    const now = Date.now();
+                    const remainingTime = Math.max(0, cooldownEndTime - now);
+                    
+                    if (remainingTime <= 0) {
+                        clearInterval(cooldownInterval);
+                        cooldownNotice.style.display = 'none';
+                        localStorage.removeItem('mariamCooldownEndTime');
+                        updateButtonsState(); // Réactiver le bouton si des fichiers sont sélectionnés
+                        return;
+                    }
+                    
+                    const minutes = Math.floor(remainingTime / 60000);
+                    const seconds = Math.floor((remainingTime % 60000) / 1000);
+                    cooldownTimer.textContent = `${minutes}:${seconds.toString().padStart(2, '0')}`;
+                }, 1000);
+            }
+            
+            function isCooldownActive() {
+                return Date.now() < cooldownEndTime;
+            }
+            
             uploadSection.addEventListener('click', () => fileInput.click());
             
             uploadSection.addEventListener('dragover', (e) => {
@@ -464,15 +536,14 @@
 
                 newFiles.forEach(file => {
                     if (file.type.startsWith('image/')) {
-                        if (!selectedFiles.some(sf => sf.name === file.name && sf.size === file.size)) { // Évite les doublons
+                        if (!selectedFiles.some(sf => sf.name === file.name && sf.size === file.size)) {
                              selectedFiles.push(file);
                         }
                     } else if (file.type === 'application/pdf') {
                         if (!pdfAlreadySelected) {
-                            // Supprimer tout PDF existant avant d'ajouter le nouveau
                             selectedFiles = selectedFiles.filter(f => f.type !== 'application/pdf');
                             selectedFiles.push(file);
-                            pdfAlreadySelected = true; // Marquer qu'un PDF est maintenant sélectionné
+                            pdfAlreadySelected = true;
                         } else {
                             alert('Vous ne pouvez sélectionner qu\'un seul fichier PDF.');
                         }
@@ -489,7 +560,7 @@
             }
 
             function updateFilePreviews() {
-                filePreviewArea.innerHTML = ''; // Clear previous previews
+                filePreviewArea.innerHTML = '';
 
                 if (selectedFiles.length === 0) {
                     filePreviewArea.style.display = 'none';
@@ -504,7 +575,6 @@
                     const fileNameSpan = document.createElement('span');
                     fileNameSpan.textContent = file.name.length > 15 ? file.name.substring(0,12) + "..." : file.name;
 
-
                     if (file.type.startsWith('image/')) {
                         const img = document.createElement('img');
                         const reader = new FileReader();
@@ -516,7 +586,7 @@
                     } else if (file.type === 'application/pdf') {
                         const pdfIcon = document.createElement('div');
                         pdfIcon.classList.add('pdf-icon');
-                        pdfIcon.textContent = '📄'; // Ou une icône SVG/FontAwesome
+                        pdfIcon.textContent = '📄';
                         previewItem.appendChild(pdfIcon);
                     }
                     previewItem.appendChild(fileNameSpan);
@@ -525,10 +595,14 @@
             }
             
             function updateButtonsState() {
-                if (selectedFiles.length > 0) {
+                if (selectedFiles.length > 0 && !isCooldownActive()) {
                     solveButton.disabled = false;
                     solveButton.textContent = `🔍 Résoudre (${selectedFiles.length} fichier(s))`;
                     clearFilesButton.style.display = 'block';
+                } else if (selectedFiles.length > 0 && isCooldownActive()) {
+                    solveButton.disabled = true;
+                    solveButton.textContent = `🔍 Résoudre (${selectedFiles.length} fichier(s))`;
+                    clearFilesButton.style.display = 'block';
                 } else {
                     solveButton.disabled = true;
                     solveButton.textContent = '🔍 Résoudre';
@@ -538,7 +612,7 @@
 
             clearFilesButton.addEventListener('click', () => {
                 selectedFiles = [];
-                fileInput.value = ''; // Important pour permettre de re-sélectionner les mêmes fichiers
+                fileInput.value = '';
                 updateFilePreviews();
                 updateButtonsState();
                 solvingContainer.style.display = 'none';
@@ -546,10 +620,13 @@
             });
             
             solveButton.addEventListener('click', () => {
-                if (selectedFiles.length === 0) return;
+                if (selectedFiles.length === 0 || isCooldownActive()) return;
                 
                 const selectedStyle = document.querySelector('input[name="resolution-style"]:checked').value;
                 
+                // Démarrer le cooldown immédiatement
+                startCooldown();
+                
                 solveButton.disabled = true;
                 solveButton.textContent = '⏳ Traitement...';
                 solvingContainer.style.display = 'block';
@@ -561,14 +638,9 @@
                 
                 const formData = new FormData();
                 selectedFiles.forEach(file => {
-                    formData.append('user_files', file); // Envoyer chaque fichier sous la clé 'user_files'
+                    formData.append('user_files', file);
                 });
                 formData.append('style', selectedStyle);
-                
-                // Pour le débogage : afficher le contenu de FormData
-                // for (let [key, value] of formData.entries()) {
-                //     console.log(`${key}: ${value.name || value}`);
-                // }
 
                 fetch('/solve', {
                     method: 'POST',
@@ -595,7 +667,7 @@
                         
                         if (data.error) {
                             handleError(data.error);
-                            eventSource.close(); // Important de fermer en cas d'erreur finale
+                            eventSource.close();
                             return;
                         }
                         
@@ -633,8 +705,7 @@
                     case 'completed':
                         statusElement.className = 'status completed';
                         statusElement.textContent = 'Traitement terminé avec succès ! 🎉';
-                        responseDiv.innerHTML = data.response;
-                        renderMathInElement(responseDiv);
+                        responseDiv.innerHTML = '<p style="color: #2ecc71; font-size: 1.2rem; text-align: center; font-weight: bold;">📄 Votre PDF est disponible sur Telegram</p>';
                         showResponse();
                         break;
                     case 'error':
@@ -646,14 +717,9 @@
             function showResponse() {
                 responseContainer.style.display = 'block';
                 loadingText.style.display = 'none';
-                // Ne pas réactiver le bouton ici si on veut attendre que l'utilisateur efface les fichiers
-                // solveButton.disabled = false; 
-                // solveButton.textContent = `🔍 Résoudre (${selectedFiles.length} fichier(s))`;
-                // Laisser le bouton "Effacer les fichiers" comme principal moyen de recommencer
             }
             
             function handleEventSourceError(taskId) {
-                 // Essayer de récupérer l'état final de la tâche
                 fetch('/task/' + taskId)
                     .then(response => {
                         if (!response.ok) {
@@ -670,7 +736,6 @@
                         } else if (taskData.status === 'error' || taskData.error) {
                             handleError(taskData.error || 'Une erreur est survenue lors du traitement de la tâche.');
                         } else {
-                             // Si la tâche n'est pas terminée ou en erreur, mais que le flux est perdu.
                             handleError('La connexion au flux a été perdue. Vérifiez Telegram ou réessayez plus tard.');
                         }
                     })
@@ -690,7 +755,6 @@
                         }, 2000);
                     })
                     .catch(() => {
-                        // Fallback pour les anciens navigateurs
                         const range = document.createRange();
                         range.selectNode(responseDiv);
                         window.getSelection().removeAllRanges();