Update templates/index.html

templates/index.html

@@ -8,17 +8,29 @@
     <!-- Inclusion de Tailwind CSS via CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
 
+    <!-- *** NOUVEAU: Inclusion de marked.js *** -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
     <!-- Inclusion de MathJax pour le rendu LaTeX -->
-    <!-- Il est préférable de charger MathJax v3 -->
     <script>
       MathJax = {
         tex: {
-          inlineMath: [['$', '$'], ['\\(', '\\)']], // Délimiteurs pour les maths en ligne
-          displayMath: [['$$', '$$'], ['\\[', '\\]']], // Délimiteurs pour les maths en affichage
-          processEscapes: true // Traiter les échappements comme \$
+          inlineMath: [['$', '$'], ['\\(', '\\)']],
+          displayMath: [['$$', '$$'], ['\\[', '\\]']],
+          processEscapes: true
         },
         svg: {
-          fontCache: 'global' // Améliore la performance du rendu SVG
+          fontCache: 'global'
+        },
+        // *** IMPORTANT: Désactiver le rendu initial automatique ***
+        // Nous le déclencherons manuellement après avoir ajouté du contenu.
+        startup: {
+            ready: () => {
+                console.log('MathJax is ready');
+                MathJax.startup.defaultReady();
+                // Ne pas faire de typeset initial ici
+                // MathJax.startup.promise.then(() => { console.log('Initial typeset done'); });
+            }
         }
       };
     </script>
@@ -27,23 +39,73 @@
     </script>
 
     <!-- Inclusion de highlight.js pour la coloration syntaxique -->
-    <!-- Choisir un thème (ex: github-dark) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <!-- Optionnel: Charger des langages spécifiques si nécessaire -->
-    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script> -->
 
-    <!-- Styles personnalisés additionnels si besoin (peuvent être intégrés à Tailwind config pour des projets plus gros) -->
+    <!-- Styles personnalisés -->
     <style>
-        /* Style pour s'assurer que MathJax n'affecte pas trop la hauteur de ligne */
         mjx-container {
-            line-height: normal !important; /* Ajuster si nécessaire */
-            display: inline-block !important; /* Pour un meilleur alignement inline */
+            line-height: normal !important;
+            display: inline-block !important; /* Important pour l'alignement */
+            margin: 0 0.15em; /* Ajouter un petit espace autour */
+            vertical-align: middle; /* Essayer d'aligner verticalement */
         }
-        /* Amélioration visuelle pour les blocs de code */
-        pre code.hljs {
+        /* S'assurer que le code dans prose est stylisé par highlight.js */
+        .prose pre code.hljs {
             border-radius: 0.375rem; /* rounded-md */
             padding: 1rem; /* p-4 */
+            /* La couleur de fond est définie par le thème hljs */
+        }
+        /* Empêcher prose de trop styliser les blocs de code */
+        .prose pre {
+            background-color: transparent !important;
+            padding: 0 !important;
+            margin-top: 1em;
+            margin-bottom: 1em;
+        }
+        /* Amélioration pour les listes dans le markdown rendu */
+        .prose ul, .prose ol {
+             margin-left: 1.5rem;
+        }
+         /* Styles pour le résultat de code */
+        .code-result {
+            margin-top: 0.5rem; /* Espacement avant */
+            margin-bottom: 1rem; /* Espacement après */
+            padding: 0.75rem 1rem; /* p-3 p-4 */
+            background-color: #f0fff4; /* bg-green-50 */
+            border-left: 4px solid #38a169; /* border-l-4 border-green-500 */
+            font-size: 0.875rem; /* text-sm */
+            color: #2f855a; /* text-green-800 */
+            border-radius: 0 0.375rem 0.375rem 0; /* rounded-r-lg */
+            white-space: pre-wrap; /* Conserver les sauts de ligne */
+            word-wrap: break-word; /* Retour à la ligne si nécessaire */
+        }
+         /* Styles pour les indicateurs */
+        .indicator {
+             margin: 0.75rem 0; /* my-3 */
+             text-align: center;
+             font-style: italic;
+             color: #6b7280; /* text-gray-500 */
+        }
+        /* Styles pour les messages d'erreur */
+        .error-message {
+            margin: 1rem 0; /* my-4 */
+            padding: 1rem; /* p-4 */
+            background-color: #fee2e2; /* bg-red-100 */
+            border: 1px solid #fca5a5; /* border-red-300 */
+            color: #b91c1c; /* text-red-700 */
+            border-radius: 0.5rem; /* rounded-lg */
+        }
+         /* Styles pour les images générées */
+        .generated-image {
+            max-width: 100%;
+            height: auto;
+            margin: 1rem auto; /* my-4 mx-auto */
+            border: 1px solid #d1d5db; /* border-gray-300 */
+            border-radius: 0.25rem; /* rounded */
+            padding: 0.25rem; /* p-1 */
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
+            display: block; /* block */
         }
     </style>
 </head>
@@ -103,10 +165,8 @@
         </div>
 
         <!-- Conteneur de Résultats -->
+        <!-- Ajout de classes 'prose' pour le style Markdown/texte par défaut -->
         <div id="result-container" class="bg-white p-6 rounded-xl shadow-lg border border-gray-200 w-full min-h-[150px] prose max-w-none prose-indigo">
-             <!-- "prose" applique des styles par défaut au contenu -->
-             <!-- "max-w-none" empêche prose de limiter la largeur -->
-             <!-- "prose-indigo" adapte les couleurs de prose au thème indigo -->
             <p class="text-gray-500 italic text-center">Les résultats apparaîtront ici...</p>
         </div>
     </div>
@@ -116,41 +176,55 @@
         document.addEventListener('DOMContentLoaded', function() {
             const resultContainer = document.getElementById('result-container');
 
+            // Configure marked.js (optionnel, mais utile)
+            marked.setOptions({
+                highlight: function(code, lang) {
+                    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                    return hljs.highlight(code, { language }).value;
+                },
+                langPrefix: 'hljs language-', // pour la compatibilité avec hljs CSS
+                gfm: true, // Activer GitHub Flavored Markdown
+                breaks: true, // Convertir les sauts de ligne simples en <br>
+            });
+
             // Fonction pour créer un élément de code formaté et le colorer
             function createCodeElement(code, language = null) {
                 const pre = document.createElement('pre');
-                // Note: La classe 'not-prose' peut être utile si les styles de 'prose' interfèrent
-                pre.className = 'my-4 p-0 bg-transparent not-prose'; // Réinitialise le padding/bg pour que hljs prenne le dessus
+                // Note: La classe 'not-prose' empêche prose d'interférer avec le style hljs
+                pre.className = 'not-prose'; // Empêche le style prose d'affecter ce bloc
 
                 const codeEl = document.createElement('code');
                 // Ajouter la classe de langage si spécifié pour highlight.js
                 if (language) {
                     codeEl.className = `language-${language}`;
+                } else {
+                     codeEl.className = 'language-plaintext'; // Défaut si non spécifié
                 }
-                codeEl.textContent = code;
+                codeEl.textContent = code; // Utiliser textContent pour éviter l'injection HTML
 
                 pre.appendChild(codeEl);
                 // Appliquer highlight.js à cet élément spécifique
-                hljs.highlightElement(codeEl);
+                // hljs.highlightElement(codeEl); // marqué.js le fait maintenant via l'option highlight
+                hljs.highlightBlock(codeEl); // Alternative si on n'utilise pas l'option highlight de marked
                 return pre;
             }
 
-            // Fonction pour créer un élément de texte/Markdown (sera stylisé par "prose")
+            // *** MODIFIÉ: Fonction pour créer un élément de texte/Markdown ***
             function createMarkdownElement(text) {
                 const div = document.createElement('div');
-                div.className = 'markdown-content mb-4'; // prose gère le style général
-                // Simple conversion des sauts de ligne en <br> pour un rendu basique
-                // Une vraie lib Markdown (marked.js, markdown-it) serait mieux pour du vrai Markdown
-                div.innerHTML = text.replace(/\n/g, '<br>');
+                div.className = 'markdown-content'; // La classe 'prose' sur le parent gère le style
+                // Utiliser marked.js pour convertir le Markdown en HTML
+                div.innerHTML = marked.parse(text);
                 return div;
             }
 
            // Fonction pour créer un élément spécialisé pour le résultat de code
             function createResultElement(text) {
                 const div = document.createElement('div');
-                // Styles Tailwind pour un résultat distinct
-                div.className = 'code-result my-4 p-3 bg-green-50 border-l-4 border-green-500 text-sm text-green-800 rounded-r-lg';
-                div.innerHTML = text.replace(/\n/g, '<br>');
+                // Utilise la classe CSS définie dans <style>
+                div.className = 'code-result';
+                // Utiliser textContent pour la sécurité et préserver les espaces/sauts de ligne
+                div.textContent = text;
                 return div;
             }
 
@@ -159,17 +233,17 @@
             function createImageElement(base64Data, format = 'png') {
                 const img = document.createElement('img');
                 img.src = `data:image/${format};base64,${base64Data}`;
-                // Styles Tailwind pour les images
-                img.className = 'max-w-full h-auto my-4 border border-gray-300 rounded p-1 shadow-sm mx-auto block'; // Centrer l'image
+                // Utilise la classe CSS définie dans <style>
+                img.className = 'generated-image';
                 return img;
             }
 
             // Fonction pour créer un indicateur (chargement, réflexion)
             function createIndicator(text, type = 'loading') {
                 const div = document.createElement('div');
-                div.dataset.indicatorType = type; // Pour pouvoir le retrouver/supprimer
-                // Styles Tailwind pour les indicateurs
-                div.className = 'indicator my-3 text-center italic text-gray-500';
+                div.dataset.indicatorType = type;
+                 // Utilise la classe CSS définie dans <style>
+                div.className = 'indicator';
                 div.textContent = text;
                 return div;
             }
@@ -177,38 +251,41 @@
              // Fonction pour créer un message d'erreur
             function createErrorElement(text) {
                 const div = document.createElement('div');
-                // Styles Tailwind pour les erreurs
-                div.className = 'error-message my-4 p-4 bg-red-100 border border-red-300 text-red-700 rounded-lg';
+                // Utilise la classe CSS définie dans <style>
+                div.className = 'error-message';
                 div.textContent = 'Erreur: ' + text;
                 return div;
             }
 
              // Fonction pour traiter les données SSE et mettre à jour l'UI
              function processSseData(jsonData) {
+                // Gestion des modes 'thinking'/'answering'
                 if (jsonData.mode === 'thinking') {
-                    // Supprimer l'indicateur de chargement s'il existe
                     const loadingIndicator = resultContainer.querySelector('[data-indicator-type="loading"]');
                     if (loadingIndicator) loadingIndicator.remove();
-                    // Afficher l'indicateur de réflexion (s'il n'existe pas déjà)
                     if (!resultContainer.querySelector('[data-indicator-type="thinking"]')) {
                          resultContainer.appendChild(createIndicator('Gemini réfléchit...', 'thinking'));
                     }
                 } else if (jsonData.mode === 'answering') {
-                    // Supprimer l'indicateur de réflexion s'il existe
                     const thinkingIndicator = resultContainer.querySelector('[data-indicator-type="thinking"]');
                     if (thinkingIndicator) thinkingIndicator.remove();
                 }
 
+                // Traitement du contenu
                 if (jsonData.content) {
                     let element;
+                    let requiresMathJax = false;
+
                     switch(jsonData.type) {
                         case 'text':
+                            // Utilise la fonction mise à jour avec marked.js
                             element = createMarkdownElement(jsonData.content);
+                            // Le texte Markdown peut contenir du LaTeX
+                            requiresMathJax = true;
                             break;
                         case 'code':
-                            // Essayez de détecter le langage si possible (sinon hljs tente de deviner)
-                            // Vous pourriez passer le langage depuis le backend si connu
-                            element = createCodeElement(jsonData.content);
+                            // 'python' pourrait être passé du backend si connu, sinon null
+                            element = createCodeElement(jsonData.content, 'python');
                             break;
                         case 'result':
                             element = createResultElement(jsonData.content);
@@ -217,28 +294,43 @@
                             element = createImageElement(jsonData.content);
                             break;
                         default: // Traiter comme du texte par défaut
-                            element = createMarkdownElement(jsonData.content);
+                             console.warn("Type de contenu inconnu reçu:", jsonData.type);
+                            element = createMarkdownElement(jsonData.content); // fallback
+                             requiresMathJax = true;
                     }
-                    resultContainer.appendChild(element);
 
-                    // Demander à MathJax de re-scanner le conteneur pour le nouveau contenu LaTeX
-                    // Utilisation de la nouvelle API MathJax 3
-                    if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
-                         MathJax.typesetPromise([element]).catch((err) => console.error('MathJax processing error:', err));
+                    if (element) {
+                         resultContainer.appendChild(element);
+
+                        // *** IMPORTANT: Déclencher MathJax et Highlight.js ***
+                        // Déclencher MathJax UNIQUEMENT si le contenu ajouté peut contenir du LaTeX
+                        if (requiresMathJax && typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
+                            // Typeset le conteneur entier ou juste le nouvel élément.
+                            // Typesetter le conteneur entier peut être plus simple si les éléments arrivent rapidement
+                            MathJax.typesetPromise([resultContainer]).catch((err) => console.error('MathJax processing error:', err));
+                        }
+
+                         // S'assurer que les blocs de code ajoutés (qui ne sont pas dans le markdown) sont colorisés
+                         // Note: marked.js s'occupe de ceux dans le markdown via l'option `highlight`
+                         if (jsonData.type === 'code') {
+                            // hljs.highlightElement(element.querySelector('code')); // Si createCodeElement n'appelle pas highlightBlock
+                            // Déjà fait dans createCodeElement maintenant.
+                         }
                     }
                 }
 
+                // Gestion des erreurs
                 if (jsonData.error) {
                     resultContainer.appendChild(createErrorElement(jsonData.error));
-                    // Supprimer les indicateurs en cas d'erreur
                     resultContainer.querySelectorAll('.indicator').forEach(el => el.remove());
                 }
             }
 
 
-            // Fonction pour gérer les événements SSE via Fetch API
+            // Fonction pour gérer les événements SSE via Fetch API (inchangée)
             async function setupFetchStream(url, formData) {
-                // Vider le conteneur de résultats et afficher chargement
+                // ... (le reste de la fonction setupFetchStream reste identique à votre version) ...
+                 // Vider le conteneur de résultats et afficher chargement
                 resultContainer.innerHTML = '';
                 resultContainer.appendChild(createIndicator('Chargement en cours...', 'loading'));
 
@@ -246,19 +338,26 @@
                     const response = await fetch(url, {
                         method: 'POST',
                         body: formData
-                        // Pas besoin de 'Content-Type': 'multipart/form-data', le navigateur le met avec FormData
                     });
 
                     if (!response.ok) {
-                       throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
+                       // Essayer de lire le corps de l'erreur s'il existe
+                       let errorBody = await response.text();
+                       try {
+                           const errorJson = JSON.parse(errorBody);
+                           errorBody = errorJson.error || JSON.stringify(errorJson);
+                       } catch(e) {
+                           // Le corps n'était pas du JSON, utiliser le texte brut
+                       }
+                       throw new Error(`Erreur HTTP ${response.status}: ${errorBody || response.statusText}`);
                     }
 
                     // Vider à nouveau au cas où la requête prend du temps avant que le stream commence
-                    resultContainer.innerHTML = '';
+                    // resultContainer.innerHTML = ''; // Peut causer un flash, on le laisse commenté pour l'instant
 
                     const reader = response.body.getReader();
                     const decoder = new TextDecoder();
-                    let buffer = ''; // Pour gérer les messages SSE coupés entre les chunks
+                    let buffer = '';
 
                     while (true) {
                         const { done, value } = await reader.read();
@@ -266,48 +365,54 @@
 
                         buffer += decoder.decode(value, { stream: true });
 
-                        // Traiter les messages complets dans le buffer
                         let boundary = buffer.indexOf('\n\n');
                         while (boundary !== -1) {
                             const message = buffer.substring(0, boundary);
-                            buffer = buffer.substring(boundary + 2); // +2 pour \n\n
+                            buffer = buffer.substring(boundary + 2);
 
                             if (message.startsWith('data: ')) {
                                 try {
                                     const jsonData = JSON.parse(message.substring(6));
-                                    processSseData(jsonData);
+                                    processSseData(jsonData); // Utilise la fonction de traitement mise à jour
                                 } catch (e) {
                                     console.error('Erreur parsing JSON du SSE:', e, 'Data:', message.substring(6));
+                                    // Afficher une erreur à l'utilisateur pour le JSON invalide
+                                    resultContainer.appendChild(createErrorElement(`Erreur interne lors du traitement de la réponse: ${e.message}`));
                                 }
                             }
-                             // Rechercher la prochaine limite
                             boundary = buffer.indexOf('\n\n');
                         }
-                        // Faire défiler vers le bas
-                        window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+                         // Faire défiler vers le bas
+                         // window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
+                          resultContainer.scrollTop = resultContainer.scrollHeight; // Mieux pour un div scrollable
                     }
-                    // Traiter ce qui reste dans le buffer (au cas où le stream se termine sans \n\n final)
+                     // Traiter le reste du buffer
                      if (buffer.startsWith('data: ')) {
                            try {
                                const jsonData = JSON.parse(buffer.substring(6));
                                processSseData(jsonData);
                            } catch (e) {
                                console.error('Erreur parsing JSON du dernier chunk SSE:', e, 'Data:', buffer.substring(6));
+                               resultContainer.appendChild(createErrorElement(`Erreur interne lors du traitement final de la réponse: ${e.message}`));
                            }
                      }
 
                 } catch (error) {
                     console.error('Erreur Fetch Stream:', error);
-                    resultContainer.innerHTML = ''; // Nettoyer les indicateurs
+                    // Ne pas vider si des messages d'erreur précédents ont été affichés
+                    // resultContainer.innerHTML = '';
+                    // Afficher l'erreur attrapée
                     resultContainer.appendChild(createErrorElement(error.message));
+
                 } finally {
-                     // Optionnel: Supprimer l'indicateur de chargement final s'il est toujours là
-                     const loadingIndicator = resultContainer.querySelector('[data-indicator-type="loading"]');
-                    if (loadingIndicator) loadingIndicator.remove();
+                     // Supprimer tous les indicateurs restants
+                     resultContainer.querySelectorAll('.indicator').forEach(el => el.remove());
+                     // Faire défiler vers le bas une dernière fois
+                     resultContainer.scrollTop = resultContainer.scrollHeight;
                 }
             }
 
-            // Gestion du formulaire pour /solve
+            // Gestionnaires d'événements pour les formulaires (inchangés)
             const solveForm = document.getElementById('solve-form');
             if (solveForm) {
                 solveForm.addEventListener('submit', function(e) {
@@ -317,7 +422,6 @@
                 });
             }
 
-            // Gestion du formulaire pour /solved
             const solvedForm = document.getElementById('solved-form');
             if (solvedForm) {
                 solvedForm.addEventListener('submit', function(e) {