|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Mariam AI - Analyse d'Image</title> |
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.3.2/tailwind.min.css" rel="stylesheet"> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
|
|
<style> |
|
|
|
|
|
.loader { |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
border: 5px solid #e5e7eb; |
|
|
border-top-color: #4f46e5; |
|
|
border-radius: 50%; |
|
|
animation: spin 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes spin { |
|
|
to { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { |
|
|
opacity: 0; |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col"> |
|
|
|
|
|
|
|
|
<header class="bg-white shadow-md"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-6"> |
|
|
<h1 class="text-4xl font-extrabold text-indigo-600">Mariam AI</h1> |
|
|
<p class="mt-2 text-sm text-gray-500">Un assistant intelligent pour l'analyse d'image et la rédaction de dissertations.</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<main class="flex-1 flex items-center justify-center px-4 py-8"> |
|
|
<div class="bg-white shadow-lg rounded-lg w-full max-w-3xl p-8 space-y-8"> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h2 class="text-2xl font-semibold text-gray-900">Téléversez votre image</h2> |
|
|
<p class="text-sm text-gray-500">Glissez et déposez une image ou cliquez pour choisir un fichier à analyser.</p> |
|
|
<form id="uploadForm" class="space-y-4 mt-4"> |
|
|
<div class="upload-zone border-2 border-dashed border-indigo-500 rounded-lg p-6 text-center transition hover:bg-indigo-50"> |
|
|
<input type="file" id="imageInput" accept="image/*" required class="hidden" onchange="handleImageUpload()"> |
|
|
<label for="imageInput" class="cursor-pointer"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4-4a3 3 0 014 0l4 4m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
<span id="fileName" class="block mt-2 text-sm text-gray-600">Cliquez ou glissez une image ici</span> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="imagePreviewContainer" class="hidden mt-4 text-center"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-2">Aperçu de l'image :</h3> |
|
|
<img id="imagePreview" src="" alt="Aperçu de l'image" class="mx-auto max-w-xs rounded-lg shadow"> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button type="submit" class="w-full sm:w-auto px-6 py-3 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 transition"> |
|
|
Analyser l'image |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="loading" class="hidden text-center space-y-4"> |
|
|
<div class="loader mx-auto"></div> |
|
|
<p class="text-gray-500">Analyse en cours, veuillez patienter...</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="results" class="hidden space-y-6 fade-in"> |
|
|
|
|
|
<div class="bg-gray-50 rounded-lg p-6 shadow"> |
|
|
<h2 class="text-xl font-bold text-gray-800">Dissertation</h2> |
|
|
<div id="dissertationResult" class="prose prose-indigo max-w-none mt-4"></div> |
|
|
</div> |
|
|
|
|
|
<div class="text-center"> |
|
|
<button id="showTableau" class="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition"> |
|
|
Voir le tableau d'analyse |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
let tableauContent = ''; |
|
|
|
|
|
|
|
|
function handleImageUpload() { |
|
|
const input = document.getElementById('imageInput'); |
|
|
const fileName = document.getElementById('fileName'); |
|
|
const previewContainer = document.getElementById('imagePreviewContainer'); |
|
|
const imagePreview = document.getElementById('imagePreview'); |
|
|
|
|
|
if (input.files.length > 0) { |
|
|
const file = input.files[0]; |
|
|
fileName.textContent = file.name; |
|
|
|
|
|
|
|
|
if (file.type.startsWith('image/')) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (e) => { |
|
|
imagePreview.src = e.target.result; |
|
|
previewContainer.classList.remove('hidden'); |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} else { |
|
|
previewContainer.classList.add('hidden'); |
|
|
imagePreview.src = ''; |
|
|
Swal.fire('Erreur', 'Veuillez téléverser un fichier image valide.', 'error'); |
|
|
} |
|
|
} else { |
|
|
previewContainer.classList.add('hidden'); |
|
|
imagePreview.src = ''; |
|
|
fileName.textContent = 'Cliquez ou glissez une image ici'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('showTableau').addEventListener('click', () => { |
|
|
Swal.fire({ |
|
|
title: 'Tableau d\'analyse', |
|
|
html: marked.parse(tableauContent), |
|
|
width: '80%', |
|
|
customClass: { |
|
|
htmlContainer: 'prose prose-indigo max-w-none' |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('uploadForm').addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
const loading = document.getElementById('loading'); |
|
|
const results = document.getElementById('results'); |
|
|
const dissertationResult = document.getElementById('dissertationResult'); |
|
|
const formData = new FormData(); |
|
|
formData.append('image', document.getElementById('imageInput').files[0]); |
|
|
|
|
|
loading.classList.remove('hidden'); |
|
|
results.classList.add('hidden'); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/analyze', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
const data = await response.json(); |
|
|
if (response.ok) { |
|
|
tableauContent = data.tableau; |
|
|
dissertationResult.innerHTML = marked.parse(data.dissertation); |
|
|
results.classList.remove('hidden'); |
|
|
} else { |
|
|
Swal.fire('Erreur', data.error, 'error'); |
|
|
} |
|
|
} catch (error) { |
|
|
Swal.fire('Erreur', 'Une erreur est survenue lors de l\'analyse.', 'error'); |
|
|
} finally { |
|
|
loading.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
