From c9d18bc45c08b5c7808cf3b3631fcd9c9ca18cf4 Mon Sep 17 00:00:00 2001
From: xunbu <xunbu3@qq.com>
Date: Mon, 14 Jul 2025 18:05:49 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docutranslate/static/index.html | 1906 ++++++++++++++++---------------
 1 file changed, 995 insertions(+), 911 deletions(-)
diff --git a/docutranslate/static/index.html b/docutranslate/static/index.html
index 2ddcff3..e1df98f 100644
--- a/docutranslate/static/index.html
+++ b/docutranslate/static/index.html
@@ -3,8 +3,9 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>DocuTranslate - 交互式文档翻译</title>
 
+    <title>DocuTranslate - 交互式文档翻译</title>
+    <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     <!-- Bootstrap CSS -->
     <link href="/static/bootstrap.css" rel="stylesheet" crossorigin="anonymous">
     <!-- Bootstrap Icons -->
@@ -60,17 +61,21 @@
             transition: all 0.2s ease-in-out;
             background-color: var(--bs-body-bg);
         }
+
         .file-drop-area.drag-over {
             border-color: var(--bs-primary);
             background-color: var(--bs-secondary-bg);
         }
+
         .file-drop-area.file-selected {
             border-style: solid;
             border-color: var(--bs-success);
         }
+
         .file-drop-area.input-error {
             border-color: var(--bs-danger);
         }
+
         .file-name-display.input-error-text {
             color: var(--bs-danger);
             font-weight: bold;
@@ -85,6 +90,7 @@
         #previewModal .modal-dialog {
             max-width: 95vw;
         }
+
         #previewModal .modal-body {
             height: 80vh;
         }
@@ -95,6 +101,7 @@
             border: 1px solid var(--bs-border-color);
             border-radius: .375rem;
         }
+
         .preview-pane iframe, .preview-pane pre {
             width: 100%;
             height: 100%;
@@ -119,1035 +126,1112 @@
 </head>
 <body>
 
-    <div class="container-fluid main-container">
-        <div class="row gx-4">
-            <!-- Left: Settings Panel -->
-            <div class="col-lg-4">
-                <div class="settings-panel">
-                    <div class="d-flex justify-content-between align-items-center mb-3">
-                        <h4 class="mb-0"><i class="bi me-2"></i>Docutranslate</h4>
-                        <span id="versionDisplay" class="badge bg-success"></span>
-                    </div>
+<div class="container-fluid main-container">
+    <div class="row gx-4">
+        <!-- Left: Settings Panel -->
+        <div class="col-lg-4">
+            <div class="settings-panel">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h4 class="mb-0"><i class="bi me-2"></i>Docutranslate</h4>
+                    <span id="versionDisplay" class="badge bg-success"></span>
+                </div>
 
-                    <form id="translateForm">
-                        <div class="accordion" id="settingsAccordion">
+                <form id="translateForm">
+                    <div class="accordion" id="settingsAccordion">
 
-                            <!-- Parsing Engine Settings -->
-                            <div class="accordion-item">
-                                <h2 class="accordion-header" id="headingOne">
-                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
-                                        <strong><i class="bi bi-file-earmark-binary me-2"></i>解析配置</strong>
-                                    </button>
-                                </h2>
-                                <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
-                                    <div class="accordion-body">
-                                        <div class="mb-3">
-                                            <label for="convert_engin" class="form-label">解析引擎</label>
-                                            <select class="form-select" id="convert_engin" name="convert_engin">
-                                                <option value="mineru">minerU (推荐)</option>
-                                                <option value="docling">Docling (本地解析)</option>
-                                            </select>
-                                        </div>
-                                        <div class="mb-3" id="mineruTokenGroup">
-                                            <label for="mineru_token" class="form-label">
-                                                Mineru Token
-                                                <a href="https://mineru.net/apiManage/token" target="_blank" class="ms-1" title="获取Mineru Token"><i class="bi bi-box-arrow-up-right"></i></a>
-                                            </label>
-                                            <input type="password" class="form-control" id="mineru_token" name="mineru_token" placeholder="使用Mineru引擎时需要">
-                                        </div>
+                        <!-- Parsing Engine Settings -->
+                        <div class="accordion-item">
+                            <h2 class="accordion-header" id="headingOne">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                        data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
+                                    <strong><i class="bi bi-file-earmark-binary me-2"></i>解析配置</strong>
+                                </button>
+                            </h2>
+                            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne">
+                                <div class="accordion-body">
+                                    <div class="mb-3">
+                                        <label for="convert_engin" class="form-label">解析引擎</label>
+                                        <select class="form-select" id="convert_engin" name="convert_engin">
+                                            <option value="mineru">minerU (推荐)</option>
+                                            <option value="docling">Docling (本地解析)</option>
+                                        </select>
+                                    </div>
+                                    <div class="mb-3" id="mineruTokenGroup">
+                                        <label for="mineru_token" class="form-label">
+                                            Mineru Token
+                                            <a href="https://mineru.net/apiManage/token" target="_blank" class="ms-1"
+                                               title="获取Mineru Token"><i class="bi bi-box-arrow-up-right"></i></a>
+                                        </label>
+                                        <input type="password" class="form-control" id="mineru_token"
+                                               name="mineru_token" placeholder="使用Mineru引擎时需要">
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
-                            <!-- AI Settings -->
-                            <div class="accordion-item">
-                                <h2 class="accordion-header" id="headingTwo">
-                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                                        <strong><i class="bi bi-robot me-2"></i>翻译模型</strong>
-                                    </button>
-                                </h2>
-                                <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
-                                    <div class="accordion-body">
-                                        <div class="mb-3">
-                                            <label for="platform_select" class="form-label">选择平台</label>
-                                            <select class="form-select" id="platform_select">
-                                                <option value="custom">自定义接口</option>
-                                                <option value="https://api.openai.com/v1">OpenAI</option>
-                                                <option value="https://open.bigmodel.cn/api/paas/v4">智谱AI</option>
-                                                <option value="https://api.deepseek.com/v1">DeepSeek</option>
-                                                <option value="https://dashscope.aliyuncs.com/compatible-mode/v1">阿里云百炼</option>
-                                                <option value="https://www.dmxapi.cn/v1">DMXAPI</option>
-                                                <option value="https://openrouter.ai/api/v1">OpenRouter</option>
-                                                <option value="https://ark.cn-beijing.volces.com/api/v3">火山引擎</option>
-                                                <option value="https://api.siliconflow.cn/v1">硅基流动</option>
-                                            </select>
-                                        </div>
-                                        <div class="mb-3" id="baseUrlGroup">
-                                            <label for="base_url" class="form-label">API 地址 (Base URL)</label>
-                                            <input type="url" class="form-control" id="base_url" name="base_url" required>
-                                        </div>
-                                        <div class="mb-3">
-                                            <label for="apikey" class="form-label">
-                                                API Key
-                                                <a href="#" target="_blank" class="ms-1" id="api_href" title="获取API Key"><i class="bi bi-box-arrow-up-right"></i></a>
-                                            </label>
-                                            <input type="password" class="form-control" id="apikey" name="apikey" required placeholder="请输入您的API Key">
-                                        </div>
-                                        <div class="mb-3">
-                                            <label for="model_id" class="form-label">模型 ID</label>
-                                            <input type="text" class="form-control" id="model_id" name="model_id" required placeholder="例如: gpt-4o, glm-4">
-                                        </div>
+                        <!-- AI Settings -->
+                        <div class="accordion-item">
+                            <h2 class="accordion-header" id="headingTwo">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                        data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+                                    <strong><i class="bi bi-robot me-2"></i>翻译模型</strong>
+                                </button>
+                            </h2>
+                            <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo">
+                                <div class="accordion-body">
+                                    <div class="mb-3">
+                                        <label for="platform_select" class="form-label">选择平台</label>
+                                        <select class="form-select" id="platform_select">
+                                            <option value="custom">自定义接口</option>
+                                            <option value="https://api.openai.com/v1">OpenAI</option>
+                                            <option value="https://open.bigmodel.cn/api/paas/v4">智谱AI</option>
+                                            <option value="https://api.deepseek.com/v1">DeepSeek</option>
+                                            <option value="https://dashscope.aliyuncs.com/compatible-mode/v1">
+                                                阿里云百炼
+                                            </option>
+                                            <option value="https://www.dmxapi.cn/v1">DMXAPI</option>
+                                            <option value="https://openrouter.ai/api/v1">OpenRouter</option>
+                                            <option value="https://ark.cn-beijing.volces.com/api/v3">火山引擎</option>
+                                            <option value="https://api.siliconflow.cn/v1">硅基流动</option>
+                                        </select>
+                                    </div>
+                                    <div class="mb-3" id="baseUrlGroup">
+                                        <label for="base_url" class="form-label">API 地址 (Base URL)</label>
+                                        <input type="url" class="form-control" id="base_url" name="base_url" required>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="apikey" class="form-label">
+                                            API Key
+                                            <a href="#" target="_blank" class="ms-1" id="api_href"
+                                               title="获取API Key"><i class="bi bi-box-arrow-up-right"></i></a>
+                                        </label>
+                                        <input type="password" class="form-control" id="apikey" name="apikey" required
+                                               placeholder="请输入您的API Key">
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="model_id" class="form-label">模型 ID</label>
+                                        <input type="text" class="form-control" id="model_id" name="model_id" required
+                                               placeholder="例如: gpt-4o, glm-4">
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
-                            <!-- Translation Settings -->
-                            <div class="accordion-item">
-                                <h2 class="accordion-header" id="headingThree">
-                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
-                                        <strong><i class="bi bi-translate me-2"></i>翻译配置</strong>
-                                    </button>
-                                </h2>
-                                <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
-                                    <div class="accordion-body">
-                                        <div class="mb-3">
-                                            <label for="to_lang" class="form-label">目标语言</label>
-                                            <select class="form-select" id="to_lang" name="to_lang">
-                                                <option value="中文">中文</option>
-                                                <option value="English">English</option>
-                                                <option value="Japanese">Japanese</option>
-                                                <option value="Korean">Korean</option>
-                                            </select>
-                                        </div>
-                                         <div class="mb-3">
-                                            <label for="custom_prompt_translate" class="form-label">自定义Prompt</label>
-                                            <textarea class="form-control" id="custom_prompt_translate" name="custom_prompt_translate" rows="3" placeholder="可选，如“人名保持原文不翻译”"></textarea>
-                                        </div>
-                                        <div class="form-check form-switch mb-2">
-                                            <input class="form-check-input" type="checkbox" role="switch" id="formula_ocr" name="formula_ocr" checked>
-                                            <label class="form-check-label" for="formula_ocr">公式识别</label>
-                                        </div>
-                                        <div class="form-check form-switch mb-2">
-                                            <input class="form-check-input" type="checkbox" role="switch" id="code_ocr" name="code_ocr" checked>
-                                            <label class="form-check-label" for="code_ocr">代码识别</label>
-                                        </div>
-                                        <div class="form-check form-switch mb-2">
-                                            <input class="form-check-input" type="checkbox" role="switch" id="refine_markdown" name="refine_markdown">
-                                            <label class="form-check-label" for="refine_markdown">Markdown修复<span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="使用ai对解析后的文本先修复再翻译，现不推荐开启">
+                        <!-- Translation Settings -->
+                        <div class="accordion-item">
+                            <h2 class="accordion-header" id="headingThree">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                        data-bs-target="#collapseThree" aria-expanded="false"
+                                        aria-controls="collapseThree">
+                                    <strong><i class="bi bi-translate me-2"></i>翻译配置</strong>
+                                </button>
+                            </h2>
+                            <div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree">
+                                <div class="accordion-body">
+                                    <div class="mb-3">
+                                        <label for="to_lang" class="form-label">目标语言</label>
+                                        <select class="form-select" id="to_lang" name="to_lang">
+                                            <option value="中文">中文</option>
+                                            <option value="English">English</option>
+                                            <option value="Japanese">Japanese</option>
+                                            <option value="Korean">Korean</option>
+                                        </select>
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="custom_prompt_translate" class="form-label">自定义Prompt</label>
+                                        <textarea class="form-control" id="custom_prompt_translate"
+                                                  name="custom_prompt_translate" rows="3"
+                                                  placeholder="可选，如“人名保持原文不翻译”"></textarea>
+                                    </div>
+                                    <div class="form-check form-switch mb-2">
+                                        <input class="form-check-input" type="checkbox" role="switch" id="formula_ocr"
+                                               name="formula_ocr" checked>
+                                        <label class="form-check-label" for="formula_ocr">公式识别</label>
+                                    </div>
+                                    <div class="form-check form-switch mb-2">
+                                        <input class="form-check-input" type="checkbox" role="switch" id="code_ocr"
+                                               name="code_ocr" checked>
+                                        <label class="form-check-label" for="code_ocr">代码识别</label>
+                                    </div>
+                                    <div class="form-check form-switch mb-2">
+                                        <input class="form-check-input" type="checkbox" role="switch"
+                                               id="refine_markdown" name="refine_markdown">
+                                        <label class="form-check-label" for="refine_markdown">Markdown修复<span
+                                                class="d-inline-block" tabindex="0" data-bs-toggle="tooltip"
+                                                title="使用ai对解析后的文本先修复再翻译，现不推荐开启">
                                               <i class="bi bi-question-circle"></i>
                                             </span></label>
 
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-
-                            <!-- Other Settings -->
-                            <div class="accordion-item">
-                                <h2 class="accordion-header" id="headingFour">
-                                    <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
-                                        <strong><i class="bi bi-sliders me-2"></i>高级参数</strong>
-                                    </button>
-                                </h2>
-                                <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour">
-                                    <div class="accordion-body">
-                                        <div class="mb-3">
-                                            <label for="chunk-size-slider" class="form-label d-flex justify-content-between">
-                                                <span>分块大小: <span id="chunk-size-display"></span></span>
-                                                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 slider-reset-btn" id="chunk-size-reset">重置</button>
-                                            </label>
-                                            <input type="range" class="form-range" min="1000" max="6000" step="100" id="chunk-size-slider" name="chunk_size">
-                                        </div>
-                                        <div class="mb-3">
-                                            <label for="concurrent-slider" class="form-label d-flex justify-content-between">
-                                                <span>并发数: <span id="concurrent-display"></span></span>
-                                                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 slider-reset-btn" id="concurrent-reset">重置</button>
-                                            </label>
-                                            <input type="range" class="form-range" min="1" max="60" step="1" id="concurrent-slider" name="concurrent">
-                                        </div>
-                                        <div class="mb-3">
-                                            <label for="temperature-slider" class="form-label d-flex justify-content-between">
-                                                <span>Temperature: <span id="temperature-display"></span></span>
-                                                <button type="button" class="btn btn-sm btn-outline-secondary py-0 px-1 slider-reset-btn" id="temperature-reset">重置</button>
-                                            </label>
-                                            <input type="range" class="form-range" min="0" max="2" step="0.1" id="temperature-slider" name="temperature">
-                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
-                    </form>
 
-                    <!-- 项目信息 -->
-                    <div class="mt-4 text-left text-muted small">
-                        <p class="mb-1">
-                            项目主页(欢迎star❤): <br/>
-                            <a href="https://github.com/xunbu/docutranslate" target="_blank" rel="noopener noreferrer">https://github.com/xunbu/docutranslate</a>
-                        </p>
-                        <p class="mb-0">
-                            交流QQ群: 1047781902
-                        </p>
+                        <!-- Other Settings -->
+                        <div class="accordion-item">
+                            <h2 class="accordion-header" id="headingFour">
+                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
+                                        data-bs-target="#collapseFour" aria-expanded="false"
+                                        aria-controls="collapseFour">
+                                    <strong><i class="bi bi-sliders me-2"></i>高级参数</strong>
+                                </button>
+                            </h2>
+                            <div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour">
+                                <div class="accordion-body">
+                                    <div class="mb-3">
+                                        <label for="chunk-size-slider"
+                                               class="form-label d-flex justify-content-between">
+                                            <span>分块大小: <span id="chunk-size-display"></span></span>
+                                            <button type="button"
+                                                    class="btn btn-sm btn-outline-secondary py-0 px-1 slider-reset-btn"
+                                                    id="chunk-size-reset">重置
+                                            </button>
+                                        </label>
+                                        <input type="range" class="form-range" min="1000" max="6000" step="100"
+                                               id="chunk-size-slider" name="chunk_size">
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="concurrent-slider"
+                                               class="form-label d-flex justify-content-between">
+                                            <span>并发数: <span id="concurrent-display"></span></span>
+                                            <button type="button"
+                                                    class="btn btn-sm btn-outline-secondary py-0 px-1 slider-reset-btn"
+                                                    id="concurrent-reset">重置
+                                            </button>
+                                        </label>
+                                        <input type="range" class="form-range" min="1" max="60" step="1"
+                                               id="concurrent-slider" name="concurrent">
+                                    </div>
+                                    <div class="mb-3">
+                                        <label for="temperature-slider"
+                                               class="form-label d-flex justify-content-between">
+                                            <span>Temperature: <span id="temperature-display"></span></span>
+                                            <button type="button"
+                                                    class="btn btn-sm btn-outline-secondary py-0 px-1 slider-reset-btn"
+                                                    id="temperature-reset">重置
+                                            </button>
+                                        </label>
+                                        <input type="range" class="form-range" min="0" max="2" step="0.1"
+                                               id="temperature-slider" name="temperature">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
                     </div>
+                </form>
 
+                <!-- 项目信息 -->
+                <div class="mt-4 text-left text-muted small">
+                    <p class="mb-1">
+                        项目主页(欢迎star❤): <br/>
+                        <a href="https://github.com/xunbu/docutranslate" target="_blank" rel="noopener noreferrer">https://github.com/xunbu/docutranslate</a>
+                    </p>
+                    <p class="mb-0">
+                        交流QQ群: 1047781902
+                    </p>
                 </div>
-            </div>
 
-            <!-- Right: Task Area -->
-            <div class="col-lg-8">
-                <div class="task-area" id="task-area-container">
-                    <div class="d-flex justify-content-between align-items-center mb-3">
-                        <h4 class="mb-0"><i class="bi bi-list-task me-2"></i>任务列表</h4>
-                        <button class="btn btn-primary" id="addNewTaskBtn"><i class="bi bi-plus-circle-fill me-2"></i>新建任务</button>
-                    </div>
-                    <div id="task-container">
-                        <!-- Task cards will be injected here -->
-                    </div>
-                    <div id="no-task-placeholder" class="text-center text-muted mt-5">
-                        <i class="bi bi-journal-plus" style="font-size: 4rem;"></i>
-                        <p class="mt-3">当前没有任务，点击“新建任务”开始吧！</p>
-                    </div>
+            </div>
+        </div>
+
+        <!-- Right: Task Area -->
+        <div class="col-lg-8">
+            <div class="task-area" id="task-area-container">
+                <div class="d-flex justify-content-between align-items-center mb-3">
+                    <h4 class="mb-0"><i class="bi bi-list-task me-2"></i>任务列表</h4>
+                    <button class="btn btn-primary" id="addNewTaskBtn"><i class="bi bi-plus-circle-fill me-2"></i>新建任务
+                    </button>
+                </div>
+                <div id="task-container">
+                    <!-- Task cards will be injected here -->
+                </div>
+                <div id="no-task-placeholder" class="text-center text-muted mt-5">
+                    <i class="bi bi-journal-plus" style="font-size: 4rem;"></i>
+                    <p class="mt-3">当前没有任务，点击“新建任务”开始吧！</p>
                 </div>
             </div>
         </div>
     </div>
+</div>
 
-    <!-- Task Card Template -->
-    <template id="taskCardTemplate">
-        <div class="card mb-3 task-card">
-            <div class="card-header d-flex justify-content-between align-items-center">
-                <span class="fw-bold">任务 ID: <code class="task-id-display"></code></span>
-                <button type="button" class="btn-close remove-task-btn" aria-label="Close"></button>
-            </div>
-            <div class="card-body">
-                <div class="row">
-                    <div class="col-md-5">
-                        <input type="file" class="d-none file-input">
-                        <div class="file-drop-area">
-                            <i class="bi bi-cloud-arrow-up fs-1"></i>
-                            <p class="file-drop-prompt mb-0">点击或拖拽文件到此处</p>
-                            <p class="file-name-display text-success"></p>
-                        </div>
+<!-- Task Card Template -->
+<template id="taskCardTemplate">
+    <div class="card mb-3 task-card">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <span class="fw-bold">任务 ID: <code class="task-id-display"></code></span>
+            <button type="button" class="btn-close remove-task-btn" aria-label="Close"></button>
+        </div>
+        <div class="card-body">
+            <div class="row">
+                <div class="col-md-5">
+                    <input type="file" class="d-none file-input">
+                    <div class="file-drop-area">
+                        <i class="bi bi-cloud-arrow-up fs-1"></i>
+                        <p class="file-drop-prompt mb-0">点击或拖拽文件到此处</p>
+                        <p class="file-name-display text-success"></p>
                     </div>
-                    <div class="col-md-7">
-                        <h6><i class="bi bi-terminal me-2"></i>日志</h6>
-                        <div class="log-area"></div>
-                        <div class="mt-2">
-                            <div class="status-message-container">
-                                <span class="status-message small text-muted">等待上传文件...</span>
-                            </div>
-                            <div class="progress mt-1" role="progressbar" style="height: 5px; display: none;">
-                                <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
-                            </div>
+                </div>
+                <div class="col-md-7">
+                    <h6><i class="bi bi-terminal me-2"></i>日志</h6>
+                    <div class="log-area"></div>
+                    <div class="mt-2">
+                        <div class="status-message-container">
+                            <span class="status-message small text-muted">等待上传文件...</span>
+                        </div>
+                        <div class="progress mt-1" role="progressbar" style="height: 5px; display: none;">
+                            <div class="progress-bar progress-bar-striped progress-bar-animated"
+                                 style="width: 100%"></div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="card-footer d-flex justify-content-between align-items-center">
-                <div class="download-buttons" style="display: none;">
-                    <button class="btn btn-sm btn-success preview-html-btn"><i class="bi bi-eye-fill me-1"></i>预览</button>
-                    <button class="btn btn-sm btn-info download-pdf-btn"><i class="bi bi-file-earmark-pdf-fill me-1"></i>下载 PDF</button>
-                    <div class="btn-group">
-                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
-                           <i class="bi bi-download me-1"></i>下载其他格式
-                        </button>
-                        <ul class="dropdown-menu">
-                            <li><a class="dropdown-item download-html-link" href="#"><i class="bi bi-filetype-html me-2"></i>HTML</a></li>
-                            <li><a class="dropdown-item download-markdown-link" href="#"><i class="bi bi-markdown-fill me-2"></i>Markdown（嵌图）</a></li>
-                            <li><a class="dropdown-item download-markdown-zip-link" href="#"><i class="bi bi-file-zip-fill me-2"></i>Markdown压缩包</a></li>
-                        </ul>
-                    </div>
-                </div>
-                <button class="btn btn-primary start-translate-btn ms-auto"><i class="bi bi-play-fill me-1"></i>开始翻译</button>
-            </div>
         </div>
-    </template>
+        <div class="card-footer d-flex justify-content-between align-items-center">
+            <div class="download-buttons" style="display: none;">
+                <button class="btn btn-sm btn-success preview-html-btn"><i class="bi bi-eye-fill me-1"></i>预览</button>
+                <button class="btn btn-sm btn-info download-pdf-btn"><i class="bi bi-file-earmark-pdf-fill me-1"></i>下载
+                    PDF
+                </button>
+                <div class="btn-group">
+                    <button type="button" class="btn btn-sm btn-secondary dropdown-toggle" data-bs-toggle="dropdown"
+                            aria-expanded="false">
+                        <i class="bi bi-download me-1"></i>下载其他格式
+                    </button>
+                    <ul class="dropdown-menu">
+                        <li><a class="dropdown-item download-html-link" href="#"><i
+                                class="bi bi-filetype-html me-2"></i>HTML</a></li>
+                        <li><a class="dropdown-item download-markdown-link" href="#"><i
+                                class="bi bi-markdown-fill me-2"></i>Markdown（嵌图）</a></li>
+                        <li><a class="dropdown-item download-markdown-zip-link" href="#"><i
+                                class="bi bi-file-zip-fill me-2"></i>Markdown压缩包</a></li>
+                    </ul>
+                </div>
+            </div>
+            <button class="btn btn-primary start-translate-btn ms-auto"><i class="bi bi-play-fill me-1"></i>开始翻译
+            </button>
+        </div>
+    </div>
+</template>
 
-    <!-- Preview Modal -->
-    <div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalTitle" aria-hidden="true">
-        <div class="modal-dialog modal-fullscreen-xl-down">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h5 class="modal-title" id="previewModalTitle">双语预览</h5>
-                    <div class="btn-group me-auto ms-4" role="group">
-                        <button type="button" class="btn btn-sm btn-primary" id="setBilingualViewBtn">双语</button>
-                        <button type="button" class="btn btn-sm btn-outline-primary" id="setTranslatedOnlyViewBtn">仅译文</button>
+<!-- Preview Modal -->
+<div class="modal fade" id="previewModal" tabindex="-1" aria-labelledby="previewModalTitle" aria-hidden="true">
+    <div class="modal-dialog modal-fullscreen-xl-down">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="previewModalTitle">双语预览</h5>
+                <div class="btn-group me-auto ms-4" role="group">
+                    <button type="button" class="btn btn-sm btn-primary" id="setBilingualViewBtn">双语</button>
+                    <button type="button" class="btn btn-sm btn-outline-primary" id="setTranslatedOnlyViewBtn">仅译文
+                    </button>
+                </div>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div class="row h-100 gx-2">
+                    <div class="col-6" id="originalPreviewContainer">
+                        <h6 class="text-center text-muted small">原文</h6>
+                        <div class="preview-pane" id="originalPreviewPane"></div>
+                    </div>
+                    <div class="col-6" id="translatedPreviewContainer">
+                        <h6 class="text-center text-muted small">译文</h6>
+                        <div class="preview-pane">
+                            <iframe id="translatedPreviewFrame" src="about:blank"></iframe>
+                        </div>
                     </div>
-                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-                </div>
-                <div class="modal-body">
-                   <div class="row h-100 gx-2">
-                       <div class="col-6" id="originalPreviewContainer">
-                           <h6 class="text-center text-muted small">原文</h6>
-                           <div class="preview-pane" id="originalPreviewPane"></div>
-                       </div>
-                       <div class="col-6" id="translatedPreviewContainer">
-                           <h6 class="text-center text-muted small">译文</h6>
-                           <div class="preview-pane">
-                               <iframe id="translatedPreviewFrame" src="about:blank"></iframe>
-                           </div>
-                       </div>
-                   </div>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
-                    <button type="button" class="btn btn-primary" id="printFromPreview"><i class="bi bi-printer-fill me-2"></i>打印/保存为PDF</button>
                 </div>
             </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
+                <button type="button" class="btn btn-primary" id="printFromPreview"><i
+                        class="bi bi-printer-fill me-2"></i>打印/保存为PDF
+                </button>
+            </div>
         </div>
     </div>
+</div>
 
-    <!-- Hidden iframe for direct PDF printing -->
-    <iframe id="printFrame" style="display: none;"></iframe>
+<!-- Hidden iframe for direct PDF printing -->
+<iframe id="printFrame" style="display: none;"></iframe>
 
-    <!-- Theme Switcher -->
-    <div class="dropdown theme-switch">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="theme-switcher" data-bs-toggle="dropdown" aria-expanded="false">
-            <i class="bi bi-circle-half"></i>
-        </button>
-        <ul class="dropdown-menu" aria-labelledby="theme-switcher">
-            <li><button class="dropdown-item" type="button" data-bs-theme-value="light"><i class="bi bi-sun-fill me-2"></i> Light</button></li>
-            <li><button class="dropdown-item" type="button" data-bs-theme-value="dark"><i class="bi bi-moon-stars-fill me-2"></i> Dark</button></li>
-            <li><button class="dropdown-item active" type="button" data-bs-theme-value="auto"><i class="bi bi-circle-half me-2"></i> Auto</button></li>
-        </ul>
-    </div>
+<!-- Theme Switcher -->
+<div class="dropdown theme-switch">
+    <button class="btn btn-secondary dropdown-toggle" type="button" id="theme-switcher" data-bs-toggle="dropdown"
+            aria-expanded="false">
+        <i class="bi bi-circle-half"></i>
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="theme-switcher">
+        <li>
+            <button class="dropdown-item" type="button" data-bs-theme-value="light"><i class="bi bi-sun-fill me-2"></i>
+                Light
+            </button>
+        </li>
+        <li>
+            <button class="dropdown-item" type="button" data-bs-theme-value="dark"><i
+                    class="bi bi-moon-stars-fill me-2"></i> Dark
+            </button>
+        </li>
+        <li>
+            <button class="dropdown-item active" type="button" data-bs-theme-value="auto"><i
+                    class="bi bi-circle-half me-2"></i> Auto
+            </button>
+        </li>
+    </ul>
+</div>
 
-    <!-- Bootstrap JS -->
-    <script src="/static/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
+<!-- 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"
+    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'),
         };
 
-        // --- 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; } };
+        elements.taskIdDisplay.textContent = taskId;
 
-        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');
-                }
+        tasks[taskId] = {
+            elements,
+            state: {
+                isTranslating: false,
+                file: null,
+                htmlUrl: null,
+                fileNameStem: null,
+            },
+            intervals: {
+                log: null,
+                status: null
             }
-            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);
-        }
+        addEventListenersToCard(taskId);
 
-        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);
-            };
-        }
+        taskContainer.prepend(cardElement);
+        updateTaskPlaceholderVisibility();
 
-        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,
-                },
-                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];
+        if (!restoreState) {
             saveTaskIds();
-            updateTaskPlaceholderVisibility();
+        } else {
+            // If restoring, immediately check status
+            pollStatus(taskId, true);
         }
+    }
 
-        function addEventListenersToCard(taskId) {
-            const { elements, state } = tasks[taskId];
+    function removeTask(taskId) {
+        stopPolling(taskId);
+        tasks[taskId].elements.card.remove();
+        delete tasks[taskId];
+        saveTaskIds();
+        updateTaskPlaceholderVisibility();
+    }
 
-            elements.removeBtn.addEventListener('click', () => removeTask(taskId));
+    function addEventListenersToCard(taskId) {
+        const {elements, state} = tasks[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);
-                }
+        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);
-                }
+        // 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)
             });
-        }
+            const result = await response.json();
 
-        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)
-                });
-                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;
-            }
-        }
-
-        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;
+            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;
         }
+    }
 
-        // --- 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);
-        }
+    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> 正在取消...`;
 
-        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;
-        }
+        try {
+            const response = await fetch(`/service/cancel/${taskId}`, {method: 'POST'});
+            const result = await response.json();
 
-        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);
+            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>取消翻译`;
         }
+    }
 
-        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);
-                    }
-                    return;
+    // --- 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);
                 }
-                const status = await response.json();
+                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'}`;
+            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.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';
+                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;
+                    // 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.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.previewBtn.onclick = () => setupPreview(taskId);
+                    elements.pdfBtn.onclick = () => downloadPdf(taskId);
 
-                        elements.downloadButtons.style.display = 'flex';
-                    } else {
-                        elements.downloadButtons.style.display = 'none';
-                    }
+                    elements.downloadButtons.style.display = 'flex';
                 } 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';
+            } 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;
+    // --- 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';
+        // 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'];
+        // 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);
-                }
+            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 = '未找到原文文件缓存。';
+                p.textContent = `无法直接预览此文件类型 (${fileType || '未知: ' + fileExtension})。`;
                 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('打印失败，请使用浏览器打印功能。'); }
-            };
+        } else {
+            const p = document.createElement('p');
+            p.className = 'p-3 text-muted';
+            p.textContent = '未找到原文文件缓存。';
+            originalPreviewPane.appendChild(p);
         }
 
-        function downloadPdf(taskId) {
-            const { elements, state } = tasks[taskId];
-            if (!state.htmlUrl) return;
+        // 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();
+            });
 
-            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
+        printFromPreview.onclick = () => {
             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 += " (不可用)";
-                    }
-                });
-
-                defaultParams = await paramsRes.json();
-            } catch (error) {
-                console.error("Initialization failed:", error);
-                alert("页面初始化失败，请检查后端服务是否正常并刷新页面。");
-                return;
+                translatedPreviewFrame.contentWindow.focus();
+                translatedPreviewFrame.contentWindow.print();
+            } catch (e) {
+                alert('打印失败，请使用浏览器打印功能。');
             }
+        };
+    }
 
-            // 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");
+    function downloadPdf(taskId) {
+        const {elements, state} = tasks[taskId];
+        if (!state.htmlUrl) return;
 
-            // Setup sliders
-            setupSlider(chunkSizeSlider, chunkSizeDisplay, chunkSizeReset, 'chunk_size', defaultParams);
-            setupSlider(concurrentSlider, concurrentDisplay, concurrentReset, 'concurrent', defaultParams);
-            setupSlider(temperatureSlider, temperatureDisplay, temperatureReset, 'temperature', defaultParams);
+        elements.pdfBtn.disabled = true;
+        elements.pdfBtn.innerHTML = `<span class="spinner-border spinner-border-sm"></span> 准备中...`;
 
-            // 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("无法从服务器加载任务列表，请检查后台连接。");
+        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 += " (不可用)";
                 }
-                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'));
+            defaultParams = await paramsRes.json();
+        } catch (error) {
+            console.error("Initialization failed:", error);
+            alert("页面初始化失败，请检查后端服务是否正常并刷新页面。");
+            return;
         }
 
-        // --- 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';
-        };
+        // 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");
 
-        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');
+        // 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 {
-                // Set theme based on user's choice (light/dark)
-                document.documentElement.setAttribute('data-bs-theme', theme);
+                createTaskCard(); // Create one new task by default
             }
-        };
+        }
 
-        const showActiveTheme = (theme) => {
-            // Remove active class from all buttons
-            document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-                element.classList.remove('active');
-            });
+        // 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));
 
-            // 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');
-            }
-        };
+        addNewTaskBtn.addEventListener('click', () => createTaskCard());
+        setBilingualViewBtn.addEventListener('click', () => setPreviewDisplayMode('bilingual'));
+        setTranslatedOnlyViewBtn.addEventListener('click', () => setPreviewDisplayMode('translationOnly'));
+    }
 
-        // On page load, set theme and update UI
-        const preferredTheme = getPreferredTheme();
-        setTheme(preferredTheme);
-        showActiveTheme(preferredTheme);
+    // --- 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';
+    };
 
-        // 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');
-            }
+    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 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 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);
         });
+    });
 
 
-        // --- Start the application ---
-        document.addEventListener('DOMContentLoaded', init);
-    </script>
+    // --- Start the application ---
+    document.addEventListener('DOMContentLoaded', init);
+</script>
 </body>
 </html>
\ No newline at end of file
