Spaces:
Runtime error
Runtime error
| <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 ; | |
| } | |
| /* Ensure inline math flows correctly */ | |
| .MathJax nobr,.MathJax .mjx-chtml{ | |
| display: inline-block ; /* Keep inline math inline */ | |
| white-space: normal ; /* Allow text wrapping around inline math */ | |
| } | |
| .step-section span.MathJax_Preview { /* Hide MathJax preview spans */ | |
| display: none ; | |
| } | |
| </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> |