Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mariam Espagnol - Analyse de Documents</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/marked@4.0.0/marked.min.js"></script> | |
| <!-- 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'); | |
| 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; } } | |
| @keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } | |
| .gradient-text { | |
| background: linear-gradient(45deg, #FF6B6B, #4ECDC4); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .upload-zone { | |
| background: linear-gradient(145deg, #f9fafb, #f3f4f6); | |
| box-shadow: 5px 5px 15px #d1d9e6, -5px -5px 15px #ffffff; | |
| transition: all 0.3s ease; | |
| } | |
| .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; } | |
| /* Responsive Analysis Box & Prose */ | |
| .prose { max-width: 100%; } | |
| .prose pre[class*="language-"] { /* Target only Prism <pre> blocks */ | |
| background-color: #2d2d2d ; /* Match Prism Tomorrow, use !important if needed */ | |
| color: #ccc; | |
| padding: 1em; | |
| margin: 1.5em 0; | |
| overflow-x: auto; | |
| border-radius: 0.375rem; | |
| border: 1px solid #444; /* Subtle border */ | |
| } | |
| .prose code[class*="language-"] { /* Target only Prism <code> blocks */ | |
| font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; /* Monospace font */ | |
| color: #ccc; | |
| 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; } | |
| /* Button disabled state */ | |
| button:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| background-color: #a5b4fc; | |
| } | |
| /* Fix potential Prism theme override from Tailwind */ | |
| :not(pre) > code[class*="language-"], pre[class*="language-"] { | |
| background: #2d2d2d; | |
| } | |
| </style> | |
| </head> | |
| <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"> | |
| <!-- Header --> | |
| <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> | |
| <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-6"> | |
| <label class="block text-base font-medium text-gray-700 mb-3">1. Choisissez le type de document et la méthodologie</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 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">Image (Photo, Dessin...) avec méthodologie iconographique.</span> | |
| </label> | |
| <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_method_image_input" | |
| 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">Image (Photo, Dessin...) avec méthodologie textuelle.</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Upload Zone --> | |
| <div class="mb-6"> | |
| <label class="block text-base font-medium text-gray-700 mb-3">2. Sélectionnez votre fichier image</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/*"> | |
| <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, WEBP) - Max 16MB</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 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"> | |
| <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> <!-- Keep for potential future text use, but hide --> | |
| <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" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="mt-6 text-center"> | |
| <button id="submit-button" | |
| disabled | |
| 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 -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> | |
| Analyse en cours... | |
| </span> | |
| </button> | |
| </div> | |
| <!-- Analysis Results --> | |
| <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> | |
| <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"> | |
| <p class="text-gray-500">L'analyse apparaîtra ici...</p> | |
| </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> <!-- End main content block --> | |
| <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 --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const uploadZone = document.getElementById('upload-zone'); | |
| const fileInput = document.getElementById('file-upload'); | |
| const preview = document.getElementById('preview'); | |
| const imagePreview = document.getElementById('image-preview'); | |
| const textPreview = document.getElementById('text-preview'); // Keep reference, but won't be used for 2nd option | |
| 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 copyAnalysisButton = document.getElementById('copy-analysis-button'); | |
| const fileTypeRadios = document.querySelectorAll('.file-type-radio'); | |
| const fileTypesInfo = document.getElementById('file-types-info'); | |
| let selectedFile = null; | |
| marked.setOptions({ | |
| breaks: true, | |
| gfm: true, | |
| headerIds: false, | |
| mangle: false, | |
| highlight: function(code, lang) { | |
| 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 code; | |
| } | |
| }); | |
| 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); | |
| } | |
| } | |
| function resetUI() { | |
| selectedFile = null; | |
| fileInput.value = ''; | |
| preview.classList.add('hidden'); | |
| imagePreview.classList.add('hidden'); | |
| textPreview.classList.add('hidden'); | |
| 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>'; | |
| submitButton.disabled = true; | |
| showLoading(false); | |
| updateAcceptAttribute(); // Call this to set initial accept types | |
| } | |
| function updateAcceptAttribute() { | |
| const selectedType = document.querySelector('input[name="fileType"]:checked').value; | |
| // Both options now accept images | |
| fileInput.accept = "image/png, image/jpeg, image/gif, image/webp"; | |
| if (selectedType === 'image') { | |
| fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) pour analyse iconographique - Max 16MB"; | |
| } else if (selectedType === 'text_method_image_input') { | |
| fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) pour analyse textuelle - Max 16MB"; | |
| } | |
| if (selectedFile) { | |
| // Check if the currently selected file is an image, regardless of radio button choice | |
| const isImage = selectedFile.type.startsWith('image/'); | |
| if(!isImage) { | |
| resetUI(); | |
| Swal.fire({ | |
| icon: 'warning', | |
| title: 'Type de fichier changé ou invalide', | |
| text: 'Seuls les fichiers images sont acceptés. Veuillez resélectionner votre fichier.', | |
| }); | |
| } | |
| } | |
| } | |
| fileTypeRadios.forEach(radio => { | |
| radio.addEventListener('change', updateAcceptAttribute); | |
| }); | |
| uploadZone.addEventListener('click', () => fileInput.click()); | |
| uploadZone.addEventListener('dragover', (e) => { | |
| e.preventDefault(); | |
| uploadZone.classList.add('dragover'); | |
| }); | |
| uploadZone.addEventListener('dragleave', () => { | |
| uploadZone.classList.remove('dragover'); | |
| }); | |
| uploadZone.addEventListener('drop', (e) => { | |
| e.preventDefault(); | |
| uploadZone.classList.remove('dragover'); | |
| if (e.dataTransfer.files.length) { | |
| handleFileSelection(e.dataTransfer.files[0]); | |
| } | |
| }); | |
| fileInput.addEventListener('change', (e) => { | |
| if (e.target.files.length) { | |
| handleFileSelection(e.target.files[0]); | |
| } | |
| }); | |
| removeFileButton.addEventListener('click', resetUI); | |
| submitButton.addEventListener('click', handleSubmit); | |
| copyAnalysisButton.addEventListener('click', copyAnalysisToClipboard); | |
| function handleFileSelection(file) { | |
| const fileTypeOption = document.querySelector('input[name="fileType"]:checked').value; // To know which methodology | |
| const maxFileSize = 16 * 1024 * 1024; | |
| if (file.size > maxFileSize) { | |
| Swal.fire({ | |
| 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; | |
| } | |
| const allowedImageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']; | |
| // Both options now expect an image | |
| if (!allowedImageTypes.includes(file.type)) { | |
| const isImageTypeByName = /\.(jpe?g|png|gif|webp)$/i.test(file.name); | |
| if (!isImageTypeByName) { | |
| Swal.fire({ | |
| icon: 'error', | |
| title: 'Type de fichier invalide', | |
| text: 'Veuillez sélectionner une image (PNG, JPG, GIF, WEBP).' | |
| }); | |
| resetUI(); | |
| return; | |
| } | |
| } | |
| selectedFile = file; | |
| preview.classList.remove('hidden'); | |
| preview.classList.add('fade-in'); | |
| 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'); | |
| // Always show image preview now | |
| imagePreview.classList.remove('hidden'); | |
| textPreview.classList.add('hidden'); // Ensure text preview is hidden | |
| const reader = new FileReader(); | |
| reader.onload = (e) => imagePreview.src = e.target.result; | |
| reader.readAsDataURL(file); | |
| submitButton.disabled = false; | |
| } | |
| function handleSubmit() { | |
| if (!selectedFile) { | |
| Swal.fire('Aucun fichier', 'Veuillez sélectionner un fichier avant de lancer l\'analyse.', 'warning'); | |
| return; | |
| } | |
| const fileTypeForAnalysis = document.querySelector('input[name="fileType"]:checked').value; | |
| const formData = new FormData(); | |
| formData.append('file', selectedFile); | |
| // This 'fileType' will tell the backend which prompt/methodology to use | |
| formData.append('fileType', fileTypeForAnalysis); | |
| showLoading(true); | |
| results.classList.add('hidden'); | |
| fetch('/upload', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then(response => { | |
| if (!response.ok) { | |
| return response.json().then(errData => { | |
| throw new Error(errData.error || `Erreur HTTP: ${response.status}`); | |
| }).catch(() => { | |
| throw new Error(`Erreur HTTP: ${response.status} ${response.statusText}`); | |
| }); | |
| } | |
| return response.json(); | |
| }) | |
| .then(data => { | |
| showLoading(false); | |
| if (data.success && data.analysis) { | |
| results.classList.remove('hidden'); | |
| results.classList.add('slide-up'); | |
| analysisContent.innerHTML = marked.parse(data.analysis); | |
| if (typeof Prism !== 'undefined') { | |
| 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 { | |
| throw new Error(data.error || "L'analyse n'a pas pu être générée."); | |
| } | |
| }) | |
| .catch(error => { | |
| showLoading(false); | |
| Swal.fire({ | |
| icon: 'error', | |
| title: 'Erreur lors de l\'analyse', | |
| text: error.message || 'Une erreur inconnue est survenue.', | |
| }); | |
| console.error('Error during analysis:', error); | |
| submitButton.disabled = (selectedFile === null); | |
| }); | |
| } | |
| function copyAnalysisToClipboard() { | |
| const analysisHtml = analysisContent.innerHTML; | |
| 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; | |
| let textToCopy = tempDiv.textContent || tempDiv.innerText || ""; | |
| textToCopy = analysisHtml | |
| .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') | |
| .replace(/<[^>]+>/g, '') | |
| .replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') // Basic decoding | |
| .trim(); | |
| navigator.clipboard.writeText(textToCopy) | |
| .then(() => { | |
| Swal.fire({ | |
| icon: 'success', | |
| title: 'Copié !', | |
| text: 'L\'analyse a été copiée dans le presse-papiers.', | |
| timer: 1500, | |
| showConfirmButton: false | |
| }); | |
| }) | |
| .catch(err => { | |
| console.error('Erreur de copie: ', err); | |
| Swal.fire({ | |
| icon: 'error', | |
| title: 'Erreur de copie', | |
| text: 'Impossible de copier l\'analyse automatiquement. Vous pouvez essayer de la sélectionner manuellement.', | |
| }); | |
| }); | |
| } | |
| updateAcceptAttribute(); // Initial call | |
| resetUI(); // Initial reset | |
| }); | |
| </script> | |
| </body> | |
| </html> |