From 9a7f8d61d475e9b8471daf403ad705994c9440bc Mon Sep 17 00:00:00 2001
From: xunbu <xunbu3@qq.com>
Date: Mon, 14 Jul 2025 18:09:00 +0800
Subject: [PATCH] =?UTF-8?q?=E5=89=8D=E7=AB=AF=E5=8C=BA=E5=88=86=E4=BB=BB?=
 =?UTF-8?q?=E5=8A=A1=E6=98=AF=E5=90=A6=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docutranslate/static/index.html | 1405 +++++++++++++++----------------
 1 file changed, 696 insertions(+), 709 deletions(-)

diff --git a/docutranslate/static/index.html b/docutranslate/static/index.html
index e1df98f..9e43e13 100644
--- a/docutranslate/static/index.html
+++ b/docutranslate/static/index.html
@@ -481,757 +481,744 @@
 <!-- Bootstrap JS -->
 <script src="/static/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
 
-<script type="module">
+    <script type="module">
 
-    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
-    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
-    // --- DOM Elements ---
-    const settingsForm = document.getElementById('translateForm');
-    const platformSelect = document.getElementById('platform_select');
-    const apiHref = document.getElementById('api_href');
-    const baseUrlGroup = document.getElementById('baseUrlGroup');
-    const baseUrlInput = document.getElementById('base_url');
-    const apikeyInput = document.getElementById('apikey');
-    const modelInput = document.getElementById('model_id');
-    const toLangSelect = document.getElementById('to_lang');
-    const formulaCheckbox = document.getElementById('formula_ocr');
-    const codeCheckbox = document.getElementById('code_ocr');
-    const refineCheckbox = document.getElementById('refine_markdown');
-    const convertEnginSelect = document.getElementById('convert_engin');
-    const mineruTokenGroup = document.getElementById('mineruTokenGroup');
-    const mineruTokenInput = document.getElementById('mineru_token');
-    const customPromptTranslateArea = document.getElementById("custom_prompt_translate");
+        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
+        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
+        // --- DOM Elements ---
+        const settingsForm = document.getElementById('translateForm');
+        const platformSelect = document.getElementById('platform_select');
+        const apiHref = document.getElementById('api_href');
+        const baseUrlGroup = document.getElementById('baseUrlGroup');
+        const baseUrlInput = document.getElementById('base_url');
+        const apikeyInput = document.getElementById('apikey');
+        const modelInput = document.getElementById('model_id');
+        const toLangSelect = document.getElementById('to_lang');
+        const formulaCheckbox = document.getElementById('formula_ocr');
+        const codeCheckbox = document.getElementById('code_ocr');
+        const refineCheckbox = document.getElementById('refine_markdown');
+        const convertEnginSelect = document.getElementById('convert_engin');
+        const mineruTokenGroup = document.getElementById('mineruTokenGroup');
+        const mineruTokenInput = document.getElementById('mineru_token');
+        const customPromptTranslateArea = document.getElementById("custom_prompt_translate");
 
-    const chunkSizeSlider = document.getElementById('chunk-size-slider');
-    const chunkSizeDisplay = document.getElementById('chunk-size-display');
-    const chunkSizeReset = document.getElementById('chunk-size-reset');
-    const concurrentSlider = document.getElementById('concurrent-slider');
-    const concurrentDisplay = document.getElementById('concurrent-display');
-    const concurrentReset = document.getElementById("concurrent-reset");
-    const temperatureSlider = document.getElementById('temperature-slider');
-    const temperatureDisplay = document.getElementById('temperature-display');
-    const temperatureReset = document.getElementById("temperature-reset");
+        const chunkSizeSlider = document.getElementById('chunk-size-slider');
+        const chunkSizeDisplay = document.getElementById('chunk-size-display');
+        const chunkSizeReset = document.getElementById('chunk-size-reset');
+        const concurrentSlider = document.getElementById('concurrent-slider');
+        const concurrentDisplay = document.getElementById('concurrent-display');
+        const concurrentReset = document.getElementById("concurrent-reset");
+        const temperatureSlider = document.getElementById('temperature-slider');
+        const temperatureDisplay = document.getElementById('temperature-display');
+        const temperatureReset = document.getElementById("temperature-reset");
 
-    const versionDisplay = document.getElementById("versionDisplay");
-    const addNewTaskBtn = document.getElementById('addNewTaskBtn');
-    const taskContainer = document.getElementById('task-container');
-    const noTaskPlaceholder = document.getElementById('no-task-placeholder');
-    const taskCardTemplate = document.getElementById('taskCardTemplate');
+        const versionDisplay = document.getElementById("versionDisplay");
+        const addNewTaskBtn = document.getElementById('addNewTaskBtn');
+        const taskContainer = document.getElementById('task-container');
+        const noTaskPlaceholder = document.getElementById('no-task-placeholder');
+        const taskCardTemplate = document.getElementById('taskCardTemplate');
 
-    // Modal and preview elements
-    const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
-    const previewModalTitle = document.getElementById('previewModalTitle');
-    const originalPreviewPane = document.getElementById('originalPreviewPane');
-    const translatedPreviewFrame = document.getElementById('translatedPreviewFrame');
-    const originalPreviewContainer = document.getElementById('originalPreviewContainer');
-    const translatedPreviewContainer = document.getElementById('translatedPreviewContainer');
-    const setBilingualViewBtn = document.getElementById('setBilingualViewBtn');
-    const setTranslatedOnlyViewBtn = document.getElementById('setTranslatedOnlyViewBtn');
-    const printFromPreview = document.getElementById('printFromPreview');
-    const printFrameEl = document.getElementById('printFrame');
+        // Modal and preview elements
+        const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
+        const previewModalTitle = document.getElementById('previewModalTitle');
+        const originalPreviewPane = document.getElementById('originalPreviewPane');
+        const translatedPreviewFrame = document.getElementById('translatedPreviewFrame');
+        const originalPreviewContainer = document.getElementById('originalPreviewContainer');
+        const translatedPreviewContainer = document.getElementById('translatedPreviewContainer');
+        const setBilingualViewBtn = document.getElementById('setBilingualViewBtn');
+        const setTranslatedOnlyViewBtn = document.getElementById('setTranslatedOnlyViewBtn');
+        const printFromPreview = document.getElementById('printFromPreview');
+        const printFrameEl = document.getElementById('printFrame');
 
-    // --- Global State ---
-    let defaultParams = {};
-    const tasks = {}; // { taskId: { elements: {...}, state: {...}, intervals: {...} } }
-    let isAdminMode = false; // Flag for admin view
+        // --- Global State ---
+        let defaultParams = {};
+        const tasks = {}; // { taskId: { elements: {...}, state: {...}, intervals: {...} } }
+        let isAdminMode = false; // Flag for admin view
 
-    const apiHrefMap = {
-        "https://openrouter.ai/api/v1": "https://openrouter.ai/settings/keys",
-        "https://api.openai.com/v1": "https://platform.openai.com/api-keys",
-        "https://api.deepseek.com/v1": "https://platform.deepseek.com/api_keys",
-        "https://open.bigmodel.cn/api/paas/v4": "https://open.bigmodel.cn/usercenter/apikeys",
-        "https://dashscope.aliyuncs.com/compatible-mode/v1": "https://bailian.console.aliyun.com/?tab=model#/api-key",
-        "https://ark.cn-beijing.volces.com/api/v3": "https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey?apikey=%7B%7D",
-        "https://api.siliconflow.cn/v1": "https://cloud.siliconflow.cn/account/ak",
-        "https://www.dmxapi.cn/v1": "https://www.dmxapi.cn/token"
-    };
-
-    // --- Utility Functions ---
-    const generateTaskId = () => Math.random().toString(36).substring(2, 10);
-    const saveToStorage = (key, value) => {
-        try {
-            localStorage.setItem(key, value);
-        } catch (e) {
-            console.warn("Save to storage failed:", e);
-        }
-    };
-    const getFromStorage = (key, defaultValue = '') => {
-        try {
-            return localStorage.getItem(key) || defaultValue;
-        } catch (e) {
-            console.warn("Read from storage failed:", e);
-            return defaultValue;
-        }
-    };
-
-    function fileToBase64(file) {
-        return new Promise((resolve, reject) => {
-            const reader = new FileReader();
-            reader.readAsDataURL(file);
-            reader.onload = () => {
-                // Result is "data:...,base64,XYZ...", we only want "XYZ..."
-                const base64String = reader.result.split(',')[1];
-                resolve(base64String);
-            };
-            reader.onerror = error => reject(error);
-        });
-    }
-
-    // --- UI Update Functions ---
-    function updatePlatformUI() {
-        const selectedPlatformValue = platformSelect.value;
-        apikeyInput.value = getFromStorage(`translator_platform_${selectedPlatformValue}_apikey`);
-        modelInput.value = getFromStorage(`translator_platform_${selectedPlatformValue}_model_id`);
-        if (selectedPlatformValue === 'custom') {
-            baseUrlGroup.classList.remove('d-none');
-            baseUrlInput.required = true;
-            baseUrlInput.value = getFromStorage('translator_platform_custom_base_url');
-            apiHref.classList.add('d-none');
-        } else {
-            baseUrlGroup.classList.add('d-none');
-            baseUrlInput.required = false;
-            baseUrlInput.value = selectedPlatformValue;
-            if (apiHrefMap[baseUrlInput.value]) {
-                apiHref.href = apiHrefMap[baseUrlInput.value];
-                apiHref.classList.remove('d-none');
-            } else {
-                apiHref.classList.add('d-none');
-            }
-        }
-        saveToStorage('translator_last_platform', selectedPlatformValue);
-    }
-
-    function updateConvertEnginUI() {
-        const selectedEngin = convertEnginSelect.value;
-        mineruTokenGroup.style.display = selectedEngin === 'mineru' ? 'block' : 'none';
-        mineruTokenInput.required = selectedEngin === 'mineru';
-        if (selectedEngin === 'mineru') {
-            mineruTokenInput.value = getFromStorage('translator_mineru_token');
-        }
-        saveToStorage('translator_convert_engin', selectedEngin);
-    }
-
-    function createSliderUpdater(slider, display, resetBtn, key, params) {
-        return () => {
-            const value = slider.value;
-            display.textContent = value;
-            resetBtn.style.visibility = value !== String(params[key]) ? 'visible' : 'hidden';
-            saveToStorage(key, value);
-        };
-    }
-
-    function setupSlider(slider, display, resetBtn, key, params) {
-        slider.value = getFromStorage(key, params[key]);
-        const updater = createSliderUpdater(slider, display, resetBtn, key, params);
-        slider.addEventListener('input', updater);
-        resetBtn.addEventListener('click', () => {
-            slider.value = params[key];
-            updater();
-        });
-        updater(); // Initial call
-    }
-
-    function updateTaskPlaceholderVisibility() {
-        noTaskPlaceholder.style.display = Object.keys(tasks).length === 0 ? 'block' : 'none';
-    }
-
-    function saveTaskIds() {
-        if (isAdminMode) return; // In admin mode, do not save task list to localStorage
-        const taskIds = Object.keys(tasks);
-        saveToStorage('active_task_ids', JSON.stringify(taskIds));
-    }
-
-    // --- Task Card Management ---
-    function createTaskCard(taskId = null, restoreState = false) {
-        if (!taskId) {
-            taskId = generateTaskId();
-        }
-
-        const cardFragment = taskCardTemplate.content.cloneNode(true);
-        const cardElement = cardFragment.querySelector('.task-card');
-        cardElement.dataset.taskId = taskId;
-
-        const elements = {
-            card: cardElement,
-            taskIdDisplay: cardElement.querySelector('.task-id-display'),
-            removeBtn: cardElement.querySelector('.remove-task-btn'),
-            fileInput: cardElement.querySelector('.file-input'),
-            fileDropArea: cardElement.querySelector('.file-drop-area'),
-            fileDropPrompt: cardElement.querySelector('.file-drop-prompt'),
-            fileNameDisplay: cardElement.querySelector('.file-name-display'),
-            logArea: cardElement.querySelector('.log-area'),
-            statusMessage: cardElement.querySelector('.status-message'),
-            progress: cardElement.querySelector('.progress'),
-            downloadButtons: cardElement.querySelector('.download-buttons'),
-            previewBtn: cardElement.querySelector('.preview-html-btn'),
-            pdfBtn: cardElement.querySelector('.download-pdf-btn'),
-            htmlLink: cardElement.querySelector('.download-html-link'),
-            mdLink: cardElement.querySelector('.download-markdown-link'),
-            mdZipLink: cardElement.querySelector('.download-markdown-zip-link'),
-            startBtn: cardElement.querySelector('.start-translate-btn'),
+        const apiHrefMap = {
+            "https://openrouter.ai/api/v1": "https://openrouter.ai/settings/keys",
+            "https://api.openai.com/v1": "https://platform.openai.com/api-keys",
+            "https://api.deepseek.com/v1": "https://platform.deepseek.com/api_keys",
+            "https://open.bigmodel.cn/api/paas/v4": "https://open.bigmodel.cn/usercenter/apikeys",
+            "https://dashscope.aliyuncs.com/compatible-mode/v1": "https://bailian.console.aliyun.com/?tab=model#/api-key",
+            "https://ark.cn-beijing.volces.com/api/v3": "https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey?apikey=%7B%7D",
+            "https://api.siliconflow.cn/v1": "https://cloud.siliconflow.cn/account/ak",
+            "https://www.dmxapi.cn/v1": "https://www.dmxapi.cn/token"
         };
 
-        elements.taskIdDisplay.textContent = taskId;
+        // --- Utility Functions ---
+        const generateTaskId = () => Math.random().toString(36).substring(2, 10);
+        const saveToStorage = (key, value) => { try { localStorage.setItem(key, value); } catch (e) { console.warn("Save to storage failed:", e); } };
+        const getFromStorage = (key, defaultValue = '') => { try { return localStorage.getItem(key) || defaultValue; } catch (e) { console.warn("Read from storage failed:", e); return defaultValue; } };
 
-        tasks[taskId] = {
-            elements,
-            state: {
-                isTranslating: false,
-                file: null,
-                htmlUrl: null,
-                fileNameStem: null,
-            },
-            intervals: {
-                log: null,
-                status: null
-            }
-        };
-
-        addEventListenersToCard(taskId);
-
-        taskContainer.prepend(cardElement);
-        updateTaskPlaceholderVisibility();
-
-        if (!restoreState) {
-            saveTaskIds();
-        } else {
-            // If restoring, immediately check status
-            pollStatus(taskId, true);
-        }
-    }
-
-    function removeTask(taskId) {
-        stopPolling(taskId);
-        tasks[taskId].elements.card.remove();
-        delete tasks[taskId];
-        saveTaskIds();
-        updateTaskPlaceholderVisibility();
-    }
-
-    function addEventListenersToCard(taskId) {
-        const {elements, state} = tasks[taskId];
-
-        elements.removeBtn.addEventListener('click', () => removeTask(taskId));
-
-        // File Drop/Select Logic
-        elements.fileDropArea.addEventListener('click', () => elements.fileInput.click());
-        elements.fileInput.addEventListener('change', () => handleFileSelect(taskId));
-        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
-            elements.fileDropArea.addEventListener(eventName, e => {
-                e.preventDefault();
-                e.stopPropagation();
-            }, false);
-        });
-        ['dragenter', 'dragover'].forEach(eventName => {
-            elements.fileDropArea.addEventListener(eventName, () => elements.fileDropArea.classList.add('drag-over'), false);
-        });
-        ['dragleave', 'drop'].forEach(eventName => {
-            elements.fileDropArea.addEventListener(eventName, () => elements.fileDropArea.classList.remove('drag-over'), false);
-        });
-        elements.fileDropArea.addEventListener('drop', e => {
-            if (e.dataTransfer.files.length > 0) {
-                elements.fileInput.files = e.dataTransfer.files;
-                handleFileSelect(taskId);
-            }
-        }, false);
-
-        // Main Action Button
-        elements.startBtn.addEventListener('click', () => {
-            if (state.isTranslating) {
-                cancelTranslation(taskId);
-            } else {
-                startTranslation(taskId);
-            }
-        });
-    }
-
-    function handleFileSelect(taskId) {
-        const {elements, state} = tasks[taskId];
-        const file = elements.fileInput.files[0];
-        if (file) {
-            state.file = file;
-            elements.fileNameDisplay.textContent = `已选: ${file.name}`;
-            elements.fileDropArea.classList.add('file-selected');
-            elements.fileDropPrompt.style.display = 'none';
-            // Clear any previous error states
-            elements.fileDropArea.classList.remove('input-error');
-            elements.fileNameDisplay.classList.remove('input-error-text');
-        }
-    }
-
-    // --- Core Translation Logic ---
-    async function startTranslation(taskId) {
-        const {elements, state} = tasks[taskId];
-
-        // --- Validation ---
-        if (!state.file) {
-            elements.statusMessage.textContent = '请先选择一个文件。';
-            elements.statusMessage.className = 'status-message small text-danger';
-            elements.fileDropArea.classList.add('input-error');
-            return;
-        }
-        const requiredInputs = [apikeyInput, modelInput];
-        if (platformSelect.value === 'custom') requiredInputs.push(baseUrlInput);
-        if (convertEnginSelect.value === 'mineru' && !mineruTokenInput.value.trim() && (!["md", "txt"].includes(state.file.name.split('.').pop()))) {
-            requiredInputs.push(mineruTokenInput);
-        }
-
-        let isValid = true;
-        requiredInputs.forEach(input => {
-            input.classList.remove('is-invalid');
-            if (!input.value.trim()) {
-                input.classList.add('is-invalid');
-                isValid = false;
-            }
-        });
-        if (!isValid) {
-            elements.statusMessage.textContent = '请填写所有必填的设置项。';
-            elements.statusMessage.className = 'status-message small text-danger';
-            return;
-        }
-
-        // --- UI Update for Starting ---
-        state.isTranslating = true;
-        elements.startBtn.disabled = true;
-        elements.startBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 初始化...`;
-        elements.logArea.innerHTML = '';
-        elements.statusMessage.textContent = '正在编码文件并提交任务...';
-        elements.statusMessage.className = 'status-message small text-muted';
-        elements.downloadButtons.style.display = 'none';
-        elements.progress.style.display = 'block';
-
-        try {
-            const fileContentBase64 = await fileToBase64(state.file);
-
-            const payload = {
-                task_id: taskId,
-                base_url: baseUrlInput.value,
-                apikey: apikeyInput.value,
-                model_id: modelInput.value,
-                to_lang: toLangSelect.value,
-                formula_ocr: formulaCheckbox.checked,
-                code_ocr: codeCheckbox.checked,
-                refine_markdown: refineCheckbox.checked,
-                convert_engin: convertEnginSelect.value,
-                mineru_token: mineruTokenInput.value || null,
-                chunk_size: parseInt(chunkSizeSlider.value, 10),
-                concurrent: parseInt(concurrentSlider.value, 10),
-                temperature: parseFloat(temperatureSlider.value),
-                custom_prompt_translate: customPromptTranslateArea.value || null,
-                file_name: state.file.name,
-                file_content: fileContentBase64
-            };
-
-            const response = await fetch('/service/translate', {
-                method: 'POST',
-                headers: {'Content-Type': 'application/json'},
-                body: JSON.stringify(payload)
+        function fileToBase64(file) {
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(file);
+                reader.onload = () => {
+                    // Result is "data:...,base64,XYZ...", we only want "XYZ..."
+                    const base64String = reader.result.split(',')[1];
+                    resolve(base64String);
+                };
+                reader.onerror = error => reject(error);
             });
-            const result = await response.json();
+        }
 
-            if (response.ok && result.task_started) {
-                elements.statusMessage.textContent = result.message || '任务已开始，正在处理...';
-                elements.statusMessage.className = 'status-message small text-info';
-                elements.startBtn.innerHTML = `<i class="bi bi-stop-circle-fill me-1"></i>取消翻译`;
-                elements.startBtn.classList.replace('btn-primary', 'btn-danger');
-                elements.startBtn.disabled = false;
-                startPolling(taskId);
+        // --- UI Update Functions ---
+        function updatePlatformUI() {
+            const selectedPlatformValue = platformSelect.value;
+            apikeyInput.value = getFromStorage(`translator_platform_${selectedPlatformValue}_apikey`);
+            modelInput.value = getFromStorage(`translator_platform_${selectedPlatformValue}_model_id`);
+            if (selectedPlatformValue === 'custom') {
+                baseUrlGroup.classList.remove('d-none');
+                baseUrlInput.required = true;
+                baseUrlInput.value = getFromStorage('translator_platform_custom_base_url');
+                apiHref.classList.add('d-none');
             } else {
-                throw new Error(result.message || `请求失败 (${response.status})`);
-            }
-        } catch (error) {
-            console.error('请求失败:', error);
-            elements.statusMessage.textContent = `启动失败: ${error.message}`;
-            elements.statusMessage.className = 'status-message small text-danger';
-            elements.startBtn.innerHTML = `<i class="bi bi-play-fill me-1"></i>开始翻译`;
-            elements.startBtn.classList.replace('btn-danger', 'btn-primary');
-            elements.startBtn.disabled = false;
-            elements.progress.style.display = 'none';
-            state.isTranslating = false;
-        }
-    }
-
-    async function cancelTranslation(taskId) {
-        const {elements} = tasks[taskId];
-        elements.startBtn.disabled = true;
-        elements.startBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 正在取消...`;
-
-        try {
-            const response = await fetch(`/service/cancel/${taskId}`, {method: 'POST'});
-            const result = await response.json();
-
-            if (response.ok && result.cancelled) {
-                elements.statusMessage.textContent = result.message || '取消请求已发送。';
-                elements.statusMessage.className = 'status-message small text-warning';
-            } else {
-                throw new Error(result.message || '取消失败');
-            }
-        } catch (error) {
-            elements.statusMessage.textContent = `取消请求失败: ${error.message}`;
-            elements.statusMessage.className = 'status-message small text-danger';
-            elements.startBtn.disabled = false;
-            elements.startBtn.innerHTML = `<i class="bi bi-stop-circle-fill me-1"></i>取消翻译`;
-        }
-    }
-
-    // --- Polling ---
-    function startPolling(taskId) {
-        stopPolling(taskId);
-        const {intervals} = tasks[taskId];
-        intervals.log = setInterval(() => pollLogs(taskId), 2000);
-        intervals.status = setInterval(() => pollStatus(taskId), 1500);
-        pollLogs(taskId);
-        pollStatus(taskId);
-    }
-
-    function stopPolling(taskId) {
-        const {intervals} = tasks[taskId];
-        if (intervals.log) clearInterval(intervals.log);
-        if (intervals.status) clearInterval(intervals.status);
-        intervals.log = null;
-        intervals.status = null;
-    }
-
-    async function pollLogs(taskId) {
-        const {elements} = tasks[taskId];
-        try {
-            const response = await fetch(`/service/logs/${taskId}`);
-            if (!response.ok) return;
-            const data = await response.json();
-            if (data.logs && data.logs.length > 0) {
-                elements.logArea.innerHTML += data.logs.map(log => log.replace(/</g, "<").replace(/>/g, ">") + '<br>').join('');
-                elements.logArea.scrollTop = elements.logArea.scrollHeight;
-            }
-        } catch (error) {
-            console.warn(`[${taskId}] Error polling logs:`, error);
-        }
-    }
-
-    async function pollStatus(taskId, isRestore = false) {
-        const {elements, state} = tasks[taskId];
-        try {
-            const response = await fetch(`/service/status/${taskId}`);
-            if (!response.ok) {
-                // If 404 on restore, it means the task is old and gone from server. Remove it.
-                if (response.status === 404 && isRestore) {
-                    removeTask(taskId);
+                baseUrlGroup.classList.add('d-none');
+                baseUrlInput.required = false;
+                baseUrlInput.value = selectedPlatformValue;
+                if (apiHrefMap[baseUrlInput.value]) {
+                    apiHref.href = apiHrefMap[baseUrlInput.value];
+                    apiHref.classList.remove('d-none');
+                } else {
+                    apiHref.classList.add('d-none');
                 }
+            }
+            saveToStorage('translator_last_platform', selectedPlatformValue);
+        }
+
+        function updateConvertEnginUI() {
+            const selectedEngin = convertEnginSelect.value;
+            mineruTokenGroup.style.display = selectedEngin === 'mineru' ? 'block' : 'none';
+            mineruTokenInput.required = selectedEngin === 'mineru';
+            if (selectedEngin === 'mineru') {
+                mineruTokenInput.value = getFromStorage('translator_mineru_token');
+            }
+            saveToStorage('translator_convert_engin', selectedEngin);
+        }
+
+        function createSliderUpdater(slider, display, resetBtn, key, params) {
+            return () => {
+                const value = slider.value;
+                display.textContent = value;
+                resetBtn.style.visibility = value !== String(params[key]) ? 'visible' : 'hidden';
+                saveToStorage(key, value);
+            };
+        }
+
+        function setupSlider(slider, display, resetBtn, key, params) {
+            slider.value = getFromStorage(key, params[key]);
+            const updater = createSliderUpdater(slider, display, resetBtn, key, params);
+            slider.addEventListener('input', updater);
+            resetBtn.addEventListener('click', () => {
+                slider.value = params[key];
+                updater();
+            });
+            updater(); // Initial call
+        }
+
+        function updateTaskPlaceholderVisibility() {
+            noTaskPlaceholder.style.display = Object.keys(tasks).length === 0 ? 'block' : 'none';
+        }
+
+        function saveTaskIds() {
+            if (isAdminMode) return; // In admin mode, do not save task list to localStorage
+            const taskIds = Object.keys(tasks);
+            saveToStorage('active_task_ids', JSON.stringify(taskIds));
+        }
+
+        // --- Task Card Management ---
+        function createTaskCard(taskId = null, restoreState = false) {
+            if (!taskId) {
+                taskId = generateTaskId();
+            }
+
+            const cardFragment = taskCardTemplate.content.cloneNode(true);
+            const cardElement = cardFragment.querySelector('.task-card');
+            cardElement.dataset.taskId = taskId;
+
+            const elements = {
+                card: cardElement,
+                taskIdDisplay: cardElement.querySelector('.task-id-display'),
+                removeBtn: cardElement.querySelector('.remove-task-btn'),
+                fileInput: cardElement.querySelector('.file-input'),
+                fileDropArea: cardElement.querySelector('.file-drop-area'),
+                fileDropPrompt: cardElement.querySelector('.file-drop-prompt'),
+                fileNameDisplay: cardElement.querySelector('.file-name-display'),
+                logArea: cardElement.querySelector('.log-area'),
+                statusMessage: cardElement.querySelector('.status-message'),
+                progress: cardElement.querySelector('.progress'),
+                downloadButtons: cardElement.querySelector('.download-buttons'),
+                previewBtn: cardElement.querySelector('.preview-html-btn'),
+                pdfBtn: cardElement.querySelector('.download-pdf-btn'),
+                htmlLink: cardElement.querySelector('.download-html-link'),
+                mdLink: cardElement.querySelector('.download-markdown-link'),
+                mdZipLink: cardElement.querySelector('.download-markdown-zip-link'),
+                startBtn: cardElement.querySelector('.start-translate-btn'),
+            };
+
+            elements.taskIdDisplay.textContent = taskId;
+
+            tasks[taskId] = {
+                elements,
+                state: {
+                    isTranslating: false,
+                    file: null,
+                    htmlUrl: null,
+                    fileNameStem: null,
+                    isSubmitted: false // MODIFICATION 1: Add isSubmitted flag
+                },
+                intervals: {
+                    log: null,
+                    status: null
+                }
+            };
+
+            addEventListenersToCard(taskId);
+
+            taskContainer.prepend(cardElement);
+            updateTaskPlaceholderVisibility();
+
+            if (!restoreState) {
+                saveTaskIds();
+            } else {
+                // If restoring, immediately check status
+                pollStatus(taskId, true);
+            }
+        }
+
+        function removeTask(taskId) {
+            stopPolling(taskId);
+            tasks[taskId].elements.card.remove();
+            delete tasks[taskId];
+            saveTaskIds();
+            updateTaskPlaceholderVisibility();
+        }
+
+        function addEventListenersToCard(taskId) {
+            const { elements, state } = tasks[taskId];
+
+            elements.removeBtn.addEventListener('click', () => removeTask(taskId));
+
+            // File Drop/Select Logic
+            elements.fileDropArea.addEventListener('click', () => elements.fileInput.click());
+            elements.fileInput.addEventListener('change', () => handleFileSelect(taskId));
+            ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+                elements.fileDropArea.addEventListener(eventName, e => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, false);
+            });
+            ['dragenter', 'dragover'].forEach(eventName => {
+                elements.fileDropArea.addEventListener(eventName, () => elements.fileDropArea.classList.add('drag-over'), false);
+            });
+            ['dragleave', 'drop'].forEach(eventName => {
+                elements.fileDropArea.addEventListener(eventName, () => elements.fileDropArea.classList.remove('drag-over'), false);
+            });
+            elements.fileDropArea.addEventListener('drop', e => {
+                if (e.dataTransfer.files.length > 0) {
+                    elements.fileInput.files = e.dataTransfer.files;
+                    handleFileSelect(taskId);
+                }
+            }, false);
+
+            // Main Action Button
+            elements.startBtn.addEventListener('click', () => {
+                if (state.isTranslating) {
+                    cancelTranslation(taskId);
+                } else {
+                    startTranslation(taskId);
+                }
+            });
+        }
+
+        function handleFileSelect(taskId) {
+            const { elements, state } = tasks[taskId];
+            const file = elements.fileInput.files[0];
+            if (file) {
+                state.file = file;
+                elements.fileNameDisplay.textContent = `已选: ${file.name}`;
+                elements.fileDropArea.classList.add('file-selected');
+                elements.fileDropPrompt.style.display = 'none';
+                // Clear any previous error states
+                elements.fileDropArea.classList.remove('input-error');
+                elements.fileNameDisplay.classList.remove('input-error-text');
+            }
+        }
+
+        // --- Core Translation Logic ---
+        async function startTranslation(taskId) {
+            const { elements, state } = tasks[taskId];
+
+            // --- Validation ---
+            if (!state.file) {
+                elements.statusMessage.textContent = '请先选择一个文件。';
+                elements.statusMessage.className = 'status-message small text-danger';
+                elements.fileDropArea.classList.add('input-error');
                 return;
             }
-            const status = await response.json();
-
-            elements.statusMessage.textContent = status.status_message || '正在获取状态...';
-            elements.statusMessage.className = `status-message small ${status.error_flag ? 'text-danger' : 'text-info'}`;
-
-            if (!status.is_processing) {
-                stopPolling(taskId);
-                state.isTranslating = false;
-                elements.startBtn.disabled = false;
-                elements.startBtn.innerHTML = `<i class="bi bi-play-fill me-1"></i>重新翻译`;
-                elements.startBtn.classList.replace('btn-danger', 'btn-primary');
-                elements.progress.style.display = 'none';
-
-                if (status.download_ready && !status.error_flag) {
-                    elements.statusMessage.className = 'status-message small text-success';
-
-                    // Use download URLs directly from the service response
-                    state.htmlUrl = status.downloads.html;
-                    state.fileNameStem = status.original_filename_stem;
-
-                    elements.htmlLink.href = status.downloads.html;
-                    elements.mdLink.href = status.downloads.markdown;
-                    elements.mdZipLink.href = status.downloads.markdown_zip;
-
-                    elements.previewBtn.onclick = () => setupPreview(taskId);
-                    elements.pdfBtn.onclick = () => downloadPdf(taskId);
-
-                    elements.downloadButtons.style.display = 'flex';
-                } else {
-                    elements.downloadButtons.style.display = 'none';
-                }
-            } else {
-                state.isTranslating = true;
-                elements.startBtn.innerHTML = `<i class="bi bi-stop-circle-fill me-1"></i>取消翻译`;
-                elements.startBtn.classList.replace('btn-primary', 'btn-danger');
-                elements.startBtn.disabled = false;
-                elements.progress.style.display = 'block';
-                elements.downloadButtons.style.display = 'none';
+            const requiredInputs = [apikeyInput, modelInput];
+            if (platformSelect.value === 'custom') requiredInputs.push(baseUrlInput);
+            if (convertEnginSelect.value === 'mineru' && !mineruTokenInput.value.trim() && (!["md", "txt"].includes(state.file.name.split('.').pop()))) {
+                requiredInputs.push(mineruTokenInput);
             }
 
-        } catch (error) {
-            console.error(`[${taskId}] Error polling status:`, error);
-            elements.statusMessage.textContent = '状态更新出错。';
-            elements.statusMessage.className = 'status-message small text-danger';
+            let isValid = true;
+            requiredInputs.forEach(input => {
+                input.classList.remove('is-invalid');
+                if (!input.value.trim()) {
+                    input.classList.add('is-invalid');
+                    isValid = false;
+                }
+            });
+            if (!isValid) {
+                 elements.statusMessage.textContent = '请填写所有必填的设置项。';
+                 elements.statusMessage.className = 'status-message small text-danger';
+                return;
+            }
+
+            // --- UI Update for Starting ---
+            state.isTranslating = true;
+            elements.startBtn.disabled = true;
+            elements.startBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 初始化...`;
+            elements.logArea.innerHTML = '';
+            elements.statusMessage.textContent = '正在编码文件并提交任务...';
+            elements.statusMessage.className = 'status-message small text-muted';
+            elements.downloadButtons.style.display = 'none';
+            elements.progress.style.display = 'block';
+
+            try {
+                const fileContentBase64 = await fileToBase64(state.file);
+
+                state.isSubmitted = true; // MODIFICATION 2: Mark task as submitted before sending request
+
+                const payload = {
+                    task_id: taskId,
+                    base_url: baseUrlInput.value,
+                    apikey: apikeyInput.value,
+                    model_id: modelInput.value,
+                    to_lang: toLangSelect.value,
+                    formula_ocr: formulaCheckbox.checked,
+                    code_ocr: codeCheckbox.checked,
+                    refine_markdown: refineCheckbox.checked,
+                    convert_engin: convertEnginSelect.value,
+                    mineru_token: mineruTokenInput.value || null,
+                    chunk_size: parseInt(chunkSizeSlider.value, 10),
+                    concurrent: parseInt(concurrentSlider.value, 10),
+                    temperature: parseFloat(temperatureSlider.value),
+                    custom_prompt_translate: customPromptTranslateArea.value || null,
+                    file_name: state.file.name,
+                    file_content: fileContentBase64
+                };
+
+                const response = await fetch('/service/translate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                const result = await response.json();
+
+                if (response.ok && result.task_started) {
+                    elements.statusMessage.textContent = result.message || '任务已开始，正在处理...';
+                    elements.statusMessage.className = 'status-message small text-info';
+                    elements.startBtn.innerHTML = `<i class="bi bi-stop-circle-fill me-1"></i>取消翻译`;
+                    elements.startBtn.classList.replace('btn-primary', 'btn-danger');
+                    elements.startBtn.disabled = false;
+                    startPolling(taskId);
+                } else {
+                    throw new Error(result.message || `请求失败 (${response.status})`);
+                }
+            } catch (error) {
+                console.error('请求失败:', error);
+                elements.statusMessage.textContent = `启动失败: ${error.message}`;
+                elements.statusMessage.className = 'status-message small text-danger';
+                elements.startBtn.innerHTML = `<i class="bi bi-play-fill me-1"></i>开始翻译`;
+                elements.startBtn.classList.replace('btn-danger', 'btn-primary');
+                elements.startBtn.disabled = false;
+                elements.progress.style.display = 'none';
+                state.isTranslating = false;
+            }
         }
-    }
 
-    // --- Download and Preview ---
-    function setupPreview(taskId) {
-        const {state} = tasks[taskId];
-        if (!state.htmlUrl) return;
+        async function cancelTranslation(taskId) {
+            const { elements } = tasks[taskId];
+            elements.startBtn.disabled = true;
+            elements.startBtn.innerHTML = `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 正在取消...`;
 
-        // Clear previous content
-        const existingOriginalContent = originalPreviewPane.querySelector('iframe, pre, p');
-        if (existingOriginalContent) existingOriginalContent.remove();
-        translatedPreviewFrame.src = 'about:blank';
+            try {
+                const response = await fetch(`/service/cancel/${taskId}`, { method: 'POST' });
+                const result = await response.json();
 
-        // Render original file preview
-        if (state.file) {
-            const fileType = state.file.type;
-            const fileExtension = state.file.name.split('.').pop().toLowerCase();
-            const textLikeExtensions = ['md', 'json', 'xml', 'log', 'py', 'js', 'css', 'java', 'c', 'cpp', 'h', 'hpp', 'cs', 'rb', 'php', 'swift', 'kt', 'go', 'rs', 'ts', 'txt'];
+                if (response.ok && result.cancelled) {
+                    elements.statusMessage.textContent = result.message || '取消请求已发送。';
+                    elements.statusMessage.className = 'status-message small text-warning';
+                } else {
+                    throw new Error(result.message || '取消失败');
+                }
+            } catch (error) {
+                elements.statusMessage.textContent = `取消请求失败: ${error.message}`;
+                elements.statusMessage.className = 'status-message small text-danger';
+                elements.startBtn.disabled = false;
+                elements.startBtn.innerHTML = `<i class="bi bi-stop-circle-fill me-1"></i>取消翻译`;
+            }
+        }
 
-            if (fileType.startsWith('text/') || textLikeExtensions.includes(fileExtension)) {
-                const pre = document.createElement('pre');
-                state.file.text().then(text => pre.textContent = text).catch(() => pre.textContent = '无法读取原文内容。');
-                originalPreviewPane.appendChild(pre);
-            } else if (['application/pdf', 'text/html'].includes(fileType) || ['html', 'htm'].includes(fileExtension)) {
-                const iframe = document.createElement('iframe');
-                iframe.src = URL.createObjectURL(state.file);
-                originalPreviewPane.appendChild(iframe);
+        // --- Polling ---
+        function startPolling(taskId) {
+            stopPolling(taskId);
+            const { intervals } = tasks[taskId];
+            intervals.log = setInterval(() => pollLogs(taskId), 2000);
+            intervals.status = setInterval(() => pollStatus(taskId), 1500);
+            pollLogs(taskId);
+            pollStatus(taskId);
+        }
+
+        function stopPolling(taskId) {
+            const { intervals } = tasks[taskId];
+            if (intervals.log) clearInterval(intervals.log);
+            if (intervals.status) clearInterval(intervals.status);
+            intervals.log = null;
+            intervals.status = null;
+        }
+
+        async function pollLogs(taskId) {
+            const { elements } = tasks[taskId];
+            try {
+                const response = await fetch(`/service/logs/${taskId}`);
+                if (!response.ok) return;
+                const data = await response.json();
+                if (data.logs && data.logs.length > 0) {
+                    elements.logArea.innerHTML += data.logs.map(log => log.replace(/</g, "<").replace(/>/g, ">") + '<br>').join('');
+                    elements.logArea.scrollTop = elements.logArea.scrollHeight;
+                }
+            } catch (error) {
+                console.warn(`[${taskId}] Error polling logs:`, error);
+            }
+        }
+
+        async function pollStatus(taskId, isRestore = false) {
+            const { elements, state } = tasks[taskId];
+            try {
+                const response = await fetch(`/service/status/${taskId}`);
+                if (!response.ok) {
+                    // MODIFICATION 3: Only remove task if it was already submitted
+                    // An unsubmitted task will have `state.isSubmitted = false`, and will not be removed.
+                    if (response.status === 404 && isRestore && state.isSubmitted) {
+                        removeTask(taskId);
+                    }
+                    return;
+                }
+                const status = await response.json();
+
+                elements.statusMessage.textContent = status.status_message || '正在获取状态...';
+                elements.statusMessage.className = `status-message small ${status.error_flag ? 'text-danger' : 'text-info'}`;
+
+                if (!status.is_processing) {
+                    stopPolling(taskId);
+                    state.isTranslating = false;
+                    elements.startBtn.disabled = false;
+                    elements.startBtn.innerHTML = `<i class="bi bi-play-fill me-1"></i>重新翻译`;
+                    elements.startBtn.classList.replace('btn-danger', 'btn-primary');
+                    elements.progress.style.display = 'none';
+
+                    if (status.download_ready && !status.error_flag) {
+                        elements.statusMessage.className = 'status-message small text-success';
+
+                        // Use download URLs directly from the service response
+                        state.htmlUrl = status.downloads.html;
+                        state.fileNameStem = status.original_filename_stem;
+
+                        elements.htmlLink.href = status.downloads.html;
+                        elements.mdLink.href = status.downloads.markdown;
+                        elements.mdZipLink.href = status.downloads.markdown_zip;
+
+                        elements.previewBtn.onclick = () => setupPreview(taskId);
+                        elements.pdfBtn.onclick = () => downloadPdf(taskId);
+
+                        elements.downloadButtons.style.display = 'flex';
+                    } else {
+                        elements.downloadButtons.style.display = 'none';
+                    }
+                } else {
+                    state.isTranslating = true;
+                    elements.startBtn.innerHTML = `<i class="bi bi-stop-circle-fill me-1"></i>取消翻译`;
+                    elements.startBtn.classList.replace('btn-primary', 'btn-danger');
+                    elements.startBtn.disabled = false;
+                    elements.progress.style.display = 'block';
+                    elements.downloadButtons.style.display = 'none';
+                }
+
+            } catch (error) {
+                console.error(`[${taskId}] Error polling status:`, error);
+                elements.statusMessage.textContent = '状态更新出错。';
+                elements.statusMessage.className = 'status-message small text-danger';
+            }
+        }
+
+        // --- Download and Preview ---
+        function setupPreview(taskId) {
+            const { state } = tasks[taskId];
+            if (!state.htmlUrl) return;
+
+            // Clear previous content
+            const existingOriginalContent = originalPreviewPane.querySelector('iframe, pre, p');
+            if (existingOriginalContent) existingOriginalContent.remove();
+            translatedPreviewFrame.src = 'about:blank';
+
+            // Render original file preview
+            if (state.file) {
+                const fileType = state.file.type;
+                const fileExtension = state.file.name.split('.').pop().toLowerCase();
+                const textLikeExtensions = ['md', 'json', 'xml', 'log', 'py', 'js', 'css', 'java', 'c', 'cpp', 'h', 'hpp', 'cs', 'rb', 'php', 'swift', 'kt', 'go', 'rs', 'ts', 'txt'];
+
+                if (fileType.startsWith('text/') || textLikeExtensions.includes(fileExtension)) {
+                    const pre = document.createElement('pre');
+                    state.file.text().then(text => pre.textContent = text).catch(() => pre.textContent = '无法读取原文内容。');
+                    originalPreviewPane.appendChild(pre);
+                } else if (['application/pdf', 'text/html'].includes(fileType) || ['html', 'htm'].includes(fileExtension)) {
+                    const iframe = document.createElement('iframe');
+                    iframe.src = URL.createObjectURL(state.file);
+                    originalPreviewPane.appendChild(iframe);
+                } else {
+                    const p = document.createElement('p');
+                    p.className = 'p-3 text-muted';
+                    p.textContent = `无法直接预览此文件类型 (${fileType || '未知: ' + fileExtension})。`;
+                    originalPreviewPane.appendChild(p);
+                }
             } else {
                 const p = document.createElement('p');
                 p.className = 'p-3 text-muted';
-                p.textContent = `无法直接预览此文件类型 (${fileType || '未知: ' + fileExtension})。`;
+                p.textContent = '未找到原文文件缓存。';
                 originalPreviewPane.appendChild(p);
             }
-        } else {
-            const p = document.createElement('p');
-            p.className = 'p-3 text-muted';
-            p.textContent = '未找到原文文件缓存。';
-            originalPreviewPane.appendChild(p);
+
+            // Fetch and render translated HTML
+            fetch(state.htmlUrl)
+                .then(resp => resp.ok ? resp.text() : Promise.reject(`HTTP error ${resp.status}`))
+                .then(html => {
+                    translatedPreviewFrame.srcdoc = html;
+                    setPreviewDisplayMode('bilingual');
+                    previewModal.show();
+                })
+                .catch(err => {
+                    console.error('Preview fetch failed:', err);
+                    translatedPreviewFrame.srcdoc = `<h3>加载译文失败</h3><p>${err.message}</p>`;
+                    setPreviewDisplayMode('bilingual');
+                    previewModal.show();
+                });
+
+            printFromPreview.onclick = () => {
+                try {
+                    translatedPreviewFrame.contentWindow.focus();
+                    translatedPreviewFrame.contentWindow.print();
+                } catch(e) { alert('打印失败，请使用浏览器打印功能。'); }
+            };
         }
 
-        // Fetch and render translated HTML
-        fetch(state.htmlUrl)
-            .then(resp => resp.ok ? resp.text() : Promise.reject(`HTTP error ${resp.status}`))
-            .then(html => {
-                translatedPreviewFrame.srcdoc = html;
-                setPreviewDisplayMode('bilingual');
-                previewModal.show();
-            })
-            .catch(err => {
-                console.error('Preview fetch failed:', err);
-                translatedPreviewFrame.srcdoc = `<h3>加载译文失败</h3><p>${err.message}</p>`;
-                setPreviewDisplayMode('bilingual');
-                previewModal.show();
-            });
+        function downloadPdf(taskId) {
+            const { elements, state } = tasks[taskId];
+            if (!state.htmlUrl) return;
 
-        printFromPreview.onclick = () => {
+            elements.pdfBtn.disabled = true;
+            elements.pdfBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> 准备中...`;
+
+            fetch(state.htmlUrl)
+                .then(resp => resp.ok ? resp.text() : Promise.reject(`HTTP error ${resp.status}`))
+                .then(html => {
+                    printFrameEl.onload = () => {
+                        setTimeout(() => {
+                            try {
+                                printFrameEl.contentWindow.focus();
+                                printFrameEl.contentWindow.print();
+                            } catch (err) {
+                                alert('自动打印失败，请在预览中手动打印。');
+                            } finally {
+                                elements.pdfBtn.disabled = false;
+                                elements.pdfBtn.innerHTML = `<i class="bi bi-file-earmark-pdf-fill me-1"></i>下载 PDF`;
+                                printFrameEl.onload = null;
+                            }
+                        }, 500);
+                    };
+                    printFrameEl.srcdoc = html;
+                })
+                .catch(err => {
+                    alert('获取HTML内容失败，无法生成PDF。');
+                    elements.pdfBtn.disabled = false;
+                    elements.pdfBtn.innerHTML = `<i class="bi bi-file-earmark-pdf-fill me-1"></i>下载 PDF`;
+                });
+        }
+
+        function setPreviewDisplayMode(mode) {
+            if (mode === 'bilingual') {
+                originalPreviewContainer.style.display = 'block';
+                translatedPreviewContainer.classList.remove('col-12');
+                translatedPreviewContainer.classList.add('col-6');
+                previewModalTitle.textContent = '双语预览';
+                setBilingualViewBtn.classList.add('btn-primary');
+                setBilingualViewBtn.classList.remove('btn-outline-primary');
+                setTranslatedOnlyViewBtn.classList.remove('btn-primary');
+                setTranslatedOnlyViewBtn.classList.add('btn-outline-primary');
+            } else { // translationOnly
+                originalPreviewContainer.style.display = 'none';
+                translatedPreviewContainer.classList.remove('col-6');
+                translatedPreviewContainer.classList.add('col-12');
+                previewModalTitle.textContent = '译文预览';
+                setTranslatedOnlyViewBtn.classList.add('btn-primary');
+                setTranslatedOnlyViewBtn.classList.remove('btn-outline-primary');
+                setBilingualViewBtn.classList.remove('btn-primary');
+                setBilingualViewBtn.classList.add('btn-outline-primary');
+            }
+        }
+
+        // --- Initialization ---
+        async function init() {
+            // Determine if in admin mode
+            isAdminMode = window.location.pathname === '/admin';
+
+            // Fetch metadata
             try {
-                translatedPreviewFrame.contentWindow.focus();
-                translatedPreviewFrame.contentWindow.print();
-            } catch (e) {
-                alert('打印失败，请使用浏览器打印功能。');
+                const [metaRes, enginRes, paramsRes] = await Promise.all([
+                    fetch("/service/meta"),
+                    fetch('/service/engin-list'),
+                    fetch("/service/default-params")
+                ]);
+                const meta = await metaRes.json();
+                versionDisplay.textContent = `v${meta.version}`;
+
+                const enginList = await enginRes.json();
+                Array.from(convertEnginSelect.options).forEach(option => {
+                    if (!enginList.includes(option.value)) {
+                        option.disabled = true;
+                        option.textContent += " (不可用)";
+                    }
+                });
+
+                defaultParams = await paramsRes.json();
+            } catch (error) {
+                console.error("Initialization failed:", error);
+                alert("页面初始化失败，请检查后端服务是否正常并刷新页面。");
+                return;
+            }
+
+            // Load settings
+            platformSelect.value = getFromStorage('translator_last_platform', 'https://api.openai.com/v1');
+            updatePlatformUI();
+            convertEnginSelect.value = getFromStorage('translator_convert_engin', 'mineru');
+            updateConvertEnginUI();
+            toLangSelect.value = getFromStorage('translator_to_lang', '中文');
+            formulaCheckbox.checked = getFromStorage('translator_formula_ocr') === 'true';
+            codeCheckbox.checked = getFromStorage('translator_code_ocr') === 'true';
+            refineCheckbox.checked = getFromStorage('translator_refine_markdown') === 'true';
+            customPromptTranslateArea.value = getFromStorage("custom_prompt_translate");
+
+            // Setup sliders
+            setupSlider(chunkSizeSlider, chunkSizeDisplay, chunkSizeReset, 'chunk_size', defaultParams);
+            setupSlider(concurrentSlider, concurrentDisplay, concurrentReset, 'concurrent', defaultParams);
+            setupSlider(temperatureSlider, temperatureDisplay, temperatureReset, 'temperature', defaultParams);
+
+            // Restore tasks based on mode
+            if (isAdminMode) {
+                document.title = "DocuTranslate - Admin Panel";
+                try {
+                    const response = await fetch('/service/task-list');
+                    if (!response.ok) throw new Error(`Failed to fetch task list: ${response.statusText}`);
+                    const allTaskIds = await response.json();
+                    if (allTaskIds && Array.isArray(allTaskIds) && allTaskIds.length > 0) {
+                        allTaskIds.reverse().forEach(taskId => createTaskCard(taskId, true));
+                    }
+                } catch (error) {
+                    console.error("Admin mode: Failed to load task list from server.", error);
+                    alert("无法从服务器加载任务列表，请检查后台连接。");
+                }
+                updateTaskPlaceholderVisibility();
+            } else {
+                // Normal mode: Restore from localStorage
+                const savedTaskIds = JSON.parse(getFromStorage('active_task_ids', '[]'));
+                if (savedTaskIds.length > 0) {
+                    savedTaskIds.forEach(taskId => createTaskCard(taskId, true));
+                } else {
+                    createTaskCard(); // Create one new task by default
+                }
+            }
+
+            // Add event listeners for settings
+            platformSelect.addEventListener('change', updatePlatformUI);
+            apikeyInput.addEventListener('input', e => saveToStorage(`translator_platform_${platformSelect.value}_apikey`, e.target.value));
+            modelInput.addEventListener('input', e => saveToStorage(`translator_platform_${platformSelect.value}_model_id`, e.target.value));
+            baseUrlInput.addEventListener('input', e => { if (platformSelect.value === 'custom') saveToStorage('translator_platform_custom_base_url', e.target.value); });
+            convertEnginSelect.addEventListener('change', updateConvertEnginUI);
+            mineruTokenInput.addEventListener('input', e => saveToStorage('translator_mineru_token', e.target.value));
+            toLangSelect.addEventListener('change', e => saveToStorage('translator_to_lang', e.target.value));
+            formulaCheckbox.addEventListener('change', e => saveToStorage('translator_formula_ocr', e.target.checked));
+            codeCheckbox.addEventListener('change', e => saveToStorage('translator_code_ocr', e.target.checked));
+            refineCheckbox.addEventListener('change', e => saveToStorage('translator_refine_markdown', e.target.checked));
+            customPromptTranslateArea.addEventListener('input', () => saveToStorage("custom_prompt_translate", customPromptTranslateArea.value));
+
+            addNewTaskBtn.addEventListener('click', () => createTaskCard());
+            setBilingualViewBtn.addEventListener('click', () => setPreviewDisplayMode('bilingual'));
+            setTranslatedOnlyViewBtn.addEventListener('click', () => setPreviewDisplayMode('translationOnly'));
+        }
+
+        // --- MODIFIED: Theme switcher logic ---
+        const getPreferredTheme = () => {
+            const storedTheme = localStorage.getItem('theme');
+            if (storedTheme) {
+                return storedTheme;
+            }
+            // Default to 'auto' if no preference is stored
+            return 'auto';
+        };
+
+        const setTheme = theme => {
+            if (theme === 'auto') {
+                 // Set theme based on system preference
+                document.documentElement.setAttribute('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+            } else {
+                // Set theme based on user's choice (light/dark)
+                document.documentElement.setAttribute('data-bs-theme', theme);
             }
         };
-    }
 
-    function downloadPdf(taskId) {
-        const {elements, state} = tasks[taskId];
-        if (!state.htmlUrl) return;
-
-        elements.pdfBtn.disabled = true;
-        elements.pdfBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> 准备中...`;
-
-        fetch(state.htmlUrl)
-            .then(resp => resp.ok ? resp.text() : Promise.reject(`HTTP error ${resp.status}`))
-            .then(html => {
-                printFrameEl.onload = () => {
-                    setTimeout(() => {
-                        try {
-                            printFrameEl.contentWindow.focus();
-                            printFrameEl.contentWindow.print();
-                        } catch (err) {
-                            alert('自动打印失败，请在预览中手动打印。');
-                        } finally {
-                            elements.pdfBtn.disabled = false;
-                            elements.pdfBtn.innerHTML = `<i class="bi bi-file-earmark-pdf-fill me-1"></i>下载 PDF`;
-                            printFrameEl.onload = null;
-                        }
-                    }, 500);
-                };
-                printFrameEl.srcdoc = html;
-            })
-            .catch(err => {
-                alert('获取HTML内容失败，无法生成PDF。');
-                elements.pdfBtn.disabled = false;
-                elements.pdfBtn.innerHTML = `<i class="bi bi-file-earmark-pdf-fill me-1"></i>下载 PDF`;
-            });
-    }
-
-    function setPreviewDisplayMode(mode) {
-        if (mode === 'bilingual') {
-            originalPreviewContainer.style.display = 'block';
-            translatedPreviewContainer.classList.remove('col-12');
-            translatedPreviewContainer.classList.add('col-6');
-            previewModalTitle.textContent = '双语预览';
-            setBilingualViewBtn.classList.add('btn-primary');
-            setBilingualViewBtn.classList.remove('btn-outline-primary');
-            setTranslatedOnlyViewBtn.classList.remove('btn-primary');
-            setTranslatedOnlyViewBtn.classList.add('btn-outline-primary');
-        } else { // translationOnly
-            originalPreviewContainer.style.display = 'none';
-            translatedPreviewContainer.classList.remove('col-6');
-            translatedPreviewContainer.classList.add('col-12');
-            previewModalTitle.textContent = '译文预览';
-            setTranslatedOnlyViewBtn.classList.add('btn-primary');
-            setTranslatedOnlyViewBtn.classList.remove('btn-outline-primary');
-            setBilingualViewBtn.classList.remove('btn-primary');
-            setBilingualViewBtn.classList.add('btn-outline-primary');
-        }
-    }
-
-    // --- Initialization ---
-    async function init() {
-        // Determine if in admin mode
-        isAdminMode = window.location.pathname === '/admin';
-
-        // Fetch metadata
-        try {
-            const [metaRes, enginRes, paramsRes] = await Promise.all([
-                fetch("/service/meta"),
-                fetch('/service/engin-list'),
-                fetch("/service/default-params")
-            ]);
-            const meta = await metaRes.json();
-            versionDisplay.textContent = `v${meta.version}`;
-
-            const enginList = await enginRes.json();
-            Array.from(convertEnginSelect.options).forEach(option => {
-                if (!enginList.includes(option.value)) {
-                    option.disabled = true;
-                    option.textContent += " (不可用)";
-                }
+        const showActiveTheme = (theme) => {
+            // Remove active class from all buttons
+            document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+                element.classList.remove('active');
             });
 
-            defaultParams = await paramsRes.json();
-        } catch (error) {
-            console.error("Initialization failed:", error);
-            alert("页面初始化失败，请检查后端服务是否正常并刷新页面。");
-            return;
-        }
-
-        // Load settings
-        platformSelect.value = getFromStorage('translator_last_platform', 'https://api.openai.com/v1');
-        updatePlatformUI();
-        convertEnginSelect.value = getFromStorage('translator_convert_engin', 'mineru');
-        updateConvertEnginUI();
-        toLangSelect.value = getFromStorage('translator_to_lang', '中文');
-        formulaCheckbox.checked = getFromStorage('translator_formula_ocr') === 'true';
-        codeCheckbox.checked = getFromStorage('translator_code_ocr') === 'true';
-        refineCheckbox.checked = getFromStorage('translator_refine_markdown') === 'true';
-        customPromptTranslateArea.value = getFromStorage("custom_prompt_translate");
-
-        // Setup sliders
-        setupSlider(chunkSizeSlider, chunkSizeDisplay, chunkSizeReset, 'chunk_size', defaultParams);
-        setupSlider(concurrentSlider, concurrentDisplay, concurrentReset, 'concurrent', defaultParams);
-        setupSlider(temperatureSlider, temperatureDisplay, temperatureReset, 'temperature', defaultParams);
-
-        // Restore tasks based on mode
-        if (isAdminMode) {
-            document.title = "DocuTranslate - Admin Panel";
-            try {
-                const response = await fetch('/service/task-list');
-                if (!response.ok) throw new Error(`Failed to fetch task list: ${response.statusText}`);
-                const allTaskIds = await response.json();
-                if (allTaskIds && Array.isArray(allTaskIds) && allTaskIds.length > 0) {
-                    allTaskIds.reverse().forEach(taskId => createTaskCard(taskId, true));
-                }
-            } catch (error) {
-                console.error("Admin mode: Failed to load task list from server.", error);
-                alert("无法从服务器加载任务列表，请检查后台连接。");
+            // Add active class to the button corresponding to the current theme
+            const activeButton = document.querySelector(`[data-bs-theme-value="${theme}"]`);
+            if (activeButton) {
+                activeButton.classList.add('active');
             }
-            updateTaskPlaceholderVisibility();
-        } else {
-            // Normal mode: Restore from localStorage
-            const savedTaskIds = JSON.parse(getFromStorage('active_task_ids', '[]'));
-            if (savedTaskIds.length > 0) {
-                savedTaskIds.forEach(taskId => createTaskCard(taskId, true));
-            } else {
-                createTaskCard(); // Create one new task by default
+        };
+
+        // On page load, set theme and update UI
+        const preferredTheme = getPreferredTheme();
+        setTheme(preferredTheme);
+        showActiveTheme(preferredTheme);
+
+        // When system theme changes, update if in 'auto' mode
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+            const storedTheme = localStorage.getItem('theme');
+            if (storedTheme === 'auto' || !storedTheme) {
+                setTheme('auto');
             }
-        }
-
-        // Add event listeners for settings
-        platformSelect.addEventListener('change', updatePlatformUI);
-        apikeyInput.addEventListener('input', e => saveToStorage(`translator_platform_${platformSelect.value}_apikey`, e.target.value));
-        modelInput.addEventListener('input', e => saveToStorage(`translator_platform_${platformSelect.value}_model_id`, e.target.value));
-        baseUrlInput.addEventListener('input', e => {
-            if (platformSelect.value === 'custom') saveToStorage('translator_platform_custom_base_url', e.target.value);
-        });
-        convertEnginSelect.addEventListener('change', updateConvertEnginUI);
-        mineruTokenInput.addEventListener('input', e => saveToStorage('translator_mineru_token', e.target.value));
-        toLangSelect.addEventListener('change', e => saveToStorage('translator_to_lang', e.target.value));
-        formulaCheckbox.addEventListener('change', e => saveToStorage('translator_formula_ocr', e.target.checked));
-        codeCheckbox.addEventListener('change', e => saveToStorage('translator_code_ocr', e.target.checked));
-        refineCheckbox.addEventListener('change', e => saveToStorage('translator_refine_markdown', e.target.checked));
-        customPromptTranslateArea.addEventListener('input', () => saveToStorage("custom_prompt_translate", customPromptTranslateArea.value));
-
-        addNewTaskBtn.addEventListener('click', () => createTaskCard());
-        setBilingualViewBtn.addEventListener('click', () => setPreviewDisplayMode('bilingual'));
-        setTranslatedOnlyViewBtn.addEventListener('click', () => setPreviewDisplayMode('translationOnly'));
-    }
-
-    // --- MODIFIED: Theme switcher logic ---
-    const getPreferredTheme = () => {
-        const storedTheme = localStorage.getItem('theme');
-        if (storedTheme) {
-            return storedTheme;
-        }
-        // Default to 'auto' if no preference is stored
-        return 'auto';
-    };
-
-    const setTheme = theme => {
-        if (theme === 'auto') {
-            // Set theme based on system preference
-            document.documentElement.setAttribute('data-bs-theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
-        } else {
-            // Set theme based on user's choice (light/dark)
-            document.documentElement.setAttribute('data-bs-theme', theme);
-        }
-    };
-
-    const showActiveTheme = (theme) => {
-        // Remove active class from all buttons
-        document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-            element.classList.remove('active');
         });
 
-        // Add active class to the button corresponding to the current theme
-        const activeButton = document.querySelector(`[data-bs-theme-value="${theme}"]`);
-        if (activeButton) {
-            activeButton.classList.add('active');
-        }
-    };
-
-    // On page load, set theme and update UI
-    const preferredTheme = getPreferredTheme();
-    setTheme(preferredTheme);
-    showActiveTheme(preferredTheme);
-
-    // When system theme changes, update if in 'auto' mode
-    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        const storedTheme = localStorage.getItem('theme');
-        if (storedTheme === 'auto' || !storedTheme) {
-            setTheme('auto');
-        }
-    });
-
-    // Add click listeners to theme switch buttons
-    document.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {
-        toggle.addEventListener('click', () => {
-            const theme = toggle.getAttribute('data-bs-theme-value');
-            localStorage.setItem('theme', theme);
-            setTheme(theme);
-            showActiveTheme(theme);
+        // Add click listeners to theme switch buttons
+        document.querySelectorAll('[data-bs-theme-value]').forEach(toggle => {
+            toggle.addEventListener('click', () => {
+                const theme = toggle.getAttribute('data-bs-theme-value');
+                localStorage.setItem('theme', theme);
+                setTheme(theme);
+                showActiveTheme(theme);
+            });
         });
-    });
 
 
-    // --- Start the application ---
-    document.addEventListener('DOMContentLoaded', init);
-</script>
+        // --- Start the application ---
+        document.addEventListener('DOMContentLoaded', init);
+    </script>
 </body>
 </html>
\ No newline at end of file