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; | |
| } | |
| </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> | |
| </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 id="result" class="bg-gray-50 rounded-lg p-6 prose max-w-none math-content math-hidden"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.getElementById('image-input').addEventListener('change', async function (e) { | |
| const file = e.target.files[0]; | |
| if (file) { | |
| // Show preview | |
| const preview = document.getElementById('image-preview'); | |
| const reader = new FileReader(); | |
| reader.onload = function (e) { | |
| preview.src = e.target.result; | |
| preview.classList.remove('hidden'); | |
| }; | |
| reader.readAsDataURL(file); | |
| // Show loading | |
| document.getElementById('loading').classList.remove('hidden'); | |
| document.getElementById('result-container').classList.add('hidden'); | |
| document.getElementById('result').classList.add('math-hidden'); | |
| try { | |
| const formData = new FormData(); | |
| formData.append('image', file); | |
| const response = await fetch('/generate', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| // Hide loading | |
| document.getElementById('loading').classList.add('hidden'); | |
| // Show result | |
| document.getElementById('result-container').classList.remove('hidden'); | |
| // Utiliser marked pour convertir le markdown en HTML | |
| document.getElementById('result').innerHTML = marked.parse(data.result); | |
| // Rendre les maths avec MathJax | |
| MathJax.typesetPromise([document.getElementById('result')]) | |
| .then(() => { | |
| document.getElementById('result').classList.remove('math-hidden'); | |
| }) | |
| .catch((err) => { | |
| console.error('Erreur MathJax:', err); | |
| document.getElementById('result').innerHTML = "Erreur lors du rendu des mathématiques."; | |
| document.getElementById('result').classList.remove('math-hidden'); | |
| }); | |
| } catch (error) { | |
| console.error('Erreur:', error); | |
| document.getElementById('loading').classList.add('hidden'); | |
| alert('Une erreur est survenue lors du traitement de l\'image.'); | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |