Mphilo3

Running

App Files Files Community

Docfile commited on 2 days ago

Commit

b992777

verified ·

1 Parent(s): dd03160

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +151 -8

templates/index.html CHANGED Viewed

@@ -41,6 +41,89 @@
       border-radius: 0.25rem;
       font-family: ui-monospace, monospace;
     }
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
@@ -48,6 +131,14 @@
     .animate-fade-in {
       animation: fadeIn 1s ease-out;
     }
   </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
@@ -65,9 +156,10 @@
     <!-- 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">
@@ -82,7 +174,11 @@
       </div>
       <!-- Bouton de soumission (seulement) -->
-      <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col justify-center">
         <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>
@@ -90,7 +186,7 @@
     </div>
     <!-- Résultats -->
-    <div id="results" class="mt-12 bg-white rounded-xl shadow-lg p-6 hidden">
       <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>
@@ -109,12 +205,44 @@
       const submitBtn = document.getElementById('submit-btn');
       const resultsSection = document.getElementById('results');
       const analysisResult = document.getElementById('analysis-result');
       let uploadedFiles = [];
       imageUpload.addEventListener('change', handleFileSelect);
       submitBtn.addEventListener('click', handleSubmit);
       function handleFileSelect(event) {
         uploadedFiles = Array.from(event.target.files);
         updatePreview();
@@ -126,12 +254,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);
         });
@@ -168,9 +297,23 @@
             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);
         } finally {
@@ -183,4 +326,4 @@
     });
   </script>
 </body>
-</html>

       border-radius: 0.25rem;
       font-family: ui-monospace, monospace;
     }
+    /* Amélioration pour les paragraphes et espaces */
+    .markdown-content p {
+      margin-bottom: 1rem;
+      line-height: 1.7;
+      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;
+      color: #2d3748;
+    }
+    .markdown-content h2 {
+      font-size: 1.5rem;
+      font-weight: bold;
+      margin-top: 1.25rem;
+      margin-bottom: 0.75rem;
+      color: #2d3748;
+    }
+    .markdown-content h3 {
+      font-size: 1.25rem;
+      font-weight: bold;
+      margin-top: 1rem;
+      margin-bottom: 0.5rem;
+      color: #2d3748;
+    }
+    /* Styles pour les listes */
+    .markdown-content ul, .markdown-content ol {
+      margin-left: 1.5rem;
+      margin-bottom: 1rem;
+      padding-left: 1rem;
+    }
+    .markdown-content li {
+      margin-bottom: 0.5rem;
+    }
+    .markdown-content ul {
+      list-style-type: disc;
+    }
+    .markdown-content ol {
+      list-style-type: decimal;
+    }
+    /* Styles pour les citations */
+    .markdown-content blockquote {
+      border-left: 4px solid #4CAF50;
+      padding: 0.5rem 1rem;
+      margin: 1rem 0;
+      background-color: #f8f9fa;
+      font-style: italic;
+      color: #4a5568;
+    }
+    /* Styles pour les tableaux */
+    .markdown-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 1rem 0;
+    }
+    .markdown-content th,
+    .markdown-content td {
+      padding: 0.5rem;
+      border: 1px solid #e2e8f0;
+    }
+    .markdown-content th {
+      background-color: #f8f9fa;
+      font-weight: bold;
+    }
+    /* Styles pour les séparateurs */
+    .markdown-content hr {
+      margin: 1.5rem 0;
+      border: 0;
+      border-top: 1px solid #e2e8f0;
+    }
+    /* Style pour les liens */
+    .markdown-content a {
+      color: #4CAF50;
+      text-decoration: underline;
+    }
+    .markdown-content a:hover {
+      text-decoration: none;
+    }
     @keyframes fadeIn {
       from { opacity: 0; }
       to { opacity: 1; }
     .animate-fade-in {
       animation: fadeIn 1s ease-out;
     }
+    /* Style pour le conteneur des résultats */
+    #results {
+      transition: all 0.3s ease;
+    }
+    /* Ombres plus marquées pour les cartes */
+    .card-shadow {
+      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
+    }
   </style>
 </head>
 <body class="bg-gray-50 min-h-screen">
     <!-- Main Content -->
     <div class="grid md:grid-cols-2 gap-8">
       <!-- Upload Section -->
+      <div class="bg-white rounded-xl shadow-lg p-6 card-shadow">
         <h2 class="text-2xl font-semibold text-primary mb-4">📷 Téléchargement d'images</h2>
         <div
+          id="upload-zone"
           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>
       <!-- Bouton de soumission (seulement) -->
+      <div class="bg-white rounded-xl shadow-lg p-6 flex flex-col justify-center card-shadow">
+        <h2 class="text-2xl font-semibold text-primary mb-4">🧠 Analyse Philosophique</h2>
+        <p class="text-gray-600 mb-6">
+          Cette analyse vous fournira une réflexion philosophique approfondie basée sur le(s) document(s) téléchargé(s).
+        </p>
         <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>
     <!-- Résultats -->
+    <div id="results" class="mt-12 bg-white rounded-xl shadow-lg p-6 hidden animate-fade-in card-shadow">
       <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>
       const submitBtn = document.getElementById('submit-btn');
       const resultsSection = document.getElementById('results');
       const analysisResult = document.getElementById('analysis-result');
+      const uploadZone = document.getElementById('upload-zone');
       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
+      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');
+        const files = Array.from(e.dataTransfer.files).filter(file => file.type.startsWith('image/'));
+        if (files.length > 0) {
+          uploadedFiles = files;
+          updatePreview();
+        }
+      });
       function handleFileSelect(event) {
         uploadedFiles = Array.from(event.target.files);
         updatePreview();
           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-md">
+            <button onclick="removeImage(${index})" class="absolute top-2 right-2 bg-red-500 text-white rounded-full p-1 hover:bg-red-600 shadow-sm transition-all transform hover:scale-110">
               <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 un meilleur rendu
+          let markdownContent = data.result;
+          // Assurer que les doubles retours à la ligne sont bien rendus
+          markdownContent = markdownContent.replace(/\n\n/g, '\n&nbsp;\n');
+          // Préserver les espaces multiples
+          markdownContent = markdownContent.replace(/  +/g, match => '&nbsp;'.repeat(match.length));
           resultsSection.classList.remove('hidden');
+          analysisResult.innerHTML = marked.parse(markdownContent);
+          // Animation douce pour le scroll
+          resultsSection.scrollIntoView({
+            behavior: 'smooth',
+            block: 'start'
+          });
         } catch (error) {
           alert('Erreur lors de l\'analyse: ' + error.message);
         } finally {
     });
   </script>
 </body>
+</html>