Hugging Face's logo

Spaces:
Docfile
/
Mariam-cc
Running

App Files Community
Mariam-cc / templates /index.html
Docfile's picture
Docfile
Upload index.html
dfc761c verified
raw
history blame
6.87 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mariam AI - Section Commentaire Composé</title>
<!-- Intégration de Tailwind CSS via CDN avec le plugin Typography activé -->
<script src="https://cdn.tailwindcss.com?plugins=typography"></script>
<!-- Intégration de Marked.js pour la conversion Markdown -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<style>
/* Spinner personnalisé pour l'indicateur de chargement */
.spinner {
border: 4px solid rgba(0, 0, 0, 0.1);
width: 3rem;
height: 3rem;
border-radius: 50%;
border-left-color: #4f46e5;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Optionnel : style personnalisé pour les tableaux générés en Markdown */
.prose table {
width: 100%;
border-collapse: collapse;
}
.prose th,
.prose td {
border: 1px solid #e5e7eb; /* gris clair */
padding: 0.75rem;
text-align: left;
}
.prose th {
background-color: #f3f4f6;
font-weight: 600;
}
</style>
</head>
<body class="bg-gray-100">
<div class="max-w-3xl mx-auto p-4">
<!-- En-tête de l'application -->
<header class="mb-8 text-center">
<h1 class="text-4xl font-extrabold text-gray-800">Mariam AI</h1>
<p class="text-xl text-gray-600">Section Commentaire Composé</p>
</header>
<div class="bg-white rounded-lg shadow-lg p-6">
<!-- Formulaire d'upload et prévisualisation -->
<form id="uploadForm" enctype="multipart/form-data" class="mb-6">
<label for="imageInput" class="block text-lg font-medium text-gray-700 mb-2">
Sélectionnez une image :
</label>
<input type="file" name="image" id="imageInput" accept="image/*" required
class="block w-full border border-gray-300 rounded-md p-2 mb-4 focus:ring focus:ring-blue-300">
<!-- Prévisualisation de l'image -->
<div id="previewContainer" class="mb-4 hidden">
<p class="text-gray-700 font-medium mb-2">Prévisualisation :</p>
<img id="previewImage" src="#" alt="Prévisualisation" class="w-full max-h-64 object-contain rounded-lg shadow-md">
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
Analyser
</button>
</form>
<!-- Indicateur de chargement -->
<div id="loading" class="flex flex-col items-center space-y-2 mb-6 hidden">
<div class="spinner"></div>
<span class="text-gray-700 font-medium">Analyse en cours...</span>
</div>
<!-- Bouton pour afficher/masquer le tableau d'analyse -->
<button id="toggleButton" class="hidden bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full mb-4 transition-colors">
Afficher le Tableau
</button>
<!-- Zone de résultats -->
<div id="result" class="hidden">
<!-- Section Dissertation -->
<section class="mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Dissertation</h2>
<div id="dissertationContent" class="prose prose-sm sm:prose lg:prose-xl bg-gray-50 border border-gray-200 rounded p-6 text-gray-800"></div>
</section>
<!-- Section Tableau d'analyse -->
<section id="tableauSection" class="hidden">
<h2 class="text-2xl font-semibold text-gray-800 mb-4">Tableau d'analyse</h2>
<div id="tableauContent" class="prose prose-sm sm:prose lg:prose-xl bg-gray-50 border border-gray-200 rounded p-6 text-gray-800"></div>
</section>
</div>
</div>
</div>
<!-- Script JavaScript pour la gestion des interactions -->
<script>
const uploadForm = document.getElementById('uploadForm');
const imageInput = document.getElementById('imageInput');
const previewContainer = document.getElementById('previewContainer');
const previewImage = document.getElementById('previewImage');
const loadingIndicator = document.getElementById('loading');
const resultDiv = document.getElementById('result');
const toggleButton = document.getElementById('toggleButton');
const tableauSection = document.getElementById('tableauSection');
const tableauContent = document.getElementById('tableauContent');
const dissertationContent = document.getElementById('dissertationContent');
// Prévisualisation de l'image sélectionnée
imageInput.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
previewImage.src = e.target.result;
previewContainer.classList.remove('hidden');
}
reader.readAsDataURL(file);
} else {
previewContainer.classList.add('hidden');
}
});
// Gestion de la soumission du formulaire
uploadForm.addEventListener('submit', function(e) {
e.preventDefault();
// Afficher l'indicateur de chargement et masquer les zones de résultats
loadingIndicator.classList.remove('hidden');
resultDiv.classList.add('hidden');
toggleButton.classList.add('hidden');
tableauSection.classList.add('hidden');
const formData = new FormData(uploadForm);
fetch('/analyze', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
loadingIndicator.classList.add('hidden');
if (data.error) {
alert("Erreur : " + data.error);
} else {
// Convertir les réponses Markdown en HTML via Marked.js
dissertationContent.innerHTML = marked.parse(data.dissertation);
tableauContent.innerHTML = marked.parse(data.tableau);
// Afficher la zone de résultats et le bouton Toggle
resultDiv.classList.remove('hidden');
toggleButton.classList.remove('hidden');
// Masquer le tableau par défaut
tableauSection.classList.add('hidden');
toggleButton.textContent = 'Afficher le Tableau';
}
})
.catch(error => {
loadingIndicator.classList.add('hidden');
console.error(error);
alert("Une erreur est survenue lors de l'analyse.");
});
});
// Gestion du bouton d'affichage/masquage du tableau
toggleButton.addEventListener('click', function() {
if (tableauSection.classList.contains('hidden')) {
tableauSection.classList.remove('hidden');
toggleButton.textContent = 'Masquer le Tableau';
} else {
tableauSection.classList.add('hidden');
toggleButton.textContent = 'Afficher le Tableau';
}
});
</script>
</body>
</html>