Update templates/maj.html

templates/maj.html

@@ -6,7 +6,6 @@
     <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">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.16.8/katex.min.css">
     <style>
         :root {
             --primary-color: #4a6fa5;
@@ -19,12 +18,6 @@
             --output-bg: #f1f8f9;
         }
         
-        * {
-            box-sizing: border-box;
-            margin: 0;
-            padding: 0;
-        }
-        
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             line-height: 1.6;
@@ -35,7 +28,6 @@
         }
         
         .container {
-            width: 100%;
             max-width: 1000px;
             margin: 0 auto;
             padding: 20px;
@@ -72,23 +64,12 @@
         h1 {
             color: var(--primary-color);
             margin-top: 0;
-            margin-bottom: 1rem;
-        }
-        
-        h2 {
-            color: var(--secondary-color);
-            margin: 1.5rem 0 1rem;
-        }
-        
-        h3 {
-            color: var(--secondary-color);
-            margin: 1rem 0;
         }
         
         .feature-list {
             list-style-type: none;
             padding: 0;
-            margin: 20px 0;
+            margin: 30px 0;
             text-align: left;
         }
         
@@ -103,7 +84,6 @@
             color: var(--accent-color);
             margin-right: 10px;
             font-size: 1.2rem;
-            flex-shrink: 0;
         }
         
         .cta-button {
@@ -146,7 +126,6 @@
             text-align: left;
             line-height: 1.8;
             font-size: 16px;
-            overflow-x: auto;
         }
         
         .code-section {
@@ -167,8 +146,7 @@
             align-items: center;
         }
         
-        .code-content,
-        pre code {
+        .code-content {
             margin: 0;
             padding: 15px;
             background-color: var(--code-bg);
@@ -177,7 +155,6 @@
             font-family: 'Courier New', monospace;
             font-size: 14px;
             line-height: 1.5;
-            width: 100%;
         }
         
         .output-section {
@@ -198,18 +175,17 @@
             background-color: #f9f9f9;
             border-left: 4px solid var(--primary-color);
             border-radius: 0 8px 8px 0;
-            overflow-x: auto;
+            overflow-x: auto; /* Pour les formules LaTeX larges */
         }
         
-        .math-display {
+        .latex-display {
             overflow-x: auto;
             padding: 10px 0;
+            margin: 15px 0;
             text-align: center;
         }
         
-        .thinking-indicator, 
-        .executing-indicator, 
-        .answering-indicator {
+        .thinking-indicator, .executing-indicator, .answering-indicator {
             display: flex;
             align-items: center;
             padding: 10px;
@@ -244,110 +220,34 @@
             100% { opacity: 0.6; }
         }
         
-        .katex-display {
-            overflow-x: auto;
-            padding: 8px 0;
+        /* Styles spécifiques à MathJax */
+        .MathJax {
+            overflow-x: auto !important;
+            overflow-y: hidden !important;
+            max-width: 100% !important;
         }
         
-        #imagePreview {
-            max-width: 100%;
-            margin: 20px auto;
+        .mjx-chtml {
+            overflow-x: auto !important;
+            overflow-y: hidden !important;
+            max-width: 100% !important;
         }
         
-        #preview {
-            max-width: 100%;
-            height: auto;
-            border-radius: 8px;
-            box-shadow: var(--box-shadow);
+        mjx-container {
+            overflow-x: auto !important;
+            overflow-y: hidden !important;
+            max-width: 100% !important;
+            min-width: 0 !important;
+            padding: 2px 0;
         }
         
-        #uploadStatus {
-            margin: 10px 0;
-            font-size: 0.9rem;
-            color: #666;
-        }
-        
-        /* Responsive design adjustments */
         @media (max-width: 768px) {
             .container {
-                padding: 10px;
-            }
-            
-            .content-box {
                 padding: 15px;
-                margin-bottom: 20px;
-            }
-            
-            .logo {
-                font-size: 2rem;
-            }
-            
-            .subtitle {
-                font-size: 1rem;
-            }
-            
-            .cta-button {
-                padding: 10px 20px;
-                font-size: 0.9rem;
-                margin: 15px 5px;
-                width: 100%;
-                max-width: 300px;
-            }
-            
-            h1 {
-                font-size: 1.8rem;
-            }
-            
-            h2 {
-                font-size: 1.4rem;
-            }
-            
-            .feature-list li {
-                padding: 8px 0;
-            }
-            
-            #solution {
-                padding: 15px;
-                font-size: 15px;
-            }
-            
-            .step-section {
-                padding: 12px;
-                margin: 20px 0;
-            }
-        }
-        
-        @media (max-width: 480px) {
-            .logo {
-                font-size: 1.8rem;
-            }
-            
-            .subtitle {
-                font-size: 0.9rem;
-            }
-            
-            h1 {
-                font-size: 1.6rem;
-            }
-            
-            h2 {
-                font-size: 1.3rem;
             }
             
             .content-box {
-                padding: 12px;
-            }
-            
-            .cta-button {
-                padding: 8px 16px;
-                font-size: 0.85rem;
-            }
-            
-            #solution,
-            .code-content,
-            pre code,
-            .output-section {
-                font-size: 13px;
+                padding: 20px;
             }
         }
     </style>
@@ -363,7 +263,7 @@
             <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>
+            <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>
@@ -384,8 +284,8 @@
                 </form>
                 
                 <p id="uploadStatus"></p>
-                <div id="imagePreview" style="display: none;">
-                    <img id="preview" style="width: 100%;">
+                <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);">
                 </div>
                 
                 <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);">
@@ -399,7 +299,7 @@
                     <i class="fas fa-brain indicator-icon"></i>
                     <span>Je réfléchis au problème...</span>
                 </div>
-                <div id="solution"></div>
+                <div id="solution" style="background: #fff; padding: 20px; border-radius: 8px;"></div>
             </div>
             
             <div class="upgrade-section">
@@ -416,52 +316,69 @@
     
     <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 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>
     
+    <!-- MathJax Configuration -->
     <script>
-        // Configuration globale pour KaTeX
-        document.addEventListener("DOMContentLoaded", function() {
-            // Définir les options pour renderMathInElement
-            window.renderMathConfig = {
-                delimiters: [
-                    {left: '$$', right: '$$', display: true},
-                    {left: '$', right: '$', display: false},
-                    {left: '\\(', right: '\\)', display: false},
-                    {left: '\\[', right: '\\]', display: true},
-                    {left: '\\begin{equation}', right: '\\end{equation}', display: true},
-                    {left: '\\begin{align}', right: '\\end{align}', display: true},
-                    {left: '\\begin{alignat}', right: '\\end{alignat}', display: true},
-                    {left: '\\begin{gather}', right: '\\end{gather}', display: true},
-                    {left: '\\begin{CD}', right: '\\end{CD}', display: true}
-                ],
-                throwOnError: false,
-                strict: false,
-                trust: true,
-                macros: {
-                    "\\R": "\\mathbb{R}",
-                    "\\N": "\\mathbb{N}",
-                    "\\Z": "\\mathbb{Z}",
-                    "\\Q": "\\mathbb{Q}",
-                    "\\C": "\\mathbb{C}"
+        window.MathJax = {
+            tex: {
+                inlineMath: [['$', '$'], ['\\(', '\\)']],
+                displayMath: [['$$', '$$'], ['\\[', '\\]']],
+                processEscapes: true,
+                processEnvironments: true,
+                packages: {'[+]': ['ams', 'noerrors', 'physics', 'cancel', 'color', 'mhchem', 'mathtools']}
+            },
+            options: {
+                enableMenu: false,
+                renderActions: {
+                    addMenu: [], // Disable menu
+                    checkLoading: []
+                },
+                ignoreHtmlClass: 'code-content',
+                processHtmlClass: 'step-section|latex-display',
+                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
+            },
+            startup: {
+                pageReady: function() {
+                    return MathJax.startup.defaultPageReady();
                 }
-            };
-        });
-
-        // Fonction pour rendre LaTeX
-        function renderLatex(element) {
-            if (typeof renderMathInElement === 'function') {
-                try {
-                    renderMathInElement(element, window.renderMathConfig);
-                } catch (e) {
-                    console.error('Erreur lors du rendu LaTeX:', e);
-                }
-            } else {
-                console.warn('La fonction renderMathInElement n\'est pas disponible');
+            },
+            loader: {
+                load: ['[tex]/ams', '[tex]/noerrors', '[tex]/physics', '[tex]/cancel', '[tex]/color', '[tex]/mhchem', '[tex]/mathtools']
+            },
+            svg: {
+                fontCache: 'global'
+            }
+        };
+    </script>
+    <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
+    
+    <script>
+        // Variables to manage MathJax rendering state
+        let mathJaxQueue = [];
+        let isProcessingMathQueue = false;
+        
+        // Process MathJax queue with delay to avoid blocking UI
+        async function processMathJaxQueue() {
+            if (isProcessingMathQueue || mathJaxQueue.length === 0) return;
+            
+            isProcessingMathQueue = true;
+            const element = mathJaxQueue.shift();
+            
+            try {
+                await MathJax.typesetPromise([element]);
+            } catch (e) {
+                console.error('MathJax typesetting failed:', e);
             }
+            
+            isProcessingMathQueue = false;
+            setTimeout(processMathJaxQueue, 100); // Small delay to allow UI updates
+        }
+        
+        function addToMathJaxQueue(element) {
+            mathJaxQueue.push(element);
+            processMathJaxQueue();
         }
-
-        // Gestion de l'upload d'image
+        
         document.getElementById('imageInput').addEventListener('change', function(event) {
             const file = event.target.files[0];
             if (file) {
@@ -476,7 +393,6 @@
             }
         });
         
-        // Fonction pour résoudre le problème
         document.getElementById('solveButton').addEventListener('click', function() {
             const formData = new FormData(document.getElementById('imageForm'));
             const solutionOutput = document.getElementById('solutionOutput');
@@ -487,8 +403,10 @@
             loadingIndicator.style.display = 'flex';
             solution.innerHTML = '';
             
-            // Simuler un streaming pour l'exemple
-            // Dans un environnement réel, ceci serait remplacé par un vrai appel fetch
+            // Reset MathJax queue
+            mathJaxQueue = [];
+            isProcessingMathQueue = false;
+            
             fetch('/solved', {
                 method: 'POST',
                 body: formData
@@ -501,21 +419,25 @@
                 function processStream({ done, value }) {
                     if (done) {
                         loadingIndicator.style.display = 'none';
-                        // Rendu final de LaTeX
-                        renderLatex(solution);
+                        
+                        // Final MathJax render at the end
+                        try {
+                            addToMathJaxQueue(solution);
+                        } catch (e) {
+                            console.error('Error in final MathJax rendering:', e);
+                        }
                         return;
                     }
                     
                     buffer += decoder.decode(value, { stream: true });
                     const lines = buffer.split('\n\n');
-                    buffer = lines.pop(); // Garder le morceau incomplet pour la prochaine fois
+                    buffer = lines.pop(); // Keep the incomplete chunk for next time
                     
                     for (const line of lines) {
                         if (line.startsWith('data: ')) {
                             try {
                                 const data = JSON.parse(line.substr(6));
                                 
-                                // Mettre à jour l'indicateur
                                 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>';
@@ -530,59 +452,69 @@
                                     loadingIndicator.innerHTML = '<i class="fas fa-terminal indicator-icon"></i><span>Traitement des résultats...</span>';
                                 }
                                 
-                                // Traiter le contenu
                                 if (data.content) {
                                     const content = data.content;
                                     
-                                    // Détecter si c'est du code ou une sortie et formater en conséquence
+                                    // Create a container for this new content
+                                    const contentContainer = document.createElement('div');
+                                    
+                                    // Detect if this is code or output and format appropriately
                                     if (content.includes('```python')) {
-                                        // C'est du code
-                                        const code = content.replace(/```python\n([\s\S]*?)\n```/g, function(match, p1) {
+                                        // This is code
+                                        const codeHtml = 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>
+                                                <pre class="code-content"><code class="language-python">${p1}</code></pre>
                                             </div>`;
                                         });
-                                        solution.innerHTML += code;
+                                        contentContainer.innerHTML = codeHtml;
+                                        solution.appendChild(contentContainer);
                                         
-                                        // Appliquer la coloration syntaxique
-                                        document.querySelectorAll('pre code').forEach((block) => {
+                                        // Apply syntax highlighting
+                                        contentContainer.querySelectorAll('pre code').forEach((block) => {
                                             hljs.highlightElement(block);
                                         });
                                     } 
                                     else if (content.includes('Résultat d\'exécution:')) {
-                                        // C'est une sortie de code
-                                        const output = content.replace(/Résultat d'exécution:\n```\n([\s\S]*?)\n```/g, function(match, p1) {
+                                        // This is code output
+                                        const outputHtml = 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;
+                                        contentContainer.innerHTML = outputHtml;
+                                        solution.appendChild(contentContainer);
                                     } 
                                     else {
-                                        // Texte normal, peut contenir du LaTeX
-                                        solution.innerHTML += `<div class="step-section">${content}</div>`;
+                                        // Regular text, might contain LaTeX
+                                        contentContainer.className = 'step-section';
+                                        contentContainer.innerHTML = content;
+                                        solution.appendChild(contentContainer);
                                         
-                                        // Rendu LaTeX incrémental
-                                        renderLatex(solution.lastElementChild);
+                                        // Add to MathJax rendering queue
+                                        addToMathJaxQueue(contentContainer);
                                     }
                                 }
                                 
                                 if (data.error) {
-                                    solution.innerHTML += `<div style="color: red; margin: 15px 0; padding: 10px; background: #ffeeee; border-radius: 5px;">Erreur: ${data.error}</div>`;
+                                    const errorDiv = document.createElement('div');
+                                    errorDiv.style.color = 'red';
+                                    errorDiv.style.margin = '15px 0';
+                                    errorDiv.style.padding = '10px';
+                                    errorDiv.style.background = '#ffeeee';
+                                    errorDiv.style.borderRadius = '5px';
+                                    errorDiv.textContent = `Erreur: ${data.error}`;
+                                    solution.appendChild(errorDiv);
                                     loadingIndicator.style.display = 'none';
                                 }
                             } catch (e) {
-                                console.error('Erreur d\'analyse JSON:', e, line);
+                                console.error('Error parsing JSON:', e, line);
                             }
                         }
                     }
                     
-                    // Défiler automatiquement vers le bas
-                    window.scrollTo({
-                        top: document.body.scrollHeight,
-                        behavior: 'smooth'
-                    });
+                    // Scroll to bottom automatically
+                    window.scrollTo(0, document.body.scrollHeight);
                     
                     return reader.read().then(processStream);
                 }
@@ -590,26 +522,17 @@
                 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>`;
+                const errorDiv = document.createElement('div');
+                errorDiv.style.color = 'red';
+                errorDiv.style.margin = '15px 0';
+                errorDiv.style.padding = '10px';
+                errorDiv.style.background = '#ffeeee';
+                errorDiv.style.borderRadius = '5px';
+                errorDiv.textContent = `Erreur de connexion: ${error}`;
+                solution.appendChild(errorDiv);
                 loadingIndicator.style.display = 'none';
             });
         });
-
-        // Vérifier si les appareils sont de petite taille pour adapter l'interface
-        function checkMobileDevice() {
-            if (window.innerWidth <= 768) {
-                // Ajustements spécifiques pour mobile si nécessaire
-                const buttons = document.querySelectorAll('.cta-button');
-                buttons.forEach(button => {
-                    button.style.display = 'block';
-                    button.style.margin = '15px auto';
-                });
-            }
-        }
-
-        // Exécuter au chargement et lors du redimensionnement
-        window.addEventListener('load', checkMobileDevice);
-        window.addEventListener('resize', checkMobileDevice);
     </script>
 </body>
 </html>