From f36f76edb4dafc818538e5233a0e147e4e1c5685 Mon Sep 17 00:00:00 2001
From: Pratiyank Kumar <159152851+Pratiyankkumar@users.noreply.github.com>
Date: Tue, 10 Mar 2026 20:19:17 +0530
Subject: [PATCH 1/3] feat: add an option to switch to english language

---
 frontend/package.json                        |   1 +
 frontend/src/App.vue                         |  10 +-
 frontend/src/components/GraphPanel.vue       |  14 +-
 frontend/src/components/HistoryDatabase.vue  |  42 ++--
 frontend/src/components/LanguageSelector.vue |  87 ++++++++
 frontend/src/components/Step1GraphBuild.vue  |  34 +--
 frontend/src/components/Step2EnvSetup.vue    | 166 +++++++--------
 frontend/src/components/Step3Simulation.vue  |   2 +-
 frontend/src/i18n/index.js                   |  31 +++
 frontend/src/i18n/locales/en.js              | 211 +++++++++++++++++++
 frontend/src/i18n/locales/zh.js              | 210 ++++++++++++++++++
 frontend/src/main.js                         |   2 +
 frontend/src/views/Home.vue                  |  75 +++----
 frontend/src/views/MainView.vue              |  22 +-
 frontend/src/views/SimulationView.vue        |   8 +-
 15 files changed, 742 insertions(+), 173 deletions(-)
 create mode 100644 frontend/src/components/LanguageSelector.vue
 create mode 100644 frontend/src/i18n/index.js
 create mode 100644 frontend/src/i18n/locales/en.js
 create mode 100644 frontend/src/i18n/locales/zh.js

diff --git a/frontend/package.json b/frontend/package.json
index f7e995a1..7e05e891 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "axios": "^1.13.2",
     "d3": "^7.9.0",
     "vue": "^3.5.24",
+    "vue-i18n": "^9.14.5",
     "vue-router": "^4.6.3"
   },
   "devDependencies": {
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index b7cd71ca..8ce882f8 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -3,7 +3,15 @@
 </template>
 
 <script setup>
-// 使用 Vue Router 来管理页面
+import { onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { getStoredLocale } from './i18n'
+
+// Sync html lang attribute on mount
+onMounted(() => {
+  const locale = getStoredLocale()
+  document.documentElement.lang = locale === 'zh' ? 'zh-CN' : 'en'
+})
 </script>
 
 <style>
diff --git a/frontend/src/components/GraphPanel.vue b/frontend/src/components/GraphPanel.vue
index 314c966e..14f1643f 100644
--- a/frontend/src/components/GraphPanel.vue
+++ b/frontend/src/components/GraphPanel.vue
@@ -4,11 +4,11 @@
       <span class="panel-title">Graph Relationship Visualization</span>
       <!-- 顶部工具栏 (Internal Top Right) -->
       <div class="header-tools">
-        <button class="tool-btn" @click="$emit('refresh')" :disabled="loading" title="刷新图谱">
+        <button class="tool-btn" @click="$emit('refresh')" :disabled="loading" :title="$t('graph.refresh')">
           <span class="icon-refresh" :class="{ 'spinning': loading }">↻</span>
           <span class="btn-text">Refresh</span>
         </button>
-        <button class="tool-btn" @click="$emit('toggle-maximize')" title="最大化/还原">
+        <button class="tool-btn" @click="$emit('toggle-maximize')" :title="$t('graph.maximize')">
           <span class="icon-maximize">⛶</span>
         </button>
       </div>
@@ -27,7 +27,7 @@
               <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-4.44-4.04z" />
             </svg>
           </div>
-          {{ isSimulating ? 'GraphRAG长短期记忆实时更新中' : '实时更新中...' }}
+          {{ isSimulating ? $t('graph.memoryUpdating') : $t('graph.updating') }}
         </div>
         
         <!-- 模拟结束后的提示 -->
@@ -39,8 +39,8 @@
               <line x1="12" y1="8" x2="12.01" y2="8"></line>
             </svg>
           </div>
-          <span class="hint-text">还有少量内容处理中，建议稍后手动刷新图谱</span>
-          <button class="hint-close-btn" @click="dismissFinishedHint" title="关闭提示">
+          <span class="hint-text">{{ $t('graph.hintRefresh') }}</span>
+          <button class="hint-close-btn" @click="dismissFinishedHint" :title="$t('graph.closeHint')">
             <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
               <line x1="18" y1="6" x2="6" y2="18"></line>
               <line x1="6" y1="6" x2="18" y2="18"></line>
@@ -203,13 +203,13 @@
       <!-- 加载状态 -->
       <div v-else-if="loading" class="graph-state">
         <div class="loading-spinner"></div>
-        <p>图谱数据加载中...</p>
+        <p>{{ $t('graph.loadingGraph') }}</p>
       </div>
       
       <!-- 等待/空状态 -->
       <div v-else class="graph-state">
         <div class="empty-icon">❖</div>
-        <p class="empty-text">等待本体生成...</p>
+        <p class="empty-text">{{ $t('graph.waitOntology') }}</p>
       </div>
     </div>
 
diff --git a/frontend/src/components/HistoryDatabase.vue b/frontend/src/components/HistoryDatabase.vue
index edc73f46..306f486c 100644
--- a/frontend/src/components/HistoryDatabase.vue
+++ b/frontend/src/components/HistoryDatabase.vue
@@ -13,7 +13,7 @@
     <!-- 标题区域 -->
     <div class="section-header">
       <div class="section-line"></div>
-      <span class="section-title">推演记录</span>
+      <span class="section-title">{{ $t('history.title') }}</span>
       <div class="section-line"></div>
     </div>
 
@@ -36,16 +36,16 @@
             <span 
               class="status-icon" 
               :class="{ available: project.project_id, unavailable: !project.project_id }"
-              title="图谱构建"
+              :title="$t('history.graphBuild')"
             >◇</span>
             <span 
               class="status-icon available" 
-              title="环境搭建"
+              :title="$t('history.envSetup')"
             >◈</span>
             <span 
               class="status-icon" 
               :class="{ available: project.report_id, unavailable: !project.report_id }"
-              title="分析报告"
+              :title="$t('history.report')"
             >◆</span>
           </div>
         </div>
@@ -67,13 +67,13 @@
             </div>
             <!-- 如果有更多文件，显示提示 -->
             <div v-if="project.files.length > 3" class="files-more">
-              +{{ project.files.length - 3 }} 个文件
+              +{{ project.files.length - 3 }}{{ $t('history.moreFiles') }}
             </div>
           </div>
           <!-- 无文件时的占位 -->
           <div class="files-empty" v-else>
             <span class="empty-file-icon">◇</span>
-            <span class="empty-file-text">暂无文件</span>
+            <span class="empty-file-text">{{ $t('history.noFiles') }}</span>
           </div>
         </div>
 
@@ -102,7 +102,7 @@
     <!-- 加载状态 -->
     <div v-if="loading" class="loading-state">
       <span class="loading-spinner"></span>
-      <span class="loading-text">加载中...</span>
+      <span class="loading-text">{{ $t('common.loading') }}</span>
     </div>
 
     <!-- 历史回放详情弹窗 -->
@@ -126,27 +126,27 @@
             <div class="modal-body">
               <!-- 模拟需求 -->
               <div class="modal-section">
-                <div class="modal-label">模拟需求</div>
-                <div class="modal-requirement">{{ selectedProject.simulation_requirement || '无' }}</div>
+                <div class="modal-label">{{ $t('history.simRequirement') }}</div>
+                <div class="modal-requirement">{{ selectedProject.simulation_requirement || $t('common.none') }}</div>
               </div>
 
               <!-- 文件列表 -->
               <div class="modal-section">
-                <div class="modal-label">关联文件</div>
+                <div class="modal-label">{{ $t('history.relatedFiles') }}</div>
                 <div class="modal-files" v-if="selectedProject.files && selectedProject.files.length > 0">
                   <div v-for="(file, index) in selectedProject.files" :key="index" class="modal-file-item">
                     <span class="file-tag" :class="getFileType(file.filename)">{{ getFileTypeLabel(file.filename) }}</span>
                     <span class="modal-file-name">{{ file.filename }}</span>
                   </div>
                 </div>
-                <div class="modal-empty" v-else>暂无关联文件</div>
+                <div class="modal-empty" v-else>{{ $t('history.noRelatedFiles') }}</div>
               </div>
             </div>
 
             <!-- 推演回放分割线 -->
             <div class="modal-divider">
               <span class="divider-line"></span>
-              <span class="divider-text">推演回放</span>
+              <span class="divider-text">{{ $t('history.playback') }}</span>
               <span class="divider-line"></span>
             </div>
 
@@ -159,7 +159,7 @@
               >
                 <span class="btn-step">Step1</span>
                 <span class="btn-icon">◇</span>
-                <span class="btn-text">图谱构建</span>
+                <span class="btn-text">{{ $t('history.graphBuildBtn') }}</span>
               </button>
               <button 
                 class="modal-btn btn-simulation" 
@@ -167,7 +167,7 @@
               >
                 <span class="btn-step">Step2</span>
                 <span class="btn-icon">◈</span>
-                <span class="btn-text">环境搭建</span>
+                <span class="btn-text">{{ $t('history.envSetupBtn') }}</span>
               </button>
               <button 
                 class="modal-btn btn-report" 
@@ -176,12 +176,12 @@
               >
                 <span class="btn-step">Step4</span>
                 <span class="btn-icon">◆</span>
-                <span class="btn-text">分析报告</span>
+                <span class="btn-text">{{ $t('history.reportBtn') }}</span>
               </button>
             </div>
             <!-- 不可回放提示 -->
             <div class="modal-playback-hint">
-              <span class="hint-text">Step3「开始模拟」与 Step5「深度互动」需在运行中启动，不支持历史回放</span>
+              <span class="hint-text">{{ $t('history.playbackHint') }}</span>
             </div>
           </div>
         </div>
@@ -193,10 +193,12 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, onActivated, watch, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { getSimulationHistory } from '../api/simulation'
 
 const router = useRouter()
 const route = useRoute()
+const { t } = useI18n()
 
 // 状态
 const projects = ref([])
@@ -337,7 +339,7 @@ const truncateText = (text, maxLength) => {
 
 // 从模拟需求生成标题（取前20字）
 const getSimulationTitle = (requirement) => {
-  if (!requirement) return '未命名模拟'
+  if (!requirement) return t('history.noName')
   const title = requirement.slice(0, 20)
   return requirement.length > 20 ? title + '...' : title
 }
@@ -353,8 +355,8 @@ const formatSimulationId = (simulationId) => {
 const formatRounds = (simulation) => {
   const current = simulation.current_round || 0
   const total = simulation.total_rounds || 0
-  if (total === 0) return '未开始'
-  return `${current}/${total} 轮`
+  if (total === 0) return t('history.notStarted')
+  return `${current}/${total}${t('history.rounds')}`
 }
 
 // 获取文件类型（用于样式）
@@ -382,7 +384,7 @@ const getFileTypeLabel = (filename) => {
 
 // 截断文件名（保留扩展名）
 const truncateFilename = (filename, maxLength) => {
-  if (!filename) return '未知文件'
+  if (!filename) return t('history.unknownFile')
   if (filename.length <= maxLength) return filename
   
   const ext = filename.includes('.') ? '.' + filename.split('.').pop() : ''
diff --git a/frontend/src/components/LanguageSelector.vue b/frontend/src/components/LanguageSelector.vue
new file mode 100644
index 00000000..d675cf18
--- /dev/null
+++ b/frontend/src/components/LanguageSelector.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="language-selector" :class="{ light: light }">
+    <button 
+      class="lang-btn"
+      :class="{ active: locale === 'zh' }"
+      @click="setLocale('zh')"
+    >
+      {{ $t('nav.zh') }}
+    </button>
+    <span class="lang-sep">/</span>
+    <button 
+      class="lang-btn"
+      :class="{ active: locale === 'en' }"
+      @click="setLocale('en')"
+    >
+      {{ $t('nav.en') }}
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { setStoredLocale } from '../i18n'
+
+defineProps({
+  light: { type: Boolean, default: false }
+})
+
+const { locale } = useI18n()
+
+const setLocale = (lang) => {
+  locale.value = lang
+  setStoredLocale(lang)
+  document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en'
+}
+</script>
+
+<style scoped>
+.language-selector {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.lang-btn {
+  background: none;
+  border: none;
+  padding: 4px 8px;
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: #000;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.lang-btn:hover {
+  color: #333;
+}
+
+.lang-btn.active {
+  color: #000;
+  font-weight: 600;
+}
+
+.lang-sep {
+  color: #333;
+  font-size: 0.75rem;
+}
+
+/* For light/white header context (MainView, SimulationView) */
+.lang-selector.light .lang-btn {
+  color: #000;
+}
+
+.lang-selector.light .lang-btn:hover {
+  color: #333;
+}
+
+.lang-selector.light .lang-btn.active {
+  color: #000;
+  font-weight: 600;
+}
+
+.lang-selector.light .lang-sep {
+  color: #333;
+}
+</style>
diff --git a/frontend/src/components/Step1GraphBuild.vue b/frontend/src/components/Step1GraphBuild.vue
index de33a3fd..83db7e92 100644
--- a/frontend/src/components/Step1GraphBuild.vue
+++ b/frontend/src/components/Step1GraphBuild.vue
@@ -6,25 +6,25 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">01</span>
-            <span class="step-title">本体生成</span>
+            <span class="step-title">{{ $t('step1.ontology') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="currentPhase > 0" class="badge success">已完成</span>
-            <span v-else-if="currentPhase === 0" class="badge processing">生成中</span>
-            <span v-else class="badge pending">等待</span>
+            <span v-if="currentPhase > 0" class="badge success">{{ $t('step1.completed') }}</span>
+            <span v-else-if="currentPhase === 0" class="badge processing">{{ $t('step1.processing') }}</span>
+            <span v-else class="badge pending">{{ $t('step1.waiting') }}</span>
           </div>
         </div>
         
         <div class="card-content">
           <p class="api-note">POST /api/graph/ontology/generate</p>
           <p class="description">
-            LLM分析文档内容与模拟需求，提取出现实种子，自动生成合适的本体结构
+            {{ $t('step1.desc') }}
           </p>
 
           <!-- Loading / Progress -->
           <div v-if="currentPhase === 0 && ontologyProgress" class="progress-section">
             <div class="spinner-sm"></div>
-            <span>{{ ontologyProgress.message || '正在分析文档...' }}</span>
+            <span>{{ ontologyProgress.message || $t('step1.analyzing') }}</span>
           </div>
 
           <!-- Detail Overlay -->
@@ -110,34 +110,34 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">02</span>
-            <span class="step-title">GraphRAG构建</span>
+            <span class="step-title">{{ $t('step1.graphBuild') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="currentPhase > 1" class="badge success">已完成</span>
+            <span v-if="currentPhase > 1" class="badge success">{{ $t('step1.completed') }}</span>
             <span v-else-if="currentPhase === 1" class="badge processing">{{ buildProgress?.progress || 0 }}%</span>
-            <span v-else class="badge pending">等待</span>
+            <span v-else class="badge pending">{{ $t('step1.waiting') }}</span>
           </div>
         </div>
 
         <div class="card-content">
           <p class="api-note">POST /api/graph/build</p>
           <p class="description">
-            基于生成的本体，将文档自动分块后调用 Zep 构建知识图谱，提取实体和关系，并形成时序记忆与社区摘要
+            {{ $t('step1.desc2') }}
           </p>
           
           <!-- Stats Cards -->
           <div class="stats-grid">
             <div class="stat-card">
               <span class="stat-value">{{ graphStats.nodes }}</span>
-              <span class="stat-label">实体节点</span>
+              <span class="stat-label">{{ $t('step1.entityNodes') }}</span>
             </div>
             <div class="stat-card">
               <span class="stat-value">{{ graphStats.edges }}</span>
-              <span class="stat-label">关系边</span>
+              <span class="stat-label">{{ $t('step1.relationEdges') }}</span>
             </div>
             <div class="stat-card">
               <span class="stat-value">{{ graphStats.types }}</span>
-              <span class="stat-label">SCHEMA类型</span>
+              <span class="stat-label">{{ $t('step1.schemaTypes') }}</span>
             </div>
           </div>
         </div>
@@ -148,23 +148,23 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">03</span>
-            <span class="step-title">构建完成</span>
+            <span class="step-title">{{ $t('step1.buildComplete') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="currentPhase >= 2" class="badge accent">进行中</span>
+            <span v-if="currentPhase >= 2" class="badge accent">{{ $t('step1.inProgress') }}</span>
           </div>
         </div>
         
         <div class="card-content">
           <p class="api-note">POST /api/simulation/create</p>
-          <p class="description">图谱构建已完成，请进入下一步进行模拟环境搭建</p>
+          <p class="description">{{ $t('step1.descNext') }}</p>
           <button 
             class="action-btn" 
             :disabled="currentPhase < 2 || creatingSimulation"
             @click="handleEnterEnvSetup"
           >
             <span v-if="creatingSimulation" class="spinner-sm"></span>
-            {{ creatingSimulation ? '创建中...' : '进入环境搭建 ➝' }}
+            {{ creatingSimulation ? $t('step1.creating') : $t('step1.enterEnvSetup') }}
           </button>
         </div>
       </div>
diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
index eae776aa..f61a703c 100644
--- a/frontend/src/components/Step2EnvSetup.vue
+++ b/frontend/src/components/Step2EnvSetup.vue
@@ -6,18 +6,18 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">01</span>
-            <span class="step-title">模拟实例初始化</span>
+            <span class="step-title">{{ $t('step2.simInstance') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="phase > 0" class="badge success">已完成</span>
-            <span v-else class="badge processing">初始化</span>
+            <span v-if="phase > 0" class="badge success">{{ $t('step1.completed') }}</span>
+            <span v-else class="badge processing">{{ $t('step2.init') }}</span>
           </div>
         </div>
         
         <div class="card-content">
           <p class="api-note">POST /api/simulation/create</p>
           <p class="description">
-            新建simulation实例，拉取模拟世界参数模版
+            {{ $t('step2.desc1') }}
           </p>
 
           <div v-if="simulationId" class="info-card">
@@ -35,7 +35,7 @@
             </div>
             <div class="info-row">
               <span class="info-label">Task ID</span>
-              <span class="info-value mono">{{ taskId || '异步任务已完成' }}</span>
+              <span class="info-value mono">{{ taskId || $t('step2.taskDone') }}</span>
             </div>
           </div>
         </div>
@@ -46,41 +46,41 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">02</span>
-            <span class="step-title">生成 Agent 人设</span>
+            <span class="step-title">{{ $t('step2.agentProfiles') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="phase > 1" class="badge success">已完成</span>
+            <span v-if="phase > 1" class="badge success">{{ $t('step1.completed') }}</span>
             <span v-else-if="phase === 1" class="badge processing">{{ prepareProgress }}%</span>
-            <span v-else class="badge pending">等待</span>
+            <span v-else class="badge pending">{{ $t('step1.waiting') }}</span>
           </div>
         </div>
 
         <div class="card-content">
           <p class="api-note">POST /api/simulation/prepare</p>
           <p class="description">
-            结合上下文，自动调用工具从知识图谱梳理实体与关系，初始化模拟个体，并基于现实种子赋予他们独特的行为与记忆
+            {{ $t('step2.desc2') }}
           </p>
 
           <!-- Profiles Stats -->
           <div v-if="profiles.length > 0" class="stats-grid">
             <div class="stat-card">
               <span class="stat-value">{{ profiles.length }}</span>
-              <span class="stat-label">当前Agent数</span>
+              <span class="stat-label">{{ $t('step2.agentCount') }}</span>
             </div>
             <div class="stat-card">
               <span class="stat-value">{{ expectedTotal || '-' }}</span>
-              <span class="stat-label">预期Agent总数</span>
+              <span class="stat-label">{{ $t('step2.expectedAgents') }}</span>
             </div>
             <div class="stat-card">
               <span class="stat-value">{{ totalTopicsCount }}</span>
-              <span class="stat-label">现实种子当前关联话题数</span>
+              <span class="stat-label">{{ $t('step2.topicCount') }}</span>
             </div>
           </div>
 
           <!-- Profiles List Preview -->
           <div v-if="profiles.length > 0" class="profiles-preview">
             <div class="preview-header">
-              <span class="preview-title">已生成的 Agent 人设</span>
+              <span class="preview-title">{{ $t('step2.generatedProfiles') }}</span>
             </div>
             <div class="profiles-list">
               <div 
@@ -94,9 +94,9 @@
                   <span class="profile-username">@{{ profile.name || `agent_${idx}` }}</span>
                 </div>
                 <div class="profile-meta">
-                  <span class="profile-profession">{{ profile.profession || '未知职业' }}</span>
+                  <span class="profile-profession">{{ profile.profession || $t('step2.unknownProfession') }}</span>
                 </div>
-                <p class="profile-bio">{{ profile.bio || '暂无简介' }}</p>
+                <p class="profile-bio">{{ profile.bio || $t('step2.noBio') }}</p>
                 <div v-if="profile.interested_topics?.length" class="profile-topics">
                   <span 
                     v-for="topic in profile.interested_topics.slice(0, 3)" 
@@ -118,19 +118,19 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">03</span>
-            <span class="step-title">生成双平台模拟配置</span>
+            <span class="step-title">{{ $t('step2.dualPlatformConfig') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="phase > 2" class="badge success">已完成</span>
-            <span v-else-if="phase === 2" class="badge processing">生成中</span>
-            <span v-else class="badge pending">等待</span>
+            <span v-if="phase > 2" class="badge success">{{ $t('step1.completed') }}</span>
+            <span v-else-if="phase === 2" class="badge processing">{{ $t('step1.processing') }}</span>
+            <span v-else class="badge pending">{{ $t('step1.waiting') }}</span>
           </div>
         </div>
 
         <div class="card-content">
           <p class="api-note">POST /api/simulation/prepare</p>
           <p class="description">
-            LLM 根据模拟需求与现实种子，智能设置世界时间流速、推荐算法、每个个体的活跃时间段、发言频率、事件触发等参数
+            {{ $t('step2.desc3') }}
           </p>
           
           <!-- Config Preview -->
@@ -139,40 +139,40 @@
             <div class="config-block">
               <div class="config-grid">
                 <div class="config-item">
-                  <span class="config-item-label">模拟时长</span>
-                  <span class="config-item-value">{{ simulationConfig.time_config?.total_simulation_hours || '-' }} 小时</span>
+                  <span class="config-item-label">{{ $t('step2.simDuration') }}</span>
+                  <span class="config-item-value">{{ simulationConfig.time_config?.total_simulation_hours || '-' }} {{ $t('step2.hours') }}</span>
                 </div>
                 <div class="config-item">
-                  <span class="config-item-label">每轮时长</span>
-                  <span class="config-item-value">{{ simulationConfig.time_config?.minutes_per_round || '-' }} 分钟</span>
+                  <span class="config-item-label">{{ $t('step2.perRound') }}</span>
+                  <span class="config-item-value">{{ simulationConfig.time_config?.minutes_per_round || '-' }} {{ $t('step2.minutes') }}</span>
                 </div>
                 <div class="config-item">
-                  <span class="config-item-label">总轮次</span>
-                  <span class="config-item-value">{{ Math.floor((simulationConfig.time_config?.total_simulation_hours * 60 / simulationConfig.time_config?.minutes_per_round)) || '-' }} 轮</span>
+                  <span class="config-item-label">{{ $t('step2.totalRounds') }}</span>
+                  <span class="config-item-value">{{ Math.floor((simulationConfig.time_config?.total_simulation_hours * 60 / simulationConfig.time_config?.minutes_per_round)) || '-' }} {{ $t('step2.rounds') }}</span>
                 </div>
                 <div class="config-item">
-                  <span class="config-item-label">每小时活跃</span>
+                  <span class="config-item-label">{{ $t('step2.activePerHour') }}</span>
                   <span class="config-item-value">{{ simulationConfig.time_config?.agents_per_hour_min }}-{{ simulationConfig.time_config?.agents_per_hour_max }}</span>
                 </div>
               </div>
               <div class="time-periods">
                 <div class="period-item">
-                  <span class="period-label">高峰时段</span>
+                  <span class="period-label">{{ $t('step2.peakPeriod') }}</span>
                   <span class="period-hours">{{ simulationConfig.time_config?.peak_hours?.join(':00, ') }}:00</span>
                   <span class="period-multiplier">×{{ simulationConfig.time_config?.peak_activity_multiplier }}</span>
                 </div>
                 <div class="period-item">
-                  <span class="period-label">工作时段</span>
+                  <span class="period-label">{{ $t('step2.workPeriod') }}</span>
                   <span class="period-hours">{{ simulationConfig.time_config?.work_hours?.[0] }}:00-{{ simulationConfig.time_config?.work_hours?.slice(-1)[0] }}:00</span>
                   <span class="period-multiplier">×{{ simulationConfig.time_config?.work_activity_multiplier }}</span>
                 </div>
                 <div class="period-item">
-                  <span class="period-label">早间时段</span>
+                  <span class="period-label">{{ $t('step2.morningPeriod') }}</span>
                   <span class="period-hours">{{ simulationConfig.time_config?.morning_hours?.[0] }}:00-{{ simulationConfig.time_config?.morning_hours?.slice(-1)[0] }}:00</span>
                   <span class="period-multiplier">×{{ simulationConfig.time_config?.morning_activity_multiplier }}</span>
                 </div>
                 <div class="period-item">
-                  <span class="period-label">低谷时段</span>
+                  <span class="period-label">{{ $t('step2.lowPeriod') }}</span>
                   <span class="period-hours">{{ simulationConfig.time_config?.off_peak_hours?.[0] }}:00-{{ simulationConfig.time_config?.off_peak_hours?.slice(-1)[0] }}:00</span>
                   <span class="period-multiplier">×{{ simulationConfig.time_config?.off_peak_activity_multiplier }}</span>
                 </div>
@@ -182,8 +182,8 @@
             <!-- Agent 配置 -->
             <div class="config-block">
               <div class="config-block-header">
-                <span class="config-block-title">Agent 配置</span>
-                <span class="config-block-badge">{{ simulationConfig.agent_configs?.length || 0 }} 个</span>
+                <span class="config-block-title">{{ $t('step2.agentConfig') }}</span>
+                <span class="config-block-badge">{{ simulationConfig.agent_configs?.length || 0 }}{{ $t('step2.agentsCount') }}</span>
               </div>
               <div class="agents-cards">
                 <div 
@@ -205,7 +205,7 @@
                   
                   <!-- 活跃时间轴 -->
                   <div class="agent-timeline">
-                    <span class="timeline-label">活跃时段</span>
+                    <span class="timeline-label">{{ $t('step2.activeTime') }}</span>
                     <div class="mini-timeline">
                       <div 
                         v-for="hour in 24" 
@@ -228,34 +228,34 @@
                   <div class="agent-params">
                     <div class="param-group">
                       <div class="param-item">
-                        <span class="param-label">发帖/时</span>
+                        <span class="param-label">{{ $t('step2.postsPerHour') }}</span>
                         <span class="param-value">{{ agent.posts_per_hour }}</span>
                       </div>
                       <div class="param-item">
-                        <span class="param-label">评论/时</span>
+                        <span class="param-label">{{ $t('step2.commentsPerHour') }}</span>
                         <span class="param-value">{{ agent.comments_per_hour }}</span>
                       </div>
                       <div class="param-item">
-                        <span class="param-label">响应延迟</span>
+                        <span class="param-label">{{ $t('step2.responseDelay') }}</span>
                         <span class="param-value">{{ agent.response_delay_min }}-{{ agent.response_delay_max }}min</span>
                       </div>
                     </div>
                     <div class="param-group">
                       <div class="param-item">
-                        <span class="param-label">活跃度</span>
+                        <span class="param-label">{{ $t('step2.activityLevel') }}</span>
                         <span class="param-value with-bar">
                           <span class="mini-bar" :style="{ width: (agent.activity_level * 100) + '%' }"></span>
                           {{ (agent.activity_level * 100).toFixed(0) }}%
                         </span>
                       </div>
                       <div class="param-item">
-                        <span class="param-label">情感倾向</span>
+                        <span class="param-label">{{ $t('step2.sentimentBias') }}</span>
                         <span class="param-value" :class="agent.sentiment_bias > 0 ? 'positive' : agent.sentiment_bias < 0 ? 'negative' : 'neutral'">
                           {{ agent.sentiment_bias > 0 ? '+' : '' }}{{ agent.sentiment_bias?.toFixed(1) }}
                         </span>
                       </div>
                       <div class="param-item">
-                        <span class="param-label">影响力</span>
+                        <span class="param-label">{{ $t('step2.influence') }}</span>
                         <span class="param-value highlight">{{ agent.influence_weight?.toFixed(1) }}</span>
                       </div>
                     </div>
@@ -267,59 +267,59 @@
             <!-- 平台配置 -->
             <div class="config-block">
               <div class="config-block-header">
-                <span class="config-block-title">推荐算法配置</span>
+                <span class="config-block-title">{{ $t('step2.recAlgoConfig') }}</span>
               </div>
               <div class="platforms-grid">
                 <div v-if="simulationConfig.twitter_config" class="platform-card">
                   <div class="platform-card-header">
-                    <span class="platform-name">平台 1：广场 / 信息流</span>
+                    <span class="platform-name">{{ $t('step2.platform1') }}</span>
                   </div>
                   <div class="platform-params">
                     <div class="param-row">
-                      <span class="param-label">时效权重</span>
+                      <span class="param-label">{{ $t('step2.recencyWeight') }}</span>
                       <span class="param-value">{{ simulationConfig.twitter_config.recency_weight }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">热度权重</span>
+                      <span class="param-label">{{ $t('step2.popularityWeight') }}</span>
                       <span class="param-value">{{ simulationConfig.twitter_config.popularity_weight }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">相关性权重</span>
+                      <span class="param-label">{{ $t('step2.relevanceWeight') }}</span>
                       <span class="param-value">{{ simulationConfig.twitter_config.relevance_weight }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">病毒阈值</span>
+                      <span class="param-label">{{ $t('step2.viralThreshold') }}</span>
                       <span class="param-value">{{ simulationConfig.twitter_config.viral_threshold }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">回音室强度</span>
+                      <span class="param-label">{{ $t('step2.echoChamber') }}</span>
                       <span class="param-value">{{ simulationConfig.twitter_config.echo_chamber_strength }}</span>
                     </div>
                   </div>
                 </div>
                 <div v-if="simulationConfig.reddit_config" class="platform-card">
                   <div class="platform-card-header">
-                    <span class="platform-name">平台 2：话题 / 社区</span>
+                    <span class="platform-name">{{ $t('step2.platform2') }}</span>
                   </div>
                   <div class="platform-params">
                     <div class="param-row">
-                      <span class="param-label">时效权重</span>
+                      <span class="param-label">{{ $t('step2.recencyWeight') }}</span>
                       <span class="param-value">{{ simulationConfig.reddit_config.recency_weight }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">热度权重</span>
+                      <span class="param-label">{{ $t('step2.popularityWeight') }}</span>
                       <span class="param-value">{{ simulationConfig.reddit_config.popularity_weight }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">相关性权重</span>
+                      <span class="param-label">{{ $t('step2.relevanceWeight') }}</span>
                       <span class="param-value">{{ simulationConfig.reddit_config.relevance_weight }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">病毒阈值</span>
+                      <span class="param-label">{{ $t('step2.viralThreshold') }}</span>
                       <span class="param-value">{{ simulationConfig.reddit_config.viral_threshold }}</span>
                     </div>
                     <div class="param-row">
-                      <span class="param-label">回音室强度</span>
+                      <span class="param-label">{{ $t('step2.echoChamber') }}</span>
                       <span class="param-value">{{ simulationConfig.reddit_config.echo_chamber_strength }}</span>
                     </div>
                   </div>
@@ -330,7 +330,7 @@
             <!-- LLM 配置推理 -->
             <div v-if="simulationConfig.generation_reasoning" class="config-block">
               <div class="config-block-header">
-                <span class="config-block-title">LLM 配置推理</span>
+                <span class="config-block-title">{{ $t('step2.llmConfig') }}</span>
               </div>
               <div class="reasoning-content">
                 <div 
@@ -351,19 +351,19 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">04</span>
-            <span class="step-title">初始激活编排</span>
+            <span class="step-title">{{ $t('step2.initialActivation') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="phase > 3" class="badge success">已完成</span>
-            <span v-else-if="phase === 3" class="badge processing">编排中</span>
-            <span v-else class="badge pending">等待</span>
+            <span v-if="phase > 3" class="badge success">{{ $t('step1.completed') }}</span>
+            <span v-else-if="phase === 3" class="badge processing">{{ $t('step2.arranging') }}</span>
+            <span v-else class="badge pending">{{ $t('step1.waiting') }}</span>
           </div>
         </div>
 
         <div class="card-content">
           <p class="api-note">POST /api/simulation/prepare</p>
           <p class="description">
-            基于叙事方向，自动生成初始激活事件与热点话题，引导模拟世界的初始状态
+            {{ $t('step2.desc4') }}
           </p>
 
           <div v-if="simulationConfig?.event_config" class="orchestration-content">
@@ -380,14 +380,14 @@
                     </linearGradient>
                   </defs>
                 </svg>
-                叙事引导方向
+                {{ $t('step2.narrativeDir') }}
               </span>
               <p class="narrative-text">{{ simulationConfig.event_config.narrative_direction }}</p>
             </div>
 
             <!-- 热点话题 -->
             <div class="topics-section">
-              <span class="box-label">初始热点话题</span>
+              <span class="box-label">{{ $t('step2.hotTopics') }}</span>
               <div class="hot-topics-grid">
                 <span v-for="topic in simulationConfig.event_config.hot_topics" :key="topic" class="hot-topic-tag">
                   # {{ topic }}
@@ -397,7 +397,7 @@
 
             <!-- 初始帖子流 -->
             <div class="initial-posts-section">
-              <span class="box-label">初始激活序列 ({{ simulationConfig.event_config.initial_posts.length }})</span>
+              <span class="box-label">{{ $t('step2.initialPosts') }} ({{ simulationConfig.event_config.initial_posts.length }})</span>
               <div class="posts-timeline">
                 <div v-for="(post, idx) in simulationConfig.event_config.initial_posts" :key="idx" class="timeline-item">
                   <div class="timeline-marker"></div>
@@ -423,29 +423,29 @@
         <div class="card-header">
           <div class="step-info">
             <span class="step-num">05</span>
-            <span class="step-title">准备完成</span>
+            <span class="step-title">{{ $t('step2.ready') }}</span>
           </div>
           <div class="step-status">
-            <span v-if="phase >= 4" class="badge processing">进行中</span>
-            <span v-else class="badge pending">等待</span>
+            <span v-if="phase >= 4" class="badge processing">{{ $t('step1.inProgress') }}</span>
+            <span v-else class="badge pending">{{ $t('step1.waiting') }}</span>
           </div>
         </div>
 
         <div class="card-content">
           <p class="api-note">POST /api/simulation/start</p>
-          <p class="description">模拟环境已准备完成，可以开始运行模拟</p>
+          <p class="description">{{ $t('step2.desc5') }}</p>
           
           <!-- 模拟轮数配置 - 只有在配置生成完成且轮数计算出来后才显示 -->
           <div v-if="simulationConfig && autoGeneratedRounds" class="rounds-config-section">
             <div class="rounds-header">
               <div class="header-left">
-                <span class="section-title">模拟轮数设定</span>
-                <span class="section-desc">MiroFish 自动规划推演现实 <span class="desc-highlight">{{ simulationConfig?.time_config?.total_simulation_hours || '-' }}</span> 小时，每轮代表现实 <span class="desc-highlight">{{ simulationConfig?.time_config?.minutes_per_round || '-' }}</span> 分钟时间流逝</span>
+                <span class="section-title">{{ $t('step2.roundsSetting') }}</span>
+                <span class="section-desc">{{ $t('step2.roundsDesc', { hours: simulationConfig?.time_config?.total_simulation_hours || '-', mins: simulationConfig?.time_config?.minutes_per_round || '-' }) }}</span>
               </div>
               <label class="switch-control">
                 <input type="checkbox" v-model="useCustomRounds">
                 <span class="switch-track"></span>
-                <span class="switch-label">自定义</span>
+                <span class="switch-label">{{ $t('step2.custom') }}</span>
               </label>
             </div>
             
@@ -454,10 +454,10 @@
                 <div class="slider-display">
                   <div class="slider-main-value">
                     <span class="val-num">{{ customMaxRounds }}</span>
-                    <span class="val-unit">轮</span>
+                    <span class="val-unit">{{ $t('step2.rounds') }}</span>
                   </div>
                   <div class="slider-meta-info">
-                    <span>若Agent规模为100：预计耗时约 {{ Math.round(customMaxRounds * 0.6) }} 分钟</span>
+                    <span>{{ $t('step2.estTime', { n: Math.round(customMaxRounds * 0.6) }) }}</span>
                   </div>
                 </div>
 
@@ -478,7 +478,7 @@
                       :class="{ active: customMaxRounds === 40 }"
                       @click="customMaxRounds = 40"
                       :style="{ position: 'absolute', left: `calc(${(40 - 10) / (autoGeneratedRounds - 10) * 100}% - 30px)` }"
-                    >40 (推荐)</span>
+                    >40 ({{ $t('step2.recOver40') }})</span>
                     <span>{{ autoGeneratedRounds }}</span>
                   </div>
                 </div>
@@ -488,7 +488,7 @@
                 <div class="auto-info-card">
                   <div class="auto-value">
                     <span class="val-num">{{ autoGeneratedRounds }}</span>
-                    <span class="val-unit">轮</span>
+                    <span class="val-unit">{{ $t('step2.rounds') }}</span>
                   </div>
                   <div class="auto-content">
                     <div class="auto-meta-row">
@@ -497,11 +497,11 @@
                           <circle cx="12" cy="12" r="10"></circle>
                           <polyline points="12 6 12 12 16 14"></polyline>
                         </svg>
-                        若Agent规模为100：预计耗时 {{ Math.round(autoGeneratedRounds * 0.6) }} 分钟
+                        {{ $t('step2.estTimeAuto', { n: Math.round(autoGeneratedRounds * 0.6) }) }}
                       </span>
                     </div>
                     <div class="auto-desc">
-                      <p class="highlight-tip" @click="useCustomRounds = true">若首次运行，强烈建议切换至‘自定义模式’减少模拟轮数，以便快速预览效果并降低报错风险 ➝</p>
+                      <p class="highlight-tip" @click="useCustomRounds = true">{{ $t('step2.customTip') }}</p>
                     </div>
                   </div>
                 </div>
@@ -514,14 +514,14 @@
               class="action-btn secondary"
               @click="$emit('go-back')"
             >
-              ← 返回图谱构建
+              {{ $t('step2.backToGraph') }}
             </button>
             <button 
               class="action-btn primary"
               :disabled="phase < 4"
               @click="handleStartSimulation"
             >
-              开始双世界并行模拟 ➝
+              {{ $t('step2.startSim') }}
             </button>
           </div>
         </div>
@@ -547,19 +547,19 @@
           <!-- 基本信息 -->
           <div class="modal-info-grid">
             <div class="info-item">
-              <span class="info-label">事件外显年龄</span>
-              <span class="info-value">{{ selectedProfile.age || '-' }} 岁</span>
+              <span class="info-label">{{ $t('step2.age') }}</span>
+              <span class="info-value">{{ selectedProfile.age || '-' }} {{ $t('step2.years') }}</span>
             </div>
             <div class="info-item">
-              <span class="info-label">事件外显性别</span>
-              <span class="info-value">{{ { male: '男', female: '女', other: '其他' }[selectedProfile.gender] || selectedProfile.gender }}</span>
+              <span class="info-label">{{ $t('step2.gender') }}</span>
+              <span class="info-value">{{ { male: $t('step2.male'), female: $t('step2.female'), other: $t('step2.other') }[selectedProfile.gender] || selectedProfile.gender }}</span>
             </div>
             <div class="info-item">
-              <span class="info-label">国家/地区</span>
+              <span class="info-label">{{ $t('step2.country') }}</span>
               <span class="info-value">{{ selectedProfile.country || '-' }}</span>
             </div>
             <div class="info-item">
-              <span class="info-label">事件外显MBTI</span>
+              <span class="info-label">{{ $t('step2.mbti') }}</span>
               <span class="info-value mbti">{{ selectedProfile.mbti || '-' }}</span>
             </div>
           </div>
diff --git a/frontend/src/components/Step3Simulation.vue b/frontend/src/components/Step3Simulation.vue
index 74d0e1e7..a6a133db 100644
--- a/frontend/src/components/Step3Simulation.vue
+++ b/frontend/src/components/Step3Simulation.vue
@@ -97,7 +97,7 @@
           @click="handleNextStep"
         >
           <span v-if="isGeneratingReport" class="loading-spinner-small"></span>
-          {{ isGeneratingReport ? '启动中...' : '开始生成结果报告' }} 
+          {{ isGeneratingReport ? $t('step3.starting') : $t('step3.startReport') }} 
           <span v-if="!isGeneratingReport" class="arrow-icon">→</span>
         </button>
       </div>
diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js
new file mode 100644
index 00000000..43ba3252
--- /dev/null
+++ b/frontend/src/i18n/index.js
@@ -0,0 +1,31 @@
+import { createI18n } from 'vue-i18n'
+import zh from './locales/zh'
+import en from './locales/en'
+
+const LOCALE_KEY = 'mirofish-locale'
+
+export function getStoredLocale() {
+  try {
+    const stored = localStorage.getItem(LOCALE_KEY)
+    if (stored === 'zh' || stored === 'en') return stored
+  } catch (_) {}
+  return 'zh'
+}
+
+export function setStoredLocale(locale) {
+  try {
+    localStorage.setItem(LOCALE_KEY, locale)
+  } catch (_) {}
+}
+
+const i18n = createI18n({
+  legacy: false, // Use Composition API mode
+  locale: getStoredLocale(),
+  fallbackLocale: 'zh',
+  messages: {
+    zh,
+    en,
+  },
+})
+
+export default i18n
diff --git a/frontend/src/i18n/locales/en.js b/frontend/src/i18n/locales/en.js
new file mode 100644
index 00000000..d4109239
--- /dev/null
+++ b/frontend/src/i18n/locales/en.js
@@ -0,0 +1,211 @@
+/**
+ * English locale
+ */
+export default {
+  common: {
+    loading: 'Loading...',
+    error: 'Error',
+    refresh: 'Refresh',
+    close: 'Close',
+    none: 'None',
+    unknown: 'Unknown',
+  },
+  nav: {
+    visitGithub: 'Visit our GitHub',
+    language: 'Language',
+    zh: '中文',
+    en: 'English',
+  },
+  home: {
+    tagline: 'Simple & Universal Swarm Intelligence Engine',
+    version: '/ v0.1-preview',
+    title1: 'Upload Any Report',
+    title2: 'Predict the Future Instantly',
+    desc1: 'With just a paragraph of text, ',
+    desc2: 'MiroFish',
+    desc3: ' can automatically generate a parallel world powered by up to ',
+    desc4: 'millions of Agents',
+    desc5: ' from the seeds of reality within. Inject variables from a god\'s-eye view and find ',
+    desc6: '"local optima"',
+    desc6Suffix: ' in complex group interactions under dynamic environments.',
+    slogan: 'Let the future be rehearsed in Agent swarms, let decisions win after a hundred battles.',
+    systemStatus: 'System Status',
+    ready: 'Ready',
+    readyDesc: 'Prediction engine on standby. Upload unstructured data to initialize simulation sequence.',
+    lowCost: 'Low Cost',
+    lowCostDesc: 'Avg. ~5$/run for typical simulations',
+    highAvailable: 'High Scale',
+    highAvailableDesc: 'Up to millions of Agents',
+    workflow: 'Workflow Sequence',
+    step1Title: 'Graph Build',
+    step1Desc: 'Reality seed extraction & individual/group memory injection & GraphRAG construction',
+    step2Title: 'Env Setup',
+    step2Desc: 'Entity-relation extraction & persona generation & simulation params injection',
+    step3Title: 'Simulation',
+    step3Desc: 'Dual-platform parallel simulation & auto-parse prediction needs & dynamic memory update',
+    step4Title: 'Report',
+    step4Desc: 'ReportAgent has rich tools for deep interaction with post-simulation environment',
+    step5Title: 'Interaction',
+    step5Desc: 'Chat with any agent in the simulated world & interact with ReportAgent',
+    seedLabel: '01 / Reality Seed',
+    formatHint: 'Supported: PDF, MD, TXT',
+    dragUpload: 'Drag files to upload',
+    clickBrowse: 'or click to browse',
+    inputParams: 'Input Parameters',
+    promptLabel: '>_ 02 / Simulation Prompt',
+    promptPlaceholder: '// Enter your simulation or prediction needs in natural language (e.g. What if Wuhan Univ. releases a revocation of Xiao\'s penalty? How would public sentiment shift?)',
+    engineBadge: 'Engine: MiroFish-V1.0',
+    startEngine: 'Start Engine',
+    initializing: 'Initializing...',
+  },
+  mainView: {
+    graph: 'Graph',
+    split: 'Split',
+    workbench: 'Workbench',
+    stepGraph: 'Graph Build',
+    stepEnv: 'Env Setup',
+    stepSim: 'Simulation',
+    stepReport: 'Report',
+    stepInteraction: 'Interaction',
+    statusReady: 'Ready',
+    statusBuilding: 'Building Graph',
+    statusOntology: 'Generating Ontology',
+    statusInit: 'Initializing',
+  },
+  history: {
+    title: 'History',
+    graphBuild: 'Graph Build',
+    envSetup: 'Env Setup',
+    report: 'Report',
+    moreFiles: ' files',
+    noFiles: 'No files',
+    noName: 'Unnamed simulation',
+    notStarted: 'Not started',
+    rounds: ' rounds',
+    simRequirement: 'Simulation Requirement',
+    relatedFiles: 'Related Files',
+    noRelatedFiles: 'No related files',
+    unknownFile: 'Unknown file',
+    playback: 'Playback',
+    graphBuildBtn: 'Graph Build',
+    envSetupBtn: 'Env Setup',
+    reportBtn: 'Report',
+    playbackHint: 'Step3 "Simulation" and Step5 "Interaction" must be started during runtime; no history playback.',
+  },
+  graph: {
+    refresh: 'Refresh graph',
+    maximize: 'Maximize / Restore',
+    updating: 'Updating...',
+    memoryUpdating: 'GraphRAG memory updating',
+    hintRefresh: 'Some content still processing. Refresh the graph manually later.',
+    loadingGraph: 'Loading graph...',
+    waitOntology: 'Waiting for ontology...',
+    closeHint: 'Close',
+    nodeDetails: 'Node Details',
+    relationship: 'Relationship',
+    name: 'Name',
+    created: 'Created',
+    properties: 'Properties',
+    summary: 'Summary',
+    labels: 'Labels',
+  },
+  step1: {
+    ontology: 'Ontology',
+    completed: 'Completed',
+    processing: 'Processing',
+    waiting: 'Pending',
+    desc: 'LLM analyzes documents and simulation needs, extracts reality seeds, and generates suitable ontology structure.',
+    analyzing: 'Analyzing documents...',
+    graphBuild: 'GraphRAG Build',
+    desc2: 'Build knowledge graph from documents via Zep, extract entities and relations, form temporal memory and community summaries.',
+    entityNodes: 'Entity nodes',
+    relationEdges: 'Relation edges',
+    schemaTypes: 'SCHEMA types',
+    buildComplete: 'Build Complete',
+    inProgress: 'In progress',
+    descNext: 'Graph build complete. Proceed to environment setup.',
+    enterEnvSetup: 'Enter Env Setup ➝',
+    creating: 'Creating...',
+  },
+  step2: {
+    simInstance: 'Simulation Instance Init',
+    init: 'Initializing',
+    desc1: 'Create simulation instance and fetch world parameter templates.',
+    taskDone: 'Async task completed',
+    agentProfiles: 'Generate Agent Personas',
+    desc2: 'Use tools to extract entities and relations from knowledge graph, initialize individuals, and assign behaviors and memories from reality seeds.',
+    agentCount: 'Current Agents',
+    expectedAgents: 'Expected Total',
+    topicCount: 'Related Topics',
+    generatedProfiles: 'Generated Agent Personas',
+    unknownProfession: 'Unknown',
+    noBio: 'No bio',
+    dualPlatformConfig: 'Generate Dual-Platform Simulation Config',
+    desc3: 'LLM intelligently sets world time flow, recommendation algorithm, active time slots, posting frequency, event triggers, etc.',
+    simDuration: 'Simulation Duration',
+    hours: 'hours',
+    perRound: 'Per Round',
+    minutes: 'min',
+    totalRounds: 'Total Rounds',
+    rounds: 'rounds',
+    activePerHour: 'Active per Hour',
+    peakPeriod: 'Peak',
+    workPeriod: 'Work',
+    morningPeriod: 'Morning',
+    lowPeriod: 'Low',
+    agentConfig: 'Agent Config',
+    agentsCount: '',
+    activeTime: 'Active Time',
+    postsPerHour: 'Posts/hr',
+    commentsPerHour: 'Comments/hr',
+    responseDelay: 'Response Delay',
+    activityLevel: 'Activity',
+    sentimentBias: 'Sentiment',
+    influence: 'Influence',
+    recAlgoConfig: 'Recommendation Algorithm',
+    platform1: 'Platform 1: Info Plaza',
+    platform2: 'Platform 2: Topic Community',
+    recencyWeight: 'Recency',
+    popularityWeight: 'Popularity',
+    relevanceWeight: 'Relevance',
+    viralThreshold: 'Viral Threshold',
+    echoChamber: 'Echo Chamber',
+    llmConfig: 'LLM Config Inference',
+    initialActivation: 'Initial Activation',
+    arranging: 'Arranging',
+    desc4: 'Generate initial events and hot topics from narrative direction to bootstrap the simulation world.',
+    narrativeDir: 'Narrative Direction',
+    hotTopics: 'Initial Hot Topics',
+    initialPosts: 'Initial Activation',
+    ready: 'Ready',
+    desc5: 'Environment ready. You can start the simulation.',
+    roundsSetting: 'Simulation Rounds',
+    roundsDesc: 'MiroFish plans {hours}h simulation, {mins} min per round.',
+    custom: 'Custom',
+    estTime: 'If 100 agents: ~{n} min',
+    autoRounds: 'Auto',
+    recOver40: 'Recommended',
+    estTimeAuto: 'If 100 agents: ~{n} min',
+    customTip: 'First run? Switch to Custom to use fewer rounds for a quick preview ➝',
+    backToGraph: '← Back to Graph',
+    startSim: 'Start Dual-World Simulation ➝',
+    age: 'Age',
+    years: 'y',
+    gender: 'Gender',
+    male: 'Male',
+    female: 'Female',
+    other: 'Other',
+    country: 'Country/Region',
+    mbti: 'MBTI',
+  },
+  step3: {
+    startReport: 'Generate Report',
+    starting: 'Starting...',
+  },
+  step4: {
+    generating: 'Generating',
+  },
+  step5: {
+    generating: 'Generating',
+  },
+}
diff --git a/frontend/src/i18n/locales/zh.js b/frontend/src/i18n/locales/zh.js
new file mode 100644
index 00000000..0d356879
--- /dev/null
+++ b/frontend/src/i18n/locales/zh.js
@@ -0,0 +1,210 @@
+/**
+ * Chinese locale - default
+ */
+export default {
+  common: {
+    loading: '加载中...',
+    error: '错误',
+    refresh: '刷新',
+    close: '关闭',
+    none: '无',
+    unknown: '未知',
+  },
+  nav: {
+    visitGithub: '访问我们的Github主页',
+    language: '语言',
+    zh: '中文',
+    en: 'English',
+  },
+  home: {
+    tagline: '简洁通用的群体智能引擎',
+    version: '/ v0.1-预览版',
+    title1: '上传任意报告',
+    title2: '即刻推演未来',
+    desc1: '即使只有一段文字，',
+    desc2: 'MiroFish',
+    desc3: ' 也能基于其中的现实种子，全自动生成与之对应的至多',
+    desc4: '百万级Agent',
+    desc5: '构成的平行世界。通过上帝视角注入变量，在复杂的群体交互中寻找动态环境下的',
+    desc6: '"局部最优解"',
+    slogan: '让未来在 Agent 群中预演，让决策在百战后胜出',
+    systemStatus: '系统状态',
+    ready: '准备就绪',
+    readyDesc: '预测引擎待命中，可上传多份非结构化数据以初始化模拟序列',
+    lowCost: '低成本',
+    lowCostDesc: '常规模拟平均5$/次',
+    highAvailable: '高可用',
+    highAvailableDesc: '最多百万级Agent模拟',
+    workflow: '工作流序列',
+    step1Title: '图谱构建',
+    step1Desc: '现实种子提取 & 个体与群体记忆注入 & GraphRAG构建',
+    step2Title: '环境搭建',
+    step2Desc: '实体关系抽取 & 人设生成 & 环境配置Agent注入仿真参数',
+    step3Title: '开始模拟',
+    step3Desc: '双平台并行模拟 & 自动解析预测需求 & 动态更新时序记忆',
+    step4Title: '报告生成',
+    step4Desc: 'ReportAgent拥有丰富的工具集与模拟后环境进行深度交互',
+    step5Title: '深度互动',
+    step5Desc: '与模拟世界中的任意一位进行对话 & 与ReportAgent进行对话',
+    seedLabel: '01 / 现实种子',
+    formatHint: '支持格式: PDF, MD, TXT',
+    dragUpload: '拖拽文件上传',
+    clickBrowse: '或点击浏览文件系统',
+    inputParams: '输入参数',
+    promptLabel: '>_ 02 / 模拟提示词',
+    promptPlaceholder: '// 用自然语言输入模拟或预测需求（例.武大若发布撤销肖某处分的公告，会引发什么舆情走向）',
+    engineBadge: '引擎: MiroFish-V1.0',
+    startEngine: '启动引擎',
+    initializing: '初始化中...',
+  },
+  mainView: {
+    graph: '图谱',
+    split: '双栏',
+    workbench: '工作台',
+    stepGraph: '图谱构建',
+    stepEnv: '环境搭建',
+    stepSim: '开始模拟',
+    stepReport: '报告生成',
+    stepInteraction: '深度互动',
+    statusReady: 'Ready',
+    statusBuilding: 'Building Graph',
+    statusOntology: 'Generating Ontology',
+    statusInit: 'Initializing',
+  },
+  history: {
+    title: '推演记录',
+    graphBuild: '图谱构建',
+    envSetup: '环境搭建',
+    report: '分析报告',
+    moreFiles: '个文件',
+    noFiles: '暂无文件',
+    noName: '未命名模拟',
+    notStarted: '未开始',
+    rounds: ' 轮',
+    simRequirement: '模拟需求',
+    relatedFiles: '关联文件',
+    noRelatedFiles: '暂无关联文件',
+    unknownFile: '未知文件',
+    playback: '推演回放',
+    graphBuildBtn: '图谱构建',
+    envSetupBtn: '环境搭建',
+    reportBtn: '分析报告',
+    playbackHint: 'Step3「开始模拟」与 Step5「深度互动」需在运行中启动，不支持历史回放',
+  },
+  graph: {
+    refresh: '刷新图谱',
+    maximize: '最大化/还原',
+    updating: '实时更新中...',
+    memoryUpdating: 'GraphRAG长短期记忆实时更新中',
+    hintRefresh: '还有少量内容处理中，建议稍后手动刷新图谱',
+    loadingGraph: '图谱数据加载中...',
+    waitOntology: '等待本体生成...',
+    closeHint: '关闭提示',
+    nodeDetails: 'Node Details',
+    relationship: 'Relationship',
+    name: 'Name',
+    created: 'Created',
+    properties: 'Properties',
+    summary: 'Summary',
+    labels: 'Labels',
+  },
+  step1: {
+    ontology: '本体生成',
+    completed: '已完成',
+    processing: '生成中',
+    waiting: '等待',
+    desc: 'LLM分析文档内容与模拟需求，提取出现实种子，自动生成合适的本体结构',
+    analyzing: '正在分析文档...',
+    graphBuild: 'GraphRAG构建',
+    desc2: '基于生成的本体，将文档自动分块后调用 Zep 构建知识图谱，提取实体和关系，并形成时序记忆与社区摘要',
+    entityNodes: '实体节点',
+    relationEdges: '关系边',
+    schemaTypes: 'SCHEMA类型',
+    buildComplete: '构建完成',
+    inProgress: '进行中',
+    descNext: '图谱构建已完成，请进入下一步进行模拟环境搭建',
+    enterEnvSetup: '进入环境搭建 ➝',
+    creating: '创建中...',
+  },
+  step2: {
+    simInstance: '模拟实例初始化',
+    init: '初始化',
+    desc1: '新建simulation实例，拉取模拟世界参数模版',
+    taskDone: '异步任务已完成',
+    agentProfiles: '生成 Agent 人设',
+    desc2: '结合上下文，自动调用工具从知识图谱梳理实体与关系，初始化模拟个体，并基于现实种子赋予他们独特的行为与记忆',
+    agentCount: '当前Agent数',
+    expectedAgents: '预期Agent总数',
+    topicCount: '现实种子当前关联话题数',
+    generatedProfiles: '已生成的 Agent 人设',
+    unknownProfession: '未知职业',
+    noBio: '暂无简介',
+    dualPlatformConfig: '生成双平台模拟配置',
+    desc3: 'LLM 根据模拟需求与现实种子，智能设置世界时间流速、推荐算法、每个个体的活跃时间段、发言频率、事件触发等参数',
+    simDuration: '模拟时长',
+    hours: '小时',
+    perRound: '每轮时长',
+    minutes: '分钟',
+    totalRounds: '总轮次',
+    rounds: '轮',
+    activePerHour: '每小时活跃',
+    peakPeriod: '高峰时段',
+    workPeriod: '工作时段',
+    morningPeriod: '早间时段',
+    lowPeriod: '低谷时段',
+    agentConfig: 'Agent 配置',
+    agentsCount: ' 个',
+    activeTime: '活跃时段',
+    postsPerHour: '发帖/时',
+    commentsPerHour: '评论/时',
+    responseDelay: '响应延迟',
+    activityLevel: '活跃度',
+    sentimentBias: '情感倾向',
+    influence: '影响力',
+    recAlgoConfig: '推荐算法配置',
+    platform1: '平台 1：广场 / 信息流',
+    platform2: '平台 2：话题 / 社区',
+    recencyWeight: '时效权重',
+    popularityWeight: '热度权重',
+    relevanceWeight: '相关性权重',
+    viralThreshold: '病毒阈值',
+    echoChamber: '回音室强度',
+    llmConfig: 'LLM 配置推理',
+    initialActivation: '初始激活编排',
+    arranging: '编排中',
+    desc4: '基于叙事方向，自动生成初始激活事件与热点话题，引导模拟世界的初始状态',
+    narrativeDir: '叙事引导方向',
+    hotTopics: '初始热点话题',
+    initialPosts: '初始激活序列',
+    ready: '准备完成',
+    desc5: '模拟环境已准备完成，可以开始运行模拟',
+    roundsSetting: '模拟轮数设定',
+    roundsDesc: 'MiroFish 自动规划推演现实 {hours} 小时，每轮代表现实 {mins} 分钟时间流逝',
+    custom: '自定义',
+    estTime: '若Agent规模为100：预计耗时约 {n} 分钟',
+    autoRounds: '自动',
+    recOver40: '>40 (推荐)',
+    estTimeAuto: '若Agent规模为100：预计耗时 {n} 分钟',
+    customTip: '若首次运行，强烈建议切换至\'自定义模式\'减少模拟轮数，以便快速预览效果并降低报错风险 ➝',
+    backToGraph: '← 返回图谱构建',
+    startSim: '开始双世界并行模拟 ➝',
+    age: '事件外显年龄',
+    years: '岁',
+    gender: '事件外显性别',
+    male: '男',
+    female: '女',
+    other: '其他',
+    country: '国家/地区',
+    mbti: '事件外显MBTI',
+  },
+  step3: {
+    startReport: '开始生成结果报告',
+    starting: '启动中...',
+  },
+  step4: {
+    generating: '正在生成',
+  },
+  step5: {
+    generating: '正在生成',
+  },
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index c8e37b03..cc3d101e 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -1,9 +1,11 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import i18n from './i18n'
 
 const app = createApp(App)
 
 app.use(router)
+app.use(i18n)
 
 app.mount('#app')
diff --git a/frontend/src/views/Home.vue b/frontend/src/views/Home.vue
index afe01a0c..6420c34d 100644
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -4,8 +4,9 @@
     <nav class="navbar">
       <div class="nav-brand">MIROFISH</div>
       <div class="nav-links">
+        <LanguageSelector />
         <a href="https://github.com/666ghj/MiroFish" target="_blank" class="github-link">
-          访问我们的Github主页 <span class="arrow">↗</span>
+          {{ $t('nav.visitGithub') }} <span class="arrow">↗</span>
         </a>
       </div>
     </nav>
@@ -15,21 +16,21 @@
       <section class="hero-section">
         <div class="hero-left">
           <div class="tag-row">
-            <span class="orange-tag">简洁通用的群体智能引擎</span>
-            <span class="version-text">/ v0.1-预览版</span>
+            <span class="orange-tag">{{ $t('home.tagline') }}</span>
+            <span class="version-text">{{ $t('home.version') }}</span>
           </div>
           
           <h1 class="main-title">
-            上传任意报告<br>
-            <span class="gradient-text">即刻推演未来</span>
+            {{ $t('home.title1') }}<br>
+            <span class="gradient-text">{{ $t('home.title2') }}</span>
           </h1>
           
           <div class="hero-desc">
             <p>
-              即使只有一段文字，<span class="highlight-bold">MiroFish</span> 也能基于其中的现实种子，全自动生成与之对应的至多<span class="highlight-orange">百万级Agent</span>构成的平行世界。通过上帝视角注入变量，在复杂的群体交互中寻找动态环境下的<span class="highlight-code">“局部最优解”</span>
+              {{ $t('home.desc1') }}<span class="highlight-bold">{{ $t('home.desc2') }}</span> {{ $t('home.desc3') }}<span class="highlight-orange">{{ $t('home.desc4') }}</span> {{ $t('home.desc5') }}<span class="highlight-code">{{ $t('home.desc6') }}</span>
             </p>
             <p class="slogan-text">
-              让未来在 Agent 群中预演，让决策在百战后胜出<span class="blinking-cursor">_</span>
+              {{ $t('home.slogan') }}<span class="blinking-cursor">_</span>
             </p>
           </div>
            
@@ -53,65 +54,65 @@
         <!-- 左栏：状态与步骤 -->
         <div class="left-panel">
           <div class="panel-header">
-            <span class="status-dot">■</span> 系统状态
+            <span class="status-dot">■</span> {{ $t('home.systemStatus') }}
           </div>
           
-          <h2 class="section-title">准备就绪</h2>
+          <h2 class="section-title">{{ $t('home.ready') }}</h2>
           <p class="section-desc">
-            预测引擎待命中，可上传多份非结构化数据以初始化模拟序列
+            {{ $t('home.readyDesc') }}
           </p>
           
           <!-- 数据指标卡片 -->
           <div class="metrics-row">
             <div class="metric-card">
-              <div class="metric-value">低成本</div>
-              <div class="metric-label">常规模拟平均5$/次</div>
+              <div class="metric-value">{{ $t('home.lowCost') }}</div>
+              <div class="metric-label">{{ $t('home.lowCostDesc') }}</div>
             </div>
             <div class="metric-card">
-              <div class="metric-value">高可用</div>
-              <div class="metric-label">最多百万级Agent模拟</div>
+              <div class="metric-value">{{ $t('home.highAvailable') }}</div>
+              <div class="metric-label">{{ $t('home.highAvailableDesc') }}</div>
             </div>
           </div>
 
-          <!-- 项目模拟步骤介绍 (新增区域) -->
+          <!-- 项目模拟步骤介绍 -->
           <div class="steps-container">
             <div class="steps-header">
-               <span class="diamond-icon">◇</span> 工作流序列
+               <span class="diamond-icon">◇</span> {{ $t('home.workflow') }}
             </div>
             <div class="workflow-list">
               <div class="workflow-item">
                 <span class="step-num">01</span>
                 <div class="step-info">
-                  <div class="step-title">图谱构建</div>
-                  <div class="step-desc">现实种子提取 & 个体与群体记忆注入 & GraphRAG构建</div>
+                  <div class="step-title">{{ $t('home.step1Title') }}</div>
+                  <div class="step-desc">{{ $t('home.step1Desc') }}</div>
                 </div>
               </div>
               <div class="workflow-item">
                 <span class="step-num">02</span>
                 <div class="step-info">
-                  <div class="step-title">环境搭建</div>
-                  <div class="step-desc">实体关系抽取 & 人设生成 & 环境配置Agent注入仿真参数</div>
+                  <div class="step-title">{{ $t('home.step2Title') }}</div>
+                  <div class="step-desc">{{ $t('home.step2Desc') }}</div>
                 </div>
               </div>
               <div class="workflow-item">
                 <span class="step-num">03</span>
                 <div class="step-info">
-                  <div class="step-title">开始模拟</div>
-                  <div class="step-desc">双平台并行模拟 & 自动解析预测需求 & 动态更新时序记忆</div>
+                  <div class="step-title">{{ $t('home.step3Title') }}</div>
+                  <div class="step-desc">{{ $t('home.step3Desc') }}</div>
                 </div>
               </div>
               <div class="workflow-item">
                 <span class="step-num">04</span>
                 <div class="step-info">
-                  <div class="step-title">报告生成</div>
-                  <div class="step-desc">ReportAgent拥有丰富的工具集与模拟后环境进行深度交互</div>
+                  <div class="step-title">{{ $t('home.step4Title') }}</div>
+                  <div class="step-desc">{{ $t('home.step4Desc') }}</div>
                 </div>
               </div>
               <div class="workflow-item">
                 <span class="step-num">05</span>
                 <div class="step-info">
-                  <div class="step-title">深度互动</div>
-                  <div class="step-desc">与模拟世界中的任意一位进行对话 & 与ReportAgent进行对话</div>
+                  <div class="step-title">{{ $t('home.step5Title') }}</div>
+                  <div class="step-desc">{{ $t('home.step5Desc') }}</div>
                 </div>
               </div>
             </div>
@@ -124,8 +125,8 @@
             <!-- 上传区域 -->
             <div class="console-section">
               <div class="console-header">
-                <span class="console-label">01 / 现实种子</span>
-                <span class="console-meta">支持格式: PDF, MD, TXT</span>
+                <span class="console-label">{{ $t('home.seedLabel') }}</span>
+                <span class="console-meta">{{ $t('home.formatHint') }}</span>
               </div>
               
               <div 
@@ -148,8 +149,8 @@
                 
                 <div v-if="files.length === 0" class="upload-placeholder">
                   <div class="upload-icon">↑</div>
-                  <div class="upload-title">拖拽文件上传</div>
-                  <div class="upload-hint">或点击浏览文件系统</div>
+                  <div class="upload-title">{{ $t('home.dragUpload') }}</div>
+                  <div class="upload-hint">{{ $t('home.clickBrowse') }}</div>
                 </div>
                 
                 <div v-else class="file-list">
@@ -164,23 +165,23 @@
 
             <!-- 分割线 -->
             <div class="console-divider">
-              <span>输入参数</span>
+              <span>{{ $t('home.inputParams') }}</span>
             </div>
 
             <!-- 输入区域 -->
             <div class="console-section">
               <div class="console-header">
-                <span class="console-label">>_ 02 / 模拟提示词</span>
+                <span class="console-label">{{ $t('home.promptLabel') }}</span>
               </div>
               <div class="input-wrapper">
                 <textarea
                   v-model="formData.simulationRequirement"
                   class="code-input"
-                  placeholder="// 用自然语言输入模拟或预测需求（例.武大若发布撤销肖某处分的公告，会引发什么舆情走向）"
+                  :placeholder="$t('home.promptPlaceholder')"
                   rows="6"
                   :disabled="loading"
                 ></textarea>
-                <div class="model-badge">引擎: MiroFish-V1.0</div>
+                <div class="model-badge">{{ $t('home.engineBadge') }}</div>
               </div>
             </div>
 
@@ -191,8 +192,8 @@
                 @click="startSimulation"
                 :disabled="!canSubmit || loading"
               >
-                <span v-if="!loading">启动引擎</span>
-                <span v-else>初始化中...</span>
+                <span v-if="!loading">{{ $t('home.startEngine') }}</span>
+                <span v-else>{{ $t('home.initializing') }}</span>
                 <span class="btn-arrow">→</span>
               </button>
             </div>
@@ -210,6 +211,7 @@
 import { ref, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import HistoryDatabase from '../components/HistoryDatabase.vue'
+import LanguageSelector from '../components/LanguageSelector.vue'
 
 const router = useRouter()
 
@@ -351,6 +353,7 @@ const startSimulation = () => {
 .nav-links {
   display: flex;
   align-items: center;
+  gap: 20px;
 }
 
 .github-link {
diff --git a/frontend/src/views/MainView.vue b/frontend/src/views/MainView.vue
index 6ff29911..c730976c 100644
--- a/frontend/src/views/MainView.vue
+++ b/frontend/src/views/MainView.vue
@@ -15,12 +15,13 @@
             :class="{ active: viewMode === mode }"
             @click="viewMode = mode"
           >
-            {{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
+            {{ { graph: t('mainView.graph'), split: t('mainView.split'), workbench: t('mainView.workbench') }[mode] }}
           </button>
         </div>
       </div>
 
       <div class="header-right">
+        <LanguageSelector light />
         <div class="workflow-step">
           <span class="step-num">Step {{ currentStep }}/5</span>
           <span class="step-name">{{ stepNames[currentStep - 1] }}</span>
@@ -76,10 +77,12 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import GraphPanel from '../components/GraphPanel.vue'
 import Step1GraphBuild from '../components/Step1GraphBuild.vue'
 import Step2EnvSetup from '../components/Step2EnvSetup.vue'
+import LanguageSelector from '../components/LanguageSelector.vue'
 import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
 import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
 
@@ -91,7 +94,14 @@ const viewMode = ref('split') // graph | split | workbench
 
 // Step State
 const currentStep = ref(1) // 1: 图谱构建, 2: 环境搭建, 3: 开始模拟, 4: 报告生成, 5: 深度互动
-const stepNames = ['图谱构建', '环境搭建', '开始模拟', '报告生成', '深度互动']
+const { t } = useI18n()
+const stepNames = computed(() => [
+  t('mainView.stepGraph'),
+  t('mainView.stepEnv'),
+  t('mainView.stepSim'),
+  t('mainView.stepReport'),
+  t('mainView.stepInteraction'),
+])
 
 // Data State
 const currentProjectId = ref(route.params.projectId)
@@ -131,10 +141,10 @@ const statusClass = computed(() => {
 
 const statusText = computed(() => {
   if (error.value) return 'Error'
-  if (currentPhase.value >= 2) return 'Ready'
-  if (currentPhase.value === 1) return 'Building Graph'
-  if (currentPhase.value === 0) return 'Generating Ontology'
-  return 'Initializing'
+  if (currentPhase.value >= 2) return t('mainView.statusReady')
+  if (currentPhase.value === 1) return t('mainView.statusBuilding')
+  if (currentPhase.value === 0) return t('mainView.statusOntology')
+  return t('mainView.statusInit')
 })
 
 // --- Helpers ---
diff --git a/frontend/src/views/SimulationView.vue b/frontend/src/views/SimulationView.vue
index 4b44b397..aa101948 100644
--- a/frontend/src/views/SimulationView.vue
+++ b/frontend/src/views/SimulationView.vue
@@ -15,15 +15,16 @@
             :class="{ active: viewMode === mode }"
             @click="viewMode = mode"
           >
-            {{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
+            {{ { graph: t('mainView.graph'), split: t('mainView.split'), workbench: t('mainView.workbench') }[mode] }}
           </button>
         </div>
       </div>
 
       <div class="header-right">
+        <LanguageSelector light />
         <div class="workflow-step">
           <span class="step-num">Step 2/5</span>
-          <span class="step-name">环境搭建</span>
+          <span class="step-name">{{ t('mainView.stepEnv') }}</span>
         </div>
         <div class="step-divider"></div>
         <span class="status-indicator" :class="statusClass">
@@ -65,14 +66,17 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import GraphPanel from '../components/GraphPanel.vue'
 import Step2EnvSetup from '../components/Step2EnvSetup.vue'
+import LanguageSelector from '../components/LanguageSelector.vue'
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation, stopSimulation, getEnvStatus, closeSimulationEnv } from '../api/simulation'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 
 // Props
 const props = defineProps({

From b0f3338c10757189cb7f3cf7311f776f8a3e9b73 Mon Sep 17 00:00:00 2001
From: Pratiyank Kumar <159152851+Pratiyankkumar@users.noreply.github.com>
Date: Tue, 10 Mar 2026 22:51:20 +0530
Subject: [PATCH 2/3] feat(i18n): enhance localization by adding translations
 for profile, report, and interaction components

---
 frontend/src/components/Step2EnvSetup.vue    | 24 ++++----
 frontend/src/components/Step4Report.vue      |  4 +-
 frontend/src/components/Step5Interaction.vue | 60 ++++++++++----------
 frontend/src/i18n/locales/en.js              | 41 +++++++++++++
 frontend/src/i18n/locales/zh.js              | 41 +++++++++++++
 frontend/src/views/InteractionView.vue       |  8 ++-
 frontend/src/views/ReportView.vue            |  8 ++-
 frontend/src/views/SimulationRunView.vue     |  8 ++-
 8 files changed, 144 insertions(+), 50 deletions(-)

diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
index f61a703c..d1e82789 100644
--- a/frontend/src/components/Step2EnvSetup.vue
+++ b/frontend/src/components/Step2EnvSetup.vue
@@ -566,13 +566,13 @@
 
           <!-- 简介 -->
           <div class="modal-section">
-            <span class="section-label">人设简介</span>
-            <p class="section-bio">{{ selectedProfile.bio || '暂无简介' }}</p>
+            <span class="section-label">{{ $t('step2Profile.bioLabel') }}</span>
+            <p class="section-bio">{{ selectedProfile.bio || $t('step2.noBio') }}</p>
           </div>
 
           <!-- 关注话题 -->
           <div class="modal-section" v-if="selectedProfile.interested_topics?.length">
-            <span class="section-label">现实种子关联话题</span>
+            <span class="section-label">{{ $t('step2Profile.relatedTopics') }}</span>
             <div class="topics-grid">
               <span 
                 v-for="topic in selectedProfile.interested_topics" 
@@ -584,25 +584,25 @@
 
           <!-- 详细人设 -->
           <div class="modal-section" v-if="selectedProfile.persona">
-            <span class="section-label">详细人设背景</span>
+            <span class="section-label">{{ $t('step2Profile.personaBg') }}</span>
             
             <!-- 人设维度概览 -->
             <div class="persona-dimensions">
               <div class="dimension-card">
-                <span class="dim-title">事件全景经历</span>
-                <span class="dim-desc">在此事件中的完整行为轨迹</span>
+                <span class="dim-title">{{ $t('step2Profile.eventTrajectory') }}</span>
+                <span class="dim-desc">{{ $t('step2Profile.eventTrajectoryDesc') }}</span>
               </div>
               <div class="dimension-card">
-                <span class="dim-title">行为模式侧写</span>
-                <span class="dim-desc">经验总结与行事风格偏好</span>
+                <span class="dim-title">{{ $t('step2Profile.behaviorProfile') }}</span>
+                <span class="dim-desc">{{ $t('step2Profile.behaviorProfileDesc') }}</span>
               </div>
               <div class="dimension-card">
-                <span class="dim-title">独特记忆印记</span>
-                <span class="dim-desc">基于现实种子形成的记忆</span>
+                <span class="dim-title">{{ $t('step2Profile.memoryImprint') }}</span>
+                <span class="dim-desc">{{ $t('step2Profile.memoryImprintDesc') }}</span>
               </div>
               <div class="dimension-card">
-                <span class="dim-title">社会关系网络</span>
-                <span class="dim-desc">个体链接与交互图谱</span>
+                <span class="dim-title">{{ $t('step2Profile.socialNetwork') }}</span>
+                <span class="dim-desc">{{ $t('step2Profile.socialNetworkDesc') }}</span>
               </div>
             </div>
 
diff --git a/frontend/src/components/Step4Report.vue b/frontend/src/components/Step4Report.vue
index 22f2bdcf..c2220cd9 100644
--- a/frontend/src/components/Step4Report.vue
+++ b/frontend/src/components/Step4Report.vue
@@ -58,7 +58,7 @@
                       <path d="M12 2a10 10 0 0 1 10 10" stroke-width="4" stroke="#4B5563" stroke-linecap="round"></path>
                     </svg>
                   </div>
-                  <span class="loading-text">正在生成{{ section.title }}...</span>
+                  <span class="loading-text">{{ $t('step4.generating') }}{{ section.title }}...</span>
                 </div>
               </div>
             </div>
@@ -129,7 +129,7 @@
 
           <!-- Next Step Button - 在完成后显示 -->
           <button v-if="isComplete" class="next-step-btn" @click="goToInteraction">
-            <span>进入深度互动</span>
+            <span>{{ $t('step4.enterInteraction') }}</span>
             <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
               <line x1="5" y1="12" x2="19" y2="12"></line>
               <polyline points="12 5 19 12 12 19"></polyline>
diff --git a/frontend/src/components/Step5Interaction.vue b/frontend/src/components/Step5Interaction.vue
index 3d84c7ce..afd58dfb 100644
--- a/frontend/src/components/Step5Interaction.vue
+++ b/frontend/src/components/Step5Interaction.vue
@@ -58,7 +58,7 @@
                       <path d="M12 2a10 10 0 0 1 10 10" stroke-width="4" stroke="#4B5563" stroke-linecap="round"></path>
                     </svg>
                   </div>
-                  <span class="loading-text">正在生成{{ section.title }}...</span>
+                  <span class="loading-text">{{ $t('step5.generating') }}{{ section.title }}...</span>
                 </div>
               </div>
             </div>
@@ -98,7 +98,7 @@
               <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
                 <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"></path>
               </svg>
-              <span>与Report Agent对话</span>
+              <span>{{ $t('step5.chatWithReport') }}</span>
             </button>
             <div class="agent-dropdown" v-if="profiles.length > 0">
               <button 
@@ -110,13 +110,13 @@
                   <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
                   <circle cx="12" cy="7" r="4"></circle>
                 </svg>
-                <span>{{ selectedAgent ? selectedAgent.username : '与世界中任意个体对话' }}</span>
+                <span>{{ selectedAgent ? selectedAgent.username : $t('step5.chatWithAgent') }}</span>
                 <svg class="dropdown-arrow" :class="{ open: showAgentDropdown }" viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2">
                   <polyline points="6 9 12 15 18 9"></polyline>
                 </svg>
               </button>
               <div v-if="showAgentDropdown" class="dropdown-menu">
-                <div class="dropdown-header">选择对话对象</div>
+                <div class="dropdown-header">{{ $t('step5.selectTarget') }}</div>
                 <div 
                   v-for="(agent, idx) in profiles" 
                   :key="idx"
@@ -126,7 +126,7 @@
                   <div class="agent-avatar">{{ (agent.username || 'A')[0] }}</div>
                   <div class="agent-info">
                     <span class="agent-name">{{ agent.username }}</span>
-                    <span class="agent-role">{{ agent.profession || '未知职业' }}</span>
+                    <span class="agent-role">{{ agent.profession || $t('step5.unknownProfession') }}</span>
                   </div>
                 </div>
               </div>
@@ -141,7 +141,7 @@
                 <path d="M9 11l3 3L22 4"></path>
                 <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
               </svg>
-              <span>发送问卷调查到世界中</span>
+              <span>{{ $t('step5.sendSurvey') }}</span>
             </button>
           </div>
         </div>
@@ -155,7 +155,7 @@
               <div class="tools-card-avatar">R</div>
               <div class="tools-card-info">
                 <div class="tools-card-name">Report Agent - Chat</div>
-                <div class="tools-card-subtitle">报告生成智能体的快速对话版本，可调用 4 种专业工具，拥有MiroFish的完整记忆</div>
+                <div class="tools-card-subtitle">{{ $t('step5.toolsSubtitle') }}</div>
               </div>
               <button class="tools-card-toggle" @click="showToolsDetail = !showToolsDetail">
                 <svg :class="{ 'is-expanded': showToolsDetail }" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
@@ -172,8 +172,8 @@
                     </svg>
                   </div>
                   <div class="tool-content">
-                    <div class="tool-name">InsightForge 深度归因</div>
-                    <div class="tool-desc">对齐现实世界种子数据与模拟环境状态，结合Global/Local Memory机制，提供跨时空的深度归因分析</div>
+                    <div class="tool-name">{{ $t('step5.insightForge') }}</div>
+                    <div class="tool-desc">{{ $t('step5.insightForgeDesc') }}</div>
                   </div>
                 </div>
                 <div class="tool-item tool-blue">
@@ -184,8 +184,8 @@
                     </svg>
                   </div>
                   <div class="tool-content">
-                    <div class="tool-name">PanoramaSearch 全景追踪</div>
-                    <div class="tool-desc">基于图结构的广度遍历算法，重构事件传播路径，捕获全量信息流动的拓扑结构</div>
+                    <div class="tool-name">{{ $t('step5.panoramaSearch') }}</div>
+                    <div class="tool-desc">{{ $t('step5.panoramaSearchDesc') }}</div>
                   </div>
                 </div>
                 <div class="tool-item tool-orange">
@@ -195,8 +195,8 @@
                     </svg>
                   </div>
                   <div class="tool-content">
-                    <div class="tool-name">QuickSearch 快速检索</div>
-                    <div class="tool-desc">基于 GraphRAG 的即时查询接口，优化索引效率，用于快速提取具体的节点属性与离散事实</div>
+                    <div class="tool-name">{{ $t('step5.quickSearch') }}</div>
+                    <div class="tool-desc">{{ $t('step5.quickSearchDesc') }}</div>
                   </div>
                 </div>
                 <div class="tool-item tool-green">
@@ -208,8 +208,8 @@
                     </svg>
                   </div>
                   <div class="tool-content">
-                    <div class="tool-name">InterviewSubAgent 虚拟访谈</div>
-                    <div class="tool-desc">自主式访谈，能够并行与模拟世界中个体进行多轮对话，采集非结构化的观点数据与心理状态</div>
+                    <div class="tool-name">{{ $t('step5.interviewAgent') }}</div>
+                    <div class="tool-desc">{{ $t('step5.interviewAgentDesc') }}</div>
                   </div>
                 </div>
               </div>
@@ -224,7 +224,7 @@
                 <div class="profile-card-name">{{ selectedAgent.username }}</div>
                 <div class="profile-card-meta">
                   <span v-if="selectedAgent.name" class="profile-card-handle">@{{ selectedAgent.name }}</span>
-                  <span class="profile-card-profession">{{ selectedAgent.profession || '未知职业' }}</span>
+                  <span class="profile-card-profession">{{ selectedAgent.profession || $t('step5.unknownProfession') }}</span>
                 </div>
               </div>
               <button class="profile-card-toggle" @click="showFullProfile = !showFullProfile">
@@ -235,7 +235,7 @@
             </div>
             <div v-if="showFullProfile && selectedAgent.bio" class="profile-card-body">
               <div class="profile-card-bio">
-                <div class="profile-card-label">简介</div>
+                <div class="profile-card-label">{{ $t('step5.bio') }}</div>
                 <p>{{ selectedAgent.bio }}</p>
               </div>
             </div>
@@ -250,7 +250,7 @@
                 </svg>
               </div>
               <p class="empty-text">
-                {{ chatTarget === 'report_agent' ? '与 Report Agent 对话，深入了解报告内容' : '与模拟个体对话，了解他们的观点' }}
+                {{ chatTarget === 'report_agent' ? $t('step5.chatWithReportDesc') : $t('step5.chatWithAgentDesc') }}
               </p>
             </div>
             <div 
@@ -292,7 +292,7 @@
             <textarea 
               v-model="chatInput"
               class="chat-input"
-              placeholder="输入您的问题..."
+              :placeholder="$t('step5.placeholder')"
               @keydown.enter.exact.prevent="sendMessage"
               :disabled="isSending || (!selectedAgent && chatTarget === 'agent')"
               rows="1"
@@ -317,8 +317,8 @@
           <div class="survey-setup">
             <div class="setup-section">
               <div class="section-header">
-                <span class="section-title">选择调查对象</span>
-                <span class="selection-count">已选 {{ selectedAgents.size }} / {{ profiles.length }}</span>
+                <span class="section-title">{{ $t('step5.selectSurveyTarget') }}</span>
+                <span class="selection-count">{{ $t('step5.selectedCount', { n: selectedAgents.size, total: profiles.length }) }}</span>
               </div>
               <div class="agents-grid">
                 <label 
@@ -335,7 +335,7 @@
                   <div class="checkbox-avatar">{{ (agent.username || 'A')[0] }}</div>
                   <div class="checkbox-info">
                     <span class="checkbox-name">{{ agent.username }}</span>
-                    <span class="checkbox-role">{{ agent.profession || '未知职业' }}</span>
+                    <span class="checkbox-role">{{ agent.profession || $t('step5.unknownProfession') }}</span>
                   </div>
                   <div class="checkbox-indicator">
                     <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="3">
@@ -345,20 +345,20 @@
                 </label>
               </div>
               <div class="selection-actions">
-                <button class="action-link" @click="selectAllAgents">全选</button>
+                <button class="action-link" @click="selectAllAgents">{{ $t('step5.selectAll') }}</button>
                 <span class="action-divider">|</span>
-                <button class="action-link" @click="clearAgentSelection">清空</button>
+                <button class="action-link" @click="clearAgentSelection">{{ $t('step5.clear') }}</button>
               </div>
             </div>
 
             <div class="setup-section">
               <div class="section-header">
-                <span class="section-title">问卷问题</span>
+                <span class="section-title">{{ $t('step5.questionnaire') }}</span>
               </div>
               <textarea 
                 v-model="surveyQuestion"
                 class="survey-input"
-                placeholder="输入您想问所有被选中对象的问题..."
+                :placeholder="$t('step5.placeholderSurvey')"
                 rows="3"
               ></textarea>
             </div>
@@ -369,15 +369,15 @@
               @click="submitSurvey"
             >
               <span v-if="isSurveying" class="loading-spinner"></span>
-              <span v-else>发送问卷</span>
+              <span v-else>{{ $t('step5.sendQuestionnaire') }}</span>
             </button>
           </div>
 
           <!-- Survey Results -->
           <div v-if="surveyResults.length > 0" class="survey-results">
             <div class="results-header">
-              <span class="results-title">调查结果</span>
-              <span class="results-count">{{ surveyResults.length }} 条回复</span>
+              <span class="results-title">{{ $t('step5.surveyResults') }}</span>
+              <span class="results-count">{{ $t('step5.repliesCount', { n: surveyResults.length }) }}</span>
             </div>
             <div class="results-list">
               <div 
@@ -389,7 +389,7 @@
                   <div class="result-avatar">{{ (result.agent_name || 'A')[0] }}</div>
                   <div class="result-info">
                     <span class="result-name">{{ result.agent_name }}</span>
-                    <span class="result-role">{{ result.profession || '未知职业' }}</span>
+                    <span class="result-role">{{ result.profession || $t('step5.unknownProfession') }}</span>
                   </div>
                 </div>
                 <div class="result-question">
diff --git a/frontend/src/i18n/locales/en.js b/frontend/src/i18n/locales/en.js
index d4109239..ce2e46a0 100644
--- a/frontend/src/i18n/locales/en.js
+++ b/frontend/src/i18n/locales/en.js
@@ -204,8 +204,49 @@ export default {
   },
   step4: {
     generating: 'Generating',
+    enterInteraction: 'Enter Interaction',
   },
   step5: {
     generating: 'Generating',
+    chatWithReport: 'Chat with Report Agent',
+    chatWithAgent: 'Chat with any agent in the world',
+    selectTarget: 'Select chat target',
+    unknownProfession: 'Unknown',
+    sendSurvey: 'Send survey to world',
+    toolsSubtitle: 'Report Agent quick chat - 4 professional tools, full MiroFish memory',
+    insightForge: 'InsightForge Deep Attribution',
+    insightForgeDesc: 'Align reality seeds with simulation state, provide cross-temporal deep attribution via Global/Local Memory',
+    panoramaSearch: 'PanoramaSearch Full Tracking',
+    panoramaSearchDesc: 'Graph-based breadth traversal to reconstruct event propagation and capture information flow topology',
+    quickSearch: 'QuickSearch Retrieval',
+    quickSearchDesc: 'GraphRAG query interface for fast extraction of node attributes and discrete facts',
+    interviewAgent: 'InterviewSubAgent Virtual Interview',
+    interviewAgentDesc: 'Autonomous interviews with individuals in the simulated world for unstructured opinions and mental state',
+    bio: 'Bio',
+    chatWithReportDesc: 'Chat with Report Agent to explore the report',
+    chatWithAgentDesc: 'Chat with simulation individual for their views',
+    placeholder: 'Enter your question...',
+    selectSurveyTarget: 'Select survey targets',
+    selectedCount: 'Selected {n} / {total}',
+    questionnaire: 'Questionnaire',
+    placeholderSurvey: 'Enter your question for selected agents...',
+    sendQuestionnaire: 'Send Survey',
+    surveyResults: 'Survey Results',
+    repliesCount: '{n} replies',
+    selectAll: 'Select All',
+    clear: 'Clear',
+  },
+  step2Profile: {
+    bioLabel: 'Persona Bio',
+    relatedTopics: 'Reality Seed Topics',
+    personaBg: 'Detailed Persona',
+    eventTrajectory: 'Event Trajectory',
+    eventTrajectoryDesc: 'Complete behavioral trajectory in this event',
+    behaviorProfile: 'Behavior Profile',
+    behaviorProfileDesc: 'Experience summary and style preferences',
+    memoryImprint: 'Memory Imprint',
+    memoryImprintDesc: 'Memories formed from reality seeds',
+    socialNetwork: 'Social Network',
+    socialNetworkDesc: 'Individual links and interaction graph',
   },
 }
diff --git a/frontend/src/i18n/locales/zh.js b/frontend/src/i18n/locales/zh.js
index 0d356879..d1c2abc7 100644
--- a/frontend/src/i18n/locales/zh.js
+++ b/frontend/src/i18n/locales/zh.js
@@ -203,8 +203,49 @@ export default {
   },
   step4: {
     generating: '正在生成',
+    enterInteraction: '进入深度互动',
   },
   step5: {
     generating: '正在生成',
+    chatWithReport: '与Report Agent对话',
+    chatWithAgent: '与世界中任意个体对话',
+    selectTarget: '选择对话对象',
+    unknownProfession: '未知职业',
+    sendSurvey: '发送问卷调查到世界中',
+    toolsSubtitle: '报告生成智能体的快速对话版本，可调用 4 种专业工具，拥有MiroFish的完整记忆',
+    insightForge: 'InsightForge 深度归因',
+    insightForgeDesc: '对齐现实世界种子数据与模拟环境状态，结合Global/Local Memory机制，提供跨时空的深度归因分析',
+    panoramaSearch: 'PanoramaSearch 全景追踪',
+    panoramaSearchDesc: '基于图结构的广度遍历算法，重构事件传播路径，捕获全量信息流动的拓扑结构',
+    quickSearch: 'QuickSearch 快速检索',
+    quickSearchDesc: '基于 GraphRAG 的即时查询接口，优化索引效率，用于快速提取具体的节点属性与离散事实',
+    interviewAgent: 'InterviewSubAgent 虚拟访谈',
+    interviewAgentDesc: '自主式访谈，能够并行与模拟世界中个体进行多轮对话，采集非结构化的观点数据与心理状态',
+    bio: '简介',
+    chatWithReportDesc: '与 Report Agent 对话，深入了解报告内容',
+    chatWithAgentDesc: '与模拟个体对话，了解他们的观点',
+    placeholder: '输入您的问题...',
+    selectSurveyTarget: '选择调查对象',
+    selectedCount: '已选 {n} / {total}',
+    questionnaire: '问卷问题',
+    placeholderSurvey: '输入您想问所有被选中对象的问题...',
+    sendQuestionnaire: '发送问卷',
+    surveyResults: '调查结果',
+    repliesCount: '{n} 条回复',
+    selectAll: '全选',
+    clear: '清空',
+  },
+  step2Profile: {
+    bioLabel: '人设简介',
+    relatedTopics: '现实种子关联话题',
+    personaBg: '详细人设背景',
+    eventTrajectory: '事件全景经历',
+    eventTrajectoryDesc: '在此事件中的完整行为轨迹',
+    behaviorProfile: '行为模式侧写',
+    behaviorProfileDesc: '经验总结与行事风格偏好',
+    memoryImprint: '独特记忆印记',
+    memoryImprintDesc: '基于现实种子形成的记忆',
+    socialNetwork: '社会关系网络',
+    socialNetworkDesc: '个体链接与交互图谱',
   },
 }
diff --git a/frontend/src/views/InteractionView.vue b/frontend/src/views/InteractionView.vue
index b153590d..b0ae83f9 100644
--- a/frontend/src/views/InteractionView.vue
+++ b/frontend/src/views/InteractionView.vue
@@ -15,15 +15,16 @@
             :class="{ active: viewMode === mode }"
             @click="viewMode = mode"
           >
-            {{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
+            {{ { graph: t('mainView.graph'), split: t('mainView.split'), workbench: t('mainView.workbench') }[mode] }}
           </button>
         </div>
       </div>
 
       <div class="header-right">
+        <LanguageSelector light />
         <div class="workflow-step">
           <span class="step-num">Step 5/5</span>
-          <span class="step-name">深度互动</span>
+          <span class="step-name">{{ t('mainView.stepInteraction') }}</span>
         </div>
         <div class="step-divider"></div>
         <span class="status-indicator" :class="statusClass">
@@ -63,15 +64,18 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import GraphPanel from '../components/GraphPanel.vue'
 import Step5Interaction from '../components/Step5Interaction.vue'
+import LanguageSelector from '../components/LanguageSelector.vue'
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation } from '../api/simulation'
 import { getReport } from '../api/report'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 
 // Props
 const props = defineProps({
diff --git a/frontend/src/views/ReportView.vue b/frontend/src/views/ReportView.vue
index 84a3e2a3..eac29377 100644
--- a/frontend/src/views/ReportView.vue
+++ b/frontend/src/views/ReportView.vue
@@ -15,15 +15,16 @@
             :class="{ active: viewMode === mode }"
             @click="viewMode = mode"
           >
-            {{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
+            {{ { graph: t('mainView.graph'), split: t('mainView.split'), workbench: t('mainView.workbench') }[mode] }}
           </button>
         </div>
       </div>
 
       <div class="header-right">
+        <LanguageSelector light />
         <div class="workflow-step">
           <span class="step-num">Step 4/5</span>
-          <span class="step-name">报告生成</span>
+          <span class="step-name">{{ t('mainView.stepReport') }}</span>
         </div>
         <div class="step-divider"></div>
         <span class="status-indicator" :class="statusClass">
@@ -63,15 +64,18 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import GraphPanel from '../components/GraphPanel.vue'
 import Step4Report from '../components/Step4Report.vue'
+import LanguageSelector from '../components/LanguageSelector.vue'
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation } from '../api/simulation'
 import { getReport } from '../api/report'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 
 // Props
 const props = defineProps({
diff --git a/frontend/src/views/SimulationRunView.vue b/frontend/src/views/SimulationRunView.vue
index 14ebc5f9..fe7108a0 100644
--- a/frontend/src/views/SimulationRunView.vue
+++ b/frontend/src/views/SimulationRunView.vue
@@ -15,15 +15,16 @@
             :class="{ active: viewMode === mode }"
             @click="viewMode = mode"
           >
-            {{ { graph: '图谱', split: '双栏', workbench: '工作台' }[mode] }}
+            {{ { graph: t('mainView.graph'), split: t('mainView.split'), workbench: t('mainView.workbench') }[mode] }}
           </button>
         </div>
       </div>
 
       <div class="header-right">
+        <LanguageSelector light />
         <div class="workflow-step">
           <span class="step-num">Step 3/5</span>
-          <span class="step-name">开始模拟</span>
+          <span class="step-name">{{ t('mainView.stepSim') }}</span>
         </div>
         <div class="step-divider"></div>
         <span class="status-indicator" :class="statusClass">
@@ -68,14 +69,17 @@
 
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import GraphPanel from '../components/GraphPanel.vue'
 import Step3Simulation from '../components/Step3Simulation.vue'
+import LanguageSelector from '../components/LanguageSelector.vue'
 import { getProject, getGraphData } from '../api/graph'
 import { getSimulation, getSimulationConfig, stopSimulation, closeSimulationEnv, getEnvStatus } from '../api/simulation'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 
 // Props
 const props = defineProps({

From cb868d30438bced7e10fe0efd4d30db0e6c32e3e Mon Sep 17 00:00:00 2001
From: Pratiyank Kumar <159152851+Pratiyankkumar@users.noreply.github.com>
Date: Tue, 10 Mar 2026 23:37:16 +0530
Subject: [PATCH 3/3] feat(i18n): integrate user language preference in API
 requests and enhance error messages with localization support

---
 backend/app/api/graph.py                     |  9 ++++--
 backend/app/api/report.py                    | 33 +++++++++++++-------
 backend/app/services/ontology_generator.py   | 15 +++++++--
 backend/app/services/report_agent.py         | 27 +++++++++++++---
 backend/app/utils/error_messages.py          | 26 +++++++++++++++
 backend/app/utils/request_locale.py          | 28 +++++++++++++++++
 frontend/src/api/index.js                    |  7 ++++-
 frontend/src/components/Step2EnvSetup.vue    | 10 +++---
 frontend/src/components/Step3Simulation.vue  | 14 +++++----
 frontend/src/components/Step5Interaction.vue | 12 ++++---
 frontend/src/i18n/index.js                   |  5 +++
 frontend/src/i18n/locales/en.js              | 20 ++++++++++++
 frontend/src/i18n/locales/zh.js              | 20 ++++++++++++
 frontend/src/views/Process.vue               | 14 +++++----
 14 files changed, 196 insertions(+), 44 deletions(-)
 create mode 100644 backend/app/utils/error_messages.py
 create mode 100644 backend/app/utils/request_locale.py

diff --git a/backend/app/api/graph.py b/backend/app/api/graph.py
index 12ff1ba2..7b3d8540 100644
--- a/backend/app/api/graph.py
+++ b/backend/app/api/graph.py
@@ -10,6 +10,7 @@
 
 from . import graph_bp
 from ..config import Config
+from ..utils.request_locale import get_request_locale
 from ..services.ontology_generator import OntologyGenerator
 from ..services.graph_builder import GraphBuilderService
 from ..services.text_processor import TextProcessor
@@ -211,13 +212,15 @@ def generate_ontology():
         ProjectManager.save_extracted_text(project.project_id, all_text)
         logger.info(f"文本提取完成，共 {len(all_text)} 字符")
         
-        # 生成本体
-        logger.info("调用 LLM 生成本体定义...")
+        # 生成本体（传递用户语言，LLM 输出与该语言一致）
+        locale = get_request_locale()
+        logger.info(f"调用 LLM 生成本体定义... (locale={locale})")
         generator = OntologyGenerator()
         ontology = generator.generate(
             document_texts=document_texts,
             simulation_requirement=simulation_requirement,
-            additional_context=additional_context if additional_context else None
+            additional_context=additional_context if additional_context else None,
+            language=locale
         )
         
         # 保存本体到项目
diff --git a/backend/app/api/report.py b/backend/app/api/report.py
index e05c73c3..f3b055bf 100644
--- a/backend/app/api/report.py
+++ b/backend/app/api/report.py
@@ -10,6 +10,8 @@
 
 from . import report_bp
 from ..config import Config
+from ..utils.request_locale import get_request_locale
+from ..utils.error_messages import get_error_message
 from ..services.report_agent import ReportAgent, ReportManager, ReportStatus
 from ..services.simulation_manager import SimulationManager
 from ..models.project import ProjectManager
@@ -105,6 +107,9 @@ def generate_report():
                 "error": "缺少模拟需求描述"
             }), 400
         
+        # 获取用户语言偏好（在启动线程前捕获，线程内 request 可能不可用）
+        report_language = get_request_locale()
+        
         # 提前生成 report_id，以便立即返回给前端
         import uuid
         report_id = f"report_{uuid.uuid4().hex[:12]}"
@@ -130,11 +135,12 @@ def run_generate():
                     message="初始化Report Agent..."
                 )
                 
-                # 创建Report Agent
+                # 创建Report Agent（传入用户语言，报告和对话均使用该语言）
                 agent = ReportAgent(
                     graph_id=graph_id,
                     simulation_id=simulation_id,
-                    simulation_requirement=simulation_requirement
+                    simulation_requirement=simulation_requirement,
+                    report_language=report_language
                 )
                 
                 # 进度回调
@@ -498,16 +504,17 @@ def chat_with_report_agent():
         message = data.get('message')
         chat_history = data.get('chat_history', [])
         
+        report_lang = get_request_locale()
         if not simulation_id:
             return jsonify({
                 "success": False,
-                "error": "请提供 simulation_id"
+                "error": get_error_message('missing_simulation_id', report_lang)
             }), 400
-        
+
         if not message:
             return jsonify({
                 "success": False,
-                "error": "请提供 message"
+                "error": get_error_message('missing_message', report_lang)
             }), 400
         
         # 获取模拟和项目信息
@@ -517,30 +524,32 @@ def chat_with_report_agent():
         if not state:
             return jsonify({
                 "success": False,
-                "error": f"模拟不存在: {simulation_id}"
+                "error": f"{get_error_message('simulation_not_found', report_lang)}: {simulation_id}"
             }), 404
-        
+
         project = ProjectManager.get_project(state.project_id)
         if not project:
             return jsonify({
                 "success": False,
-                "error": f"项目不存在: {state.project_id}"
+                "error": f"{get_error_message('project_not_found', report_lang)}: {state.project_id}"
             }), 404
-        
+
         graph_id = state.graph_id or project.graph_id
         if not graph_id:
             return jsonify({
                 "success": False,
-                "error": "缺少图谱ID"
+                "error": get_error_message('missing_graph_id', report_lang)
             }), 400
         
         simulation_requirement = project.simulation_requirement or ""
+        report_language = report_lang
         
-        # 创建Agent并进行对话
+        # 创建Agent并进行对话（使用用户选择的语言）
         agent = ReportAgent(
             graph_id=graph_id,
             simulation_id=simulation_id,
-            simulation_requirement=simulation_requirement
+            simulation_requirement=simulation_requirement,
+            report_language=report_language
         )
         
         result = agent.chat(message=message, chat_history=chat_history)
diff --git a/backend/app/services/ontology_generator.py b/backend/app/services/ontology_generator.py
index 2d3e39bd..f5ba9558 100644
--- a/backend/app/services/ontology_generator.py
+++ b/backend/app/services/ontology_generator.py
@@ -168,7 +168,8 @@ def generate(
         self,
         document_texts: List[str],
         simulation_requirement: str,
-        additional_context: Optional[str] = None
+        additional_context: Optional[str] = None,
+        language: str = 'zh'
     ) -> Dict[str, Any]:
         """
         生成本体定义
@@ -177,10 +178,20 @@ def generate(
             document_texts: 文档文本列表
             simulation_requirement: 模拟需求描述
             additional_context: 额外上下文
+            language: 输出语言 ('zh' 或 'en')，用于 analysis_summary 等字段
             
         Returns:
             本体定义（entity_types, edge_types等）
         """
+        self._language = language
+        # 语言指令：让 LLM 的 analysis_summary 等自然语言输出与用户语言一致
+        lang_instruction = (
+            "\n\n**语言要求**：analysis_summary 必须使用中文撰写。"
+            if language == 'zh' else
+            "\n\n**Language requirement**: You MUST write analysis_summary in English."
+        )
+        system_prompt = ONTOLOGY_SYSTEM_PROMPT + lang_instruction
+        
         # 构建用户消息
         user_message = self._build_user_message(
             document_texts, 
@@ -189,7 +200,7 @@ def generate(
         )
         
         messages = [
-            {"role": "system", "content": ONTOLOGY_SYSTEM_PROMPT},
+            {"role": "system", "content": system_prompt},
             {"role": "user", "content": user_message}
         ]
         
diff --git a/backend/app/services/report_agent.py b/backend/app/services/report_agent.py
index 02ca5bdc..dace1b19 100644
--- a/backend/app/services/report_agent.py
+++ b/backend/app/services/report_agent.py
@@ -587,6 +587,10 @@ def to_dict(self) -> Dict[str, Any]:
 
 注意：sections数组最少2个，最多5个元素！"""
 
+# 语言指令（根据 report_language 动态追加到各 prompt）
+LANGUAGE_INSTRUCTION_ZH = "\n\n【语言要求】报告标题、摘要、章节标题和内容描述必须全部使用中文撰写。"
+LANGUAGE_INSTRUCTION_EN = "\n\n【Language requirement】You MUST write the report title, summary, section titles and all content in English only. Think and respond in English."
+
 PLAN_USER_PROMPT_TEMPLATE = """\
 【预测场景设定】
 我们向模拟世界注入的变量（模拟需求）：{simulation_requirement}
@@ -653,8 +657,7 @@ def to_dict(self) -> Dict[str, Any]:
 
 3. 【语言一致性 - 引用内容必须翻译为报告语言】
    - 工具返回的内容可能包含英文或中英文混杂的表述
-   - 如果模拟需求和材料原文是中文的，报告必须全部使用中文撰写
-   - 当你引用工具返回的英文或中英混杂内容时，必须将其翻译为流畅的中文后再写入报告
+   - {language_consistency_rule}
    - 翻译时保持原意不变，确保表述自然通顺
    - 这一规则同时适用于正文和引用块（> 格式）中的内容
 
@@ -851,7 +854,9 @@ def to_dict(self) -> Dict[str, Any]:
 【回答风格】
 - 简洁直接，不要长篇大论
 - 使用 > 格式引用关键内容
-- 优先给出结论，再解释原因"""
+- 优先给出结论，再解释原因
+
+【语言】{chat_language_instruction}"""
 
 CHAT_OBSERVATION_SUFFIX = "\n\n请简洁回答问题。"
 
@@ -886,7 +891,8 @@ def __init__(
         simulation_id: str,
         simulation_requirement: str,
         llm_client: Optional[LLMClient] = None,
-        zep_tools: Optional[ZepToolsService] = None
+        zep_tools: Optional[ZepToolsService] = None,
+        report_language: str = 'zh'
     ):
         """
         初始化Report Agent
@@ -897,10 +903,12 @@ def __init__(
             simulation_requirement: 模拟需求描述
             llm_client: LLM客户端（可选）
             zep_tools: Zep工具服务（可选）
+            report_language: 报告输出语言 'zh' 或 'en'，LLM 将用该语言思考和生成
         """
         self.graph_id = graph_id
         self.simulation_id = simulation_id
         self.simulation_requirement = simulation_requirement
+        self.report_language = report_language if report_language in ('zh', 'en') else 'zh'
         
         self.llm = llm_client or LLMClient()
         self.zep_tools = zep_tools or ZepToolsService()
@@ -1162,7 +1170,8 @@ def plan_outline(
         if progress_callback:
             progress_callback("planning", 30, "正在生成报告大纲...")
         
-        system_prompt = PLAN_SYSTEM_PROMPT
+        lang_inst = LANGUAGE_INSTRUCTION_ZH if self.report_language == 'zh' else LANGUAGE_INSTRUCTION_EN
+        system_prompt = PLAN_SYSTEM_PROMPT + lang_inst
         user_prompt = PLAN_USER_PROMPT_TEMPLATE.format(
             simulation_requirement=self.simulation_requirement,
             total_nodes=context.get('graph_statistics', {}).get('total_nodes', 0),
@@ -1251,9 +1260,15 @@ def _generate_section_react(
         if self.report_logger:
             self.report_logger.log_section_start(section.title, section_index)
         
+        lang_rule = (
+            "报告必须全部使用中文撰写。当你引用工具返回的英文或中英混杂内容时，必须将其翻译为流畅的中文后再写入报告。"
+            if self.report_language == 'zh' else
+            "The report MUST be written entirely in English. When you quote content from tools that is in Chinese or mixed language, translate it into fluent English before including it in the report."
+        )
         system_prompt = SECTION_SYSTEM_PROMPT_TEMPLATE.format(
             report_title=outline.title,
             report_summary=outline.summary,
+            language_consistency_rule=lang_rule,
             simulation_requirement=self.simulation_requirement,
             section_title=section.title,
             tools_description=self._get_tools_description(),
@@ -1800,10 +1815,12 @@ def chat(
         except Exception as e:
             logger.warning(f"获取报告内容失败: {e}")
         
+        chat_lang = "回复必须使用中文。" if self.report_language == 'zh' else "You MUST respond in English only."
         system_prompt = CHAT_SYSTEM_PROMPT_TEMPLATE.format(
             simulation_requirement=self.simulation_requirement,
             report_content=report_content if report_content else "（暂无报告）",
             tools_description=self._get_tools_description(),
+            chat_language_instruction=chat_lang,
         )
 
         # 构建消息
diff --git a/backend/app/utils/error_messages.py b/backend/app/utils/error_messages.py
new file mode 100644
index 00000000..857c683e
--- /dev/null
+++ b/backend/app/utils/error_messages.py
@@ -0,0 +1,26 @@
+"""
+Error messages in zh/en for API responses.
+"""
+
+MESSAGES = {
+    'zh': {
+        'missing_simulation_id': '请提供 simulation_id',
+        'missing_message': '请提供 message',
+        'simulation_not_found': '模拟不存在',
+        'project_not_found': '项目不存在',
+        'missing_graph_id': '缺少图谱ID',
+    },
+    'en': {
+        'missing_simulation_id': 'Please provide simulation_id',
+        'missing_message': 'Please provide message',
+        'simulation_not_found': 'Simulation not found',
+        'project_not_found': 'Project not found',
+        'missing_graph_id': 'Missing graph ID',
+    },
+}
+
+
+def get_error_message(key: str, locale: str = 'zh') -> str:
+    """Return localized error message. Fallback to zh if key missing for locale."""
+    lang = 'en' if locale == 'en' else 'zh'
+    return MESSAGES.get(lang, MESSAGES['zh']).get(key, MESSAGES['zh'].get(key, str(key)))
diff --git a/backend/app/utils/request_locale.py b/backend/app/utils/request_locale.py
new file mode 100644
index 00000000..c0fa5892
--- /dev/null
+++ b/backend/app/utils/request_locale.py
@@ -0,0 +1,28 @@
+"""
+从请求中获取用户选择的语言（用于 LLM 输出语言）
+支持 X-Locale 请求头或 JSON body 中的 locale 参数
+"""
+from flask import request
+
+
+def get_request_locale(default: str = 'zh') -> str:
+    """
+    从当前请求中获取语言偏好。
+    
+    - X-Locale: en 或 zh
+    - 或 request.get_json().get('locale')
+    - 或 request.form.get('locale')
+    
+    Returns:
+        'en' 或 'zh'
+    """
+    locale = request.headers.get('X-Locale', '').strip().lower()
+    if not locale and request.is_json:
+        data = request.get_json(silent=True) or {}
+        locale = (data.get('locale') or data.get('language') or '').strip().lower()
+    if not locale:
+        locale = (request.form.get('locale') or request.form.get('language') or '').strip().lower()
+    
+    if locale in ('en', 'zh'):
+        return locale
+    return default
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index e2d9465b..a8857c1b 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import { getApiLocale } from '../i18n'
 
 // 创建axios实例
 const service = axios.create({
@@ -9,9 +10,13 @@ const service = axios.create({
   }
 })
 
-// 请求拦截器
+// 请求拦截器 - 添加用户选择的语言，供后端 LLM 使用
 service.interceptors.request.use(
   config => {
+    const locale = getApiLocale()
+    if (locale) {
+      config.headers['X-Locale'] = locale
+    }
     return config
   },
   error => {
diff --git a/frontend/src/components/Step2EnvSetup.vue b/frontend/src/components/Step2EnvSetup.vue
index d1e82789..b7d4bcaa 100644
--- a/frontend/src/components/Step2EnvSetup.vue
+++ b/frontend/src/components/Step2EnvSetup.vue
@@ -633,6 +633,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { 
   prepareSimulation, 
   getPrepareStatus, 
@@ -649,6 +650,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['go-back', 'next-step', 'add-log', 'update-status'])
+const { t } = useI18n()
 
 // State
 const phase = ref(0) // 0: 初始化, 1: 生成人设, 2: 生成配置, 3: 完成
@@ -768,7 +770,7 @@ const selectProfile = (profile) => {
 // 自动开始准备模拟
 const startPrepareSimulation = async () => {
   if (!props.simulationId) {
-    addLog('错误：缺少 simulationId')
+    addLog(t('errors.missingSimulationId'))
     emit('update-status', 'error')
     return
   }
@@ -812,7 +814,7 @@ const startPrepareSimulation = async () => {
       // 开始实时获取 Profiles
       startProfilesPolling()
     } else {
-      addLog(`准备失败: ${res.error || '未知错误'}`)
+      addLog(`${t('errors.prepareFailed')}: ${res.error || t('errors.unknown')}`)
       emit('update-status', 'error')
     }
   } catch (err) {
@@ -895,7 +897,7 @@ const pollPrepareStatus = async () => {
         stopProfilesPolling()
         await loadPreparedData()
       } else if (data.status === 'failed') {
-        addLog(`✗ 准备失败: ${data.error || '未知错误'}`)
+        addLog(`✗ ${t('errors.prepareFailed')}: ${data.error || t('errors.unknown')}`)
         stopPolling()
         stopProfilesPolling()
       }
@@ -1050,7 +1052,7 @@ const loadPreparedData = async () => {
       }
     }
   } catch (err) {
-    addLog(`加载配置失败: ${err.message}`)
+    addLog(`${t('errors.loadFailed')}: ${err.message}`)
     emit('update-status', 'error')
   }
 }
diff --git a/frontend/src/components/Step3Simulation.vue b/frontend/src/components/Step3Simulation.vue
index a6a133db..d05c85c2 100644
--- a/frontend/src/components/Step3Simulation.vue
+++ b/frontend/src/components/Step3Simulation.vue
@@ -288,6 +288,7 @@
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { 
   startSimulation, 
   stopSimulation,
@@ -311,6 +312,7 @@ const props = defineProps({
 const emit = defineEmits(['go-back', 'next-step', 'add-log', 'update-status'])
 
 const router = useRouter()
+const { t } = useI18n()
 
 // State
 const isGeneratingReport = ref(false)
@@ -379,7 +381,7 @@ const resetAllState = () => {
 // 启动模拟
 const doStartSimulation = async () => {
   if (!props.simulationId) {
-    addLog('错误：缺少 simulationId')
+    addLog(t('errors.missingSimulationId'))
     return
   }
   
@@ -421,8 +423,8 @@ const doStartSimulation = async () => {
       startStatusPolling()
       startDetailPolling()
     } else {
-      startError.value = res.error || '启动失败'
-      addLog(`✗ 启动失败: ${res.error || '未知错误'}`)
+      startError.value = res.error || t('errors.startFailed')
+      addLog(`✗ ${t('errors.startFailed')}: ${res.error || t('errors.unknown')}`)
       emit('update-status', 'error')
     }
   } catch (err) {
@@ -450,7 +452,7 @@ const handleStopSimulation = async () => {
       stopPolling()
       emit('update-status', 'completed')
     } else {
-      addLog(`停止失败: ${res.error || '未知错误'}`)
+      addLog(`${t('errors.stopFailed')}: ${res.error || t('errors.unknown')}`)
     }
   } catch (err) {
     addLog(`停止异常: ${err.message}`)
@@ -640,7 +642,7 @@ const formatActionTime = (timestamp) => {
 
 const handleNextStep = async () => {
   if (!props.simulationId) {
-    addLog('错误：缺少 simulationId')
+    addLog(t('errors.missingSimulationId'))
     return
   }
   
@@ -665,7 +667,7 @@ const handleNextStep = async () => {
       // 跳转到报告页面
       router.push({ name: 'Report', params: { reportId } })
     } else {
-      addLog(`✗ 启动报告生成失败: ${res.error || '未知错误'}`)
+      addLog(`✗ ${t('errors.reportGenFailed')}: ${res.error || t('errors.unknown')}`)
       isGeneratingReport.value = false
     }
   } catch (err) {
diff --git a/frontend/src/components/Step5Interaction.vue b/frontend/src/components/Step5Interaction.vue
index afd58dfb..53cec208 100644
--- a/frontend/src/components/Step5Interaction.vue
+++ b/frontend/src/components/Step5Interaction.vue
@@ -412,6 +412,7 @@
 
 <script setup>
 import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { chatWithReport, getReport, getAgentLog } from '../api/report'
 import { interviewAgents, getSimulationProfilesRealtime } from '../api/simulation'
 
@@ -421,6 +422,7 @@ const props = defineProps({
 })
 
 const emit = defineEmits(['add-log', 'update-status'])
+const { t } = useI18n()
 
 // State
 const activeTab = ref('chat')
@@ -662,7 +664,7 @@ const sendMessage = async () => {
       await sendToAgent(message)
     }
   } catch (err) {
-    addLog(`发送失败: ${err.message}`)
+    addLog(`${t('errors.sendFailed')}: ${err.message}`)
     chatHistory.value.push({
       role: 'assistant',
       content: `抱歉，发生了错误: ${err.message}`,
@@ -862,7 +864,7 @@ const submitSurvey = async () => {
       throw new Error(res.error || '请求失败')
     }
   } catch (err) {
-    addLog(`问卷发送失败: ${err.message}`)
+    addLog(`${t('errors.surveySendFailed')}: ${err.message}`)
   } finally {
     isSurveying.value = false
   }
@@ -882,7 +884,7 @@ const loadReportData = async () => {
       await loadAgentLogs()
     }
   } catch (err) {
-    addLog(`加载报告失败: ${err.message}`)
+    addLog(`${t('errors.loadReportFailed')}: ${err.message}`)
   }
 }
 
@@ -907,7 +909,7 @@ const loadAgentLogs = async () => {
       addLog('报告数据加载完成')
     }
   } catch (err) {
-    addLog(`加载报告日志失败: ${err.message}`)
+    addLog(`${t('errors.loadReportLogFailed')}: ${err.message}`)
   }
 }
 
@@ -921,7 +923,7 @@ const loadProfiles = async () => {
       addLog(`加载了 ${profiles.value.length} 个模拟个体`)
     }
   } catch (err) {
-    addLog(`加载模拟个体失败: ${err.message}`)
+    addLog(`${t('errors.loadProfilesFailed')}: ${err.message}`)
   }
 }
 
diff --git a/frontend/src/i18n/index.js b/frontend/src/i18n/index.js
index 43ba3252..0cb01a77 100644
--- a/frontend/src/i18n/index.js
+++ b/frontend/src/i18n/index.js
@@ -18,6 +18,11 @@ export function setStoredLocale(locale) {
   } catch (_) {}
 }
 
+/** Get locale for API requests (en or zh) */
+export function getApiLocale() {
+  return getStoredLocale()
+}
+
 const i18n = createI18n({
   legacy: false, // Use Composition API mode
   locale: getStoredLocale(),
diff --git a/frontend/src/i18n/locales/en.js b/frontend/src/i18n/locales/en.js
index ce2e46a0..c630091b 100644
--- a/frontend/src/i18n/locales/en.js
+++ b/frontend/src/i18n/locales/en.js
@@ -10,6 +10,26 @@ export default {
     none: 'None',
     unknown: 'Unknown',
   },
+  errors: {
+    missingSimulationId: 'Missing simulationId',
+    unknown: 'Unknown error',
+    initFailed: 'Project initialization failed',
+    loadFailed: 'Failed to load',
+    loadProjectFailed: 'Failed to load project',
+    ontologyFailed: 'Ontology generation failed',
+    buildGraphFailed: 'Failed to start graph build',
+    networkError: 'Network error',
+    timeout: 'Request timeout',
+    startFailed: 'Start failed',
+    stopFailed: 'Stop failed',
+    prepareFailed: 'Preparation failed',
+    reportGenFailed: 'Failed to start report generation',
+    sendFailed: 'Send failed',
+    loadReportFailed: 'Failed to load report',
+    loadProfilesFailed: 'Failed to load simulation individuals',
+    loadReportLogFailed: 'Failed to load report log',
+    surveySendFailed: 'Survey send failed',
+  },
   nav: {
     visitGithub: 'Visit our GitHub',
     language: 'Language',
diff --git a/frontend/src/i18n/locales/zh.js b/frontend/src/i18n/locales/zh.js
index d1c2abc7..3c74248c 100644
--- a/frontend/src/i18n/locales/zh.js
+++ b/frontend/src/i18n/locales/zh.js
@@ -10,6 +10,26 @@ export default {
     none: '无',
     unknown: '未知',
   },
+  errors: {
+    missingSimulationId: '缺少 simulationId',
+    unknown: '未知错误',
+    initFailed: '项目初始化失败',
+    loadFailed: '加载失败',
+    loadProjectFailed: '加载项目失败',
+    ontologyFailed: '本体生成失败',
+    buildGraphFailed: '启动图谱构建失败',
+    networkError: '网络错误',
+    timeout: '请求超时',
+    startFailed: '启动失败',
+    stopFailed: '停止失败',
+    prepareFailed: '准备失败',
+    reportGenFailed: '启动报告生成失败',
+    sendFailed: '发送失败',
+    loadReportFailed: '加载报告失败',
+    loadProfilesFailed: '加载模拟个体失败',
+    loadReportLogFailed: '加载报告日志失败',
+    surveySendFailed: '问卷发送失败',
+  },
   nav: {
     visitGithub: '访问我们的Github主页',
     language: '语言',
diff --git a/frontend/src/views/Process.vue b/frontend/src/views/Process.vue
index 2d2d3cc1..f6764215 100644
--- a/frontend/src/views/Process.vue
+++ b/frontend/src/views/Process.vue
@@ -414,12 +414,14 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { generateOntology, getProject, buildGraph, getTaskStatus, getGraphData } from '../api/graph'
 import { getPendingUpload, clearPendingUpload } from '../store/pendingUpload'
 import * as d3 from 'd3'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 
 // 当前项目ID（可能从'new'变为实际ID）
 const currentProjectId = ref(route.params.projectId)
@@ -608,11 +610,11 @@ const handleNewProject = async () => {
       // 自动开始图谱构建
       await startBuildGraph()
     } else {
-      error.value = response.error || '本体生成失败'
+      error.value = response.error || t('errors.ontologyFailed')
     }
   } catch (err) {
     console.error('Handle new project error:', err)
-    error.value = '项目初始化失败: ' + (err.message || '未知错误')
+    error.value = t('errors.initFailed') + ': ' + (err.message || t('errors.unknown'))
   } finally {
     loading.value = false
   }
@@ -645,11 +647,11 @@ const loadProject = async () => {
         await loadGraph(response.data.graph_id)
       }
     } else {
-      error.value = response.error || '加载项目失败'
+      error.value = response.error || t('errors.loadProjectFailed')
     }
   } catch (err) {
     console.error('Load project error:', err)
-    error.value = '加载项目失败: ' + (err.message || '未知错误')
+    error.value = t('errors.loadProjectFailed') + ': ' + (err.message || t('errors.unknown'))
   } finally {
     loading.value = false
   }
@@ -697,12 +699,12 @@ const startBuildGraph = async () => {
       // 启动任务状态轮询
       startPollingTask(taskId)
     } else {
-      error.value = response.error || '启动图谱构建失败'
+      error.value = response.error || t('errors.buildGraphFailed')
       buildProgress.value = null
     }
   } catch (err) {
     console.error('Build graph error:', err)
-    error.value = '启动图谱构建失败: ' + (err.message || '未知错误')
+    error.value = t('errors.buildGraphFailed') + ': ' + (err.message || t('errors.unknown'))
     buildProgress.value = null
   }
 }