Update templates/index.html

templates/index.html

@@ -4,509 +4,185 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI - Analyse d'Image</title>
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/3.3.2/tailwind.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.32/sweetalert2.all.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
     <style>
+        /* Animation de loader */
         .loader {
             width: 48px;
             height: 48px;
-            border: 5px solid #FFF;
-            border-bottom-color: #6366F1;
+            border: 5px solid #e5e7eb;
+            border-top-color: #4f46e5;
             border-radius: 50%;
-            display: inline-block;
-            box-sizing: border-box;
-            animation: rotation 1s linear infinite;
+            animation: spin 1s linear infinite;
         }
 
-        @keyframes rotation {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
         }
 
+        /* Animation de fade-in */
         .fade-in {
-            animation: fadeIn 0.5s ease-in;
+            animation: fadeIn 0.5s ease-in-out;
         }
 
         @keyframes fadeIn {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
-        }
-
-        .upload-zone {
-            border: 2px dashed #6366F1;
-            transition: all 0.3s ease;
-        }
-
-        .upload-zone:hover {
-            border-color: #4F46E5;
-            background-color: #EEF2FF;
-        }
-
-        .upload-zone.drag-over {
-            background-color: #EEF2FF;
-            border-color: #4F46E5;
-            transform: scale(1.02);
-        }
-
-        .preview-image {
-            max-height: 300px;
-            width: auto;
-            object-fit: contain;
-        }
-
-        /* Styles pour le tableau avec scroll horizontal */
-        .markdown-content {
-            overflow-x: auto;
-            padding-bottom: 1rem;
-        }
-
-        .markdown-content table {
-            border-collapse: collapse;
-            min-width: 100%;
-            width: max-content;
-            margin: 1rem 0;
-        }
-
-        .markdown-content th,
-        .markdown-content td {
-            border: 1px solid #e5e7eb;
-            padding: 0.75rem;
-            text-align: left;
-            white-space: nowrap;
-            min-width: 150px;
-        }
-
-        .markdown-content th {
-            background-color: #f9fafb;
-            position: sticky;
-            top: 0;
-            z-index: 10;
-            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-        }
-
-        /* Styles pour la scrollbar */
-        .custom-scrollbar::-webkit-scrollbar {
-            height: 8px;
-            width: 8px;
-        }
-
-        .custom-scrollbar::-webkit-scrollbar-track {
-            background: #f1f1f1;
-            border-radius: 4px;
-        }
-
-        .custom-scrollbar::-webkit-scrollbar-thumb {
-            background: #6366F1;
-            border-radius: 4px;
-        }
-
-        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-            background: #4F46E5;
-        }
-
-        /* Progress bar */
-        .progress-bar {
-            height: 4px;
-            background-color: #E5E7EB;
-            border-radius: 2px;
-            overflow: hidden;
-        }
-
-        .progress-value {
-            height: 100%;
-            background-color: #6366F1;
-            transition: width 0.3s ease;
+            from {
+                opacity: 0;
+            }
+            to {
+                opacity: 1;
+            }
         }
     </style>
 </head>
-<body class="bg-gray-50">
-    <div class="min-h-screen">
-        <!-- Header -->
-        <header class="bg-white shadow-sm">
-            <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
-                <h1 class="text-3xl font-bold text-indigo-600">Mariam AI</h1>
-                <p class="mt-1 text-sm text-gray-500">Assistant pour commentaire composé</p>
-            </div>
-        </header>
+<body class="bg-gray-50 text-gray-800 min-h-screen flex flex-col">
+
+    <!-- Header -->
+    <header class="bg-white shadow-md">
+        <div class="max-w-7xl mx-auto px-4 py-6">
+            <h1 class="text-4xl font-extrabold text-indigo-600">Mariam AI</h1>
+            <p class="mt-2 text-sm text-gray-500">Un assistant intelligent pour l'analyse d'image et la rédaction de dissertations.</p>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex items-center justify-center px-4 py-8">
+        <div class="bg-white shadow-lg rounded-lg w-full max-w-3xl p-8 space-y-8">
 
-        <!-- Main content -->
-        <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
             <!-- Upload Section -->
-            <div class="bg-white rounded-lg shadow p-6 mb-8">
-                <form id="uploadForm" class="space-y-6">
-                    <div class="upload-zone rounded-lg p-8 text-center relative">
-                        <input type="file" id="imageInput" accept="image/*" required class="hidden">
-                        <label for="imageInput" class="cursor-pointer block">
-                            <div id="dropZone" class="space-y-4">
-                                <!-- Icon container -->
-                                <div id="uploadIcon" class="transition-all duration-200">
-                                    <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                                              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
-                                    </svg>
-                                    <p id="fileName" class="mt-2 text-sm text-gray-500">
-                                        Cliquez ou glissez une image ici
-                                    </p>
-                                </div>
-                                
-                                <!-- Preview container -->
-                                <div id="previewContainer" class="hidden flex flex-col items-center space-y-4">
-                                    <img id="imagePreview" class="preview-image rounded-lg shadow-md" src="" alt="Prévisualisation">
-                                    <button type="button" id="removeImage" class="text-sm text-red-500 hover:text-red-700">
-                                        Supprimer l'image
-                                    </button>
-                                </div>
-                            </div>
+            <div>
+                <h2 class="text-2xl font-semibold text-gray-900">Téléversez votre image</h2>
+                <p class="text-sm text-gray-500">Glissez et déposez une image ou cliquez pour choisir un fichier à analyser.</p>
+                <form id="uploadForm" class="space-y-4 mt-4">
+                    <div class="upload-zone border-2 border-dashed border-indigo-500 rounded-lg p-6 text-center transition hover:bg-indigo-50">
+                        <input type="file" id="imageInput" accept="image/*" required class="hidden" onchange="handleImageUpload()">
+                        <label for="imageInput" class="cursor-pointer">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M4 16l4-4a3 3 0 014 0l4 4m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                            </svg>
+                            <span id="fileName" class="block mt-2 text-sm text-gray-600">Cliquez ou glissez une image ici</span>
                         </label>
                     </div>
 
-                    <!-- Progress bar -->
-                    <div id="progressContainer" class="hidden">
-                        <div class="flex justify-between text-sm text-gray-600 mb-1">
-                            <span>Progression</span>
-                            <span id="progressText">0%</span>
-                        </div>
-                        <div class="progress-bar">
-                            <div id="progressValue" class="progress-value" style="width: 0%"></div>
-                        </div>
+                    <!-- Image Preview -->
+                    <div id="imagePreviewContainer" class="hidden mt-4 text-center">
+                        <h3 class="text-lg font-semibold text-gray-800 mb-2">Aperçu de l'image :</h3>
+                        <img id="imagePreview" src="" alt="Aperçu de l'image" class="mx-auto max-w-xs rounded-lg shadow">
                     </div>
 
-                    <div class="flex justify-center">
-                        <button type="submit" id="analyzeButton" disabled
-                                class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-400 cursor-not-allowed transition-colors duration-200">
+                    <div class="text-center">
+                        <button type="submit" class="w-full sm:w-auto px-6 py-3 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 transition">
                             Analyser l'image
                         </button>
                     </div>
                 </form>
             </div>
 
-            <!-- Loading indicator -->
-            <div id="loading" class="hidden">
-                <div class="flex flex-col items-center justify-center space-y-4">
-                    <span class="loader"></span>
-                    <p class="text-gray-500">Analyse en cours, veuillez patienter...</p>
-                </div>
+            <!-- Loading Indicator -->
+            <div id="loading" class="hidden text-center space-y-4">
+                <div class="loader mx-auto"></div>
+                <p class="text-gray-500">Analyse en cours, veuillez patienter...</p>
             </div>
 
             <!-- Results Section -->
-            <div id="results" class="space-y-8 hidden">
-                <div class="flex justify-center space-x-4">
-                    <button id="showTableau" 
-                            class="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors duration-200">
+            <div id="results" class="hidden space-y-6 fade-in">
+                <!-- Dissertation -->
+                <div class="bg-gray-50 rounded-lg p-6 shadow">
+                    <h2 class="text-xl font-bold text-gray-800">Dissertation</h2>
+                    <div id="dissertationResult" class="prose prose-indigo max-w-none mt-4"></div>
+                </div>
+                <!-- Tableau Button -->
+                <div class="text-center">
+                    <button id="showTableau" class="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition">
                         Voir le tableau d'analyse
                     </button>
-                    <button id="downloadPDF" 
-                            class="px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200">
-                        Télécharger en PDF
-                    </button>
-                </div>
-
-                <!-- Dissertation -->
-                <div class="bg-white rounded-lg shadow p-6">
-                    <h2 class="text-2xl font-bold text-gray-900 mb-4">Dissertation</h2>
-                    <div id="dissertationResult" class="prose max-w-none markdown-content custom-scrollbar">
-                    </div>
                 </div>
             </div>
-        </main>
-    </div>
+        </div>
+    </main>
 
     <script>
         let tableauContent = '';
-        const dropZone = document.getElementById('dropZone');
-        const imageInput = document.getElementById('imageInput');
-        const fileName = document.getElementById('fileName');
-        const uploadIcon = document.getElementById('uploadIcon');
-        const previewContainer = document.getElementById('previewContainer');
-        const imagePreview = document.getElementById('imagePreview');
-        const removeImage = document.getElementById('removeImage');
-        const analyzeButton = document.getElementById('analyzeButton');
-        const progressContainer = document.getElementById('progressContainer');
-        const progressValue = document.getElementById('progressValue');
-        const progressText = document.getElementById('progressText');
 
-        // Fonctions de drag & drop
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            dropZone.addEventListener(eventName, preventDefaults, false);
-            document.body.addEventListener(eventName, preventDefaults, false);
-        });
-
-        ['dragenter', 'dragover'].forEach(eventName => {
-            dropZone.addEventListener(eventName, highlight, false);
-        });
-
-        ['dragleave', 'drop'].forEach(eventName => {
-            dropZone.addEventListener(eventName, unhighlight, false);
-        });
-
-        dropZone.addEventListener('drop', handleDrop, false);
-
-        function preventDefaults(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-
-        function highlight(e) {
-            dropZone.classList.add('drag-over');
-        }
-
-        function unhighlight(e) {
-            dropZone.classList.remove('drag-over');
-        }
-
-        function handleDrop(e) {
-            const dt = e.dataTransfer;
-            const files = dt.files;
-
-            if (files.length > 0 && files[0].type.startsWith('image/')) {
-                imageInput.files = files;
-                updateImagePreview(files[0]);
+        // Met à jour le nom du fichier téléversé et affiche un aperçu de l'image
+        function handleImageUpload() {
+            const input = document.getElementById('imageInput');
+            const fileName = document.getElementById('fileName');
+            const previewContainer = document.getElementById('imagePreviewContainer');
+            const imagePreview = document.getElementById('imagePreview');
+
+            if (input.files.length > 0) {
+                const file = input.files[0];
+                fileName.textContent = file.name;
+
+                // Vérifie si le fichier est une image et génère l'aperçu
+                if (file.type.startsWith('image/')) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        imagePreview.src = e.target.result;
+                        previewContainer.classList.remove('hidden');
+                    };
+                    reader.readAsDataURL(file);
+                } else {
+                    previewContainer.classList.add('hidden');
+                    imagePreview.src = '';
+                    Swal.fire('Erreur', 'Veuillez téléverser un fichier image valide.', 'error');
+                }
             } else {
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Type de fichier non valide',
-                    text: 'Veuillez sélectionner une image'
-                });
-            }
-        }
-
-        // Gestion de la prévisualisation
-        imageInput.addEventListener('change', (e) => {
-            if (e.target.files.length > 0) {
-                updateImagePreview(e.target.files[0]);
-            }
-        });
-
-        function updateImagePreview(file) {
-            if (file.type.startsWith('image/')) {
-                const reader = new FileReader();
-                reader.onload = (e) => {
-                    imagePreview.src = e.target.result;
-                    uploadIcon.classList.add('hidden');
-                    previewContainer.classList.remove('hidden');
-                    analyzeButton.disabled = false;
-                    analyzeButton.classList.remove('bg
-
--gray-400', 'cursor-not-allowed');
-                    analyzeButton.classList.add('bg-indigo-600', 'hover:bg-indigo-700');
-                };
-                reader.readAsDataURL(file);
+                previewContainer.classList.add('hidden');
+                imagePreview.src = '';
+                fileName.textContent = 'Cliquez ou glissez une image ici';
             }
         }
 
-        removeImage.addEventListener('click', (e) => {
-            e.preventDefault();
-            imageInput.value = '';
-            imagePreview.src = '';
-            uploadIcon.classList.remove('hidden');
-            previewContainer.classList.add('hidden');
-            analyzeButton.disabled = true;
-            analyzeButton.classList.remove('bg-indigo-600', 'hover:bg-indigo-700');
-            analyzeButton.classList.add('bg-gray-400', 'cursor-not-allowed');
+        // Affiche le tableau dans une popup
+        document.getElementById('showTableau').addEventListener('click', () => {
+            Swal.fire({
+                title: 'Tableau d\'analyse',
+                html: marked.parse(tableauContent),
+                width: '80%',
+                customClass: {
+                    htmlContainer: 'prose prose-indigo max-w-none'
+                }
+            });
         });
 
-        // Gestion de l'upload et de l'analyse
+        // Gestion du formulaire de téléversement
         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
             e.preventDefault();
-            
             const loading = document.getElementById('loading');
             const results = document.getElementById('results');
             const dissertationResult = document.getElementById('dissertationResult');
-            
             const formData = new FormData();
-            formData.append('image', imageInput.files[0]);
-            
+            formData.append('image', document.getElementById('imageInput').files[0]);
+
             loading.classList.remove('hidden');
             results.classList.add('hidden');
-            progressContainer.classList.remove('hidden');
-            
+
             try {
                 const response = await fetch('/analyze', {
                     method: 'POST',
-                    body: formData,
-                    onUploadProgress: (progressEvent) => {
-                        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
-                        progressValue.style.width = `${percentCompleted}%`;
-                        progressText.textContent = `${percentCompleted}%`;
-                    }
+                    body: formData
                 });
-                
+
                 const data = await response.json();
-                
                 if (response.ok) {
                     tableauContent = data.tableau;
                     dissertationResult.innerHTML = marked.parse(data.dissertation);
                     results.classList.remove('hidden');
-                    results.classList.add('fade-in');
                 } else {
-                    Swal.fire({
-                        icon: 'error',
-                        title: 'Erreur',
-                        text: data.error || 'Une erreur est survenue lors de l\'analyse'
-                    });
+                    Swal.fire('Erreur', data.error, 'error');
                 }
             } catch (error) {
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Erreur',
-                    text: 'Une erreur est survenue lors de l\'analyse'
-                });
+                Swal.fire('Erreur', 'Une erreur est survenue lors de l\'analyse.', 'error');
             } finally {
                 loading.classList.add('hidden');
-                progressContainer.classList.add('hidden');
-                progressValue.style.width = '0%';
-                progressText.textContent = '0%';
             }
         });
-
-        // Gestion de l'affichage du tableau
-        document.getElementById('showTableau').addEventListener('click', () => {
-            Swal.fire({
-                title: 'Tableau d\'analyse',
-                html: marked.parse(tableauContent),
-                width: '90%',
-                customClass: {
-                    htmlContainer: 'markdown-content custom-scrollbar'
-                },
-                didRender: () => {
-                    const container = document.querySelector('.markdown-content');
-                  if (container.scrollWidth > container.clientWidth) {
-                        // Ajouter des indicateurs de défilement
-                        const scrollIndicator = document.createElement('div');
-                        scrollIndicator.className = 'fixed bottom-4 right-4 bg-indigo-600 text-white px-3 py-2 rounded-md shadow-lg opacity-0 transition-opacity duration-300';
-                        scrollIndicator.textContent = '← Faites défiler →';
-                        document.body.appendChild(scrollIndicator);
-
-                        // Gérer la visibilité de l'indicateur de défilement
-                        let scrollTimeout;
-                        container.addEventListener('scroll', () => {
-                            scrollIndicator.style.opacity = '1';
-                            clearTimeout(scrollTimeout);
-                            scrollTimeout = setTimeout(() => {
-                                scrollIndicator.style.opacity = '0';
-                            }, 1500);
-                        });
-
-                        // Ajouter des ombres de défilement
-                        function updateScrollShadows() {
-                            const maxScroll = container.scrollWidth - container.clientWidth;
-                            const leftShadow = container.scrollLeft > 0 ? 
-                                'inset 10px 0 5px -5px rgba(0,0,0,0.1)' : '';
-                            const rightShadow = container.scrollLeft < maxScroll ? 
-                                'inset -10px 0 5px -5px rgba(0,0,0,0.1)' : '';
-                            
-                            container.style.boxShadow = [leftShadow, rightShadow]
-                                .filter(Boolean)
-                                .join(', ');
-                        }
-
-                        container.addEventListener('scroll', updateScrollShadows);
-                        updateScrollShadows(); // Initial call
-                    }
-                }
-            });
-        });
-
-        // Gestion du téléchargement PDF
-        document.getElementById('downloadPDF').addEventListener('click', async () => {
-            try {
-                const loadingText = document.createElement('div');
-                loadingText.className = 'fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded-lg shadow-xl z-50';
-                loadingText.innerHTML = `
-                    <div class="flex flex-col items-center space-y-4">
-                        <span class="loader"></span>
-                        <p class="text-gray-600">Génération du PDF en cours...</p>
-                    </div>
-                `;
-                document.body.appendChild(loadingText);
-
-                // Préparer les données pour le PDF
-                const pdfData = {
-                    dissertation: marked.parse(document.getElementById('dissertationResult').innerHTML),
-                    tableau: tableauContent,
-                    imageData: imagePreview.src
-                };
-
-                // Appel à l'API pour générer le PDF
-                const response = await fetch('/generate-pdf', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify(pdfData)
-                });
-
-                if (!response.ok) throw new Error('Erreur lors de la génération du PDF');
-
-                // Télécharger le PDF
-                const blob = await response.blob();
-                const url = window.URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = 'analyse-mariam-ai.pdf';
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-                window.URL.revokeObjectURL(url);
-
-                Swal.fire({
-                    icon: 'success',
-                    title: 'PDF généré avec succès',
-                    text: 'Le téléchargement devrait commencer automatiquement'
-                });
-            } catch (error) {
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Erreur',
-                    text: 'Une erreur est survenue lors de la génération du PDF'
-                });
-            } finally {
-                const loadingText = document.querySelector('.fixed.top-1/2');
-                if (loadingText) document.body.removeChild(loadingText);
-            }
-        });
-
-        // Amélioration de l'accessibilité
-        const setupAccessibility = () => {
-            // Ajouter des attributs ARIA
-            const dropZone = document.querySelector('.upload-zone');
-            dropZone.setAttribute('role', 'button');
-            dropZone.setAttribute('aria-label', 'Zone de dépôt d\'image. Cliquez ou glissez une image ici.');
-
-            // Gestion du clavier
-            dropZone.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    imageInput.click();
-                }
-            });
-
-            // Messages d'aide pour les lecteurs d'écran
-            const addAriaLive = () => {
-                const liveRegion = document.createElement('div');
-                liveRegion.setAttribute('aria-live', 'polite');
-                liveRegion.setAttribute('aria-atomic', 'true');
-                liveRegion.className = 'sr-only';
-                document.body.appendChild(liveRegion);
-
-                return (message) => {
-                    liveRegion.textContent = message;
-                };
-            };
-
-            const announce = addAriaLive();
-
-            // Annoncer les événements importants
-            imageInput.addEventListener('change', () => {
-                if (imageInput.files.length > 0) {
-                    announce('Image sélectionnée : ' + imageInput.files[0].name);
-                }
-            });
-        };
-
-        // Initialisation de l'accessibilité au chargement
-        document.addEventListener('DOMContentLoaded', setupAccessibility);
     </script>
 </body>
 </html>