Spaces:

Docfile
/

Mariam-cards

Runtime error

App Files Files Community

Docfile commited on Apr 26

Commit

0cb856b

verified ·

1 Parent(s): ca9f82a

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +208 -531

templates/index.html CHANGED Viewed

@@ -1,538 +1,215 @@
 <!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 */
-        }
-        .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>
-</html>

 <!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>