Update templates/maj.html

templates/maj.html

@@ -5,7 +5,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/highlight.js/11.7.0/styles/atom-one-dark.min.css" rel="stylesheet">
+    <!-- Use a CDN that hosts the specific atom-one-dark theme -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
     <style>
         :root {
             --primary-color: #4a6fa5;
@@ -14,10 +15,11 @@
             --background-color: #f8f9fa;
             --text-color: #333;
             --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --code-bg: #2c323c;
+            --code-bg: #282c34; /* atom-one-dark background */
+            --code-text: #abb2bf; /* atom-one-dark default text */
             --output-bg: #f1f8f9;
         }
-        
+
         body {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             line-height: 1.6;
@@ -26,66 +28,76 @@
             background-color: var(--background-color);
             color: var(--text-color);
         }
-        
+
         .container {
             max-width: 1000px;
             margin: 0 auto;
             padding: 20px;
         }
-        
+
         header {
             text-align: center;
             padding: 20px 0;
             margin-bottom: 30px;
         }
-        
+
         .logo {
             font-size: 2.5rem;
             font-weight: bold;
             color: var(--primary-color);
             margin-bottom: 10px;
         }
-        
+
         .subtitle {
             font-size: 1.2rem;
             color: var(--secondary-color);
             margin-bottom: 20px;
         }
-        
+
         .content-box {
             background-color: white;
             border-radius: 10px;
             box-shadow: var(--box-shadow);
             padding: 30px;
             margin-bottom: 30px;
-            text-align: center;
+            /* Removed text-align: center; allowing content to align left */
         }
-        
-        h1 {
+
+        h1, h2, h3 {
             color: var(--primary-color);
             margin-top: 0;
+            text-align: center; /* Center headings specifically */
         }
-        
+         h2 {
+            margin-top: 1.5em; /* Add space above h2 */
+         }
+
         .feature-list {
             list-style-type: none;
             padding: 0;
-            margin: 30px 0;
+            margin: 30px auto; /* Center list container */
             text-align: left;
+            max-width: 500px; /* Constrain width for better readability */
         }
-        
+
         .feature-list li {
             padding: 10px 0;
             margin-bottom: 10px;
             display: flex;
             align-items: center;
         }
-        
+
         .feature-list i {
             color: var(--accent-color);
             margin-right: 10px;
             font-size: 1.2rem;
+            width: 20px; /* Ensure consistent icon alignment */
+            text-align: center;
+        }
+        .feature-list i.fa-times-circle {
+             color: #aaa; /* Muted color for disabled features */
         }
-        
+
         .cta-button {
             display: inline-block;
             background-color: var(--primary-color);
@@ -98,157 +110,194 @@
             margin: 20px 10px;
             border: none;
             cursor: pointer;
+            font-size: 1rem;
         }
-        
+
         .cta-button:hover {
             background-color: var(--secondary-color);
             transform: translateY(-2px);
             box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
         }
-        
+        .cta-button:disabled {
+            background-color: #ccc;
+            cursor: not-allowed;
+            transform: none;
+            box-shadow: none;
+        }
+
         .upgrade-section {
-            margin-top: 30px;
-            padding: 20px;
+            margin-top: 40px;
+            padding-top: 20px;
             border-top: 1px solid #ddd;
+            text-align: center;
         }
-        
+
         footer {
             text-align: center;
             padding: 20px 0;
             color: #666;
             font-size: 0.9rem;
         }
-        
+
+        #solutionOutput {
+            margin-top: 30px;
+            text-align: left; /* Ensure solution text aligns left */
+        }
+
         #solution {
             background: #fff;
             padding: 20px;
             border-radius: 8px;
-            text-align: left;
+            border: 1px solid #eee; /* Add a subtle border */
+            margin-top: 15px;
             line-height: 1.8;
             font-size: 16px;
+            overflow-wrap: break-word; /* Wrap long lines */
+            white-space: pre-wrap; /* Preserve whitespace and newlines from response */
         }
-        
-        .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;
+
+        /* Styling for Markdown code blocks generated by Python */
+        #solution pre {
             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;
+            color: var(--code-text);
             padding: 15px;
-            background-color: #f9f9f9;
-            border-left: 4px solid var(--primary-color);
-            border-radius: 0 8px 8px 0;
-            overflow-x: auto; /* Pour les formules LaTeX larges */
-        }
-        
-        .latex-display {
+            border-radius: 5px;
             overflow-x: auto;
-            padding: 10px 0;
-            margin: 15px 0;
-            text-align: center;
+            margin: 15px 0; /* Add spacing around code blocks */
+            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
         }
-        
-        .thinking-indicator, .executing-indicator, .answering-indicator {
+
+        #solution pre code {
+            font-family: 'Courier New', Courier, monospace;
+            font-size: 14px;
+            line-height: 1.5;
+            white-space: pre; /* Ensure pre formatting is respected within code tag */
+            background: none; /* Remove double background */
+            padding: 0; /* Remove double padding */
+        }
+
+        /* Styling for the execution result block (if Python wraps it) */
+        #solution .output-section { /* Use if Python wraps result in <div class="output-section"> */
+             background-color: var(--output-bg);
+             padding: 15px;
+             border-radius: 5px;
+             border: 1px solid #ddd;
+             color: #333;
+             font-family: 'Courier New', monospace;
+             font-size: 14px;
+             white-space: pre-wrap;
+             overflow-x: auto;
+             margin: 15px 0;
+        }
+         /* Styling for result block if using Markdown ``` only */
+         #solution pre code:not(.language-python) {
+             /* Style non-Python code blocks (likely execution results) differently */
+             background-color: var(--output-bg);
+             color: #333;
+             display: block; /* Make it block level for padding */
+             padding: 10px;
+             border-radius: 4px;
+             border: 1px solid #eee;
+         }
+         /* Identify result block by preceding text */
+         #solution strong:contains("Résultat d'exécution:") + pre {
+             /* Style the <pre> immediately following the specific strong tag */
+             border: 1px dashed #ccc;
+             background-color: #fdfdfd;
+         }
+         #solution strong:contains("Résultat d'exécution:") + pre code {
+             /* Style the <code> inside that specific <pre> */
+             background-color: transparent; /* No extra background */
+             color: #222;
+         }
+
+
+        /* Removed step-section styling as structure is now simpler */
+
+        /* Removed indicator styles (thinking, executing etc.) */
+        .loading-indicator {
             display: flex;
             align-items: center;
-            padding: 10px;
-            margin: 10px 0;
+            justify-content: center; /* Center content */
+            padding: 15px;
+            margin: 20px 0;
             border-radius: 8px;
-            font-size: 0.9rem;
-        }
-        
-        .thinking-indicator {
+            font-size: 1rem;
             background-color: #e3f2fd;
             color: #1565c0;
+            border: 1px solid #bbdefb;
         }
-        
-        .executing-indicator {
-            background-color: #ede7f6;
-            color: #5e35b1;
-        }
-        
-        .answering-indicator {
-            background-color: #e8f5e9;
-            color: #2e7d32;
+        .loading-indicator i {
+             margin-right: 10px;
+             animation: spin 1.5s linear infinite;
         }
-        
-        .indicator-icon {
-            margin-right: 10px;
-            animation: pulse 1.5s infinite ease-in-out;
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
-        
-        @keyframes pulse {
-            0% { opacity: 0.6; }
-            50% { opacity: 1; }
-            100% { opacity: 0.6; }
-        }
-        
-        /* Styles spécifiques à MathJax */
-        .MathJax {
+
+
+        /* MathJax specific styles for better overflow handling */
+        .MathJax, mjx-container {
             overflow-x: auto !important;
             overflow-y: hidden !important;
             max-width: 100% !important;
+            min-width: 0 !important; /* Prevent minimum width issues */
+            padding: 5px 0; /* Add a bit of vertical padding */
+            display: block !important; /* Ensure it behaves like a block */
+            text-align: left !important; /* Align LaTeX left by default */
         }
-        
-        .mjx-chtml {
-            overflow-x: auto !important;
-            overflow-y: hidden !important;
-            max-width: 100% !important;
+        mjx-container[display="true"] {
+             display: block !important;
+             margin: 1em 0 !important; /* Spacing for display math */
+             text-align: center !important; /* Center display math */
         }
-        
-        mjx-container {
-            overflow-x: auto !important;
-            overflow-y: hidden !important;
-            max-width: 100% !important;
-            min-width: 0 !important;
-            padding: 2px 0;
-        }
-        
+
         @media (max-width: 768px) {
             .container {
                 padding: 15px;
             }
-            
             .content-box {
                 padding: 20px;
             }
+            #solution pre {
+                padding: 10px;
+            }
+            #solution pre code {
+                font-size: 13px;
+            }
+        }
+        .upload-section {
+             text-align: center; /* Center upload elements */
+        }
+        #imagePreview {
+             display: none;
+             margin: 20px auto;
+             max-width: 90%; /* Responsive max width */
+             max-height: 400px; /* Limit preview height */
+        }
+        #preview {
+             max-width: 100%;
+             max-height: 400px; /* Match container height */
+             height: auto; /* Maintain aspect ratio */
+             width: auto; /* Maintain aspect ratio */
+             border-radius: 8px;
+             box-shadow: var(--box-shadow);
+             border: 1px solid #ddd;
+        }
+        #uploadStatus {
+             margin-top: 15px;
+             font-size: 0.9em;
+             color: #555;
+        }
+        .error-message {
+             color: red;
+             background-color: #ffeeee;
+             border: 1px solid red;
+             padding: 10px;
+             margin: 15px 0;
+             border-radius: 5px;
+             text-align: left;
         }
     </style>
 </head>
@@ -258,281 +307,308 @@
             <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>
-            
+            <p style="text-align: center;">Vous utilisez actuellement la version gratuite de Math Solver.</p> <!-- Centered paragraph -->
+
             <div class="upload-section">
+                 <h2>Soumettez votre problème</h2>
                 <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()">
+                    <button type="button" id="uploadButton" class="cta-button">
                         <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);">
+                <div id="imagePreview">
+                    <img id="preview" alt="Aperçu de l'image">
                 </div>
-                
-                <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);">
+                <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);" disabled>
                     <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;">
+
+             <!-- Solution Output Area -->
+            <div id="solutionOutput" style="display: none;"> <!-- Keep hidden initially -->
+                 <hr style="margin: 30px 0;"> <!-- Separator -->
                 <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="loadingIndicator" class="loading-indicator" style="display: none;">
+                     <i class="fas fa-spinner"></i> <!-- Changed to spinner -->
+                    <span>Résolution en cours...</span>
                 </div>
-                <div id="solution" style="background: #fff; padding: 20px; border-radius: 8px;"></div>
+                <div id="solution"></div> <!-- Solution content will appear here -->
+                <div id="errorContainer" class="error-message" style="display: none;"></div> <!-- Error messages -->
             </div>
-            
+
+
+            <div class="feature-list">
+                <h2>Fonctionnalités :</h2>
+                <ul> <!-- Removed ul class -->
+                    <li><i class="fas fa-check-circle"></i> Résolution de problèmes mathématiques</li>
+                    <li><i class="fas fa-check-circle"></i> Explication des étapes (si fournies par l'IA)</li>
+                    <li><i class="fas fa-check-circle"></i> Utilisation de LaTeX pour les formules</li>
+                    <li><i class="fas fa-check-circle"></i> Exécution de code Python pour calculs</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>
+
             <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">Découvrir la version Pro</a> <!-- Link to Pro version page -->
             </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>
-    
-    <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>
-    
+
+    <!-- Use latest highlight.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <!-- Add languages you expect, python is essential -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/python.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script> <!-- For shell output maybe -->
+
+     <!-- Use Marked.js for Markdown rendering -->
+     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
     <!-- MathJax Configuration -->
     <script>
-        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();
-                }
-            },
-            loader: {
-                load: ['[tex]/ams', '[tex]/noerrors', '[tex]/physics', '[tex]/cancel', '[tex]/color', '[tex]/mhchem', '[tex]/mathtools']
-            },
-            svg: {
-                fontCache: 'global'
-            }
-        };
+    window.MathJax = {
+      tex: {
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
+        displayMath: [['$$', '$$'], ['\\[', '\\]']],
+        processEscapes: true,
+        processEnvironments: true,
+        packages: {'[+]': ['ams', 'noerrors', 'physics', 'cancel', 'color', 'mhchem', 'mathtools']} // Load common packages
+      },
+      options: {
+        enableMenu: false, // Disable right-click menu
+        ignoreHtmlClass: 'tex2jax_ignore', // Class to ignore
+        processHtmlClass: 'tex2jax_process', // Class to process (can add to #solution if needed)
+        skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Skip these tags
+      },
+      startup: {
+        // Function to run once MathJax is ready
+        ready: () => {
+          console.log('MathJax is ready');
+          MathJax.startup.defaultReady();
+          // You could potentially trigger an initial typeset if needed
+          // MathJax.startup.promise.then(() => { MathJax.typesetPromise(); });
+        }
+      },
+      loader: {
+        load: ['[tex]/ams', '[tex]/noerrors', '[tex]/physics', '[tex]/cancel', '[tex]/color', '[tex]/mhchem', '[tex]/mathtools'] // Ensure packages are loaded
+      },
+      svg: {
+        fontCache: 'global' // Cache fonts for better performance
+      }
+    };
     </script>
-    <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
-    
+    <!-- Load MathJax AFTER configuration -->
+    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/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();
-        }
-        
-        document.getElementById('imageInput').addEventListener('change', function(event) {
+        // DOM Elements
+        const imageInput = document.getElementById('imageInput');
+        const uploadButton = document.getElementById('uploadButton');
+        const imageForm = document.getElementById('imageForm');
+        const uploadStatus = document.getElementById('uploadStatus');
+        const imagePreview = document.getElementById('imagePreview');
+        const preview = document.getElementById('preview');
+        const solveButton = document.getElementById('solveButton');
+        const solutionOutput = document.getElementById('solutionOutput');
+        const loadingIndicator = document.getElementById('loadingIndicator');
+        const solutionDiv = document.getElementById('solution');
+        const errorContainer = document.getElementById('errorContainer');
+
+        // --- Event Listeners ---
+
+        // Trigger file input when upload button is clicked
+        uploadButton.addEventListener('click', () => imageInput.click());
+
+        // Handle image selection
+        imageInput.addEventListener('change', function(event) {
             const file = event.target.files[0];
             if (file) {
+                // Basic client-side validation (type and size)
+                if (!file.type.startsWith('image/')) {
+                    uploadStatus.textContent = 'Erreur : Veuillez sélectionner un fichier image.';
+                    uploadStatus.style.color = 'red';
+                    imagePreview.style.display = 'none';
+                    solveButton.style.display = 'none';
+                    solveButton.disabled = true;
+                    return;
+                }
+                 // Optional: Size limit (e.g., 10MB)
+                const maxSize = 10 * 1024 * 1024;
+                if (file.size > maxSize) {
+                    uploadStatus.textContent = 'Erreur : L\'image est trop grande (max 10MB).';
+                    uploadStatus.style.color = 'red';
+                    imagePreview.style.display = 'none';
+                    solveButton.style.display = 'none';
+                    solveButton.disabled = true;
+                    return;
+                }
+
+
                 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}`;
+                    preview.src = e.target.result;
+                    imagePreview.style.display = 'block';
+                    solveButton.style.display = 'inline-block';
+                    solveButton.disabled = false; // Enable solve button
+                    uploadStatus.textContent = `Image sélectionnée : ${file.name}`;
+                    uploadStatus.style.color = '#555'; // Reset color
+                    // Clear previous solution/error
+                    solutionOutput.style.display = 'none';
+                    solutionDiv.innerHTML = '';
+                    errorContainer.style.display = 'none';
+                    errorContainer.textContent = '';
+
+                }
+                reader.onerror = function() {
+                     uploadStatus.textContent = 'Erreur : Impossible de lire le fichier image.';
+                     uploadStatus.style.color = 'red';
+                     imagePreview.style.display = 'none';
+                     solveButton.style.display = 'none';
+                     solveButton.disabled = true;
                 }
                 reader.readAsDataURL(file);
+            } else {
+                 // No file selected or selection cancelled
+                 uploadStatus.textContent = '';
+                 imagePreview.style.display = 'none';
+                 solveButton.style.display = 'none';
+                 solveButton.disabled = true;
             }
         });
-        
-        document.getElementById('solveButton').addEventListener('click', function() {
-            const formData = new FormData(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 = '';
-            
-            // Reset MathJax queue
-            mathJaxQueue = [];
-            isProcessingMathQueue = false;
-            
-            fetch('/solved', {
+
+        // Handle form submission (clicking the solve button)
+        solveButton.addEventListener('click', function() {
+            const file = imageInput.files[0];
+            if (!file) {
+                showError('Veuillez d\'abord sélectionner une image.');
+                return;
+            }
+
+            const formData = new FormData(imageForm);
+
+            // Reset UI for new request
+            solutionOutput.style.display = 'block'; // Show the output area
+            loadingIndicator.style.display = 'flex'; // Show loading spinner
+            solutionDiv.innerHTML = ''; // Clear previous solution
+            errorContainer.style.display = 'none'; // Hide previous error
+            errorContainer.textContent = '';
+            solveButton.disabled = true; // Disable button during processing
+            uploadButton.disabled = true; // Disable upload during processing
+
+            fetch('/solved', { // Ensure this matches your Flask route
                 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';
-                        
-                        // 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(); // Keep the incomplete chunk for next time
-                    
-                    for (const line of lines) {
-                        if (line.startsWith('data: ')) {
-                            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>';
-                                }
-                                
-                                if (data.content) {
-                                    const content = data.content;
-                                    
-                                    // 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')) {
-                                        // 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 class="code-content"><code class="language-python">${p1}</code></pre>
-                                            </div>`;
-                                        });
-                                        contentContainer.innerHTML = codeHtml;
-                                        solution.appendChild(contentContainer);
-                                        
-                                        // Apply syntax highlighting
-                                        contentContainer.querySelectorAll('pre code').forEach((block) => {
-                                            hljs.highlightElement(block);
-                                        });
-                                    } 
-                                    else if (content.includes('Résultat d\'exécution:')) {
-                                        // 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>`;
-                                        });
-                                        contentContainer.innerHTML = outputHtml;
-                                        solution.appendChild(contentContainer);
-                                    } 
-                                    else {
-                                        // Regular text, might contain LaTeX
-                                        contentContainer.className = 'step-section';
-                                        contentContainer.innerHTML = content;
-                                        solution.appendChild(contentContainer);
-                                        
-                                        // Add to MathJax rendering queue
-                                        addToMathJaxQueue(contentContainer);
-                                    }
-                                }
-                                
-                                if (data.error) {
-                                    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('Error parsing JSON:', e, line);
-                            }
-                        }
+                if (!response.ok) {
+                    // Try to parse JSON error body from server
+                    return response.json().then(errData => {
+                         // Throw an error with the message from server JSON
+                         throw new Error(errData.error || `Erreur HTTP ${response.status}`);
+                    }).catch(() => {
+                         // If JSON parsing fails, throw generic HTTP error
+                         throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}`);
+                    });
+                }
+                return response.json(); // Parse successful response as JSON
+            })
+            .then(data => {
+                loadingIndicator.style.display = 'none'; // Hide loading indicator
+
+                if (data.error) {
+                     // Handle errors returned in the JSON payload
+                     showError(data.error);
+                } else if (data.solution) {
+                    // Use Marked.js to render the Markdown solution from the server
+                    // This handles ```python blocks, standard markdown, etc.
+                    // Ensure Marked converts ```python to <pre><code class="language-python">
+                    marked.setOptions({
+                         highlight: function(code, lang) {
+                             const language = hljs.getLanguage(lang) ? lang : 'plaintext';
+                             return hljs.highlight(code, { language, ignoreIllegals: true }).value;
+                         },
+                         langPrefix: 'language-', // standard prefix for hljs
+                         pedantic: false,
+                         gfm: true, // Enable GitHub Flavored Markdown
+                         breaks: true, // Convert single newlines in paragraphs into <br>
+                         smartLists: true,
+                         smartypants: false, // Avoid changing quotes/dashes
+                         xhtml: false
+                     });
+
+                     solutionDiv.innerHTML = marked.parse(data.solution);
+
+                    // --- MathJax Typesetting ---
+                    // Check if MathJax is loaded and ready before typesetting
+                    if (window.MathJax && MathJax.startup) {
+                         MathJax.startup.promise = MathJax.startup.promise.then(() => {
+                            console.log("Typesetting MathJax content...");
+                            // Typeset the entire solutionDiv AFTER rendering Markdown
+                            return MathJax.typesetPromise([solutionDiv]);
+                         }).catch((err) => {
+                             console.error('MathJax typesetting failed:', err);
+                             showError('Erreur lors du rendu des formules mathématiques.');
+                         });
+                    } else {
+                         console.warn('MathJax not fully loaded or ready yet.');
+                         // Optionally, try typesetting later or inform user
+                         showError('MathJax n\'est pas chargé, le rendu LaTeX peut échouer.');
                     }
-                    
-                    // Scroll to bottom automatically
-                    window.scrollTo(0, document.body.scrollHeight);
-                    
-                    return reader.read().then(processStream);
+
+                    // --- Optional: Post-processing (e.g., styling result blocks) ---
+                    // Example: Add specific style to result blocks identified by text
+                    const resultHeaders = solutionDiv.querySelectorAll('strong');
+                    resultHeaders.forEach(header => {
+                         if (header.textContent.includes("Résultat d'exécution:")) {
+                             const nextElement = header.nextElementSibling;
+                             if (nextElement && nextElement.tagName === 'PRE') {
+                                 nextElement.classList.add('execution-result-block'); // Add a class for styling
+                             }
+                         }
+                    });
+
+
+                } else {
+                     showError('La réponse reçue est vide ou invalide.');
                 }
-                
-                return reader.read().then(processStream);
             })
             .catch(error => {
-                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);
+                console.error('Fetch Error:', error);
                 loadingIndicator.style.display = 'none';
+                // Display the caught error message
+                showError(`Erreur de communication : ${error.message}`);
+            })
+            .finally(() => {
+                 // Re-enable buttons regardless of success or failure
+                 solveButton.disabled = false;
+                 uploadButton.disabled = false;
+                 // Scroll to the solution area
+                 // Use smooth scrolling if supported
+                 solutionOutput.scrollIntoView({ behavior: 'smooth', block: 'start' });
             });
         });
+
+        // Helper function to display errors
+        function showError(message) {
+            errorContainer.textContent = message;
+            errorContainer.style.display = 'block';
+            solutionDiv.innerHTML = ''; // Clear any partial solution
+            loadingIndicator.style.display = 'none'; // Ensure loading is hidden
+        }
+
+        // Initialize Highlight.js (optional, if not done by Marked config)
+        // hljs.highlightAll(); // Usually called after content is added
     </script>
 </body>
 </html>