Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on 3 days ago

Commit

a27075d

verified ·

1 Parent(s): b6bd995

Update templates/maj.html

Browse files

Files changed (1) hide show

templates/maj.html +669 -588

templates/maj.html CHANGED Viewed

@@ -1,614 +1,695 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Math Solver - Version Gratuite</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
-    <!-- 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;
-            --secondary-color: #166088;
-            --accent-color: #4fc3f7;
-            --background-color: #f8f9fa;
-            --text-color: #333;
-            --box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            --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;
-            margin: 0;
-            padding: 0;
-            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;
-            /* Removed text-align: center; allowing content to align left */
-        }
-        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 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);
-            color: white;
-            padding: 12px 25px;
-            border-radius: 5px;
-            text-decoration: none;
-            font-weight: bold;
-            transition: all 0.3s ease;
-            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: 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;
-            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 */
-        }
-        /* Styling for Markdown code blocks generated by Python */
-        #solution pre {
-            background-color: var(--code-bg);
-            color: var(--code-text);
-            padding: 15px;
-            border-radius: 5px;
-            overflow-x: auto;
-            margin: 15px 0; /* Add spacing around code blocks */
-            box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
-        }
-        #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;
-            justify-content: center; /* Center content */
-            padding: 15px;
-            margin: 20px 0;
-            border-radius: 8px;
-            font-size: 1rem;
-            background-color: #e3f2fd;
-            color: #1565c0;
-            border: 1px solid #bbdefb;
-        }
-        .loading-indicator i {
-             margin-right: 10px;
-             animation: spin 1.5s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* 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-container[display="true"] {
-             display: block !important;
-             margin: 1em 0 !important; /* Spacing for display math */
-             text-align: center !important; /* Center display math */
-        }
-        @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>
-<body>
-    <div class="container">
-        <header>
-            <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 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">
-                        <i class="fas fa-upload"></i> Télécharger une image
-                    </button>
-                </form>
-                <p id="uploadStatus"></p>
-                <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);" disabled>
-                    <i class="fas fa-calculator"></i> Résoudre ce problème
-                </button>
-            </div>
-             <!-- 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="loading-indicator" style="display: none;">
-                     <i class="fas fa-spinner"></i> <!-- Changed to spinner -->
-                    <span>Résolution en cours...</span>
-                </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 ?</h2>
-                <p>Passez à la version Pro pour des fonctionnalités avancées et des résolutions illimitées.</p>
-                <a href="/" class="cta-button">Découvrir la version Pro</a> <!-- Link to Pro version page -->
-            </div>
-        </div>
-        <footer>
-            <p>© 2025 Math Solver. Tous droits réservés.</p>
-        </footer>
-    </div>
-    <!-- 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']} // 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>
-    <!-- Load MathJax AFTER configuration -->
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
-    <script>
-        // 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) {
-                    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;
-            }
-        });
-        // 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 => {
-                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.');
                     }
-                    // --- 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.');
-                }
-            })
-            .catch(error => {
-                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>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mariam M-1 | Solution Mathématique</title>
+  <!-- Tailwind CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <!-- SweetAlert2 -->
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Highlight.js pour la coloration syntaxique -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
+  <!-- Configuration de MathJax -->
+  <script>
     window.MathJax = {
       tex: {
+        inlineMath: [['$', '$']],
+        displayMath: [['$$', '$$']],
         processEscapes: true,
+        packages: {'[+]': ['autoload', 'ams']}
       },
       options: {
+        enableMenu: false,
+        messageStyle: 'none'
       },
       startup: {
+        pageReady: () => { window.mathJaxReady = true; }
       }
     };
+  </script>
+  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" id="MathJax-script" async></script>
+  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.7/lib/marked.umd.min.js"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;700&display=swap');
+    body { font-family: 'Space Grotesk', sans-serif; }
+    .uploadArea {
+      background: #f3f4f6;
+      border: 2px dashed #d1d5db;
+      transition: border-color 0.2s ease;
+    }
+    .uploadArea:hover { border-color: #3b82f6; }
+    .blue-button { background: #3b82f6; transition: background-color 0.2s ease; }
+    .blue-button:hover { background: #2563eb; }
+    .loader {
+      width: 48px;
+      height: 48px;
+      border: 3px solid #3b82f6;
+      border-bottom-color: transparent;
+      border-radius: 50%;
+      display: inline-block;
+      animation: rotation 1s linear infinite;
+    }
+    @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    .thought-box {
+      transition: max-height 0.3s ease-out;
+      max-height: 0;
+      overflow: hidden;
+    }
+    .thought-box.open { max-height: 500px; }
+    #thoughtsContent, #answerContent {
+      max-height: 500px;
+      overflow-y: auto;
+      scroll-behavior: smooth;
+      white-space: pre-wrap;
+    }
+    .preview-image { max-width: 300px; max-height: 300px; object-fit: contain; }
+    .timestamp { color: #3b82f6; font-size: 0.9em; margin-left: 8px; }
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-bottom: 1rem;
+    }
+    th, td {
+      border: 1px solid #d1d5db;
+      padding: 0.5rem;
+      text-align: left;
+    }
+    th { background-color: #f3f4f6; font-weight: 600; }
+    .table-responsive { overflow-x: auto; }
+    /* Style pour le bouton Sauvegarder afin de le mettre en évidence */
+    #saveButton {
+      background: #3b82f6;
+      color: white;
+      padding: 0.5rem 1rem;
+      border-radius: 0.375rem;
+      transition: background-color 0.2s ease;
+    }
+    #saveButton:hover { background: #2563eb; }
+    /* Modal plein écran pour les sauvegardes */
+    #savedModal {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      z-index: 50;
+    }
+    #savedModal.active { display: block; }
+    #savedModalContent {
+      background: #fff;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+    }
+    /* Styles spécifiques pour le code et son exécution */
+    pre {
+      background-color: #f8f8f8;
+      border: 1px solid #e2e8f0;
+      border-radius: 0.375rem;
+      padding: 1rem;
+      margin: 1rem 0;
+      overflow-x: auto;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+    code {
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+    }
+    .code-execution-result {
+      background-color: #f0fff4;
+      border-left: 4px solid #48bb78;
+      padding: 1rem;
+      margin: 1rem 0;
+      font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+      white-space: pre-wrap;
+    }
+    /* Styles pour les types de contenu spécifiques */
+    .content-text {}
+    .content-code { padding: 0; }
+    .content-result {
+      background-color: #f0fff4;
+      border-left: 4px solid #48bb78;
+      padding: 1rem;
+      margin: 0.5rem 0;
+    }
+    .content-image { margin: 1rem 0; text-align: center; }
+    .content-image img { max-width: 100%; }
+  </style>
+</head>
+<body class="p-4">
+  <div class="max-w-4xl mx-auto">
+    <header class="p-6 text-center mb-8">
+      <h1 class="text-4xl font-bold text-blue-600">Mariam M-1(avec calculatrice)</h1>
+      <p class="text-gray-600">Solution Mathématique/Physique/Chimie Intelligente, avec intégration d'une calculatrice.</p>
+      <div class="mt-4 flex justify-end">
+        <button id="openSaved" class="blue-button px-4 py-2 text-white rounded">Sauvegardes</button>
+      </div>
+    </header>
+    <main id="mainContent">
+      <form id="problemForm" class="space-y-6" novalidate>
+        <!-- Zone de dépôt / sélection d'image -->
+        <div class="uploadArea p-8 text-center relative" aria-label="Zone de dépôt d'image">
+          <input type="file" id="imageInput" name="image" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" aria-label="Choisir une image">
+          <div class="space-y-3">
+            <div class="w-16 h-16 mx-auto border-2 border-blue-400 rounded-full flex items-center justify-center">
+              <svg class="w-8 h-8 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+              </svg>
+            </div>
+            <p class="text-gray-700 font-medium">Déposez votre image ici</p>
+            <p class="text-gray-500 text-sm">ou cliquez pour sélectionner</p>
+          </div>
+        </div>
+        <!-- Aperçu de l'image -->
+        <div id="imagePreview" class="hidden text-center">
+          <img id="previewImage" class="preview-image mx-auto" alt="Prévisualisation de l'image">
+        </div>
+        <button type="submit" class="blue-button w-full py-3 text-white font-medium rounded-lg">
+          Résoudre le problème
+        </button>
+      </form>
+      <!-- Loader -->
+      <div id="loader" class="hidden mt-8 text-center">
+        <span class="loader"></span>
+        <p class="mt-4 text-gray-600">Analyse en cours...</p>
+      </div>
+      <!-- Zone d'affichage de la solution -->
+      <section id="solution" class="hidden mt-8 space-y-6 relative">
+        <div class="border-t pt-4">
+          <button id="thoughtsToggle" type="button" class="w-full flex justify-between items-center p-2">
+            <span class="font-medium text-gray-700">Processus de Réflexion</span>
+            <span id="timestamp" class="timestamp"></span>
+          </button>
+          <div id="thoughtsBox" class="thought-box">
+            <div id="thoughtsContent" class="p-4 text-gray-600"></div>
+          </div>
+        </div>
+        <div class="border-t pt-6">
+          <div class="flex justify-between items-center">
+            <h3 class="text-xl font-bold text-gray-800 mb-4">Solution</h3>
+            <!-- Bouton Sauvegarder mis en évidence -->
+            <button id="saveButton">Sauvegarder</button>
+          </div>
+          <div id="answerContent" class="text-gray-700 table-responsive"></div>
+        </div>
+      </section>
+    </main>
+  </div>
+  <!-- Modal plein écran pour les sauvegardes -->
+  <div id="savedModal">
+    <div id="savedModalContent" class="p-6">
+      <header class="flex justify-between items-center border-b pb-4">
+        <h2 class="text-2xl font-bold">Sauvegardes</h2>
+        <button id="closeSaved" class="text-3xl text-gray-600">×</button>
+      </header>
+      <div id="savedListContainer" class="mt-4">
+        <ul id="savedList" class="space-y-4">
+          <!-- Liste des sauvegardes insérée dynamiquement -->
+        </ul>
+      </div>
+      <div class="mt-6">
+        <button id="newExercise" class="blue-button w-full py-3 text-white font-medium rounded-lg">
+          Résoudre un nouvel exercice
+        </button>
+      </div>
+    </div>
+  </div>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      // Récupération des éléments
+      const form = document.getElementById('problemForm');
+      const imageInput = document.getElementById('imageInput');
+      const loader = document.getElementById('loader');
+      const solutionSection = document.getElementById('solution');
+      const thoughtsContent = document.getElementById('thoughtsContent');
+      const answerContent = document.getElementById('answerContent');
+      const thoughtsToggle = document.getElementById('thoughtsToggle');
+      const thoughtsBox = document.getElementById('thoughtsBox');
+      const imagePreview = document.getElementById('imagePreview');
+      const previewImage = document.getElementById('previewImage');
+      const timestamp = document.getElementById('timestamp');
+      const saveButton = document.getElementById('saveButton');
+      const openSaved = document.getElementById('openSaved');
+      const closeSaved = document.getElementById('closeSaved');
+      const savedModal = document.getElementById('savedModal');
+      const savedList = document.getElementById('savedList');
+      const newExercise = document.getElementById('newExercise');
+      const mainContent = document.getElementById('mainContent'); // This variable is not used in the original logic, keeping it but it could be removed.
+      let startTime = null;
+      let timerInterval = null;
+      let thoughtsBuffer = '';
+      let answerBuffer = '';
+      let currentMode = null;
+      let updateTimeout = null;
+      // Removed currentEndpoint variable as it's no longer needed
+      // Gestion des onglets pour le choix du modèle (Removed as tabs are removed)
+      // Mise à jour du temps écoulé
+      const updateTimestamp = () => {
+        if (startTime) {
+          const seconds = Math.floor((Date.now() - startTime) / 1000);
+          timestamp.textContent = `${seconds}s`;
+        }
+      };
+      const startTimer = () => { startTime = Date.now(); timerInterval = setInterval(updateTimestamp, 1000); updateTimestamp(); };
+      const stopTimer = () => { clearInterval(timerInterval); startTime = null; timestamp.textContent = ''; };
+      // Affichage de l'image sélectionnée
+      const handleFileSelect = file => {
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = e => {
+          previewImage.src = e.target.result;
+          imagePreview.classList.remove('hidden');
+        };
+        reader.readAsDataURL(file);
+      };
+      thoughtsToggle.addEventListener('click', () => { thoughtsBox.classList.toggle('open'); });
+      imageInput.addEventListener('change', e => handleFileSelect(e.target.files[0]));
+      // Gestion du glisser-déposer
+      const dropZone = document.querySelector('.uploadArea');
+      dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('border-blue-400'); });
+      dropZone.addEventListener('dragleave', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); });
+      dropZone.addEventListener('drop', e => { e.preventDefault(); dropZone.classList.remove('border-blue-400'); handleFileSelect(e.dataTransfer.files[0]); });
+      // Fonction pour appliquer la coloration syntaxique
+      const applyHighlighting = () => {
+        document.querySelectorAll('pre code').forEach((block) => {
+          hljs.highlightBlock(block);
+        });
+      };
+      // Rendu MathJax et mise à jour de l'affichage
+      const typesetAnswerIfReady = async () => {
+        if (window.mathJaxReady) {
+          MathJax.startup.document.elements = [document.getElementById('answerContent')];
+          await MathJax.typesetPromise();
+          applyHighlighting();
+          answerContent.scrollTop = answerContent.scrollHeight;
+        } else { setTimeout(typesetAnswerIfReady, 200); }
+      };
+      const updateDisplay = async () => {
+        thoughtsContent.innerHTML = marked.parse(thoughtsBuffer);
+        answerContent.innerHTML = marked.parse(answerBuffer);
+        await typesetAnswerIfReady();
+        updateTimeout = null;
+      };
+      const scheduleUpdate = () => { if (!updateTimeout) updateTimeout = setTimeout(updateDisplay, 200); };
+      marked.setOptions({
+        gfm: true,
+        breaks: true,
+        highlight: function(code, lang) {
+          if (lang && hljs.getLanguage(lang)) {
+            try {
+              return hljs.highlight(code, { language: lang }).value;
+            } catch (error) {}
+          }
+          return code;
+        }
+      });
+      // Creation of content elements (This part wasn't directly used in the streaming logic before, keeping it just in case it was intended for future use, but the current streaming logic builds markdown directly)
+      const createContentElement = (content, type) => {
+        const div = document.createElement('div');
+        div.className = `content-${type}`;
+        switch(type) {
+          case 'text':
+            div.innerHTML = marked.parse(content);
+            break;
+          case 'code':
+            div.innerHTML = `<pre><code>${content}</code></pre>`;
+            break;
+          case 'result':
+            div.innerHTML = `<div class="code-execution-result">${content}</div>`;
+            break;
+          case 'image':
+            div.innerHTML = `<img src="data:image/png;base64,${content}" />`;
+            break;
+          default:
+            div.innerHTML = marked.parse(content);
+        }
+        return div;
+      };
+      // Envoi de l'image pour résolution
+      form.addEventListener('submit', async e => {
+        e.preventDefault();
+        const file = imageInput.files[0];
+        if (!file) {
+          Swal.fire({
+            icon: 'error',
+            title: 'Image manquante',
+            text: 'Veuillez sélectionner une image.'
+          });
+          return;
+        }
+        startTimer();
+        loader.classList.remove('hidden');
+        solutionSection.classList.add('hidden');
+        thoughtsContent.innerHTML = '';
+        answerContent.innerHTML = '';
+        thoughtsBuffer = '';
+        answerBuffer = '';
+        currentMode = null; // Reset mode
+        // thoughtsBox starts open by default, keep it open during processing
+        thoughtsBox.classList.add('open');
+        const formData = new FormData();
+        formData.append('image', file);
+        try {
+          // Hardcode the endpoint to /solved
+          const response = await fetch('/solved', { method: 'POST', body: formData });
+          if (!response.body) {
+              throw new Error('Response body is not available (e.g., not a streaming response)');
+          }
+          const reader = response.body.getReader();
+          const decoder = new TextDecoder();
+          let buffer = '';
+          const processChunk = async chunk => {
+            buffer += decoder.decode(chunk, { stream: true });
+            const lines = buffer.split('\n\n');
+            buffer = lines.pop();
+            for (const line of lines) {
+              if (!line.startsWith('data:')) {
+                  console.warn('Skipping non-data line:', line); // Log non-data lines
+                  continue;
+              }
+              try {
+                  const data = JSON.parse(line.slice(5));
+                  if (data.mode) {
+                    currentMode = data.mode;
+                    loader.classList.add('hidden');
+                    solutionSection.classList.remove('hidden');
+                  }
+                  if (data.content !== undefined) { // Check for undefined to allow empty strings
+                    // Gestion différenciée selon le type de contenu
+                    if (currentMode === 'thinking') {
+                      // For thinking mode, just append text
+                      thoughtsBuffer += data.content;
+                    } else if (currentMode === 'answering') {
+                      // For answering mode, handle different types
+                      switch(data.type) {
+                        case 'code':
+                          answerBuffer += "\n```\n" + data.content + "\n```\n";
+                          break;
+                        case 'result':
+                           // Format results clearly, handling multiple lines
+                           const formattedResult = data.content.split('\n').map(line => `> ${line}`).join('\n');
+                           answerBuffer += "\n" + formattedResult + "\n";
+                           break;
+                        case 'image':
+                          // Include images as markdown images
+                          answerBuffer += `\n![Résultat](data:image/png;base64,${data.content})\n`;
+                          break;
+                        case 'text': // Explicitly handle text within answering mode
+                        default: // Default behavior is to append text
+                          answerBuffer += data.content;
+                          break;
+                      }
+                    }
+                  }
+                  if (data.error) {
+                    answerBuffer += `\n**Erreur:** ${data.error}\n`;
+                  }
+                } catch (e) {
+                   console.error('Error parsing JSON data:', line.slice(5), e);
+                   // Optionally append an error message to the output
+                   if (currentMode === 'thinking') { thoughtsBuffer += `\n[Parsing Error]`; }
+                   else { answerBuffer += `\n[Parsing Error]`; }
                 }
             }
+            scheduleUpdate(); // Schedule display update after processing chunks
+          };
+          // Start processing the stream
+          while (true) {
+            const { done, value } = await reader.read();
+            if (done) {
+               // Process any remaining buffer
+              if (buffer) {
+                 try {
+                   // Attempt to parse the last bit if it looks like a data line
+                    if (buffer.startsWith('data:')) {
+                       const data = JSON.parse(buffer.slice(5));
+                        if (data.content !== undefined) {
+                           if (currentMode === 'thinking') { thoughtsBuffer += data.content; }
+                           else if (currentMode === 'answering') { answerBuffer += data.content; }
+                        }
                     } else {
+                       // Handle cases where the buffer is not a complete data line (e.g., partial line)
+                       console.warn('Remaining buffer is not a complete data line:', buffer);
+                       // Decide how to handle partial data - maybe discard or append as raw? Appending as raw might break markdown. Discarding is safer.
                     }
+                 } catch (e) {
+                    console.error('Error processing final buffer:', e);
+                 }
+              }
+              scheduleUpdate(); // Final display update
+              break; // Exit loop
+            }
+            await processChunk(value);
+          }
+          stopTimer(); // Stop timer when stream is done
+        } catch (error) {
+          console.error('Erreur de Fetch ou du Stream:', error);
+          Swal.fire({
+            icon: 'error',
+            title: 'Erreur de connexion ou de traitement',
+            text: `Une erreur est survenue lors du traitement de votre demande: ${error.message}`
+          });
+          loader.classList.add('hidden');
+          stopTimer(); // Ensure timer stops on error
+          solutionSection.classList.remove('hidden'); // Show section maybe with error message
+          if(answerBuffer === '') { // If no output yet, put error in answer section
+             answerContent.innerHTML = `<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
+          } else { // If some output exists, append error
+             answerBuffer += `\n\n<div class="text-red-500">Une erreur est survenue: ${error.message}</div>`;
+             scheduleUpdate(); // Update display with error
+          }
+        }
+      });
+      // Sauvegarde de la solution avec SweetAlert2
+      saveButton.addEventListener('click', () => {
+        Swal.fire({
+          title: 'Sauvegarder la solution',
+          input: 'text',
+          inputLabel: 'Nom de la sauvegarde',
+          inputPlaceholder: 'Entrez un nom pour cette sauvegarde',
+          showCancelButton: true,
+          confirmButtonText: 'Sauvegarder',
+          cancelButtonText: 'Annuler'
+        }).then((result) => {
+          if (result.isConfirmed && result.value) {
+            const saveName = result.value;
+            const saveData = {
+              answer: answerContent.innerHTML, // Save the rendered HTML
+              thinking: thoughtsContent.innerHTML, // Save the rendered HTML
+              date: new Date().toLocaleString()
+            };
+            let savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+            savedExercises[saveName] = saveData;
+            localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+            Swal.fire({
+              icon: 'success',
+              title: 'Sauvegarde réussie',
+              text: 'Votre solution a bien été sauvegardée !',
+              timer: 2000,
+              showConfirmButton: false
             });
+          }
         });
+      });
+      // Chargement des sauvegardes dans le modal
+      const loadSavedList = () => {
+        savedList.innerHTML = '';
+        const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+        if (Object.keys(savedExercises).length === 0) {
+          savedList.innerHTML = '<li class="text-gray-500 text-center py-8">Aucune sauvegarde disponible</li>';
+          return;
+        }
+        // Sort by date, newest first (optional but nice)
+        const sortedEntries = Object.entries(savedExercises).sort(([,a], [,b]) => new Date(b.date) - new Date(a.date));
+        for (const [name, data] of sortedEntries) {
+          const li = document.createElement('li');
+          li.className = 'border-b pb-2';
+          li.innerHTML = `
+            <div class="flex justify-between items-center">
+              <button class="text-left text-blue-600 hover:underline" data-save="${name}">
+                ${name} <span class="text-gray-500 text-xs">(${data.date})</span>
+              </button>
+              <button class="text-red-500 hover:text-red-700" data-delete="${name}">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
+                </svg>
+              </button>
+            </div>
+          `;
+          savedList.appendChild(li);
+        }
+      };
+      // Gestion des clics sur les sauvegardes
+      savedList.addEventListener('click', (e) => {
+        // Chargement d'une sauvegarde
+        if (e.target && e.target.dataset.save) {
+          const saveName = e.target.dataset.save;
+          const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+          const data = savedExercises[saveName];
+          if (data) {
+            // Hide the form and loader, show the solution section
+            form.classList.add('hidden');
+            loader.classList.add('hidden');
+            solutionSection.classList.remove('hidden');
+            // Load the saved HTML content
+            thoughtsContent.innerHTML = data.thinking;
+            answerContent.innerHTML = data.answer;
+            // Close the modal
+            savedModal.classList.remove('active');
+            // Re-render MathJax and apply highlighting to the loaded HTML
+            // Use MathJax.typesetPromise() on the specific elements
+             if (window.mathJaxReady) {
+                MathJax.startup.document.elements = [thoughtsContent, answerContent]; // Target both potentially
+                MathJax.typesetPromise().then(() => {
+                   applyHighlighting(); // Apply highlighting after MathJax
+                }).catch((err) => console.error("MathJax typesetting failed:", err));
+             } else {
+                console.warn("MathJax not ready yet, cannot typeset saved content.");
+             }
+            // Ensure thoughts box is open when viewing a saved solution
+            thoughtsBox.classList.add('open');
+            // Reset buffers and timer as this is static content
+            thoughtsBuffer = ''; // Or load from saved data if needed for re-processing
+            answerBuffer = ''; // Or load from saved data if needed for re-processing
+            stopTimer();
+            timestamp.textContent = data.date; // Show saved date as timestamp
+          }
+        }
+        // Suppression d'une sauvegarde
+        if (e.target && (e.target.dataset.delete || e.target.closest('[data-delete]'))) {
+          const deleteName = e.target.dataset.delete || e.target.closest('[data-delete]').dataset.delete;
+          Swal.fire({
+            title: 'Êtes-vous sûr ?',
+            text: "Cette sauvegarde sera définitivement supprimée.",
+            icon: 'warning',
+            showCancelButton: true,
+            confirmButtonColor: '#3085d6',
+            cancelButtonColor: '#d33',
+            confirmButtonText: 'Oui, supprimer',
+            cancelButtonText: 'Annuler'
+          }).then((result) => {
+            if (result.isConfirmed) {
+              const savedExercises = JSON.parse(localStorage.getItem('savedExercises') || '{}');
+              delete savedExercises[deleteName];
+              localStorage.setItem('savedExercises', JSON.stringify(savedExercises));
+              Swal.fire(
+                'Supprimé !',
+                'La sauvegarde a été supprimée.',
+                'success'
+              );
+              loadSavedList(); // Refresh the list in the modal
+              // If the currently viewed solution is the one being deleted, clear it
+              // (Optional, maybe better to just let them view it until they start a new one)
+            }
+          });
+        }
+      });
+      // Ouverture / fermeture du modal de sauvegardes
+      openSaved.addEventListener('click', () => { loadSavedList(); savedModal.classList.add('active'); });
+      closeSaved.addEventListener('click', () => { savedModal.classList.remove('active'); });
+      // Bouton présent uniquement dans le modal pour lancer un nouvel exercice
+      newExercise.addEventListener('click', () => {
+        // Reset form and hide solution
+        form.reset();
+        form.classList.remove('hidden');
+        solutionSection.classList.add('hidden');
+        imagePreview.classList.add('hidden'); // Hide image preview
+        previewImage.src = ''; // Clear image source
+        // Clear content areas and buffers
+        thoughtsContent.innerHTML = '';
+        answerContent.innerHTML = '';
+        thoughtsBuffer = '';
+        answerBuffer = '';
+        currentMode = null; // Reset mode
+        // Stop timer and clear timestamp
+        stopTimer();
+        timestamp.textContent = '';
+        // Ensure thoughts box is collapsed for a new exercise
+        thoughtsBox.classList.remove('open');
+        // Close the modal
+        savedModal.classList.remove('active');
+      });
+    });
+  </script>
 </body>
 </html>