|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Mariam - 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> |
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet"> |
|
<style> |
|
|
|
|
|
|
|
|
|
|
|
:root { |
|
--primary-color: #3b82f6; |
|
--primary-color-hover: #2563eb; |
|
--error-color: #ef4444; |
|
--error-color-hover: #dc2626; |
|
--gray-light: #f5f5f5; |
|
--gray-medium: #e5e7eb; |
|
--gray-dark: #d1d5db; |
|
} |
|
body { |
|
font-family: 'Poppins', sans-serif; |
|
} |
|
.dropzone { |
|
border: 3px dashed var(--primary-color); |
|
transition: all 0.3s ease; |
|
border-radius: 10px; |
|
padding: 3rem; |
|
background-color: var(--gray-light); |
|
} |
|
.dropzone:hover { |
|
border-color: var(--primary-color-hover); |
|
background-color: rgba(59, 130, 246, 0.1); |
|
} |
|
.dropzone.dragover { |
|
background-color: rgba(59, 130, 246, 0.2); |
|
} |
|
.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; |
|
} |
|
|
|
@media (max-width: 768px) { |
|
.math-content { |
|
font-size: 1em; |
|
} |
|
} |
|
.saved-response-header { |
|
cursor: pointer; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
padding: 0.75rem 1rem; |
|
background-color: var(--gray-medium); |
|
border-bottom: 1px solid var(--gray-dark); |
|
border-radius: 8px; |
|
font-weight: 500; |
|
} |
|
.saved-response-content { |
|
padding: 1rem; |
|
display: none; |
|
border-radius: 8px; |
|
} |
|
.saved-response-item.open .saved-response-content { |
|
display: block; |
|
} |
|
.btn { |
|
padding: 0.75rem 1.5rem; |
|
border-radius: 0.5rem; |
|
font-weight: 600; |
|
transition: all 0.3s ease; |
|
} |
|
.btn-primary { |
|
background-color: var(--primary-color); |
|
color: #fff; |
|
} |
|
.btn-primary:hover { |
|
background-color: var(--primary-color-hover); |
|
} |
|
.btn-danger { |
|
background-color: var(--error-color); |
|
color: #fff; |
|
} |
|
.btn-danger:hover { |
|
background-color: var(--error-color-hover); |
|
} |
|
.select { |
|
border: 1px solid var(--gray-dark); |
|
border-radius: 0.5rem; |
|
padding: 0.75rem 1rem; |
|
appearance: none; |
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); |
|
background-repeat: no-repeat; |
|
background-position: right 0.75rem center; |
|
background-size: 1em; |
|
padding-right: 2.5rem; |
|
} |
|
.select:focus { |
|
outline: none; |
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5); |
|
} |
|
</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="bg-gray-100"> |
|
<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-600 mb-4"> |
|
<span class="bg-gradient-to-r from-blue-500 to-blue-700 text-transparent bg-clip-text">Mariam</span> |
|
- Résolution de Problèmes Mathématiques |
|
</h1> |
|
<p class="text-gray-500 text-lg">Votre assistant intelligent pour des solutions mathématiques détaillées</p> |
|
</header> |
|
<div class="mb-8"> |
|
<form id="uploadForm" class="space-y-4"> |
|
<div id="dropzone" |
|
class="dropzone rounded-lg text-center cursor-pointer shadow-md hover:shadow-lg 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-6xl text-blue-500"></i> |
|
<div class="text-lg text-gray-600"> |
|
Glissez votre image ici ou <span class="text-blue-500 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="space-y-4"> |
|
<label for="customInstruction" class="block text-gray-600 font-medium">Instruction |
|
personnalisée (optionnel)</label> |
|
<input type="text" id="customInstruction" name="custom_instruction" |
|
class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" |
|
placeholder="Exemple : Résoudre en utilisant le théorème de Pythagore"> |
|
</div> |
|
|
|
<div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-4"> |
|
<select id="modelChoice" name="model_choice" |
|
class="select w-full md:w-auto"> |
|
<option value="mariam's">Mariam's (Ultra performant)</option> |
|
<option value="qwen2">Qwen2 (lent et performant)</option> |
|
</select> |
|
<button type="submit" |
|
class="btn btn-primary w-full md:w-auto 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-16 w-16 border-t-4 border-b-4 border-blue-500"></div> |
|
<p class="text-gray-600 font-medium text-lg">Analyse en cours...</p> |
|
</div> |
|
|
|
<div id="response" class="hidden"> |
|
<div class="bg-white rounded-xl shadow-lg p-6 mb-8"> |
|
<h2 id="modelUsed" class="text-2xl font-semibold text-blue-600 mb-4">Solution (Modèle: <span |
|
id="modelName"></span>)</h2> |
|
<div id="latexContent" class="prose max-w-none math-content"></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-600">Réponses Sauvegardées</h2> |
|
<button id="clearSavedResponses" |
|
class="btn btn-danger"> |
|
<i class="fas fa-trash-alt"></i> Effacer Tout |
|
</button> |
|
</div> |
|
<div id="savedResponses" class="space-y-4"></div> |
|
</div> |
|
|
|
<div id="errorMessage" |
|
class="hidden bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg 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', () => { |
|
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'); |
|
const customInstructionInput = document.getElementById('customInstruction'); |
|
|
|
let mathJaxReady = false; |
|
window.MathJax.startup.promise.then(() => { |
|
mathJaxReady = true; |
|
}); |
|
|
|
marked.setOptions({ |
|
breaks: true, |
|
gfm: true, |
|
pedantic: false, |
|
smartLists: true |
|
}); |
|
|
|
const showError = (message) => { |
|
errorText.textContent = message; |
|
errorMessage.classList.remove('hidden'); |
|
setTimeout(() => { |
|
errorMessage.classList.add('hidden'); |
|
}, 5000); |
|
}; |
|
|
|
const renderMathContent = async (text) => { |
|
try { |
|
if (!mathJaxReady) { |
|
await window.MathJax.startup.promise; |
|
} |
|
latexContent.innerHTML = ''; |
|
const htmlContent = marked.parse(text); |
|
latexContent.innerHTML = htmlContent; |
|
await MathJax.typesetPromise([latexContent]); |
|
response.classList.remove('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> |
|
`; |
|
} |
|
}; |
|
|
|
const handleDragOver = (e) => { |
|
e.preventDefault(); |
|
e.stopPropagation(); |
|
dropzone.classList.add('dragover'); |
|
}; |
|
|
|
const handleDragLeave = (e) => { |
|
e.preventDefault(); |
|
e.stopPropagation(); |
|
dropzone.classList.remove('dragover'); |
|
}; |
|
|
|
const handleDrop = (e) => { |
|
e.preventDefault(); |
|
e.stopPropagation(); |
|
dropzone.classList.remove('dragover'); |
|
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'); |
|
} |
|
}; |
|
|
|
const handleFileSelect = (file) => { |
|
if (file && file.type.startsWith('image/')) { |
|
const reader = new FileReader(); |
|
reader.onload = (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]); |
|
} |
|
}); |
|
|
|
const saveResponse = async (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'); |
|
} |
|
}; |
|
|
|
const clearSavedResponses = async () => { |
|
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'); |
|
} |
|
} |
|
}); |
|
}; |
|
|
|
const loadSavedResponses = async () => { |
|
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-gray-100 rounded-lg shadow-md overflow-hidden'; |
|
|
|
const header = document.createElement('div'); |
|
header.className = 'saved-response-header'; |
|
header.innerHTML = ` |
|
<span class="text-blue-600 font-medium">Réponse du ${new Date(parseInt(timestamp)).toLocaleString()} (Modèle: ${model})</span> |
|
<div> |
|
<button class="toggle-content px-2 py-1 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-2 py-1 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'; |
|
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]); |
|
}); |
|
|
|
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]); |
|
} |
|
} 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); |
|
formData.append('custom_instruction', customInstructionInput.value); |
|
|
|
try { |
|
submitButton.disabled = true; |
|
loading.classList.add('active'); |
|
response.classList.add('hidden'); |
|
errorMessage.classList.add('hidden'); |
|
|
|
const res = await fetch('/upload', { |
|
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); |
|
|
|
|
|
if (data.image_paths) { |
|
const imageContainer = document.createElement('div'); |
|
imageContainer.className = 'mt-4'; |
|
data.image_paths.forEach(imagePath => { |
|
const img = document.createElement('img'); |
|
img.src = `/temp/${imagePath.split('/').pop()}`; |
|
img.className = 'max-w-full h-auto mt-2 rounded-lg'; |
|
imageContainer.appendChild(img); |
|
}); |
|
latexContent.appendChild(imageContainer); |
|
} |
|
|
|
} 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> |
