.env.example

@@ -1,12 +1,7 @@
 # Translation Service Configuration
-TRANSLATION_SERVICE=google  # Options: google, deepl, libre, ollama
+TRANSLATION_SERVICE=google  # Options: google, deepl, libre
 DEEPL_API_KEY=your_deepl_api_key_here
 
-# Ollama Configuration (for LLM-based translation)
-OLLAMA_BASE_URL=http://localhost:11434
-OLLAMA_MODEL=llama3
-OLLAMA_VISION_MODEL=llava
-
 # API Configuration
 MAX_FILE_SIZE_MB=50
 UPLOAD_DIR=./uploads

LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2025 Sepehr
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

config.py

@@ -12,11 +12,6 @@ class Config:
     TRANSLATION_SERVICE = os.getenv("TRANSLATION_SERVICE", "google")
     DEEPL_API_KEY = os.getenv("DEEPL_API_KEY", "")
     
-    # Ollama Configuration
-    OLLAMA_BASE_URL = os.getenv("OLLAMA_BASE_URL", "http://localhost:11434")
-    OLLAMA_MODEL = os.getenv("OLLAMA_MODEL", "llama3")
-    OLLAMA_VISION_MODEL = os.getenv("OLLAMA_VISION_MODEL", "llava")
-    
     # File Upload Configuration
     MAX_FILE_SIZE_MB = int(os.getenv("MAX_FILE_SIZE_MB", "50"))
     MAX_FILE_SIZE_BYTES = MAX_FILE_SIZE_MB * 1024 * 1024

main.py

@@ -5,7 +5,6 @@ FastAPI application for translating complex documents while preserving formattin
 from fastapi import FastAPI, UploadFile, File, Form, HTTPException
 from fastapi.responses import FileResponse, JSONResponse
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.staticfiles import StaticFiles
 from pathlib import Path
 from typing import Optional
 import asyncio
@@ -38,11 +37,6 @@ app.add_middleware(
     allow_headers=["*"],
 )
 
-# Mount static files
-static_dir = Path(__file__).parent / "static"
-if static_dir.exists():
-    app.mount("/static", StaticFiles(directory=str(static_dir)), name="static")
-
 
 @app.get("/")
 async def root():
@@ -110,8 +104,6 @@ async def translate_document(
     file: UploadFile = File(..., description="Document file to translate (.xlsx, .docx, or .pptx)"),
     target_language: str = Form(..., description="Target language code (e.g., 'es', 'fr', 'de')"),
     source_language: str = Form(default="auto", description="Source language code (default: auto-detect)"),
-    provider: str = Form(default="google", description="Translation provider (google, ollama, deepl, libre)"),
-    translate_images: bool = Form(default=False, description="Translate images with Ollama vision (only for Ollama provider)"),
     cleanup: bool = Form(default=True, description="Delete input file after translation")
 ):
     """
@@ -153,27 +145,6 @@ async def translate_document(
         await file_handler.save_upload_file(file, input_path)
         logger.info(f"Saved input file to: {input_path}")
         
-        # Configure translation provider
-        from services.translation_service import GoogleTranslationProvider, DeepLTranslationProvider, LibreTranslationProvider, OllamaTranslationProvider, translation_service
-        
-        if provider.lower() == "deepl":
-            if not config.DEEPL_API_KEY:
-                raise HTTPException(status_code=400, detail="DeepL API key not configured")
-            translation_provider = DeepLTranslationProvider(config.DEEPL_API_KEY)
-        elif provider.lower() == "libre":
-            translation_provider = LibreTranslationProvider()
-        elif provider.lower() == "ollama":
-            vision_model = getattr(config, 'OLLAMA_VISION_MODEL', 'llava')
-            translation_provider = OllamaTranslationProvider(config.OLLAMA_BASE_URL, config.OLLAMA_MODEL, vision_model)
-        else:
-            translation_provider = GoogleTranslationProvider()
-        
-        # Update the global translation service
-        translation_service.provider = translation_provider
-        
-        # Store translate_images flag for translators to access
-        translation_service.translate_images = translate_images
-        
         # Translate based on file type
         if file_extension == ".xlsx":
             logger.info("Translating Excel file...")
@@ -331,47 +302,6 @@ async def download_file(filename: str):
     )
 
 
-@app.get("/ollama/models")
-async def list_ollama_models(base_url: Optional[str] = None):
-    """
-    List available Ollama models
-    
-    **Parameters:**
-    - **base_url**: Ollama server URL (default: from config)
-    """
-    from services.translation_service import OllamaTranslationProvider
-    
-    url = base_url or config.OLLAMA_BASE_URL
-    models = OllamaTranslationProvider.list_models(url)
-    
-    return {
-        "ollama_url": url,
-        "models": models,
-        "count": len(models)
-    }
-
-
-@app.post("/ollama/configure")
-async def configure_ollama(base_url: str = Form(...), model: str = Form(...)):
-    """
-    Configure Ollama settings
-    
-    **Parameters:**
-    - **base_url**: Ollama server URL (e.g., http://localhost:11434)
-    - **model**: Model name to use for translation (e.g., llama3, mistral)
-    """
-    config.OLLAMA_BASE_URL = base_url
-    config.OLLAMA_MODEL = model
-    
-    return {
-        "status": "success",
-        "message": "Ollama configuration updated",
-        "ollama_url": base_url,
-        "model": model
-    }
-
-
 if __name__ == "__main__":
     import uvicorn
     uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)
-

sample_files/webllm.html

@@ -1,119 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test LLM Local - WebGPU</title>
-    <style>
-        body { font-family: system-ui, sans-serif; max-width: 800px; margin: 2rem auto; padding: 0 1rem; line-height: 1.5; }
-        #chat-box { border: 1px solid #ccc; padding: 1rem; height: 400px; overflow-y: auto; border-radius: 8px; background: #f9f9f9; margin-bottom: 1rem; }
-        .message { margin-bottom: 1rem; padding: 0.5rem 1rem; border-radius: 8px; }
-        .user { background: #e3f2fd; align-self: flex-end; text-align: right; }
-        .bot { background: #fff; border: 1px solid #eee; }
-        #controls { display: flex; gap: 10px; }
-        input { flex-grow: 1; padding: 10px; border-radius: 4px; border: 1px solid #ddd; }
-        button { padding: 10px 20px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; }
-        button:disabled { background: #ccc; }
-        #status { font-size: 0.9rem; color: #666; margin-bottom: 1rem; font-style: italic; }
-    </style>
-</head>
-<body>
-
-    <h2>🤖 Mon LLM Local (via Chrome WebGPU)</h2>
-    
-    <div id="status">Initialisation... cliquez sur "Charger le modèle" pour commencer.</div>
-
-    <div id="chat-box"></div>
-
-    <div id="controls">
-        <input type="text" id="user-input" placeholder="Écrivez votre message ici..." disabled>
-        <button id="send-btn" disabled>Envoyer</button>
-    </div>
-    
-    <button id="load-btn" style="margin-top: 10px; background-color: #28a745;">Charger le Modèle (Llama 3.2)</button>
-
-    <script type="module">
-        // Importation de WebLLM directement depuis le CDN
-        import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";
-
-        // Configuration du modèle (ici Llama 3.2 1B, léger et rapide)
-        const selectedModel = "Llama-3.2-1B-Instruct-q4f16_1-MLC";
-        
-        let engine;
-        const statusLabel = document.getElementById('status');
-        const chatBox = document.getElementById('chat-box');
-        const userInput = document.getElementById('user-input');
-        const sendBtn = document.getElementById('send-btn');
-        const loadBtn = document.getElementById('load-btn');
-
-        // Fonction pour mettre à jour l'état de chargement
-        const initProgressCallback = (report) => {
-            statusLabel.innerText = report.text;
-        };
-
-        // 1. Chargement du moteur (Engine)
-        loadBtn.addEventListener('click', async () => {
-            loadBtn.disabled = true;
-            statusLabel.innerText = "Démarrage du téléchargement du modèle (peut prendre quelques minutes)...";
-            
-            try {
-                // Création du moteur WebLLM
-                engine = await CreateMLCEngine(
-                    selectedModel,
-                    { initProgressCallback: initProgressCallback }
-                );
-                
-                statusLabel.innerText = "✅ Modèle chargé et prêt ! (GPU Actif)";
-                userInput.disabled = false;
-                sendBtn.disabled = false;
-                loadBtn.style.display = 'none';
-                userInput.focus();
-            } catch (err) {
-                statusLabel.innerText = "❌ Erreur : " + err.message;
-                loadBtn.disabled = false;
-            }
-        });
-
-        // 2. Fonction d'envoi de message
-        sendBtn.addEventListener('click', sendMessage);
-        userInput.addEventListener('keypress', (e) => { if(e.key === 'Enter') sendMessage() });
-
-        async function sendMessage() {
-            const text = userInput.value.trim();
-            if (!text) return;
-
-            // Affichage message utilisateur
-            appendMessage(text, 'user');
-            userInput.value = '';
-            
-            // Création placeholder pour la réponse
-            const botMessageDiv = appendMessage("...", 'bot');
-            let fullResponse = "";
-
-            // Inférence (Génération)
-            const chunks = await engine.chat.completions.create({
-                messages: [{ role: "user", content: text }],
-                stream: true, // Important pour voir le texte s'écrire en temps réel
-            });
-
-            // Lecture du flux (Streaming)
-            for await (const chunk of chunks) {
-                const content = chunk.choices[0]?.delta?.content || "";
-                fullResponse += content;
-                botMessageDiv.innerText = fullResponse;
-                // Auto-scroll vers le bas
-                chatBox.scrollTop = chatBox.scrollHeight;
-            }
-        }
-
-        function appendMessage(text, sender) {
-            const div = document.createElement('div');
-            div.classList.add('message', sender);
-            div.innerText = text;
-            chatBox.appendChild(div);
-            chatBox.scrollTop = chatBox.scrollHeight;
-            return div;
-        }
-    </script>
-</body>
-</html>

services/translation_service.py

@@ -3,8 +3,7 @@ Translation Service Abstraction
 Provides a unified interface for different translation providers
 """
 from abc import ABC, abstractmethod
-from typing import Optional, List
+from typing import Optional
-import requests
 from deep_translator import GoogleTranslator, DeeplTranslator, LibreTranslator
 from config import config
 
@@ -59,86 +58,13 @@ class LibreTranslationProvider(TranslationProvider):
             return text
         
         try:
-            # LibreTranslator doesn't need API key for self-hosted instances
+            translator = LibreTranslator(source=source_language, target=target_language)
-            translator = LibreTranslator(source=source_language, target=target_language, custom_url="http://localhost:5000")
             return translator.translate(text)
         except Exception as e:
-            # Fail silently and return original text
+            print(f"Translation error: {e}")
             return text
 
 
-class OllamaTranslationProvider(TranslationProvider):
-    """Ollama LLM translation implementation"""
-    
-    def __init__(self, base_url: str = "http://localhost:11434", model: str = "llama3", vision_model: str = "llava"):
-        self.base_url = base_url.rstrip('/')
-        self.model = model
-        self.vision_model = vision_model
-    
-    def translate(self, text: str, target_language: str, source_language: str = 'auto') -> str:
-        if not text or not text.strip():
-            return text
-        
-        try:
-            prompt = f"Translate the following text to {target_language}. Return ONLY the translation, nothing else:\n\n{text}"
-            
-            response = requests.post(
-                f"{self.base_url}/api/generate",
-                json={
-                    "model": self.model,
-                    "prompt": prompt,
-                    "stream": False
-                },
-                timeout=30
-            )
-            response.raise_for_status()
-            result = response.json()
-            return result.get("response", text).strip()
-        except Exception as e:
-            print(f"Ollama translation error: {e}")
-            return text
-    
-    def translate_image(self, image_path: str, target_language: str) -> str:
-        """Translate text within an image using Ollama vision model"""
-        import base64
-        
-        try:
-            # Read and encode image
-            with open(image_path, 'rb') as img_file:
-                image_data = base64.b64encode(img_file.read()).decode('utf-8')
-            
-            prompt = f"Extract all text from this image and translate it to {target_language}. Return ONLY the translated text, preserving the structure and formatting."
-            
-            response = requests.post(
-                f"{self.base_url}/api/generate",
-                json={
-                    "model": self.vision_model,
-                    "prompt": prompt,
-                    "images": [image_data],
-                    "stream": False
-                },
-                timeout=60
-            )
-            response.raise_for_status()
-            result = response.json()
-            return result.get("response", "").strip()
-        except Exception as e:
-            print(f"Ollama vision translation error: {e}")
-            return ""
-    
-    @staticmethod
-    def list_models(base_url: str = "http://localhost:11434") -> List[str]:
-        """List available Ollama models"""
-        try:
-            response = requests.get(f"{base_url.rstrip('/')}/api/tags", timeout=5)
-            response.raise_for_status()
-            models = response.json().get("models", [])
-            return [model["name"] for model in models]
-        except Exception as e:
-            print(f"Error listing Ollama models: {e}")
-            return []
-
-
 class TranslationService:
     """Main translation service that delegates to the configured provider"""
     
@@ -151,8 +77,15 @@ class TranslationService:
     
     def _get_default_provider(self) -> TranslationProvider:
         """Get the default translation provider from configuration"""
-        # Always use Google Translate by default to avoid API key issues
+        service_type = config.TRANSLATION_SERVICE.lower()
-        # Provider will be overridden per request in the API endpoint
+        
+        if service_type == "deepl":
+            if not config.DEEPL_API_KEY:
+                raise ValueError("DeepL API key not configured")
+            return DeepLTranslationProvider(config.DEEPL_API_KEY)
+        elif service_type == "libre":
+            return LibreTranslationProvider()
+        else:  # Default to Google
             return GoogleTranslationProvider()
     
     def translate_text(self, text: str, target_language: str, source_language: str = 'auto') -> str:

static/index.html

@@ -1,599 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document Translation API - Interface de Test</title>
-    <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: #f5f7fa;
-            min-height: 100vh;
-            color: #2c3e50;
-            line-height: 1.6;
-        }
-
-        .container {
-            max-width: 1400px;
-            margin: 0 auto;
-            padding: 40px 20px;
-        }
-
-        .header {
-            background: white;
-            padding: 30px 40px;
-            margin-bottom: 30px;
-            border-bottom: 1px solid #e1e8ed;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
-        }
-
-        .header h1 {
-            font-size: 28px;
-            font-weight: 600;
-            color: #1a202c;
-            margin-bottom: 8px;
-        }
-
-        .header p {
-            font-size: 15px;
-            color: #718096;
-        }
-
-        .card {
-            background: white;
-            border-radius: 8px;
-            padding: 32px;
-            margin-bottom: 24px;
-            border: 1px solid #e1e8ed;
-            box-shadow: 0 1px 3px rgba(0,0,0,0.04);
-        }
-
-        .card h2 {
-            color: #1a202c;
-            margin-bottom: 24px;
-            font-size: 20px;
-            font-weight: 600;
-            border-bottom: 1px solid #e1e8ed;
-            padding-bottom: 12px;
-        }
-
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 8px;
-            color: #4a5568;
-            font-weight: 500;
-            font-size: 14px;
-        }
-
-        input[type="text"],
-        input[type="file"],
-        select {
-            width: 100%;
-            padding: 10px 14px;
-            border: 1px solid #cbd5e0;
-            border-radius: 6px;
-            font-size: 14px;
-            transition: all 0.2s;
-            background: #ffffff;
-        }
-
-        input[type="text"]:focus,
-        select:focus {
-            outline: none;
-            border-color: #4299e1;
-            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.1);
-        }
-
-        input[type="file"] {
-            padding: 8px;
-            cursor: pointer;
-        }
-
-        button {
-            background: #2563eb;
-            color: white;
-            padding: 10px 24px;
-            border: none;
-            border-radius: 6px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s;
-            margin-right: 10px;
-            margin-bottom: 10px;
-        }
-
-        button:hover {
-            background: #1e40af;
-        }
-
-        button:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .btn-secondary {
-            background: #64748b;
-        }
-
-        .btn-secondary:hover {
-            background: #475569;
-        }
-
-        .btn-success {
-            background: #059669;
-        }
-
-        .btn-success:hover {
-            background: #047857;
-        }
-
-        .grid-2 {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-        }
-
-        .result {
-            margin-top: 20px;
-            padding: 16px;
-            border-radius: 6px;
-            border-left: 4px solid #cbd5e0;
-            background: #f7fafc;
-        }
-
-        .result.success {
-            background: #f0fdf4;
-            border-left-color: #10b981;
-        }
-
-        .result.error {
-            background: #fef2f2;
-            border-left-color: #ef4444;
-        }
-
-        .result h3 {
-            margin-bottom: 12px;
-            color: #1a202c;
-            font-size: 16px;
-            font-weight: 600;
-        }
-
-        .result pre {
-            background: white;
-            padding: 12px;
-            border-radius: 4px;
-            overflow-x: auto;
-            font-size: 13px;
-            border: 1px solid #e1e8ed;
-            color: #2d3748;
-        }
-
-        .loading {
-            display: none;
-            text-align: center;
-            padding: 24px;
-        }
-
-        .loading.active {
-            display: block;
-        }
-
-        .spinner {
-            border: 3px solid #e1e8ed;
-            border-top: 3px solid #2563eb;
-            border-radius: 50%;
-            width: 36px;
-            height: 36px;
-            animation: spin 0.8s linear infinite;
-            margin: 0 auto 12px;
-        }
-
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-
-        .progress-container {
-            width: 100%;
-            background: #e1e8ed;
-            border-radius: 8px;
-            height: 8px;
-            overflow: hidden;
-            margin: 16px 0;
-            display: none;
-        }
-
-        .progress-container.active {
-            display: block;
-        }
-
-        .progress-bar {
-            height: 100%;
-            background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
-            width: 0%;
-            transition: width 0.3s ease;
-            border-radius: 8px;
-        }
-
-        .progress-text {
-            text-align: center;
-            margin-top: 8px;
-            color: #4a5568;
-            font-size: 14px;
-            font-weight: 500;
-        }
-
-        .badge {
-            display: inline-block;
-            padding: 4px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            font-weight: 500;
-            margin-right: 8px;
-            background: #e0e7ff;
-            color: #3730a3;
-        }
-
-        .models-list {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 8px;
-            margin-top: 12px;
-        }
-
-        .model-item {
-            background: #f1f5f9;
-            padding: 6px 12px;
-            border-radius: 4px;
-            font-size: 13px;
-            border: 1px solid #e1e8ed;
-            color: #475569;
-        }
-
-        .download-link {
-            display: inline-block;
-            margin-top: 12px;
-            padding: 10px 20px;
-            background: #059669;
-            color: white;
-            text-decoration: none;
-            border-radius: 6px;
-            font-weight: 500;
-            font-size: 14px;
-        }
-
-        .download-link:hover {
-            background: #047857;
-        }
-
-        @media (max-width: 768px) {
-            .grid-2 {
-                grid-template-columns: 1fr;
-            }
-            
-            .container {
-                padding: 20px 15px;
-            }
-
-            .card {
-                padding: 20px;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="header">
-            <h1>Document Translation API</h1>
-            <p>Professional document translation service with format preservation</p>
-        </div>
-
-        <!-- Configuration Ollama -->
-        <div class="card">
-            <h2>Ollama Configuration</h2>
-            <div class="grid-2">
-                <div class="form-group">
-                    <label for="ollama-url">URL Ollama</label>
-                    <input type="text" id="ollama-url" value="http://localhost:11434" placeholder="http://localhost:11434">
-                </div>
-                <div class="form-group">
-                    <label for="ollama-model">Modèle Ollama</label>
-                    <input type="text" id="ollama-model" value="llama3" placeholder="llama3, mistral, etc.">
-                </div>
-            </div>
-            <button onclick="listOllamaModels()" class="btn-secondary">List Available Models</button>
-            <button onclick="configureOllama()" class="btn-success">Save Configuration</button>
-            
-            <div id="models-result"></div>
-        </div>
-
-        <!-- Traduction de fichier -->
-        <div class="card">
-            <h2>Document Translation</h2>
-            <div class="form-group">
-                <label for="file-input">
-                    Select file to translate
-                    <span class="badge">XLSX</span>
-                    <span class="badge">DOCX</span>
-                    <span class="badge">PPTX</span>
-                </label>
-                <input type="file" id="file-input" accept=".xlsx,.docx,.pptx">
-            </div>
-
-            <div class="grid-2">
-                <div class="form-group">
-                    <label for="target-lang">Target Language</label>
-                    <select id="target-lang">
-                        <option value="es">Espagnol (es)</option>
-                        <option value="fr">Français (fr)</option>
-                        <option value="de">Allemand (de)</option>
-                        <option value="it">Italien (it)</option>
-                        <option value="pt">Portugais (pt)</option>
-                        <option value="ru">Russe (ru)</option>
-                        <option value="zh">Chinois (zh)</option>
-                        <option value="ja">Japonais (ja)</option>
-                        <option value="ko">Coréen (ko)</option>
-                        <option value="ar">Arabe (ar)</option>
-                    </select>
-                </div>
-
-                <div class="form-group">
-                    <label for="provider">Translation Service</label>
-                    <select id="provider" onchange="toggleImageTranslation()">
-                        <option value="google">Google Translate (Default)</option>
-                        <option value="ollama">Ollama LLM</option>
-                        <option value="deepl">DeepL</option>
-                        <option value="libre">LibreTranslate</option>
-                    </select>
-                </div>
-            </div>
-
-            <div class="form-group" id="image-translation-option" style="display: none;">
-                <label style="display: flex; align-items: center; cursor: pointer;">
-                    <input type="checkbox" id="translate-images" style="width: auto; margin-right: 10px;">
-                    <span>Translate images with Ollama Vision (requires llava model)</span>
-                </label>
-            </div>
-
-            <button onclick="translateFile()">Translate Document</button>
-
-            <div id="loading" class="loading">
-                <div class="spinner"></div>
-                <p>Translation in progress, please wait...</p>
-            </div>
-
-            <div class="progress-container" id="progress-container">
-                <div class="progress-bar" id="progress-bar"></div>
-            </div>
-            <div class="progress-text" id="progress-text"></div>
-
-            <div id="translate-result"></div>
-        </div>
-
-        <!-- Test de l'API -->
-        <div class="card">
-            <h2>API Health Check</h2>
-            <button onclick="checkHealth()">Check API Status</button>
-            <div id="health-result"></div>
-        </div>
-    </div>
-
-    <script>
-        const API_BASE = 'http://localhost:8000';
-
-        // Toggle image translation option based on provider
-        function toggleImageTranslation() {
-            const provider = document.getElementById('provider').value;
-            const imageOption = document.getElementById('image-translation-option');
-            
-            if (provider === 'ollama') {
-                imageOption.style.display = 'block';
-            } else {
-                imageOption.style.display = 'none';
-                document.getElementById('translate-images').checked = false;
-            }
-        }
-
-        // Liste des modèles Ollama
-        async function listOllamaModels() {
-            const url = document.getElementById('ollama-url').value;
-            const resultDiv = document.getElementById('models-result');
-            
-            try {
-                const response = await fetch(`${API_BASE}/ollama/models?base_url=${encodeURIComponent(url)}`);
-                const data = await response.json();
-                
-                if (data.models && data.models.length > 0) {
-                    resultDiv.innerHTML = `
-                        <div class="result success">
-                            <h3>${data.count} model(s) available</h3>
-                            <div class="models-list">
-                                ${data.models.map(model => `<span class="model-item">${model}</span>`).join('')}
-                            </div>
-                        </div>
-                    `;
-                } else {
-                    resultDiv.innerHTML = `
-                        <div class="result error">
-                            <h3>No models found</h3>
-                            <p>Make sure Ollama is running and accessible at ${url}</p>
-                        </div>
-                    `;
-                }
-            } catch (error) {
-                resultDiv.innerHTML = `
-                    <div class="result error">
-                        <h3>Connection error</h3>
-                        <pre>${error.message}</pre>
-                    </div>
-                `;
-            }
-        }
-
-        // Configurer Ollama
-        async function configureOllama() {
-            const url = document.getElementById('ollama-url').value;
-            const model = document.getElementById('ollama-model').value;
-            const resultDiv = document.getElementById('models-result');
-            
-            try {
-                const formData = new FormData();
-                formData.append('base_url', url);
-                formData.append('model', model);
-                
-                const response = await fetch(`${API_BASE}/ollama/configure`, {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                const data = await response.json();
-                
-                resultDiv.innerHTML = `
-                    <div class="result success">
-                        <h3>Configuration saved</h3>
-                        <p><strong>URL:</strong> ${data.ollama_url}</p>
-                        <p><strong>Model:</strong> ${data.model}</p>
-                    </div>
-                `;
-            } catch (error) {
-                resultDiv.innerHTML = `
-                    <div class="result error">
-                        <h3>Error</h3>
-                        <pre>${error.message}</pre>
-                    </div>
-                `;
-            }
-        }
-
-        // Traduire un fichier
-        async function translateFile() {
-            const fileInput = document.getElementById('file-input');
-            const targetLang = document.getElementById('target-lang').value;
-            const provider = document.getElementById('provider').value;
-            const translateImages = document.getElementById('translate-images').checked;
-            const resultDiv = document.getElementById('translate-result');
-            const loadingDiv = document.getElementById('loading');
-            const progressContainer = document.getElementById('progress-container');
-            const progressBar = document.getElementById('progress-bar');
-            const progressText = document.getElementById('progress-text');
-            
-            if (!fileInput.files || fileInput.files.length === 0) {
-                alert('Please select a file');
-                return;
-            }
-            
-            const formData = new FormData();
-            formData.append('file', fileInput.files[0]);
-            formData.append('target_language', targetLang);
-            formData.append('provider', provider);
-            formData.append('translate_images', translateImages);
-            
-            loadingDiv.classList.add('active');
-            progressContainer.classList.add('active');
-            resultDiv.innerHTML = '';
-            
-            // Simulate progress (since we don't have real progress from backend)
-            let progress = 0;
-            const progressInterval = setInterval(() => {
-                progress += Math.random() * 15;
-                if (progress > 90) progress = 90;
-                progressBar.style.width = progress + '%';
-                progressText.textContent = `Processing: ${Math.round(progress)}%`;
-            }, 500);
-            
-            try {
-                const response = await fetch(`${API_BASE}/translate`, {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                clearInterval(progressInterval);
-                progressBar.style.width = '100%';
-                progressText.textContent = 'Complete: 100%';
-                
-                setTimeout(() => {
-                    loadingDiv.classList.remove('active');
-                    progressContainer.classList.remove('active');
-                    progressBar.style.width = '0%';
-                    progressText.textContent = '';
-                }, 500);
-                
-                if (response.ok) {
-                    const blob = await response.blob();
-                    const filename = response.headers.get('content-disposition')?.split('filename=')[1]?.replace(/"/g, '') || 'translated_file';
-                    
-                    // Créer un lien de téléchargement
-                    const url = window.URL.createObjectURL(blob);
-                    
-                    resultDiv.innerHTML = `
-                        <div class="result success">
-                            <h3>Translation completed successfully</h3>
-                            <p><strong>File:</strong> ${fileInput.files[0].name}</p>
-                            <p><strong>Target language:</strong> ${targetLang}</p>
-                            <p><strong>Service:</strong> ${provider}</p>
-                            ${translateImages ? '<p><strong>Images:</strong> Translated with Ollama Vision</p>' : ''}
-                            <a href="${url}" download="${filename}" class="download-link">Download translated file</a>
-                        </div>
-                    `;
-                } else {
-                    const error = await response.json();
-                    resultDiv.innerHTML = `
-                        <div class="result error">
-                            <h3>Translation error</h3>
-                            <pre>${JSON.stringify(error, null, 2)}</pre>
-                        </div>
-                    `;
-                }
-            } catch (error) {
-                clearInterval(progressInterval);
-                loadingDiv.classList.remove('active');
-                progressContainer.classList.remove('active');
-                progressBar.style.width = '0%';
-                progressText.textContent = '';
-                
-                resultDiv.innerHTML = `
-                    <div class="result error">
-                        <h3>Error</h3>
-                        <pre>${error.message}</pre>
-                    </div>
-                `;
-            }
-        }
-
-        // Vérifier la santé de l'API
-        async function checkHealth() {
-            const resultDiv = document.getElementById('health-result');
-            
-            try {
-                const response = await fetch(`${API_BASE}/health`);
-                const data = await response.json();
-                
-                resultDiv.innerHTML = `
-                    <div class="result success">
-                        <h3>API operational</h3>
-                        <pre>${JSON.stringify(data, null, 2)}</pre>
-                    </div>
-                `;
-            } catch (error) {
-                resultDiv.innerHTML = `
-                    <div class="result error">
-                        <h3>API not accessible</h3>
-                        <pre>${error.message}</pre>
-                    </div>
-                `;
-            }
-        }
-    </script>
-</body>
-</html>