Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Feb 2

Commit

7631179

verified ·

1 Parent(s): 2081e73

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +98 -177

templates/index.html CHANGED Viewed

@@ -2,163 +2,96 @@
 <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>
       </div>
     </div>
   </div>
   <script>
     const uploadForm = document.getElementById('uploadForm');
     const imageInput = document.getElementById('imageInput');
@@ -166,20 +99,12 @@
     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) {
@@ -194,27 +119,16 @@
       }
     });
-    // 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', {
@@ -225,32 +139,39 @@
       .then(data => {
         loadingIndicator.classList.add('hidden');
         if (data.error) {
-          throw new Error(data.error);
         }
-        dissertationContent.innerHTML = marked.parse(data.dissertation);
-        tableauContent.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>
-</html>

 <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');
     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) {
       }
     });
+    // 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', {
       .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>