Update templates/index.html

templates/index.html

@@ -6,9 +6,15 @@
     <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" 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 -->
+    <!-- SweetAlert2 -->
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+    <!-- PrismJS Core & Theme -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/prism.min.js" integrity="sha512-7Z9J3l1+EYfeaPKcGXu3MS/7SluIYINAaicZN83z9/9XjUhIYU/YHwZxpTBIlXgy9XEOXRJW1QQkAcLpbzm7hA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/themes/prism-tomorrow.min.css" integrity="sha512-vswe+cgvic/XBoF1OcM/TeJ2FW0OofqAVdCZiEYkd6dwGXOyEVrd0XB9aLhtFOUUjLz90GzvnBCgXWLSntyo7w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <!-- PrismJS Languages (Load components individually if needed, or use autoloader) -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/components/prism-core.min.js" integrity="sha512-9khQRAUBYEJDCDVP2ywQ0LRUbnjL3ZfrPJorj7MF8+KEvn3chLJniiG9LUDXTQGshyrGXxGzvSgKyYad7is+7Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prismjs/1.29.0/plugins/autoloader/prism-autoloader.min.js" integrity="sha512-GP4x8UWxWyh4BMbyJGOGneiTbUdnpcBtDbJcdM8XcSzaHjMTzOL/zENvu6QRGxzNssVSKHncmXbvH/SsqR2nLw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
     <style>
         @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap');
 
@@ -31,61 +37,84 @@
             color: transparent;
         }
         .upload-zone {
-            background: linear-gradient(145deg, #f9fafb, #f3f4f6); /* Slightly adjusted gradient */
-            box-shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff; /* Adjusted shadow */
+            background: linear-gradient(145deg, #f9fafb, #f3f4f6);
+            box-shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff;
             transition: all 0.3s ease;
         }
-        .upload-zone.dragover { /* Style when dragging over */
-            border-color: #4f46e5; /* Indigo */
-            background: #e0e7ff; /* Lighter Indigo */
+        .upload-zone.dragover {
+            border-color: #4f46e5;
+            background: #e0e7ff;
             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; }
-        .waves .fill-indigo-50 { fill: #eef2ff; } /* Ensure Tailwind color is applied */
+        .waves .fill-indigo-50 { fill: #eef2ff; }
 
-        /* --- 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 */
+        /* Responsive Analysis Box & Prose */
+        .prose { max-width: 100%; }
+        .prose pre[class*="language-"] { /* Target only Prism <pre> blocks */
+            background-color: #2d2d2d !important; /* Match Prism Tomorrow, use !important if needed */
             color: #ccc;
             padding: 1em;
-            overflow-x: auto; /* Allow horizontal scroll for code */
-            border-radius: 0.375rem; /* Tailwind's rounded-md */
+            margin: 1.5em 0;
+            overflow-x: auto;
+            border-radius: 0.375rem;
+            border: 1px solid #444; /* Subtle border */
         }
-        .prose code[class*="language-"] {
-           font-family: 'Courier New', Courier, monospace; /* Consistent code font */
+        .prose code[class*="language-"] { /* Target only Prism <code> blocks */
+           font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* Monospace font */
            color: #ccc;
-           background: none; /* Prism handles background */
+           background: none;
            text-shadow: none;
+           font-size: 0.9em; /* Slightly smaller code font */
+           direction: ltr;
+           text-align: left;
+           white-space: pre;
+           word-spacing: normal;
+           word-break: normal;
+           line-height: 1.5;
+           -moz-tab-size: 4;
+           -o-tab-size: 4;
+           tab-size: 4;
+           -webkit-hyphens: none;
+           -moz-hyphens: none;
+           -ms-hyphens: none;
+           hyphens: none;
+        }
+         /* Ensure inline code also gets styled if needed, but differently */
+        .prose :not(pre) > code {
+             background-color: #f3f4f6; /* Light gray background for inline code */
+             color: #4b5563; /* Darker gray text */
+             padding: 0.2em 0.4em;
+             border-radius: 0.25rem;
+             font-size: 0.9em;
         }
         .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é */
+        .prose li > p { margin-bottom: 0.5em; }
+        /* Button disabled state */
         button:disabled {
             opacity: 0.5;
             cursor: not-allowed;
-            background-color: #a5b4fc; /* Lighter indigo when disabled */
+            background-color: #a5b4fc;
         }
-        /* Ensure Prism highlights correctly */
+        /* Fix potential Prism theme override from Tailwind */
         :not(pre) > code[class*="language-"], pre[class*="language-"] {
-            background: #2d2d2d; /* Match theme */
+            background: #2d2d2d;
         }
     </style>
 </head>
-<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-x-hidden"> <!-- Prevent body scrollbars -->
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative overflow-x-hidden">
     <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-4xl mx-auto px-4 py-12 relative z-10"> <!-- Reduced max-width for better focus -->
+    <div class="max-w-4xl mx-auto px-4 py-12 relative z-10">
         <!-- Header -->
-        <header class="text-center mb-12 fade-in"> <!-- Reduced margin -->
+        <header class="text-center mb-12 fade-in">
             <h1 class="text-4xl md:text-5xl font-bold mb-3 font-['Playfair_Display'] gradient-text">
                 Mariam Espagnol
             </h1>
@@ -119,7 +148,7 @@
              <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 -->
+                    <input id="file-upload" name="file" type="file" class="sr-only" accept="image/*">
                     <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">
@@ -141,10 +170,10 @@
             <!-- Preview -->
             <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 -->
+                <div class="preview-container border rounded-lg p-4 bg-gray-50 max-h-72 overflow-auto relative">
+                    <img id="image-preview" class="max-w-full h-auto hidden rounded block mx-auto" alt="Aperçu 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 -->
+                    <p id="file-info" class="text-xs text-gray-500 mt-2 text-center"></p>
                      <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" />
@@ -160,7 +189,7 @@
                         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">
+                         <svg class="animate-spin inline-block -ml-1 mr-2 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>
@@ -170,13 +199,12 @@
             </div>
 
             <!-- Analysis Results -->
-            <div id="results" class="mt-10 hidden slide-up"> <!-- Increased margin -->
+            <div id="results" class="mt-10 hidden slide-up">
                 <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">
+                    <!-- Applying prose styles here -->
                     <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 -->
+                        <p class="text-gray-500">L'analyse apparaîtra ici...</p>
                     </div>
                 </div>
                  <div class="mt-4 text-right">
@@ -193,11 +221,6 @@
 
     </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() {
             const uploadZone = document.getElementById('upload-zone');
@@ -213,24 +236,29 @@
             const results = document.getElementById('results');
             const analysisContent = document.getElementById('analysis-content');
             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;
 
-            // Configure marked
+            // Configure marked with Prism check
             marked.setOptions({
-                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
+                breaks: true,
+                gfm: true,
+                headerIds: false,
+                mangle: false,
                 highlight: function(code, lang) {
-                    const language = Prism.languages[lang] || Prism.languages.markup;
-                    if (language) {
-                        return Prism.highlight(code, language, lang);
+                    // ** Check if Prism and the language are loaded **
+                    if (typeof Prism !== 'undefined' && Prism.languages[lang]) {
+                        try {
+                             return Prism.highlight(code, Prism.languages[lang], lang);
+                        } catch (error) {
+                            console.warn(`Prism highlighting failed for language ${lang}:`, error)
+                            return code; // Return unhighlighted on error
+                        }
                     }
-                    return code; // Return unhighlighted code if language not found
+                    // ** Fallback if Prism or language not available **
+                    return code;
                 }
             });
 
@@ -243,25 +271,25 @@
                 } else {
                     submitButtonText.classList.remove('hidden');
                     submitButtonSpinner.classList.add('hidden');
-                    submitButton.disabled = (selectedFile === null); // Only enable if file is selected
+                    submitButton.disabled = (selectedFile === null);
                 }
             }
 
-             function resetUI() {
+            function resetUI() {
                 selectedFile = null;
-                fileInput.value = ''; // Clear the file input
+                fileInput.value = '';
                 preview.classList.add('hidden');
                 imagePreview.classList.add('hidden');
                 textPreview.classList.add('hidden');
-                imagePreview.src = '#'; // Reset image source
+                imagePreview.src = '#';
                 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
+                analysisContent.innerHTML = '<p class="text-gray-500">L\'analyse apparaîtra ici...</p>';
                 submitButton.disabled = true;
-                showLoading(false); // Ensure loading state is reset
-                updateAcceptAttribute(); // Reset accept attribute
+                showLoading(false);
+                updateAcceptAttribute();
             }
 
             function updateAcceptAttribute() {
@@ -269,26 +297,32 @@
                  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
+                 } else {
+                     fileInput.accept = "text/plain, application/pdf, .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.");
+                    const currentFileTypeMatchesSelection =
+                       (selectedType === 'image' && selectedFile.type.startsWith('image/')) ||
+                       (selectedType === 'text' && (selectedFile.type === 'text/plain' || selectedFile.type === 'application/pdf' || selectedFile.name.endsWith('.txt')));
+
+                    if(!currentFileTypeMatchesSelection) {
+                        resetUI();
+                         // Use SweetAlert for this message too
+                        Swal.fire({
+                            icon: 'warning',
+                            title: 'Type de fichier changé',
+                            text: 'Le type de document a été modifié. Veuillez resélectionner votre fichier.',
+                        });
+                    }
                  }
             }
 
 
             // --- Event Listeners ---
-
-            // File Type Change
             fileTypeRadios.forEach(radio => {
                 radio.addEventListener('change', updateAcceptAttribute);
             });
-
-            // Upload Zone Interactions
             uploadZone.addEventListener('click', () => fileInput.click());
             uploadZone.addEventListener('dragover', (e) => {
                 e.preventDefault();
@@ -304,21 +338,13 @@
                     handleFileSelection(e.dataTransfer.files[0]);
                 }
             });
-
-            // File Input Change
             fileInput.addEventListener('change', (e) => {
                 if (e.target.files.length) {
                     handleFileSelection(e.target.files[0]);
                 }
             });
-
-             // Remove File Button
             removeFileButton.addEventListener('click', resetUI);
-
-            // Submit Button Click
             submitButton.addEventListener('click', handleSubmit);
-
-             // Copy Button Click
             copyAnalysisButton.addEventListener('click', copyAnalysisToClipboard);
 
 
@@ -326,11 +352,14 @@
 
             function handleFileSelection(file) {
                 const fileType = document.querySelector('input[name="fileType"]:checked').value;
-                const maxFileSize = 16 * 1024 * 1024; // 16 MB
+                const maxFileSize = 16 * 1024 * 1024;
 
-                // 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.`);
+                    Swal.fire({ // Use SweetAlert
+                        icon: 'error',
+                        title: 'Fichier trop volumineux',
+                        text: `La taille maximale autorisée est de 16 Mo. Votre fichier fait ${(file.size / 1024 / 1024).toFixed(1)} Mo.`,
+                    });
                     resetUI();
                     return;
                 }
@@ -339,18 +368,24 @@
                  const allowedTextTypes = ['text/plain', 'application/pdf'];
 
                  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).");
+                       Swal.fire({ // Use SweetAlert
+                           icon: 'error',
+                           title: 'Type de fichier invalide',
+                           text: '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.");
+                         Swal.fire({ // Use SweetAlert
+                           icon: 'error',
+                           title: 'Type de fichier invalide',
+                           text: 'Veuillez sélectionner un fichier texte (TXT) ou PDF.'
+                       });
                         resetUI();
                         return;
                     }
@@ -360,19 +395,18 @@
                 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
+                results.classList.add('hidden');
+                analysisContent.innerHTML = '<p class="text-gray-500">L\'analyse apparaîtra ici...</p>';
                 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');
                     textPreview.classList.add('hidden');
                     const reader = new FileReader();
                     reader.onload = (e) => imagePreview.src = e.target.result;
                     reader.readAsDataURL(file);
-                } else { // text
+                } else {
                     imagePreview.classList.add('hidden');
                     textPreview.classList.remove('hidden');
                     if (file.type === 'application/pdf') {
@@ -383,13 +417,12 @@
                          reader.readAsText(file);
                     }
                 }
-
-                submitButton.disabled = false; // Enable submit button
+                submitButton.disabled = false;
             }
 
             function handleSubmit() {
                 if (!selectedFile) {
-                    alert("Veuillez sélectionner un fichier.");
+                     Swal.fire('Aucun fichier', 'Veuillez sélectionner un fichier avant de lancer l\'analyse.', 'warning');
                     return;
                 }
 
@@ -399,20 +432,17 @@
                 formData.append('fileType', fileType);
 
                 showLoading(true);
-                results.classList.add('hidden'); // Hide old results before new request
+                results.classList.add('hidden');
 
-                // *** THE ACTUAL FETCH CALL ***
                 fetch('/upload', {
                     method: 'POST',
                     body: formData
                 })
                 .then(response => {
                     if (!response.ok) {
-                         // 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}`);
                          });
                     }
@@ -423,63 +453,87 @@
                     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
+
+                        // ** Check if Prism is loaded before highlighting **
+                        if (typeof Prism !== 'undefined') {
+                             // Use Prism's autoloader or highlightAllUnder
+                             // Prism.highlightAllUnder(analysisContent); // Might work with autoloader
+                             // Or manually trigger highlighting on specific elements if autoloader fails:
+                              analysisContent.querySelectorAll('pre code').forEach((block) => {
+                                Prism.highlightElement(block);
+                              });
+                        } else {
+                            console.warn("Prism n'est pas chargé, impossible de colorer la syntaxe.");
+                        }
+
                         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 => {
                     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
+                    // Use SweetAlert for error display
+                     Swal.fire({
+                        icon: 'error',
+                        title: 'Erreur lors de l\'analyse',
+                        text: error.message || 'Une erreur inconnue est survenue.',
+                    });
+                    // Optionally log detailed 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
+                    submitButton.disabled = false; // Re-enable on error
                 });
-                // *** END OF FETCH CALL ***
             }
 
               function copyAnalysisToClipboard() {
                 const analysisHtml = analysisContent.innerHTML;
-                // Convert HTML to plain text for better clipboard compatibility
+                if (!analysisHtml || analysisHtml.includes('L\'analyse apparaîtra ici...')) {
+                    Swal.fire('Rien à copier', 'Aucune analyse n\'a été générée pour le moment.', 'info');
+                    return;
+                }
+
                 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)
+                 // Basic conversion for better text format
                  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
+                    .replace(/<br\s*\/?>/gi, '\n')
+                    .replace(/<\/p>/gi, '\n')
+                    .replace(/<\/li>/gi, '\n')
+                    .replace(/<\/(h[1-6])>/gi, '\n\n')
+                    .replace(/<pre.*?><code.*?>([\s\S]*?)<\/code><\/pre>/gi, '\n```\n$1\n```\n') // Attempt to format code blocks
+                    .replace(/<[^>]+>/g, '') // Remove remaining tags
+                    .replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') // Decode entities
+                    .trim();
 
                 navigator.clipboard.writeText(textToCopy)
                     .then(() => {
-                        alert('Analyse copiée dans le presse-papiers !');
+                         // Use SweetAlert for success
+                         Swal.fire({
+                            icon: 'success',
+                            title: 'Copié !',
+                            text: 'L\'analyse a été copiée dans le presse-papiers.',
+                            timer: 1500, // Auto-close after 1.5 seconds
+                            showConfirmButton: false // Hide the confirmation button
+                        });
                     })
                     .catch(err => {
                         console.error('Erreur de copie: ', err);
-                        alert('Impossible de copier l\'analyse.');
+                         // Use SweetAlert for error
+                         Swal.fire({
+                            icon: 'error',
+                            title: 'Erreur de copie',
+                            text: 'Impossible de copier l\'analyse automatiquement. Vous pouvez essayer de la sélectionner manuellement.',
+                        });
                     });
             }
 
 
             // --- Initial Setup ---
-            updateAcceptAttribute(); // Set initial accept value
-            resetUI(); // Start with a clean state
+            updateAcceptAttribute();
+            resetUI();
 
         }); // End DOMContentLoaded
     </script>