Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Nov 24, 2024

Commit

25804f6

verified ·

1 Parent(s): ec7cc8e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +77 -22

templates/index.html CHANGED Viewed

@@ -43,16 +43,15 @@
             background-color: #EEF2FF;
         }
-        /* Styles améliorés pour le tableau avec scroll horizontal */
         .markdown-content {
             overflow-x: auto;
-            padding-bottom: 1rem; /* Espace pour la scrollbar */
         }
         .markdown-content table {
             border-collapse: collapse;
             min-width: 100%;
-            width: max-content; /* Permet au tableau de dépasser si nécessaire */
             margin: 1rem 0;
         }
@@ -61,8 +60,8 @@
             border: 1px solid #e5e7eb;
             padding: 0.75rem;
             text-align: left;
-            white-space: nowrap; /* Empêche le retour à la ligne */
-            min-width: 150px; /* Largeur minimum pour chaque cellule */
         }
         .markdown-content th {
@@ -73,7 +72,6 @@
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
         }
-        /* Style pour la scrollbar horizontale */
         .markdown-content::-webkit-scrollbar {
             height: 8px;
         }
@@ -92,7 +90,6 @@
             background: #4F46E5;
         }
-        /* Styles pour SweetAlert2 */
         .swal2-popup {
             width: 90% !important;
             max-width: 1200px !important;
@@ -103,7 +100,6 @@
             overflow-y: auto !important;
         }
-        /* Indicateur de défilement */
         .scroll-indicator {
             position: absolute;
             bottom: 20px;
@@ -121,12 +117,45 @@
         .scroll-indicator.visible {
             opacity: 1;
         }
     </style>
 </head>
 <body class="bg-gray-50">
-    <!-- [Le reste du HTML reste identique jusqu'au script] -->
     <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>
@@ -134,14 +163,12 @@
             </div>
         </header>
-        <!-- 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">
                         <input type="file" id="imageInput" accept="image/*" required
-                               class="hidden" onchange="updateFileName()">
                         <label for="imageInput" class="cursor-pointer">
                             <div class="space-y-2">
                                 <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -154,6 +181,16 @@
                             </div>
                         </label>
                     </div>
                     <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">
@@ -163,7 +200,6 @@
                 </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>
@@ -171,9 +207,7 @@
                 </div>
             </div>
-            <!-- Results Section -->
             <div id="results" class="space-y-8 hidden">
-                <!-- Tableau Button -->
                 <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">
@@ -181,7 +215,6 @@
                     </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">
@@ -194,16 +227,40 @@
     <script>
         let tableauContent = '';
-        function updateFileName() {
             const input = document.getElementById('imageInput');
             const fileName = document.getElementById('fileName');
-            if (input.files.length > 0) {
                 fileName.textContent = input.files[0].name;
             } else {
-                fileName.textContent = 'Cliquez ou glissez une image ici';
             }
         }
         function showScrollIndicator(container) {
             if (container.scrollWidth > container.clientWidth) {
                 const indicator = document.createElement('div');
@@ -222,7 +279,6 @@
                         indicator.classList.remove('visible');
                     }
-                    // Cache l'indicateur après 1 seconde de scroll
                     clearTimeout(container.scrollTimeout);
                     container.scrollTimeout = setTimeout(() => {
                         indicator.classList.remove('visible');
@@ -243,7 +299,6 @@
                     const container = document.querySelector('.markdown-content');
                     showScrollIndicator(container);
-                    // Ajout des ombres de défilement
                     container.addEventListener('scroll', () => {
                         const maxScroll = container.scrollWidth - container.clientWidth;
                         container.style.boxShadow = container.scrollLeft > 0 ?

             background-color: #EEF2FF;
         }
         .markdown-content {
             overflow-x: auto;
+            padding-bottom: 1rem;
         }
         .markdown-content table {
             border-collapse: collapse;
             min-width: 100%;
+            width: max-content;
             margin: 1rem 0;
         }
             border: 1px solid #e5e7eb;
             padding: 0.75rem;
             text-align: left;
+            white-space: nowrap;
+            min-width: 150px;
         }
         .markdown-content th {
             box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
         }
         .markdown-content::-webkit-scrollbar {
             height: 8px;
         }
             background: #4F46E5;
         }
         .swal2-popup {
             width: 90% !important;
             max-width: 1200px !important;
             overflow-y: auto !important;
         }
         .scroll-indicator {
             position: absolute;
             bottom: 20px;
         .scroll-indicator.visible {
             opacity: 1;
         }
+        /* Styles pour la prévisualisation de l'image */
+        .image-preview-container {
+            position: relative;
+            max-width: 100%;
+            margin: 1rem auto;
+            border-radius: 0.5rem;
+            overflow: hidden;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
+                       0 2px 4px -1px rgba(0, 0, 0, 0.06);
+        }
+        .image-preview-container img {
+            display: block;
+            max-width: 100%;
+            height: auto;
+            max-height: 400px;
+            object-fit: contain;
+        }
+        .remove-image {
+            position: absolute;
+            top: 0.5rem;
+            right: 0.5rem;
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 50%;
+            padding: 0.5rem;
+            cursor: pointer;
+            transition: all 0.2s ease;
+        }
+        .remove-image:hover {
+            background-color: #EF4444;
+            color: white;
+        }
     </style>
 </head>
 <body class="bg-gray-50">
     <div class="min-h-screen">
         <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>
             </div>
         </header>
         <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 class="space-y-2">
                                 <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             </div>
                         </label>
                     </div>
+                    <div id="imagePreview" class="hidden image-preview-container">
+                        <img id="preview" src="#" alt="Prévisualisation">
+                        <button type="button" class="remove-image" onclick="removeImage()">
+                            <svg class="w-6 h-6" 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"/>
+                            </svg>
+                        </button>
+                    </div>
                     <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">
                 </form>
             </div>
             <div id="loading" class="hidden">
                 <div class="flex flex-col items-center justify-center space-y-4">
                     <span class="loader"></span>
                 </div>
             </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">
                     </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">
     <script>
         let tableauContent = '';
+        function handleImageSelect() {
             const input = document.getElementById('imageInput');
+            const preview = document.getElementById('preview');
+            const previewContainer = document.getElementById('imagePreview');
             const fileName = document.getElementById('fileName');
+            if (input.files && input.files[0]) {
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    previewContainer.classList.remove('hidden');
+                    previewContainer.classList.add('fade-in');
+                };
+                reader.readAsDataURL(input.files[0]);
                 fileName.textContent = input.files[0].name;
             } else {
+                removeImage();
             }
         }
+        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';
+        }
         function showScrollIndicator(container) {
             if (container.scrollWidth > container.clientWidth) {
                 const indicator = document.createElement('div');
                         indicator.classList.remove('visible');
                     }
                     clearTimeout(container.scrollTimeout);
                     container.scrollTimeout = setTimeout(() => {
                         indicator.classList.remove('visible');
                     const container = document.querySelector('.markdown-content');
                     showScrollIndicator(container);
                     container.addEventListener('scroll', () => {
                         const maxScroll = container.scrollWidth - container.clientWidth;
                         container.style.boxShadow = container.scrollLeft > 0 ?