Update templates/maj.html

templates/maj.html

@@ -4,8 +4,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <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/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"> <!-- Updated Font Awesome -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" rel="stylesheet">
+    <!-- KaTeX CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css" integrity="sha384-n8MVd4RsNIU0tAv4ct0nTaAbDJwPJzDEaqSD1tBCETAMZN+vtEQFPxfujAHU4/mz" crossorigin="anonymous">
     <style>
         :root {
             --primary-color: #4a6fa5;
@@ -13,11 +15,11 @@
             --accent-color: #4fc3f7;
             --background-color: #f8f9fa;
             --text-color: #333;
-            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Slightly enhanced shadow */
             --code-bg: #2c323c;
             --output-bg: #f1f8f9;
         }
-        
+
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             line-height: 1.6;
@@ -25,33 +27,36 @@
             padding: 0;
             background-color: var(--background-color);
             color: var(--text-color);
+            font-size: 16px; /* Base font size */
         }
-        
+
         .container {
             max-width: 1000px;
             margin: 0 auto;
             padding: 20px;
+            box-sizing: border-box; /* Include padding in width */
         }
-        
+
         header {
             text-align: center;
             padding: 20px 0;
             margin-bottom: 30px;
+            border-bottom: 1px solid #eee;
         }
-        
+
         .logo {
-            font-size: 2.5rem;
+            font-size: 2.2rem; /* Adjusted size */
             font-weight: bold;
             color: var(--primary-color);
-            margin-bottom: 10px;
+            margin-bottom: 5px;
         }
-        
+
         .subtitle {
-            font-size: 1.2rem;
+            font-size: 1.1rem; /* Adjusted size */
             color: var(--secondary-color);
             margin-bottom: 20px;
         }
-        
+
         .content-box {
             background-color: white;
             border-radius: 10px;
@@ -60,32 +65,58 @@
             margin-bottom: 30px;
             text-align: center;
         }
-        
+
         h1 {
             color: var(--primary-color);
             margin-top: 0;
+            margin-bottom: 15px;
+            font-size: 1.8rem;
+        }
+
+        h2 {
+             color: var(--secondary-color);
+             margin-top: 25px;
+             margin-bottom: 15px;
+             font-size: 1.5rem;
         }
-        
+         h3 {
+             color: var(--primary-color);
+             margin-top: 20px;
+             margin-bottom: 10px;
+             font-size: 1.3rem;
+             text-align: left; /* Align solution heading left */
+         }
+
         .feature-list {
             list-style-type: none;
             padding: 0;
-            margin: 30px 0;
+            margin: 20px 0 30px 0;
             text-align: left;
+            display: inline-block; /* Center the list block itself */
         }
-        
+
         .feature-list li {
-            padding: 10px 0;
-            margin-bottom: 10px;
+            padding: 8px 0;
+            margin-bottom: 8px;
             display: flex;
             align-items: center;
+            font-size: 1rem;
         }
-        
+
         .feature-list i {
             color: var(--accent-color);
-            margin-right: 10px;
+            margin-right: 12px;
             font-size: 1.2rem;
+            width: 20px; /* Ensure alignment */
+            text-align: center;
         }
-        
+        .feature-list li .fa-times-circle {
+             color: #aaa; /* Dimmer color for unavailable features */
+        }
+         .feature-list li span {
+            color: #777; /* Style the descriptive text */
+         }
+
         .cta-button {
             display: inline-block;
             background-color: var(--primary-color);
@@ -95,143 +126,238 @@
             text-decoration: none;
             font-weight: bold;
             transition: all 0.3s ease;
-            margin: 20px 10px;
+            margin: 10px 5px; /* Adjusted margin */
             border: none;
             cursor: pointer;
+            font-size: 1rem;
+            text-align: center;
         }
-        
+
         .cta-button:hover {
             background-color: var(--secondary-color);
             transform: translateY(-2px);
             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
         }
-        
-        .upgrade-section {
+        .cta-button i {
+            margin-right: 8px;
+        }
+
+        .upload-section, .upgrade-section {
             margin-top: 30px;
-            padding: 20px;
-            border-top: 1px solid #ddd;
+            padding-top: 20px;
+            border-top: 1px solid #eee;
         }
-        
+
         footer {
             text-align: center;
-            padding: 20px 0;
+            padding: 30px 0 20px 0;
             color: #666;
             font-size: 0.9rem;
+            border-top: 1px solid #eee;
+            margin-top: 40px;
+        }
+
+        #solutionOutput {
+            margin-top: 30px;
+            text-align: left;
+            display: none; /* Initially hidden */
         }
-        
+
         #solution {
-            background: #fff;
+            background: #fff; /* White background for readability */
             padding: 20px;
             border-radius: 8px;
             text-align: left;
             line-height: 1.8;
-            font-size: 16px;
+            font-size: 1rem; /* Ensure consistent font size */
+            border: 1px solid #eee; /* Subtle border */
+            margin-top: 15px;
+            overflow-x: auto; /* Allow horizontal scroll if needed */
         }
-        
+
+        /* Code Block Styling */
         .code-section {
             margin: 20px 0;
             border-radius: 8px;
-            overflow: hidden;
+            overflow: hidden; /* Important for border radius */
             box-shadow: 0 2px 5px rgba(0,0,0,0.1);
         }
-        
+
         .code-header {
             background-color: #343a40;
             color: white;
-            padding: 8px 15px;
-            font-size: 14px;
+            padding: 10px 15px;
+            font-size: 0.9em;
             font-family: 'Courier New', monospace;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
         }
-        
+
         .code-content {
             margin: 0;
             padding: 15px;
             background-color: var(--code-bg);
             color: #e6e6e6;
-            overflow-x: auto;
+            overflow-x: auto; /* Essential for long code lines */
             font-family: 'Courier New', monospace;
-            font-size: 14px;
+            font-size: 0.9em;
             line-height: 1.5;
         }
-        
+        /* Ensure pre/code take full advantage */
+        .code-content pre, .code-content code {
+            margin: 0;
+            padding: 0;
+            background: none;
+            white-space: pre; /* Let overflow-x handle wrapping */
+        }
+
+        /* Output Block Styling */
         .output-section {
             background-color: var(--output-bg);
             padding: 15px;
-            border-radius: 0 0 8px 8px;
-            border-top: 1px solid #ddd;
+            margin: 15px 0; /* Spacing */
+            border-radius: 8px;
+            border: 1px solid #d6e0e2; /* Subtle border */
             color: #333;
             font-family: 'Courier New', monospace;
-            font-size: 14px;
-            white-space: pre-wrap;
-            overflow-x: auto;
+            font-size: 0.9em;
+            white-space: pre-wrap; /* Wrap text */
+            overflow-x: auto; /* Scroll if needed */
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
         }
-        
+
+        /* Step Styling */
         .step-section {
-            margin: 25px 0;
+            margin: 20px 0;
             padding: 15px;
-            background-color: #f9f9f9;
-            border-left: 4px solid var(--primary-color);
-            border-radius: 0 8px 8px 0;
-        }
-        
-        .math-display {
-            overflow-x: auto;
-            padding: 10px 0;
-            text-align: center;
+            background-color: #fdfdfd; /* Slightly off-white */
+            border-left: 4px solid var(--accent-color); /* Use accent color */
+            border-radius: 0 5px 5px 0;
+            overflow-wrap: break-word; /* Break long words/URLs */
         }
-        
-        .thinking-indicator, .executing-indicator, .answering-indicator {
+        .step-section:first-child {
+            margin-top: 0;
+        }
+         .step-section:last-child {
+            margin-bottom: 0;
+        }
+
+        /* Indicator Styling */
+        .indicator {
             display: flex;
             align-items: center;
-            padding: 10px;
-            margin: 10px 0;
+            padding: 12px 15px;
+            margin: 15px 0;
             border-radius: 8px;
-            font-size: 0.9rem;
+            font-size: 0.95rem;
+            border: 1px solid transparent;
         }
-        
-        .thinking-indicator {
-            background-color: #e3f2fd;
-            color: #1565c0;
+        .indicator.thinking-indicator {
+            background-color: #e3f2fd; color: #1565c0; border-color: #bde0fe;
         }
-        
-        .executing-indicator {
-            background-color: #ede7f6;
-            color: #5e35b1;
+        .indicator.executing-indicator {
+            background-color: #ede7f6; color: #5e35b1; border-color: #d1c4e9;
         }
-        
-        .answering-indicator {
-            background-color: #e8f5e9;
-            color: #2e7d32;
+        .indicator.answering-indicator {
+            background-color: #e8f5e9; color: #2e7d32; border-color: #c8e6c9;
         }
-        
-        .indicator-icon {
+        .indicator i {
             margin-right: 10px;
+            font-size: 1.1em;
             animation: pulse 1.5s infinite ease-in-out;
         }
-        
         @keyframes pulse {
-            0% { opacity: 0.6; }
+            0%, 100% { opacity: 0.7; }
             50% { opacity: 1; }
-            100% { opacity: 0.6; }
         }
-        
+
+        /* KaTeX Display adjustments */
         .katex-display {
-            overflow-x: auto;
-            padding: 8px 0;
+            overflow-x: auto; /* Allow scrolling for wide equations */
+            overflow-y: hidden;
+            padding: 8px 0; /* Add some vertical padding */
         }
-        
+        .katex {
+             font-size: 1.1em; /* Slightly larger math font */
+             text-align: left; /* Default math alignment */
+        }
+        .katex-display > .katex {
+            text-align: center; /* Center display math */
+            display: block; /* Ensure it takes block space */
+        }
+
+
+        /* --- Responsive Design --- */
+
+        /* Smaller Desktops / Large Tablets */
+        @media (max-width: 992px) {
+            .container {
+                max-width: 90%;
+            }
+        }
+
+        /* Tablets and smaller */
         @media (max-width: 768px) {
             .container {
                 padding: 15px;
             }
-            
+            .logo {
+                 font-size: 2rem;
+            }
+            .subtitle {
+                font-size: 1rem;
+            }
+            h1 { font-size: 1.6rem; }
+            h2 { font-size: 1.3rem; }
+             h3 { font-size: 1.2rem; }
+
             .content-box {
                 padding: 20px;
             }
+            .feature-list {
+                display: block; /* Stack list items */
+                text-align: left; /* Align text left on mobile */
+                margin-left: auto; /* Keep centering effect if desired */
+                margin-right: auto;
+            }
+            .upload-section, .upgrade-section {
+                padding-top: 15px;
+            }
+             #imagePreview {
+                 max-width: 100%; /* Ensure preview fits */
+             }
+            #imagePreview img {
+                max-width: 100%; /* Scale image within preview */
+                height: auto; /* Maintain aspect ratio */
+            }
         }
+
+        /* Mobile phones */
+        @media (max-width: 576px) {
+            body {
+                font-size: 15px; /* Slightly smaller base font */
+            }
+             .logo {
+                 font-size: 1.8rem;
+            }
+            .cta-button {
+                display: block; /* Stack buttons */
+                width: 100%;
+                margin: 10px 0; /* Adjust margin for stacked buttons */
+                box-sizing: border-box; /* Include padding in width */
+            }
+             #solveButton {
+                margin-top: 15px;
+             }
+            .content-box {
+                padding: 15px;
+            }
+            #solution {
+                padding: 15px;
+            }
+            .code-header, .code-content, .output-section {
+                font-size: 0.85em; /* Smaller code font on mobile */
+            }
+        }
+
     </style>
 </head>
 <body>
@@ -240,218 +366,302 @@
             <div class="logo">Math Solver</div>
             <div class="subtitle">La solution intelligente pour vos problèmes mathématiques</div>
         </header>
-        
+
         <div class="content-box">
             <h1>Version Gratuite</h1>
             <p>Vous utilisez actuellement la version gratuite de Math Solver qui vous permet de résoudre 3 problèmes par jour.</p>
-            
-            <div class="feature-list">
-                <h2>Fonctionnalités disponibles :</h2>
-                <ul class="feature-list">
-                    <li><i class="fas fa-check-circle"></i> Résolution de problèmes mathématiques basiques</li>
-                    <li><i class="fas fa-check-circle"></i> 3 résolutions gratuites par jour</li>
-                    <li><i class="fas fa-check-circle"></i> Explication des étapes de résolution</li>
-                    <li><i class="fas fa-times-circle"></i> <span style="color: #999;">Mode d'exécution de code avancé (version Pro)</span></li>
-                    <li><i class="fas fa-times-circle"></i> <span style="color: #999;">Résolutions illimitées (version Pro)</span></li>
-                    <li><i class="fas fa-times-circle"></i> <span style="color: #999;">Support prioritaire (version Pro)</span></li>
-                </ul>
-            </div>
-            
+
+            <h2>Fonctionnalités disponibles :</h2>
+            <ul class="feature-list">
+                <li><i class="fas fa-check-circle"></i> Résolution de problèmes mathématiques</li>
+                <li><i class="fas fa-check-circle"></i> 3 résolutions gratuites par jour</li>
+                <li><i class="fas fa-check-circle"></i> Explication des étapes de résolution</li>
+                <li><i class="fas fa-check-circle"></i> Support du format LaTeX</li>
+                <li><i class="fas fa-times-circle"></i> <span>Exécution de code Python (Pro)</span></li>
+                <li><i class="fas fa-times-circle"></i> <span>Résolutions illimitées (Pro)</span></li>
+                <li><i class="fas fa-times-circle"></i> <span>Support prioritaire (Pro)</span></li>
+            </ul>
+
             <div class="upload-section">
-                <form id="imageForm" enctype="multipart/form-data">
-                    <input type="file" id="imageInput" name="image" accept="image/*" style="display: none;">
-                    <button type="button" id="uploadButton" class="cta-button" onclick="document.getElementById('imageInput').click()">
-                        <i class="fas fa-upload"></i> Télécharger une image
-                    </button>
-                </form>
-                
-                <p id="uploadStatus"></p>
-                <div id="imagePreview" style="display: none; margin: 20px auto; max-width: 500px;">
-                    <img id="preview" style="width: 100%; border-radius: 8px; box-shadow: var(--box-shadow);">
+                 <h2>Soumettre un problème</h2>
+                 <form id="imageForm" enctype="multipart/form-data">
+                     <!-- Hide the actual input -->
+                     <input type="file" id="imageInput" name="image" accept="image/*" style="display: none;">
+                     <!-- Style a button to trigger the input -->
+                     <button type="button" class="cta-button" onclick="document.getElementById('imageInput').click()">
+                         <i class="fas fa-upload"></i> Télécharger une image
+                     </button>
+                 </form>
+
+                 <p id="uploadStatus" style="margin-top: 15px; font-size: 0.9em; color: #555;"></p>
+                 <div id="imagePreview" style="display: none; margin: 20px auto; max-width: 400px;"> <!-- Adjusted max-width -->
+                     <img id="preview" style="display: block; width: 100%; border-radius: 8px; box-shadow: var(--box-shadow);">
+                 </div>
+
+                 <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);">
+                     <i class="fas fa-calculator"></i> Résoudre ce problème
+                 </button>
+             </div>
+
+            <div id="solutionOutput" style="display: none;"> <!-- Container for the whole solution section -->
+                <h3>Solution Détaillée :</h3>
+                <div id="loadingIndicator" class="indicator" style="display: none;">
+                    <!-- Content set by JS -->
                 </div>
-                
-                <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);">
-                    <i class="fas fa-calculator"></i> Résoudre ce problème
-                </button>
-            </div>
-            
-            <div id="solutionOutput" style="margin-top: 30px; text-align: left; display: none;">
-                <h3>Solution :</h3>
-                <div id="loadingIndicator" class="thinking-indicator" style="display: none;">
-                    <i class="fas fa-brain indicator-icon"></i>
-                    <span>Je réfléchis au problème...</span>
+                <div id="solution">
+                    <!-- Solution content will be injected here -->
                 </div>
-                <div id="solution" style="background: #fff; padding: 20px; border-radius: 8px;"></div>
             </div>
-            
+
+
             <div class="upgrade-section">
-                <h2>Besoin de plus de puissance ?</h2>
+                <h2>Besoin de plus ?</h2>
                 <p>Passez à la version Pro pour des fonctionnalités avancées et des résolutions illimitées.</p>
-                <a href="#" class="cta-button">Passer à la version Pro</a>
+                <a href="#" class="cta-button">Passer à la version Pro <i class="fas fa-arrow-right"></i></a>
             </div>
         </div>
-        
+
         <footer>
-            <p>&copy; 2025 Math Solver. Tous droits réservés.</p>
+            <p>© 2025 Math Solver. Tous droits réservés.</p>
         </footer>
     </div>
-    
+
+    <!-- Dependencies: Highlight.js -->
     <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>
+
+    <!-- Dependencies: KaTeX -->
+    <!-- The loading of KaTeX is deferred to speed up page rendering -->
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js" integrity="sha384-XjKyOOlGwcjNTAIQHIpgOno0Hl1YQqzUOEleOLALmuqehneUG+vnGctmUb0ZY0l8" crossorigin="anonymous"></script>
+    <script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/contrib/auto-render.min.js" integrity="sha384-+VBxd3r6XgURycqtZ117nYw44OOcIax56Z4dCRWbxyPt0Koah1uHoK0o4+/RRE05" crossorigin="anonymous"></script>
+
     <script>
-        document.getElementById('imageInput').addEventListener('change', function(event) {
-            const file = event.target.files[0];
-            if (file) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    document.getElementById('preview').src = e.target.result;
-                    document.getElementById('imagePreview').style.display = 'block';
-                    document.getElementById('solveButton').style.display = 'inline-block';
-                    document.getElementById('uploadStatus').textContent = `Image sélectionnée : ${file.name}`;
-                }
-                reader.readAsDataURL(file);
-            }
-        });
-        
-        document.getElementById('solveButton').addEventListener('click', function() {
-            const formData = new FormData(document.getElementById('imageForm'));
+        document.addEventListener('DOMContentLoaded', (event) => {
+
+            const imageInput = document.getElementById('imageInput');
+            const uploadStatus = document.getElementById('uploadStatus');
+            const imagePreview = document.getElementById('imagePreview');
+            const preview = document.getElementById('preview');
+            const solveButton = document.getElementById('solveButton');
+            const imageForm = document.getElementById('imageForm');
             const solutionOutput = document.getElementById('solutionOutput');
             const loadingIndicator = document.getElementById('loadingIndicator');
-            const solution = document.getElementById('solution');
-            
-            solutionOutput.style.display = 'block';
-            loadingIndicator.style.display = 'flex';
-            solution.innerHTML = '';
-            
-            fetch('/solved', {
-                method: 'POST',
-                body: formData
-            })
-            .then(response => {
-                const reader = response.body.getReader();
-                const decoder = new TextDecoder();
-                let buffer = '';
-                
-                function processStream({ done, value }) {
-                    if (done) {
-                        loadingIndicator.style.display = 'none';
-                        // Render any remaining LaTeX once stream is complete
-                        try {
-                            renderMathInElement(solution, {
-                                delimiters: [
-                                    {left: '$$', right: '$$', display: true},
-                                    {left: '$', right: '$', display: false},
-                                    {left: '\\(', right: '\\)', display: false},
-                                    {left: '\\[', right: '\\]', display: true}
-                                ],
-                                throwOnError: false
-                            });
-                        } catch (e) {
-                            console.error('Error rendering LaTeX:', e);
-                        }
-                        return;
+            const solutionDiv = document.getElementById('solution'); // Renamed for clarity
+
+            imageInput.addEventListener('change', function(event) {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = function(e) {
+                        preview.src = e.target.result;
+                        imagePreview.style.display = 'block';
+                        solveButton.style.display = 'inline-block'; // Or 'block' based on mobile styles
+                        uploadStatus.textContent = `Image sélectionnée : ${file.name}`;
+                        solutionOutput.style.display = 'none'; // Hide previous solution
+                        solutionDiv.innerHTML = ''; // Clear previous solution
                     }
-                    
-                    buffer += decoder.decode(value, { stream: true });
-                    const lines = buffer.split('\n\n');
-                    buffer = lines.pop(); // Keep the incomplete chunk for next time
-                    
-                    for (const line of lines) {
-                        if (line.startsWith('data: ')) {
+                    reader.readAsDataURL(file);
+                } else {
+                     // Reset if no file selected
+                     uploadStatus.textContent = '';
+                     imagePreview.style.display = 'none';
+                     solveButton.style.display = 'none';
+                     preview.src = '';
+                }
+            });
+
+            solveButton.addEventListener('click', function() {
+                const formData = new FormData(imageForm);
+                if (!imageInput.files[0]) {
+                    alert("Veuillez d'abord sélectionner une image.");
+                    return;
+                }
+
+                solutionOutput.style.display = 'block'; // Show the solution area
+                loadingIndicator.style.display = 'flex'; // Show loading
+                loadingIndicator.className = 'indicator thinking-indicator'; // Reset class
+                loadingIndicator.innerHTML = '<i class="fas fa-brain indicator-icon"></i><span>Préparation de la requête...</span>';
+                solutionDiv.innerHTML = ''; // Clear previous solution content
+
+                fetch('/solved', { // Make sure this endpoint matches your backend
+                    method: 'POST',
+                    body: formData
+                })
+                .then(response => {
+                    if (!response.ok) {
+                        throw new Error(`Erreur HTTP: ${response.status}`);
+                    }
+                    if (!response.body) {
+                         throw new Error("La réponse ne contient pas de corps.");
+                    }
+
+                    const reader = response.body.getReader();
+                    const decoder = new TextDecoder();
+                    let buffer = '';
+                    let accumulatedContent = ''; // Store all content for final rendering
+
+                    function processStream({ done, value }) {
+                        if (done) {
+                            loadingIndicator.style.display = 'none';
+                            // Process any remaining buffer
+                            if (buffer.trim()) {
+                                 // This assumes the last part is regular text/LaTeX
+                                 // Might need adjustment if code/output can be the last chunk
+                                 const finalStepDiv = document.createElement('div');
+                                 finalStepDiv.className = 'step-section';
+                                 finalStepDiv.innerHTML = buffer; // Use innerHTML to allow potential HTML tags in the last chunk
+                                 solutionDiv.appendChild(finalStepDiv);
+                                 accumulatedContent += buffer;
+                            }
+
+                            // FINAL LaTeX Rendering
                             try {
-                                const data = JSON.parse(line.substr(6));
-                                
-                                if (data.mode === 'thinking') {
-                                    loadingIndicator.className = 'thinking-indicator';
-                                    loadingIndicator.innerHTML = '<i class="fas fa-brain indicator-icon"></i><span>Je réfléchis au problème...</span>';
-                                } else if (data.mode === 'answering') {
-                                    loadingIndicator.className = 'answering-indicator';
-                                    loadingIndicator.innerHTML = '<i class="fas fa-pencil-alt indicator-icon"></i><span>Rédaction de la solution...</span>';
-                                } else if (data.mode === 'executing_code') {
-                                    loadingIndicator.className = 'executing-indicator';
-                                    loadingIndicator.innerHTML = '<i class="fas fa-code indicator-icon"></i><span>Exécution de code pour la résolution...</span>';
-                                } else if (data.mode === 'code_result') {
-                                    loadingIndicator.className = 'executing-indicator';
-                                    loadingIndicator.innerHTML = '<i class="fas fa-terminal indicator-icon"></i><span>Traitement des résultats...</span>';
+                                // Check if KaTeX is loaded
+                                if (window.renderMathInElement) {
+                                     renderMathInElement(solutionDiv, {
+                                         delimiters: [
+                                             {left: '$$', right: '$$', display: true},
+                                             {left: '$', right: '$', display: false},
+                                             {left: '\\(', right: '\\)', display: false},
+                                             {left: '\\[', right: '\\]', display: true}
+                                         ],
+                                         throwOnError: false // Don't stop rendering on single error
+                                     });
+                                } else {
+                                    console.warn("KaTeX auto-render not loaded yet.");
+                                    // Optionally add a message or retry mechanism
                                 }
-                                
-                                if (data.content) {
-                                    const content = data.content;
-                                    
-                                    // Detect if this is code or output and format appropriately
-                                    if (content.includes('```python')) {
-                                        // This is code
-                                        const code = content.replace(/```python\n([\s\S]*?)\n```/g, function(match, p1) {
-                                            return `<div class="code-section">
-                                                <div class="code-header">
-                                                    <span>Code Python</span>
-                                                </div>
-                                                <pre><code class="language-python">${p1}</code></pre>
-                                            </div>`;
-                                        });
-                                        solution.innerHTML += code;
-                                        
-                                        // Apply syntax highlighting
-                                        document.querySelectorAll('pre code').forEach((block) => {
-                                            hljs.highlightElement(block);
-                                        });
-                                    } 
-                                    else if (content.includes('Résultat d\'exécution:')) {
-                                        // This is code output
-                                        const output = content.replace(/Résultat d'exécution:\n```\n([\s\S]*?)\n```/g, function(match, p1) {
-                                            return `<div class="output-section">${p1}</div>`;
-                                        });
-                                        solution.innerHTML += output;
-                                    } 
-                                    else {
-                                        // Regular text, might contain LaTeX
-                                        solution.innerHTML += `<div class="step-section">${content}</div>`;
-                                        
-                                        // Render LaTeX incrementally
-                                        try {
-                                            renderMathInElement(solution, {
-                                                delimiters: [
-                                                    {left: '$$', right: '$$', display: true},
-                                                    {left: '$', right: '$', display: false},
-                                                    {left: '\\(', right: '\\)', display: false},
-                                                    {left: '\\[', right: '\\]', display: true}
-                                                ],
-                                                throwOnError: false
-                                            });
-                                        } catch (e) {
-                                            console.error('Error rendering LaTeX:', e);
+                            } catch (e) {
+                                console.error('Erreur lors du rendu final de LaTeX:', e);
+                                solutionDiv.innerHTML += `<div style="color: orange; margin-top: 10px;">Erreur lors de l'affichage de certaines formules mathématiques.</div>`;
+                            }
+
+                            // Final Highlight.js call (optional, could rely on per-block)
+                            // hljs.highlightAll(); // Or just rely on highlightElement below
+
+                            // Scroll to the solution area
+                            solutionOutput.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                            return;
+                        }
+
+                        buffer += decoder.decode(value, { stream: true });
+                        // Split by double newline, assuming that separates messages
+                        const parts = buffer.split('\n\n');
+                        buffer = parts.pop() || ''; // Keep incomplete part for next chunk
+
+                        parts.forEach(part => {
+                            if (part.startsWith('data: ')) {
+                                try {
+                                    const jsonData = JSON.parse(part.substring(6)); // Remove 'data: '
+                                    accumulatedContent += jsonData.content || ''; // Add to total content
+
+                                    // Update Indicator
+                                    if (jsonData.mode) {
+                                        loadingIndicator.style.display = 'flex'; // Ensure visible
+                                        if (jsonData.mode === 'thinking') {
+                                            loadingIndicator.className = 'indicator thinking-indicator';
+                                            loadingIndicator.innerHTML = '<i class="fas fa-brain indicator-icon"></i><span>Je réfléchis au problème...</span>';
+                                        } else if (jsonData.mode === 'answering') {
+                                            loadingIndicator.className = 'indicator answering-indicator';
+                                            loadingIndicator.innerHTML = '<i class="fas fa-pencil-alt indicator-icon"></i><span>Rédaction de la solution...</span>';
+                                        } else if (jsonData.mode === 'executing_code') {
+                                            loadingIndicator.className = 'indicator executing-indicator';
+                                            loadingIndicator.innerHTML = '<i class="fas fa-code indicator-icon"></i><span>Exécution du code Python...</span>';
+                                        } else if (jsonData.mode === 'code_result') {
+                                            loadingIndicator.className = 'indicator executing-indicator'; // Keep same style?
+                                            loadingIndicator.innerHTML = '<i class="fas fa-terminal indicator-icon"></i><span>Traitement des résultats du code...</span>';
                                         }
                                     }
+
+                                    // Append Content
+                                    if (jsonData.content) {
+                                        const content = jsonData.content;
+                                        let elementToAppend;
+
+                                        if (content.startsWith('```python')) {
+                                            const code = content.replace(/^```python\n?([\s\S]*?)\n?```$/, '$1');
+                                            elementToAppend = document.createElement('div');
+                                            elementToAppend.className = 'code-section';
+                                            elementToAppend.innerHTML = `
+                                                <div class="code-header">Code Python</div>
+                                                <div class="code-content"><pre><code class="language-python">${escapeHtml(code)}</code></pre></div>
+                                            `;
+                                            solutionDiv.appendChild(elementToAppend);
+                                             // Highlight this specific block
+                                             const codeBlock = elementToAppend.querySelector('code');
+                                             if (codeBlock && hljs) {
+                                                 hljs.highlightElement(codeBlock);
+                                             }
+                                        } else if (content.startsWith('Résultat d\'exécution:\n```')) {
+                                            const output = content.replace(/^Résultat d'exécution:\n```\n?([\s\S]*?)\n?```$/, '$1');
+                                            elementToAppend = document.createElement('div');
+                                            elementToAppend.className = 'output-section';
+                                            elementToAppend.textContent = output; // Use textContent for plain output
+                                             solutionDiv.appendChild(elementToAppend);
+                                        } else {
+                                            // Regular text, potentially with inline LaTeX
+                                            elementToAppend = document.createElement('div');
+                                            elementToAppend.className = 'step-section';
+                                            // Use innerHTML carefully, assuming backend sanitizes or it's trusted markdown/html
+                                            elementToAppend.innerHTML = content;
+                                             solutionDiv.appendChild(elementToAppend);
+                                             // We wait until the end to render LaTeX
+                                        }
+                                    }
+
+                                    if (jsonData.error) {
+                                        const errorDiv = document.createElement('div');
+                                        errorDiv.style.cssText = 'color: red; margin: 15px 0; padding: 10px; background: #ffeeee; border: 1px solid #ffdddd; border-radius: 5px;';
+                                        errorDiv.textContent = `Erreur: ${jsonData.error}`;
+                                        solutionDiv.appendChild(errorDiv);
+                                        loadingIndicator.style.display = 'none'; // Hide loading on error display
+                                    }
+
+                                } catch (e) {
+                                    console.error('Erreur de parsing JSON ou traitement:', e, 'Part:', part);
+                                    // Append raw part if parsing fails, for debugging?
+                                    // const errorDiv = document.createElement('div');
+                                    // errorDiv.style.color = 'orange';
+                                    // errorDiv.textContent = `Donnée brute non traitée: ${part}`;
+                                    // solutionDiv.appendChild(errorDiv);
                                 }
-                                
-                                if (data.error) {
-                                    solution.innerHTML += `<div style="color: red; margin: 15px 0; padding: 10px; background: #ffeeee; border-radius: 5px;">Erreur: ${data.error}</div>`;
-                                    loadingIndicator.style.display = 'none';
-                                }
-                            } catch (e) {
-                                console.error('Error parsing JSON:', e, line);
                             }
-                        }
+                        });
+
+                        // Scroll down automatically as content arrives
+                        // window.scrollTo(0, document.body.scrollHeight);
+                        solutionDiv.lastChild?.scrollIntoView({ behavior: 'smooth', block: 'end' });
+
+
+                        // Continue reading the stream
+                        return reader.read().then(processStream);
                     }
-                    
-                    // Scroll to bottom automatically
-                    window.scrollTo(0, document.body.scrollHeight);
-                    
+
+                    // Start processing the stream
                     return reader.read().then(processStream);
-                }
-                
-                return reader.read().then(processStream);
-            })
-            .catch(error => {
-                solution.innerHTML += `<div style="color: red; margin: 15px 0; padding: 10px; background: #ffeeee; border-radius: 5px;">Erreur de connexion: ${error}</div>`;
-                loadingIndicator.style.display = 'none';
+                })
+                .catch(error => {
+                    console.error('Erreur lors de la requête fetch:', error);
+                    loadingIndicator.style.display = 'none'; // Hide loading
+                    const errorDiv = document.createElement('div');
+                    errorDiv.style.cssText = 'color: red; margin: 15px 0; padding: 10px; background: #ffeeee; border: 1px solid #ffdddd; border-radius: 5px;';
+                    errorDiv.textContent = `Erreur de communication avec le serveur: ${error.message}`;
+                    solutionDiv.appendChild(errorDiv);
+                    solutionOutput.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                });
             });
-        });
+
+             // Helper function to escape HTML for code blocks
+             function escapeHtml(unsafe) {
+                 return unsafe
+                      .replace(/&/g, "&")
+                      .replace(/</g, "<")
+                      .replace(/>/g, ">")
+                      .replace(/"/g, """)
+                      .replace(/'/g, "'");
+             }
+        }); // End DOMContentLoaded
     </script>
-    
-    <!-- KaTeX pour le rendu LaTeX (plus rapide et plus léger que MathJax) -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
-    <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>
+
 </body>
 </html>