Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Feb 2

Commit

f9ced6f

verified ·

1 Parent(s): 7631179

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +180 -97

templates/index.html CHANGED Viewed

@@ -2,96 +2,166 @@
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
-  <title>Mariam AI - Section Commentaire Composé</title>
-  <!-- Intégration de Tailwind CSS avec le plugin Typography -->
-  <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
-  <!-- Intégration de Marked.js pour la conversion Markdown -->
-  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
   <style>
-    /* Spinner personnalisé */
     .spinner {
       border: 4px solid rgba(0, 0, 0, 0.1);
       width: 3rem;
       height: 3rem;
       border-radius: 50%;
-      border-left-color: #4f46e5;
       animation: spin 1s linear infinite;
     }
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
-    /* Style personnalisé pour les tableaux générés en Markdown */
-    .prose table {
-      width: 100%;
-      max-width: 100%;
-      border-collapse: collapse;
-    }
-    .prose th,
-    .prose td {
-      border: 1px solid #e5e7eb;
-      padding: 0.75rem;
-      text-align: left;
     }
-    .prose th {
-      background-color: #f3f4f6;
-      font-weight: 600;
     }
   </style>
 </head>
-<body class="bg-gray-100">
-  <div class="max-w-3xl mx-auto p-4">
-    <!-- En-tête de l'application -->
-    <header class="mb-8 text-center">
-      <h1 class="text-4xl font-extrabold text-gray-800">Mariam AI</h1>
-      <p class="text-xl text-gray-600">Section Commentaire Composé</p>
     </header>
-    <div class="bg-white rounded-lg shadow-lg p-6">
-      <!-- Formulaire d'upload et prévisualisation -->
-      <form id="uploadForm" enctype="multipart/form-data" class="mb-6">
-        <label for="imageInput" class="block text-lg font-medium text-gray-700 mb-2">
-          Sélectionnez une image :
-        </label>
-        <input type="file" name="image" id="imageInput" accept="image/*" required
-               class="block w-full border border-gray-300 rounded-md p-2 mb-4 focus:ring focus:ring-blue-300">
-        <!-- Prévisualisation de l'image -->
-        <div id="previewContainer" class="mb-4 hidden">
-          <p class="text-gray-700 font-medium mb-2">Prévisualisation :</p>
-          <img id="previewImage" src="#" alt="Prévisualisation" class="w-full max-h-64 object-contain rounded-lg shadow-md">
         </div>
-        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors">
-          Analyser
         </button>
       </form>
       <!-- Indicateur de chargement -->
-      <div id="loading" class="flex flex-col items-center space-y-2 mb-6 hidden">
-        <div class="spinner"></div>
-        <span class="text-gray-700 font-medium">Analyse en cours...</span>
       </div>
-      <!-- Bouton pour afficher/masquer le tableau d'analyse -->
-      <button id="toggleButton" class="hidden bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded w-full mb-4 transition-colors">
-        Afficher le Tableau
-      </button>
-      <!-- Zone de résultats -->
-      <div id="result" class="hidden">
-        <!-- Section Dissertation -->
-        <section class="mb-8">
-          <h2 class="text-2xl font-semibold text-gray-800 mb-4">Dissertation</h2>
-          <div id="dissertationContent" class="prose prose-sm sm:prose lg:prose-xl bg-gray-50 border border-gray-200 rounded p-6 text-gray-800 overflow-x-auto"></div>
-        </section>
-        <!-- Section Tableau d'analyse -->
-        <section id="tableauSection" class="hidden">
-          <h2 class="text-2xl font-semibold text-gray-800 mb-4">Tableau d'analyse</h2>
-          <div id="tableauContent" class="prose prose-sm sm:prose lg:prose-xl bg-gray-50 border border-gray-200 rounded p-6 text-gray-800 overflow-x-auto"></div>
-        </section>
       </div>
     </div>
   </div>
-  <!-- Script JavaScript -->
   <script>
     const uploadForm = document.getElementById('uploadForm');
     const imageInput = document.getElementById('imageInput');
@@ -99,12 +169,20 @@
     const previewImage = document.getElementById('previewImage');
     const loadingIndicator = document.getElementById('loading');
     const resultDiv = document.getElementById('result');
-    const toggleButton = document.getElementById('toggleButton');
-    const tableauSection = document.getElementById('tableauSection');
-    const tableauContent = document.getElementById('tableauContent');
     const dissertationContent = document.getElementById('dissertationContent');
-    // Prévisualisation de l'image sélectionnée
     imageInput.addEventListener('change', function() {
       const file = this.files[0];
       if (file) {
@@ -119,16 +197,27 @@
       }
     });
-    // Gestion de la soumission du formulaire
     uploadForm.addEventListener('submit', function(e) {
       e.preventDefault();
-      // Afficher le chargement et masquer les résultats
       loadingIndicator.classList.remove('hidden');
       resultDiv.classList.add('hidden');
-      toggleButton.classList.add('hidden');
-      tableauSection.classList.add('hidden');
       const formData = new FormData(uploadForm);
       fetch('/analyze', {
@@ -139,38 +228,32 @@
       .then(data => {
         loadingIndicator.classList.add('hidden');
         if (data.error) {
-          alert("Erreur : " + data.error);
-        } else {
-          // Convertir le Markdown en HTML via Marked.js
-          dissertationContent.innerHTML = marked.parse(data.dissertation);
-          tableauContent.innerHTML = marked.parse(data.tableau);
-          // Afficher la zone de résultats et le bouton de basculement
-          resultDiv.classList.remove('hidden');
-          toggleButton.classList.remove('hidden');
-          // Masquer le tableau par défaut
-          tableauSection.classList.add('hidden');
-          toggleButton.textContent = 'Afficher le Tableau';
         }
       })
       .catch(error => {
         loadingIndicator.classList.add('hidden');
-        console.error(error);
-        alert("Une erreur est survenue lors de l'analyse.");
       });
     });
-    // Gestion du bouton d'affichage/masquage du tableau
-    toggleButton.addEventListener('click', function() {
-      if (tableauSection.classList.contains('hidden')) {
-        tableauSection.classList.remove('hidden');
-        toggleButton.textContent = 'Masquer le Tableau';
-        // Défilement automatique vers le tableau
-        tableauSection.scrollIntoView({ behavior: 'smooth' });
-      } else {
-        tableauSection.classList.add('hidden');
-        toggleButton.textContent = 'Afficher le Tableau';
-      }
     });
   </script>
 </body>

 <html lang="fr">
 <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>
+    @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');
+    .custom-prose h1, .custom-prose h2, .custom-prose h3 {
+      font-family: 'Playfair Display', serif;
+      margin-top: 2em;
+      margin-bottom: 1em;
+      line-height: 1.3;
+    }
+    .custom-prose p {
+      margin-bottom: 1.5em;
+      line-height: 1.8;
+    }
+    .custom-prose ul, .custom-prose ol {
+      margin-top: 1em;
+      margin-bottom: 1em;
+      padding-left: 1.5em;
+    }
+    .custom-prose li {
+      margin-bottom: 0.5em;
+    }
+    .markdown-table table {
+      width: 100%;
+      border-collapse: separate;
+      border-spacing: 0;
+      margin: 2em 0;
+      background: white;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    .markdown-table th {
+      background: #1a365d;
+      color: white;
+      font-weight: 600;
+      padding: 1rem;
+      text-align: left;
+    }
+    .markdown-table td {
+      padding: 1rem;
+      border-bottom: 1px solid #e2e8f0;
+    }
+    .markdown-table tr:hover {
+      background: #f8fafc;
+    }
     .spinner {
       border: 4px solid rgba(0, 0, 0, 0.1);
       width: 3rem;
       height: 3rem;
       border-radius: 50%;
+      border-left-color: #1a365d;
       animation: spin 1s linear infinite;
     }
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
+    .fade-enter {
+      opacity: 0;
+      transform: translateY(20px);
     }
+    .fade-enter-active {
+      opacity: 1;
+      transform: translateY(0);
+      transition: opacity 300ms, transform 300ms;
     }
   </style>
 </head>
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen font-['Inter']">
+  <div class="max-w-4xl mx-auto p-6">
+    <!-- En-tête -->
+    <header class="text-center mb-12">
+      <h1 class="font-['Playfair_Display'] text-5xl font-bold text-gray-900 mb-4">Mariam AI</h1>
+      <p class="text-xl text-gray-600">Assistant d'Analyse Littéraire</p>
     </header>
+    <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">
+              <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48" aria-hidden="true">
+                <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+              </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>
+            </div>
+          </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>
+        <button type="submit" class="w-full bg-blue-600 text-white rounded-lg px-4 py-3 font-semibold hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
+          Lancer l'analyse
         </button>
       </form>
       <!-- Indicateur de chargement -->
+      <div id="loading" class="hidden">
+        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+          <div class="bg-white p-6 rounded-lg shadow-xl text-center">
+            <div class="spinner mx-auto mb-4"></div>
+            <p class="text-gray-700 font-medium">Analyse en cours...</p>
+          </div>
+        </div>
       </div>
+      <!-- Résultats -->
+      <div id="result" class="hidden mt-8 space-y-8">
+        <!-- Navigation -->
+        <div class="flex space-x-4 border-b border-gray-200">
+          <button id="dissertationTab" class="px-4 py-2 text-sm font-medium text-blue-600 border-b-2 border-blue-600">
+            Dissertation
+          </button>
+          <button id="tableauTab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">
+            Tableau d'analyse
+          </button>
+        </div>
+        <!-- Contenu Dissertation -->
+        <div id="dissertationContent" class="custom-prose prose prose-lg max-w-none">
+        </div>
+        <!-- Contenu Tableau -->
+        <div id="tableauContent" class="hidden markdown-table prose prose-lg max-w-none">
+          <div class="overflow-x-auto">
+            <!-- Le tableau sera injecté ici via Marked -->
+          </div>
+        </div>
       </div>
     </div>
   </div>
   <script>
     const uploadForm = document.getElementById('uploadForm');
     const imageInput = document.getElementById('imageInput');
     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) {
       }
     });
+    // 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');
+      dissertationContent.classList.remove('hidden');
+      tableauContent.classList.add('hidden');
+    });
+    tableauTab.addEventListener('click', function() {
+      tableauTab.classList.add('text-blue-600', 'border-b-2', 'border-blue-600');
+      dissertationTab.classList.remove('text-blue-600', 'border-b-2', 'border-blue-600');
+      tableauContent.classList.remove('hidden');
+      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', {
       .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);
       });
     });
+    // Animation douce pour les transitions
+    document.querySelectorAll('.fade-enter').forEach(element => {
+      element.classList.add('fade-enter-active');
+      setTimeout(() => {
+        element.classList.remove('fade-enter', 'fade-enter-active');
+      }, 300);
     });
   </script>
 </body>