|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mariam Anglais</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
|
|
<script> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4CAF50', |
|
|
'primary-dark': '#3e8e41', |
|
|
}, |
|
|
typography: { |
|
|
DEFAULT: { |
|
|
css: { |
|
|
maxWidth: 'none', |
|
|
}, |
|
|
}, |
|
|
}, |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
|
|
|
.markdown-content { |
|
|
width: 100%; |
|
|
overflow-wrap: break-word; |
|
|
word-wrap: break-word; |
|
|
word-break: break-word; |
|
|
hyphens: auto; |
|
|
} |
|
|
|
|
|
.markdown-content pre { |
|
|
white-space: pre-wrap; |
|
|
word-wrap: break-word; |
|
|
padding: 1rem; |
|
|
background-color: #f3f4f6; |
|
|
border-radius: 0.5rem; |
|
|
margin: 1rem 0; |
|
|
overflow-x: auto; |
|
|
} |
|
|
|
|
|
.markdown-content code { |
|
|
background-color: #f3f4f6; |
|
|
padding: 0.2rem 0.4rem; |
|
|
border-radius: 0.25rem; |
|
|
font-family: ui-monospace, monospace; |
|
|
} |
|
|
|
|
|
.markdown-content p { |
|
|
margin: 1rem 0; |
|
|
line-height: 1.7; |
|
|
} |
|
|
|
|
|
.markdown-content h1, |
|
|
.markdown-content h2, |
|
|
.markdown-content h3, |
|
|
.markdown-content h4 { |
|
|
font-weight: bold; |
|
|
margin: 1.5rem 0 1rem 0; |
|
|
line-height: 1.3; |
|
|
} |
|
|
|
|
|
.markdown-content h1 { font-size: 1.875rem; } |
|
|
.markdown-content h2 { font-size: 1.5rem; } |
|
|
.markdown-content h3 { font-size: 1.25rem; } |
|
|
.markdown-content h4 { font-size: 1.125rem; } |
|
|
|
|
|
.markdown-content ul, |
|
|
.markdown-content ol { |
|
|
margin: 1rem 0; |
|
|
padding-left: 1.5rem; |
|
|
} |
|
|
|
|
|
.markdown-content ul { list-style-type: disc; } |
|
|
.markdown-content ol { list-style-type: decimal; } |
|
|
|
|
|
.markdown-content li { |
|
|
margin: 0.5rem 0; |
|
|
} |
|
|
|
|
|
.markdown-content blockquote { |
|
|
border-left: 4px solid #e5e7eb; |
|
|
padding-left: 1rem; |
|
|
margin: 1rem 0; |
|
|
color: #4b5563; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 640px) { |
|
|
.markdown-content { |
|
|
font-size: 0.9375rem; |
|
|
} |
|
|
|
|
|
.markdown-content pre { |
|
|
padding: 0.75rem; |
|
|
font-size: 0.875rem; |
|
|
} |
|
|
|
|
|
.markdown-content h1 { font-size: 1.5rem; } |
|
|
.markdown-content h2 { font-size: 1.25rem; } |
|
|
.markdown-content h3 { font-size: 1.125rem; } |
|
|
.markdown-content h4 { font-size: 1rem; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
|
|
|
|
|
|
|
|
|
<div id="results" class="mt-12 bg-white rounded-lg shadow-lg p-6 hidden"> |
|
|
<h2 class="text-2xl font-semibold text-primary mb-4">📝 Résultat de l'analyse</h2> |
|
|
<div id="analysis-result" class="markdown-content"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
const imageUpload = document.getElementById('image-upload'); |
|
|
const previewContainer = document.getElementById('preview-container'); |
|
|
const submitBtn = document.getElementById('submit-btn'); |
|
|
const resultsSection = document.getElementById('results'); |
|
|
const analysisResult = document.getElementById('analysis-result'); |
|
|
|
|
|
let uploadedFiles = []; |
|
|
|
|
|
|
|
|
marked.setOptions({ |
|
|
breaks: true, |
|
|
gfm: true, |
|
|
headerIds: false, |
|
|
mangle: false, |
|
|
smartLists: true, |
|
|
smartypants: true, |
|
|
xhtml: true |
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
async function handleSubmit() { |
|
|
const formData = new FormData(); |
|
|
const analysisType = document.querySelector('input[name="analysis_type"]:checked')?.value; |
|
|
|
|
|
if (!analysisType || uploadedFiles.length === 0) { |
|
|
alert('Veuillez sélectionner un type d\'analyse et au moins une image.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
formData.append('analysis_type', analysisType); |
|
|
uploadedFiles.forEach(file => formData.append('images', file)); |
|
|
|
|
|
submitBtn.disabled = true; |
|
|
submitBtn.innerHTML = 'Analyse en cours...'; |
|
|
|
|
|
try { |
|
|
const response = await fetch('/analyze', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
const data = await response.json(); |
|
|
|
|
|
if (data.error) { |
|
|
throw new Error(data.error); |
|
|
} |
|
|
|
|
|
resultsSection.classList.remove('hidden'); |
|
|
|
|
|
analysisResult.innerHTML = marked.parse(data.result); |
|
|
|
|
|
|
|
|
resultsSection.scrollIntoView({ behavior: 'smooth' }); |
|
|
} catch (error) { |
|
|
alert('Erreur lors de l\'analyse: ' + error.message); |
|
|
} finally { |
|
|
submitBtn.disabled = false; |
|
|
submitBtn.innerHTML = '🚀 Soumettre'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.removeImage = removeImage; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
