Hugging Face's logo

Spaces:
Docfile
/
M-anglais
Running

App Files Community
M-anglais / templates /index.html
Docfile's picture
Docfile
Update templates/index.html
93fbcde verified
raw
history blame contribute delete
11.7 kB
<!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',
secondary: '#2D3748',
accent: '#F6AD55'
},
fontFamily: {
sans: ['Inter', 'sans-serif']
}
}
}
}
</script>
<style>
.markdown-content {
width: 100%;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
}
.markdown-content pre {
white-space: pre-wrap;
padding: 1rem;
background-color: #edf2f7;
border-radius: 0.5rem;
margin: 1rem 0;
overflow-x: auto;
}
.markdown-content code {
background-color: #edf2f7;
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: ui-monospace, monospace;
}
/* Amélioration pour les paragraphes et espacements */
.markdown-content p {
margin-bottom: 1rem;
line-height: 1.6;
white-space: pre-line;
}
/* Styles pour les titres */
.markdown-content h1 {
font-size: 1.8rem;
font-weight: bold;
margin-top: 1.5rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid #e2e8f0;
}
.markdown-content h2 {
font-size: 1.5rem;
font-weight: bold;
margin-top: 1.25rem;
margin-bottom: 0.75rem;
}
.markdown-content h3 {
font-size: 1.25rem;
font-weight: bold;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
/* Styles pour les listes */
.markdown-content ul, .markdown-content ol {
margin-left: 1.5rem;
margin-bottom: 1rem;
}
.markdown-content li {
margin-bottom: 0.5rem;
}
/* Styles pour les blockquotes */
.markdown-content blockquote {
border-left: 4px solid #e2e8f0;
padding-left: 1rem;
margin-left: 0;
margin-right: 0;
margin-bottom: 1rem;
font-style: italic;
color: #4a5568;
}
/* Styles pour les séparateurs horizontaux */
.markdown-content hr {
margin: 1.5rem 0;
border: 0;
border-top: 1px solid #e2e8f0;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.animate-fade-in {
animation: fadeIn 1s ease-out;
}
/* Ajout d'une ombre plus marquée pour les cartes */
.card {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-300 min-h-screen font-sans">
<div class="container mx-auto px-4 py-12 max-w-6xl">
<!-- Header -->
<header class="text-center mb-16 animate-fade-in">
<h1 class="text-5xl font-bold text-primary mb-4 drop-shadow-lg">
✨ Mariam Anglais ✨
</h1>
<p class="text-secondary text-lg">
Téléchargez vos images, choisissez votre type d'analyse et laissez la magie opérer.
</p>
</header>
<!-- Main Content -->
<div class="grid md:grid-cols-2 gap-12">
<!-- Upload Section -->
<div class="bg-white rounded-xl card p-8">
<h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
<svg class="h-8 w-8 text-primary" 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>
Téléchargement d'images
</h2>
<div
class="upload-zone border-2 border-dashed border-primary rounded-lg p-10 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" />
<p class="text-gray-600 font-medium">Cliquez ou glissez vos images ici</p>
</div>
<div id="preview-container" class="mt-6 grid grid-cols-2 gap-4"></div>
</div>
<!-- Analysis Type Section -->
<div class="bg-white rounded-xl card p-8">
<h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
<svg class="h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a4 4 0 00-4-4H3"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a4 4 0 014 4v2"></path>
</svg>
Choix du type d'analyse
</h2>
<div class="space-y-6">
<!-- Option Analyse de Texte -->
<label class="flex flex-col p-5 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<input type="radio" name="analysis_type" value="text" class="h-5 w-5 text-primary" />
<span class="ml-3 text-lg font-medium text-secondary">🔍 Analyse de Texte</span>
</div>
<p class="text-gray-500 text-sm ml-8 mt-1">
Analyse de texte détaillée comprenant INTRODUCTION, SUMMARY, COMMENTARY et EVALUATION.
</p>
</label>
<!-- Option Document iconographique -->
<label class="flex flex-col p-5 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
<div class="flex items-center">
<input type="radio" name="analysis_type" value="icon" class="h-5 w-5 text-primary" />
<span class="ml-3 text-lg font-medium text-secondary">🧠 Document iconographique</span>
</div>
<p class="text-gray-500 text-sm ml-8 mt-1">
Analyse et interprétation du document iconographique fourni.
</p>
</label>
</div>
<button id="submit-btn" class="w-full mt-8 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-transform transform hover:-translate-y-1 hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed">
🚀 Soumettre
</button>
</div>
</div>
<!-- Results Section -->
<div id="results" class="mt-16 bg-white rounded-xl card p-8 hidden animate-fade-in">
<h2 class="text-2xl font-semibold text-primary mb-6">📝 Résultat de l'analyse</h2>
<div id="analysis-result" class="markdown-content prose max-w-none"></div>
</div>
<!-- Footer -->
<footer class="mt-16 text-center text-gray-600">
<hr class="my-6" />
<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 = [];
// Configuration de marked pour mieux gérer les espaces et retours à la ligne
marked.setOptions({
breaks: true, // Convertit les retours à la ligne en <br>
gfm: true, // GitHub Flavored Markdown
headerIds: true, // Ajoute des IDs aux en-têtes
mangle: false, // Pas de mangling des caractères spéciaux
smartLists: true, // Meilleur rendu des listes
smartypants: true, // Transforme les quotes, tirets etc.
xhtml: true // Utilise la syntaxe XHTML
});
imageUpload.addEventListener('change', handleFileSelect);
submitBtn.addEventListener('click', handleSubmit);
// Support pour le drag and drop
const uploadZone = document.querySelector('.upload-zone');
uploadZone.addEventListener('dragover', (e) => {
e.preventDefault();
uploadZone.classList.add('bg-gray-50');
});
uploadZone.addEventListener('dragleave', () => {
uploadZone.classList.remove('bg-gray-50');
});
uploadZone.addEventListener('drop', (e) => {
e.preventDefault();
uploadZone.classList.remove('bg-gray-50');
uploadedFiles = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
updatePreview();
});
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 shadow">
<button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 shadow">
<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>
<div class="mt-1 text-sm text-gray-600 truncate">${file.name}</div>
`;
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);
}
// Préparation des données Markdown pour l'affichage
let markdownContent = data.result;
// Assurer que les doubles retours à la ligne sont bien rendus
markdownContent = markdownContent.replace(/\n\n/g, '\n&nbsp;\n');
resultsSection.classList.remove('hidden');
analysisResult.innerHTML = marked.parse(markdownContent);
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>