Update templates/index.html

templates/index.html

@@ -5,14 +5,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mariam AI - Analyse d'Image</title>
-    <!-- CDN pour Tailwind CSS pour le style -->
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
-    <!-- CDN pour Marked pour convertir le Markdown en HTML -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
-    <!-- CDN pour SweetAlert2 pour des popups plus sympas -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.32/sweetalert2.all.min.js"></script>
-    <!-- CDN pour Moment.js pour formater les dates -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
+    <!-- CDN pour Tailwind CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
+    <!-- CDN pour Marked -->
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <!-- CDN pour SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- CDN pour Moment.js -->
+    <script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
     <style>
         /* Styles pour le loader */
         .loader {
@@ -250,7 +250,6 @@
         <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
             <div class="bg-white rounded-lg shadow p-6 mb-8">
                 <form id="uploadForm" class="space-y-6">
-                    <!-- Zone de téléchargement d'image -->
                     <div class="upload-zone rounded-lg p-8 text-center">
                         <input type="file" id="imageInput" accept="image/*" required class="hidden"
                             onchange="handleImageSelect()">
@@ -268,7 +267,6 @@
                         </label>
                     </div>
 
-                    <!-- Prévisualisation de l'image -->
                     <div id="imagePreview" class="hidden image-preview-container">
                         <img id="preview" src="#" alt="Prévisualisation">
                         <button type="button" class="remove-image" onclick="removeImage()">
@@ -279,7 +277,6 @@
                         </button>
                     </div>
 
-                    <!-- Bouton de soumission du formulaire -->
                     <div class="flex justify-center">
                         <button type="submit"
                             class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
@@ -289,7 +286,6 @@
                 </form>
             </div>
 
-            <!-- Indicateur de chargement -->
             <div id="loading" class="hidden">
                 <div class="flex flex-col items-center justify-center space-y-4">
                     <span class="loader"></span>
@@ -297,20 +293,17 @@
                 </div>
             </div>
 
-            <!-- Section des résultats -->
             <div id="results" class="space-y-8 hidden">
-                <!-- Boutons pour changer d'onglet -->
                 <div class="tab-buttons">
                     <button id="showDissertation" class="active">Dissertation</button>
                     <button id="showTableau">Tableau d'analyse</button>
                     <button id="showBackups">Sauvegardes</button>
                 </div>
 
-                <!-- Onglet Dissertation -->
                 <div id="dissertationTab" class="tab-content active 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">
-                        <!-- Le contenu de la dissertation sera affiché ici -->
+                       
                     </div>
                     <button id="saveDissertation"
                         class="mt-4 px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200">
@@ -318,11 +311,10 @@
                     </button>
                 </div>
 
-                <!-- Onglet Tableau d'analyse -->
                 <div id="tableauTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
                     <h2 class="text-2xl font-bold text-gray-900 mb-4">Tableau d'analyse</h2>
                     <div id="tableauResult" class="markdown-content">
-                        <!-- Le contenu du tableau sera affiché ici -->
+                       
                     </div>
                     <button id="saveTableau"
                         class="mt-4 px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200">
@@ -330,23 +322,25 @@
                     </button>
                 </div>
 
-                <!-- Onglet Sauvegardes -->
                 <div id="backupsTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
                     <h2 class="text-2xl font-bold text-gray-900 mb-4">Sauvegardes locales</h2>
                     <ul id="backupList" class="space-y-2">
-                        <!-- La liste des sauvegardes sera affichée ici -->
+                       
                     </ul>
                 </div>
+
             </div>
         </main>
     </div>
 
     <script>
-        let tableauContent = '';
-        let dissertationContent = '';
-        let backups = loadBackups();
+      //  ...(Le JavaScript de la réponse précédente va ici)
+   
+    let tableauContent = '';
+let dissertationContent = '';
+let backups = loadBackups();
 
-        function handleImageSelect() {
+function handleImageSelect() {
     const input = document.getElementById('imageInput');
     const preview = document.getElementById('preview');
     const previewContainer = document.getElementById('imagePreview');
@@ -358,8 +352,7 @@
         reader.onload = function (e) {
             preview.src = e.target.result;
             previewContainer.classList.remove('hidden');
-            // Déplacer l'ajout de la classe fade-in ICI, après le chargement de l'image
-            previewContainer.classList.add('fade-in'); 
+            previewContainer.classList.add('fade-in');
         };
 
         reader.readAsDataURL(input.files[0]);
@@ -367,234 +360,224 @@
     } else {
         removeImage();
     }
-        }
-
-        // Fonction pour supprimer l'image prévisualisée
-        function removeImage() {
-            const input = document.getElementById('imageInput');
-            const preview = document.getElementById('preview');
-            const previewContainer = document.getElementById('imagePreview');
-            const fileName = document.getElementById('fileName');
-
-            input.value = '';
-            preview.src = '#';
-            previewContainer.classList.add('hidden');
-            fileName.textContent = 'Cliquez ou glissez une image ici';
-        }
-
-        // Fonction pour afficher un indicateur de scroll horizontal si nécessaire
-        function showScrollIndicator(container) {
-            if (container.scrollWidth > container.clientWidth) {
-                const indicator = document.createElement('div');
-                indicator.className = 'scroll-indicator visible';
-                indicator.textContent = '← Faites défiler →';
-                container.parentElement.appendChild(indicator);
-
-                setTimeout(() => {
-                    indicator.classList.remove('visible');
-                }, 3000);
-
-                container.addEventListener('scroll', () => {
-                    if (container.scrollLeft > 0) {
-                        indicator.classList.add('visible');
-                    } else {
-                        indicator.classList.remove('visible');
-                    }
-
-                    clearTimeout(container.scrollTimeout);
-                    container.scrollTimeout = setTimeout(() => {
-                        indicator.classList.remove('visible');
-                    }, 1000);
-                });
-            }
-        }
-
-        // Gestion des clics sur les onglets
-        document.getElementById('showTableau').addEventListener('click, () => {
-            showTab('tableau');
-            renderTableauContent(); // Rendre le contenu du tableau Markdown
-        });
-
-        document.getElementById('showDissertation').addEventListener('click', () => {
-            showTab('dissertation');
-        });
-
-        document.getElementById('showBackups').addEventListener('click', () => {
-            showTab('backups');
-            updateBackupList(); // Mettre à jour la liste des sauvegardes
-        });
+}
 
-        // Fonction pour afficher l'onglet sélectionné
-        function showTab(tabName) {
-            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
-            document.querySelectorAll('.tab-buttons button').forEach(button => button.classList.remove('active'));
-
-            document.getElementById(`${tabName}Tab`).classList.add('active');
-            document.getElementById(`show${tabName.charAt(0).toUpperCase() + tabName.slice(1)}`).classList.add('active');
-        }
+function removeImage() {
+    const input = document.getElementById('imageInput');
+    const preview = document.getElementById('preview');
+    const previewContainer = document.getElementById('imagePreview');
+    const fileName = document.getElementById('fileName');
 
-        // Fonctions pour gérer les sauvegardes locales
-        function loadBackups() {
-            try {
-                const storedBackups = localStorage.getItem('mariamAIBackups');
-                return storedBackups ? JSON.parse(storedBackups) : [];
-            } catch (error) {
-                console.error("Erreur lors du chargement des sauvegardes :", error);
-                return [];
+    input.value = '';
+    preview.src = '#';
+    previewContainer.classList.add('hidden');
+    fileName.textContent = 'Cliquez ou glissez une image ici';
+}
+
+function showScrollIndicator(container) {
+    if (container.scrollWidth > container.clientWidth) {
+        const indicator = document.createElement('div');
+        indicator.className = 'scroll-indicator visible';
+        indicator.textContent = '← Faites défiler →';
+        container.parentElement.appendChild(indicator);
+
+        setTimeout(() => {
+            indicator.classList.remove('visible');
+        }, 3000);
+
+        container.addEventListener('scroll', () => {
+            if (container.scrollLeft > 0) {
+                indicator.classList.add('visible');
+            } else {
+                indicator.classList.remove('visible');
             }
-        }
 
-        function saveBackup(type, content) {
-            const timestamp = moment().format('YYYY-MM-DD HH:mm:ss');
-            backups.push({ timestamp, type, content });
+            clearTimeout(container.scrollTimeout);
+            container.scrollTimeout = setTimeout(() => {
+                indicator.classList.remove('visible');
+            }, 1000);
+        });
+    }
+}
+
+document.getElementById('showTableau').addEventListener('click', () => {
+    showTab('tableau');
+    renderTableauContent();
+});
+
+document.getElementById('showDissertation').addEventListener('click', () => {
+    showTab('dissertation');
+});
+
+document.getElementById('showBackups').addEventListener('click', () => {
+    showTab('backups');
+    updateBackupList();
+});
+
+function showTab(tabName) {
+    document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
+    document.querySelectorAll('.tab-buttons button').forEach(button => button.classList.remove('active'));
+
+    document.getElementById(`${tabName}Tab`).classList.add('active');
+    document.getElementById(`show${tabName.charAt(0).toUpperCase() + tabName.slice(1)}`).classList.add('active');
+}
+
+function loadBackups() {
+    try {
+        const storedBackups = localStorage.getItem('mariamAIBackups');
+        return storedBackups ? JSON.parse(storedBackups) : [];
+    } catch (error) {
+        console.error("Erreur lors du chargement des sauvegardes :", error);
+        return [];
+    }
+}
+
+function saveBackup(type, content) {
+    const timestamp = moment().format('YYYY-MM-DD HH:mm:ss');
+    backups.push({ timestamp, type, content });
+    localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
+    updateBackupList();
+    Swal.fire({
+        icon: 'success',
+        title: 'Sauvegarde réussie!',
+    });
+}
+
+function updateBackupList() {
+    const backupList = document.getElementById('backupList');
+    backupList.innerHTML = '';
+
+    backups.forEach((backup, index) => {
+        const listItem = document.createElement('li');
+        listItem.innerHTML = `
+            <span>${backup.type === 'dissertation' ? 'Dissertation' : 'Tableau'} - ${backup.timestamp}</span>
+            <div>
+                <button data-index="${index}" class="view-backup bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs">Voir</button>
+                <button data-index="${index}" class="delete-backup bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded text-xs">Supprimer</button>
+            </div>
+        `;
+        backupList.appendChild(listItem);
+
+        listItem.querySelector('.view-backup').addEventListener('click', viewBackup);
+        listItem.querySelector('.delete-backup').addEventListener('click', deleteBackup);
+    });
+}
+
+function viewBackup(event) {
+    const index = event.target.dataset.index;
+    const backup = backups[index];
+
+    Swal.fire({
+        title: backup.type === 'dissertation' ? 'Dissertation sauvegardée' : 'Tableau sauvegardé',
+        html: marked.parse(backup.content),
+        width: '90%',
+        customClass: {
+            htmlContainer: 'markdown-content'
+        },
+        didRender: () => {
+            const container = document.querySelector('.markdown-content');
+            showScrollIndicator(container);
+        }
+    });
+}
+
+function deleteBackup(event) {
+    const index = event.target.dataset.index;
+    Swal.fire({
+        title: 'Êtes-vous sûr?',
+        text: "Vous ne pourrez pas revenir en arrière !",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Oui, supprimer!'
+    }).then((result) => {
+        if (result.isConfirmed) {
+            backups.splice(index, 1);
             localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
-            updateBackupList(); // Mettre à jour la liste des sauvegardes après sauvegarde
-            Swal.fire({
-                icon: 'success',
-                title: 'Sauvegarde réussie!',
-            });
-        }
-
-        function updateBackupList() {
-            const backupList = document.getElementById('backupList');
-            backupList.innerHTML = ''; // Effacer la liste actuelle
-
-            backups.forEach((backup, index) => {
-                const listItem = document.createElement('li');
-                listItem.innerHTML = `
-                    <span>${backup.type === 'dissertation' ? 'Dissertation' : 'Tableau'} - ${backup.timestamp}</span>
-                    <div>
-                        <button data-index="${index}" class="view-backup bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs">Voir</button>
-                        <button data-index="${index}" class="delete-backup bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded text-xs">Supprimer</button>
-                    </div>
-                `;
-                backupList.appendChild(listItem);
-
-                // Ajouter des écouteurs d'événements pour les boutons "Voir" et "Supprimer"
-                listItem.querySelector('.view-backup').addEventListener('click', viewBackup);
-                listItem.querySelector('.delete-backup').addEventListener('click', deleteBackup);
-
-            });
-        }
-
-
+            updateBackupList();
+            Swal.fire(
+                'Supprimé!',
+                'Votre fichier a été supprimé.',
+                'success'
+            )
+        }
+    });
+}
+
+document.getElementById('saveDissertation').addEventListener('click', () => {
+    saveBackup('dissertation', dissertationContent);
+});
+
+document.getElementById('saveTableau').addEventListener('click', () => {
+    saveBackup('tableau', tableauContent);
+});
+
+document.getElementById('uploadForm').addEventListener('submit', async (e) => {
+    e.preventDefault();
+
+    const imageInput = document.getElementById('imageInput');
+    if (!imageInput.files || !imageInput.files[0]) {
+        Swal.fire({
+            icon: 'error',
+            title: 'Aucune image sélectionnée',
+            text: 'Veuillez sélectionner une image à analyser.',
+        });
+        return;
+    }
 
-        function viewBackup(event) {
-            const index = event.target.dataset.index;
-            const backup = backups[index];
+    const loading = document.getElementById('loading');
+    const results = document.getElementById('results');
+    const dissertationResult = document.getElementById('dissertationResult');
 
-            Swal.fire({
-                title: backup.type === 'dissertation' ? 'Dissertation sauvegardée' : 'Tableau sauvegardé',
-                html: marked.parse(backup.content), // Afficher le contenu Markdown
-                width: '90%',
-                customClass: {
-                    htmlContainer: 'markdown-content' // Appliquer le style markdown
-                },
-                didRender: () => {
-                    const container = document.querySelector('.markdown-content');
-                    showScrollIndicator(container);
-                }
+    const formData = new FormData();
+    formData.append('image', imageInput.files[0]);
 
-            });
-        }
+    loading.classList.remove('hidden');
+    results.classList.add('hidden');
 
-        function deleteBackup(event) {
-            const index = event.target.dataset.index;
-            Swal.fire({
-                title: 'Êtes-vous sûr?',
-                text: "Vous ne pourrez pas revenir en arrière !",
-                icon: 'warning',
-                showCancelButton: true,
-                confirmButtonColor: '#3085d6',
-                cancelButtonColor: '#d33',
-                confirmButtonText: 'Oui, supprimer!'
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    backups.splice(index, 1);
-                    localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
-                    updateBackupList(); // mettre à jour l'affichage
-                    Swal.fire(
-                        'Supprimé!',
-                        'Votre fichier a été supprimé.',
-                        'success'
-                    )
-                }
-            })
+    try {
+        const response = await fetch('/analyze', {
+            method: 'POST',
+            body: formData
+        });
 
+        if (!response.ok) {
+            const errorData = await response.json();
+            const errorMessage = errorData.error || `Erreur serveur ${response.status}: ${response.statusText}`;
+            throw new Error(errorMessage);
         }
 
+        const data = await response.json();
+        dissertationContent = data.dissertation;
+        tableauContent = data.tableau;
 
+        dissertationResult.innerHTML = marked.parse(data.dissertation);
 
-        document.getElementById('saveDissertation').addEventListener('click', () => {
-            saveBackup('dissertation', dissertationContent);
-
-        });
-
-        document.getElementById('saveTableau').addEventListener('click', () => {
-            saveBackup('tableau', tableauContent);
-        });
+        results.classList.remove('hidden');
+        results.classList.add('fade-in');
+        showTab('dissertation');
 
-        // Fonction pour gérer la soumission du formulaire et l'analyse de l'image
-        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 tableauResult = document.getElementById('tableauResult');
-
-            const formData = new FormData();
-            formData.append('image', document.getElementById('imageInput').files[0]);
-
-            loading.classList.remove('hidden');
-            results.classList.add('hidden');
-
-            try {
-                const response = await fetch('/analyze', { // Remplacez '/analyze' par l'URL de votre endpoint
-                    method: 'POST',
-                    body: formData
-                });
-
-                const data = await response.json();
-
-                if (response.ok) {
-                    dissertationContent = data.dissertation;
-                    tableauContent = data.tableau;
-
-                    dissertationResult.innerHTML = marked.parse(data.dissertation); // Convertir en HTML
-                    // Ne pas afficher le tableau immédiatement, attendre que l'utilisateur clique sur l'onglet
-
-                    results.classList.remove('hidden');
-                    results.classList.add('fade-in');
-                    showTab('dissertation'); // Afficher l'onglet "dissertation" par défaut
-                } else {
-                    // Afficher une alerte d'erreur plus informative
-                    Swal.fire({
-                        icon: 'error',
-                        title: 'Erreur lors de l\'analyse',
-                        text: data.error || 'Une erreur est survenue lors du traitement de votre image. Veuillez réessayer.',
-                    });
-                }
-            } catch (error) {
-
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Erreur',
-                    text: 'Une erreur est survenue lors de la communication avec le serveur. Veuillez vérifier votre connexion internet et réessayer.',
-                });
-            } finally {
-                loading.classList.add('hidden');
-            }
+    } catch (error) {
+        console.error("Erreur lors de l'analyse :", error);
+        Swal.fire({
+            icon: 'error',
+            title: 'Erreur',
+            text: error.message || 'Une erreur est survenue lors de la communication avec le serveur.',
         });
 
-        function renderTableauContent() {
-            const tableauResult = document.getElementById('tableauResult');
-            if (tableauContent) {
-                tableauResult.innerHTML = marked.parse(tableauContent);
-                showScrollIndicator(tableauResult);
-            }
-        }
+    } finally {
+        loading.classList.add('hidden');
+    }
+});
 
+function renderTableauContent() {
+    const tableauResult = document.getElementById('tableauResult');
+    if (tableauContent) {
+        tableauResult.innerHTML = marked.parse(tableauContent);
+        showScrollIndicator(tableauResult);
+    }
+}
     </script>
 </body>