Spaces:
Running
Running
| <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: 0; /* Remove padding from the container */ | |
| border-radius: 8px; | |
| text-align: left; | |
| line-height: 1.8; | |
| font-size: 16px; | |
| overflow: hidden; /* Clip child border-radius */ | |
| box-shadow: var(--box-shadow); /* Add shadow to the main container */ | |
| } | |
| .step-section, .code-section, .output-section { | |
| margin: 0; /* Remove vertical margins between blocks */ | |
| padding: 15px 20px; /* Add padding inside each block, matching original #solution padding */ | |
| border-radius: 0; /* Remove rounded corners between blocks */ | |
| border-left: none; /* Remove default left border */ | |
| overflow-x: auto; | |
| white-space: pre-wrap; /* Preserve white space and line breaks */ | |
| background-color: transparent; /* Ensure consistent background */ | |
| } | |
| .step-section { | |
| border-left: 4px solid var(--primary-color); /* Keep the left border as a visual cue */ | |
| padding-left: calc(20px - 4px); /* Adjust padding to maintain alignment */ | |
| background-color: #f9f9f9; /* Subtle background for text steps */ | |
| } | |
| .code-section { | |
| /* Code section internal elements handle their own padding and background */ | |
| } | |
| .code-header { | |
| background-color: #343a40; | |
| color: white; | |
| padding: 8px 20px; /* Match horizontal padding */ | |
| font-size: 14px; | |
| font-family: 'Courier New', monospace; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| } | |
| .code-content { | |
| margin: 0; | |
| padding: 15px 20px; /* Match horizontal padding */ | |
| 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 20px; /* Match horizontal padding */ | |
| border-top: 1px solid #ddd; | |
| color: #333; | |
| font-family: 'Courier New', monospace; | |
| font-size: 14px; | |
| white-space: pre-wrap; | |
| overflow-x: auto; | |
| border-bottom-left-radius: 8px; | |
| border-bottom-right-radius: 8px; | |
| } | |
| /* Apply border-radius to the very first and very last child inside #solution */ | |
| #solution > div:first-child { | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| } | |
| #solution > div:last-child { | |
| border-bottom-left-radius: 8px; | |
| border-bottom-right-radius: 8px; | |
| } | |
| /* Special case for first code header within the first child */ | |
| #solution > .code-section:first-child .code-header { | |
| border-top-left-radius: 8px; | |
| border-top-right-radius: 8px; | |
| } | |
| /* Special case for last code content if it's the very last child and not followed by output */ | |
| #solution > .code-section:last-child .code-content:last-child:not(+.output-section) { | |
| border-bottom-left-radius: 8px; | |
| border-bottom-right-radius: 8px; | |
| } | |
| /* MathJax rendering output styles */ | |
| mjx-container { | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| display: block; /* Block math */ | |
| margin: 1em 0; /* Vertical spacing for block math */ | |
| text-align: initial; | |
| padding: 0 ; | |
| } | |
| /* Inline math container */ | |
| mjx-container[display="inline"] { | |
| display: inline-block; /* Inline math behaves like text */ | |
| margin: 0 ; /* No vertical margin for inline math */ | |
| } | |
| mjx-assistive-mml { | |
| display: none ; | |
| } | |
| .MathJax nobr,.MathJax .mjx-chtml{ | |
| display: inline-block ; | |
| white-space: normal ; | |
| } | |
| .step-section span.MathJax_Preview { | |
| 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"></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> | |
| <script> | |
| window.MathJax = { | |
| tex: { | |
| inlineMath: [['$', '$'], ['\\(', '\\)']], | |
| displayMath: [['$$', '$$'], ['\\[', '\\]']], | |
| processEscapes: true, | |
| processEnvironments: true, | |
| packages: {'[+]': ['ams', 'noerrors', 'physics', 'cancel', 'color', 'mhchem', 'mathtools']} | |
| }, | |
| options: { | |
| enableMenu: false, | |
| ignoreHtmlClass: 'code-content', | |
| processHtmlClass: 'step-section', /* Process step-section for Math */ | |
| skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'] | |
| }, | |
| 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> | |
| 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 = ''; | |
| 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'; | |
| return; | |
| } | |
| buffer += decoder.decode(value, { stream: true }); | |
| const lines = buffer.split('\n\n'); | |
| buffer = lines.pop(); | |
| for (const line of lines) { | |
| if (line.startsWith('data: ')) { | |
| try { | |
| const data = JSON.parse(line.substr(6)); | |
| if (data.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; | |
| const contentContainer = document.createElement('div'); | |
| if (content.includes('```python')) { | |
| 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); | |
| contentContainer.querySelectorAll('pre code').forEach((block) => { | |
| hljs.highlightElement(block); | |
| }); | |
| } | |
| else if (content.includes('Résultat d\'exécution:')) { | |
| 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 { | |
| contentContainer.className = 'step-section'; | |
| contentContainer.innerHTML = content; | |
| solution.appendChild(contentContainer); | |
| 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'; | |
| } | |
| } catch (e) { | |
| console.error('Error parsing JSON from stream:', e, line); | |
| } | |
| } | |
| } | |
| 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 ou du serveur: ${error}`; | |
| solution.appendChild(errorDiv); | |
| loadingIndicator.style.display = 'none'; | |
| console.error('Fetch error:', error); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |