Spaces:

Docfile
/

M-anglais

Running

App Files Files Community

Docfile commited on Mar 2

Commit

2480afe

verified ·

1 Parent(s): c62db4e

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +205 -193

templates/index.html CHANGED Viewed

@@ -1,207 +1,219 @@
 <!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>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: '#4CAF50',
-                        'primary-dark': '#3e8e41',
-                    }
-                }
-            }
         }
-    </script>
-    <style>
-        .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">
-                    <label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
-                        <input type="radio" name="analysis_type" value="text" class="h-4 w-4 text-primary">
-                        <span class="ml-3">🔍 Type 1: Analyse de Texte</span>
-                    </label>
-                    <label class="flex items-center p-4 rounded-lg border border-gray-200 cursor-pointer hover:bg-gray-50 transition-colors">
-                        <input type="radio" name="analysis_type" value="icon" class="h-4 w-4 text-primary">
-                        <span class="ml-3">🧠 Type 2: Document iconographique</span>
-                    </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">
-            <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>
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const imageUpload = document.getElementById('image-upload');
-            const previewContainer = document.getElementById('preview-container');
-            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();
-            }
-            function updatePreview() {
-                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">
-                        <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);
-                });
-                submitBtn.disabled = uploadedFiles.length === 0;
-            }
-            function removeImage(index) {
-                uploadedFiles.splice(index, 1);
-                updatePreview();
-            }
-            async function handleSubmit() {
-                if (uploadedFiles.length === 0) {
-                    alert('Veuillez sélectionner au moins une image.');
-                    return;
-                }
-                const analysisType = document.querySelector('input[name="analysis_type"]:checked')?.value;
-                if (!analysisType) {
-                    alert('Veuillez sélectionner un type d\'analyse.');
-                    return;
-                }
-                const formData = new FormData();
-                formData.append('analysis_type', analysisType);
-                uploadedFiles.forEach(file => formData.append('images', file));
-                submitBtn.disabled = true;
-                submitBtn.innerHTML = '<span class="animate-pulse">Analyse en cours...</span>';
-                try {
-                    const response = await fetch('/analyze', {
-                        method: 'POST',
-                        body: formData
-                    });
-                    const data = await response.json();
-                    if (data.error) {
-                        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 {
-                    submitBtn.disabled = false;
-                    submitBtn.innerHTML = '🚀 Soumettre';
-                }
-            }
-            window.removeImage = removeImage;
         });
-    </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>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: '#4CAF50',
+            'primary-dark': '#3e8e41',
+          }
         }
+      }
+    }
+  </script>
+  <style>
+    .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>
+  <script>
+    document.addEventListener('DOMContentLoaded', () => {
+      const imageUpload = document.getElementById('image-upload');
+      const previewContainer = document.getElementById('preview-container');
+      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();
+      }
+      function updatePreview() {
+        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">
+            <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);
         });
+        submitBtn.disabled = uploadedFiles.length === 0;
+      }
+      function removeImage(index) {
+        uploadedFiles.splice(index, 1);
+        updatePreview();
+      }
+      async function handleSubmit() {
+        if (uploadedFiles.length === 0) {
+          alert('Veuillez sélectionner au moins une image.');
+          return;
+        }
+        const analysisType = document.querySelector('input[name="analysis_type"]:checked')?.value;
+        if (!analysisType) {
+          alert('Veuillez sélectionner un type d\'analyse.');
+          return;
+        }
+        const formData = new FormData();
+        formData.append('analysis_type', analysisType);
+        uploadedFiles.forEach(file => formData.append('images', file));
+        submitBtn.disabled = true;
+        submitBtn.innerHTML = '<span class="animate-pulse">Analyse en cours...</span>';
+        try {
+          const response = await fetch('/analyze', {
+            method: 'POST',
+            body: formData
+          });
+          const data = await response.json();
+          if (data.error) {
+            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 {
+          submitBtn.disabled = false;
+          submitBtn.innerHTML = '🚀 Soumettre';
+        }
+      }
+      window.removeImage = removeImage;
+    });
+  </script>
 </body>
+</html>