Update templates/maj.html

templates/maj.html

@@ -6,7 +6,6 @@
     <title>Math Solver - Version Gratuite (MathJax)</title>
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/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">
-    <!-- REMOVED KaTeX CSS -->
     <style>
         :root {
             --primary-color: #4a6fa5;
@@ -84,23 +83,19 @@
         footer { text-align: center; 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; }
-        #solution { background: #fff; padding: 20px; border-radius: 8px; text-align: left; line-height: 1.8; font-size: 1rem; border: 1px solid #eee; margin-top: 15px; overflow-x: hidden; /* Prevent container scroll, let MathJax handle internal scroll */ }
+        #solution { background: #fff; padding: 20px; border-radius: 8px; text-align: left; line-height: 1.8; font-size: 1rem; border: 1px solid #eee; margin-top: 15px; overflow-x: hidden; }
 
-        /* Code Block Styling */
         .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: 10px 15px; font-size: 0.9em; font-family: 'Courier New', monospace; }
         .code-content { margin: 0; padding: 15px; background-color: var(--code-bg); color: #e6e6e6; overflow-x: auto; font-family: 'Courier New', monospace; font-size: 0.9em; line-height: 1.5; }
         .code-content pre, .code-content code { margin: 0; padding: 0; background: none; white-space: pre; }
 
-        /* Output Block Styling */
         .output-section { background-color: var(--output-bg); padding: 15px; margin: 15px 0; border-radius: 8px; border: 1px solid #d6e0e2; color: #333; font-family: 'Courier New', monospace; font-size: 0.9em; white-space: pre-wrap; overflow-x: auto; box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); }
 
-        /* Step Styling */
         .step-section { margin: 20px 0; padding: 15px; background-color: #fdfdfd; border-left: 4px solid var(--accent-color); border-radius: 0 5px 5px 0; overflow-wrap: break-word; }
         .step-section:first-child { margin-top: 0; }
         .step-section:last-child { margin-bottom: 0; }
 
-        /* Indicator Styling */
         .indicator { display: flex; align-items: center; padding: 12px 15px; margin: 15px 0; border-radius: 8px; font-size: 0.95rem; border: 1px solid transparent; }
         .indicator.thinking-indicator { background-color: #e3f2fd; color: #1565c0; border-color: #bde0fe; }
         .indicator.executing-indicator { background-color: #ede7f6; color: #5e35b1; border-color: #d1c4e9; }
@@ -108,27 +103,21 @@
         .indicator i { margin-right: 10px; font-size: 1.1em; animation: pulse 1.5s infinite ease-in-out; }
         @keyframes pulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
 
-        /* --- MathJax Specific Styles --- */
-        /* Ensure container allows for potential horizontal scrolling of large equations */
-        .mjx-chtml { /* Target MathJax CommonHTML output */
+        .mjx-chtml {
              overflow-x: auto;
              overflow-y: hidden;
         }
-         /* Improve spacing for display math */
          mjx-container[display="true"] {
              display: block;
              margin: 1em 0;
              text-align: center;
          }
-         /* Handle potential overflow within display math specifically */
         mjx-container[display="true"] > .mjx-chtml {
             overflow-x: auto;
             overflow-y: hidden;
-            padding: 0.2em 0; /* Add slight padding if scrollbar appears */
+            padding: 0.2em 0;
          }
 
-
-        /* --- Responsive Design --- */
         @media (max-width: 992px) { .container { max-width: 90%; } }
         @media (max-width: 768px) {
             .container { padding: 15px; }
@@ -149,48 +138,36 @@
             .content-box { padding: 15px; }
             #solution { padding: 15px; }
             .code-header, .code-content, .output-section { font-size: 0.85em; }
-             /* Ensure MathJax equations can still scroll on small screens */
              .mjx-chtml {
-                 font-size: 0.95em; /* Slightly smaller math on mobile if needed */
+                 font-size: 0.95em;
              }
         }
     </style>
 
-    <!-- MathJax Configuration -->
     <script>
       window.MathJax = {
         tex: {
-          inlineMath: [['$', '$'], ['\\(', '\\)']], // Define inline math delimiters
-          displayMath: [['$$', '$$'], ['\\[', '\\]']], // Define display math delimiters
-          processEscapes: true, // Process \$ etc.
-          tags: 'ams', // Use AMS numbering convention
-          macros: {
-              // Define custom macros here if needed
-              // R: "\\mathbb{R}",
-              // C: "\\mathbb{C}"
-          }
+          inlineMath: [['$', '$'], ['\\(', '\\)']],
+          displayMath: [['$$', '$$'], ['\\[', '\\]']],
+          processEscapes: true,
+          tags: 'ams',
+          macros: {}
         },
         chtml: {
-          matchFontHeight: true, // Match surrounding text font size
-          scale: 1.0 // Adjust global scaling if necessary
+          matchFontHeight: true,
+          scale: 1.0
         },
         options: {
-          ignoreHtmlClass: 'tex2jax_ignore', // Class to ignore processing inside
-          processHtmlClass: 'tex2jax_process', // Class to explicitly process inside
-          skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Tags to skip
+          ignoreHtmlClass: 'tex2jax_ignore',
+          processHtmlClass: 'tex2jax_process',
+          skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
         },
         startup: {
-          // Don't automatically typeset on page load, we'll trigger it manually
            typeset: false,
-           // pageReady: () => {
-           //    console.log("MathJax is ready to process content.");
-           // }
         }
       };
     </script>
-    <!-- Load MathJax -->
     <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-    <!-- REMOVED KaTeX JS -->
 
 </head>
 <body>
@@ -237,17 +214,14 @@
             <div id="solutionOutput" style="display: none;">
                 <h3>Solution Détaillée :</h3>
                 <div id="loadingIndicator" class="indicator" style="display: none;">
-                    <!-- Content set by JS -->
                 </div>
                 <div id="solution">
-                    <!-- Solution content will be injected here -->
                 </div>
                  <div id="mathjaxProcessingIndicator" class="indicator answering-indicator" style="display: none; margin-top: 10px;">
                     <i class="fas fa-magic indicator-icon"></i><span>Mise en forme des équations...</span>
                 </div>
             </div>
 
-
             <div class="upgrade-section">
                 <h2>Besoin de plus ?</h2>
                 <p>Passez à la version Pro pour des fonctionnalités avancées et des résolutions illimitées.</p>
@@ -260,7 +234,6 @@
         </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>
 
@@ -289,7 +262,13 @@
                         uploadStatus.textContent = `Image sélectionnée : ${file.name}`;
                         solutionOutput.style.display = 'none';
                         solutionDiv.innerHTML = '';
-                        mathjaxIndicator.style.display = 'none'; // Reset MathJax indicator
+                        mathjaxIndicator.style.display = 'none';
+                    }
+                     reader.onerror = function(e) {
+                        console.error("FileReader error:", e);
+                        uploadStatus.textContent = "Erreur lors de la lecture de l'image.";
+                        imagePreview.style.display = 'none';
+                        solveButton.style.display = 'none';
                     }
                     reader.readAsDataURL(file);
                 } else {
@@ -301,18 +280,29 @@
             });
 
             solveButton.addEventListener('click', function() {
-                const formData = new FormData(imageForm);
-                if (!imageInput.files[0]) {
+                if (!imageInput.files || imageInput.files.length === 0) {
                     alert("Veuillez d'abord sélectionner une image.");
                     return;
                 }
 
+                if (!imageForm) {
+                     alert("Erreur interne: Le formulaire d'upload est introuvable.");
+                     return;
+                }
+                const formData = new FormData(imageForm);
+
+                const fileData = formData.get('image');
+                if (!fileData || fileData.size === 0) {
+                     alert("Erreur lors de la préparation de l'image pour l'envoi.");
+                     return;
+                }
+
                 solutionOutput.style.display = 'block';
                 loadingIndicator.style.display = 'flex';
                 loadingIndicator.className = 'indicator thinking-indicator';
                 loadingIndicator.innerHTML = '<i class="fas fa-brain indicator-icon"></i><span>Préparation de la requête...</span>';
                 solutionDiv.innerHTML = '';
-                mathjaxIndicator.style.display = 'none'; // Hide MathJax indicator
+                mathjaxIndicator.style.display = 'none';
 
                 fetch('/solved', {
                     method: 'POST',
@@ -325,52 +315,39 @@
                     const reader = response.body.getReader();
                     const decoder = new TextDecoder();
                     let buffer = '';
-                    // No need for accumulatedContent if rendering at the end
 
                     function processStream({ done, value }) {
                         if (done) {
                             loadingIndicator.style.display = 'none';
 
-                            // Process any remaining buffer content
                             if (buffer.trim()) {
-                                // Append the final chunk - assumes it's a regular step
                                 const finalStepDiv = document.createElement('div');
                                 finalStepDiv.className = 'step-section';
-                                finalStepDiv.innerHTML = buffer; // Use innerHTML
+                                finalStepDiv.innerHTML = buffer;
                                 solutionDiv.appendChild(finalStepDiv);
                             }
 
-                            // --- Trigger MathJax Rendering ---
                             if (typeof MathJax !== 'undefined' && MathJax.typesetPromise) {
-                                // Show MathJax processing indicator
                                 mathjaxIndicator.style.display = 'flex';
-
-                                MathJax.typesetPromise([solutionDiv]) // Target specific container
+                                MathJax.typesetPromise([solutionDiv])
                                     .then(() => {
-                                        console.log('MathJax typesetting complete.');
-                                        mathjaxIndicator.style.display = 'none'; // Hide indicator on success
-                                        // Optional: Re-apply highlight.js if MathJax altered code blocks (unlikely but possible)
-                                        // document.querySelectorAll('#solution pre code').forEach((block) => {
-                                        //    hljs.highlightElement(block);
-                                        // });
+                                        mathjaxIndicator.style.display = 'none';
                                     })
                                     .catch((err) => {
                                         console.error('Erreur de rendu MathJax:', err);
-                                        mathjaxIndicator.style.display = 'none'; // Hide indicator on error
+                                        mathjaxIndicator.style.display = 'none';
                                         solutionDiv.innerHTML += `<div style="color: orange; margin-top: 10px;">Erreur lors de l'affichage des formules mathématiques (MathJax).</div>`;
                                     })
                                     .finally(() => {
-                                         // Scroll to the solution area after rendering attempt
                                          solutionOutput.scrollIntoView({ behavior: 'smooth', block: 'start' });
                                     });
                             } else {
                                 console.warn("MathJax n'est pas prêt ou n'a pas pu être chargé.");
                                 solutionDiv.innerHTML += `<div style="color: orange; margin-top: 10px;">Impossible de charger le module d'affichage mathématique (MathJax).</div>`;
-                                // Scroll anyway
                                 solutionOutput.scrollIntoView({ behavior: 'smooth', block: 'start' });
                             }
-                            return; // End of stream processing
-                        } // end if(done)
+                            return;
+                        }
 
                         buffer += decoder.decode(value, { stream: true });
                         const parts = buffer.split('\n\n');
@@ -381,7 +358,6 @@
                                 try {
                                     const jsonData = JSON.parse(part.substring(6));
 
-                                    // Update Indicator (same as before)
                                     if (jsonData.mode) {
                                         loadingIndicator.style.display = 'flex';
                                         if (jsonData.mode === 'thinking') {
@@ -399,7 +375,6 @@
                                         }
                                     }
 
-                                    // Append Content (same as before, but NO LaTeX rendering here)
                                     if (jsonData.content) {
                                         const content = jsonData.content;
                                         let elementToAppend;
@@ -411,7 +386,7 @@
                                             elementToAppend.innerHTML = `
                                                 <div class="code-header">Code Python</div>
                                                 <div class="code-content"><pre><code class="language-python tex2jax_ignore">${escapeHtml(code)}</code></pre></div>
-                                            `; // Added tex2jax_ignore to prevent MathJax trying to process code
+                                            `;
                                             solutionDiv.appendChild(elementToAppend);
                                              const codeBlock = elementToAppend.querySelector('code');
                                              if (codeBlock && hljs) { hljs.highlightElement(codeBlock); }
@@ -419,15 +394,14 @@
                                         } 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 tex2jax_ignore'; // Ignore MathJax here too
+                                            elementToAppend.className = 'output-section tex2jax_ignore';
                                             elementToAppend.textContent = output;
                                              solutionDiv.appendChild(elementToAppend);
 
                                         } else {
-                                            // Regular step, potentially with LaTeX delimiters inside
                                             elementToAppend = document.createElement('div');
                                             elementToAppend.className = 'step-section';
-                                            elementToAppend.innerHTML = content; // Add raw content
+                                            elementToAppend.innerHTML = content;
                                             solutionDiv.appendChild(elementToAppend);
                                         }
                                     }
@@ -446,14 +420,11 @@
                             }
                         });
 
-                        // Scroll down as content arrives
                         solutionDiv.lastChild?.scrollIntoView({ behavior: 'smooth', block: 'end' });
 
-                        // Continue reading the stream
                         return reader.read().then(processStream);
-                    } // end processStream function
+                    }
 
-                    // Start processing the stream
                     return reader.read().then(processStream);
                 })
                 .catch(error => {