|
|
<!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', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</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; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.animate-fade-in { |
|
|
animation: fadeIn 1s ease-out; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-6xl"> |
|
|
|
|
|
<header class="text-center mb-12 animate-fade-in"> |
|
|
<h1 class="text-5xl font-bold text-primary mb-4"> |
|
|
✨ Mariam Anglais ✨ |
|
|
</h1> |
|
|
<p class="text-gray-600 text-lg"> |
|
|
Bienvenue ! Téléchargez vos images, choisissez votre type d'analyse, et laissez la magie opérer. |
|
|
</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-8"> |
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold text-primary mb-4">📷 Téléchargement d'images</h2> |
|
|
<div |
|
|
class="upload-zone border-2 border-dashed border-primary rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 transition-colors" |
|
|
onclick="document.getElementById('image-upload').click()"> |
|
|
<input type="file" id="image-upload" multiple accept="image/*" class="hidden"> |
|
|
<div class="flex flex-col items-center"> |
|
|
<svg class="h-12 w-12 text-primary mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> |
|
|
</svg> |
|
|
<span class="text-gray-600">Cliquez ou glissez vos images ici</span> |
|
|
</div> |
|
|
</div> |
|
|
<div id="preview-container" class="mt-4 grid grid-cols-2 gap-4"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-lg p-6"> |
|
|
<h2 class="text-2xl font-semibold text-primary mb-4">🎛️ Choix du type d'analyse</h2> |
|
|
<div class="space-y-4"> |
|
|
<label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors"> |
|
|
<input type="radio" name="analysis_type" value="text" class="h-4 w-4 text-primary"> |
|
|
<span class="ml-3">🔍 Type 1: Analyse de Texte</span> |
|
|
</label> |
|
|
<label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors"> |
|
|
<input type="radio" name="analysis_type" value="icon" class="h-4 w-4 text-primary"> |
|
|
<span class="ml-3">🧠 Type 2: Document iconographique</span> |
|
|
</label> |
|
|
</div> |
|
|
<button id="submit-btn" class="w-full mt-6 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:-translate-y-1 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed"> |
|
|
🚀 Soumettre |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="results" class="mt-12 bg-white rounded-xl 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 prose max-w-none"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-12 text-center text-gray-600"> |
|
|
<hr class="my-4"> |
|
|
<p>© 2025 Mariam AI - Tous droits réservés.</p> |
|
|
</footer> |
|
|
</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 = []; |
|
|
|
|
|
imageUpload.addEventListener('change', handleFileSelect); |
|
|
submitBtn.addEventListener('click', handleSubmit); |
|
|
|
|
|
function handleFileSelect(event) { |
|
|
uploadedFiles = Array.from(event.target.files); |
|
|
updatePreview(); |
|
|
} |
|
|
|
|
|
function updatePreview() { |
|
|
previewContainer.innerHTML = ''; |
|
|
uploadedFiles.forEach((file, index) => { |
|
|
const preview = document.createElement('div'); |
|
|
preview.className = 'relative'; |
|
|
preview.innerHTML = ` |
|
|
<img src="${URL.createObjectURL(file)}" alt="Preview" class="w-full h-32 object-cover rounded-lg"> |
|
|
<button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600"> |
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> |
|
|
</svg> |
|
|
</button> |
|
|
`; |
|
|
previewContainer.appendChild(preview); |
|
|
}); |
|
|
submitBtn.disabled = uploadedFiles.length === 0; |
|
|
} |
|
|
|
|
|
function removeImage(index) { |
|
|
uploadedFiles.splice(index, 1); |
|
|
updatePreview(); |
|
|
} |
|
|
|
|
|
async function handleSubmit() { |
|
|
if (uploadedFiles.length === 0) { |
|
|
alert('Veuillez sélectionner au moins une image.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const analysisType = document.querySelector('input[name="analysis_type"]:checked')?.value; |
|
|
if (!analysisType) { |
|
|
alert('Veuillez sélectionner un type d\'analyse.'); |
|
|
return; |
|
|
} |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('analysis_type', analysisType); |
|
|
uploadedFiles.forEach(file => formData.append('images', file)); |
|
|
|
|
|
submitBtn.disabled = true; |
|
|
submitBtn.innerHTML = '<span class="animate-pulse">Analyse en cours...</span>'; |
|
|
|
|
|
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> |
