Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mariam AI - Résolution d'exercices Physique-Chimie</title> | |
| <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script> | |
| <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| /* ... (votre CSS existant) ... */ | |
| </style> | |
| <script> | |
| // ... (votre configuration de marked et MathJax) ... | |
| </script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Navbar --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-atom text-blue-600 text-2xl mr-2"></i> | |
| <span class="font-bold text-xl text-gray-800">Mariam AI</span> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> | |
| <div class="bg-white rounded-lg shadow-xl p-6 md:p-8"> | |
| <div class="text-center mb-8"> | |
| <h1 class="text-3xl font-bold text-gray-800 mb-2">Assistant Physique-Chimie</h1> | |
| <p class="text-gray-600">Uploadez une photo de votre exercice pour obtenir une résolution détaillée</p> | |
| </div> | |
| <!-- Upload Section --> | |
| <form id="upload-form" enctype="multipart/form-data"> | |
| <div class="flex flex-col items-center justify-center w-full"> | |
| <label for="image-input" | |
| class="flex flex-col items-center justify-center w-full h-64 border-2 border-blue-300 border-dashed rounded-lg cursor-pointer bg-gray-50 hover:bg-gray-100 transition duration-300"> | |
| <div class="flex flex-col items-center justify-center pt-5 pb-6"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i> | |
| <p class="mb-2 text-sm text-gray-500"><span class="font-semibold">Cliquez pour | |
| upload</span> ou glissez-déposez</p> | |
| <p class="text-xs text-gray-500">PNG, JPG ou JPEG</p> | |
| </div> | |
| <input id="image-input" type="file" name="image" class="hidden" accept="image/*" /> | |
| </label> | |
| <button type="submit" id="submit-button" | |
| class="mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg hidden"> | |
| Soumettre | |
| </button> | |
| </div> | |
| </form> | |
| <!-- Preview Section --> | |
| <div class="mt-8"> | |
| <img id="image-preview" class="max-w-full h-auto mx-auto rounded-lg shadow-md hidden" alt="Preview"> | |
| </div> | |
| <!-- Loading Animation --> | |
| <div id="loading" class="hidden flex justify-center items-center my-8"> | |
| <span class="loader"></span> | |
| <span class="ml-3 text-gray-600">Analyse en cours...</span> | |
| </div> | |
| <!-- Result Section --> | |
| <div id="result-container" class="hidden mt-8"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Résolution détaillée :</h2> | |
| <div class="flex items-center mb-4"> | |
| <button id="copy-button" | |
| class="bg-gray-200 hover:bg-gray-300 text-gray-800 font-bold py-2 px-4 rounded-lg"> | |
| <i class="fas fa-copy mr-2"></i>Copier | |
| </button> | |
| <button id="save-button" | |
| class="ml-4 bg-green-200 hover:bg-green-300 text-green-800 font-bold py-2 px-4 rounded-lg"> | |
| <i class="fas fa-save mr-2"></i>Sauvegarder | |
| </button> | |
| </div> | |
| <div id="result" class="bg-gray-50 rounded-lg p-6 prose max-w-none math-content math-hidden"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const form = document.getElementById('upload-form'); | |
| const imageInput = document.getElementById('image-input'); | |
| const submitButton = document.getElementById('submit-button'); | |
| const imagePreview = document.getElementById('image-preview'); | |
| const loading = document.getElementById('loading'); | |
| const resultContainer = document.getElementById('result-container'); | |
| const result = document.getElementById('result'); | |
| const copyButton = document.getElementById('copy-button'); | |
| const saveButton = document.getElementById('save-button'); | |
| let generatedResult = ''; | |
| imageInput.addEventListener('change', function (e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| // Show preview | |
| const reader = new FileReader(); | |
| reader.onload = function (e) { | |
| imagePreview.src = e.target.result; | |
| imagePreview.classList.remove('hidden'); | |
| submitButton.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| } else { | |
| imagePreview.src = ""; | |
| imagePreview.classList.add('hidden'); | |
| submitButton.classList.add('hidden'); | |
| } | |
| }); | |
| form.addEventListener('submit', async function (e) { | |
| e.preventDefault(); | |
| // Show loading | |
| loading.classList.remove('hidden'); | |
| resultContainer.classList.add('hidden'); | |
| result.classList.add('math-hidden'); | |
| submitButton.classList.add('hidden'); | |
| const formData = new FormData(form); | |
| try { | |
| const response = await fetch('/generate', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| generatedResult = data.result; | |
| // Hide loading | |
| loading.classList.add('hidden'); | |
| // Show result | |
| resultContainer.classList.remove('hidden'); | |
| result.innerHTML = marked.parse(generatedResult); | |
| // Rendre les maths avec MathJax | |
| MathJax.typesetPromise([result]) | |
| .then(() => { | |
| result.classList.remove('math-hidden'); | |
| }) | |
| .catch((err) => { | |
| console.error('Erreur MathJax:', err); | |
| result.innerHTML = "Erreur lors du rendu des mathématiques."; | |
| result.classList.remove('math-hidden'); | |
| }); | |
| } catch (error) { | |
| console.error('Erreur:', error); | |
| loading.classList.add('hidden'); | |
| alert('Une erreur est survenue lors du traitement de l\'image.'); | |
| } | |
| }); | |
| // Copier la réponse | |
| copyButton.addEventListener('click', function () { | |
| navigator.clipboard.writeText(generatedResult) | |
| .then(() => { | |
| // Message de confirmation (optionnel) | |
| alert('Réponse copiée dans le presse-papiers!'); | |
| }) | |
| .catch(err => { | |
| console.error('Erreur lors de la copie:', err); | |
| }); | |
| }); | |
| // Sauvegarder la réponse dans le localStorage | |
| saveButton.addEventListener('click', function () { | |
| const timestamp = new Date().toLocaleString(); | |
| const savedData = { | |
| timestamp: timestamp, | |
| image: imagePreview.src, | |
| result: generatedResult | |
| }; | |
| localStorage.setItem('savedResult-' + Date.now(), JSON.stringify(savedData)); | |
| // Message de confirmation (optionnel) | |
| alert('Réponse sauvegardée!'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |