|
|
<!DOCTYPE html> |
|
|
<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> |
|
|
|
|
|
|
|
|
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> |
|
|
<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' |
|
|
}, |
|
|
options: { |
|
|
renderActions: { |
|
|
addMenu: [] |
|
|
} |
|
|
} |
|
|
}; |
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
|
|
|
|
|
<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; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</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"> |
|
|
<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 class="text-2xl font-semibold text-blue-800 mb-4">Solution</h2> |
|
|
<div id="latexContent" class="prose max-w-none math-content"> |
|
|
|
|
|
</div> |
|
|
</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"]'); |
|
|
|
|
|
|
|
|
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 { |
|
|
|
|
|
latexContent.innerHTML = ''; |
|
|
|
|
|
|
|
|
const htmlContent = marked.parse(text); |
|
|
latexContent.innerHTML = htmlContent; |
|
|
|
|
|
|
|
|
MathJax.typesetPromise([latexContent]).then(() => { |
|
|
response.classList.remove('hidden'); |
|
|
}).catch((err) => { |
|
|
console.error('Erreur MathJax:', err); |
|
|
showError('Erreur lors du rendu de la formule mathématique'); |
|
|
}); |
|
|
|
|
|
} 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> |
|
|
`; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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]); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
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]); |
|
|
|
|
|
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); |
|
|
|
|
|
} catch (error) { |
|
|
console.error('Erreur:', error); |
|
|
showError(error.message || 'Une erreur est survenue lors du traitement'); |
|
|
} finally { |
|
|
loading.classList.remove('active'); |
|
|
submitButton.disabled = false; |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
