Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on Apr 26

Commit

4ea31b4

verified ·

1 Parent(s): 4896d95

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +487 -245

templates/index.html CHANGED Viewed

@@ -3,293 +3,535 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Résolveur avec Gemini AI</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-    <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
     <style>
-        .drop-zone {
-            max-width: 100%;
-            height: 200px;
-            padding: 25px;
             display: flex;
             align-items: center;
-            justify-content: center;
-            text-align: center;
             cursor: pointer;
-            color: #444;
-            border: 2px dashed #009578;
-            border-radius: 10px;
         }
-        .drop-zone--over {
-            border-style: solid;
         }
-        .drop-zone__input {
-            display: none;
         }
-        .drop-zone__thumb {
-            width: 100%;
-            height: 100%;
-            border-radius: 10px;
             overflow: hidden;
-            background-color: #cccccc;
-            background-size: cover;
-            position: relative;
-        }
-        .drop-zone__thumb::after {
-            content: attr(data-label);
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            padding: 5px 0;
-            color: #ffffff;
-            background: rgba(0, 0, 0, 0.75);
             font-size: 14px;
-            text-align: center;
         }
-        #response, #thinking {
-            white-space: pre-wrap;
             padding: 15px;
-            border-radius: 10px;
-            background-color: #f8f9fa;
-            margin-top: 20px;
         }
-        #thinking {
-            color: #666;
-            font-style: italic;
         }
-        .loading {
-            display: none;
             text-align: center;
-            margin-top: 20px;
-        }
-        .loading-spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(0, 0, 0, 0.1);
-            border-radius: 50%;
-            border-top-color: #009578;
-            animation: spin 1s ease-in-out infinite;
-            margin: 0 auto;
         }
-        @keyframes spin {
-            to { transform: rotate(360deg); }
         }
     </style>
 </head>
 <body>
-    <div class="container my-5">
-        <h1 class="text-center mb-4">Résolveur de problèmes avec Gemini AI</h1>
-        <div class="row mb-4">
-            <div class="col-md-6 offset-md-3">
-                <div class="card">
-                    <div class="card-body">
-                        <h5 class="card-title">Téléchargez une image de votre problème</h5>
-                        <div class="drop-zone">
-                            <span class="drop-zone__prompt">Déposez votre image ici ou cliquez pour parcourir</span>
-                            <input type="file" name="image" class="drop-zone__input" accept="image/*">
-                        </div>
-                        <div class="d-grid gap-2 mt-3">
-                            <button id="solveBtn" class="btn btn-primary" disabled>Résoudre</button>
-                            <button id="fastSolveBtn" class="btn btn-outline-primary" disabled>Résolution rapide (moins précise)</button>
-                        </div>
-                    </div>
                 </div>
             </div>
         </div>
-        <div class="loading">
-            <div class="loading-spinner"></div>
-            <p class="mt-2">Traitement en cours...</p>
-        </div>
-        <div id="thinking" style="display: none;">
-            <h4>Gemini réfléchit...</h4>
-            <div id="thinking-content"></div>
-        </div>
-        <div id="response" style="display: none;"></div>
     </div>
     <script>
-        document.addEventListener("DOMContentLoaded", function() {
-            // Gestion de la zone de dépôt d'image
-            document.querySelectorAll(".drop-zone__input").forEach(inputElement => {
-                const dropZoneElement = inputElement.closest(".drop-zone");
-                dropZoneElement.addEventListener("click", e => {
-                    inputElement.click();
-                });
-                inputElement.addEventListener("change", e => {
-                    if (inputElement.files.length) {
-                        updateThumbnail(dropZoneElement, inputElement.files[0]);
-                        document.getElementById("solveBtn").disabled = false;
-                        document.getElementById("fastSolveBtn").disabled = false;
-                    }
-                });
-                dropZoneElement.addEventListener("dragover", e => {
-                    e.preventDefault();
-                    dropZoneElement.classList.add("drop-zone--over");
-                });
-                ["dragleave", "dragend"].forEach(type => {
-                    dropZoneElement.addEventListener(type, e => {
-                        dropZoneElement.classList.remove("drop-zone--over");
-                    });
-                });
-                dropZoneElement.addEventListener("drop", e => {
-                    e.preventDefault();
-                    if (e.dataTransfer.files.length) {
-                        inputElement.files = e.dataTransfer.files;
-                        updateThumbnail(dropZoneElement, e.dataTransfer.files[0]);
-                        document.getElementById("solveBtn").disabled = false;
-                        document.getElementById("fastSolveBtn").disabled = false;
-                    }
-                    dropZoneElement.classList.remove("drop-zone--over");
-                });
-            });
-            function updateThumbnail(dropZoneElement, file) {
-                let thumbnailElement = dropZoneElement.querySelector(".drop-zone__thumb");
-                // Supprimer le texte de prompt
-                if (dropZoneElement.querySelector(".drop-zone__prompt")) {
-                    dropZoneElement.querySelector(".drop-zone__prompt").remove();
                 }
-                // Première fois - créer l'élément thumbnail
-                if (!thumbnailElement) {
-                    thumbnailElement = document.createElement("div");
-                    thumbnailElement.classList.add("drop-zone__thumb");
-                    dropZoneElement.appendChild(thumbnailElement);
-                }
-                thumbnailElement.dataset.label = file.name;
-                // Afficher l'image
-                if (file.type.startsWith("image/")) {
-                    const reader = new FileReader();
-                    reader.readAsDataURL(file);
-                    reader.onload = () => {
-                        thumbnailElement.style.backgroundImage = `url('${reader.result}')`;
-                    };
-                } else {
-                    thumbnailElement.style.backgroundImage = null;
                 }
             }
-            // Gestion des boutons
-            document.getElementById("solveBtn").addEventListener("click", function() {
-                processImage("/solve");
-            });
-            document.getElementById("fastSolveBtn").addEventListener("click", function() {
-                processImage("/solved");
-            });
-            // Fonction pour envoyer l'image et traiter la réponse
-            function processImage(endpoint) {
-                const fileInput = document.querySelector(".drop-zone__input");
-                if (!fileInput.files.length) return;
-                const file = fileInput.files[0];
-                const formData = new FormData();
-                formData.append("image", file);
-                // Réinitialiser l'affichage
-                document.getElementById("response").style.display = "none";
-                document.getElementById("response").innerHTML = "";
-                document.getElementById("thinking").style.display = "none";
-                document.getElementById("thinking-content").innerHTML = "";
-                document.querySelector(".loading").style.display = "block";
-                // Désactiver les boutons pendant le traitement
-                document.getElementById("solveBtn").disabled = true;
-                document.getElementById("fastSolveBtn").disabled = true;
-                // Configurer SSE
-                const eventSource = new EventSource(endpoint, {
-                    method: "POST",
-                    body: formData
-                });
-                let mode = "starting";
-                eventSource.onmessage = function(event) {
-                    const data = JSON.parse(event.data);
-                    // Masquer le chargement initial
-                    document.querySelector(".loading").style.display = "none";
-                    // Gestion du mode
-                    if (data.mode) {
-                        mode = data.mode;
-                        if (mode === "thinking") {
-                            document.getElementById("thinking").style.display = "block";
-                        } else if (mode === "answering") {
-                            document.getElementById("response").style.display = "block";
                         }
                     }
-                    // Ajout du contenu
-                    if (data.content) {
-                        if (mode === "thinking") {
-                            document.getElementById("thinking-content").innerHTML += data.content;
-                        } else if (mode === "answering") {
-                            document.getElementById("response").innerHTML += data.content;
-                            // Rendre LaTeX si présent
-                            if (window.MathJax) {
-                                MathJax.typesetPromise([document.getElementById("response")]);
                             }
                         }
                     }
-                    // Gestion des erreurs
-                    if (data.error) {
-                        document.getElementById("response").style.display = "block";
-                        document.getElementById("response").innerHTML += `<div class="alert alert-danger">${data.error}</div>`;
-                        eventSource.close();
-                    }
-                };
-                eventSource.onerror = function(error) {
-                    document.querySelector(".loading").style.display = "none";
-                    document.getElementById("response").style.display = "block";
-                    document.getElementById("response").innerHTML += `<div class="alert alert-danger">Erreur de connexion. Veuillez réessayer.</div>`;
-                    eventSource.close();
-                    // Réactiver les boutons
-                    document.getElementById("solveBtn").disabled = false;
-                    document.getElementById("fastSolveBtn").disabled = false;
-                };
-                // Fermeture de la connexion quand c'est terminé
-                eventSource.addEventListener("done", function() {
-                    eventSource.close();
-                    // Réactiver les boutons
-                    document.getElementById("solveBtn").disabled = false;
-                    document.getElementById("fastSolveBtn").disabled = false;
-                });
-            }
         });
     </script>
 </body>

 <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">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css" rel="stylesheet">
     <style>
+        :root {
+            --primary-color: #4a6fa5;
+            --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: #2c323c;
+            --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;
+            text-align: center;
+        }
+        h1 {
+            color: var(--primary-color);
+            margin-top: 0;
+        }
+        .feature-list {
+            list-style-type: none;
+            padding: 0;
+            margin: 30px 0;
+            text-align: left;
+        }
+        .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;
+        }
+        .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;
         }
+        .cta-button:hover {
+            background-color: var(--secondary-color);
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
         }
+        .upgrade-section {
+            margin-top: 30px;
+            padding: 20px;
+            border-top: 1px solid #ddd;
         }
+        footer {
+            text-align: center;
+            padding: 20px 0;
+            color: #666;
+            font-size: 0.9rem;
+        }
+        #solution {
+            background: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            text-align: left;
+            line-height: 1.8;
+            font-size: 16px;
+        }
+        .code-section {
+            margin: 20px 0;
+            border-radius: 8px;
             overflow: hidden;
+            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+        }
+        .code-header {
+            background-color: #343a40;
+            color: white;
+            padding: 8px 15px;
             font-size: 14px;
+            font-family: 'Courier New', monospace;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
         }
+        .code-content {
+            margin: 0;
             padding: 15px;
+            background-color: var(--code-bg);
+            color: #e6e6e6;
+            overflow-x: auto;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            line-height: 1.5;
         }
+        .output-section {
+            background-color: var(--output-bg);
+            padding: 15px;
+            border-radius: 0 0 8px 8px;
+            border-top: 1px solid #ddd;
+            color: #333;
+            font-family: 'Courier New', monospace;
+            font-size: 14px;
+            white-space: pre-wrap;
+            overflow-x: auto;
+        }
+        .step-section {
+            margin: 25px 0;
+            padding: 15px;
+            background-color: #f9f9f9;
+            border-left: 4px solid var(--primary-color);
+            border-radius: 0 8px 8px 0;
+            overflow-x: auto; /* Pour les formules LaTeX larges */
         }
+        .latex-display {
+            overflow-x: auto;
+            padding: 10px 0;
+            margin: 15px 0;
             text-align: center;
         }
+        .thinking-indicator, .executing-indicator, .answering-indicator {
+            display: flex;
+            align-items: center;
+            padding: 10px;
+            margin: 10px 0;
+            border-radius: 8px;
+            font-size: 0.9rem;
+        }
+        .thinking-indicator {
+            background-color: #e3f2fd;
+            color: #1565c0;
+        }
+        .executing-indicator {
+            background-color: #ede7f6;
+            color: #5e35b1;
+        }
+        .answering-indicator {
+            background-color: #e8f5e9;
+            color: #2e7d32;
+        }
+        .indicator-icon {
+            margin-right: 10px;
+            animation: pulse 1.5s infinite ease-in-out;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+        /* Styles spécifiques à MathJax */
+        .MathJax {
+            overflow-x: auto !important;
+            overflow-y: hidden !important;
+            max-width: 100% !important;
+        }
+        .mjx-chtml {
+            overflow-x: auto !important;
+            overflow-y: hidden !important;
+            max-width: 100% !important;
+        }
+        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;
+            }
         }
     </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>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>
+            <div class="upload-section">
+                <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()">
+                        <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>
+                <button id="solveButton" class="cta-button" style="display: none; background-color: var(--secondary-color);">
+                    <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;">
+                <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>
+                <div id="solution" style="background: #fff; padding: 20px; border-radius: 8px;"></div>
+            </div>
+            <div class="upgrade-section">
+                <h2>Besoin de plus de puissance ?</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>
             </div>
         </div>
+        <footer>
+            <p>&copy; 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>
+    <!-- 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'
+            }
+        };
+    </script>
+    <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
+    <script>
+        // Variables to manage MathJax rendering state
+        let mathJaxQueue = [];
+        let isProcessingMathQueue = false;
+        // Process MathJax queue with delay to avoid blocking UI
+        async function processMathJaxQueue() {
+            if (isProcessingMathQueue || mathJaxQueue.length === 0) return;
+            isProcessingMathQueue = true;
+            const element = mathJaxQueue.shift();
+            try {
+                await MathJax.typesetPromise([element]);
+            } catch (e) {
+                console.error('MathJax typesetting failed:', e);
+            }
+            isProcessingMathQueue = false;
+            setTimeout(processMathJaxQueue, 100); // Small delay to allow UI updates
+        }
+        function addToMathJaxQueue(element) {
+            mathJaxQueue.push(element);
+            processMathJaxQueue();
+        }
+        document.getElementById('imageInput').addEventListener('change', function(event) {
+            const file = event.target.files[0];
+            if (file) {
+                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}`;
                 }
+                reader.readAsDataURL(file);
             }
+        });
+        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', {
+                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);
                             }
                         }
                     }
+                    // Scroll to bottom automatically
+                    window.scrollTo(0, document.body.scrollHeight);
+                    return reader.read().then(processStream);
+                }
+                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);
+                loadingIndicator.style.display = 'none';
+            });
         });
     </script>
 </body>