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> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .loader { | |
| width: 48px; | |
| height: 48px; | |
| border: 5px solid #FFF; | |
| border-bottom-color: #3B82F6; | |
| border-radius: 50%; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| animation: rotation 1s linear infinite; | |
| } | |
| @keyframes rotation { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| .math-content { | |
| font-size: 1.1em; | |
| line-height: 1.6; | |
| overflow-x: auto; | |
| } | |
| .math-content p { | |
| margin-bottom: 1rem; | |
| } | |
| .math-content .MathJax { | |
| overflow-x: auto; | |
| overflow-y: hidden; | |
| padding: 0.5rem 0; | |
| } | |
| @media (max-width: 640px) { | |
| .math-content .MathJax { | |
| font-size: 0.9em; | |
| } | |
| } | |
| .math-hidden { | |
| visibility: hidden; | |
| } | |
| .saved-result-item img { | |
| max-width: 200px; /* Ajustez la taille maximale de l'image selon vos besoins */ | |
| max-height: 150px; | |
| width: auto; | |
| height: auto; | |
| } | |
| </style> | |
| <script> | |
| // Configuration de marked | |
| marked.setOptions({ | |
| breaks: true, | |
| gfm: true, | |
| headerIds: false | |
| }); | |
| // Configuration de MathJax | |
| MathJax = { | |
| tex: { | |
| inlineMath: [['$', '$'], ['\\(', '\\)']], | |
| displayMath: [['$$', '$$'], ['\\[', '\\]']], | |
| processEscapes: true, | |
| macros: { | |
| R: "{\\mathbb{R}}", | |
| N: "{\\mathbb{N}}", | |
| Z: "{\\mathbb{Z}}", | |
| vecv: ["\\begin{pmatrix}#1\\\\#2\\\\#3\\end{pmatrix}", 3] | |
| } | |
| }, | |
| svg: { | |
| fontCache: 'global' | |
| }, | |
| options: { | |
| renderActions: { | |
| addMenu: [], | |
| checkLoading: [150, (doc) => { | |
| document.querySelectorAll('.math-content').forEach(el => { | |
| el.classList.remove('math-hidden'); | |
| }); | |
| }] | |
| } | |
| } | |
| }; | |
| </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> | |
| <!-- Section pour afficher les résultats sauvegardés --> | |
| <div id="saved-results" class="mt-8"> | |
| <h2 class="text-xl font-semibold text-gray-800 mb-4">Résolutions Sauvegardées :</h2> | |
| <div id="saved-results-list" class="space-y-4"> | |
| </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 = ''; | |
| // Fonction pour afficher les résultats sauvegardés | |
| function displaySavedResults() { | |
| const savedResultsList = document.getElementById('saved-results-list'); | |
| savedResultsList.innerHTML = ''; | |
| for (let i = 0; i < localStorage.length; i++) { | |
| const key = localStorage.key(i); | |
| if (key.startsWith('savedResult-')) { | |
| const savedData = JSON.parse(localStorage.getItem(key)); | |
| const resultItem = document.createElement('div'); | |
| resultItem.classList.add('saved-result-item', 'bg-gray-100', 'p-4', 'rounded-lg', 'shadow'); | |
| resultItem.innerHTML = ` | |
| <p class="text-sm text-gray-600 mb-2">Sauvegardé le : ${savedData.timestamp}</p> | |
| <img src="${savedData.image}" alt="Image sauvegardée" class="mb-2"> | |
| <div class="math-content">${marked.parse(savedData.result)}</div> | |
| `; | |
| savedResultsList.appendChild(resultItem); | |
| } | |
| } | |
| // Re-rendu MathJax pour les éléments chargés dynamiquement | |
| MathJax.typesetPromise().catch((err) => { | |
| console.error('Erreur MathJax:', err); | |
| }); | |
| } | |
| // Appeler displaySavedResults au chargement de la page | |
| window.addEventListener('DOMContentLoaded', displaySavedResults); | |
| 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 | |
| setTimeout(() => { | |
| 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'); | |
| }); | |
| }, 0); | |
| } 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 file = imageInput.files[0]; | |
| if (file) { | |
| const reader = new FileReader(); | |
| reader.onload = function (e) { | |
| const savedData = { | |
| timestamp: timestamp, | |
| image: e.target.result, // On sauvegarde la data URL de l'image | |
| result: generatedResult | |
| }; | |
| localStorage.setItem('savedResult-' + Date.now(), JSON.stringify(savedData)); | |
| alert('Réponse sauvegardée!'); | |
| displaySavedResults(); // Mettre à jour l'affichage des résultats sauvegardés | |
| }; | |
| reader.readAsDataURL(file); // On lit l'image comme une data URL | |
| } else { | |
| alert('Aucune image sélectionnée.'); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |