Spaces:

Docfile
/

Mariam-espagnol

Sleeping

App Files Files Community

Docfile commited on 22 days ago

Commit

58ef26b

verified ·

1 Parent(s): 81b84b5

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +218 -221

templates/index.html CHANGED Viewed

@@ -3,269 +3,266 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Analyseur de Documents IA</title>
-    <!-- Include Tailwind CSS -->
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
-        /* Add a subtle background pattern or gradient if desired */
-        body {
-            background-color: #f8fafc; /* Tailwind gray-50 */
         }
-        /* Custom style for smoother transitions */
-        * {
-            transition: all 0.2s ease-in-out;
         }
-        /* Style for the analysis output to preserve formatting */
-        #analysis-text {
-            white-space: pre-wrap; /* Preserves whitespace and line breaks */
-            word-wrap: break-word; /* Breaks long words */
-            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Monospace font often looks good for code/analysis */
-            line-height: 1.6;
         }
-        /* Enhance radio button appearance */
-        input[type="radio"]:checked {
-            background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
-            border-color: transparent;
-            background-color: currentColor;
-            background-size: 100% 100%;
-            background-position: center;
-            background-repeat: no-repeat;
         }
-        input[type="radio"] {
-            appearance: none;
-            border-radius: 50%;
-            width: 1.25em;
-            height: 1.25em;
-            border: 2px solid #cbd5e1; /* gray-300 */
-            margin-right: 0.5em;
-            vertical-align: middle; /* Align with text */
         }
-        input[type="radio"]:checked {
-            border-color: #2563eb; /* blue-600 */
-            background-color: #2563eb; /* blue-600 */
         }
-        input[type="radio"]:focus {
-           outline: 2px solid transparent;
-           outline-offset: 2px;
-           box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2563eb; /* blue-600 focus ring */
         }
-        /* Loading Spinner Animation */
-        @keyframes spin {
-          to { transform: rotate(360deg); }
         }
-        .spinner {
-          display: inline-block;
-          width: 1.5rem;
-          height: 1.5rem;
-          vertical-align: text-bottom;
-          border: .25em solid currentColor;
-          border-right-color: transparent;
-          border-radius: 50%;
-          animation: spin .75s linear infinite;
-          color: #3b82f6; /* blue-500 */
         }
-        /* File Input Styling */
-         input[type="file"]::file-selector-button {
-            margin-right: 1rem;
-            display: inline-block;
-            font-weight: 600; /* semibold */
-            color: #1d4ed8; /* blue-700 */
-            background-color: #eff6ff; /* blue-50 */
-            padding: 0.5rem 1rem; /* py-2 px-4 */
-            border-width: 1px;
-            border-color: transparent;
-            border-radius: 0.375rem; /* rounded-md */
-            cursor: pointer;
-            transition: background-color 0.2s ease-in-out;
         }
-        input[type="file"]::file-selector-button:hover {
-            background-color: #dbeafe; /* blue-100 */
         }
     </style>
 </head>
-<body class="font-sans antialiased text-gray-800">
-    <div class="container mx-auto max-w-4xl p-6 md:p-10">
-        <header class="text-center mb-10">
-            <h1 class="text-3xl md:text-4xl font-bold text-gray-900 mb-2">Analyseur de Documents IA</h1>
-            <p class="text-md text-gray-600">Téléchargez une image ou un fichier texte pour obtenir une analyse détaillée.</p>
         </header>
-        <main>
-            <div class="bg-white p-6 md:p-8 rounded-xl shadow-lg border border-gray-200">
-                <form id="upload-form" enctype="multipart/form-data">
-                    <div class="mb-6">
-                        <label for="file" class="block text-lg font-semibold text-gray-700 mb-2">1. Choisissez votre fichier :</label>
-                        <input type="file" id="file" name="file" required
-                               class="block w-full text-sm text-gray-600 bg-gray-50 border border-gray-300 rounded-lg cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent p-2">
-                        <p class="mt-1 text-xs text-gray-500">Taille max : 16 Mo. Types supportés : Images (JPG, PNG, GIF), Texte (TXT).</p>
-                    </div>
-                    <div class="mb-8">
-                        <label class="block text-lg font-semibold text-gray-700 mb-3">2. Quel type de document est-ce ?</label>
-                        <div class="flex items-center space-x-6">
-                             <label for="image" class="flex items-center cursor-pointer">
-                                <input type="radio" id="image" name="fileType" value="image" checked
-                                       class="focus:ring-blue-500 text-blue-600">
-                                <span class="ml-2 text-gray-700">Image Iconographique</span>
-                            </label>
-                            <label for="text" class="flex items-center cursor-pointer">
-                                <input type="radio" id="text" name="fileType" value="text"
-                                       class="focus:ring-blue-500 text-blue-600">
-                                <span class="ml-2 text-gray-700">Texte</span>
-                            </label>
-                        </div>
                     </div>
-                    <div class="text-center">
-                        <button type="submit" id="submit-btn"
-                                class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-md transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed">
-                            Lancer l'Analyse
-                        </button>
                     </div>
-                </form>
-                <!-- Loading Indicator -->
-                <div id="loading" class="hidden text-center my-8">
-                   <div class="spinner" role="status">
-                       <span class="sr-only">Loading...</span>
-                   </div>
-                   <p class="text-gray-600 mt-2 font-medium">Analyse en cours, veuillez patienter...</p>
                 </div>
-                 <!-- Error Message Area -->
-                <div id="error-message" class="hidden mt-6 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg relative" role="alert">
-                    <strong class="font-bold">Erreur :</strong>
-                    <span class="block sm:inline" id="error-text"></span>
-                </div>
             </div>
-            <!-- Results Area -->
-            <div id="results" class="hidden mt-10 bg-white p-6 md:p-8 rounded-xl shadow-lg border border-gray-200">
-                <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-3">Résultats de l'Analyse</h2>
-                <!-- Container for optional image preview -->
-                <div id="uploaded-image-container" class="mb-6 hidden">
-                     <h3 class="text-xl font-semibold text-gray-700 mb-3">Image Analysée :</h3>
-                     <img id="uploaded-image" src="" alt="Image téléchargée" class="max-w-md mx-auto h-auto rounded-lg shadow-md border border-gray-200">
                 </div>
-                <!-- Container for the analysis text -->
-                <div id="analysis-container">
-                     <h3 class="text-xl font-semibold text-gray-700 mb-3">Analyse Détaillée :</h3>
-                     <div id="analysis-text" class="bg-gray-50 p-4 rounded-md border border-gray-200 text-sm md:text-base">
-                         <!-- Analysis will be loaded here by JavaScript -->
-                     </div>
                 </div>
             </div>
-        </main>
-        <footer class="text-center mt-12 text-sm text-gray-500">
-            Propulsé par Google Gemini & Flask.
-        </footer>
     </div>
     <script>
-        const uploadForm = document.getElementById('upload-form');
-        const submitButton = document.getElementById('submit-btn');
-        const loadingIndicator = document.getElementById('loading');
-        const resultsDiv = document.getElementById('results');
-        const analysisTextDiv = document.getElementById('analysis-text');
-        const uploadedImageContainer = document.getElementById('uploaded-image-container');
-        const uploadedImage = document.getElementById('uploaded-image');
-        const errorMessageDiv = document.getElementById('error-message');
-        const errorTextSpan = document.getElementById('error-text');
-        uploadForm.addEventListener('submit', async (event) => {
-            event.preventDefault(); // Prevent default form submission
-            // Reset UI
-            resultsDiv.classList.add('hidden');
-            errorMessageDiv.classList.add('hidden');
-            uploadedImageContainer.classList.add('hidden');
-            loadingIndicator.classList.remove('hidden');
-            submitButton.disabled = true;
-            submitButton.textContent = 'Analyse en cours...';
-            const formData = new FormData(uploadForm);
-            const fileInput = document.getElementById('file');
-            const fileType = formData.get('fileType'); // Get selected radio button value
-             // Basic client-side validation (optional, backend validation is key)
-            if (!fileInput.files || fileInput.files.length === 0) {
-                showError('Veuillez sélectionner un fichier.');
-                resetButton();
-                loadingIndicator.classList.add('hidden');
-                return;
-            }
-            try {
-                const response = await fetch('/upload', {
                     method: 'POST',
-                    body: formData // FormData handles headers automatically for multipart/form-data
                 });
-                loadingIndicator.classList.add('hidden'); // Hide loading indicator regardless of outcome
-                if (!response.ok) {
-                    let errorMsg = `Erreur HTTP ${response.status}: ${response.statusText}`;
-                    try {
-                         const errorData = await response.json();
-                         errorMsg = errorData.error || 'Une erreur inconnue est survenue côté serveur.';
-                    } catch (e) {
-                        // If response is not JSON, use the status text
-                    }
-                    throw new Error(errorMsg);
-                }
-                const result = await response.json();
-                if (result.success) {
-                    analysisTextDiv.textContent = result.analysis; // Use textContent to prevent XSS with raw HTML
-                    // Display image only if it was an image upload and a URL is provided
-                    if (fileType === 'image' && result.file_url) {
-                         uploadedImage.src = result.file_url + '?t=' + new Date().getTime(); // Add timestamp to bypass cache if needed
-                         uploadedImageContainer.classList.remove('hidden');
-                    } else {
-                        uploadedImageContainer.classList.add('hidden'); // Ensure it's hidden for text uploads
-                    }
-                    resultsDiv.classList.remove('hidden'); // Show results section
-                     // Scroll to results smoothly
-                    resultsDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
-                } else {
-                     throw new Error(result.error || 'Une erreur inattendue est survenue.');
-                }
-            } catch (error) {
-                console.error('Upload Error:', error);
-                showError(error.message || 'Une erreur de communication est survenue.');
-            } finally {
-                 resetButton();
             }
         });
-        function showError(message) {
-            errorTextSpan.textContent = message;
-            errorMessageDiv.classList.remove('hidden');
-            loadingIndicator.classList.add('hidden'); // Ensure loading is hidden on error
-             errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'center' });
-        }
-         function resetButton() {
-            submitButton.disabled = false;
-            submitButton.textContent = "Lancer l'Analyse";
-        }
     </script>
 </body>
-</html>

 <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/[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">
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;500;600&display=swap');
+        .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, #ffffff, #f3f4f6);
+            box-shadow: 20px 20px 60px #d1d1d1,
+                       -20px -20px 60px #ffffff;
         }
+        .upload-zone:hover {
+            transform: scale(1.01);
+            transition: all 0.3s ease;
         }
+        .waves {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+            line-height: 0;
+            transform: rotate(180deg);
         }
+        .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;
+        }
     </style>
 </head>
+<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen relative">
+    <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">
+        <!-- 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">
+                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>
         </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">
+                        <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>
+                        <span class="ml-3 text-gray-700 group-hover:text-indigo-500 transition-colors">Image</span>
+                    </label>
+                    <label class="relative flex items-center group cursor-pointer">
+                        <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>
+                        <span class="ml-3 text-gray-700 group-hover:text-indigo-500 transition-colors">Texte</span>
+                    </label>
+                </div>
+            </div>
+            <!-- Upload Zone -->
+            <div 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">
+                        <label 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>
+                            <input id="file-upload" name="file" type="file" class="sr-only">
+                        </label>
+                        <p class="pl-1">ou cliquez pour sélectionner</p>
                     </div>
+                    <p class="text-xs text-gray-500">PNG, JPG, GIF, PDF, TXT jusqu'à 10MB</p>
                 </div>
             </div>
+            <!-- Preview -->
+            <div id="preview" class="mt-12 hidden slide-up">
+                <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"></pre>
                 </div>
+            </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>
             </div>
+        </div>
+    </div>
+    <!-- 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>
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const uploadZone = document.querySelector('.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');
+            const results = document.getElementById('results');
+            const analysisContent = document.getElementById('analysis-content');
+            const loading = document.getElementById('loading');
+            // Configuration de marked pour le rendu Markdown
+            marked.setOptions({
+                breaks: true,
+                gfm: true,
+                headerIds: true,
+                sanitize: false
+            });
+            uploadZone.addEventListener('click', () => fileInput.click());
+            uploadZone.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                uploadZone.classList.add('border-indigo-500', 'bg-indigo-50');
+            });
+            uploadZone.addEventListener('dragleave', () => {
+                uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
+            });
+            uploadZone.addEventListener('drop', (e) => {
+                e.preventDefault();
+                uploadZone.classList.remove('border-indigo-500', 'bg-indigo-50');
+                const files = e.dataTransfer.files;
+                if (files.length) handleFile(files[0]);
+            });
+            fileInput.addEventListener('change', (e) => {
+                if (e.target.files.length) handleFile(e.target.files[0]);
+            });
+            function handleFile(file) {
+                const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                // Animation de l'aperçu
+                preview.classList.remove('hidden');
+                preview.classList.add('fade-in');
+                if (fileType === 'image') {
+                    imagePreview.classList.remove('hidden');
+                    textPreview.classList.add('hidden');
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        imagePreview.src = e.target.result;
+                        imagePreview.classList.add('fade-in');
+                    };
+                    reader.readAsDataURL(file);
+                } else {
+                    imagePreview.classList.add('hidden');
+                    textPreview.classList.remove('hidden');
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        textPreview.textContent = e.target.result;
+                        textPreview.classList.add('fade-in');
+                    };
+                    reader.readAsText(file);
+                }
+                const formData = new FormData();
+                formData.append('file', file);
+                formData.append('fileType', fileType);
+                loading.classList.remove('hidden');
+                loading.classList.add('fade-in');
+                fetch('/upload', {
                     method: 'POST',
+                    body: formData
+                })
+                .then(response => response.json())
+                .then(data => {
+                    loading.classList.add('hidden');
+                    results.classList.remove('hidden');
+                    results.classList.add('slide-up');
+                    // Convertir le Markdown en HTML
+                    analysisContent.innerHTML = marked.parse(data.analysis);
+                    // Activer la coloration syntaxique
+                    Prism.highlightAll();
+                })
+                .catch(error => {
+                    loading.classList.add('hidden');
+                    alert('Une erreur est survenue lors de l\'analyse. Veuillez réessayer.');
+                    console.error('Error:', error);
                 });
             }
         });
     </script>
 </body>
+</html>