|
|
<!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://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script> |
|
|
<style> |
|
|
@layer utilities { |
|
|
.markdown-content { |
|
|
@apply prose prose-sm md:prose-base lg:prose-lg mx-auto; |
|
|
} |
|
|
|
|
|
.markdown-content table { |
|
|
@apply w-full table-auto border-collapse my-4; |
|
|
} |
|
|
|
|
|
.markdown-content th, |
|
|
.markdown-content td { |
|
|
@apply border border-gray-300 p-2 text-left align-top break-words; |
|
|
min-width: auto; |
|
|
white-space: normal; |
|
|
} |
|
|
|
|
|
.markdown-content pre { |
|
|
@apply overflow-x-auto p-4 rounded-lg bg-gray-100; |
|
|
} |
|
|
} |
|
|
|
|
|
.loader { |
|
|
width: 48px; |
|
|
height: 48px; |
|
|
border: 5px solid #FFF; |
|
|
border-bottom-color: #6366F1; |
|
|
border-radius: 50%; |
|
|
display: inline-block; |
|
|
box-sizing: border-box; |
|
|
animation: rotation 1s linear infinite; |
|
|
} |
|
|
|
|
|
@keyframes rotation { |
|
|
0% { transform: rotate(0deg); } |
|
|
100% { transform: rotate(360deg); } |
|
|
} |
|
|
|
|
|
.fade-in { |
|
|
animation: fadeIn 0.3s ease-in; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
0% { opacity: 0; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.upload-zone { |
|
|
@apply relative border-2 border-dashed border-indigo-500 rounded-lg p-8 transition-all duration-300 ease-in-out; |
|
|
} |
|
|
|
|
|
.upload-zone.drag-over { |
|
|
@apply border-indigo-600 bg-indigo-50; |
|
|
} |
|
|
|
|
|
.tab-button { |
|
|
@apply px-4 py-2 rounded-lg transition-all duration-200 text-sm md:text-base; |
|
|
} |
|
|
|
|
|
.tab-button:not(.active) { |
|
|
@apply bg-white text-indigo-600 hover:bg-indigo-50; |
|
|
} |
|
|
|
|
|
.tab-button.active { |
|
|
@apply bg-indigo-600 text-white; |
|
|
} |
|
|
|
|
|
.backup-item { |
|
|
@apply flex flex-col md:flex-row justify-between items-start md:items-center gap-2 p-4 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors duration-200; |
|
|
} |
|
|
|
|
|
.backup-actions { |
|
|
@apply flex gap-2 w-full md:w-auto justify-end; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body class="min-h-screen bg-gray-50"> |
|
|
<header class="bg-white shadow-sm sticky top-0 z-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8"> |
|
|
<h1 class="text-2xl md:text-3xl font-bold text-indigo-600">Mariam AI</h1> |
|
|
<p class="mt-1 text-sm text-gray-500">Assistant pour commentaire composé</p> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8 space-y-8"> |
|
|
<form id="uploadForm" class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<div class="upload-zone" id="dropZone"> |
|
|
<input type="file" id="imageInput" accept="image/*" class="hidden" /> |
|
|
<label for="imageInput" class="block text-center cursor-pointer"> |
|
|
<svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /> |
|
|
</svg> |
|
|
<p id="fileName" class="mt-2 text-sm text-gray-500"> |
|
|
Cliquez ou glissez une image ici |
|
|
</p> |
|
|
</label> |
|
|
</div> |
|
|
|
|
|
<div id="imagePreview" class="hidden mt-6"> |
|
|
<div class="relative max-w-md mx-auto"> |
|
|
<img id="preview" src="#" alt="Prévisualisation" class="rounded-lg shadow-md max-h-[400px] w-full object-contain" /> |
|
|
<button type="button" onclick="removeImage()" class="absolute top-2 right-2 p-2 rounded-full bg-white/90 hover:bg-red-500 hover:text-white transition-colors duration-200"> |
|
|
<svg class="w-5 h-5" 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" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex justify-center"> |
|
|
<button type="submit" class="inline-flex items-center px-6 py-3 rounded-lg bg-indigo-600 text-white font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"> |
|
|
Analyser l'image |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
|
|
|
<div id="loading" class="hidden"> |
|
|
<div class="flex flex-col items-center justify-center gap-4"> |
|
|
<span class="loader"></span> |
|
|
<p class="text-gray-500">Analyse en cours, veuillez patienter...</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="results" class="hidden space-y-6"> |
|
|
<div class="flex justify-center gap-2"> |
|
|
<button id="showDissertation" class="tab-button active">Dissertation</button> |
|
|
<button id="showTableau" class="tab-button">Tableau</button> |
|
|
<button id="showBackups" class="tab-button">Sauvegardes</button> |
|
|
</div> |
|
|
|
|
|
<div id="dissertationTab" class="tab-content active"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4">Dissertation</h2> |
|
|
<div id="dissertationResult" class="markdown-content"></div> |
|
|
<button id="saveDissertation" class="mt-6 px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors duration-200"> |
|
|
Sauvegarder la dissertation |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="tableauTab" class="tab-content hidden"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4">Tableau d'analyse</h2> |
|
|
<div id="tableauResult" class="markdown-content"></div> |
|
|
<button id="saveTableau" class="mt-6 px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 transition-colors duration-200"> |
|
|
Sauvegarder le tableau |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="backupsTab" class="tab-content hidden"> |
|
|
<div class="bg-white rounded-xl shadow-sm p-6"> |
|
|
<h2 class="text-xl md:text-2xl font-bold text-gray-900 mb-4">Sauvegardes locales</h2> |
|
|
<div id="backupList" class="space-y-3"></div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<script> |
|
|
let tableauContent = ''; |
|
|
let dissertationContent = ''; |
|
|
let backups = loadBackups(); |
|
|
|
|
|
|
|
|
const dropZone = document.getElementById('dropZone'); |
|
|
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|
|
dropZone.addEventListener(eventName, preventDefaults, false); |
|
|
}); |
|
|
|
|
|
function preventDefaults(e) { |
|
|
e.preventDefault(); |
|
|
e.stopPropagation(); |
|
|
} |
|
|
|
|
|
['dragenter', 'dragover'].forEach(eventName => { |
|
|
dropZone.addEventListener(eventName, highlight, false); |
|
|
}); |
|
|
|
|
|
['dragleave', 'drop'].forEach(eventName => { |
|
|
dropZone.addEventListener(eventName, unhighlight, false); |
|
|
}); |
|
|
|
|
|
function highlight(e) { |
|
|
dropZone.classList.add('drag-over'); |
|
|
} |
|
|
|
|
|
function unhighlight(e) { |
|
|
dropZone.classList.remove('drag-over'); |
|
|
} |
|
|
|
|
|
dropZone.addEventListener('drop', handleDrop, false); |
|
|
|
|
|
function handleDrop(e) { |
|
|
const dt = e.dataTransfer; |
|
|
const files = dt.files; |
|
|
|
|
|
if (files && files[0]) { |
|
|
handleFiles(files); |
|
|
} |
|
|
} |
|
|
|
|
|
function handleFiles(files) { |
|
|
const imageInput = document.getElementById('imageInput'); |
|
|
imageInput.files = files; |
|
|
handleImageSelect(); |
|
|
} |
|
|
|
|
|
function handleImageSelect() { |
|
|
const input = document.getElementById('imageInput'); |
|
|
const preview = document.getElementById('preview'); |
|
|
const previewContainer = document.getElementById('imagePreview'); |
|
|
const fileName = document.getElementById('fileName'); |
|
|
|
|
|
if (input.files && input.files[0]) { |
|
|
const reader = new FileReader(); |
|
|
|
|
|
reader.onload = function(e) { |
|
|
preview.src = e.target.result; |
|
|
previewContainer.classList.remove('hidden'); |
|
|
previewContainer.classList.add('fade-in'); |
|
|
fileName.textContent = input.files[0].name; |
|
|
}; |
|
|
|
|
|
reader.readAsDataURL(input.files[0]); |
|
|
} |
|
|
} |
|
|
|
|
|
function removeImage() { |
|
|
const input = document.getElementById('imageInput'); |
|
|
const previewContainer = document.getElementById('imagePreview'); |
|
|
const fileName = document.getElementById('fileName'); |
|
|
|
|
|
input.value = ''; |
|
|
previewContainer.classList.add('hidden'); |
|
|
fileName.textContent = 'Cliquez ou glissez une image ici'; |
|
|
} |
|
|
|
|
|
|
|
|
document.querySelectorAll('.tab-button').forEach(button => { |
|
|
button.addEventListener('click', () => { |
|
|
const tabName = button.id.replace('show', '').toLowerCase(); |
|
|
showTab(tabName); |
|
|
}); |
|
|
}); |
|
|
|
|
|
function showTab(tabName) { |
|
|
document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden')); |
|
|
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active')); |
|
|
|
|
|
const targetTab = document.getElementById(`${tabName}Tab`); |
|
|
const targetButton = document.getElementById(`show${tabName.charAt(0).toUpperCase() + tabName.slice(1)}`); |
|
|
|
|
|
targetTab.classList.remove('hidden'); |
|
|
targetButton.classList.add('active'); |
|
|
|
|
|
if (tabName === 'tableau') { |
|
|
renderTableauContent(); |
|
|
} else if (tabName === 'backups') { |
|
|
updateBackupList(); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function loadBackups() { |
|
|
try { |
|
|
return JSON.parse(localStorage.getItem('mariamAIBackups')) || []; |
|
|
} catch { |
|
|
return []; |
|
|
} |
|
|
} |
|
|
|
|
|
function saveBackup(type, content) { |
|
|
const timestamp = moment().format('YYYY-MM-DD HH:mm:ss'); |
|
|
backups.unshift({ timestamp, type, content }); |
|
|
localStorage.setItem('mariamAIBackups', JSON.stringify(backups)); |
|
|
updateBackupList(); |
|
|
Swal.fire({ |
|
|
icon: 'success', |
|
|
title: 'Sauvegarde réussie!', |
|
|
toast: true, |
|
|
position: 'top-end', |
|
|
showConfirmButton: false, |
|
|
timer: 3000 |
|
|
}); |
|
|
} |
|
|
|
|
|
function updateBackupList() { |
|
|
const backupList = document.getElementById('backupList'); |
|
|
backupList.innerHTML = backups.length ? '' : '<p class="text-gray-500 text-center py-4">Aucune sauvegarde disponible</p>'; |
|
|
|
|
|
backups.forEach((backup, index) => { |
|
|
const div = document.createElement('div'); |
|
|
div.className = 'backup-item'; |
|
|
div.innerHTML = ` |
|
|
<div class="flex-1"> |
|
|
<h3 class="font-medium">${backup.type === 'dissertation' ? 'Dissertation' : 'Tableau'}</h3> |
|
|
<p class="text-sm text-gray-500">${backup.timestamp}</p> |
|
|
</div> |
|
|
<div class="backup-actions"> |
|
|
<button data-index="${index}" class="view-backup px-3 py-1 rounded-lg bg-blue-500 text-white text-sm hover:bg-blue-600"> |
|
|
Voir |
|
|
</button> |
|
|
<button data-index="${index}" class="delete-backup px-3 py-1 rounded-lg bg-red-500 text-white text-sm hover:bg-red-600"> |
|
|
Supprimer |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
backupList.appendChild(div); |
|
|
}); |
|
|
|
|
|
document.querySelectorAll('.view-backup').forEach(btn => |
|
|
btn.addEventListener('click', viewBackup)); |
|
|
document.querySelectorAll('.delete-backup').forEach(btn => |
|
|
btn.addEventListener('click', deleteBackup)); |
|
|
} |
|
|
|
|
|
function viewBackup(event) { |
|
|
const backup = backups[event.target.dataset.index]; |
|
|
Swal.fire({ |
|
|
title: backup.type === 'dissertation' ? 'Dissertation sauvegardée' : 'Tableau sauvegardé', |
|
|
html: marked.parse(backup.content), |
|
|
width: '90%', |
|
|
customClass: { |
|
|
popup: 'swal2-popup-large', |
|
|
htmlContainer: 'markdown-content px-4' |
|
|
}, |
|
|
showCloseButton: true, |
|
|
showConfirmButton: false |
|
|
}); |
|
|
} |
|
|
|
|
|
function deleteBackup(event) { |
|
|
const index = event.target.dataset.index; |
|
|
const backup = backups[index]; |
|
|
|
|
|
Swal.fire({ |
|
|
title: 'Confirmer la suppression', |
|
|
text: `Voulez-vous vraiment supprimer cette sauvegarde du ${backup.timestamp} ?`, |
|
|
icon: 'warning', |
|
|
showCancelButton: true, |
|
|
confirmButtonColor: '#EF4444', |
|
|
cancelButtonColor: '#6B7280', |
|
|
confirmButtonText: 'Supprimer', |
|
|
cancelButtonText: 'Annuler' |
|
|
}).then((result) => { |
|
|
if (result.isConfirmed) { |
|
|
backups.splice(index, 1); |
|
|
localStorage.setItem('mariamAIBackups', JSON.stringify(backups)); |
|
|
updateBackupList(); |
|
|
|
|
|
Swal.fire({ |
|
|
title: 'Supprimé!', |
|
|
text: 'La sauvegarde a été supprimée.', |
|
|
icon: 'success', |
|
|
toast: true, |
|
|
position: 'top-end', |
|
|
showConfirmButton: false, |
|
|
timer: 3000 |
|
|
}); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('saveDissertation').addEventListener('click', () => { |
|
|
if (!dissertationContent.trim()) { |
|
|
Swal.fire({ |
|
|
icon: 'error', |
|
|
title: 'Erreur', |
|
|
text: 'Aucun contenu à sauvegarder' |
|
|
}); |
|
|
return; |
|
|
} |
|
|
saveBackup('dissertation', dissertationContent); |
|
|
}); |
|
|
|
|
|
document.getElementById('saveTableau').addEventListener('click', () => { |
|
|
if (!tableauContent.trim()) { |
|
|
Swal.fire({ |
|
|
icon: 'error', |
|
|
title: 'Erreur', |
|
|
text: 'Aucun contenu à sauvegarder' |
|
|
}); |
|
|
return; |
|
|
} |
|
|
saveBackup('tableau', tableauContent); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('uploadForm').addEventListener('submit', async (e) => { |
|
|
e.preventDefault(); |
|
|
|
|
|
const imageInput = document.getElementById('imageInput'); |
|
|
if (!imageInput.files || !imageInput.files[0]) { |
|
|
Swal.fire({ |
|
|
icon: 'error', |
|
|
title: 'Aucune image sélectionnée', |
|
|
text: 'Veuillez sélectionner une image à analyser.' |
|
|
}); |
|
|
return; |
|
|
} |
|
|
|
|
|
const loading = document.getElementById('loading'); |
|
|
const results = document.getElementById('results'); |
|
|
const dissertationResult = document.getElementById('dissertationResult'); |
|
|
|
|
|
const formData = new FormData(); |
|
|
formData.append('image', imageInput.files[0]); |
|
|
|
|
|
loading.classList.remove('hidden'); |
|
|
results.classList.add('hidden'); |
|
|
|
|
|
try { |
|
|
const response = await fetch('/analyze', { |
|
|
method: 'POST', |
|
|
body: formData |
|
|
}); |
|
|
|
|
|
if (!response.ok) { |
|
|
throw new Error(`Erreur serveur: ${response.status}`); |
|
|
} |
|
|
|
|
|
const data = await response.json(); |
|
|
|
|
|
dissertationContent = data.dissertation; |
|
|
tableauContent = data.tableau; |
|
|
|
|
|
|
|
|
marked.setOptions({ |
|
|
breaks: true, |
|
|
gfm: true, |
|
|
tables: true, |
|
|
smartLists: true, |
|
|
smartypants: true |
|
|
}); |
|
|
|
|
|
dissertationResult.innerHTML = marked.parse(data.dissertation); |
|
|
|
|
|
results.classList.remove('hidden'); |
|
|
results.classList.add('fade-in'); |
|
|
|
|
|
|
|
|
results.scrollIntoView({ behavior: 'smooth', block: 'start' }); |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Erreur lors de l'analyse:", error); |
|
|
Swal.fire({ |
|
|
icon: 'error', |
|
|
title: 'Erreur', |
|
|
text: "Une erreur est survenue lors de l'analyse de l'image. Veuillez réessayer." |
|
|
}); |
|
|
} finally { |
|
|
loading.classList.add('hidden'); |
|
|
} |
|
|
}); |
|
|
|
|
|
function renderTableauContent() { |
|
|
const tableauResult = document.getElementById('tableauResult'); |
|
|
if (tableauContent) { |
|
|
tableauResult.innerHTML = marked.parse(tableauContent); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('imageInput').addEventListener('change', handleImageSelect); |
|
|
updateBackupList(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
