Spaces:
Sleeping
Sleeping
| <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 defer src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <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; } | |
| .math-content { font-size: 1.1em; line-height: 1.6; overflow-x: auto; } | |
| .math-content p { margin-bottom: 1rem; white-space: pre-wrap; } | |
| .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-response-header { cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background-color: #f3f4f6; border-bottom: 1px solid #e5e7eb; } | |
| .saved-response-content { padding: 1rem; display: none; } | |
| .saved-response-item.open .saved-response-content { display: block; } | |
| </style> | |
| <script> | |
| window.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' }, | |
| startup: { pageReady: () => { return Promise.resolve(); } }, | |
| options: { renderActions: { addMenu: [], checkLoading: [150, () => { document.querySelectorAll('.math-content').forEach(el => { el.classList.remove('math-hidden'); }); }] } } | |
| }; | |
| </script> | |
| <script> | |
| function loadMathJax() { | |
| return new Promise((resolve, reject) => { | |
| const script = document.createElement('script'); | |
| script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'; | |
| script.async = true; | |
| script.id = 'MathJax-script'; | |
| script.onload = resolve; | |
| script.onerror = reject; | |
| document.head.appendChild(script); | |
| }); | |
| } | |
| loadMathJax().catch(console.error); | |
| </script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/localforage.min.js"></script> | |
| </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"> | |
| <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> | |
| <div class="mb-8"> | |
| <form id="uploadForm" class="space-y-4"> | |
| <div id="dropzone" | |
| class="dropzone rounded-lg p-8 text-center cursor-pointer bg-white shadow-sm hover:shadow-md transition-all"> | |
| <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> | |
| <div class="flex justify-center items-center space-x-4"> | |
| <select id="modelChoice" name="model_choice" class="rounded-md border-gray-300 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"> | |
| <option value="mariam's">Mariam's(Rapide et performant)</option> | |
| <option value="qwen2">Qwen2(lent mais 2 +performant)</option> | |
| </select> | |
| <button type="submit" | |
| class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 flex items-center space-x-2 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| <i class="fas fa-paper-plane"></i> | |
| <span>Analyser l'image</span> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <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-4 border-blue-200 border-t-blue-600"></div> | |
| <p class="text-gray-700 font-medium">Analyse en cours...</p> | |
| </div> | |
| <div id="response" class="hidden"> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <h2 id="modelUsed" class="text-2xl font-semibold text-blue-800 mb-4">Solution (Modèle: <span id="modelName"></span>)</h2> | |
| <div id="latexContent" class="prose max-w-none math-content math-hidden"></div> | |
| </div> | |
| </div> | |
| <div id="savedResponsesSection" class="mt-8"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-2xl font-semibold text-blue-800">Réponses Sauvegardées</h2> | |
| <button id="clearSavedResponses" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors duration-200"> | |
| <i class="fas fa-trash-alt"></i> Effacer Tout | |
| </button> | |
| </div> | |
| <div id="savedResponses" class="space-y-2"></div> | |
| </div> | |
| <div id="errorMessage" | |
| class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative my-4" role="alert"> | |
| <strong class="font-bold">Erreur!</strong> | |
| <span class="block sm:inline" id="errorText"></span> | |
| </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'); | |
| const errorMessage = document.getElementById('errorMessage'); | |
| const errorText = document.getElementById('errorText'); | |
| const submitButton = uploadForm.querySelector('button[type="submit"]'); | |
| const savedResponsesContainer = document.getElementById('savedResponses'); | |
| const clearSavedResponsesButton = document.getElementById('clearSavedResponses'); | |
| const modelChoiceSelect = document.getElementById('modelChoice'); | |
| const modelNameSpan = document.getElementById('modelName'); | |
| let mathJaxReady = false; | |
| window.MathJax.startup.promise.then(() => { | |
| mathJaxReady = true; | |
| }); | |
| marked.setOptions({ breaks: true, gfm: true, pedantic: false, smartLists: true }); | |
| function showError(message) { | |
| errorText.textContent = message; | |
| errorMessage.classList.remove('hidden'); | |
| setTimeout(() => { errorMessage.classList.add('hidden'); }, 5000); | |
| } | |
| async function renderMathContent(text) { | |
| try { | |
| if (!mathJaxReady) { | |
| await window.MathJax.startup.promise; | |
| } | |
| latexContent.innerHTML = ''; | |
| latexContent.classList.add('math-hidden'); | |
| const htmlContent = marked.parse(text); | |
| latexContent.innerHTML = htmlContent; | |
| await MathJax.typesetPromise([latexContent]); | |
| response.classList.remove('hidden'); | |
| latexContent.classList.remove('math-hidden'); | |
| } catch (error) { | |
| console.error('Erreur lors du rendu:', error); | |
| showError('Erreur lors du rendu de la formule mathématique'); | |
| latexContent.innerHTML = ` | |
| <div class="text-red-600 mb-4">Une erreur s'est produite lors du rendu. Voici le texte brut :</div> | |
| <pre class="bg-gray-100 p-4 rounded-lg overflow-x-auto">${text}</pre> | |
| `; | |
| latexContent.classList.remove('math-hidden'); | |
| } | |
| } | |
| function handleDragOver(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.add('bg-blue-50'); } | |
| function handleDragLeave(e) { e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('bg-blue-50'); } | |
| function handleDrop(e) { | |
| e.preventDefault(); e.stopPropagation(); dropzone.classList.remove('bg-blue-50'); | |
| const files = e.dataTransfer.files; | |
| if (files.length > 0 && files[0].type.startsWith('image/')) { | |
| fileInput.files = files; | |
| handleFileSelect(files[0]); | |
| } else { | |
| showError('Veuillez déposer une image valide'); | |
| } | |
| } | |
| function handleFileSelect(file) { | |
| if (file && file.type.startsWith('image/')) { | |
| 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'); | |
| const oldPreview = dropzone.querySelector('img'); | |
| if (oldPreview) oldPreview.remove(); | |
| dropzone.appendChild(preview); | |
| submitButton.disabled = false; | |
| }; | |
| reader.readAsDataURL(file); | |
| } else { | |
| showError('Veuillez sélectionner une image valide'); | |
| } | |
| } | |
| dropzone.addEventListener('dragover', handleDragOver); | |
| dropzone.addEventListener('dragleave', handleDragLeave); | |
| dropzone.addEventListener('drop', handleDrop); | |
| dropzone.addEventListener('click', () => fileInput.click()); | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files.length > 0) { | |
| handleFileSelect(e.target.files[0]); | |
| } | |
| }); | |
| async function saveResponse(response, model) { | |
| const timestamp = new Date().getTime(); | |
| const key = `response-${timestamp}-${model}`; | |
| try { | |
| await localforage.setItem(key, response); | |
| loadSavedResponses(); | |
| } catch (error) { | |
| console.error('Erreur lors de la sauvegarde:', error); | |
| showError('Erreur lors de la sauvegarde de la réponse en local'); | |
| } | |
| } | |
| async function clearSavedResponses() { | |
| Swal.fire({ | |
| title: 'Êtes-vous sûr?', | |
| text: "Vous ne pourrez pas revenir en arrière!", | |
| icon: 'warning', | |
| showCancelButton: true, | |
| confirmButtonColor: '#d33', | |
| cancelButtonColor: '#3085d6', | |
| confirmButtonText: 'Oui, effacer!', | |
| cancelButtonText: 'Annuler' | |
| }).then(async (result) => { | |
| if (result.isConfirmed) { | |
| try { | |
| await localforage.clear(); | |
| console.log('Réponses sauvegardées effacées'); | |
| loadSavedResponses(); | |
| Swal.fire( | |
| 'Effacé!', | |
| 'Les réponses ont été supprimées.', | |
| 'success' | |
| ); | |
| } catch (error) { | |
| console.error('Erreur lors de l\'effacement des réponses sauvegardées:', error); | |
| showError('Erreur lors de l\'effacement des réponses sauvegardées'); | |
| Swal.fire( | |
| 'Erreur!', | |
| 'Une erreur est survenue lors de la suppression.', | |
| 'error' | |
| ); | |
| } | |
| } | |
| }); | |
| } | |
| async function loadSavedResponses() { | |
| try { | |
| savedResponsesContainer.innerHTML = ''; | |
| const keys = await localforage.keys(); | |
| keys.sort((a, b) => parseInt(b.replace('response-', '').split('-')[0]) - parseInt(a.replace('response-', '').split('-')[0])); | |
| for (const key of keys) { | |
| const response = await localforage.getItem(key); | |
| const [ , timestamp, model ] = key.split('-'); | |
| const responseItem = document.createElement('div'); | |
| responseItem.className = 'saved-response-item bg-white rounded-lg shadow-md overflow-hidden'; | |
| const header = document.createElement('div'); | |
| header.className = 'saved-response-header'; | |
| header.innerHTML = ` | |
| <span class="text-blue-800 font-medium">Réponse du ${new Date(parseInt(timestamp)).toLocaleString()} (Modèle: ${model})</span> | |
| <div> | |
| <button class="toggle-content px-1 py-0.5 rounded-md text-xs bg-blue-500 hover:bg-blue-700 text-white mr-1"><i class="fas fa-chevron-down"></i></button> | |
| <button class="delete-response px-1 py-0.5 rounded-md text-xs bg-red-500 hover:bg-red-700 text-white"><i class="fas fa-trash-alt"></i></button> | |
| </div> | |
| `; | |
| responseItem.appendChild(header); | |
| const content = document.createElement('div'); | |
| content.className = 'saved-response-content math-content math-hidden'; | |
| content.innerHTML = marked.parse(response); | |
| responseItem.appendChild(content); | |
| savedResponsesContainer.appendChild(responseItem); | |
| header.querySelector('.toggle-content').addEventListener('click', () => { | |
| responseItem.classList.toggle('open'); | |
| header.querySelector('i').classList.toggle('fa-chevron-down'); | |
| header.querySelector('i').classList.toggle('fa-chevron-up'); | |
| MathJax.typesetPromise([content]); | |
| content.classList.remove('math-hidden'); | |
| }); | |
| header.querySelector('.delete-response').addEventListener('click', async () => { | |
| try { | |
| await localforage.removeItem(key); | |
| responseItem.remove(); | |
| } catch (error) { | |
| console.error('Erreur lors de la suppression de la réponse:', error); | |
| showError('Erreur lors de la suppression de la réponse'); | |
| } | |
| }); | |
| MathJax.typesetPromise([content]); | |
| content.classList.remove('math-hidden'); | |
| } | |
| } catch (error) { | |
| console.error('Erreur lors du chargement des réponses sauvegardées:', error); | |
| showError('Erreur lors du chargement des réponses sauvegardées'); | |
| } | |
| } | |
| uploadForm.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| if (!fileInput.files.length) { | |
| showError('Veuillez sélectionner une image'); | |
| return; | |
| } | |
| const formData = new FormData(); | |
| formData.append('image', fileInput.files[0]); | |
| formData.append('model_choice', modelChoiceSelect.value); | |
| try { | |
| submitButton.disabled = true; | |
| loading.classList.add('active'); | |
| response.classList.add('hidden'); | |
| errorMessage.classList.add('hidden'); | |
| const res = await fetch('/generate', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const data = await res.json(); | |
| if (data.error) { | |
| throw new Error(data.error); | |
| } | |
| await renderMathContent(data.result); | |
| modelNameSpan.textContent = data.model; | |
| saveResponse(data.result, data.model); | |
| } catch (error) { | |
| console.error('Erreur:', error); | |
| showError(error.message || 'Une erreur est survenue lors du traitement'); | |
| } finally { | |
| loading.classList.remove('active'); | |
| submitButton.disabled = false; | |
| } | |
| }); | |
| loadSavedResponses(); | |
| clearSavedResponsesButton.addEventListener('click', clearSavedResponses); | |
| }); | |
| </script> | |
| </body> | |
| </html> |