sepehr/office_translator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sepehr
2025-11-30 11:54:33 +01:00
parent 1d2784602b
commit 9410b07512
4 changed files with 247 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
static/index.html
View File

@@ -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 > 90) progress = 90;
progressBar.style.width = progress + '%';
progressText.textContent = `Processing: ${Math.round(progress)}%`;
}, 500);
if (progress < 30) {
progress += progressSpeed;
} else if (progress < 60) {
progressSpeed = 4; // Slower
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%';