Update app.py

app.py

@@ -1,216 +1,541 @@
-from flask import Flask, render_template, request, jsonify
-import os
-import tempfile
-from PIL import Image
-from google import genai
-from google.genai import types
-import uuid
-
-app = Flask(__name__)
-app.config['UPLOAD_FOLDER'] = 'static/uploads'
-app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16 MB max upload
-
-# Ensure upload directory exists
-os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
-
-# Google Gemini API setup
-def init_gemini():
-    api_key = os.environ.get('GOOGLE_API_KEY')
-    if not api_key:
-        print("WARNING: GOOGLE_API_KEY environment variable not set")
-        return None
-    return genai.Client(api_key=api_key)
-
-client = init_gemini()
-
-# Prompts for analysis
-ICONOGRAPHIC_PROMPT = """
-je souhaite faire mon travail d'espagnol qui consiste à de l'analyse de documents iconographique. j'aimerais que tu le phase en respectant scrupuleusement la méthodologie suivante. j'aimerais que tu fasses ce travail en espagnol en donnant également la traduction française
-
-Metodología del comentario de un documento iconográfico
-
-Un documento iconográfico es un documento centrado en una imagen. Puede ser: una foto, un cuadro, una publicidad, un dibujo, un tebeo, una tira dibujada, una caricatura, etc. Su comentario respeta las etapas siguientes: la presentación, la descripción, el análisis y la conclusión.
-
-La presentación
-
-Se trata de resaltar los elementos esenciales para identificar el documento:
-
-El título (si existe)
-
-La naturaleza (si es una foto/dibujo/cuadro, en color o blanco y negro)
-
-El autor (el fotógrafo/el dibujante/el publicista...)
-
-La fuente (si existe)
-
-El tema evocado
-
-La descripción
-
-Se trata de decir lo que vemos.
-
-Dominar el vocabulario relativo a la imagen.
-
-Dominar el vocabulario de la situación en el espacio (arriba, abajo, delante, detrás, etc.)
-
-Conocer la organización interna de la descripción.
-
-¿Qué debemos hacer concretamente?
-
-Determinar el número de planos o términos.
-
-(Ej: La imagen tiene dos planos/tres planos/un plan único)
-
-Hacer la descripción plano por plano y acabar antes de pasar al siguiente si hay más de un plano.
-
-Ej: en el primer plano vemos...
-
-Ordenar la descripción de cada plano ( a la derecha, a la izquierda, arriba, abajo, delante, detrás, en el centro, a lo lejos...
-
-¿Qué se debe describir?
-
-Los protagonistas (los personajes):
-
-Los protagonistas
-
-Sexo, edad (hombre o mujer, joven o adulto)
-
-Las posturas (de pie, sentado, arrodillado, etc.)
-
-Los vestidos (ropas)
-
-Los rasgos físicos (color de pelo, gordo, flaco, etc.)
-
-Los rasgos sicológicos (triste, optimista, activo, pasivo, etc.)
-
-Las actitudes (está riendo, triste, llorando, contento, etc.)
-
-Las acciones (lo que están haciendo)
-
-Los objetos alrededor, los colores (fríos o cálidos), los contrastes...
-
-El análisis
-
-Interpretamos y comentamos los elementos de la descripción para comprender el mensaje del autor.
-
-La interpretación debe apoyarse en la descripción porque no se trata de un comentario libre.
-
-Empleamos fórmulas subjetivas porque expresamos hipótesis e impresiones.
-
-Ej: Cuando examinamos...podemos decir que.../ la postura de..., los vestidos...nos permiten imaginar que.../ lo que nos llama la atención es... porque/ los colores cálidos sugieren que...
-
-La conclusión
-
-Se trata de hacer un balance (resumen) de lo dicho de dar una impresión personal. Así:
-
-Anunciamos la conclusión: para concluir/ en suma/en conclusión... podemos decir que...
-
-Precisamos el medio de expresión utilizado: a través de esta foto/mediante este dibujo...
-
-Anunciamos la intención del autor: el dibujante quiere denunciar/ el fotógrafo pretende criticar/ el pintor quiere relevar, sensibilizar, mostrar.
-
-Dar la impresión personal: esta foto (no) me parece interesante/escandaloso/pertinente.
-
-Justificamos nuestra impresión: porque revela una realidad social/política/cultural...
-
-Un modelo: a través de este cuadro, el pintor quiere denunciar las injusticias sociales en África. El cuadro me parece interesante porque releva un fenómeno social recurrente que incita las autoridades a la responsabilidad. La propia imagen ilustra muy bien el tema de las injusticias entre ricos y ricos...
-"""
-
-TEXT_PROMPT = """
-Je souhaite faire une analyse de texte en espagnol en respectant scrupuleusement la méthodologie suivante. J'aimerais que tu fasses ce travail en espagnol en donnant également la traduction française.
-
-Metodología del comentario de texto en español:
-
-1. Presentación del documento
-   - Autor y contexto histórico
-   - Naturaleza del texto (literario, periodístico, discurso, etc.)
-   - Tema principal
-
-2. Análisis de la estructura
-   - División en partes lógicas
-   - Identificación de la organización de las ideas
-
-3. Análisis del contenido
-   - Ideas principales y secundarias
-   - Intención del autor
-   - Recursos lingüísticos utilizados
-   - Vocabulario y campo semántico
-
-4. Conclusión
-   - Síntesis del an��lisis
-   - Aportación personal
-   - Relevancia del texto en su contexto
-
-Por favor, analiza este texto según la metodología indicada, proporcionando el análisis completo en español y su traducción al francés.
-"""
-
-def generate_response(file_path, file_type):
-    """Generate response using Gemini API based on file type"""
-    try:
-        if not client:
-            return "Error: Google API key not configured properly."
-        
-        if file_type == 'image':
-            image_data = Image.open(file_path)
-            response = client.models.generate_content(
-                model="gemini-2.5-flash-preview-04-17",
-                contents=[image_data, ICONOGRAPHIC_PROMPT],
-                config=types.GenerateContentConfig(
-                    thinking_config=types.ThinkingConfig(
-                        thinking_budget=8000
-                    )
-                ),
-            )
-            return response.candidates[0].content.parts[0].text.strip()
-        
-        elif file_type == 'text':
-            with open(file_path, 'r', encoding='utf-8') as f:
-                text_content = f.read()
-            
-            response = client.models.generate_content(
-                model="gemini-2.5-flash-preview-04-17",
-                contents=[text_content, TEXT_PROMPT],
-                config=types.GenerateContentConfig(
-                    thinking_config=types.ThinkingConfig(
-                        thinking_budget=8000
-                    )
-                ),
-            )
-            return response.candidates[0].content.parts[0].text.strip()
-        
-    except Exception as e:
-        print(f"Error generating response: ")
-        return f"Error durante el análisis: "
-
-@app.route('/')
-def index():
-    return render_template('index.html')
-
-@app.route('/upload', methods=['POST'])
-def upload_file():
-    if 'file' not in request.files:
-        return jsonify({'error': 'No file part'}), 400
-    
-    file = request.files['file']
-    file_type = request.form.get('fileType', 'image')
-    
-    if file.filename == '':
-        return jsonify({'error': 'No selected file'}), 400
-    
-    if file:
-        # Generate a unique filename
-        filename = f"{uuid.uuid4()}_{file.filename}"
-        file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
-        file.save(file_path)
-        
-        # Generate analysis
-        analysis = generate_response(file_path, file_type)
-        
-        return jsonify({
-            'success': True,
-            'file_url': f"/static/uploads/{filename}",
-            'analysis': analysis
-        })
-
-if __name__ == '__main__':
-    app.run(debug=True)
+<!DOCTYPE html>
+<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/[email protected]/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 !important; /* 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</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">Document iconographique (Image, Photo, Dessin...) avec méthodologie.</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"
+                               class="peer sr-only file-type-radio">
+                        <div class="w-5 h-5 mr-3 border-2 border-gray-300 rounded-full flex-shrink-0 peer-checked:border-indigo-500 peer-checked:bg-indigo-500 transition-all"></div>
+                        <span class="text-sm text-gray-700 group-hover:text-indigo-600">Document textuel (Texte, PDF lisible...) avec méthodologie.</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</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) ou Textes (TXT, PDF) - 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>
+                    <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');
+            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;
+
+            // Configure marked with Prism check
+            marked.setOptions({
+                breaks: true,
+                gfm: true,
+                headerIds: false,
+                mangle: false,
+                highlight: function(code, 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
+                        }
+                    }
+                    // ** Fallback if Prism or language not available **
+                    return code;
+                }
+            });
+
+            // --- Helper Functions ---
+            function showLoading(isLoading) {
+                if (isLoading) {
+                    submitButtonText.classList.add('hidden');
+                    submitButtonSpinner.classList.remove('hidden');
+                    submitButton.disabled = true;
+                } else {
+                    submitButtonText.classList.remove('hidden');
+                    submitButtonSpinner.classList.add('hidden');
+                    submitButton.disabled = (selectedFile === null);
+                }
+            }
+
+            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();
+            }
+
+            function updateAcceptAttribute() {
+                 const selectedType = document.querySelector('input[name="fileType"]:checked').value;
+                 if (selectedType === 'image') {
+                     fileInput.accept = "image/png, image/jpeg, image/gif, image/webp";
+                     fileTypesInfo.textContent = "Images (PNG, JPG, GIF, WEBP) - Max 16MB";
+                 } else {
+                     fileInput.accept = "text/plain, application/pdf, .txt";
+                     fileTypesInfo.textContent = "Textes (TXT, PDF lisible) - Max 16MB";
+                 }
+                 if (selectedFile) {
+                    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 ---
+            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);
+
+
+            // --- Core Logic Functions ---
+
+            function handleFileSelection(file) {
+                const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                const maxFileSize = 16 * 1024 * 1024;
+
+                 if (file.size > maxFileSize) {
+                    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;
+                }
+
+                 const allowedImageTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+                 const allowedTextTypes = ['text/plain', 'application/pdf'];
+
+                 if (fileType === 'image' && !allowedImageTypes.includes(file.type)) {
+                    const isImageTypeByName = /\.(jpe?g|png|gif|webp)$/i.test(file.name);
+                    if (!isImageTypeByName) {
+                       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)) {
+                    const isTextTypeByName = /\.txt$/i.test(file.name);
+                     if (!isTextTypeByName && file.type !== 'application/pdf') {
+                         Swal.fire({ // Use SweetAlert
+                           icon: 'error',
+                           title: 'Type de fichier invalide',
+                           text: 'Veuillez sélectionner un fichier texte (TXT) ou PDF.'
+                       });
+                        resetUI();
+                        return;
+                    }
+                 }
+
+                // If validation passes:
+                selectedFile = file;
+                preview.classList.remove('hidden');
+                preview.classList.add('fade-in');
+                results.classList.add('hidden');
+                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');
+
+                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 {
+                    imagePreview.classList.add('hidden');
+                    textPreview.classList.remove('hidden');
+                    if (file.type === 'application/pdf') {
+                         textPreview.textContent = "Aperçu non disponible pour les fichiers PDF. Le contenu sera analysé.";
+                    } else {
+                         const reader = new FileReader();
+                         reader.onload = (e) => textPreview.textContent = e.target.result;
+                         reader.readAsText(file);
+                    }
+                }
+                submitButton.disabled = false;
+            }
+
+            function handleSubmit() {
+                if (!selectedFile) {
+                     Swal.fire('Aucun fichier', 'Veuillez sélectionner un fichier avant de lancer l\'analyse.', 'warning');
+                    return;
+                }
+
+                const fileType = document.querySelector('input[name="fileType"]:checked').value;
+                const formData = new FormData();
+                formData.append('file', selectedFile);
+                formData.append('fileType', fileType);
+
+                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);
+
+                        // ** 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 {
+                        throw new Error(data.error || "L'analyse n'a pas pu être générée.");
+                    }
+                })
+                .catch(error => {
+                    showLoading(false);
+                    // 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);
+                    submitButton.disabled = false; // Re-enable on error
+                });
+            }
+
+              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 || "";
+
+                 // Basic conversion for better text format
+                 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') // Attempt to format code blocks
+                    .replace(/<[^>]+>/g, '') // Remove remaining tags
+                    .replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&') // Decode entities
+                    .trim();
+
+                navigator.clipboard.writeText(textToCopy)
+                    .then(() => {
+                         // 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);
+                         // 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();
+            resetUI();
+
+        }); // End DOMContentLoaded
+    </script>
+</body>
+</html>