Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Feb 2

Commit

dfc761c

verified ·

1 Parent(s): 460bd1d

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +111 -239

templates/index.html CHANGED Viewed

@@ -1,302 +1,174 @@
 <!DOCTYPE html>
 <html lang="fr">
-<!-- Le head reste identique jusqu'au script -->
 <head>
   <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam AI - Section Commentaire Composé</title>
   <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"></script>
   <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-    body {
-      font-family: 'Poppins', sans-serif;
-      background: linear-gradient(135deg, #f6f9fc 0%, #edf2f7 100%);
-      min-height: 100vh;
-    }
     .spinner {
-      border: 3px solid rgba(79, 70, 229, 0.1);
-      width: 2.5rem;
-      height: 2.5rem;
       border-radius: 50%;
       border-left-color: #4f46e5;
-      animation: spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
     }
     @keyframes spin {
       to { transform: rotate(360deg); }
     }
-    .card-shadow {
-      box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.1);
-    }
     .prose table {
       width: 100%;
-      border-collapse: separate;
-      border-spacing: 0;
-      border-radius: 8px;
-      overflow: hidden;
     }
     .prose th,
     .prose td {
-      border: 1px solid #e5e7eb;
-      padding: 1rem;
-      background: white;
     }
     .prose th {
-      background: #f8fafc;
       font-weight: 600;
-      text-transform: uppercase;
-      font-size: 0.875rem;
-      letter-spacing: 0.05em;
-    }
-    .file-upload-area {
-      border: 2px dashed #e2e8f0;
-      border-radius: 1rem;
-      transition: all 0.3s ease;
-    }
-    .file-upload-area:hover {
-      border-color: #4f46e5;
-      background: rgba(79, 70, 229, 0.05);
-    }
-    .animated-button {
-      transition: transform 0.2s;
-    }
-    .animated-button:hover {
-      transform: translateY(-2px);
     }
   </style>
 </head>
-<body class="py-8 px-4">
-  <!-- Le HTML reste identique -->
-  <div class="max-w-4xl mx-auto">
-    <header class="text-center mb-12">
-      <h1 class="text-5xl font-bold bg-gradient-to-r from-indigo-600 to-blue-500 bg-clip-text text-transparent">
-        Mariam AI
-      </h1>
-      <p class="text-xl text-gray-600 mt-2">Section Commentaire Composé</p>
     </header>
-    <div class="bg-white rounded-2xl card-shadow p-8">
-      <form id="uploadForm" class="mb-8">
-        <div class="file-upload-area p-8 text-center">
-          <label for="imageInput" class="block cursor-pointer">
-            <div class="mb-4">
-              <svg class="w-12 h-12 mx-auto text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
-            </div>
-            <span class="text-lg font-medium text-gray-700">Sélectionnez une image</span>
-            <p class="text-sm text-gray-500 mt-1">ou glissez-déposez votre fichier ici</p>
-          </label>
-          <input type="file" id="imageInput" name="image" accept="image/*" required class="hidden">
-        </div>
-        <div id="previewContainer" class="mt-6 hidden">
-          <p class="text-gray-700 font-medium mb-3">Aperçu :</p>
-          <div class="relative rounded-xl overflow-hidden shadow-lg">
-            <img id="previewImage" src="#" alt="Prévisualisation" class="w-full max-h-80 object-contain">
-          </div>
         </div>
-        <button type="submit" class="animated-button w-full mt-6 bg-gradient-to-r from-indigo-600 to-blue-500 text-white font-semibold py-3 px-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
-          Lancer l'analyse
         </button>
       </form>
-      <div id="loading" class="hidden">
-        <div class="flex flex-col items-center space-y-4 py-8">
-          <div class="spinner"></div>
-          <span class="text-gray-700 font-medium">Analyse en cours...</span>
-        </div>
       </div>
-      <button id="toggleButton" class="animated-button hidden w-full mb-6 bg-gradient-to-r from-green-500 to-emerald-500 text-white font-semibold py-3 px-6 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300">
         Afficher le Tableau
       </button>
-      <div id="result" class="hidden space-y-8">
-        <section>
           <h2 class="text-2xl font-semibold text-gray-800 mb-4">Dissertation</h2>
-          <div id="dissertationContent" class="prose prose-lg max-w-none bg-gray-50 rounded-xl p-8"></div>
         </section>
         <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-lg max-w-none bg-gray-50 rounded-xl p-8"></div>
         </section>
       </div>
     </div>
   </div>
   <script>
-    // Configuration des variables
-    const config = {
-      uploadForm: document.getElementById('uploadForm'),
-      imageInput: document.getElementById('imageInput'),
-      previewContainer: document.getElementById('previewContainer'),
-      previewImage: document.getElementById('previewImage'),
-      loadingIndicator: document.getElementById('loading'),
-      resultDiv: document.getElementById('result'),
-      toggleButton: document.getElementById('toggleButton'),
-      tableauSection: document.getElementById('tableauSection'),
-      tableauContent: document.getElementById('tableauContent'),
-      dissertationContent: document.getElementById('dissertationContent')
-    };
-    // Gestion de l'aperçu des fichiers
-    function handleFilePreview(file) {
       if (file) {
         const reader = new FileReader();
         reader.onload = function(e) {
-          config.previewImage.src = e.target.result;
-          config.previewContainer.classList.remove('hidden');
-          gsap.from(config.previewContainer, {
-            opacity: 0,
-            y: 20,
-            duration: 0.3
-          });
-        };
         reader.readAsDataURL(file);
-      }
-    }
-    // Gestionnaire d'événements pour l'input file
-    config.imageInput.addEventListener('change', (e) => {
-      handleFilePreview(e.target.files[0]);
-    });
-    // Fonction pour afficher/masquer le loading
-    function toggleLoading(show) {
-      if (show) {
-        config.loadingIndicator.classList.remove('hidden');
-        config.resultDiv.classList.add('hidden');
-        config.toggleButton.classList.add('hidden');
-        config.tableauSection.classList.add('hidden');
       } else {
-        config.loadingIndicator.classList.add('hidden');
       }
-    }
-    // Fonction pour gérer la soumission du formulaire
-    async function handleFormSubmit(e) {
       e.preventDefault();
-      toggleLoading(true);
-      try {
-        const formData = new FormData(config.uploadForm);
-        const response = await fetch('/analyze', {
-          method: 'POST',
-          body: formData
-        });
-        const data = await response.json();
-        if (!response.ok) {
-          throw new Error(data.error || 'Une erreur est survenue');
         }
-        // Mise à jour du contenu
-        config.dissertationContent.innerHTML = marked.parse(data.dissertation);
-        config.tableauContent.innerHTML = marked.parse(data.tableau);
-        // Affichage des résultats
-        config.resultDiv.classList.remove('hidden');
-        config.toggleButton.classList.remove('hidden');
-        config.tableauSection.classList.add('hidden');
-        config.toggleButton.textContent = 'Afficher le Tableau';
-        // Animation des résultats
-        gsap.from([config.resultDiv, config.toggleButton], {
-          opacity: 0,
-          y: 20,
-          duration: 0.3,
-          stagger: 0.1
-        });
-      } catch (error) {
-        console.error('Erreur:', error);
-        alert(error.message || "Une erreur est survenue lors de l'analyse.");
-      } finally {
-        toggleLoading(false);
-      }
-    }
-    // Gestionnaire de soumission du formulaire
-    config.uploadForm.addEventListener('submit', handleFormSubmit);
-    // Gestion du toggle du tableau
-    config.toggleButton.addEventListener('click', function() {
-      const isHidden = config.tableauSection.classList.contains('hidden');
-      if (isHidden) {
-        config.tableauSection.classList.remove('hidden');
-        this.textContent = 'Masquer le Tableau';
-        gsap.from(config.tableauSection, {
-          opacity: 0,
-          y: 20,
-          duration: 0.3
-        });
       } else {
-        gsap.to(config.tableauSection, {
-          opacity: 0,
-          y: 20,
-          duration: 0.2,
-          onComplete: () => {
-            config.tableauSection.classList.add('hidden');
-            this.textContent = 'Afficher le Tableau';
-          }
-        });
       }
     });
-    // Gestion du drag & drop
-    function initDragAndDrop() {
-      const dropArea = document.querySelector('.file-upload-area');
-      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-        dropArea.addEventListener(eventName, (e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        });
-      });
-      function highlight() {
-        dropArea.classList.add('border-indigo-600', 'bg-indigo-50');
-      }
-      function unhighlight() {
-        dropArea.classList.remove('border-indigo-600', 'bg-indigo-50');
-      }
-      ['dragenter', 'dragover'].forEach(eventName => {
-        dropArea.addEventListener(eventName, highlight);
-      });
-      ['dragleave', 'drop'].forEach(eventName => {
-        dropArea.addEventListener(eventName, unhighlight);
-      });
-      dropArea.addEventListener('drop', (e) => {
-        const dt = e.dataTransfer;
-        config.imageInput.files = dt.files;
-        handleFilePreview(dt.files[0]);
-      });
-    }
-    // Initialisation du drag & drop
-    initDragAndDrop();
   </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
   <meta charset="UTF-8">
   <title>Mariam AI - Section Commentaire Composé</title>
+  <!-- Intégration de Tailwind CSS via CDN avec le plugin Typography activé -->
   <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é pour l'indicateur de chargement */
     .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); }
     }
+    /* Optionnel : style personnalisé pour les tableaux générés en Markdown */
     .prose table {
       width: 100%;
+      border-collapse: collapse;
     }
     .prose th,
     .prose td {
+      border: 1px solid #e5e7eb; /* gris clair */
+      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"></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"></div>
         </section>
       </div>
     </div>
   </div>
+  <!-- Script JavaScript pour la gestion des interactions -->
   <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 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) {
         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 de la soumission du formulaire
+    uploadForm.addEventListener('submit', function(e) {
       e.preventDefault();
+      // Afficher l'indicateur de chargement et masquer les zones de 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', {
+        method: 'POST',
+        body: formData
+      })
+      .then(response => response.json())
+      .then(data => {
+        loadingIndicator.classList.add('hidden');
+        if (data.error) {
+          alert("Erreur : " + data.error);
+        } else {
+          // Convertir les réponses 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 Toggle
+          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';
       } else {
+        tableauSection.classList.add('hidden');
+        toggleButton.textContent = 'Afficher le Tableau';
       }
     });
   </script>
 </body>
+</html>