Add WebLLM support, fix progress bar blocking at 90%, add timeout protection

main.py

@@ -154,7 +154,7 @@ async def translate_document(
         logger.info(f"Saved input file to: {input_path}")
         
         # Configure translation provider
-        from services.translation_service import GoogleTranslationProvider, DeepLTranslationProvider, LibreTranslationProvider, OllamaTranslationProvider, translation_service
+        from services.translation_service import GoogleTranslationProvider, DeepLTranslationProvider, LibreTranslationProvider, OllamaTranslationProvider, WebLLMTranslationProvider, translation_service
         
         if provider.lower() == "deepl":
             if not config.DEEPL_API_KEY:
@@ -165,6 +165,8 @@ async def translate_document(
         elif provider.lower() == "ollama":
             vision_model = getattr(config, 'OLLAMA_VISION_MODEL', 'llava')
             translation_provider = OllamaTranslationProvider(config.OLLAMA_BASE_URL, config.OLLAMA_MODEL, vision_model)
+        elif provider.lower() == "webllm":
+            translation_provider = WebLLMTranslationProvider()
         else:
             translation_provider = GoogleTranslationProvider()
         

services/translation_service.py

@@ -139,6 +139,16 @@ class OllamaTranslationProvider(TranslationProvider):
             return []
 
 
+class WebLLMTranslationProvider(TranslationProvider):
+    """WebLLM browser-based translation (client-side processing)"""
+    
+    def translate(self, text: str, target_language: str, source_language: str = 'auto') -> str:
+        # WebLLM translation happens client-side in the browser
+        # This is just a placeholder - actual translation is done by JavaScript
+        # For server-side, we'll just pass through for now
+        return text
+
+
 class TranslationService:
     """Main translation service that delegates to the configured provider"""
     

static/index.html

@@ -352,7 +352,8 @@
                     <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="ollama">Ollama LLM (Local Server)</option>
+                        <option value="webllm">WebLLM (Browser - No Server)</option>
                         <option value="deepl">DeepL</option>
                         <option value="libre">LibreTranslate</option>
                     </select>
@@ -366,6 +367,12 @@
                 </label>
             </div>
 
+            <div class="form-group" id="webllm-info" style="display: none; padding: 12px; background: #e0f2ff; border-radius: 6px; border-left: 4px solid #2563eb;">
+                <p style="margin: 0; font-size: 13px; color: #1e40af;">
+                    <strong>WebLLM Mode:</strong> First use will download the model (~2GB) to your browser. Translation runs entirely in your browser using WebGPU.
+                </p>
+            </div>
+
             <button onclick="translateFile()">Translate Document</button>
 
             <div id="loading" class="loading">
@@ -396,11 +403,18 @@
         function toggleImageTranslation() {
             const provider = document.getElementById('provider').value;
             const imageOption = document.getElementById('image-translation-option');
+            const webllmInfo = document.getElementById('webllm-info');
             
             if (provider === 'ollama') {
                 imageOption.style.display = 'block';
+                webllmInfo.style.display = 'none';
+            } else if (provider === 'webllm') {
+                imageOption.style.display = 'none';
+                webllmInfo.style.display = 'block';
+                document.getElementById('translate-images').checked = false;
             } else {
                 imageOption.style.display = 'none';
+                webllmInfo.style.display = 'none';
                 document.getElementById('translate-images').checked = false;
             }
         }
@@ -503,14 +517,48 @@
             progressContainer.classList.add('active');
             resultDiv.innerHTML = '';
             
-            // Simulate progress (since we don't have real progress from backend)
+            // Better progress simulation with timeout protection
             let progress = 0;
+            let progressSpeed = 8; // Start at 8% increments
             const progressInterval = setInterval(() => {
-                progress += Math.random() * 15;
+                if (progress < 30) {
-                if (progress > 90) progress = 90;
+                    progress += progressSpeed;
-                progressBar.style.width = progress + '%';
+                } else if (progress < 60) {
-                progressText.textContent = `Processing: ${Math.round(progress)}%`;
+                    progressSpeed = 4; // Slower
-            }, 500);
+                    progress += progressSpeed;
+                } else if (progress < 85) {
+                    progressSpeed = 2; // Even slower
+                    progress += progressSpeed;
+                } else if (progress < 95) {
+                    progressSpeed = 0.5; // Very slow near the end
+                    progress += progressSpeed;
+                }
+                
+                progressBar.style.width = Math.min(progress, 98) + '%';
+                progressText.textContent = `Processing: ${Math.round(Math.min(progress, 98))}%`;
+            }, 800);
+            
+            // Safety timeout: if takes more than 5 minutes, show error
+            const safetyTimeout = setTimeout(() => {
+                clearInterval(progressInterval);
+                loadingDiv.classList.remove('active');
+                progressContainer.classList.remove('active');
+                progressBar.style.width = '0%';
+                progressText.textContent = '';
+                
+                resultDiv.innerHTML = `
+                    <div class="result error">
+                        <h3>Request timeout</h3>
+                        <p>Translation is taking longer than expected. This might be due to:</p>
+                        <ul>
+                            <li>Large file size</li>
+                            <li>Ollama model not responding (check if Ollama is running)</li>
+                            <li>Network issues with translation service</li>
+                        </ul>
+                        <p>Please try again or use a different provider.</p>
+                    </div>
+                `;
+            }, 300000); // 5 minutes
             
             try {
                 const response = await fetch(`${API_BASE}/translate`, {
@@ -519,6 +567,7 @@
                 });
                 
                 clearInterval(progressInterval);
+                clearTimeout(safetyTimeout);
                 progressBar.style.width = '100%';
                 progressText.textContent = 'Complete: 100%';
                 
@@ -557,6 +606,7 @@
                 }
             } catch (error) {
                 clearInterval(progressInterval);
+                clearTimeout(safetyTimeout);
                 loadingDiv.classList.remove('active');
                 progressContainer.classList.remove('active');
                 progressBar.style.width = '0%';

static/webllm.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebLLM Translation Demo</title>
+    <script type="module">
+        import { CreateMLCEngine } from "https://esm.run/@mlc-ai/web-llm";
+
+        let engine = null;
+        const statusDiv = document.getElementById('status');
+        const outputDiv = document.getElementById('output');
+
+        async function initEngine() {
+            statusDiv.textContent = "Initializing WebLLM engine (first time: ~2GB download)...";
+            
+            try {
+                engine = await CreateMLCEngine("Llama-3.1-8B-Instruct-q4f32_1-MLC", {
+                    initProgressCallback: (progress) => {
+                        statusDiv.textContent = `Loading: ${progress.text}`;
+                    }
+                });
+                
+                statusDiv.textContent = "✅ WebLLM engine ready!";
+                document.getElementById('translate-btn').disabled = false;
+            } catch (error) {
+                statusDiv.textContent = `❌ Error: ${error.message}`;
+            }
+        }
+
+        async function translateText() {
+            const inputText = document.getElementById('input-text').value;
+            const targetLang = document.getElementById('target-lang').value;
+            
+            if (!inputText) {
+                alert('Please enter text to translate');
+                return;
+            }
+            
+            if (!engine) {
+                alert('Engine not ready. Please wait for initialization.');
+                return;
+            }
+            
+            statusDiv.textContent = "Translating...";
+            outputDiv.textContent = "";
+            
+            const prompt = `Translate the following text to ${targetLang}. Return ONLY the translation:\n\n${inputText}`;
+            
+            try {
+                const reply = await engine.chat.completions.create({
+                    messages: [{ role: "user", content: prompt }],
+                    temperature: 0.3,
+                    max_tokens: 1000,
+                });
+                
+                const translation = reply.choices[0].message.content;
+                outputDiv.textContent = translation;
+                statusDiv.textContent = "✅ Translation complete!";
+            } catch (error) {
+                statusDiv.textContent = `❌ Translation error: ${error.message}`;
+            }
+        }
+
+        // Auto-init on page load
+        window.addEventListener('DOMContentLoaded', initEngine);
+        window.translateText = translateText;
+    </script>
+    <style>
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            max-width: 800px;
+            margin: 50px auto;
+            padding: 20px;
+            background: #f5f7fa;
+        }
+        .container {
+            background: white;
+            padding: 30px;
+            border-radius: 8px;
+            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #1a202c;
+            margin-bottom: 10px;
+        }
+        .info {
+            background: #e0f2ff;
+            padding: 12px;
+            border-radius: 6px;
+            margin-bottom: 20px;
+            font-size: 14px;
+            color: #1e40af;
+        }
+        textarea {
+            width: 100%;
+            padding: 12px;
+            border: 1px solid #cbd5e0;
+            border-radius: 6px;
+            font-size: 14px;
+            min-height: 150px;
+            margin-bottom: 15px;
+        }
+        select {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #cbd5e0;
+            border-radius: 6px;
+            font-size: 14px;
+            margin-bottom: 15px;
+        }
+        button {
+            background: #2563eb;
+            color: white;
+            padding: 10px 24px;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            width: 100%;
+        }
+        button:hover:not(:disabled) {
+            background: #1e40af;
+        }
+        button:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        #status {
+            margin-top: 15px;
+            padding: 12px;
+            background: #f7fafc;
+            border-radius: 6px;
+            font-size: 14px;
+            min-height: 20px;
+        }
+        #output {
+            margin-top: 15px;
+            padding: 15px;
+            background: #f0fdf4;
+            border: 1px solid #10b981;
+            border-radius: 6px;
+            white-space: pre-wrap;
+            min-height: 100px;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>WebLLM Translation Demo</h1>
+        <div class="info">
+            <strong>Info:</strong> This demo runs entirely in your browser using WebGPU. First load will download ~2GB model.
+        </div>
+        
+        <label for="input-text">Text to translate:</label>
+        <textarea id="input-text" placeholder="Enter text here...">Hello, how are you today?</textarea>
+        
+        <label for="target-lang">Target language:</label>
+        <select id="target-lang">
+            <option value="Spanish">Spanish</option>
+            <option value="French">French</option>
+            <option value="German">German</option>
+            <option value="Italian">Italian</option>
+            <option value="Portuguese">Portuguese</option>
+            <option value="Chinese">Chinese</option>
+            <option value="Japanese">Japanese</option>
+            <option value="Korean">Korean</option>
+            <option value="Arabic">Arabic</option>
+        </select>
+        
+        <button id="translate-btn" onclick="translateText()" disabled>Translate</button>
+        
+        <div id="status">Initializing...</div>
+        <div id="output"></div>
+    </div>
+</body>
+</html>