Update templates/index.html

templates/index.html

@@ -6,6 +6,10 @@
     <title>Math Solver - Version Gratuite</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" rel="stylesheet">
+    <!-- Ajout de Marked.js pour le traitement Markdown -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
+    <!-- CSS pour KaTeX -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
     <style>
         :root {
             --primary-color: #4a6fa5;
@@ -126,80 +130,60 @@
             text-align: left;
             line-height: 1.8;
             font-size: 16px;
-            background-color: transparent; /* Background of the container itself */
+            background-color: transparent;
             box-shadow: var(--box-shadow);
-            overflow: hidden; /* Clip children borders to parent radius */
+            overflow: hidden;
         }
 
-        /* Apply common padding and margin to sections */
         #solution > div {
             padding: 20px;
-            margin: 0; /* Remove default margin */
-            border-radius: 0; /* Reset radius, applied to first/last children */
+            margin: 0;
+            border-radius: 0;
             overflow-x: auto;
-            background-color: #f9f9f9; /* Default background */
-            border-left: 4px solid var(--primary-color); /* Default left border */
-             /* Added border-bottom to create separation between sections */
+            background-color: #f9f9f9;
+            border-left: 4px solid var(--primary-color);
             border-bottom: 1px solid #eee;
         }
 
         .code-section {
-            background-color: transparent !important; /* Background handled by code-content */
-            padding: 0 !important; /* Padding handled by code-content */
-            border-left: none !important; /* No left border for code section parent */
-            border-bottom: none !important; /* No border bottom on code section parent */
+            background-color: transparent !important;
+            padding: 0 !important;
+            border-left: none !important;
+            border-bottom: none !important;
         }
 
         .output-section {
-            background-color: var(--output-bg) !important; /* Override default section background */
-            border-left: none !important; /* No left border for output section parent */
+            background-color: var(--output-bg) !important;
+            border-left: none !important;
         }
 
-
         .step-section {
-             /* Specific styles for steps */
-             border-left: 4px solid var(--primary-color);
-             padding-left: calc(20px - 4px); /* Adjust padding to account for border */
-             background-color: #f9f9f9;
-             font-size: 16px;
-             line-height: 1.8;
-        }
-
-        /* Improved LaTeX styling (MathJax v3 specific) */
-        .step-section .mjx-chtml {
-             display: inline-block;
-             line-height: 0;
-             text-indent: 0;
-             text-align: left;
-             text-transform: none;
-             font-size: 1em !important; /* Ensure inline MathJax respects container font size */
-             font-style: normal;
-             font-weight: normal;
-             font-family: MJXZERO, MJXTEX;
-             direction: ltr;
-             vertical-align: -0.25em; /* Standard vertical alignment */
-             margin: 0 0.2em; /* Small horizontal margin */
-        }
-
-         .step-section .mjx-container.MJX-display {
-            display: block !important;
-            margin: 1em auto !important;
-            text-align: center !important;
-            max-width: 100%;
-            overflow-x: auto; /* Allow horizontal scrolling for large block equations */
-            overflow-y: hidden;
+            border-left: 4px solid var(--primary-color);
+            padding-left: calc(20px - 4px);
+            background-color: #f9f9f9;
+            font-size: 16px;
+            line-height: 1.8;
         }
 
+        /* Amélioration du rendu LaTeX avec KaTeX */
+        .step-section .katex {
+            font-size: 1.1em;
+            line-height: 1.2;
+            text-indent: 0;
+            text-rendering: auto;
+        }
 
-        /* Fix for inline math to prevent weird line breaks */
-        .step-section p {
-            display: block; /* Paragraphs should be block elements */
-            margin-block-start: 1em;
-            margin-block-end: 1em;
-            margin-inline-start: 0px;
-            margin-inline-end: 0px;
+        .step-section .katex-display {
+            margin: 1em 0;
+            display: block;
+            text-align: center;
         }
 
+        .step-section .katex-display > .katex {
+            display: inline-block;
+            text-align: center;
+            max-width: 100%;
+        }
 
         .code-header {
             background-color: #343a40;
@@ -210,7 +194,6 @@
             display: flex;
             justify-content: space-between;
             align-items: center;
-            /* Border radius handled by first child rules below */
             border-top-left-radius: 0;
             border-top-right-radius: 0;
         }
@@ -224,99 +207,76 @@
             font-family: 'Courier New', monospace;
             font-size: 14px;
             line-height: 1.5;
-            /* Border radius handled by last child rules below */
-             border-bottom-left-radius: 0;
-             border-bottom-right-radius: 0;
+            border-bottom-left-radius: 0;
+            border-bottom-right-radius: 0;
         }
 
-
-        /* Add border-radius back to the very first and very last child INSIDE #solution */
-
-        /* First child in #solution */
+        /* Règles pour les coins arrondis */
         #solution > div:first-child {
-             border-top-left-radius: 8px;
-             border-top-right-radius: 8px;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
         }
-        /* Special handling for the first child if it's a code section (header needs radius) */
+
         #solution > .code-section:first-child .code-header {
-             border-top-left-radius: 8px;
-             border-top-right-radius: 8px;
-        }
-        /* Special handling for the first child if it's an output section */
-         #solution > .output-section:first-child {
-             border-top-left-radius: 8px;
-             border-top-right-radius: 8px;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
         }
 
+        #solution > .output-section:first-child {
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+        }
 
-        /* Last child in #solution */
         #solution > div:last-child {
-             border-bottom-left-radius: 8px;
-             border-bottom-right-radius: 8px;
-             border-bottom: none; /* Remove the bottom border on the very last section */
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            border-bottom: none;
         }
-         /* Special handling for the last child if it's a code section (content needs radius) */
+
         #solution > .code-section:last-child .code-content {
-             border-bottom-left-radius: 8px;
-             border-bottom-right-radius: 8px;
-        }
-         /* Special handling for the last child if it's an output section */
-         #solution > .output-section:last-child {
-             border-bottom-left-radius: 8px;
-             border-bottom-right-radius: 8px;
-             border-bottom: none;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
         }
 
+        #solution > .output-section:last-child {
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
+            border-bottom: none;
+        }
 
-        /* Specific case for a single child (both first and last) */
         #solution > div:only-child {
             border-radius: 8px;
             border-bottom: none;
         }
+
         #solution > .code-section:only-child .code-header {
-             border-top-left-radius: 8px;
-             border-top-right-radius: 8px;
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
         }
+
         #solution > .code-section:only-child .code-content {
-             border-bottom-left-radius: 8px;
-             border-bottom-right-radius: 8px;
-        }
-         #solution > .output-section:only-child {
-             border-radius: 8px;
-              border-bottom: none;
+            border-bottom-left-radius: 8px;
+            border-bottom-right-radius: 8px;
         }
 
+        #solution > .output-section:only-child {
+            border-radius: 8px;
+            border-bottom: none;
+        }
 
-        /* Remove bottom border for sections that are not the last child,
-           to make them appear connected to the next section */
         #solution > div:not(:last-child) {
             border-bottom: 1px solid #eee;
         }
 
-         /* Code section should not have a bottom border even if not last */
-         #solution > .code-section {
-             border-bottom: none;
-         }
-
-         /* Output section should not have a bottom border even if not last */
-         #solution > .output-section:not(:last-child) {
-              border-bottom: 1px solid #ddd; /* Keep the separator line */
-         }
-
-
-        /* Fixed display of MathJax content */
-        .mjx-container {
-            display: inline-block !important;
-            margin: 0 !important;
-            text-align: center !important;
-            overflow-x: auto; /* Allow horizontal scrolling for large inline equations */
-            overflow-y: hidden;
-            padding: 0 !important;
-            vertical-align: middle; /* Better vertical alignment for inline math */
+        #solution > .code-section {
+            border-bottom: none;
         }
 
+        #solution > .output-section:not(:last-child) {
+            border-bottom: 1px solid #ddd;
+        }
 
-        /* Fix markdown list rendering */
+        /* Amélioration du rendu Markdown */
         .step-section ul, .step-section ol {
             display: block;
             margin-block-start: 1em;
@@ -331,6 +291,55 @@
             margin-bottom: 0.5em;
         }
 
+        /* Meilleur espacement pour les listes imbriquées */
+        .step-section ul ul, 
+        .step-section ol ol, 
+        .step-section ul ol, 
+        .step-section ol ul {
+            margin-block-start: 0.5em;
+            margin-block-end: 0.5em;
+        }
+
+        /* Amélioration des tables en Markdown */
+        .step-section table {
+            border-collapse: collapse;
+            width: 100%;
+            margin: 1em 0;
+        }
+
+        .step-section th, 
+        .step-section td {
+            border: 1px solid #ddd;
+            padding: 8px 12px;
+            text-align: left;
+        }
+
+        .step-section th {
+            background-color: #f2f2f2;
+            font-weight: bold;
+        }
+
+        .step-section tr:nth-child(even) {
+            background-color: #f9f9f9;
+        }
+
+        /* Meilleur rendu des blocs de code en Markdown */
+        .step-section pre {
+            background-color: #f5f5f5;
+            border-radius: 4px;
+            padding: 12px;
+            overflow-x: auto;
+            margin: 1em 0;
+        }
+
+        .step-section code {
+            font-family: 'Courier New', Courier, monospace;
+            background-color: #f5f5f5;
+            padding: 2px 4px;
+            border-radius: 3px;
+            font-size: 0.9em;
+        }
+
         .thinking-indicator, .executing-indicator, .answering-indicator {
             display: flex;
             align-items: center;
@@ -357,22 +366,31 @@
             100% { opacity: 0.6; }
         }
 
-        /* Fix assistive MML elements */
-        mjx-assistive-mml {
-            position: absolute !important;
-            top: 0 !important;
-            left: 0 !important;
-            clip: rect(1px, 1px, 1px, 1px) !important;
-            padding: 1px 0 0 0 !important;
-            display: block !important;
+        /* Améliorations supplémentaires pour Markdown */
+        .step-section blockquote {
+            border-left: 4px solid #ddd;
+            margin: 1em 0;
+            padding: 0.5em 10px;
+            color: #666;
+            font-style: italic;
+            background-color: #f9f9f9;
         }
 
-        /* Unified consistent LaTeX size for all equations */
-        /* Ensure MathJax respects container font size */
-        .step-section .mjx-container {
-            font-size: 1em !important; /* Use relative units */
+        .step-section h1, 
+        .step-section h2, 
+        .step-section h3, 
+        .step-section h4, 
+        .step-section h5, 
+        .step-section h6 {
+            margin-top: 1.5em;
+            margin-bottom: 0.5em;
+            color: var(--primary-color);
         }
 
+        .step-section h1 { font-size: 1.8em; }
+        .step-section h2 { font-size: 1.6em; }
+        .step-section h3 { font-size: 1.4em; }
+        .step-section h4 { font-size: 1.2em; }
     </style>
 </head>
 <body>
@@ -443,45 +461,35 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
 
-    <!-- MathJax Configuration -->
-    <script>
-        window.MathJax = {
-            tex: {
-                inlineMath: [['$', '$'], ['\\(', '\\)']], // Standard inline delimiters
-                displayMath: [['$$', '$$'], ['\\[', '\\]']], // Standard block delimiters
-                processEscapes: true,
-                processEnvironments: true,
-                packages: {'[+]': ['noerrors', 'physics', 'cancel', 'color']}
-            },
-            options: {
-                enableMenu: false,
-                ignoreHtmlClass: 'code-content', // Don't process code blocks
-                processHtmlClass: 'step-section|latex-display', // Only process step and latex-display sections
-                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
-            },
-            loader: {
-                load: ['input/tex-full', 'output/svg'] // Load full TeX input and SVG output
-            },
-            svg: {
-                fontCache: 'global',
-                scale: 1,        // Global scaling factor
-                minScale: 1,     // Minimum scaling factor
-                mtextInheritFont: true, // mtext uses surrounding font
-                merrorInheritFont: true, // merror uses surrounding font
-                mathmlSpacing: false    // TeX spacing rules
-            },
-            chtml: { // Also configure for CHTML output as a fallback or alternative
-                scale: 1,
-                minScale: 1,
-                mtextInheritFont: true,
-                merrorInheritFont: true
-            }
-        };
-    </script>
-    <!-- MathJax v3 Script -->
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
+    <!-- KaTeX Scripts (remplacement de MathJax pour de meilleures performances) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/contrib/auto-render.min.js"></script>
 
     <script>
+        // Configuration de marked pour le rendu Markdown
+        marked.setOptions({
+            gfm: true, // GitHub Flavored Markdown
+            breaks: true, // Convertit les retours à la ligne en <br>
+            smartLists: true, // Listes intelligentes
+            smartypants: true, // Typographie intelligente (guillemets, tirets, etc.)
+            xhtml: true // XHTML conforme
+        });
+
+        // Fonction pour rendre le LaTeX avec KaTeX dans un élément
+        function renderMathInElement(element) {
+            renderMathInElement(element, {
+                delimiters: [
+                    {left: '$$', right: '$$', display: true},
+                    {left: '$', right: '$', display: false},
+                    {left: '\\(', right: '\\)', display: false},
+                    {left: '\\[', right: '\\]', display: true}
+                ],
+                throwOnError: false,
+                trust: true,
+                strict: false
+            });
+        }
+
         document.getElementById('imageInput').addEventListener('change', function(event) {
             const file = event.target.files[0];
             if (file) {
@@ -504,15 +512,15 @@
 
             solutionOutput.style.display = 'block';
             loadingIndicator.style.display = 'flex';
-            solutionContainer.innerHTML = ''; // Clear previous solution
+            solutionContainer.innerHTML = ''; // Effacer la solution précédente
 
-            fetch('/solved', { // Assuming the Flask endpoint is '/solved'
+            fetch('/solved', { // En supposant que l'endpoint Flask est '/solved'
                 method: 'POST',
                 body: formData
             })
             .then(response => {
                 if (!response.ok) {
-                    // Attempt to read error message from body if available
+                    // Tenter de lire le message d'erreur du corps si disponible
                     return response.text().then(text => {
                         throw new Error(`Erreur serveur: ${response.status} ${response.statusText}\n${text}`);
                     });
@@ -524,173 +532,144 @@
                 function processStream({ done, value }) {
                     if (done) {
                         loadingIndicator.style.display = 'none';
-                        // Force MathJax to reprocess entire solution when done
-                        // Use the specific container element
-                        if (typeof MathJax !== 'undefined') {
-                            MathJax.typesetPromise([solutionContainer]).catch(e => console.error('MathJax final typesetting error:', e));
+                        // Forcer le retraitement du LaTeX lorsque terminé pour la solution entière
+                        try {
+                            renderMathInElement(solutionContainer);
+                        } catch (e) {
+                            console.error('Erreur de rendu LaTeX final:', e);
                         }
                         return;
                     }
 
                     buffer += decoder.decode(value, { stream: true });
-                    // Split by double newline to separate SSE messages, but keep the last incomplete chunk in buffer
+                    // Séparer par double saut de ligne pour les messages SSE, mais garder le dernier morceau incomplet
                     const messages = buffer.split(/\r?\n\r?\n/);
-                    buffer = messages.pop(); // Store the last potentially incomplete chunk
+                    buffer = messages.pop(); // Stocker le dernier morceau potentiellement incomplet
 
                     for (const message of messages) {
-                         // Only process lines that start with 'data: ' for SSE
+                        // Traiter uniquement les lignes commençant par 'data: ' pour SSE
                         if (message.startsWith('data: ')) {
                             try {
-                                const data = JSON.parse(message.substr(6)); // Extract JSON after 'data: '
+                                const data = JSON.parse(message.substr(6)); // Extraire JSON après 'data: '
 
-                                // Handle mode updates
+                                // Gérer les mises à jour de mode
                                 if (data.mode) {
                                     const modes = {
                                         thinking: { icon: 'fa-brain', text: 'Je réfléchis...', class: 'thinking-indicator' },
                                         answering: { icon: 'fa-pencil-alt', text: 'Rédaction...', class: 'answering-indicator' },
                                         executing_code: { icon: 'fa-code', text: 'Exécution...', class: 'executing-indicator' },
-                                        code_result: { icon: 'fa-terminal', text: 'Résultats...', class: 'executing-indicator' } // Use executing indicator for results too, or create a new one
+                                        code_result: { icon: 'fa-terminal', text: 'Résultats...', class: 'executing-indicator' }
                                     };
                                     const modeInfo = modes[data.mode];
                                     if (modeInfo) {
-                                        loadingIndicator.className = modeInfo.class; // Update class for styling
-                                        loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`; // Update icon and text
-                                        loadingIndicator.style.display = 'flex'; // Ensure indicator is visible when a mode is set
+                                        loadingIndicator.className = modeInfo.class;
+                                        loadingIndicator.innerHTML = `<i class="fas ${modeInfo.icon} indicator-icon"></i><span>${modeInfo.text}</span>`;
+                                        loadingIndicator.style.display = 'flex';
                                     } else {
-                                         // Default or unknown mode
-                                         loadingIndicator.className = 'thinking-indicator';
-                                         loadingIndicator.innerHTML = `<i class="fas fa-sync-alt indicator-icon fa-spin"></i><span>Traitement...</span>`;
-                                          loadingIndicator.style.display = 'flex';
+                                        loadingIndicator.className = 'thinking-indicator';
+                                        loadingIndicator.innerHTML = `<i class="fas fa-sync-alt indicator-icon fa-spin"></i><span>Traitement...</span>`;
+                                        loadingIndicator.style.display = 'flex';
                                     }
                                 }
 
-                                // Handle content blocks
+                                // Gérer les blocs de contenu
                                 if (data.content) {
                                     const content = data.content;
                                     const tempDiv = document.createElement('div');
-                                    tempDiv.innerHTML = content; // Parse HTML chunk received from server
+                                    tempDiv.innerHTML = content; // Analyser le fragment HTML reçu du serveur
 
                                     const codeSection = tempDiv.querySelector('.code-section');
                                     const outputSection = tempDiv.querySelector('.output-section');
 
                                     if (codeSection) {
                                         solutionContainer.appendChild(codeSection);
-                                        // Highlight code within the added section
+                                        // Surligner le code dans la section ajoutée
                                         codeSection.querySelectorAll('pre code').forEach((block) => {
                                             hljs.highlightElement(block);
                                         });
-                                        // MathJax should ignore code blocks based on options
                                     } else if (outputSection) {
                                         solutionContainer.appendChild(outputSection);
-                                         // MathJax should ignore output blocks based on options
                                     } else {
-                                        // Process regular text/LaTeX step section
+                                        // Traiter la section d'étape de texte/LaTeX normale avec Markdown amélioré
                                         const stepDiv = document.createElement('div');
                                         stepDiv.className = 'step-section';
-
-                                        // Basic markdown processing for lists (more robust processing might need a library)
-                                        let processedContent = content;
-
-                                        // Convert markdown lists to HTML lists
-                                        // This is a basic approach and might not cover all markdown complexities
-                                        const lines = processedContent.split('\n');
-                                        let htmlOutput = '';
-                                        let inList = false;
-                                        let listType = ''; // 'ul' or 'ol'
-
-                                        for (const line of lines) {
-                                            const trimmedLine = line.trim();
-                                            if (trimmedLine.match(/^(-|\*|\+)\s/)) { // Unordered list item
-                                                if (!inList) {
-                                                    htmlOutput += '<ul>';
-                                                    inList = true;
-                                                    listType = 'ul';
-                                                } else if (listType !== 'ul') {
-                                                     htmlOutput += `</${listType}><ul>`;
-                                                     listType = 'ul';
-                                                }
-                                                htmlOutput += `<li>${trimmedLine.replace(/^(-|\*|\+)\s+/, '')}</li>`;
-                                            } else if (trimmedLine.match(/^(\d+)\.\s/)) { // Ordered list item
-                                                if (!inList) {
-                                                    htmlOutput += '<ol>';
-                                                    inList = true;
-                                                    listType = 'ol';
-                                                } else if (listType !== 'ol') {
-                                                     htmlOutput += `</${listType}><ol>`;
-                                                     listType = 'ol';
-                                                }
-                                                htmlOutput += `<li>${trimmedLine.replace(/^(\d+)\.\s+/, '')}</li>`;
-                                            } else {
-                                                if (inList) {
-                                                    htmlOutput += `</${listType}>`;
-                                                    inList = false;
-                                                }
-                                                // Add non-list content wrapped in paragraphs, handling double newlines
-                                                if (line.trim() !== '') {
-                                                     htmlOutput += `<p>${line}</p>`;
-                                                }
-                                            }
+                                        
+                                        // Traitement Markdown avancé avec marked.js
+                                        // Conversion du contenu en Markdown valide pour les listes, les tableaux, etc.
+                                        const markdownContent = content
+                                            // Préservation des délimiteurs LaTeX
+                                            .replace(/\$\$([\s\S]*?)\$\$/g, (match) => {
+                                                return match.replace(/\n/g, '\\n');
+                                            })
+                                            .replace(/\$([\s\S]*?)\$/g, (match) => {
+                                                return match.replace(/\n/g, '\\n');
+                                            });
+                                        
+                                        try {
+                                            // Conversion Markdown vers HTML
+                                            const htmlContent = marked.parse(markdownContent);
+                                            
+                                            // Restauration des sauts de ligne dans les formules LaTeX
+                                            const fixedHtmlContent = htmlContent
+                                                .replace(/\$\$([\s\S]*?)\$\$/g, (match) => {
+                                                    return match.replace(/\\n/g, '\n');
+                                                })
+                                                .replace(/\$([\s\S]*?)\$/g, (match) => {
+                                                    return match.replace(/\\n/g, '\n');
+                                                });
+                                            
+                                            stepDiv.innerHTML = fixedHtmlContent;
+                                        } catch (e) {
+                                            console.error('Erreur de traitement Markdown:', e);
+                                            stepDiv.innerHTML = content; // Fallback en cas d'erreur
                                         }
-
-                                        if (inList) {
-                                            htmlOutput += `</${listType}>`;
-                                        }
-
-                                        // Remove empty paragraph tags that might have been created
-                                        htmlOutput = htmlOutput.replace(/<p>\s*<\/p>/g, '');
-
-                                        stepDiv.innerHTML = htmlOutput; // Use the processed HTML
+                                        
                                         solutionContainer.appendChild(stepDiv);
-
-                                        // Process MathJax for this specific section (will process the new content)
-                                        if (typeof MathJax !== 'undefined') {
-                                             // Use typesetPromise and target the newly added stepDiv
-                                            MathJax.typesetPromise([stepDiv]).catch(e => console.error('MathJax typesetting error:', e));
+                                        
+                                        // Rendu LaTeX avec KaTeX dans cette section spécifique
+                                        try {
+                                            renderMathInElement(stepDiv);
+                                        } catch (e) {
+                                            console.error('Erreur de rendu LaTeX:', e);
                                         }
                                     }
-                                    // Hide the loading indicator once content starts arriving (optional, but can feel more responsive)
-                                    // loadingIndicator.style.display = 'none'; // Keep it visible to show mode changes
                                 }
 
-                                // Handle error messages
+                                // Gérer les messages d'erreur
                                 if (data.error) {
                                     const errorDiv = document.createElement('div');
-                                    errorDiv.className = 'step-section'; // Use step section styling for errors
+                                    errorDiv.className = 'step-section';
                                     errorDiv.style.color = 'red';
                                     errorDiv.style.backgroundColor = '#ffeeee';
                                     errorDiv.style.borderColor = 'red';
                                     errorDiv.textContent = `Erreur: ${data.error}`;
                                     solutionContainer.appendChild(errorDiv);
-                                    loadingIndicator.style.display = 'none'; // Hide loading indicator on error
+                                    loadingIndicator.style.display = 'none';
                                 }
                             } catch (e) {
-                                console.error('Error parsing JSON or processing message:', e, message);
-                                // Display a client-side processing error message
+                                console.error('Erreur d\'analyse JSON ou de traitement du message:', e, message);
                                 const errorDiv = document.createElement('div');
                                 errorDiv.className = 'step-section';
                                 errorDiv.style.color = 'orange';
-                                errorDiv.textContent = `Erreur traitement message: ${message.substring(0, 100)}...`; // Show a snippet of the problematic line
+                                errorDiv.textContent = `Erreur traitement message: ${message.substring(0, 100)}...`;
                                 solutionContainer.appendChild(errorDiv);
                                 loadingIndicator.style.display = 'none';
                             }
-                        } else {
-                            // Handle potential non-data lines if necessary, or ignore
-                            // console.warn("Received non-data line:", message); // Uncomment for debugging
                         }
                     }
 
-                    // Scroll to the bottom of the solution container as new content arrives
+                    // Défiler vers le bas du conteneur de solution à mesure que du nouveau contenu arrive
                     solutionOutput.scrollTop = solutionOutput.scrollHeight;
 
-                    // Continue reading the stream
+                    // Continuer à lire le flux
                     return reader.read().then(processStream);
                 }
 
-                // Start processing the stream
+                // Commencer à traiter le flux
                 return reader.read().then(processStream);
             })
             .catch(error => {
-                // Handle errors during the fetch or from the initial response check
+                // Gérer les erreurs pendant le fetch ou de la vérification de réponse initiale
                 const errorDiv = document.createElement('div');
                 errorDiv.className = 'step-section';
                 errorDiv.style.color = 'red';
@@ -699,10 +678,16 @@
                 errorDiv.textContent = `Erreur de connexion ou du serveur: ${error}`;
                 solutionContainer.appendChild(errorDiv);
                 loadingIndicator.style.display = 'none';
-                console.error('Fetch error:', error);
+                console.error('Erreur fetch:', error);
             });
         });
 
+        // Auto-render KaTeX function
+        document.addEventListener('DOMContentLoaded', function() {
+            document.querySelectorAll('.step-section').forEach(function(element) {
+                renderMathInElement(element);
+            });
+        });
     </script>
 </body>
 </html>