init

Dockerfile

@@ -0,0 +1,44 @@
+FROM python:3.9-slim
+
+# Install essential tools
+RUN apt-get update && apt-get install -y \
+    poppler-utils \
+    pandoc \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements file first for better caching
+COPY requirements.txt ./
+
+# Install dependencies
+RUN pip install --no-cache-dir -r requirements.txt \
+    && pip install python-multipart uvicorn fastapi pydantic requests jinja2
+
+# Create directories and set permissions
+RUN mkdir -p /app/frontend \
+    && mkdir -p /tmp/.matplotlib \
+    && chmod 777 /tmp/.matplotlib
+
+# Set environment variables
+ENV MPLCONFIGDIR=/tmp/.matplotlib
+ENV PYTHONUNBUFFERED=1
+# Uncomment and set your HF API key if needed
+# ENV HF_API_KEY=your_huggingface_api_key
+
+# Copy application code and static files
+COPY backend_fastapi.py ./
+COPY frontend ./frontend/
+
+# Create requirements.txt if it doesn't exist yet
+RUN if [ ! -f requirements.txt ]; then \
+    echo "fastapi==0.103.1\nuvicorn==0.23.2\npython-multipart==0.0.6\nrequests==2.31.0\nJinja2==3.1.2\npydantic==2.4.2" > requirements.txt; \
+    fi
+
+# Expose port
+EXPOSE 7860
+
+# Start command
+CMD ["uvicorn", "backend_fastapi:app", "--host", "0.0.0.0", "--port", "7860"]

backend_fastapi.py

@@ -0,0 +1,293 @@
+from fastapi import FastAPI, File, UploadFile, Form, HTTPException, Request
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from typing import Optional
+import requests
+import os
+import io
+import tempfile
+import logging
+import subprocess
+
+# Configuration du logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = FastAPI()
+
+# Configuration CORS
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Configuration des fichiers statiques
+app.mount("/static", StaticFiles(directory="frontend"), name="static")
+templates = Jinja2Templates(directory="frontend")
+
+@app.get("/", response_class=HTMLResponse)
+async def serve_frontend(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
+# Configuration Hugging Face
+HF_API_KEY = os.getenv("HF_API_KEY", "")
+HEADERS = {"Authorization": f"Bearer {HF_API_KEY}"} if HF_API_KEY else {}
+
+HF_MODELS = {
+    "summary": "facebook/bart-large-cnn",
+    "qa": "deepset/roberta-base-squad2"
+}
+
+HF_API_URL = "https://api-inference.huggingface.co/models/"
+
+def query_huggingface(model: str, payload: dict):
+    try:
+        api_url = f"{HF_API_URL}{model}"
+        logger.info(f"Requête à {api_url}")
+        
+        response = requests.post(
+            api_url,
+            headers=HEADERS,
+            json=payload,
+            timeout=60
+        )
+        
+        if response.status_code != 200:
+            logger.error(f"Erreur API Hugging Face: {response.status_code}, {response.text}")
+            return {"error": f"Erreur API: {response.status_code}"}
+            
+        return response.json()
+    except Exception as e:
+        logger.error(f"Erreur API: {str(e)}")
+        return {"error": str(e)}
+
+async def convert_to_text(file: UploadFile):
+    """Convertit différents formats de fichiers en texte avec gestion robuste des erreurs"""
+    try:
+        # Vérification du type de fichier
+        if not file.filename:
+            return "Aucun fichier fourni"
+            
+        ext = os.path.splitext(file.filename)[1].lower()
+        
+        # Lecture du contenu
+        content = await file.read()
+        
+        # Traitement des fichiers texte
+        if ext == '.txt':
+            return content.decode('utf-8', errors='replace')
+        
+        # Traitement des PDF avec pdftotext
+        elif ext == '.pdf':
+            try:
+                with tempfile.NamedTemporaryFile(suffix='.pdf', delete=False) as tmp_pdf:
+                    tmp_pdf.write(content)
+                    tmp_pdf.flush()
+                    tmp_pdf_path = tmp_pdf.name
+                
+                try:
+                    result = subprocess.run(
+                        ["pdftotext", tmp_pdf_path, "-"],
+                        capture_output=True,
+                        text=True,
+                        timeout=30
+                    )
+                    
+                    os.unlink(tmp_pdf_path)  # Supprimer le fichier temporaire
+                    
+                    if result.returncode == 0:
+                        return result.stdout
+                    else:
+                        error_msg = result.stderr or "Erreur inconnue lors de la conversion PDF"
+                        logger.error(f"PDF conversion failed: {error_msg}")
+                        return f"Erreur de conversion PDF: {error_msg}"
+                except:
+                    # S'assurer que le fichier temporaire est supprimé en cas d'erreur
+                    if os.path.exists(tmp_pdf_path):
+                        os.unlink(tmp_pdf_path)
+                    raise
+                        
+            except FileNotFoundError:
+                logger.warning("pdftotext non installé")
+                return "Conversion PDF non disponible (pdftotext requis)"
+            except subprocess.TimeoutExpired:
+                return "Timeout lors de la conversion PDF"
+                
+        # Traitement des fichiers Word avec pandoc
+        elif ext in ('.docx', '.doc'):
+            try:
+                with tempfile.NamedTemporaryFile(suffix=ext, delete=False) as tmp_doc:
+                    tmp_doc.write(content)
+                    tmp_doc.flush()
+                    tmp_doc_path = tmp_doc.name
+                
+                try:
+                    result = subprocess.run(
+                        ["pandoc", "-t", "plain", tmp_doc_path],
+                        capture_output=True,
+                        text=True,
+                        timeout=30
+                    )
+                    
+                    os.unlink(tmp_doc_path)  # Supprimer le fichier temporaire
+                    
+                    if result.returncode == 0:
+                        return result.stdout
+                    else:
+                        error_msg = result.stderr or "Erreur inconnue lors de la conversion DOCX"
+                        logger.error(f"DOCX conversion failed: {error_msg}")
+                        return f"Erreur de conversion DOCX: {error_msg}"
+                except:
+                    # S'assurer que le fichier temporaire est supprimé en cas d'erreur
+                    if os.path.exists(tmp_doc_path):
+                        os.unlink(tmp_doc_path)
+                    raise
+                        
+            except FileNotFoundError:
+                logger.warning("pandoc non installé")
+                return "Conversion DOCX non disponible (pandoc requis)"
+            except subprocess.TimeoutExpired:
+                return "Timeout lors de la conversion DOCX"
+                
+        else:
+            return f"Format de fichier non supporté: {ext}"
+            
+    except Exception as e:
+        logger.error(f"Erreur de conversion: {str(e)}")
+        return f"Erreur lors de la conversion du fichier: {str(e)}"
+
+@app.post("/summarize", response_class=JSONResponse)
+async def summarize_document(file: UploadFile = File(...)):
+    """Endpoint pour résumer des documents avec gestion améliorée des PDF"""
+    try:
+        logger.info(f"Traitement du fichier: {file.filename}")
+        
+        text = await convert_to_text(file)
+        if not text or not text.strip():
+            raise HTTPException(400, "Fichier vide ou problème de conversion")
+        
+        # Si le texte est un message d'erreur
+        if text.startswith(("Erreur de conversion", "Conversion", "Format non supporté")):
+            return {
+                "filename": file.filename,
+                "summary": text,  # Retourne le message d'erreur comme "résumé"
+                "text_length": len(text),
+                "warning": True
+            }
+        
+        # Limite la taille pour l'API
+        text_to_process = text[:3000]  # Réduire pour plus de fiabilité
+        
+        response = query_huggingface(HF_MODELS["summary"], {
+            "inputs": text_to_process,
+            "parameters": {"max_length": 150, "min_length": 30}
+        })
+        
+        if "error" in response:
+            logger.error(f"Erreur de l'API HF: {response['error']}")
+            return {
+                "filename": file.filename,
+                "summary": f"Erreur lors de la génération du résumé: {response['error']}",
+                "text_length": len(text),
+                "warning": True
+            }
+        
+        # Gérer différents formats de réponse possibles
+        summary_text = ""
+        if isinstance(response, list) and len(response) > 0:
+            if isinstance(response[0], dict) and "summary_text" in response[0]:
+                summary_text = response[0]["summary_text"]
+            elif isinstance(response[0], str):
+                summary_text = response[0]
+        elif isinstance(response, dict) and "summary_text" in response:
+            summary_text = response["summary_text"]
+        
+        if not summary_text:
+            summary_text = "Le modèle n'a pas pu générer de résumé. Essayez avec un texte plus court ou plus clair."
+        
+        return {
+            "filename": file.filename,
+            "summary": summary_text,
+            "text_length": len(text),
+            "warning": False
+        }
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Erreur dans summarize: {str(e)}")
+        raise HTTPException(500, f"Erreur interne: {str(e)}")
+
+@app.post("/answer-question", response_class=JSONResponse)
+async def answer_question(
+    question: str = Form(...),
+    file: Optional[UploadFile] = File(None)
+):
+    """Endpoint pour répondre à des questions basées sur un document"""
+    try:
+        logger.info(f"Question reçue: {question}")
+        context = ""
+        
+        if file:
+            logger.info(f"Traitement du fichier: {file.filename}")
+            context = await convert_to_text(file)
+            
+            # Si le contexte est un message d'erreur
+            if context.startswith(("Erreur de conversion", "Conversion", "Format non supporté")):
+                return {
+                    "question": question,
+                    "answer": f"Problème avec le document: {context}",
+                    "warning": True
+                }
+        
+        # Si aucun fichier fourni, on répond juste à la question
+        if not context or not context.strip():
+            context = "Pas de contexte disponible."
+            
+        # Limite la taille du contexte pour l'API
+        context_to_process = context[:3000]  # Réduire pour plus de fiabilité
+        
+        response = query_huggingface(HF_MODELS["qa"], {
+            "inputs": {
+                "question": question,
+                "context": context_to_process
+            }
+        })
+        
+        if "error" in response:
+            logger.error(f"Erreur de l'API HF: {response['error']}")
+            return {
+                "question": question,
+                "answer": f"Erreur lors de l'analyse: {response['error']}",
+                "warning": True
+            }
+        
+        # Gérer différents formats de réponse possibles
+        answer = ""
+        if isinstance(response, dict):
+            if "answer" in response:
+                answer = response["answer"]
+            elif "answer_text" in response:
+                answer = response["answer_text"]
+            elif "answers" in response and len(response["answers"]) > 0:
+                answer = response["answers"][0]["text"]
+        
+        if not answer:
+            answer = "Je n'ai pas trouvé de réponse précise à cette question dans le document fourni."
+        
+        return {
+            "question": question,
+            "answer": answer,
+            "warning": False
+        }
+    except Exception as e:
+        logger.error(f"Erreur dans answer-question: {str(e)}")
+        raise HTTPException(500, f"Erreur interne: {str(e)}")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

frontend/index.html

@@ -0,0 +1,169 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Tools Interface</title>
+  <link rel="stylesheet" href="/static/styles.css">
+  <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
+</head>
+<body>
+  <div class="container">
+    <header>
+      <h1>AI Tools Interface</h1>
+      <p class="subtitle">Outils d'IA pour le traitement de documents et d'images</p>
+    </header>
+    
+    <div class="tab-container">
+      <!-- Navigation des onglets -->
+      <nav class="tab-nav">
+        <button onclick="openTab('summarize')" class="tab-btn active" data-tab="summarize" aria-selected="true" aria-controls="summarize">
+          <i class="icon">📝</i> Résumer
+        </button>
+        <button onclick="openTab('interpret-image')" class="tab-btn" data-tab="interpret-image" aria-selected="false" aria-controls="interpret-image">
+          <i class="icon">🖼️</i> Légende Image
+        </button>
+        <button onclick="openTab('answer-question')" class="tab-btn" data-tab="answer-question" aria-selected="false" aria-controls="answer-question">
+          <i class="icon">❓</i> Réponse Question
+        </button>
+        <button onclick="openTab('generate-visualization')" class="tab-btn" data-tab="generate-visualization" aria-selected="false" aria-controls="generate-visualization">
+          <i class="icon">📊</i> Visualisation
+        </button>
+        <button onclick="openTab('translate-document')" class="tab-btn" data-tab="translate-document" aria-selected="false" aria-controls="translate-document">
+          <i class="icon">🌐</i> Traduire
+        </button>
+      </nav>
+
+      <!-- Contenu des onglets -->
+      <div class="tab-content-wrapper">
+        <!-- Onglet Résumer -->
+        <section id="summarize" class="tab-content" role="tabpanel" aria-labelledby="summarize-tab">
+          <h2>Résumer un document</h2>
+          <form id="summarize-form" class="form">
+            <div class="file-upload-container">
+              <input type="file" id="summarize-file" accept=".txt,.pdf,.docx,.pptx" class="hidden-file" required />
+              <label for="summarize-file" class="file-upload">
+                <span class="file-icon">📁</span>
+                <span class="file-label">Sélectionner un fichier (TXT, PDF, DOCX, PPTX)</span>
+              </label>
+              <div id="summarize-filename" class="filename-display"></div>
+            </div>
+            <button type="submit" class="btn btn-blue">
+              <span class="btn-icon">✨</span> Générer le résumé
+            </button>
+          </form>
+          <div id="summarize-result" class="result-box">
+            <div class="placeholder">Votre résumé apparaîtra ici...</div>
+          </div>
+        </section>
+
+        <!-- Onglet Légende Image -->
+        <section id="interpret-image" class="tab-content hidden" role="tabpanel" aria-labelledby="interpret-image-tab">
+          <h2>Générer une légende d'image</h2>
+          <form id="interpret-image-form" class="form">
+            <div class="file-upload-container">
+              <input type="file" id="interpret-image-file" accept="image/*" class="hidden-file" required />
+              <label for="interpret-image-file" class="file-upload">
+                <span class="file-icon">🖼️</span>
+                <span class="file-label">Sélectionner une image (JPG, PNG, etc.)</span>
+              </label>
+              <div id="interpret-image-filename" class="filename-display"></div>
+            </div>
+            <button type="submit" class="btn btn-purple">
+              <span class="btn-icon">🔍</span> Générer la légende
+            </button>
+          </form>
+          <div id="interpret-image-result" class="result-box">
+            <div class="placeholder">La description de votre image apparaîtra ici...</div>
+          </div>
+        </section>
+
+        <!-- Onglet Réponse Question -->
+        <section id="answer-question" class="tab-content hidden" role="tabpanel" aria-labelledby="answer-question-tab">
+          <h2>Poser une question à un document</h2>
+          <form id="answer-question-form" class="form">
+            <div class="form-group">
+              <label for="question-input" class="form-label">Votre question</label>
+              <textarea id="question-input" placeholder="Posez votre question ici..." class="textarea" rows="3" required></textarea>
+            </div>
+            <div class="file-upload-container">
+              <input type="file" id="answer-question-file" accept=".txt,.pdf,.docx" class="hidden-file" />
+              <label for="answer-question-file" class="file-upload">
+                <span class="file-icon">📄</span>
+                <span class="file-label">Document de référence (optionnel)</span>
+              </label>
+              <div id="answer-question-filename" class="filename-display"></div>
+            </div>
+            <button type="submit" class="btn btn-green">
+              <span class="btn-icon">💡</span> Obtenir la réponse
+            </button>
+          </form>
+          <div id="answer-question-result" class="result-box">
+            <div class="placeholder">La réponse à votre question apparaîtra ici...</div>
+          </div>
+        </section>
+
+        <!-- Onglet Visualisation -->
+        <section id="generate-visualization" class="tab-content hidden" role="tabpanel" aria-labelledby="generate-visualization-tab">
+          <h2>Générer une visualisation</h2>
+          <form id="generate-visualization-form" class="form">
+            <div class="file-upload-container">
+              <input type="file" id="visualization-file" accept=".xlsx,.xls,.csv" class="hidden-file" required />
+              <label for="visualization-file" class="file-upload">
+                <span class="file-icon">📈</span>
+                <span class="file-label">Sélectionner un fichier Excel/CSV</span>
+              </label>
+              <div id="visualization-filename" class="filename-display"></div>
+            </div>
+            <div class="form-group">
+              <label for="visualization-request" class="form-label">Type de visualisation</label>
+              <input type="text" id="visualization-request" placeholder="Ex: histogramme des ventes par mois" class="input-text" required>
+            </div>
+            <button type="submit" class="btn btn-indigo">
+              <span class="btn-icon">📊</span> Générer le graphique
+            </button>
+          </form>
+          <div id="generate-visualization-result" class="result-box">
+            <div class="placeholder">Votre visualisation apparaîtra ici...</div>
+          </div>
+        </section>
+
+        <!-- Onglet Traduction -->
+        <section id="translate-document" class="tab-content hidden" role="tabpanel" aria-labelledby="translate-document-tab">
+          <h2>Traduire un document</h2>
+          <form id="translate-document-form" class="form">
+            <div class="file-upload-container">
+              <input type="file" id="translate-file" accept=".txt,.docx,.pdf" class="hidden-file" required />
+              <label for="translate-file" class="file-upload">
+                <span class="file-icon">📑</span>
+                <span class="file-label">Sélectionner un document</span>
+              </label>
+              <div id="translate-filename" class="filename-display"></div>
+            </div>
+            <div class="form-group">
+              <label for="target-language" class="form-label">Langue cible</label>
+              <select id="target-language" class="select" required>
+                <option value="" disabled selected>Choisir une langue</option>
+                <option value="en">Anglais</option>
+                <option value="fr">Français</option>
+                <option value="es">Espagnol</option>
+                <option value="de">Allemand</option>
+                <option value="it">Italien</option>
+                <option value="pt">Portugais</option>
+              </select>
+            </div>
+            <button type="submit" class="btn btn-pink">
+              <span class="btn-icon">🔤</span> Traduire
+            </button>
+          </form>
+          <div id="translate-document-result" class="result-box">
+            <div class="placeholder">La traduction apparaîtra ici...</div>
+          </div>
+        </section>
+      </div>
+    </div>
+  </div>
+  
+  <script src="/static/script.js"></script>
+</body>
+</html>

frontend/script.js

@@ -0,0 +1,277 @@
+// Constante pour l'URL de base
+const BASE_URL = window.location.origin;  // Utiliser l'URL complète pour éviter les erreurs CORS
+
+// Gestion des onglets
+function openTab(tabName) {
+  // Liste des onglets disponibles
+  const tabs = ['summarize', 'answer-question', 'interpret-image', 'generate-visualization', 'translate-document'];
+  
+  // Cacher/montrer les sections appropriées
+  tabs.forEach(tab => {
+    const element = document.getElementById(tab);
+    if (element) {
+      element.classList.toggle('hidden', tab !== tabName);
+    }
+  });
+  
+  // Marquer l'onglet actif
+  document.querySelectorAll('.tab-btn').forEach(btn => {
+    btn.classList.toggle('active', btn.getAttribute('data-tab') === tabName);
+    btn.setAttribute('aria-selected', btn.getAttribute('data-tab') === tabName);
+  });
+}
+
+// Gestion optimisée des uploads de fichiers
+function setupFileUpload(inputId) {
+  const input = document.getElementById(inputId);
+  if (!input) return;
+  
+  const filenameDisplay = document.getElementById(`${inputId}-filename`);
+  
+  input.addEventListener('change', function() {
+    if (this.files && this.files[0]) {
+      // Afficher le nom du fichier
+      const fileName = this.files[0].name;
+      if (filenameDisplay) {
+        filenameDisplay.textContent = fileName;
+        filenameDisplay.title = fileName;
+      }
+      
+      // Changer le texte du label
+      const label = this.nextElementSibling;
+      const fileLabel = label?.querySelector('.file-label');
+      if (fileLabel) {
+        fileLabel.textContent = "Fichier sélectionné";
+      }
+    } else {
+      // Réinitialiser
+      if (filenameDisplay) {
+        filenameDisplay.textContent = "";
+      }
+      
+      const label = this.nextElementSibling;
+      const fileLabel = label?.querySelector('.file-label');
+      if (fileLabel) {
+        fileLabel.textContent = "Sélectionner un fichier";
+      }
+    }
+  });
+}
+
+// Indicateur de chargement
+function showLoading(resultDiv) {
+  resultDiv.innerHTML = `
+    <div class="loading-container">
+      <div class="loading-spinner"></div>
+      <p>Traitement en cours...</p>
+    </div>
+  `;
+}
+
+// Gestion des erreurs
+function showError(resultDiv, message) {
+  resultDiv.innerHTML = `
+    <div class="error-message">
+      <span class="error-icon">⚠️</span>
+      <p>${message}</p>
+    </div>
+  `;
+}
+
+// Initialisation du document
+document.addEventListener('DOMContentLoaded', () => {
+  try {
+    // Activer le premier onglet par défaut
+    openTab('summarize');
+    
+    // Configurer les uploads de fichiers
+    setupFileUpload('summarize-file');
+    setupFileUpload('answer-question-file');
+    setupFileUpload('interpret-image-file');
+    setupFileUpload('visualization-file');
+    setupFileUpload('translate-file');
+    
+    // Configurer les onglets
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const tabName = btn.getAttribute('data-tab');
+        if (tabName) openTab(tabName);
+      });
+    });
+    
+    // Configurer le formulaire de résumé
+    const summarizeForm = document.getElementById('summarize-form');
+    if (summarizeForm) {
+      summarizeForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        handleSummarizeSubmit();
+      });
+    }
+    
+    // Configurer le formulaire de question-réponse
+    const qaForm = document.getElementById('answer-question-form');
+    if (qaForm) {
+      qaForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        handleQASubmit();
+      });
+    }
+
+    // Désactiver temporairement les onglets non implémentés
+    document.querySelectorAll('.tab-btn').forEach(btn => {
+      const tabName = btn.getAttribute('data-tab');
+      if (tabName !== 'summarize' && tabName !== 'answer-question') {
+        btn.addEventListener('click', (e) => {
+          e.preventDefault();
+          alert("Cette fonctionnalité n'est pas encore implémentée.");
+          // Ne pas changer d'onglet
+          return false;
+        });
+      }
+    });
+    
+  } catch (error) {
+    console.error('Erreur d\'initialisation:', error);
+  }
+});
+
+// Gestion du formulaire de résumé
+async function handleSummarizeSubmit() {
+  const fileInput = document.getElementById('summarize-file');
+  const resultDiv = document.getElementById('summarize-result');
+  
+  if (!fileInput || !resultDiv) return;
+  
+  if (!fileInput.files || fileInput.files.length === 0) {
+    showError(resultDiv, "Veuillez sélectionner un fichier à résumer.");
+    return;
+  }
+  
+  showLoading(resultDiv);
+  
+  try {
+    const formData = new FormData();
+    formData.append('file', fileInput.files[0]);
+    
+    // Utiliser fetch avec timeout et gestion d'erreur améliorée
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 60000); // 60s timeout
+    
+    const response = await fetch(`${BASE_URL}/summarize`, {
+      method: 'POST',
+      body: formData,
+      signal: controller.signal
+    }).finally(() => clearTimeout(timeoutId));
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Erreur: ${response.status} ${response.statusText}\n${errorText}`);
+    }
+    
+    const data = await response.json();
+    
+    if (data.warning) {
+      // Afficher l'avertissement
+      resultDiv.innerHTML = `
+        <div class="warning-message">
+          <h3>Problème détecté</h3>
+          <p>${data.summary}</p>
+        </div>
+      `;
+    } else {
+      // Afficher le résumé
+      resultDiv.innerHTML = `
+        <div class="result-content">
+          <h3>Résumé de: ${data.filename}</h3>
+          <div class="summary-text">${data.summary}</div>
+          <p class="text-meta">Longueur du texte original: ${data.text_length} caractères</p>
+        </div>
+      `;
+    }
+  } catch (error) {
+    console.error('Erreur lors du résumé:', error);
+    
+    // Message d'erreur plus descriptif
+    let errorMessage = error.message;
+    if (error.name === 'AbortError') {
+      errorMessage = "La requête a pris trop de temps. Veuillez réessayer avec un fichier plus petit.";
+    } else if (error.message.includes("Failed to fetch")) {
+      errorMessage = "Impossible de contacter le serveur. Veuillez vérifier votre connexion ou contactez l'administrateur.";
+    }
+    
+    showError(resultDiv, `Erreur: ${errorMessage}`);
+  }
+}
+
+// Gestion du formulaire de question-réponse
+async function handleQASubmit() {
+  const questionInput = document.getElementById('question-input');
+  const fileInput = document.getElementById('answer-question-file');
+  const resultDiv = document.getElementById('answer-question-result');
+  
+  if (!questionInput || !resultDiv) return;
+  
+  if (!questionInput.value.trim()) {
+    showError(resultDiv, "Veuillez entrer une question.");
+    return;
+  }
+  
+  showLoading(resultDiv);
+  
+  try {
+    const formData = new FormData();
+    formData.append('question', questionInput.value);
+    
+    if (fileInput && fileInput.files && fileInput.files.length > 0) {
+      formData.append('file', fileInput.files[0]);
+    }
+    
+    // Utiliser fetch avec timeout et gestion d'erreur améliorée
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 60000); // 60s timeout
+    
+    const response = await fetch(`${BASE_URL}/answer-question`, {
+      method: 'POST',
+      body: formData,
+      signal: controller.signal
+    }).finally(() => clearTimeout(timeoutId));
+    
+    if (!response.ok) {
+      const errorText = await response.text();
+      throw new Error(`Erreur: ${response.status} ${response.statusText}\n${errorText}`);
+    }
+    
+    const data = await response.json();
+    
+    if (data.warning) {
+      // Afficher l'avertissement
+      resultDiv.innerHTML = `
+        <div class="warning-message">
+          <h3>Problème détecté</h3>
+          <p>${data.answer}</p>
+        </div>
+      `;
+    } else {
+      // Afficher la réponse
+      resultDiv.innerHTML = `
+        <div class="result-content">
+          <h3>Réponse</h3>
+          <div class="question-text"><strong>Question:</strong> ${data.question}</div>
+          <div class="answer-text"><strong>Réponse:</strong> ${data.answer}</div>
+        </div>
+      `;
+    }
+  } catch (error) {
+    console.error('Erreur de question-réponse:', error);
+    
+    // Message d'erreur plus descriptif
+    let errorMessage = error.message;
+    if (error.name === 'AbortError') {
+      errorMessage = "La requête a pris trop de temps. Veuillez réessayer avec une question plus courte ou un fichier plus petit.";
+    } else if (error.message.includes("Failed to fetch")) {
+      errorMessage = "Impossible de contacter le serveur. Veuillez vérifier votre connexion ou contactez l'administrateur.";
+    }
+    
+    showError(resultDiv, `Erreur: ${errorMessage}`);
+  }
+}

frontend/styles.css

@@ -0,0 +1,316 @@
+/* Réinitialisation de base */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Corps de la page */
+body {
+  background-color: #f7fafc;
+  font-family: Arial, sans-serif;
+  min-height: 100vh;
+}
+
+/* Conteneur principal */
+.container {
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+/* Titre principal */
+h1 {
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
+  color: #2d3748;
+  margin-bottom: 1rem;
+}
+
+/* Sous-titre */
+.subtitle {
+  text-align: center;
+  color: #718096;
+  margin-bottom: 2rem;
+}
+
+/* Conteneur des onglets */
+.tab-container {
+  background-color: #fff;
+  border-radius: 0.5rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  overflow: hidden;
+}
+
+/* Navigation des onglets */
+.tab-nav {
+  display: flex;
+  border-bottom: 1px solid #e2e8f0;
+  position: relative;
+}
+
+.tab-nav .tab-btn {
+  flex: 1;
+  padding: 1rem;
+  background-color: #f7fafc;
+  border: none;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+  text-align: center;
+  font-size: 1rem;
+}
+
+.tab-nav .tab-btn:hover {
+  background-color: #edf2f7;
+  transform: scale(1.05);
+}
+
+.tab-nav .tab-btn.active {
+  background-color: #edf2f7;
+  font-weight: bold;
+}
+
+/* Effet de soulignement dynamique sur les onglets */
+.tab-nav .tab-btn {
+  position: relative;
+}
+
+.tab-nav .tab-btn::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 0;
+  height: 3px;
+  background-color: #4299e1;
+  transition: width 0.3s ease, left 0.3s ease;
+}
+
+.tab-nav .tab-btn:hover::after,
+.tab-nav .tab-btn.active::after {
+  width: 100%;
+  left: 0;
+}
+
+/* Contenu des onglets */
+.tab-content-wrapper {
+  padding: 1.5rem;
+}
+
+.tab-content {
+  margin-bottom: 1rem;
+}
+
+/* Masquer les éléments */
+.hidden {
+  display: none;
+}
+
+/* Styles des formulaires */
+.form {
+  margin-bottom: 1rem;
+}
+
+.form input[type="text"],
+.form textarea,
+.form select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #cbd5e0;
+  border-radius: 0.25rem;
+  font-size: 1rem;
+}
+
+.textarea {
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* Input type file caché */
+.hidden-file {
+  display: none;
+}
+
+/* Label pour le chargement de fichier */
+.file-upload {
+  display: block;
+  width: 100%;
+  padding: 1rem;
+  border: 2px dashed #cbd5e0;
+  border-radius: 0.5rem;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-bottom: 1rem;
+}
+
+.file-upload:hover {
+  background-color: #f7fafc;
+}
+
+/* Affichage du nom du fichier */
+.filename-display {
+  text-align: center;
+  color: #718096;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+}
+
+/* Boutons */
+.btn {
+  width: 100%;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 0.25rem;
+  color: #fff;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+/* Boutons de couleur */
+.btn-blue {
+  background-color: #4299e1;
+}
+
+.btn-blue:hover {
+  background-color: #3182ce;
+}
+
+.btn-green {
+  background-color: #48bb78;
+}
+
+.btn-green:hover {
+  background-color: #38a169;
+}
+
+.btn-purple {
+  background-color: #9f7aea;
+}
+
+.btn-purple:hover {
+  background-color: #805ad5;
+}
+
+.btn-indigo {
+  background-color: #667eea;
+}
+
+.btn-indigo:hover {
+  background-color: #5a67d8;
+}
+
+.btn-pink {
+  background-color: #ed64a6;
+}
+
+.btn-pink:hover {
+  background-color: #d53f8c;
+}
+
+/* Boîte de résultat */
+.result-box {
+  margin-top: 1rem;
+  padding: 1rem;
+  background-color: #f7fafc;
+  border-radius: 0.25rem;
+  min-height: 100px;
+}
+
+/* Placeholder dans la boîte de résultat */
+.result-box .placeholder {
+  color: #a0aec0;
+  font-style: italic;
+}
+
+/* Sélecteur de formulaire */
+.select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #cbd5e0;
+  border-radius: 0.25rem;
+}
+
+/* Styles pour les messages d'erreur et d'information */
+.error {
+  color: #e53e3e;
+  font-weight: bold;
+  margin: 0;
+}
+
+.info {
+  color: #3182ce;
+  font-style: italic;
+  margin: 0;
+}
+
+.small {
+  font-size: 0.875rem;
+  color: #718096;
+  margin-top: 0.5rem;
+}
+
+/* Style pour les images dans les visualisations */
+.result-box img {
+  max-width: 100%;
+  height: auto;
+  margin-top: 1rem;
+  border-radius: 0.25rem;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Navbar avec animation d'apparition */
+nav {
+  filter: drop-shadow(0.25rem 0.25rem 0.25rem rgba(0, 0, 0, 0.3));
+  width: 100%;
+  max-width: 14rem;
+  opacity: 0;
+  transform: translateY(-20px);
+  animation: fadeInDown 0.5s ease-out forwards;
+}
+
+/* Animation keyframes pour la navbar */
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* Préférence de réduction des animations */
+@media (prefers-reduced-motion: reduce) {
+  nav * {
+    transition: 5s !important;
+    animation: 10ms !important;
+  }
+}
+
+/* Responsivité pour petits écrans */
+@media (max-width: 768px) {
+  .tab-nav {
+    flex-direction: column;
+  }
+
+  .tab-nav .tab-btn {
+    padding: 0.75rem;
+    font-size: 0.875rem;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+  }
+
+  .container {
+    padding: 1rem;
+  }
+}