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> | |
| <!-- Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Font Awesome --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <!-- Animation library --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| min-height: 100vh; | |
| } | |
| .floating { | |
| animation: floating 3s ease-in-out infinite; | |
| } | |
| @keyframes floating { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-15px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating-slow { | |
| animation: floating-slow 5s ease-in-out infinite; | |
| } | |
| @keyframes floating-slow { | |
| 0% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(2deg); } | |
| 100% { transform: translateY(0px) rotate(0deg); } | |
| } | |
| .glass { | |
| background: rgba(255, 255, 255, 0.2); | |
| backdrop-filter: blur(8px); | |
| -webkit-backdrop-filter: blur(8px); | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| } | |
| .loader { | |
| width: 48px; | |
| height: 48px; | |
| border: 5px solid #FFF; | |
| border-bottom-color: #FF3D00; | |
| border-radius: 50%; | |
| display: inline-block; | |
| box-sizing: border-box; | |
| animation: rotation 1s linear infinite; | |
| } | |
| @keyframes rotation { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .custom-file-input::-webkit-file-upload-button { | |
| visibility: hidden; | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gradient-to-br from-blue-50 to-purple-100 p-6"> | |
| <!-- Background decorations --> | |
| <div class="fixed -z-10 top-0 left-0 w-full h-full overflow-hidden"> | |
| <div class="absolute top-20 left-10 w-32 h-32 bg-yellow-300 rounded-full opacity-20 floating"></div> | |
| <div class="absolute top-40 right-20 w-40 h-40 bg-blue-400 rounded-full opacity-20 floating-slow"></div> | |
| <div class="absolute bottom-20 left-1/4 w-24 h-24 bg-pink-300 rounded-full opacity-20 floating"></div> | |
| <div class="absolute bottom-40 right-1/3 w-36 h-36 bg-green-300 rounded-full opacity-20 floating-slow"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto"> | |
| <!-- Header --> | |
| <header class="text-center mb-12 animate__animated animate__fadeInDown"> | |
| <h1 class="text-5xl font-bold text-indigo-800 mb-4"> | |
| <span class="inline-block transform hover:scale-105 transition-transform duration-300"> | |
| Mariam Espagnol 🇪🇸 | |
| </span> | |
| </h1> | |
| <p class="text-xl text-indigo-600">Analyse de documents textuels et iconographiques</p> | |
| </header> | |
| <!-- Main content --> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Left panel (upload section) --> | |
| <div class="lg:col-span-1"> | |
| <div class="glass rounded-3xl p-8 shadow-xl floating-slow animate__animated animate__fadeInLeft"> | |
| <h2 class="text-2xl font-semibold text-indigo-700 mb-6"> | |
| <i class="fas fa-upload mr-2"></i> Télécharger un document | |
| </h2> | |
| <div class="mb-6"> | |
| <label class="block text-indigo-600 mb-3">Type de document:</label> | |
| <div class="flex space-x-4"> | |
| <label class="flex items-center cursor-pointer"> | |
| <input type="radio" name="fileType" value="image" checked class="hidden"> | |
| <div class="w-6 h-6 border-2 border-indigo-400 rounded-full flex items-center justify-center mr-2 file-type-radio"> | |
| <div class="w-3 h-3 bg-indigo-600 rounded-full opacity-100 radio-dot"></div> | |
| </div> | |
| <span>Iconographique</span> | |
| </label> | |
| <label class="flex items-center cursor-pointer"> | |
| <input type="radio" name="fileType" value="text" class="hidden"> | |
| <div class="w-6 h-6 border-2 border-indigo-400 rounded-full flex items-center justify-center mr-2 file-type-radio"> | |
| <div class="w-3 h-3 bg-indigo-600 rounded-full opacity-0 radio-dot"></div> | |
| </div> | |
| <span>Textuel</span> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="mb-8"> | |
| <div id="drop-area" class="border-2 border-dashed border-indigo-300 rounded-xl p-8 text-center transition-colors hover:border-indigo-500 cursor-pointer bg-white bg-opacity-50"> | |
| <i class="fas fa-cloud-upload-alt text-5xl text-indigo-400 mb-4"></i> | |
| <h3 class="text-lg text-indigo-600 mb-2">Glissez votre fichier ici</h3> | |
| <p class="text-sm text-gray-500 mb-4">ou</p> | |
| <label class="inline-block bg-indigo-600 text-white font-medium py-2 px-6 rounded-lg cursor-pointer hover:bg-indigo-700 transition-colors"> | |
| Parcourir | |
| <input type="file" id="file-input" class="hidden custom-file-input" accept=".jpg,.jpeg,.png,.txt,.pdf"> | |
| </label> | |
| <p id="file-name" class="mt-3 text-sm text-gray-600"></p> | |
| </div> | |
| </div> | |
| <button id="analyze-btn" class="w-full bg-indigo-700 hover:bg-indigo-800 text-white font-semibold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| <span id="btn-text"> | |
| <i class="fas fa-magic mr-2"></i> | |
| Générer l'analyse | |
| </span> | |
| <span id="btn-loading" class="hidden"> | |
| <i class="fas fa-circle-notch fa-spin mr-2"></i> | |
| Analyse en cours... | |
| </span> | |
| </button> | |
| </div> | |
| <div class="mt-8 text-sm text-indigo-800 bg-indigo-100 p-4 rounded-lg"> | |
| <h3 class="font-semibold mb-2"><i class="fas fa-info-circle mr-1"></i> Comment ça marche ?</h3> | |
| <ol class="list-decimal pl-5 space-y-1"> | |
| <li>Sélectionnez le type de document (iconographique ou textuel)</li> | |
| <li>Téléchargez votre fichier</li> | |
| <li>Cliquez sur "Générer l'analyse"</li> | |
| <li>Recevez une analyse complète en espagnol avec traduction française</li> | |
| </ol> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right panel (results) --> | |
| <div class="lg:col-span-2 animate__animated animate__fadeInRight"> | |
| <div id="results-container" class="glass rounded-3xl p-8 shadow-xl min-h-[600px] flex flex-col"> | |
| <h2 class="text-2xl font-semibold text-indigo-700 mb-6"> | |
| <i class="fas fa-file-alt mr-2"></i> Résultats de l'analyse | |
| </h2> | |
| <div id="initial-state" class="flex-grow flex flex-col items-center justify-center text-center"> | |
| <img src="https://cdnjs.cloudflare.com/ajax/libs/twemoji/14.0.2/svg/1f4dd.svg" class="w-20 h-20 mb-6 floating" alt="Document emoji"> | |
| <h3 class="text-xl font-medium text-indigo-600 mb-3">Prêt à analyser votre document</h3> | |
| <p class="text-gray-500 max-w-md">Téléchargez un document iconographique ou textuel pour obtenir une analyse complète en espagnol avec traduction française.</p> | |
| </div> | |
| <div id="loading-state" class="flex-grow flex flex-col items-center justify-center hidden"> | |
| <span class="loader mb-6"></span> | |
| <h3 class="text-xl font-medium text-indigo-600 animate-pulse">Analyse en cours...</h3> | |
| <p class="text-gray-500 mt-2">Veuillez patienter pendant que nous analysons votre document.</p> | |
| </div> | |
| <div id="results-content" class="hidden flex-grow flex flex-col"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="col-span-1"> | |
| <div id="file-preview" class="bg-white rounded-lg shadow-md overflow-hidden h-64 flex items-center justify-center"> | |
| <img id="image-preview" src="" alt="Document preview" class="max-w-full max-h-full object-contain hidden"> | |
| <div id="text-preview" class="p-4 text-sm text-gray-600 overflow-auto h-full w-full hidden"> | |
| <i class="fas fa-file-alt text-4xl text-gray-300 mb-3"></i> | |
| <p class="text-center">Aperçu du document textuel</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-2"> | |
| <div class="bg-indigo-50 rounded-lg p-4 h-64 overflow-auto"> | |
| <h3 class="text-lg font-medium text-indigo-700 mb-3">Résumé de l'analyse</h3> | |
| <div id="analysis-summary" class="text-sm"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg p-6 shadow-sm flex-grow overflow-auto"> | |
| <div class="mb-4"> | |
| <div class="flex space-x-2"> | |
| <button id="tab-spanish" class="tab-btn bg-indigo-600 text-white px-4 py-2 rounded-t-lg font-medium">Espagnol</button> | |
| <button id="tab-french" class="tab-btn bg-gray-200 text-gray-700 px-4 py-2 rounded-t-lg font-medium">Français</button> | |
| </div> | |
| <div class="h-1 bg-indigo-600 w-full"></div> | |
| </div> | |
| <div id="tab-content-spanish" class="tab-content"> | |
| <div id="spanish-content" class="prose max-w-none"></div> | |
| </div> | |
| <div id="tab-content-french" class="tab-content hidden"> | |
| <div id="french-content" class="prose max-w-none"></div> | |
| </div> | |
| </div> | |
| <div class="mt-6 text-center"> | |
| <button id="download-btn" class="bg-green-600 hover:bg-green-700 text-white font-medium py-2 px-6 rounded-lg shadow hover:shadow-lg transition-all"> | |
| <i class="fas fa-download mr-2"></i> Télécharger l'analyse | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-12 text-center text-gray-600 animate__animated animate__fadeInUp"> | |
| <p>© 2025 Mariam Espagnol - Tous droits réservés</p> | |
| </footer> | |
| </div> | |
| <!-- JavaScript --> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // File Upload Logic | |
| const fileInput = document.getElementById('file-input'); | |
| const fileName = document.getElementById('file-name'); | |
| const dropArea = document.getElementById('drop-area'); | |
| const analyzeBtn = document.getElementById('analyze-btn'); | |
| const radioButtons = document.querySelectorAll('input[name="fileType"]'); | |
| // Results and state management | |
| const initialState = document.getElementById('initial-state'); | |
| const loadingState = document.getElementById('loading-state'); | |
| const resultsContent = document.getElementById('results-content'); | |
| const imagePreview = document.getElementById('image-preview'); | |
| const textPreview = document.getElementById('text-preview'); | |
| const spanishContent = document.getElementById('spanish-content'); | |
| const frenchContent = document.getElementById('french-content'); | |
| const analysisSummary = document.getElementById('analysis-summary'); | |
| const btnText = document.getElementById('btn-text'); | |
| const btnLoading = document.getElementById('btn-loading'); | |
| const downloadBtn = document.getElementById('download-btn'); | |
| // Tabs | |
| const tabSpanish = document.getElementById('tab-spanish'); | |
| const tabFrench = document.getElementById('tab-french'); | |
| const tabContentSpanish = document.getElementById('tab-content-spanish'); | |
| const tabContentFrench = document.getElementById('tab-content-french'); | |
| // Radio buttons behavior | |
| radioButtons.forEach(radio => { | |
| radio.addEventListener('change', function() { | |
| // Reset the file input | |
| fileInput.value = ''; | |
| fileName.textContent = ''; | |
| analyzeBtn.disabled = true; | |
| // Update all radio dots | |
| document.querySelectorAll('.radio-dot').forEach(dot => { | |
| dot.classList.add('opacity-0'); | |
| dot.classList.remove('opacity-100'); | |
| }); | |
| // Mark the selected one | |
| if (this.checked) { | |
| this.closest('label').querySelector('.radio-dot').classList.remove('opacity-0'); | |
| this.closest('label').querySelector('.radio-dot').classList.add('opacity-100'); | |
| } | |
| }); | |
| }); | |
| // File input change | |
| fileInput.addEventListener('change', function(e) { | |
| handleFiles(this.files); | |
| }); | |
| // Drag and drop functionality | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropArea.classList.add('border-indigo-500', 'bg-indigo-50'); | |
| } | |
| function unhighlight() { | |
| dropArea.classList.remove('border-indigo-500', 'bg-indigo-50'); | |
| } | |
| dropArea.addEventListener('drop', function(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| }); | |
| function handleFiles(files) { | |
| if (files.length > 0) { | |
| const file = files[0]; | |
| fileName.textContent = file.name; | |
| analyzeBtn.disabled = false; | |
| // Preview if it's an image | |
| if (file.type.startsWith('image/')) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| imagePreview.src = e.target.result; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| } | |
| // Analysis submission | |
| analyzeBtn.addEventListener('click', function() { | |
| if (!fileInput.files.length) return; | |
| // Show loading state | |
| initialState.classList.add('hidden'); | |
| resultsContent.classList.add('hidden'); | |
| loadingState.classList.remove('hidden'); | |
| btnText.classList.add('hidden'); | |
| btnLoading.classList.remove('hidden'); | |
| analyzeBtn.disabled = true; | |
| const fileType = document.querySelector('input[name="fileType"]:checked').value; | |
| const file = fileInput.files[0]; | |
| const formData = new FormData(); | |
| formData.append('file', file); | |
| formData.append('fileType', fileType); | |
| fetch('/upload', { | |
| method: 'POST', | |
| body: formData | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| if (data.success) { | |
| // Hide loading state | |
| loadingState.classList.add('hidden'); | |
| resultsContent.classList.remove('hidden'); | |
| // Process analysis | |
| const analysisText = data.analysis; | |
| // Split content based on language sections (this is a simplification) | |
| // In real implementation, you would need to parse properly based on your API response | |
| const [spanishPart, frenchPart] = splitAnalysis(analysisText); | |
| // Display preview based on file type | |
| if (fileType === 'image') { | |
| imagePreview.src = data.file_url; | |
| imagePreview.classList.remove('hidden'); | |
| textPreview.classList.add('hidden'); | |
| } else { | |
| imagePreview.classList.add('hidden'); | |
| textPreview.classList.remove('hidden'); | |
| } | |
| // Populate content | |
| spanishContent.innerHTML = formatText(spanishPart); | |
| frenchContent.innerHTML = formatText(frenchPart); | |
| // Create summary (first few sentences) | |
| const summaryText = frenchPart.split('. ').slice(0, 3).join('. ') + '.'; | |
| analysisSummary.textContent = summaryText; | |
| // Enable download | |
| downloadBtn.disabled = false; | |
| } else { | |
| alert('Erreur: ' + (data.error || 'Échec de l\'analyse')); | |
| initialState.classList.remove('hidden'); | |
| loadingState.classList.add('hidden'); | |
| } | |
| btnText.classList.remove('hidden'); | |
| btnLoading.classList.add('hidden'); | |
| analyzeBtn.disabled = false; | |
| }) | |
| .catch(error => { | |
| console.error('Error:', error); | |
| alert('Une erreur est survenue'); | |
| initialState.classList.remove('hidden'); | |
| loadingState.classList.add('hidden'); | |
| btnText.classList.remove('hidden'); | |
| btnLoading.classList.add('hidden'); | |
| analyzeBtn.disabled = false; | |
| }); | |
| }); | |
| // Tab switching | |
| tabSpanish.addEventListener('click', () => { | |
| tabSpanish.classList.remove('bg-gray-200', 'text-gray-700'); | |
| tabSpanish.classList.add('bg-indigo-600', 'text-white'); | |
| tabFrench.classList.remove('bg-indigo-600', 'text-white'); | |
| tabFrench.classList.add('bg-gray-200', 'text-gray-700'); | |
| tabContentSpanish.classList.remove('hidden'); | |
| tabContentFrench.classList.add('hidden'); | |
| }); | |
| tabFrench.addEventListener('click', () |