Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on 27 days ago

Commit

4cd16ec

verified ·

1 Parent(s): b156c6b

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +41 -49

templates/index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mariam AI - Analyse Littéraire</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
   <style>
@@ -92,10 +92,10 @@
     <div class="bg-white rounded-xl shadow-lg p-8">
       <!-- Zone de téléchargement -->
-      <form id="uploadForm" class="space-y-6">
         <div class="relative">
           <label for="imageInput" class="block text-lg font-medium text-gray-700 mb-3">
-            Sélectionnez votre document
           </label>
           <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-blue-500 transition-colors cursor-pointer">
             <div class="space-y-2 text-center">
@@ -104,8 +104,8 @@
               </svg>
               <div class="text-sm text-gray-600">
                 <label for="imageInput" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
-                  <span>Télécharger un fichier</span>
-                  <input id="imageInput" name="image" type="file" class="sr-only" accept="image/*" required>
                 </label>
               </div>
               <p class="text-xs text-gray-500">PNG, JPG jusqu'à 10MB</p>
@@ -113,11 +113,11 @@
           </div>
         </div>
-        <!-- Prévisualisation -->
         <div id="previewContainer" class="hidden">
-          <p class="text-gray-700 font-medium mb-3">Aperçu du document :</p>
-          <div class="relative rounded-lg overflow-hidden bg-gray-100">
-            <img id="previewImage" src="#" alt="Aperçu" class="w-full max-h-80 object-contain">
           </div>
         </div>
@@ -163,41 +163,38 @@
   </div>
   <script>
-    const uploadForm = document.getElementById('uploadForm');
     const imageInput = document.getElementById('imageInput');
     const previewContainer = document.getElementById('previewContainer');
-    const previewImage = document.getElementById('previewImage');
-    const loadingIndicator = document.getElementById('loading');
-    const resultDiv = document.getElementById('result');
-    const dissertationTab = document.getElementById('dissertationTab');
-    const tableauTab = document.getElementById('tableauTab');
-    const dissertationContent = document.getElementById('dissertationContent');
-    const tableauContent = document.getElementById('tableauContent');
-    // Configuration de marked pour le rendu Markdown
-    marked.setOptions({
-      breaks: true,
-      gfm: true,
-      headerIds: true,
-      langPrefix: 'language-',
-    });
-    // Prévisualisation
     imageInput.addEventListener('change', function() {
-      const file = this.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = function(e) {
-          previewImage.src = e.target.result;
-          previewContainer.classList.remove('hidden');
-        }
-        reader.readAsDataURL(file);
       } else {
         previewContainer.classList.add('hidden');
       }
     });
-    // Gestion des onglets
     dissertationTab.addEventListener('click', function() {
       dissertationTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
       tableauTab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
@@ -212,38 +209,33 @@
       dissertationContent.classList.add('hidden');
     });
-    // Soumission du formulaire
     uploadForm.addEventListener('submit', function(e) {
       e.preventDefault();
-      loadingIndicator.classList.remove('hidden');
-      resultDiv.classList.add('hidden');
       const formData = new FormData(uploadForm);
-      fetch('/analyze', {
         method: 'POST',
         body: formData
       })
       .then(response => response.json())
       .then(data => {
-        loadingIndicator.classList.add('hidden');
         if (data.error) {
           throw new Error(data.error);
         }
         dissertationContent.innerHTML = marked.parse(data.dissertation);
-        // Injection du tableau dans le conteneur overflow-x-auto
         tableauContent.querySelector('.overflow-x-auto').innerHTML = marked.parse(data.tableau);
-        resultDiv.classList.remove('hidden');
-        // Afficher l'onglet dissertation par défaut
         dissertationTab.click();
-        // Scroll vers les résultats
-        resultDiv.scrollIntoView({ behavior: 'smooth' });
       })
       .catch(error => {
-        loadingIndicator.classList.add('hidden');
         alert("Une erreur est survenue : " + error.message);
       });
     });

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mariam AI - Analyse Littéraire (Images Multiples)</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
   <style>
     <div class="bg-white rounded-xl shadow-lg p-8">
       <!-- Zone de téléchargement -->
+      <form id="uploadForm" class="space-y-6" enctype="multipart/form-data">
         <div class="relative">
           <label for="imageInput" class="block text-lg font-medium text-gray-700 mb-3">
+            Sélectionnez vos documents
           </label>
           <div class="mt-2 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-blue-500 transition-colors cursor-pointer">
             <div class="space-y-2 text-center">
               </svg>
               <div class="text-sm text-gray-600">
                 <label for="imageInput" class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
+                  <span>Télécharger des fichiers</span>
+                  <input id="imageInput" name="images" type="file" class="sr-only" accept="image/*" multiple required>
                 </label>
               </div>
               <p class="text-xs text-gray-500">PNG, JPG jusqu'à 10MB</p>
           </div>
         </div>
+        <!-- Prévisualisation multiple -->
         <div id="previewContainer" class="hidden">
+          <p class="text-gray-700 font-medium mb-3">Aperçu des documents :</p>
+          <div id="previewImages" class="grid grid-cols-2 gap-4">
+            <!-- Les images prévisualisées seront injectées ici -->
           </div>
         </div>
   </div>
   <script>
+    // Gestion de la prévisualisation de plusieurs images
     const imageInput = document.getElementById('imageInput');
     const previewContainer = document.getElementById('previewContainer');
+    const previewImages = document.getElementById('previewImages');
     imageInput.addEventListener('change', function() {
+      const files = this.files;
+      previewImages.innerHTML = ""; // Réinitialiser la prévisualisation
+      if (files && files.length > 0) {
+        previewContainer.classList.remove('hidden');
+        Array.from(files).forEach(file => {
+          const reader = new FileReader();
+          reader.onload = function(e) {
+            const img = document.createElement('img');
+            img.src = e.target.result;
+            img.alt = "Aperçu du document";
+            img.className = "w-full max-h-60 object-contain rounded-lg";
+            previewImages.appendChild(img);
+          };
+          reader.readAsDataURL(file);
+        });
       } else {
         previewContainer.classList.add('hidden');
       }
     });
+    // Gestion des onglets de résultats
+    const dissertationTab = document.getElementById('dissertationTab');
+    const tableauTab = document.getElementById('tableauTab');
+    const dissertationContent = document.getElementById('dissertationContent');
+    const tableauContent = document.getElementById('tableauContent');
     dissertationTab.addEventListener('click', function() {
       dissertationTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
       tableauTab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
       dissertationContent.classList.add('hidden');
     });
+    // Soumission du formulaire vers l'endpoint analyze_multi
+    const uploadForm = document.getElementById('uploadForm');
     uploadForm.addEventListener('submit', function(e) {
       e.preventDefault();
+      document.getElementById('loading').classList.remove('hidden');
+      document.getElementById('result').classList.add('hidden');
       const formData = new FormData(uploadForm);
+      fetch('/analyze_multi', {
         method: 'POST',
         body: formData
       })
       .then(response => response.json())
       .then(data => {
+        document.getElementById('loading').classList.add('hidden');
         if (data.error) {
           throw new Error(data.error);
         }
         dissertationContent.innerHTML = marked.parse(data.dissertation);
         tableauContent.querySelector('.overflow-x-auto').innerHTML = marked.parse(data.tableau);
+        document.getElementById('result').classList.remove('hidden');
         dissertationTab.click();
+        document.getElementById('result').scrollIntoView({ behavior: 'smooth' });
       })
       .catch(error => {
+        document.getElementById('loading').classList.add('hidden');
         alert("Une erreur est survenue : " + error.message);
       });
     });