|
|
<!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> |
|
|
tailwind.config = { |
|
|
theme: { |
|
|
extend: { |
|
|
colors: { |
|
|
primary: '#4CAF50', |
|
|
'primary-dark': '#3e8e41', |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</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"> |
|
|
<h1 class="text-5xl font-bold text-primary mb-4 animate-fade-in"> |
|
|
✨ 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-12"> |
|
|
|
|
|
<div class="bg-white rounded-lg 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"> |
|
|
<input type="file" id="image-upload" multiple accept="image/*" class="hidden"> |
|
|
<label for="image-upload" class="cursor-pointer"> |
|
|
<svg class="mx-auto 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> |
|
|
</label> |
|
|
</div> |
|
|
<div id="preview-container" class="mt-4 grid grid-cols-2 gap-4"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-lg 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-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="prose max-w-none"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="mt-12 text-center text-gray-600"> |
|
|
<hr class="mb-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() { |
|
|
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 = data.result; |
|
|
} catch (error) { |
|
|
alert('Erreur lors de l\'analyse: ' + error.message); |
|
|
} finally { |
|
|
submitBtn.disabled = false; |
|
|
submitBtn.innerHTML = '🚀 Soumettre'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
window.removeImage = removeImage; |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
