Spaces:

Docfile
/

M-anglais

Running

App Files Files Community

Docfile commited on 19 days ago

Commit

189dc11

verified ·

1 Parent(s): e4b56f5

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +92 -42

templates/index.html CHANGED Viewed

@@ -12,18 +12,45 @@
         extend: {
           colors: {
             primary: '#4CAF50',
-            'primary-dark': '#3e8e41',
             secondary: '#2D3748',
             accent: '#F6AD55'
           },
           fontFamily: {
             sans: ['Inter', 'sans-serif']
           }
         }
       }
     }
   </script>
   <style>
     .markdown-content {
       width: 100%;
       overflow-wrap: break-word;
@@ -37,6 +64,7 @@
       border-radius: 0.5rem;
       margin: 1rem 0;
       overflow-x: auto;
     }
     .markdown-content code {
       background-color: #edf2f7;
@@ -44,13 +72,11 @@
       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;
@@ -71,7 +97,6 @@
       margin-top: 1rem;
       margin-bottom: 0.5rem;
     }
-    /* Styles pour les listes */
     .markdown-content ul, .markdown-content ol {
       margin-left: 1.5rem;
       margin-bottom: 1rem;
@@ -79,7 +104,6 @@
     .markdown-content li {
       margin-bottom: 0.5rem;
     }
-    /* Styles pour les blockquotes */
     .markdown-content blockquote {
       border-left: 4px solid #e2e8f0;
       padding-left: 1rem;
@@ -89,7 +113,6 @@
       font-style: italic;
       color: #4a5568;
     }
-    /* Styles pour les séparateurs horizontaux */
     .markdown-content hr {
       margin: 1.5rem 0;
       border: 0;
@@ -102,20 +125,29 @@
     .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>
@@ -123,7 +155,7 @@
     <!-- 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>
@@ -131,7 +163,7 @@
           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>
@@ -140,7 +172,7 @@
       </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>
@@ -149,8 +181,7 @@
           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>
@@ -159,8 +190,7 @@
               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>
@@ -170,21 +200,29 @@
             </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>
@@ -199,35 +237,33 @@
       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();
       });
@@ -241,15 +277,15 @@
         previewContainer.innerHTML = '';
         uploadedFiles.forEach((file, index) => {
           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);
         });
@@ -261,6 +297,23 @@
         updatePreview();
       }
       async function handleSubmit() {
         if (uploadedFiles.length === 0) {
           alert('Veuillez sélectionner au moins une image.');
@@ -292,10 +345,7 @@
             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');

         extend: {
           colors: {
             primary: '#4CAF50',
+            'primary-dark': '#3e8e41',
             secondary: '#2D3748',
             accent: '#F6AD55'
           },
           fontFamily: {
             sans: ['Inter', 'sans-serif']
+          },
+          animation: {
+            'gradient': 'gradient 8s ease infinite',
+            'float': 'float 3s ease-in-out infinite'
+          },
+          keyframes: {
+            gradient: {
+              '0%, 100%': {
+                'background-position': '0% 50%'
+              },
+              '50%': {
+                'background-position': '100% 50%'
+              }
+            },
+            float: {
+              '0%, 100%': {
+                transform: 'translateY(0)'
+              },
+              '50%': {
+                transform: 'translateY(-10px)'
+              }
+            }
           }
         }
       }
     }
   </script>
   <style>
+    .gradient-bg {
+      background: linear-gradient(-45deg, #4CAF50, #81C784, #2E7D32, #1B5E20);
+      background-size: 400% 400%;
+      animation: gradient 8s ease infinite;
+    }
     .markdown-content {
       width: 100%;
       overflow-wrap: break-word;
       border-radius: 0.5rem;
       margin: 1rem 0;
       overflow-x: auto;
+      position: relative;
     }
     .markdown-content code {
       background-color: #edf2f7;
       border-radius: 0.25rem;
       font-family: ui-monospace, monospace;
     }
     .markdown-content p {
       margin-bottom: 1rem;
       line-height: 1.6;
       white-space: pre-line;
     }
     .markdown-content h1 {
       font-size: 1.8rem;
       font-weight: bold;
       margin-top: 1rem;
       margin-bottom: 0.5rem;
     }
     .markdown-content ul, .markdown-content ol {
       margin-left: 1.5rem;
       margin-bottom: 1rem;
     .markdown-content li {
       margin-bottom: 0.5rem;
     }
     .markdown-content blockquote {
       border-left: 4px solid #e2e8f0;
       padding-left: 1rem;
       font-style: italic;
       color: #4a5568;
     }
     .markdown-content hr {
       margin: 1.5rem 0;
       border: 0;
     .animate-fade-in {
       animation: fadeIn 1s ease-out;
     }
     .card {
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      backdrop-filter: blur(8px);
+      transition: all 0.3s ease;
+    }
+    .card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+    }
+    .glass-effect {
+      background: rgba(255, 255, 255, 0.95);
+      backdrop-filter: blur(10px);
     }
   </style>
 </head>
+<body class="gradient-bg 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-6xl font-bold text-white mb-4 drop-shadow-lg animate-float">
         ✨ Mariam Anglais ✨
       </h1>
+      <p class="text-white text-xl font-light tracking-wide">
         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="glass-effect rounded-2xl 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>
           Téléchargement d'images
         </h2>
         <div
+          class="upload-zone border-3 border-dashed border-primary/50 rounded-lg p-10 text-center cursor-pointer hover:bg-white/50 transition-all duration-300"
           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>
       <!-- Analysis Type Section -->
+      <div class="glass-effect rounded-2xl 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>
           Choix du type d'analyse
         </h2>
         <div class="space-y-6">
+          <label class="flex flex-col p-5 rounded-lg border-2 border-gray-200 cursor-pointer hover:border-primary/50 hover:bg-white/50 transition-all duration-300">
             <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>
               Analyse de texte détaillée comprenant INTRODUCTION, SUMMARY, COMMENTARY et EVALUATION.
             </p>
           </label>
+          <label class="flex flex-col p-5 rounded-lg border-2 border-gray-200 cursor-pointer hover:border-primary/50 hover:bg-white/50 transition-all duration-300">
             <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>
             </p>
           </label>
         </div>
+        <button id="submit-btn" class="w-full mt-8 bg-primary hover:bg-primary-dark text-white font-bold py-4 px-6 rounded-xl transition-all duration-300 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 glass-effect rounded-2xl card p-8 hidden animate-fade-in">
+      <div class="flex justify-between items-center mb-6">
+        <h2 class="text-2xl font-semibold text-primary">📝 Résultat de l'analyse</h2>
+        <button onclick="copyResults()" class="flex items-center gap-2 bg-primary/10 hover:bg-primary/20 text-primary px-4 py-2 rounded-lg transition-all duration-300">
+          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3"></path>
+          </svg>
+          Copier
+        </button>
+      </div>
       <div id="analysis-result" class="markdown-content prose max-w-none"></div>
     </div>
     <!-- Footer -->
+    <footer class="mt-16 text-center text-white">
+      <hr class="my-6 border-white/20" />
       <p>© 2025 Mariam AI - Tous droits réservés.</p>
     </footer>
   </div>
       let uploadedFiles = [];
       marked.setOptions({
+        breaks: true,
+        gfm: true,
+        headerIds: true,
+        mangle: false,
+        smartLists: true,
+        smartypants: true,
+        xhtml: true
       });
       imageUpload.addEventListener('change', handleFileSelect);
       submitBtn.addEventListener('click', handleSubmit);
       const uploadZone = document.querySelector('.upload-zone');
       uploadZone.addEventListener('dragover', (e) => {
         e.preventDefault();
+        uploadZone.classList.add('bg-white/50');
       });
       uploadZone.addEventListener('dragleave', () => {
+        uploadZone.classList.remove('bg-white/50');
       });
       uploadZone.addEventListener('drop', (e) => {
         e.preventDefault();
+        uploadZone.classList.remove('bg-white/50');
         uploadedFiles = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
         updatePreview();
       });
         previewContainer.innerHTML = '';
         uploadedFiles.forEach((file, index) => {
           const preview = document.createElement('div');
+          preview.className = 'relative group';
           preview.innerHTML = `
+            <img src="${URL.createObjectURL(file)}" alt="Preview" class="w-full h-32 object-cover rounded-lg shadow group-hover:opacity-75 transition-all duration-300">
+            <button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 hover:bg-red-600 transition-all duration-300 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-2 text-sm text-gray-600 truncate">${file.name}</div>
           `;
           previewContainer.appendChild(preview);
         });
         updatePreview();
       }
+      window.copyResults = function() {
+        const textToCopy = analysisResult.textContent;
+        navigator.clipboard.writeText(textToCopy).then(() => {
+          const copyButton = document.querySelector('button[onclick="copyResults()"]');
+          const originalContent = copyButton.innerHTML;
+          copyButton.innerHTML = `
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+            </svg>
+            Copié!
+          `;
+          setTimeout(() => {
+            copyButton.innerHTML = originalContent;
+          }, 2000);
+        });
+      };
       async function handleSubmit() {
         if (uploadedFiles.length === 0) {
           alert('Veuillez sélectionner au moins une image.');
             throw new Error(data.error);
           }
           let markdownContent = data.result;
           markdownContent = markdownContent.replace(/\n\n/g, '\n&nbsp;\n');
           resultsSection.classList.remove('hidden');