Mphilo3

Running

App Files Files Community

Docfile commited on Jan 28

Commit

112c759

verified ·

1 Parent(s): 6f57ff6

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +164 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,164 @@

+<!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>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#4CAF50',
+                        'primary-dark': '#3e8e41',
+                    }
+                }
+            }
+        }
+    </script>
+</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">
+            <h1 class="text-5xl font-bold text-primary mb-4 animate-fade-in">
+                ✨ Mariam Anglais ✨
+            </h1>
+            <p class="text-gray-600 text-lg">
+                Bienvenue ! 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-lg shadow-lg p-6">
+                <h2 class="text-2xl font-semibold text-primary mb-4">📷 Téléchargement d'images</h2>
+                <div class="upload-zone border-2 border-dashed border-primary rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 transition-colors">
+                    <input type="file" id="image-upload" multiple accept="image/*" class="hidden">
+                    <label for="image-upload" class="cursor-pointer">
+                        <svg class="mx-auto 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>
+                    </label>
+                </div>
+                <div id="preview-container" class="mt-4 grid grid-cols-2 gap-4"></div>
+            </div>
+            <!-- Analysis Type Section -->
+            <div class="bg-white rounded-lg shadow-lg p-6">
+                <h2 class="text-2xl font-semibold text-primary mb-4">🎛️ Choix du type d'analyse</h2>
+                <div class="space-y-4">
+                    <label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
+                        <input type="radio" name="analysis_type" value="text" class="h-4 w-4 text-primary">
+                        <span class="ml-3">🔍 Type 1: Analyse de Texte</span>
+                    </label>
+                    <label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
+                        <input type="radio" name="analysis_type" value="icon" class="h-4 w-4 text-primary">
+                        <span class="ml-3">🧠 Type 2: Document iconographique</span>
+                    </label>
+                </div>
+                <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>
+        <!-- Results Section -->
+        <div id="results" class="mt-12 bg-white rounded-lg shadow-lg p-6 hidden">
+            <h2 class="text-2xl font-semibold text-primary mb-4">📝 Résultat de l'analyse</h2>
+            <div id="analysis-result" class="prose max-w-none"></div>
+        </div>
+        <!-- Footer -->
+        <footer class="mt-12 text-center text-gray-600">
+            <hr class="mb-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');
+            let uploadedFiles = [];
+            imageUpload.addEventListener('change', handleFileSelect);
+            submitBtn.addEventListener('click', handleSubmit);
+            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">
+                        <button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600">
+                            <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>
+                    `;
+                    previewContainer.appendChild(preview);
+                });
+                submitBtn.disabled = uploadedFiles.length === 0;
+            }
+            function removeImage(index) {
+                uploadedFiles.splice(index, 1);
+                updatePreview();
+            }
+            async function handleSubmit() {
+                const formData = new FormData();
+                const analysisType = document.querySelector('input[name="analysis_type"]:checked')?.value;
+                if (!analysisType || uploadedFiles.length === 0) {
+                    alert('Veuillez sélectionner un type d\'analyse et au moins une image.');
+                    return;
+                }
+                formData.append('analysis_type', analysisType);
+                uploadedFiles.forEach(file => formData.append('images', file));
+                submitBtn.disabled = true;
+                submitBtn.innerHTML = 'Analyse en cours...';
+                try {
+                    const response = await fetch('/analyze', {
+                        method: 'POST',
+                        body: formData
+                    });
+                    const data = await response.json();
+                    if (data.error) {
+                        throw new Error(data.error);
+                    }
+                    resultsSection.classList.remove('hidden');
+                    analysisResult.innerHTML = data.result;
+                } catch (error) {
+                    alert('Erreur lors de l\'analyse: ' + error.message);
+                } finally {
+                    submitBtn.disabled = false;
+                    submitBtn.innerHTML = '🚀 Soumettre';
+                }
+            }
+            // Make removeImage function global
+            window.removeImage = removeImage;
+        });
+    </script>
+</body>
+</html>