Update templates/index.html

templates/index.html

@@ -8,292 +8,337 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/contrib/auto-render.min.js"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.7/katex.min.css">
     <style>
+        :root {
+            --primary-color: #3498db;
+            --primary-hover: #2980b9;
+            --secondary-color: #2ecc71;
+            --secondary-hover: #27ae60;
+            --background-color: #f4f7f6;
+            --text-color: #333;
+            --border-color: #e0e0e0;
+            --shadow: 0 4px 15px rgba(0,0,0,0.1);
+            --spacing-unit: 1rem;
+        }
+
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            font-family: 'Segoe UI', system-ui, sans-serif;
             max-width: 800px;
             margin: 0 auto;
-            padding: 20px;
+            padding: calc(var(--spacing-unit) * 2);
             line-height: 1.6;
-            background-color: #f4f7f6; /* Fond légèrement gris */
-            color: #333;
+            background-color: var(--background-color);
+            color: var(--text-color);
         }
-        h1 {
+
+        .header {
             text-align: center;
-            color: #2c3e50; /* Bleu foncé */
-            margin-bottom: 10px;
-            font-size: 2.5em;
+            margin-bottom: calc(var(--spacing-unit) * 2);
         }
-        .subtitle {
-            text-align: center;
+
+        .header h1 {
+            font-size: 2.5rem;
+            color: #2c3e50;
+            margin-bottom: calc(var(--spacing-unit) * 0.5);
+        }
+
+        .header .subtitle {
+            font-size: 1.1rem;
             color: #555;
-            margin-bottom: 20px;
-            font-size: 1.1em;
         }
 
         .telegram-join-button-container {
             text-align: center;
-            margin-bottom: 30px;
+            margin-bottom: calc(var(--spacing-unit) * 2);
         }
 
         .telegram-button {
-            background-color: #0088cc; /* Bleu Telegram */
+            display: inline-block;
+            background-color: #0088cc;
             color: white;
-            border: none;
-            padding: 12px 25px;
-            text-align: center;
+            padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
+            border-radius: 0.5rem;
             text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            cursor: pointer;
-            border-radius: 8px;
-            transition: background-color 0.3s, transform 0.2s;
+            transition: all 0.3s ease;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
+
         .telegram-button:hover {
-            background-color: #0077b3;
             transform: translateY(-2px);
-        }
-        .telegram-button:active {
-            transform: translateY(0px);
+            background-color: #006699;
         }
 
         .container {
-            display: flex;
-            flex-direction: column;
-            gap: 25px;
-            background-color: #ffffff;
-            padding: 30px;
-            border-radius: 12px;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+            background-color: white;
+            padding: calc(var(--spacing-unit) * 2);
+            border-radius: 1rem;
+            box-shadow: var(--shadow);
         }
-        
+
         .style-selection {
             background-color: #f9f9f9;
-            padding: 20px;
-            border-radius: 10px;
-            border: 1px solid #e0e0e0;
-            margin-bottom: 15px;
+            padding: calc(var(--spacing-unit) * 1.5);
+            border-radius: 0.75rem;
+            border: 1px solid var(--border-color);
+            margin-bottom: calc(var(--spacing-unit) * 1.5);
         }
-        
+
         .style-selection h3 {
-            margin: 0 0 15px 0;
+            margin-bottom: var(--spacing-unit);
             color: #2c3e50;
-            font-size: 1.2em;
+            font-size: 1.2rem;
         }
-        
+
         .radio-group {
             display: flex;
             flex-direction: column;
-            gap: 12px;
+            gap: var(--spacing-unit);
         }
-        
+
         .radio-option {
             display: flex;
-            align-items: center;
-            gap: 10px;
-            padding: 10px;
-            border-radius: 6px;
+            align-items: flex-start;
+            padding: calc(var(--spacing-unit) * 0.75);
+            border-radius: 0.5rem;
             transition: background-color 0.2s;
             cursor: pointer;
+            border: 1px solid transparent;
         }
-        
+
         .radio-option:hover {
             background-color: #f0f4f8;
+            border-color: var(--primary-color);
         }
-        
+
         .radio-option input[type="radio"] {
-            width: 18px;
-            height: 18px;
-            accent-color: #3498db;
+            margin-top: 0.25rem;
+            margin-right: calc(var(--spacing-unit) * 0.75);
+            width: 1.25rem;
+            height: 1.25rem;
+            accent-color: var(--primary-color);
         }
-        
-        .radio-option label {
-            cursor: pointer;
+
+        .radio-content {
+            flex: 1;
+        }
+
+        .radio-label {
             font-weight: 500;
+            margin-bottom: calc(var(--spacing-unit) * 0.25);
+            display: block;
         }
-        
+
         .radio-description {
-            font-size: 0.9em;
+            font-size: 0.9rem;
             color: #666;
-            margin-left: 28px;
-            margin-top: -8px;
         }
-        
+
         .upload-section {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 30px;
-            border: 3px dashed #bdc3c7; /* Gris clair */
-            border-radius: 10px;
+            border: 3px dashed var(--border-color);
+            padding: calc(var(--spacing-unit) * 2);
+            text-align: center;
+            border-radius: 0.75rem;
             cursor: pointer;
             transition: all 0.3s ease;
-            background-color: #ecf0f1; /* Gris très clair */
-            min-height: 150px;
+            background-color: #f8f9fa;
+            margin: calc(var(--spacing-unit) * 1.5) 0;
         }
+
         .upload-section:hover {
-            border-color: #3498db; /* Bleu lors du survol */
+            border-color: var(--primary-color);
             background-color: #e8f4fb;
         }
-        .upload-section p {
-            margin: 0;
-            font-size: 1.1em;
-            color: #555;
-        }
+
         .upload-icon {
-            font-size: 2.5em;
-            color: #3498db;
-            margin-bottom: 10px;
+            font-size: 2.5rem;
+            margin-bottom: var(--spacing-unit);
+            color: var(--primary-color);
         }
+
         #file-input {
             display: none;
         }
+
         .preview-container {
-            width: 100%;
-            text-align: center;
-            margin-top: 15px;
+            margin-top: var(--spacing-unit);
         }
+
         #image-preview {
             max-width: 100%;
             max-height: 300px;
             display: none;
-            border-radius: 8px;
-            border: 1px solid #ddd;
-            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-        }
-        #solving-container {
-            display: none;
-            background-color: #f9f9f9;
-            padding: 25px;
-            border-radius: 10px;
-            border: 1px solid #e0e0e0;
-        }
-        .response-container {
-            margin-top: 20px;
-            padding: 25px;
-            border: 1px solid #d1d8dd;
-            border-radius: 10px;
-            background-color: #fff;
-            display: none;
-            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
-        }
-        #response {
-            background-color: #fdfdfd;
-            padding: 15px;
-            border-radius: 6px;
-            border: 1px solid #eee;
-            min-height: 50px;
-            white-space: pre-wrap; /* Pour conserver les sauts de ligne */
-            word-wrap: break-word; /* Pour couper les mots longs */
-        }
-        .thinking { /* Style pour le texte "Mariam réfléchit..." */
-            color: #3498db; /* Bleu */
-            font-style: italic;
-            font-weight: bold;
+            border-radius: 0.5rem;
+            border: 1px solid var(--border-color);
         }
+
         .button {
-            background-color: #3498db; /* Bleu primaire */
-            color: white;
-            border: none;
-            padding: 12px 25px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 10px 0; /* Centré et prend toute la largeur */
             width: 100%;
-            box-sizing: border-box;
+            padding: var(--spacing-unit);
+            border: none;
+            border-radius: 0.5rem;
+            font-size: 1rem;
             cursor: pointer;
-            border-radius: 8px;
-            transition: background-color 0.3s, transform 0.2s;
+            transition: all 0.3s ease;
+            margin: var(--spacing-unit) 0;
+            background-color: var(--primary-color);
+            color: white;
             box-shadow: 0 2px 4px rgba(0,0,0,0.1);
         }
-        .button:hover {
-            background-color: #2980b9; /* Bleu plus foncé au survol */
+
+        .button:hover:not(:disabled) {
             transform: translateY(-2px);
+            background-color: var(--primary-hover);
         }
-        .button:active {
-            transform: translateY(0px);
-        }
+
         .button:disabled {
-            background-color: #bdc3c7; /* Gris pour désactivé */
+            background-color: #bdc3c7;
             cursor: not-allowed;
-            transform: translateY(0px);
-            box-shadow: none;
         }
+
         .copy-button {
-            background-color: #2ecc71; /* Vert pour copier */
-            margin-top: 15px;
+            background-color: var(--secondary-color);
         }
+
         .copy-button:hover {
-            background-color: #27ae60; /* Vert plus foncé */
+            background-color: var(--secondary-hover);
+        }
+
+        #solving-container {
+            display: none;
+            background-color: #f9f9f9;
+            padding: calc(var(--spacing-unit) * 1.5);
+            border-radius: 0.75rem;
+            border: 1px solid var(--border-color);
+            margin-top: calc(var(--spacing-unit) * 1.5);
         }
+
+        .status {
+            text-align: center;
+            margin-bottom: var(--spacing-unit);
+            font-weight: bold;
+            color: #2c3e50;
+        }
+
+        .status.error { color: #e74c3c; }
+        .status.completed { color: #2ecc71; }
+
         .telegram-notice {
-            background-color: #eaf5ff; /* Bleu très clair */
-            border-left: 5px solid #3498db; /* Bordure bleue */
-            padding: 12px 15px;
-            margin: 15px 0;
-            font-size: 0.95em;
-            border-radius: 0 5px 5px 0;
+            background-color: #eaf5ff;
+            border-left: 5px solid var(--primary-color);
+            padding: var(--spacing-unit);
+            margin: var(--spacing-unit) 0;
+            border-radius: 0 0.5rem 0.5rem 0;
+        }
+
+        .response-container {
+            display: none;
+            margin-top: calc(var(--spacing-unit) * 1.5);
+            padding: calc(var(--spacing-unit) * 1.5);
+            background-color: white;
+            border-radius: 0.75rem;
+            border: 1px solid var(--border-color);
         }
+
+        #response {
+            background-color: #fdfdfd;
+            padding: var(--spacing-unit);
+            border-radius: 0.5rem;
+            border: 1px solid #eee;
+            min-height: 50px;
+            white-space: pre-wrap;
+            word-wrap: break-word;
+        }
+
         .loading {
             text-align: center;
             font-style: italic;
-            margin: 15px 0;
             color: #555;
+            margin: var(--spacing-unit) 0;
         }
+
         .loading::before {
             content: "⏳ ";
         }
-        .status {
-            text-align: center;
-            margin-bottom: 15px;
-            font-weight: bold;
-            font-size: 1.1em;
-            color: #2c3e50;
-        }
-        .status small {
-            font-weight: normal;
-            color: #7f8c8d; /* Gris */
-            font-size: 0.9em;
-            display: block;
-            margin-top: 5px;
-        }
-        /* Styles pour les messages d'erreur/succès dans le status */
-        .status.error { color: #e74c3c; } /* Rouge */
-        .status.completed { color: #2ecc71; } /* Vert */
 
+        @media (max-width: 768px) {
+            :root {
+                --spacing-unit: 0.875rem;
+            }
+
+            body {
+                padding: var(--spacing-unit);
+            }
+
+            .header h1 {
+                font-size: 1.75rem;
+            }
+
+            .container {
+                padding: var(--spacing-unit);
+            }
+
+            .radio-option {
+                padding: calc(var(--spacing-unit) * 0.5);
+            }
+
+            .radio-content {
+                font-size: 0.95rem;
+            }
+
+            .radio-description {
+                font-size: 0.85rem;
+            }
+
+            .upload-section {
+                padding: var(--spacing-unit);
+            }
+
+            .telegram-button {
+                padding: calc(var(--spacing-unit) * 0.75) var(--spacing-unit);
+                font-size: 0.95rem;
+            }
+        }
     </style>
 </head>
 <body>
-    <h1>🖼️ Science ( Math, physique, chimie)🧠</h1>
-    <p class="subtitle">Avec Mariam, votre assistante IA</p>
+    <div class="header">
+        <h1>🖼️ Science (Math, Physique, Chimie) 🧠</h1>
+        <p class="subtitle">Avec Mariam, votre assistante IA</p>
+    </div>
 
     <div class="telegram-join-button-container">
         <a href="https://t.me/+ic4zemy1E1k0MzQ0" target="_blank" class="telegram-button">
-            🚀 Rejoindre le Groupe Telegram pour obtenir le PDF 
+            🚀 Rejoindre le Groupe Telegram pour obtenir le PDF
         </a>
     </div>
-    
+
     <div class="container">
         <div class="style-selection">
             <h3>🎨 Choisissez le style de résolution</h3>
             <div class="radio-group">
                 <div class="radio-option" onclick="selectStyle('light')">
                     <input type="radio" id="style-light" name="resolution-style" value="light">
-                    <label for="style-light">📝 Résolution Light</label>
+                    <div class="radio-content">
+                        <label class="radio-label" for="style-light">📝 Résolution Light</label>
+                        <div class="radio-description">Format simple et épuré, idéal pour une lecture rapide</div>
+                    </div>
                 </div>
-                <div class="radio-description">Format simple et épuré, idéal pour une lecture rapide</div>
                 
                 <div class="radio-option" onclick="selectStyle('colorful')">
                     <input type="radio" id="style-colorful" name="resolution-style" value="colorful" checked>
-                    <label for="style-colorful">🌈 Résolution Colorée</label>
+                    <div class="radio-content">
+                        <label class="radio-label" for="style-colorful">🌈 Résolution Colorée</label>
+                        <div class="radio-description">Format richement formaté avec couleurs, boîtes et mise en page élégante</div>
+                    </div>
                 </div>
-                <div class="radio-description">Format richement formaté avec couleurs, boîtes et mise en page élégante</div>
             </div>
         </div>
-        
+
         <div id="upload-section" class="upload-section">
             <div class="upload-icon">📤</div>
             <p>Cliquez ou glissez-déposez une image ici</p>
@@ -302,9 +347,9 @@
                 <img id="image-preview" src="#" alt="Aperçu de l'image">
             </div>
         </div>
-        
+
         <button id="solve-button" class="button" disabled>🔍 Résoudre</button>
-        
+
         <div id="solving-container">
             <div class="status" id="status">En attente de résolution...</div>
             <div class="telegram-notice">
@@ -327,14 +372,13 @@
             const solveButton = document.getElementById('solve-button');
             const solvingContainer = document.getElementById('solving-container');
             const responseContainer = document.getElementById('response-container');
-            const responseDiv = document.getElementById('response'); // Renommé pour clarté
+            const responseDiv = document.getElementById('response');
             const copyButton = document.getElementById('copy-button');
             const statusElement = document.getElementById('status');
             const loadingText = document.getElementById('loading-text');
             
             let selectedFile = null;
             
-            // Fonction pour sélectionner le style de résolution
             window.selectStyle = function(style) {
                 document.getElementById(`style-${style}`).checked = true;
             };
@@ -343,19 +387,19 @@
             
             uploadSection.addEventListener('dragover', (e) => {
                 e.preventDefault();
-                uploadSection.style.borderColor = '#3498db';
+                uploadSection.style.borderColor = 'var(--primary-color)';
                 uploadSection.style.backgroundColor = '#e8f4fb';
             });
             
             uploadSection.addEventListener('dragleave', () => {
-                uploadSection.style.borderColor = '#bdc3c7';
-                uploadSection.style.backgroundColor = '#ecf0f1';
+                uploadSection.style.borderColor = 'var(--border-color)';
+                uploadSection.style.backgroundColor = '#f8f9fa';
             });
             
             uploadSection.addEventListener('drop', (e) => {
                 e.preventDefault();
-                uploadSection.style.borderColor = '#bdc3c7';
-                uploadSection.style.backgroundColor = '#ecf0f1';
+                uploadSection.style.borderColor = 'var(--border-color)';
+                uploadSection.style.backgroundColor = '#f8f9fa';
                 
                 if (e.dataTransfer.files.length) {
                     handleFileSelection(e.dataTransfer.files[0]);
@@ -376,7 +420,7 @@
                 
                 selectedFile = file;
                 solveButton.disabled = false;
-                solveButton.textContent = '🔍 Résoudre'; // Réinitialiser le texte du bouton
+                solveButton.textContent = '🔍 Résoudre';
                 
                 const reader = new FileReader();
                 reader.onload = (e) => {
@@ -385,7 +429,6 @@
                 };
                 reader.readAsDataURL(file);
                 
-                // Cacher la zone de résolution si une nouvelle image est sélectionnée
                 solvingContainer.style.display = 'none';
                 responseContainer.style.display = 'none';
             }
@@ -393,21 +436,20 @@
             solveButton.addEventListener('click', () => {
                 if (!selectedFile) return;
                 
-                // Récupérer le style sélectionné
                 const selectedStyle = document.querySelector('input[name="resolution-style"]:checked').value;
                 
                 solveButton.disabled = true;
                 solveButton.textContent = '⏳ Traitement...';
                 solvingContainer.style.display = 'block';
                 responseContainer.style.display = 'none';
-                statusElement.className = 'status'; // Reset class
+                statusElement.className = 'status';
                 statusElement.textContent = 'Préparation de la requête...';
                 loadingText.style.display = 'block';
                 responseDiv.innerHTML = '';
                 
                 const formData = new FormData();
                 formData.append('image', selectedFile);
-                formData.append('style', selectedStyle); // Ajouter le style sélectionné
+                formData.append('style', selectedStyle);
                 
                 fetch('/solve', {
                     method: 'POST',
@@ -433,135 +475,106 @@
                         const data = JSON.parse(event.data);
                         
                         if (data.error) {
-                            statusElement.className = 'status error';
-                            statusElement.textContent = 'Erreur de traitement:';
-                            responseDiv.innerHTML = `<p style="color:red;">${data.error}</p>`;
-                            responseContainer.style.display = 'block';
-                            loadingText.style.display = 'none';
-                            eventSource.close();
-                            solveButton.disabled = false;
-                            solveButton.textContent = '🔍 Résoudre';
+                            handleError(data.error);
                             return;
                         }
                         
-                        if (data.status === 'pending') {
-                            statusElement.textContent = 'En file d\'attente...';
-                        } else if (data.status === 'processing') {
-                            statusElement.innerHTML = '<span class="thinking">Mariam</span> traite votre image... <br><small>La réponse sera également envoyée sur Telegram.</small>';
-                        } else if (data.status === 'completed') {
-                            statusElement.className = 'status completed';
-                            statusElement.textContent = 'Traitement terminé avec succès ! 🎉';
-                            responseContainer.style.display = 'block';
-                            loadingText.style.display = 'none';
-                            
-                            responseDiv.innerHTML = data.response; // Utiliser innerHTML si la réponse contient du HTML
-                            renderMathInElement(responseDiv, {
-                                delimiters: [
-                                    {left: '$$', right: '$$', display: true},
-                                    {left: '$', right: '$', display: false},
-                                    {left: '\\(', right: '\\)', display: false},
-                                    {left: '\\[', right: '\\]', display: true}
-                                ]
-                            });
-                            
-                            eventSource.close();
-                            solveButton.disabled = false;
-                            solveButton.textContent = '🔍 Résoudre';
-                        } else if (data.status === 'error') {
-                            statusElement.className = 'status error';
-                            statusElement.textContent = 'Erreur de traitement:';
-                            responseDiv.innerHTML = `<p style="color:red;">${data.error || 'Une erreur inattendue est survenue durant le traitement.'}</p>`;
-                            responseContainer.style.display = 'block';
-                            loadingText.style.display = 'none';
-                            
-                            eventSource.close();
-                            solveButton.disabled = false;
-                            solveButton.textContent = '🔍 Résoudre';
-                        }
+                        updateStatus(data);
                     };
                     
                     eventSource.onerror = function() {
                         eventSource.close();
-                        fetch('/task/' + taskId)
-                            .then(response => response.json())
-                            .then(taskData => {
-                                if (taskData.status === 'completed') {
-                                    statusElement.className = 'status completed';
-                                    statusElement.textContent = 'Traitement terminé (récupéré après déconnexion) !';
-                                    responseContainer.style.display = 'block';
-                                    loadingText.style.display = 'none';
-                                    
-                                    responseDiv.innerHTML = taskData.response;
-                                    renderMathInElement(responseDiv, {
-                                        delimiters: [
-                                            {left: '$$', right: '$$', display: true},
-                                            {left: '$', right: '$', display: false},
-                                            {left: '\\(', right: '\\)', display: false},
-                                            {left: '\\[', right: '\\]', display: true}
-                                        ]
-                                    });
-                                } else if (taskData.status === 'error' || (taskData.error && taskData.error !== "Task not found or not completed yet")) {
-                                     statusElement.className = 'status error';
-                                     statusElement.textContent = 'Erreur (récupéré après déconnexion):';
-                                     responseDiv.innerHTML = `<p style="color:red;">${taskData.error || 'Une erreur inattendue est survenue.'}</p>`;
-                                } else {
-                                    statusElement.className = 'status error';
-                                    statusElement.textContent = 'Erreur de connexion:';
-                                    responseDiv.innerHTML = 'La connexion au flux a été perdue, mais le traitement continue en arrière-plan. La réponse sera envoyée sur Telegram si configuré. Vous pouvez essayer de rafraîchir pour voir si la tâche est terminée.';
-                                }
-                            })
-                            .catch(error => {
-                                statusElement.className = 'status error';
-                                statusElement.textContent = 'Erreur de connexion:';
-                                responseDiv.innerHTML = 'La connexion au flux a été perdue et la récupération a échoué. Le traitement peut continuer en arrière-plan. La réponse sera envoyée sur Telegram si configuré.';
-                            })
-                            .finally(() => {
-                                responseContainer.style.display = 'block';
-                                loadingText.style.display = 'none';
-                                solveButton.disabled = false;
-                                solveButton.textContent = '🔍 Résoudre';
-                            });
+                        handleEventSourceError(taskId);
                     };
                 })
                 .catch(error => {
-                    statusElement.className = 'status error';
-                    statusElement.textContent = 'Erreur Initiale:';
-                    responseDiv.innerHTML = `<p style="color:red;">${error.message || 'Une erreur est survenue lors de la communication avec le serveur.'}</p>`;
-                    responseContainer.style.display = 'block';
-                    loadingText.style.display = 'none';
-                    solveButton.disabled = false;
-                    solveButton.textContent = '🔍 Résoudre';
+                    handleError(error.message);
                 });
             });
             
+            function handleError(errorMessage) {
+                statusElement.className = 'status error';
+                statusElement.textContent = 'Erreur:';
+                responseDiv.innerHTML = `<p style="color:red;">${errorMessage}</p>`;
+                showResponse();
+            }
+            
+            function updateStatus(data) {
+                switch(data.status) {
+                    case 'pending':
+                        statusElement.textContent = 'En file d\'attente...';
+                        break;
+                    case 'processing':
+                        statusElement.innerHTML = '<span class="thinking">Mariam</span> traite votre image... <br><small>La réponse sera également envoyée sur Telegram.</small>';
+                        break;
+                    case 'completed':
+                        statusElement.className = 'status completed';
+                        statusElement.textContent = 'Traitement terminé avec succès ! 🎉';
+                        responseDiv.innerHTML = data.response;
+                        renderMathInElement(responseDiv);
+                        showResponse();
+                        break;
+                    case 'error':
+                        handleError(data.error || 'Une erreur inattendue est survenue.');
+                        break;
+                }
+            }
+            
+            function showResponse() {
+                responseContainer.style.display = 'block';
+                loadingText.style.display = 'none';
+                solveButton.disabled = false;
+                solveButton.textContent = '🔍 Résoudre';
+            }
+            
+            function handleEventSourceError(taskId) {
+                fetch('/task/' + taskId)
+                    .then(response => response.json())
+                    .then(taskData => {
+                        if (taskData.status === 'completed') {
+                            updateStatus({
+                                status: 'completed',
+                                response: taskData.response
+                            });
+                        } else if (taskData.status === 'error' || taskData.error) {
+                            handleError(taskData.error || 'Une erreur est survenue.');
+                        } else {
+                            handleError('La connexion au flux a été perdue. La réponse sera envoyée sur Telegram.');
+                        }
+                    })
+                    .catch(() => {
+                        handleError('La connexion au flux a été perdue et la récupération a échoué.');
+                    });
+            }
+            
             copyButton.addEventListener('click', () => {
-                const textToCopy = responseDiv.innerText || responseDiv.textContent; // Pour mieux copier le texte brut
-                navigator.clipboard.writeText(textToCopy).then(() => {
-                    copyButton.textContent = '✅ Copié!';
-                    setTimeout(() => {
-                        copyButton.textContent = '📋 Copier la réponse';
-                    }, 2000);
-                }).catch(err => {
-                    console.error('Erreur de copie: ', err);
-                    // Fallback pour les anciens navigateurs (moins fiable)
-                    const range = document.createRange();
-                    range.selectNode(responseDiv);
-                    window.getSelection().removeAllRanges();
-                    window.getSelection().addRange(range);
-                    try {
-                        document.execCommand('copy');
-                        copyButton.textContent = '✅ Copié! (fallback)';
-                    } catch (e) {
-                        copyButton.textContent = 'Erreur copie';
-                    }
-                    window.getSelection().removeAllRanges();
-                    setTimeout(() => {
-                        copyButton.textContent = '📋 Copier la réponse';
-                    }, 2000);
-                });
+                const textToCopy = responseDiv.innerText || responseDiv.textContent;
+                navigator.clipboard.writeText(textToCopy)
+                    .then(() => {
+                        copyButton.textContent = '✅ Copié!';
+                        setTimeout(() => {
+                            copyButton.textContent = '📋 Copier la réponse';
+                        }, 2000);
+                    })
+                    .catch(() => {
+                        // Fallback pour les anciens navigateurs
+                        const range = document.createRange();
+                        range.selectNode(responseDiv);
+                        window.getSelection().removeAllRanges();
+                        window.getSelection().addRange(range);
+                        try {
+                            document.execCommand('copy');
+                            copyButton.textContent = '✅ Copié!';
+                        } catch (e) {
+                            copyButton.textContent = '❌ Erreur de copie';
+                        }
+                        window.getSelection().removeAllRanges();
+                        setTimeout(() => {
+                            copyButton.textContent = '📋 Copier la réponse';
+                        }, 2000);
+                    });
             });
             
-            // Rendu KaTeX initial pour toute la page (si des formules sont en dehors des réponses)
             renderMathInElement(document.body, {
                 delimiters: [
                     {left: '$$', right: '$$', display: true},
@@ -569,9 +582,9 @@
                     {left: '\\(', right: '\\)', display: false},
                     {left: '\\[', right: '\\]', display: true}
                 ],
-                throwOnError: false // Important pour ne pas bloquer le script si KaTeX rencontre une erreur
+                throwOnError: false
             });
         });
     </script>
 </body>
-</html>
+</html>