Spaces:

Docfile
/

M-anglais

Running

App Files Files Community

Docfile commited on 2 days ago

Commit

93fbcde

verified ·

1 Parent(s): 2480afe

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +147 -50

templates/index.html CHANGED Viewed

@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Mariam Anglais</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
@@ -13,6 +13,11 @@
           colors: {
             primary: '#4CAF50',
             'primary-dark': '#3e8e41',
           }
         }
       }
@@ -22,109 +27,164 @@
     .markdown-content {
       width: 100%;
       overflow-wrap: break-word;
-      word-wrap: break-word;
       word-break: break-word;
       hyphens: auto;
     }
     .markdown-content pre {
       white-space: pre-wrap;
-      word-wrap: break-word;
       padding: 1rem;
-      background-color: #f3f4f6;
       border-radius: 0.5rem;
       margin: 1rem 0;
       overflow-x: auto;
     }
     .markdown-content code {
-      background-color: #f3f4f6;
       padding: 0.2rem 0.4rem;
       border-radius: 0.25rem;
       font-family: ui-monospace, monospace;
     }
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
     }
     .animate-fade-in {
       animation: fadeIn 1s ease-out;
     }
   </style>
 </head>
-<body class="bg-gray-50 min-h-screen">
-  <div class="container mx-auto px-4 py-8 max-w-6xl">
     <!-- Header -->
-    <header class="text-center mb-12 animate-fade-in">
-      <h1 class="text-5xl font-bold text-primary mb-4">
         ✨ Mariam Anglais ✨
       </h1>
-      <p class="text-gray-600 text-lg">
-        Bienvenue ! Téléchargez vos images, choisissez votre type d'analyse, et laissez la magie opérer.
       </p>
     </header>
     <!-- Main Content -->
-    <div class="grid md:grid-cols-2 gap-8">
       <!-- Upload Section -->
-      <div class="bg-white rounded-xl shadow-lg p-6">
-        <h2 class="text-2xl font-semibold text-primary mb-4">📷 Téléchargement d'images</h2>
         <div
-          class="upload-zone border-2 border-dashed border-primary rounded-lg p-8 text-center cursor-pointer hover:bg-gray-50 transition-colors"
           onclick="document.getElementById('image-upload').click()">
-          <input type="file" id="image-upload" multiple accept="image/*" class="hidden">
-          <div class="flex flex-col items-center">
-            <svg class="h-12 w-12 text-primary mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
-            </svg>
-            <span class="text-gray-600">Cliquez ou glissez vos images ici</span>
-          </div>
         </div>
-        <div id="preview-container" class="mt-4 grid grid-cols-2 gap-4"></div>
       </div>
       <!-- Analysis Type Section -->
-      <div class="bg-white rounded-xl shadow-lg p-6">
-        <h2 class="text-2xl font-semibold text-primary mb-4">🎛️ Choix du type d'analyse</h2>
-        <div class="space-y-4">
           <!-- Option Analyse de Texte -->
-          <label class="flex flex-col p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
             <div class="flex items-center">
-              <input type="radio" name="analysis_type" value="text" class="h-4 w-4 text-primary">
-              <span class="ml-3 font-medium">🔍 Analyse de Texte</span>
             </div>
-            <p class="text-gray-500 text-sm ml-7 mt-1">
-              Il s'agit ici de l'analyse de texte avec (INTRODUCTION, SUMMARY, COMMENTARY, EVALUATION).
             </p>
           </label>
           <!-- Option Document iconographique -->
-          <label class="flex flex-col p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
             <div class="flex items-center">
-              <input type="radio" name="analysis_type" value="icon" class="h-4 w-4 text-primary">
-              <span class="ml-3 font-medium">🧠 Document iconographique</span>
             </div>
-            <p class="text-gray-500 text-sm ml-7 mt-1">
-              Il s'agit ici du document iconographique.
             </p>
           </label>
         </div>
-        <button id="submit-btn" class="w-full mt-6 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-all transform hover:-translate-y-1 hover:shadow-lg disabled:opacity-50 disabled:cursor-not-allowed">
           🚀 Soumettre
         </button>
       </div>
     </div>
     <!-- Results Section -->
-    <div id="results" class="mt-12 bg-white rounded-xl shadow-lg p-6 hidden animate-fade-in">
-      <h2 class="text-2xl font-semibold text-primary mb-4">📝 Résultat de l'analyse</h2>
       <div id="analysis-result" class="markdown-content prose max-w-none"></div>
     </div>
     <!-- Footer -->
-    <footer class="mt-12 text-center text-gray-600">
-      <hr class="my-4">
       <p>© 2025 Mariam AI - Tous droits réservés.</p>
     </footer>
   </div>
@@ -139,8 +199,38 @@
       let uploadedFiles = [];
       imageUpload.addEventListener('change', handleFileSelect);
       submitBtn.addEventListener('click', handleSubmit);
       function handleFileSelect(event) {
         uploadedFiles = Array.from(event.target.files);
@@ -153,12 +243,13 @@
           const preview = document.createElement('div');
           preview.className = 'relative';
           preview.innerHTML = `
-            <img src="${URL.createObjectURL(file)}" alt="Preview" class="w-full h-32 object-cover rounded-lg">
-            <button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
               </svg>
             </button>
           `;
           previewContainer.appendChild(preview);
         });
@@ -201,8 +292,14 @@
             throw new Error(data.error);
           }
           resultsSection.classList.remove('hidden');
-          analysisResult.innerHTML = marked.parse(data.result);
           resultsSection.scrollIntoView({ behavior: 'smooth' });
         } catch (error) {
           alert('Erreur lors de l\'analyse: ' + error.message);
@@ -216,4 +313,4 @@
     });
   </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="fr">
 <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Mariam Anglais</title>
   <script src="https://cdn.tailwindcss.com"></script>
   <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
           colors: {
             primary: '#4CAF50',
             'primary-dark': '#3e8e41',
+            secondary: '#2D3748',
+            accent: '#F6AD55'
+          },
+          fontFamily: {
+            sans: ['Inter', 'sans-serif']
           }
         }
       }
     .markdown-content {
       width: 100%;
       overflow-wrap: break-word;
       word-break: break-word;
       hyphens: auto;
     }
     .markdown-content pre {
       white-space: pre-wrap;
       padding: 1rem;
+      background-color: #edf2f7;
       border-radius: 0.5rem;
       margin: 1rem 0;
       overflow-x: auto;
     }
     .markdown-content code {
+      background-color: #edf2f7;
       padding: 0.2rem 0.4rem;
       border-radius: 0.25rem;
       font-family: ui-monospace, monospace;
     }
+    /* Amélioration pour les paragraphes et espacements */
+    .markdown-content p {
+      margin-bottom: 1rem;
+      line-height: 1.6;
+      white-space: pre-line;
+    }
+    /* Styles pour les titres */
+    .markdown-content h1 {
+      font-size: 1.8rem;
+      font-weight: bold;
+      margin-top: 1.5rem;
+      margin-bottom: 1rem;
+      padding-bottom: 0.5rem;
+      border-bottom: 1px solid #e2e8f0;
+    }
+    .markdown-content h2 {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-top: 1.25rem;
+      margin-bottom: 0.75rem;
+    }
+    .markdown-content h3 {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+    }
+    /* Styles pour les listes */
+    .markdown-content ul, .markdown-content ol {
+      margin-left: 1.5rem;
+      margin-bottom: 1rem;
+    }
+    .markdown-content li {
+      margin-bottom: 0.5rem;
+    }
+    /* Styles pour les blockquotes */
+    .markdown-content blockquote {
+      border-left: 4px solid #e2e8f0;
+      padding-left: 1rem;
+      margin-left: 0;
+      margin-right: 0;
+      margin-bottom: 1rem;
+      font-style: italic;
+      color: #4a5568;
+    }
+    /* Styles pour les séparateurs horizontaux */
+    .markdown-content hr {
+      margin: 1.5rem 0;
+      border: 0;
+      border-top: 1px solid #e2e8f0;
+    }
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
     }
     .animate-fade-in {
       animation: fadeIn 1s ease-out;
     }
+    /* Ajout d'une ombre plus marquée pour les cartes */
+    .card {
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+    }
   </style>
 </head>
+<body class="bg-gradient-to-br from-gray-100 to-gray-300 min-h-screen font-sans">
+  <div class="container mx-auto px-4 py-12 max-w-6xl">
     <!-- Header -->
+    <header class="text-center mb-16 animate-fade-in">
+      <h1 class="text-5xl font-bold text-primary mb-4 drop-shadow-lg">
         ✨ Mariam Anglais ✨
       </h1>
+      <p class="text-secondary text-lg">
+        Téléchargez vos images, choisissez votre type d'analyse et laissez la magie opérer.
       </p>
     </header>
     <!-- Main Content -->
+    <div class="grid md:grid-cols-2 gap-12">
       <!-- Upload Section -->
+      <div class="bg-white rounded-xl card p-8">
+        <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
+          <svg class="h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+          </svg>
+          Téléchargement d'images
+        </h2>
         <div
+          class="upload-zone border-2 border-dashed border-primary rounded-lg p-10 text-center cursor-pointer hover:bg-gray-50 transition-colors"
           onclick="document.getElementById('image-upload').click()">
+          <input type="file" id="image-upload" multiple accept="image/*" class="hidden" />
+          <p class="text-gray-600 font-medium">Cliquez ou glissez vos images ici</p>
         </div>
+        <div id="preview-container" class="mt-6 grid grid-cols-2 gap-4"></div>
       </div>
       <!-- Analysis Type Section -->
+      <div class="bg-white rounded-xl card p-8">
+        <h2 class="text-2xl font-semibold text-primary mb-6 flex items-center gap-2">
+          <svg class="h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17v-2a4 4 0 00-4-4H3"></path>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a4 4 0 014 4v2"></path>
+          </svg>
+          Choix du type d'analyse
+        </h2>
+        <div class="space-y-6">
           <!-- Option Analyse de Texte -->
+          <label class="flex flex-col p-5 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
             <div class="flex items-center">
+              <input type="radio" name="analysis_type" value="text" class="h-5 w-5 text-primary" />
+              <span class="ml-3 text-lg font-medium text-secondary">🔍 Analyse de Texte</span>
             </div>
+            <p class="text-gray-500 text-sm ml-8 mt-1">
+              Analyse de texte détaillée comprenant INTRODUCTION, SUMMARY, COMMENTARY et EVALUATION.
             </p>
           </label>
           <!-- Option Document iconographique -->
+          <label class="flex flex-col p-5 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
             <div class="flex items-center">
+              <input type="radio" name="analysis_type" value="icon" class="h-5 w-5 text-primary" />
+              <span class="ml-3 text-lg font-medium text-secondary">🧠 Document iconographique</span>
             </div>
+            <p class="text-gray-500 text-sm ml-8 mt-1">
+              Analyse et interprétation du document iconographique fourni.
             </p>
           </label>
         </div>
+        <button id="submit-btn" class="w-full mt-8 bg-primary hover:bg-primary-dark text-white font-bold py-3 px-6 rounded-lg transition-transform transform hover:-translate-y-1 hover:shadow-xl disabled:opacity-50 disabled:cursor-not-allowed">
           🚀 Soumettre
         </button>
       </div>
     </div>
     <!-- Results Section -->
+    <div id="results" class="mt-16 bg-white rounded-xl card p-8 hidden animate-fade-in">
+      <h2 class="text-2xl font-semibold text-primary mb-6">📝 Résultat de l'analyse</h2>
       <div id="analysis-result" class="markdown-content prose max-w-none"></div>
     </div>
     <!-- Footer -->
+    <footer class="mt-16 text-center text-gray-600">
+      <hr class="my-6" />
       <p>© 2025 Mariam AI - Tous droits réservés.</p>
     </footer>
   </div>
       let uploadedFiles = [];
+      // Configuration de marked pour mieux gérer les espaces et retours à la ligne
+      marked.setOptions({
+        breaks: true,           // Convertit les retours à la ligne en <br>
+        gfm: true,              // GitHub Flavored Markdown
+        headerIds: true,        // Ajoute des IDs aux en-têtes
+        mangle: false,          // Pas de mangling des caractères spéciaux
+        smartLists: true,       // Meilleur rendu des listes
+        smartypants: true,      // Transforme les quotes, tirets etc.
+        xhtml: true             // Utilise la syntaxe XHTML
+      });
       imageUpload.addEventListener('change', handleFileSelect);
       submitBtn.addEventListener('click', handleSubmit);
+      // Support pour le drag and drop
+      const uploadZone = document.querySelector('.upload-zone');
+      uploadZone.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        uploadZone.classList.add('bg-gray-50');
+      });
+      uploadZone.addEventListener('dragleave', () => {
+        uploadZone.classList.remove('bg-gray-50');
+      });
+      uploadZone.addEventListener('drop', (e) => {
+        e.preventDefault();
+        uploadZone.classList.remove('bg-gray-50');
+        uploadedFiles = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
+        updatePreview();
+      });
       function handleFileSelect(event) {
         uploadedFiles = Array.from(event.target.files);
           const preview = document.createElement('div');
           preview.className = 'relative';
           preview.innerHTML = `
+            <img src="${URL.createObjectURL(file)}" alt="Preview" class="w-full h-32 object-cover rounded-lg shadow">
+            <button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 shadow">
               <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
               </svg>
             </button>
+            <div class="mt-1 text-sm text-gray-600 truncate">${file.name}</div>
           `;
           previewContainer.appendChild(preview);
         });
             throw new Error(data.error);
           }
+          // Préparation des données Markdown pour l'affichage
+          let markdownContent = data.result;
+          // Assurer que les doubles retours à la ligne sont bien rendus
+          markdownContent = markdownContent.replace(/\n\n/g, '\n&nbsp;\n');
           resultsSection.classList.remove('hidden');
+          analysisResult.innerHTML = marked.parse(markdownContent);
           resultsSection.scrollIntoView({ behavior: 'smooth' });
         } catch (error) {
           alert('Erreur lors de l\'analyse: ' + error.message);
     });
   </script>
 </body>
+</html>