Update templates/index.html

templates/index.html

@@ -6,11 +6,19 @@
     <title>Mariam Espagnol - Analyse de Documents</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/[email protected]/marked.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.24.1/prism.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.24.1/themes/prism.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.24.1/prism.min.js" integrity="sha512-a63LMgq4XH5N+DXkrHCxBUC9vOlflXd+hNt6sJOUFr10a9IFJd3r1J52W3Ak296j7b5fVz/AhJK5dGgLNZwdtw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.24.1/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXOyEVrd0XB9aLhtFOUUjLz90GzvnBCgXWLSntyo7w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- Using Prism Tomorrow theme for better contrast -->
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap');
 
+        body {
+            font-family: 'Poppins', sans-serif;
+        }
+        h1, h2, h3, h4, h5, h6 {
+            font-family: 'Playfair Display', serif;
+        }
+
         .fade-in { animation: fadeIn 0.5s ease-in; }
         .slide-up { animation: slideUp 0.5s ease-out; }
         @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@@ -23,121 +31,172 @@
             color: transparent;
         }
         .upload-zone {
-            background: linear-gradient(145deg, #ffffff, #f3f4f6);
-            box-shadow: 20px 20px 60px #d1d1d1, -20px -20px 60px #ffffff;
+            background: linear-gradient(145deg, #f9fafb, #f3f4f6); /* Slightly adjusted gradient */
+            box-shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff; /* Adjusted shadow */
             transition: all 0.3s ease;
         }
-        .upload-zone:hover { transform: scale(1.01); }
-        .waves { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); }
+        .upload-zone.dragover { /* Style when dragging over */
+            border-color: #4f46e5; /* Indigo */
+            background: #e0e7ff; /* Lighter Indigo */
+            transform: scale(1.02);
+        }
+        .waves { position: absolute; bottom: 0; left: 0; width: 100%; overflow: hidden; line-height: 0; transform: rotate(180deg); z-index: 0; }
         .waves svg { position: relative; display: block; width: calc(100% + 1.3px); height: 150px; }
-        .prose { max-width: none; color: #374151; }
-        .prose h1, .prose h2, .prose h3 { color: #1F2937; font-family: 'Playfair Display', serif; margin-top: 2em; margin-bottom: 1em; }
-        .prose p { margin-bottom: 1.5em; line-height: 1.8; }
+        .waves .fill-indigo-50 { fill: #eef2ff; } /* Ensure Tailwind color is applied */
+
+        /* --- Responsive Analysis Box --- */
+        /* Ensure prose content wraps and code blocks are scrollable if needed */
+        .prose { max-width: 100%; /* Allow prose to fill container */ }
+        .prose pre {
+            background-color: #2d2d2d; /* Match Prism Tomorrow */
+            color: #ccc;
+            padding: 1em;
+            overflow-x: auto; /* Allow horizontal scroll for code */
+            border-radius: 0.375rem; /* Tailwind's rounded-md */
+        }
+        .prose code[class*="language-"] {
+           font-family: 'Courier New', Courier, monospace; /* Consistent code font */
+           color: #ccc;
+           background: none; /* Prism handles background */
+           text-shadow: none;
+        }
+        .prose h1, .prose h2, .prose h3 { color: #1F2937; margin-top: 1.5em; margin-bottom: 0.8em; padding-bottom: 0.3em; border-bottom: 1px solid #e5e7eb; }
+        .prose p { margin-bottom: 1.25em; line-height: 1.7; }
+        .prose ul, .prose ol { margin-left: 1.5em; margin-bottom: 1.25em; }
+        .prose li > p { margin-bottom: 0.5em; } /* Less space inside list items */
         /* Style pour le bouton désactivé */
         button:disabled {
             opacity: 0.5;
             cursor: not-allowed;
+            background-color: #a5b4fc; /* Lighter indigo when disabled */
+        }
+        /* Ensure Prism highlights correctly */
+        :not(pre) > code[class*="language-"], pre[class*="language-"] {
+            background: #2d2d2d; /* Match theme */
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative">
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-x-hidden"> <!-- Prevent body scrollbars -->
     <div class="waves">
         <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
             <path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="fill-indigo-50"></path>
         </svg>
     </div>
 
-    <div class="max-w-6xl mx-auto px-4 py-12 relative z-10">
+    <div class="max-w-4xl mx-auto px-4 py-12 relative z-10"> <!-- Reduced max-width for better focus -->
         <!-- Header -->
-        <header class="text-center mb-16 fade-in">
-            <h1 class="text-5xl md:text-6xl font-bold mb-4 font-['Playfair_Display'] gradient-text">
+        <header class="text-center mb-12 fade-in"> <!-- Reduced margin -->
+            <h1 class="text-4xl md:text-5xl font-bold mb-3 font-['Playfair_Display'] gradient-text">
                 Mariam Espagnol
             </h1>
-            <p class="text-xl text-gray-600 font-light max-w-2xl mx-auto">
-                Analysez vos documents en espagnol avec une traduction française précise et élégante
+            <p class="text-lg text-gray-600 font-light max-w-xl mx-auto">
+                Analysez vos documents iconographiques ou textuels en espagnol
             </p>
         </header>
 
         <!-- Main Content -->
         <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-8 slide-up">
             <!-- File Type Selection -->
-            <div class="mb-8">
-                <label class="block text-lg font-medium text-gray-700 mb-4">Type de document</label>
-                <div class="flex gap-6">
-                    <label class="relative flex items-center group cursor-pointer">
+            <div class="mb-6">
+                <label class="block text-base font-medium text-gray-700 mb-3">1. Choisissez le type de document</label>
+                <div class="flex flex-col sm:flex-row gap-4">
+                    <label class="relative flex items-center group cursor-pointer p-3 border border-gray-200 rounded-lg hover:bg-indigo-50 transition-colors w-full">
                         <input type="radio" name="fileType" value="image" checked
-                               class="peer sr-only">
-                        <div class="w-6 h-6 border-2 border-gray-300 rounded-full peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
-                        <!-- Changement de label -->
-                        <span class="ml-3 text-gray-700 group-hover:text-indigo-500 transition-colors">Document iconographique</span>
+                               class="peer sr-only file-type-radio">
+                        <div class="w-5 h-5 mr-3 border-2 border-gray-300 rounded-full flex-shrink-0 peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
+                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Document iconographique (Image, Photo, Dessin...)</span>
                     </label>
-                    <label class="relative flex items-center group cursor-pointer">
+                    <label class="relative flex items-center group cursor-pointer p-3 border border-gray-200 rounded-lg hover:bg-indigo-50 transition-colors w-full">
                         <input type="radio" name="fileType" value="text"
-                               class="peer sr-only">
-                        <div class="w-6 h-6 border-2 border-gray-300 rounded-full peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
-                        <!-- Changement de label -->
-                        <span class="ml-3 text-gray-700 group-hover:text-indigo-500 transition-colors">Document textuel</span>
+                               class="peer sr-only file-type-radio">
+                        <div class="w-5 h-5 mr-3 border-2 border-gray-300 rounded-full flex-shrink-0 peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
+                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Document textuel (Texte, PDF lisible...)</span>
                     </label>
                 </div>
             </div>
 
             <!-- Upload Zone -->
-            <div id="upload-zone" class="upload-zone border-2 border-dashed border-gray-300 rounded-2xl p-8 text-center cursor-pointer transition-all duration-300 relative overflow-hidden">
-                <div class="space-y-4">
-                    <div class="w-20 h-20 mx-auto rounded-full bg-indigo-50 flex items-center justify-center">
-                        <svg class="w-10 h-10 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
-                        </svg>
-                    </div>
-                    <div class="text-sm text-gray-600">
-                         <!-- Le clic sur ce label ouvrira la galerie grâce au "for" -->
-                        <label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
-                            <span>Déposez votre fichier ici</span>
-                        </label>
-                        <p class="pl-1">ou <label for="file-upload" class="cursor-pointer text-indigo-600 hover:text-indigo-500 font-medium">cliquez pour sélectionner</label></p>
-                         <!-- Input caché qui ouvre la galerie -->
-                        <input id="file-upload" name="file" type="file" class="sr-only">
+             <div class="mb-6">
+                 <label class="block text-base font-medium text-gray-700 mb-3">2. Sélectionnez votre fichier</label>
+                 <div id="upload-zone" class="upload-zone border-2 border-dashed border-gray-300 rounded-xl p-6 text-center cursor-pointer transition-all duration-300 relative overflow-hidden">
+                    <input id="file-upload" name="file" type="file" class="sr-only" accept="image/*"> <!-- Accept attribute will be updated by JS -->
+                    <div class="space-y-3">
+                        <div class="w-16 h-16 mx-auto rounded-full bg-indigo-100 flex items-center justify-center border-4 border-white shadow-sm">
+                            <svg class="w-8 h-8 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
+                            </svg>
+                        </div>
+                        <div class="text-sm text-gray-600">
+                            <label for="file-upload" class="relative cursor-pointer rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500">
+                                <span>Déposez votre fichier ici</span>
+                            </label>
+                            <span class="text-gray-500"> ou </span>
+                            <label for="file-upload" class="cursor-pointer text-indigo-600 hover:text-indigo-500 font-medium">cliquez pour sélectionner</label>
+                        </div>
+                        <p class="text-xs text-gray-500" id="file-types-info">Images (PNG, JPG, GIF) ou Textes (TXT, PDF) - Max 16MB</p>
                     </div>
-                    <p class="text-xs text-gray-500">PNG, JPG, GIF, PDF, TXT jusqu'à 10MB</p>
-                </div>
+                 </div>
             </div>
 
             <!-- Preview -->
-            <div id="preview" class="mt-8 hidden slide-up"> <!-- Ajustement marge -->
-                <h3 class="text-xl font-medium text-gray-900 mb-6">Aperçu du document</h3>
-                <div class="preview-container border rounded-xl p-6 bg-gray-50">
-                    <img id="image-preview" class="max-w-full h-auto hidden rounded-lg shadow-lg" alt="Aperçu">
-                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-4 rounded-lg shadow-inner max-h-60 overflow-auto"></pre> <!-- Ajout max-height et overflow -->
-                    <p id="file-info" class="text-sm text-gray-600 mt-4"></p> <!-- Pour afficher le nom du fichier -->
+            <div id="preview" class="mt-6 hidden slide-up">
+                <h3 class="text-base font-medium text-gray-800 mb-3">Aperçu</h3>
+                <div class="preview-container border rounded-lg p-4 bg-gray-50 max-h-72 overflow-auto relative"> <!-- Added max-height and overflow -->
+                    <img id="image-preview" class="max-w-full h-auto hidden rounded block mx-auto" alt="Aperçu Image"> <!-- Centered image -->
+                    <pre id="text-preview" class="text-sm text-gray-700 whitespace-pre-wrap hidden bg-white p-3 rounded shadow-inner"></pre>
+                    <p id="file-info" class="text-xs text-gray-500 mt-2 text-center"></p> <!-- Centered file info -->
+                     <button id="remove-file-button" class="absolute top-2 right-2 bg-red-100 text-red-600 hover:bg-red-200 rounded-full p-1 text-xs hidden" title="Retirer le fichier">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                        </svg>
+                    </button>
                 </div>
             </div>
 
             <!-- Submit Button -->
-            <div class="mt-8 text-center"> <!-- Ajout marge -->
+            <div class="mt-6 text-center">
                 <button id="submit-button"
                         disabled
-                        class="bg-indigo-600 text-white font-medium py-3 px-8 rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed">
-                    Soumettre pour analyse
+                        class="bg-indigo-600 text-white font-medium py-2.5 px-6 rounded-lg shadow hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150 ease-in-out disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-indigo-300">
+                    <span id="submit-button-text">3. Lancer l'analyse</span>
+                    <span id="submit-button-spinner" class="hidden">
+                         <svg class="animate-spin inline-block h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                          </svg>
+                         Analyse en cours...
+                    </span>
                 </button>
             </div>
 
             <!-- Analysis Results -->
-            <div id="results" class="mt-12 hidden slide-up">
-                <h3 class="text-xl font-medium text-gray-900 mb-6">Analyse détaillée</h3>
-                <div class="bg-white rounded-xl p-6 shadow-inner">
-                    <div id="analysis-content" class="prose prose-indigo"></div>
+            <div id="results" class="mt-10 hidden slide-up"> <!-- Increased margin -->
+                <h3 class="text-lg font-semibold text-gray-900 mb-4 border-b pb-2">Analyse détaillée</h3>
+                <!-- Added overflow-x-auto here -->
+                <div class="bg-gray-50 rounded-lg p-4 md:p-6 shadow-inner overflow-x-auto border border-gray-200">
+                    <div id="analysis-content" class="prose prose-sm sm:prose-base max-w-none prose-indigo">
+                        <!-- Analysis will be inserted here -->
+                        <p class="text-gray-500">L'analyse apparaîtra ici...</p> <!-- Placeholder -->
+                    </div>
+                </div>
+                 <div class="mt-4 text-right">
+                    <button id="copy-analysis-button" class="text-sm bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-1.5 px-3 rounded-md transition duration-150 ease-in-out">
+                        Copier l'analyse
+                    </button>
                 </div>
             </div>
-        </div>
-    </div>
+        </div> <!-- End main content block -->
 
-    <!-- Loading Spinner -->
-    <div id="loading" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden backdrop-blur-sm z-50">
-        <div class="bg-white p-8 rounded-2xl shadow-2xl">
-            <div class="animate-spin rounded-full h-16 w-16 border-t-4 border-b-4 border-indigo-500 mx-auto"></div>
-            <p class="text-gray-700 mt-4">Analyse en cours...</p>
-        </div>
-    </div>
+        <footer class="text-center mt-12 text-gray-500 text-sm fade-in">
+            <p>© 2025 Mariam Espagnol - Outil d'analyse</p>
+        </footer>
+
+    </div> <!-- End max-width container -->
+
+    <!-- Global Loading/Alert (Optional, could replace simple loading) -->
+    <!-- <div id="global-message" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden backdrop-blur-sm z-50 p-4"> -->
+        <!-- Content for loading or alerts -->
+    <!-- </div> -->
 
     <script>
         document.addEventListener('DOMContentLoaded', function() {
@@ -146,100 +205,191 @@
             const preview = document.getElementById('preview');
             const imagePreview = document.getElementById('image-preview');
             const textPreview = document.getElementById('text-preview');
-            const fileInfo = document.getElementById('file-info'); // Élément pour nom fichier
-            const submitButton = document.getElementById('submit-button'); // Le bouton soumettre
+            const fileInfo = document.getElementById('file-info');
+            const removeFileButton = document.getElementById('remove-file-button');
+            const submitButton = document.getElementById('submit-button');
+            const submitButtonText = document.getElementById('submit-button-text');
+            const submitButtonSpinner = document.getElementById('submit-button-spinner');
             const results = document.getElementById('results');
             const analysisContent = document.getElementById('analysis-content');
-            const loading = document.getElementById('loading');
+            const copyAnalysisButton = document.getElementById('copy-analysis-button');
+            // const loading = document.getElementById('loading'); // Using spinner in button now
+            const fileTypeRadios = document.querySelectorAll('.file-type-radio');
+            const fileTypesInfo = document.getElementById('file-types-info');
 
-            let selectedFile = null; // Variable pour stocker le fichier sélectionné
+            let selectedFile = null;
 
-            // Configuration de marked pour le rendu Markdown
+            // Configure marked
             marked.setOptions({
-                breaks: true, gfm: true, headerIds: true, sanitize: false
+                breaks: true, // Convert GFM line breaks to <br>
+                gfm: true,    // Use GitHub Flavored Markdown
+                headerIds: false, // Don't add IDs to headers automatically
+                mangle: false,   // Don't obscure email addresses
+                highlight: function(code, lang) {
+                    const language = Prism.languages[lang] || Prism.languages.markup;
+                    if (language) {
+                        return Prism.highlight(code, language, lang);
+                    }
+                    return code; // Return unhighlighted code if language not found
+                }
             });
 
-            // --- Gestion de la sélection du fichier ---
-
-            // Clic sur la zone d'upload ouvre l'input file
-            uploadZone.addEventListener('click', (e) => {
-                // Empêche le clic sur le label interne de déclencher deux fois l'ouverture
-                if (e.target.tagName !== 'LABEL' && e.target.tagName !== 'INPUT') {
-                    fileInput.click();
+            // --- Helper Functions ---
+            function showLoading(isLoading) {
+                if (isLoading) {
+                    submitButtonText.classList.add('hidden');
+                    submitButtonSpinner.classList.remove('hidden');
+                    submitButton.disabled = true;
+                } else {
+                    submitButtonText.classList.remove('hidden');
+                    submitButtonSpinner.classList.add('hidden');
+                    submitButton.disabled = (selectedFile === null); // Only enable if file is selected
                 }
+            }
+
+             function resetUI() {
+                selectedFile = null;
+                fileInput.value = ''; // Clear the file input
+                preview.classList.add('hidden');
+                imagePreview.classList.add('hidden');
+                textPreview.classList.add('hidden');
+                imagePreview.src = '#'; // Reset image source
+                textPreview.textContent = '';
+                fileInfo.textContent = '';
+                removeFileButton.classList.add('hidden');
+                results.classList.add('hidden');
+                analysisContent.innerHTML = '<p class="text-gray-500">L\'analyse apparaîtra ici...</p>'; // Reset analysis area
+                submitButton.disabled = true;
+                showLoading(false); // Ensure loading state is reset
+                updateAcceptAttribute(); // Reset accept attribute
+            }
+
+            function updateAcceptAttribute() {
+                 const selectedType = document.querySelector('input[name="fileType"]:checked').value;
+                 if (selectedType === 'image') {
+                     fileInput.accept = "image/png, image/jpeg, image/gif, image/webp";
+                     fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) - Max 16MB";
+                 } else { // text
+                     fileInput.accept = "text/plain, application/pdf, .txt"; // Allow PDF and TXT
+                     fileTypesInfo.textContent = "Textes (TXT, PDF lisible) - Max 16MB";
+                 }
+                 // Reset if type changes after selecting a file
+                 if (selectedFile) {
+                    resetUI();
+                    alert("Le type de document a été changé. Veuillez resélectionner votre fichier.");
+                 }
+            }
+
+
+            // --- Event Listeners ---
+
+            // File Type Change
+            fileTypeRadios.forEach(radio => {
+                radio.addEventListener('change', updateAcceptAttribute);
             });
 
-            // Gestion du Drag & Drop
+            // Upload Zone Interactions
+            uploadZone.addEventListener('click', () => fileInput.click());
             uploadZone.addEventListener('dragover', (e) => {
                 e.preventDefault();
-                uploadZone.classList.add('border-indigo-500', 'bg-indigo-50');
+                uploadZone.classList.add('dragover');
             });
             uploadZone.addEventListener('dragleave', () => {
-                uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
+                uploadZone.classList.remove('dragover');
             });
             uploadZone.addEventListener('drop', (e) => {
                 e.preventDefault();
-                uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
-                const files = e.dataTransfer.files;
-                if (files.length) {
-                    handleFileSelection(files[0]); // Gérer la sélection du fichier
+                uploadZone.classList.remove('dragover');
+                if (e.dataTransfer.files.length) {
+                    handleFileSelection(e.dataTransfer.files[0]);
                 }
             });
 
-            // Gestion du changement dans l'input file (sélection via galerie)
+            // File Input Change
             fileInput.addEventListener('change', (e) => {
                 if (e.target.files.length) {
-                    handleFileSelection(e.target.files[0]); // Gérer la sélection du fichier
+                    handleFileSelection(e.target.files[0]);
                 }
             });
 
-            // Fonction pour gérer la SELECTION et l'APERÇU (sans soumettre)
+             // Remove File Button
+            removeFileButton.addEventListener('click', resetUI);
+
+            // Submit Button Click
+            submitButton.addEventListener('click', handleSubmit);
+
+             // Copy Button Click
+            copyAnalysisButton.addEventListener('click', copyAnalysisToClipboard);
+
+
+            // --- Core Logic Functions ---
+
             function handleFileSelection(file) {
-                selectedFile = file; // Stocker le fichier
                 const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                const maxFileSize = 16 * 1024 * 1024; // 16 MB
 
-                // Afficher l'aperçu
-                preview.classList.remove('hidden');
-                preview.classList.add('fade-in');
+                // Basic Validation (Type based on selection, Size)
+                 if (file.size > maxFileSize) {
+                    alert(`Le fichier est trop volumineux (${(file.size / 1024 / 1024).toFixed(1)} Mo). La taille maximale est de 16 Mo.`);
+                    resetUI();
+                    return;
+                }
 
-                // Cacher les anciens résultats si présents
-                results.classList.add('hidden');
-                analysisContent.innerHTML = '';
+                 const allowedImageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+                 const allowedTextTypes = ['text/plain', 'application/pdf'];
 
-                // Afficher le nom du fichier
-                fileInfo.textContent = `Fichier sélectionné : ${file.name}`;
+                 if (fileType === 'image' && !allowedImageTypes.includes(file.type)) {
+                    // Allow if no type but ends with common image extension (browser might not set type correctly)
+                    const isImageTypeByName = /\.(jpe?g|png|gif|webp)$/i.test(file.name);
+                    if (!isImageTypeByName) {
+                       alert("Type de fichier invalide. Veuillez sélectionner une image (PNG, JPG, GIF, WEBP).");
+                       resetUI();
+                       return;
+                    }
+                 } else if (fileType === 'text' && !allowedTextTypes.includes(file.type)) {
+                     // Allow if no type but ends with .txt (PDF type is usually reliable)
+                    const isTextTypeByName = /\.txt$/i.test(file.name);
+                     if (!isTextTypeByName && file.type !== 'application/pdf') {
+                        alert("Type de fichier invalide. Veuillez sélectionner un fichier texte (TXT) ou PDF.");
+                        resetUI();
+                        return;
+                    }
+                 }
 
+                // If validation passes:
+                selectedFile = file;
+                preview.classList.remove('hidden');
+                preview.classList.add('fade-in');
+                results.classList.add('hidden'); // Hide previous results
+                analysisContent.innerHTML = '<p class="text-gray-500">L\'analyse apparaîtra ici...</p>'; // Reset placeholder
+                fileInfo.textContent = `${file.name} (${(file.size / 1024).toFixed(1)} Ko)`;
+                removeFileButton.classList.remove('hidden');
+
+                // Show preview based on selected type
                 if (fileType === 'image') {
-                    imagePreview.classList.remove('hidden', 'fade-in'); // Reset animation
+                    imagePreview.classList.remove('hidden');
                     textPreview.classList.add('hidden');
                     const reader = new FileReader();
-                    reader.onload = (e) => {
-                        imagePreview.src = e.target.result;
-                        void imagePreview.offsetWidth; // Force reflow pour rejouer animation
-                        imagePreview.classList.add('fade-in');
-                    };
+                    reader.onload = (e) => imagePreview.src = e.target.result;
                     reader.readAsDataURL(file);
                 } else { // text
                     imagePreview.classList.add('hidden');
-                    textPreview.classList.remove('hidden', 'fade-in'); // Reset animation
-                    const reader = new FileReader();
-                    reader.onload = (e) => {
-                        textPreview.textContent = e.target.result;
-                        void textPreview.offsetWidth; // Force reflow
-                        textPreview.classList.add('fade-in');
-                    };
-                    reader.readAsText(file);
+                    textPreview.classList.remove('hidden');
+                    if (file.type === 'application/pdf') {
+                         textPreview.textContent = "Aperçu non disponible pour les fichiers PDF. Le contenu sera analysé.";
+                    } else {
+                         const reader = new FileReader();
+                         reader.onload = (e) => textPreview.textContent = e.target.result;
+                         reader.readAsText(file);
+                    }
                 }
 
-                // Activer le bouton Soumettre
-                submitButton.disabled = false;
+                submitButton.disabled = false; // Enable submit button
             }
 
-            // --- Gestion de la SOUMISSION ---
-
-            submitButton.addEventListener('click', () => {
+            function handleSubmit() {
                 if (!selectedFile) {
-                    alert("Veuillez d'abord sélectionner un fichier.");
+                    alert("Veuillez sélectionner un fichier.");
                     return;
                 }
 
@@ -248,91 +398,90 @@
                 formData.append('file', selectedFile);
                 formData.append('fileType', fileType);
 
-                // Afficher le spinner de chargement
-                loading.classList.remove('hidden');
-                loading.classList.add('fade-in');
-                submitButton.disabled = true; // Désactiver pendant le chargement
+                showLoading(true);
+                results.classList.add('hidden'); // Hide old results before new request
 
-                // Simuler un appel API (remplacez par votre appel fetch réel)
-                console.log("Envoi du fichier:", selectedFile.name, "Type:", fileType);
-                // Décommentez et adaptez cette partie pour votre appel réel
-                /*
+                // *** THE ACTUAL FETCH CALL ***
                 fetch('/upload', {
                     method: 'POST',
                     body: formData
                 })
                 .then(response => {
                     if (!response.ok) {
-                        throw new Error(`Erreur HTTP: ${response.status}`);
+                         // Try to get error message from backend JSON response
+                         return response.json().then(errData => {
+                            throw new Error(errData.error || `Erreur HTTP: ${response.status}`);
+                         }).catch(() => {
+                            // Fallback if response is not JSON or doesn't have 'error' key
+                            throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`);
+                         });
                     }
                     return response.json();
                 })
                 .then(data => {
-                    loading.classList.add('hidden');
-                    results.classList.remove('hidden');
-                    results.classList.add('slide-up');
-                    analysisContent.innerHTML = marked.parse(data.analysis || "Aucune analyse reçue.");
-                    Prism.highlightAll();
-                    // Optionnel: réinitialiser après succès
-                    // selectedFile = null;
-                    // fileInput.value = ''; // Réinitialiser l'input file
-                    // preview.classList.add('hidden');
-                    // fileInfo.textContent = '';
-                    // submitButton.disabled = true;
+                    showLoading(false);
+                    if (data.success && data.analysis) {
+                        results.classList.remove('hidden');
+                        results.classList.add('slide-up');
+                        // Use marked to parse the Markdown response
+                        analysisContent.innerHTML = marked.parse(data.analysis);
+                        // Re-apply Prism highlighting AFTER content is added
+                        Prism.highlightAllUnder(analysisContent);
+                         // Optional: Scroll to results
+                        results.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    } else {
+                        // Handle cases where backend responds with success:false or missing analysis
+                        throw new Error(data.error || "L'analyse n'a pas pu être générée.");
+                    }
+                    // Decide if you want to reset after success
+                    // resetUI(); // Or keep the file selected
                 })
                 .catch(error => {
-                    loading.classList.add('hidden');
-                    submitButton.disabled = false; // Réactiver en cas d'erreur
-                    alert(`Une erreur est survenue lors de l'analyse : ${error.message}. Veuillez réessayer.`);
-                    console.error('Error:', error);
-                    // Cacher les résultats si une erreur survient
-                    results.classList.add('hidden');
-                    analysisContent.innerHTML = '';
+                    showLoading(false);
+                    // Display error message to the user
+                    analysisContent.innerHTML = `<p class="text-red-600 font-medium">Erreur lors de l'analyse :</p><p class="text-red-500 text-sm">${error.message}</p>`;
+                    results.classList.remove('hidden'); // Show the results area to display the error
+                    console.error('Error during analysis:', error);
+                    // Don't reset the file input on error, allow retry
+                     submitButton.disabled = false; // Re-enable button on error
                 });
-                */
-
-                // --- Simulation (à remplacer par le fetch ci-dessus) ---
-                setTimeout(() => {
-                    loading.classList.add('hidden');
-                    results.classList.remove('hidden');
-                    results.classList.add('slide-up');
-                    // Exemple de contenu Markdown simulé
-                    const simulatedMarkdown = `
-# Analyse du document : ${selectedFile.name}
-
-Ceci est une **simulation** de l'analyse.
-
-## Section 1: Résumé
-
-Le document de type *${fileType}* a été traité.
-
-## Section 2: Traduction (Exemple)
-
-*   **Original (Espagnol):** Hola Mundo
-*   **Traduction (Français):** Bonjour le Monde
-
-\`\`\`javascript
-// Exemple de bloc de code
-function greet() {
-  console.log("Simulation terminée !");
-}
-\`\`\`
-                    `;
-                    analysisContent.innerHTML = marked.parse(simulatedMarkdown);
-                    Prism.highlightAll(); // Appliquer PrismJS au contenu généré
-                    // Ne pas réinitialiser ici pour pouvoir voir le résultat de la simulation
-                    // selectedFile = null;
-                    // fileInput.value = '';
-                    // preview.classList.add('hidden');
-                    // fileInfo.textContent = '';
-                    // submitButton.disabled = true; // Garder désactivé après simulation ou le réactiver si besoin
-                     submitButton.disabled = false; // Réactiver après la simulation pour permettre une autre soumission
-                }, 2000); // Simule un délai réseau de 2 secondes
-                 // --- Fin de la Simulation ---
-
-            }); // Fin de l'event listener du bouton submit
-
-        }); // Fin du DOMContentLoaded
+                // *** END OF FETCH CALL ***
+            }
+
+              function copyAnalysisToClipboard() {
+                const analysisHtml = analysisContent.innerHTML;
+                // Convert HTML to plain text for better clipboard compatibility
+                const tempDiv = document.createElement('div');
+                tempDiv.innerHTML = analysisHtml;
+                // Basic text extraction, might need refinement depending on Markdown complexity
+                let textToCopy = tempDiv.textContent || tempDiv.innerText || "";
+
+                 // Attempt to preserve some Markdown structure (like line breaks)
+                 textToCopy = analysisHtml
+                    .replace(/<br\s*\/?>/gi, '\n') // HTML breaks to newlines
+                    .replace(/<\/p>/gi, '\n')      // End of paragraphs to newlines
+                    .replace(/<\/li>/gi, '\n')      // End of list items to newlines
+                    .replace(/<\/(h[1-6])>/gi, '\n\n') // Headers get double newline
+                    .replace(/<[^>]+>/g, '')       // Remove remaining HTML tags
+                    .replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') // Decode HTML entities
+                    .trim(); // Trim whitespace
+
+                navigator.clipboard.writeText(textToCopy)
+                    .then(() => {
+                        alert('Analyse copiée dans le presse-papiers !');
+                    })
+                    .catch(err => {
+                        console.error('Erreur de copie: ', err);
+                        alert('Impossible de copier l\'analyse.');
+                    });
+            }
+
+
+            // --- Initial Setup ---
+            updateAcceptAttribute(); // Set initial accept value
+            resetUI(); // Start with a clean state
+
+        }); // End DOMContentLoaded
     </script>
 </body>
 </html>