From fb338f8d4447de1f7659c04c08e3c197dc8d959b Mon Sep 17 00:00:00 2001
From: xunbu <xunbu3@qq.com>
Date: Sun, 11 May 2025 21:57:30 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=9E=E9=80=80=E4=B8=BA=E5=88=9D=E5=A7=8Bht?=
 =?UTF-8?q?ml?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .idea/workspace.xml  |  10 +-
 docutranslate/app.py | 322 ++++++++-----------------------------------
 2 files changed, 62 insertions(+), 270 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 0d6a33a..8be2edf 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -5,14 +5,8 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="6b18b44a-df57-4212-a857-9e291ebe5dd2" name="更改" comment="">
-      <change beforePath="$PROJECT_DIR$/.gitignore" beforeDir="false" afterPath="$PROJECT_DIR$/.gitignore" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/docutranslate/app.py" beforeDir="false" afterPath="$PROJECT_DIR$/docutranslate/app.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/docutranslate/translater.py" beforeDir="false" afterPath="$PROJECT_DIR$/docutranslate/translater.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/docutranslate/utils/convert.py" beforeDir="false" afterPath="$PROJECT_DIR$/docutranslate/utils/convert.py" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/pyproject.toml" beforeDir="false" afterPath="$PROJECT_DIR$/pyproject.toml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/uv.lock" beforeDir="false" afterPath="$PROJECT_DIR$/uv.lock" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -636,7 +630,7 @@
       <workItem from="1746942954889" duration="100000" />
       <workItem from="1746943155810" duration="556000" />
       <workItem from="1746953672715" duration="6973000" />
-      <workItem from="1746963064346" duration="8379000" />
+      <workItem from="1746963064346" duration="8522000" />
     </task>
     <servers />
   </component>
@@ -651,7 +645,7 @@
     <SUITE FILE_PATH="coverage/PDFtranslate$PDFtranslater__1_.coverage" NAME="PDFtranslater (1) 覆盖结果" MODIFIED="1746633258205" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/pdftranslate_packages" />
     <SUITE FILE_PATH="coverage/PDFtranslate$convert.coverage" NAME="convert 覆盖结果" MODIFIED="1746596984213" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/pdftranslate_packages/utils" />
     <SUITE FILE_PATH="coverage/PDFtranslate$agent_utils.coverage" NAME="agent_utils 覆盖结果" MODIFIED="1746617703678" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/pdftranslate_packages/utils" />
-    <SUITE FILE_PATH="coverage/filetranslate$app.coverage" NAME="app 覆盖结果" MODIFIED="1746971401102" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/docutranslate" />
+    <SUITE FILE_PATH="coverage/filetranslate$app.coverage" NAME="app 覆盖结果" MODIFIED="1746971603951" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/docutranslate" />
     <SUITE FILE_PATH="coverage/PDFtranslate$markdown_splitter.coverage" NAME="markdown_splitter 覆盖结果" MODIFIED="1746599883603" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/pdftranslate_packages/utils" />
     <SUITE FILE_PATH="coverage/filetranslate$test4.coverage" NAME="test4 覆盖结果" MODIFIED="1746887036353" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/tests" />
     <SUITE FILE_PATH="coverage/filetranslate$test3.coverage" NAME="test3 覆盖结果" MODIFIED="1746884110572" SOURCE_PROVIDER="com.intellij.coverage.DefaultCoverageFileProvider" RUNNER="coverage.py" COVERAGE_BY_TEST_ENABLED="false" COVERAGE_TRACING_ENABLED="false" WORKING_DIRECTORY="$PROJECT_DIR$/tests" />
diff --git a/docutranslate/app.py b/docutranslate/app.py
index 8c37931..772d868 100644
--- a/docutranslate/app.py
+++ b/docutranslate/app.py
@@ -88,7 +88,6 @@ current_translation_state = {
 templates = Jinja2Templates(directory=".")  # 假设模板在当前目录或使用字符串模板
 
 # --- HTML 模板字符串 ---
-# --- HTML 模板字符串 (修改后) ---
 HTML_TEMPLATE_STR = """
 <!DOCTYPE html>
 <html lang="zh-CN">
@@ -98,277 +97,102 @@ HTML_TEMPLATE_STR = """
     <title>DocuTranslate</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css">
     <style>
-        :root {
-            --font-size: 14px; /* 减小基础字体大小 */
-            --form-element-spacing-vertical: 0.6rem; /* 减小表单元素垂直间距 */
-            --form-element-spacing-horizontal: 0.8rem; /* 调整水平间距 */
-        }
-        body { 
-            padding: 15px; /* 减小 body padding */
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-            font-size: var(--font-size);
-            line-height: 1.5;
-        }
-        .container { 
-            max-width: 800px; /* 稍微减小容器宽度 */
-            margin: auto; 
-        }
-        h1, h3 {
-            margin-bottom: 0.8rem;
-        }
-        h1 a {
-            text-decoration: none;
-            color: var(--pico-h1-color);
-        }
-        h1 a:hover {
-            color: var(--pico-primary-hover);
-        }
-
-        /* 表单元素 */
-        label, legend {
-            font-size: 0.9em; /* 标签字体稍小 */
-            margin-bottom: 0.2rem;
-            font-weight: 500;
-        }
-        input[type="text"],
-        input[type="password"],
-        input[type="file"],
-        select {
-            font-size: 0.9em; /* 输入框字体稍小 */
-            padding: 0.4rem 0.6rem; /* 减小输入框内边距 */
-            margin-bottom: 0.6rem;
-        }
-        input[type="file"] {
-            padding: 0.3rem 0.5rem;
-        }
-
-        /* Details & Summary */
-        details {
-            background-color: var(--pico-card-background-color);
-            border: 1px solid var(--pico-card-border-color);
-            border-radius: var(--pico-border-radius);
-            padding: 0.8rem; /* 调整内边距 */
-            margin-bottom: 1rem;
-        }
-        summary {
-            font-weight: bold;
-            cursor: pointer;
-            font-size: 0.95em; /* 摘要字体大小 */
-            padding: 0.3rem 0;
-        }
-        details[open] > summary {
-            margin-bottom: 0.6rem;
-        }
-
-        /* Fieldset and Checkbox */
-        fieldset {
-            padding: 0.8rem 1rem;
-            margin-top: 0.5rem;
-            border-radius: var(--pico-border-radius);
-        }
-        fieldset legend {
-            padding: 0 0.5rem;
-        }
-        label input[type="checkbox"] { 
-            margin-right: 0.4rem; 
-            vertical-align: middle; 
-            width: 0.9em; height: 0.9em; /* 减小复选框大小 */
-        }
-
-        /* 按钮 */
-        button, a[role="button"] {
-            font-size: 0.85em; /* 减小按钮字体 */
-            padding: 0.5rem 0.8rem; /* 减小按钮内边距 */
-            margin-right: 0.5rem;
-        }
-
-        .grid > div { /* PicoCSS grid 的子元素间距 */
-            margin-bottom: 0; /* 移除 grid 内部div的默认下边距，依赖 input 的 margin-bottom */
-        }
-        .form-group { /* 自定义表单组，用于非 grid 布局 */
-             margin-bottom: 0.8rem;
-        }
-
+        body { padding: 20px; font-family: sans-serif; }
+        .container { max-width: 900px; margin: auto; }
         .log-area {
-            background-color: #f4f6f8; /* 更柔和的背景色 */
-            border: 1px solid #dfe3e6;
+            background-color: #f0f0f0;
+            border: 1px solid #ccc;
             padding: 10px;
-            height: 200px; /* 调整高度 */
+            height: 250px;
             overflow-y: scroll;
             white-space: pre-wrap; 
             word-break: break-all; 
-            font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-            font-size: 0.85em; /* 日志字体稍小 */
-            margin-top: 1rem; /* 调整上边距 */
+            font-family: monospace;
+            font-size: 0.9em;
+            margin-top: 20px;
             line-height: 1.4;
-            border-radius: var(--pico-border-radius);
-        }
-        .error-message { color: var(--pico-del-color); font-weight: bold; font-size: 0.9em; }
-        .success-message { color: var(--pico-ins-color); font-weight: bold; font-size: 0.9em;}
-
-        #resultArea { margin-top: 1.5rem; }
-        #downloadButtons { 
-            display: none; 
-            margin-top: 0.5rem;
-            padding: 0.8rem;
-            background-color: var(--pico-card-sectionning-background-color);
-            border-radius: var(--pico-border-radius);
-        }
-        #downloadButtons h3 {
-            font-size: 1em;
-            margin-top: 0;
-            margin-bottom: 0.5rem;
-        }
-        #customLangInput {
-            display: none; /* Initially hidden */
-            margin-top: 0.3rem;
         }
+        .error-message { color: red; font-weight: bold; }
+        .success-message { color: green; font-weight: bold; }
+        .form-group label { margin-bottom: 0.2rem; display: block;}
+        .form-group input { margin-bottom: 0.8rem; }
+        .button-group { margin-top: 1rem; }
+        .button-group button, .button-group a { margin-right: 0.5rem; }
+        summary { font-weight: bold; cursor: pointer; }
+        label input[type="checkbox"] { margin-right: 0.5rem; vertical-align: middle; }
+        #resultArea { margin-top: 20px; } /* Style for result area */
+        #downloadButtons { display: none; } /* Initially hidden */
     </style>
 </head>
 <body>
     <main class="container">
-        <header style="text-align: center; margin-bottom: 1.5rem;">
-             <h1><a href="https://github.com/xunbu/docutranslate" target="_blank">📄 DocuTranslate</a></h1>
-        </header>
-
-        <form id="translateForm">
+        <h1><a href="https://github.com/xunbu/docutranslate" target="_blank">DocuTranslate</a></h1>
+        <form id="translateForm"> <!-- Removed action and method -->
             <details open>
-                <summary>⚙️ API 配置</summary>
+                <summary>API 配置 (所有均为必填项)</summary>
                 <div class="grid">
-                    <div>
-                        <label for="base_url">API 地址</label>
-                        <input type="text" id="base_url" name="base_url" placeholder="例如: https://api.example.com/v1" required>
+                    <div class="form-group">
+                        <label for="base_url">API 地址 (Base URL)</label>
+                        <input type="text" id="base_url" name="base_url" value="" required>
                     </div>
-                    <div>
-                        <label for="apikey">API 密钥</label>
-                        <input type="password" id="apikey" name="apikey" placeholder="您的 API Key" required>
+                    <div class="form-group">
+                        <label for="apikey">API 密钥 (API Key)</label>
+                        <input type="password" id="apikey" name="apikey" value="" required>
                     </div>
                 </div>
                  <div class="form-group">
-                    <label for="model_id">模型 ID</label>
-                    <input type="text" id="model_id" name="model_id" placeholder="例如: gpt-3.5-turbo" required>
+                    <label for="model_id">模型 ID (Model ID)</label>
+                    <input type="text" id="model_id" name="model_id" value="" required>
                 </div>
             </details>
-
             <div class="form-group" style="margin-top: 1rem;">
-                <label for="file">选择文档</label>
+                <label for="file">待翻译文档</label>
                 <input type="file" id="file" name="file" required>
             </div>
-
             <fieldset>
-                <legend>翻译选项</legend>
-                <div class="grid">
-                    <div>
-                        <label for="to_lang_select">目标语言</label>
-                        <select id="to_lang_select" name="to_lang_select">
-                            <option value="中文">中文 (简体)</option>
-                            <option value="English">English</option>
-                            <option value="日本語">日本語</option>
-                            <option value="한국어">한국어</option>
-                            <option value="Français">Français</option>
-                            <option value="Español">Español</option>
-                            <option value="Deutsch">Deutsch</option>
-                            <option value="Русский">Русский</option>
-                            <option value="custom">自定义...</option>
-                        </select>
-                        <input type="text" id="to_lang_custom" name="to_lang_custom" placeholder="输入自定义目标语言">
-                    </div>
-                     <div> <!-- Placeholder for alignment if needed --> </div>
-                </div>
-                <div style="margin-top: 0.5rem;">
-                    <label for="formula_ocr"><input type="checkbox" id="formula_ocr" name="formula_ocr" role="switch">公式识别</label>
-                    <label for="code_ocr"><input type="checkbox" id="code_ocr" name="code_ocr" role="switch">代码块识别</label>
-                    <label for="refine_markdown"><input type="checkbox" id="refine_markdown" name="refine_markdown" role="switch">优化 Markdown</label>
-                </div>
+                <legend>选项</legend>
+                <label for="to_lang">目标语言: <input type="text" id="to_lang" name="to_lang" value="中文"></label>
+                <label for="formula_ocr"><input type="checkbox" id="formula_ocr" name="formula_ocr">启用公式识别</label>
+                <label for="code_ocr"><input type="checkbox" id="code_ocr" name="code_ocr">启用代码块识别</label>
+                <label for="refine_markdown"><input type="checkbox" id="refine_markdown" name="refine_markdown">翻译前优化 Markdown</label>
             </fieldset>
-
-            <button type="submit" id="submitButton" style="margin-top: 1rem;">开始翻译</button>
+            <button type="submit" id="submitButton">翻译文档</button>
         </form>
 
         <div id="resultArea">
             <p id="statusMessage"></p>
-            <div id="downloadButtons">
-                <h3>下载翻译结果:</h3>
-                <a id="downloadMarkdown" href="#" role="button" class="secondary">下载 Markdown (.md)</a>
-                <a id="downloadHtml" href="#" role="button" class="secondary">下载 HTML (.html)</a>
+            <div id="downloadButtons" class="button-group">
+                <h3>下载：</h3>
+                <a id="downloadMarkdown" href="#" role="button" class="secondary">下载 Markdown</a>
+                <a id="downloadHtml" href="#" role="button" class="secondary">下载 HTML</a>
             </div>
         </div>
 
-        <h3 style="margin-top:1.5rem;">实时日志：</h3>
+        <h3>日志：</h3>
         <div class="log-area" id="logArea"></div>
     </main>
-
     <script>
         const base_url_input = document.getElementById('base_url');
         const apikey_input = document.getElementById('apikey');
         const model_id_input = document.getElementById('model_id');
-
-        const to_lang_select = document.getElementById('to_lang_select');
-        const to_lang_custom_input = document.getElementById('to_lang_custom');
-
+        const to_lang_input = document.getElementById('to_lang');
         const formula_ocr_input = document.getElementById('formula_ocr');
         const code_ocr_input = document.getElementById('code_ocr');
         const refine_markdown_input = document.getElementById('refine_markdown');
 
-        // Function to show/hide custom language input
-        function toggleCustomLangInput() {
-            if (to_lang_select.value === 'custom') {
-                to_lang_custom_input.style.display = 'block';
-                to_lang_custom_input.required = true; // Make custom input required if selected
-            } else {
-                to_lang_custom_input.style.display = 'none';
-                to_lang_custom_input.required = false;
-                to_lang_custom_input.value = ''; // Clear custom input if not selected
-            }
-        }
-        to_lang_select.addEventListener('change', toggleCustomLangInput);
-
-
-        // Load from localStorage
         if (localStorage.getItem('translator_base_url')) base_url_input.value = localStorage.getItem('translator_base_url');
         if (localStorage.getItem('translator_apikey')) apikey_input.value = localStorage.getItem('translator_apikey');
         if (localStorage.getItem('translator_model_id')) model_id_input.value = localStorage.getItem('translator_model_id');
-
-        const storedToLang = localStorage.getItem('translator_to_lang');
-        if (storedToLang) {
-            // Check if stored value is one of the predefined options
-            let foundInSelect = false;
-            for (let i = 0; i < to_lang_select.options.length; i++) {
-                if (to_lang_select.options[i].value === storedToLang) {
-                    to_lang_select.value = storedToLang;
-                    foundInSelect = true;
-                    break;
-                }
-            }
-            if (!foundInSelect && storedToLang) { // If not in select, it was a custom lang
-                to_lang_select.value = 'custom';
-                to_lang_custom_input.value = storedToLang;
-            }
-        } else {
-            to_lang_select.value = '中文'; // Default
-        }
-        toggleCustomLangInput(); // Initial check for custom lang display
-
+        to_lang_input.value = localStorage.getItem('translator_to_lang') || '中文';
         formula_ocr_input.checked = localStorage.getItem('translator_formula_ocr') === 'true';
         code_ocr_input.checked = localStorage.getItem('translator_code_ocr') === 'true';
         refine_markdown_input.checked = localStorage.getItem('translator_refine_markdown') === 'true';
 
-        // Save to localStorage
         function saveToLocalStorage(key, value) { try { localStorage.setItem(key, value); } catch (e) { console.error("Error saving to localStorage:", e); }}
         base_url_input.addEventListener('input', () => saveToLocalStorage('translator_base_url', base_url_input.value));
         apikey_input.addEventListener('input', () => saveToLocalStorage('translator_apikey', apikey_input.value));
         model_id_input.addEventListener('input', () => saveToLocalStorage('translator_model_id', model_id_input.value));
-
-        function saveLanguagePreference() {
-            let langValue = to_lang_select.value;
-            if (langValue === 'custom') {
-                langValue = to_lang_custom_input.value.trim();
-            }
-            saveToLocalStorage('translator_to_lang', langValue);
-        }
-        to_lang_select.addEventListener('change', saveLanguagePreference);
-        to_lang_custom_input.addEventListener('input', saveLanguagePreference);
-
+        to_lang_input.addEventListener('input', () => saveToLocalStorage('translator_to_lang', to_lang_input.value));
         formula_ocr_input.addEventListener('change', () => saveToLocalStorage('translator_formula_ocr', formula_ocr_input.checked));
         code_ocr_input.addEventListener('change', () => saveToLocalStorage('translator_code_ocr', code_ocr_input.checked));
         refine_markdown_input.addEventListener('change', () => saveToLocalStorage('translator_refine_markdown', refine_markdown_input.checked));
@@ -386,42 +210,21 @@ HTML_TEMPLATE_STR = """
                 event.preventDefault();
                 submitButton.disabled = true;
                 submitButton.setAttribute('aria-busy', 'true');
-                submitButton.textContent = '翻译中...'; // Shorter text
+                submitButton.textContent = '处理中...';
                 if(logArea) logArea.innerHTML = '';
                 statusMessageElement.textContent = '';
                 statusMessageElement.className = '';
                 downloadButtonsDiv.style.display = 'none';
 
-                const formData = new FormData();
-                formData.append('base_url', base_url_input.value);
-                formData.append('apikey', apikey_input.value);
-                formData.append('model_id', model_id_input.value);
-                formData.append('file', document.getElementById('file').files[0]);
-
-                let targetLang = to_lang_select.value;
-                if (targetLang === 'custom') {
-                    targetLang = to_lang_custom_input.value.trim();
-                }
-                if (!targetLang) { // Basic validation for custom lang
-                    statusMessageElement.textContent = '请选择或输入有效的目标语言。';
-                    statusMessageElement.className = 'error-message';
-                    submitButton.disabled = false;
-                    submitButton.removeAttribute('aria-busy');
-                    submitButton.textContent = '开始翻译';
-                    return;
-                }
-                formData.append('to_lang', targetLang);
-
-                formData.append('formula_ocr', formula_ocr_input.checked);
-                formData.append('code_ocr', code_ocr_input.checked);
-                formData.append('refine_markdown', refine_markdown_input.checked);
-
+                const formData = new FormData(form);
                 try {
                     const response = await fetch('/translate', { method: 'POST', body: formData });
-                    const resultData = await response.json(); // Assuming server sends JSON
-
-                    if (response.ok && resultData && !resultData.error) {
-                        statusMessageElement.textContent = resultData.message || '翻译成功！';
+                    const resultData = await response.json();
+                    if (resultData.error) {
+                        statusMessageElement.textContent = resultData.message;
+                        statusMessageElement.className = 'error-message';
+                    } else {
+                        statusMessageElement.textContent = resultData.message;
                         statusMessageElement.className = 'success-message';
                         if (resultData.download_ready) {
                             downloadMarkdownLink.href = resultData.markdown_url;
@@ -430,23 +233,19 @@ HTML_TEMPLATE_STR = """
                             downloadHtmlLink.setAttribute('download', resultData.original_filename_stem + '_translated.html');
                             downloadButtonsDiv.style.display = 'block';
                         }
-                    } else {
-                        statusMessageElement.textContent = '翻译失败: ' + (resultData.message || '未知错误');
-                        statusMessageElement.className = 'error-message';
                     }
                 } catch (error) {
                     console.error('Fetch error:', error);
-                    statusMessageElement.textContent = '请求翻译失败，请检查网络或服务状态。错误: ' + error.message;
+                    statusMessageElement.textContent = '请求翻译失败，请检查网络或服务状态。';
                     statusMessageElement.className = 'error-message';
                 } finally {
                     submitButton.disabled = false;
                     submitButton.removeAttribute('aria-busy');
-                    submitButton.textContent = '开始翻译';
+                    submitButton.textContent = '翻译文档';
                 }
             });
         }
 
-        // EventSource for logs (unchanged, but ensure it works with the new layout)
         if (typeof(EventSource) !== "undefined") {
             let eventSource;
             function connectEventSource() {
@@ -455,10 +254,8 @@ HTML_TEMPLATE_STR = """
                 }
                 eventSource = new EventSource("/stream-logs");
                 eventSource.onmessage = function(event) {
-                    if (logArea && event.data !== ":heartbeat") {
-                        const logEntryDiv = document.createElement('div');
-                        logEntryDiv.innerHTML = event.data; // Assuming event.data is already HTML escaped and includes <br>
-                        logArea.appendChild(logEntryDiv);
+                    if (logArea && event.data !== ":heartbeat") { // Ignore heartbeat messages for display
+                        logArea.innerHTML += event.data; 
                         logArea.scrollTop = logArea.scrollHeight; 
                     }
                 };
@@ -471,11 +268,12 @@ HTML_TEMPLATE_STR = """
                         logArea.appendChild(errorMsgDiv);
                         logArea.scrollTop = logArea.scrollHeight;
                     }
-                    if (eventSource) eventSource.close();
-                    setTimeout(connectEventSource, 5000);
+                    eventSource.close(); // Close the failed source
+                    // Attempt to reconnect after a delay
+                    setTimeout(connectEventSource, 5000); // Reconnect after 5 seconds
                 };
             }
-            connectEventSource();
+            connectEventSource(); // Initial connection
         } else { 
             if(logArea) logArea.innerHTML = "抱歉，您的浏览器不支持实时日志更新。";
         }