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>Résolution de Problèmes Mathématiques</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| .dropzone { | |
| border: 2px dashed #4F46E5; | |
| transition: all 0.3s ease; | |
| } | |
| .dropzone:hover { | |
| border-color: #312E81; | |
| background-color: rgba(79, 70, 229, 0.1); | |
| } | |
| .loading { | |
| display: none; | |
| } | |
| .loading.active { | |
| display: flex; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gradient-to-br from-blue-50 to-white"> | |
| <div class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- En-tête --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-blue-800 mb-4">Résolution de Problèmes Mathématiques</h1> | |
| <p class="text-gray-600 text-lg">Soumettez une image de votre problème mathématique pour obtenir une solution détaillée</p> | |
| </header> | |
| <!-- Zone de dépôt d'image --> | |
| <div class="mb-8"> | |
| <form id="uploadForm" class="space-y-4"> | |
| <div id="dropzone" class="dropzone rounded-lg p-8 text-center cursor-pointer"> | |
| <input type="file" id="fileInput" class="hidden" accept="image/*"> | |
| <div class="flex flex-col items-center space-y-4"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-600"></i> | |
| <div class="text-lg text-gray-700"> | |
| Glissez votre image ici ou <span class="text-blue-600 font-semibold">cliquez pour sélectionner</span> | |
| </div> | |
| <p class="text-sm text-gray-500">Formats acceptés: PNG, JPG, JPEG</p> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full md:w-auto px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-paper-plane"></i> | |
| <span>Analyser l'image</span> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Indicateur de chargement --> | |
| <div id="loading" class="loading flex-col items-center justify-center space-y-4 my-8"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div> | |
| <p class="text-gray-700">Analyse en cours...</p> | |
| </div> | |
| <!-- Zone de réponse --> | |
| <div id="response" class="hidden"> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 class="text-2xl font-semibold text-blue-800 mb-4">Solution</h2> | |
| <div id="latexContent" class="prose max-w-none"> | |
| <!-- Le contenu LaTeX sera inséré ici --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const dropzone = document.getElementById('dropzone'); | |
| const fileInput = document.getElementById('fileInput'); | |
| const uploadForm = document.getElementById('uploadForm'); | |
| const loading = document.getElementById('loading'); | |
| const response = document.getElementById('response'); | |
| const latexContent = document.getElementById('latexContent'); | |
| // Gestion du drag & drop | |
| dropzone.addEventListener('click', () => fileInput.click()); | |
| dropzone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.add('bg-blue-50'); | |
| }); | |
| dropzone.addEventListener('dragleave', () => { | |
| dropzone.classList.remove('bg-blue-50'); | |
| }); | |
| dropzone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| dropzone.classList.remove('bg-blue-50'); | |
| if (e.dataTransfer.files.length) { | |
| fileInput.files = e.dataTransfer.files; | |
| const event = new Event('change'); | |
| fileInput.dispatchEvent(event); | |
| } | |
| }); | |
| // Gestion du formulaire | |
| uploadForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| const formData = new FormData(); | |
| formData.append('image', fileInput.files[0]); | |
| try { | |
| loading.classList.add('active'); | |
| response.classList.add('hidden'); | |
| const res = await fetch('/upload', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await res.json(); | |
| if (data.error) { | |
| throw new Error(data.error); | |
| } | |
| latexContent.innerHTML = data.result; | |
| response.classList.remove('hidden'); | |
| // Rafraîchir le rendu LaTeX | |
| if (window.MathJax) { | |
| MathJax.Hub.Queue(["Typeset", MathJax.Hub, latexContent]); | |
| } | |
| } catch (error) { | |
| alert('Erreur: ' + error.message); | |
| } finally { | |
| loading.classList.remove('active'); | |
| } | |
| }); | |
| // Aperçu de l'image sélectionnée | |
| fileInput.addEventListener('change', function() { | |
| if (this.files && this.files[0]) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const preview = document.createElement('img'); | |
| preview.src = e.target.result; | |
| preview.classList.add('max-h-48', 'mx-auto', 'mt-4', 'rounded-lg'); | |
| // Supprimer l'aperçu précédent s'il existe | |
| const oldPreview = dropzone.querySelector('img'); | |
| if (oldPreview) { | |
| oldPreview.remove(); | |
| } | |
| dropzone.appendChild(preview); | |
| } | |
| reader.readAsDataURL(this.files[0]); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |