Spaces:

Docfile
/

Mariam-cards

Running

App Files Files Community

Docfile commited on 5 days ago

Commit

f7864af

verified ·

1 Parent(s): 0cb856b

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +484 -205

templates/index.html CHANGED Viewed

@@ -1,215 +1,494 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Math Solver – Version Gratuite</title>
-  <!-- Font Awesome & Highlight.js -->
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
-  <!-- Stylesheet -->
-  <style>
-    :root {
-      --primary:   #4a6fa5;
-      --secondary: #166088;
-      --accent:    #4fc3f7;
-      --bg:        #f8f9fa;
-      --text:      #333;
-      --light:     #fff;
-      --shadow:    rgba(0,0,0,0.1);
-    }
-    * { box-sizing: border-box; }
-    body {
-      margin: 0;
-      font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
-      color: var(--text);
-      background: var(--bg);
-      line-height: 1.5;
-    }
-    header, main, footer { max-width: 900px; margin: 0 auto; padding: 1rem; }
-    header { text-align: center; padding-top: 2rem; }
-    .logo { font-size: 2.5rem; color: var(--primary); margin-bottom: .5rem; }
-    .subtitle { color: var(--secondary); font-size: 1.1rem; }
-    .card {
-      background: var(--light);
-      border-radius: 8px;
-      box-shadow: 0 4px 8px var(--shadow);
-      padding: 2rem;
-      margin: 2rem 0;
-    }
-    .card h2 { color: var(--primary); margin-top: 0; }
-    .features {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 1rem;
-      list-style: none;
-      padding: 0;
-      margin: 1.5rem 0;
-    }
-    .features li {
-      display: flex;
-      align-items: center;
-      font-size: .95rem;
-    }
-    .features li i {
-      margin-right: .5rem;
-      color: var(--accent);
-    }
-    .features li.disabled i { color: #ccc; }
-    .features li.disabled span { color: #999; }
-    .btn {
-      display: inline-flex;
-      align-items: center;
-      gap: .5rem;
-      background: var(--primary);
-      color: var(--light);
-      padding: .75rem 1.5rem;
-      border: none;
-      border-radius: 4px;
-      font-weight: 600;
-      cursor: pointer;
-      transition: transform .2s, background .2s;
-      text-decoration: none;
-    }
-    .btn:hover { background: var(--secondary); transform: translateY(-2px); }
-    .btn.secondary { background: var(--secondary); }
-    /* Upload & Preview */
-    .upload { text-align: center; margin: 1.5rem 0; }
-    .upload input { display: none; }
-    .preview {
-      margin: 1rem auto;
-      max-width: 100%;
-      border-radius: 6px;
-      box-shadow: 0 4px 6px var(--shadow);
-      display: none;
-    }
-    /* Solution & Indicators */
-    .solution {
-      margin-top: 2rem;
-      display: none;
-    }
-    .indicator {
-      display: flex;
-      align-items: center;
-      gap: .5rem;
-      padding: .75rem;
-      border-radius: 4px;
-      font-size: .9rem;
-    }
-    .indicator.think { background: #e3f2fd; color: #1565c0; }
-    .indicator.exec  { background: #ede7f6; color: #5e35b1; }
-    .indicator.answer{ background: #e8f5e9; color: #2e7d32; }
-    .indicator .fa { animation: pulse 1.4s infinite; }
-    @keyframes pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
-    .step { background: #f9f9f9; border-left: 5px solid var(--primary); padding: 1rem; margin: 1rem 0; overflow-x:auto; }
-    pre { margin: 0; }
-    .code-block { margin: 1rem 0; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 4px var(--shadow); }
-    .code-block header { background: #343a40; color:#fff; padding:.5rem 1rem; font-family: monospace; font-size:.9rem; }
-    .code-block pre { background: #2c323c; color: #e6e6e6; padding:1rem; font-family: monospace; font-size:.9rem; }
-    .output-block { background: var(--light); border-top:1px solid #ddd; padding:1rem; font-family: monospace; white-space: pre-wrap; }
-    footer { text-align: center; font-size:.85rem; color:#666; padding:2rem 1rem; }
-    @media(max-width:600px) {
-      .features { grid-template-columns: 1fr; }
-      .btn { width: 100%; justify-content: center; }
-    }
-  </style>
 </head>
 <body>
-<header>
-  <div class="logo">Math Solver</div>
-  <div class="subtitle">La solution intelligente pour vos problèmes mathématiques</div>
-</header>
-<main>
-  <section class="card">
-    <h2>Version Gratuite</h2>
-    <p>3 problèmes gratuits par jour avec explication pas-à-pas.</p>
-    <ul class="features">
-      <li><i class="fas fa-check-circle"></i> Problèmes basiques</li>
-      <li><i class="fas fa-check-circle"></i> 3 par jour</li>
-      <li><i class="fas fa-check-circle"></i> Explications détaillées</li>
-      <li class="disabled"><i class="fas fa-times-circle"></i><span>Code avancé (Pro)</span></li>
-      <li class="disabled"><i class="fas fa-times-circle"></i><span>Illimité (Pro)</span></li>
-      <li class="disabled"><i class="fas fa-times-circle"></i><span>Support prioritaire (Pro)</span></li>
-    </ul>
-    <div class="upload">
-      <input type="file" id="imgInput" accept="image/*">
-      <button class="btn" id="btnSelect"><i class="fas fa-upload"></i> Choisir une image</button>
-    </div>
-    <img id="imgPreview" class="preview" alt="Aperçu du problème">
-    <button class="btn secondary" id="btnSolve" style="display:none;"><i class="fas fa-calculator"></i> Résoudre</button>
-    <div class="solution" id="solutionArea">
-      <div class="indicator think" id="indicator"><i class="fas fa-brain"></i><span>Je réfléchis...</span></div>
-      <div id="solutionContent"></div>
-    </div>
-    <div style="text-align:center; margin-top:2rem;">
-      <a href="#" class="btn">Passer à la version Pro</a>
     </div>
-  </section>
-</main>
-<footer>&copy; 2025 Math Solver. Tous droits réservés.</footer>
-<!-- Scripts -->
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/python.min.js"></script>
-<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
-<script>
-  // Element references
-  const imgInput  = document.getElementById('imgInput');
-  const preview   = document.getElementById('imgPreview');
-  const btnSelect = document.getElementById('btnSelect');
-  const btnSolve  = document.getElementById('btnSolve');
-  const solArea   = document.getElementById('solutionArea');
-  const solCont   = document.getElementById('solutionContent');
-  const indicator = document.getElementById('indicator');
-  btnSelect.addEventListener('click', () => imgInput.click());
-  imgInput.addEventListener('change', e => {
-    const file = e.target.files[0];
-    if (!file) return;
-    const url = URL.createObjectURL(file);
-    preview.src = url;
-    preview.style.display = 'block';
-    btnSolve.style.display = 'inline-flex';
-  });
-  btnSolve.addEventListener('click', () => {
-    solArea.style.display = 'block';
-    solCont.innerHTML = '';
-    indicator.className = 'indicator think';
-    indicator.querySelector('span').textContent = 'Je réfléchis...';
-    fetch('/solved', { method: 'POST', body: new FormData(document.querySelector('form')) })
-      .then(res => {
-        // streaming logic...
-      })
-      .catch(err => console.error(err));
-  });
-  function updateIndicator(mode) {
-    indicator.className = 'indicator ' + mode;
-    const icons = { think: 'fa-brain', exec: 'fa-code', answer: 'fa-paste' };
-    indicator.querySelector('i').className = 'fas ' + icons[mode];
-    indicator.querySelector('span').textContent = {
-      think:  'Je réfléchis...',
-      exec:   'Exécution du code...',
-      answer: 'Rédaction de la solution...',
-    }[mode];
-  }
-</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>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 */
+            white-space: pre-wrap; /* Preserve whitespace/line breaks from stream */
+        }
+        .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 pour le rendu */
+        /* Ensure rendered math doesn't cause excessive layout shifts or overflow */
+        mjx-container {
+            overflow-x: auto;
+            overflow-y: hidden;
+            display: block; /* Treat block math as a block */
+            margin: 1em 0; /* Add some vertical spacing */
+            text-align: initial; /* Inherit text alignment from parent */
+        }
+        mjx-assistive-mml { /* Hide the assistive MML */
+             display: none !important;
+        }
+        /* Ensure inline math flows correctly */
+        .MathJax nobr,.MathJax .mjx-chtml{
+            display: inline-block !important; /* Keep inline math inline */
+            white-space: normal !important; /* Allow text wrapping around inline math */
+        }
+        .step-section span.MathJax_Preview { /* Hide MathJax preview spans */
+            display: none !important;
+        }
+    </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>© 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, // Disable menu
+                ignoreHtmlClass: 'code-content', // Don't process code blocks
+                processHtmlClass: 'step-section|latex-display', // Only process these classes
+                skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] // Skip these tags
+            },
+            loader: {
+                load: ['[tex]/ams', '[tex]/noerrors', '[tex]/physics', '[tex]/cancel', '[tex]/color', '[tex]/mhchem', '[tex]/mathtools']
+            },
+            svg: {
+                fontCache: 'global'
+            }
+        };
+    </script>
+    <!-- Load MathJax library -->
+    <script id="MathJax-script" async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-svg.js"></script>
+    <script>
+        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 = ''; // Clear previous solution
+            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';
+                        // Optional: Final typeset on the whole container if needed, but per-chunk should be enough
+                        // MathJax.typesetPromise([solution]).catch(e => console.error('Final MathJax typesetting error:', e));
+                        return;
+                    }
+                    buffer += decoder.decode(value, { stream: true });
+                    // Split by two newlines to get distinct chunks from the stream
+                    const lines = buffer.split('\n\n');
+                    buffer = lines.pop(); // Keep the last potentially incomplete chunk
+                    for (const line of lines) {
+                        if (line.startsWith('data: ')) {
+                            try {
+                                const data = JSON.parse(line.substr(6));
+                                if (data.mode) {
+                                    // Update loading indicator based on mode
+                                    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 chunk
+                                    const contentContainer = document.createElement('div');
+                                    if (content.includes('```python')) {
+                                        // Code block
+                                        const codeHtml = content.replace(/```python\n([\s\S]*?)\n```/g, function(match, p1) {
+                                            // Use <pre> and <code> for Highlight.js
+                                            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:')) {
+                                        // Code output block
+                                         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.
+                                        // Add a class that MathJax is configured to process.
+                                        contentContainer.className = 'step-section';
+                                        contentContainer.innerHTML = content;
+                                        solution.appendChild(contentContainer);
+                                        // Tell MathJax to process the newly added content container
+                                        // MathJax.typesetPromise takes an array of elements or element IDs.
+                                        MathJax.typesetPromise([contentContainer]).catch(e => console.error('MathJax typesetting error:', e));
+                                    }
+                                }
+                                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'; // Hide loading on error
+                                }
+                            } catch (e) {
+                                console.error('Error parsing JSON from stream:', e, line);
+                            }
+                        }
+                    }
+                    // Scroll to bottom as new content arrives
+                    window.scrollTo(0, document.body.scrollHeight);
+                    // Read the next chunk from the stream
+                    return reader.read().then(processStream);
+                }
+                // Start reading the stream
+                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 ou du serveur: ${error}`;
+                solution.appendChild(errorDiv);
+                loadingIndicator.style.display = 'none'; // Hide loading on fetch error
+                console.error('Fetch error:', error);
+            });
+        });
+    </script>
 </body>
+</html>