|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Analyse d'Image</title> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> |
|
|
<style> |
|
|
.container { |
|
|
max-width: 800px; |
|
|
margin: 0 auto; |
|
|
padding: 20px; |
|
|
} |
|
|
.result-section { |
|
|
margin-top: 20px; |
|
|
padding: 15px; |
|
|
border: 1px solid #ddd; |
|
|
border-radius: 5px; |
|
|
} |
|
|
#loading { |
|
|
display: none; |
|
|
text-align: center; |
|
|
margin: 20px 0; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<h1>Analyse d'Image avec Gemini</h1> |
|
|
|
|
|
<form id="uploadForm"> |
|
|
<input type="file" id="imageInput" accept="image/*" required> |
|
|
<button type="submit">Analyser</button> |
|
|
</form> |
|
|
|
|
|
<div id="loading">Analyse en cours...</div> |
|
|
|
|
|
<div class="result-section"> |
|
|
<h2>Tableau d'Analyse</h2> |
|
|
<div id="tableauResult"></div> |
|
|
</div> |
|
|
|
|
|
<div class="result-section"> |
|
|
<h2>Dissertation</h2> |
|
|
<div id="dissertationResult"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
document.getElementById('uploadForm').addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const loading = document.getElementById('loading'); |
|
|
const tableauResult = document.getElementById('tableauResult'); |
|
|
const dissertationResult = document.getElementById('dissertationResult'); |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('image', document.getElementById('imageInput').files[0]); |
|
|
|
|
|
loading.style.display = 'block'; |
|
|
tableauResult.innerHTML = ''; |
|
|
dissertationResult.innerHTML = ''; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/analyze', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
if (response.ok) { |
|
|
tableauResult.innerHTML = marked.parse(data.tableau); |
|
|
dissertationResult.innerHTML = marked.parse(data.dissertation); |
|
|
} else { |
|
|
alert('Erreur: ' + data.error); |
|
|
} |
|
|
} catch (error) { |
|
|
alert('Erreur lors de l\'analyse: ' + error); |
|
|
} finally { |
|
|
loading.style.display = 'none'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
