Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Feb 2

Commit

460bd1d

verified ·

1 Parent(s): 41ab6cb

Upload index.html

Browse files

Files changed (1) hide show

templates/index.html +277 -495

templates/index.html CHANGED Viewed

@@ -1,520 +1,302 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Mariam AI - Analyse d'Image</title>
-    <!-- Tailwind CSS -->
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    typography: {
-                        DEFAULT: {
-                            css: {
-                                maxWidth: 'none',
-                                table: {
-                                    width: '100%'
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    </script>
-    <!-- Autres CDN -->
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
-    <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
-    <style>
-        /* Base styles */
-        .markdown-content {
-            width: 100%;
-            max-width: 100%;
-            overflow-x: auto;
-        }
-        .markdown-content table {
-            width: 100%;
-            border-collapse: collapse;
-            margin: 1rem 0;
-        }
-        .markdown-content th,
-        .markdown-content td {
-            border: 1px solid #e5e7eb;
-            padding: 0.75rem;
-            text-align: left;
-        }
-        .markdown-content th {
-            background-color: #f9fafb;
-        }
-        /* Loader */
-        .loader {
-            width: 48px;
-            height: 48px;
-            border: 5px solid #FFF;
-            border-bottom-color: #6366F1;
-            border-radius: 50%;
-            display: inline-block;
-            box-sizing: border-box;
-            animation: rotation 1s linear infinite;
-        }
-        @keyframes rotation {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Animations */
-        .fade-in {
-            animation: fadeIn 0.3s ease-in;
-        }
-        @keyframes fadeIn {
-            0% { opacity: 0; }
-            100% { opacity: 1; }
-        }
-        /* Upload zone styles */
-        .upload-zone {
-            border: 2px dashed #6366F1;
-            border-radius: 0.5rem;
-            padding: 2rem;
-            transition: all 0.3s ease;
-        }
-        .upload-zone:hover {
-            border-color: #4F46E5;
-            background-color: #EEF2FF;
-        }
-        /* SweetAlert customization */
-        .swal2-popup {
-            font-size: 0.875rem;
-        }
-    </style>
 </head>
-<body class="min-h-screen bg-gray-50">
-    <header class="bg-white shadow-sm">
-        <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
-            <h1 class="text-2xl md:text-3xl font-bold text-indigo-600">Mariam AI</h1>
-            <p class="mt-1 text-sm text-gray-500">Assistant pour commentaire composé</p>
-        </div>
     </header>
-    <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
-        <div class="bg-white rounded-lg shadow p-6 mb-8">
-            <form id="uploadForm" class="space-y-6">
-                <div class="upload-zone" id="dropZone">
-                    <input type="file" id="imageInput" accept="image/*" class="hidden">
-                    <label for="imageInput" class="block text-center cursor-pointer">
-                        <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <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>
-                        <p id="fileName" class="mt-2 text-sm text-gray-500">
-                            Cliquez ou glissez une image ici
-                        </p>
-                    </label>
-                </div>
-                <div id="imagePreview" class="hidden">
-                    <div class="relative max-w-lg mx-auto">
-                        <img id="preview" src="#" alt="Prévisualisation"
-                             class="rounded-lg shadow-md max-h-[400px] w-full object-contain">
-                        <button type="button" onclick="removeImage()"
-                                class="absolute top-2 right-2 p-2 rounded-full bg-white/90 hover:bg-red-500 hover:text-white
-                                       transition-colors duration-200">
-                            <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="M6 18L18 6M6 6l12 12" />
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-                <div class="flex justify-center">
-                    <button type="submit"
-                            class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg
-                                   hover:bg-indigo-700 focus:outline-none focus:ring-2
-                                   focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
-                        Analyser l'image
-                    </button>
-                </div>
-            </form>
-        </div>
-        <div id="loading" class="hidden">
-            <div class="flex flex-col items-center justify-center space-y-4">
-                <span class="loader"></span>
-                <p class="text-gray-500">Analyse en cours, veuillez patienter...</p>
             </div>
         </div>
-        <div id="results" class="space-y-8 hidden">
-            <div class="flex justify-center space-x-4">
-                <button id="showDissertation"
-                        class="px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700
-                               transition-colors duration-200">
-                    Dissertation
-                </button>
-                <button id="showTableau"
-                        class="px-4 py-2 rounded-lg bg-white text-indigo-600 hover:bg-indigo-50
-                               transition-colors duration-200">
-                    Tableau
-                </button>
-                <button id="showBackups"
-                        class="px-4 py-2 rounded-lg bg-white text-indigo-600 hover:bg-indigo-50
-                               transition-colors duration-200">
-                    Sauvegardes
-                </button>
-            </div>
-            <div id="dissertationTab" class="tab-content bg-white rounded-lg shadow p-6">
-                <h2 class="text-xl font-bold text-gray-900 mb-4">Dissertation</h2>
-                <div id="dissertationResult" class="markdown-content"></div>
-                <button id="saveDissertation"
-                        class="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg
-                               hover:bg-green-700 transition-colors duration-200">
-                    Sauvegarder la dissertation
-                </button>
-            </div>
-            <div id="tableauTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
-                <h2 class="text-xl font-bold text-gray-900 mb-4">Tableau d'analyse</h2>
-                <div id="tableauResult" class="markdown-content"></div>
-                <button id="saveTableau"
-                        class="mt-4 px-6 py-2 bg-green-600 text-white rounded-lg
-                               hover:bg-green-700 transition-colors duration-200">
-                    Sauvegarder le tableau
-                </button>
-            </div>
-            <div id="backupsTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
-                <h2 class="text-xl font-bold text-gray-900 mb-4">Sauvegardes locales</h2>
-                <div id="backupList" class="space-y-3"></div>
-            </div>
         </div>
-    </main>
-    <script>
-        let tableauContent = '';
-        let dissertationContent = '';
-        let backups = loadBackups();
-        // Gestion du drag & drop
-        const dropZone = document.getElementById('dropZone');
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            dropZone.addEventListener(eventName, preventDefaults, false);
-        });
-        function preventDefaults(e) {
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        ['dragenter', 'dragover'].forEach(eventName => {
-            dropZone.addEventListener(eventName, highlight, false);
-        });
-        ['dragleave', 'drop'].forEach(eventName => {
-            dropZone.addEventListener(eventName, unhighlight, false);
         });
-        function highlight(e) {
-            dropZone.classList.add('drag-over');
-        }
-        function unhighlight(e) {
-            dropZone.classList.remove('drag-over');
-        }
-        dropZone.addEventListener('drop', handleDrop, false);
-        function handleDrop(e) {
-            const dt = e.dataTransfer;
-            const files = dt.files;
-            if (files && files[0]) {
-                handleFiles(files);
-            }
-        }
-        function handleFiles(files) {
-            const imageInput = document.getElementById('imageInput');
-            imageInput.files = files;
-            handleImageSelect();
         }
-        function handleImageSelect() {
-            const input = document.getElementById('imageInput');
-            const preview = document.getElementById('preview');
-            const previewContainer = document.getElementById('imagePreview');
-            const fileName = document.getElementById('fileName');
-            if (input.files && input.files[0]) {
-                const reader = new FileReader();
-                reader.onload = function(e) {
-                    preview.src = e.target.result;
-                    previewContainer.classList.remove('hidden');
-                    previewContainer.classList.add('fade-in');
-                    fileName.textContent = input.files[0].name;
-                };
-                reader.readAsDataURL(input.files[0]);
-            }
-        }
-        function removeImage() {
-            const input = document.getElementById('imageInput');
-            const previewContainer = document.getElementById('imagePreview');
-            const fileName = document.getElementById('fileName');
-            input.value = '';
-            previewContainer.classList.add('hidden');
-            fileName.textContent = 'Cliquez ou glissez une image ici';
-        }
-        // Gestion des onglets
-        document.querySelectorAll('.tab-button').forEach(button => {
-            button.addEventListener('click', () => {
-                const tabName = button.id.replace('show', '').toLowerCase();
-                showTab(tabName);
-            });
         });
-        function showTab(tabName) {
-            document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
-            document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
-            const targetTab = document.getElementById(`${tabName}Tab`);
-            const targetButton = document.getElementById(`show${tabName.charAt(0).toUpperCase() + tabName.slice(1)}`);
-            targetTab.classList.remove('hidden');
-            targetButton.classList.add('active');
-            if (tabName === 'tableau') {
-                renderTableauContent();
-            } else if (tabName === 'backups') {
-                updateBackupList();
-            }
-        }
-        // Gestion des sauvegardes
-        function loadBackups() {
-            try {
-                return JSON.parse(localStorage.getItem('mariamAIBackups')) || [];
-            } catch {
-                return [];
-            }
-        }
-        function saveBackup(type, content) {
-            const timestamp = moment().format('YYYY-MM-DD HH:mm:ss');
-            backups.unshift({ timestamp, type, content });
-            localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
-            updateBackupList();
-            Swal.fire({
-                icon: 'success',
-                title: 'Sauvegarde réussie!',
-                toast: true,
-                position: 'top-end',
-                showConfirmButton: false,
-                timer: 3000
-            });
-        }
-        function updateBackupList() {
-            const backupList = document.getElementById('backupList');
-            backupList.innerHTML = backups.length ? '' : '<p class="text-gray-500 text-center py-4">Aucune sauvegarde disponible</p>';
-            backups.forEach((backup, index) => {
-                const div = document.createElement('div');
-                div.className = 'backup-item';
-                div.innerHTML = `
-                    <div class="flex-1">
-                        <h3 class="font-medium">${backup.type === 'dissertation' ? 'Dissertation' : 'Tableau'}</h3>
-                        <p class="text-sm text-gray-500">${backup.timestamp}</p>
-                    </div>
-                    <div class="backup-actions">
-                        <button data-index="${index}" class="view-backup px-3 py-1 rounded-lg bg-blue-500 text-white text-sm hover:bg-blue-600">
-                            Voir
-                        </button>
-                        <button data-index="${index}" class="delete-backup px-3 py-1 rounded-lg bg-red-500 text-white text-sm hover:bg-red-600">
-                            Supprimer
-                        </button>
-                    </div>
-                `;
-                backupList.appendChild(div);
-            });
-            document.querySelectorAll('.view-backup').forEach(btn =>
-                btn.addEventListener('click', viewBackup));
-            document.querySelectorAll('.delete-backup').forEach(btn =>
-                btn.addEventListener('click', deleteBackup));
-        }
-        function viewBackup(event) {
-            const backup = backups[event.target.dataset.index];
-            Swal.fire({
-                title: backup.type === 'dissertation' ? 'Dissertation sauvegardée' : 'Tableau sauvegardé',
-                html: marked.parse(backup.content),
-                width: '90%',
-                customClass: {
-                    popup: 'swal2-popup-large',
-                    htmlContainer: 'markdown-content px-4'
-                },
-                showCloseButton: true,
-                showConfirmButton: false
-            });
-        }
-        function deleteBackup(event) {
-            const index = event.target.dataset.index;
-            const backup = backups[index];
-            Swal.fire({
-                title: 'Confirmer la suppression',
-                text: `Voulez-vous vraiment supprimer cette sauvegarde du ${backup.timestamp} ?`,
-                icon: 'warning',
-                showCancelButton: true,
-                confirmButtonColor: '#EF4444',
-                cancelButtonColor: '#6B7280',
-                confirmButtonText: 'Supprimer',
-                cancelButtonText: 'Annuler'
-            }).then((result) => {
-                if (result.isConfirmed) {
-                    backups.splice(index, 1);
-                    localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
-                    updateBackupList();
-                    Swal.fire({
-                        title: 'Supprimé!',
-                        text: 'La sauvegarde a été supprimée.',
-                        icon: 'success',
-                        toast: true,
-                        position: 'top-end',
-                        showConfirmButton: false,
-                        timer: 3000
-                    });
-                }
-            });
-        }
-        // Gestion des boutons de sauvegarde
-        document.getElementById('saveDissertation').addEventListener('click', () => {
-            if (!dissertationContent.trim()) {
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Erreur',
-                    text: 'Aucun contenu à sauvegarder'
-                });
-                return;
-            }
-            saveBackup('dissertation', dissertationContent);
         });
-        document.getElementById('saveTableau').addEventListener('click', () => {
-            if (!tableauContent.trim()) {
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Erreur',
-                    text: 'Aucun contenu à sauvegarder'
-                });
-                return;
-            }
-            saveBackup('tableau', tableauContent);
         });
-        // Gestion du formulaire d'upload
-        document.getElementById('uploadForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const imageInput = document.getElementById('imageInput');
-            if (!imageInput.files || !imageInput.files[0]) {
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Aucune image sélectionnée',
-                    text: 'Veuillez sélectionner une image à analyser.'
-                });
-                return;
-            }
-            const loading = document.getElementById('loading');
-            const results = document.getElementById('results');
-            const dissertationResult = document.getElementById('dissertationResult');
-            const formData = new FormData();
-            formData.append('image', imageInput.files[0]);
-            loading.classList.remove('hidden');
-            results.classList.add('hidden');
-            try {
-                const response = await fetch('/analyze', {
-                    method: 'POST',
-                    body: formData
-                });
-                if (!response.ok) {
-                    throw new Error(`Erreur serveur: ${response.status}`);
-                }
-                const data = await response.json();
-                dissertationContent = data.dissertation;
-                tableauContent = data.tableau;
-                // Configuration de marked pour le rendu Markdown
-                marked.setOptions({
-                    breaks: true,
-                    gfm: true,
-                    tables: true,
-                    smartLists: true,
-                    smartypants: true
-                });
-                dissertationResult.innerHTML = marked.parse(data.dissertation);
-                results.classList.remove('hidden');
-                results.classList.add('fade-in');
-                // Scroll vers les résultats
-                results.scrollIntoView({ behavior: 'smooth', block: 'start' });
-            } catch (error) {
-                console.error("Erreur lors de l'analyse:", error);
-                Swal.fire({
-                    icon: 'error',
-                    title: 'Erreur',
-                    text: "Une erreur est survenue lors de l'analyse de l'image. Veuillez réessayer."
-                });
-            } finally {
-                loading.classList.add('hidden');
-            }
         });
-        function renderTableauContent() {
-            const tableauResult = document.getElementById('tableauResult');
-            if (tableauContent) {
-                tableauResult.innerHTML = marked.parse(tableauContent);
-            }
-        }
-        // Initialisation
-        document.getElementById('imageInput').addEventListener('change', handleImageSelect);
-        updateBackupList();
-    </script>
 </body>
 </html>

 <!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>