Update templates/maj.html

templates/maj.html

@@ -5,6 +5,7 @@
     <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/highlight.js/11.7.0/styles/atom-one-dark.min.css" rel="stylesheet">
     <style>
         :root {
             --primary-color: #4a6fa5;
@@ -13,6 +14,8 @@
             --background-color: #f8f9fa;
             --text-color: #333;
             --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            --code-bg: #2c323c;
+            --output-bg: #f1f8f9;
         }
         
         body {
@@ -116,6 +119,110 @@
             font-size: 0.9rem;
         }
         
+        #solution {
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            text-align: left;
+            line-height: 1.8;
+            font-size: 16px;
+        }
+        
+        .code-section {
+            margin: 20px 0;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        
+        .code-header {
+            background-color: #343a40;
+            color: white;
+            padding: 8px 15px;
+            font-size: 14px;
+            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;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.5;
+        }
+        
+        .output-section {
+            background-color: var(--output-bg);
+            padding: 15px;
+            border-radius: 0 0 8px 8px;
+            border-top: 1px solid #ddd;
+            color: #333;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            white-space: pre-wrap;
+            overflow-x: auto;
+        }
+        
+        .step-section {
+            margin: 25px 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;
+        }
+        
+        .thinking-indicator, .executing-indicator, .answering-indicator {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 8px;
+            font-size: 0.9rem;
+        }
+        
+        .thinking-indicator {
+            background-color: #e3f2fd;
+            color: #1565c0;
+        }
+        
+        .executing-indicator {
+            background-color: #ede7f6;
+            color: #5e35b1;
+        }
+        
+        .answering-indicator {
+            background-color: #e8f5e9;
+            color: #2e7d32;
+        }
+        
+        .indicator-icon {
+            margin-right: 10px;
+            animation: pulse 1.5s infinite ease-in-out;
+        }
+        
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+        
+        .katex-display {
+            overflow-x: auto;
+            padding: 8px 0;
+        }
+        
         @media (max-width: 768px) {
             .container {
                 padding: 15px;
@@ -170,10 +277,11 @@
             
             <div id="solutionOutput" style="margin-top: 30px; text-align: left; display: none;">
                 <h3>Solution :</h3>
-                <div id="loadingIndicator" style="display: none; text-align: center;">
-                    <p><i class="fas fa-spinner fa-spin"></i> Analyse et résolution en cours...</p>
+                <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>
-                <div id="solution" style="background: #f9f9f9; padding: 20px; border-radius: 8px; white-space: pre-wrap;"></div>
+                <div id="solution" style="background: #fff; padding: 20px; border-radius: 8px;"></div>
             </div>
             
             <div class="upgrade-section">
@@ -188,6 +296,8 @@
         </footer>
     </div>
     
+    <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>
     <script>
         document.getElementById('imageInput').addEventListener('change', function(event) {
             const file = event.target.files[0];
@@ -210,7 +320,7 @@
             const solution = document.getElementById('solution');
             
             solutionOutput.style.display = 'block';
-            loadingIndicator.style.display = 'block';
+            loadingIndicator.style.display = 'flex';
             solution.innerHTML = '';
             
             fetch('/solved', {
@@ -220,15 +330,31 @@
             .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 chunk = decoder.decode(value, { stream: true });
-                    const lines = chunk.split('\n\n');
+                    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: ')) {
@@ -236,53 +362,96 @@
                                 const data = JSON.parse(line.substr(6));
                                 
                                 if (data.mode === 'thinking') {
-                                    loadingIndicator.innerHTML = '<p><i class="fas fa-brain"></i> Je réfléchis au problème...</p>';
+                                    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.innerHTML = '<p><i class="fas fa-pencil-alt"></i> Rédaction de la solution...</p>';
+                                    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.innerHTML = '<p><i class="fas fa-code"></i> Exécution de code pour la résolution...</p>';
+                                    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>';
                                 }
                                 
                                 if (data.content) {
-                                    solution.innerHTML += data.content;
-                                    MathJax.typeset([solution]);
+                                    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);
+                                        }
+                                    }
                                 }
                                 
                                 if (data.error) {
-                                    solution.innerHTML += `<div style="color: red;">Erreur: ${data.error}</div>`;
+                                    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);
+                                console.error('Error parsing JSON:', e, line);
                             }
                         }
                     }
                     
+                    // Scroll to bottom automatically
+                    window.scrollTo(0, document.body.scrollHeight);
+                    
                     return reader.read().then(processStream);
                 }
                 
                 return reader.read().then(processStream);
             })
             .catch(error => {
-                solution.innerHTML += `<div style="color: red;">Erreur de connexion: ${error}</div>`;
+                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';
             });
         });
     </script>
     
-    <!-- MathJax pour le rendu LaTeX -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.js"></script>
-    <script>
-        window.MathJax = {
-            tex: {
-                inlineMath: [['$', '$'], ['\\(', '\\)']],
-                displayMath: [['$$', '$$'], ['\\[', '\\]']],
-                processEscapes: true
-            },
-            options: {
-                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre']
-            }
-        };
-    </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>