Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Nov 26, 2024

Commit

1ab4a52

verified ·

1 Parent(s): 25804f6

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +190 -18

templates/index.html CHANGED Viewed

@@ -7,6 +7,7 @@
     <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/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>
     <style>
         .loader {
             width: 48px;
@@ -152,6 +153,64 @@
             background-color: #EF4444;
             color: white;
         }
     </style>
 </head>
 <body class="bg-gray-50">
@@ -166,7 +225,7 @@
         <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">
-                    <div class="upload-zone rounded-lg p-8 text-center">
                         <input type="file" id="imageInput" accept="image/*" required
                                class="hidden" onchange="handleImageSelect()">
                         <label for="imageInput" class="cursor-pointer">
@@ -208,17 +267,34 @@
             </div>
             <div id="results" class="space-y-8 hidden">
-                <div class="flex justify-center">
-                    <button id="showTableau"
-                            class="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors duration-200">
-                        Voir le tableau d'analyse
-                    </button>
                 </div>
-                <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">
                     </div>
                 </div>
             </div>
         </main>
@@ -226,6 +302,8 @@
     <script>
         let tableauContent = '';
         function handleImageSelect() {
             const input = document.getElementById('imageInput');
@@ -288,9 +366,76 @@
         }
         document.getElementById('showTableau').addEventListener('click', () => {
             Swal.fire({
-                title: 'Tableau d\'analyse',
-                html: marked.parse(tableauContent),
                 width: '90%',
                 customClass: {
                     htmlContainer: 'markdown-content'
@@ -298,25 +443,39 @@
                 didRender: () => {
                     const container = document.querySelector('.markdown-content');
                     showScrollIndicator(container);
-                    container.addEventListener('scroll', () => {
-                        const maxScroll = container.scrollWidth - container.clientWidth;
-                        container.style.boxShadow = container.scrollLeft > 0 ?
-                            'inset 10px 0 5px -5px rgba(0,0,0,0.1)' : '';
-                        container.style.boxShadow += container.scrollLeft < maxScroll ?
-                            ', inset -10px 0 5px -5px rgba(0,0,0,0.1)' : '';
-                    });
                 }
             });
         });
         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', document.getElementById('imageInput').files[0]);
@@ -332,10 +491,14 @@
                 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',
@@ -353,6 +516,15 @@
                 loading.classList.add('hidden');
             }
         });
     </script>
 </body>
 </html>

     <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/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://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
     <style>
         .loader {
             width: 48px;
             background-color: #EF4444;
             color: white;
         }
+        .tab-buttons {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 1rem;
+        }
+        .tab-buttons button {
+            margin: 0 0.5rem;
+            padding: 0.5rem 1rem;
+            border: 1px solid #6366F1;
+            background-color: #EEF2FF;
+            color: #6366F1;
+            border-radius: 0.25rem;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+        }
+        .tab-buttons button.active {
+            background-color: #6366F1;
+            color: white;
+        }
+        .tab-content {
+            display: none;
+        }
+        .tab-content.active {
+            display: block;
+        }
+        #backupList li {
+            margin-bottom: 0.5rem;
+            padding: 0.75rem;
+            border: 1px solid #e5e7eb;
+            border-radius: 0.25rem;
+            background-color: white;
+            cursor: pointer;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        #backupList li:hover {
+            background-color: #f9fafb;
+        }
+        #backupList .backup-date {
+            font-size: 0.8rem;
+            color: #9ca3af;
+        }
+        #backupList button {
+            padding: 0.25rem 0.5rem;
+            background-color: #EF4444;
+            color: white;
+            border-radius: 0.25rem;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
         <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">
+                                        <div class="upload-zone rounded-lg p-8 text-center">
                         <input type="file" id="imageInput" accept="image/*" required
                                class="hidden" onchange="handleImageSelect()">
                         <label for="imageInput" class="cursor-pointer">
             </div>
             <div id="results" class="space-y-8 hidden">
+                <div class="tab-buttons">
+                    <button id="showDissertation" class="active">Dissertation</button>
+                    <button id="showTableau">Tableau d'analyse</button>
+                    <button id="showBackups">Sauvegardes</button>
                 </div>
+                <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">
                     </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">
+                        Sauvegarder la dissertation
+                    </button>
+                </div>
+                <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">
+                    </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">
+                        Sauvegarder le tableau
+                    </button>
+                </div>
+                <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">
+                    </ul>
                 </div>
             </div>
         </main>
     <script>
         let tableauContent = '';
+        let dissertationContent = '';
+        let backups = loadBackups();
         function handleImageSelect() {
             const input = document.getElementById('imageInput');
         }
         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 class="backup-content">${backup.type === 'dissertation' ? 'Dissertation' : 'Tableau'} - ${backup.timestamp}</span>
+                    <div class="flex items-center space-x-2">
+                        <button data-index="${index}" class="view-backup bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Voir</button>
+                        <button data-index="${index}" class="delete-backup bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">Supprimer</button>
+                    </div>
+                `;
+                backupList.appendChild(listItem);
+            });
+            document.querySelectorAll('.view-backup').forEach(button => {
+                button.addEventListener('click', viewBackup);
+            });
+            document.querySelectorAll('.delete-backup').forEach(button => {
+                button.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;
+            backups.splice(index, 1);
+            localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
+            updateBackupList();
+            Swal.fire({
+                icon: 'success',
+                title: 'Suppression réussie!'
+            })
+        }
+        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 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]);
                 const data = await response.json();
                 if (response.ok) {
+                    dissertationContent = data.dissertation;
                     tableauContent = data.tableau;
                     dissertationResult.innerHTML = marked.parse(data.dissertation);
+                    tableauResult.innerHTML = marked.parse(data.tableau);
                     results.classList.remove('hidden');
                     results.classList.add('fade-in');
+                    showTab('dissertation'); // Afficher l'onglet dissertation par défaut après l'analyse
                 } else {
                     Swal.fire({
                         icon: 'error',
                 loading.classList.add('hidden');
             }
         });
+        function renderTableauContent() {
+            const tableauResult = document.getElementById('tableauResult');
+            if (tableauContent) {
+                tableauResult.innerHTML = marked.parse(tableauContent);
+                showScrollIndicator(tableauResult);
+            }
+        }
     </script>
 </body>
 </html>