|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Résolution de problème mathématique</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/plotly.js/2.24.2/plotly.min.js"></script> |
|
|
<style> |
|
|
.container { |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
.upload-form { |
|
|
border: 2px dashed #ccc; |
|
|
padding: 20px; |
|
|
text-align: center; |
|
|
margin-bottom: 20px; |
|
|
} |
|
|
#preview { |
|
|
max-width: 300px; |
|
|
margin: 10px auto; |
|
|
} |
|
|
.result { |
|
|
margin-top: 20px; |
|
|
padding: 20px; |
|
|
border: 1px solid #eee; |
|
|
} |
|
|
.loading { |
|
|
display: none; |
|
|
margin: 20px 0; |
|
|
} |
|
|
.error-message { |
|
|
color: red; |
|
|
margin-top: 10px; |
|
|
display: none; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Résolution de problème mathématique</h1> |
|
|
<div class="upload-form"> |
|
|
<form id="uploadForm" enctype="multipart/form-data"> |
|
|
<input type="file" id="imageInput" name="image" accept="image/*" onchange="previewImage(event)"> |
|
|
<br><br> |
|
|
<img id="preview" style="display: none;"> |
|
|
<br> |
|
|
<button type="submit">Analyser l'image</button> |
|
|
</form> |
|
|
<div id="loading" class="loading"> |
|
|
Analyse en cours... Cette opération peut prendre quelques instants. |
|
|
</div> |
|
|
<div id="errorMessage" class="error-message"></div> |
|
|
</div> |
|
|
<div id="result" class="result"></div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function previewImage(event) { |
|
|
const preview = document.getElementById('preview'); |
|
|
const file = event.target.files[0]; |
|
|
const reader = new FileReader(); |
|
|
|
|
|
reader.onload = function() { |
|
|
preview.src = reader.result; |
|
|
preview.style.display = 'block'; |
|
|
} |
|
|
|
|
|
if (file) { |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('uploadForm').addEventListener('submit', function(e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
const formData = new FormData(this); |
|
|
const loading = document.getElementById('loading'); |
|
|
const result = document.getElementById('result'); |
|
|
const errorMessage = document.getElementById('errorMessage'); |
|
|
|
|
|
|
|
|
loading.style.display = 'block'; |
|
|
errorMessage.style.display = 'none'; |
|
|
result.innerHTML = ''; |
|
|
|
|
|
fetch('/upload', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}) |
|
|
.then(response => response.json()) |
|
|
.then(data => { |
|
|
loading.style.display = 'none'; |
|
|
|
|
|
if (data.error) { |
|
|
errorMessage.textContent = data.error; |
|
|
errorMessage.style.display = 'block'; |
|
|
} else { |
|
|
result.innerHTML = data.result; |
|
|
|
|
|
if (window.MathJax) { |
|
|
MathJax.Hub.Queue(["Typeset", MathJax.Hub, result]); |
|
|
} |
|
|
} |
|
|
}) |
|
|
.catch(error => { |
|
|
loading.style.display = 'none'; |
|
|
errorMessage.textContent = "Une erreur s'est produite lors de l'analyse."; |
|
|
errorMessage.style.display = 'block'; |
|
|
console.error('Erreur:', error); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
