Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mariam M-0 | Résolveur de Problèmes Mathématiques</title> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-AMS_HTML"></script> | |
| <style> | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .loader { | |
| border-top-color: #3B82F6; | |
| animation: spinner 1s linear infinite; | |
| } | |
| @keyframes spinner { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .thought-box { | |
| transition: max-height 0.3s ease-out; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .thought-box.open { | |
| max-height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen p-8"> | |
| <div class="container mx-auto max-w-3xl"> | |
| <div class="bg-white rounded-2xl shadow-xl p-8 mb-8"> | |
| <div class="flex items-center justify-center mb-8"> | |
| <h1 class="text-4xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-indigo-600"> | |
| Mariam M-0 | |
| </h1> | |
| </div> | |
| <form id="problemForm" class="space-y-6"> | |
| <div class="relative"> | |
| <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-500 transition-colors"> | |
| <input type="file" id="imageInput" accept="image/*" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer"> | |
| <div class="space-y-2"> | |
| <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48"> | |
| <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| <div class="text-gray-600"> | |
| Glissez une image ou cliquez pour sélectionner | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-3 px-6 rounded-xl font-medium hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transform transition-all hover:scale-105"> | |
| Résoudre | |
| </button> | |
| </form> | |
| <div id="loader" class="hidden mt-8"> | |
| <div class="flex justify-center items-center"> | |
| <div class="loader ease-linear rounded-full border-4 border-t-4 border-gray-200 h-12 w-12"></div> | |
| </div> | |
| <div class="text-center mt-4 text-gray-600">Analyse en cours...</div> | |
| </div> | |
| <div id="solution" class="mt-8 hidden space-y-6"> | |
| <div class="bg-gray-50 rounded-xl p-4"> | |
| <button id="thoughtsToggle" class="w-full flex justify-between items-center text-left font-semibold text-gray-700 hover:text-blue-600"> | |
| <span>Processus de réflexion</span> | |
| <svg class="w-5 h-5 transform transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/> | |
| </svg> | |
| </button> | |
| <div id="thoughtsBox" class="thought-box mt-4"> | |
| <div id="thoughtsContent" class="prose max-w-none"></div> | |
| </div> | |
| </div> | |
| <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6"> | |
| <h3 class="font-bold text-xl mb-4 text-gray-800">Solution</h3> | |
| <div id="answerContent" class="prose max-w-none"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const form = document.getElementById('problemForm'); | |
| const imageInput = document.getElementById('imageInput'); | |
| const loader = document.getElementById('loader'); | |
| const solution = document.getElementById('solution'); | |
| const thoughtsContent = document.getElementById('thoughtsContent'); | |
| const answerContent = document.getElementById('answerContent'); | |
| const thoughtsToggle = document.getElementById('thoughtsToggle'); | |
| const thoughtsBox = document.getElementById('thoughtsBox'); | |
| // Toggle thoughts | |
| thoughtsToggle.addEventListener('click', () => { | |
| thoughtsBox.classList.toggle('open'); | |
| thoughtsToggle.querySelector('svg').classList.toggle('rotate-180'); | |
| }); | |
| form.addEventListener('submit', async (event) => { | |
| event.preventDefault(); | |
| const file = imageInput.files[0]; | |
| if (!file) { | |
| alert('Veuillez sélectionner une image.'); | |
| return; | |
| } | |
| // Show loader | |
| loader.classList.remove('hidden'); | |
| solution.classList.add('hidden'); | |
| const formData = new FormData(); | |
| formData.append('image', file); | |
| try { | |
| const response = await fetch('/solve', { | |
| method: 'POST', | |
| body: formData, | |
| }); | |
| const data = await response.json(); | |
| if (response.ok) { | |
| thoughtsContent.innerHTML = data.thoughts; | |
| answerContent.innerHTML = data.answer; | |
| // Refresh MathJax | |
| if (window.MathJax) { | |
| MathJax.Hub.Queue(["Typeset", MathJax.Hub]); | |
| } | |
| loader.classList.add('hidden'); | |
| solution.classList.remove('hidden'); | |
| } else { | |
| throw new Error(data.error || 'Une erreur est survenue'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| alert(error.message); | |
| loader.classList.add('hidden'); | |
| } | |
| }); | |
| // File input visualization | |
| imageInput.addEventListener('change', function() { | |
| const fileName = this.files[0]?.name; | |
| if (fileName) { | |
| this.parentElement.querySelector('.text-gray-600').textContent = fileName; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |