Mphilo3

Sleeping

App Files Files Community

Mphilo3 / templates /index.html

Docfile

Update templates/index.html

b992777 verified about 1 year ago

raw

history blame contribute delete

11.2 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Exercice de Philosophie</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',
	}
	}
	}
	}
	</script>
	<style>
	.markdown-content {
	width: 100%;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	hyphens: auto;
	}
	.markdown-content pre {
	white-space: pre-wrap;
	word-wrap: break-word;
	padding: 1rem;
	background-color: #f3f4f6;
	border-radius: 0.5rem;
	margin: 1rem 0;
	overflow-x: auto;
	}
	.markdown-content code {
	background-color: #f3f4f6;
	padding: 0.2rem 0.4rem;
	border-radius: 0.25rem;
	font-family: ui-monospace, monospace;
	}
	/* Amélioration pour les paragraphes et espaces */
	.markdown-content p {
	margin-bottom: 1rem;
	line-height: 1.7;
	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;
	color: #2d3748;
	}
	.markdown-content h2 {
	font-size: 1.5rem;
	font-weight: bold;
	margin-top: 1.25rem;
	margin-bottom: 0.75rem;
	color: #2d3748;
	}
	.markdown-content h3 {
	font-size: 1.25rem;
	font-weight: bold;
	margin-top: 1rem;
	margin-bottom: 0.5rem;
	color: #2d3748;
	}
	/* Styles pour les listes */
	.markdown-content ul, .markdown-content ol {
	margin-left: 1.5rem;
	margin-bottom: 1rem;
	padding-left: 1rem;
	}
	.markdown-content li {
	margin-bottom: 0.5rem;
	}
	.markdown-content ul {
	list-style-type: disc;
	}
	.markdown-content ol {
	list-style-type: decimal;
	}
	/* Styles pour les citations */
	.markdown-content blockquote {
	border-left: 4px solid #4CAF50;
	padding: 0.5rem 1rem;
	margin: 1rem 0;
	background-color: #f8f9fa;
	font-style: italic;
	color: #4a5568;
	}
	/* Styles pour les tableaux */
	.markdown-content table {
	border-collapse: collapse;
	width: 100%;
	margin: 1rem 0;
	}
	.markdown-content th,
	.markdown-content td {
	padding: 0.5rem;
	border: 1px solid #e2e8f0;
	}
	.markdown-content th {
	background-color: #f8f9fa;
	font-weight: bold;
	}
	/* Styles pour les séparateurs */
	.markdown-content hr {
	margin: 1.5rem 0;
	border: 0;
	border-top: 1px solid #e2e8f0;
	}
	/* Style pour les liens */
	.markdown-content a {
	color: #4CAF50;
	text-decoration: underline;
	}
	.markdown-content a:hover {
	text-decoration: none;
	}
	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}
	.animate-fade-in {
	animation: fadeIn 1s ease-out;
	}
	/* Style pour le conteneur des résultats */
	#results {
	transition: all 0.3s ease;
	}
	/* Ombres plus marquées pour les cartes */
	.card-shadow {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
	}
	</style>
	</head>
	<body class="bg-gray-50 min-h-screen">
	<div class="container mx-auto px-4 py-8 max-w-6xl">
	<!-- Header -->
	<header class="text-center mb-12 animate-fade-in">
	<h1 class="text-5xl font-bold text-primary mb-4">
	✨ Exercice de Philosophie (type3) ✨
	</h1>
	<p class="text-gray-600 text-lg">
	Bienvenue ! Téléchargez vos images et laissez l'analyse philosophique opérer.
	</p>
	</header>

	<!-- Main Content -->
	<div class="grid md:grid-cols-2 gap-8">
	<!-- Upload Section -->
	<div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
	<h2 class="text-2xl font-semibold text-primary mb-4">📷 Téléchargement d'images</h2>
	<div
	id="upload-zone"
	class="upload-zone border-2 border-dashed border-primary rounded-lg p-8 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">
	<div class="flex flex-col items-center">
	<svg class="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>
	</div>
	</div>
	<div id="preview-container" class="mt-4 grid grid-cols-2 gap-4"></div>
	</div>

	<!-- Bouton de soumission (seulement) -->
	<div class="bg-white rounded-xl shadow-lg p-6 flex flex-col justify-center card-shadow">
	<h2 class="text-2xl font-semibold text-primary mb-4">🧠 Analyse Philosophique</h2>
	<p class="text-gray-600 mb-6">
	Cette analyse vous fournira une réflexion philosophique approfondie basée sur le(s) document(s) téléchargé(s).
	</p>
	<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>

	<!-- Résultats -->
	<div id="results" class="mt-12 bg-white rounded-xl shadow-lg p-6 hidden animate-fade-in card-shadow">
	<h2 class="text-2xl font-semibold text-primary mb-4">📝 Résultat de l'analyse</h2>
	<div id="analysis-result" class="markdown-content prose max-w-none"></div>
	</div>

	<!-- Footer -->
	<footer class="mt-12 text-center text-gray-600">
	<hr class="my-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');
	const uploadZone = document.getElementById('upload-zone');

	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
	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');
	const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
	if (files.length > 0) {
	uploadedFiles = files;
	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-md">
	<button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 shadow-sm transition-all transform hover:scale-110">
	<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 formData = new FormData();
	// On n'envoie plus de type d'analyse, l'analyse est toujours philosophique.
	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 un meilleur rendu
	let markdownContent = data.result;

	// Assurer que les doubles retours à la ligne sont bien rendus
	markdownContent = markdownContent.replace(/\n\n/g, '\n \n');

	// Préserver les espaces multiples
	markdownContent = markdownContent.replace(/ +/g, match => ' '.repeat(match.length));

	resultsSection.classList.remove('hidden');
	analysisResult.innerHTML = marked.parse(markdownContent);

	// Animation douce pour le scroll
	resultsSection.scrollIntoView({
	behavior: 'smooth',
	block: 'start'
	});
	} catch (error) {
	alert('Erreur lors de l\'analyse: ' + error.message);
	} finally {
	submitBtn.disabled = false;
	submitBtn.innerHTML = '🚀 Soumettre';
	}
	}

	window.removeImage = removeImage;
	});
	</script>
	</body>
	</html>