Add Ollama vision image translation with checkbox option

static/index.html

@@ -350,7 +350,7 @@
 
                 <div class="form-group">
                     <label for="provider">Translation Service</label>
-                    <select id="provider">
+                    <select id="provider" onchange="toggleImageTranslation()">
                         <option value="google">Google Translate (Default)</option>
                         <option value="ollama">Ollama LLM</option>
                         <option value="deepl">DeepL</option>
@@ -359,6 +359,13 @@
                 </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">
@@ -385,6 +392,19 @@
     <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;
@@ -461,6 +481,7 @@
             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');
@@ -476,6 +497,7 @@
             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');
@@ -520,6 +542,7 @@
                             <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>
                     `;