Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on 13 days ago

Commit

909be8a

verified ·

1 Parent(s): c11970e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +113 -219

templates/index.html CHANGED Viewed

@@ -3,266 +3,160 @@
 <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>
-        <!-- Champ Consignes optionnel -->
-        <div class="relative">
-          <label for="consignesInput" class="block text-lg font-medium text-gray-700 mb-3">
-            Consignes (optionnel)
-          </label>
-          <input id="consignesInput" name="consignes" type="text" class="w-full border border-gray-300 rounded-md p-2" placeholder="Entrez vos consignes ici">
         </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 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');
-      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', {
-        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);
-      });
-    });
-    // 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>

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mariam AI - Analyse Littéraire (Bientôt !)</title>
   <script src="https://cdn.tailwindcss.com"></script>
+  <!-- Pas besoin de Marked.js car rien ne sera rendu -->
   <style>
     @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600;700&display=swap');
+    body {
+      font-family: 'Inter', sans-serif;
+      -webkit-tap-highlight-color: transparent;
     }
+    h1, h2, h3, h4, h5, h6 {
+       font-family: 'Playfair Display', serif;
     }
+    /* Styles pour désactiver visuellement la zone de drop */
+    .disabled-drop-zone {
+        cursor: not-allowed;
+        opacity: 0.6;
+        /* Suppression des effets de hover */
+        /* Tailwind: remove hover:border-blue-500 */
     }
+    .disabled-drop-zone .text-blue-600 {
+        color: #6b7280; /* gray-500 */
+        /* Suppression du hover sur le texte */
+        /* Tailwind: remove hover:text-blue-700 */
     }
+    /* Styles pour le message "Coming Soon" */
+    .coming-soon-banner {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem; /* space-x-3 */
+      background-color: #fef3c7; /* yellow-100 */
+      color: #92400e; /* yellow-800 */
+      padding: 0.75rem 1rem; /* p-3 sm:p-4 */
+      border-radius: 0.5rem; /* rounded-lg */
+      border: 1px solid #fde68a; /* yellow-200 */
+      font-size: 0.875rem; /* text-sm */
+      font-weight: 500; /* font-medium */
+      text-align: center;
+      justify-content: center;
     }
+    @media (min-width: 640px) {
+        .coming-soon-banner {
+            font-size: 1rem; /* text-base */
+        }
     }
   </style>
 </head>
+<body class="bg-gradient-to-br from-gray-50 to-blue-50 min-h-screen text-gray-800">
+  <div class="max-w-3xl mx-auto px-4 py-6 sm:px-6 sm:py-8">
     <!-- En-tête -->
+    <header class="text-center mb-8 sm:mb-12">
+      <h1 class="text-4xl sm:text-5xl font-bold text-gray-900 mb-2">Mariam AI</h1>
+      <p class="text-base sm:text-lg text-gray-600">Votre Assistant d'Analyse Littéraire</p>
     </header>
+    <!-- Carte Principale -->
+    <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+      <form id="uploadForm" class="p-5 sm:p-8 space-y-5 sm:space-y-6">
+        <!-- Zone de téléchargement (Désactivée) -->
+        <div>
+          <label for="imageInput" class="block text-base sm:text-lg font-semibold text-gray-800 mb-3 opacity-60">
+            1. Choisissez votre document
           </label>
+          <!-- Ajout de classes pour désactivation visuelle -->
+          <div id="dropZone" class="disabled-drop-zone mt-2 flex flex-col items-center justify-center px-4 py-8 sm:px-6 sm:py-10 border-2 border-gray-300 border-dashed rounded-lg bg-gray-50">
+             <div class="text-center">
+                 <svg class="mx-auto h-10 w-10 text-gray-400 mb-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                   <path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.33-2.33 4.5 4.5 0 013.75 8.775h-1.5M6.75 19.5h10.5" />
+                 </svg>
+                 <div class="text-sm sm:text-base text-gray-600">
+                   <span class="font-medium text-blue-600">Cliquez pour choisir</span> ou glissez-déposez
+                 </div>
+                 <p class="text-xs sm:text-sm text-gray-500 mt-1">PNG, JPG, PDF (max 10MB)</p>
+                 <!-- Input désactivé -->
+                 <input id="imageInput" name="image" type="file" class="sr-only" accept="image/*,application/pdf" disabled>
+             </div>
+             <!-- Le nom du fichier ne s'affichera pas -->
+             <div id="fileName" class="mt-3 text-sm font-medium text-gray-700 hidden"></div>
           </div>
         </div>
+        <!-- Champ Consignes optionnel (Désactivé) -->
+        <div>
+            <label for="consignesInput" class="block text-base sm:text-lg font-semibold text-gray-800 mb-3 opacity-60">
+              2. Consignes <span class="text-sm font-normal text-gray-500">(optionnel)</span>
+            </label>
+            <!-- Textarea désactivée -->
+            <textarea id="consignesInput" name="consignes" rows="3" class="w-full border border-gray-300 rounded-md p-3 text-sm placeholder-gray-400 transition duration-150 ease-in-out bg-gray-100 cursor-not-allowed" placeholder="Ex: Analyser les thèmes principaux..." disabled></textarea>
         </div>
+        <!-- Message "Coming Soon" -->
+        <div class="coming-soon-banner" role="alert">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5 sm:w-6 sm:h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span>Cette fonctionnalité sera bientôt disponible !</span>
         </div>
+        <!-- Bouton (Désactivé) -->
+        <button type="submit" class="w-full bg-gray-400 text-white rounded-lg px-4 py-3 text-base font-semibold focus:outline-none cursor-not-allowed shadow-md flex items-center justify-center space-x-2" disabled>
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423L16.5 15.75l.394 1.183a2.25 2.25 0 001.423 1.423L19.5 18.75l-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
+            </svg>
+          <span>Lancer l'analyse</span>
         </button>
       </form>
+       <!-- Indicateur de chargement (Inutile ici, gardé caché) -->
+      <div id="loading" class="hidden fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 p-4">
         </div>
+      <!-- Résultats (Section entière cachée et jamais affichée) -->
+      <div id="result" class="hidden border-t border-gray-200">
+        <!-- Contenu des résultats (ne sera jamais rempli) -->
+      </div> <!-- Fin #result -->
+    </div> <!-- Fin Carte Principale -->
+    <footer class="text-center mt-8 mb-4">
+        <p class="text-xs text-gray-500">© 2024 Mariam AI - Tous droits réservés.</p>
+    </footer>
+  </div> <!-- Fin Container Principal -->
   <script>
+    // Pas de JavaScript interactif nécessaire pour une page "Coming Soon"
+    // On pourrait laisser le script vide ou commenter l'ancien code.
+    /*
     const uploadForm = document.getElementById('uploadForm');
     const imageInput = document.getElementById('imageInput');
+    const dropZone = document.getElementById('dropZone');
+    const fileNameDisplay = document.getElementById('fileName');
+    // ... autres const si elles étaient utilisées pour des éléments toujours présents
+    // TOUT LE CODE DE GESTION D'UPLOAD, DE PREVIEW, D'ONGLETS ET DE SUBMIT EST SUPPRIMÉ OU COMMENTÉ
+    // car la fonctionnalité n'est pas active.
+    // uploadForm.addEventListener('submit', function(e) {
+    //   e.preventDefault();
+    //   // Ne rien faire
+    // });
+    */
+    console.log("Page Mariam AI - Fonctionnalité en cours de développement.");
   </script>
 </body>
+</html>