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 ici) ... */ | |
| </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'); | |
| document.getElementById('result').innerHTML = ''; | |
| const formData = new FormData(); | |
| formData.append('image', file); | |
| // Envoyer l'image avec fetch | |
| const response = await fetch('/generate', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await response.json(); | |
| if (data.error) { | |
| console.error('Erreur:', data.error); | |
| document.getElementById('loading').classList.add('hidden'); | |
| document.getElementById('result').innerHTML = data.error; | |
| return; | |
| } | |
| // Se connecter à la route de streaming avec EventSource | |
| const eventSource = new EventSource(`/stream/${data.request_id}`); | |
| let completeResponse = ''; | |
| eventSource.onmessage = function (event) { | |
| // Hide loading | |
| document.getElementById('loading').classList.add('hidden'); | |
| // Show result | |
| document.getElementById('result-container').classList.remove('hidden'); | |
| if (event.data.startsWith('Error:')) { | |
| console.error('Erreur:', event.data); | |
| document.getElementById('result').innerHTML = event.data; | |
| eventSource.close(); | |
| return; | |
| } | |
| completeResponse += event.data; | |
| document.getElementById('result').innerHTML = marked.parse(completeResponse); | |
| // 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'); | |
| }); | |
| }; | |
| eventSource.onerror = function (err) { | |
| console.error('EventSource failed:', err); | |
| document.getElementById('loading').classList.add('hidden'); | |
| document.getElementById('result').innerHTML = "Une erreur est survenue lors du traitement de l'image."; | |
| eventSource.close(); | |
| }; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |