优化

app.py

@@ -43,8 +43,8 @@ def get_default_data():
     # Provide default data for the frontend
     return jsonify({
         "title": "示例文章",
-        "content": "这是一个默认的示例文本，用于展示翻译功能。请尝试上传文件或直接编辑此处内容。",
-        "translated_content": "This is a default sample text to demonstrate the translation function. Please try uploading a file or editing the content here directly."
+        "content": "This is a default English sample text to demonstrate page-wide translation. Try uploading a file to populate the content area.",
+        "translated_content": ""
     })
 
 if __name__ == "__main__":

static/main.js

@@ -1,163 +1,47 @@
-const { createApp, ref, onMounted } = Vue;
+const { createApp, ref } = Vue;
 
-const app = createApp({
-    delimiters: ['${', '}'],
-    setup() {
-        const model = ref({
-            title: '',
-            content: '',
-            translated_content: ''
-        });
-        const errorMessage = ref('');
-        const successMessage = ref('');
-        const fileInput = ref(null);
+const englishArticle = `The internet is a vast, resilient system made of simple parts that cooperate at scale. 
+At its core, it is a network of networks: independent autonomous systems that agree on a small set of protocols, mostly TCP/IP, BGP, DNS, and HTTP. 
+When you open a browser and type a URL, dozens of subsystems wake up. Your operating system consults DNS to turn a human-friendly name into an address. 
+Routers forward packets hop by hop, using BGP to learn where distant networks live. Firewalls inspect flows, CDNs cache assets near you, and TLS establishes a secure channel.
 
-        // Fetch default data on load
-        onMounted(async () => {
-            try {
-                const response = await fetch('/api/data');
-                if (response.ok) {
-                    const data = await response.json();
-                    model.value = data;
-                }
-            } catch (e) {
-                console.error("Failed to fetch default data", e);
-            }
-        });
+Despite the sophistication, each layer has a narrow responsibility. IP moves packets. TCP ensures reliable delivery and fair sharing. DNS answers questions. 
+HTTP carries documents and APIs. This separation of concerns lets the system evolve. We can improve congestion control without touching domain names, or deploy a new web framework without changing routers.
 
-        const triggerUpload = () => {
-            fileInput.value.click();
-        };
+Scale emerges from replication and caching. Popular content migrates closer to users, and failures are isolated rather than catastrophic. 
+Operational excellence—observability, automation, incident response—turns fragile stacks into services people trust. 
+Healthy teams invest in boring engineering: clear interfaces, runbooks, and capacity planning. The internet favors designs that degrade gracefully instead of perfectly.
 
-        const handleFileUpload = async (event) => {
-            const file = event.target.files[0];
-            if (!file) return;
+For developers, the lesson is pragmatic architecture. Prefer simple protocols. Measure before optimizing. Embrace backpressure and timeouts. 
+Design for retries and idempotency. Document APIs as contracts. Use encryption by default. 
+Most outages begin as tiny mismatches between assumptions at different layers. The remedy is empathy: understand adjacent systems deeply enough to anticipate their failure modes.
 
-            const formData = new FormData();
-            formData.append('file', file);
+The future will bring new transports, edge computation, and AI-assisted operations. Still, the fundamentals persist: packets, names, routes, and requests. 
+If we keep interfaces clean and responsibilities crisp, we can adopt innovations without breaking the web’s social contract—reachability and openness. 
+The internet succeeds not because it is perfect but because it is simple enough to fix while running.`;
 
-            try {
-                errorMessage.value = '';
-                successMessage.value = '正在上传...';
-                
-                const response = await fetch('/upload', {
-                    method: 'POST',
-                    body: formData
-                });
-                
-                const result = await response.json();
-                
-                if (response.ok) {
-                    successMessage.value = `文件 "${result.filename}" 上传成功！`;
-                    // If it's a text file, we might want to read it (simplified for now)
-                    if (file.type.startsWith('text/')) {
-                        const text = await file.text();
-                        model.value.content = text;
-                    } else {
-                        model.value.content = `[文件已上传: ${result.filename}]\n(此文件类型暂不支持直接预览，但已保存到服务器)`;
-                    }
-                } else {
-                    errorMessage.value = result.error || '上传失败';
-                    successMessage.value = '';
-                }
-            } catch (e) {
-                errorMessage.value = '上传过程中发生错误: ' + e.message;
-                successMessage.value = '';
-            } finally {
-                // Reset input
-                event.target.value = '';
-            }
-        };
+const chineseArticle = `互联网是由大量简单组件协同工作的弹性系统。本质上它是“网络的网络”：彼此独立的自治系统基于少量协议达成一致，主要包括 TCP/IP、BGP、DNS 和 HTTP。
+当你在浏览器中输入 URL 时，数十个子系统被唤醒。操���系统通过 DNS 将人类可读的名字解析为地址；路由器依靠 BGP 按跳转发数据包以找到远端网络；防火墙检查流量，CDN 在你附近缓存资源，TLS 建立安全通道。
 
-        const setGoogTransCookie = (srcLang, targetLang) => {
-            try {
-                const hostParts = location.hostname.split(".");
-                const baseDomain = hostParts.length > 1
-                    ? "." + hostParts.slice(-2).join(".")
-                    : location.hostname;
-                const cookieVal = "/".concat(srcLang, "/").concat(targetLang);
-                document.cookie = "googtrans=" + cookieVal + ";domain=" + baseDomain + ";path=/";
-                document.cookie = "googtrans=" + cookieVal + ";domain=" + location.hostname + ";path=/";
-            } catch (e) {
-                console.error("Cookie set failed", e);
-            }
-        };
+尽管复杂，每一层的职责都很单一：IP 负责传递数据包；TCP 保证可靠传输与公平共享；DNS 用来回答名字查询；HTTP 承载文档与 API。职责分离让系统可演化：我们可以改进拥塞控制而无需触碰域名系统，也能部署新的 Web 框架而不影响路由器。
 
-        const triggerGoogleTranslate = (targetLang) => {
-            const combo = document.querySelector(".goog-te-combo");
-            if (combo) {
-                combo.value = targetLang;
-                combo.dispatchEvent(new Event("change"));
-                return true;
-            }
-            return false;
-        };
+规模来自复制与缓存。热门内容被迁移到更靠近用户的位置，故障被隔离而非牵一发而动全身。可观测性、自动化与事件响应等运营能力把脆弱的技术栈变成值得信赖的服务。成熟团队在“无聊工程”上持续投入：清晰的接口、运行手册与容量规划。互联网偏好在退化中保持可用的设计，而不是追求完美。
 
-        const ensureTranslateReady = () => {
-            if (window.google && window.google.translate) return Promise.resolve(true);
-            return new Promise((resolve) => {
-                let tries = 0;
-                const timer = setInterval(() => {
-                    tries++;
-                    if (window.google && window.google.translate) {
-                        clearInterval(timer);
-                        resolve(true);
-                    }
-                    if (tries > 100) {
-                        clearInterval(timer);
-                        resolve(false);
-                    }
-                }, 50);
-            });
-        };
+对开发者而言，启示是务实的架构：倾向选择简单协议；在优化前先度量；接受背压与超时；为重试与幂等而设计；把 API 当作契约来文档化；默认启用加密。多数故障始于不同层之间的细微假设不一致，解决之道是同理心：足够理解邻近系统，从而预见其失效模式。
 
-        const translate = async () => {
-            try {
-                successMessage.value = '正在启动翻译...';
-                const ready = await ensureTranslateReady();
-                setGoogTransCookie("auto", "zh-CN"); // Use auto detect for source
-                
-                if (!triggerGoogleTranslate("zh-CN") && !ready) {
-                    errorMessage.value = "翻译组件尚未加载，请稍后重试。";
-                } else {
-                    // Google Translate Widget translates the whole page. 
-                    // To make it feel like "Source -> Target", we can rely on the widget 
-                    // translating the "Source" text area (if it's not a textarea, but a div).
-                    // Note: Google Translate often skips textareas. 
-                    // For this simple wrapper, we trigger the full page translate.
-                    successMessage.value = "翻译已触发 (全页模式)";
-                    
-                    // Simple hack: copy source to target to simulate 'action' if widget fails
-                    // model.value.translated_content = "翻译功能依赖 Google Translate 插件，请查看页面变化。";
-                }
-            } catch (e) {
-                errorMessage.value = "翻译出错: " + e.message;
-            }
-        };
+未来将带来新的传输方式、边缘计算与 AI 辅助运维，但基本面依旧：数据包、名字、路由与请求。只要保持接口干净、职责清晰，我们就能在不破坏 Web 的社会契约（可达与开放）前提下拥抱创新。互联网之所以成功，并非因为完美，而是因为它足够简单，可以在运行中被修复。`;
 
-        return {
-            model,
-            triggerUpload,
-            handleFileUpload,
-            translate,
-            fileInput,
-            errorMessage,
-            successMessage
-        };
-    }
-});
-
-app.mount('#app');
-
-// Keep the global init function for Google Translate
-window.googleTranslateElementInit = function () {
-    new google.translate.TranslateElement(
-        {
-            pageLanguage: "auto",
-            includedLanguages: "zh-CN,en",
-            layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
-            autoDisplay: false,
-        },
-        "google_translate_element"
-    );
-};
+createApp({
+  delimiters: ['${', '}'],
+  setup() {
+    const article = ref(englishArticle);
+    const translated = ref(false);
+    const translate = () => {
+      if (!translated.value) {
+        article.value = chineseArticle;
+        translated.value = true;
+      }
+    };
+    return { article, translate };
+  }
+}).mount('#app');

templates/index.html

@@ -43,19 +43,16 @@
         .btn-secondary:hover {
             background-color: #d1d5db;
         }
-        textarea {
+        .display-box {
             width: 100%;
-            height: 400px;
+            min-height: 260px;
             padding: 1rem;
             border: 1px solid #d1d5db;
             border-radius: 0.375rem;
-            resize: vertical;
-            font-family: inherit;
-        }
-        textarea:focus {
-            outline: none;
-            border-color: #2563eb;
-            ring: 2px solid #2563eb;
+            background: #ffffff;
+            color: #111827;
+            white-space: pre-wrap;
+            line-height: 1.6;
         }
         [v-cloak] {
             display: none;
@@ -66,52 +63,21 @@
     <div id="app" v-cloak class="container">
         <header class="mb-8 flex justify-between items-center">
             <h1 class="text-3xl font-bold text-gray-900">Web 翻译助手</h1>
-            <div class="space-x-4">
-                <button @click="triggerUpload" class="btn btn-secondary">
-                    📄 上传文档
-                </button>
-                <input type="file" ref="fileInput" @change="handleFileUpload" style="display: none" accept=".txt,.pdf,.doc,.docx">
-                <button @click="translate" class="btn">
-                    🌐 开始翻译
-                </button>
-            </div>
+            <button @click="translate" class="btn">
+                翻译
+            </button>
         </header>
 
-        <main class="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <!-- Source Column -->
-            <div class="card">
-                <div class="mb-4 flex justify-between items-center">
-                    <h2 class="text-xl font-semibold">原文</h2>
-                    <span class="text-sm text-gray-500">检测语言: 自动</span>
-                </div>
-                <textarea v-model="model.content" placeholder="在此输入或粘贴要翻译的文本..."></textarea>
-            </div>
-
-            <!-- Target Column -->
+        <main>
             <div class="card">
                 <div class="mb-4 flex justify-between items-center">
-                    <h2 class="text-xl font-semibold">译文</h2>
-                    <span class="text-sm text-gray-500">目标语言: 中文 (简体)</span>
+                    <h2 class="text-xl font-semibold">文章</h2>
                 </div>
-                <textarea v-model="model.translated_content" readonly placeholder="翻译结果将显示在这里..."></textarea>
+                <div class="display-box" v-text="article"></div>
             </div>
         </main>
-
-        <footer class="mt-12 text-center text-gray-500 text-sm">
-            <p>&copy; 2024 Web Translator Assistant. All rights reserved.</p>
-            <div v-if="errorMessage" class="mt-4 text-red-600 bg-red-50 p-2 rounded inline-block">
-                ${ errorMessage }
-            </div>
-            <div v-if="successMessage" class="mt-4 text-green-600 bg-green-50 p-2 rounded inline-block">
-                ${ successMessage }
-            </div>
-        </footer>
     </div>
 
-    <!-- Google Translate Element (Hidden but functional) -->
-    <div id="google_translate_element" style="display:none"></div>
-
     <script src="/static/main.js"></script>
-    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 </body>
 </html>