feat: add track point

feat: add deploy script
feat: add translate
2026-01-27 23:44:45 +08:00 · 2026-01-26 07:10:58 +08:00 · 2026-01-24 13:53:50 +08:00
83 changed files with 1777 additions and 72 deletions
--- a/app.cloud/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2
+++ b/app.cloud/assets/KaTeX_AMS-Regular-BQhdFMY1.woff2
--- a/app.cloud/assets/KaTeX_AMS-Regular-DMm9YOAa.woff
+++ b/app.cloud/assets/KaTeX_AMS-Regular-DMm9YOAa.woff
--- a/app.cloud/assets/KaTeX_AMS-Regular-DRggAlZN.ttf
+++ b/app.cloud/assets/KaTeX_AMS-Regular-DRggAlZN.ttf
--- a/app.cloud/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf
+++ b/app.cloud/assets/KaTeX_Caligraphic-Bold-ATXxdsX0.ttf
--- a/app.cloud/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff
+++ b/app.cloud/assets/KaTeX_Caligraphic-Bold-BEiXGLvX.woff
--- a/app.cloud/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2
+++ b/app.cloud/assets/KaTeX_Caligraphic-Bold-Dq_IR9rO.woff2
--- a/app.cloud/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff
+++ b/app.cloud/assets/KaTeX_Caligraphic-Regular-CTRA-rTL.woff
--- a/app.cloud/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2
+++ b/app.cloud/assets/KaTeX_Caligraphic-Regular-Di6jR-x-.woff2
--- a/app.cloud/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf
+++ b/app.cloud/assets/KaTeX_Caligraphic-Regular-wX97UBjC.ttf
--- a/app.cloud/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf
+++ b/app.cloud/assets/KaTeX_Fraktur-Bold-BdnERNNW.ttf
--- a/app.cloud/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff
+++ b/app.cloud/assets/KaTeX_Fraktur-Bold-BsDP51OF.woff
--- a/app.cloud/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2
+++ b/app.cloud/assets/KaTeX_Fraktur-Bold-CL6g_b3V.woff2
--- a/app.cloud/assets/KaTeX_Fraktur-Regular-CB_wures.ttf
+++ b/app.cloud/assets/KaTeX_Fraktur-Regular-CB_wures.ttf
--- a/app.cloud/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2
+++ b/app.cloud/assets/KaTeX_Fraktur-Regular-CTYiF6lA.woff2
--- a/app.cloud/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff
+++ b/app.cloud/assets/KaTeX_Fraktur-Regular-Dxdc4cR9.woff
--- a/app.cloud/assets/KaTeX_Main-Bold-Cx986IdX.woff2
+++ b/app.cloud/assets/KaTeX_Main-Bold-Cx986IdX.woff2
--- a/app.cloud/assets/KaTeX_Main-Bold-Jm3AIy58.woff
+++ b/app.cloud/assets/KaTeX_Main-Bold-Jm3AIy58.woff
--- a/app.cloud/assets/KaTeX_Main-Bold-waoOVXN0.ttf
+++ b/app.cloud/assets/KaTeX_Main-Bold-waoOVXN0.ttf
--- a/app.cloud/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2
+++ b/app.cloud/assets/KaTeX_Main-BoldItalic-DxDJ3AOS.woff2
--- a/app.cloud/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf
+++ b/app.cloud/assets/KaTeX_Main-BoldItalic-DzxPMmG6.ttf
--- a/app.cloud/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff
+++ b/app.cloud/assets/KaTeX_Main-BoldItalic-SpSLRI95.woff
--- a/app.cloud/assets/KaTeX_Main-Italic-3WenGoN9.ttf
+++ b/app.cloud/assets/KaTeX_Main-Italic-3WenGoN9.ttf
--- a/app.cloud/assets/KaTeX_Main-Italic-BMLOBm91.woff
+++ b/app.cloud/assets/KaTeX_Main-Italic-BMLOBm91.woff
--- a/app.cloud/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2
+++ b/app.cloud/assets/KaTeX_Main-Italic-NWA7e6Wa.woff2
--- a/app.cloud/assets/KaTeX_Main-Regular-B22Nviop.woff2
+++ b/app.cloud/assets/KaTeX_Main-Regular-B22Nviop.woff2
--- a/app.cloud/assets/KaTeX_Main-Regular-Dr94JaBh.woff
+++ b/app.cloud/assets/KaTeX_Main-Regular-Dr94JaBh.woff
--- a/app.cloud/assets/KaTeX_Main-Regular-ypZvNtVU.ttf
+++ b/app.cloud/assets/KaTeX_Main-Regular-ypZvNtVU.ttf
--- a/app.cloud/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf
+++ b/app.cloud/assets/KaTeX_Math-BoldItalic-B3XSjfu4.ttf
--- a/app.cloud/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2
+++ b/app.cloud/assets/KaTeX_Math-BoldItalic-CZnvNsCZ.woff2
--- a/app.cloud/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff
+++ b/app.cloud/assets/KaTeX_Math-BoldItalic-iY-2wyZ7.woff
--- a/app.cloud/assets/KaTeX_Math-Italic-DA0__PXp.woff
+++ b/app.cloud/assets/KaTeX_Math-Italic-DA0__PXp.woff
--- a/app.cloud/assets/KaTeX_Math-Italic-flOr_0UB.ttf
+++ b/app.cloud/assets/KaTeX_Math-Italic-flOr_0UB.ttf
--- a/app.cloud/assets/KaTeX_Math-Italic-t53AETM-.woff2
+++ b/app.cloud/assets/KaTeX_Math-Italic-t53AETM-.woff2
--- a/app.cloud/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf
+++ b/app.cloud/assets/KaTeX_SansSerif-Bold-CFMepnvq.ttf
--- a/app.cloud/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2
+++ b/app.cloud/assets/KaTeX_SansSerif-Bold-D1sUS0GD.woff2
--- a/app.cloud/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff
+++ b/app.cloud/assets/KaTeX_SansSerif-Bold-DbIhKOiC.woff
--- a/app.cloud/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2
+++ b/app.cloud/assets/KaTeX_SansSerif-Italic-C3H0VqGB.woff2
--- a/app.cloud/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff
+++ b/app.cloud/assets/KaTeX_SansSerif-Italic-DN2j7dab.woff
--- a/app.cloud/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf
+++ b/app.cloud/assets/KaTeX_SansSerif-Italic-YYjJ1zSn.ttf
--- a/app.cloud/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf
+++ b/app.cloud/assets/KaTeX_SansSerif-Regular-BNo7hRIc.ttf
--- a/app.cloud/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff
+++ b/app.cloud/assets/KaTeX_SansSerif-Regular-CS6fqUqJ.woff
--- a/app.cloud/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2
+++ b/app.cloud/assets/KaTeX_SansSerif-Regular-DDBCnlJ7.woff2
--- a/app.cloud/assets/KaTeX_Script-Regular-C5JkGWo-.ttf
+++ b/app.cloud/assets/KaTeX_Script-Regular-C5JkGWo-.ttf
--- a/app.cloud/assets/KaTeX_Script-Regular-D3wIWfF6.woff2
+++ b/app.cloud/assets/KaTeX_Script-Regular-D3wIWfF6.woff2
--- a/app.cloud/assets/KaTeX_Script-Regular-D5yQViql.woff
+++ b/app.cloud/assets/KaTeX_Script-Regular-D5yQViql.woff
--- a/app.cloud/assets/KaTeX_Size1-Regular-C195tn64.woff
+++ b/app.cloud/assets/KaTeX_Size1-Regular-C195tn64.woff
--- a/app.cloud/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf
+++ b/app.cloud/assets/KaTeX_Size1-Regular-Dbsnue_I.ttf
--- a/app.cloud/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2
+++ b/app.cloud/assets/KaTeX_Size1-Regular-mCD8mA8B.woff2
--- a/app.cloud/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf
+++ b/app.cloud/assets/KaTeX_Size2-Regular-B7gKUWhC.ttf
--- a/app.cloud/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2
+++ b/app.cloud/assets/KaTeX_Size2-Regular-Dy4dx90m.woff2
--- a/app.cloud/assets/KaTeX_Size2-Regular-oD1tc_U0.woff
+++ b/app.cloud/assets/KaTeX_Size2-Regular-oD1tc_U0.woff
--- a/app.cloud/assets/KaTeX_Size3-Regular-CTq5MqoE.woff
+++ b/app.cloud/assets/KaTeX_Size3-Regular-CTq5MqoE.woff
--- a/app.cloud/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf
+++ b/app.cloud/assets/KaTeX_Size3-Regular-DgpXs0kz.ttf
--- a/app.cloud/assets/KaTeX_Size4-Regular-BF-4gkZK.woff
+++ b/app.cloud/assets/KaTeX_Size4-Regular-BF-4gkZK.woff
--- a/app.cloud/assets/KaTeX_Size4-Regular-DWFBv043.ttf
+++ b/app.cloud/assets/KaTeX_Size4-Regular-DWFBv043.ttf
--- a/app.cloud/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2
+++ b/app.cloud/assets/KaTeX_Size4-Regular-Dl5lxZxV.woff2
--- a/app.cloud/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff
+++ b/app.cloud/assets/KaTeX_Typewriter-Regular-C0xS9mPB.woff
--- a/app.cloud/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2
+++ b/app.cloud/assets/KaTeX_Typewriter-Regular-CO6r4hn1.woff2
--- a/app.cloud/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf
+++ b/app.cloud/assets/KaTeX_Typewriter-Regular-D3Ib7_Hf.ttf
--- a/app.cloud/assets/index-DKZ56yfB.css
+++ b/app.cloud/assets/index-DKZ56yfB.css
--- a/app.cloud/assets/index-NjWMZQkP.js
+++ b/app.cloud/assets/index-NjWMZQkP.js
--- a/app.cloud/assets/vendor-katex-p018AHG0.js
+++ b/app.cloud/assets/vendor-katex-p018AHG0.js
--- a/app.cloud/assets/vendor-markdown-C0b4qDwm.js
+++ b/app.cloud/assets/vendor-markdown-C0b4qDwm.js
--- a/app.cloud/assets/vendor-react-C6WG4Va-.js
+++ b/app.cloud/assets/vendor-react-C6WG4Va-.js
--- a/app.cloud/assets/vendor-supabase-l0sNRNKZ.js
+++ b/app.cloud/assets/vendor-supabase-l0sNRNKZ.js
@@ -0,0 +1 @@
+
--- a/app.cloud/index.html
+++ b/app.cloud/index.html
@@ -0,0 +1,44 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>⚡️ TexPixel - 公式识别工具</title>
+
+  <!-- SEO Meta Tags -->
+  <meta name="description" content="在线公式识别工具，支持印刷体和手写体数学公式识别，快速准确地将图片中的数学公式转换为可编辑文本。" />
+  <meta name="keywords"
+    content="公式识别,数学公式,OCR,手写公式识别,印刷体识别,AI识别,数学工具,免费,handwriting,formula,recognition,ocr,handwriting,recognition,math,handwriting,free" />
+  <meta name="author" content="TexPixel Team" />
+  <meta name="robots" content="index, follow" />
+
+  <!-- Open Graph Meta Tags -->
+  <meta property="og:title" content="TexPixel - 公式识别工具" />
+  <meta property="og:description" content="在线公式识别工具，支持印刷体和手写体数学公式识别，快速准确地将图片中的数学公式转换为可编辑文本。" />
+  <meta property="og:type" content="website" />
+  <meta property="og:url" content="https://texpixel.com/" />
+  <meta property="og:image" content="https://cdn.texpixel.com/public/logo.png?x-oss-process=image/resize,w_600" />
+
+  <!-- Twitter Card Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="TexPixel - 公式识别工具" />
+  <meta name="twitter:description" content="在线公式识别工具，支持印刷体和手写体数学公式识别。" />
+  <meta name="twitter:image" content="https://cdn.texpixel.com/public/logo.png?x-oss-process=image/resize,w_600" />
+
+  <!-- baidu -->
+  <meta name="baidu-site-verification" content="codeva-8zU93DeGgH" />
+
+  <script type="module" crossorigin src="/assets/index-NjWMZQkP.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/vendor-react-C6WG4Va-.js">
+  <link rel="modulepreload" crossorigin href="/assets/vendor-katex-p018AHG0.js">
+  <link rel="modulepreload" crossorigin href="/assets/vendor-markdown-C0b4qDwm.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-DKZ56yfB.css">
+</head>
+
+<body>
+  <div id="root"></div>
+</body>
+
+</html>
--- a/deploy_dev.sh
+++ b/deploy_dev.sh
@@ -0,0 +1,203 @@
+#!/bin/bash
+
+# Document AI Frontend 部署脚本
+# 功能：构建项目并部署到 ubuntu 服务器
+
+set -e  # 遇到错误立即退出
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 服务器配置
+ubuntu_HOST="ubuntu"
+DEPLOY_PATH="/var/www"
+DEPLOY_NAME="app.cloud"
+# Sudo 密码（如果需要，建议配置无密码 sudo 更安全）
+# 配置无密码 sudo: 在服务器上运行: echo "username ALL=(ALL) NOPASSWD: ALL" | sudo tee /etc/sudoers.d/username
+SUDO_PASSWORD="1231"
+
+# 打印带颜色的消息
+print_info() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# 检查命令是否存在
+check_command() {
+    if ! command -v $1 &> /dev/null; then
+        print_error "$1 命令未找到，请先安装"
+        exit 1
+    fi
+}
+
+# 部署到服务器
+deploy_to_server() {
+    local server=$1
+    print_info "开始部署到 ${server}..."
+    
+    # 上传构建产物（app.cloud 目录）
+    print_info "上传 ${DEPLOY_NAME} 目录到 ${server}..."
+    scp_output=$(scp -r ${DEPLOY_NAME} ${server}:~ 2>&1)
+    scp_exit_code=$?
+    if [ $scp_exit_code -eq 0 ]; then
+        print_success "文件上传成功"
+    else
+        print_error "文件上传失败，请检查 SSH 连接和权限"
+        echo "$scp_output" | sed 's/^/  /'
+        return 1
+    fi
+    
+    # SSH 执行部署操作
+    print_info "在 ${server} 上执行部署操作..."
+    print_info "部署路径: ${DEPLOY_PATH}/${DEPLOY_NAME}"
+    # 注意：密码通过环境变量传递，避免在命令行中暴露
+    ssh_output=$(SSH_SUDO_PASSWORD="${SUDO_PASSWORD}" ssh ${server} bash << SSH_EOF
+        set -e
+        DEPLOY_PATH="${DEPLOY_PATH}"
+        DEPLOY_NAME="${DEPLOY_NAME}"
+        SUDO_PASSWORD="\${SSH_SUDO_PASSWORD}"
+        
+        # 检查部署目录是否存在
+        if [ ! -d "\${DEPLOY_PATH}" ]; then
+            echo "错误：部署目录 \${DEPLOY_PATH} 不存在，请检查路径是否正确"
+            exit 1
+        fi
+        
+        # 检查是否有权限写入（尝试创建测试文件）
+        if ! touch "\${DEPLOY_PATH}/.deploy_test" 2>/dev/null; then
+            echo "提示：没有直接写入权限，将使用 sudo 执行操作"
+            USE_SUDO=1
+        else
+            rm -f "\${DEPLOY_PATH}/.deploy_test"
+            USE_SUDO=0
+        fi
+        
+        # 备份旧版本（如果存在）
+        if [ -d "\${DEPLOY_PATH}/\${DEPLOY_NAME}" ]; then
+            echo "备份旧版本..."
+            if [ "\$USE_SUDO" = "1" ]; then
+                echo "\${SUDO_PASSWORD}" | sudo -S rm -rf "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" 2>/dev/null || true
+                echo "\${SUDO_PASSWORD}" | sudo -S mv "\${DEPLOY_PATH}/\${DEPLOY_NAME}" "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" || { echo "错误：备份失败，权限不足"; exit 1; }
+            else
+                rm -rf "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" 2>/dev/null || true
+                mv "\${DEPLOY_PATH}/\${DEPLOY_NAME}" "\${DEPLOY_PATH}/\${DEPLOY_NAME}_bak" || { echo "错误：备份失败"; exit 1; }
+            fi
+        fi
+        
+        # 移动新版本到部署目录（覆盖现有目录）
+        if [ -d ~/\${DEPLOY_NAME} ]; then
+            echo "移动新版本到部署目录..."
+            if [ "\$USE_SUDO" = "1" ]; then
+                echo "\${SUDO_PASSWORD}" | sudo -S mv ~/\${DEPLOY_NAME} "\${DEPLOY_PATH}/" || { echo "错误：移动文件失败，权限不足"; exit 1; }
+            else
+                mv ~/\${DEPLOY_NAME} "\${DEPLOY_PATH}/" || { echo "错误：移动文件失败"; exit 1; }
+            fi
+            echo "部署完成！"
+        else
+            echo "错误：找不到 ~/\${DEPLOY_NAME} 目录"
+            exit 1
+        fi
+        
+        # 重新加载 nginx（如果配置了）
+        if command -v nginx &> /dev/null; then
+            echo "重新加载 nginx..."
+            echo "\${SUDO_PASSWORD}" | sudo -S nginx -t && echo "\${SUDO_PASSWORD}" | sudo -S nginx -s reload || echo "警告：nginx 重新加载失败，请手动检查"
+        fi
+SSH_EOF
+    )
+    
+    ssh_exit_code=$?
+    
+    # 显示 SSH 输出
+    if [ -n "$ssh_output" ]; then
+        echo "$ssh_output" | sed 's/^/  /'
+    fi
+    
+    if [ $ssh_exit_code -eq 0 ]; then
+        print_success "${server} 部署成功！"
+    else
+        print_error "${server} 部署失败！"
+        print_error "请检查："
+        print_error "  1. SSH 连接是否正常"
+        print_error "  2. 部署目录 ${DEPLOY_PATH} 是否存在"
+        print_error "  3. 是否有 sudo 权限（如果需要）"
+        print_error "  4. 上传的文件 ~/${DEPLOY_NAME} 是否存在"
+        return 1
+    fi
+}
+
+# 主函数
+main() {
+    print_info "=========================================="
+    print_info "Document AI Frontend 部署脚本"
+    print_info "=========================================="
+    echo ""
+    
+    # 检查必要的命令
+    print_info "检查环境..."
+    check_command "npm"
+    check_command "scp"
+    check_command "ssh"
+    
+    # 步骤1: 构建项目
+    print_info "步骤 1/2: 构建项目（测试环境）..."
+    if npm run build:dev; then
+        print_success "构建完成！"
+    else
+        print_error "构建失败！"
+        exit 1
+    fi
+    echo ""
+    
+    # 检查 dist 目录是否存在
+    if [ ! -d "dist" ]; then
+        print_error "dist 目录不存在，构建可能失败"
+        exit 1
+    fi
+    
+    # 重命名 dist 为 app.cloud
+    print_info "重命名 dist 为 ${DEPLOY_NAME}..."
+    if [ -d "${DEPLOY_NAME}" ]; then
+        rm -rf "${DEPLOY_NAME}"
+    fi
+    mv dist "${DEPLOY_NAME}"
+    print_success "重命名完成"
+    echo ""
+    
+    # 步骤2: 部署到 ubuntu
+    print_info "步骤 2/2: 部署到 ubuntu..."
+    if deploy_to_server ${ubuntu_HOST}; then
+        print_success "ubuntu 部署完成"
+    else
+        print_error "ubuntu 部署失败"
+        exit 1
+    fi
+    echo ""
+    
+    # 完成
+    print_info "清理临时文件..."
+    # 可以选择是否删除本地的 app.cloud 目录
+    # rm -rf ${DEPLOY_NAME}
+    
+    print_success "=========================================="
+    print_success "部署完成！"
+    print_success "=========================================="
+}
+
+# 运行主函数
+main
--- a/deploy_prod.sh
+++ b/deploy_prod.sh
@@ -0,0 +1,145 @@
+#!/bin/bash
+
+# Document AI Frontend 部署脚本
+# 功能：构建项目并部署到 ecs 服务器
+
+set -e  # 遇到错误立即退出
+
+# 颜色定义
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# 服务器配置
+ECS_HOST="ecs"
+DEPLOY_PATH="/texpixel"
+
+# 打印带颜色的消息
+print_info() {
+    echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+print_success() {
+    echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+print_warning() {
+    echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+print_error() {
+    echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# 检查命令是否存在
+check_command() {
+    if ! command -v $1 &> /dev/null; then
+        print_error "$1 命令未找到，请先安装"
+        exit 1
+    fi
+}
+
+# 部署到服务器
+deploy_to_server() {
+    local server=$1
+    print_info "开始部署到 ${server}..."
+    
+    # 上传构建产物
+    print_info "上传 dist 目录到 ${server}..."
+    if scp -r dist ${server}:~ > /dev/null 2>&1; then
+        print_success "文件上传成功"
+    else
+        print_error "文件上传失败"
+        return 1
+    fi
+    
+    # SSH 执行部署操作
+    print_info "在 ${server} 上执行部署操作..."
+    ssh ${server} << EOF
+        set -e
+        cd ${DEPLOY_PATH}
+        
+        # 备份旧版本
+        if [ -d "dist" ]; then
+            echo "备份旧版本..."
+            rm -rf dist_bak/
+            mv dist dist_bak
+        fi
+        
+        # 移动新版本
+        if [ -d ~/dist ]; then
+            mv ~/dist .
+            echo "部署完成！"
+        else
+            echo "错误：找不到 ~/dist 目录"
+            exit 1
+        fi
+        
+        # 重新加载 nginx（如果配置了）
+        if command -v nginx &> /dev/null; then
+            echo "重新加载 nginx..."
+            nginx -t && nginx -s reload || echo "警告：nginx 重新加载失败，请手动检查"
+        fi
+EOF
+    
+    if [ $? -eq 0 ]; then
+        print_success "${server} 部署成功！"
+    else
+        print_error "${server} 部署失败！"
+        return 1
+    fi
+}
+
+# 主函数
+main() {
+    print_info "=========================================="
+    print_info "Document AI Frontend 部署脚本"
+    print_info "=========================================="
+    echo ""
+    
+    # 检查必要的命令
+    print_info "检查环境..."
+    check_command "npm"
+    check_command "scp"
+    check_command "ssh"
+    
+    # 步骤1: 构建项目
+    print_info "步骤 1/2: 构建项目（生产环境）..."
+    if npm run build:prod; then
+        print_success "构建完成！"
+    else
+        print_error "构建失败！"
+        exit 1
+    fi
+    echo ""
+    
+    # 检查 dist 目录是否存在
+    if [ ! -d "dist" ]; then
+        print_error "dist 目录不存在，构建可能失败"
+        exit 1
+    fi
+    
+    # 步骤2: 部署到 ecs
+    print_info "步骤 2/2: 部署到 ecs..."
+    if deploy_to_server ${ECS_HOST}; then
+        print_success "ecs 部署完成"
+    else
+        print_error "ecs 部署失败"
+        exit 1
+    fi
+    echo ""
+    
+    # 完成
+    print_info "清理临时文件..."
+    # 可以选择是否删除本地的 dist 目录
+    # rm -rf dist
+    
+    print_success "=========================================="
+    print_success "部署完成！"
+    print_success "=========================================="
+}
+
+# 运行主函数
+main
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState, useRef, useCallback } from 'react';
 import { useAuth } from './contexts/AuthContext';
+import { useLanguage } from './contexts/LanguageContext';
 import { uploadService } from './lib/uploadService';
 import { FileRecord, RecognitionResult } from './types';
 import { TaskStatus, TaskHistoryItem } from './types/api';
@@ -8,15 +9,18 @@ import Navbar from './components/Navbar';
 import FilePreview from './components/FilePreview';
 import ResultPanel from './components/ResultPanel';
 import UploadModal from './components/UploadModal';
+import UserGuide from './components/UserGuide';

 const PAGE_SIZE = 6;

 function App() {
  const { user, initializing } = useAuth();
+  const { t } = useLanguage();
  const [files, setFiles] = useState<FileRecord[]>([]);
  const [selectedFileId, setSelectedFileId] = useState<string | null>(null);
  const [selectedResult, setSelectedResult] = useState<RecognitionResult | null>(null);
  const [showUploadModal, setShowUploadModal] = useState(false);
+  const [showUserGuide, setShowUserGuide] = useState(false);
  const [loading, setLoading] = useState(false);

  // Pagination state
@@ -41,6 +45,20 @@ function App() {

  const selectedFile = files.find((f) => f.id === selectedFileId) || null;

+  useEffect(() => {
+    const handleStartGuide = () => setShowUserGuide(true);
+    window.addEventListener('start-user-guide', handleStartGuide);
+
+    // Check for first-time user
+    const hasSeenGuide = localStorage.getItem('hasSeenGuide');
+    if (!hasSeenGuide) {
+      setTimeout(() => setShowUserGuide(true), 1500);
+      localStorage.setItem('hasSeenGuide', 'true');
+    }
+
+    return () => window.removeEventListener('start-user-guide', handleStartGuide);
+  }, []);
+
  useEffect(() => {
    if (!initializing && user && !hasLoadedFiles.current) {
      hasLoadedFiles.current = true;
@@ -352,7 +370,7 @@ function App() {
            return f;
          }));

-          alert('Task timeout: Recognition took too long.');
+          alert(t.alerts.taskTimeout);
        }

      } catch (error) {
@@ -366,7 +384,7 @@ function App() {
            if (f.id === fileId) return { ...f, status: 'failed' };
            return f;
          }));
-          alert('Task timeout or network error.');
+          alert(t.alerts.networkError);
        }
      }
    }, 2000); // Poll every 2 seconds
@@ -415,7 +433,7 @@ function App() {
      }
    } catch (error) {
      console.error('Error uploading files:', error);
-      alert('Upload failed: ' + (error instanceof Error ? error.message : 'Unknown error'));
+      alert(`${t.alerts.uploadFailed}: ` + (error instanceof Error ? error.message : 'Unknown error'));
    } finally {
      setLoading(false);
    }
@@ -426,7 +444,7 @@ function App() {
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-          <p className="text-gray-600">Loading...</p>
+          <p className="text-gray-600">{t.common.loading}</p>
        </div>
      </div>
    );
@@ -484,11 +502,16 @@ function App() {
          />
        )}

+        <UserGuide
+          isOpen={showUserGuide}
+          onClose={() => setShowUserGuide(false)}
+        />
+
        {loading && (
          <div className="fixed inset-0 bg-black bg-opacity-30 flex items-center justify-center z-50">
            <div className="bg-white rounded-xl shadow-xl p-8">
              <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
-              <p className="text-gray-900 font-medium">Processing...</p>
+              <p className="text-gray-900 font-medium">{t.common.processing}</p>
            </div>
          </div>
        )}
--- a/src/components/AuthModal.tsx
+++ b/src/components/AuthModal.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { X } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
+import { useLanguage } from '../contexts/LanguageContext';

 interface AuthModalProps {
  onClose: () => void;
@@ -8,6 +9,7 @@ interface AuthModalProps {

 export default function AuthModal({ onClose }: AuthModalProps) {
  const { signIn, signUp } = useAuth();
+  const { t } = useLanguage();
  const [isSignUp, setIsSignUp] = useState(false);
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
@@ -41,7 +43,7 @@ export default function AuthModal({ onClose }: AuthModalProps) {
      <div className="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
        <div className="flex justify-between items-center mb-6">
          <h2 className="text-2xl font-bold text-gray-900">
-            {isSignUp ? '注册账号' : '登录账号'}
+            {isSignUp ? t.auth.signUpTitle : t.auth.signInTitle}
          </h2>
          <button
            onClick={onClose}
@@ -54,7 +56,7 @@ export default function AuthModal({ onClose }: AuthModalProps) {
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
-              邮箱
+              {t.auth.email}
            </label>
            <input
              type="email"
@@ -68,7 +70,7 @@ export default function AuthModal({ onClose }: AuthModalProps) {

          <div>
            <label className="block text-sm font-medium text-gray-700 mb-1">
-              密码
+              {t.auth.password}
            </label>
            <input
              type="password"
@@ -83,7 +85,7 @@ export default function AuthModal({ onClose }: AuthModalProps) {

          {error && (
            <div className="p-3 bg-red-100 border border-red-400 text-red-700 rounded-lg text-sm font-medium animate-pulse">
-              错误: {error}
+              {t.auth.error}: {error}
            </div>
          )}

@@ -92,7 +94,7 @@ export default function AuthModal({ onClose }: AuthModalProps) {
            disabled={loading}
            className="w-full py-3 px-4 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium disabled:opacity-80 disabled:cursor-wait"
          >
-            {isSignUp ? '注册' : '登录'}
+            {isSignUp ? t.auth.signUp : t.auth.signIn}
          </button>
        </form>

@@ -101,7 +103,7 @@ export default function AuthModal({ onClose }: AuthModalProps) {
            onClick={() => setIsSignUp(!isSignUp)}
            className="text-sm text-blue-600 hover:text-blue-700"
          >
-            {isSignUp ? '已有账号？去登录' : '没有账号？去注册'}
+            {isSignUp ? t.auth.hasAccount : t.auth.noAccount}
          </button>
        </div>
      </div>
--- a/src/components/ExportSidebar.tsx
+++ b/src/components/ExportSidebar.tsx
@@ -5,6 +5,8 @@ import { convertMathmlToOmml, wrapOmmlForClipboard } from '../lib/ommlConverter'
 import { generateImageFromElement, copyImageToClipboard, downloadImage } from '../lib/imageGenerator';
 import { API_BASE_URL } from '../config/env';
 import { tokenManager } from '../lib/api';
+import { trackExportEvent } from '../lib/analytics';
+import { useLanguage } from '../contexts/LanguageContext';

 interface ExportSidebarProps {
  isOpen: boolean;
@@ -23,7 +25,89 @@ interface ExportOption {
  extension?: string;
 }

+// Helper function to add mml: prefix to MathML
+const addMMLPrefix = (mathml: string): string | null => {
+  try {
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(mathml, 'application/xml');
+    
+    // Check for parse errors
+    const parseError = xmlDoc.getElementsByTagName("parsererror");
+    if (parseError.length > 0) {
+      return null;
+    }
+
+    // Create new document with mml namespace
+    const newDoc = document.implementation.createDocument(
+      'http://www.w3.org/1998/Math/MathML',
+      'mml:math',
+      null
+    );
+    
+    const newMathElement = newDoc.documentElement;
+    
+    // Copy display attribute if present
+    const displayAttr = xmlDoc.documentElement.getAttribute('display');
+    if (displayAttr) {
+      newMathElement.setAttribute('display', displayAttr);
+    }
+
+    // Recursive function to process nodes
+    const processNode = (node: Node, newParent: Element) => {
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const element = node as Element;
+        // Create new element with mml: prefix in the target document
+        const newElement = newDoc.createElementNS(
+          'http://www.w3.org/1998/Math/MathML',
+          'mml:' + element.localName
+        );
+        
+        // Copy attributes
+        for (let i = 0; i < element.attributes.length; i++) {
+          const attr = element.attributes[i];
+          // Skip xmlns attributes as we handle them explicitly
+          if (attr.name.startsWith('xmlns')) continue;
+          
+          newElement.setAttributeNS(
+            attr.namespaceURI,
+            attr.name,
+            attr.value
+          );
+        }
+        
+        // Process children
+        Array.from(element.childNodes).forEach(child => {
+          processNode(child, newElement);
+        });
+        
+        newParent.appendChild(newElement);
+      } else if (node.nodeType === Node.TEXT_NODE) {
+        newParent.appendChild(newDoc.createTextNode(node.nodeValue || ''));
+      }
+    };
+    
+    // Process all children of the root math element
+    Array.from(xmlDoc.documentElement.childNodes).forEach(child => {
+      processNode(child, newMathElement);
+    });
+    
+    // Serialize
+    const serializer = new XMLSerializer();
+    let prefixedMathML = serializer.serializeToString(newDoc);
+    
+    // Clean up xmlns
+    prefixedMathML = prefixedMathML.replace(/ xmlns(:mml)?="[^"]*"/g, '');
+    prefixedMathML = prefixedMathML.replace(/<mml:math>/, '<mml:math xmlns:mml="http://www.w3.org/1998/Math/MathML">');
+    
+    return prefixedMathML;
+  } catch (err) {
+    console.error('Failed to process MathML:', err);
+    return null;
+  }
+};
+
 export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebarProps) {
+  const { t } = useLanguage();
  const [copiedId, setCopiedId] = useState<string | null>(null);
  const [exportingId, setExportingId] = useState<string | null>(null);

@@ -60,6 +144,12 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
      category: 'Code',
      getContent: (r) => r.mathml_content
    },
+    {
+      id: 'mathml_mml',
+      label: 'MathML (MML)',
+      category: 'Code',
+      getContent: (r) => r.mathml_content ? addMMLPrefix(r.mathml_content) : null
+    },
    {
      id: 'mathml_word',
      label: 'Word MathML',
@@ -127,7 +217,7 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
      }, 1000);
    } catch (err) {
      console.error('Export failed:', err);
-      alert('导出失败，请重试');
+      alert(t.export.failed);
    } finally {
      setExportingId(null);
    }
@@ -160,13 +250,22 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
      }, 1000);
    } catch (err) {
      console.error('Failed to generate image:', err);
-      alert(`生成图片失败: ${err}`);
+      alert(`${t.export.imageFailed}: ${err}`);
    } finally {
      setExportingId(null);
    }
  };

  const handleAction = async (option: ExportOption) => {
+    // Analytics tracking
+    if (result?.id) {
+      trackExportEvent(
+        result.id,
+        option.id,
+        exportOptions.map(o => o.id)
+      );
+    }
+
    // Handle DOCX export via API
    if (option.id === 'docx') {
      await handleFileExport('docx');
@@ -228,9 +327,9 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
  };

  const categories: { id: ExportCategory; icon: LucideIcon; label: string }[] = [
-    { id: 'Code', icon: Code2, label: 'Code' },
-    { id: 'Image', icon: ImageIcon, label: 'Image' },
-    { id: 'File', icon: FileText, label: 'File' },
+    { id: 'Code', icon: Code2, label: t.export.categories.code },
+    { id: 'Image', icon: ImageIcon, label: t.export.categories.image },
+    { id: 'File', icon: FileText, label: t.export.categories.file },
  ];

  return (
@@ -251,7 +350,7 @@ export default function ExportSidebar({ isOpen, onClose, result }: ExportSidebar
        `}
      >
        <div className="flex items-center justify-between px-6 py-5 border-b border-gray-100 shrink-0">
-          <h2 className="text-lg font-bold text-gray-900">Export</h2>
+          <h2 className="text-lg font-bold text-gray-900">{t.export.title}</h2>
          <button onClick={onClose} className="p-2 hover:bg-gray-100 rounded-full transition-colors">
            <X size={20} className="text-gray-500" />
          </button>
--- a/src/components/FilePreview.tsx
+++ b/src/components/FilePreview.tsx
@@ -1,12 +1,14 @@
 import { useState } from 'react';
 import { ChevronLeft, ChevronRight, File as FileIcon, MinusCircle, PlusCircle } from 'lucide-react';
 import { FileRecord } from '../types';
+import { useLanguage } from '../contexts/LanguageContext';

 interface FilePreviewProps {
  file: FileRecord | null;
 }

 export default function FilePreview({ file }: FilePreviewProps) {
+  const { t } = useLanguage();
  const [zoom, setZoom] = useState(100);
  const [page, setPage] = useState(1);
  const totalPages = 1;
@@ -16,13 +18,13 @@ export default function FilePreview({ file }: FilePreviewProps) {

  if (!file) {
    return (
-      <div className="flex-1 flex flex-col items-center justify-center bg-white p-8 text-center border border-white border-solid">
+      <div className="flex-1 flex flex-col items-center justify-center bg-white p-8 text-center border border-white border-solid" id="file-preview-empty">
        <div className="w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mb-6 shadow-inner">
          <FileIcon size={48} className="text-gray-900" />
        </div>
-        <h3 className="text-xl font-semibold text-gray-900 mb-2">Upload file</h3>
+        <h3 className="text-xl font-semibold text-gray-900 mb-2">{t.common.upload}</h3>
        <p className="text-gray-500 max-w-xs">
-          Click, Drop, or Paste a file to start parsing
+          {t.sidebar.uploadInstruction}
        </p>
      </div>
    );
@@ -68,7 +70,7 @@ export default function FilePreview({ file }: FilePreviewProps) {
            <button
              onClick={handleZoomOut}
              className="p-1 hover:bg-white hover:shadow-sm rounded-md text-gray-500 transition-all"
-              title="缩小"
+              title={t.common.preview}
            >
              <MinusCircle size={16} />
            </button>
@@ -78,7 +80,7 @@ export default function FilePreview({ file }: FilePreviewProps) {
            <button
              onClick={handleZoomIn}
              className="p-1 hover:bg-white hover:shadow-sm rounded-md text-gray-500 transition-all"
-              title="放大"
+              title={t.common.preview}
            >
              <PlusCircle size={16} />
            </button>
--- a/src/components/LeftSidebar.tsx
+++ b/src/components/LeftSidebar.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { Upload, LogIn, LogOut, FileText, Clock, ChevronLeft, ChevronRight, Settings, History, MousePointerClick, FileUp, ClipboardPaste, Loader2 } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
+import { useLanguage } from '../contexts/LanguageContext';
 import { FileRecord } from '../types';
 import AuthModal from './AuthModal';

@@ -30,11 +31,13 @@ export default function LeftSidebar({
  onLoadMore,
 }: LeftSidebarProps) {
  const { user, signOut } = useAuth();
+  const { t } = useLanguage();
  const [showAuthModal, setShowAuthModal] = useState(false);
  const [isDragging, setIsDragging] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const listRef = useRef<HTMLDivElement>(null);

+  // ... (rest of the logic remains the same)
  // Handle scroll to load more
  const handleScroll = useCallback(() => {
    if (!listRef.current || loadingMore || !hasMore) return;
@@ -116,13 +119,13 @@ export default function LeftSidebar({
        <button
          onClick={onUploadClick}
          className="p-3 rounded-xl bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-600/20 transition-all mb-6"
-          title="Upload"
+          title={t.common.upload}
        >
          <Upload size={20} />
        </button>

        <div className="flex-1 w-full flex flex-col items-center gap-4">
-          <button className="p-2 text-gray-400 hover:text-gray-900 transition-colors" title="History">
+          <button className="p-2 text-gray-400 hover:text-gray-900 transition-colors" title={t.common.history}>
            <History size={20} />
          </button>
        </div>
@@ -130,7 +133,7 @@ export default function LeftSidebar({
        <button
          onClick={() => !user && setShowAuthModal(true)}
          className="p-3 rounded-lg text-gray-600 hover:bg-gray-200 transition-colors mt-auto"
-          title={user ? 'Signed In' : 'Sign In'}
+          title={user ? 'Signed In' : t.common.login}
        >
          <LogIn size={20} />
        </button>
@@ -145,8 +148,8 @@ export default function LeftSidebar({
        <div className="p-6 pb-4">
          <div className="flex items-start justify-between mb-6">
            <div>
-              <h2 className="text-lg font-bold text-gray-900 leading-tight">Formula Recognize</h2>
-              <p className="text-xs text-gray-500 mt-1">Support handwriting and printed formulas</p>
+              <h2 className="text-lg font-bold text-gray-900 leading-tight">{t.sidebar.title}</h2>
+              <p className="text-xs text-gray-500 mt-1">{t.sidebar.subtitle}</p>
            </div>
            <button
              onClick={onToggleCollapse}
@@ -156,7 +159,7 @@ export default function LeftSidebar({
            </button>
          </div>

-          <div className="mb-2">
+          <div className="mb-2" id="sidebar-upload-area">
            <div
              onDragOver={handleDragOver}
              onDragLeave={handleDragLeave}
@@ -181,18 +184,19 @@ export default function LeftSidebar({
              <div className="w-12 h-12 bg-gray-100 text-gray-600 rounded-full flex items-center justify-center mx-auto mb-3 group-hover:scale-110 transition-transform">
                <Upload size={24} />
              </div>
-              <div className="flex items-center justify-center gap-4 mt-2 text-xs text-gray-400">
+              <p className="text-xs text-gray-500 mb-2">{t.sidebar.uploadInstruction}</p>
+              <div className="flex items-center justify-center gap-4 text-xs text-gray-400">
                <div className="flex items-center gap-1">
                  <MousePointerClick className="w-3.5 h-3.5" />
-                  <span>Click</span>
+                  <span>{t.common.click}</span>
                </div>
                <div className="flex items-center gap-1">
                  <FileUp className="w-3.5 h-3.5" />
-                  <span>Drop</span>
+                  <span>{t.common.drop}</span>
                </div>
                <div className="flex items-center gap-1">
                  <ClipboardPaste className="w-3.5 h-3.5" />
-                  <span>Paste</span>
+                  <span>{t.common.paste}</span>
                </div>
              </div>
            </div>
@@ -200,10 +204,10 @@ export default function LeftSidebar({
        </div>

        {/* Middle Area: History */}
-        <div className="flex-1 overflow-hidden flex flex-col px-4">
+        <div className="flex-1 overflow-hidden flex flex-col px-4" id="sidebar-history">
          <div className="flex items-center gap-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-2">
            <Clock size={14} />
-            <span>History</span>
+            <span>{t.sidebar.historyHeader}</span>
          </div>

          <div
@@ -214,12 +218,12 @@ export default function LeftSidebar({
            {!user ? (
              <div className="text-center py-12 text-gray-400 text-sm">
                <div className="mb-2 opacity-50"><FileText size={40} className="mx-auto" /></div>
-                Please login to view history
+                {t.sidebar.pleaseLogin}
              </div>
            ) : files.length === 0 ? (
              <div className="text-center py-12 text-gray-400 text-sm">
                <div className="mb-2 opacity-50"><FileText size={40} className="mx-auto" /></div>
-                No history records
+                {t.sidebar.noHistory}
              </div>
            ) : (
              <>
@@ -256,13 +260,13 @@ export default function LeftSidebar({
                {loadingMore && (
                  <div className="flex items-center justify-center py-3 text-gray-400">
                    <Loader2 size={18} className="animate-spin" />
-                    <span className="ml-2 text-xs">Loading...</span>
+                    <span className="ml-2 text-xs">{t.common.loading}</span>
                  </div>
                )}
                {/* End of list indicator */}
                {!hasMore && files.length > 0 && (
                  <div className="text-center py-3 text-xs text-gray-400">
-                    No more records
+                    {t.sidebar.noMore}
                  </div>
                )}
              </>
@@ -285,7 +289,7 @@ export default function LeftSidebar({
              <button
                onClick={() => signOut()}
                className="p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded-md transition-colors"
-                title="Logout"
+                title={t.common.logout}
              >
                <LogOut size={16} />
              </button>
@@ -296,7 +300,7 @@ export default function LeftSidebar({
              className="w-full py-2.5 px-4 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors flex items-center justify-center gap-2 text-sm font-medium shadow-lg shadow-gray-900/10"
            >
              <LogIn size={18} />
-              Login / Register
+              {t.common.login}
            </button>
          )}
        </div>
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,11 +1,15 @@
 import { useState, useRef, useEffect } from 'react';
-import { Mail, Users, MessageCircle, ChevronDown, Check, Heart, X } from 'lucide-react';
+import { Mail, Users, MessageCircle, ChevronDown, Check, Heart, X, Languages, HelpCircle } from 'lucide-react';
+import { useLanguage } from '../contexts/LanguageContext';

 export default function Navbar() {
+  const { language, setLanguage, t } = useLanguage();
  const [showContact, setShowContact] = useState(false);
  const [showReward, setShowReward] = useState(false);
+  const [showLangMenu, setShowLangMenu] = useState(false);
  const [copied, setCopied] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
+  const langMenuRef = useRef<HTMLDivElement>(null);

  const handleCopyQQ = async () => {
    await navigator.clipboard.writeText('1018282100');
@@ -19,6 +23,9 @@ export default function Navbar() {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setShowContact(false);
      }
+      if (langMenuRef.current && !langMenuRef.current.contains(event.target as Node)) {
+        setShowLangMenu(false);
+      }
    };

    document.addEventListener('mousedown', handleClickOutside);
@@ -37,8 +44,59 @@ export default function Navbar() {
        </span>
      </div>

-      {/* Right: Reward & Contact Buttons */}
+      {/* Right: Actions */}
      <div className="flex items-center gap-3">
+        {/* Language Switcher */}
+        <div className="relative" ref={langMenuRef}>
+          <button
+            onClick={() => setShowLangMenu(!showLangMenu)}
+            className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
+            title="Switch Language"
+          >
+            <Languages size={18} />
+            <span className="hidden sm:inline">{language === 'en' ? 'English' : '简体中文'}</span>
+            <ChevronDown size={14} className={`transition-transform duration-200 ${showLangMenu ? 'rotate-180' : ''}`} />
+          </button>
+
+          {showLangMenu && (
+            <div className="absolute right-0 top-full mt-2 w-32 bg-white rounded-xl shadow-lg border border-gray-200 py-1 z-50 animate-in fade-in slide-in-from-top-2 duration-200">
+              <button
+                onClick={() => {
+                  setLanguage('en');
+                  setShowLangMenu(false);
+                }}
+                className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === 'en' ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
+              >
+                English
+                {language === 'en' && <Check size={14} />}
+              </button>
+              <button
+                onClick={() => {
+                  setLanguage('zh');
+                  setShowLangMenu(false);
+                }}
+                className={`w-full flex items-center justify-between px-4 py-2 text-sm transition-colors hover:bg-gray-50 ${language === 'zh' ? 'text-blue-600 font-medium' : 'text-gray-700'}`}
+              >
+                简体中文
+                {language === 'zh' && <Check size={14} />}
+              </button>
+            </div>
+          )}
+        </div>
+
+        {/* User Guide Button */}
+        <button
+          id="guide-button"
+          className="flex items-center gap-2 px-3 py-2 hover:bg-gray-100 rounded-lg text-gray-700 text-sm font-medium transition-colors"
+          onClick={() => {
+            // This will be handled in App.tsx via a custom event or shared state
+            window.dispatchEvent(new CustomEvent('start-user-guide'));
+          }}
+        >
+          <HelpCircle size={18} />
+          <span className="hidden sm:inline">{t.common.guide}</span>
+        </button>
+
        {/* Reward Button */}
        <div className="relative">
          <button
@@ -46,7 +104,7 @@ export default function Navbar() {
            className="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-rose-500 to-pink-500 hover:from-rose-600 hover:to-pink-600 rounded-lg text-white text-sm font-medium transition-all shadow-sm hover:shadow-md"
          >
            <Heart size={14} className="fill-white" />
-            <span>赞赏</span>
+            <span>{t.common.reward}</span>
          </button>

          {/* Reward Modal */}
@@ -60,7 +118,7 @@ export default function Navbar() {
                onClick={e => e.stopPropagation()}
              >
                <div className="flex items-center justify-between mb-4">
-                  <span className="text-lg font-bold text-gray-900">微信赞赏码</span>
+                  <span className="text-lg font-bold text-gray-900">{t.navbar.rewardTitle}</span>
                  <button
                    onClick={() => setShowReward(false)}
                    className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
@@ -71,12 +129,12 @@ export default function Navbar() {
                <div className="flex flex-col items-center">
                  <img
                    src="https://cdn.texpixel.com/public/rewardcode.png"
-                    alt="微信赞赏码"
+                    alt={t.navbar.rewardTitle}
                    className="w-64 h-64 object-contain rounded-lg shadow-sm"
                  />
                  <p className="text-sm text-gray-500 text-center mt-4">
-                    感谢您的支持与鼓励 ❤️<br />
-                    <span className="text-xs text-gray-400 mt-1 block">您的支持是我们持续更新的动力</span>
+                    {t.navbar.rewardThanks}<br />
+                    <span className="text-xs text-gray-400 mt-1 block">{t.navbar.rewardSubtitle}</span>
                  </p>
                </div>
              </div>
@@ -91,7 +149,7 @@ export default function Navbar() {
            className="flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-700 text-sm font-medium transition-colors"
          >
            <MessageCircle size={14} />
-            <span>Contact Us</span>
+            <span>{t.common.contactUs}</span>
            <ChevronDown
              size={14}
              className={`transition-transform duration-200 ${showContact ? 'rotate-180' : ''}`}
@@ -109,7 +167,7 @@ export default function Navbar() {
                  <Mail size={16} className="text-blue-600" />
                </div>
                <div>
-                  <div className="text-xs text-gray-500">Email</div>
+                  <div className="text-xs text-gray-500">{t.common.email}</div>
                  <div className="text-sm font-medium text-gray-900">yogecoder@gmail.com</div>
                </div>
              </a>
@@ -126,7 +184,7 @@ export default function Navbar() {
                </div>
                <div>
                  <div className={`text-xs transition-colors ${copied ? 'text-green-600 font-medium' : 'text-gray-500'}`}>
-                    {copied ? 'Copied!' : 'QQ Group (Click to Copy)'}
+                    {copied ? t.common.copied : t.common.qqGroup}
                  </div>
                  <div className="text-sm font-medium text-gray-900">1018282100</div>
                </div>
--- a/src/components/ResultPanel.tsx
+++ b/src/components/ResultPanel.tsx
@@ -7,6 +7,7 @@ import rehypeKatex from 'rehype-katex';
 import 'katex/dist/katex.min.css';
 import { RecognitionResult } from '../types';
 import ExportSidebar from './ExportSidebar';
+import { useLanguage } from '../contexts/LanguageContext';

 interface ResultPanelProps {
  result: RecognitionResult | null;
@@ -67,6 +68,7 @@ function preprocessLatex(content: string): string {
 }

 export default function ResultPanel({ result, fileStatus }: ResultPanelProps) {
+  const { t } = useLanguage();
  const [isExportSidebarOpen, setIsExportSidebarOpen] = useState(false);

  if (!result) {
@@ -75,44 +77,45 @@ export default function ResultPanel({ result, fileStatus }: ResultPanelProps) {
        <div className="h-full flex flex-col items-center justify-center bg-white text-center p-8">
          <div className="w-16 h-16 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mb-6"></div>
          <h3 className="text-xl font-semibold text-gray-900 mb-2">
-            {fileStatus === 'pending' ? 'Waiting in queue...' : 'Analyzing...'}
+            {fileStatus === 'pending' ? t.resultPanel.waitingQueue : t.resultPanel.analyzing}
          </h3>
          <p className="text-gray-500 max-w-sm">
            {fileStatus === 'pending'
-              ? 'Your file is in the queue, please wait.'
-              : 'Texpixel is processing your file, this may take a moment.'}
+              ? t.resultPanel.queueSubtitle
+              : t.resultPanel.processingSubtitle}
          </p>
        </div>
      );
    }

    return (
-      <div className="h-full flex flex-col items-center justify-center bg-white text-center p-8">
+      <div className="h-full flex flex-col items-center justify-center bg-white text-center p-8" id="result-empty-state">
        <div className="w-32 h-32 bg-gray-100 rounded-full flex items-center justify-center mb-6 shadow-inner">
          <Code2 size={48} className="text-gray-900" />
        </div>
-        <h3 className="text-xl font-semibold text-gray-900 mb-2">Waiting for recognition result</h3>
+        <h3 className="text-xl font-semibold text-gray-900 mb-2">{t.resultPanel.waitingTitle}</h3>
        <p className="text-gray-500 max-w-sm">
-          After uploading the file, Texpixel will automatically recognize and display the result here
+          {t.resultPanel.waitingSubtitle}
        </p>
      </div>
    );
  }

  return (
-    <div className="flex flex-col h-full bg-white relative overflow-hidden">
+    <div className="flex flex-col h-full bg-white relative overflow-hidden" id="result-panel-content">
      {/* Top Header */}
      <div className="h-16 px-6 border-b border-gray-200 flex items-center justify-between bg-white shrink-0 z-10">
        <div className="flex items-center gap-4">
-          <h2 className="text-lg font-bold text-gray-900">Markdown</h2>
+          <h2 className="text-lg font-bold text-gray-900">{t.resultPanel.markdown}</h2>
        </div>

        <button
+          id="export-button"
          onClick={() => setIsExportSidebarOpen(true)}
          className={`px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-gray-800 transition-colors flex items-center gap-2 shadow-sm ${isExportSidebarOpen ? 'opacity-0 pointer-events-none' : ''}`}
        >
          <Download size={16} />
-          Export
+          {t.common.export}
        </button>
      </div>

--- a/src/components/UploadModal.tsx
+++ b/src/components/UploadModal.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useState, useEffect, useRef } from 'react';
 import { Upload, X, MousePointerClick, FileUp, ClipboardPaste } from 'lucide-react';
+import { useLanguage } from '../contexts/LanguageContext';

 interface UploadModalProps {
  onClose: () => void;
@@ -7,6 +8,7 @@ interface UploadModalProps {
 }

 export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
+  const { t } = useLanguage();
  const [dragActive, setDragActive] = useState(false);
  const fileInputRef = useRef<HTMLInputElement>(null);

@@ -75,7 +77,7 @@ export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-white rounded-xl shadow-xl max-w-2xl w-full p-6">
        <div className="flex justify-between items-center mb-6">
-          <h2 className="text-2xl font-bold text-gray-900">上传文件</h2>
+          <h2 className="text-2xl font-bold text-gray-900">{t.uploadModal.title}</h2>
          <button
            onClick={onClose}
            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
@@ -99,6 +101,7 @@ export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
            <Upload size={32} />
          </div>

+          <p className="text-sm text-gray-600 mb-1">{t.sidebar.uploadInstruction}</p>
          <input
            ref={fileInputRef}
            type="file"
@@ -108,22 +111,22 @@ export default function UploadModal({ onClose, onUpload }: UploadModalProps) {
            className="hidden"
          />

-          <p className="text-xs text-gray-500 mt-4">
-            Support JPG, PNG format
+          <p className="text-xs text-gray-500 mb-4">
+            {t.uploadModal.supportFormats}
          </p>

          <div className="flex items-center justify-center gap-4 mt-6 text-xs text-gray-400">
            <div className="flex items-center gap-1">
              <MousePointerClick className="w-3.5 h-3.5" />
-              <span>Click</span>
+              <span>{t.common.click}</span>
            </div>
            <div className="flex items-center gap-1">
              <FileUp className="w-3.5 h-3.5" />
-              <span>Drop</span>
+              <span>{t.common.drop}</span>
            </div>
            <div className="flex items-center gap-1">
              <ClipboardPaste className="w-3.5 h-3.5" />
-              <span>Paste</span>
+              <span>{t.common.paste}</span>
            </div>
          </div>
        </div>
--- a/src/components/UserGuide.tsx
+++ b/src/components/UserGuide.tsx
@@ -0,0 +1,174 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { X, ChevronRight, ChevronLeft } from 'lucide-react';
+import { useLanguage } from '../contexts/LanguageContext';
+
+interface Step {
+  id: string;
+  title: string;
+  content: string;
+  position: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export default function UserGuide({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) {
+  const { t } = useLanguage();
+  const [currentStep, setCurrentStep] = useState(0);
+  const [highlightStyle, setHighlightStyle] = useState<React.CSSProperties>({});
+
+  const steps: Step[] = [
+    {
+      id: 'sidebar-upload-area',
+      title: t.guide.step1Title,
+      content: t.guide.step1Content,
+      position: 'right',
+    },
+    {
+      id: 'sidebar-history',
+      title: t.guide.step2Title,
+      content: t.guide.step2Content,
+      position: 'right',
+    },
+    {
+      id: 'file-preview-empty',
+      title: t.guide.step3Title,
+      content: t.guide.step3Content,
+      position: 'right',
+    },
+    {
+      id: 'result-empty-state',
+      title: t.guide.step4Title,
+      content: t.guide.step4Content,
+      position: 'left',
+    },
+    {
+      id: 'export-button',
+      title: t.guide.stepExportTitle,
+      content: t.guide.stepExportContent,
+      position: 'left',
+    },
+  ];
+
+  const updateHighlight = useCallback(() => {
+    if (!isOpen || steps.length === 0) return;
+
+    const element = document.getElementById(steps[currentStep].id);
+    if (element) {
+      const rect = element.getBoundingClientRect();
+      setHighlightStyle({
+        top: rect.top - 8,
+        left: rect.left - 8,
+        width: rect.width + 16,
+        height: rect.height + 16,
+        opacity: 1,
+      });
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    } else {
+      setHighlightStyle({ opacity: 0 });
+    }
+  }, [currentStep, isOpen, steps, t.guide]);
+
+  useEffect(() => {
+    if (isOpen) {
+      updateHighlight();
+      window.addEventListener('resize', updateHighlight);
+    }
+    return () => window.removeEventListener('resize', updateHighlight);
+  }, [isOpen, updateHighlight]);
+
+  if (!isOpen) return null;
+
+  const handleNext = () => {
+    if (currentStep < steps.length - 1) {
+      setCurrentStep(currentStep + 1);
+    } else {
+      onClose();
+      setCurrentStep(0);
+    }
+  };
+
+  const handlePrev = () => {
+    if (currentStep > 0) {
+      setCurrentStep(currentStep - 1);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[100] pointer-events-none">
+      {/* Backdrop with hole */}
+      <div className="absolute inset-0 bg-black/60 pointer-events-auto" onClick={onClose} style={{
+        clipPath: highlightStyle.top !== undefined ? `polygon(
+          0% 0%, 0% 100%, 
+          ${highlightStyle.left}px 100%, 
+          ${highlightStyle.left}px ${highlightStyle.top}px, 
+          ${(highlightStyle.left as number) + (highlightStyle.width as number)}px ${highlightStyle.top}px, 
+          ${(highlightStyle.left as number) + (highlightStyle.width as number)}px ${(highlightStyle.top as number) + (highlightStyle.height as number)}px, 
+          ${highlightStyle.left}px ${(highlightStyle.top as number) + (highlightStyle.height as number)}px, 
+          ${highlightStyle.left}px 100%, 
+          100% 100%, 100% 0%
+        )` : 'none'
+      }} />
+
+      {/* Highlight border */}
+      <div
+        className="absolute border-2 border-blue-500 rounded-xl transition-all duration-300 shadow-[0_0_0_9999px_rgba(0,0,0,0.5)]"
+        style={highlightStyle}
+      />
+
+      {/* Tooltip */}
+      <div
+        className="absolute pointer-events-auto bg-white rounded-xl shadow-2xl p-6 w-80 transition-all duration-300 animate-in fade-in zoom-in-95"
+        style={highlightStyle.top !== undefined ? {
+          top: steps[currentStep].position === 'bottom' 
+            ? (highlightStyle.top as number) + (highlightStyle.height as number) + 16 
+            : steps[currentStep].position === 'top'
+            ? (highlightStyle.top as number) - 200 // approximation
+            : (highlightStyle.top as number),
+          left: steps[currentStep].position === 'right'
+            ? (highlightStyle.left as number) + (highlightStyle.width as number) + 16
+            : steps[currentStep].position === 'left'
+            ? (highlightStyle.left as number) - 336
+            : (highlightStyle.left as number),
+        } : {
+          top: '50%',
+          left: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+      >
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 text-gray-400 hover:text-gray-600"
+        >
+          <X size={18} />
+        </button>
+        
+        <div className="mb-4">
+          <span className="text-xs font-bold text-blue-600 uppercase tracking-wider">
+            Step {currentStep + 1} of {steps.length}
+          </span>
+          <h3 className="text-lg font-bold text-gray-900 mt-1">{steps[currentStep].title}</h3>
+          <p className="text-sm text-gray-600 mt-2 leading-relaxed">
+            {steps[currentStep].content}
+          </p>
+        </div>
+
+        <div className="flex items-center justify-between mt-6">
+          <button
+            onClick={handlePrev}
+            disabled={currentStep === 0}
+            className={`flex items-center gap-1 text-sm font-medium ${currentStep === 0 ? 'text-gray-300 cursor-not-allowed' : 'text-gray-600 hover:text-gray-900'}`}
+          >
+            <ChevronLeft size={16} />
+            {t.guide.prev}
+          </button>
+          
+          <button
+            onClick={handleNext}
+            className="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors flex items-center gap-1"
+          >
+            {currentStep === steps.length - 1 ? t.guide.finish : t.guide.next}
+            {currentStep < steps.length - 1 && <ChevronRight size={16} />}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/contexts/LanguageContext.tsx
+++ b/src/contexts/LanguageContext.tsx
@@ -0,0 +1,64 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import { translations, Language, TranslationKey } from '../lib/translations';
+import { detectLanguageByIP } from '../lib/ipLocation';
+
+interface LanguageContextType {
+  language: Language;
+  setLanguage: (lang: Language) => void;
+  t: TranslationKey;
+}
+
+const LanguageContext = createContext<LanguageContextType | undefined>(undefined);
+
+export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  // 初始化语言：优先使用 localStorage，否则使用浏览器语言作为临时值
+  const [language, setLanguageState] = useState<Language>(() => {
+    const saved = localStorage.getItem('language');
+    if (saved === 'en' || saved === 'zh') return saved;
+    // 临时使用浏览器语言，后续会被IP检测覆盖（如果没有保存的语言）
+    return navigator.language.startsWith('zh') ? 'zh' : 'en';
+  });
+
+  // 检测IP地理位置并设置语言（仅在首次加载且没有保存的语言时）
+  useEffect(() => {
+    const saved = localStorage.getItem('language');
+    
+    // 如果用户已经手动选择过语言，则不进行IP检测
+    if (saved === 'en' || saved === 'zh') {
+      return;
+    }
+
+    // 异步检测IP并设置语言
+    detectLanguageByIP()
+      .then((detectedLang) => {
+        setLanguageState(detectedLang);
+        // 注意：这里不保存到 localStorage，让用户首次访问时使用IP检测的结果
+        // 如果用户手动切换语言，才会保存到 localStorage
+      })
+      .catch((error) => {
+        // IP检测失败时，保持使用浏览器语言检测的结果
+        console.warn('Failed to detect language by IP:', error);
+      });
+  }, []); // 仅在组件挂载时执行一次
+
+  const setLanguage = (lang: Language) => {
+    setLanguageState(lang);
+    localStorage.setItem('language', lang);
+  };
+
+  const t = translations[language];
+
+  return (
+    <LanguageContext.Provider value={{ language, setLanguage, t }}>
+      {children}
+    </LanguageContext.Provider>
+  );
+};
+
+export const useLanguage = () => {
+  const context = useContext(LanguageContext);
+  if (context === undefined) {
+    throw new Error('useLanguage must be used within a LanguageProvider');
+  }
+  return context;
+};
--- a/src/lib/analytics.ts
+++ b/src/lib/analytics.ts
@@ -0,0 +1,63 @@
+import http from './api';
+
+interface AnalyticsPayload {
+  task_no: string;
+  event_name: string;
+  properties: Record<string, any>;
+  meta_data?: Record<string, any>;
+  device_info: {
+    ip: string;
+    "use-agent": string;
+    browser: string;
+  };
+}
+
+export const trackExportEvent = (
+  taskNo: string,
+  selectedOption: string,
+  availableOptions: string[]
+) => {
+  try {
+    const payload: AnalyticsPayload = {
+      task_no: taskNo,
+      event_name: 'export_selected_event',
+      properties: {
+        option: availableOptions,
+        selected: selectedOption
+      },
+      meta_data: {
+        task_no: taskNo
+      },
+      device_info: {
+        ip: '',
+        "use-agent": navigator.userAgent,
+        browser: getBrowserName()
+      }
+    };
+
+    // Fire and forget - do not await
+    http.post('/analytics/track', payload).catch(err => {
+      // Silently ignore errors to not block business flow
+      console.debug('Analytics tracking failed:', err);
+    });
+  } catch (error) {
+    console.debug('Analytics error:', error);
+  }
+};
+
+function getBrowserName(): string {
+  const userAgent = navigator.userAgent;
+  if (userAgent.match(/chrome|chromium|crios/i)) {
+    return "Chrome";
+  } else if (userAgent.match(/firefox|fxios/i)) {
+    return "Firefox";
+  } else if (userAgent.match(/safari/i)) {
+    return "Safari";
+  } else if (userAgent.match(/opr\//i)) {
+    return "Opera";
+  } else if (userAgent.match(/edg/i)) {
+    return "Edge";
+  } else {
+    return "Unknown";
+  }
+}
--- a/src/lib/ipLocation.ts
+++ b/src/lib/ipLocation.ts
@@ -0,0 +1,78 @@
+/**
+ * IP 地理位置检测工具
+ * 用于根据用户IP地址判断语言偏好
+ */
+
+interface IPLocationResponse {
+  country_code?: string;
+  country?: string;
+  error?: boolean;
+}
+
+/**
+ * 根据IP地址检测用户所在国家/地区
+ * 使用免费的 ipapi.co 服务（无需API key）
+ * 
+ * @returns Promise<string | null> 返回国家代码（如 'CN', 'US'），失败返回 null
+ */
+export async function detectCountryByIP(): Promise<string | null> {
+  try {
+    // 使用 ipapi.co 免费服务（无需API key，有速率限制但足够使用）
+    const response = await fetch('https://ipapi.co/json/', {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      console.warn('IP location detection failed:', response.status);
+      return null;
+    }
+
+    const data: IPLocationResponse = await response.json();
+    
+    if (data.error || !data.country_code) {
+      return null;
+    }
+
+    return data.country_code.toUpperCase();
+  } catch (error) {
+    // 静默失败，不影响用户体验
+    console.warn('IP location detection error:', error);
+    return null;
+  }
+}
+
+/**
+ * 根据国家代码判断应该使用的语言
+ * 
+ * @param countryCode 国家代码（如 'CN', 'TW', 'HK', 'SG' 等）
+ * @returns 'zh' | 'en' 推荐的语言
+ */
+export function getLanguageByCountry(countryCode: string | null): 'zh' | 'en' {
+  if (!countryCode) {
+    return 'en';
+  }
+
+  // 中文地区列表
+  const chineseRegions = [
+    'CN', // 中国大陆
+    'TW', // 台湾
+    'HK', // 香港
+    'MO', // 澳门
+    'SG', // 新加坡（主要使用中文）
+  ];
+
+  return chineseRegions.includes(countryCode) ? 'zh' : 'en';
+}
+
+/**
+ * 检测用户IP并返回推荐语言
+ * 
+ * @returns Promise<'zh' | 'en'> 推荐的语言
+ */
+export async function detectLanguageByIP(): Promise<'zh' | 'en'> {
+  const countryCode = await detectCountryByIP();
+  return getLanguageByCountry(countryCode);
+}
--- a/src/lib/translations.ts
+++ b/src/lib/translations.ts
@@ -0,0 +1,193 @@
+export const translations = {
+  en: {
+    common: {
+      upload: 'Upload',
+      history: 'History',
+      login: 'Login / Register',
+      logout: 'Logout',
+      loading: 'Loading...',
+      processing: 'Processing...',
+      cancel: 'Cancel',
+      copy: 'Copy',
+      copied: 'Copied!',
+      download: 'Download',
+      export: 'Export',
+      preview: 'Preview',
+      email: 'Email',
+      contactUs: 'Contact Us',
+      reward: 'Reward',
+      qqGroup: 'QQ Group (Click to Copy)',
+      guide: 'User Guide',
+      click: 'Click',
+      drop: 'Drop',
+      paste: 'Paste',
+    },
+    navbar: {
+      rewardTitle: 'WeChat Reward',
+      rewardThanks: 'Thank you for your support and encouragement ❤️',
+      rewardSubtitle: 'Your support is our motivation for continuous updates',
+    },
+    sidebar: {
+      title: 'Formula Recognize',
+      subtitle: 'Support handwriting and printed formulas',
+      uploadInstruction: 'Click, Drop, or Paste a file to start parsing',
+      pleaseLogin: 'Please login to view history',
+      noHistory: 'No history records',
+      noMore: 'No more records',
+      historyHeader: 'History',
+    },
+    uploadModal: {
+      title: 'Upload File',
+      supportFormats: 'Support JPG, PNG, PDF format',
+    },
+    resultPanel: {
+      waitingTitle: 'Waiting for recognition result',
+      waitingSubtitle: 'After uploading the file, Texpixel will automatically recognize and display the result here',
+      analyzing: 'Analyzing...',
+      waitingQueue: 'Waiting in queue...',
+      queueSubtitle: 'Your file is in the queue, please wait.',
+      processingSubtitle: 'Texpixel is processing your file, this may take a moment.',
+      markdown: 'Markdown',
+    },
+    auth: {
+      signIn: 'Login',
+      signUp: 'Register',
+      signInTitle: 'Login Account',
+      signUpTitle: 'Register Account',
+      email: 'Email',
+      password: 'Password',
+      error: 'Error',
+      genericError: 'An error occurred, please try again',
+      hasAccount: 'Already have an account? Login',
+      noAccount: 'No account? Register',
+    },
+    export: {
+      title: 'Export',
+      categories: {
+        code: 'Code',
+        image: 'Image',
+        file: 'File',
+      },
+      failed: 'Export failed, please try again',
+      imageFailed: 'Failed to generate image',
+    },
+    guide: {
+      next: 'Next',
+      prev: 'Back',
+      finish: 'Finish',
+      skip: 'Skip',
+      step1Title: 'Upload Area',
+      step1Content: 'Click or drag and drop your formula images/PDFs here to start recognition.',
+      step2Title: 'File History',
+      step2Content: 'Your recognized files will appear here. Login to sync across devices.',
+      step3Title: 'Preview Area',
+      step3Content: 'The original file you uploaded will be displayed here for comparison.',
+      step4Title: 'Recognition Result',
+      step4Content: 'The recognition results (Markdown/LaTeX) will be shown here.',
+      stepExportTitle: 'Export Result',
+      stepExportContent: 'You can export the recognition results to various formats such as Markdown, LaTeX, Word, or Image.',
+    },
+    alerts: {
+      taskTimeout: 'Task timeout: Recognition took too long.',
+      networkError: 'Task timeout or network error.',
+      uploadFailed: 'Upload failed',
+    }
+  },
+  zh: {
+    common: {
+      upload: '上传',
+      history: '历史记录',
+      login: '登录 / 注册',
+      logout: '退出登录',
+      loading: '加载中...',
+      processing: '处理中...',
+      cancel: '取消',
+      copy: '复制',
+      copied: '已复制！',
+      download: '下载',
+      export: '导出',
+      preview: '预览',
+      email: '邮箱',
+      contactUs: '联系我们',
+      reward: '赞赏',
+      qqGroup: 'QQ 群 (点击复制)',
+      guide: '使用引导',
+      click: '点击',
+      drop: '拖拽',
+      paste: '粘贴',
+    },
+    navbar: {
+      rewardTitle: '微信赞赏码',
+      rewardThanks: '感谢您的支持与鼓励 ❤️',
+      rewardSubtitle: '您的支持是我们持续更新的动力',
+    },
+    sidebar: {
+      title: '文档识别',
+      subtitle: '支持手写和印刷体文档识别',
+      uploadInstruction: '点击、拖拽或粘贴文件开始解析',
+      pleaseLogin: '请登录后查看历史记录',
+      noHistory: '暂无历史记录',
+      noMore: '没有更多记录了',
+      historyHeader: '历史记录',
+    },
+    uploadModal: {
+      title: '上传文件',
+      supportFormats: '支持 JPG, PNG 格式',
+    },
+    resultPanel: {
+      waitingTitle: '等待识别结果',
+      waitingSubtitle: '上传文件后，TexPixel 将自动识别并在此显示结果',
+      analyzing: '解析中...',
+      waitingQueue: '排队中...',
+      queueSubtitle: '您的文件正在排队，请稍候。',
+      processingSubtitle: 'TexPixel 正在处理您的文件，请稍候。',
+      markdown: 'Markdown',
+    },
+    auth: {
+      signIn: '登录',
+      signUp: '注册',
+      signInTitle: '登录账号',
+      signUpTitle: '注册账号',
+      email: '邮箱',
+      password: '密码',
+      error: '错误',
+      genericError: '发生错误，请重试',
+      hasAccount: '已有账号？去登录',
+      noAccount: '没有账号？去注册',
+    },
+    export: {
+      title: '导出',
+      categories: {
+        code: '代码',
+        image: '图片',
+        file: '文件',
+      },
+      failed: '导出失败，请重试',
+      imageFailed: '生成图片失败',
+    },
+    guide: {
+      next: '下一步',
+      prev: '上一步',
+      finish: '完成',
+      skip: '跳过',
+      step1Title: '上传区域',
+      step1Content: '点击此处或将公式/文档图片 粘贴或者拖拽到这里开始识别。',
+      step2Title: '历史记录',
+      step2Content: '识别过的文件会显示在这里。登录后可以跨设备同步。',
+      step3Title: '预览区域',
+      step3Content: '这里会显示您上传的原始文件，方便对比。',
+      step4Title: '识别结果',
+      step4Content: '这里会显示识别出的 Markdown/LaTeX 结果。',
+      stepExportTitle: '导出结果',
+      stepExportContent: '您可以将识别结果导出为多种格式，如 Markdown、LaTeX、Word 或图片。',
+    },
+    alerts: {
+      taskTimeout: '任务超时：识别时间过长。',
+      networkError: '任务超时或网络错误。',
+      uploadFailed: '上传失败',
+    }
+  }
+};
+
+export type Language = 'en' | 'zh';
+export type TranslationKey = typeof translations.en;
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -3,11 +3,39 @@ import { createRoot } from 'react-dom/client';
 import App from './App.tsx';
 import './index.css';
 import { AuthProvider } from './contexts/AuthContext';
+import { LanguageProvider } from './contexts/LanguageContext';

-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <AuthProvider>
-      <App />
-    </AuthProvider>
-  </StrictMode>
-);
+// 错误处理：捕获未处理的错误
+window.addEventListener('error', (event) => {
+  console.error('Global error:', event.error);
+});
+
+window.addEventListener('unhandledrejection', (event) => {
+  console.error('Unhandled promise rejection:', event.reason);
+});
+
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error('Root element not found');
+}
+
+try {
+  createRoot(rootElement).render(
+    <StrictMode>
+      <AuthProvider>
+        <LanguageProvider>
+          <App />
+        </LanguageProvider>
+      </AuthProvider>
+    </StrictMode>
+  );
+} catch (error) {
+  console.error('Failed to render app:', error);
+  rootElement.innerHTML = `
+    <div style="padding: 20px; font-family: sans-serif;">
+      <h1>应用启动失败</h1>
+      <p>错误信息: ${error instanceof Error ? error.message : String(error)}</p>
+      <p>请检查浏览器控制台获取更多信息。</p>
+    </div>
+  `;
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,8 +8,13 @@ export default defineConfig({
    exclude: ['lucide-react'],
  },
  build: {
+    // 确保生成带哈希的文件名（默认已启用）
    rollupOptions: {
      output: {
+        // 确保文件名包含哈希，便于缓存管理
+        entryFileNames: 'assets/[name]-[hash].js',
+        chunkFileNames: 'assets/[name]-[hash].js',
+        assetFileNames: 'assets/[name]-[hash].[ext]',
        manualChunks: {
          // React 核心
          'vendor-react': ['react', 'react-dom'],
Author	SHA1	Message	Date
liuyuanchuang	d562d67203	feat: add track point	2026-01-27 23:44:45 +08:00
liuyuanchuang	7c5409a6c7	feat: add deploy script	2026-01-26 07:10:58 +08:00
liuyuanchuang	42850c4460	feat: add translate	2026-01-24 13:53:50 +08:00