Spaces:

Docfile
/

M-anglais

Running

App Files Files Community

Docfile commited on Jan 28

Commit

c62db4e

verified ·

1 Parent(s): 099fcfc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +104 -88

templates/index.html CHANGED Viewed

@@ -13,20 +13,12 @@
                     colors: {
                         primary: '#4CAF50',
                         'primary-dark': '#3e8e41',
-                    },
-                    typography: {
-                        DEFAULT: {
-                            css: {
-                                maxWidth: 'none',
-                            },
-                        },
-                    },
                 }
             }
         }
     </script>
     <style>
-        /* Styles spécifiques pour le Markdown */
         .markdown-content {
             width: 100%;
             overflow-wrap: break-word;
@@ -52,73 +44,78 @@
             font-family: ui-monospace, monospace;
         }
-        .markdown-content p {
-            margin: 1rem 0;
-            line-height: 1.7;
         }
-        .markdown-content h1,
-        .markdown-content h2,
-        .markdown-content h3,
-        .markdown-content h4 {
-            font-weight: bold;
-            margin: 1.5rem 0 1rem 0;
-            line-height: 1.3;
-        }
-        .markdown-content h1 { font-size: 1.875rem; }
-        .markdown-content h2 { font-size: 1.5rem; }
-        .markdown-content h3 { font-size: 1.25rem; }
-        .markdown-content h4 { font-size: 1.125rem; }
-        .markdown-content ul,
-        .markdown-content ol {
-            margin: 1rem 0;
-            padding-left: 1.5rem;
-        }
-        .markdown-content ul { list-style-type: disc; }
-        .markdown-content ol { list-style-type: decimal; }
-        .markdown-content li {
-            margin: 0.5rem 0;
-        }
-        .markdown-content blockquote {
-            border-left: 4px solid #e5e7eb;
-            padding-left: 1rem;
-            margin: 1rem 0;
-            color: #4b5563;
-        }
-        /* Ajustements pour mobile */
-        @media (max-width: 640px) {
-            .markdown-content {
-                font-size: 0.9375rem;
-            }
-            .markdown-content pre {
-                padding: 0.75rem;
-                font-size: 0.875rem;
-            }
-            .markdown-content h1 { font-size: 1.5rem; }
-            .markdown-content h2 { font-size: 1.25rem; }
-            .markdown-content h3 { font-size: 1.125rem; }
-            .markdown-content h4 { font-size: 1rem; }
         }
     </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
-    <!-- [Previous body content remains the same until the results section] -->
-    <!-- Results Section with improved Markdown support -->
-    <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="markdown-content"></div>
-    </div>
-    <!-- [Rest of the body content remains the same until the script section] -->
     <script>
         document.addEventListener('DOMContentLoaded', () => {
@@ -130,39 +127,62 @@
             let uploadedFiles = [];
-            // Configure marked options for better Markdown rendering
-            marked.setOptions({
-                breaks: true, // Enable line breaks
-                gfm: true, // Enable GitHub Flavored Markdown
-                headerIds: false, // Disable header IDs to prevent conflicts
-                mangle: false, // Disable mangling to prevent emoji issues
-                smartLists: true, // Enable smart lists
-                smartypants: true, // Enable smart punctuation
-                xhtml: true // Enable XHTML output
-            });
-            // [Previous event listeners and functions remain the same]
             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) {
@@ -170,10 +190,7 @@
                     }
                     resultsSection.classList.remove('hidden');
-                    // Convert Markdown to HTML with proper spacing
                     analysisResult.innerHTML = marked.parse(data.result);
-                    // Scroll to results
                     resultsSection.scrollIntoView({ behavior: 'smooth' });
                 } catch (error) {
                     alert('Erreur lors de l\'analyse: ' + error.message);
@@ -183,7 +200,6 @@
                 }
             }
-            // Make removeImage function global
             window.removeImage = removeImage;
         });
     </script>

                     colors: {
                         primary: '#4CAF50',
                         'primary-dark': '#3e8e41',
+                    }
                 }
             }
         }
     </script>
     <style>
         .markdown-content {
             width: 100%;
             overflow-wrap: break-word;
             font-family: ui-monospace, monospace;
         }
+        @keyframes fadeIn {
+            from { opacity: 0; }
+            to { opacity: 1; }
         }
+        .animate-fade-in {
+            animation: fadeIn 1s ease-out;
         }
     </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">
+                ✨ 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-8">
+            <!-- Upload Section -->
+            <div class="bg-white rounded-xl 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"
+                    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>
+            <!-- Analysis Type Section -->
+            <div class="bg-white rounded-xl 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-xl 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="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', () => {
             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() {
+                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) {
                     }
                     resultsSection.classList.remove('hidden');
                     analysisResult.innerHTML = marked.parse(data.result);
                     resultsSection.scrollIntoView({ behavior: 'smooth' });
                 } catch (error) {
                     alert('Erreur lors de l\'analyse: ' + error.message);
                 }
             }
             window.removeImage = removeImage;
         });
     </script>