From b50af72e05f579ee8802e18fbe155cfffb1347ad Mon Sep 17 00:00:00 2001
From: 60999 <60999@users.noreply.github.com>
Date: Tue, 10 Mar 2026 22:15:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96(i18n)=E6=A8=A1=E5=9D=97=EF=BC=8C=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E4=B8=AD=E6=96=87=E7=AE=80=E4=BD=93=E5=92=8C=E8=8B=B1=E6=96=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 创建 i18n 核心模块 (i18n/index.js)
  - 支持多语言注册和切换
  - 支持浏览器语言自动检测
  - 支持参数插值和嵌套翻译键
  - 支持 localStorage 持久化语言设置
  - 支持 DOM 自动更新 (data-i18n 属性)

- 创建中文简体语言包 (i18n/locales/zh-CN.js)
  - 完整翻译所有界面文本

- 创建英文语言包 (i18n/locales/en-US.js)
  - 完整翻译所有界面文本

- 更新 app.js
  - 集成 i18n 模块
  - 添加语言切换 API
  - 添加语言选择器事件监听

- 更新 index.html
  - 添加 data-i18n 属性到所有文本元素
  - 添加语言选择器下拉框

- 更新 style.css
  - 添加语言选择器样式
---
 ui/app.js                |  75 +++++++++-
 ui/i18n/index.js         | 238 ++++++++++++++++++++++++++++++++
 ui/i18n/locales/en-US.js | 287 +++++++++++++++++++++++++++++++++++++++
 ui/i18n/locales/zh-CN.js | 287 +++++++++++++++++++++++++++++++++++++++
 ui/index.html            | 266 ++++++++++++++++++------------------
 ui/style.css             |  38 ++++++
 6 files changed, 1059 insertions(+), 132 deletions(-)
 create mode 100644 ui/i18n/index.js
 create mode 100644 ui/i18n/locales/en-US.js
 create mode 100644 ui/i18n/locales/zh-CN.js

diff --git a/ui/app.js b/ui/app.js
index a1c94ded..12b7df1a 100644
--- a/ui/app.js
+++ b/ui/app.js
@@ -10,11 +10,65 @@ import { wsService } from './services/websocket.service.js';
 import { healthService } from './services/health.service.js';
 import { sensingService } from './services/sensing.service.js';
 import { backendDetector } from './utils/backend-detector.js';
+import { i18n } from './i18n/index.js';
+import zhCN from './i18n/locales/zh-CN.js';
+import enUS from './i18n/locales/en-US.js';
 
 class WiFiDensePoseApp {
   constructor() {
     this.components = {};
     this.isInitialized = false;
+    this.i18n = i18n;
+  }
+
+  /**
+   * 初始化国际化模块
+   */
+  initializeI18n() {
+    i18n.register('zh-CN', zhCN);
+    i18n.register('en-US', enUS);
+    const locale = i18n.init();
+    console.log(`[App] i18n initialized with locale: ${locale}`);
+    
+    i18n.onLocaleChange(() => {
+      i18n.updateDOM();
+    });
+    
+    i18n.updateDOM();
+  }
+
+  /**
+   * 获取当前语言
+   * @returns {string} 当前语言代码
+   */
+  getLocale() {
+    return i18n.getLocale();
+  }
+
+  /**
+   * 设置语言
+   * @param {string} locale - 语言代码
+   */
+  setLocale(locale) {
+    i18n.setLocale(locale);
+  }
+
+  /**
+   * 获取可用语言列表
+   * @returns {string[]} 语言代码数组
+   */
+  getAvailableLocales() {
+    return i18n.getAvailableLocales();
+  }
+
+  /**
+   * 翻译文本
+   * @param {string} key - 翻译键
+   * @param {Object} params - 参数
+   * @returns {string} 翻译后的文本
+   */
+  t(key, params = {}) {
+    return i18n.t(key, params);
   }
 
   // Initialize application
@@ -22,6 +76,9 @@ class WiFiDensePoseApp {
     try {
       console.log('Initializing WiFi DensePose UI...');
       
+      // Initialize i18n first
+      this.initializeI18n();
+      
       // Set up error handling
       this.setupErrorHandling();
       
@@ -39,7 +96,7 @@ class WiFiDensePoseApp {
       
     } catch (error) {
       console.error('Failed to initialize application:', error);
-      this.showGlobalError('Failed to initialize application. Please refresh the page.');
+      this.showGlobalError(i18n.t('errors.initFailed'));
     }
   }
 
@@ -227,6 +284,22 @@ class WiFiDensePoseApp {
     window.addEventListener('beforeunload', () => {
       this.cleanup();
     });
+
+    // Handle language selector
+    this.setupLanguageSelector();
+  }
+
+  /**
+   * 设置语言选择器
+   */
+  setupLanguageSelector() {
+    const selector = document.getElementById('languageSelector');
+    if (selector) {
+      selector.value = i18n.getLocale();
+      selector.addEventListener('change', (e) => {
+        i18n.setLocale(e.target.value);
+      });
+    }
   }
 
   // Handle window resize
diff --git a/ui/i18n/index.js b/ui/i18n/index.js
new file mode 100644
index 00000000..f333d2bf
--- /dev/null
+++ b/ui/i18n/index.js
@@ -0,0 +1,238 @@
+/**
+ * @file i18n 核心模块 - 提供国际化语言支持
+ * @description 轻量级国际化解决方案，支持多语言切换、参数插值、嵌套翻译
+ */
+
+const DEFAULT_LOCALE = 'en-US';
+const STORAGE_KEY = 'wifi-densepose-locale';
+
+class I18n {
+  constructor() {
+    this.currentLocale = DEFAULT_LOCALE;
+    this.translations = new Map();
+    this.fallbackLocale = DEFAULT_LOCALE;
+    this.observers = new Set();
+  }
+
+  /**
+   * 注册语言包
+   * @param {string} locale - 语言代码 (如 'zh-CN', 'en-US')
+   * @param {Object} messages - 翻译消息对象
+   */
+  register(locale, messages) {
+    if (!locale || typeof locale !== 'string') {
+      console.error('[I18n] Invalid locale:', locale);
+      return;
+    }
+    this.translations.set(locale, messages);
+    console.log(`[I18n] Registered locale: ${locale}`);
+  }
+
+  /**
+   * 设置当前语言
+   * @param {string} locale - 语言代码
+   */
+  setLocale(locale) {
+    if (!this.translations.has(locale)) {
+      console.warn(`[I18n] Locale "${locale}" not registered, using fallback`);
+      locale = this.fallbackLocale;
+    }
+    
+    const oldLocale = this.currentLocale;
+    this.currentLocale = locale;
+    
+    try {
+      localStorage.setItem(STORAGE_KEY, locale);
+    } catch (e) {
+      console.warn('[I18n] Failed to save locale to localStorage');
+    }
+    
+    document.documentElement.lang = locale.split('-')[0];
+    
+    this.observers.forEach(callback => {
+      try {
+        callback(locale, oldLocale);
+      } catch (e) {
+        console.error('[I18n] Observer callback error:', e);
+      }
+    });
+    
+    console.log(`[I18n] Locale changed: ${oldLocale} -> ${locale}`);
+  }
+
+  /**
+   * 获取当前语言
+   * @returns {string} 当前语言代码
+   */
+  getLocale() {
+    return this.currentLocale;
+  }
+
+  /**
+   * 获取所有已注册的语言列表
+   * @returns {string[]} 语言代码数组
+   */
+  getAvailableLocales() {
+    return Array.from(this.translations.keys());
+  }
+
+  /**
+   * 初始化语言设置
+   * @returns {string} 检测到的语言代码
+   */
+  init() {
+    let savedLocale = null;
+    
+    try {
+      savedLocale = localStorage.getItem(STORAGE_KEY);
+    } catch (e) {
+      console.warn('[I18n] Failed to read locale from localStorage');
+    }
+    
+    if (savedLocale && this.translations.has(savedLocale)) {
+      this.currentLocale = savedLocale;
+    } else {
+      const browserLocale = this.detectBrowserLocale();
+      this.currentLocale = browserLocale;
+    }
+    
+    document.documentElement.lang = this.currentLocale.split('-')[0];
+    console.log(`[I18n] Initialized with locale: ${this.currentLocale}`);
+    
+    return this.currentLocale;
+  }
+
+  /**
+   * 检测浏览器语言
+   * @returns {string} 检测到的语言代码
+   */
+  detectBrowserLocale() {
+    const browserLang = navigator.language || navigator.userLanguage;
+    
+    if (this.translations.has(browserLang)) {
+      return browserLang;
+    }
+    
+    const baseLang = browserLang.split('-')[0];
+    for (const locale of this.translations.keys()) {
+      if (locale.startsWith(baseLang)) {
+        return locale;
+      }
+    }
+    
+    return this.fallbackLocale;
+  }
+
+  /**
+   * 翻译文本
+   * @param {string} key - 翻译键，支持点分隔符嵌套 (如 'nav.dashboard')
+   * @param {Object} params - 插值参数
+   * @returns {string} 翻译后的文本
+   */
+  t(key, params = {}) {
+    const messages = this.translations.get(this.currentLocale);
+    let text = this.getNestedValue(messages, key);
+    
+    if (text === undefined) {
+      const fallbackMessages = this.translations.get(this.fallbackLocale);
+      text = this.getNestedValue(fallbackMessages, key);
+    }
+    
+    if (text === undefined) {
+      console.warn(`[I18n] Missing translation for key: "${key}"`);
+      return key;
+    }
+    
+    if (typeof text === 'string' && Object.keys(params).length > 0) {
+      text = this.interpolate(text, params);
+    }
+    
+    return text;
+  }
+
+  /**
+   * 获取嵌套对象的值
+   * @param {Object} obj - 源对象
+   * @param {string} key - 点分隔的键路径
+   * @returns {*} 找到的值或 undefined
+   */
+  getNestedValue(obj, key) {
+    if (!obj || typeof key !== 'string') return undefined;
+    
+    const keys = key.split('.');
+    let value = obj;
+    
+    for (const k of keys) {
+      if (value && typeof value === 'object' && k in value) {
+        value = value[k];
+      } else {
+        return undefined;
+      }
+    }
+    
+    return value;
+  }
+
+  /**
+   * 插值替换参数
+   * @param {string} text - 包含 {param} 占位符的文本
+   * @param {Object} params - 参数对象
+   * @returns {string} 替换后的文本
+   */
+  interpolate(text, params) {
+    return text.replace(/\{(\w+)\}/g, (match, key) => {
+      return params.hasOwnProperty(key) ? String(params[key]) : match;
+    });
+  }
+
+  /**
+   * 监听语言变化
+   * @param {Function} callback - 回调函数 (newLocale, oldLocale) => void
+   * @returns {Function} 取消监听函数
+   */
+  onLocaleChange(callback) {
+    this.observers.add(callback);
+    return () => this.observers.delete(callback);
+  }
+
+  /**
+   * 更新页面中所有带有 data-i18n 属性的元素
+   */
+  updateDOM() {
+    const elements = document.querySelectorAll('[data-i18n]');
+    
+    elements.forEach(element => {
+      const key = element.getAttribute('data-i18n');
+      const attr = element.getAttribute('data-i18n-attr') || 'textContent';
+      const params = element.getAttribute('data-i18n-params');
+      
+      let parsedParams = {};
+      if (params) {
+        try {
+          parsedParams = JSON.parse(params);
+        } catch (e) {
+          console.warn('[I18n] Failed to parse params:', params);
+        }
+      }
+      
+      const text = this.t(key, parsedParams);
+      
+      if (attr === 'textContent') {
+        element.textContent = text;
+      } else if (attr === 'innerHTML') {
+        element.innerHTML = text;
+      } else if (attr === 'placeholder') {
+        element.placeholder = text;
+      } else if (attr === 'title') {
+        element.title = text;
+      } else {
+        element.setAttribute(attr, text);
+      }
+    });
+  }
+}
+
+const i18n = new I18n();
+
+export { i18n, I18n };
+export default i18n;
diff --git a/ui/i18n/locales/en-US.js b/ui/i18n/locales/en-US.js
new file mode 100644
index 00000000..8b0ea4cb
--- /dev/null
+++ b/ui/i18n/locales/en-US.js
@@ -0,0 +1,287 @@
+/**
+ * @file English (US) Language Pack
+ * @description WiFi DensePose Application English Translation
+ */
+
+export default {
+  meta: {
+    title: 'WiFi DensePose: Human Tracking Through Walls',
+    description: 'Human Tracking Through Walls Using WiFi Signals'
+  },
+
+  header: {
+    title: 'WiFi DensePose',
+    subtitle: 'Human Tracking Through Walls Using WiFi Signals'
+  },
+
+  nav: {
+    dashboard: 'Dashboard',
+    hardware: 'Hardware',
+    demo: 'Live Demo',
+    architecture: 'Architecture',
+    performance: 'Performance',
+    applications: 'Applications',
+    sensing: 'Sensing',
+    training: 'Training',
+    observatory: 'Observatory'
+  },
+
+  dashboard: {
+    title: 'Revolutionary WiFi-Based Human Pose Detection',
+    description: 'AI can track your full-body movement through walls using just WiFi signals. Researchers at Carnegie Mellon have trained a neural network to turn basic WiFi signals into detailed wireframe models of human bodies.',
+    
+    status: {
+      title: 'System Status',
+      apiServer: 'API Server',
+      hardware: 'Hardware',
+      inference: 'Inference',
+      streaming: 'Streaming',
+      datasource: 'Data Source'
+    },
+
+    metrics: {
+      title: 'System Metrics',
+      cpuUsage: 'CPU Usage',
+      memoryUsage: 'Memory Usage',
+      diskUsage: 'Disk Usage'
+    },
+
+    features: {
+      title: 'Features'
+    },
+
+    stats: {
+      title: 'Live Statistics',
+      activePersons: 'Active Persons',
+      avgConfidence: 'Avg Confidence',
+      totalDetections: 'Total Detections',
+      zoneOccupancy: 'Zone Occupancy'
+    },
+
+    benefits: {
+      throughWalls: {
+        title: 'Through Walls',
+        description: 'Works through solid barriers with no line of sight required'
+      },
+      privacy: {
+        title: 'Privacy-Preserving',
+        description: 'No cameras or visual recording - just WiFi signal analysis'
+      },
+      realtime: {
+        title: 'Real-Time',
+        description: 'Maps 24 body regions in real-time at 100Hz sampling rate'
+      },
+      lowCost: {
+        title: 'Low Cost',
+        description: 'Built using $30 commercial WiFi hardware'
+      }
+    },
+
+    systemStats: {
+      bodyRegions: 'Body Regions',
+      samplingRate: 'Sampling Rate',
+      accuracy: 'Accuracy (AP@50)',
+      hardwareCost: 'Hardware Cost'
+    }
+  },
+
+  hardware: {
+    title: 'Hardware Configuration',
+    
+    antenna: {
+      title: '3×3 Antenna Array',
+      helpText: 'Click antennas to toggle their state',
+      transmitters: 'Transmitters (3)',
+      receivers: 'Receivers (6)'
+    },
+
+    wifi: {
+      title: 'WiFi Configuration',
+      frequency: 'Frequency',
+      frequencyValue: '2.4GHz ± 20MHz',
+      subcarriers: 'Subcarriers',
+      subcarriersValue: '30',
+      samplingRate: 'Sampling Rate',
+      samplingRateValue: '100 Hz',
+      totalCost: 'Total Cost',
+      totalCostValue: '$30'
+    },
+
+    csi: {
+      title: 'Real-time CSI Data',
+      amplitude: 'Amplitude',
+      phase: 'Phase'
+    }
+  },
+
+  demo: {
+    title: 'Live Demonstration',
+    
+    controls: {
+      startStream: 'Start Stream',
+      stopStream: 'Stop Stream',
+      ready: 'Ready'
+    },
+
+    signal: {
+      title: 'WiFi Signal Analysis',
+      signalStrength: 'Signal Strength',
+      processingLatency: 'Processing Latency'
+    },
+
+    pose: {
+      title: 'Human Pose Detection',
+      personsDetected: 'Persons Detected',
+      confidence: 'Confidence',
+      keypoints: 'Keypoints'
+    }
+  },
+
+  architecture: {
+    title: 'System Architecture',
+    
+    steps: {
+      csiInput: {
+        title: 'CSI Input',
+        description: 'Channel State Information collected from WiFi antenna array'
+      },
+      phaseSanitization: {
+        title: 'Phase Sanitization',
+        description: 'Remove hardware-specific noise and normalize signal phase'
+      },
+      modalityTranslation: {
+        title: 'Modality Translation',
+        description: 'Convert WiFi signals to visual representation using CNN'
+      },
+      densePose: {
+        title: 'DensePose-RCNN',
+        description: 'Extract human pose keypoints and body part segmentation'
+      },
+      wireframeOutput: {
+        title: 'Wireframe Output',
+        description: 'Generate final human pose wireframe visualization'
+      }
+    }
+  },
+
+  performance: {
+    title: 'Performance Analysis',
+    
+    wifiBased: {
+      title: 'WiFi-based (Same Layout)',
+      averagePrecision: 'Average Precision',
+      ap50: 'AP@50',
+      ap75: 'AP@75'
+    },
+
+    imageBased: {
+      title: 'Image-based (Reference)',
+      averagePrecision: 'Average Precision',
+      ap50: 'AP@50',
+      ap75: 'AP@75'
+    },
+
+    advantages: {
+      title: 'Advantages & Limitations',
+      pros: {
+        title: 'Advantages',
+        items: [
+          'Through-wall detection',
+          'Privacy preserving',
+          'Lighting independent',
+          'Low cost hardware',
+          'Uses existing WiFi'
+        ]
+      },
+      cons: {
+        title: 'Limitations',
+        items: [
+          'Performance drops in different layouts',
+          'Requires WiFi-compatible devices',
+          'Training requires synchronized data'
+        ]
+      }
+    }
+  },
+
+  applications: {
+    title: 'Real-World Applications',
+    
+    elderlyCare: {
+      title: 'Elderly Care Monitoring',
+      description: 'Monitor elderly individuals for falls or emergencies without invading privacy. Track movement patterns and detect anomalies in daily routines.',
+      features: ['Fall Detection', 'Activity Monitoring', 'Emergency Alert']
+    },
+
+    homeSecurity: {
+      title: 'Home Security Systems',
+      description: 'Detect intruders and monitor home security without visible cameras. Track multiple persons and identify suspicious movement patterns.',
+      features: ['Intrusion Detection', 'Multi-person Tracking', 'Invisible Monitoring']
+    },
+
+    healthcare: {
+      title: 'Healthcare Patient Monitoring',
+      description: 'Monitor patients in hospitals and care facilities. Track vital signs through movement analysis and detect health emergencies.',
+      features: ['Vital Sign Analysis', 'Movement Tracking', 'Health Alerts']
+    },
+
+    smartBuilding: {
+      title: 'Smart Building Occupancy',
+      description: 'Optimize building energy consumption by tracking occupancy patterns. Control lighting, HVAC, and security systems automatically.',
+      features: ['Energy Optimization', 'Occupancy Tracking', 'Smart Controls']
+    },
+
+    arVr: {
+      title: 'AR/VR Applications',
+      description: 'Enable full-body tracking for virtual and augmented reality applications without wearing additional sensors or cameras.',
+      features: ['Full Body Tracking', 'Sensor-free', 'Immersive Experience']
+    },
+
+    implementation: {
+      title: 'Implementation Considerations',
+      description: 'While WiFi DensePose offers revolutionary capabilities, successful implementation requires careful consideration of environment setup, data privacy regulations, and system calibration for optimal performance.'
+    }
+  },
+
+  training: {
+    title: 'Model Training',
+    description: 'Record CSI data, train pose estimation models, and manage .rvf files'
+  },
+
+  common: {
+    loading: 'Loading...',
+    error: 'Error',
+    success: 'Success',
+    warning: 'Warning',
+    info: 'Info',
+    confirm: 'Confirm',
+    cancel: 'Cancel',
+    save: 'Save',
+    delete: 'Delete',
+    edit: 'Edit',
+    add: 'Add',
+    search: 'Search',
+    noData: 'No data available',
+    retry: 'Retry',
+    close: 'Close',
+    back: 'Back',
+    next: 'Next',
+    previous: 'Previous',
+    submit: 'Submit',
+    reset: 'Reset'
+  },
+
+  errors: {
+    initFailed: 'Failed to initialize application. Please refresh the page.',
+    unexpectedError: 'An unexpected error occurred',
+    connectionLost: 'Connection lost',
+    backendUnavailable: 'Backend unavailable — start sensing-server'
+  },
+
+  notifications: {
+    mockServerActive: 'Mock server active - testing mode',
+    connectedToBackend: 'Connected to Rust sensing server',
+    pageHidden: 'Page hidden, pausing updates',
+    pageVisible: 'Page visible, resuming updates'
+  }
+};
diff --git a/ui/i18n/locales/zh-CN.js b/ui/i18n/locales/zh-CN.js
new file mode 100644
index 00000000..68f73e09
--- /dev/null
+++ b/ui/i18n/locales/zh-CN.js
@@ -0,0 +1,287 @@
+/**
+ * @file 中文简体语言包
+ * @description WiFi DensePose 应用中文简体翻译
+ */
+
+export default {
+  meta: {
+    title: 'WiFi DensePose: 穿墙人体追踪',
+    description: '使用 WiFi 信号进行穿墙人体追踪'
+  },
+
+  header: {
+    title: 'WiFi DensePose',
+    subtitle: '使用 WiFi 信号进行穿墙人体追踪'
+  },
+
+  nav: {
+    dashboard: '仪表盘',
+    hardware: '硬件配置',
+    demo: '实时演示',
+    architecture: '系统架构',
+    performance: '性能分析',
+    applications: '应用场景',
+    sensing: '感知',
+    training: '模型训练',
+    observatory: '观测站'
+  },
+
+  dashboard: {
+    title: '革命性的 WiFi 人体姿态检测',
+    description: 'AI 可以仅使用 WiFi 信号穿透墙壁追踪您的全身动作。卡内基梅隆大学的研究人员训练了一个神经网络，可以将基本的 WiFi 信号转换为详细的人体线框模型。',
+    
+    status: {
+      title: '系统状态',
+      apiServer: 'API 服务器',
+      hardware: '硬件',
+      inference: '推理引擎',
+      streaming: '数据流',
+      datasource: '数据源'
+    },
+
+    metrics: {
+      title: '系统指标',
+      cpuUsage: 'CPU 使用率',
+      memoryUsage: '内存使用率',
+      diskUsage: '磁盘使用率'
+    },
+
+    features: {
+      title: '功能特性'
+    },
+
+    stats: {
+      title: '实时统计',
+      activePersons: '活动人数',
+      avgConfidence: '平均置信度',
+      totalDetections: '总检测次数',
+      zoneOccupancy: '区域占用'
+    },
+
+    benefits: {
+      throughWalls: {
+        title: '穿墙检测',
+        description: '无需视线，可穿透实体障碍物工作'
+      },
+      privacy: {
+        title: '隐私保护',
+        description: '无需摄像头或视频录制，仅分析 WiFi 信号'
+      },
+      realtime: {
+        title: '实时处理',
+        description: '以 100Hz 采样率实时映射 24 个身体区域'
+      },
+      lowCost: {
+        title: '低成本',
+        description: '使用价值 30 美元的商用 WiFi 硬件构建'
+      }
+    },
+
+    systemStats: {
+      bodyRegions: '身体区域',
+      samplingRate: '采样率',
+      accuracy: '准确率 (AP@50)',
+      hardwareCost: '硬件成本'
+    }
+  },
+
+  hardware: {
+    title: '硬件配置',
+    
+    antenna: {
+      title: '3×3 天线阵列',
+      helpText: '点击天线切换其状态',
+      transmitters: '发射器 (3)',
+      receivers: '接收器 (6)'
+    },
+
+    wifi: {
+      title: 'WiFi 配置',
+      frequency: '频率',
+      frequencyValue: '2.4GHz ± 20MHz',
+      subcarriers: '子载波',
+      subcarriersValue: '30',
+      samplingRate: '采样率',
+      samplingRateValue: '100 Hz',
+      totalCost: '总成本',
+      totalCostValue: '$30'
+    },
+
+    csi: {
+      title: '实时 CSI 数据',
+      amplitude: '幅度',
+      phase: '相位'
+    }
+  },
+
+  demo: {
+    title: '实时演示',
+    
+    controls: {
+      startStream: '开始流',
+      stopStream: '停止流',
+      ready: '就绪'
+    },
+
+    signal: {
+      title: 'WiFi 信号分析',
+      signalStrength: '信号强度',
+      processingLatency: '处理延迟'
+    },
+
+    pose: {
+      title: '人体姿态检测',
+      personsDetected: '检测到的人数',
+      confidence: '置信度',
+      keypoints: '关键点'
+    }
+  },
+
+  architecture: {
+    title: '系统架构',
+    
+    steps: {
+      csiInput: {
+        title: 'CSI 输入',
+        description: '从 WiFi 天线阵列收集信道状态信息'
+      },
+      phaseSanitization: {
+        title: '相位净化',
+        description: '去除硬件特定噪声并归一化信号相位'
+      },
+      modalityTranslation: {
+        title: '模态转换',
+        description: '使用 CNN 将 WiFi 信号转换为视觉表示'
+      },
+      densePose: {
+        title: 'DensePose-RCNN',
+        description: '提取人体姿态关键点和身体部位分割'
+      },
+      wireframeOutput: {
+        title: '线框输出',
+        description: '生成最终的人体姿态线框可视化'
+      }
+    }
+  },
+
+  performance: {
+    title: '性能分析',
+    
+    wifiBased: {
+      title: '基于 WiFi (相同布局)',
+      averagePrecision: '平均精度',
+      ap50: 'AP@50',
+      ap75: 'AP@75'
+    },
+
+    imageBased: {
+      title: '基于图像 (参考)',
+      averagePrecision: '平均精度',
+      ap50: 'AP@50',
+      ap75: 'AP@75'
+    },
+
+    advantages: {
+      title: '优势与局限',
+      pros: {
+        title: '优势',
+        items: [
+          '穿墙检测',
+          '隐私保护',
+          '不受光照影响',
+          '低成本硬件',
+          '利用现有 WiFi'
+        ]
+      },
+      cons: {
+        title: '局限',
+        items: [
+          '不同布局下性能下降',
+          '需要兼容 WiFi 的设备',
+          '训练需要同步数据'
+        ]
+      }
+    }
+  },
+
+  applications: {
+    title: '实际应用场景',
+    
+    elderlyCare: {
+      title: '老年人监护',
+      description: '在不侵犯隐私的情况下监测老年人的跌倒或紧急情况。追踪活动模式并检测日常行为异常。',
+      features: ['跌倒检测', '活动监测', '紧急报警']
+    },
+
+    homeSecurity: {
+      title: '家庭安防系统',
+      description: '无需可见摄像头即可检测入侵者并监控家庭安全。追踪多人并识别可疑行为模式。',
+      features: ['入侵检测', '多人追踪', '隐形监控']
+    },
+
+    healthcare: {
+      title: '医疗患者监护',
+      description: '在医院和护理机构监测患者。通过动作分析追踪生命体征并检测健康紧急情况。',
+      features: ['生命体征分析', '动作追踪', '健康警报']
+    },
+
+    smartBuilding: {
+      title: '智能建筑占用',
+      description: '通过追踪占用模式优化建筑能耗。自动控制照明、暖通空调和安防系统。',
+      features: ['节能优化', '占用追踪', '智能控制']
+    },
+
+    arVr: {
+      title: 'AR/VR 应用',
+      description: '为虚拟和增强现实应用实现全身追踪，无需佩戴额外传感器或摄像头。',
+      features: ['全身追踪', '无传感器', '沉浸体验']
+    },
+
+    implementation: {
+      title: '实施注意事项',
+      description: '虽然 WiFi DensePose 提供了革命性的能力，但成功实施需要仔细考虑环境设置、数据隐私法规和系统校准以获得最佳性能。'
+    }
+  },
+
+  training: {
+    title: '模型训练',
+    description: '记录 CSI 数据、训练姿态估计模型并管理 .rvf 文件'
+  },
+
+  common: {
+    loading: '加载中...',
+    error: '错误',
+    success: '成功',
+    warning: '警告',
+    info: '信息',
+    confirm: '确认',
+    cancel: '取消',
+    save: '保存',
+    delete: '删除',
+    edit: '编辑',
+    add: '添加',
+    search: '搜索',
+    noData: '暂无数据',
+    retry: '重试',
+    close: '关闭',
+    back: '返回',
+    next: '下一步',
+    previous: '上一步',
+    submit: '提交',
+    reset: '重置'
+  },
+
+  errors: {
+    initFailed: '应用初始化失败，请刷新页面。',
+    unexpectedError: '发生意外错误',
+    connectionLost: '连接已断开',
+    backendUnavailable: '后端不可用 — 请启动 sensing-server'
+  },
+
+  notifications: {
+    mockServerActive: '模拟服务器已激活 - 测试模式',
+    connectedToBackend: '已连接到 Rust 感知服务器',
+    pageHidden: '页面隐藏，暂停更新',
+    pageVisible: '页面可见，恢复更新'
+  }
+};
diff --git a/ui/index.html b/ui/index.html
index 59b4671e..5693971e 100644
--- a/ui/index.html
+++ b/ui/index.html
@@ -3,40 +3,44 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>WiFi DensePose: Human Tracking Through Walls</title>
+    <title data-i18n="meta.title">WiFi DensePose: Human Tracking Through Walls</title>
     <link rel="stylesheet" href="style.css">
 </head>
 <body>
     <div class="container">
         <!-- Header -->
         <header class="header">
-            <h1>WiFi DensePose</h1>
-            <p class="subtitle">Human Tracking Through Walls Using WiFi Signals</p>
+            <h1 data-i18n="header.title">WiFi DensePose</h1>
+            <p class="subtitle" data-i18n="header.subtitle">Human Tracking Through Walls Using WiFi Signals</p>
             <div class="header-info">
                 <span class="api-version"></span>
                 <span class="api-environment"></span>
                 <span class="overall-health"></span>
+                <select id="languageSelector" class="language-selector" title="Select Language">
+                    <option value="en-US">English</option>
+                    <option value="zh-CN">中文简体</option>
+                </select>
             </div>
         </header>
 
         <!-- Navigation -->
         <nav class="nav-tabs">
-            <button class="nav-tab active" data-tab="dashboard">Dashboard</button>
-            <button class="nav-tab" data-tab="hardware">Hardware</button>
-            <button class="nav-tab" data-tab="demo">Live Demo</button>
-            <button class="nav-tab" data-tab="architecture">Architecture</button>
-            <button class="nav-tab" data-tab="performance">Performance</button>
-            <button class="nav-tab" data-tab="applications">Applications</button>
-            <button class="nav-tab" data-tab="sensing">Sensing</button>
-            <button class="nav-tab" data-tab="training">Training</button>
-            <a href="observatory.html" class="nav-tab" style="text-decoration:none">Observatory</a>
+            <button class="nav-tab active" data-tab="dashboard" data-i18n="nav.dashboard">Dashboard</button>
+            <button class="nav-tab" data-tab="hardware" data-i18n="nav.hardware">Hardware</button>
+            <button class="nav-tab" data-tab="demo" data-i18n="nav.demo">Live Demo</button>
+            <button class="nav-tab" data-tab="architecture" data-i18n="nav.architecture">Architecture</button>
+            <button class="nav-tab" data-tab="performance" data-i18n="nav.performance">Performance</button>
+            <button class="nav-tab" data-tab="applications" data-i18n="nav.applications">Applications</button>
+            <button class="nav-tab" data-tab="sensing" data-i18n="nav.sensing">Sensing</button>
+            <button class="nav-tab" data-tab="training" data-i18n="nav.training">Training</button>
+            <a href="observatory.html" class="nav-tab" style="text-decoration:none" data-i18n="nav.observatory">Observatory</a>
         </nav>
 
         <!-- Dashboard Tab -->
         <section id="dashboard" class="tab-content active">
             <div class="hero-section">
-                <h2>Revolutionary WiFi-Based Human Pose Detection</h2>
-                <p class="hero-description">
+                <h2 data-i18n="dashboard.title">Revolutionary WiFi-Based Human Pose Detection</h2>
+                <p class="hero-description" data-i18n="dashboard.description">
                     AI can track your full-body movement through walls using just WiFi signals. 
                     Researchers at Carnegie Mellon have trained a neural network to turn basic WiFi 
                     signals into detailed wireframe models of human bodies.
@@ -47,30 +51,30 @@ <h2>Revolutionary WiFi-Based Human Pose Detection</h2>
 
                 <!-- Live Status Panel -->
                 <div class="live-status-panel">
-                    <h3>System Status</h3>
+                    <h3 data-i18n="dashboard.status.title">System Status</h3>
                     <div class="status-grid">
                         <div class="component-status" data-component="api">
-                            <span class="component-name">API Server</span>
+                            <span class="component-name" data-i18n="dashboard.status.apiServer">API Server</span>
                             <span class="status-text">-</span>
                             <span class="status-message"></span>
                         </div>
                         <div class="component-status" data-component="hardware">
-                            <span class="component-name">Hardware</span>
+                            <span class="component-name" data-i18n="dashboard.status.hardware">Hardware</span>
                             <span class="status-text">-</span>
                             <span class="status-message"></span>
                         </div>
                         <div class="component-status" data-component="inference">
-                            <span class="component-name">Inference</span>
+                            <span class="component-name" data-i18n="dashboard.status.inference">Inference</span>
                             <span class="status-text">-</span>
                             <span class="status-message"></span>
                         </div>
                         <div class="component-status" data-component="streaming">
-                            <span class="component-name">Streaming</span>
+                            <span class="component-name" data-i18n="dashboard.status.streaming">Streaming</span>
                             <span class="status-text">-</span>
                             <span class="status-message"></span>
                         </div>
                         <div class="component-status" data-component="datasource" id="dashboard-datasource">
-                            <span class="component-name">Data Source</span>
+                            <span class="component-name" data-i18n="dashboard.status.datasource">Data Source</span>
                             <span class="status-text">-</span>
                             <span class="status-message"></span>
                         </div>
@@ -79,24 +83,24 @@ <h3>System Status</h3>
 
                 <!-- System Metrics -->
                 <div class="system-metrics-panel">
-                    <h3>System Metrics</h3>
+                    <h3 data-i18n="dashboard.metrics.title">System Metrics</h3>
                     <div class="metrics-grid">
                         <div class="metric-item">
-                            <span class="metric-label">CPU Usage</span>
+                            <span class="metric-label" data-i18n="dashboard.metrics.cpuUsage">CPU Usage</span>
                             <div class="progress-bar" data-type="cpu">
                                 <div class="progress-fill normal" style="width: 0%"></div>
                             </div>
                             <span class="cpu-usage">0%</span>
                         </div>
                         <div class="metric-item">
-                            <span class="metric-label">Memory Usage</span>
+                            <span class="metric-label" data-i18n="dashboard.metrics.memoryUsage">Memory Usage</span>
                             <div class="progress-bar" data-type="memory">
                                 <div class="progress-fill normal" style="width: 0%"></div>
                             </div>
                             <span class="memory-usage">0%</span>
                         </div>
                         <div class="metric-item">
-                            <span class="metric-label">Disk Usage</span>
+                            <span class="metric-label" data-i18n="dashboard.metrics.diskUsage">Disk Usage</span>
                             <div class="progress-bar" data-type="disk">
                                 <div class="progress-fill normal" style="width: 0%"></div>
                             </div>
@@ -107,30 +111,30 @@ <h3>System Metrics</h3>
 
                 <!-- Features Status -->
                 <div class="features-panel">
-                    <h3>Features</h3>
+                    <h3 data-i18n="dashboard.features.title">Features</h3>
                     <div class="features-status"></div>
                 </div>
 
                 <!-- Live Statistics -->
                 <div class="live-stats-panel">
-                    <h3>Live Statistics</h3>
+                    <h3 data-i18n="dashboard.stats.title">Live Statistics</h3>
                     <div class="stats-grid">
                         <div class="stat-item">
-                            <span class="stat-label">Active Persons</span>
+                            <span class="stat-label" data-i18n="dashboard.stats.activePersons">Active Persons</span>
                             <span class="person-count">0</span>
                         </div>
                         <div class="stat-item">
-                            <span class="stat-label">Avg Confidence</span>
+                            <span class="stat-label" data-i18n="dashboard.stats.avgConfidence">Avg Confidence</span>
                             <span class="avg-confidence">0%</span>
                         </div>
                         <div class="stat-item">
-                            <span class="stat-label">Total Detections</span>
+                            <span class="stat-label" data-i18n="dashboard.stats.totalDetections">Total Detections</span>
                             <span class="detection-count">0</span>
                         </div>
                     </div>
                     
                     <div class="zones-panel">
-                        <h4>Zone Occupancy</h4>
+                        <h4 data-i18n="dashboard.stats.zoneOccupancy">Zone Occupancy</h4>
                         <div class="zones-summary"></div>
                     </div>
                 </div>
@@ -138,42 +142,42 @@ <h4>Zone Occupancy</h4>
                 <div class="key-benefits">
                     <div class="benefit-card">
                         <div class="benefit-icon">🏠</div>
-                        <h3>Through Walls</h3>
-                        <p>Works through solid barriers with no line of sight required</p>
+                        <h3 data-i18n="dashboard.benefits.throughWalls.title">Through Walls</h3>
+                        <p data-i18n="dashboard.benefits.throughWalls.description">Works through solid barriers with no line of sight required</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon">🔒</div>
-                        <h3>Privacy-Preserving</h3>
-                        <p>No cameras or visual recording - just WiFi signal analysis</p>
+                        <h3 data-i18n="dashboard.benefits.privacy.title">Privacy-Preserving</h3>
+                        <p data-i18n="dashboard.benefits.privacy.description">No cameras or visual recording - just WiFi signal analysis</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon">⚡</div>
-                        <h3>Real-Time</h3>
-                        <p>Maps 24 body regions in real-time at 100Hz sampling rate</p>
+                        <h3 data-i18n="dashboard.benefits.realtime.title">Real-Time</h3>
+                        <p data-i18n="dashboard.benefits.realtime.description">Maps 24 body regions in real-time at 100Hz sampling rate</p>
                     </div>
                     <div class="benefit-card">
                         <div class="benefit-icon">💰</div>
-                        <h3>Low Cost</h3>
-                        <p>Built using $30 commercial WiFi hardware</p>
+                        <h3 data-i18n="dashboard.benefits.lowCost.title">Low Cost</h3>
+                        <p data-i18n="dashboard.benefits.lowCost.description">Built using $30 commercial WiFi hardware</p>
                     </div>
                 </div>
 
                 <div class="system-stats">
                     <div class="stat" data-stat="body-regions">
                         <span class="stat-value">24</span>
-                        <span class="stat-label">Body Regions</span>
+                        <span class="stat-label" data-i18n="dashboard.systemStats.bodyRegions">Body Regions</span>
                     </div>
                     <div class="stat" data-stat="sampling-rate">
                         <span class="stat-value">100Hz</span>
-                        <span class="stat-label">Sampling Rate</span>
+                        <span class="stat-label" data-i18n="dashboard.systemStats.samplingRate">Sampling Rate</span>
                     </div>
                     <div class="stat" data-stat="accuracy">
                         <span class="stat-value">87.2%</span>
-                        <span class="stat-label">Accuracy (AP@50)</span>
+                        <span class="stat-label" data-i18n="dashboard.systemStats.accuracy">Accuracy (AP@50)</span>
                     </div>
                     <div class="stat" data-stat="hardware-cost">
                         <span class="stat-value">$30</span>
-                        <span class="stat-label">Hardware Cost</span>
+                        <span class="stat-label" data-i18n="dashboard.systemStats.hardwareCost">Hardware Cost</span>
                     </div>
                 </div>
             </div>
@@ -181,12 +185,12 @@ <h3>Low Cost</h3>
 
         <!-- Hardware Tab -->
         <section id="hardware" class="tab-content">
-            <h2>Hardware Configuration</h2>
+            <h2 data-i18n="hardware.title">Hardware Configuration</h2>
             
             <div class="hardware-grid">
                 <div class="antenna-section">
-                    <h3>3×3 Antenna Array</h3>
-                    <p class="help-text">Click antennas to toggle their state</p>
+                    <h3 data-i18n="hardware.antenna.title">3×3 Antenna Array</h3>
+                    <p class="help-text" data-i18n="hardware.antenna.helpText">Click antennas to toggle their state</p>
                     <div class="antenna-array">
                         <div class="antenna-grid">
                             <div class="antenna tx active" data-type="TX1"></div>
@@ -202,11 +206,11 @@ <h3>3×3 Antenna Array</h3>
                         <div class="antenna-legend">
                             <div class="legend-item">
                                 <div class="legend-color tx"></div>
-                                <span>Transmitters (3)</span>
+                                <span data-i18n="hardware.antenna.transmitters">Transmitters (3)</span>
                             </div>
                             <div class="legend-item">
                                 <div class="legend-color rx"></div>
-                                <span>Receivers (6)</span>
+                                <span data-i18n="hardware.antenna.receivers">Receivers (6)</span>
                             </div>
                         </div>
                         <div class="array-status"></div>
@@ -214,38 +218,38 @@ <h3>3×3 Antenna Array</h3>
                 </div>
 
                 <div class="config-section">
-                    <h3>WiFi Configuration</h3>
+                    <h3 data-i18n="hardware.wifi.title">WiFi Configuration</h3>
                     <div class="config-grid">
                         <div class="config-item">
-                            <label>Frequency</label>
-                            <div class="config-value">2.4GHz ± 20MHz</div>
+                            <label data-i18n="hardware.wifi.frequency">Frequency</label>
+                            <div class="config-value" data-i18n="hardware.wifi.frequencyValue">2.4GHz ± 20MHz</div>
                         </div>
                         <div class="config-item">
-                            <label>Subcarriers</label>
-                            <div class="config-value">30</div>
+                            <label data-i18n="hardware.wifi.subcarriers">Subcarriers</label>
+                            <div class="config-value" data-i18n="hardware.wifi.subcarriersValue">30</div>
                         </div>
                         <div class="config-item">
-                            <label>Sampling Rate</label>
-                            <div class="config-value">100 Hz</div>
+                            <label data-i18n="hardware.wifi.samplingRate">Sampling Rate</label>
+                            <div class="config-value" data-i18n="hardware.wifi.samplingRateValue">100 Hz</div>
                         </div>
                         <div class="config-item">
-                            <label>Total Cost</label>
-                            <div class="config-value">$30</div>
+                            <label data-i18n="hardware.wifi.totalCost">Total Cost</label>
+                            <div class="config-value" data-i18n="hardware.wifi.totalCostValue">$30</div>
                         </div>
                     </div>
 
                     <div class="csi-data">
-                        <h4>Real-time CSI Data</h4>
+                        <h4 data-i18n="hardware.csi.title">Real-time CSI Data</h4>
                         <div class="csi-display">
                             <div class="csi-row">
-                                <span>Amplitude:</span>
+                                <span data-i18n="hardware.csi.amplitude">Amplitude:</span>
                                 <div class="csi-bar">
                                     <div class="csi-fill amplitude" style="width: 75%"></div>
                                 </div>
                                 <span class="csi-value">0.75</span>
                             </div>
                             <div class="csi-row">
-                                <span>Phase:</span>
+                                <span data-i18n="hardware.csi.phase">Phase:</span>
                                 <div class="csi-bar">
                                     <div class="csi-fill phase" style="width: 60%"></div>
                                 </div>
@@ -259,50 +263,50 @@ <h4>Real-time CSI Data</h4>
 
         <!-- Demo Tab -->
         <section id="demo" class="tab-content">
-            <h2>Live Demonstration</h2>
+            <h2 data-i18n="demo.title">Live Demonstration</h2>
             
             <div class="demo-controls">
-                <button id="startDemo" class="btn btn--primary">Start Stream</button>
-                <button id="stopDemo" class="btn btn--secondary" disabled>Stop Stream</button>
+                <button id="startDemo" class="btn btn--primary" data-i18n="demo.controls.startStream">Start Stream</button>
+                <button id="stopDemo" class="btn btn--secondary" disabled data-i18n="demo.controls.stopStream">Stop Stream</button>
                 <div class="demo-status">
-                    <span class="status status--info" id="demoStatus">Ready</span>
+                    <span class="status status--info" id="demoStatus" data-i18n="demo.controls.ready">Ready</span>
                 </div>
             </div>
 
             <div class="demo-grid">
                 <div class="signal-panel">
-                    <h3>WiFi Signal Analysis</h3>
+                    <h3 data-i18n="demo.signal.title">WiFi Signal Analysis</h3>
                     <div class="signal-display">
                         <canvas id="signalCanvas" width="400" height="200"></canvas>
                     </div>
                     <div class="signal-metrics">
                         <div class="metric">
-                            <span>Signal Strength:</span>
+                            <span data-i18n="demo.signal.signalStrength">Signal Strength:</span>
                             <span id="signalStrength">-45 dBm</span>
                         </div>
                         <div class="metric">
-                            <span>Processing Latency:</span>
+                            <span data-i18n="demo.signal.processingLatency">Processing Latency:</span>
                             <span id="latency">12 ms</span>
                         </div>
                     </div>
                 </div>
 
                 <div class="pose-panel">
-                    <h3>Human Pose Detection</h3>
+                    <h3 data-i18n="demo.pose.title">Human Pose Detection</h3>
                     <div class="pose-display">
                         <canvas id="poseCanvas" width="400" height="300"></canvas>
                     </div>
                     <div class="detection-info">
                         <div class="info-item">
-                            <span>Persons Detected:</span>
+                            <span data-i18n="demo.pose.personsDetected">Persons Detected:</span>
                             <span id="personCount">0</span>
                         </div>
                         <div class="info-item">
-                            <span>Confidence:</span>
+                            <span data-i18n="demo.pose.confidence">Confidence:</span>
                             <span id="confidence">0.0%</span>
                         </div>
                         <div class="info-item">
-                            <span>Keypoints:</span>
+                            <span data-i18n="demo.pose.keypoints">Keypoints:</span>
                             <span id="keypoints">0/0</span>
                         </div>
                     </div>
@@ -312,7 +316,7 @@ <h3>Human Pose Detection</h3>
 
         <!-- Architecture Tab -->
         <section id="architecture" class="tab-content">
-            <h2>System Architecture</h2>
+            <h2 data-i18n="architecture.title">System Architecture</h2>
             
             <div class="architecture-flow">
                 <img src="https://pplx-res.cloudinary.com/image/upload/v1748813853/gpt4o_images/m7zztcttnue7vaxclvuw.png" 
@@ -321,28 +325,28 @@ <h2>System Architecture</h2>
                 <div class="flow-steps">
                     <div class="step-card" data-step="1">
                         <div class="step-number">1</div>
-                        <h3>CSI Input</h3>
-                        <p>Channel State Information collected from WiFi antenna array</p>
+                        <h3 data-i18n="architecture.steps.csiInput.title">CSI Input</h3>
+                        <p data-i18n="architecture.steps.csiInput.description">Channel State Information collected from WiFi antenna array</p>
                     </div>
                     <div class="step-card" data-step="2">
                         <div class="step-number">2</div>
-                        <h3>Phase Sanitization</h3>
-                        <p>Remove hardware-specific noise and normalize signal phase</p>
+                        <h3 data-i18n="architecture.steps.phaseSanitization.title">Phase Sanitization</h3>
+                        <p data-i18n="architecture.steps.phaseSanitization.description">Remove hardware-specific noise and normalize signal phase</p>
                     </div>
                     <div class="step-card" data-step="3">
                         <div class="step-number">3</div>
-                        <h3>Modality Translation</h3>
-                        <p>Convert WiFi signals to visual representation using CNN</p>
+                        <h3 data-i18n="architecture.steps.modalityTranslation.title">Modality Translation</h3>
+                        <p data-i18n="architecture.steps.modalityTranslation.description">Convert WiFi signals to visual representation using CNN</p>
                     </div>
                     <div class="step-card" data-step="4">
                         <div class="step-number">4</div>
-                        <h3>DensePose-RCNN</h3>
-                        <p>Extract human pose keypoints and body part segmentation</p>
+                        <h3 data-i18n="architecture.steps.densePose.title">DensePose-RCNN</h3>
+                        <p data-i18n="architecture.steps.densePose.description">Extract human pose keypoints and body part segmentation</p>
                     </div>
                     <div class="step-card" data-step="5">
                         <div class="step-number">5</div>
-                        <h3>Wireframe Output</h3>
-                        <p>Generate final human pose wireframe visualization</p>
+                        <h3 data-i18n="architecture.steps.wireframeOutput.title">Wireframe Output</h3>
+                        <p data-i18n="architecture.steps.wireframeOutput.description">Generate final human pose wireframe visualization</p>
                     </div>
                 </div>
             </div>
@@ -350,7 +354,7 @@ <h3>Wireframe Output</h3>
 
         <!-- Performance Tab -->
         <section id="performance" class="tab-content">
-            <h2>Performance Analysis</h2>
+            <h2 data-i18n="performance.title">Performance Analysis</h2>
             
             <div class="performance-chart">
                 <img src="https://pplx-res.cloudinary.com/image/upload/v1748813924/pplx_code_interpreter/af6ef268_nsauu6.jpg" 
@@ -359,60 +363,60 @@ <h2>Performance Analysis</h2>
 
             <div class="performance-grid">
                 <div class="performance-card">
-                    <h3>WiFi-based (Same Layout)</h3>
+                    <h3 data-i18n="performance.wifiBased.title">WiFi-based (Same Layout)</h3>
                     <div class="metric-list">
                         <div class="metric-item">
-                            <span>Average Precision:</span>
+                            <span data-i18n="performance.wifiBased.averagePrecision">Average Precision:</span>
                             <span class="metric-value">43.5%</span>
                         </div>
                         <div class="metric-item">
-                            <span>AP@50:</span>
+                            <span data-i18n="performance.wifiBased.ap50">AP@50:</span>
                             <span class="metric-value success">87.2%</span>
                         </div>
                         <div class="metric-item">
-                            <span>AP@75:</span>
+                            <span data-i18n="performance.wifiBased.ap75">AP@75:</span>
                             <span class="metric-value">44.6%</span>
                         </div>
                     </div>
                 </div>
 
                 <div class="performance-card">
-                    <h3>Image-based (Reference)</h3>
+                    <h3 data-i18n="performance.imageBased.title">Image-based (Reference)</h3>
                     <div class="metric-list">
                         <div class="metric-item">
-                            <span>Average Precision:</span>
+                            <span data-i18n="performance.imageBased.averagePrecision">Average Precision:</span>
                             <span class="metric-value success">84.7%</span>
                         </div>
                         <div class="metric-item">
-                            <span>AP@50:</span>
+                            <span data-i18n="performance.imageBased.ap50">AP@50:</span>
                             <span class="metric-value success">94.4%</span>
                         </div>
                         <div class="metric-item">
-                            <span>AP@75:</span>
+                            <span data-i18n="performance.imageBased.ap75">AP@75:</span>
                             <span class="metric-value success">77.1%</span>
                         </div>
                     </div>
                 </div>
 
                 <div class="limitations-section">
-                    <h3>Advantages & Limitations</h3>
+                    <h3 data-i18n="performance.advantages.title">Advantages & Limitations</h3>
                     <div class="pros-cons">
                         <div class="pros">
-                            <h4>Advantages</h4>
+                            <h4 data-i18n="performance.advantages.pros.title">Advantages</h4>
                             <ul>
-                                <li>Through-wall detection</li>
-                                <li>Privacy preserving</li>
-                                <li>Lighting independent</li>
-                                <li>Low cost hardware</li>
-                                <li>Uses existing WiFi</li>
+                                <li data-i18n="performance.advantages.pros.items.0">Through-wall detection</li>
+                                <li data-i18n="performance.advantages.pros.items.1">Privacy preserving</li>
+                                <li data-i18n="performance.advantages.pros.items.2">Lighting independent</li>
+                                <li data-i18n="performance.advantages.pros.items.3">Low cost hardware</li>
+                                <li data-i18n="performance.advantages.pros.items.4">Uses existing WiFi</li>
                             </ul>
                         </div>
                         <div class="cons">
-                            <h4>Limitations</h4>
+                            <h4 data-i18n="performance.advantages.cons.title">Limitations</h4>
                             <ul>
-                                <li>Performance drops in different layouts</li>
-                                <li>Requires WiFi-compatible devices</li>
-                                <li>Training requires synchronized data</li>
+                                <li data-i18n="performance.advantages.cons.items.0">Performance drops in different layouts</li>
+                                <li data-i18n="performance.advantages.cons.items.1">Requires WiFi-compatible devices</li>
+                                <li data-i18n="performance.advantages.cons.items.2">Training requires synchronized data</li>
                             </ul>
                         </div>
                     </div>
@@ -422,68 +426,68 @@ <h4>Limitations</h4>
 
         <!-- Applications Tab -->
         <section id="applications" class="tab-content">
-            <h2>Real-World Applications</h2>
+            <h2 data-i18n="applications.title">Real-World Applications</h2>
             
             <div class="applications-grid">
                 <div class="app-card">
                     <div class="app-icon">👴</div>
-                    <h3>Elderly Care Monitoring</h3>
-                    <p>Monitor elderly individuals for falls or emergencies without invading privacy. Track movement patterns and detect anomalies in daily routines.</p>
+                    <h3 data-i18n="applications.elderlyCare.title">Elderly Care Monitoring</h3>
+                    <p data-i18n="applications.elderlyCare.description">Monitor elderly individuals for falls or emergencies without invading privacy. Track movement patterns and detect anomalies in daily routines.</p>
                     <div class="app-features">
-                        <span class="feature-tag">Fall Detection</span>
-                        <span class="feature-tag">Activity Monitoring</span>
-                        <span class="feature-tag">Emergency Alert</span>
+                        <span class="feature-tag" data-i18n="applications.elderlyCare.features.0">Fall Detection</span>
+                        <span class="feature-tag" data-i18n="applications.elderlyCare.features.1">Activity Monitoring</span>
+                        <span class="feature-tag" data-i18n="applications.elderlyCare.features.2">Emergency Alert</span>
                     </div>
                 </div>
 
                 <div class="app-card">
                     <div class="app-icon">🏠</div>
-                    <h3>Home Security Systems</h3>
-                    <p>Detect intruders and monitor home security without visible cameras. Track multiple persons and identify suspicious movement patterns.</p>
+                    <h3 data-i18n="applications.homeSecurity.title">Home Security Systems</h3>
+                    <p data-i18n="applications.homeSecurity.description">Detect intruders and monitor home security without visible cameras. Track multiple persons and identify suspicious movement patterns.</p>
                     <div class="app-features">
-                        <span class="feature-tag">Intrusion Detection</span>
-                        <span class="feature-tag">Multi-person Tracking</span>
-                        <span class="feature-tag">Invisible Monitoring</span>
+                        <span class="feature-tag" data-i18n="applications.homeSecurity.features.0">Intrusion Detection</span>
+                        <span class="feature-tag" data-i18n="applications.homeSecurity.features.1">Multi-person Tracking</span>
+                        <span class="feature-tag" data-i18n="applications.homeSecurity.features.2">Invisible Monitoring</span>
                     </div>
                 </div>
 
                 <div class="app-card">
                     <div class="app-icon">🏥</div>
-                    <h3>Healthcare Patient Monitoring</h3>
-                    <p>Monitor patients in hospitals and care facilities. Track vital signs through movement analysis and detect health emergencies.</p>
+                    <h3 data-i18n="applications.healthcare.title">Healthcare Patient Monitoring</h3>
+                    <p data-i18n="applications.healthcare.description">Monitor patients in hospitals and care facilities. Track vital signs through movement analysis and detect health emergencies.</p>
                     <div class="app-features">
-                        <span class="feature-tag">Vital Sign Analysis</span>
-                        <span class="feature-tag">Movement Tracking</span>
-                        <span class="feature-tag">Health Alerts</span>
+                        <span class="feature-tag" data-i18n="applications.healthcare.features.0">Vital Sign Analysis</span>
+                        <span class="feature-tag" data-i18n="applications.healthcare.features.1">Movement Tracking</span>
+                        <span class="feature-tag" data-i18n="applications.healthcare.features.2">Health Alerts</span>
                     </div>
                 </div>
 
                 <div class="app-card">
                     <div class="app-icon">🏢</div>
-                    <h3>Smart Building Occupancy</h3>
-                    <p>Optimize building energy consumption by tracking occupancy patterns. Control lighting, HVAC, and security systems automatically.</p>
+                    <h3 data-i18n="applications.smartBuilding.title">Smart Building Occupancy</h3>
+                    <p data-i18n="applications.smartBuilding.description">Optimize building energy consumption by tracking occupancy patterns. Control lighting, HVAC, and security systems automatically.</p>
                     <div class="app-features">
-                        <span class="feature-tag">Energy Optimization</span>
-                        <span class="feature-tag">Occupancy Tracking</span>
-                        <span class="feature-tag">Smart Controls</span>
+                        <span class="feature-tag" data-i18n="applications.smartBuilding.features.0">Energy Optimization</span>
+                        <span class="feature-tag" data-i18n="applications.smartBuilding.features.1">Occupancy Tracking</span>
+                        <span class="feature-tag" data-i18n="applications.smartBuilding.features.2">Smart Controls</span>
                     </div>
                 </div>
 
                 <div class="app-card">
                     <div class="app-icon">🥽</div>
-                    <h3>AR/VR Applications</h3>
-                    <p>Enable full-body tracking for virtual and augmented reality applications without wearing additional sensors or cameras.</p>
+                    <h3 data-i18n="applications.arVr.title">AR/VR Applications</h3>
+                    <p data-i18n="applications.arVr.description">Enable full-body tracking for virtual and augmented reality applications without wearing additional sensors or cameras.</p>
                     <div class="app-features">
-                        <span class="feature-tag">Full Body Tracking</span>
-                        <span class="feature-tag">Sensor-free</span>
-                        <span class="feature-tag">Immersive Experience</span>
+                        <span class="feature-tag" data-i18n="applications.arVr.features.0">Full Body Tracking</span>
+                        <span class="feature-tag" data-i18n="applications.arVr.features.1">Sensor-free</span>
+                        <span class="feature-tag" data-i18n="applications.arVr.features.2">Immersive Experience</span>
                     </div>
                 </div>
             </div>
 
             <div class="implementation-note">
-                <h3>Implementation Considerations</h3>
-                <p>While WiFi DensePose offers revolutionary capabilities, successful implementation requires careful consideration of environment setup, data privacy regulations, and system calibration for optimal performance.</p>
+                <h3 data-i18n="applications.implementation.title">Implementation Considerations</h3>
+                <p data-i18n="applications.implementation.description">While WiFi DensePose offers revolutionary capabilities, successful implementation requires careful consideration of environment setup, data privacy regulations, and system calibration for optimal performance.</p>
             </div>
         </section>
 
@@ -493,8 +497,8 @@ <h3>Implementation Considerations</h3>
         <!-- Training Tab -->
         <section id="training" class="tab-content">
             <div class="tab-header">
-                <h2>Model Training</h2>
-                <p>Record CSI data, train pose estimation models, and manage .rvf files</p>
+                <h2 data-i18n="training.title">Model Training</h2>
+                <p data-i18n="training.description">Record CSI data, train pose estimation models, and manage .rvf files</p>
             </div>
             <div id="training-container" style="display: flex; gap: 20px; flex-wrap: wrap;">
                 <div id="training-panel-container" style="flex: 1; min-width: 400px;"></div>
diff --git a/ui/style.css b/ui/style.css
index f9150a4f..e25ffbeb 100644
--- a/ui/style.css
+++ b/ui/style.css
@@ -1409,6 +1409,7 @@ canvas {
   justify-content: center;
   margin-top: var(--space-16);
   font-size: var(--font-size-sm);
+  align-items: center;
 }
 
 .api-version,
@@ -2424,3 +2425,40 @@ canvas {
 .pose-trail-btn:hover {
   background: rgba(var(--color-primary-rgb), 0.2);
 }
+
+/* Language Selector */
+.language-selector {
+  padding: var(--space-4) var(--space-12);
+  padding-right: var(--space-28);
+  border-radius: var(--radius-base);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  background-color: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  appearance: none;
+  background-image: var(--select-caret-light);
+  background-repeat: no-repeat;
+  background-position: right var(--space-8) center;
+  background-size: 12px;
+  transition: all 0.2s ease;
+  min-width: 100px;
+}
+
+.language-selector:hover {
+  border-color: var(--color-primary);
+  background-color: var(--color-secondary-hover);
+}
+
+.language-selector:focus {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-color: var(--color-primary);
+}
+
+.language-selector option {
+  padding: var(--space-8);
+  background-color: var(--color-surface);
+  color: var(--color-text);
+}