From d45b05bc385d40d7ad9669a9a818a75c7832858a Mon Sep 17 00:00:00 2001
From: max <milk333445@gmail.com>
Date: Tue, 23 Jun 2026 00:33:02 +0800
Subject: [PATCH 1/2] feat : translate

---
 .../src/components/layout/AppSidebar.vue      |  42 +-
 .../src/components/layout/StatusBar.vue       |  30 +-
 apps/frontend_llmops/src/i18n/index.ts        |  23 +
 apps/frontend_llmops/src/i18n/locales/en.ts   | 956 ++++++++++++++++++
 .../frontend_llmops/src/i18n/locales/zh-TW.ts | 923 +++++++++++++++++
 apps/frontend_llmops/src/main.ts              |   2 +
 apps/frontend_llmops/src/router/index.ts      |  30 +-
 apps/frontend_llmops/src/views/ModelsView.vue |  24 +-
 .../src/views/OverviewView.vue                |  46 +-
 .../src/views/PlaygroundView.vue              |   2 +-
 .../src/views/RequestsView.vue                |  40 +-
 .../frontend_llmops/src/views/TrafficView.vue |  64 +-
 docs/eval-dataset-inspector-design.md         |  56 +
 docs/routing-strategies.md                    | 206 ++++
 docs/vllm-kv-cache-cross-instance-design.md   | 176 ++++
 docs/vllm-kv-cache-sharing-howto.md           | 466 +++++++++
 docs/vllm-model-serving-load-balancing.md     | 281 +++++
 17 files changed, 3236 insertions(+), 131 deletions(-)
 create mode 100644 apps/frontend_llmops/src/i18n/index.ts
 create mode 100644 apps/frontend_llmops/src/i18n/locales/en.ts
 create mode 100644 apps/frontend_llmops/src/i18n/locales/zh-TW.ts
 create mode 100644 docs/eval-dataset-inspector-design.md
 create mode 100644 docs/routing-strategies.md
 create mode 100644 docs/vllm-kv-cache-cross-instance-design.md
 create mode 100644 docs/vllm-kv-cache-sharing-howto.md
 create mode 100644 docs/vllm-model-serving-load-balancing.md

diff --git a/apps/frontend_llmops/src/components/layout/AppSidebar.vue b/apps/frontend_llmops/src/components/layout/AppSidebar.vue
index a327bd8..d056968 100644
--- a/apps/frontend_llmops/src/components/layout/AppSidebar.vue
+++ b/apps/frontend_llmops/src/components/layout/AppSidebar.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { RouterLink, useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import {
   Activity,
   ArrowLeftRight,
@@ -24,6 +25,7 @@ import type { ModelState } from '@/types/api'
 
 const route = useRoute()
 const models = useModelsStore()
+const { t } = useI18n()
 
 // Roster grouped by model group (dedupes multi-instance groups), with a
 // ready/total count and a worst-wins status dot.
@@ -49,23 +51,23 @@ const roster = computed(() => {
   })
 })
 
-const nav = [
-  { to: '/', label: '總覽', icon: LayoutDashboard },
-  { to: '/models', label: '模型', icon: Server },
-  { to: '/traffic', label: '流量', icon: ArrowLeftRight },
-  { to: '/requests', label: '請求', icon: Receipt },
-  { to: '/monitoring', label: '監控', icon: LineChart },
-  { to: '/playground', label: '測試台', icon: TerminalSquare },
-  { to: '/benchmark', label: '壓測', icon: Gauge },
-  { to: '/eval', label: '評測', icon: ClipboardCheck },
-  { to: '/library', label: '模型庫', icon: Package },
-  { to: '/lora-library', label: 'LoRA 庫', icon: Layers },
-  { to: '/datasets', label: '資料集庫', icon: Database },
-  { to: '/keys', label: 'API 金鑰', icon: KeyRound },
-  { to: '/usage', label: '使用指南', icon: BookOpen },
-  { to: '/resources', label: '資源', icon: Cpu },
-  { to: '/activity', label: '活動', icon: Activity },
-]
+const nav = computed(() => [
+  { to: '/', label: t('sidebar.overview'), icon: LayoutDashboard },
+  { to: '/models', label: t('sidebar.models'), icon: Server },
+  { to: '/traffic', label: t('sidebar.traffic'), icon: ArrowLeftRight },
+  { to: '/requests', label: t('sidebar.requests'), icon: Receipt },
+  { to: '/monitoring', label: t('sidebar.monitoring'), icon: LineChart },
+  { to: '/playground', label: t('sidebar.playground'), icon: TerminalSquare },
+  { to: '/benchmark', label: t('sidebar.benchmark'), icon: Gauge },
+  { to: '/eval', label: t('sidebar.eval'), icon: ClipboardCheck },
+  { to: '/library', label: t('sidebar.library'), icon: Package },
+  { to: '/lora-library', label: t('sidebar.loraLibrary'), icon: Layers },
+  { to: '/datasets', label: t('sidebar.datasets'), icon: Database },
+  { to: '/keys', label: t('sidebar.keys'), icon: KeyRound },
+  { to: '/usage', label: t('sidebar.usage'), icon: BookOpen },
+  { to: '/resources', label: t('sidebar.resources'), icon: Cpu },
+  { to: '/activity', label: t('sidebar.activity'), icon: Activity },
+])
 </script>
 
 <template>
@@ -77,7 +79,7 @@ const nav = [
       <img src="/icon2_rb.png" alt="vLLMux" class="size-11 object-contain" />
       <div class="leading-tight">
         <p class="text-sm font-semibold">vLLMux</p>
-        <p class="text-[10px] uppercase tracking-widest text-muted-foreground">控制台</p>
+        <p class="text-[10px] uppercase tracking-widest text-muted-foreground">{{ $t('sidebar.console') }}</p>
       </div>
     </div>
 
@@ -109,7 +111,7 @@ const nav = [
     <!-- Footer: live model roster -->
     <div class="border-t border-border/70 px-4 py-3">
       <p class="mb-2 text-[10px] font-medium uppercase tracking-widest text-muted-foreground">
-        模型 · {{ models.readyCount }}/{{ models.total }} 就緒
+        {{ $t('sidebar.modelCount', { ready: models.readyCount, total: models.total }) }}
       </p>
       <ul class="max-h-40 space-y-1 overflow-y-auto pr-1">
         <li
@@ -123,7 +125,7 @@ const nav = [
             {{ g.ready }}/{{ g.total }}
           </span>
         </li>
-        <li v-if="!models.total" class="text-xs text-muted-foreground/60">尚未設定模型</li>
+        <li v-if="!models.total" class="text-xs text-muted-foreground/60">{{ $t('sidebar.noModels') }}</li>
       </ul>
     </div>
   </aside>
diff --git a/apps/frontend_llmops/src/components/layout/StatusBar.vue b/apps/frontend_llmops/src/components/layout/StatusBar.vue
index 54a722f..5d99953 100644
--- a/apps/frontend_llmops/src/components/layout/StatusBar.vue
+++ b/apps/frontend_llmops/src/components/layout/StatusBar.vue
@@ -1,32 +1,39 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
-import { Moon, Sun, Wifi, WifiOff } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
+import { Languages, Moon, Sun, Wifi, WifiOff } from '@lucide/vue'
+import { setLocale, currentLocale } from '@/i18n'
 import { useModelsStore } from '@/stores/models'
 import { useResourcesStore } from '@/stores/resources'
 import { useTheme } from '@/composables/useTheme'
 import { formatPercent, timeAgo } from '@/lib/utils'
 import Button from '@/components/ui/Button.vue'
 
+const { t } = useI18n()
 const route = useRoute()
 const models = useModelsStore()
 const resources = useResourcesStore()
 const { isDark, toggle } = useTheme()
 
-const title = computed(() => (route.meta.title as string) ?? 'Overview')
+const title = computed(() => t('sidebar.' + ((route.meta.title as string) ?? 'overview')))
 
 const connMeta = computed(() => {
   switch (models.conn) {
     case 'live':
-      return { label: 'Live', cls: 'text-status-ready', icon: Wifi }
+      return { label: t('statusBar.live'), cls: 'text-status-ready', icon: Wifi }
     case 'polling':
-      return { label: 'Polling', cls: 'text-status-starting', icon: Wifi }
+      return { label: t('statusBar.polling'), cls: 'text-status-starting', icon: Wifi }
     case 'connecting':
-      return { label: 'Connecting', cls: 'text-muted-foreground', icon: Wifi }
+      return { label: t('statusBar.connecting'), cls: 'text-muted-foreground', icon: Wifi }
     default:
-      return { label: 'Offline', cls: 'text-status-failed', icon: WifiOff }
+      return { label: t('statusBar.offline'), cls: 'text-status-failed', icon: WifiOff }
   }
 })
+
+function toggleLocale() {
+  setLocale(currentLocale() === 'en' ? 'zh-TW' : 'en')
+}
 </script>
 
 <template>
@@ -42,7 +49,7 @@ const connMeta = computed(() => {
         class="hidden items-center gap-2 rounded-md border border-border/60 bg-background/40 px-2.5 py-1 sm:flex"
         title="Average GPU utilization"
       >
-        <span class="text-xs text-muted-foreground">GPU</span>
+        <span class="text-xs text-muted-foreground">{{ $t('statusBar.gpu') }}</span>
         <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
           <div
             class="h-full rounded-full bg-[var(--chart-1)] transition-all"
@@ -58,7 +65,7 @@ const connMeta = computed(() => {
       >
         <span class="size-1.5 rounded-full bg-status-ready" />
         <span class="tabular font-medium">{{ models.readyCount }}/{{ models.total }}</span>
-        <span class="text-muted-foreground">ready</span>
+        <span class="text-muted-foreground">{{ $t('statusBar.ready') }}</span>
       </div>
 
       <!-- Connection state -->
@@ -71,10 +78,15 @@ const connMeta = computed(() => {
       </div>
 
       <!-- Theme toggle -->
-      <Button variant="ghost" size="icon-sm" :title="isDark ? 'Switch to light' : 'Switch to dark'" @click="toggle">
+      <Button variant="ghost" size="icon-sm" :title="isDark ? $t('statusBar.switchLight') : $t('statusBar.switchDark')" @click="toggle">
         <Moon v-if="!isDark" class="size-4" />
         <Sun v-else class="size-4" />
       </Button>
+
+      <!-- Language toggle -->
+      <Button variant="ghost" size="icon-sm" :title="currentLocale() === 'en' ? '切換至中文' : 'Switch to English'" @click="toggleLocale">
+        <Languages class="size-4" />
+      </Button>
     </div>
   </header>
 </template>
diff --git a/apps/frontend_llmops/src/i18n/index.ts b/apps/frontend_llmops/src/i18n/index.ts
new file mode 100644
index 0000000..a875349
--- /dev/null
+++ b/apps/frontend_llmops/src/i18n/index.ts
@@ -0,0 +1,23 @@
+import { createI18n } from 'vue-i18n'
+import en from './locales/en'
+import zhTW from './locales/zh-TW'
+
+const STORAGE_KEY = 'llmops-locale'
+
+const i18n = createI18n({
+  legacy: false,
+  locale: localStorage.getItem(STORAGE_KEY) || 'en',
+  fallbackLocale: 'en',
+  messages: { en, 'zh-TW': zhTW },
+})
+
+export function setLocale(locale: 'en' | 'zh-TW') {
+  ;(i18n.global.locale as unknown as { value: string }).value = locale
+  localStorage.setItem(STORAGE_KEY, locale)
+}
+
+export function currentLocale(): string {
+  return (i18n.global.locale as unknown as { value: string }).value
+}
+
+export default i18n
diff --git a/apps/frontend_llmops/src/i18n/locales/en.ts b/apps/frontend_llmops/src/i18n/locales/en.ts
new file mode 100644
index 0000000..9979c2c
--- /dev/null
+++ b/apps/frontend_llmops/src/i18n/locales/en.ts
@@ -0,0 +1,956 @@
+export default {
+  // ---- Common / shared ----
+  common: {
+    refresh: 'Refresh',
+    delete: 'Delete',
+    cancel: 'Cancel',
+    save: 'Save',
+    create: 'Create',
+    add: 'Add',
+    remove: 'Remove',
+    edit: 'Edit',
+    close: 'Close',
+    done: 'Done',
+    loading: 'Loading…',
+    download: 'Download',
+    retry: 'Retry',
+    start: 'Start',
+    stop: 'Stop',
+    clear: 'Clear',
+    clearAll: 'Clear all',
+    search: 'Search',
+    all: 'All',
+    none: 'None',
+    model: 'Model',
+    models: 'Models',
+    status: 'Status',
+    latency: 'Latency',
+    tokens: 'Tokens',
+    time: 'Time',
+    path: 'Path',
+    cost: 'Cost',
+    key: 'Key',
+    name: 'Name',
+    ready: 'ready',
+    failed: 'failed',
+    stopped: 'stopped',
+    starting: 'starting',
+    stopping: 'stopping',
+    noData: 'No data.',
+    errorsOnly: 'Errors only',
+    allModels: 'All models',
+    preDownload: 'Pre-download',
+    manage: 'Manage →',
+    viewAll: 'All →',
+    more: 'more',
+    groups: 'groups',
+    embedding: 'Embedding',
+    reranking: 'Reranking',
+    completed: 'Completed',
+    running: 'Running',
+    queued: 'Queued',
+    cancelled: 'Cancelled',
+    dataset: 'Dataset',
+    target: 'Target',
+  },
+
+  // ---- Sidebar ----
+  sidebar: {
+    console: 'Console',
+    overview: 'Overview',
+    models: 'Models',
+    traffic: 'Traffic',
+    requests: 'Requests',
+    monitoring: 'Monitoring',
+    playground: 'Playground',
+    benchmark: 'Benchmark',
+    eval: 'Evaluation',
+    library: 'Model Library',
+    loraLibrary: 'LoRA Library',
+    datasets: 'Datasets',
+    keys: 'API Keys',
+    usage: 'Usage Guide',
+    resources: 'Resources',
+    activity: 'Activity',
+    modelCount: 'Models · {ready}/{total} ready',
+    noModels: 'No models configured',
+  },
+
+  // ---- StatusBar ----
+  statusBar: {
+    gpu: 'GPU',
+    ready: 'ready',
+    switchLight: 'Switch to light',
+    switchDark: 'Switch to dark',
+    live: 'Live',
+    polling: 'Polling',
+    connecting: 'Connecting',
+    offline: 'Offline',
+  },
+
+  // ---- Overview ----
+  overview: {
+    readyModels: 'Ready Models',
+    requestCount: 'Requests',
+    latencyP95: 'Latency p95',
+    gpuUtil: 'GPU Utilization',
+    failedCount: '{n} failed | {n} failed',
+    allNormal: 'All normal',
+    errorRate: '{rate} error rate',
+    processedTokens: 'Processed {n} tokens',
+    deviceCount: '{n} devices | {n} devices',
+    models: 'Models',
+    noModelsYet: 'No models configured.',
+    activity: 'Activity',
+    noRecentEvents: 'No recent events.',
+    recentRequests: 'Recent Requests',
+    traffic: 'Traffic →',
+    noRequestRecords: 'No request records.',
+    tableTime: 'Time',
+    tableModel: 'Model',
+    tablePath: 'Path',
+    tableStatus: 'Status',
+    tableLatency: 'Latency',
+  },
+
+  // ---- Models ----
+  models: {
+    searchPlaceholder: 'Search models…',
+    all: 'All',
+    llm: 'LLM',
+    embedding: 'Embedding',
+    groupCount: '{n} groups · {ready} ready · {failed} failed',
+    addModel: 'Add Model',
+    noMatch: 'No matching models found.',
+    clearFilter: 'Try clearing the filter.',
+    noConfig: 'No models configured in config.yaml.',
+  },
+
+  // ---- Traffic ----
+  traffic: {
+    modelUsage: 'Model Usage',
+    tableModel: 'Model',
+    tableRequests: 'Requests',
+    tableErrors: 'Errors',
+    tableAvg: 'Avg',
+    noUsage: 'No usage records.',
+    routerLoadBalancing: 'Router Load Balancing',
+    routerLoadDesc: 'Line width = actual traffic share (from request logs) · ★ = lowest-score instance the router picks next',
+    strategy: 'Strategy',
+    scenarioTitle: 'Scenario guide for each strategy',
+    scenarioFooter: 'This dropdown controls the global default; setting routing_strategy in config.yaml for a specific group overrides it.',
+    noLlmGroups: 'No LLM groups configured.',
+    requestLog: 'Request Log',
+    noRequests: 'No requests.',
+    strategyChanged: 'Routing strategy changed to "{name}"',
+    strategyChangedDesc: 'Effective from the next request. Not persisted — reverts on router restart.',
+    strategyChangeFailed: 'Failed to change routing strategy',
+    strategyInfo: {
+      least_load: 'Requests vary in length; evenly saturate replicas. The safe general-purpose default.',
+      round_robin: 'Homogeneous GPUs, similar request sizes, or when you want predictable even splits / a baseline.',
+      random: 'Many short requests; lowest decision cost with stateless splitting.',
+      least_inflight: 'Requests take similar time and you don\'t want ~1s metric-scrape lag to matter.',
+      p2c: 'Under bursty traffic, avoids the thundering-herd rush to the single "currently least loaded" replica.',
+      session_affinity: 'Multi-turn chat / Playground: same session sticks to one instance for KV cache reuse (needs X-Session-Id or user; falls back to least-load otherwise).',
+      prefix_affinity: 'Fixed system prompts, RAG / few-shot templates, or other high-prefix-overlap requests.',
+    },
+  },
+
+  // ---- Requests ----
+  requests: {
+    searchPlaceholder: 'Search model / path / key…',
+    errorsOnly: 'Errors only',
+    costPerMTok: '$/1M tokens',
+    recent: 'Recent {n}',
+    requestCount: 'Requests',
+    totalTokens: 'Total tokens',
+    errorRate: 'Error rate',
+    estimatedCost: 'Estimated cost',
+    tableTime: 'Time',
+    tableModel: 'Model',
+    tablePath: 'Path',
+    tableStatus: 'Status',
+    tableLatency: 'Latency',
+    tableTokens: 'tokens',
+    tableCost: 'Cost',
+    tableKey: 'Key',
+    noRecords: 'No request records.',
+    loadFailed: 'Failed to load request records',
+  },
+
+  // ---- Monitoring ----
+  monitoring: {
+    overview: 'Overview',
+    vllmCapacity: 'vLLM Capacity',
+    vllmPerf: 'vLLM Performance',
+    vllmQuery: 'vLLM Queries',
+    gpu: 'GPU',
+    host: 'Host',
+    openGrafana: 'Open in Grafana',
+  },
+
+  // ---- Playground ----
+  playground: {
+    chat: 'Chat',
+    embeddingRerank: 'Embedding / Rerank',
+    thinkingProcess: '💭 Thinking',
+    sendPrompt: 'Send a message to test {model} via the router.',
+    inputPlaceholder: 'Type a message… (Enter to send, Shift+Enter for newline)',
+    comparePlaceholder: 'Same question sent to all selected models… (Enter to send)',
+    selectModelsHint: 'Select at least one model on the right to start side-by-side comparison.',
+    waitingPrompt: 'Waiting for prompt…',
+    modelsParallel: '{n} models side by side',
+    params: 'Parameters',
+    compareMode: 'Compare mode (multi-model same prompt)',
+    systemPrompt: 'System prompt',
+    systemPromptPlaceholder: 'Leave empty to omit. e.g. You are a professional assistant.',
+    modelReady: 'Model (only showing ready)',
+    noReadyModels: 'No ready models — please start one on the Models page.',
+    modelMulti: 'Model (multi-select, only showing ready)',
+    noReadyModelsShort: 'No ready models available.',
+    maxTokens: 'Max Tokens',
+    temperature: 'Temperature',
+    streamResponse: 'Stream response',
+    request: 'Request',
+    result: 'Result',
+    modelLabel: 'Model ({mode}, only showing ready)',
+    noModelsForMode: 'No models available for this mode.',
+    embNotStarted: 'Embedding server not started — please start it on the Models page.',
+    queryLabel: 'Query (enter to switch to rerank mode)',
+    queryPlaceholder: 'Leave empty for pure embedding mode',
+    inputLabel: 'Input (one per line)',
+    rerank: 'Rerank',
+    embed: 'Embed',
+    dimVector: '{n}-dim vector',
+    runToSee: 'Run a request to see {type}.',
+    relevanceScores: 'relevance scores',
+    vectorDimensions: 'vector dimensions',
+    firstToken: 'First',
+    chatFailed: 'Chat request failed',
+    embedFailed: 'Embedding request failed',
+    emptyResponse: '(empty response)',
+    stopGeneration: 'Stop generation',
+  },
+
+  // ---- Benchmark ----
+  benchmark: {
+    title: 'Benchmark',
+    description: 'Measure model "speed" (throughput / latency — different from eval accuracy). Supports concurrency sweep, open-loop rate, multi-turn, SLA auto-tune, and embedding / rerank throughput plus single-request speed baseline. Some modes can pre-download datasets from the',
+    datasetsLink: 'Datasets',
+    descriptionEnd: ' library.',
+    configTitle: 'Benchmark Config',
+    modelLabel: 'Model',
+    notStarted: '(not started)',
+    embModelLabel: 'Embedding model',
+    rerankModelLabel: 'Rerank model',
+    embNotStarted: 'Embedding server not started — please start it on the Models page.',
+    noModelsForMode: 'No models available for this mode.',
+    modeSweep: 'Concurrency Sweep',
+    modeOpenloop: 'Rate Open-loop',
+    modeMultiturn: 'Multi-turn',
+    modeSla: 'SLA Tune',
+    modeSpeed: 'Speed Baseline',
+    modeEmbedding: 'Embedding',
+    modeRerank: 'Rerank',
+    targetLabel: 'Target',
+    targetRouter: 'Router (overall + load balancing)',
+    targetInstance: 'Single instance',
+    instanceLabel: 'Instance',
+    datasetLabel: 'Dataset',
+    endpointLabel: 'Endpoint',
+    parallelLabel: 'Concurrency points (comma-separated, sweep)',
+    reqPerPoint: 'Requests per point',
+    warmupRatio: 'Warmup ratio',
+    rateLabel: 'Rate (req/s, comma-separated, sweep)',
+    reqPerRate: 'Requests per rate',
+    maxDuration: 'Max seconds (0=unlimited)',
+    mtDatasetLabel: 'Dataset',
+    mtShareGpt: 'ShareGPT Chinese (real conversations)',
+    mtRandom: 'random (generated)',
+    mtCustom: 'custom (JSONL)',
+    mtDatasetPath: 'Dataset path (server-side JSONL)',
+    mtConcurrent: 'Concurrent conversations (comma sweep)',
+    mtConvPerPoint: 'Conversations per point',
+    mtMinTurns: 'Min turns',
+    mtMaxTurns: 'Max turns',
+    mtMaxDuration: 'Max seconds (0=unlimited, prevents runaway wall-clock)',
+    slaVariable: 'Search variable',
+    slaParallel: 'Concurrency parallel',
+    slaRate: 'Rate (open-loop)',
+    slaConditions: 'SLA conditions (multiple = OR)',
+    slaLower: 'Lower bound',
+    slaUpper: 'Upper bound',
+    slaRunsPerPoint: 'Runs per point',
+    slaFixedParallel: 'Fixed concurrency (rate mode)',
+    speedDesc: 'Single-request standard speed (concurrency 1). Fixed prompt lengths{lengths}, hitting /v1/completions to avoid chat-template interference.',
+    speedLengthsShort: ' 1 / 6k / 14k / 30k',
+    speedLengthsLong: ' 63k / 129k',
+    speedLongCtx: 'Long context (63k / 129k)',
+    embParallel: 'Concurrency points (comma-separated, sweep)',
+    embReqPerPoint: 'Requests per point',
+    embInputLen: 'Input length (token)',
+    embDocsPerReq: 'Documents per request',
+    outputTokens: 'Output tokens',
+    outputTokensFixed: 'Output tokens (fixed)',
+    inputLength: 'Input length',
+    prefixLength: 'Prefix length (prefix cache)',
+    nameLabel: 'Name (optional)',
+    namePlaceholder: 'e.g. q05b-baseline',
+    streamLabel: 'Stream (required for TTFT measurement)',
+    runningBusy: 'Benchmark in progress…',
+    startBenchmark: 'Start Benchmark',
+    history: 'Benchmark History',
+    historyCount: '({n})',
+    compareHint: 'Check ≥2 to compare',
+    noHistory: 'No benchmark records.',
+    comparison: 'Benchmark Comparison',
+    failed: 'Failed',
+    runSummary: 'Run Summary',
+    fullReport: 'Full Report',
+    slaMaxVar: 'max {var}',
+    slaVarRate: 'rate',
+    slaVarParallel: 'concurrency',
+    multiTurnMetrics: 'Multi-turn Metrics',
+    turnsPerConv: 'Turns/conv',
+    kvCacheHit: 'KV cache hit',
+    firstTtft: 'First-turn TTFT',
+    subsequentTtft: 'Subsequent TTFT',
+    chartRps: 'RPS (req/s)',
+    chartGenTps: 'Output throughput Gen/s (tok/s)',
+    chartTtft: 'TTFT p99 (ms)',
+    chartAvgLatency: 'Avg latency (ms)',
+    chartP99Latency: 'Latency p99 (ms)',
+    tableParallel: 'Concurrency',
+    tableRate: 'Rate',
+    tableAvgLatency: 'Avg latency',
+    tableInputOutput: 'Input/Output',
+    tableSuccessTotal: 'Success/Total',
+    latencyDetail: 'Latency (s)',
+    executionLog: 'Execution log',
+    waitingOutput: '(waiting for output…)',
+    stoppingHint: 'Stopping… takes up to ~10s; still stuck, press "Force".',
+    forceKill: 'Force kill',
+    forceConfirm: 'Force kill benchmark #{id}? Will immediately SIGKILL, results will be invalid.',
+    cancelFailed: 'Cancel failed',
+    deleteFailed: 'Delete failed',
+    deleteConfirm: 'Delete benchmark #{id}?',
+    loadResultFailed: 'Failed to load result',
+    startedToast: 'Started benchmark #{id}',
+    startedDesc: 'You can leave this page — it runs in the background.',
+    startFailed: 'Failed to start benchmark',
+    compareMax: 'Compare up to {n} runs',
+    compareLoadFailed: 'Failed to load comparison data',
+    selectModel: 'Please select a model',
+    enterRate: 'Enter at least one rate',
+    enterParallel: 'Enter at least one concurrency value',
+    enterMtConcurrent: 'Enter at least one concurrent conversation count',
+    addSlaCondition: 'Add at least one SLA condition',
+    instanceNotReady: 'Instance not ready — cannot direct-connect',
+    modeLabel: 'Mode',
+    totalTestDuration: 'Total test time',
+    totalGenerated: 'Total generated',
+    avgOutputRate: 'Avg output rate',
+    stoppingBadge: 'Stopping…',
+    cancelStop: 'Cancel (stop)',
+    forceKillHint: 'Force kill (immediate SIGKILL)',
+    addToCompare: 'Add to compare',
+    slaMetrics: {
+      p99_latency: 'p99 latency (s)',
+      avg_latency: 'Avg latency (s)',
+      p99_ttft: 'p99 TTFT (ms)',
+      avg_ttft: 'Avg TTFT (ms)',
+      p99_tpot: 'p99 TPOT (ms)',
+      avg_tpot: 'Avg TPOT (ms)',
+      rps: 'RPS (req/s)',
+      tps: 'Output tok/s',
+    },
+  },
+
+  // ---- Evaluation ----
+  eval: {
+    title: 'Model Evaluation',
+    description: 'Evaluate model "accuracy / quality" (different from benchmark speed). Pre-download datasets on the',
+    descriptionEnd: 'page to avoid waiting. Low scores on small models are normal — focus on comparing across models / parameter changes.',
+    configTitle: 'Evaluation Config',
+    modelLabel: 'Model',
+    selected: 'selected',
+    noModels: 'No models configured',
+    offline: '· offline',
+    multiModelHint: 'Multi-select = each model queues a separate eval, running in parallel / queued against shared concurrency budget.',
+    targetRouter: 'Router',
+    targetInstance: 'Direct instance',
+    instanceOnly: 'Direct instance supports single model only',
+    datasetLabel: 'Datasets',
+    cachedHint: '● = cached; uncached will download at runtime; ⏬ downloading, wait until complete to select. ⚖ = needs judge model for scoring.',
+    longContextWarn: '⚠ Long-context dataset selected — model needs a large max_model_len (tens of thousands of tokens), otherwise truncation or 400 errors.',
+    toolParserWarn: '⚠ Real function-call dataset selected — model needs vLLM tool parser enabled (enable_auto_tool_choice + tool_call_parser), otherwise scores will be 0.',
+    subsetLabel: 'Selected datasets — Subjects',
+    subsetHint: 'Subjects (subset, {n} total, none selected = all)',
+    clearSubsets: 'Clear ({n})',
+    samplesPerDataset: 'Samples per dataset (0=all)',
+    repeats: 'Repeat count',
+    temperature: 'Temperature',
+    maxOutputTokens: 'Max output tokens',
+    batchSize: 'Concurrency (batch size)',
+    batchSizeHint: 'How many concurrent requests to fire at the model; higher fills vLLM batch better (faster) but too high can cause queue timeouts. Does not affect scores.',
+    advanced: 'Advanced settings',
+    fewShot: 'Few-shot examples (0=dataset default)',
+    datasetArgsJson: 'dataset_args JSON (per-dataset override, optional)',
+    datasetArgsHint: 'e.g. few_shot_num, subset_list, shuffle. For math multi-sample use "Repeat count" + aggregation.',
+    judgeTitle: '⚖ Judge Model',
+    judgeHint: 'Selected QA datasets need LLM scoring',
+    judgeInternal: 'Internal model',
+    judgeExternal: 'External API',
+    judgeApiUrl: 'API URL, e.g. https://api.openai.com/v1',
+    judgeModelId: 'Judge model ID, e.g. gpt-4o-mini',
+    judgeApiKey: 'API Key (optional)',
+    judgeQualityHint: 'Stronger judge = more reliable scores; small models as judges are for reference only.',
+    nameLabel: 'Name (optional)',
+    namePlaceholder: 'e.g. Qwen3-0.6B baseline',
+    startEvalMulti: 'Queue {n} evaluations',
+    startEval: 'Start Evaluation',
+    runHistory: 'Evaluation History',
+    runningCount: 'Running {n}',
+    queuedCount: 'Queued {n}',
+    concurrencyBudget: 'Concurrency budget',
+    budgetUsage: 'Usage {used}/{total}',
+    noHistory: 'No evaluation records.',
+    scoreComparison: 'Score Comparison',
+    compareDataset: 'Dataset',
+    compareBestHint: 'Best score per row is highlighted in accent color.',
+    detailReport: 'Full report',
+    queuedHint: 'Queued… waiting for concurrency budget or other benchmarks to finish.',
+    runningHint: 'Evaluation running… (you can leave this page)',
+    failedPrefix: 'Failed: ',
+    scores: 'Scores',
+    metric: 'Metric',
+    samples: 'Samples',
+    score: 'Score',
+    loadingDetail: 'Loading detailed data…',
+    latencyP50P99: 'Latency p50 / p99',
+    outputThroughput: 'Output throughput',
+    avgInputTok: 'Avg input tok',
+    avgOutputTok: 'Avg output tok',
+    subsetBreakdown: '· by subject',
+    whatDoesItTest: 'What does this benchmark test?',
+    collapseSamples: 'Collapse sample browser',
+    expandSamples: 'Sample browser (view per-question correctness / answers)',
+    executionLog: 'Execution log',
+    noLog: '(no log)',
+    loadResultFailed: 'Failed to load result',
+    loadCatalogFailed: 'Failed to load eval datasets',
+    selectModelRequired: 'Please select at least one model',
+    selectDatasetRequired: 'Please select at least one dataset',
+    instanceSingleOnly: 'Direct instance supports single model only',
+    instanceNotReady: 'Instance not ready — cannot direct-connect',
+    judgeModelRequired: 'Please set a judge model',
+    judgeApiRequired: 'External judge requires an API URL',
+    invalidDatasetArgs: 'Advanced dataset_args is not valid JSON',
+    startedToast: 'Queued {n} evaluations',
+    startedDesc: 'You can leave this page — they run in the background.',
+    evalFailed: 'Failed to evaluate {model}',
+    cancelRequested: 'Cancel requested',
+    cancelFailed: 'Cancel failed',
+    deleteConfirm: 'Delete evaluation #{id}?',
+    deleteFailed: 'Delete failed',
+    budgetSet: 'Concurrency budget set to {n}',
+    budgetSetFailed: 'Failed to adjust budget',
+    addCompare: 'Add to comparison',
+    cancelQueue: 'Cancel queue',
+    downloading: '⏬Downloading',
+    defaultFewShot: '· default {n}-shot',
+    datasetArgsPlaceholder: 'e.g. {"arc": {"subset_list": ["ARC-Challenge"]}}',
+    concurrencyBudgetHint: 'Sum of batch_size across all parallel evals; when full, new evals queue. Takes effect immediately, resets on router restart.',
+  },
+
+  // ---- Library (Model Library) ----
+  library: {
+    title: 'Model Library',
+    description: 'Pre-download Hugging Face weights to the shared cache — model startup won\'t have to wait. Gated models need',
+    descriptionEnd: 'set on the backend.',
+    cachedModels: 'Cached models',
+    diskRemaining: 'Disk remaining',
+    diskUsed: 'Disk used',
+    downloadNew: 'Download new model',
+    repoId: 'Hugging Face repo id',
+    repoPlaceholder: 'e.g. Qwen/Qwen3-0.6B',
+    noCachedModels: 'No cached models.',
+    files: 'files',
+    size: 'Size',
+    updated: 'Updated',
+    deleteCache: 'Delete cache',
+    deleteConfirm: 'Delete cached {repo}? This will free disk space.',
+    deleteFailed: 'Delete failed',
+    deleted: 'Deleted {repo}',
+    downloadStarted: 'Started downloading {repo}',
+    downloadStartedDesc: 'You can leave this page — download continues in the background.',
+    downloadFailed: 'Failed to start download',
+    loadCacheFailed: 'Failed to load cache',
+    occupiedSpace: 'Disk usage',
+    downloading: 'Downloading',
+    downloadComplete: 'Done',
+    downloadFailedBadge: 'Failed',
+  },
+
+  // ---- LoRA Library ----
+  loraLibrary: {
+    title: 'LoRA Library',
+    description: 'Manage local LoRA adapters. Download from Hugging Face, or place adapter folders directly into',
+    descriptionEnd: 'and they will appear here. When adding / editing models, pick from the "LoRA Adapters" section to mount.',
+    adapters: 'Adapters',
+    diskUsed: 'Disk usage',
+    diskRemaining: 'Disk remaining',
+    downloadAdapter: 'Download adapter',
+    repoId: 'Hugging Face repo id',
+    repoPlaceholder: 'e.g. jeeejeee/llama32-3b-text2sql-spider',
+    localName: 'Local name (optional)',
+    localNamePlaceholder: 'Defaults to repo tail',
+    localAdapters: 'Local adapters',
+    unknownBase: 'Unknown base',
+    deleteConfirm: 'Delete LoRA "{name}"? This will remove the adapter files from disk.',
+    deleteFailed: 'Delete failed',
+    deleted: 'Deleted {name}',
+    downloadStarted: 'Started downloading {repo}',
+    downloadStartedDesc: 'You can leave this page — download continues in the background.',
+    downloadFailed: 'Failed to start download',
+    loadFailed: 'Failed to load LoRA library',
+    noAdapters: 'No adapters in the library. Download from above, or place folders into',
+  },
+
+  // ---- Datasets ----
+  datasets: {
+    title: 'Datasets',
+    description: 'Pre-download datasets to the shared ModelScope cache — benchmarks / evaluations won\'t wait for the first download.',
+    descriptionRandom: 'random / speed baseline are generated on-the-fly; no download needed.',
+    cachedTotal: 'Cached / Total',
+    diskUsed: 'Disk usage',
+    diskRemaining: 'Disk remaining',
+    diskTotal: 'total {size}',
+    perfDatasets: 'Benchmark datasets',
+    perfHint: 'After download, selectable on the Benchmark page',
+    evalDatasets: 'Evaluation datasets',
+    evalHint: 'After download, selectable on the Evaluation page',
+    downloadFailed: 'Download "{label}" failed: ',
+    loadFailed: 'Failed to load datasets',
+    downloadStarted: 'Download started',
+    downloadStartedDesc: 'You can leave this page — download continues in the background.',
+    downloadStartFailed: 'Failed to start download',
+    deleteConfirm: 'Delete cached "{label}"? This will free disk space.',
+    deleted: 'Deleted {label}',
+    deleteFailed: 'Delete failed',
+  },
+
+  // ---- Keys ----
+  keys: {
+    title: 'API Keys',
+    description: 'Used to send inference requests to the router (Authorization: Bearer …). Keys are shown only once at creation.',
+    authDisabled: 'Backend has no LLMOPS_ADMIN_TOKEN set — authentication is currently disabled. Keys can be created but the router does not enforce them yet (set LLMOPS_REQUIRE_API_KEY=true).',
+    locked: 'Admin token required to manage keys.',
+    unlock: 'Unlock',
+    createNew: 'Create new key',
+    nameLabel: 'Name (for usage attribution)',
+    namePlaceholder: 'e.g. team-rag, ci-bot',
+    rateLimit: 'Rate limit (req/min)',
+    ratePlaceholder: 'Unlimited',
+    issuedKeys: 'Issued keys',
+    revoked: 'Revoked',
+    perMin: '/min',
+    requestCount: 'requests',
+    lastUsed: 'Last used: ',
+    noKeys: 'No keys yet.',
+    revokeTitle: 'Revoke key',
+    keyCreated: 'Key created',
+    copyImmediate: 'Copy this key now — it will not be shown again after closing.',
+    copySuccess: 'Copied to clipboard',
+    copyFailed: 'Copy failed — please select manually',
+    createFailed: 'Failed to create key',
+    revokeFailed: 'Revoke failed',
+    revokeSuccess: 'Revoked {name}',
+    loadFailed: 'Failed to load keys',
+  },
+
+  // ---- Usage (Guide) ----
+  usage: {
+    quickStart: 'Quick Start',
+    quickStartDesc: 'Router is an OpenAI-compatible unified endpoint. Set the model field in requests to the "group name" — the Router auto-selects the lowest-load instance.',
+    step1: 'Confirm Router is running: ',
+    step2: 'Start the desired model to',
+    step2End: 'on the Models page',
+    step3: 'Call with any language below; API key can be anything (Router does not verify)',
+    chatCompletions: 'Chat Completions',
+    modelLabel: 'Model',
+    streamLabel: 'Stream',
+    loraDropdownHint: 'LoRA items in the dropdown: just change the model field to its served name — the rest of the request stays the same.',
+    loraTitle: 'LoRA Adapters',
+    loraDesc: 'Calling LoRA is the same as a regular model — just change model to the adapter\'s served name (e.g.',
+    loraDescEnd: '), Router routes to the corresponding base model\'s instances.',
+    listModelsLabel: 'List available models / LoRA · cURL',
+    filterLoraLabel: 'Filter LoRA only · Python',
+    loraNote1: '· Prerequisite: base model must be started with enable_lora, and adapter must be mounted (static in config, or hot-loaded from the model detail drawer).',
+    loraNote2: '· Requesting an unmounted name returns 404 — Model not found.',
+    loraNote3: '· Base vs LoRA A/B: same request, just change model; Playground compare mode for side-by-side.',
+    embTitle: 'Embeddings & Rerank',
+    embDesc: 'Same /v1/embeddings endpoint: add a query field to switch to reranking.',
+    embCurlLabel: 'Embedding · cURL',
+    embPyLabel: 'Embedding · Python',
+    rerankCurlLabel: 'Rerank · cURL',
+  },
+
+  // ---- Resources ----
+  resources: {
+    cpu: 'CPU',
+    memory: 'Memory',
+    gpuProcesses: 'GPU Processes',
+    gpuProcessesDesc: 'Processes using GPU memory (updates ~every 5s)',
+    tablePid: 'PID',
+    tableUser: 'User',
+    tableName: 'Name',
+    tableCommand: 'Command',
+    tableGpuMem: 'GPU Memory',
+    noGpuProcesses: 'No GPU processes.',
+  },
+
+  // ---- Activity ----
+  activity: {
+    eventCount: '{n} events',
+    noEvents: 'No event records.',
+  },
+
+  // ---- Topology ----
+  topology: {
+    title: 'System Topology',
+    clickHint: '· Click a node for details',
+    legendData: 'Data',
+    legendPlacement: 'Placement',
+    legendControl: 'Control',
+    legendLora: 'LoRA',
+    client: 'Client',
+    clientRequests: '{n} requests',
+    router: 'Router',
+    routerError: '{rate} error',
+    backend: 'Backend',
+    backendReady: '{ready}/{total} ready',
+    groupRunWait: 'Run {running} · Wait {waiting}',
+    embeddingNode: 'Embedding',
+    gpuConfigured: 'Configured · not detected',
+    kvSharedLabel: 'Shared KV cache',
+  },
+
+  // ---- AddModelDialog ----
+  addModel: {
+    createTitle: 'Add Model',
+    editTitle: 'Edit Model',
+    pasteCommand: 'Paste vLLM launch command',
+    parseCommand: 'Parse command',
+    parseFailed: 'Failed to parse command',
+    groupLabel: 'Group',
+    groupExists: 'Group already exists — will add as a new replica.',
+    instanceLabel: 'Instance ID',
+    keyExists: '{key} already exists.',
+    hostLabel: 'Host',
+    portLabel: 'Port',
+    portInUse: 'Port {port} is already used by another instance.',
+    gpuLabel: 'GPU (cuda_device)',
+    gpuAuto: 'None / Auto',
+    modelTagLabel: 'Model tag',
+    routingLabel: 'Routing strategy (load balancing)',
+    routingDefault: 'Follow global default',
+    routingHint: 'Traffic distribution policy for this group; empty inherits the global setting (switchable on the Traffic page). Only effective with multiple replicas.',
+    kvShareLabel: 'Shared KV Cache (cross-instance)',
+    kvShareDesc: 'Replicas within the group share a KV store (/kv_cache) to reuse computed KV across instances. Saves re-computation for matching prefixes. Best with multiple replicas + high prefix overlap (fixed system prompts / RAG / multi-turn chat); off = each instance has independent KV.',
+    groupSharedWarn: 'vLLM parameters are group-shared — this change applies to all {n} replicas in group {group}.',
+    weightsCached: 'Weights cached',
+    weightsDownloading: 'Downloading weights…',
+    weightsDownloadFailed: 'Download failed: ',
+    weightsNotCached: 'Weights not cached — first start will download live (slower).',
+    accelTitle: '⚡ Acceleration settings (vLLM inference params)',
+    accelTemplates: 'Scenario templates:',
+    accelLatency: 'Low latency (chat / agent)',
+    accelThroughput: 'High throughput (concurrent)',
+    accelClear: 'Clear (reset to defaults)',
+    accelHint: 'Empty = vLLM default. Changes require model restart. Combinations have the most impact.',
+    advancedTitle: 'Advanced (speculative decoding / prefix hash / chunked prefill / offload)',
+    ngramSpec: 'N-gram speculative decoding (reduces single-request latency at low QPS)',
+    offloadHint: 'Offloads weights to CPU RAM for "it runs" (slower), not acceleration.',
+    partialPrefillHint: 'With mixed short + long prompts: set partial >1 and long small so short requests can cut in line.',
+    vllmParams: 'vLLM parameters (model_config)',
+    addParam: 'Add',
+    noExtraParams: 'No extra parameters.',
+    flagPlaceholder: 'Flag (snake_case)',
+    valuePlaceholder: 'Value',
+    toolCallingTitle: '🛠 Tool calling parameter reference',
+    toolCallingDesc: 'To enable tool_choice="auto", add enable_auto_tool_choice=true + tool_call_parser=<parser>; reasoning models also need reasoning_parser. Parser must match the model\'s output format.',
+    toolCallingPresetHint: 'Click to apply recommended parameters:',
+    toolCallingFooter: 'No matching parser = don\'t add it.',
+    loraTitle: 'LoRA Adapters',
+    addLora: 'Add',
+    loraServedName: 'served name (e.g. sql-lora)',
+    loraPickAdapter: '— Pick adapter / type path —',
+    loraTyped: '(typed)',
+    noLora: 'No LoRA. Adding a row auto-adds enable_lora=true; served name is the name to put in the model field for inference. Pick adapters from the LoRA Library, or type a path.',
+    loraAutoHint: 'Picking from the library auto-fills base and sets max_lora_rank to the aligned rank. Base model must support LoRA (vLLM SupportsLoRA).',
+    loraBaseMismatch: 'This adapter\'s base is {adapterBase}, which doesn\'t match the model {modelTag}',
+    newGroup: 'New group',
+    saveChanges: 'Save Changes',
+    addModelBtn: 'Add Model',
+    createSuccess: 'Added {key}',
+    createSuccessDesc: 'Currently stopped — press "Start" to activate.',
+    editSuccess: 'Updated {key}',
+    editSuccessDesc: 'Changes take effect on next startup.',
+    createFailed: 'Failed to add model',
+    editFailed: 'Failed to update model',
+    routerReloadFailed: 'Router not refreshed',
+    routerReloadCreateDesc: 'Model added but router unreachable — model won\'t be routable until reloaded.',
+    routerReloadEditDesc: 'Changes saved but router unreachable.',
+    downloadStarted: 'Started downloading {repo}',
+    downloadStartedDesc: 'You can close this dialog — download continues in the background.',
+    downloadFailed: 'Failed to start download',
+    quantHint: 'Pre-quantized models (AWQ / GPTQ): just change model_tag to the quantized version — vLLM auto-detects; no need to set this field.',
+    defaultLabel: 'Default',
+    autoLabel: 'Auto',
+    notSet: 'Not set',
+    forceOn: 'Force on',
+    off: 'Off',
+    on: 'On',
+    onExperimental: 'On (experimental)',
+    fastestStartup: 'Fastest startup',
+    mostAggressive: 'Most aggressive',
+    gpuMemHint: 'Keep current; empty = vLLM default',
+    kvCacheDefault: 'Default (auto, no quantization)',
+    prefixCacheDefault: 'Default (on)',
+    chunkedPrefillDefault: 'Default (on)',
+    asyncSchedDefault: 'Default (off)',
+    quantDefault: 'Default (no quantization, or auto-detect quantized model)',
+    quantBnb: 'bitsandbytes (4-bit NF4, online quantization for any model)',
+    quantFp8Tensor: 'fp8_per_tensor (8-bit; Ampere falls back to W8A16)',
+    quantFp8Block: 'fp8_per_block (8-bit; Ampere falls back to W8A16)',
+    quantInt8: 'int8_per_channel_weight_only (8-bit INT8)',
+    hashDefault: 'Default (sha256)',
+    hashSha256: 'sha256 (most stable)',
+    hashXxhash: 'xxhash (faster, not cryptographically secure)',
+    qwen3Thinking: 'Qwen3 (with thinking)',
+    toolCallingDocRef: 'See full reference in docs/vllm_auto_tool_reference.md. No matching parser = don\'t add it.',
+  },
+
+  // ---- ModelDetailDrawer ----
+  modelDetail: {
+    overview: 'Overview',
+    events: 'Events',
+    logs: 'Logs',
+    endpoint: 'Endpoint',
+    gpu: 'GPU',
+    pid: 'Process ID',
+    managedLabel: 'Managed',
+    managedYes: 'Yes (controllable)',
+    managedExternal: 'External',
+    uptime: 'Uptime',
+    autoRestarts: 'Auto-restarts',
+    startupSnapshot: 'Startup Capacity Snapshot',
+    kvCacheCapacity: 'KV cache capacity',
+    maxConcurrency: 'Max concurrency',
+    concurrencyReqTok: '{n} tok/req',
+    concurrencyHint: '≈ Can serve {n} concurrent requests',
+    memWeights: 'Weights',
+    memCudaGraph: 'CUDA graph',
+    memKvCache: 'KV cache',
+    startupWeightsLoad: 'Weights load',
+    startupModelLoad: 'Model load',
+    startupCompile: 'torch.compile',
+    startupWarmup: 'warmup',
+    gpuMemUtilTitle: '⚙ About gpu_memory_utilization',
+    gpuMemUtilDesc: 'Newer vLLM includes CUDA graph memory in this budget. You set {current}; after deducting, the effective KV cache space equals {effective} in older versions. To increase KV cache (higher concurrency / longer context), edit to {suggested} after stopping — but VRAM headroom decreases and OOM risk increases (especially on small GPUs).',
+    servedModels: 'Served models',
+    routingPolicy: 'Routing policy (load balancing)',
+    vllmParams: 'vLLM parameters (model_config)',
+    loraAdapters: 'LoRA Adapters',
+    hotLoadEnabled: 'Hot-load enabled',
+    hotLoad: 'Load',
+    hotUnload: 'Hot-unload',
+    hotLoadPick: '— Pick adapter from LoRA Library to hot-load —',
+    hotLoadSuccess: 'Hot-loaded {name}',
+    hotLoadSuccessDesc: 'Applied to all ready instances and routing updated.',
+    hotLoadFailed: 'Hot-load failed',
+    hotUnloadConfirm: 'Unload LoRA "{name}"? Will remove from all ready instances and stop routing.',
+    hotUnloadSuccess: 'Unloaded {name}',
+    hotUnloadFailed: 'Unload failed',
+    hotLoadHint: 'Hot-load applies to all ready instances and updates routing; written to overlay (persists after restart).',
+    coldHint: 'Put the served name in the model field for inference (Playground / Eval / Benchmark all support it).',
+    hotLoadEnableHint: 'To hot-load LoRA without restart: edit this model, enable enable_lora + allow_runtime_lora, then restart.',
+    liveMetrics: 'Live load (router /metrics)',
+    metricsRunning: 'Running',
+    metricsWaiting: 'Waiting',
+    metricsKvCache: 'KV Cache',
+    metricsGenTokens: 'Gen tokens',
+    noMetrics: 'No live metrics (router unreachable or model idle).',
+    usageSection: 'Usage',
+    requestCount: 'Requests',
+    lastError: 'Last error',
+    noEventRecords: 'No event records.',
+    filterLogs: 'Filter log lines…',
+    downloadLogs: 'Download full logs',
+    noLogContent: 'No log content.',
+    noFilterMatch: 'No log lines match the filter.',
+    startLabel: 'Start',
+    startLocked: 'Another model is starting ({name}), please wait',
+    stopLabel: 'Stop',
+    terminateLabel: 'Terminate',
+    abortLabel: 'Abort startup',
+    editParams: 'Edit parameters (must stop first; vLLM params are group-shared)',
+    removeModel: 'Remove model (dynamic models only)',
+    removeSuccess: 'Removed {key}',
+    removeFailed: 'Failed to remove model',
+    externalModel: 'External model — not managed by this backend',
+    editEmbedding: 'Edit parameters (must stop embedding server first)',
+  },
+
+  // ---- ModelGroupCard ----
+  modelGroup: {
+    readyCount: '{ready}/{total} ready',
+    embedding: 'Embedding',
+    reranking: 'Reranking',
+    crashRestart: 'Crashed and auto-restarted {n} times',
+    liveLoad: 'Live load (router /metrics)',
+    runningDesc: ' Running — currently generating requests',
+    waitingDesc: ' Waiting — queued requests for this instance',
+    kvCacheUsed: 'KV Cache {pct} used',
+    externalNotManaged: 'External model — not managed by this backend',
+    terminateHint: 'Terminate residual process',
+    abortStartup: 'Abort startup',
+    stopHint: 'Stop',
+    startAll: 'Start All',
+    stopAll: 'Stop All',
+    addInstance: 'Add Instance',
+    showMore: 'Show {n} more',
+    collapse: 'Collapse',
+    servedModels: 'Served models',
+  },
+
+  // ---- Routing strategies ----
+  routingStrategies: {
+    least_load: 'Least Load',
+    round_robin: 'Round Robin',
+    random: 'Random',
+    least_inflight: 'Least In-flight',
+    p2c: 'Power of 2 Choices',
+    session_affinity: 'Session Affinity',
+    prefix_affinity: 'Prefix Affinity',
+  },
+
+  // ---- Router fan diagram ----
+  routerFan: {
+    nextPick: 'Next pick',
+    kvShared: 'Shared KV',
+    kvIndependent: 'Independent KV',
+    kvSharedTooltip: 'Replicas in this group share KV cache (/kv_cache)',
+    kvIndependentTooltip: 'Each replica has independent KV cache',
+    kvStoreLabel: 'Shared KV Cache · /kv_cache',
+  },
+
+  // ---- GpuGauge ----
+  gpuGauge: {
+    util: 'Utilization',
+    vram: 'VRAM',
+    power: 'Power',
+    temp: 'Temp',
+    memory: 'Memory',
+  },
+
+  // ---- CodeBlock ----
+  codeBlock: {
+    copy: 'Copy',
+    copied: 'Copied!',
+    copyFailed: 'Copy failed',
+  },
+
+  // ---- AddInstanceDialog ----
+  addInstance: {
+    title: 'Add Instance',
+    sharedSettingsTitle: 'Inherited shared settings from this group',
+    sharedSettingsHint: 'All instances in this group share vLLM parameters; only set the location for this instance here.',
+    instanceIdLabel: 'Instance ID',
+    instanceIdPlaceholder: 'e.g. qwen3-5',
+    idConflict: 'This ID already exists in the group.',
+    portConflict: 'This port is already in use.',
+    cudaDeviceLabel: 'CUDA device',
+    createSuccess: 'Added instance {key}',
+    createSuccessDesc: 'Currently stopped — press "Start" to activate.',
+    createFailed: 'Failed to add instance',
+  },
+
+  // ---- DatasetCard ----
+  datasetCard: {
+    cached: 'Cached',
+    notCached: 'Not cached',
+    downloading: 'Downloading',
+    downloadFailed: 'Failed',
+    preview: 'Preview',
+    deleteCache: 'Delete cache',
+    warmingHint: 'Building cache, preview will be instant once complete',
+    warming: 'Warming…',
+  },
+
+  // ---- DatasetPreviewDialog ----
+  datasetPreview: {
+    title: 'Preview · {key}',
+    loading: 'Loading data… (first preview needs to build cache, may take a moment)',
+    introTab: 'Introduction',
+    samplesTab: 'Sample data ({n})',
+    subjectCount: '{n} subjects',
+    noDescription: 'This dataset has no description.',
+    showingFirst: 'Showing first {n} rows (dataset is larger)',
+    totalRows: 'Total {n} rows',
+    answer: 'Answer: ',
+  },
+
+  // ---- EmbeddingModelDialog ----
+  embeddingModel: {
+    editTitle: 'Edit {type} model',
+    typeEmbedding: 'Embedding',
+    typeReranking: 'Reranking',
+    paramHint: 'Edit parameters after embedding server is stopped; changes take effect on next start.',
+    paramsLabel: 'Parameters',
+    paramKeyPlaceholder: 'Param name (snake_case)',
+    paramValuePlaceholder: 'Value (true/false/number/string)',
+    noParams: 'No parameters.',
+    updateSuccess: 'Updated {name}',
+    updateSuccessDesc: 'Changes take effect on next embedding server start.',
+    updateFailed: 'Update failed',
+  },
+
+  // ---- EvalSampleBrowser ----
+  evalSamples: {
+    dataset: 'Dataset',
+    loadFailed: 'Failed to load samples',
+    loadDetailFailed: 'Failed to load sample detail',
+    filterAll: 'All',
+    filterCorrect: 'Correct',
+    filterWrong: 'Wrong',
+    pageInfo: 'Page {page} / {total} · {count} samples',
+    colResult: 'Result',
+    colModelAnswer: 'Model answer (excerpt)',
+    colModelOutput: 'Model output (excerpt)',
+    colStandardAnswer: 'Standard answer',
+    correct: 'Correct',
+    wrong: 'Wrong',
+    ruleScoreHint: 'This is a rule-scored evaluation (checks instruction compliance), no single correct answer; see individual metrics above.',
+    standardAnswer: 'Standard answer',
+    modelAnswer: 'Model answer',
+    promptLabel: 'Prompt / Question',
+    noMatchingSamples: 'No matching samples.',
+  },
+
+  // ---- ModelControlDialog (Admin token) ----
+  modelControl: {
+    title: 'Admin verification',
+    description: 'This operation requires an admin token (backend LLMOPS_ADMIN_TOKEN).',
+    tokenPlaceholder: 'Admin token',
+    tokenInvalid: 'Token invalid.',
+    confirm: 'Confirm',
+  },
+
+  // ---- PerfSweepChart / PerfCompareChart ----
+  perfChart: {
+    noData: 'No data',
+    concurrency: 'Concurrency',
+  },
+}
diff --git a/apps/frontend_llmops/src/i18n/locales/zh-TW.ts b/apps/frontend_llmops/src/i18n/locales/zh-TW.ts
new file mode 100644
index 0000000..4ecea1f
--- /dev/null
+++ b/apps/frontend_llmops/src/i18n/locales/zh-TW.ts
@@ -0,0 +1,923 @@
+export default {
+  common: {
+    refresh: '重新整理',
+    delete: '刪除',
+    cancel: '取消',
+    save: '儲存',
+    create: '建立',
+    add: '新增',
+    remove: '移除',
+    edit: '編輯',
+    close: '關閉',
+    done: '完成',
+    loading: '載入中…',
+    download: '下載',
+    retry: '重試',
+    start: '啟動',
+    stop: '停止',
+    clear: '清除',
+    clearAll: '清除全部',
+    search: '搜尋',
+    all: '全部',
+    none: '無',
+    model: '模型',
+    models: '模型',
+    status: '狀態',
+    latency: '延遲',
+    tokens: 'Tokens',
+    time: '時間',
+    path: '路徑',
+    cost: '成本',
+    key: '金鑰',
+    name: '名稱',
+    ready: '就緒',
+    failed: '失敗',
+    stopped: '已停止',
+    starting: '啟動中',
+    stopping: '停止中',
+    noData: '無資料。',
+    errorsOnly: '僅錯誤',
+    allModels: '全部模型',
+    preDownload: '先下載',
+    manage: '管理 →',
+    viewAll: '全部 →',
+    more: '更多',
+    groups: '個群組',
+    embedding: '嵌入',
+    reranking: '重排序',
+    completed: '完成',
+    running: '執行中',
+    queued: '排隊中',
+    cancelled: '已取消',
+    dataset: '資料集',
+    target: '目標',
+  },
+
+  sidebar: {
+    console: '控制台',
+    overview: '總覽',
+    models: '模型',
+    traffic: '流量',
+    requests: '請求',
+    monitoring: '監控',
+    playground: '測試台',
+    benchmark: '壓測',
+    eval: '評測',
+    library: '模型庫',
+    loraLibrary: 'LoRA 庫',
+    datasets: '資料集庫',
+    keys: 'API 金鑰',
+    usage: '使用指南',
+    resources: '資源',
+    activity: '活動',
+    modelCount: '模型 · {ready}/{total} 就緒',
+    noModels: '尚未設定模型',
+  },
+
+  statusBar: {
+    gpu: 'GPU',
+    ready: '就緒',
+    switchLight: '切換至淺色',
+    switchDark: '切換至深色',
+    live: '即時',
+    polling: '輪詢',
+    connecting: '連線中',
+    offline: '離線',
+  },
+
+  overview: {
+    readyModels: '就緒模型',
+    requestCount: '請求次數',
+    latencyP95: '延遲 p95',
+    gpuUtil: 'GPU 使用率',
+    failedCount: '{n} 個失敗',
+    allNormal: '全部正常',
+    errorRate: '{rate} 錯誤率',
+    processedTokens: '已處理 {n} tokens',
+    deviceCount: '{n} 個裝置',
+    models: '模型',
+    noModelsYet: '尚未設定模型。',
+    activity: '活動',
+    noRecentEvents: '無最近事件。',
+    recentRequests: '最近請求',
+    traffic: '流量 →',
+    noRequestRecords: '尚無請求記錄。',
+    tableTime: '時間',
+    tableModel: '模型',
+    tablePath: '路徑',
+    tableStatus: '狀態',
+    tableLatency: '延遲',
+  },
+
+  models: {
+    searchPlaceholder: '搜尋模型…',
+    all: '全部',
+    llm: 'LLM',
+    embedding: '嵌入',
+    groupCount: '{n} 個群組 · {ready} 就緒 · {failed} 失敗',
+    addModel: '新增模型',
+    noMatch: '找不到符合的模型。',
+    clearFilter: '試著清除篩選條件。',
+    noConfig: 'config.yaml 中尚未設定模型。',
+  },
+
+  traffic: {
+    modelUsage: '各模型用量',
+    tableModel: '模型',
+    tableRequests: '請求次數',
+    tableErrors: '錯誤數',
+    tableAvg: '平均',
+    noUsage: '尚無用量記錄。',
+    routerLoadBalancing: '路由器負載均衡',
+    routerLoadDesc: '線條粗細 = 實際流量佔比（來自請求記錄）· ★ = 路由器下次選擇的最低分實例',
+    strategy: '策略',
+    scenarioTitle: '各策略適合的場景',
+    scenarioFooter: '此下拉切換的是全域預設;在 config.yaml 為某群組設定 routing_strategy 會覆寫此處。',
+    noLlmGroups: '尚未設定 LLM 群組。',
+    requestLog: '請求記錄',
+    noRequests: '尚無請求。',
+    strategyChanged: '路由策略已切換為「{name}」',
+    strategyChangedDesc: '下一個請求起生效。未持久化，router 重啟後回到預設。',
+    strategyChangeFailed: '切換路由策略失敗',
+    strategyInfo: {
+      least_load: '請求長短不一、要平均各副本飽和度。通用安全的預設。',
+      round_robin: '同質 GPU、請求差異不大,或想要可預測的均分 / 當 baseline。',
+      random: '大量短請求、要最低決策成本的無狀態分流。',
+      least_inflight: '請求耗時相近,且不想被 ~1 秒 metrics 抓取延遲影響時。',
+      p2c: '突發流量下,想避免大家一窩蜂衝向同一個「目前最閒」的副本。',
+      session_affinity: '多輪對話 / Playground:同一會話黏同一台,提升 KV cache 重用（需帶 X-Session-Id 或 user,否則退回最低負載）。',
+      prefix_affinity: '固定 system prompt、RAG / few-shot 模板等高前綴重複率的請求。',
+    },
+  },
+
+  requests: {
+    searchPlaceholder: '搜尋模型 / 路徑 / 金鑰…',
+    errorsOnly: '僅錯誤',
+    costPerMTok: '$/1M tokens',
+    recent: '最近 {n}',
+    requestCount: '請求數',
+    totalTokens: '總 tokens',
+    errorRate: '錯誤率',
+    estimatedCost: '估算成本',
+    tableTime: '時間',
+    tableModel: '模型',
+    tablePath: '路徑',
+    tableStatus: '狀態',
+    tableLatency: '延遲',
+    tableTokens: 'tokens',
+    tableCost: '成本',
+    tableKey: '金鑰',
+    noRecords: '尚無請求紀錄。',
+    loadFailed: '無法載入請求紀錄',
+  },
+
+  monitoring: {
+    overview: '總覽',
+    vllmCapacity: 'vLLM 容量',
+    vllmPerf: 'vLLM 效能',
+    vllmQuery: 'vLLM 請求',
+    gpu: 'GPU',
+    host: '主機',
+    openGrafana: '在 Grafana 開啟',
+  },
+
+  playground: {
+    chat: '對話',
+    embeddingRerank: '嵌入 / 重排序',
+    thinkingProcess: '💭 思考過程',
+    sendPrompt: '發送訊息以透過路由器測試 {model}。',
+    inputPlaceholder: '輸入訊息…（Enter 送出，Shift+Enter 換行）',
+    comparePlaceholder: '同一個問題會同時送給所有選中的模型…（Enter 送出）',
+    selectModelsHint: '在右側選擇至少一個模型以開始並排對比。',
+    waitingPrompt: '等待提問…',
+    modelsParallel: '{n} 個模型並排',
+    params: '參數',
+    compareMode: '對比模式（多模型同問題）',
+    systemPrompt: '系統提示（System prompt）',
+    systemPromptPlaceholder: '留空則不送。例如：你是一位專業的繁體中文助理。',
+    modelReady: '模型（僅顯示已就緒）',
+    noReadyModels: '目前沒有已啟動的模型，請先至「模型」頁啟動。',
+    modelMulti: '模型（可多選，僅顯示已就緒）',
+    noReadyModelsShort: '目前沒有已啟動的模型。',
+    maxTokens: '最大 Tokens',
+    temperature: '溫度',
+    streamResponse: '串流回應',
+    request: '請求',
+    result: '結果',
+    modelLabel: '模型（{mode}，僅顯示已就緒）',
+    noModelsForMode: '此模式無可用模型。',
+    embNotStarted: 'embedding server 未啟動，請先至「模型」頁啟動。',
+    queryLabel: '查詢（設定後進入重排序模式）',
+    queryPlaceholder: '留空則為純嵌入模式',
+    inputLabel: '輸入（每行一筆）',
+    rerank: '重排序',
+    embed: '嵌入',
+    dimVector: '{n} 維向量',
+    runToSee: '執行請求以查看{type}。',
+    relevanceScores: '相關性分數',
+    vectorDimensions: '向量維度',
+    firstToken: '首字',
+    chatFailed: '對話請求失敗',
+    embedFailed: '嵌入請求失敗',
+    emptyResponse: '（空回應）',
+    stopGeneration: '停止生成',
+  },
+
+  benchmark: {
+    title: '壓測',
+    description: '評測模型的「速度」（吞吐 / 延遲，與評測的答對率不同）。支援並發 sweep、速率 open-loop、多輪對話、SLA 自動調優，以及 embedding / rerank 吞吐與單請求速度基準。部分模式可先在',
+    datasetsLink: '資料集庫',
+    descriptionEnd: '下載資料集。',
+    configTitle: '壓測設定',
+    modelLabel: '模型',
+    notStarted: '（未啟動）',
+    embModelLabel: '嵌入模型',
+    rerankModelLabel: '重排序模型',
+    embNotStarted: 'embedding server 未啟動，請先至「模型」頁啟動。',
+    noModelsForMode: '此模式無可用模型。',
+    modeSweep: '並發 Sweep',
+    modeOpenloop: '速率 Open-loop',
+    modeMultiturn: '多輪對話',
+    modeSla: 'SLA 調優',
+    modeSpeed: '速度基準',
+    modeEmbedding: '嵌入 Embedding',
+    modeRerank: '重排序 Rerank',
+    targetLabel: '目標',
+    targetRouter: '路由器（整體 + 負載平衡）',
+    targetInstance: '單一實例',
+    instanceLabel: '實例',
+    datasetLabel: '資料集',
+    endpointLabel: '端點',
+    parallelLabel: '並發點（逗號分隔，掃描）',
+    reqPerPoint: '每點請求數',
+    warmupRatio: '預熱比例',
+    rateLabel: '速率（req/s，逗號分隔，掃描）',
+    reqPerRate: '每速率請求數',
+    maxDuration: '最長秒數（0=不限）',
+    mtDatasetLabel: '資料集',
+    mtShareGpt: 'ShareGPT 中文（真實對話）',
+    mtRandom: 'random（隨機生成）',
+    mtCustom: 'custom（自備 JSONL）',
+    mtDatasetPath: '資料路徑（伺服器端 JSONL）',
+    mtConcurrent: '並發對話數（可逗號掃描）',
+    mtConvPerPoint: '每點對話數',
+    mtMinTurns: '最少輪數',
+    mtMaxTurns: '最多輪數',
+    mtMaxDuration: '最長秒數（0=不限，避免牆鐘失控）',
+    slaVariable: '搜尋變數',
+    slaParallel: '並發 parallel',
+    slaRate: '速率 rate（open-loop）',
+    slaConditions: 'SLA 條件（多條 = OR）',
+    slaLower: '下界',
+    slaUpper: '上界',
+    slaRunsPerPoint: '每點 runs',
+    slaFixedParallel: '固定並發（rate 模式）',
+    speedDesc: '單請求標準速度（並發 1）。固定 prompt 長度{lengths}，打 /v1/completions 避免 chat template 干擾。',
+    speedLengthsShort: ' 1 / 6k / 14k / 30k',
+    speedLengthsLong: ' 63k / 129k',
+    speedLongCtx: '長上下文（63k / 129k）',
+    embParallel: '並發點（逗號分隔，掃描）',
+    embReqPerPoint: '每點請求數',
+    embInputLen: '輸入長度（token）',
+    embDocsPerReq: '每筆文件數',
+    outputTokens: '輸出 tokens',
+    outputTokensFixed: '輸出 tokens（固定）',
+    inputLength: '輸入長度',
+    prefixLength: '前綴長度（prefix cache）',
+    nameLabel: '名稱（選填）',
+    namePlaceholder: '例如：q05b-baseline',
+    streamLabel: '串流（量 TTFT 必須）',
+    runningBusy: '有壓測進行中…',
+    startBenchmark: '開始壓測',
+    history: '壓測歷史',
+    historyCount: '({n})',
+    compareHint: '勾選 ≥2 筆比較',
+    noHistory: '尚無壓測紀錄。',
+    comparison: '壓測比較',
+    failed: '失敗',
+    runSummary: '基本資訊',
+    fullReport: '完整報告',
+    slaMaxVar: '最大 {var}',
+    slaVarRate: '速率',
+    slaVarParallel: '並發',
+    multiTurnMetrics: '多輪指標',
+    turnsPerConv: '輪數/對話',
+    kvCacheHit: 'KV 快取命中',
+    firstTtft: '首輪 TTFT',
+    subsequentTtft: '後續輪 TTFT',
+    chartRps: 'RPS（req/s）',
+    chartGenTps: '輸出吞吐 Gen/s（tok/s）',
+    chartTtft: 'TTFT p99（ms）',
+    chartAvgLatency: '平均延遲（ms）',
+    chartP99Latency: '延遲 p99（ms）',
+    tableParallel: '並發',
+    tableRate: '速率',
+    tableAvgLatency: '平均延遲',
+    tableInputOutput: '輸入/輸出',
+    tableSuccessTotal: '成功/總數',
+    latencyDetail: '延遲 Latency (s)',
+    executionLog: '執行日誌',
+    waitingOutput: '（等待輸出…）',
+    stoppingHint: '正在停止,最多約 10 秒;仍卡住可按「強制」。',
+    forceKill: '強制終止',
+    forceConfirm: '強制終止壓測 #{id}？將立即 SIGKILL,結果會作廢。',
+    cancelFailed: '取消失敗',
+    deleteFailed: '刪除失敗',
+    deleteConfirm: '刪除壓測 #{id}？',
+    loadResultFailed: '無法載入結果',
+    startedToast: '已開始壓測 #{id}',
+    startedDesc: '可離開此頁，背景持續執行。',
+    startFailed: '無法開始壓測',
+    compareMax: '最多比較 {n} 筆',
+    compareLoadFailed: '無法載入比較資料',
+    selectModel: '請選擇一個模型',
+    enterRate: '請輸入至少一個速率',
+    enterParallel: '請輸入至少一個並發數',
+    enterMtConcurrent: '請輸入至少一個並發對話數',
+    addSlaCondition: '請至少加入一個 SLA 條件',
+    instanceNotReady: '該實例尚未就緒，無法直連',
+    modeLabel: '模式',
+    totalTestDuration: '總測試時間',
+    totalGenerated: '總生成',
+    avgOutputRate: '平均輸出速率',
+    stoppingBadge: '停止中…',
+    cancelStop: '取消(停止)',
+    forceKillHint: '強制終止(立即 SIGKILL)',
+    addToCompare: '加入比較',
+    slaMetrics: {
+      p99_latency: 'p99 延遲 (s)',
+      avg_latency: '平均延遲 (s)',
+      p99_ttft: 'p99 TTFT (ms)',
+      avg_ttft: '平均 TTFT (ms)',
+      p99_tpot: 'p99 TPOT (ms)',
+      avg_tpot: '平均 TPOT (ms)',
+      rps: 'RPS (req/s)',
+      tps: '輸出 tok/s',
+    },
+  },
+
+  eval: {
+    title: '模型評測',
+    description: '評測模型的「答對率 / 品質」（與壓測的速度不同）。先在',
+    descriptionEnd: '下載資料集，跑評測就不必等。小模型分數偏低屬正常，重點是換模型 / 調參時的比較。',
+    configTitle: '評測設定',
+    modelLabel: '模型',
+    selected: '已選',
+    noModels: '尚未設定模型',
+    offline: '· 離線',
+    multiModelHint: '多選 = 每個模型各排一個評測，依共用並發預算並行 / 排隊。',
+    targetRouter: '路由器',
+    targetInstance: '直連實例',
+    instanceOnly: '直連實例僅支援單一模型',
+    datasetLabel: '資料集',
+    cachedHint: '● = 已快取，未快取的會在執行時下載；⏬下載中的需等完成才可選。⚖ = 需裁判模型評分。',
+    longContextWarn: '⚠ 已選長上下文資料集，需模型有夠大的 max_model_len（數萬 token），否則會被截斷或回 400。',
+    toolParserWarn: '⚠ 已選真實函數調用資料集，需模型啟用 vLLM tool parser（enable_auto_tool_choice + tool_call_parser），否則分數恆為 0。',
+    subsetLabel: '已選資料集 — 主題',
+    subsetHint: '主題（subset，{n} 個，不選=全部）',
+    clearSubsets: '清除（{n}）',
+    samplesPerDataset: '每集樣本數（0=全部）',
+    repeats: '重複次數',
+    temperature: '溫度',
+    maxOutputTokens: '最大輸出 tokens',
+    batchSize: '並發數（batch size）',
+    batchSizeHint: '一次對模型發幾個並發請求；調高可跑更快，太高會排隊逾時。不影響分數。',
+    advanced: '進階設定',
+    fewShot: 'few-shot 範例數（0=各資料集預設）',
+    datasetArgsJson: 'dataset_args JSON（依資料集名覆寫，選填）',
+    datasetArgsHint: '如 few_shot_num、subset_list、shuffle。math 多採樣可配「重複次數」+ aggregation。',
+    judgeTitle: '⚖ 裁判模型',
+    judgeHint: '所選問答資料集需要 LLM 評分',
+    judgeInternal: '內部模型',
+    judgeExternal: '外部 API',
+    judgeApiUrl: 'API URL，例：https://api.openai.com/v1',
+    judgeModelId: '裁判模型 ID，例：gpt-4o-mini',
+    judgeApiKey: 'API Key（選填）',
+    judgeQualityHint: '裁判越強分數越可靠；小模型當裁判僅供參考。',
+    nameLabel: '名稱（選填）',
+    namePlaceholder: '例如：Qwen3-0.6B 基線',
+    startEvalMulti: '排入 {n} 個評測',
+    startEval: '開始評測',
+    runHistory: '評測紀錄',
+    runningCount: '執行中 {n}',
+    queuedCount: '排隊 {n}',
+    concurrencyBudget: '並發預算',
+    budgetUsage: '用量 {used}/{total}',
+    noHistory: '尚無評測紀錄。',
+    scoreComparison: '分數比較',
+    compareDataset: '資料集',
+    compareBestHint: '每列最高分以主色標示。',
+    detailReport: '完整報告',
+    queuedHint: '排隊中…等待並發預算或壓測結束。',
+    runningHint: '評測執行中…（可離開此頁）',
+    failedPrefix: '失敗：',
+    scores: '分數',
+    metric: '指標',
+    samples: '樣本',
+    score: '分數',
+    loadingDetail: '載入詳細數據…',
+    latencyP50P99: '延遲 p50 / p99',
+    outputThroughput: '輸出吞吐',
+    avgInputTok: '平均輸入 tok',
+    avgOutputTok: '平均輸出 tok',
+    subsetBreakdown: '· 分科目',
+    whatDoesItTest: '這個評測在測什麼？',
+    collapseSamples: '收起逐題瀏覽',
+    expandSamples: '逐題瀏覽（看每題對錯 / 答案）',
+    executionLog: '執行日誌',
+    noLog: '（無日誌）',
+    loadResultFailed: '無法載入結果',
+    loadCatalogFailed: '無法讀取評測資料集',
+    selectModelRequired: '請至少選擇一個模型',
+    selectDatasetRequired: '請至少選擇一個資料集',
+    instanceSingleOnly: '直連實例僅支援單一模型',
+    instanceNotReady: '該實例尚未就緒，無法直連',
+    judgeModelRequired: '請設定裁判模型',
+    judgeApiRequired: '外部裁判需要 API URL',
+    invalidDatasetArgs: '進階 dataset_args 不是合法 JSON',
+    startedToast: '已排入 {n} 個評測',
+    startedDesc: '可離開此頁，背景持續執行。',
+    evalFailed: '無法評測 {model}',
+    cancelRequested: '已要求取消',
+    cancelFailed: '取消失敗',
+    deleteConfirm: '刪除評測 #{id}？',
+    deleteFailed: '刪除失敗',
+    budgetSet: '並發預算已設為 {n}',
+    budgetSetFailed: '無法調整預算',
+    addCompare: '加入比較',
+    cancelQueue: '取消排隊',
+    downloading: '⏬下載中',
+    defaultFewShot: '· 預設 {n}-shot',
+    datasetArgsPlaceholder: '例：{"arc": {"subset_list": ["ARC-Challenge"]}}',
+    concurrencyBudgetHint: '所有並行評測的 batch_size 加總上限；填滿就排隊。即時生效，重啟回預設。',
+  },
+
+  library: {
+    title: '模型庫',
+    description: '預先下載 Hugging Face 權重到共用快取，啟動模型時就不必等待。Gated 模型需在後端設定',
+    descriptionEnd: '。',
+    cachedModels: '已快取模型',
+    diskRemaining: '磁碟剩餘',
+    diskUsed: '佔用空間',
+    downloadNew: '下載新模型',
+    repoId: 'Hugging Face repo id',
+    repoPlaceholder: '例如：Qwen/Qwen3-0.6B',
+    noCachedModels: '快取中尚無模型。',
+    files: '檔',
+    size: '大小',
+    updated: '更新',
+    deleteCache: '刪除快取',
+    deleteConfirm: '確定刪除已快取的 {repo}？此操作會釋放磁碟空間。',
+    deleteFailed: '刪除失敗',
+    deleted: '已刪除 {repo}',
+    downloadStarted: '開始下載 {repo}',
+    downloadStartedDesc: '可離開此頁，下載會在背景繼續。',
+    downloadFailed: '無法開始下載',
+    loadCacheFailed: '無法讀取快取',
+    occupiedSpace: '佔用空間',
+    downloading: '下載中',
+    downloadComplete: '完成',
+    downloadFailedBadge: '失敗',
+  },
+
+  loraLibrary: {
+    title: 'LoRA 庫',
+    description: '管理本地 LoRA adapter。從 Hugging Face 下載、或把 adapter 資料夾直接放進',
+    descriptionEnd: '也會出現在這。新增 / 編輯模型時可在「LoRA Adapters」區從這裡挑選掛載。',
+    adapters: 'Adapters',
+    diskUsed: '佔用空間',
+    diskRemaining: '磁碟剩餘',
+    downloadAdapter: '下載 adapter',
+    repoId: 'Hugging Face repo id',
+    repoPlaceholder: '例如：jeeejeee/llama32-3b-text2sql-spider',
+    localName: '本地名稱（選填）',
+    localNamePlaceholder: '預設取 repo 結尾',
+    localAdapters: '本地 adapters',
+    unknownBase: '未知 base',
+    deleteConfirm: '確定刪除 LoRA「{name}」？此操作會移除磁碟上的 adapter 檔案。',
+    deleteFailed: '刪除失敗',
+    deleted: '已刪除 {name}',
+    downloadStarted: '開始下載 {repo}',
+    downloadStartedDesc: '可離開此頁，下載會在背景繼續。',
+    downloadFailed: '無法開始下載',
+    loadFailed: '無法讀取 LoRA 庫',
+    noAdapters: '庫中尚無 adapter。從上方下載，或把資料夾放進',
+  },
+
+  datasets: {
+    title: '資料集庫',
+    description: '預先下載資料集到共用 ModelScope 快取，跑壓測 / 評測時就不必等首次下載。',
+    descriptionRandom: 'random / 速度基準為即時生成，無需下載。',
+    cachedTotal: '已快取 / 總數',
+    diskUsed: '佔用空間',
+    diskRemaining: '磁碟剩餘',
+    diskTotal: '共 {size}',
+    perfDatasets: '壓測資料集',
+    perfHint: '下載後可在「壓測」頁選用',
+    evalDatasets: '評測資料集',
+    evalHint: '下載後可在「評測」頁選用',
+    downloadFailed: '下載「{label}」失敗：',
+    loadFailed: '無法讀取資料集',
+    downloadStarted: '開始下載',
+    downloadStartedDesc: '可離開此頁，下載會在背景繼續。',
+    downloadStartFailed: '無法開始下載',
+    deleteConfirm: '確定刪除已快取的「{label}」？此操作會釋放磁碟空間。',
+    deleted: '已刪除 {label}',
+    deleteFailed: '刪除失敗',
+  },
+
+  keys: {
+    title: 'API 金鑰',
+    description: '用於向路由器發送推論請求（Authorization: Bearer …）。金鑰只在建立時顯示一次。',
+    authDisabled: '後端未設定 LLMOPS_ADMIN_TOKEN，目前驗證為關閉狀態 — 金鑰可建立，但路由器尚未強制要求金鑰（需設定 LLMOPS_REQUIRE_API_KEY=true）。',
+    locked: '需要管理員權杖才能管理金鑰。',
+    unlock: '解鎖',
+    createNew: '建立新金鑰',
+    nameLabel: '名稱（用於用量歸屬）',
+    namePlaceholder: '例如：team-rag、ci-bot',
+    rateLimit: '速率上限（次/分）',
+    ratePlaceholder: '不限',
+    issuedKeys: '已發行金鑰',
+    revoked: '已撤銷',
+    perMin: '/分',
+    requestCount: '次',
+    lastUsed: '最後使用：',
+    noKeys: '尚無金鑰。',
+    revokeTitle: '撤銷金鑰',
+    keyCreated: '金鑰已建立',
+    copyImmediate: '請立即複製此金鑰，關閉後將無法再次顯示。',
+    copySuccess: '已複製到剪貼簿',
+    copyFailed: '複製失敗，請手動選取',
+    createFailed: '建立金鑰失敗',
+    revokeFailed: '撤銷失敗',
+    revokeSuccess: '已撤銷 {name}',
+    loadFailed: '無法載入金鑰',
+  },
+
+  usage: {
+    quickStart: '快速開始',
+    quickStartDesc: 'Router 是 OpenAI 相容的統一入口，請求的 model 欄位填「群組名」，Router 會自動選負載最低的實例。',
+    step1: '確認 Router 已啟動：',
+    step2: '在 Models 頁把要用的模型 Start 到',
+    step2End: '',
+    step3: '用下方任一語言呼叫；金鑰可任意填（Router 不驗證）',
+    chatCompletions: 'Chat Completions',
+    modelLabel: '模型',
+    streamLabel: '串流 (stream)',
+    loraDropdownHint: '下拉選單裡的 LoRA 項：把 model 換成它的 served name 即可，其餘請求完全不變。',
+    loraTitle: 'LoRA Adapters',
+    loraDesc: '呼叫 LoRA 與一般模型相同，只把 model 改成 adapter 的 served name（例',
+    loraDescEnd: '），Router 會路由到對應 base 模型的實例。',
+    listModelsLabel: '列出可用模型 / LoRA · cURL',
+    filterLoraLabel: '只挑出 LoRA · Python',
+    loraNote1: '· 前提：base 模型需以 enable_lora 啟動，且 adapter 已掛載（config 靜態掛，或在模型詳情抽屜熱載入）。',
+    loraNote2: '· 打一個未掛載的名稱會回 404 — Model not found。',
+    loraNote3: '· Base vs LoRA A/B：同一請求只換 model；Playground 比較模式可並排對照。',
+    embTitle: 'Embeddings & Rerank',
+    embDesc: '同一個 /v1/embeddings 端點：帶 query 欄位即切換為 reranking。',
+    embCurlLabel: 'Embedding · cURL',
+    embPyLabel: 'Embedding · Python',
+    rerankCurlLabel: 'Rerank · cURL',
+  },
+
+  resources: {
+    cpu: '處理器',
+    memory: '記憶體',
+    gpuProcesses: 'GPU 程序',
+    gpuProcessesDesc: '佔用 GPU 記憶體的程序（約每 5 秒更新）',
+    tablePid: 'PID',
+    tableUser: '使用者',
+    tableName: '名稱',
+    tableCommand: '指令',
+    tableGpuMem: 'GPU 記憶體',
+    noGpuProcesses: '無 GPU 程序。',
+  },
+
+  activity: {
+    eventCount: '{n} 個事件',
+    noEvents: '尚無事件記錄。',
+  },
+
+  topology: {
+    title: '系統拓撲',
+    clickHint: '· 點擊節點可深入查看',
+    legendData: '資料',
+    legendPlacement: '部署',
+    legendControl: '控制',
+    legendLora: 'LoRA',
+    client: '用戶端',
+    clientRequests: '{n} 請求',
+    router: '路由器',
+    routerError: '{rate} 錯誤',
+    backend: '後端',
+    backendReady: '{ready}/{total} 就緒',
+    groupRunWait: '執行 {running} · 等待 {waiting}',
+    embeddingNode: '嵌入',
+    gpuConfigured: '已設定 · 未偵測到',
+    kvSharedLabel: '共用 KV cache',
+  },
+
+  addModel: {
+    createTitle: '新增模型',
+    editTitle: '編輯模型',
+    pasteCommand: '貼上 vLLM 啟動指令',
+    parseCommand: '解析指令',
+    parseFailed: '無法解析指令',
+    groupLabel: '群組',
+    groupExists: '已存在群組 — 將新增為新副本。',
+    instanceLabel: '實例 ID',
+    keyExists: '{key} 已存在。',
+    hostLabel: '主機',
+    portLabel: '連接埠',
+    portInUse: '連接埠 {port} 已被其他實例使用。',
+    gpuLabel: 'GPU（cuda_device）',
+    gpuAuto: '無 / 自動',
+    modelTagLabel: '模型標籤',
+    routingLabel: '路由策略（負載平衡）',
+    routingDefault: '跟隨全域預設',
+    routingHint: '此群組請求的分流方式;留空則跟隨全域設定（可在「流量」頁切換）。多副本才有效。',
+    kvShareLabel: '共用 KV Cache（跨 instance）',
+    kvShareDesc: '同群組各副本透過共享 store（/kv_cache）重用彼此算過的 KV，相同前綴不必重算。多副本 + 高前綴重複率（固定 system prompt / RAG / 多輪對話）效益最大；關閉則各副本各自獨立 KV。',
+    groupSharedWarn: 'vLLM 參數為群組共用 — 此變更將套用至群組 {group} 的全部 {n} 個副本。',
+    weightsCached: '權重已快取',
+    weightsDownloading: '下載權重中…',
+    weightsDownloadFailed: '下載失敗：',
+    weightsNotCached: '權重尚未快取 — 首次啟動會即時下載（較慢）。',
+    accelTitle: '⚡ 加速設定（vLLM 推理參數）',
+    accelTemplates: '情境模板：',
+    accelLatency: '低延遲（聊天 / agent）',
+    accelThroughput: '高吞吐（多併發）',
+    accelClear: '清除（回預設）',
+    accelHint: '空白＝用 vLLM 預設。改了需重啟模型生效。組合才有感。',
+    advancedTitle: '進階（推測解碼 / prefix hash / chunked prefill / offload）',
+    ngramSpec: 'N-gram 推測解碼（低 QPS 降單請求延遲）',
+    offloadHint: '把權重 offload 到 CPU RAM 換「跑得起來」(會變慢)，非加速。',
+    partialPrefillHint: '同時有短問題＋長 prompt 時：把 partial 設 >1 且 long 設小，短請求可插隊不被長的卡住。',
+    vllmParams: 'vLLM 參數（model_config）',
+    addParam: '新增',
+    noExtraParams: '無額外參數。',
+    flagPlaceholder: '旗標（snake_case）',
+    valuePlaceholder: '值',
+    toolCallingTitle: '🛠 工具調用（tool calling）參數參考',
+    toolCallingDesc: '要讓模型支援 tool_choice="auto"，需加 enable_auto_tool_choice=true + tool_call_parser=<parser>，reasoning 模型再加 reasoning_parser。parser 要對得上模型輸出格式，別看品牌猜。',
+    toolCallingPresetHint: '點一下帶入推薦參數：',
+    toolCallingFooter: '沒有對應 parser 的模型請勿亂加。',
+    loraTitle: 'LoRA Adapters',
+    addLora: '新增',
+    loraServedName: 'served name（如 sql-lora）',
+    loraPickAdapter: '— 選 adapter / 自填 path —',
+    loraTyped: '（自填）',
+    noLora: '無 LoRA。新增一列會自動補上 enable_lora=true；served name 即推論時 model 欄位要填的名稱。adapter 從 LoRA 庫挑選，或自填 path。',
+    loraAutoHint: '從庫選 adapter 會自動帶入 base 並把 max_lora_rank 設到對齊的 rank。Base model 須支援 LoRA（vLLM SupportsLoRA）。',
+    loraBaseMismatch: '此 adapter 的 base 是 {adapterBase}，與本模型 {modelTag} 不符',
+    newGroup: '新群組',
+    saveChanges: '儲存變更',
+    addModelBtn: '新增模型',
+    createSuccess: '已新增 {key}',
+    createSuccessDesc: '目前已停止 — 請按「啟動」以啟用。',
+    editSuccess: '已更新 {key}',
+    editSuccessDesc: '變更將於下次啟動時生效。',
+    createFailed: '新增模型失敗',
+    editFailed: '更新模型失敗',
+    routerReloadFailed: '路由器未重新整理',
+    routerReloadCreateDesc: '模型已新增，但路由器無法連線 — 重新載入前將無法路由至此模型。',
+    routerReloadEditDesc: '變更已儲存，但路由器無法連線。',
+    downloadStarted: '開始下載 {repo}',
+    downloadStartedDesc: '可關閉此視窗，下載會在背景繼續。',
+    downloadFailed: '無法開始下載',
+    quantHint: '預量化模型（AWQ / GPTQ）直接把 model_tag 換成量化版即可，vLLM 會自動偵測，不用設此欄。',
+    defaultLabel: '預設',
+    autoLabel: '自動',
+    notSet: '未設定',
+    forceOn: '強制開',
+    off: '關',
+    on: '開',
+    onExperimental: '開（實驗性）',
+    fastestStartup: '最快啟動',
+    mostAggressive: '最激進',
+    gpuMemHint: '沿用現值；留空＝vLLM 預設',
+    kvCacheDefault: '預設（auto，不量化）',
+    prefixCacheDefault: '預設（開）',
+    chunkedPrefillDefault: '預設（開）',
+    asyncSchedDefault: '預設（關）',
+    quantDefault: '預設（不量化，或載入量化版自動偵測）',
+    quantBnb: 'bitsandbytes（4-bit NF4，任何模型線上量化）',
+    quantFp8Tensor: 'fp8_per_tensor（8-bit；Ampere 退 W8A16）',
+    quantFp8Block: 'fp8_per_block（8-bit；Ampere 退 W8A16）',
+    quantInt8: 'int8_per_channel_weight_only（8-bit INT8）',
+    hashDefault: '預設（sha256）',
+    hashSha256: 'sha256（最穩）',
+    hashXxhash: 'xxhash（較快，非密碼安全）',
+    qwen3Thinking: 'Qwen3（含 thinking）',
+    toolCallingDocRef: '完整對照見 docs/vllm_auto_tool_整理.md。沒有對應 parser 的模型請勿亂加。',
+  },
+
+  modelDetail: {
+    overview: '概覽',
+    events: '事件',
+    logs: '日誌',
+    endpoint: '端點',
+    gpu: '顯示卡',
+    pid: '程序 ID',
+    managedLabel: '管理方式',
+    managedYes: '是（可控制）',
+    managedExternal: '外部',
+    uptime: '運行時間',
+    autoRestarts: '自動重啟次數',
+    startupSnapshot: '啟動容量快照',
+    kvCacheCapacity: 'KV cache 容量',
+    maxConcurrency: '最大並發',
+    concurrencyReqTok: '{n} tok/req',
+    concurrencyHint: '≈ 可同時服務 {n} 個請求',
+    memWeights: '權重',
+    memCudaGraph: 'CUDA graph',
+    memKvCache: 'KV cache',
+    startupWeightsLoad: '載權重',
+    startupModelLoad: '模型載入',
+    startupCompile: 'torch.compile',
+    startupWarmup: 'warmup',
+    gpuMemUtilTitle: '⚙ 關於 gpu_memory_utilization',
+    gpuMemUtilDesc: '新版 vLLM 把 CUDA graph 記憶體也算進這個額度。你設 {current},扣掉後實際給 KV cache 的空間只等於舊版的 {effective}。想要更大 KV cache（更高並發 / 更長 context）可在停止後於「編輯參數」提到 {suggested}，但顯存餘裕會變小、OOM 風險上升（小顯卡尤其要保守）。',
+    servedModels: '服務的模型',
+    routingPolicy: '路由策略（負載平衡）',
+    vllmParams: 'vLLM 參數（model_config）',
+    loraAdapters: 'LoRA Adapters',
+    hotLoadEnabled: '熱加載已啟用',
+    hotLoad: '載入',
+    hotUnload: '熱卸載',
+    hotLoadPick: '— 從 LoRA 庫選 adapter 熱載入 —',
+    hotLoadSuccess: '已熱載入 {name}',
+    hotLoadSuccessDesc: '已套用到所有就緒實例並更新路由。',
+    hotLoadFailed: '熱載入失敗',
+    hotUnloadConfirm: '卸載 LoRA「{name}」？會從所有就緒實例移除並停止路由。',
+    hotUnloadSuccess: '已卸載 {name}',
+    hotUnloadFailed: '卸載失敗',
+    hotLoadHint: '熱載入會套用到所有就緒實例並更新路由，且寫入 overlay（重啟後仍在）。',
+    coldHint: '推論時把 served name 填進 model 欄位即可（Playground / 評測 / 壓測皆可選）。',
+    hotLoadEnableHint: '要在不重啟下熱加載 LoRA：編輯本模型、勾選 enable_lora + allow_runtime_lora，重啟後即可在此熱載入 / 卸載。',
+    liveMetrics: '即時負載（路由器 /metrics）',
+    metricsRunning: '執行中',
+    metricsWaiting: '等待中',
+    metricsKvCache: 'KV 快取',
+    metricsGenTokens: '生成 tokens',
+    noMetrics: '無即時指標（路由器無法連線或模型閒置）。',
+    usageSection: '用量',
+    requestCount: '請求次數',
+    lastError: '最後錯誤',
+    noEventRecords: '尚無事件記錄。',
+    filterLogs: '篩選日誌行…',
+    downloadLogs: '下載完整日誌',
+    noLogContent: '無日誌內容。',
+    noFilterMatch: '無符合篩選的日誌行。',
+    startLabel: '啟動',
+    startLocked: '已有模型啟動中（{name}），請待其完成',
+    stopLabel: '停止',
+    terminateLabel: '終止',
+    abortLabel: '中止啟動',
+    editParams: '編輯參數（需先停止；vLLM 參數為群組共用）',
+    removeModel: '移除模型（僅限動態新增的模型）',
+    removeSuccess: '已移除 {key}',
+    removeFailed: '無法移除模型',
+    externalModel: '外部模型 — 非本後端管理',
+    editEmbedding: '編輯參數（需先停止 embedding server）',
+  },
+
+  modelGroup: {
+    readyCount: '{ready}/{total} 就緒',
+    embedding: '嵌入',
+    reranking: '重排序',
+    crashRestart: '崩潰後自動重啟 {n} 次',
+    liveLoad: '即時負載（路由器 /metrics）',
+    runningDesc: ' 執行中 — 目前正在生成的請求',
+    waitingDesc: ' 等待中 — 此實例的排隊請求',
+    kvCacheUsed: 'KV 快取 {pct} 已使用',
+    externalNotManaged: '外部模型 — 非本後端管理',
+    terminateHint: '終止殘留進程',
+    abortStartup: '中止啟動',
+    stopHint: '停止',
+    startAll: '全部啟動',
+    stopAll: '全部停止',
+    addInstance: '新增實例',
+    showMore: '顯示更多 {n} 個',
+    collapse: '收起',
+    servedModels: '服務的模型',
+  },
+
+  routingStrategies: {
+    least_load: '最低負載',
+    round_robin: '輪詢',
+    random: '隨機',
+    least_inflight: '最低在途',
+    p2c: '二擇一',
+    session_affinity: '會話親和',
+    prefix_affinity: '前綴親和',
+  },
+
+  routerFan: {
+    nextPick: '下次選擇',
+    kvShared: '共用 KV',
+    kvIndependent: '各自 KV',
+    kvSharedTooltip: '此群組各副本共用 KV cache（/kv_cache）',
+    kvIndependentTooltip: '各副本各自獨立 KV cache',
+    kvStoreLabel: '共用 KV Cache · /kv_cache',
+  },
+
+  gpuGauge: {
+    util: '使用率',
+    vram: '顯存',
+    power: '功耗',
+    temp: '溫度',
+    memory: '記憶體',
+  },
+
+  codeBlock: {
+    copy: '複製',
+    copied: '已複製！',
+    copyFailed: '複製失敗',
+  },
+
+  addInstance: {
+    title: '新增實例',
+    sharedSettingsTitle: '沿用此群組的共用設定',
+    sharedSettingsHint: '同群組的所有實例共用 vLLM 參數，這裡只需設定本實例的位置。',
+    instanceIdLabel: '實例 ID',
+    instanceIdPlaceholder: '例如：qwen3-5',
+    idConflict: '此 ID 已存在於群組中。',
+    portConflict: '此 port 已被佔用。',
+    cudaDeviceLabel: 'CUDA 裝置',
+    createSuccess: '已新增實例 {key}',
+    createSuccessDesc: '目前已停止 — 請按「啟動」以啟用。',
+    createFailed: '新增實例失敗',
+  },
+
+  datasetCard: {
+    cached: '已快取',
+    notCached: '未快取',
+    downloading: '下載中',
+    downloadFailed: '失敗',
+    preview: '預覽',
+    deleteCache: '刪除快取',
+    warmingHint: '正在建立快取，完成後預覽即可秒開',
+    warming: '預熱中…',
+  },
+
+  datasetPreview: {
+    title: '預覽 · {key}',
+    loading: '載入資料中…（首次預覽需建立快取，可能較久）',
+    introTab: '介紹',
+    samplesTab: '範例資料（{n}）',
+    subjectCount: '{n} 個主題',
+    noDescription: '此資料集沒有提供介紹。',
+    showingFirst: '顯示前 {n} 筆（資料集更大）',
+    totalRows: '共 {n} 筆',
+    answer: '答案：',
+  },
+
+  embeddingModel: {
+    editTitle: '編輯{type}模型',
+    typeEmbedding: '嵌入',
+    typeReranking: '重排序',
+    paramHint: '參數於 embedding server 停止後編輯，下次啟動生效。',
+    paramsLabel: '參數',
+    paramKeyPlaceholder: '參數名（snake_case）',
+    paramValuePlaceholder: '值（true/false/數字/字串）',
+    noParams: '無參數。',
+    updateSuccess: '已更新 {name}',
+    updateSuccessDesc: '變更將於 embedding server 下次啟動時生效。',
+    updateFailed: '更新失敗',
+  },
+
+  evalSamples: {
+    dataset: '資料集',
+    loadFailed: '無法載入逐題資料',
+    loadDetailFailed: '無法載入此題詳情',
+    filterAll: '全部',
+    filterCorrect: '答對',
+    filterWrong: '答錯',
+    pageInfo: '第 {page} / {total} 頁 · 共 {count} 題',
+    colResult: '結果',
+    colModelAnswer: '模型答案（節錄）',
+    colModelOutput: '模型輸出（節錄）',
+    colStandardAnswer: '標準答案',
+    correct: '答對',
+    wrong: '答錯',
+    ruleScoreHint: '此為規則評分（檢查是否遵守指令），無單一標準答案；對錯看上方各項指標。',
+    standardAnswer: '標準答案',
+    modelAnswer: '模型回答',
+    promptLabel: '題目 / Prompt',
+    noMatchingSamples: '沒有符合的題目。',
+  },
+
+  modelControl: {
+    title: '管理員驗證',
+    description: '此操作需要管理員權杖（後端 LLMOPS_ADMIN_TOKEN）。',
+    tokenPlaceholder: '管理員權杖',
+    tokenInvalid: '權杖無效。',
+    confirm: '確認',
+  },
+
+  perfChart: {
+    noData: '無資料',
+    concurrency: '並發',
+  },
+}
diff --git a/apps/frontend_llmops/src/main.ts b/apps/frontend_llmops/src/main.ts
index 5dcad83..e1ed49b 100644
--- a/apps/frontend_llmops/src/main.ts
+++ b/apps/frontend_llmops/src/main.ts
@@ -5,10 +5,12 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import i18n from './i18n'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
+app.use(i18n)
 
 app.mount('#app')
diff --git a/apps/frontend_llmops/src/router/index.ts b/apps/frontend_llmops/src/router/index.ts
index dc0e50d..52ba0e6 100644
--- a/apps/frontend_llmops/src/router/index.ts
+++ b/apps/frontend_llmops/src/router/index.ts
@@ -6,91 +6,91 @@ const router = createRouter({
     {
       path: '/',
       name: 'overview',
-      meta: { title: 'Overview' },
+      meta: { title: 'overview' },
       component: () => import('@/views/OverviewView.vue'),
     },
     {
       path: '/models',
       name: 'models',
-      meta: { title: 'Models' },
+      meta: { title: 'models' },
       component: () => import('@/views/ModelsView.vue'),
     },
     {
       path: '/traffic',
       name: 'traffic',
-      meta: { title: 'Traffic' },
+      meta: { title: 'traffic' },
       component: () => import('@/views/TrafficView.vue'),
     },
     {
       path: '/requests',
       name: 'requests',
-      meta: { title: 'Requests' },
+      meta: { title: 'requests' },
       component: () => import('@/views/RequestsView.vue'),
     },
     {
       path: '/monitoring',
       name: 'monitoring',
-      meta: { title: 'Monitoring' },
+      meta: { title: 'monitoring' },
       component: () => import('@/views/MonitoringView.vue'),
     },
     {
       path: '/benchmark',
       name: 'benchmark',
-      meta: { title: 'Benchmark' },
+      meta: { title: 'benchmark' },
       component: () => import('@/views/BenchmarkView.vue'),
     },
     {
       path: '/playground',
       name: 'playground',
-      meta: { title: 'Playground' },
+      meta: { title: 'playground' },
       component: () => import('@/views/PlaygroundView.vue'),
     },
     {
       path: '/library',
       name: 'library',
-      meta: { title: 'Model Library' },
+      meta: { title: 'library' },
       component: () => import('@/views/LibraryView.vue'),
     },
     {
       path: '/lora-library',
       name: 'lora-library',
-      meta: { title: 'LoRA Library' },
+      meta: { title: 'loraLibrary' },
       component: () => import('@/views/LoraLibraryView.vue'),
     },
     {
       path: '/datasets',
       name: 'datasets',
-      meta: { title: 'Datasets' },
+      meta: { title: 'datasets' },
       component: () => import('@/views/DatasetsView.vue'),
     },
     {
       path: '/eval',
       name: 'eval',
-      meta: { title: 'Evaluation' },
+      meta: { title: 'eval' },
       component: () => import('@/views/EvalView.vue'),
     },
     {
       path: '/keys',
       name: 'keys',
-      meta: { title: 'API Keys' },
+      meta: { title: 'keys' },
       component: () => import('@/views/KeysView.vue'),
     },
     {
       path: '/usage',
       name: 'usage',
-      meta: { title: '使用指南' },
+      meta: { title: 'usage' },
       component: () => import('@/views/UsageView.vue'),
     },
     {
       path: '/resources',
       name: 'resources',
-      meta: { title: 'Resources' },
+      meta: { title: 'resources' },
       component: () => import('@/views/ResourcesView.vue'),
     },
     {
       path: '/activity',
       name: 'activity',
-      meta: { title: 'Activity' },
+      meta: { title: 'activity' },
       component: () => import('@/views/ActivityView.vue'),
     },
     { path: '/:pathMatch(.*)*', redirect: '/' },
diff --git a/apps/frontend_llmops/src/views/ModelsView.vue b/apps/frontend_llmops/src/views/ModelsView.vue
index 14a4f0d..5c63736 100644
--- a/apps/frontend_llmops/src/views/ModelsView.vue
+++ b/apps/frontend_llmops/src/views/ModelsView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { Plus, RefreshCw, Search } from '@lucide/vue'
 import { useModelsStore } from '@/stores/models'
 import { useAuth } from '@/composables/useAuth'
@@ -12,6 +13,7 @@ import Button from '@/components/ui/Button.vue'
 import Input from '@/components/ui/Input.vue'
 import type { ModelKind, ModelView } from '@/types/api'
 
+const { t } = useI18n()
 const models = useModelsStore()
 const { ensureUnlocked } = useAuth()
 const route = useRoute()
@@ -81,11 +83,11 @@ function openDetail(key: string) {
   drawerOpen.value = true
 }
 
-const kinds: { value: 'all' | ModelKind; label: string }[] = [
-  { value: 'all', label: '全部' },
-  { value: 'llm', label: 'LLM' },
-  { value: 'embedding', label: '嵌入' },
-]
+const kinds = computed<{ value: 'all' | ModelKind; label: string }[]>(() => [
+  { value: 'all', label: t('models.all') },
+  { value: 'llm', label: t('models.llm') },
+  { value: 'embedding', label: t('models.embedding') },
+])
 </script>
 
 <template>
@@ -94,7 +96,7 @@ const kinds: { value: 'all' | ModelKind; label: string }[] = [
     <div class="flex flex-wrap items-center gap-3">
       <div class="relative">
         <Search class="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-        <Input v-model="query" placeholder="搜尋模型…" class="w-56 pl-8" />
+        <Input v-model="query" :placeholder="$t('models.searchPlaceholder')" class="w-56 pl-8" />
       </div>
       <div class="inline-flex rounded-lg border border-border/60 bg-muted/40 p-0.5">
         <button
@@ -113,12 +115,12 @@ const kinds: { value: 'all' | ModelKind; label: string }[] = [
       </div>
       <div class="ml-auto flex items-center gap-3 text-sm text-muted-foreground">
         <span class="tabular"
-          >{{ groups.length }} 個群組 · {{ models.counts.ready }} 就緒 · {{ models.counts.failed }} 失敗</span
+          >{{ $t('models.groupCount', { n: groups.length, ready: models.counts.ready, failed: models.counts.failed }) }}</span
         >
         <Button variant="outline" size="sm" @click="models.refresh()">
-          <RefreshCw class="size-3.5" />重新整理
+          <RefreshCw class="size-3.5" />{{ $t('common.refresh') }}
         </Button>
-        <Button size="sm" @click="openAdd"><Plus class="size-4" />新增模型</Button>
+        <Button size="sm" @click="openAdd"><Plus class="size-4" />{{ $t('models.addModel') }}</Button>
       </div>
     </div>
 
@@ -140,9 +142,9 @@ const kinds: { value: 'all' | ModelKind; label: string }[] = [
       v-else
       class="flex flex-col items-center justify-center rounded-xl border border-dashed border-border/70 py-20 text-center"
     >
-      <p class="text-sm font-medium">找不到符合的模型。</p>
+      <p class="text-sm font-medium">{{ $t('models.noMatch') }}</p>
       <p class="mt-1 text-sm text-muted-foreground">
-        {{ models.total ? '試著清除篩選條件。' : 'config.yaml 中尚未設定模型。' }}
+        {{ models.total ? $t('models.clearFilter') : $t('models.noConfig') }}
       </p>
     </div>
 
diff --git a/apps/frontend_llmops/src/views/OverviewView.vue b/apps/frontend_llmops/src/views/OverviewView.vue
index fe4354a..deaa15d 100644
--- a/apps/frontend_llmops/src/views/OverviewView.vue
+++ b/apps/frontend_llmops/src/views/OverviewView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { onMounted, onUnmounted, ref } from 'vue'
 import { RouterLink } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { Activity, Cpu, Gauge, Server, Timer, Zap } from '@lucide/vue'
 import { useModelsStore } from '@/stores/models'
 import { useResourcesStore } from '@/stores/resources'
@@ -18,6 +19,7 @@ import Badge from '@/components/ui/Badge.vue'
 import { formatLatency, formatNumber, formatPercent, formatTime } from '@/lib/utils'
 import type { StateEvent } from '@/types/api'
 
+const { t } = useI18n()
 const models = useModelsStore()
 const resources = useResourcesStore()
 const traffic = useTrafficStore()
@@ -50,30 +52,30 @@ function codeVariant(code: number) {
     <!-- KPI row -->
     <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
       <StatCard
-        label="就緒模型"
+        :label="$t('overview.readyModels')"
         :value="`${models.readyCount} / ${models.total}`"
-        :hint="models.counts.failed ? `${models.counts.failed} 個失敗` : '全部正常'"
+        :hint="models.counts.failed ? t('overview.failedCount', { n: models.counts.failed }) : $t('overview.allNormal')"
         :icon="Server"
         color="var(--chart-1)"
       />
       <StatCard
-        label="請求次數"
+        :label="$t('overview.requestCount')"
         :value="formatNumber(traffic.totalRequests)"
-        :hint="`${formatPercent(traffic.errorRate)} 錯誤率`"
+        :hint="t('overview.errorRate', { rate: formatPercent(traffic.errorRate) })"
         :icon="Zap"
         color="var(--chart-2)"
       />
       <StatCard
-        label="延遲 p95"
+        :label="$t('overview.latencyP95')"
         :value="formatLatency(traffic.weightedP95)"
-        :hint="`已處理 ${formatNumber(traffic.totalTokens)} tokens`"
+        :hint="t('overview.processedTokens', { n: formatNumber(traffic.totalTokens) })"
         :icon="Timer"
         color="var(--chart-4)"
       />
       <StatCard
-        label="GPU 使用率"
+        :label="$t('overview.gpuUtil')"
         :value="formatPercent(resources.avgGpuUtil)"
-        :hint="`${resources.resources?.gpus.length ?? 0} 個裝置`"
+        :hint="t('overview.deviceCount', { n: resources.resources?.gpus.length ?? 0 })"
         :icon="Gauge"
         :spark="resources.gpuHistory"
         color="var(--chart-1)"
@@ -94,9 +96,9 @@ function codeVariant(code: number) {
       <!-- Model roster -->
       <Card class="lg:col-span-2">
         <CardHeader class="flex-row items-center justify-between">
-          <CardTitle>模型</CardTitle>
+          <CardTitle>{{ $t('overview.models') }}</CardTitle>
           <RouterLink to="/models" class="text-xs text-muted-foreground hover:text-foreground">
-            管理 →
+            {{ $t('common.manage') }}
           </RouterLink>
         </CardHeader>
         <CardContent class="space-y-1">
@@ -115,7 +117,7 @@ function codeVariant(code: number) {
             <Badge :variant="m.state" class="shrink-0 capitalize">{{ m.state }}</Badge>
           </RouterLink>
           <p v-if="!models.total" class="py-6 text-center text-sm text-muted-foreground">
-            尚未設定模型。
+            {{ $t('overview.noModelsYet') }}
           </p>
         </CardContent>
       </Card>
@@ -123,9 +125,9 @@ function codeVariant(code: number) {
       <!-- Recent activity -->
       <Card>
         <CardHeader class="flex-row items-center justify-between">
-          <CardTitle class="flex items-center gap-1.5"><Activity class="size-4" />活動</CardTitle>
+          <CardTitle class="flex items-center gap-1.5"><Activity class="size-4" />{{ $t('overview.activity') }}</CardTitle>
           <RouterLink to="/activity" class="text-xs text-muted-foreground hover:text-foreground">
-            全部 →
+            {{ $t('common.viewAll') }}
           </RouterLink>
         </CardHeader>
         <CardContent class="space-y-3">
@@ -140,7 +142,7 @@ function codeVariant(code: number) {
             </div>
           </div>
           <p v-if="!events.length" class="py-6 text-center text-sm text-muted-foreground">
-            無最近事件。
+            {{ $t('overview.noRecentEvents') }}
           </p>
         </CardContent>
       </Card>
@@ -149,9 +151,9 @@ function codeVariant(code: number) {
     <!-- Recent requests -->
     <Card>
       <CardHeader class="flex-row items-center justify-between">
-        <CardTitle class="flex items-center gap-1.5"><Cpu class="size-4" />最近請求</CardTitle>
+        <CardTitle class="flex items-center gap-1.5"><Cpu class="size-4" />{{ $t('overview.recentRequests') }}</CardTitle>
         <RouterLink to="/traffic" class="text-xs text-muted-foreground hover:text-foreground">
-          流量 →
+          {{ $t('overview.traffic') }}
         </RouterLink>
       </CardHeader>
       <CardContent>
@@ -159,11 +161,11 @@ function codeVariant(code: number) {
           <table class="w-full text-sm">
             <thead class="text-left text-xs uppercase tracking-wide text-muted-foreground">
               <tr class="border-b border-border/60">
-                <th class="pb-2 pr-4 font-medium">時間</th>
-                <th class="pb-2 pr-4 font-medium">模型</th>
-                <th class="pb-2 pr-4 font-medium">路徑</th>
-                <th class="pb-2 pr-4 font-medium">狀態</th>
-                <th class="pb-2 pr-4 text-right font-medium">延遲</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('overview.tableTime') }}</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('overview.tableModel') }}</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('overview.tablePath') }}</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('overview.tableStatus') }}</th>
+                <th class="pb-2 pr-4 text-right font-medium">{{ $t('overview.tableLatency') }}</th>
                 <th class="pb-2 text-right font-medium">Tokens</th>
               </tr>
             </thead>
@@ -183,7 +185,7 @@ function codeVariant(code: number) {
                 <td class="py-2 text-right tabular text-muted-foreground">{{ r.total_tokens ?? '—' }}</td>
               </tr>
               <tr v-if="!traffic.requests.length">
-                <td colspan="6" class="py-6 text-center text-muted-foreground">尚無請求記錄。</td>
+                <td colspan="6" class="py-6 text-center text-muted-foreground">{{ $t('overview.noRequestRecords') }}</td>
               </tr>
             </tbody>
           </table>
diff --git a/apps/frontend_llmops/src/views/PlaygroundView.vue b/apps/frontend_llmops/src/views/PlaygroundView.vue
index a4c52ab..774b600 100644
--- a/apps/frontend_llmops/src/views/PlaygroundView.vue
+++ b/apps/frontend_llmops/src/views/PlaygroundView.vue
@@ -619,7 +619,7 @@ watch(
                 <Input v-model="rerankQuery" placeholder="留空則為純嵌入模式" class="mt-1" />
               </label>
               <label class="block">
-                <span class="text-xs text-muted-foreground">輸入（每行一筆）</span>
+                <span class="text-xs text-muted-foreground">{{ $t('playground.inputLabel') }}</span>
                 <Textarea v-model="embInput" class="mt-1 min-h-[140px] font-mono text-xs" />
               </label>
               <Button :disabled="embBusy || !embModel" @click="runEmbedding">
diff --git a/apps/frontend_llmops/src/views/RequestsView.vue b/apps/frontend_llmops/src/views/RequestsView.vue
index b3f9e42..813f9b5 100644
--- a/apps/frontend_llmops/src/views/RequestsView.vue
+++ b/apps/frontend_llmops/src/views/RequestsView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { RefreshCw, Search } from '@lucide/vue'
 import { api } from '@/lib/api'
 import { toast } from '@/lib/toast'
@@ -9,6 +10,7 @@ import Card from '@/components/ui/Card.vue'
 import Button from '@/components/ui/Button.vue'
 import Input from '@/components/ui/Input.vue'
 
+const { t } = useI18n()
 const RATE_KEY = 'llmops_cost_per_mtok'
 
 const rows = ref<RequestRow[]>([])
@@ -24,7 +26,7 @@ async function load() {
   try {
     rows.value = await api.getRequests({ limit: limit.value })
   } catch (e) {
-    toast.error('無法載入請求紀錄', { description: String(e) })
+    toast.error(t('requests.loadFailed'), { description: String(e) })
   } finally {
     loading.value = false
   }
@@ -79,10 +81,10 @@ onMounted(load)
     <div class="flex flex-wrap items-center gap-3">
       <div class="relative">
         <Search class="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-        <Input v-model="query" placeholder="搜尋模型 / 路徑 / 金鑰…" class="w-64 pl-8" />
+        <Input v-model="query" :placeholder="$t('requests.searchPlaceholder')" class="w-64 pl-8" />
       </div>
       <label class="flex items-center gap-1.5 text-sm text-muted-foreground">
-        <input v-model="errorsOnly" type="checkbox" class="size-4 accent-[var(--chart-1)]" />僅錯誤
+        <input v-model="errorsOnly" type="checkbox" class="size-4 accent-[var(--chart-1)]" />{{ $t('requests.errorsOnly') }}
       </label>
       <label class="flex items-center gap-1.5 text-sm text-muted-foreground">
         $/1M tokens
@@ -101,12 +103,12 @@ onMounted(load)
           class="h-9 rounded-md border border-input bg-background/40 px-2 text-sm"
           @change="load"
         >
-          <option :value="100">最近 100</option>
-          <option :value="200">最近 200</option>
-          <option :value="500">最近 500</option>
+          <option :value="100">{{ $t('requests.recent', { n: 100 }) }}</option>
+          <option :value="200">{{ $t('requests.recent', { n: 200 }) }}</option>
+          <option :value="500">{{ $t('requests.recent', { n: 500 }) }}</option>
         </select>
         <Button variant="outline" size="sm" :disabled="loading" @click="load">
-          <RefreshCw class="size-3.5" :class="loading && 'animate-spin'" />重新整理
+          <RefreshCw class="size-3.5" :class="loading && 'animate-spin'" />{{ $t('common.refresh') }}
         </Button>
       </div>
     </div>
@@ -115,21 +117,21 @@ onMounted(load)
     <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
       <Card class="p-4 text-center">
         <p class="text-lg font-semibold tabular">{{ formatNumber(totals.count) }}</p>
-        <p class="text-xs text-muted-foreground">請求數</p>
+        <p class="text-xs text-muted-foreground">{{ $t('requests.requestCount') }}</p>
       </Card>
       <Card class="p-4 text-center">
         <p class="text-lg font-semibold tabular">{{ formatNumber(totals.tokens, true) }}</p>
-        <p class="text-xs text-muted-foreground">總 tokens</p>
+        <p class="text-xs text-muted-foreground">{{ $t('requests.totalTokens') }}</p>
       </Card>
       <Card class="p-4 text-center">
         <p class="text-lg font-semibold tabular" :class="totals.errorRate > 0 ? 'text-status-failed' : ''">
           {{ totals.errorRate.toFixed(1) }}%
         </p>
-        <p class="text-xs text-muted-foreground">錯誤率</p>
+        <p class="text-xs text-muted-foreground">{{ $t('requests.errorRate') }}</p>
       </Card>
       <Card class="p-4 text-center">
         <p class="text-lg font-semibold tabular">${{ totals.cost.toFixed(4) }}</p>
-        <p class="text-xs text-muted-foreground">估算成本</p>
+        <p class="text-xs text-muted-foreground">{{ $t('requests.estimatedCost') }}</p>
       </Card>
     </div>
 
@@ -139,14 +141,14 @@ onMounted(load)
         <table class="w-full text-sm">
           <thead class="border-b border-border/60 text-xs text-muted-foreground">
             <tr class="[&>th]:px-3 [&>th]:py-2 [&>th]:text-left [&>th]:font-medium">
-              <th>時間</th>
-              <th>模型</th>
-              <th>路徑</th>
-              <th class="text-right">狀態</th>
-              <th class="text-right">延遲</th>
+              <th>{{ $t('requests.tableTime') }}</th>
+              <th>{{ $t('requests.tableModel') }}</th>
+              <th>{{ $t('requests.tablePath') }}</th>
+              <th class="text-right">{{ $t('requests.tableStatus') }}</th>
+              <th class="text-right">{{ $t('requests.tableLatency') }}</th>
               <th class="text-right">tokens</th>
-              <th class="text-right">成本</th>
-              <th>金鑰</th>
+              <th class="text-right">{{ $t('requests.tableCost') }}</th>
+              <th>{{ $t('requests.tableKey') }}</th>
             </tr>
           </thead>
           <tbody>
@@ -170,7 +172,7 @@ onMounted(load)
             </tr>
             <tr v-if="!filtered.length">
               <td colspan="8" class="px-3 py-10 text-center text-sm text-muted-foreground">
-                {{ loading ? '載入中…' : '尚無請求紀錄。' }}
+                {{ loading ? $t('common.loading') : $t('requests.noRecords') }}
               </td>
             </tr>
           </tbody>
diff --git a/apps/frontend_llmops/src/views/TrafficView.vue b/apps/frontend_llmops/src/views/TrafficView.vue
index f00313b..410f699 100644
--- a/apps/frontend_llmops/src/views/TrafficView.vue
+++ b/apps/frontend_llmops/src/views/TrafficView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Info, RefreshCw } from '@lucide/vue'
 import { useTrafficStore } from '@/stores/traffic'
 import { useModelsStore } from '@/stores/models'
@@ -15,26 +16,21 @@ import { toast } from '@/lib/toast'
 import { routingStrategyLabel } from '@/lib/routingStrategies'
 import { formatLatency, formatNumber } from '@/lib/utils'
 
+const { t } = useI18n()
 const traffic = useTrafficStore()
 const models = useModelsStore()
 
 // ---- Router load-balancing strategy (global, hot-swappable) ----
 // One-line "best for" per strategy, shown in the help card.
-const STRATEGY_INFO: Record<string, string> = {
-  least_load: '請求長短不一、要平均各副本飽和度。通用安全的預設。',
-  round_robin: '同質 GPU、請求差異不大,或想要可預測的均分 / 當 baseline。',
-  random: '大量短請求、要最低決策成本的無狀態分流。',
-  least_inflight: '請求耗時相近,且不想被 ~1 秒 metrics 抓取延遲影響時。',
-  p2c: '突發流量下,想避免大家一窩蜂衝向同一個「目前最閒」的副本。',
-  session_affinity: '多輪對話 / Playground:同一會話黏同一台,提升 KV cache 重用（需帶 X-Session-Id 或 user,否則退回最低負載）。',
-  prefix_affinity: '固定 system prompt、RAG / few-shot 模板等高前綴重複率的請求。',
-}
 const strategy = ref<string>('')
 const strategies = ref<string[]>([])
 const savingStrategy = ref(false)
 const showStrategyHelp = ref(false)
 const strategyLabel = routingStrategyLabel
-const strategyInfo = (s: string) => STRATEGY_INFO[s] ?? ''
+const strategyInfo = (s: string) => {
+  const info = t('traffic.strategyInfo.' + s)
+  return info === 'traffic.strategyInfo.' + s ? '' : info
+}
 
 onMounted(async () => {
   try {
@@ -53,12 +49,12 @@ async function onStrategyChange(e: Event) {
   try {
     const r = await api.setRouting(next)
     strategy.value = r.strategy
-    toast.success(`路由策略已切換為「${strategyLabel(r.strategy)}」`, {
-      description: '下一個請求起生效。未持久化，router 重啟後回到預設。',
+    toast.success(t('traffic.strategyChanged', { name: strategyLabel(r.strategy) }), {
+      description: t('traffic.strategyChangedDesc'),
     })
   } catch (e) {
     strategy.value = prev // revert the <select> to the real value
-    toast.error('切換路由策略失敗', {
+    toast.error(t('traffic.strategyChangeFailed'), {
       description: e instanceof ApiError ? e.message : String(e),
     })
   } finally {
@@ -98,18 +94,18 @@ function onFilter(e: Event) {
     <!-- Usage rollup -->
     <Card>
       <CardHeader class="flex-row items-center justify-between">
-        <CardTitle>各模型用量</CardTitle>
-        <Button variant="outline" size="sm" @click="traffic.refresh()"><RefreshCw class="size-3.5" />重新整理</Button>
+        <CardTitle>{{ $t('traffic.modelUsage') }}</CardTitle>
+        <Button variant="outline" size="sm" @click="traffic.refresh()"><RefreshCw class="size-3.5" />{{ $t('common.refresh') }}</Button>
       </CardHeader>
       <CardContent>
         <div class="overflow-x-auto">
           <table class="w-full text-sm">
             <thead class="text-left text-xs uppercase tracking-wide text-muted-foreground">
               <tr class="border-b border-border/60">
-                <th class="pb-2 pr-4 font-medium">模型</th>
-                <th class="pb-2 pr-4 text-right font-medium">請求次數</th>
-                <th class="pb-2 pr-4 text-right font-medium">錯誤數</th>
-                <th class="pb-2 pr-4 text-right font-medium">平均</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('traffic.tableModel') }}</th>
+                <th class="pb-2 pr-4 text-right font-medium">{{ $t('traffic.tableRequests') }}</th>
+                <th class="pb-2 pr-4 text-right font-medium">{{ $t('traffic.tableErrors') }}</th>
+                <th class="pb-2 pr-4 text-right font-medium">{{ $t('traffic.tableAvg') }}</th>
                 <th class="pb-2 pr-4 text-right font-medium">p50</th>
                 <th class="pb-2 pr-4 font-medium">p95</th>
                 <th class="pb-2 text-right font-medium">Tokens</th>
@@ -148,7 +144,7 @@ function onFilter(e: Event) {
                 </td>
               </tr>
               <tr v-if="!traffic.usage.length">
-                <td colspan="7" class="py-6 text-center text-muted-foreground">尚無用量記錄。</td>
+                <td colspan="7" class="py-6 text-center text-muted-foreground">{{ $t('traffic.noUsage') }}</td>
               </tr>
             </tbody>
           </table>
@@ -160,14 +156,14 @@ function onFilter(e: Event) {
     <Card>
       <CardHeader class="flex-row items-start justify-between gap-4">
         <div>
-          <CardTitle>路由器負載均衡</CardTitle>
+          <CardTitle>{{ $t('traffic.routerLoadBalancing') }}</CardTitle>
           <p class="mt-1 text-xs text-muted-foreground">
-            線條粗細 = 實際流量佔比（來自請求記錄）· ★ = 路由器下次選擇的最低分實例
+            {{ $t('traffic.routerLoadDesc') }}
           </p>
         </div>
         <div class="flex shrink-0 items-center gap-2">
           <label class="flex items-center gap-2 text-xs text-muted-foreground">
-            策略
+            {{ $t('traffic.strategy') }}
             <select
               class="h-8 rounded-md border border-input bg-background/40 px-2 text-xs text-foreground disabled:opacity-50"
               :value="strategy"
@@ -183,7 +179,7 @@ function onFilter(e: Event) {
             class="flex size-7 items-center justify-center rounded-md border border-input text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
             :class="showStrategyHelp && 'bg-accent text-foreground'"
             :aria-pressed="showStrategyHelp"
-            title="各策略適合的場景"
+            :title="$t('traffic.scenarioTitle')"
             @click="showStrategyHelp = !showStrategyHelp"
           >
             <Info class="size-4" />
@@ -196,7 +192,7 @@ function onFilter(e: Event) {
           v-if="showStrategyHelp"
           class="rounded-lg border border-border/60 bg-muted/30 p-3 text-xs"
         >
-          <p class="mb-2 font-medium text-foreground">各策略適合的場景</p>
+          <p class="mb-2 font-medium text-foreground">{{ $t('traffic.scenarioTitle') }}</p>
           <ul class="space-y-1.5">
             <li
               v-for="s in strategies"
@@ -212,12 +208,12 @@ function onFilter(e: Event) {
             </li>
           </ul>
           <p class="mt-2 text-[11px] text-muted-foreground/80">
-            此下拉切換的是全域預設;在 config.yaml 為某群組設定 routing_strategy 會覆寫此處。
+            {{ $t('traffic.scenarioFooter') }}
           </p>
         </div>
         <RouterFanDiagram v-for="g in llmGroups" :key="g" :group="g" />
         <p v-if="!llmGroups.length" class="py-6 text-center text-sm text-muted-foreground">
-          尚未設定 LLM 群組。
+          {{ $t('traffic.noLlmGroups') }}
         </p>
       </CardContent>
     </Card>
@@ -225,13 +221,13 @@ function onFilter(e: Event) {
     <!-- Request log -->
     <Card>
       <CardHeader class="flex-row items-center justify-between">
-        <CardTitle>請求記錄</CardTitle>
+        <CardTitle>{{ $t('traffic.requestLog') }}</CardTitle>
         <select
           class="h-8 rounded-md border border-input bg-background/40 px-2 text-xs"
           :value="traffic.filterModel ?? ''"
           @change="onFilter"
         >
-          <option value="">全部模型</option>
+          <option value="">{{ $t('common.allModels') }}</option>
           <option v-for="m in models.llms" :key="m.key" :value="m.key.split('::')[0]">
             {{ m.key.split('::')[0] }}
           </option>
@@ -242,10 +238,10 @@ function onFilter(e: Event) {
           <table class="w-full text-sm">
             <thead class="sticky top-0 bg-card text-left text-xs uppercase tracking-wide text-muted-foreground">
               <tr class="border-b border-border/60">
-                <th class="pb-2 pr-3 font-medium">模型</th>
-                <th class="pb-2 pr-3 font-medium">路徑</th>
-                <th class="pb-2 pr-3 font-medium">狀態</th>
-                <th class="pb-2 pr-3 text-right font-medium">延遲</th>
+                <th class="pb-2 pr-3 font-medium">{{ $t('traffic.tableModel') }}</th>
+                <th class="pb-2 pr-3 font-medium">{{ $t('common.path') }}</th>
+                <th class="pb-2 pr-3 font-medium">{{ $t('common.status') }}</th>
+                <th class="pb-2 pr-3 text-right font-medium">{{ $t('common.latency') }}</th>
                 <th class="pb-2 text-right font-medium">Tok</th>
               </tr>
             </thead>
@@ -262,7 +258,7 @@ function onFilter(e: Event) {
                 <td class="py-2 text-right tabular text-muted-foreground">{{ r.total_tokens ?? '—' }}</td>
               </tr>
               <tr v-if="!traffic.requests.length">
-                <td colspan="5" class="py-6 text-center text-muted-foreground">尚無請求。</td>
+                <td colspan="5" class="py-6 text-center text-muted-foreground">{{ $t('traffic.noRequests') }}</td>
               </tr>
             </tbody>
           </table>
diff --git a/docs/eval-dataset-inspector-design.md b/docs/eval-dataset-inspector-design.md
new file mode 100644
index 0000000..7b9716e
--- /dev/null
+++ b/docs/eval-dataset-inspector-design.md
@@ -0,0 +1,56 @@
+# 評測資料集檢視器 — 設計（pre-run dataset inspector）
+
+更新日期：2026-06-22
+狀態：設計提案（開工中）
+
+## 目標
+
+評測目前 **跑之前看不到資料集本身**:catalog 只有 key/label/tier/metric,選 subset 只能在「進階」手打 raw JSON。要補:
+1. **看細節**:每個資料集的筆數、subset/主題清單、metric、tags、說明。
+2. **選主題**:用多選 UI 勾選 subset(MMLU 57 科、C-Eval 52、gsm8k main/socratic…),自動組成 `dataset_args.subset_list`,取代手打 JSON。
+3. **預覽資料**:跑之前載入前 N 筆真實題目來看(question/choices/answer)。
+
+post-run 的 sample 檢視(`/{run_id}/detail`、`/samples`)已完整,不動。
+
+## 可行性（已驗證,evalscope 1.8.1）
+
+- **metadata 來源**:`evalscope.api.registry.BENCHMARK_REGISTRY.get(name)` → `BenchmarkMeta`,有 `subset_list / default_subset / few_shot_num / metric_list / tags / pretty_name / description / eval_split / paper_url`。免載入、便宜。catalog 的 `key` 即 evalscope benchmark name。
+- **預覽列**:
+  ```python
+  cfg = TaskConfig(model='preview', datasets=[key], limit=N,
+                   dataset_args={key: {'subset_list': [subset], 'few_shot_num': 0}})
+  ad = get_benchmark(key, cfg); dd = ad.load_dataset()
+  ds = dd[subset]            # rows; len(ds) = 該 subset 筆數
+  s = ds[i]                  # pydantic Sample: input / target / choices / metadata
+  ```
+  離線讀 `$MODELSCOPE_CACHE` cache。`few_shot_num=0` 讓 `input` 只含題目本身。
+- `data_statistics` 為 None → 筆數在預覽某 subset 時用 `len(ds)` 回傳(不在列表頁全載)。
+
+## API 設計（backend, read-only, 不需 admin）
+
+`apps/backend/app/services/dataset_service.py`:
+- `eval_dataset_meta(key) -> dict | None`:讀 registry,回 `{subsets, default_subset, few_shot_num, metric, tags, pretty_name, description, eval_split, paper_url}`。registry 沒有的 key 回 None(catalog 仍可用,只是無細節)。
+- `eval_dataset_preview(key, subset, n=20) -> dict`:用上面方式載入,回 `{subset, count, rows:[{question, choices, target, metadata}], truncated}`。`few_shot_num=0`、`limit=n`。question 取 `input` 最後一則 user message 的文字。
+
+`apps/backend/app/api/eval.py`:
+- `GET /eval/datasets`:沿用 EVAL_CATALOG,但每筆 merge `eval_dataset_meta`(便宜)+ `cached` 狀態。
+- `GET /eval/datasets/{key}/preview?subset=&n=`:回預覽列 + 該 subset 筆數。預設只對 **已下載** 的資料集開放(未下載會觸發下載,前端 disable + 提示)。
+
+風險/邊界:
+- 預覽務必走 `limit`,不整包載;大 subset 的 count 也只在開啟該 subset 時算。
+- 未 cache 的資料集預覽會觸發下載 → 前端僅對 cached 啟用。
+- key→registry name 對不上的(如自訂)優雅降級:無 subset picker / 無預覽,維持現有行為。
+- 載入在 thread(同步 IO),別擋 event loop。
+
+## 前端（EvalView.vue）
+
+- 每個已選資料集:**subset 多選**(來自 meta.subsets;預設用 default_subset)→ 寫進 `dataset_args[key].subset_list`。保留 raw JSON 進階欄當逃生口。
+- 每個資料集 chip:顯示 tags / metric / 一行說明;「**預覽**」按鈕(cached 才可點)開抽屜,表格列出前 N 筆 + 該 subset 筆數。
+- limit 欄位:預覽載到 count 後可顯示「N / 總數」。
+
+## 落地順序
+
+1. backend service(meta + preview)+ 單元測試(registry 取值、preview 正規化;mock 或對 cached mmlu 跑)。
+2. backend API 兩個端點。
+3. 前端 subset picker + 預覽抽屜 + chip metadata。
+4. vue-tsc + rebuild + live 驗證(對已下載的 mmlu/gsm8k/ceval)。
diff --git a/docs/routing-strategies.md b/docs/routing-strategies.md
new file mode 100644
index 0000000..077de8f
--- /dev/null
+++ b/docs/routing-strategies.md
@@ -0,0 +1,206 @@
+# Pluggable request-routing strategies
+
+Status: implemented (config + live frontend switch) · Owner: router-server · Last updated: 2026-06-20
+
+## 1. Background
+
+The router (`apps/router-server`) load-balances every OpenAI-style request across
+the instances of a model group. Until now the policy was hard-coded:
+`select_instance_least_load` scored each instance by
+
+```
+load = waiting·10 + running·3 + kv_cache_usage_perc·100      # from /metrics, polled ~1s
+score = load + inflight·5 + (1e9 if in cooldown else 0)
+```
+
+and picked the minimum. This is a solid **load-aware least-load** policy, but it
+optimises purely for *spreading* requests. For workloads that benefit from
+*affinity* — multi-turn chat, a shared system prompt, RAG templates — spreading
+actively hurts: the same conversation bounces between replicas and every turn
+re-computes the prefill instead of hitting the KV / prefix cache.
+
+There is no single right policy. This change turns the routing decision into a
+**swappable strategy** chosen by config, with `least_load` as the default so
+existing deployments are unchanged.
+
+See `docs/vllm-model-serving-load-balancing.md` for the taxonomy this draws on.
+
+## 2. Goals / non-goals
+
+**Goals**
+- A catalogue of selectable strategies (round-robin, random, least-inflight,
+  least-load, power-of-two-choices, session affinity, prefix affinity).
+- Pick the strategy globally (env var) or per model group (config override).
+- 100% backward compatible: default is `least_load`, identical to today.
+- Strategies stay small and side-effect-free; all the resilient-routing
+  machinery (in-flight accounting, failover, cooldown) stays in the proxy and is
+  shared by every strategy.
+
+**Non-goals (explicitly deferred)**
+- True KV-cache-aware routing (needs per-prefix cache occupancy from each
+  instance; vLLM doesn't expose it cheaply). Prefix-affinity is the pragmatic 80%.
+- Disaggregated-prefill routing and EPLB — those are deployment-topology / MoE
+  concerns, not a routing-algorithm swap.
+- A runtime UI switch. Config + `/reload` is enough for phase 1; a dashboard
+  dropdown is a later phase.
+
+## 3. Design
+
+### 3.1 Where the seam is
+
+`_proxy_to_backend` in `router.py` already owns the request lifecycle: parse body,
+resolve the model, then a **failover loop** of up to `min(#instances, 3)` attempts
+that calls the selector, counts in-flight, marks success/failure, and retries the
+next-best instance on a transport error or 5xx. The only thing that changes is the
+one line that picks an instance.
+
+```
+for attempt in range(max_attempts):
+    instance = await select_instance(app, model_key, model_cfg,
+                                     strategy=strategy_name, exclude=tried,
+                                     session_key=session_key, prompt_prefix=prompt_prefix)
+    ...                      # inflight / failover / cooldown — unchanged
+```
+
+A strategy therefore only has to answer *"given the live cluster state, which one
+instance?"*. Everything resilient lives outside it and is reused by all.
+
+### 3.2 The strategy interface
+
+`apps/router-server/src/llm_router/routing_strategies.py`:
+
+```python
+@dataclass
+class SelectContext:
+    app: Any                 # carries .state.metrics_cache / backend_inflight / backend_health / rr_counters
+    model_key: str
+    candidates: list[dict]   # instances still eligible this request (exclude already removed)
+    all_instances: list[dict]# the full group roster (affinity hashes over this, stable set)
+    session_key: str | None  # for session_affinity
+    prompt_prefix: str | None# for prefix_affinity
+
+Strategy = Callable[[SelectContext], dict]   # returns one instance dict
+STRATEGIES: dict[str, Strategy]
+```
+
+`score_instance(app, model_key, instance) -> float` is extracted verbatim from the
+old selector (load score + in-flight penalty + cooldown fail-open, with the same
+cold-start "unknown metric = idle" handling). `least_load`, `least_inflight`,
+`p2c`, and the affinity fallbacks all build on it, so the scoring stays a single
+source of truth and `least_load` is byte-for-byte the historical behaviour.
+
+### 3.3 The strategies
+
+| name | signal | behaviour | best for |
+|---|---|---|---|
+| `round_robin` | none | per-group counter on `app.state.rr_counters`, `candidates[n % len]` | homogeneous GPUs, baseline |
+| `random` | none | `random.choice(candidates)` | many short requests, lowest decision cost |
+| `least_inflight` | local in-flight only | min by `inflight·W + cooldown` (no scrape) | low-latency decisions, scrape-independent |
+| `least_load` *(default)* | waiting/running/kv + in-flight | the existing policy, unchanged | heterogeneous request sizes |
+| `p2c` | sample 2, compare | power-of-two-choices over `score_instance` | bursty traffic, avoids herding the single "best" during the 1 s scrape blind window |
+| `session_affinity` | session key → sticky | hash key to a home instance, escape to least-load when home is in cooldown or overloaded | multi-turn chat, playground |
+| `prefix_affinity` | prompt prefix → sticky | same, keyed on the prompt prefix hash | shared system prompts, RAG templates |
+
+**Affinity = sticky + load escape valve.** Both affinity strategies share one
+helper:
+
+```
+home = sorted(all_instances by id)[ sha1(key) % len ]          # deterministic, salt-free
+if home is a live candidate and not in cooldown
+   and score(home) <= score(least_loaded_candidate) + AFFINITY_LOAD_MARGIN:
+       return home                       # keep the conversation on its replica
+return least_loaded_candidate            # fall back to least_load
+```
+
+- Hashing is `hashlib.sha1` (not the builtin `hash`, which is per-process salted)
+  so the same key maps to the same replica across router restarts and workers.
+- When there's no key (no session id / no prompt), affinity degrades to
+  `least_load` — so turning the strategy on is **never worse** than the default,
+  it only adds stickiness when a key is available.
+- `AFFINITY_LOAD_MARGIN` is the escape threshold: how much extra load we tolerate
+  on the home replica before giving up the cache benefit and spreading. Tunable
+  via `LLMOPS_AFFINITY_LOAD_MARGIN` (default 50.0).
+
+### 3.4 Key extraction (router side)
+
+The proxy computes, once per request, the inputs the affinity strategies need:
+
+- `session_key` = `X-Session-Id` header, else the OpenAI `user` field in the body.
+- `prompt_prefix` (only when the strategy is `prefix_affinity`) = the first
+  messages (`role:content`, chat) or the `prompt` (completions), truncated to 512
+  chars. Cheap, bounded, and never blocks the hot path for the other strategies.
+
+### 3.5 Choosing the strategy
+
+Resolution order (first hit wins), evaluated per request so `/reload` picks up edits:
+
+1. **Per-group**: `model_config.routing_strategy` in the group's config entry
+   (passes through `EngineModelConfig`'s `extra="allow"`, no schema change).
+2. **Global**: `LLMOPS_ROUTING_STRATEGY` env var (read once into
+   `app.state.routing_strategy`).
+3. **Default**: `least_load`.
+
+An unknown name logs a warning and falls back to `least_load` rather than failing
+a request.
+
+Example — chat group sticky, embeddings round-robin:
+
+```yaml
+LLM_engines:
+  Qwen3-Chat:
+    instances: [ ... ]
+    model_config:
+      model_tag: Qwen/Qwen3-8B
+      routing_strategy: session_affinity
+```
+
+```bash
+LLMOPS_ROUTING_STRATEGY=least_load        # global default for groups without an override
+LLMOPS_AFFINITY_LOAD_MARGIN=50            # affinity escape threshold
+```
+
+## 4. Compatibility & risk
+
+- `select_instance_least_load` is kept as a thin wrapper over
+  `select_instance(..., strategy="least_load")`, so existing imports and the
+  `test_backend_selector` suite are untouched.
+- New `app.state` field: `rr_counters` (round-robin) and `routing_strategy`,
+  initialised in `main.py`'s lifespan alongside the existing maps.
+- No schema migration; per-group override rides `extra="allow"`.
+- Failure modes are contained: unknown strategy → default; affinity with no key →
+  least-load; a strategy that returns nothing → first candidate.
+
+## 5. Testing
+
+- Unit tests per strategy in `tests/unit/test_routing_strategies.py`:
+  round-robin cycles; random stays in-set; least-inflight & least-load picks;
+  p2c never exceeds the worse of its two samples; session/prefix affinity is
+  deterministic for a key, escapes on cooldown and over-margin load, and degrades
+  to least-load with no key; dispatcher handles no-instances (500), all-excluded
+  (503), single-candidate shortcut, and unknown-name fallback.
+- The existing `test_backend_selector` and `test_router_proxy` suites must stay
+  green (backward-compat guarantee).
+- `python3 -m pytest tests/unit -q` for the suite; `mypy`/`ruff` for type-check.
+
+## 6. Frontend hot-swap (implemented)
+
+The router exposes a control endpoint so the global strategy can be switched live,
+without a `/reload` or restart:
+
+- `GET /routing` → `{ strategy, available[], default }`.
+- `POST /routing {"strategy": "<name>"}` → validates against the registry and sets
+  `app.state.routing_strategy`. Effective on the next request; **not persisted**
+  (a restart falls back to `LLMOPS_ROUTING_STRATEGY`).
+- Exposed through nginx as `location = /routing` (alongside `/metrics`, `/reload`).
+
+The dashboard **Traffic** page has a strategy dropdown (next to the load-balancing
+fan) wired to these via `api.getRouting()` / `api.setRouting()`. A per-group
+`model_config.routing_strategy` still overrides this global value for that group.
+
+## 7. Future phases
+
+1. Per-group override + global default + all 7 strategies. *(done)*
+2. Dashboard dropdown + live `GET/POST /routing` hot-swap. *(done)*
+3. Persisted / per-group editing from the UI (write to the overlay), so a chosen
+   strategy survives a router restart.
+4. True KV-cache-aware routing once per-instance prefix-cache stats are exposed.
diff --git a/docs/vllm-kv-cache-cross-instance-design.md b/docs/vllm-kv-cache-cross-instance-design.md
new file mode 100644
index 0000000..70b74e2
--- /dev/null
+++ b/docs/vllm-kv-cache-cross-instance-design.md
@@ -0,0 +1,176 @@
+# 跨 instance 共享 KV Cache — 設計與可行性（單機多 instance / Docker）
+
+更新日期：2026-06-20
+狀態：設計提案（尚未實作）
+適用環境：**單機、單/多 GPU、多個 vLLM instance、Docker Compose**（非 K8s、非多節點）
+
+> 前置閱讀：[vllm-kv-cache-sharing-howto.md](vllm-kv-cache-sharing-howto.md)
+> 本文是該 howto **§3 OffloadingConnector** 在本專案的落地設計。
+
+---
+
+## 1. 結論先講
+
+- **目標**：讓同一個模型群組的多個 vLLM instance（例如 `Qwen3-0.6B::qwen3`、`qwen3-2`）能**跨 process 重用彼此算過的 KV block**，而不是各自從零 prefill。
+- **選定方案**：howto **§3 `OffloadingConnector` + 共享 `root_dir`**。理由見 §3。
+- **為什麼不是 §4 LMCache / §5 Mooncake**：那兩個分別為 K8s 多 replica、多節點分散式設計，對「單機多 process」是過度工程（多一個 server / RDMA / metadata server 要顧）。本專案的 vLLM instance 是 backend 在**同一容器內 spawn 的子行程**，共享檔案系統，§3 的「共享目錄」幾乎零基礎設施成本。
+- **重要前提**：單機 instance 內的 `Automatic Prefix Caching` 在 vLLM V1（本專案 0.23.0）**已預設開啟**，已有 Grafana 命中率面板。本設計處理的是**跨 instance** 那一層，與 APC 互補、不衝突。
+
+---
+
+## 2. 範圍與非目標
+
+**做：**
+- 單機多 instance 透過共享磁碟（Docker named volume）做 KV block offload + 跨 process 重用。
+- launcher / config / compose / 測試的對應改動。
+
+**不做（本文範圍外）：**
+- K8s 多 replica（→ 未來若改架構再評估 LMCache）。
+- 多節點分散式 KV pool（→ Mooncake）。
+- prefill/decode 分離（→ MultiConnector）。
+- GPU memory 直接共享同一塊 KV buffer（vLLM 不走這條；offload 是 store 型）。
+
+---
+
+## 3. 為什麼 §3 最適合本專案
+
+| 考量 | 本專案現況 | 對 §3 的影響 |
+|---|---|---|
+| instance 啟動方式 | backend 以 `subprocess`（`["vllm", ...]` + env）在**同容器內**拉起（見 `launchers.py` / `process.py`）| 所有 instance 天然共享容器檔案系統 → 共享 `root_dir` 只是一個容器內路徑 |
+| 網路 | backend/router/prometheus 共享 netns | 不需要額外網路檔案系統（NFS/PVC），單機 volume 即可 |
+| 設定流 | `model_config` 走 `EngineModelConfig(extra="allow")` | KV connector 設定可以 per-group 帶進來（需 launcher 特判，見 §5）|
+| 觀測 | 已抓 `vllm:prefix_cache_hits_total / queries_total` | 命中率面板可直接沿用 + 擴充 offload 指標 |
+
+§4/§5 的能力（remote / 分散式）在單機都用不到,只徒增維運面。
+
+---
+
+## 4. 架構設計
+
+```
+                 backend container (shared netns)
+   ┌───────────────────────────────────────────────────────────┐
+   │  backend (lifecycle)                                        │
+   │     │ spawn (subprocess, env=PYTHONHASHSEED=0)              │
+   │     ├── vllm serve …  qwen3   :8002 ─┐                      │
+   │     ├── vllm serve …  qwen3-2 :8004 ─┤  都掛同一個          │
+   │     └── vllm serve …  qwen3-N        ┘  root_dir=/kv_cache  │
+   │                                  ▼                          │
+   │                       /kv_cache  (named volume)             │
+   │                    digest 目錄: <model+block+dtype+tp hash> │
+   └───────────────────────────────────────────────────────────┘
+```
+
+- **共享層**：一個 Docker named volume `llmops-kv-cache` 掛到 backend 的 `/kv_cache`。所有 instance 的 vLLM 都把 `secondary_tiers[].root_dir` 指到 `/kv_cache`。
+- **命中前提（howto §3 明列）**：所有共享同一 store 的 process 必須設**相同 `PYTHONHASHSEED`**，否則相同內容產生不同 block hash → 跨 process 命不中。
+- **隔離**：vLLM 會用 `model + block_size + dtype + parallelism` 算出 digest 子目錄；改任一項就不會互通（這正是我們要的，避免污染）。
+
+---
+
+## 5. Codebase 改動點
+
+### 5.1 launcher（`apps/backend/app/llmops/launchers.py`）
+
+兩件事：
+
+**(a) 注入 `PYTHONHASHSEED=0`**
+在 `VllmLauncher.build_spec` 組 `env` 的區塊（目前設 `CUDA_VISIBLE_DEVICES` / `VLLM_ALLOW_RUNTIME_LORA_UPDATING` 的地方）加：
+```python
+# 跨 instance KV 共享要求所有 process 用相同 hash seed，否則 block hash 不一致
+if merged.get("kv_transfer_config"):
+    env.setdefault("PYTHONHASHSEED", "0")
+```
+
+**(b) 支援 `--kv-transfer-config`（巢狀 JSON / dict 值）**
+現在 `build_vllm_cli_args` 對 `list` 才 `json.dumps`，**dict 值會掉進 `else` 分支被 `str()`**（產生帶單引號的非法 JSON）。需新增 dict 分支：
+```python
+elif isinstance(value, dict):
+    cli_args.append(key_flag)
+    cli_args.append(json.dumps(value, ensure_ascii=False))
+```
+這樣 `kv_transfer_config: {...}` 會正確變成 `--kv-transfer-config '{...}'`。
+（`kv_transfer_config` 是純 CLI flag，不需加入 `_SKIP_CLI_KEYS`。）
+
+### 5.2 config schema / config.yaml
+
+per-group `model_config` 內新增（靠 `extra="allow"` 直接帶過，或在 `EngineModelConfig` 顯式加欄位以利驗證）：
+```yaml
+Qwen3-0.6B:
+  model_config:
+    kv_transfer_config:
+      kv_connector: "OffloadingConnector"
+      kv_role: "kv_both"
+      kv_connector_extra_config:
+        spec_name: "TieringOffloadingSpec"
+        cpu_bytes_to_use: 4294967296      # 4GB；依正式機 RAM 調整
+        block_size: 16
+        eviction_policy: "lru"
+        secondary_tiers:
+          - type: "fs"
+            root_dir: "/kv_cache"
+            n_read_threads: 32
+            n_write_threads: 16
+```
+> 建議顯式加欄位（型別安全 + 前端 AddModelDialog 能呈現），而非只靠 `extra="allow"`。
+
+### 5.3 docker-compose（`deploy/docker-compose.yaml`）
+
+```yaml
+services:
+  backend:
+    volumes:
+      - llmops-kv-cache:/kv_cache      # 新增：跨 instance 共享 KV store
+volumes:
+  llmops-kv-cache:                     # 新增 named volume
+```
+
+### 5.4 測試
+
+- `test_launchers.py`：新增
+  - dict 值 → `--kv-transfer-config '<json>'`（且 JSON 合法、可被 `json.loads` 還原）。
+  - 設了 `kv_transfer_config` 時 env 帶 `PYTHONHASHSEED=0`；沒設時不帶。
+- type-check（mypy / vue-tsc 若動到前端欄位）。
+
+---
+
+## 6. 與路由層的關係（互補，可選後續）
+
+- **共享層**（本文）解決「KV 能不能跨 instance 重用」。
+- **路由層**（howto §7.2 KV-cache-aware routing）解決「請求送到哪台命中率最高」。你**已有 pluggable 路由 registry + 已抓 `vllm:gpu_prefix_cache_hit_rate`**，可在共享層上線後，新增一個 `kv_cache_aware` 策略（送往實際命中率最高的 instance），作為 `prefix_affinity`（盲 hash）的升級版。
+- 兩者疊加效益最大；但建議**先共享層、後路由層**，分開驗證。
+
+---
+
+## 7. 風險與限制
+
+| 風險 | 說明 | 緩解 |
+|---|---|---|
+| 共享 FS 效能 | offload/load KV block 走磁碟，命中成本非零 | volume 用 SSD；`n_read/write_threads` 調校；只對長 prompt 有正收益 |
+| RAM 佔用 | `cpu_bytes_to_use` 是 CPU tier 緩衝,吃系統 RAM | 依正式機 RAM 設定;**測試機（~2GB headroom）不要開** |
+| 小模型收益低 | 0.6B + `max_model_len=500`,prefill 成本本就極低 | 正式機上大模型 / 長 context 才明顯;測試機僅驗證功能正確性 |
+| 非 GPU 直接共享 | 這是 store 型 offload,不是同塊 VRAM buffer | 符合 vLLM 官方主流做法,接受 |
+| 配置漂移 | 改 model/block/dtype/tp 會換 digest 目錄,舊 cache 失效 | 預期行為;升級模型時清理 volume |
+
+---
+
+## 8. 落地與驗證步驟（PoC 順序）
+
+1. **launcher 改動 + 測試**（dict flag、PYTHONHASHSEED），先確保 CLI 產出正確、不影響既有行為。
+2. **compose 加 volume**，`make up`。
+3. **單一群組（Qwen3-0.6B）開兩 instance**，config 加 `kv_transfer_config`，正式機上跑。
+4. **驗證跨 process 命中**：
+   - 對 instance A 送一個長 system prompt 請求（暖 cache）。
+   - 同 prompt 送 instance B。
+   - 看 B 的 `vllm:prefix_cache_hits_total` 是否上升、TTFT 是否下降。
+   - 確認 `/kv_cache` 出現 digest 目錄與 block 檔。
+5. **負向測試**：故意改 `block_size` 或 `dtype`,確認 digest 目錄不同、不互通。
+6.（後續）上線 `kv_cache_aware` 路由策略。
+
+---
+
+## 9. 官方參考
+
+- [KV Offloading Usage Guide](https://docs.vllm.ai/en/latest/features/kv_offloading_usage/)（§3 主要依據）
+- [Automatic Prefix Caching](https://docs.vllm.ai/en/latest/features/automatic_prefix_caching/)（單機層,已預設開）
+- [KVTransferConfig API](https://docs.vllm.ai/en/stable/api/vllm/config/kv_transfer/)
+- [KV Cache Aware Routing](https://docs.vllm.ai/projects/production-stack/en/vllm-stack-0.1.8/use_cases/kv-cache-aware-routing.html)（§6 路由層後續）
diff --git a/docs/vllm-kv-cache-sharing-howto.md b/docs/vllm-kv-cache-sharing-howto.md
new file mode 100644
index 0000000..c7b0816
--- /dev/null
+++ b/docs/vllm-kv-cache-sharing-howto.md
@@ -0,0 +1,466 @@
+# vLLM 共享或重用 KV Cache：如何使用
+
+更新日期：2026-06-20
+
+## 先講結論
+
+如果你的問題是：
+
+**「同一個模型的多個 vLLM instance，可不可以共用同一份 KV cache？」**
+
+答案是：
+
+- **可以做到共享或重用效果**
+- **但通常不是多個 process 直接共用同一塊 GPU 上的同一份 KV buffer**
+- 官方主流做法是：
+  - `LMCache` 遠端共享 KV cache
+  - `MooncakeStoreConnector` 分散式共享 KV cache pool
+  - `OffloadingConnector` 把 KV block 寫到共享檔案系統，再讓其他 instance 重用
+  - `Automatic Prefix Caching`、`KV-cache-aware routing` 這類「不硬共享，但提高命中率」的方法
+
+所以實務上要分成兩種需求：
+
+1. **真的要跨 instance 重用 KV**
+2. **不一定要共享，只要讓相同 prefix 能重複利用**
+
+下面我整理成「怎麼選」和「怎麼啟用」。
+
+## 1. 先選方案
+
+| 需求 | 建議方案 | 難度 | 說明 |
+|---|---|---|---|
+| 單一 instance 內重用相同 prefix | `Automatic Prefix Caching` | 低 | 最簡單，不跨 instance |
+| 多個 instance 共用共享磁碟或 PVC | `OffloadingConnector` + shared `root_dir` | 中 | 類似共享 KV block 檔案 |
+| Kubernetes 上多個 vLLM replica 共享 KV | `LMCache` + Production Stack | 中高 | 官方有完整 tutorial |
+| 多節點、分散式共享 KV pool | `MooncakeStoreConnector` | 高 | 比較偏正式分散式架構 |
+| Prefill/Decode 分離且也想共享 KV | `MultiConnector` + Mooncake | 高 | 進階 serving 架構 |
+
+## 2. 最簡單方案：Automatic Prefix Caching
+
+這個方案 **不是跨 instance 共享**，但如果你的真正目的是「同樣前綴不要重算」，這通常是第一步。
+
+### 適合什麼情境
+
+- 同一台 vLLM server 反覆收到相同 system prompt
+- 多輪對話
+- 長文件反覆問答
+
+### 怎麼開
+
+官方文件寫法是：
+
+```python
+enable_prefix_caching=True
+```
+
+或在 serving 配置中啟用 prefix caching。
+
+### 優點
+
+- 最簡單
+- 幾乎不需要額外基礎設施
+- 對長 prompt 很有幫助
+
+### 限制
+
+- 只在 **同一個 instance 內** 生效
+- 只能減少 `prefill` 成本，不能減少 `decode` 成本
+- 如果新請求沒有共享 prefix，就沒有收益
+
+官方來源：
+- [Automatic Prefix Caching](https://docs.vllm.ai/en/latest/features/automatic_prefix_caching/)
+
+## 3. 共用共享磁碟：OffloadingConnector
+
+這是目前很值得注意的做法，因為官方文件已經明寫：  
+**多個 vLLM instance 可以透過相同 `root_dir` 共享 KV cache block。**
+
+### 適合什麼情境
+
+- 多個 vLLM process 掛同一個 shared PVC / NFS / 共用檔案系統
+- 你不想先上 LMCache 或 Mooncake
+- 想先用比較容易理解的方式驗證「跨 process KV 重用」
+
+### 關鍵前提
+
+所有共享同一個 store 的 instance 都要設相同的：
+
+```bash
+PYTHONHASHSEED=0
+```
+
+官方文件明確說明，若不固定 `PYTHONHASHSEED`，不同 process 會為相同內容產生不同 block hash，導致無法跨 process 命中。
+
+### 範例
+
+```bash
+PYTHONHASHSEED=0 vllm serve <model> \
+  --kv-transfer-config '{
+    "kv_connector": "OffloadingConnector",
+    "kv_role": "kv_both",
+    "kv_connector_extra_config": {
+      "spec_name": "TieringOffloadingSpec",
+      "cpu_bytes_to_use": 10737418240,
+      "block_size": 16,
+      "eviction_policy": "lru",
+      "secondary_tiers": [
+        {
+          "type": "fs",
+          "root_dir": "/mnt/kv_cache",
+          "n_read_threads": 32,
+          "n_write_threads": 16
+        }
+      ]
+    }
+  }'
+```
+
+### 使用重點
+
+- 每個 instance 都指到 **同一個** `root_dir`
+- 每個 instance 都設同樣的 `PYTHONHASHSEED`
+- 同模型、相容配置下才有意義
+- 改了模型、block size、parallelism、dtype，會產生不同 digest 目錄，不會共用
+
+### 優點
+
+- 不用額外引入 LMCache server
+- 架構相對直觀
+- 很適合先做 PoC
+
+### 缺點
+
+- 共享檔案系統效能會影響命中成本
+- 這是 offload/store 型共享，不是 GPU memory 直接共享
+- 正式多節點大規模部署通常還是會想看 LMCache 或 Mooncake
+
+官方來源：
+- [KV Offloading Usage Guide](https://docs.vllm.ai/en/latest/features/kv_offloading_usage/)
+
+## 4. 官方正式共享方案：LMCache
+
+這是 vLLM Production Stack 官方直接提供的「跨 instances 共享 KV cache」教學。
+
+### 適合什麼情境
+
+- Kubernetes 上多個 vLLM replicas
+- 想做 remote shared KV cache
+- 想照官方 tutorial 落地
+
+### 官方核心概念
+
+官方文件的描述是：  
+把大的 KV cache 從 GPU memory 移到 `remote shared storage`，讓多個 vLLM 節點能共享，提高 cache hit rate，並可能提升容錯性。
+
+### 用法 1：Production Stack Helm 教學
+
+官方 tutorial：
+- [Sharing KV Cache Across Instances](https://docs.vllm.ai/projects/production-stack/en/latest/use_cases/sharing-kv-cache.html)
+
+大致步驟：
+
+1. 準備 Kubernetes + GPU 環境
+2. 使用官方的 `values-06-remote-shared-storage.yaml`
+3. 設定 `replicaCount: 2`
+4. 啟動 `CacheserverSpec`
+5. 用 Helm 部署
+6. 驗證兩個 vLLM replica 經由 LMCache 共享 KV
+
+官方這份配置重點包括：
+
+- `replicaCount: 2`
+- `v1: 1`
+- 啟動 `CacheserverSpec`
+
+### 用法 2：LMCache MP 模式
+
+如果你不是走完整 Production Stack，也可以看 vLLM 官方 example。  
+官方把 **`LMCacheMPConnector` + standalone lmcache server** 說成：
+
+- 推薦用於 `distributed KV storage`
+- 推薦用於 `sharing KV cache across instances`
+
+### 最簡化範例
+
+先啟動 LMCache server：
+
+```bash
+lmcache server --host localhost --port 5555 --l1-size-gb 5
+```
+
+再啟動 vLLM：
+
+```bash
+vllm serve <model> \
+  --port 8000 \
+  --kv-offloading-size 5 \
+  --kv-offloading-backend lmcache \
+  --disable-hybrid-kv-cache-manager
+```
+
+上面這組參數是 vLLM 官方 example 裡直接給的 shortcut。
+
+### 等價顯式設定
+
+```bash
+vllm serve <model> \
+  --kv-transfer-config '{
+    "kv_connector":"LMCacheMPConnector",
+    "kv_role":"kv_both",
+    "kv_connector_extra_config":{
+      "lmcache.mp.host":"tcp://localhost",
+      "lmcache.mp.port":5555
+    }
+  }'
+```
+
+### 優點
+
+- 官方明確支援多 instance 共享
+- 適合 Kubernetes 與正式部署
+- 比只靠 shared filesystem 更像完整共享層
+
+### 缺點
+
+- 多一個 LMCache server 要維護
+- 架構複雜度比 prefix caching / shared root_dir 高
+- 官方 example 也提到某些模式需要 `--disable-hybrid-kv-cache-manager`
+
+官方來源：
+- [Sharing KV Cache Across Instances](https://docs.vllm.ai/projects/production-stack/en/latest/use_cases/sharing-kv-cache.html)
+- [LMCache Examples](https://docs.vllm.ai/en/latest/examples/disaggregated/lmcache/)
+
+## 5. 分散式共享池：MooncakeStoreConnector
+
+如果你要的是更偏「分散式共享 KV 池」的架構，Mooncake 是官方文件中很明確的一條路。
+
+### 官方定位
+
+官方文件直接寫：
+
+- `MooncakeStoreConnector` 使用 `MooncakeDistributedStore` 作為 `shared KV cache pool`
+- 支援 `prefix caching across instances`
+- 支援 single-node / multi-node
+
+### 適合什麼情境
+
+- 多節點
+- 想做分散式 KV 快取池
+- 需要 CPU / disk offload 與跨 instance 共用
+
+### 步驟 1：安裝 Mooncake
+
+```bash
+uv pip install mooncake-transfer-engine
+```
+
+### 步驟 2：啟動 master
+
+```bash
+mooncake_master --port 50051
+```
+
+### 步驟 3：建立 `mooncake_config.json`
+
+```json
+{
+  "mode": "embedded",
+  "metadata_server": "P2PHANDSHAKE",
+  "master_server_address": "127.0.0.1:50051",
+  "global_segment_size": "80GB",
+  "local_buffer_size": "4GB",
+  "protocol": "rdma",
+  "device_name": "",
+  "enable_offload": false
+}
+```
+
+然後設定：
+
+```bash
+export MOONCAKE_CONFIG_PATH=/path/to/mooncake_config.json
+```
+
+### 步驟 4：啟動 vLLM
+
+```bash
+MOONCAKE_CONFIG_PATH=mooncake_config.json \
+vllm serve meta-llama/Llama-3.1-8B-Instruct \
+  --kv-transfer-config '{"kv_connector":"MooncakeStoreConnector","kv_role":"kv_both"}'
+```
+
+### 很重要的坑：固定 `PYTHONHASHSEED`
+
+官方文件明確要求所有共享同一個 Mooncake store 的 process 設同樣的 hash seed：
+
+```bash
+PYTHONHASHSEED=0 vllm serve ...
+```
+
+不然相同 prompt 在不同 process 會得到不同 block hash，跨 process prefix hit 會失效。
+
+### `kv_role` 怎麼選
+
+- `kv_producer`: 主要負責把 KV 存進 pool
+- `kv_consumer`: 主要從 pool 載入 KV
+- `kv_both`: 同時可存可讀
+
+單純一般共享場景，通常先從：
+
+```json
+"kv_role": "kv_both"
+```
+
+開始最簡單。
+
+### 進階：用 `cache_prefix` 隔離命名空間
+
+如果你有多個不同部署共用同一個 Mooncake master，可以在 `kv_connector_extra_config` 裡設：
+
+```json
+"cache_prefix": "prod-a"
+```
+
+這樣不同部署不會互相污染。
+
+### 優點
+
+- 官方支援的分散式共享池
+- 可以跨 instance 做 prefix block 共享
+- 架構比單純 shared filesystem 更完整
+
+### 缺點
+
+- 導入成本更高
+- 比 LMCache / APC 更需要網路與儲存調校
+
+官方來源：
+- [MooncakeStoreConnector Usage Guide](https://docs.vllm.ai/en/latest/features/mooncake_store_connector_usage/)
+
+## 6. Prefill/Decode 分離時怎麼用
+
+如果你的架構是 `disaggregated prefill-decode`，官方建議用 `MultiConnector`，把：
+
+- `MooncakeConnector`：做 prefiller 和 decoder 間的 point-to-point KV transfer
+- `MooncakeStoreConnector`：做 shared KV cache pool
+
+組合起來。
+
+### Prefiller 節點範例
+
+```bash
+MOONCAKE_CONFIG_PATH=mooncake_config.json \
+VLLM_MOONCAKE_BOOTSTRAP_PORT=50052 \
+vllm serve meta-llama/Llama-3.1-8B-Instruct \
+  --port 8100 \
+  --kv-transfer-config '{
+    "kv_connector": "MultiConnector",
+    "kv_role": "kv_producer",
+    "kv_connector_extra_config": {
+      "connectors": [
+        {
+          "kv_connector": "MooncakeConnector",
+          "kv_role": "kv_producer"
+        },
+        {
+          "kv_connector": "MooncakeStoreConnector",
+          "kv_role": "kv_both"
+        }
+      ]
+    }
+  }'
+```
+
+### Decoder 節點範例
+
+```bash
+MOONCAKE_CONFIG_PATH=mooncake_config.json \
+VLLM_MOONCAKE_BOOTSTRAP_PORT=50053 \
+vllm serve meta-llama/Llama-3.1-8B-Instruct \
+  --port 8200 \
+  --kv-transfer-config '{
+    "kv_connector": "MultiConnector",
+    "kv_role": "kv_consumer",
+    "kv_connector_extra_config": {
+      "connectors": [
+        {
+          "kv_connector": "MooncakeConnector",
+          "kv_role": "kv_consumer"
+        },
+        {
+          "kv_connector": "MooncakeStoreConnector",
+          "kv_role": "kv_consumer"
+        }
+      ]
+    }
+  }'
+```
+
+### 注意
+
+這種模式還需要一個 proxy 來協調 request 到 prefiller / decoder。
+
+官方來源：
+- [MooncakeStoreConnector Usage Guide](https://docs.vllm.ai/en/latest/features/mooncake_store_connector_usage/)
+
+## 7. 如果你不想真的共享，還有兩個很好用的替代方案
+
+### 7.1 Prefix-aware routing
+
+這個做法不是共享 store，而是把相同 prefix 的請求送到同一台 instance，提高原本 local cache 的命中率。
+
+適合：
+
+- 多個 replica
+- 有重複 system prompt
+- 不想先上共享快取層
+
+### 7.2 KV-cache-aware routing
+
+這個做法會把請求送到 **KV 命中率最高** 的 instance。
+
+它的好處是：
+
+- 比 prefix-aware 更聰明
+- 就算 prefix 一樣，但某台 cache 已經被 evict，也不會盲目送回原本那台
+
+官方來源：
+- [KV Cache Aware Routing](https://docs.vllm.ai/projects/production-stack/en/vllm-stack-0.1.8/use_cases/kv-cache-aware-routing.html)
+
+## 8. 建議的落地順序
+
+如果你是第一次做，建議按這個順序：
+
+1. **單機先開 `Automatic Prefix Caching`**
+2. **如果要跨 process，共享 PVC，先試 `OffloadingConnector`**
+3. **如果要正式多 replica 共享，再看 `LMCache`**
+4. **如果要多節點共享池，再評估 `MooncakeStoreConnector`**
+5. **如果你是進階高吞吐架構，再做 `disaggregated prefill/decode`**
+
+這樣比較不會一開始就把系統複雜度拉太高。
+
+## 9. 最後幫你做一句判斷
+
+如果你的目標是：
+
+- **「先驗證能不能跨 instance 重用 KV」**  
+  先用 `OffloadingConnector + shared root_dir + PYTHONHASHSEED=0`
+
+- **「Kubernetes 上正式做共享 KV cache」**  
+  優先看 `LMCache`
+
+- **「做分散式共享池與進階調度」**  
+  看 `MooncakeStoreConnector`
+
+- **「其實只想少算重複 prefix」**  
+  先開 `Automatic Prefix Caching`，再配 `KV-cache-aware routing`
+
+## 10. 官方文件
+
+- [Automatic Prefix Caching](https://docs.vllm.ai/en/latest/features/automatic_prefix_caching/)
+- [KV Offloading Usage Guide](https://docs.vllm.ai/en/latest/features/kv_offloading_usage/)
+- [Sharing KV Cache Across Instances](https://docs.vllm.ai/projects/production-stack/en/latest/use_cases/sharing-kv-cache.html)
+- [LMCache Examples](https://docs.vllm.ai/en/latest/examples/disaggregated/lmcache/)
+- [MooncakeStoreConnector Usage Guide](https://docs.vllm.ai/en/latest/features/mooncake_store_connector_usage/)
+- [KV Cache Aware Routing](https://docs.vllm.ai/projects/production-stack/en/vllm-stack-0.1.8/use_cases/kv-cache-aware-routing.html)
+- [KVTransferConfig API](https://docs.vllm.ai/en/stable/api/vllm/config/kv_transfer/)
diff --git a/docs/vllm-model-serving-load-balancing.md b/docs/vllm-model-serving-load-balancing.md
new file mode 100644
index 0000000..8e114b5
--- /dev/null
+++ b/docs/vllm-model-serving-load-balancing.md
@@ -0,0 +1,281 @@
+# vLLM 模型 Serving 負載平衡整理
+
+更新日期：2026-06-20
+
+## 範圍
+
+本文只整理 **模型 serving 相關** 的 vLLM 負載平衡與路由方式，不包含一般 Web/API 集群常見的 round robin、least connections 等通用型負載平衡觀念，除非它們在 vLLM 官方部署方式中有直接出現。
+
+另外要先區分三件事：
+
+1. **Request routing / load balancing**
+把一個推理請求送到哪一個 vLLM instance。
+2. **Deployment topology**
+多個 vLLM engine、API server、節點之間如何分工。
+3. **Model-internal balancing**
+像 MoE expert 的內部負載均衡，這不是入口流量分配，但仍屬模型 serving 的效能優化。
+
+## 一覽表
+
+| 類別 | 方法 | vLLM 層級 | 核心目的 | 最適合的情境 |
+|---|---|---|---|---|
+| Request routing | Round-robin | Production Stack Router | 平均分配請求 | 同質 GPU、無明顯快取重用 |
+| Request routing | Session-based routing | Production Stack Router | 讓同一 session 盡量回同一台 | 多輪對話、會話狀態重用 |
+| Request routing | Prefix-aware routing | Production Stack Router | 提高 prefix cache / KV cache 命中率 | 共用 system prompt、模板化 prompt |
+| Request routing | KV cache aware routing | Production Stack Router | 把請求送去快取命中機率最高的 replica | 多輪聊天、重複上下文 |
+| Request routing / architecture | Disaggregated-prefill routing | Production Stack Router | 拆開 prefill 與 decode 階段 | 長上下文、高吞吐場景 |
+| Deployment topology | Internal load balancing | vLLM Core data parallel deployment | 在單個 API server 內依 engine queue 分流 | 同機或同節點多 engine |
+| Deployment topology | Hybrid load balancing | vLLM Core data parallel deployment | 先做本地分流，再交給上游 LB | 多節點、想兼顧 locality |
+| Deployment topology | External load balancing | vLLM Core data parallel deployment | 交給外部 LB/ingress/router | 已有既有平台或 service mesh |
+| Model-internal balancing | EPLB (Expert Parallel Load Balancer) | MoE / Expert Parallel | 降低 expert 負載傾斜 | MoE 模型 serving |
+
+## 1. Production Stack 的模型路由策略
+
+這一層最接近一般所說的「vLLM 負載平衡」。
+
+### 1.1 Round-robin
+
+**做法**
+依序把請求輪流送到不同的 vLLM server。
+
+**優點**
+- 最簡單，容易理解與除錯。
+- 不需要額外蒐集 cache 狀態或 session 資訊。
+- 在所有 replica 規格相近、流量型態接近時，效果通常可接受。
+
+**缺點**
+- 完全不知道 prompt 長短差異。
+- 不會利用 prefix cache 或 KV cache。
+- 多輪對話可能反覆打到不同 instance，讓 cache 命中率下降。
+
+**適用情境**
+- 模型請求彼此差異不大。
+- 重點是快速上線，而不是極致效能。
+- 前期壓測或功能驗證。
+
+### 1.2 Session-based routing
+
+**做法**
+同一個 session 的請求盡量送到同一台 server。官方文件也提到，當請求沒有 session id 時，會選擇 `lowest qps` 的 server。
+
+**優點**
+- 多輪對話通常有更好的快取重用效果。
+- 對 conversational AI 很直覺。
+- 比單純 round-robin 更符合聊天產品的流量特性。
+
+**缺點**
+- 大客戶或熱門 session 可能變成熱點。
+- session 分布不均時，整體負載可能不平均。
+- 需要應用層正確傳 session id。
+
+**適用情境**
+- Chatbot。
+- Agent 對話。
+- 任何明顯以「會話」為單位的互動型應用。
+
+### 1.3 Prefix-aware routing
+
+**做法**
+把具有相同或高度相似 prompt prefix 的請求送到相同 instance，以提升 prefix cache 命中率。
+
+**優點**
+- 對共用 system prompt、RAG 模板、few-shot 模板特別有效。
+- 可以降低 prefill 成本。
+- 在高重複前綴工作負載中，通常比 round-robin 更有效率。
+
+**缺點**
+- 如果 prefix 分布很偏，容易形成特定 replica 熱點。
+- 如果請求之間幾乎沒有共享 prefix，收益有限。
+- 需要 router 能識別 prefix 關聯。
+
+**適用情境**
+- 大量固定 system prompt。
+- 統一模板式企業問答。
+- Prompt 結構高度規範化的服務。
+
+### 1.4 KV cache aware routing
+
+**做法**
+根據各個 instance 的 KV cache 狀態，把請求送去最可能有 cache 命中的地方。
+
+**優點**
+- 比 prefix-aware 更精細，因為它看的是實際快取狀態，不只是 prefix 相似度。
+- 對長對話和重複上下文更有幫助。
+- 有機會明顯降低延遲與 GPU 重算成本。
+
+**缺點**
+- 實作與觀測成本更高。
+- 需要 router 能拿到各 instance 的 cache 資訊。
+- 如果 cache 狀態更新不即時，判斷品質會下降。
+
+**適用情境**
+- 多輪聊天。
+- 需要高 cache reuse 的企業內部助理。
+- 相同上下文頻繁重訪的工作負載。
+
+### 1.5 Disaggregated-prefill routing
+
+**做法**
+將 `prefill` 與 `decode` 階段拆開，由不同資源池處理。Router 不只是分流請求，而是要協調請求進入哪個 prefill worker、哪個 decode worker。
+
+**優點**
+- 能針對 prefill 與 decode 使用不同最佳化策略。
+- 長上下文場景通常更有機會提升整體吞吐。
+- 有助於更細緻地利用不同 GPU 資源。
+
+**缺點**
+- 系統設計更複雜。
+- 需要處理跨階段的資料傳遞與協調。
+- 如果流量特徵不適合，額外開銷可能吃掉收益。
+
+**適用情境**
+- 長 prompt。
+- 大規模 LLM 服務。
+- 吞吐量導向的線上推理平台。
+
+## 2. vLLM Core 的部署層負載平衡
+
+這些方法比較像「多 engine / 多節點部署方式」，不是單一 routing algorithm，但在實際 serving 中很重要。
+
+### 2.1 Internal load balancing
+
+**做法**
+在單個 API server 內部，依各個 engine 的執行或等待狀態來分配請求。
+
+**優點**
+- 不必完全依賴外部負載平衡器。
+- 對單節點或單入口多 engine 架構很直接。
+- 可以利用內部對 engine queue 的可見性做更合理分流。
+
+**缺點**
+- 主要解決的是單入口內部的分配。
+- 跨節點全域最佳化能力有限。
+
+**適用情境**
+- 同一節點多個 data parallel engine。
+- 想降低外部 LB 複雜度。
+
+### 2.2 Hybrid load balancing
+
+**做法**
+每個節點先在本地對本地 engine 做內部分流，再由上層負載平衡器把流量導向不同節點。
+
+**優點**
+- 同時兼顧本地 queue 可見性與多節點擴展。
+- 在 locality 與全域分流之間取得平衡。
+
+**缺點**
+- 觀測與調校比 internal/external 單獨使用更複雜。
+- 若上層與下層策略不協調，效果可能不理想。
+
+**適用情境**
+- 多節點 vLLM 叢集。
+- 想兼顧節點內效率與叢集擴展性。
+
+### 2.3 External load balancing
+
+**做法**
+把每個 vLLM server 或 data parallel rank 暴露給外部負載平衡器，由 Nginx、ingress、service mesh 或自訂 router 決定分流。
+
+**優點**
+- 容易接到既有雲平台與基礎設施。
+- 方便統一治理 TLS、權限、觀測、限流。
+- 與其他服務平台整合成本較低。
+
+**缺點**
+- 外部 LB 通常不了解模型內部快取與 token 成本。
+- 若只用通用型演算法，對 LLM 不一定最優。
+
+**適用情境**
+- 已有成熟平台團隊。
+- Kubernetes / service mesh / ingress-based 架構。
+
+## 3. 模型內部的負載平衡：EPLB
+
+### 3.1 EPLB (Expert Parallel Load Balancer)
+
+**做法**
+在 MoE 模型的 expert parallel serving 中，重新調整 expert mapping，避免少數 expert 過熱造成某些 GPU 或 worker 壓力過高。
+
+**優點**
+- 直接處理 MoE 的核心瓶頸之一。
+- 有助於降低 expert 負載不均。
+- 能改善 MoE serving 的穩定性與資源利用率。
+
+**缺點**
+- 只適用於 MoE / expert parallel 場景。
+- 不是入口 request routing，不能取代前面的 router。
+
+**適用情境**
+- Mixtral、DeepSeek-MoE 等 MoE 模型部署。
+
+## 4. 實務上的選擇建議
+
+### 如果你是做聊天型應用
+
+優先順序通常是：
+
+1. `Session-based routing`
+2. `KV cache aware routing`
+3. `Prefix-aware routing`
+
+原因是聊天服務往往最依賴上下文重用，而不是單純的平均分流。
+
+### 如果你是做模板化企業問答
+
+優先考慮：
+
+1. `Prefix-aware routing`
+2. `KV cache aware routing`
+
+因為這類服務常有固定 system prompt、固定 RAG 包裝格式，prefix 重複率高。
+
+### 如果你是做高吞吐、長上下文服務
+
+優先考慮：
+
+1. `Disaggregated-prefill routing`
+2. `KV cache aware routing`
+3. `Hybrid load balancing`
+
+這樣比較能把 prefill 與 decode 的資源特性分開處理。
+
+### 如果你只是先把服務跑起來
+
+先從：
+
+1. `Round-robin`
+2. `External load balancing`
+
+開始最省事，之後再根據延遲、吞吐、cache hit rate 升級。
+
+## 5. 一句話總結
+
+如果只看 vLLM 模型 serving：
+
+- **最基本** 的做法是 `round-robin`。
+- **聊天服務最常見的優化方向** 是 `session-based` 與 `KV cache aware`。
+- **有共用 prompt 模板時**，`prefix-aware` 往往很值得。
+- **長上下文與高吞吐平台**，要特別看 `disaggregated-prefill`。
+- **MoE 模型** 則另外有 `EPLB` 處理 expert 層級的負載不均。
+
+## 6. 官方來源
+
+- vLLM Data Parallel Deployment  
+  https://docs.vllm.ai/en/stable/serving/data_parallel_deployment/
+- vLLM Nginx Deployment Example  
+  https://docs.vllm.ai/en/stable/deployment/nginx/
+- vLLM Production Stack Router Logic API  
+  https://docs.vllm.ai/projects/production-stack/en/vllm-stack-0.1.2/dev_guide/dev_api/router-logic.html
+- vLLM Production Stack Router JSON Config  
+  https://docs.vllm.ai/projects/production-stack/en/vllm-stack-0.1.2/user_manual/router/json.html
+- vLLM Prefix-aware Routing  
+  https://docs.vllm.ai/projects/production-stack/en/latest/use_cases/prefix-aware-routing.html
+- vLLM KV Cache Aware Routing  
+  https://docs.vllm.ai/projects/production-stack/en/vllm-stack-0.1.8/use_cases/kv-cache-aware-routing.html
+- vLLM Disaggregated Prefill  
+  https://docs.vllm.ai/projects/production-stack/en/latest/use_cases/disaggregated-prefill.html
+- vLLM Semantic Router Integration  
+  https://docs.vllm.ai/projects/production-stack/en/latest/use_cases/semantic-router-integration.html
+- vLLM Expert Parallel Deployment / EPLB  
+  https://docs.vllm.ai/en/latest/serving/expert_parallel_deployment/

From 76cd8727472a823e3f0cfca901bc8cbbeb2b0e2f Mon Sep 17 00:00:00 2001
From: max <milk333445@gmail.com>
Date: Tue, 23 Jun 2026 01:37:43 +0800
Subject: [PATCH 2/2] feat : full translate

---
 apps/frontend_llmops/env.d.ts                 |  15 +-
 apps/frontend_llmops/package-lock.json        |  89 +++++
 apps/frontend_llmops/package.json             |   1 +
 .../src/components/AddInstanceDialog.vue      |  32 +-
 .../src/components/AddModelDialog.vue         | 254 +++++++-------
 .../src/components/CodeBlock.vue              |   6 +-
 .../src/components/DatasetCard.vue            |  12 +-
 .../src/components/DatasetPreviewDialog.vue   |  18 +-
 .../src/components/EmbeddingModelDialog.vue   |  30 +-
 .../src/components/EvalSampleBrowser.vue      | 145 +++++---
 .../src/components/GpuGauge.vue               |   8 +-
 .../src/components/ModelControlDialog.vue     |  12 +-
 .../src/components/ModelDetailDrawer.vue      | 153 ++++----
 .../src/components/ModelGroupCard.vue         | 194 ++++++-----
 .../src/components/PerfCompareChart.vue       |   8 +-
 .../src/components/PerfSweepChart.vue         |   8 +-
 .../src/components/RouterFanDiagram.vue       |  22 +-
 .../src/components/SystemTopology.vue         |  40 ++-
 .../src/components/layout/StatusBar.vue       |  12 +-
 .../src/composables/useModelControl.ts        |  28 +-
 apps/frontend_llmops/src/i18n/index.ts        |   1 +
 apps/frontend_llmops/src/i18n/locales/en.ts   |  63 +++-
 .../frontend_llmops/src/i18n/locales/zh-TW.ts |  70 +++-
 .../src/lib/routingStrategies.ts              |  16 +-
 apps/frontend_llmops/src/lib/utils.ts         |  15 +-
 .../src/views/ActivityView.vue                |   8 +-
 .../src/views/BenchmarkView.vue               | 294 ++++++++--------
 .../src/views/DatasetsView.vue                |  48 +--
 apps/frontend_llmops/src/views/EvalView.vue   | 214 ++++++------
 apps/frontend_llmops/src/views/KeysView.vue   |  61 ++--
 .../frontend_llmops/src/views/LibraryView.vue |  67 ++--
 .../src/views/LoraLibraryView.vue             |  68 ++--
 .../src/views/MonitoringView.vue              |  30 +-
 .../src/views/OverviewView.vue                |   2 +-
 .../src/views/PlaygroundView.vue              | 327 ++++++++++--------
 .../src/views/RequestsView.vue                |   4 +-
 .../src/views/ResourcesView.vue               |  27 +-
 .../frontend_llmops/src/views/TrafficView.vue |   4 +-
 apps/frontend_llmops/src/views/UsageView.vue  | 105 +++---
 39 files changed, 1466 insertions(+), 1045 deletions(-)

diff --git a/apps/frontend_llmops/env.d.ts b/apps/frontend_llmops/env.d.ts
index a32be6e..1bf7ef1 100644
--- a/apps/frontend_llmops/env.d.ts
+++ b/apps/frontend_llmops/env.d.ts
@@ -1,12 +1,11 @@
 /// <reference types="vite/client" />
 
-interface ImportMetaEnv {
-  /** Dashboard Backend base URL (model lifecycle, resources, telemetry). */
-  readonly VITE_API_BASE_URL: string
-  /** LLM Router base URL (OpenAI-compatible inference + /metrics). */
-  readonly VITE_ROUTER_BASE_URL: string
-}
+import 'vue'
 
-interface ImportMeta {
-  readonly env: ImportMetaEnv
+declare module 'vue' {
+  interface ComponentCustomProperties {
+    $t: (key: string, ...args: unknown[]) => string
+  }
 }
+
+export {}
diff --git a/apps/frontend_llmops/package-lock.json b/apps/frontend_llmops/package-lock.json
index 86df9d1..cf8dc03 100644
--- a/apps/frontend_llmops/package-lock.json
+++ b/apps/frontend_llmops/package-lock.json
@@ -25,6 +25,7 @@
         "tailwind-merge": "^3.6.0",
         "tailwindcss": "^4.3.1",
         "vue": "^3.5.32",
+        "vue-i18n": "^11.4.6",
         "vue-router": "^5.0.4",
         "vue-sonner": "^2.0.9"
       },
@@ -1004,6 +1005,67 @@
         "@swc/helpers": "^0.5.0"
       }
     },
+    "node_modules/@intlify/core-base": {
+      "version": "11.4.6",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-11.4.6.tgz",
+      "integrity": "sha512-EOeHO95XESK9IFHgHeZXunsM/WBAoCA0DlaWODvx14vKmetAuS97t+l6Xe9hTUqntPpF93vtVSjjUDafw3wXMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/devtools-types": "11.4.6",
+        "@intlify/message-compiler": "11.4.6",
+        "@intlify/shared": "11.4.6"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/devtools-types": {
+      "version": "11.4.6",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-types/-/devtools-types-11.4.6.tgz",
+      "integrity": "sha512-wowQPpNem56b2d43IJmqbrzG2FeBKe5f/kUGlpNuBmXs6OSqncF8m1+1lxHuW8ISZJF0ma2RkW3iLkw0g0G4VA==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.6",
+        "@intlify/shared": "11.4.6"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/message-compiler": {
+      "version": "11.4.6",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-11.4.6.tgz",
+      "integrity": "sha512-5nj3jULqeTAC1WovwMs1LQWgatTa2pM/rXN9T3XW8rdOtXW9ZF6/GLSNFTKDQmPLwclhPdgUWLJ/4w3fMeeC/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/shared": "11.4.6",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
+    "node_modules/@intlify/shared": {
+      "version": "11.4.6",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-11.4.6.tgz",
+      "integrity": "sha512-m1p1HHAMLhqSpTRH7VnXdrN0CQ4y+9vunFkpLkbD8soIuBsnQdawZXqMCgvwI2UVF9Ww7sVaw7g9tV2VO7shoA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      }
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -8557,6 +8619,33 @@
         "node": ">=10"
       }
     },
+    "node_modules/vue-i18n": {
+      "version": "11.4.6",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-11.4.6.tgz",
+      "integrity": "sha512-l0gE7Rfy0phCa5ChKYkOq543Wgd39BCK6hkktfr1Ed4D99oRkgPK9ffShASZdeC8OJxGfdWmpYoAaAH6iLEuIg==",
+      "license": "MIT",
+      "dependencies": {
+        "@intlify/core-base": "11.4.6",
+        "@intlify/devtools-types": "11.4.6",
+        "@intlify/shared": "11.4.6",
+        "@vue/devtools-api": "^6.5.0"
+      },
+      "engines": {
+        "node": ">= 22"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/kazupon"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.0"
+      }
+    },
+    "node_modules/vue-i18n/node_modules/@vue/devtools-api": {
+      "version": "6.6.4",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.4.tgz",
+      "integrity": "sha512-sGhTPMuXqZ1rVOk32RylztWkfXTRhuS7vgAKv0zjqk8gbsHkJ7xfFf+jbySxt7tWObEJwyKaHMikV/WGDiQm8g==",
+      "license": "MIT"
+    },
     "node_modules/vue-router": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-5.1.0.tgz",
diff --git a/apps/frontend_llmops/package.json b/apps/frontend_llmops/package.json
index 3bcb84e..e332bc0 100644
--- a/apps/frontend_llmops/package.json
+++ b/apps/frontend_llmops/package.json
@@ -34,6 +34,7 @@
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.1",
     "vue": "^3.5.32",
+    "vue-i18n": "^11.4.6",
     "vue-router": "^5.0.4",
     "vue-sonner": "^2.0.9"
   },
diff --git a/apps/frontend_llmops/src/components/AddInstanceDialog.vue b/apps/frontend_llmops/src/components/AddInstanceDialog.vue
index c4254e2..2587001 100644
--- a/apps/frontend_llmops/src/components/AddInstanceDialog.vue
+++ b/apps/frontend_llmops/src/components/AddInstanceDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Loader2, Plus } from '@lucide/vue'
 import Dialog from '@/components/ui/Dialog.vue'
 import Input from '@/components/ui/Input.vue'
@@ -18,6 +19,7 @@ const open = defineModel<boolean>('open', { default: false })
 const props = defineProps<{ group: string; instances: ModelView[] }>()
 const emit = defineEmits<{ created: [key: string] }>()
 
+const { t } = useI18n()
 const models = useModelsStore()
 const creating = ref(false)
 
@@ -88,11 +90,13 @@ async function submit() {
     })
     // Deliberately NOT reloading the router here — it would route to a still-
     // stopped backend. The backend reloads it for us once this instance is READY.
-    toast.success(`已新增實例 ${view.key}`, { description: '目前已停止 — 請按「啟動」以啟用。' })
+    toast.success(t('addInstance.createSuccess', { key: view.key }), {
+      description: t('addInstance.createSuccessDesc'),
+    })
     emit('created', view.key)
     open.value = false
   } catch (e) {
-    toast.error('新增實例失敗', {
+    toast.error(t('addInstance.createFailed'), {
       description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
     })
   } finally {
@@ -102,48 +106,48 @@ async function submit() {
 </script>
 
 <template>
-  <Dialog v-model:open="open" :title="`新增實例 · ${group}`" width-class="max-w-md">
+  <Dialog v-model:open="open" :title="`${$t('addInstance.title')} · ${group}`" width-class="max-w-md">
     <div class="space-y-4 text-sm">
       <!-- Inherited shared config (read-only) -->
       <div class="rounded-md border border-border/60 bg-muted/30 p-3">
-        <p class="text-xs font-medium text-muted-foreground">沿用此群組的共用設定</p>
+        <p class="text-xs font-medium text-muted-foreground">{{ $t('addInstance.sharedSettingsTitle') }}</p>
         <p class="mt-1 font-mono text-[12px]">{{ modelTag }}</p>
         <p class="mt-1 text-[11px] text-muted-foreground">
           max_model_len {{ sharedSettings.max_model_len ?? '—' }} ·
           gpu_memory_utilization {{ sharedSettings.gpu_memory_utilization ?? '—' }}
         </p>
         <p class="mt-1.5 text-[11px] text-muted-foreground">
-          同群組的所有實例共用 vLLM 參數，這裡只需設定本實例的位置。
+          {{ $t('addInstance.sharedSettingsHint') }}
         </p>
       </div>
 
       <div class="space-y-1.5">
-        <label class="text-xs font-medium text-muted-foreground">實例 ID</label>
-        <Input v-model="instanceId" placeholder="例如：qwen3-5" class="font-mono" />
-        <p v-if="idConflict" class="text-[11px] text-status-failed">此 ID 已存在於群組中。</p>
+        <label class="text-xs font-medium text-muted-foreground">{{ $t('addInstance.instanceIdLabel') }}</label>
+        <Input v-model="instanceId" :placeholder="$t('addInstance.instanceIdPlaceholder')" class="font-mono" />
+        <p v-if="idConflict" class="text-[11px] text-status-failed">{{ $t('addInstance.idConflict') }}</p>
       </div>
 
       <div class="grid grid-cols-2 gap-3">
         <div class="space-y-1.5">
-          <label class="text-xs font-medium text-muted-foreground">Port</label>
+          <label class="text-xs font-medium text-muted-foreground">{{ $t('addModel.portLabel') }}</label>
           <Input v-model.number="port" type="number" min="1" class="font-mono" />
-          <p v-if="portConflict" class="text-[11px] text-status-failed">此 port 已被佔用。</p>
+          <p v-if="portConflict" class="text-[11px] text-status-failed">{{ $t('addInstance.portConflict') }}</p>
         </div>
         <div class="space-y-1.5">
-          <label class="text-xs font-medium text-muted-foreground">CUDA 裝置</label>
+          <label class="text-xs font-medium text-muted-foreground">{{ $t('addInstance.cudaDeviceLabel') }}</label>
           <Input v-model.number="cudaDevice" type="number" min="0" class="font-mono" />
         </div>
       </div>
 
       <div class="space-y-1.5">
-        <label class="text-xs font-medium text-muted-foreground">Host</label>
+        <label class="text-xs font-medium text-muted-foreground">{{ $t('addModel.hostLabel') }}</label>
         <Input v-model="host" placeholder="localhost" class="font-mono" />
       </div>
 
       <div class="flex justify-end gap-2 pt-1">
-        <Button variant="outline" @click="open = false">取消</Button>
+        <Button variant="outline" @click="open = false">{{ $t('common.cancel') }}</Button>
         <Button :disabled="!valid || creating" @click="submit">
-          <Loader2 v-if="creating" class="size-4 animate-spin" /><Plus v-else class="size-4" />新增實例
+          <Loader2 v-if="creating" class="size-4 animate-spin" /><Plus v-else class="size-4" />{{ $t('addInstance.title') }}
         </Button>
       </div>
     </div>
diff --git a/apps/frontend_llmops/src/components/AddModelDialog.vue b/apps/frontend_llmops/src/components/AddModelDialog.vue
index 43f6f83..aee1e48 100644
--- a/apps/frontend_llmops/src/components/AddModelDialog.vue
+++ b/apps/frontend_llmops/src/components/AddModelDialog.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { AlertTriangle, Check, Download, Loader2, Plus, Share2, Trash2, Wand2 } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import Dialog from '@/components/ui/Dialog.vue'
 import Input from '@/components/ui/Input.vue'
 import Textarea from '@/components/ui/Textarea.vue'
@@ -19,6 +20,7 @@ import type { CachedModel, DownloadJob, KvTransferConfig, LoraAdapter, LoraModul
 const open = defineModel<boolean>('open', { default: false })
 const props = defineProps<{ mode?: 'create' | 'edit'; editKey?: string | null }>()
 const emit = defineEmits<{ created: [key: string]; updated: [key: string] }>()
+const { t } = useI18n()
 
 const models = useModelsStore()
 const resources = useResourcesStore()
@@ -69,7 +71,10 @@ function loraBaseWarning(l: LoraModule): string {
   if (!a || !a.base_model) return ''
   return a.base_model === modelTag.value
     ? ''
-    : `此 adapter 的 base 是 ${a.base_model}，與本模型 ${modelTag.value || '(未填)'} 不符`
+    : t('addModel.loraBaseMismatch', {
+      adapterBase: a.base_model,
+      modelTag: modelTag.value || `(${t('addModel.notSet')})`,
+    })
 }
 
 const gpuOptions = computed(() => resources.resources?.gpus.map((g) => g.index) ?? [])
@@ -111,10 +116,14 @@ async function downloadWeights() {
   if (!repo) return
   try {
     await api.startDownload(repo)
-    toast.success(`開始下載 ${repo}`, { description: '可關閉此視窗，下載會在背景繼續。' })
+    toast.success(t('addModel.downloadStarted', { repo }), {
+      description: t('addModel.downloadStartedDesc'),
+    })
     await loadDownloads()
   } catch (e) {
-    toast.error('無法開始下載', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('addModel.downloadFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   }
 }
 
@@ -245,7 +254,9 @@ async function parse() {
     warnings.value = p.warnings
     parsed.value = true
   } catch (e) {
-    toast.error('無法解析指令', { description: e instanceof ApiError ? e.message : String(e) })
+    toast.error(t('addModel.parseFailed'), {
+      description: e instanceof ApiError ? e.message : String(e),
+    })
   } finally {
     parsing.value = false
   }
@@ -295,7 +306,7 @@ const showToolHint = ref(false)
 // Recommended (tool_call_parser, reasoning_parser) by model family.
 const TOOL_PRESETS = [
   { label: 'Qwen2.5 / QwQ', parser: 'hermes', reasoning: '' },
-  { label: 'Qwen3（含 thinking）', parser: 'hermes', reasoning: 'qwen3' },
+  { label: 'addModel.qwen3Thinking', parser: 'hermes', reasoning: 'qwen3' },
   { label: 'Qwen3-Coder', parser: 'qwen3_xml', reasoning: '' },
   { label: 'Llama 3.1/3.2', parser: 'llama3_json', reasoning: '' },
   { label: 'Llama 4', parser: 'llama4_pythonic', reasoning: '' },
@@ -428,28 +439,34 @@ async function submit() {
   try {
     if (isEdit.value && props.editKey) {
       const view = await api.updateModel(props.editKey, payload)
-      toast.success(`已更新 ${view.key}`, { description: '變更將於下次啟動時生效。' })
+      toast.success(t('addModel.editSuccess', { key: view.key }), {
+        description: t('addModel.editSuccessDesc'),
+      })
       // Keep the store's cached config in sync so the next edit prefills fresh.
       void models.loadConfig()
       if (!(await api.routerReload())) {
-        toast.warning('路由器未重新整理', { description: '變更已儲存，但路由器無法連線。' })
+        toast.warning(t('addModel.routerReloadFailed'), {
+          description: t('addModel.routerReloadEditDesc'),
+        })
       }
       emit('updated', view.key)
     } else {
       const view = await api.createModel(payload)
-      toast.success(`已新增 ${view.key}`, { description: '目前已停止 — 請按「啟動」以啟用。' })
+      toast.success(t('addModel.createSuccess', { key: view.key }), {
+        description: t('addModel.createSuccessDesc'),
+      })
       void models.loadConfig()
       // Make it routable end-to-end by refreshing the router's view of the config.
       if (!(await api.routerReload())) {
-        toast.warning('路由器未重新整理', {
-          description: '模型已新增，但路由器無法連線 — 重新載入前將無法路由至此模型。',
+        toast.warning(t('addModel.routerReloadFailed'), {
+          description: t('addModel.routerReloadCreateDesc'),
         })
       }
       emit('created', view.key)
     }
     open.value = false
   } catch (e) {
-    toast.error(isEdit.value ? '更新模型失敗' : '新增模型失敗', {
+    toast.error(isEdit.value ? t('addModel.editFailed') : t('addModel.createFailed'), {
       description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
     })
   } finally {
@@ -459,11 +476,11 @@ async function submit() {
 </script>
 
 <template>
-  <Dialog v-model:open="open" :title="isEdit ? '編輯模型' : '新增模型'" width-class="max-w-2xl">
+  <Dialog v-model:open="open" :title="isEdit ? $t('addModel.editTitle') : $t('addModel.createTitle')" width-class="max-w-2xl">
     <div class="space-y-4">
       <!-- Paste + parse (create only) -->
       <div v-if="!isEdit">
-        <label class="text-xs font-medium text-muted-foreground">貼上 vLLM 啟動指令</label>
+        <label class="text-xs font-medium text-muted-foreground">{{ $t('addModel.pasteCommand') }}</label>
         <Textarea
           v-model="command"
           placeholder="CUDA_VISIBLE_DEVICES=0 vllm serve Qwen/Qwen2.5-3B-Instruct --port 8020 --dtype float16 --max-model-len 4096 --gpu-memory-utilization 0.85"
@@ -471,7 +488,7 @@ async function submit() {
         />
         <Button class="mt-2" size="sm" :disabled="!command.trim() || parsing" @click="parse">
           <Loader2 v-if="parsing" class="size-4 animate-spin" /><Wand2 v-else class="size-4" />
-          解析指令
+          {{ $t('addModel.parseCommand') }}
         </Button>
       </div>
 
@@ -494,61 +511,61 @@ async function submit() {
         >
           <p class="flex items-start gap-1.5">
             <AlertTriangle class="mt-px size-3.5 shrink-0" />
-            vLLM 參數為群組共用 — 此變更將套用至群組 <span class="font-mono">{{ group }}</span> 的全部 {{ groupSiblings + 1 }} 個副本。
+            {{ $t('addModel.groupSharedWarn', { group, n: groupSiblings + 1 }) }}
           </p>
         </div>
 
         <div class="grid grid-cols-2 gap-3">
           <label class="block">
-            <span class="text-xs text-muted-foreground">群組</span>
+            <span class="text-xs text-muted-foreground">{{ $t('addModel.groupLabel') }}</span>
             <Input v-model="group" class="mt-1" :disabled="isEdit" />
             <span v-if="!isEdit && groupExists && !keyExists" class="mt-1 block text-[11px] text-muted-foreground">
-              已存在群組 — 將新增為新副本。
+              {{ $t('addModel.groupExists') }}
             </span>
           </label>
           <label class="block">
-            <span class="text-xs text-muted-foreground">實例 ID</span>
+            <span class="text-xs text-muted-foreground">{{ $t('addModel.instanceLabel') }}</span>
             <Input v-model="instanceId" class="mt-1" :disabled="isEdit" :class="!isEdit && keyExists ? 'border-status-failed' : ''" />
             <span v-if="!isEdit && keyExists" class="mt-1 block text-[11px] text-status-failed">
-              {{ key }} 已存在。
+              {{ $t('addModel.keyExists', { key }) }}
             </span>
           </label>
           <label class="block">
-            <span class="text-xs text-muted-foreground">主機</span>
+            <span class="text-xs text-muted-foreground">{{ $t('addModel.hostLabel') }}</span>
             <Input v-model="host" class="mt-1" />
           </label>
           <label class="block">
-            <span class="text-xs text-muted-foreground">連接埠</span>
+            <span class="text-xs text-muted-foreground">{{ $t('addModel.portLabel') }}</span>
             <Input v-model.number="port" type="number" class="mt-1" :class="portInUse ? 'border-status-failed' : ''" />
             <span v-if="portInUse" class="mt-1 block text-[11px] text-status-failed">
-              連接埠 {{ port }} 已被其他實例使用。
+              {{ $t('addModel.portInUse', { port }) }}
             </span>
           </label>
           <label class="block">
-            <span class="text-xs text-muted-foreground">GPU（cuda_device）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('addModel.gpuLabel') }}</span>
             <select
               v-model="cudaDevice"
               class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm"
             >
-              <option :value="null">無 / 自動</option>
+              <option :value="null">{{ $t('addModel.gpuAuto') }}</option>
               <option v-for="i in gpuOptions" :key="i" :value="i">cuda:{{ i }}</option>
             </select>
           </label>
           <label class="block">
-            <span class="text-xs text-muted-foreground">模型標籤 <span class="text-status-failed">*</span></span>
+            <span class="text-xs text-muted-foreground">{{ $t('addModel.modelTagLabel') }} <span class="text-status-failed">*</span></span>
             <Input v-model="modelTag" class="mt-1 font-mono" placeholder="org/model" />
           </label>
           <label class="col-span-2 block">
-            <span class="text-xs text-muted-foreground">路由策略（負載平衡）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('addModel.routingLabel') }}</span>
             <select
               v-model="routingStrategy"
               class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm"
             >
-              <option value="">跟隨全域預設</option>
+              <option value="">{{ $t('addModel.routingDefault') }}</option>
               <option v-for="s in ROUTING_STRATEGIES" :key="s" :value="s">{{ routingStrategyLabel(s) }}</option>
             </select>
             <span class="mt-1 block text-[11px] text-muted-foreground">
-              此群組請求的分流方式;留空則跟隨全域設定（可在「流量」頁切換）。多副本才有效。
+              {{ $t('addModel.routingHint') }}
             </span>
           </label>
           <label
@@ -558,11 +575,10 @@ async function submit() {
             <input v-model="kvShared" type="checkbox" class="mt-0.5 size-4 accent-[var(--chart-1)]" />
             <span class="min-w-0">
               <span class="flex items-center gap-1.5 text-sm font-medium">
-                <Share2 class="size-3.5 text-[var(--chart-1)]" />共用 KV Cache（跨 instance）
+                <Share2 class="size-3.5 text-[var(--chart-1)]" />{{ $t('addModel.kvShareLabel') }}
               </span>
               <span class="mt-0.5 block text-[11px] text-muted-foreground">
-                同群組各副本透過共享 store（/kv_cache）重用彼此算過的 KV，相同前綴不必重算。
-                多副本 + 高前綴重複率（固定 system prompt / RAG / 多輪對話）效益最大；關閉則各副本各自獨立 KV。
+                {{ $t('addModel.kvShareDesc') }}
               </span>
             </span>
           </label>
@@ -576,7 +592,7 @@ async function submit() {
           <!-- Downloading -->
           <template v-if="downloadJob && (downloadJob.state === 'downloading' || downloadJob.state === 'pending')">
             <Loader2 class="size-3.5 shrink-0 animate-spin text-muted-foreground" />
-            <span class="text-muted-foreground">下載權重中…</span>
+            <span class="text-muted-foreground">{{ $t('addModel.weightsDownloading') }}</span>
             <div class="mx-1 h-1.5 flex-1 overflow-hidden rounded-full bg-muted">
               <div
                 class="h-full rounded-full bg-[var(--chart-2)] transition-[width] duration-700"
@@ -591,22 +607,22 @@ async function submit() {
           <!-- Cached -->
           <template v-else-if="cachedEntry">
             <Check class="size-3.5 shrink-0 text-status-ready" />
-            <span class="text-status-ready">權重已快取</span>
+            <span class="text-status-ready">{{ $t('addModel.weightsCached') }}</span>
             <span class="ml-auto tabular text-muted-foreground">{{ formatBytes(cachedEntry.size_on_disk) }}</span>
           </template>
           <!-- Failed -->
           <template v-else-if="downloadJob && downloadJob.state === 'failed'">
             <AlertTriangle class="size-3.5 shrink-0 text-status-failed" />
-            <span class="truncate text-status-failed">下載失敗：{{ downloadJob.error }}</span>
+            <span class="truncate text-status-failed">{{ $t('addModel.weightsDownloadFailed') }}{{ downloadJob.error }}</span>
             <Button size="sm" variant="ghost" class="ml-auto shrink-0" @click="downloadWeights">
-              <Download class="size-3.5" />重試
+              <Download class="size-3.5" />{{ $t('common.retry') }}
             </Button>
           </template>
           <!-- Not cached -->
           <template v-else>
-            <span class="text-muted-foreground">權重尚未快取 — 首次啟動會即時下載（較慢）。</span>
+            <span class="text-muted-foreground">{{ $t('addModel.weightsNotCached') }}</span>
             <Button size="sm" variant="ghost" class="ml-auto shrink-0" @click="downloadWeights">
-              <Download class="size-3.5" />先下載
+              <Download class="size-3.5" />{{ $t('common.preDownload') }}
             </Button>
           </template>
         </div>
@@ -618,59 +634,59 @@ async function submit() {
             class="flex w-full items-center justify-between px-3 py-2 text-left"
             @click="showAccel = !showAccel"
           >
-            <span class="text-xs font-medium">⚡ 加速設定（vLLM 推理參數）</span>
+            <span class="text-xs font-medium">{{ $t('addModel.accelTitle') }}</span>
             <span class="text-xs text-muted-foreground">{{ showAccel ? '▾' : '▸' }}</span>
           </button>
           <div v-if="showAccel" class="space-y-3 border-t border-border/60 p-3">
             <!-- Scenario templates -->
             <div class="flex flex-wrap items-center gap-1.5">
-              <span class="text-[11px] text-muted-foreground">情境模板：</span>
-              <Button size="sm" variant="outline" @click="applyAccelPreset('latency')">低延遲（聊天 / agent）</Button>
-              <Button size="sm" variant="outline" @click="applyAccelPreset('throughput')">高吞吐（多併發）</Button>
-              <Button size="sm" variant="ghost" @click="clearAccel">清除（回預設）</Button>
+              <span class="text-[11px] text-muted-foreground">{{ $t('addModel.accelTemplates') }}</span>
+              <Button size="sm" variant="outline" @click="applyAccelPreset('latency')">{{ $t('addModel.accelLatency') }}</Button>
+              <Button size="sm" variant="outline" @click="applyAccelPreset('throughput')">{{ $t('addModel.accelThroughput') }}</Button>
+              <Button size="sm" variant="ghost" @click="clearAccel">{{ $t('addModel.accelClear') }}</Button>
             </div>
 
             <div class="grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
               <!-- performance_mode -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">performance_mode <span class="font-normal">(預設 balanced)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">performance_mode <span class="font-normal">({{ $t('addModel.defaultLabel') }} balanced)</span></span>
                 <select :value="getParam('performance_mode')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('performance_mode', ($event.target as HTMLSelectElement).value)">
-                  <option value="">預設（balanced）</option>
-                  <option value="interactivity">interactivity（低延遲）</option>
-                  <option value="throughput">throughput（高吞吐）</option>
+                  <option value="">{{ $t('addModel.defaultLabel') }} (balanced)</option>
+                  <option value="interactivity">interactivity ({{ $t('addModel.accelLatency') }})</option>
+                  <option value="throughput">throughput ({{ $t('addModel.accelThroughput') }})</option>
                 </select>
               </label>
               <!-- optimization_level -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">optimization_level <span class="font-normal">(預設 2)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">optimization_level <span class="font-normal">({{ $t('addModel.defaultLabel') }} 2)</span></span>
                 <select :value="getParam('optimization_level')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('optimization_level', ($event.target as HTMLSelectElement).value)">
-                  <option value="">預設（2）</option>
-                  <option value="0">0（最快啟動）</option>
+                  <option value="">{{ $t('addModel.defaultLabel') }} (2)</option>
+                  <option value="0">0 ({{ $t('addModel.fastestStartup') }})</option>
                   <option value="1">1</option>
                   <option value="2">2</option>
-                  <option value="3">3（最激進）</option>
+                  <option value="3">3 ({{ $t('addModel.mostAggressive') }})</option>
                 </select>
               </label>
               <!-- max_num_batched_tokens -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">max_num_batched_tokens <span class="font-normal">(預設 自動)</span></span>
-                <Input :model-value="getParam('max_num_batched_tokens')" type="number" min="1" placeholder="自動" class="h-8 text-xs" @update:model-value="setParamOrClear('max_num_batched_tokens', String($event))" />
+                <span class="text-[11px] font-medium text-muted-foreground">max_num_batched_tokens <span class="font-normal">({{ $t('addModel.defaultLabel') }} {{ $t('addModel.autoLabel') }})</span></span>
+                <Input :model-value="getParam('max_num_batched_tokens')" type="number" min="1" :placeholder="$t('addModel.autoLabel')" class="h-8 text-xs" @update:model-value="setParamOrClear('max_num_batched_tokens', String($event))" />
               </label>
               <!-- max_num_seqs -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">max_num_seqs <span class="font-normal">(預設 自動)</span></span>
-                <Input :model-value="getParam('max_num_seqs')" type="number" min="1" placeholder="自動" class="h-8 text-xs" @update:model-value="setParamOrClear('max_num_seqs', String($event))" />
+                <span class="text-[11px] font-medium text-muted-foreground">max_num_seqs <span class="font-normal">({{ $t('addModel.defaultLabel') }} {{ $t('addModel.autoLabel') }})</span></span>
+                <Input :model-value="getParam('max_num_seqs')" type="number" min="1" :placeholder="$t('addModel.autoLabel')" class="h-8 text-xs" @update:model-value="setParamOrClear('max_num_seqs', String($event))" />
               </label>
               <!-- gpu_memory_utilization (keep the model's existing value; don't impose a default) -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">gpu_memory_utilization <span class="font-normal">(沿用現值；留空＝vLLM 預設)</span></span>
-                <Input :model-value="getParam('gpu_memory_utilization')" type="number" min="0.1" max="0.98" step="0.01" placeholder="未設定" class="h-8 text-xs" @update:model-value="setParamOrClear('gpu_memory_utilization', String($event))" />
+                <span class="text-[11px] font-medium text-muted-foreground">gpu_memory_utilization <span class="font-normal">({{ $t('addModel.gpuMemHint') }})</span></span>
+                <Input :model-value="getParam('gpu_memory_utilization')" type="number" min="0.1" max="0.98" step="0.01" :placeholder="$t('addModel.notSet')" class="h-8 text-xs" @update:model-value="setParamOrClear('gpu_memory_utilization', String($event))" />
               </label>
               <!-- kv_cache_dtype -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">kv_cache_dtype <span class="font-normal">(預設 auto)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">kv_cache_dtype <span class="font-normal">({{ $t('addModel.defaultLabel') }} auto)</span></span>
                 <select :value="getParam('kv_cache_dtype')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('kv_cache_dtype', ($event.target as HTMLSelectElement).value)">
-                  <option value="">預設（auto，不量化）</option>
+                  <option value="">{{ $t('addModel.kvCacheDefault') }}</option>
                   <option value="fp8">fp8</option>
                   <option value="fp8_e4m3">fp8_e4m3</option>
                   <option value="fp8_e5m2">fp8_e5m2</option>
@@ -678,54 +694,54 @@ async function submit() {
               </label>
               <!-- enable_prefix_caching -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">enable_prefix_caching <span class="font-normal">(預設 開)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">enable_prefix_caching <span class="font-normal">({{ $t('addModel.prefixCacheDefault') }})</span></span>
                 <select :value="getParam('enable_prefix_caching')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('enable_prefix_caching', ($event.target as HTMLSelectElement).value)">
-                  <option value="">預設（開）</option>
-                  <option value="true">強制開</option>
-                  <option value="false">關</option>
+                  <option value="">{{ $t('addModel.prefixCacheDefault') }}</option>
+                  <option value="true">{{ $t('addModel.forceOn') }}</option>
+                  <option value="false">{{ $t('addModel.off') }}</option>
                 </select>
               </label>
               <!-- enable_chunked_prefill -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">enable_chunked_prefill <span class="font-normal">(預設 開)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">enable_chunked_prefill <span class="font-normal">({{ $t('addModel.chunkedPrefillDefault') }})</span></span>
                 <select :value="getParam('enable_chunked_prefill')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('enable_chunked_prefill', ($event.target as HTMLSelectElement).value)">
-                  <option value="">預設（開）</option>
-                  <option value="true">強制開</option>
-                  <option value="false">關</option>
+                  <option value="">{{ $t('addModel.chunkedPrefillDefault') }}</option>
+                  <option value="true">{{ $t('addModel.forceOn') }}</option>
+                  <option value="false">{{ $t('addModel.off') }}</option>
                 </select>
               </label>
               <!-- async_scheduling -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">async_scheduling <span class="font-normal">(預設 關)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">async_scheduling <span class="font-normal">({{ $t('addModel.asyncSchedDefault') }})</span></span>
                 <select :value="getParam('async_scheduling')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('async_scheduling', ($event.target as HTMLSelectElement).value)">
-                  <option value="">預設（關）</option>
-                  <option value="true">開（實驗性）</option>
-                  <option value="false">關</option>
+                  <option value="">{{ $t('addModel.asyncSchedDefault') }}</option>
+                  <option value="true">{{ $t('addModel.onExperimental') }}</option>
+                  <option value="false">{{ $t('addModel.off') }}</option>
                 </select>
               </label>
               <!-- stream_interval -->
               <label class="space-y-1">
-                <span class="text-[11px] font-medium text-muted-foreground">stream_interval <span class="font-normal">(預設 1)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">stream_interval <span class="font-normal">({{ $t('addModel.defaultLabel') }} 1)</span></span>
                 <Input :model-value="getParam('stream_interval')" type="number" min="1" placeholder="1" class="h-8 text-xs" @update:model-value="setParamOrClear('stream_interval', String($event))" />
               </label>
               <!-- quantization (online) -->
               <label class="space-y-1 sm:col-span-2">
-                <span class="text-[11px] font-medium text-muted-foreground">quantization <span class="font-normal">(預設 不量化 / 自動偵測)</span></span>
+                <span class="text-[11px] font-medium text-muted-foreground">quantization <span class="font-normal">({{ $t('addModel.quantDefault') }})</span></span>
                 <select :value="getParam('quantization')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('quantization', ($event.target as HTMLSelectElement).value)">
-                  <option value="">預設（不量化，或載入量化版自動偵測）</option>
-                  <option value="bitsandbytes">bitsandbytes（4-bit NF4，任何模型線上量化）</option>
-                  <option value="fp8_per_tensor">fp8_per_tensor（8-bit；Ampere 退 W8A16）</option>
-                  <option value="fp8_per_block">fp8_per_block（8-bit；Ampere 退 W8A16）</option>
-                  <option value="int8_per_channel_weight_only">int8_per_channel_weight_only（8-bit INT8）</option>
+                  <option value="">{{ $t('addModel.quantDefault') }}</option>
+                  <option value="bitsandbytes">{{ $t('addModel.quantBnb') }}</option>
+                  <option value="fp8_per_tensor">{{ $t('addModel.quantFp8Tensor') }}</option>
+                  <option value="fp8_per_block">{{ $t('addModel.quantFp8Block') }}</option>
+                  <option value="int8_per_channel_weight_only">{{ $t('addModel.quantInt8') }}</option>
                 </select>
-                <span class="text-[10px] text-muted-foreground">預量化模型（AWQ / GPTQ）直接把 model_tag 換成量化版即可，vLLM 會自動偵測，不用設此欄。</span>
+                <span class="text-[10px] text-muted-foreground">{{ $t('addModel.quantHint') }}</span>
               </label>
             </div>
 
             <!-- Advanced (tier 2) -->
             <div class="rounded-md border border-border/60">
               <button type="button" class="flex w-full items-center justify-between px-2.5 py-1.5 text-left" @click="showAdvanced = !showAdvanced">
-                <span class="text-[11px] font-medium text-muted-foreground">進階（推測解碼 / prefix hash / chunked prefill / offload）</span>
+                <span class="text-[11px] font-medium text-muted-foreground">{{ $t('addModel.advancedTitle') }}</span>
                 <span class="text-[11px] text-muted-foreground">{{ showAdvanced ? '▾' : '▸' }}</span>
               </button>
               <div v-if="showAdvanced" class="space-y-3 border-t border-border/60 p-3">
@@ -733,56 +749,55 @@ async function submit() {
                 <div class="space-y-1.5">
                   <label class="flex items-center gap-2 text-[11px] font-medium text-muted-foreground">
                     <input v-model="specEnabled" type="checkbox" class="size-3.5 accent-[var(--chart-1)]" />
-                    N-gram 推測解碼（低 QPS 降單請求延遲）
+                    {{ $t('addModel.ngramSpec') }}
                   </label>
                   <label v-if="specEnabled" class="flex items-center gap-2 pl-5 text-[11px] text-muted-foreground">
                     num_speculative_tokens
                     <Input v-model.number="specTokens" type="number" min="1" max="10" class="h-7 w-20 text-xs" />
-                    <span class="text-[10px]">(預設 4)</span>
+                    <span class="text-[10px]">({{ $t('addModel.defaultLabel') }} 4)</span>
                   </label>
                 </div>
 
                 <div class="grid grid-cols-1 gap-x-4 gap-y-3 sm:grid-cols-2">
                   <!-- prefix_caching_hash_algo -->
                   <label class="space-y-1">
-                    <span class="text-[11px] font-medium text-muted-foreground">prefix_caching_hash_algo <span class="font-normal">(預設 sha256)</span></span>
+                    <span class="text-[11px] font-medium text-muted-foreground">prefix_caching_hash_algo <span class="font-normal">({{ $t('addModel.hashDefault') }})</span></span>
                     <select :value="getParam('prefix_caching_hash_algo')" class="h-8 w-full rounded-md border border-input bg-background px-2 text-xs" @change="setParamOrClear('prefix_caching_hash_algo', ($event.target as HTMLSelectElement).value)">
-                      <option value="">預設（sha256）</option>
-                      <option value="sha256">sha256（最穩）</option>
-                      <option value="xxhash">xxhash（較快，非密碼安全）</option>
+                      <option value="">{{ $t('addModel.hashDefault') }}</option>
+                      <option value="sha256">{{ $t('addModel.hashSha256') }}</option>
+                      <option value="xxhash">{{ $t('addModel.hashXxhash') }}</option>
                       <option value="sha256_cbor">sha256_cbor</option>
                       <option value="xxhash_cbor">xxhash_cbor</option>
                     </select>
                   </label>
                   <!-- cpu_offload_gb -->
                   <label class="space-y-1">
-                    <span class="text-[11px] font-medium text-muted-foreground">cpu_offload_gb <span class="font-normal">(預設 0)</span></span>
+                    <span class="text-[11px] font-medium text-muted-foreground">cpu_offload_gb <span class="font-normal">({{ $t('addModel.defaultLabel') }} 0)</span></span>
                     <Input :model-value="getParam('cpu_offload_gb')" type="number" min="0" placeholder="0" class="h-8 text-xs" @update:model-value="setParamOrClear('cpu_offload_gb', String($event))" />
-                    <span class="text-[10px] text-muted-foreground">把權重 offload 到 CPU RAM 換「跑得起來」(會變慢)，非加速。</span>
+                    <span class="text-[10px] text-muted-foreground">{{ $t('addModel.offloadHint') }}</span>
                   </label>
                   <!-- max_num_partial_prefills -->
                   <label class="space-y-1">
-                    <span class="text-[11px] font-medium text-muted-foreground">max_num_partial_prefills <span class="font-normal">(預設 1)</span></span>
+                    <span class="text-[11px] font-medium text-muted-foreground">max_num_partial_prefills <span class="font-normal">({{ $t('addModel.defaultLabel') }} 1)</span></span>
                     <Input :model-value="getParam('max_num_partial_prefills')" type="number" min="1" placeholder="1" class="h-8 text-xs" @update:model-value="setParamOrClear('max_num_partial_prefills', String($event))" />
                   </label>
                   <!-- max_long_partial_prefills -->
                   <label class="space-y-1">
-                    <span class="text-[11px] font-medium text-muted-foreground">max_long_partial_prefills <span class="font-normal">(預設 1)</span></span>
+                    <span class="text-[11px] font-medium text-muted-foreground">max_long_partial_prefills <span class="font-normal">({{ $t('addModel.defaultLabel') }} 1)</span></span>
                     <Input :model-value="getParam('max_long_partial_prefills')" type="number" min="1" placeholder="1" class="h-8 text-xs" @update:model-value="setParamOrClear('max_long_partial_prefills', String($event))" />
                   </label>
                   <!-- long_prefill_token_threshold -->
                   <label class="space-y-1 sm:col-span-2">
-                    <span class="text-[11px] font-medium text-muted-foreground">long_prefill_token_threshold <span class="font-normal">(預設 0=自動)</span></span>
+                    <span class="text-[11px] font-medium text-muted-foreground">long_prefill_token_threshold <span class="font-normal">({{ $t('addModel.defaultLabel') }} 0={{ $t('addModel.autoLabel') }})</span></span>
                     <Input :model-value="getParam('long_prefill_token_threshold')" type="number" min="0" placeholder="0" class="h-8 text-xs" @update:model-value="setParamOrClear('long_prefill_token_threshold', String($event))" />
-                    <span class="text-[10px] text-muted-foreground">同時有短問題＋長 prompt 時：把 partial 設 &gt;1 且 long 設小，短請求可插隊不被長的卡住。</span>
+                    <span class="text-[10px] text-muted-foreground">{{ $t('addModel.partialPrefillHint') }}</span>
                   </label>
                 </div>
               </div>
             </div>
 
             <p class="text-[10px] text-muted-foreground">
-              空白＝用 vLLM 預設。改了需重啟模型生效。組合才有感（見
-              <span class="font-mono">docs/vllm_推理加速參數整理.md</span>）。
+              {{ $t('addModel.accelHint') }}
             </p>
           </div>
         </div>
@@ -790,16 +805,16 @@ async function submit() {
         <!-- vLLM params -->
         <div>
           <div class="mb-1.5 flex items-center justify-between">
-            <span class="text-xs font-medium text-muted-foreground">vLLM 參數（model_config）</span>
-            <Button size="sm" variant="ghost" @click="addParam"><Plus class="size-3.5" />新增</Button>
+            <span class="text-xs font-medium text-muted-foreground">{{ $t('addModel.vllmParams') }}</span>
+            <Button size="sm" variant="ghost" @click="addParam"><Plus class="size-3.5" />{{ $t('addModel.addParam') }}</Button>
           </div>
           <div class="space-y-1.5">
             <div v-for="(p, i) in params" :key="i" class="flex items-center gap-2">
-              <Input v-model="p.key" placeholder="旗標（snake_case）" class="flex-1 font-mono text-xs" />
-              <Input v-model="p.value" placeholder="值" class="flex-1 font-mono text-xs" />
+              <Input v-model="p.key" :placeholder="$t('addModel.flagPlaceholder')" class="flex-1 font-mono text-xs" />
+              <Input v-model="p.value" :placeholder="$t('addModel.valuePlaceholder')" class="flex-1 font-mono text-xs" />
               <Button size="icon-sm" variant="ghost" @click="removeParam(i)"><Trash2 class="size-3.5" /></Button>
             </div>
-            <p v-if="!params.length" class="text-xs text-muted-foreground">無額外參數。</p>
+            <p v-if="!params.length" class="text-xs text-muted-foreground">{{ $t('addModel.noExtraParams') }}</p>
           </div>
 
           <!-- Tool-calling hint + quick presets -->
@@ -809,17 +824,12 @@ async function submit() {
               class="flex w-full items-center justify-between text-xs font-medium text-muted-foreground hover:text-foreground"
               @click="showToolHint = !showToolHint"
             >
-              <span>🛠 工具調用（tool calling）參數參考</span>
+              <span>{{ $t('addModel.toolCallingTitle') }}</span>
               <span>{{ showToolHint ? '▾' : '▸' }}</span>
             </button>
             <div v-if="showToolHint" class="mt-2 space-y-2 text-[11px] text-muted-foreground">
-              <p>
-                要讓模型支援 <span class="font-mono">tool_choice="auto"</span>，需加
-                <span class="font-mono">enable_auto_tool_choice=true</span> +
-                <span class="font-mono">tool_call_parser=&lt;parser&gt;</span>，reasoning 模型再加
-                <span class="font-mono">reasoning_parser</span>。parser 要對得上模型輸出格式，別看品牌猜。
-              </p>
-              <p class="font-medium text-foreground">點一下帶入推薦參數：</p>
+              <p>{{ $t('addModel.toolCallingDesc') }}</p>
+              <p class="font-medium text-foreground">{{ $t('addModel.toolCallingPresetHint') }}</p>
               <div class="flex flex-wrap gap-1.5">
                 <Button
                   v-for="t in TOOL_PRESETS"
@@ -830,12 +840,11 @@ async function submit() {
                   :title="`tool_call_parser=${t.parser}${t.reasoning ? ` · reasoning_parser=${t.reasoning}` : ''}`"
                   @click="applyToolPreset(t.parser, t.reasoning)"
                 >
-                  {{ t.label }}
+                  {{ t.label.startsWith('addModel.') ? $t(t.label) : t.label }}
                 </Button>
               </div>
               <p class="text-muted-foreground/80">
-                完整對照見 <span class="font-mono">docs/vllm_auto_tool_整理.md</span>。
-                沒有對應 parser 的模型（如 SmolLM2 / TinyLlama / Phi-3.5）請勿亂加。
+                {{ $t('addModel.toolCallingDocRef') }}
               </p>
             </div>
           </div>
@@ -844,15 +853,15 @@ async function submit() {
         <!-- LoRA adapters (static mount at serve time) -->
         <div>
           <div class="mb-1.5 flex items-center justify-between">
-            <span class="text-xs font-medium text-muted-foreground">LoRA Adapters</span>
-            <Button size="sm" variant="ghost" @click="addLora"><Plus class="size-3.5" />新增</Button>
+            <span class="text-xs font-medium text-muted-foreground">{{ $t('addModel.loraTitle') }}</span>
+            <Button size="sm" variant="ghost" @click="addLora"><Plus class="size-3.5" />{{ $t('addModel.addLora') }}</Button>
           </div>
           <div class="space-y-1.5">
             <div v-for="(l, i) in loras" :key="i" class="space-y-1">
               <div class="flex items-center gap-2">
                 <Input
                   v-model="l.name"
-                  placeholder="served name（如 sql-lora）"
+                  :placeholder="$t('addModel.loraServedName')"
                   class="flex-1 font-mono text-xs"
                   @update:model-value="ensureEnableLora"
                 />
@@ -862,12 +871,12 @@ async function submit() {
                   class="h-9 flex-[1.4] rounded-md border border-input bg-background/40 px-2 font-mono text-xs"
                   @change="onPickLora(l)"
                 >
-                  <option value="">— 選 adapter / 自填 path —</option>
+                  <option value="">{{ $t('addModel.loraPickAdapter') }}</option>
                   <option v-for="a in loraLibrary" :key="a.path" :value="a.path">
                     {{ a.name }}{{ a.rank != null ? ` (r${a.rank})` : '' }}
                   </option>
                   <option v-if="l.path && !loraLibrary.some((a) => a.path === l.path)" :value="l.path">
-                    {{ l.path }}（自填）
+                    {{ l.path }} {{ $t('addModel.loraTyped') }}
                   </option>
                 </select>
                 <Button size="icon-sm" variant="ghost" @click="removeLora(i)"><Trash2 class="size-3.5" /></Button>
@@ -876,24 +885,17 @@ async function submit() {
                 <AlertTriangle class="size-3" />{{ loraBaseWarning(l) }}
               </p>
             </div>
-            <p v-if="!loras.length" class="text-xs text-muted-foreground">
-              無 LoRA。新增一列會自動補上 <span class="font-mono">enable_lora=true</span>；
-              served name 即推論時 <span class="font-mono">model</span> 欄位要填的名稱。adapter 從
-              <span class="font-mono">LoRA 庫</span>挑選，或自填 path。
-            </p>
-            <p v-else class="text-[11px] text-muted-foreground/80">
-              從庫選 adapter 會自動帶入 base 並把 <span class="font-mono">max_lora_rank</span> 設到對齊的 rank。
-              Base model 須支援 LoRA（vLLM <span class="font-mono">SupportsLoRA</span>）。
-            </p>
+            <p v-if="!loras.length" class="text-xs text-muted-foreground">{{ $t('addModel.noLora') }}</p>
+            <p v-else class="text-[11px] text-muted-foreground/80">{{ $t('addModel.loraAutoHint') }}</p>
           </div>
         </div>
 
         <div class="flex items-center justify-end gap-2 pt-2">
-          <Badge v-if="!isEdit && !groupExists" variant="muted">新群組</Badge>
-          <Button variant="ghost" @click="open = false">取消</Button>
+          <Badge v-if="!isEdit && !groupExists" variant="muted">{{ $t('addModel.newGroup') }}</Badge>
+          <Button variant="ghost" @click="open = false">{{ $t('common.cancel') }}</Button>
           <Button :disabled="!canSubmit || creating" @click="submit">
             <Loader2 v-if="creating" class="size-4 animate-spin" /><Plus v-else class="size-4" />
-            {{ isEdit ? '儲存變更' : '新增模型' }}
+            {{ isEdit ? $t('addModel.saveChanges') : $t('addModel.addModelBtn') }}
           </Button>
         </div>
       </template>
diff --git a/apps/frontend_llmops/src/components/CodeBlock.vue b/apps/frontend_llmops/src/components/CodeBlock.vue
index 5975dbb..d86d838 100644
--- a/apps/frontend_llmops/src/components/CodeBlock.vue
+++ b/apps/frontend_llmops/src/components/CodeBlock.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Check, Copy } from '@lucide/vue'
 import { toast } from '@/lib/toast'
 
 const props = defineProps<{ code: string }>()
 const copied = ref(false)
+const { t } = useI18n()
 
 async function copy() {
   try {
@@ -12,7 +14,7 @@ async function copy() {
     copied.value = true
     setTimeout(() => (copied.value = false), 1500)
   } catch {
-    toast.error('複製失敗')
+    toast.error(t('codeBlock.copyFailed'))
   }
 }
 </script>
@@ -25,7 +27,7 @@ async function copy() {
     >
       <Check v-if="copied" class="size-3.5 text-status-ready" />
       <Copy v-else class="size-3.5" />
-      {{ copied ? '已複製' : '複製' }}
+      {{ copied ? $t('codeBlock.copied') : $t('codeBlock.copy') }}
     </button>
     <pre
       class="overflow-x-auto rounded-lg border border-border/60 bg-black/40 p-4 font-mono text-xs leading-relaxed text-foreground/90"
diff --git a/apps/frontend_llmops/src/components/DatasetCard.vue b/apps/frontend_llmops/src/components/DatasetCard.vue
index 7acfb77..927ccca 100644
--- a/apps/frontend_llmops/src/components/DatasetCard.vue
+++ b/apps/frontend_llmops/src/components/DatasetCard.vue
@@ -39,7 +39,7 @@ const accent = computed(() => (props.entry.category === 'perf' ? 'var(--chart-2)
     </div>
 
     <div class="mt-2.5 flex flex-wrap gap-1.5">
-      <Badge v-if="entry.cached" variant="ready" class="text-[10px]">已快取</Badge>
+      <Badge v-if="entry.cached" variant="ready" class="text-[10px]">{{ $t('datasetCard.cached') }}</Badge>
       <Badge v-if="entry.tier" variant="outline" class="text-[10px]">{{ entry.tier }}</Badge>
       <Badge v-if="entry.metric" variant="muted" class="font-mono text-[10px]">{{ entry.metric }}</Badge>
       <Badge v-if="entry.note" variant="secondary" class="text-[10px]">{{ entry.note }}</Badge>
@@ -52,25 +52,25 @@ const accent = computed(() => (props.entry.category === 'perf' ? 'var(--chart-2)
           <Loader2 class="size-3.5 animate-spin" />
           <span class="tabular">{{ formatBytes(job!.downloaded_bytes) }}</span>
         </span>
-        <span v-else-if="warming" class="flex items-center gap-1.5 text-xs text-muted-foreground" title="正在建立快取，完成後預覽即可秒開">
-          <Loader2 class="size-3.5 animate-spin" />預熱中…
+        <span v-else-if="warming" class="flex items-center gap-1.5 text-xs text-muted-foreground" :title="$t('datasetCard.warmingHint')">
+          <Loader2 class="size-3.5 animate-spin" />{{ $t('datasetCard.warming') }}
         </span>
         <template v-else-if="entry.cached">
           <Button
             v-if="entry.category === 'eval'"
             size="icon-sm"
             variant="ghost"
-            title="預覽資料"
+            :title="$t('datasetCard.preview')"
             @click="$emit('preview')"
           >
             <Eye class="size-4" />
           </Button>
-          <Button size="icon-sm" variant="ghost" title="刪除快取" @click="$emit('remove')">
+          <Button size="icon-sm" variant="ghost" :title="$t('datasetCard.deleteCache')" @click="$emit('remove')">
             <Trash2 class="size-4" />
           </Button>
         </template>
         <Button v-else size="sm" variant="outline" @click="$emit('download')">
-          <Download class="size-3.5" />下載
+          <Download class="size-3.5" />{{ $t('common.download') }}
         </Button>
       </div>
     </div>
diff --git a/apps/frontend_llmops/src/components/DatasetPreviewDialog.vue b/apps/frontend_llmops/src/components/DatasetPreviewDialog.vue
index 2f80f45..0b9daf3 100644
--- a/apps/frontend_llmops/src/components/DatasetPreviewDialog.vue
+++ b/apps/frontend_llmops/src/components/DatasetPreviewDialog.vue
@@ -55,18 +55,18 @@ watch(
 </script>
 
 <template>
-  <Dialog v-model:open="open" :title="`預覽 · ${datasetKey}`" width-class="max-w-3xl">
+  <Dialog v-model:open="open" :title="$t('datasetPreview.title', { key: datasetKey })" width-class="max-w-3xl">
     <div class="mt-3">
       <div v-if="loading" class="flex items-center gap-2 py-8 text-sm text-muted-foreground">
-        <Loader2 class="size-4 animate-spin" />載入資料中…（首次預覽需建立快取，可能較久）
+        <Loader2 class="size-4 animate-spin" />{{ $t('datasetPreview.loading') }}
       </div>
       <p v-else-if="error" class="rounded-md bg-status-failed/10 px-3 py-2 text-xs text-status-failed">
         {{ error }}
       </p>
       <Tabs v-else-if="data" v-model="tab" class="space-y-3">
         <TabsList>
-          <TabsTrigger value="intro">介紹</TabsTrigger>
-          <TabsTrigger value="samples">範例資料（{{ data.rows.length }}）</TabsTrigger>
+          <TabsTrigger value="intro">{{ $t('datasetPreview.introTab') }}</TabsTrigger>
+          <TabsTrigger value="samples">{{ $t('datasetPreview.samplesTab', { n: data.rows.length }) }}</TabsTrigger>
         </TabsList>
 
         <!-- Introduction -->
@@ -75,10 +75,10 @@ watch(
             <span v-if="data.pretty_name" class="text-sm font-semibold">{{ data.pretty_name }}</span>
             <Badge v-for="t in data.tags ?? []" :key="t" variant="muted" class="text-[10px]">{{ t }}</Badge>
             <span v-if="data.metric?.length" class="text-[10px] text-muted-foreground">· {{ data.metric.join(', ') }}</span>
-            <span v-if="(data.subsets?.length ?? 0) > 1" class="text-[10px] text-muted-foreground">· {{ data.subsets!.length }} 個主題</span>
+            <span v-if="(data.subsets?.length ?? 0) > 1" class="text-[10px] text-muted-foreground">· {{ $t('datasetPreview.subjectCount', { n: data.subsets!.length }) }}</span>
           </div>
           <div v-if="descHtml" class="markdown max-h-[60vh] overflow-y-auto text-sm" v-html="descHtml" />
-          <p v-else class="text-xs text-muted-foreground">此資料集沒有提供介紹。</p>
+          <p v-else class="text-xs text-muted-foreground">{{ $t('datasetPreview.noDescription') }}</p>
         </TabsContent>
 
         <!-- Sample rows -->
@@ -86,8 +86,8 @@ watch(
           <p class="text-xs text-muted-foreground">
             subset <span class="font-mono text-foreground">{{ data.subset }}</span>
             ·
-            <template v-if="data.truncated">顯示前 <span class="font-mono text-foreground">{{ data.rows.length }}</span> 筆（資料集更大）</template>
-            <template v-else>共 <span class="font-mono text-foreground">{{ data.count }}</span> 筆</template>
+            <template v-if="data.truncated">{{ $t('datasetPreview.showingFirst', { n: data.rows.length }) }}</template>
+            <template v-else>{{ $t('datasetPreview.totalRows', { n: data.count }) }}</template>
           </p>
           <div class="max-h-[60vh] space-y-2 overflow-y-auto">
             <div
@@ -97,7 +97,7 @@ watch(
             >
               <div class="mb-1 flex items-center gap-2">
                 <span class="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground">#{{ i + 1 }}</span>
-                <span v-if="r.target != null" class="text-[10px] text-[var(--chart-1)]">答案：<span class="font-mono">{{ r.target }}</span></span>
+                <span v-if="r.target != null" class="text-[10px] text-[var(--chart-1)]">{{ $t('datasetPreview.answer') }}<span class="font-mono">{{ r.target }}</span></span>
               </div>
               <p class="whitespace-pre-wrap break-words text-foreground/90">{{ r.question }}</p>
               <ul v-if="r.choices.length" class="mt-1.5 space-y-0.5 text-muted-foreground">
diff --git a/apps/frontend_llmops/src/components/EmbeddingModelDialog.vue b/apps/frontend_llmops/src/components/EmbeddingModelDialog.vue
index 1d2b520..40da189 100644
--- a/apps/frontend_llmops/src/components/EmbeddingModelDialog.vue
+++ b/apps/frontend_llmops/src/components/EmbeddingModelDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Loader2, Plus, Save, Trash2 } from '@lucide/vue'
 import Dialog from '@/components/ui/Dialog.vue'
 import Input from '@/components/ui/Input.vue'
@@ -11,6 +12,7 @@ import { useAuth } from '@/composables/useAuth'
 import { useModelsStore } from '@/stores/models'
 import type { EmbeddingModelParams, SettingValue } from '@/types/api'
 
+const { t } = useI18n()
 const open = defineModel<boolean>('open', { default: false })
 const props = defineProps<{
   modelType: 'embedding' | 'reranking'
@@ -57,12 +59,16 @@ async function submit() {
   saving.value = true
   try {
     await api.updateEmbeddingModel(props.modelType, props.name, settings)
-    toast.success(`已更新 ${props.name}`, { description: '變更將於 embedding server 下次啟動時生效。' })
+    toast.success(t('embeddingModel.updateSuccess', { name: props.name }), {
+      description: t('embeddingModel.updateSuccessDesc'),
+    })
     void models.loadConfig()
     emit('updated')
     open.value = false
   } catch (e) {
-    toast.error('更新失敗', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('embeddingModel.updateFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   } finally {
     saving.value = false
   }
@@ -70,32 +76,32 @@ async function submit() {
 </script>
 
 <template>
-  <Dialog v-model:open="open" :title="`編輯 ${name}`" width-class="max-w-xl">
+  <Dialog v-model:open="open" :title="$t('embeddingModel.editTitle', { type: name })" width-class="max-w-xl">
     <div class="space-y-4">
       <p class="flex items-center gap-2 text-sm text-muted-foreground">
-        <Badge variant="muted">{{ modelType === 'embedding' ? '嵌入' : '重排序' }}</Badge>
-        <span>參數於 embedding server <span class="font-medium text-foreground">停止後</span>編輯，下次啟動生效。</span>
+        <Badge variant="muted">{{ modelType === 'embedding' ? $t('embeddingModel.typeEmbedding') : $t('embeddingModel.typeReranking') }}</Badge>
+        <span>{{ $t('embeddingModel.paramHint') }}</span>
       </p>
 
       <div>
         <div class="mb-1.5 flex items-center justify-between">
-          <span class="text-xs font-medium text-muted-foreground">參數</span>
-          <Button size="sm" variant="ghost" @click="addRow"><Plus class="size-3.5" />新增</Button>
+          <span class="text-xs font-medium text-muted-foreground">{{ $t('embeddingModel.paramsLabel') }}</span>
+          <Button size="sm" variant="ghost" @click="addRow"><Plus class="size-3.5" />{{ $t('common.add') }}</Button>
         </div>
         <div class="space-y-1.5">
           <div v-for="(r, i) in rows" :key="i" class="flex items-center gap-2">
-            <Input v-model="r.key" placeholder="參數名（snake_case）" class="flex-1 font-mono text-xs" />
-            <Input v-model="r.value" placeholder="值（true/false/數字/字串）" class="flex-1 font-mono text-xs" />
+            <Input v-model="r.key" :placeholder="$t('embeddingModel.paramKeyPlaceholder')" class="flex-1 font-mono text-xs" />
+            <Input v-model="r.value" :placeholder="$t('embeddingModel.paramValuePlaceholder')" class="flex-1 font-mono text-xs" />
             <Button size="icon-sm" variant="ghost" @click="removeRow(i)"><Trash2 class="size-3.5" /></Button>
           </div>
-          <p v-if="!rows.length" class="text-xs text-muted-foreground">無參數。</p>
+          <p v-if="!rows.length" class="text-xs text-muted-foreground">{{ $t('embeddingModel.noParams') }}</p>
         </div>
       </div>
 
       <div class="flex justify-end gap-2 pt-2">
-        <Button variant="ghost" @click="open = false">取消</Button>
+        <Button variant="ghost" @click="open = false">{{ $t('common.cancel') }}</Button>
         <Button :disabled="saving" @click="submit">
-          <Loader2 v-if="saving" class="size-4 animate-spin" /><Save v-else class="size-4" />儲存
+          <Loader2 v-if="saving" class="size-4 animate-spin" /><Save v-else class="size-4" />{{ $t('common.save') }}
         </Button>
       </div>
     </div>
diff --git a/apps/frontend_llmops/src/components/EvalSampleBrowser.vue b/apps/frontend_llmops/src/components/EvalSampleBrowser.vue
index 1a700a7..beb0451 100644
--- a/apps/frontend_llmops/src/components/EvalSampleBrowser.vue
+++ b/apps/frontend_llmops/src/components/EvalSampleBrowser.vue
@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { CheckCircle2, ChevronLeft, ChevronRight, Loader2, XCircle } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import { api } from '@/lib/api'
 import { toast } from '@/lib/toast'
 import type { EvalSampleDetail, EvalSamplesPage } from '@/types/api'
 import Button from '@/components/ui/Button.vue'
 import Badge from '@/components/ui/Badge.vue'
 
-// The browser only ever holds one page of compact rows + one expanded sample,
-// so the DOM and payload stay bounded no matter how many samples a run has.
 const props = defineProps<{ runId: number; datasets: string[] }>()
+const { t } = useI18n()
 
 const dataset = ref(props.datasets[0] ?? '')
 const filter = ref<'all' | 'correct' | 'wrong'>('all')
@@ -36,7 +36,7 @@ async function load() {
       pageSize,
     })
   } catch (e) {
-    toast.error('無法載入逐題資料', { description: String(e) })
+    toast.error(t('evalSamples.loadFailed'), { description: String(e) })
   } finally {
     loading.value = false
   }
@@ -54,141 +54,172 @@ async function toggleRow(index: number) {
   try {
     detail.value = await api.getEvalSample(props.runId, dataset.value, index)
   } catch (e) {
-    toast.error('無法載入此題詳情', { description: String(e) })
+    toast.error(t('evalSamples.loadDetailFailed'), { description: String(e) })
   } finally {
     loadingDetail.value = false
   }
 }
 
-function setFilter(f: 'all' | 'correct' | 'wrong') {
-  filter.value = f
+function setFilter(next: 'all' | 'correct' | 'wrong') {
+  filter.value = next
   page.value = 1
 }
-function setDataset(d: string) {
-  dataset.value = d
+
+function setDataset(next: string) {
+  dataset.value = next
   filter.value = 'all'
   page.value = 1
 }
+
 function go(delta: number) {
   page.value = Math.min(pageCount.value, Math.max(1, page.value + delta))
 }
 
-// Any change to the query re-fetches; switching rows away collapses the detail.
-watch([dataset, filter, page], () => {
-  expanded.value = null
-  detail.value = null
-  void load()
-}, { immediate: true })
+watch(
+  [dataset, filter, page],
+  () => {
+    expanded.value = null
+    detail.value = null
+    void load()
+  },
+  { immediate: true },
+)
 
 function pct(v: number | null) {
-  return v == null ? '—' : `${(v * 100).toFixed(0)}%`
+  return v == null ? '--' : `${(v * 100).toFixed(0)}%`
 }
 
-// Rule-scored datasets (e.g. IFEval) have no gold answer — `target` is empty.
-// Drop the "standard answer" column/box for them so it doesn't look broken.
-function hasText(t: string | null | undefined) {
-  return !!t && t.trim().length > 0
+function hasText(text: string | null | undefined) {
+  return !!text && text.trim().length > 0
 }
-const showTargetCol = computed(() => (data.value?.samples ?? []).some((s) => hasText(s.target)))
+
+const showTargetCol = computed(() => (data.value?.samples ?? []).some((sample) => hasText(sample.target)))
 const colCount = computed(() => (showTargetCol.value ? 4 : 3))
 </script>
 
 <template>
   <div class="space-y-3">
-    <!-- Dataset tabs (only when a run covers more than one) -->
     <div v-if="datasets.length > 1" class="flex flex-wrap gap-1.5">
       <button
-        v-for="d in datasets"
-        :key="d"
+        v-for="name in datasets"
+        :key="name"
         class="rounded-md border px-2 py-1 text-xs transition-colors"
-        :class="dataset === d ? 'border-[var(--chart-1)] bg-[var(--chart-1)]/10 text-foreground' : 'border-border text-muted-foreground hover:bg-muted'"
-        @click="setDataset(d)"
-      >{{ d }}</button>
+        :class="
+          dataset === name
+            ? 'border-[var(--chart-1)] bg-[var(--chart-1)]/10 text-foreground'
+            : 'border-border text-muted-foreground hover:bg-muted'
+        "
+        @click="setDataset(name)"
+      >
+        {{ name }}
+      </button>
     </div>
 
-    <!-- Filter + paging header -->
     <div class="flex flex-wrap items-center justify-between gap-2">
       <div class="flex items-center gap-1.5">
         <Button :variant="filter === 'all' ? 'default' : 'outline'" size="sm" @click="setFilter('all')">
-          全部 <span class="ml-1 text-[10px] opacity-70">{{ data?.total_all ?? '—' }}</span>
+          {{ t('evalSamples.filterAll') }}
+          <span class="ml-1 text-[10px] opacity-70">{{ data?.total_all ?? '--' }}</span>
         </Button>
         <Button :variant="filter === 'correct' ? 'default' : 'outline'" size="sm" @click="setFilter('correct')">
-          答對 <span class="ml-1 text-[10px] opacity-70">{{ data?.total_correct ?? '—' }}</span>
+          {{ t('evalSamples.filterCorrect') }}
+          <span class="ml-1 text-[10px] opacity-70">{{ data?.total_correct ?? '--' }}</span>
         </Button>
         <Button :variant="filter === 'wrong' ? 'default' : 'outline'" size="sm" @click="setFilter('wrong')">
-          答錯 <span class="ml-1 text-[10px] opacity-70">{{ data ? data.total_all - data.total_correct : '—' }}</span>
+          {{ t('evalSamples.filterWrong') }}
+          <span class="ml-1 text-[10px] opacity-70">{{ data ? data.total_all - data.total_correct : '--' }}</span>
         </Button>
       </div>
       <div class="flex items-center gap-2 text-xs text-muted-foreground">
         <Loader2 v-if="loading" class="size-3.5 animate-spin" />
-        <span>第 {{ data?.page ?? 1 }} / {{ pageCount }} 頁 · 共 {{ data?.total ?? 0 }} 題</span>
-        <Button size="icon-sm" variant="ghost" :disabled="page <= 1" @click="go(-1)"><ChevronLeft class="size-4" /></Button>
-        <Button size="icon-sm" variant="ghost" :disabled="page >= pageCount" @click="go(1)"><ChevronRight class="size-4" /></Button>
+        <span>
+          {{ t('evalSamples.pageInfo', { page: data?.page ?? 1, total: pageCount, count: data?.total ?? 0 }) }}
+        </span>
+        <Button size="icon-sm" variant="ghost" :disabled="page <= 1" @click="go(-1)">
+          <ChevronLeft class="size-4" />
+        </Button>
+        <Button size="icon-sm" variant="ghost" :disabled="page >= pageCount" @click="go(1)">
+          <ChevronRight class="size-4" />
+        </Button>
       </div>
     </div>
 
-    <!-- Rows -->
     <div class="overflow-hidden rounded-lg border border-border/60">
       <table class="w-full text-sm">
         <thead>
           <tr class="border-b border-border/60 bg-muted/30 text-left text-xs text-muted-foreground">
-            <th class="px-3 py-2 w-10">#</th>
-            <th class="px-3 py-2 w-14">結果</th>
-            <th class="px-3 py-2">{{ showTargetCol ? '模型答案（節錄）' : '模型輸出（節錄）' }}</th>
-            <th v-if="showTargetCol" class="px-3 py-2 w-28">標準答案</th>
+            <th class="w-10 px-3 py-2">#</th>
+            <th class="w-14 px-3 py-2">{{ t('evalSamples.colResult') }}</th>
+            <th class="px-3 py-2">
+              {{ showTargetCol ? t('evalSamples.colModelAnswer') : t('evalSamples.colModelOutput') }}
+            </th>
+            <th v-if="showTargetCol" class="w-28 px-3 py-2">{{ t('evalSamples.colStandardAnswer') }}</th>
           </tr>
         </thead>
         <tbody>
-          <template v-for="r in data?.samples ?? []" :key="r.index">
+          <template v-for="sample in data?.samples ?? []" :key="sample.index">
             <tr
               class="cursor-pointer border-b border-border/40 hover:bg-accent/30"
-              :class="expanded === r.index ? 'bg-accent/40' : ''"
-              @click="toggleRow(r.index)"
+              :class="expanded === sample.index ? 'bg-accent/40' : ''"
+              @click="toggleRow(sample.index)"
             >
-              <td class="px-3 py-2 tabular text-muted-foreground">{{ r.index }}</td>
+              <td class="px-3 py-2 tabular text-muted-foreground">{{ sample.index }}</td>
               <td class="px-3 py-2">
-                <CheckCircle2 v-if="r.correct" class="size-4 text-status-ready" />
+                <CheckCircle2 v-if="sample.correct" class="size-4 text-status-ready" />
                 <XCircle v-else class="size-4 text-status-failed" />
               </td>
-              <td class="px-3 py-2"><span class="line-clamp-1 font-mono text-xs">{{ r.extracted || r.preview || '—' }}</span></td>
-              <td v-if="showTargetCol" class="px-3 py-2"><span class="line-clamp-1 font-mono text-xs text-muted-foreground">{{ hasText(r.target) ? r.target : '—' }}</span></td>
+              <td class="px-3 py-2">
+                <span class="line-clamp-1 font-mono text-xs">{{ sample.extracted || sample.preview || '--' }}</span>
+              </td>
+              <td v-if="showTargetCol" class="px-3 py-2">
+                <span class="line-clamp-1 font-mono text-xs text-muted-foreground">
+                  {{ hasText(sample.target) ? sample.target : '--' }}
+                </span>
+              </td>
             </tr>
-            <!-- Expanded: full prompt + answer + target + scores (fetched lazily) -->
-            <tr v-if="expanded === r.index" :key="r.index + '-d'" class="border-b border-border/40 bg-background/40">
+            <tr v-if="expanded === sample.index" :key="`${sample.index}-detail`" class="border-b border-border/40 bg-background/40">
               <td :colspan="colCount" class="px-4 py-3">
                 <div v-if="loadingDetail" class="flex items-center gap-2 text-xs text-muted-foreground">
-                  <Loader2 class="size-3.5 animate-spin" />載入中…
+                  <Loader2 class="size-3.5 animate-spin" />{{ t('common.loading') }}
                 </div>
                 <div v-else-if="detail" class="space-y-3 text-xs">
                   <div class="flex flex-wrap items-center gap-2">
                     <Badge :class="detail.correct ? 'text-status-ready' : 'text-status-failed'" variant="muted">
-                      {{ detail.correct ? '答對' : '答錯' }}
+                      {{ detail.correct ? t('evalSamples.correct') : t('evalSamples.wrong') }}
                     </Badge>
-                    <span v-for="(v, k) in detail.scores" :key="k" class="font-mono text-[11px] text-muted-foreground">{{ k }}={{ pct(v) }}</span>
+                    <span
+                      v-for="(value, key) in detail.scores"
+                      :key="key"
+                      class="font-mono text-[11px] text-muted-foreground"
+                    >
+                      {{ key }}={{ pct(value) }}
+                    </span>
                     <span v-if="detail.perf" class="ml-auto font-mono text-[11px] text-muted-foreground">
                       {{ detail.perf.latency != null ? detail.perf.latency.toFixed(1) + 's' : '' }}
                       · {{ detail.perf.output_tokens ?? '?' }} tok
                     </span>
                   </div>
                   <div v-if="hasText(detail.target)">
-                    <p class="mb-1 font-medium text-muted-foreground">標準答案</p>
+                    <p class="mb-1 font-medium text-muted-foreground">{{ t('evalSamples.standardAnswer') }}</p>
                     <pre class="max-h-24 overflow-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2 font-mono">{{ detail.target }}</pre>
                   </div>
-                  <p v-else class="text-[11px] text-muted-foreground">此為規則評分（檢查是否遵守指令），無單一標準答案；對錯看上方各項指標。</p>
+                  <p v-else class="text-[11px] text-muted-foreground">{{ t('evalSamples.ruleScoreHint') }}</p>
                   <div>
-                    <p class="mb-1 font-medium text-muted-foreground">模型回答</p>
-                    <pre class="max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2 font-mono">{{ detail.answer ?? '—' }}</pre>
+                    <p class="mb-1 font-medium text-muted-foreground">{{ t('evalSamples.modelAnswer') }}</p>
+                    <pre class="max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2 font-mono">{{ detail.answer ?? '--' }}</pre>
                   </div>
                   <details>
-                    <summary class="cursor-pointer text-muted-foreground">題目 / Prompt</summary>
-                    <pre class="mt-1 max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2 font-mono">{{ detail.prompt.map((m) => `[${m.role}] ${m.content}`).join('\n\n') }}</pre>
+                    <summary class="cursor-pointer text-muted-foreground">{{ t('evalSamples.promptLabel') }}</summary>
+                    <pre class="mt-1 max-h-72 overflow-auto whitespace-pre-wrap rounded-md bg-muted/50 p-2 font-mono">{{ detail.prompt.map((msg) => `[${msg.role}] ${msg.content}`).join('\n\n') }}</pre>
                   </details>
                 </div>
               </td>
             </tr>
           </template>
           <tr v-if="data && !data.samples.length">
-            <td :colspan="colCount" class="px-4 py-6 text-center text-sm text-muted-foreground">沒有符合的題目。</td>
+            <td :colspan="colCount" class="px-4 py-6 text-center text-sm text-muted-foreground">
+              {{ t('evalSamples.noMatchingSamples') }}
+            </td>
           </tr>
         </tbody>
       </table>
diff --git a/apps/frontend_llmops/src/components/GpuGauge.vue b/apps/frontend_llmops/src/components/GpuGauge.vue
index a3c4a55..1f17a68 100644
--- a/apps/frontend_llmops/src/components/GpuGauge.vue
+++ b/apps/frontend_llmops/src/components/GpuGauge.vue
@@ -43,21 +43,21 @@ const dash = computed(() => `${(memPct.value / 100) * C} ${C}`)
         </svg>
         <div class="absolute inset-0 flex flex-col items-center justify-center">
           <span class="text-2xl font-semibold tabular leading-none">{{ formatPercent(memPct) }}</span>
-          <span class="mt-1 text-[10px] uppercase tracking-wide text-muted-foreground">VRAM</span>
+          <span class="mt-1 text-[10px] uppercase tracking-wide text-muted-foreground">{{ $t('gpuGauge.vram') }}</span>
         </div>
       </div>
       <div class="min-w-0 flex-1 space-y-2">
         <div>
-          <p class="text-xs text-muted-foreground">GPU {{ gpu.index }}</p>
+          <p class="text-xs text-muted-foreground">{{ $t('statusBar.gpu') }} {{ gpu.index }}</p>
           <p class="truncate text-sm font-medium" :title="gpu.name">{{ gpu.name }}</p>
         </div>
         <dl class="space-y-1 text-xs">
           <div class="flex justify-between">
-            <dt class="text-muted-foreground">記憶體</dt>
+            <dt class="text-muted-foreground">{{ $t('gpuGauge.memory') }}</dt>
             <dd class="tabular">{{ mibToGb(gpu.memory_used) }} / {{ mibToGb(gpu.memory_total) }}</dd>
           </div>
           <div class="flex justify-between">
-            <dt class="text-muted-foreground">使用率</dt>
+            <dt class="text-muted-foreground">{{ $t('gpuGauge.util') }}</dt>
             <dd class="tabular font-medium">{{ formatPercent(gpu.gpu_util) }}</dd>
           </div>
         </dl>
diff --git a/apps/frontend_llmops/src/components/ModelControlDialog.vue b/apps/frontend_llmops/src/components/ModelControlDialog.vue
index 2925326..77b8d42 100644
--- a/apps/frontend_llmops/src/components/ModelControlDialog.vue
+++ b/apps/frontend_llmops/src/components/ModelControlDialog.vue
@@ -31,25 +31,25 @@ async function confirm() {
 </script>
 
 <template>
-  <Dialog v-model:open="dialogOpen" title="管理員驗證" @update:open="(v) => !v && cancel()">
+  <Dialog v-model:open="dialogOpen" :title="$t('modelControl.title')" @update:open="(v) => !v && cancel()">
     <div class="space-y-4">
       <p class="flex items-center gap-2 text-sm text-muted-foreground">
         <Lock class="size-4" />
-        <span>此操作需要管理員權杖（後端 <span class="font-mono">LLMOPS_ADMIN_TOKEN</span>）。</span>
+        <span>{{ $t('modelControl.description') }}</span>
       </p>
       <div>
         <Input
           v-model="token"
           type="password"
-          placeholder="管理員權杖"
+          :placeholder="$t('modelControl.tokenPlaceholder')"
           :class="error ? 'border-status-failed focus-visible:ring-status-failed' : ''"
           @keydown.enter="confirm"
         />
-        <p v-if="error" class="mt-1.5 text-xs text-status-failed">權杖無效。</p>
+        <p v-if="error" class="mt-1.5 text-xs text-status-failed">{{ $t('modelControl.tokenInvalid') }}</p>
       </div>
       <div class="flex justify-end gap-2">
-        <Button variant="ghost" @click="cancel">取消</Button>
-        <Button :disabled="busy || !token" @click="confirm">確認</Button>
+        <Button variant="ghost" @click="cancel">{{ $t('common.cancel') }}</Button>
+        <Button :disabled="busy || !token" @click="confirm">{{ $t('modelControl.confirm') }}</Button>
       </div>
     </div>
   </Dialog>
diff --git a/apps/frontend_llmops/src/components/ModelDetailDrawer.vue b/apps/frontend_llmops/src/components/ModelDetailDrawer.vue
index 3c55915..1f169a5 100644
--- a/apps/frontend_llmops/src/components/ModelDetailDrawer.vue
+++ b/apps/frontend_llmops/src/components/ModelDetailDrawer.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { Download, Loader2, Pencil, Play, RefreshCw, Search, Square, Trash2 } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import Sheet from '@/components/ui/Sheet.vue'
 import Tabs from '@/components/ui/Tabs.vue'
 import TabsList from '@/components/ui/TabsList.vue'
@@ -29,6 +30,7 @@ const models = useModelsStore()
 const traffic = useTrafficStore()
 const control = useModelControl()
 const { ensureUnlocked } = useAuth()
+const { t } = useI18n()
 
 const tab = ref('overview')
 const events = ref<StateEvent[]>([])
@@ -106,9 +108,13 @@ async function hotLoadLora() {
     await api.routerReload() // make the new adapter routable now
     await models.loadConfig() // refresh the mounted list
     pickLoraPath.value = ''
-    toast.success(`已熱載入 ${a.name}`, { description: '已套用到所有就緒實例並更新路由。' })
+    toast.success(t('modelDetail.hotLoadSuccess', { name: a.name }), {
+      description: t('modelDetail.hotLoadSuccessDesc'),
+    })
   } catch (e) {
-    toast.error('熱載入失敗', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('modelDetail.hotLoadFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   } finally {
     hotLoraBusy.value = false
   }
@@ -117,15 +123,17 @@ async function hotUnloadLora(name: string) {
   const key = props.modelKey
   if (!key || hotLoraBusy.value) return
   if (!(await ensureUnlocked())) return
-  if (!confirm(`卸載 LoRA「${name}」？會從所有就緒實例移除並停止路由。`)) return
+  if (!confirm(t('modelDetail.hotUnloadConfirm', { name }))) return
   hotLoraBusy.value = true
   try {
     await api.unloadLora(key, name)
     await api.routerReload()
     await models.loadConfig()
-    toast.success(`已卸載 ${name}`)
+    toast.success(t('modelDetail.hotUnloadSuccess', { name }))
   } catch (e) {
-    toast.error('卸載失敗', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('modelDetail.hotUnloadFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   } finally {
     hotLoraBusy.value = false
   }
@@ -177,7 +185,9 @@ function edit() {
 // One LLM may start at a time: block this model's start while another is mid-start.
 const startLocked = computed(() => model.value?.kind === 'llm' && control.isLlmStarting.value)
 const startLockTitle = computed(() =>
-  startLocked.value ? `已有模型啟動中（${control.startingLlmName()}），請待其完成` : '啟動',
+  startLocked.value
+    ? t('modelDetail.startLocked', { name: control.startingLlmName() })
+    : t('modelDetail.startLabel'),
 )
 
 async function remove() {
@@ -187,11 +197,11 @@ async function remove() {
   try {
     await api.deleteModel(k)
     void api.routerReload() // keep the router's routing table in sync
-    toast.success(`已移除 ${k}`)
+    toast.success(t('modelDetail.removeSuccess', { key: k }))
     open.value = false
     emit('deleted', k)
   } catch (e) {
-    toast.error('無法移除模型', {
+    toast.error(t('modelDetail.removeFailed'), {
       description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
     })
   }
@@ -279,7 +289,7 @@ const eventColor: Record<string, string> = {
 </script>
 
 <template>
-  <Sheet v-model:open="open" :title="model ? model.key : 'Model'">
+  <Sheet v-model:open="open" :title="model ? model.key : t('common.model')">
     <div v-if="model" class="space-y-6 p-6">
       <!-- Header summary -->
       <div class="flex items-start justify-between gap-4">
@@ -297,7 +307,7 @@ const eventColor: Record<string, string> = {
             v-if="editable"
             size="icon-sm"
             variant="ghost"
-            title="編輯參數（需先停止；vLLM 參數為群組共用）"
+            :title="$t('modelDetail.editParams')"
             @click="edit"
           >
             <Pencil class="size-4" />
@@ -306,7 +316,7 @@ const eventColor: Record<string, string> = {
             v-if="removable"
             size="icon-sm"
             variant="ghost"
-            title="移除模型（僅限動態新增的模型）"
+            :title="$t('modelDetail.removeModel')"
             @click="remove"
           >
             <Trash2 class="size-4" />
@@ -319,55 +329,59 @@ const eventColor: Record<string, string> = {
             :title="startLockTitle"
             @click="control.request(model.key, 'start')"
           >
-            <Loader2 v-if="busy" class="size-4 animate-spin" /><Play v-else class="size-4" />啟動
+            <Loader2 v-if="busy" class="size-4 animate-spin" /><Play v-else class="size-4" />{{ $t('modelDetail.startLabel') }}
           </Button>
           <Button
             v-else
             size="sm"
             variant="outline"
             :disabled="!model.managed || model.state === 'stopping'"
-            :title="model.state === 'failed' ? '終止殘留進程' : model.state === 'starting' ? '中止啟動' : '停止'"
+            :title="model.state === 'failed'
+              ? $t('modelDetail.terminateLabel')
+              : model.state === 'starting'
+                ? $t('modelDetail.abortLabel')
+                : $t('modelDetail.stopLabel')"
             @click="control.request(model.key, 'stop')"
           >
-            <Loader2 v-if="busy" class="size-4 animate-spin" /><Square v-else class="size-4" />{{ model.state === 'failed' ? '終止' : '停止' }}
+            <Loader2 v-if="busy" class="size-4 animate-spin" /><Square v-else class="size-4" />{{ model.state === 'failed' ? $t('modelDetail.terminateLabel') : $t('modelDetail.stopLabel') }}
           </Button>
         </div>
       </div>
 
       <Tabs v-model="tab">
         <TabsList class="w-full">
-          <TabsTrigger value="overview" class="flex-1">概覽</TabsTrigger>
-          <TabsTrigger value="events" class="flex-1">事件</TabsTrigger>
-          <TabsTrigger value="logs" class="flex-1">日誌</TabsTrigger>
+          <TabsTrigger value="overview" class="flex-1">{{ $t('modelDetail.overview') }}</TabsTrigger>
+          <TabsTrigger value="events" class="flex-1">{{ $t('modelDetail.events') }}</TabsTrigger>
+          <TabsTrigger value="logs" class="flex-1">{{ $t('modelDetail.logs') }}</TabsTrigger>
         </TabsList>
 
         <!-- Overview -->
         <TabsContent value="overview" class="mt-4 space-y-4">
           <div class="grid grid-cols-2 gap-3">
             <div class="rounded-lg border border-border/60 bg-background/40 p-3">
-              <p class="text-xs text-muted-foreground">端點</p>
+              <p class="text-xs text-muted-foreground">{{ $t('modelDetail.endpoint') }}</p>
               <p class="mt-0.5 font-mono text-sm">{{ model.host }}:{{ model.port }}</p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3">
-              <p class="text-xs text-muted-foreground">顯示卡</p>
+              <p class="text-xs text-muted-foreground">{{ $t('modelDetail.gpu') }}</p>
               <p class="mt-0.5 font-mono text-sm tabular">{{ gpu !== null ? `cuda:${gpu}` : '—' }}</p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3">
-              <p class="text-xs text-muted-foreground">程序 ID</p>
+              <p class="text-xs text-muted-foreground">{{ $t('modelDetail.pid') }}</p>
               <p class="mt-0.5 font-mono text-sm tabular">{{ model.pid ?? '—' }}</p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3">
-              <p class="text-xs text-muted-foreground">管理方式</p>
-              <p class="mt-0.5 text-sm">{{ model.managed ? '是（可控制）' : '外部' }}</p>
+              <p class="text-xs text-muted-foreground">{{ $t('modelDetail.managedLabel') }}</p>
+              <p class="mt-0.5 text-sm">{{ model.managed ? $t('modelDetail.managedYes') : $t('modelDetail.managedExternal') }}</p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3">
-              <p class="text-xs text-muted-foreground">運行時間</p>
+              <p class="text-xs text-muted-foreground">{{ $t('modelDetail.uptime') }}</p>
               <p class="mt-0.5 text-sm tabular">
                 {{ model.ready_at ? formatDuration(model.ready_at) : '—' }}
               </p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3">
-              <p class="text-xs text-muted-foreground">自動重啟次數</p>
+              <p class="text-xs text-muted-foreground">{{ $t('modelDetail.autoRestarts') }}</p>
               <p class="mt-0.5 text-sm tabular" :class="model.restart_count ? 'text-status-starting' : ''">
                 {{ model.restart_count ?? 0 }}
               </p>
@@ -376,7 +390,7 @@ const eventColor: Record<string, string> = {
 
           <!-- vLLM startup capacity snapshot (READY instances only) -->
           <div v-if="startupMetrics" class="space-y-2.5">
-            <p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">啟動容量快照</p>
+            <p class="text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ $t('modelDetail.startupSnapshot') }}</p>
 
             <!-- Capacity headline -->
             <div
@@ -385,7 +399,7 @@ const eventColor: Record<string, string> = {
             >
               <div class="grid grid-cols-2 gap-3">
                 <div>
-                  <p class="text-xs text-muted-foreground">KV cache 容量</p>
+                  <p class="text-xs text-muted-foreground">{{ $t('modelDetail.kvCacheCapacity') }}</p>
                   <p class="text-lg font-semibold tabular">
                     {{ startupMetrics.capacity?.kv_cache_tokens != null ? formatNumber(startupMetrics.capacity.kv_cache_tokens) : '—' }}
                     <span class="text-xs font-normal text-muted-foreground">tokens</span>
@@ -393,20 +407,20 @@ const eventColor: Record<string, string> = {
                 </div>
                 <div>
                   <p class="text-xs text-muted-foreground">
-                    最大並發（{{ startupMetrics.capacity?.concurrency_req_tokens != null ? formatNumber(startupMetrics.capacity.concurrency_req_tokens) : '?' }} tok/req）
+                    {{ $t('modelDetail.maxConcurrency') }}（{{ startupMetrics.capacity?.concurrency_req_tokens != null ? $t('modelDetail.concurrencyReqTok', { n: formatNumber(startupMetrics.capacity.concurrency_req_tokens) }) : '?' }}）
                   </p>
                   <p class="text-lg font-semibold tabular">{{ fmt(startupMetrics.capacity?.max_concurrency, 1, '×') }}</p>
                 </div>
               </div>
               <p v-if="startupMetrics.capacity?.max_concurrency != null" class="mt-1 text-[11px] text-muted-foreground">
-                ≈ 可同時服務 {{ Math.floor(startupMetrics.capacity.max_concurrency) }} 個請求
+                {{ $t('modelDetail.concurrencyHint', { n: Math.floor(startupMetrics.capacity.max_concurrency) }) }}
               </p>
             </div>
 
             <!-- Memory breakdown -->
             <div v-if="startupMetrics.memory" class="grid grid-cols-3 gap-2 text-xs">
               <div class="rounded-md border border-border/60 p-2">
-                <p class="text-muted-foreground">權重</p>
+                <p class="text-muted-foreground">{{ $t('modelDetail.memWeights') }}</p>
                 <p class="tabular">{{ fmt(startupMetrics.memory.model_gib, 2, ' GiB') }}</p>
               </div>
               <div class="rounded-md border border-border/60 p-2">
@@ -421,10 +435,10 @@ const eventColor: Record<string, string> = {
 
             <!-- Startup timing -->
             <div v-if="startupMetrics.startup" class="flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-muted-foreground">
-              <span>載權重 {{ fmt(startupMetrics.startup.weights_load_s, 2, 's') }}</span>
-              <span>模型載入 {{ fmt(startupMetrics.startup.model_load_s, 1, 's') }}</span>
-              <span>torch.compile {{ fmt(startupMetrics.startup.compile_s, 1, 's') }}</span>
-              <span>warmup {{ fmt(startupMetrics.startup.warmup_s, 2, 's') }}</span>
+              <span>{{ $t('modelDetail.startupWeightsLoad') }} {{ fmt(startupMetrics.startup.weights_load_s, 2, 's') }}</span>
+              <span>{{ $t('modelDetail.startupModelLoad') }} {{ fmt(startupMetrics.startup.model_load_s, 1, 's') }}</span>
+              <span>{{ $t('modelDetail.startupCompile') }} {{ fmt(startupMetrics.startup.compile_s, 1, 's') }}</span>
+              <span>{{ $t('modelDetail.startupWarmup') }} {{ fmt(startupMetrics.startup.warmup_s, 2, 's') }}</span>
             </div>
 
             <!-- gpu_memory_utilization advisory -->
@@ -432,14 +446,13 @@ const eventColor: Record<string, string> = {
               v-if="startupMetrics.gpu_mem_util?.suggested != null && startupMetrics.gpu_mem_util.suggested !== startupMetrics.gpu_mem_util.current"
               class="rounded-md border border-amber-500/40 bg-amber-500/5 p-2.5 text-[11px]"
             >
-              <p class="text-amber-600">⚙ 關於 gpu_memory_utilization</p>
+              <p class="text-amber-600">{{ $t('modelDetail.gpuMemUtilTitle') }}</p>
               <p class="mt-0.5 leading-relaxed text-muted-foreground">
-                新版 vLLM 把 CUDA graph 記憶體也算進這個額度。你設
-                <span class="font-mono">{{ fmt(startupMetrics.gpu_mem_util.current, 2) }}</span>,扣掉後實際給 KV cache 的空間只等於舊版的
-                <span class="font-mono">{{ fmt(startupMetrics.gpu_mem_util.effective, 2) }}</span>。
-                想要更大 KV cache（更高並發 / 更長 context）可在停止後於「編輯參數」提到
-                <span class="font-mono font-semibold">{{ fmt(startupMetrics.gpu_mem_util.suggested, 2) }}</span>，
-                但顯存餘裕會變小、OOM 風險上升（小顯卡尤其要保守）。
+                {{ $t('modelDetail.gpuMemUtilDesc', {
+                  current: fmt(startupMetrics.gpu_mem_util.current, 2),
+                  effective: fmt(startupMetrics.gpu_mem_util.effective, 2),
+                  suggested: fmt(startupMetrics.gpu_mem_util.suggested, 2),
+                }) }}
               </p>
             </div>
           </div>
@@ -447,7 +460,7 @@ const eventColor: Record<string, string> = {
           <!-- Embedding server: the models it serves (editable while stopped) -->
           <div v-if="servedModels.length">
             <p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              服務的模型
+              {{ $t('modelDetail.servedModels') }}
             </p>
             <div class="overflow-hidden rounded-lg border border-border/60">
               <div
@@ -457,7 +470,7 @@ const eventColor: Record<string, string> = {
                 :class="i % 2 ? 'bg-background/20' : 'bg-background/40'"
               >
                 <Badge variant="muted" :class="sm.type === 'embedding' ? 'text-[var(--chart-4)]' : 'text-[var(--chart-2)]'">
-                  {{ sm.type === 'embedding' ? '嵌入' : '重排序' }}
+                  {{ sm.type === 'embedding' ? $t('common.embedding') : $t('common.reranking') }}
                 </Badge>
                 <div class="min-w-0 flex-1">
                   <p class="truncate font-mono text-sm">{{ sm.name }}</p>
@@ -467,7 +480,7 @@ const eventColor: Record<string, string> = {
                   v-if="removable"
                   size="icon-sm"
                   variant="ghost"
-                  title="編輯參數（需先停止 embedding server）"
+                  :title="$t('modelDetail.editEmbedding')"
                   @click="editEmbeddingModel(sm)"
                 >
                   <Pencil class="size-3.5" />
@@ -479,7 +492,7 @@ const eventColor: Record<string, string> = {
           <!-- Routing policy (router-only, not a vLLM flag) -->
           <div v-if="routingStrategy">
             <p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              路由策略（負載平衡）
+              {{ $t('modelDetail.routingPolicy') }}
             </p>
             <div class="rounded-lg border border-border/60 bg-background/40 px-3 py-2 text-sm">
               {{ routingStrategyLabel(routingStrategy) }}
@@ -490,7 +503,7 @@ const eventColor: Record<string, string> = {
           <!-- Full vLLM model_config -->
           <div v-if="vllmParams.length">
             <p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              vLLM 參數（model_config）
+              {{ $t('modelDetail.vllmParams') }}
             </p>
             <div class="overflow-hidden rounded-lg border border-border/60">
               <div
@@ -508,8 +521,8 @@ const eventColor: Record<string, string> = {
           <!-- LoRA adapters -->
           <div v-if="loras.length || canHotLora">
             <p class="mb-2 flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              LoRA Adapters
-              <Badge v-if="canHotLora" variant="outline" class="text-[10px] normal-case">熱加載已啟用</Badge>
+              {{ $t('modelDetail.loraAdapters') }}
+              <Badge v-if="canHotLora" variant="outline" class="text-[10px] normal-case">{{ $t('modelDetail.hotLoadEnabled') }}</Badge>
             </p>
             <div v-if="loras.length" class="overflow-hidden rounded-lg border border-border/60">
               <div
@@ -525,7 +538,7 @@ const eventColor: Record<string, string> = {
                   size="icon-sm"
                   variant="ghost"
                   :disabled="hotLoraBusy"
-                  title="熱卸載"
+                  :title="$t('modelDetail.hotUnload')"
                   @click="hotUnloadLora(l.name)"
                 >
                   <Trash2 class="size-3.5" />
@@ -539,19 +552,19 @@ const eventColor: Record<string, string> = {
                 v-model="pickLoraPath"
                 class="h-9 min-w-0 flex-1 rounded-md border border-input bg-background/40 px-2 font-mono text-xs"
               >
-                <option value="">— 從 LoRA 庫選 adapter 熱載入 —</option>
+                <option value="">{{ $t('modelDetail.hotLoadPick') }}</option>
                 <option v-for="a in loraLibrary" :key="a.path" :value="a.path">
                   {{ a.name }}{{ a.rank != null ? ` (r${a.rank})` : '' }}{{ a.base_model ? ` · ${a.base_model}` : '' }}
                 </option>
               </select>
               <Button size="sm" :disabled="!pickLoraPath || hotLoraBusy" @click="hotLoadLora">
-                <Loader2 v-if="hotLoraBusy" class="size-3.5 animate-spin" /><Download v-else class="size-3.5" />載入
+                <Loader2 v-if="hotLoraBusy" class="size-3.5 animate-spin" /><Download v-else class="size-3.5" />{{ $t('modelDetail.hotLoad') }}
               </Button>
             </div>
 
             <p class="mt-1 text-[11px] text-muted-foreground/80">
-              <template v-if="canHotLora">熱載入會套用到所有就緒實例並更新路由，且寫入 overlay（重啟後仍在）。</template>
-              <template v-else>推論時把 served name 填進 <span class="font-mono">model</span> 欄位即可（Playground / 評測 / 壓測皆可選）。</template>
+              <template v-if="canHotLora">{{ $t('modelDetail.hotLoadHint') }}</template>
+              <template v-else>{{ $t('modelDetail.coldHint') }}</template>
             </p>
           </div>
           <!-- Running but hot-load not enabled: tell the user how to turn it on -->
@@ -559,48 +572,46 @@ const eventColor: Record<string, string> = {
             v-else-if="model?.state === 'ready' && !engine?.settings?.allow_runtime_lora"
             class="rounded-lg border border-border/60 bg-muted/20 p-3 text-[11px] text-muted-foreground"
           >
-            要在不重啟下熱加載 LoRA：編輯本模型、勾選
-            <span class="font-mono">enable_lora</span> +
-            <span class="font-mono">allow_runtime_lora</span>，重啟後即可在此熱載入 / 卸載。
+            {{ $t('modelDetail.hotLoadEnableHint') }}
           </div>
 
           <!-- Live router metrics -->
           <div>
             <p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
-              即時負載（路由器 /metrics）
+              {{ $t('modelDetail.liveMetrics') }}
             </p>
             <div v-if="metrics" class="grid grid-cols-2 gap-3 sm:grid-cols-4">
               <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
                 <p class="text-lg font-semibold tabular">{{ metrics.running }}</p>
-                <p class="text-xs text-muted-foreground">執行中</p>
+                <p class="text-xs text-muted-foreground">{{ $t('modelDetail.metricsRunning') }}</p>
               </div>
               <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
                 <p class="text-lg font-semibold tabular">{{ metrics.waiting }}</p>
-                <p class="text-xs text-muted-foreground">等待中</p>
+                <p class="text-xs text-muted-foreground">{{ $t('modelDetail.metricsWaiting') }}</p>
               </div>
               <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
                 <p class="text-lg font-semibold tabular">
                   {{ metrics.kv_cache_usage_perc == null ? '—' : formatPercent(metrics.kv_cache_usage_perc * 100) }}
                 </p>
-                <p class="text-xs text-muted-foreground">KV 快取</p>
+                <p class="text-xs text-muted-foreground">{{ $t('modelDetail.metricsKvCache') }}</p>
               </div>
               <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
                 <p class="text-lg font-semibold tabular">
                   {{ formatNumber(metrics.generation_tokens, true) }}
                 </p>
-                <p class="text-xs text-muted-foreground">生成 tokens</p>
+                <p class="text-xs text-muted-foreground">{{ $t('modelDetail.metricsGenTokens') }}</p>
               </div>
             </div>
-            <p v-else class="text-sm text-muted-foreground">無即時指標（路由器無法連線或模型閒置）。</p>
+            <p v-else class="text-sm text-muted-foreground">{{ $t('modelDetail.noMetrics') }}</p>
           </div>
 
           <!-- Usage rollup -->
           <div v-if="usageRow">
-            <p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">用量</p>
+            <p class="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">{{ $t('modelDetail.usageSection') }}</p>
             <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
               <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
                 <p class="text-lg font-semibold tabular">{{ formatNumber(usageRow.count) }}</p>
-                <p class="text-xs text-muted-foreground">請求次數</p>
+                <p class="text-xs text-muted-foreground">{{ $t('modelDetail.requestCount') }}</p>
               </div>
               <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
                 <p class="text-lg font-semibold tabular">{{ formatLatency(usageRow.p50_latency_ms) }}</p>
@@ -621,7 +632,7 @@ const eventColor: Record<string, string> = {
             v-if="model.last_error"
             class="rounded-lg border border-status-failed/30 bg-status-failed/10 p-3"
           >
-            <p class="text-xs font-medium text-status-failed">最後錯誤</p>
+            <p class="text-xs font-medium text-status-failed">{{ $t('modelDetail.lastError') }}</p>
             <pre class="mt-1 whitespace-pre-wrap break-words font-mono text-xs text-status-failed/90">{{ model.last_error }}</pre>
           </div>
         </TabsContent>
@@ -629,7 +640,7 @@ const eventColor: Record<string, string> = {
         <!-- Events timeline -->
         <TabsContent value="events" class="mt-4">
           <div class="flex justify-end">
-            <Button variant="ghost" size="sm" @click="loadEvents"><RefreshCw class="size-3.5" />重新整理</Button>
+            <Button variant="ghost" size="sm" @click="loadEvents"><RefreshCw class="size-3.5" />{{ $t('common.refresh') }}</Button>
           </div>
           <ol class="relative mt-2 space-y-4 border-l border-border/70 pl-5">
             <li v-for="ev in events" :key="ev.id" class="relative">
@@ -644,7 +655,7 @@ const eventColor: Record<string, string> = {
                 {{ ev.detail }}
               </p>
             </li>
-            <li v-if="!events.length" class="text-sm text-muted-foreground">尚無事件記錄。</li>
+            <li v-if="!events.length" class="text-sm text-muted-foreground">{{ $t('modelDetail.noEventRecords') }}</li>
           </ol>
         </TabsContent>
 
@@ -655,15 +666,15 @@ const eventColor: Record<string, string> = {
               <Search class="absolute left-2.5 top-1/2 size-3.5 -translate-y-1/2 text-muted-foreground" />
               <input
                 v-model="logFilter"
-                placeholder="篩選日誌行…"
+                :placeholder="$t('modelDetail.filterLogs')"
                 class="h-8 w-full rounded-md border border-input bg-background/40 pl-8 pr-2 text-xs"
               />
             </div>
-            <Button variant="ghost" size="sm" :disabled="!logs" title="下載完整日誌" @click="downloadLogs">
-              <Download class="size-3.5" />下載
+            <Button variant="ghost" size="sm" :disabled="!logs" :title="$t('modelDetail.downloadLogs')" @click="downloadLogs">
+              <Download class="size-3.5" />{{ $t('common.download') }}
             </Button>
             <Button variant="ghost" size="sm" :disabled="loadingLogs" @click="loadLogs">
-              <RefreshCw class="size-3.5" :class="loadingLogs && 'animate-spin'" />重新整理
+              <RefreshCw class="size-3.5" :class="loadingLogs && 'animate-spin'" />{{ $t('common.refresh') }}
             </Button>
           </div>
           <pre
@@ -671,7 +682,7 @@ const eventColor: Record<string, string> = {
             class="max-h-[60vh] overflow-auto rounded-lg border border-border/60 bg-black/40 p-3 font-mono text-xs leading-relaxed text-foreground/90"
           >{{ filteredLogs }}</pre>
           <p v-else class="rounded-lg border border-border/60 bg-background/40 p-4 text-sm text-muted-foreground">
-            {{ logs ? '無符合篩選的日誌行。' : (logsError ?? '無日誌內容。') }}
+            {{ logs ? $t('modelDetail.noFilterMatch') : (logsError ?? $t('modelDetail.noLogContent')) }}
           </p>
         </TabsContent>
       </Tabs>
diff --git a/apps/frontend_llmops/src/components/ModelGroupCard.vue b/apps/frontend_llmops/src/components/ModelGroupCard.vue
index 4e29f7d..d594635 100644
--- a/apps/frontend_llmops/src/components/ModelGroupCard.vue
+++ b/apps/frontend_llmops/src/components/ModelGroupCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { Box, ChevronDown, Loader2, Play, Plus, RotateCw, Sparkles, Square } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import Card from '@/components/ui/Card.vue'
 import Badge from '@/components/ui/Badge.vue'
 import Button from '@/components/ui/Button.vue'
@@ -14,6 +15,7 @@ import type { ModelState, ModelView } from '@/types/api'
 const props = defineProps<{ group: string; instances: ModelView[] }>()
 const emit = defineEmits<{ open: [key: string]; 'add-instance': [group: string] }>()
 
+const { t } = useI18n()
 const models = useModelsStore()
 const traffic = useTrafficStore()
 const control = useModelControl()
@@ -34,37 +36,43 @@ const modelTag = computed<string | null>(() => {
   return tag != null ? String(tag) : null
 })
 
-// Embedding server hosts several models at once — surface them like an LLM's tag.
 const embeddingServer = computed(() => models.config?.embedding_server ?? null)
 const servedModels = computed(() => {
-  const e = embeddingServer.value
-  if (kind.value !== 'embedding' || !e) return []
+  const server = embeddingServer.value
+  if (kind.value !== 'embedding' || !server) return []
   return [
-    ...Object.entries(e.embedding_models).map(([name, params]) => ({ name, type: 'embed' as const, params })),
-    ...Object.entries(e.reranking_models).map(([name, params]) => ({ name, type: 'rerank' as const, params })),
+    ...Object.entries(server.embedding_models).map(([name, params]) => ({
+      name,
+      type: 'embed' as const,
+      params,
+    })),
+    ...Object.entries(server.reranking_models).map(([name, params]) => ({
+      name,
+      type: 'rerank' as const,
+      params,
+    })),
   ]
 })
 const subtitle = computed(() => {
   if (kind.value === 'llm') return modelTag.value ?? 'embedding / reranker'
-  const e = embeddingServer.value
-  if (!e) return 'embedding / reranker'
+  const server = embeddingServer.value
+  if (!server) return 'embedding / reranker'
   const parts: string[] = []
-  const ne = Object.keys(e.embedding_models).length
-  const nr = Object.keys(e.reranking_models).length
-  if (ne) parts.push(`${ne} 嵌入`)
-  if (nr) parts.push(`${nr} 重排序`)
-  return parts.join(' · ') || 'embedding / reranker'
+  const embedCount = Object.keys(server.embedding_models).length
+  const rerankCount = Object.keys(server.reranking_models).length
+  if (embedCount) parts.push(`${embedCount} ${t('modelGroup.embedding')}`)
+  if (rerankCount) parts.push(`${rerankCount} ${t('modelGroup.reranking')}`)
+  return parts.join(' / ') || 'embedding / reranker'
 })
 
 const readyCount = computed(() => props.instances.filter((m) => m.state === 'ready').length)
 const total = computed(() => props.instances.length)
 
-// Worst-wins rollup so the header dot reflects the group's least-healthy state.
 const headerState = computed<ModelState>(() => {
   const states = props.instances.map((m) => m.state)
   if (states.includes('failed')) return 'failed'
-  if (states.some((s) => s === 'starting' || s === 'stopping')) return 'starting'
-  if (states.every((s) => s === 'ready')) return 'ready'
+  if (states.some((state) => state === 'starting' || state === 'stopping')) return 'starting'
+  if (states.every((state) => state === 'ready')) return 'ready'
   return 'stopped'
 })
 
@@ -75,24 +83,25 @@ const stoppableKeys = computed(() =>
   props.instances.filter((m) => m.managed && m.state !== 'stopped').map((m) => m.key),
 )
 
-// Live router metrics — only meaningful while an instance is actually serving.
-function metricsFor(m: ModelView) {
-  if (m.state !== 'ready' && m.state !== 'starting') return null
-  const inst = m.key.split('::')[1] ?? ''
-  return traffic.metrics[props.group]?.[inst] ?? null
+function metricsFor(model: ModelView) {
+  if (model.state !== 'ready' && model.state !== 'starting') return null
+  const instance = model.key.split('::')[1] ?? ''
+  return traffic.metrics[props.group]?.[instance] ?? null
 }
-function loadPct(m: ModelView): number {
-  const im = metricsFor(m)
-  if (!im) return 0
-  // Soft saturation: a handful of running/waiting reqs fills the meter.
-  // Fields are null when the scrape failed — treat as 0 for the meter.
-  const score = (im.waiting ?? 0) * 10 + (im.running ?? 0) * 3 + (im.kv_cache_usage_perc ?? 0) * 100
+
+function loadPct(model: ModelView): number {
+  const metrics = metricsFor(model)
+  if (!metrics) return 0
+  const score =
+    (metrics.waiting ?? 0) * 10 +
+    (metrics.running ?? 0) * 3 +
+    (metrics.kv_cache_usage_perc ?? 0) * 100
   return Math.min(100, score)
 }
-/** KV cache as a percent string, or "—" when the metric is unavailable. */
-function kvText(m: ModelView): string {
-  const kv = metricsFor(m)?.kv_cache_usage_perc
-  return kv == null ? '—' : `${(kv * 100).toFixed(0)}%`
+
+function kvText(model: ModelView): string {
+  const kv = metricsFor(model)?.kv_cache_usage_perc
+  return kv == null ? '--' : `${(kv * 100).toFixed(0)}%`
 }
 
 const Icon = computed(() => (kind.value === 'llm' ? Sparkles : Box))
@@ -100,26 +109,25 @@ const Icon = computed(() => (kind.value === 'llm' ? Sparkles : Box))
 function isBusy(key: string) {
   return models.pending.has(key)
 }
+
 function isRunning(state: ModelState) {
   return state === 'ready' || state === 'starting'
 }
-// Offer Stop whenever there's a live process to reap — including a FAILED
-// instance that still has one (e.g. a hung start before cleanup).
-function canStop(m: ModelView) {
-  return isRunning(m.state) || (m.state === 'failed' && m.pid != null)
+
+function canStop(model: ModelView) {
+  return isRunning(model.state) || (model.state === 'failed' && model.pid != null)
 }
 
-// One LLM may start at a time: block this group's start controls while another
-// LLM is mid-start (embeddings are unrestricted).
 const startLocked = computed(() => kind.value === 'llm' && control.isLlmStarting.value)
 const startLockTitle = computed(() =>
-  startLocked.value ? `已有模型啟動中（${control.startingLlmName()}），請待其完成` : '啟動',
+  startLocked.value
+    ? t('modelDetail.startLocked', { name: control.startingLlmName() })
+    : t('modelDetail.startLabel'),
 )
 </script>
 
 <template>
   <Card glass class="overflow-hidden">
-    <!-- Group header -->
     <div class="flex items-center justify-between gap-3 px-4 py-3">
       <div class="flex min-w-0 items-center gap-3">
         <div
@@ -137,119 +145,135 @@ const startLockTitle = computed(() =>
       </div>
       <div class="flex shrink-0 items-center gap-1.5">
         <StatusDot :state="headerState" />
-        <span class="text-xs text-muted-foreground tabular">{{ readyCount }}/{{ total }} 就緒</span>
+        <span class="tabular text-xs text-muted-foreground">
+          {{ t('modelGroup.readyCount', { ready: readyCount, total }) }}
+        </span>
       </div>
     </div>
 
-    <!-- Instance rows (compact, single line) -->
     <div class="divide-y divide-border/40 border-t border-border/40">
       <div
-        v-for="m in visibleInstances"
-        :key="m.key"
+        v-for="model in visibleInstances"
+        :key="model.key"
         class="group/row flex cursor-pointer items-center gap-2.5 px-4 py-2 transition-colors hover:bg-accent/40"
-        @click="emit('open', m.key)"
+        @click="emit('open', model.key)"
       >
-        <StatusDot :state="m.state" size="sm" />
-        <span class="font-mono text-[13px] font-medium">{{ m.key.split('::')[1] }}</span>
+        <StatusDot :state="model.state" size="sm" />
+        <span class="font-mono text-[13px] font-medium">{{ model.key.split('::')[1] }}</span>
         <Badge
-          v-if="models.gpuForKey(m.key, m.kind) !== null"
+          v-if="models.gpuForKey(model.key, model.kind) !== null"
           variant="muted"
           class="px-1.5 py-0 text-[10px]"
         >
-          GPU {{ models.gpuForKey(m.key, m.kind) }}
+          GPU {{ models.gpuForKey(model.key, model.kind) }}
         </Badge>
-        <span class="font-mono text-[11px] text-muted-foreground">:{{ m.port }}</span>
-        <Tooltip v-if="m.restart_count" :text="`崩潰後自動重啟 ${m.restart_count} 次`">
+        <span class="font-mono text-[11px] text-muted-foreground">:{{ model.port }}</span>
+        <Tooltip
+          v-if="model.restart_count"
+          :text="t('modelGroup.crashRestart', { n: model.restart_count })"
+        >
           <span class="flex items-center gap-0.5 text-[10px] text-status-starting">
-            <RotateCw class="size-3" />{{ m.restart_count }}
+            <RotateCw class="size-3" />{{ model.restart_count }}
           </span>
         </Tooltip>
 
         <div class="ml-auto flex items-center gap-2.5">
-          <!-- Live load: shown only while serving -->
-          <Tooltip v-if="metricsFor(m)">
+          <Tooltip v-if="metricsFor(model)">
             <div class="hidden cursor-help items-center gap-1.5 sm:flex" @click.stop>
               <div class="h-1 w-10 overflow-hidden rounded-full bg-muted">
                 <div
                   class="h-full rounded-full bg-[var(--chart-1)] transition-all"
-                  :style="{ width: `${Math.max(4, loadPct(m))}%` }"
+                  :style="{ width: `${Math.max(4, loadPct(model))}%` }"
                 />
               </div>
-              <span class="w-16 text-[11px] text-muted-foreground tabular">
-                {{ metricsFor(m)!.running ?? 0 }}r · {{ metricsFor(m)!.waiting ?? 0 }}w
+              <span class="w-16 tabular text-[11px] text-muted-foreground">
+                {{ metricsFor(model)!.running ?? 0 }}r / {{ metricsFor(model)!.waiting ?? 0 }}w
               </span>
             </div>
             <template #content>
-              <p class="font-medium">即時負載（路由器 /metrics）</p>
+              <p class="font-medium">{{ t('modelGroup.liveLoad') }}</p>
               <ul class="mt-1 space-y-0.5 text-muted-foreground">
-                <li><span class="tabular text-foreground">{{ metricsFor(m)!.running ?? '—' }}</span> 執行中 — 目前正在生成的請求</li>
-                <li><span class="tabular text-foreground">{{ metricsFor(m)!.waiting ?? '—' }}</span> 等待中 — 此實例的排隊請求</li>
                 <li>
-                  KV 快取 <span class="tabular text-foreground">{{ kvText(m) }}</span> 已使用
+                  <span class="tabular text-foreground">{{ metricsFor(model)!.running ?? '--' }}</span>
+                  {{ t('modelGroup.runningDesc') }}
+                </li>
+                <li>
+                  <span class="tabular text-foreground">{{ metricsFor(model)!.waiting ?? '--' }}</span>
+                  {{ t('modelGroup.waitingDesc') }}
                 </li>
+                <li>{{ t('modelGroup.kvCacheUsed', { pct: kvText(model) }) }}</li>
               </ul>
             </template>
           </Tooltip>
 
           <Button
-            v-if="!canStop(m)"
+            v-if="!canStop(model)"
             size="icon-sm"
             variant="success"
-            :disabled="isBusy(m.key) || startLocked"
+            :disabled="isBusy(model.key) || startLocked"
             :title="startLockTitle"
-            @click.stop="control.request(m.key, 'start')"
+            @click.stop="control.request(model.key, 'start')"
           >
-            <Loader2 v-if="isBusy(m.key)" class="size-3.5 animate-spin" /><Play v-else class="size-3.5" />
+            <Loader2 v-if="isBusy(model.key)" class="size-3.5 animate-spin" />
+            <Play v-else class="size-3.5" />
           </Button>
           <Button
             v-else
             size="icon-sm"
             variant="outline"
-            :disabled="!m.managed || m.state === 'stopping'"
-            :title="!m.managed ? '外部模型 — 非本後端管理' : m.state === 'failed' ? '終止殘留進程' : m.state === 'starting' ? '中止啟動' : '停止'"
-            @click.stop="control.request(m.key, 'stop')"
+            :disabled="!model.managed || model.state === 'stopping'"
+            :title="
+              !model.managed
+                ? t('modelGroup.externalNotManaged')
+                : model.state === 'failed'
+                  ? t('modelGroup.terminateHint')
+                  : model.state === 'starting'
+                    ? t('modelGroup.abortStartup')
+                    : t('modelGroup.stopHint')
+            "
+            @click.stop="control.request(model.key, 'stop')"
           >
-            <Loader2 v-if="isBusy(m.key)" class="size-3.5 animate-spin" /><Square v-else class="size-3.5" />
+            <Loader2 v-if="isBusy(model.key)" class="size-3.5 animate-spin" />
+            <Square v-else class="size-3.5" />
           </Button>
         </div>
       </div>
 
-      <!-- Collapse toggle for large groups -->
       <button
         v-if="collapsible"
         class="flex w-full items-center justify-center gap-1 py-1.5 text-xs text-muted-foreground transition-colors hover:bg-accent/40 hover:text-foreground"
         @click="expanded = !expanded"
       >
         <ChevronDown class="size-3.5 transition-transform" :class="expanded && 'rotate-180'" />
-        {{ expanded ? '收起' : `顯示更多 ${hiddenCount} 個` }}
+        {{ expanded ? t('modelGroup.collapse') : t('modelGroup.showMore', { n: hiddenCount }) }}
       </button>
     </div>
 
-    <!-- Embedding server: the models it serves (parity with an LLM's model_tag) -->
     <div v-if="servedModels.length" class="border-t border-border/40 px-4 py-2.5">
-      <p class="mb-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">服務的模型</p>
+      <p class="mb-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground">
+        {{ t('modelGroup.servedModels') }}
+      </p>
       <div class="flex flex-wrap gap-1.5">
         <span
-          v-for="sm in servedModels"
-          :key="sm.name"
+          v-for="served in servedModels"
+          :key="served.name"
           class="flex items-center gap-1 rounded-md border border-border/60 bg-background/40 px-1.5 py-0.5"
         >
           <Badge
             variant="muted"
             class="px-1 py-0 text-[9px]"
-            :class="sm.type === 'embed' ? 'text-[var(--chart-4)]' : 'text-[var(--chart-2)]'"
+            :class="served.type === 'embed' ? 'text-[var(--chart-4)]' : 'text-[var(--chart-2)]'"
           >
-            {{ sm.type === 'embed' ? '嵌入' : '重排序' }}
+            {{ served.type === 'embed' ? t('modelGroup.embedding') : t('modelGroup.reranking') }}
           </Badge>
-          <span class="font-mono text-[11px]">{{ sm.name }}</span>
-          <span v-if="sm.params.max_length != null" class="text-[10px] text-muted-foreground">· len {{ sm.params.max_length }}</span>
+          <span class="font-mono text-[11px]">{{ served.name }}</span>
+          <span v-if="served.params.max_length != null" class="text-[10px] text-muted-foreground">
+            / len {{ served.params.max_length }}
+          </span>
         </span>
       </div>
     </div>
 
-    <!-- Group actions. Bulk start/stop is only meaningful for multi-instance
-         groups; "add instance" is offered for any LLM group (scale up a single
-         instance too). -->
     <div v-if="kind === 'llm' || instances.length > 1" class="flex gap-2 border-t border-border/40 p-3">
       <template v-if="instances.length > 1">
         <Button
@@ -257,10 +281,10 @@ const startLockTitle = computed(() =>
           variant="success"
           class="flex-1"
           :disabled="!startableKeys.length || startLocked"
-          :title="startLocked ? startLockTitle : '依序啟動所有實例'"
+          :title="startLocked ? startLockTitle : t('modelGroup.startAll')"
           @click="control.requestMany(startableKeys, 'start')"
         >
-          <Play class="size-3.5" />全部啟動
+          <Play class="size-3.5" />{{ t('modelGroup.startAll') }}
         </Button>
         <Button
           size="sm"
@@ -269,7 +293,7 @@ const startLockTitle = computed(() =>
           :disabled="!stoppableKeys.length"
           @click="control.requestMany(stoppableKeys, 'stop')"
         >
-          <Square class="size-3.5" />全部停止
+          <Square class="size-3.5" />{{ t('modelGroup.stopAll') }}
         </Button>
       </template>
       <Button
@@ -277,10 +301,10 @@ const startLockTitle = computed(() =>
         size="sm"
         variant="outline"
         :class="instances.length > 1 ? '' : 'flex-1'"
-        title="為此模型新增一個負載平衡實例"
+        :title="t('modelGroup.addInstance')"
         @click="emit('add-instance', group)"
       >
-        <Plus class="size-3.5" />新增實例
+        <Plus class="size-3.5" />{{ t('modelGroup.addInstance') }}
       </Button>
     </div>
   </Card>
diff --git a/apps/frontend_llmops/src/components/PerfCompareChart.vue b/apps/frontend_llmops/src/components/PerfCompareChart.vue
index 6d50344..c652eca 100644
--- a/apps/frontend_llmops/src/components/PerfCompareChart.vue
+++ b/apps/frontend_llmops/src/components/PerfCompareChart.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { PerfPoint } from '@/types/api'
 
 export interface CompareSeries {
@@ -8,6 +9,8 @@ export interface CompareSeries {
   points: PerfPoint[]
 }
 
+const { t } = useI18n()
+
 const props = withDefaults(
   defineProps<{
     series: CompareSeries[]
@@ -16,8 +19,9 @@ const props = withDefaults(
     format?: (v: number) => string
     xLabel?: string
   }>(),
-  { format: (v: number) => `${Math.round(v)}`, xLabel: '並發' },
+  { format: (v: number) => `${Math.round(v)}` },
 )
+const displayXLabel = computed(() => props.xLabel ?? t('benchmark.tableParallel'))
 
 function xVal(p: PerfPoint): number | null {
   return p.concurrency != null && p.concurrency > 0 ? p.concurrency : p.rate
@@ -77,7 +81,7 @@ const xTicks = computed(() => [...new Set(allPts.value.map((p) => p.x))].sort((a
         <circle v-for="(p, pi) in l.pts" :key="pi" :cx="px(p.x)" :cy="py(p.y)" r="3" :fill="l.color" />
       </g>
       <text v-for="x in xTicks" :key="x" :x="px(x)" :y="H - PAD_B + 12" text-anchor="middle" class="fill-muted-foreground" style="font-size: 9px">{{ x }}</text>
-      <text :x="(PAD_L + W - PAD_R) / 2" :y="H - 2" text-anchor="middle" class="fill-muted-foreground" style="font-size: 9px">{{ xLabel }}</text>
+      <text :x="(PAD_L + W - PAD_R) / 2" :y="H - 2" text-anchor="middle" class="fill-muted-foreground" style="font-size: 9px">{{ displayXLabel }}</text>
     </svg>
   </div>
 </template>
diff --git a/apps/frontend_llmops/src/components/PerfSweepChart.vue b/apps/frontend_llmops/src/components/PerfSweepChart.vue
index 64cebba..bfa707f 100644
--- a/apps/frontend_llmops/src/components/PerfSweepChart.vue
+++ b/apps/frontend_llmops/src/components/PerfSweepChart.vue
@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import type { PerfPoint } from '@/types/api'
 
+const { t } = useI18n()
+
 const props = withDefaults(
   defineProps<{
     points: PerfPoint[]
@@ -11,8 +14,9 @@ const props = withDefaults(
     format?: (v: number) => string
     xLabel?: string
   }>(),
-  { color: 'var(--chart-1)', format: (v: number) => `${Math.round(v)}`, xLabel: '並發' },
+  { color: 'var(--chart-1)', format: (v: number) => `${Math.round(v)}` },
 )
+const displayXLabel = computed(() => props.xLabel ?? t('benchmark.tableParallel'))
 
 // x = concurrency for closed-loop; for open-loop (concurrency = -1) fall back to rate.
 function xVal(p: PerfPoint): number | null {
@@ -73,7 +77,7 @@ const yTicks = computed(() => [0, 0.5, 1].map((f) => ({ v: yMax.value * f, y: py
         </text>
       </g>
       <text :x="(PAD_L + W - PAD_R) / 2" :y="H - 2" text-anchor="middle" class="fill-muted-foreground" style="font-size: 9px">
-        {{ xLabel }}
+        {{ displayXLabel }}
       </text>
     </svg>
   </div>
diff --git a/apps/frontend_llmops/src/components/RouterFanDiagram.vue b/apps/frontend_llmops/src/components/RouterFanDiagram.vue
index 637f808..abac0ea 100644
--- a/apps/frontend_llmops/src/components/RouterFanDiagram.vue
+++ b/apps/frontend_llmops/src/components/RouterFanDiagram.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { VueFlow, useVueFlow, Handle, Position, type Edge, type Node } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import '@vue-flow/core/dist/style.css'
@@ -16,6 +17,7 @@ import type { InstanceMetrics, ModelState, ModelView } from '@/types/api'
 const props = defineProps<{ group: string }>()
 const traffic = useTrafficStore()
 const models = useModelsStore()
+const { t } = useI18n()
 
 const STEP = 196 // horizontal spacing between instance nodes
 const NODE_W = 150
@@ -189,28 +191,28 @@ watch(
   >
     <StatusDot state="stopped" />
     <span class="text-sm font-medium">{{ group }}</span>
-    <Badge variant="muted">{{ instances.length }} instances</Badge>
+    <Badge variant="muted">{{ $t('routerFan.instancesCount', { n: instances.length }) }}</Badge>
     <span
       class="flex items-center gap-1 text-[11px]"
       :class="kvShared ? 'text-[var(--chart-4)]' : 'text-muted-foreground/70'"
-      :title="kvShared ? '此群組各副本共用 KV cache（/kv_cache）' : '各副本各自獨立 KV cache'"
+      :title="kvShared ? $t('routerFan.kvSharedTooltip') : $t('routerFan.kvIndependentTooltip')"
     >
-      <component :is="kvShared ? Share2 : Unlink" class="size-3" />{{ kvShared ? '共用 KV' : '各自 KV' }}
+      <component :is="kvShared ? Share2 : Unlink" class="size-3" />{{ kvShared ? $t('routerFan.kvShared') : $t('routerFan.kvIndependent') }}
     </span>
-    <span class="ml-auto text-xs text-muted-foreground">idle — no instance running</span>
+    <span class="ml-auto text-xs text-muted-foreground">{{ $t('routerFan.idleHint') }}</span>
   </div>
 
   <!-- Live group: Vue Flow routing canvas. -->
   <div v-else class="rounded-lg border border-border/50 bg-background/20">
     <div class="flex items-center gap-2 px-3 pt-3">
       <span class="text-sm font-medium">{{ group }}</span>
-      <Badge variant="ready" class="tabular">{{ readyCount }}/{{ instances.length }} ready</Badge>
+      <Badge variant="ready" class="tabular">{{ $t('routerFan.readyCount', { ready: readyCount, total: instances.length }) }}</Badge>
       <span
         class="flex items-center gap-1 text-[11px]"
         :class="kvShared ? 'text-[var(--chart-4)]' : 'text-muted-foreground/70'"
-        :title="kvShared ? '此群組各副本共用 KV cache（/kv_cache）' : '各副本各自獨立 KV cache'"
+        :title="kvShared ? $t('routerFan.kvSharedTooltip') : $t('routerFan.kvIndependentTooltip')"
       >
-        <component :is="kvShared ? Share2 : Unlink" class="size-3" />{{ kvShared ? '共用 KV' : '各自 KV' }}
+        <component :is="kvShared ? Share2 : Unlink" class="size-3" />{{ kvShared ? $t('routerFan.kvShared') : $t('routerFan.kvIndependent') }}
       </span>
     </div>
     <div class="h-[260px] w-full">
@@ -264,14 +266,14 @@ watch(
             </div>
             <template v-if="data.serving && data.im">
               <p class="mt-1 text-[11px] text-muted-foreground tabular">
-                run {{ data.im.running }} · wait {{ data.im.waiting }}
+                {{ $t('common.running') }} {{ data.im.running }} · {{ $t('routerFan.waiting') }} {{ data.im.waiting }}
               </p>
               <p class="text-[11px] text-muted-foreground tabular">
                 kv {{ formatPercent(data.im.kv_cache_usage_perc * 100) }} · score
                 {{ data.score?.toFixed(0) }}
               </p>
               <p v-if="data.preferred" class="mt-0.5 text-[10px] font-medium text-[var(--chart-1)]">
-                ★ next pick
+                ★ {{ $t('routerFan.nextPick') }}
               </p>
             </template>
             <p v-else class="mt-1 text-[11px] capitalize text-muted-foreground/70">{{ data.state }}</p>
@@ -284,7 +286,7 @@ watch(
             class="flex items-center gap-1.5 rounded-lg border border-dashed border-[var(--chart-4)]/60 bg-[var(--chart-4)]/5 px-3 py-1.5 text-[11px] font-medium text-[var(--chart-4)]"
           >
             <Handle type="target" :position="Position.Top" />
-            <Database class="size-3.5" />共用 KV Cache · /kv_cache
+            <Database class="size-3.5" />{{ $t('routerFan.kvStoreLabel') }}
           </div>
         </template>
       </VueFlow>
diff --git a/apps/frontend_llmops/src/components/SystemTopology.vue b/apps/frontend_llmops/src/components/SystemTopology.vue
index 6faaaee..6a42eee 100644
--- a/apps/frontend_llmops/src/components/SystemTopology.vue
+++ b/apps/frontend_llmops/src/components/SystemTopology.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { VueFlow, useVueFlow, Handle, Position, type Edge, type Node, type NodeMouseEvent } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
 import { Controls } from '@vue-flow/controls'
@@ -23,6 +24,7 @@ const models = useModelsStore()
 const resources = useResourcesStore()
 const traffic = useTrafficStore()
 const router = useRouter()
+const { t } = useI18n()
 
 // Nodes act as drill-in entry points to the relevant page.
 function onNodeClick({ node }: NodeMouseEvent) {
@@ -357,20 +359,20 @@ function miniColor(node: Node) {
   <div class="rounded-xl border border-border/70 bg-card">
     <!-- Header + legend + plane toggles -->
     <div class="flex flex-wrap items-center gap-x-4 gap-y-2 border-b border-border/60 px-5 py-3">
-      <h3 class="text-sm font-semibold">系統拓撲</h3>
-      <span class="hidden text-[11px] text-muted-foreground sm:inline">· 點擊節點可深入查看</span>
+      <h3 class="text-sm font-semibold">{{ $t('systemTopology.title') }}</h3>
+      <span class="hidden text-[11px] text-muted-foreground sm:inline">{{ $t('systemTopology.clickHint') }}</span>
       <div class="flex items-center gap-3 text-[11px] text-muted-foreground">
-        <span class="flex items-center gap-1"><span class="h-0.5 w-4 rounded bg-[var(--chart-1)]" />資料</span>
-        <span class="flex items-center gap-1"><span class="h-0.5 w-4 rounded bg-[var(--chart-2)]" />部署</span>
-        <span class="flex items-center gap-1"><span class="h-0.5 w-4 rounded bg-[var(--chart-4)]" />控制</span>
+        <span class="flex items-center gap-1"><span class="h-0.5 w-4 rounded bg-[var(--chart-1)]" />{{ $t('systemTopology.dataPlane') }}</span>
+        <span class="flex items-center gap-1"><span class="h-0.5 w-4 rounded bg-[var(--chart-2)]" />{{ $t('systemTopology.placementPlane') }}</span>
+        <span class="flex items-center gap-1"><span class="h-0.5 w-4 rounded bg-[var(--chart-4)]" />{{ $t('systemTopology.controlPlane') }}</span>
         <span class="flex items-center gap-1"><span class="w-4 border-t border-dashed border-[var(--chart-3)]" />LoRA</span>
       </div>
       <div class="ml-auto flex items-center gap-1.5">
         <button
           v-for="t in [
-            { k: 'data', label: '資料', model: showData },
-            { k: 'placement', label: '部署', model: showPlacement },
-            { k: 'control', label: '控制', model: showControl },
+            { k: 'data', label: $t('systemTopology.dataPlane'), model: showData },
+            { k: 'placement', label: $t('systemTopology.placementPlane'), model: showPlacement },
+            { k: 'control', label: $t('systemTopology.controlPlane'), model: showControl },
             { k: 'lora', label: 'LoRA', model: showLora },
           ]"
           :key="t.k"
@@ -414,8 +416,8 @@ function miniColor(node: Node) {
             <Handle type="source" :position="Position.Right" />
             <Users class="size-4 text-[var(--chart-1)]" />
             <div class="text-left">
-              <p class="text-[12px] font-semibold leading-tight">用戶端</p>
-              <p class="text-[10px] text-muted-foreground tabular">{{ formatNumber(data.total) }} 請求</p>
+              <p class="text-[12px] font-semibold leading-tight">{{ $t('systemTopology.client') }}</p>
+              <p class="text-[10px] text-muted-foreground tabular">{{ formatNumber(data.total) }} {{ $t('systemTopology.requests') }}</p>
             </div>
           </div>
         </template>
@@ -427,11 +429,11 @@ function miniColor(node: Node) {
             <Handle type="source" :position="Position.Right" />
             <div class="flex items-center gap-1.5">
               <Server class="size-4 text-[var(--chart-1)]" />
-              <span class="text-[12px] font-semibold">路由器</span>
+              <span class="text-[12px] font-semibold">{{ $t('systemTopology.router') }}</span>
               <span class="text-[10px] text-muted-foreground">:8887</span>
             </div>
             <p class="text-[10px] text-muted-foreground tabular">
-              {{ formatPercent(data.errorRate) }} 錯誤
+              {{ formatPercent(data.errorRate) }} {{ $t('systemTopology.errors') }}
             </p>
           </div>
         </template>
@@ -443,10 +445,10 @@ function miniColor(node: Node) {
             <Handle type="source" :position="Position.Right" />
             <div class="flex items-center gap-1.5">
               <Settings2 class="size-4 text-[var(--chart-4)]" />
-              <span class="text-[12px] font-semibold">後端</span>
+              <span class="text-[12px] font-semibold">{{ $t('systemTopology.backend') }}</span>
               <span class="text-[10px] text-muted-foreground">:5000</span>
             </div>
-            <p class="text-[10px] text-muted-foreground tabular">{{ data.ready }}/{{ data.total }} 就緒</p>
+            <p class="text-[10px] text-muted-foreground tabular">{{ data.ready }}/{{ data.total }} {{ $t('common.ready') }}</p>
           </div>
         </template>
 
@@ -462,7 +464,7 @@ function miniColor(node: Node) {
               <span class="ml-auto text-[10px] text-muted-foreground tabular">{{ data.ready }}/{{ data.total }}</span>
             </div>
             <p class="text-[10px] text-muted-foreground tabular">
-              執行 {{ data.running }} · 等待 {{ data.waiting }}
+              {{ $t('common.running') }} {{ data.running }} · {{ $t('systemTopology.waiting') }} {{ data.waiting }}
               <span v-if="data.gpus.length"> · GPU {{ data.gpus.join(',') }}</span>
             </p>
             <p v-if="data.loras?.length" class="flex items-center gap-1 text-[10px] text-[var(--chart-3)]">
@@ -471,9 +473,9 @@ function miniColor(node: Node) {
             <p
               v-if="data.kvShared"
               class="flex items-center gap-1 text-[10px] text-[var(--chart-4)]"
-              title="此群組各副本共用 KV cache（/kv_cache）"
+              :title="$t('routerFan.kvSharedTooltip')"
             >
-              <Share2 class="size-3" />共用 KV cache
+              <Share2 class="size-3" />{{ $t('routerFan.kvShared') }}
             </p>
           </div>
         </template>
@@ -499,7 +501,7 @@ function miniColor(node: Node) {
             <div class="flex items-center gap-1.5">
               <StatusDot :state="data.state" size="sm" />
               <Box class="size-3.5 text-[var(--chart-4)]" />
-              <span class="text-[12px] font-semibold">嵌入</span>
+              <span class="text-[12px] font-semibold">{{ $t('common.embedding') }}</span>
               <span class="ml-auto text-[10px] text-muted-foreground">:{{ data.port }}</span>
             </div>
             <p class="text-[10px] capitalize text-muted-foreground">{{ data.state }}</p>
@@ -531,7 +533,7 @@ function miniColor(node: Node) {
                 {{ formatPercent(vramPct(data.info.memory_used, data.info.memory_total)) }} VRAM
               </p>
             </template>
-            <p v-else class="text-[10px] text-muted-foreground/70">已設定 · 未偵測到</p>
+            <p v-else class="text-[10px] text-muted-foreground/70">{{ $t('systemTopology.configuredUndetected') }}</p>
           </div>
         </template>
       </VueFlow>
diff --git a/apps/frontend_llmops/src/components/layout/StatusBar.vue b/apps/frontend_llmops/src/components/layout/StatusBar.vue
index 5d99953..4c8c95b 100644
--- a/apps/frontend_llmops/src/components/layout/StatusBar.vue
+++ b/apps/frontend_llmops/src/components/layout/StatusBar.vue
@@ -17,6 +17,12 @@ const resources = useResourcesStore()
 const { isDark, toggle } = useTheme()
 
 const title = computed(() => t('sidebar.' + ((route.meta.title as string) ?? 'overview')))
+const languageTitle = computed(() =>
+  currentLocale() === 'en' ? t('statusBar.switchToChinese') : t('statusBar.switchToEnglish'),
+)
+const updatedTitle = computed(() =>
+  models.lastUpdated ? t('statusBar.updatedAgo', { ago: timeAgo(models.lastUpdated / 1000) }) : '',
+)
 
 const connMeta = computed(() => {
   switch (models.conn) {
@@ -47,7 +53,7 @@ function toggleLocale() {
       <div
         v-if="resources.resources?.gpus.length"
         class="hidden items-center gap-2 rounded-md border border-border/60 bg-background/40 px-2.5 py-1 sm:flex"
-        title="Average GPU utilization"
+        :title="$t('statusBar.gpuUtilTitle')"
       >
         <span class="text-xs text-muted-foreground">{{ $t('statusBar.gpu') }}</span>
         <div class="h-1.5 w-16 overflow-hidden rounded-full bg-muted">
@@ -71,7 +77,7 @@ function toggleLocale() {
       <!-- Connection state -->
       <div
         class="flex items-center gap-1.5 rounded-md border border-border/60 bg-background/40 px-2.5 py-1 text-xs"
-        :title="models.lastUpdated ? `Updated ${timeAgo(models.lastUpdated / 1000)}` : ''"
+        :title="updatedTitle"
       >
         <component :is="connMeta.icon" class="size-3.5" :class="connMeta.cls" />
         <span :class="connMeta.cls">{{ connMeta.label }}</span>
@@ -84,7 +90,7 @@ function toggleLocale() {
       </Button>
 
       <!-- Language toggle -->
-      <Button variant="ghost" size="icon-sm" :title="currentLocale() === 'en' ? '切換至中文' : 'Switch to English'" @click="toggleLocale">
+      <Button variant="ghost" size="icon-sm" :title="languageTitle" @click="toggleLocale">
         <Languages class="size-4" />
       </Button>
     </div>
diff --git a/apps/frontend_llmops/src/composables/useModelControl.ts b/apps/frontend_llmops/src/composables/useModelControl.ts
index 3e99bf1..af02adf 100644
--- a/apps/frontend_llmops/src/composables/useModelControl.ts
+++ b/apps/frontend_llmops/src/composables/useModelControl.ts
@@ -1,4 +1,5 @@
 import { computed } from 'vue'
+import i18n from '@/i18n'
 import { useModelsStore } from '@/stores/models'
 import { toast } from '@/lib/toast'
 import { ApiError } from '@/lib/api'
@@ -14,6 +15,7 @@ type Action = 'start' | 'stop'
 export function useModelControl() {
   const models = useModelsStore()
   const { ensureUnlocked } = useAuth()
+  const t = i18n.global.t
 
   // Only one LLM may be in the `starting` phase at a time — loading two model
   // weights at once OOMs a single GPU. Multiple *ready* LLMs are fine, and
@@ -58,31 +60,43 @@ export function useModelControl() {
   async function runOne(key: string, action: Action, force = false) {
     const name = key.split('::')[0]
     if (action === 'start' && isStartBlocked(key)) {
-      toast.warning('一次只能啟動一顆模型', {
-        description: `「${startingLlmName()}」正在啟動中，請待其完成後再啟動 ${name}。`,
+      toast.warning(t('modelControl.oneAtATime'), {
+        description: t('modelControl.alreadyStarting', {
+          current: startingLlmName(),
+          name,
+        }),
       })
       return
     }
     try {
       if (action === 'start') {
         await models.start(key, force)
-        toast.success(`正在啟動 ${name}`, { description: '等待 /health 通過…' })
+        toast.success(t('modelControl.starting', { name }), {
+          description: t('modelControl.startingDesc'),
+        })
       } else {
         await models.stop(key)
-        toast.info(`正在停止 ${name}`, { description: '釋放 GPU 資源…' })
+        toast.info(t('modelControl.stopping', { name }), {
+          description: t('modelControl.stoppingDesc'),
+        })
       }
     } catch (e) {
       // A VRAM pre-flight block (409 mentioning force) gets a one-click override.
       if (action === 'start' && e instanceof ApiError && e.status === 409 && /force=true/i.test(e.message)) {
-        toast.warning(`${name}：VRAM 不足`, {
+        toast.warning(t('modelControl.vramInsufficient', { name }), {
           description: e.message,
           duration: 10000,
-          action: { label: '強制啟動', onClick: () => void runOne(key, 'start', true) },
+          action: { label: t('modelControl.forceStart'), onClick: () => void runOne(key, 'start', true) },
         })
         return
       }
       const msg = e instanceof ApiError ? `${e.status}: ${e.message}` : String(e)
-      toast.error(`${action === 'start' ? '啟動' : '停止'} ${name} 失敗`, { description: msg })
+      toast.error(
+        action === 'start'
+          ? t('modelControl.startFailed', { name })
+          : t('modelControl.stopFailed', { name }),
+        { description: msg },
+      )
     }
   }
 
diff --git a/apps/frontend_llmops/src/i18n/index.ts b/apps/frontend_llmops/src/i18n/index.ts
index a875349..0621ace 100644
--- a/apps/frontend_llmops/src/i18n/index.ts
+++ b/apps/frontend_llmops/src/i18n/index.ts
@@ -6,6 +6,7 @@ const STORAGE_KEY = 'llmops-locale'
 
 const i18n = createI18n({
   legacy: false,
+  globalInjection: true,
   locale: localStorage.getItem(STORAGE_KEY) || 'en',
   fallbackLocale: 'en',
   messages: { en, 'zh-TW': zhTW },
diff --git a/apps/frontend_llmops/src/i18n/locales/en.ts b/apps/frontend_llmops/src/i18n/locales/en.ts
index 9979c2c..9637009 100644
--- a/apps/frontend_llmops/src/i18n/locales/en.ts
+++ b/apps/frontend_llmops/src/i18n/locales/en.ts
@@ -82,6 +82,10 @@ export default {
     ready: 'ready',
     switchLight: 'Switch to light',
     switchDark: 'Switch to dark',
+    switchToChinese: 'Switch to Chinese',
+    switchToEnglish: 'Switch to English',
+    gpuUtilTitle: 'Average GPU utilization',
+    updatedAgo: 'Updated {ago}',
     live: 'Live',
     polling: 'Polling',
     connecting: 'Connecting',
@@ -594,12 +598,25 @@ export default {
     embCurlLabel: 'Embedding · cURL',
     embPyLabel: 'Embedding · Python',
     rerankCurlLabel: 'Rerank · cURL',
+    samplePrompt: 'Write a one-sentence summary of the moon landing.',
+    sampleInputA: 'The quick brown fox',
+    sampleInputB: 'A lazy dog sleeps',
+    sampleQuery: 'Which passage is more relevant to the question?',
+    sampleDocA: 'Passage A',
+    sampleDocB: 'Passage B',
+    routerNoAuthComment: 'Router does not validate the API key',
+    streamComment: 'stream raw SSE `data:` frames',
+    modelsComment: 'Items with a `parent` field are LoRA adapters; the parent is the base model.',
+    loraListComment: 'Pass any listed item in the chat request `model` field',
+    vectorLengthComment: 'vector length',
+    rerankComment: 'Including the query field switches the endpoint into rerank mode and returns a relevance score for each candidate.',
   },
 
   // ---- Resources ----
   resources: {
     cpu: 'CPU',
     memory: 'Memory',
+    memorySummary: '{used} used / {total} total · {available} available',
     gpuProcesses: 'GPU Processes',
     gpuProcessesDesc: 'Processes using GPU memory (updates ~every 5s)',
     tablePid: 'PID',
@@ -844,6 +861,43 @@ export default {
     kvSharedTooltip: 'Replicas in this group share KV cache (/kv_cache)',
     kvIndependentTooltip: 'Each replica has independent KV cache',
     kvStoreLabel: 'Shared KV Cache · /kv_cache',
+    instancesCount: '{n} instances',
+    idleHint: 'idle — no instance running',
+    readyCount: '{ready}/{total} ready',
+    waiting: 'Waiting',
+  },
+
+  systemTopology: {
+    title: 'System Topology',
+    clickHint: '· Click a node to drill in',
+    dataPlane: 'Data',
+    placementPlane: 'Placement',
+    controlPlane: 'Control',
+    client: 'Client',
+    requests: 'requests',
+    router: 'Router',
+    errors: 'errors',
+    backend: 'Backend',
+    waiting: 'Waiting',
+    configuredUndetected: 'Configured · not detected',
+  },
+
+  modelControl: {
+    oneAtATime: 'Only one model can start at a time',
+    alreadyStarting: '"{current}" is already starting, please wait before starting {name}.',
+    starting: 'Starting {name}',
+    startingDesc: 'Waiting for /health to pass…',
+    stopping: 'Stopping {name}',
+    stoppingDesc: 'Releasing GPU resources…',
+    vramInsufficient: '{name}: insufficient VRAM',
+    forceStart: 'Force start',
+    startFailed: 'Failed to start {name}',
+    stopFailed: 'Failed to stop {name}',
+    title: 'Admin verification',
+    description: 'This operation requires an admin token (backend LLMOPS_ADMIN_TOKEN).',
+    tokenPlaceholder: 'Admin token',
+    tokenInvalid: 'Token invalid.',
+    confirm: 'Confirm',
   },
 
   // ---- GpuGauge ----
@@ -939,15 +993,6 @@ export default {
     noMatchingSamples: 'No matching samples.',
   },
 
-  // ---- ModelControlDialog (Admin token) ----
-  modelControl: {
-    title: 'Admin verification',
-    description: 'This operation requires an admin token (backend LLMOPS_ADMIN_TOKEN).',
-    tokenPlaceholder: 'Admin token',
-    tokenInvalid: 'Token invalid.',
-    confirm: 'Confirm',
-  },
-
   // ---- PerfSweepChart / PerfCompareChart ----
   perfChart: {
     noData: 'No data',
diff --git a/apps/frontend_llmops/src/i18n/locales/zh-TW.ts b/apps/frontend_llmops/src/i18n/locales/zh-TW.ts
index 4ecea1f..60239f2 100644
--- a/apps/frontend_llmops/src/i18n/locales/zh-TW.ts
+++ b/apps/frontend_llmops/src/i18n/locales/zh-TW.ts
@@ -24,7 +24,7 @@ export default {
     models: '模型',
     status: '狀態',
     latency: '延遲',
-    tokens: 'Tokens',
+    tokens: 'Token 數',
     time: '時間',
     path: '路徑',
     cost: '成本',
@@ -79,6 +79,10 @@ export default {
     ready: '就緒',
     switchLight: '切換至淺色',
     switchDark: '切換至深色',
+    switchToChinese: '切換至中文',
+    switchToEnglish: '切換至英文',
+    gpuUtilTitle: 'GPU 平均使用率',
+    updatedAgo: '更新於 {ago}',
     live: '即時',
     polling: '輪詢',
     connecting: '連線中',
@@ -153,10 +157,10 @@ export default {
   requests: {
     searchPlaceholder: '搜尋模型 / 路徑 / 金鑰…',
     errorsOnly: '僅錯誤',
-    costPerMTok: '$/1M tokens',
+    costPerMTok: '每百萬 tokens 成本',
     recent: '最近 {n}',
     requestCount: '請求數',
-    totalTokens: '總 tokens',
+    totalTokens: '總 Token 數',
     errorRate: '錯誤率',
     estimatedCost: '估算成本',
     tableTime: '時間',
@@ -164,7 +168,7 @@ export default {
     tablePath: '路徑',
     tableStatus: '狀態',
     tableLatency: '延遲',
-    tableTokens: 'tokens',
+    tableTokens: 'Token 數',
     tableCost: '成本',
     tableKey: '金鑰',
     noRecords: '尚無請求紀錄。',
@@ -578,11 +582,24 @@ export default {
     embCurlLabel: 'Embedding · cURL',
     embPyLabel: 'Embedding · Python',
     rerankCurlLabel: 'Rerank · cURL',
+    samplePrompt: '請用一句話總結登月。',
+    sampleInputA: '敏捷的棕狐跳過圍欄',
+    sampleInputB: '慵懶的狗正在打盹',
+    sampleQuery: '哪一段更符合這個問題？',
+    sampleDocA: '段落 A',
+    sampleDocB: '段落 B',
+    routerNoAuthComment: 'Router 不會驗證 API key',
+    streamComment: '直接輸出原始 SSE `data:` frame',
+    modelsComment: '有 `parent` 欄位的項目就是 LoRA，父模型即為它所掛載的 base。',
+    loraListComment: '把列出的名稱放進聊天請求的 `model` 欄位即可',
+    vectorLengthComment: '向量長度',
+    rerankComment: '帶上 query 欄位後，端點會切成 rerank 模式，回傳每個候選的相關性分數。',
   },
 
   resources: {
     cpu: '處理器',
     memory: '記憶體',
+    memorySummary: '已用 {used} / 總計 {total} · 可用 {available}',
     gpuProcesses: 'GPU 程序',
     gpuProcessesDesc: '佔用 GPU 記憶體的程序（約每 5 秒更新）',
     tablePid: 'PID',
@@ -820,6 +837,43 @@ export default {
     kvSharedTooltip: '此群組各副本共用 KV cache（/kv_cache）',
     kvIndependentTooltip: '各副本各自獨立 KV cache',
     kvStoreLabel: '共用 KV Cache · /kv_cache',
+    instancesCount: '{n} 個實例',
+    idleHint: '閒置中 — 沒有執行中的實例',
+    readyCount: '{ready}/{total} 就緒',
+    waiting: '等待',
+  },
+
+  systemTopology: {
+    title: '系統拓撲',
+    clickHint: '· 點擊節點可深入查看',
+    dataPlane: '資料',
+    placementPlane: '部署',
+    controlPlane: '控制',
+    client: '用戶端',
+    requests: '請求',
+    router: '路由器',
+    errors: '錯誤',
+    backend: '後端',
+    waiting: '等待',
+    configuredUndetected: '已設定 · 未偵測到',
+  },
+
+  modelControl: {
+    oneAtATime: '一次只能啟動一顆模型',
+    alreadyStarting: '「{current}」正在啟動中，請待其完成後再啟動 {name}。',
+    starting: '正在啟動 {name}',
+    startingDesc: '等待 /health 通過…',
+    stopping: '正在停止 {name}',
+    stoppingDesc: '釋放 GPU 資源…',
+    vramInsufficient: '{name}：VRAM 不足',
+    forceStart: '強制啟動',
+    startFailed: '啟動 {name} 失敗',
+    stopFailed: '停止 {name} 失敗',
+    title: '管理員驗證',
+    description: '此操作需要管理員權杖（後端 LLMOPS_ADMIN_TOKEN）。',
+    tokenPlaceholder: '管理員權杖',
+    tokenInvalid: '權杖無效。',
+    confirm: '確認',
   },
 
   gpuGauge: {
@@ -908,14 +962,6 @@ export default {
     noMatchingSamples: '沒有符合的題目。',
   },
 
-  modelControl: {
-    title: '管理員驗證',
-    description: '此操作需要管理員權杖（後端 LLMOPS_ADMIN_TOKEN）。',
-    tokenPlaceholder: '管理員權杖',
-    tokenInvalid: '權杖無效。',
-    confirm: '確認',
-  },
-
   perfChart: {
     noData: '無資料',
     concurrency: '並發',
diff --git a/apps/frontend_llmops/src/lib/routingStrategies.ts b/apps/frontend_llmops/src/lib/routingStrategies.ts
index a09cee6..6590c62 100644
--- a/apps/frontend_llmops/src/lib/routingStrategies.ts
+++ b/apps/frontend_llmops/src/lib/routingStrategies.ts
@@ -1,3 +1,5 @@
+import i18n from '@/i18n'
+
 /** Router load-balancing strategies — shared by the Traffic page selector and the
  *  model edit dialog. Keep in sync with router-server's STRATEGIES registry
  *  (apps/router-server/src/llm_router/routing_strategies.py).
@@ -14,14 +16,8 @@ export const ROUTING_STRATEGIES = [
 
 export type RoutingStrategy = (typeof ROUTING_STRATEGIES)[number]
 
-export const ROUTING_STRATEGY_LABELS: Record<string, string> = {
-  least_load: '最低負載（預設）',
-  round_robin: '輪詢',
-  random: '隨機',
-  least_inflight: '最少進行中',
-  p2c: '二選一取優',
-  session_affinity: '會話黏性',
-  prefix_affinity: '前綴黏性',
+export const routingStrategyLabel = (s: string) => {
+  const key = `routingStrategies.${s}`
+  const label = i18n.global.t(key)
+  return label === key ? s : label
 }
-
-export const routingStrategyLabel = (s: string) => ROUTING_STRATEGY_LABELS[s] ?? s
diff --git a/apps/frontend_llmops/src/lib/utils.ts b/apps/frontend_llmops/src/lib/utils.ts
index 8ca370a..25478e7 100644
--- a/apps/frontend_llmops/src/lib/utils.ts
+++ b/apps/frontend_llmops/src/lib/utils.ts
@@ -1,6 +1,7 @@
 import type { ClassValue } from "clsx"
 import { clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
+import { currentLocale } from '@/i18n'
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
@@ -51,17 +52,19 @@ export function formatPercent(n: number | null | undefined): string {
 export function timeAgo(unixSeconds: number | null | undefined): string {
   if (unixSeconds == null) return '—'
   const diff = Date.now() / 1000 - unixSeconds
-  if (diff < 5) return 'just now'
-  if (diff < 60) return `${Math.floor(diff)}s ago`
-  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`
-  if (diff < 86400) return `${Math.floor(diff / 3600)}h ago`
-  return `${Math.floor(diff / 86400)}d ago`
+  const zh = currentLocale().startsWith('zh')
+  if (diff < 5) return zh ? '剛剛' : 'just now'
+  if (diff < 60) return zh ? `${Math.floor(diff)} 秒前` : `${Math.floor(diff)}s ago`
+  if (diff < 3600) return zh ? `${Math.floor(diff / 60)} 分前` : `${Math.floor(diff / 60)}m ago`
+  if (diff < 86400) return zh ? `${Math.floor(diff / 3600)} 小時前` : `${Math.floor(diff / 3600)}h ago`
+  return zh ? `${Math.floor(diff / 86400)} 天前` : `${Math.floor(diff / 86400)}d ago`
 }
 
 /** Clock time (HH:MM:SS) from Unix seconds. */
 export function formatTime(unixSeconds: number | null | undefined): string {
   if (unixSeconds == null) return '—'
-  return new Date(unixSeconds * 1000).toLocaleTimeString('en-GB')
+  const locale = currentLocale().startsWith('zh') ? 'zh-TW' : 'en-GB'
+  return new Date(unixSeconds * 1000).toLocaleTimeString(locale)
 }
 
 /** Duration between two Unix-seconds stamps as e.g. "1m 34s". */
diff --git a/apps/frontend_llmops/src/views/ActivityView.vue b/apps/frontend_llmops/src/views/ActivityView.vue
index 796d9ff..b2f6609 100644
--- a/apps/frontend_llmops/src/views/ActivityView.vue
+++ b/apps/frontend_llmops/src/views/ActivityView.vue
@@ -49,13 +49,13 @@ const stateColor: Record<string, string> = {
         v-model="filter"
         class="h-8 rounded-md border border-input bg-background/40 px-2 text-xs"
       >
-        <option value="">全部模型</option>
+        <option value="">{{ $t('common.allModels') }}</option>
         <option v-for="m in models.models" :key="m.key" :value="m.key.split('::')[0]">
           {{ m.key.split('::')[0] }}
         </option>
       </select>
-      <span class="text-sm text-muted-foreground tabular">{{ filtered.length }} 個事件</span>
-      <Button variant="outline" size="sm" class="ml-auto" @click="load"><RefreshCw class="size-3.5" />重新整理</Button>
+      <span class="text-sm text-muted-foreground tabular">{{ $t('activity.eventCount', { n: filtered.length }) }}</span>
+      <Button variant="outline" size="sm" class="ml-auto" @click="load"><RefreshCw class="size-3.5" />{{ $t('common.refresh') }}</Button>
     </div>
 
     <Card>
@@ -80,7 +80,7 @@ const stateColor: Record<string, string> = {
               {{ ev.detail }}
             </p>
           </li>
-          <li v-if="!filtered.length" class="text-sm text-muted-foreground">尚無事件記錄。</li>
+          <li v-if="!filtered.length" class="text-sm text-muted-foreground">{{ $t('activity.noEvents') }}</li>
         </ol>
       </CardContent>
     </Card>
diff --git a/apps/frontend_llmops/src/views/BenchmarkView.vue b/apps/frontend_llmops/src/views/BenchmarkView.vue
index d77f541..c3e371f 100644
--- a/apps/frontend_llmops/src/views/BenchmarkView.vue
+++ b/apps/frontend_llmops/src/views/BenchmarkView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { Check, ChevronDown, ExternalLink, Gauge, Loader2, Play, Plus, Square, Trash2, X } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import { api, ApiError } from '@/lib/api'
 import { useModelsStore } from '@/stores/models'
 import { lorasOfGroup } from '@/composables/useModelOptions'
@@ -18,6 +19,7 @@ import type { CompareSeries } from '@/components/PerfCompareChart.vue'
 
 const models = useModelsStore()
 const { ensureUnlocked } = useAuth()
+const { t } = useI18n()
 
 // ---- config form ----
 const groups = computed(() => [...new Set(models.llms.map((m) => m.key.split('::')[0] ?? m.key))])
@@ -32,13 +34,13 @@ const dataset = ref<'random' | 'openqa'>('random')
 const endpoint = ref<'chat' | 'completions'>('chat')
 const mode = ref<'sweep' | 'openloop' | 'multiturn' | 'sla' | 'embedding' | 'rerank' | 'speed'>('sweep')
 const MODES = [
-  { v: 'sweep', label: '並發 Sweep' },
-  { v: 'openloop', label: '速率 Open-loop' },
-  { v: 'multiturn', label: '多輪對話' },
-  { v: 'sla', label: 'SLA 調優' },
-  { v: 'speed', label: '速度基準' },
-  { v: 'embedding', label: '嵌入 Embedding' },
-  { v: 'rerank', label: '重排序 Rerank' },
+  { v: 'sweep', label: 'benchmark.modeSweep' },
+  { v: 'openloop', label: 'benchmark.modeOpenloop' },
+  { v: 'multiturn', label: 'benchmark.modeMultiturn' },
+  { v: 'sla', label: 'benchmark.modeSla' },
+  { v: 'speed', label: 'benchmark.modeSpeed' },
+  { v: 'embedding', label: 'benchmark.modeEmbedding' },
+  { v: 'rerank', label: 'benchmark.modeRerank' },
 ] as const
 const isEmbedMode = computed(() => mode.value === 'embedding' || mode.value === 'rerank')
 // Embedding/rerank server + served-model picker (mirrors the Playground logic).
@@ -87,14 +89,14 @@ const slaUpper = ref(32)
 const slaNumRuns = ref(1)
 const slaFixedParallel = ref(10)
 const SLA_METRICS = [
-  { v: 'p99_latency', label: 'p99 延遲 (s)' },
-  { v: 'avg_latency', label: '平均延遲 (s)' },
-  { v: 'p99_ttft', label: 'p99 TTFT (ms)' },
-  { v: 'avg_ttft', label: '平均 TTFT (ms)' },
-  { v: 'p99_tpot', label: 'p99 TPOT (ms)' },
-  { v: 'avg_tpot', label: '平均 TPOT (ms)' },
-  { v: 'rps', label: 'RPS (req/s)' },
-  { v: 'tps', label: '輸出 tok/s' },
+  { v: 'p99_latency', label: 'benchmark.slaMetrics.p99_latency' },
+  { v: 'avg_latency', label: 'benchmark.slaMetrics.avg_latency' },
+  { v: 'p99_ttft', label: 'benchmark.slaMetrics.p99_ttft' },
+  { v: 'avg_ttft', label: 'benchmark.slaMetrics.avg_ttft' },
+  { v: 'p99_tpot', label: 'benchmark.slaMetrics.p99_tpot' },
+  { v: 'avg_tpot', label: 'benchmark.slaMetrics.avg_tpot' },
+  { v: 'rps', label: 'benchmark.slaMetrics.rps' },
+  { v: 'tps', label: 'benchmark.slaMetrics.tps' },
 ]
 const SLA_OPS = ['<=', '<', '>=', '>', 'max', 'min']
 function addCondition() {
@@ -174,7 +176,7 @@ async function select(id: number) {
     points.value = r.points
     sla.value = r.sla
   } catch (e) {
-    toast.error('無法載入結果', { description: String(e) })
+    toast.error(t('benchmark.loadResultFailed'), { description: String(e) })
   }
   await loadLog()
 }
@@ -201,7 +203,7 @@ async function loadLog() {
 function instanceTargetInvalid(): boolean {
   if (target.value !== 'instance') return false
   if (instanceOptions.value.find((o) => o.key === instanceKey.value)?.ready) return false
-  toast.error('該實例尚未就緒，無法直連')
+  toast.error(t('benchmark.instanceNotReady'))
   return true
 }
 
@@ -228,7 +230,7 @@ async function launch() {
   let req: PerfRequest
   if (mode.value === 'sla') {
     if (!slaConditions.value.length) {
-      toast.error('請至少加入一個 SLA 條件')
+      toast.error(t('benchmark.addSlaCondition'))
       return
     }
     req = {
@@ -245,13 +247,13 @@ async function launch() {
     }
   } else if (mode.value === 'openloop') {
     if (!rates.value.length) {
-      toast.error('請輸入至少一個速率')
+      toast.error(t('benchmark.enterRate'))
       return
     }
     req = { ...common, rate: rates.value, number: rates.value.map(() => reqPerPoint.value), duration: durationSec.value || undefined }
   } else if (mode.value === 'multiturn') {
     if (!mtConcurrent.value.length) {
-      toast.error('請輸入至少一個並發對話數')
+      toast.error(t('benchmark.enterMtConcurrent'))
       return
     }
     req = {
@@ -267,7 +269,7 @@ async function launch() {
     }
   } else {
     if (!parallel.value.length) {
-      toast.error('請輸入至少一個並發數')
+      toast.error(t('benchmark.enterParallel'))
       return
     }
     req = {
@@ -282,11 +284,11 @@ async function launch() {
 
 async function launchEmbedding() {
   if (!embModel.value) {
-    toast.error('請選擇一個模型')
+    toast.error(t('benchmark.selectModel'))
     return
   }
   if (!parallel.value.length) {
-    toast.error('請輸入至少一個並發數')
+    toast.error(t('benchmark.enterParallel'))
     return
   }
   const req: PerfRequest = {
@@ -309,7 +311,7 @@ async function launchEmbedding() {
 
 async function launchSpeed() {
   if (!model.value) {
-    toast.error('請選擇一個模型')
+    toast.error(t('benchmark.selectModel'))
     return
   }
   if (instanceTargetInvalid()) return
@@ -335,11 +337,15 @@ async function submit(req: PerfRequest) {
   launching.value = true
   try {
     const run = await api.startPerf(req)
-    toast.success(`已開始壓測 #${run.id}`, { description: '可離開此頁，背景持續執行。' })
+    toast.success(t('benchmark.startedToast', { id: run.id }), {
+      description: t('benchmark.startedDesc'),
+    })
     await loadRuns()
     await select(run.id)
   } catch (e) {
-    toast.error('無法開始壓測', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('benchmark.startFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   } finally {
     launching.value = false
   }
@@ -357,7 +363,7 @@ async function toggleCompare(id: number) {
     return
   }
   if (compareIds.value.length >= COMPARE_COLORS.length) {
-    toast.error(`最多比較 ${COMPARE_COLORS.length} 筆`)
+    toast.error(t('benchmark.compareMax', { n: COMPARE_COLORS.length }))
     return
   }
   compareIds.value.push(id)
@@ -367,7 +373,7 @@ async function toggleCompare(id: number) {
       compareData.value[id] = { run, points: parseResult(run.result).points }
     } catch {
       compareIds.value.splice(compareIds.value.indexOf(id), 1)
-      toast.error('無法載入比較資料')
+      toast.error(t('benchmark.compareLoadFailed'))
     }
   }
 }
@@ -381,27 +387,29 @@ const compareSeries = computed<CompareSeries[]>(() =>
     .filter((s): s is CompareSeries => s != null),
 )
 const compareXLabel = computed(() =>
-  compareIds.value.some((id) => compareData.value[id]?.run.params?.includes('"openloop"')) ? '速率' : '並發',
+  compareIds.value.some((id) => compareData.value[id]?.run.params?.includes('"openloop"'))
+    ? t('benchmark.tableRate')
+    : t('benchmark.tableParallel'),
 )
 
 // Runs we've asked to stop — shows a 'stopping…' state and reveals force-kill.
 const cancelling = ref<Set<number>>(new Set())
 async function cancel(id: number, force = false) {
-  if (force && !confirm(`強制終止壓測 #${id}？將立即 SIGKILL,結果會作廢。`)) return
+  if (force && !confirm(t('benchmark.forceConfirm', { id }))) return
   try {
     await api.cancelPerf(id, force)
     cancelling.value = new Set(cancelling.value).add(id)
-    toast.info(force ? '已強制終止' : '停止中…', {
-      description: force ? undefined : '正在停止,最多約 10 秒;仍卡住可按「強制」。',
+    toast.info(force ? t('benchmark.forceKill') : t('benchmark.stoppingBadge'), {
+      description: force ? undefined : t('benchmark.stoppingHint'),
     })
     await loadRuns()
   } catch (e) {
-    toast.error('取消失敗', { description: String(e) })
+    toast.error(t('benchmark.cancelFailed'), { description: String(e) })
   }
 }
 
 async function remove(id: number) {
-  if (!confirm(`刪除壓測 #${id}？`)) return
+  if (!confirm(t('benchmark.deleteConfirm', { id }))) return
   try {
     await api.deletePerf(id)
     if (selectedId.value === id) { selectedId.value = null; selected.value = null; points.value = [] }
@@ -410,7 +418,7 @@ async function remove(id: number) {
     delete compareData.value[id]
     await loadRuns()
   } catch (e) {
-    toast.error('刪除失敗', { description: String(e) })
+    toast.error(t('benchmark.deleteFailed'), { description: String(e) })
   }
 }
 
@@ -457,12 +465,29 @@ const aggregates = computed(() => {
 })
 const isOpenLoop = computed(() => parsedParams.value.mode === 'openloop')
 const isEmbedResult = computed(() => parsedParams.value.mode === 'embedding' || parsedParams.value.mode === 'rerank')
+const speedLengths = computed(() =>
+  speedLong.value ? t('benchmark.speedLengthsLong') : t('benchmark.speedLengthsShort'),
+)
+const statusLabel = (status: string) => {
+  const map: Record<string, string> = {
+    running: t('common.running'),
+    completed: t('common.completed'),
+    failed: t('common.failed'),
+    cancelled: t('common.cancelled'),
+  }
+  return map[status] ?? status
+}
 const runModeLabel = computed(() => {
-  if (sla.value) return `SLA（${parsedParams.value.sla_variable ?? 'parallel'}）`
+  if (sla.value) {
+    return `SLA (${parsedParams.value.sla_variable === 'rate' ? t('benchmark.slaVarRate') : t('benchmark.slaVarParallel')})`
+  }
   return ({
-    embedding: '嵌入 Embedding', rerank: '重排序 Rerank',
-    openloop: '速率 Open-loop', multiturn: '多輪對話', speed: '速度基準',
-  } as Record<string, string>)[parsedParams.value.mode as string] ?? '並發 Sweep'
+    embedding: t('benchmark.modeEmbedding'),
+    rerank: t('benchmark.modeRerank'),
+    openloop: t('benchmark.modeOpenloop'),
+    multiturn: t('benchmark.modeMultiturn'),
+    speed: t('benchmark.modeSpeed'),
+  } as Record<string, string>)[parsedParams.value.mode as string] ?? t('benchmark.modeSweep')
 })
 const mtPoint = computed(() => points.value.find((p) => p.turns != null) ?? null)
 const expanded = ref<string | null>(null)
@@ -484,34 +509,34 @@ const statusColor: Record<string, string> = {
 <template>
   <div class="space-y-4 p-6">
     <div>
-      <h1 class="flex items-center gap-2 text-lg font-semibold"><Gauge class="size-5" />壓測</h1>
+      <h1 class="flex items-center gap-2 text-lg font-semibold"><Gauge class="size-5" />{{ $t('benchmark.title') }}</h1>
       <p class="mt-0.5 text-sm text-muted-foreground">
-        評測模型的「速度」（吞吐 / 延遲，與評測的答對率不同）。支援並發 sweep、速率 open-loop、多輪對話、SLA 自動調優，以及 embedding / rerank 吞吐與單請求速度基準。部分模式可先在
-        <RouterLink to="/datasets" class="text-[var(--chart-1)] underline">資料集庫</RouterLink>
-        下載資料集。
+        {{ $t('benchmark.description') }}
+        <RouterLink to="/datasets" class="text-[var(--chart-1)] underline">{{ $t('benchmark.datasetsLink') }}</RouterLink>
+        {{ $t('benchmark.descriptionEnd') }}
       </p>
     </div>
     <div class="grid gap-4 lg:grid-cols-[20rem_1fr]">
       <!-- Config -->
     <Card class="h-fit p-5">
-      <p class="mb-4 flex items-center gap-2 text-sm font-semibold"><Gauge class="size-4" />壓測設定</p>
+      <p class="mb-4 flex items-center gap-2 text-sm font-semibold"><Gauge class="size-4" />{{ $t('benchmark.configTitle') }}</p>
       <div class="space-y-3 text-sm">
         <label v-if="!isEmbedMode" class="block">
-          <span class="text-xs text-muted-foreground">模型</span>
+          <span class="text-xs text-muted-foreground">{{ $t('benchmark.modelLabel') }}</span>
           <select v-model="model" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
-            <option v-for="g in groups" :key="g" :value="g">{{ g }}{{ groupReady(g) ? '' : '（未啟動）' }}</option>
+            <option v-for="g in groups" :key="g" :value="g">{{ g }}{{ groupReady(g) ? '' : ` ${$t('benchmark.notStarted')}` }}</option>
             <optgroup v-if="loraOptions.length" label="LoRA">
               <option v-for="l in loraOptions" :key="l.value" :value="l.value">{{ l.group }} / {{ l.value }}</option>
             </optgroup>
           </select>
         </label>
         <label v-else class="block">
-          <span class="text-xs text-muted-foreground">{{ mode === 'rerank' ? '重排序模型' : '嵌入模型' }}</span>
+          <span class="text-xs text-muted-foreground">{{ mode === 'rerank' ? $t('benchmark.rerankModelLabel') : $t('benchmark.embModelLabel') }}</span>
           <select v-model="embModel" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
             <option v-for="m in embModels" :key="m" :value="m">{{ m }}</option>
           </select>
-          <p v-if="!embeddingServerReady" class="mt-1 text-[11px] text-status-failed">embedding server 未啟動，請先至「模型」頁啟動。</p>
-          <p v-else-if="!embModels.length" class="mt-1 text-[11px] text-muted-foreground">此模式無可用模型。</p>
+          <p v-if="!embeddingServerReady" class="mt-1 text-[11px] text-status-failed">{{ $t('benchmark.embNotStarted') }}</p>
+          <p v-else-if="!embModels.length" class="mt-1 text-[11px] text-muted-foreground">{{ $t('benchmark.noModelsForMode') }}</p>
         </label>
         <div class="grid grid-cols-2 gap-1 rounded-lg border border-border/60 bg-muted/40 p-0.5">
           <button
@@ -521,38 +546,38 @@ const statusColor: Record<string, string> = {
             :class="mode === m.v ? 'bg-background text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'"
             @click="mode = m.v"
           >
-            {{ m.label }}
+            {{ $t(m.label) }}
           </button>
         </div>
         <label class="block">
-          <span class="text-xs text-muted-foreground">目標</span>
+          <span class="text-xs text-muted-foreground">{{ $t('benchmark.targetLabel') }}</span>
           <select v-model="target" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
-            <option value="router">路由器（整體 + 負載平衡）</option>
-            <option value="instance">單一實例</option>
+            <option value="router">{{ $t('benchmark.targetRouter') }}</option>
+            <option value="instance">{{ $t('benchmark.targetInstance') }}</option>
           </select>
         </label>
         <label v-if="target === 'instance' && !isEmbedMode" class="block">
-          <span class="text-xs text-muted-foreground">實例</span>
+          <span class="text-xs text-muted-foreground">{{ $t('benchmark.instanceLabel') }}</span>
           <select v-model="instanceKey" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
             <option
               v-for="o in instanceOptions"
               :key="o.key"
               :value="o.key"
               :disabled="!o.ready"
-            >{{ o.key.split('::')[1] }}{{ o.ready ? '' : `（${o.state}・未就緒）` }}</option>
+            >{{ o.key.split('::')[1] }}{{ o.ready ? '' : ` (${o.state} - ${$t('benchmark.instanceNotReady')})` }}</option>
           </select>
         </label>
         <!-- Multi-turn / embedding / speed use their own dataset + endpoint. -->
         <div v-if="mode !== 'multiturn' && mode !== 'speed' && !isEmbedMode" class="grid grid-cols-2 gap-2">
           <label class="block">
-            <span class="text-xs text-muted-foreground">資料集</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.datasetLabel') }}</span>
             <select v-model="dataset" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
               <option value="random">random</option>
               <option value="openqa">openqa</option>
             </select>
           </label>
           <label class="block">
-            <span class="text-xs text-muted-foreground">端點</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.endpointLabel') }}</span>
             <select v-model="endpoint" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
               <option value="chat">chat</option>
               <option value="completions">completions</option>
@@ -562,16 +587,16 @@ const statusColor: Record<string, string> = {
         <!-- Sweep-specific -->
         <template v-if="mode === 'sweep'">
           <label class="block">
-            <span class="text-xs text-muted-foreground">並發點（逗號分隔，掃描）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.parallelLabel') }}</span>
             <Input v-model="parallelInput" placeholder="1,4,8,16" class="mt-1 font-mono" />
           </label>
           <div class="grid grid-cols-2 gap-2">
             <label class="block">
-              <span class="text-xs text-muted-foreground">每點請求數</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.reqPerPoint') }}</span>
               <Input v-model.number="reqPerPoint" type="number" min="1" class="mt-1" />
             </label>
             <label class="block">
-              <span class="text-xs text-muted-foreground">預熱比例</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.warmupRatio') }}</span>
               <Input v-model.number="warmup" type="number" min="0" step="0.1" class="mt-1" />
             </label>
           </div>
@@ -580,16 +605,16 @@ const statusColor: Record<string, string> = {
         <!-- Open-loop: arrival-rate sweep (Poisson; parallel ignored) -->
         <template v-else-if="mode === 'openloop'">
           <label class="block">
-            <span class="text-xs text-muted-foreground">速率（req/s，逗號分隔，掃描）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.rateLabel') }}</span>
             <Input v-model="rateInput" placeholder="5,10,20" class="mt-1 font-mono" />
           </label>
           <div class="grid grid-cols-2 gap-2">
             <label class="block">
-              <span class="text-xs text-muted-foreground">每速率請求數</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.reqPerRate') }}</span>
               <Input v-model.number="reqPerPoint" type="number" min="1" class="mt-1" />
             </label>
             <label class="block">
-              <span class="text-xs text-muted-foreground">最長秒數（0=不限）</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.maxDuration') }}</span>
               <Input v-model.number="durationSec" type="number" min="0" class="mt-1" />
             </label>
           </div>
@@ -598,39 +623,39 @@ const statusColor: Record<string, string> = {
         <!-- Multi-turn conversations -->
         <template v-else-if="mode === 'multiturn'">
           <label class="block">
-            <span class="text-xs text-muted-foreground">資料集</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.mtDatasetLabel') }}</span>
             <select v-model="mtDataset" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
-              <option value="share_gpt_zh_multi_turn">ShareGPT 中文（真實對話）</option>
-              <option value="random_multi_turn">random（隨機生成）</option>
-              <option value="custom_multi_turn">custom（自備 JSONL）</option>
+              <option value="share_gpt_zh_multi_turn">{{ $t('benchmark.mtShareGpt') }}</option>
+              <option value="random_multi_turn">{{ $t('benchmark.mtRandom') }}</option>
+              <option value="custom_multi_turn">{{ $t('benchmark.mtCustom') }}</option>
             </select>
           </label>
           <label v-if="mtDataset === 'custom_multi_turn'" class="block">
-            <span class="text-xs text-muted-foreground">資料路徑（伺服器端 JSONL）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.mtDatasetPath') }}</span>
             <Input v-model="mtDatasetPath" placeholder="/app/data/convos.jsonl" class="mt-1 font-mono text-xs" />
           </label>
           <div class="grid grid-cols-2 gap-2">
             <label class="block">
-              <span class="text-xs text-muted-foreground">並發對話數（可逗號掃描）</span>
-              <Input v-model="mtConcurrentInput" placeholder="4 或 2,4,8" class="mt-1 font-mono" />
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.mtConcurrent') }}</span>
+              <Input v-model="mtConcurrentInput" placeholder="4 or 2,4,8" class="mt-1 font-mono" />
             </label>
             <label class="block">
-              <span class="text-xs text-muted-foreground">每點對話數</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.mtConvPerPoint') }}</span>
               <Input v-model.number="mtTotal" type="number" min="1" class="mt-1" />
             </label>
           </div>
           <div class="grid grid-cols-2 gap-2">
             <label class="block">
-              <span class="text-xs text-muted-foreground">最少輪數</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.mtMinTurns') }}</span>
               <Input v-model.number="minTurns" type="number" min="1" class="mt-1" />
             </label>
             <label class="block">
-              <span class="text-xs text-muted-foreground">最多輪數</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.mtMaxTurns') }}</span>
               <Input v-model.number="maxTurns" type="number" min="1" class="mt-1" />
             </label>
           </div>
           <label class="block">
-            <span class="text-xs text-muted-foreground">最長秒數（0=不限，避免牆鐘失控）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.mtMaxDuration') }}</span>
             <Input v-model.number="durationSec" type="number" min="0" class="mt-1" />
           </label>
         </template>
@@ -638,21 +663,21 @@ const statusColor: Record<string, string> = {
         <!-- SLA-specific (conditions OR-ed; each runs its own binary search) -->
         <template v-else-if="mode === 'sla'">
           <label class="block">
-            <span class="text-xs text-muted-foreground">搜尋變數</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.slaVariable') }}</span>
             <select v-model="slaVariable" class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm">
-              <option value="parallel">並發 parallel</option>
-              <option value="rate">速率 rate（open-loop）</option>
+              <option value="parallel">{{ $t('benchmark.slaParallel') }}</option>
+              <option value="rate">{{ $t('benchmark.slaRate') }}</option>
             </select>
           </label>
           <div>
             <div class="mb-1 flex items-center justify-between">
-              <span class="text-xs text-muted-foreground">SLA 條件（多條 = OR）</span>
-              <Button size="sm" variant="ghost" @click="addCondition"><Plus class="size-3.5" />新增</Button>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.slaConditions') }}</span>
+              <Button size="sm" variant="ghost" @click="addCondition"><Plus class="size-3.5" />{{ $t('common.add') }}</Button>
             </div>
             <div class="space-y-1.5">
               <div v-for="(c, i) in slaConditions" :key="i" class="flex items-center gap-1.5">
                 <select v-model="c.metric" class="h-8 flex-1 rounded-md border border-input bg-background/40 px-1 text-xs">
-                  <option v-for="m in SLA_METRICS" :key="m.v" :value="m.v">{{ m.label }}</option>
+                  <option v-for="m in SLA_METRICS" :key="m.v" :value="m.v">{{ $t(m.label) }}</option>
                 </select>
                 <select v-model="c.op" class="h-8 w-14 rounded-md border border-input bg-background/40 px-1 text-xs">
                   <option v-for="o in SLA_OPS" :key="o" :value="o">{{ o }}</option>
@@ -663,20 +688,20 @@ const statusColor: Record<string, string> = {
             </div>
           </div>
           <label v-if="slaVariable === 'rate'" class="block">
-            <span class="text-xs text-muted-foreground">固定並發（rate 模式）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.slaFixedParallel') }}</span>
             <Input v-model.number="slaFixedParallel" type="number" min="1" class="mt-1" />
           </label>
           <div class="grid grid-cols-3 gap-2">
             <label class="block">
-              <span class="text-xs text-muted-foreground">下界</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.slaLower') }}</span>
               <Input v-model.number="slaLower" type="number" min="1" class="mt-1" />
             </label>
             <label class="block">
-              <span class="text-xs text-muted-foreground">上界</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.slaUpper') }}</span>
               <Input v-model.number="slaUpper" type="number" min="1" class="mt-1" />
             </label>
             <label class="block">
-              <span class="text-xs text-muted-foreground">每點 runs</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.slaRunsPerPoint') }}</span>
               <Input v-model.number="slaNumRuns" type="number" min="1" class="mt-1" />
             </label>
           </div>
@@ -685,11 +710,10 @@ const statusColor: Record<string, string> = {
         <!-- Speed baseline: single request, fixed prompt lengths, /v1/completions -->
         <template v-else-if="mode === 'speed'">
           <div class="rounded-lg border border-border/60 bg-muted/30 p-2.5 text-[11px] leading-relaxed text-muted-foreground">
-            單請求標準速度（並發 1）。固定 prompt 長度{{ speedLong ? ' 63k / 129k' : ' 1 / 6k / 14k / 30k' }}，
-            打 <span class="font-mono">/v1/completions</span> 避免 chat template 干擾。
+            {{ $t('benchmark.speedDesc', { lengths: speedLengths }) }}
           </div>
           <label class="flex items-center justify-between">
-            <span class="text-xs text-muted-foreground">長上下文（63k / 129k）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.speedLongCtx') }}</span>
             <input v-model="speedLong" type="checkbox" class="size-4 accent-[var(--chart-1)]" />
           </label>
         </template>
@@ -697,21 +721,21 @@ const statusColor: Record<string, string> = {
         <!-- Embedding / rerank: closed-loop concurrency sweep, no output tokens -->
         <template v-else-if="isEmbedMode">
           <label class="block">
-            <span class="text-xs text-muted-foreground">並發點（逗號分隔，掃描）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.embParallel') }}</span>
             <Input v-model="parallelInput" placeholder="1,4,8,16" class="mt-1 font-mono" />
           </label>
           <div class="grid grid-cols-2 gap-2">
             <label class="block">
-              <span class="text-xs text-muted-foreground">每點請求數</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.embReqPerPoint') }}</span>
               <Input v-model.number="reqPerPoint" type="number" min="1" class="mt-1" />
             </label>
             <label class="block">
-              <span class="text-xs text-muted-foreground">輸入長度（token）</span>
+              <span class="text-xs text-muted-foreground">{{ $t('benchmark.embInputLen') }}</span>
               <Input v-model.number="embPromptLen" type="number" min="1" class="mt-1" />
             </label>
           </div>
           <label v-if="mode === 'rerank'" class="block">
-            <span class="text-xs text-muted-foreground">每筆文件數</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.embDocsPerReq') }}</span>
             <Input v-model.number="rerankDocs" type="number" min="1" class="mt-1" />
           </label>
         </template>
@@ -719,30 +743,30 @@ const statusColor: Record<string, string> = {
         <!-- Common knobs (LLM modes only — embedding has no output tokens/stream) -->
         <div v-if="!isEmbedMode" class="grid grid-cols-2 gap-2">
           <label class="block">
-            <span class="text-xs text-muted-foreground">輸出 tokens{{ mode === 'speed' ? '（固定）' : '' }}</span>
+            <span class="text-xs text-muted-foreground">{{ mode === 'speed' ? $t('benchmark.outputTokensFixed') : $t('benchmark.outputTokens') }}</span>
             <Input v-model.number="maxTokens" type="number" min="1" class="mt-1" />
           </label>
           <label v-if="dataset === 'random' && ['sweep', 'openloop', 'sla'].includes(mode)" class="block">
-            <span class="text-xs text-muted-foreground">輸入長度</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.inputLength') }}</span>
             <Input v-model.number="promptLen" type="number" min="1" class="mt-1" />
           </label>
           <label v-if="dataset === 'random' && ['sweep', 'openloop', 'sla'].includes(mode)" class="block">
-            <span class="text-xs text-muted-foreground">前綴長度（prefix cache）</span>
+            <span class="text-xs text-muted-foreground">{{ $t('benchmark.prefixLength') }}</span>
             <Input v-model.number="prefixLen" type="number" min="0" class="mt-1" />
           </label>
         </div>
         <label class="block">
-          <span class="text-xs text-muted-foreground">名稱（選填）</span>
-          <Input v-model="name" placeholder="例如：q05b-baseline" class="mt-1" />
+          <span class="text-xs text-muted-foreground">{{ $t('benchmark.nameLabel') }}</span>
+          <Input v-model="name" :placeholder="$t('benchmark.namePlaceholder')" class="mt-1" />
         </label>
         <label v-if="!isEmbedMode" class="flex items-center justify-between">
-          <span class="text-xs text-muted-foreground">串流（量 TTFT 必須）</span>
+          <span class="text-xs text-muted-foreground">{{ $t('benchmark.streamLabel') }}</span>
           <input v-model="stream" type="checkbox" class="size-4 accent-[var(--chart-1)]" />
         </label>
 
         <Button class="w-full" :disabled="launching || busy || (isEmbedMode ? !embModel : !model)" @click="launch">
           <Loader2 v-if="launching" class="size-4 animate-spin" /><Play v-else class="size-4" />
-          {{ busy ? '有壓測進行中…' : '開始壓測' }}
+          {{ busy ? $t('benchmark.runningBusy') : $t('benchmark.startBenchmark') }}
         </Button>
       </div>
     </Card>
@@ -752,8 +776,8 @@ const statusColor: Record<string, string> = {
       <!-- History -->
       <Card class="overflow-hidden">
         <div class="flex items-center justify-between border-b border-border/60 px-4 py-2.5 text-sm font-semibold">
-          <span>壓測歷史 <span class="text-xs font-normal text-muted-foreground">({{ runs.length }})</span></span>
-          <span class="text-xs font-normal text-muted-foreground">勾選 ≥2 筆比較</span>
+          <span>{{ $t('benchmark.history') }} <span class="text-xs font-normal text-muted-foreground">{{ $t('benchmark.historyCount', { n: runs.length }) }}</span></span>
+          <span class="text-xs font-normal text-muted-foreground">{{ $t('benchmark.compareHint') }}</span>
         </div>
         <!-- Bounded + scrollable so a long history never pushes the result far down. -->
         <div v-if="runs.length" class="max-h-72 divide-y divide-border/60 overflow-y-auto">
@@ -769,7 +793,7 @@ const statusColor: Record<string, string> = {
               type="checkbox"
               :checked="compareIds.includes(r.id)"
               class="size-4 shrink-0 accent-[var(--chart-1)]"
-              title="加入比較"
+              :title="$t('benchmark.addToCompare')"
               @click.stop="toggleCompare(r.id)"
             />
             <span v-else class="size-4 shrink-0" />
@@ -779,28 +803,28 @@ const statusColor: Record<string, string> = {
               <p class="truncate text-sm font-medium">{{ r.name || r.model }} <span class="text-xs text-muted-foreground">#{{ r.id }}</span></p>
               <p class="truncate font-mono text-[11px] text-muted-foreground">{{ r.model }} · {{ formatTime(r.created_at) }}</p>
             </div>
-            <Badge variant="muted" :class="statusColor[r.status]">{{ cancelling.has(r.id) ? '停止中…' : r.status }}</Badge>
+            <Badge variant="muted" :class="statusColor[r.status]">{{ cancelling.has(r.id) ? $t('benchmark.stoppingBadge') : statusLabel(r.status) }}</Badge>
             <template v-if="r.status === 'running'">
               <Button
                 v-if="!cancelling.has(r.id)"
                 size="icon-sm"
                 variant="ghost"
-                title="取消(停止)"
+                :title="$t('benchmark.cancelStop')"
                 @click.stop="cancel(r.id)"
               ><Square class="size-3.5" /></Button>
               <Button
                 v-else
                 size="icon-sm"
                 variant="ghost"
-                title="強制終止(立即 SIGKILL)"
+                :title="$t('benchmark.forceKillHint')"
                 class="text-status-failed"
                 @click.stop="cancel(r.id, true)"
               ><X class="size-3.5" /></Button>
             </template>
-            <Button v-else size="icon-sm" variant="ghost" title="刪除" @click.stop="remove(r.id)"><Trash2 class="size-3.5" /></Button>
+            <Button v-else size="icon-sm" variant="ghost" :title="$t('common.delete')" @click.stop="remove(r.id)"><Trash2 class="size-3.5" /></Button>
           </div>
         </div>
-        <p v-else class="px-4 py-8 text-center text-sm text-muted-foreground">尚無壓測紀錄。</p>
+        <p v-else class="px-4 py-8 text-center text-sm text-muted-foreground">{{ $t('benchmark.noHistory') }}</p>
       </Card>
 
       <!-- Comparison + selected result; scrolled into view on an explicit pick. -->
@@ -808,43 +832,43 @@ const statusColor: Record<string, string> = {
       <!-- Comparison (≥2 completed runs selected) -->
       <Card v-if="compareSeries.length >= 2" class="p-4">
         <div class="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1">
-          <p class="text-sm font-semibold">壓測比較</p>
+          <p class="text-sm font-semibold">{{ $t('benchmark.comparison') }}</p>
           <span v-for="(s, i) in compareSeries" :key="i" class="flex items-center gap-1.5 text-xs">
             <span class="size-2.5 rounded-full" :style="{ background: s.color }" />{{ s.label }}
           </span>
         </div>
         <div class="grid gap-4 lg:grid-cols-3">
-          <PerfCompareChart :series="compareSeries" :metric="(p: PerfPoint) => p.rps" label="RPS（req/s）" :format="(v) => v.toFixed(1)" :x-label="compareXLabel" />
-          <PerfCompareChart :series="compareSeries" :metric="(p: PerfPoint) => p.avg_latency != null ? p.avg_latency * 1000 : null" label="平均延遲（ms）" :format="(v) => `${Math.round(v)}`" :x-label="compareXLabel" />
-          <PerfCompareChart :series="compareSeries" :metric="(p: PerfPoint) => p.output_tps" label="輸出吞吐 Gen/s（tok/s）" :format="(v) => formatNumber(Math.round(v))" :x-label="compareXLabel" />
+          <PerfCompareChart :series="compareSeries" :metric="(p: PerfPoint) => p.rps" :label="$t('benchmark.chartRps')" :format="(v) => v.toFixed(1)" :x-label="compareXLabel" />
+          <PerfCompareChart :series="compareSeries" :metric="(p: PerfPoint) => p.avg_latency != null ? p.avg_latency * 1000 : null" :label="$t('benchmark.chartAvgLatency')" :format="(v) => `${Math.round(v)}`" :x-label="compareXLabel" />
+          <PerfCompareChart :series="compareSeries" :metric="(p: PerfPoint) => p.output_tps" :label="$t('benchmark.chartGenTps')" :format="(v) => formatNumber(Math.round(v))" :x-label="compareXLabel" />
         </div>
       </Card>
 
       <!-- Selected detail -->
       <template v-if="selected">
         <div v-if="selected.status === 'failed'" class="rounded-lg border border-status-failed/30 bg-status-failed/10 p-3 text-xs text-status-failed">
-          失敗：{{ selected.error }}
+          {{ $t('benchmark.failed') }}: {{ selected.error }}
         </div>
 
         <!-- Run summary (Basic Information) -->
         <Card v-if="points.length" class="p-4">
           <div class="flex items-start justify-between gap-3">
             <div class="grid grid-cols-2 gap-x-6 gap-y-1.5 text-xs sm:grid-cols-3">
-              <div><span class="text-muted-foreground">模型</span> <span class="font-mono">{{ selected.model }}</span></div>
-              <div><span class="text-muted-foreground">資料集</span> {{ parsedParams.dataset ?? '—' }}</div>
-              <div><span class="text-muted-foreground">目標</span> <span class="font-mono">{{ selected.target_url.replace(/^https?:\/\//, '') }}</span></div>
+              <div><span class="text-muted-foreground">{{ $t('benchmark.modelLabel') }}</span> <span class="font-mono">{{ selected.model }}</span></div>
+              <div><span class="text-muted-foreground">{{ $t('benchmark.datasetLabel') }}</span> {{ parsedParams.dataset ?? '—' }}</div>
+              <div><span class="text-muted-foreground">{{ $t('benchmark.targetLabel') }}</span> <span class="font-mono">{{ selected.target_url.replace(/^https?:\/\//, '') }}</span></div>
               <div>
-                <span class="text-muted-foreground">模式</span>
+                <span class="text-muted-foreground">{{ $t('benchmark.modeLabel') }}</span>
                 {{ runModeLabel }}
               </div>
-              <div><span class="text-muted-foreground">輸出 tokens</span> {{ parsedParams.max_tokens ?? '—' }}</div>
-              <div><span class="text-muted-foreground">總測試時間</span> <span class="tabular">{{ aggregates.duration.toFixed(1) }}s</span></div>
-              <div><span class="text-muted-foreground">總生成</span> <span class="tabular">{{ formatNumber(Math.round(aggregates.generated)) }} tok</span></div>
-              <div><span class="text-muted-foreground">平均輸出速率</span> <span class="tabular">{{ aggregates.rate.toFixed(1) }} tok/s</span></div>
+              <div><span class="text-muted-foreground">{{ $t('benchmark.outputTokens') }}</span> {{ parsedParams.max_tokens ?? '—' }}</div>
+              <div><span class="text-muted-foreground">{{ $t('benchmark.totalTestDuration') }}</span> <span class="tabular">{{ aggregates.duration.toFixed(1) }}s</span></div>
+              <div><span class="text-muted-foreground">{{ $t('benchmark.totalGenerated') }}</span> <span class="tabular">{{ formatNumber(Math.round(aggregates.generated)) }} tok</span></div>
+              <div><span class="text-muted-foreground">{{ $t('benchmark.avgOutputRate') }}</span> <span class="tabular">{{ aggregates.rate.toFixed(1) }} tok/s</span></div>
             </div>
             <!-- evalscope only writes an HTML report for sweep runs. -->
             <Button v-if="!sla" variant="outline" size="sm" class="shrink-0" @click="openReport">
-              <ExternalLink class="size-3.5" />完整報告
+              <ExternalLink class="size-3.5" />{{ $t('benchmark.fullReport') }}
             </Button>
           </div>
         </Card>
@@ -857,7 +881,7 @@ const statusColor: Record<string, string> = {
                 <p class="font-mono text-xs text-muted-foreground">{{ g.criteria }}</p>
                 <p class="mt-1 text-2xl font-semibold tabular">
                   {{ g.max_satisfied ?? '—' }}
-                  <span class="text-sm font-normal text-muted-foreground">最大 {{ g.variable === 'rate' ? '速率' : '並發' }}</span>
+                  <span class="text-sm font-normal text-muted-foreground">{{ $t('benchmark.slaMaxVar', { var: g.variable === 'rate' ? $t('benchmark.slaVarRate') : $t('benchmark.slaVarParallel') }) }}</span>
                 </p>
               </div>
               <Badge :class="g.max_satisfied != null ? 'text-status-ready' : 'text-status-failed'" variant="muted">{{ g.note }}</Badge>
@@ -880,37 +904,37 @@ const statusColor: Record<string, string> = {
 
         <!-- Multi-turn aggregate metrics (only present for multi-turn runs) -->
         <Card v-if="mtPoint" class="p-4">
-          <p class="mb-2 text-xs font-medium text-muted-foreground">多輪指標</p>
+          <p class="mb-2 text-xs font-medium text-muted-foreground">{{ $t('benchmark.multiTurnMetrics') }}</p>
           <div class="grid grid-cols-2 gap-3 sm:grid-cols-4">
             <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
               <p class="text-lg font-semibold tabular">{{ mtPoint.turns?.toFixed(1) ?? '—' }}</p>
-              <p class="text-xs text-muted-foreground">輪數/對話</p>
+              <p class="text-xs text-muted-foreground">{{ $t('benchmark.turnsPerConv') }}</p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
               <p class="text-lg font-semibold tabular">{{ mtPoint.cache_hit != null ? `${mtPoint.cache_hit.toFixed(1)}%` : '—' }}</p>
-              <p class="text-xs text-muted-foreground">KV 快取命中</p>
+              <p class="text-xs text-muted-foreground">{{ $t('benchmark.kvCacheHit') }}</p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
               <p class="text-lg font-semibold tabular">{{ mtPoint.first_ttft != null ? `${mtPoint.first_ttft.toFixed(0)}ms` : '—' }}</p>
-              <p class="text-xs text-muted-foreground">首輪 TTFT</p>
+              <p class="text-xs text-muted-foreground">{{ $t('benchmark.firstTtft') }}</p>
             </div>
             <div class="rounded-lg border border-border/60 bg-background/40 p-3 text-center">
               <p class="text-lg font-semibold tabular">{{ mtPoint.subsequent_ttft != null ? `${mtPoint.subsequent_ttft.toFixed(0)}ms` : '—' }}</p>
-              <p class="text-xs text-muted-foreground">後續輪 TTFT</p>
+              <p class="text-xs text-muted-foreground">{{ $t('benchmark.subsequentTtft') }}</p>
             </div>
           </div>
         </Card>
 
         <!-- Charts: throughput + decode + tail latency (need ≥2 points for a curve) -->
         <div v-if="points.length > 1" class="grid gap-4 lg:grid-cols-3">
-          <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.rps" label="RPS（req/s）" color="var(--chart-1)" :format="(v) => v.toFixed(1)" :x-label="isOpenLoop ? '速率' : '並發'" /></Card>
+          <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.rps" :label="$t('benchmark.chartRps')" color="var(--chart-1)" :format="(v) => v.toFixed(1)" :x-label="isOpenLoop ? $t('benchmark.tableRate') : $t('benchmark.tableParallel')" /></Card>
           <template v-if="isEmbedResult">
-            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.avg_latency != null ? p.avg_latency * 1000 : null" label="平均延遲（ms）" color="var(--chart-2)" :format="(v) => `${Math.round(v)}`" :x-label="'並發'" /></Card>
-            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.latency_p99 != null ? p.latency_p99 * 1000 : null" label="延遲 p99（ms）" color="var(--chart-4)" :format="(v) => `${Math.round(v)}`" :x-label="'並發'" /></Card>
+            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.avg_latency != null ? p.avg_latency * 1000 : null" :label="$t('benchmark.chartAvgLatency')" color="var(--chart-2)" :format="(v) => `${Math.round(v)}`" :x-label="$t('benchmark.tableParallel')" /></Card>
+            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.latency_p99 != null ? p.latency_p99 * 1000 : null" :label="$t('benchmark.chartP99Latency')" color="var(--chart-4)" :format="(v) => `${Math.round(v)}`" :x-label="$t('benchmark.tableParallel')" /></Card>
           </template>
           <template v-else>
-            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.output_tps" label="輸出吞吐 Gen/s（tok/s）" color="var(--chart-2)" :format="(v) => formatNumber(Math.round(v))" :x-label="isOpenLoop ? '速率' : '並發'" /></Card>
-            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.ttft_p99 ?? p.avg_ttft" label="TTFT p99（ms）" color="var(--chart-4)" :format="(v) => `${Math.round(v)}`" :x-label="isOpenLoop ? '速率' : '並發'" /></Card>
+            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.output_tps" :label="$t('benchmark.chartGenTps')" color="var(--chart-2)" :format="(v) => formatNumber(Math.round(v))" :x-label="isOpenLoop ? $t('benchmark.tableRate') : $t('benchmark.tableParallel')" /></Card>
+            <Card class="p-4"><PerfSweepChart :points="points" :metric="(p: PerfPoint) => p.ttft_p99 ?? p.avg_ttft" :label="$t('benchmark.chartTtft')" color="var(--chart-4)" :format="(v) => `${Math.round(v)}`" :x-label="isOpenLoop ? $t('benchmark.tableRate') : $t('benchmark.tableParallel')" /></Card>
           </template>
         </div>
 
@@ -920,7 +944,7 @@ const statusColor: Record<string, string> = {
             <table class="w-full text-sm">
               <thead class="border-b border-border/60 text-xs text-muted-foreground">
                 <tr class="[&>th]:px-3 [&>th]:py-2 [&>th]:text-right [&>th]:font-medium [&>th:first-child]:text-left">
-                  <th>{{ isOpenLoop ? '速率' : '並發' }}</th><th>RPS</th><th>Gen/s</th><th>Total tok/s</th><th>平均延遲</th><th>TTFT</th><th>TTFT p99</th><th>TPOT</th><th>ITL</th><th>延遲 p99</th><th>輸入/輸出</th><th>成功/總數</th>
+                  <th>{{ isOpenLoop ? $t('benchmark.tableRate') : $t('benchmark.tableParallel') }}</th><th>RPS</th><th>Gen/s</th><th>Total tok/s</th><th>{{ $t('benchmark.tableAvgLatency') }}</th><th>TTFT</th><th>TTFT p99</th><th>TPOT</th><th>ITL</th><th>{{ $t('benchmark.chartP99Latency') }}</th><th>{{ $t('benchmark.tableInputOutput') }}</th><th>{{ $t('benchmark.tableSuccessTotal') }}</th>
                 </tr>
               </thead>
               <tbody>
@@ -948,7 +972,7 @@ const statusColor: Record<string, string> = {
                     <td colspan="12" class="px-4 py-3">
                       <div class="grid gap-3 sm:grid-cols-3">
                         <div v-for="row in [
-                          { name: '延遲 Latency (s)', avg: p.avg_latency, p50: p.latency_p50, p99: p.latency_p99, max: p.latency_max, ms: false },
+                          { name: $t('benchmark.latencyDetail'), avg: p.avg_latency, p50: p.latency_p50, p99: p.latency_p99, max: p.latency_max, ms: false },
                           { name: 'TTFT (ms)', avg: p.avg_ttft, p50: p.ttft_p50, p99: p.ttft_p99, max: p.ttft_max, ms: true },
                           { name: 'TPOT (ms)', avg: p.avg_tpot, p50: p.tpot_p50, p99: p.tpot_p99, max: p.tpot_max, ms: true },
                         ]" :key="row.name" class="rounded-lg border border-border/60 bg-background/40 p-2.5">
@@ -972,8 +996,8 @@ const statusColor: Record<string, string> = {
 
         <!-- Live log -->
         <Card v-if="selectedRunning || log" class="p-4">
-          <p class="mb-2 text-xs font-medium text-muted-foreground">執行日誌</p>
-          <pre class="max-h-64 overflow-auto rounded-lg border border-border/60 bg-black/40 p-3 font-mono text-[11px] leading-relaxed text-foreground/90">{{ log || '（等待輸出…）' }}</pre>
+          <p class="mb-2 text-xs font-medium text-muted-foreground">{{ $t('benchmark.executionLog') }}</p>
+          <pre class="max-h-64 overflow-auto rounded-lg border border-border/60 bg-black/40 p-3 font-mono text-[11px] leading-relaxed text-foreground/90">{{ log || $t('benchmark.waitingOutput') }}</pre>
         </Card>
       </template>
       </div>
diff --git a/apps/frontend_llmops/src/views/DatasetsView.vue b/apps/frontend_llmops/src/views/DatasetsView.vue
index 3650fd0..0c8299e 100644
--- a/apps/frontend_llmops/src/views/DatasetsView.vue
+++ b/apps/frontend_llmops/src/views/DatasetsView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Database, Download, HardDrive, Layers } from '@lucide/vue'
 import { api, ApiError } from '@/lib/api'
 import { useAuth } from '@/composables/useAuth'
@@ -11,6 +12,7 @@ import StatCard from '@/components/StatCard.vue'
 import DatasetCard from '@/components/DatasetCard.vue'
 import DatasetPreviewDialog from '@/components/DatasetPreviewDialog.vue'
 
+const { t } = useI18n()
 const { ensureUnlocked } = useAuth()
 
 // Dataset preview (eval datasets only) — reuses the Eval page's inspector dialog.
@@ -41,7 +43,7 @@ const evalTiers = computed(() => {
   const groups: { tier: string; items: DatasetEntry[] }[] = []
   for (const d of allDatasets.value) {
     if (d.category !== 'eval') continue
-    const tier = d.tier ?? '其他'
+    const tier = d.tier ?? t('common.more')
     let g = groups.find((x) => x.tier === tier)
     if (!g) groups.push((g = { tier, items: [] }))
     g.items.push(d)
@@ -53,7 +55,7 @@ async function loadCache() {
   try {
     cache.value = await api.getDatasets()
   } catch (e) {
-    toast.error('無法讀取資料集', { description: String(e) })
+    toast.error(t('datasets.loadFailed'), { description: String(e) })
   }
 }
 
@@ -71,22 +73,28 @@ async function download(key: string) {
   if (!(await ensureUnlocked())) return
   try {
     await api.startDatasetDownload(key)
-    toast.success('開始下載', { description: '可離開此頁，下載會在背景繼續。' })
+    toast.success(t('datasets.downloadStarted'), {
+      description: t('datasets.downloadStartedDesc'),
+    })
     await loadDownloads()
   } catch (e) {
-    toast.error('無法開始下載', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('datasets.downloadStartFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   }
 }
 
 async function remove(key: string, label: string) {
   if (!(await ensureUnlocked())) return
-  if (!confirm(`確定刪除已快取的「${label}」？此操作會釋放磁碟空間。`)) return
+  if (!confirm(t('datasets.deleteConfirm', { label }))) return
   try {
     await api.deleteDataset(key)
-    toast.success(`已刪除 ${label}`)
+    toast.success(t('datasets.deleted', { label }))
     await loadCache()
   } catch (e) {
-    toast.error('刪除失敗', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('datasets.deleteFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   }
 }
 
@@ -103,23 +111,23 @@ onBeforeUnmount(() => {
 <template>
   <div class="space-y-6 p-6">
     <div>
-      <h1 class="flex items-center gap-2 text-lg font-semibold"><Database class="size-5" />資料集庫</h1>
+      <h1 class="flex items-center gap-2 text-lg font-semibold"><Database class="size-5" />{{ $t('datasets.title') }}</h1>
       <p class="mt-0.5 text-sm text-muted-foreground">
-        預先下載資料集到共用 ModelScope 快取，跑壓測 / 評測時就不必等首次下載。
-        <span class="font-mono">random</span> / 速度基準為即時生成，無需下載。
+        {{ $t('datasets.description') }}
+        <span class="font-mono">random</span> {{ $t('datasets.descriptionRandom') }}
       </p>
     </div>
 
     <!-- Stats -->
     <div v-if="cache" class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-      <StatCard :icon="Database" label="已快取 / 總數" :value="`${cachedCount} / ${allDatasets.length}`" />
-      <StatCard :icon="HardDrive" label="佔用空間" :value="formatBytes(cachedSize)" />
-      <StatCard :icon="Download" label="下載中" :value="String(activeDownloads.length)" />
+      <StatCard :icon="Database" :label="$t('datasets.cachedTotal')" :value="`${cachedCount} / ${allDatasets.length}`" />
+      <StatCard :icon="HardDrive" :label="$t('datasets.diskUsed')" :value="formatBytes(cachedSize)" />
+      <StatCard :icon="Download" :label="$t('library.downloading')" :value="String(activeDownloads.length)" />
       <StatCard
         :icon="HardDrive"
-        label="磁碟剩餘"
+        :label="$t('datasets.diskRemaining')"
         :value="formatBytes(cache.disk.free)"
-        :hint="`共 ${formatBytes(cache.disk.total)}`"
+        :hint="$t('datasets.diskTotal', { size: formatBytes(cache.disk.total) })"
         color="var(--chart-1)"
       />
     </div>
@@ -127,8 +135,8 @@ onBeforeUnmount(() => {
     <!-- Perf (load-test) datasets -->
     <div>
       <div class="mb-2 flex items-center justify-between">
-        <p class="flex items-center gap-2 text-sm font-semibold"><Layers class="size-4" />壓測資料集</p>
-        <span class="text-xs text-muted-foreground">下載後可在「壓測」頁選用</span>
+        <p class="flex items-center gap-2 text-sm font-semibold"><Layers class="size-4" />{{ $t('datasets.perfDatasets') }}</p>
+        <span class="text-xs text-muted-foreground">{{ $t('datasets.perfHint') }}</span>
       </div>
       <div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         <DatasetCard
@@ -145,8 +153,8 @@ onBeforeUnmount(() => {
     <!-- Eval (accuracy) datasets, grouped by capability tier -->
     <div>
       <div class="mb-2 flex items-center justify-between">
-        <p class="flex items-center gap-2 text-sm font-semibold"><Layers class="size-4" />評測資料集</p>
-        <span class="text-xs text-muted-foreground">下載後可在「評測」頁選用</span>
+        <p class="flex items-center gap-2 text-sm font-semibold"><Layers class="size-4" />{{ $t('datasets.evalDatasets') }}</p>
+        <span class="text-xs text-muted-foreground">{{ $t('datasets.evalHint') }}</span>
       </div>
       <div class="space-y-4">
         <div v-for="g in evalTiers" :key="g.tier">
@@ -168,7 +176,7 @@ onBeforeUnmount(() => {
 
     <!-- Failed downloads -->
     <Card v-for="job in downloads.filter((j) => j.state === 'failed')" :key="job.key" class="p-3">
-      <p class="text-xs text-status-failed">下載「{{ job.label }}」失敗：{{ job.error }}</p>
+      <p class="text-xs text-status-failed">{{ $t('datasets.downloadFailed', { label: job.label }) }}{{ job.error }}</p>
     </Card>
 
     <DatasetPreviewDialog v-model:open="previewOpen" :dataset-key="previewKey" />
diff --git a/apps/frontend_llmops/src/views/EvalView.vue b/apps/frontend_llmops/src/views/EvalView.vue
index c6c821c..4ec8094 100644
--- a/apps/frontend_llmops/src/views/EvalView.vue
+++ b/apps/frontend_llmops/src/views/EvalView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { ClipboardCheck, ExternalLink, Loader2, Play, Square, Trash2 } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import { api, ApiError } from '@/lib/api'
 import { useModelsStore } from '@/stores/models'
 import { lorasOfGroup } from '@/composables/useModelOptions'
@@ -22,6 +23,7 @@ import EvalSampleBrowser from '@/components/EvalSampleBrowser.vue'
 
 const models = useModelsStore()
 const { ensureUnlocked } = useAuth()
+const { t } = useI18n()
 
 // ---- model picker (shared with the benchmark page) ----
 const groups = computed(() => [...new Set(models.llms.map((m) => m.key.split('::')[0] ?? m.key))])
@@ -178,7 +180,7 @@ async function loadCatalog() {
   try {
     catalog.value = (await api.listEvalDatasets()).datasets
   } catch (e) {
-    toast.error('無法讀取評測資料集', { description: String(e) })
+    toast.error(t('eval.loadCatalogFailed'), { description: String(e) })
   }
   await refreshDatasetState()
 }
@@ -268,9 +270,11 @@ async function applyBudget() {
     const c = await api.setEvalConfig(budgetDraft.value)
     budget.value = c.concurrency_budget
     usedBudget.value = c.used_budget
-    toast.success(`並發預算已設為 ${c.concurrency_budget}`)
+    toast.success(t('eval.budgetSet', { n: c.concurrency_budget }))
   } catch (e) {
-    toast.error('無法調整預算', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('eval.budgetSetFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
     budgetDraft.value = budget.value
   }
 }
@@ -303,7 +307,7 @@ async function select(id: number) {
     result.value = parseResult(detail.value.result)
     await loadDetail(id, detail.value.status)
   } catch (e) {
-    toast.error('無法載入結果', { description: String(e) })
+    toast.error(t('eval.loadResultFailed'), { description: String(e) })
   }
   await loadLog()
 }
@@ -334,34 +338,34 @@ async function launch() {
   if (launching.value) return
   const targetModels = [...selectedModels.value]
   if (!targetModels.length) {
-    toast.error('請至少選擇一個模型')
+    toast.error(t('eval.selectModelRequired'))
     return
   }
   if (!selected.value.size) {
-    toast.error('請至少選擇一個資料集')
+    toast.error(t('eval.selectDatasetRequired'))
     return
   }
   if (target.value === 'instance' && targetModels.length !== 1) {
-    toast.error('直連實例僅支援單一模型')
+    toast.error(t('eval.instanceSingleOnly'))
     return
   }
   if (target.value === 'instance' && !instanceOptions.value.find((o) => o.key === instanceKey.value)?.ready) {
-    toast.error('該實例尚未就緒，無法直連')
+    toast.error(t('eval.instanceNotReady'))
     return
   }
   if (judgeEnabled.value && !judgeModel.value) {
-    toast.error('請設定裁判模型')
+    toast.error(t('eval.judgeModelRequired'))
     return
   }
   if (judgeEnabled.value && judgeTarget.value === 'external' && !judgeApiUrl.value) {
-    toast.error('外部裁判需要 API URL')
+    toast.error(t('eval.judgeApiRequired'))
     return
   }
   let datasetArgs: EvalRequest['dataset_args']
   try {
     datasetArgs = buildDatasetArgs()
   } catch {
-    toast.error('進階 dataset_args 不是合法 JSON')
+    toast.error(t('eval.invalidDatasetArgs'))
     return
   }
   if (!(await ensureUnlocked())) return
@@ -395,11 +399,15 @@ async function launch() {
         if (firstId === null) firstId = run.id
         ok++
       } catch (e) {
-        toast.error(`無法評測 ${mdl}`, { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+        toast.error(t('eval.evalFailed', { model: mdl }), {
+          description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+        })
       }
     }
     if (ok > 0) {
-      toast.success(`已排入 ${ok} 個評測`, { description: '可離開此頁，背景持續執行。' })
+      toast.success(t('eval.startedToast', { n: ok }), {
+        description: t('eval.startedDesc'),
+      })
       await loadRuns()
       if (firstId !== null) await select(firstId)
     }
@@ -411,21 +419,21 @@ async function launch() {
 async function cancel(id: number) {
   try {
     await api.cancelEval(id)
-    toast.info('已要求取消')
+    toast.info(t('eval.cancelRequested'))
     await loadRuns()
   } catch (e) {
-    toast.error('取消失敗', { description: String(e) })
+    toast.error(t('eval.cancelFailed'), { description: String(e) })
   }
 }
 
 async function remove(id: number) {
-  if (!confirm(`刪除評測 #${id}？`)) return
+  if (!confirm(t('eval.deleteConfirm', { id }))) return
   try {
     await api.deleteEval(id)
     if (selectedId.value === id) { selectedId.value = null; detail.value = null; result.value = null }
     await loadRuns()
   } catch (e) {
-    toast.error('刪除失敗', { description: String(e) })
+    toast.error(t('eval.deleteFailed'), { description: String(e) })
   }
 }
 
@@ -488,29 +496,39 @@ onBeforeUnmount(() => { if (poll) clearInterval(poll) })
 const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
   completed: 'default', running: 'secondary', queued: 'outline', failed: 'outline', cancelled: 'outline',
 }
+const statusLabel = (status: string) => {
+  const map: Record<string, string> = {
+    completed: t('common.completed'),
+    running: t('common.running'),
+    queued: t('common.queued'),
+    failed: t('common.failed'),
+    cancelled: t('common.cancelled'),
+  }
+  return map[status] ?? status
+}
 </script>
 
 <template>
   <div class="space-y-6 p-6">
     <div>
-      <h1 class="flex items-center gap-2 text-lg font-semibold"><ClipboardCheck class="size-5" />模型評測</h1>
+      <h1 class="flex items-center gap-2 text-lg font-semibold"><ClipboardCheck class="size-5" />{{ $t('eval.title') }}</h1>
       <p class="mt-0.5 text-sm text-muted-foreground">
-        評測模型的「答對率 / 品質」（與壓測的速度不同）。先在
-        <RouterLink to="/datasets" class="text-[var(--chart-1)] underline">資料集庫</RouterLink>
-        下載資料集，跑評測就不必等。小模型分數偏低屬正常，重點是換模型 / 調參時的比較。
+        {{ $t('eval.description') }}
+        <RouterLink to="/datasets" class="text-[var(--chart-1)] underline">{{ $t('sidebar.datasets') }}</RouterLink>
+        {{ $t('eval.descriptionEnd') }}
       </p>
     </div>
 
     <div class="grid gap-6 lg:grid-cols-[minmax(0,360px)_minmax(0,1fr)]">
       <!-- Config -->
       <Card class="h-fit space-y-4 p-5 text-sm">
-        <p class="flex items-center gap-2 text-sm font-semibold"><ClipboardCheck class="size-4" />評測設定</p>
+        <p class="flex items-center gap-2 text-sm font-semibold"><ClipboardCheck class="size-4" />{{ $t('eval.configTitle') }}</p>
         <div class="space-y-1.5">
           <div class="flex items-center justify-between">
-            <label class="text-xs font-medium text-muted-foreground">模型</label>
-            <span class="text-[10px] text-muted-foreground">已選 {{ selectedModels.size }}</span>
+            <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.modelLabel') }}</label>
+            <span class="text-[10px] text-muted-foreground">{{ $t('eval.selected') }} {{ selectedModels.size }}</span>
           </div>
-          <p v-if="!groups.length" class="text-xs text-muted-foreground">尚未設定模型</p>
+          <p v-if="!groups.length" class="text-xs text-muted-foreground">{{ $t('eval.noModels') }}</p>
           <div class="flex flex-wrap gap-1.5">
             <button
               v-for="g in groups"
@@ -521,7 +539,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
                 : 'border-border text-muted-foreground hover:bg-muted'"
               @click="toggleModel(g)"
             >
-              {{ g }}<span v-if="!groupReady(g)" class="ml-1 text-muted-foreground/70">· 離線</span>
+              {{ g }}<span v-if="!groupReady(g)" class="ml-1 text-muted-foreground/70">{{ $t('eval.offline') }}</span>
             </button>
           </div>
           <div v-if="loraOptions.length" class="flex flex-wrap gap-1.5">
@@ -539,21 +557,21 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
             </button>
           </div>
           <p v-if="selectedModels.size > 1" class="text-[10px] text-muted-foreground">
-            多選 = 每個模型各排一個評測，依共用並發預算並行 / 排隊。
+            {{ $t('eval.multiModelHint') }}
           </p>
         </div>
 
         <div class="space-y-1.5">
-          <label class="text-xs font-medium text-muted-foreground">目標</label>
+          <label class="text-xs font-medium text-muted-foreground">{{ $t('common.target') }}</label>
           <div class="flex gap-1.5">
-            <Button size="sm" :variant="target === 'router' ? 'default' : 'outline'" @click="target = 'router'">路由器</Button>
+            <Button size="sm" :variant="target === 'router' ? 'default' : 'outline'" @click="target = 'router'">{{ $t('eval.targetRouter') }}</Button>
             <Button
               size="sm"
               :variant="target === 'instance' ? 'default' : 'outline'"
               :disabled="selectedModels.size !== 1"
-              :title="selectedModels.size !== 1 ? '直連實例僅支援單一模型' : ''"
+              :title="selectedModels.size !== 1 ? $t('eval.instanceOnly') : ''"
               @click="target = 'instance'"
-            >直連實例</Button>
+            >{{ $t('eval.targetInstance') }}</Button>
           </div>
           <select
             v-if="target === 'instance'"
@@ -565,15 +583,15 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               :key="o.key"
               :value="o.key"
               :disabled="!o.ready"
-            >{{ o.key }}{{ o.ready ? '' : `（${o.state}・未就緒）` }}</option>
+            >{{ o.key }}{{ o.ready ? '' : ` (${o.state} - ${$t('eval.instanceNotReady')})` }}</option>
           </select>
         </div>
 
         <!-- Dataset multi-select -->
         <div class="space-y-2">
           <div class="flex items-center justify-between">
-            <label class="text-xs font-medium text-muted-foreground">資料集</label>
-            <span class="text-[10px] text-muted-foreground">已選 {{ selected.size }}</span>
+            <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.datasetLabel') }}</label>
+            <span class="text-[10px] text-muted-foreground">{{ $t('eval.selected') }} {{ selected.size }}</span>
           </div>
           <div v-for="t in tiers" :key="t.tier" class="space-y-1">
             <button
@@ -592,35 +610,35 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
                   : 'border-border text-muted-foreground hover:bg-muted'"
                 :disabled="downloadingKeys.has(d.key)"
                 :title="downloadingKeys.has(d.key)
-                  ? `${d.dataset_id}（下載中，完成後才可選用）`
+                  ? `${d.dataset_id} (${$t('eval.downloading')})`
                   : (d.note ? `${d.dataset_id} · ${d.note}` : d.dataset_id)"
                 @click="toggleDataset(d.key)"
               >
                 {{ d.label }}
-                <span v-if="d.needs_judge" class="ml-1 text-amber-500" title="需裁判模型">⚖</span>
-                <span v-if="downloadingKeys.has(d.key)" class="ml-1 text-muted-foreground">⏬下載中</span>
+                <span v-if="d.needs_judge" class="ml-1 text-amber-500" :title="$t('eval.judgeTitle')">⚖</span>
+                <span v-if="downloadingKeys.has(d.key)" class="ml-1 text-muted-foreground">{{ $t('eval.downloading') }}</span>
                 <span v-else-if="cachedKeys.has(d.key)" class="ml-1 text-[var(--chart-1)]">●</span>
               </button>
             </div>
           </div>
-          <p class="text-[10px] text-muted-foreground">● = 已快取，未快取的會在執行時下載；⏬下載中的需等完成才可選。⚖ = 需裁判模型評分。</p>
+          <p class="text-[10px] text-muted-foreground">{{ $t('eval.cachedHint') }}</p>
           <p
             v-if="longContextSelected"
             class="rounded-md bg-amber-500/10 px-2 py-1.5 text-[11px] text-amber-600"
           >
-            ⚠ 已選長上下文資料集，需模型有夠大的 <span class="font-mono">max_model_len</span>（數萬 token），否則會被截斷或回 400。
+            {{ $t('eval.longContextWarn') }}
           </p>
           <p
             v-if="toolParserSelected"
             class="rounded-md bg-amber-500/10 px-2 py-1.5 text-[11px] text-amber-600"
           >
-            ⚠ 已選真實函數調用資料集，需模型啟用 vLLM tool parser（<span class="font-mono">enable_auto_tool_choice</span> + <span class="font-mono">tool_call_parser</span>），否則分數恆為 0。
+            {{ $t('eval.toolParserWarn') }}
           </p>
         </div>
 
         <!-- Selected dataset details: subjects (subset) picker -->
         <div v-if="selectedDatasets.length" class="space-y-2">
-          <label class="text-xs font-medium text-muted-foreground">已選資料集 — 主題</label>
+          <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.subsetLabel') }}</label>
           <div
             v-for="d in selectedDatasets"
             :key="d.key"
@@ -630,7 +648,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               <span class="text-xs font-medium">{{ d.label }}</span>
               <Badge v-for="t in d.meta?.tags ?? []" :key="t" variant="muted" class="text-[10px]">{{ t }}</Badge>
               <span v-if="d.meta?.metric?.length" class="text-[10px] text-muted-foreground">· {{ d.meta.metric.join(', ') }}</span>
-              <span v-if="d.meta && d.meta.few_shot_num > 0" class="text-[10px] text-muted-foreground">· 預設 {{ d.meta.few_shot_num }}-shot</span>
+              <span v-if="d.meta && d.meta.few_shot_num > 0" class="text-[10px] text-muted-foreground">· {{ $t('eval.defaultFewShot', { n: d.meta.few_shot_num }) }}</span>
             </div>
             <p v-if="d.meta?.description" class="line-clamp-2 text-[10px] text-muted-foreground/80">
               {{ d.meta.description }}
@@ -638,13 +656,13 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
             <!-- subjects / subsets (only when there's more than one to choose) -->
             <div v-if="(d.meta?.subsets?.length ?? 0) > 1" class="space-y-1">
               <div class="flex items-center gap-2">
-                <span class="text-[10px] text-muted-foreground">主題（subset，{{ d.meta!.subsets.length }} 個，不選=全部）</span>
+                <span class="text-[10px] text-muted-foreground">{{ $t('eval.subsetHint', { n: d.meta!.subsets.length }) }}</span>
                 <button
                   v-if="(subsetSel[d.key]?.length ?? 0) > 0"
                   class="text-[10px] text-[var(--chart-1)] hover:underline"
                   @click="clearSubsets(d.key)"
                 >
-                  清除（{{ subsetSel[d.key]!.length }}）
+                  {{ $t('eval.clearSubsets', { n: subsetSel[d.key]!.length }) }}
                 </button>
               </div>
               <div class="flex max-h-24 flex-wrap gap-1 overflow-y-auto">
@@ -667,48 +685,48 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
         <!-- Params -->
         <div class="grid grid-cols-2 gap-3">
           <div class="space-y-1">
-            <label class="text-xs font-medium text-muted-foreground">每集樣本數（0=全部）</label>
+            <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.samplesPerDataset') }}</label>
             <Input v-model.number="limit" type="number" min="0" />
           </div>
           <div class="space-y-1">
-            <label class="text-xs font-medium text-muted-foreground">重複次數</label>
+            <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.repeats') }}</label>
             <Input v-model.number="repeats" type="number" min="1" />
           </div>
           <div class="space-y-1">
-            <label class="text-xs font-medium text-muted-foreground">溫度</label>
+            <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.temperature') }}</label>
             <Input v-model.number="temperature" type="number" min="0" max="2" step="0.1" />
           </div>
           <div class="space-y-1">
-            <label class="text-xs font-medium text-muted-foreground">最大輸出 tokens</label>
+            <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.maxOutputTokens') }}</label>
             <Input v-model.number="maxTokens" type="number" min="1" />
           </div>
           <div class="space-y-1">
-            <label class="text-xs font-medium text-muted-foreground">並發數（batch size）</label>
+            <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.batchSize') }}</label>
             <Input v-model.number="batchSize" type="number" min="1" />
-            <p class="text-[10px] text-muted-foreground">一次對模型發幾個並發請求；調高可跑更快，太高會排隊逾時。不影響分數。</p>
+            <p class="text-[10px] text-muted-foreground">{{ $t('eval.batchSizeHint') }}</p>
           </div>
         </div>
 
         <!-- Advanced: dataset_args -->
         <div class="space-y-2 rounded-md border border-border/60 p-3">
           <button class="text-xs font-medium text-muted-foreground hover:text-foreground" @click="showAdvanced = !showAdvanced">
-            進階設定 {{ showAdvanced ? '▾' : '▸' }}
+            {{ $t('eval.advanced') }} {{ showAdvanced ? '▾' : '▸' }}
           </button>
           <template v-if="showAdvanced">
             <div class="space-y-1">
-              <label class="text-xs font-medium text-muted-foreground">few-shot 範例數（0=各資料集預設）</label>
+              <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.fewShot') }}</label>
               <Input v-model.number="fewShot" type="number" min="0" />
             </div>
             <div class="space-y-1">
-              <label class="text-xs font-medium text-muted-foreground">dataset_args JSON（依資料集名覆寫，選填）</label>
+              <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.datasetArgsJson') }}</label>
               <textarea
                 v-model="datasetArgsJson"
                 rows="3"
                 spellcheck="false"
-                placeholder='例：{"arc": {"subset_list": ["ARC-Challenge"]}}'
+                :placeholder="$t('eval.datasetArgsPlaceholder')"
                 class="w-full rounded-md border border-border bg-background px-2 py-1.5 font-mono text-[11px]"
               />
-              <p class="text-[10px] text-muted-foreground">如 few_shot_num、subset_list、shuffle。math 多採樣可配「重複次數」+ <span class="font-mono">aggregation</span>。</p>
+              <p class="text-[10px] text-muted-foreground">{{ $t('eval.datasetArgsHint') }}</p>
             </div>
           </template>
         </div>
@@ -716,36 +734,36 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
         <!-- LLM judge — only shown when a judge-scored (⚖) dataset is selected -->
         <div v-if="judgeEnabled" class="space-y-2 rounded-md border border-amber-500/40 bg-amber-500/5 p-3">
           <p class="flex items-center gap-2 text-xs font-medium">
-            <span class="text-amber-500">⚖</span>裁判模型
-            <span class="text-[10px] font-normal text-muted-foreground">所選問答資料集需要 LLM 評分</span>
+            <span class="text-amber-500">{{ $t('eval.judgeTitle') }}</span>
+            <span class="text-[10px] font-normal text-muted-foreground">{{ $t('eval.judgeHint') }}</span>
           </p>
           <div class="flex gap-1.5">
-            <Button size="sm" :variant="judgeTarget === 'internal' ? 'default' : 'outline'" @click="judgeTarget = 'internal'">內部模型</Button>
-            <Button size="sm" :variant="judgeTarget === 'external' ? 'default' : 'outline'" @click="judgeTarget = 'external'">外部 API</Button>
+            <Button size="sm" :variant="judgeTarget === 'internal' ? 'default' : 'outline'" @click="judgeTarget = 'internal'">{{ $t('eval.judgeInternal') }}</Button>
+            <Button size="sm" :variant="judgeTarget === 'external' ? 'default' : 'outline'" @click="judgeTarget = 'external'">{{ $t('eval.judgeExternal') }}</Button>
           </div>
           <select
             v-if="judgeTarget === 'internal'"
             v-model="judgeModel"
             class="h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm"
           >
-            <option v-for="g in groups" :key="g" :value="g">{{ g }}{{ groupReady(g) ? '' : ' · 離線' }}</option>
+            <option v-for="g in groups" :key="g" :value="g">{{ g }}{{ groupReady(g) ? '' : ` ${$t('eval.offline')}` }}</option>
           </select>
           <template v-else>
-            <Input v-model="judgeApiUrl" placeholder="API URL，例：https://api.openai.com/v1" />
-            <Input v-model="judgeModel" placeholder="裁判模型 ID，例：gpt-4o-mini" />
-            <Input v-model="judgeApiKey" type="password" placeholder="API Key（選填）" />
+            <Input v-model="judgeApiUrl" :placeholder="$t('eval.judgeApiUrl')" />
+            <Input v-model="judgeModel" :placeholder="$t('eval.judgeModelId')" />
+            <Input v-model="judgeApiKey" type="password" :placeholder="$t('eval.judgeApiKey')" />
           </template>
-          <p class="text-[10px] text-muted-foreground">裁判越強分數越可靠；小模型當裁判僅供參考。</p>
+          <p class="text-[10px] text-muted-foreground">{{ $t('eval.judgeQualityHint') }}</p>
         </div>
 
         <div class="space-y-1">
-          <label class="text-xs font-medium text-muted-foreground">名稱（選填）</label>
-          <Input v-model="name" placeholder="例如：Qwen3-0.6B 基線" />
+          <label class="text-xs font-medium text-muted-foreground">{{ $t('eval.nameLabel') }}</label>
+          <Input v-model="name" :placeholder="$t('eval.namePlaceholder')" />
         </div>
 
         <Button class="w-full" :disabled="launching" @click="launch">
           <Loader2 v-if="launching" class="size-4 animate-spin" />
-          <Play v-else class="size-4" />{{ selectedModels.size > 1 ? `排入 ${selectedModels.size} 個評測` : '開始評測' }}
+          <Play v-else class="size-4" />{{ selectedModels.size > 1 ? $t('eval.startEvalMulti', { n: selectedModels.size }) : $t('eval.startEval') }}
         </Button>
       </Card>
 
@@ -755,13 +773,13 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
         <Card class="overflow-hidden">
           <div class="flex flex-wrap items-center justify-between gap-2 border-b border-border/60 px-5 py-3">
             <div class="flex items-center gap-2">
-              <span class="text-sm font-semibold">評測紀錄</span>
-              <span v-if="runningCount" class="rounded bg-[var(--chart-1)]/10 px-1.5 py-0.5 text-[10px] text-[var(--chart-1)]">執行中 {{ runningCount }}</span>
-              <span v-if="queuedCount" class="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">排隊 {{ queuedCount }}</span>
+              <span class="text-sm font-semibold">{{ $t('eval.runHistory') }}</span>
+              <span v-if="runningCount" class="rounded bg-[var(--chart-1)]/10 px-1.5 py-0.5 text-[10px] text-[var(--chart-1)]">{{ $t('eval.runningCount', { n: runningCount }) }}</span>
+              <span v-if="queuedCount" class="rounded bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">{{ $t('eval.queuedCount', { n: queuedCount }) }}</span>
             </div>
             <div class="flex items-center gap-2">
-              <label class="flex items-center gap-1 text-[11px] text-muted-foreground" title="所有並行評測的 batch_size 加總上限；填滿就排隊。即時生效，重啟回預設。">
-                並發預算
+              <label class="flex items-center gap-1 text-[11px] text-muted-foreground" :title="$t('eval.concurrencyBudgetHint')">
+                {{ $t('eval.concurrencyBudget') }}
                 <Input
                   v-model.number="budgetDraft"
                   type="number"
@@ -772,7 +790,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
                   @keyup.enter="applyBudget"
                 />
               </label>
-              <span class="text-[10px] text-muted-foreground">用量 {{ usedBudget }}/{{ budget }}</span>
+              <span class="text-[10px] text-muted-foreground">{{ $t('eval.budgetUsage', { used: usedBudget, total: budget }) }}</span>
             </div>
           </div>
           <!-- Bounded + scrollable so a long history never pushes the result far down. -->
@@ -789,11 +807,11 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
                 class="accent-[var(--chart-1)]"
                 :checked="compareIds.includes(r.id)"
                 :disabled="r.status !== 'completed'"
-                title="加入比較"
+                :title="$t('eval.addCompare')"
                 @click.stop="toggleCompare(r.id)"
               />
               <span class="tabular text-xs text-muted-foreground">#{{ r.id }}</span>
-              <Badge :variant="STATUS_VARIANT[r.status] ?? 'outline'">{{ r.status }}</Badge>
+              <Badge :variant="STATUS_VARIANT[r.status] ?? 'outline'">{{ statusLabel(r.status) }}</Badge>
               <span class="min-w-0 flex-1 truncate">
                 <span class="font-medium">{{ r.name || r.model }}</span>
                 <span class="ml-2 text-xs text-muted-foreground">{{ runDatasets(r).join(', ') }}</span>
@@ -802,7 +820,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               <Square
                 v-if="r.status === 'running' || r.status === 'queued'"
                 class="size-3.5 text-muted-foreground hover:text-status-failed"
-                :title="r.status === 'queued' ? '取消排隊' : '取消'"
+                :title="r.status === 'queued' ? $t('eval.cancelQueue') : $t('common.cancel')"
                 @click.stop="cancel(r.id)"
               />
               <Trash2
@@ -812,19 +830,19 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               />
             </button>
           </div>
-          <p v-else class="px-5 py-8 text-center text-sm text-muted-foreground">尚無評測紀錄。</p>
+          <p v-else class="px-5 py-8 text-center text-sm text-muted-foreground">{{ $t('eval.noHistory') }}</p>
         </Card>
 
         <!-- Comparison + selected result; scrolled into view on an explicit pick. -->
         <div ref="resultArea" class="scroll-mt-4 space-y-4">
         <!-- Comparison matrix (datasets × runs) -->
         <Card v-if="compareRuns.length >= 2" class="overflow-hidden">
-          <div class="border-b border-border/60 px-5 py-3 text-sm font-semibold">分數比較</div>
+          <div class="border-b border-border/60 px-5 py-3 text-sm font-semibold">{{ $t('eval.scoreComparison') }}</div>
           <div class="overflow-x-auto">
             <table class="w-full text-sm">
               <thead>
                 <tr class="border-b border-border/60 text-left text-xs text-muted-foreground">
-                  <th class="px-5 py-2">資料集</th>
+                  <th class="px-5 py-2">{{ $t('eval.compareDataset') }}</th>
                   <th v-for="r in compareRuns" :key="r.id" class="px-3 py-2 text-right">
                     {{ r.name || r.model }}<span class="text-muted-foreground/60"> #{{ r.id }}</span>
                   </th>
@@ -848,7 +866,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               </tbody>
             </table>
           </div>
-          <p class="px-5 py-2 text-[10px] text-muted-foreground">每列最高分以主色標示。</p>
+          <p class="px-5 py-2 text-[10px] text-muted-foreground">{{ $t('eval.compareBestHint') }}</p>
         </Card>
 
         <!-- Selected detail -->
@@ -864,31 +882,31 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               target="_blank"
               class="flex items-center gap-1 text-xs text-[var(--chart-1)] hover:underline"
             >
-              完整報告 <ExternalLink class="size-3" />
+              {{ $t('eval.detailReport') }} <ExternalLink class="size-3" />
             </a>
           </div>
 
           <div v-if="detail.status === 'queued'" class="flex items-center gap-2 text-sm text-muted-foreground">
-            <Loader2 class="size-4 animate-spin" />排隊中…等待並發預算或壓測結束。
+            <Loader2 class="size-4 animate-spin" />{{ $t('eval.queuedHint') }}
           </div>
           <div v-else-if="detail.status === 'running'" class="flex items-center gap-2 text-sm text-muted-foreground">
-            <Loader2 class="size-4 animate-spin" />評測執行中…（可離開此頁）
+            <Loader2 class="size-4 animate-spin" />{{ $t('eval.runningHint') }}
           </div>
           <div
             v-else-if="detail.status === 'failed'"
             class="break-words rounded-md bg-status-failed/10 p-3 text-sm text-status-failed"
           >
-            失敗：{{ detail.error }}
+            {{ $t('eval.failedPrefix') }}{{ detail.error }}
           </div>
 
           <!-- Scores -->
           <table v-if="result?.datasets.length" class="w-full text-sm">
             <thead>
               <tr class="border-b border-border/60 text-left text-xs text-muted-foreground">
-                <th class="py-1.5">資料集</th>
-                <th class="py-1.5">指標</th>
-                <th class="py-1.5 text-right">樣本</th>
-                <th class="py-1.5 text-right">分數</th>
+                <th class="py-1.5">{{ $t('common.dataset') }}</th>
+                <th class="py-1.5">{{ $t('eval.metric') }}</th>
+                <th class="py-1.5 text-right">{{ $t('eval.samples') }}</th>
+                <th class="py-1.5 text-right">{{ $t('eval.score') }}</th>
               </tr>
             </thead>
             <tbody>
@@ -905,7 +923,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
 
           <!-- Rich detail (lazy): speed / per-subset / description, per dataset -->
           <div v-if="loadingDetail" class="mt-4 flex items-center gap-2 text-xs text-muted-foreground">
-            <Loader2 class="size-3.5 animate-spin" />載入詳細數據…
+            <Loader2 class="size-3.5 animate-spin" />{{ $t('eval.loadingDetail') }}
           </div>
           <div v-else-if="reportDetail?.length" class="mt-4 space-y-4">
             <div v-for="d in reportDetail" :key="d.dataset" class="rounded-lg border border-border/60 p-3">
@@ -914,19 +932,19 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               <!-- Speed / throughput (eval also measures this) -->
               <div v-if="d.perf" class="grid grid-cols-2 gap-2 sm:grid-cols-4">
                 <div class="rounded-md bg-muted/40 p-2">
-                  <p class="text-[10px] text-muted-foreground">延遲 p50 / p99</p>
+                  <p class="text-[10px] text-muted-foreground">{{ $t('eval.latencyP50P99') }}</p>
                   <p class="tabular text-sm">{{ fmtNum(d.perf.latency.p50) }}s <span class="text-muted-foreground">/ {{ fmtNum(d.perf.latency.p99) }}s</span></p>
                 </div>
                 <div class="rounded-md bg-muted/40 p-2">
-                  <p class="text-[10px] text-muted-foreground">輸出吞吐</p>
+                  <p class="text-[10px] text-muted-foreground">{{ $t('eval.outputThroughput') }}</p>
                   <p class="tabular text-sm">{{ fmtNum(d.perf.output_tps) }} <span class="text-muted-foreground">tok/s</span></p>
                 </div>
                 <div class="rounded-md bg-muted/40 p-2">
-                  <p class="text-[10px] text-muted-foreground">平均輸入 tok</p>
+                  <p class="text-[10px] text-muted-foreground">{{ $t('eval.avgInputTok') }}</p>
                   <p class="tabular text-sm">{{ fmtNum(d.perf.input_tokens_mean, 0) }}</p>
                 </div>
                 <div class="rounded-md bg-muted/40 p-2">
-                  <p class="text-[10px] text-muted-foreground">平均輸出 tok</p>
+                  <p class="text-[10px] text-muted-foreground">{{ $t('eval.avgOutputTok') }}</p>
                   <p class="tabular text-sm">{{ fmtNum(d.perf.output_tokens_mean, 0) }}</p>
                 </div>
               </div>
@@ -934,7 +952,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
               <!-- Per-subset breakdown (only when a metric spans >1 subject) -->
               <template v-for="m in d.metrics" :key="m.name">
                 <div v-if="m.subsets.length > 1" class="mt-3">
-                  <p class="mb-1 text-[11px] font-medium text-muted-foreground">{{ m.name }} · 分科目</p>
+                  <p class="mb-1 text-[11px] font-medium text-muted-foreground">{{ m.name }} {{ $t('eval.subsetBreakdown') }}</p>
                   <div class="flex flex-wrap gap-1.5">
                     <span
                       v-for="s in m.subsets"
@@ -947,7 +965,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
 
               <!-- Benchmark description -->
               <details v-if="d.description" class="mt-3">
-                <summary class="cursor-pointer text-[11px] text-muted-foreground">這個評測在測什麼？</summary>
+                <summary class="cursor-pointer text-[11px] text-muted-foreground">{{ $t('eval.whatDoesItTest') }}</summary>
                 <pre class="mt-1 max-h-48 overflow-auto whitespace-pre-wrap rounded-md bg-muted/40 p-2 text-[11px] leading-relaxed text-muted-foreground">{{ d.description }}</pre>
               </details>
             </div>
@@ -955,7 +973,7 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
             <!-- Per-sample browser (lazy: nothing fetched until opened) -->
             <div>
               <Button variant="outline" size="sm" @click="showSamples = !showSamples">
-                {{ showSamples ? '收起逐題瀏覽' : '逐題瀏覽（看每題對錯 / 答案）' }}
+                {{ showSamples ? $t('eval.collapseSamples') : $t('eval.expandSamples') }}
               </Button>
               <div v-if="showSamples && reportDatasets.length" class="mt-3">
                 <EvalSampleBrowser :run-id="detail.id" :datasets="reportDatasets" />
@@ -965,8 +983,8 @@ const STATUS_VARIANT: Record<string, 'default' | 'secondary' | 'outline'> = {
 
           <!-- Log -->
           <details class="mt-4" :open="detail.status !== 'completed'">
-            <summary class="cursor-pointer text-xs text-muted-foreground">執行日誌</summary>
-            <pre class="mt-2 max-h-64 overflow-auto rounded-md bg-muted/60 p-3 text-[11px] leading-relaxed">{{ log || '（無日誌）' }}</pre>
+            <summary class="cursor-pointer text-xs text-muted-foreground">{{ $t('eval.executionLog') }}</summary>
+            <pre class="mt-2 max-h-64 overflow-auto rounded-md bg-muted/60 p-3 text-[11px] leading-relaxed">{{ log || $t('eval.noLog') }}</pre>
           </details>
         </Card>
         </div>
diff --git a/apps/frontend_llmops/src/views/KeysView.vue b/apps/frontend_llmops/src/views/KeysView.vue
index 676ca13..1558e71 100644
--- a/apps/frontend_llmops/src/views/KeysView.vue
+++ b/apps/frontend_llmops/src/views/KeysView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Copy, KeyRound, Loader2, Lock, Plus, Trash2 } from '@lucide/vue'
 import { api, ApiError } from '@/lib/api'
 import { useAuth } from '@/composables/useAuth'
@@ -12,6 +13,7 @@ import Input from '@/components/ui/Input.vue'
 import Badge from '@/components/ui/Badge.vue'
 import Dialog from '@/components/ui/Dialog.vue'
 
+const { t } = useI18n()
 const { authEnabled, ensureUnlocked, refreshStatus } = useAuth()
 
 const keys = ref<ApiKey[]>([])
@@ -36,7 +38,7 @@ async function load() {
     keys.value = await api.listKeys()
   } catch (e) {
     if (e instanceof ApiError && e.status === 401) locked.value = true
-    else toast.error('無法載入金鑰', { description: String(e) })
+    else toast.error(t('keys.loadFailed'), { description: String(e) })
   } finally {
     loading.value = false
   }
@@ -54,7 +56,9 @@ async function create() {
     newRpm.value = undefined
     await load()
   } catch (e) {
-    toast.error('建立金鑰失敗', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('keys.createFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   } finally {
     creating.value = false
   }
@@ -64,10 +68,10 @@ async function revoke(k: ApiKey) {
   if (!(await ensureUnlocked())) return
   try {
     await api.revokeKey(k.id)
-    toast.success(`已撤銷 ${k.name}`)
+    toast.success(t('keys.revokeSuccess', { name: k.name }))
     await load()
   } catch (e) {
-    toast.error('撤銷失敗', { description: String(e) })
+    toast.error(t('keys.revokeFailed'), { description: String(e) })
   }
 }
 
@@ -75,9 +79,9 @@ async function copyKey() {
   if (!reveal.value) return
   try {
     await navigator.clipboard.writeText(reveal.value.key)
-    toast.success('已複製到剪貼簿')
+    toast.success(t('keys.copySuccess'))
   } catch {
-    toast.error('複製失敗，請手動選取')
+    toast.error(t('keys.copyFailed'))
   }
 }
 
@@ -91,9 +95,9 @@ onMounted(async () => {
   <div class="space-y-6 p-6">
     <div class="flex flex-wrap items-center gap-3">
       <div>
-        <h1 class="flex items-center gap-2 text-lg font-semibold"><KeyRound class="size-5" />API 金鑰</h1>
+        <h1 class="flex items-center gap-2 text-lg font-semibold"><KeyRound class="size-5" />{{ $t('keys.title') }}</h1>
         <p class="mt-0.5 text-sm text-muted-foreground">
-          用於向路由器發送推論請求（<span class="font-mono">Authorization: Bearer …</span>）。金鑰只在建立時顯示一次。
+          {{ $t('keys.description') }}
         </p>
       </div>
     </div>
@@ -103,32 +107,31 @@ onMounted(async () => {
       v-if="authEnabled === false"
       class="border-status-starting/30 bg-status-starting/10 p-4 text-sm text-status-starting"
     >
-      後端未設定 <span class="font-mono">LLMOPS_ADMIN_TOKEN</span>，目前驗證為關閉狀態 —
-      金鑰可建立，但路由器尚未強制要求金鑰（需設定 <span class="font-mono">LLMOPS_REQUIRE_API_KEY=true</span>）。
+      {{ $t('keys.authDisabled') }}
     </Card>
 
     <!-- Locked -->
     <Card v-if="locked" class="flex flex-col items-center gap-3 p-10 text-center">
       <Lock class="size-8 text-muted-foreground" />
-      <p class="text-sm text-muted-foreground">需要管理員權杖才能管理金鑰。</p>
-      <Button size="sm" @click="load">解鎖</Button>
+      <p class="text-sm text-muted-foreground">{{ $t('keys.locked') }}</p>
+      <Button size="sm" @click="load">{{ $t('keys.unlock') }}</Button>
     </Card>
 
     <template v-else>
       <!-- Create -->
       <Card class="p-5">
-        <p class="mb-3 text-sm font-semibold">建立新金鑰</p>
+        <p class="mb-3 text-sm font-semibold">{{ $t('keys.createNew') }}</p>
         <div class="flex items-end gap-2">
           <label class="flex-1">
-            <span class="text-xs text-muted-foreground">名稱（用於用量歸屬）</span>
-            <Input v-model="newName" placeholder="例如：team-rag、ci-bot" class="mt-1" @keydown.enter="create" />
+            <span class="text-xs text-muted-foreground">{{ $t('keys.nameLabel') }}</span>
+            <Input v-model="newName" :placeholder="$t('keys.namePlaceholder')" class="mt-1" @keydown.enter="create" />
           </label>
           <label class="w-32">
-            <span class="text-xs text-muted-foreground">速率上限（次/分）</span>
-            <Input v-model.number="newRpm" type="number" min="1" placeholder="不限" class="mt-1" @keydown.enter="create" />
+            <span class="text-xs text-muted-foreground">{{ $t('keys.rateLimit') }}</span>
+            <Input v-model.number="newRpm" type="number" min="1" :placeholder="$t('keys.ratePlaceholder')" class="mt-1" @keydown.enter="create" />
           </label>
           <Button :disabled="!newName.trim() || creating" @click="create">
-            <Loader2 v-if="creating" class="size-4 animate-spin" /><Plus v-else class="size-4" />建立
+            <Loader2 v-if="creating" class="size-4 animate-spin" /><Plus v-else class="size-4" />{{ $t('common.create') }}
           </Button>
         </div>
       </Card>
@@ -136,7 +139,7 @@ onMounted(async () => {
       <!-- List -->
       <Card class="overflow-hidden">
         <div class="flex items-center justify-between border-b border-border/60 px-5 py-3">
-          <p class="text-sm font-semibold">已發行金鑰</p>
+          <p class="text-sm font-semibold">{{ $t('keys.issuedKeys') }}</p>
           <Loader2 v-if="loading" class="size-4 animate-spin text-muted-foreground" />
         </div>
         <div v-if="keys.length" class="divide-y divide-border/60">
@@ -144,47 +147,47 @@ onMounted(async () => {
             <div class="min-w-0 flex-1">
               <div class="flex items-center gap-2">
                 <span class="truncate text-sm font-medium">{{ k.name }}</span>
-                <Badge v-if="k.revoked" variant="muted">已撤銷</Badge>
-                <Badge v-if="k.rpm_limit" variant="muted" class="tabular">{{ k.rpm_limit }}/分</Badge>
+                <Badge v-if="k.revoked" variant="muted">{{ $t('keys.revoked') }}</Badge>
+                <Badge v-if="k.rpm_limit" variant="muted" class="tabular">{{ k.rpm_limit }}{{ $t('keys.perMin') }}</Badge>
               </div>
               <span class="font-mono text-xs text-muted-foreground">{{ k.prefix }}</span>
             </div>
             <div class="hidden text-right text-xs sm:block">
               <p class="tabular">
                 <span class="font-medium text-foreground">{{ formatNumber(k.request_count) }}</span>
-                <span class="text-muted-foreground"> 次 · {{ formatNumber(k.total_tokens, true) }} tokens</span>
+                <span class="text-muted-foreground"> {{ $t('keys.requestCount') }} · {{ formatNumber(k.total_tokens, true) }} {{ $t('common.tokens') }}</span>
               </p>
               <p class="text-muted-foreground">
-                最後使用：{{ k.usage_last_ts ? formatTime(k.usage_last_ts) : '—' }}
+                {{ $t('keys.lastUsed') }}{{ k.usage_last_ts ? formatTime(k.usage_last_ts) : '—' }}
               </p>
             </div>
             <Button
               v-if="!k.revoked"
               size="icon-sm"
               variant="ghost"
-              title="撤銷金鑰"
+              :title="$t('keys.revokeTitle')"
               @click="revoke(k)"
             >
               <Trash2 class="size-4" />
             </Button>
           </div>
         </div>
-        <p v-else-if="!loading" class="px-5 py-10 text-center text-sm text-muted-foreground">尚無金鑰。</p>
+        <p v-else-if="!loading" class="px-5 py-10 text-center text-sm text-muted-foreground">{{ $t('keys.noKeys') }}</p>
       </Card>
     </template>
 
     <!-- One-time reveal -->
-    <Dialog v-model:open="revealOpen" title="金鑰已建立">
+    <Dialog v-model:open="revealOpen" :title="$t('keys.keyCreated')">
       <div class="space-y-4">
         <p class="text-sm text-status-failed">
-          請立即複製此金鑰，關閉後將無法再次顯示。
+          {{ $t('keys.copyImmediate') }}
         </p>
         <div class="flex items-center gap-2 rounded-lg border border-border/60 bg-background/40 p-3">
           <code class="flex-1 break-all font-mono text-xs">{{ reveal?.key }}</code>
-          <Button size="icon-sm" variant="ghost" title="複製" @click="copyKey"><Copy class="size-4" /></Button>
+          <Button size="icon-sm" variant="ghost" :title="$t('codeBlock.copy')" @click="copyKey"><Copy class="size-4" /></Button>
         </div>
         <div class="flex justify-end">
-          <Button @click="revealOpen = false">完成</Button>
+          <Button @click="revealOpen = false">{{ $t('common.done') }}</Button>
         </div>
       </div>
     </Dialog>
diff --git a/apps/frontend_llmops/src/views/LibraryView.vue b/apps/frontend_llmops/src/views/LibraryView.vue
index a308421..83b3b3f 100644
--- a/apps/frontend_llmops/src/views/LibraryView.vue
+++ b/apps/frontend_llmops/src/views/LibraryView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { ArrowDownUp, Boxes, Brain, Clock, Download, Files, HardDrive, Loader2, Package, Trash2 } from '@lucide/vue'
 import type { Component } from 'vue'
 import { api, ApiError } from '@/lib/api'
@@ -13,6 +14,7 @@ import Input from '@/components/ui/Input.vue'
 import Badge from '@/components/ui/Badge.vue'
 import StatCard from '@/components/StatCard.vue'
 
+const { t } = useI18n()
 const { ensureUnlocked } = useAuth()
 
 const cache = ref<CacheInfo | null>(null)
@@ -33,9 +35,9 @@ const totalSize = computed(() => (cache.value?.models ?? []).reduce((s, m) => s
 /** Best-effort model family from the repo id, for the card icon + tag. */
 function kindMeta(repoId: string): { label: string; icon: Component; color: string } {
   const r = repoId.toLowerCase()
-  if (/rerank/.test(r)) return { label: '重排序', icon: ArrowDownUp, color: 'var(--chart-4)' }
-  if (/embed|bge|m3e|gte|e5|sentence/.test(r)) return { label: '嵌入', icon: Boxes, color: 'var(--chart-2)' }
-  return { label: 'LLM', icon: Brain, color: 'var(--chart-1)' }
+  if (/rerank/.test(r)) return { label: t('common.reranking'), icon: ArrowDownUp, color: 'var(--chart-4)' }
+  if (/embed|bge|m3e|gte|e5|sentence/.test(r)) return { label: t('common.embedding'), icon: Boxes, color: 'var(--chart-2)' }
+  return { label: t('models.llm'), icon: Brain, color: 'var(--chart-1)' }
 }
 function repoLeaf(repoId: string) {
   return repoId.split('/').pop() ?? repoId
@@ -53,7 +55,7 @@ async function loadCache() {
   try {
     cache.value = await api.getCache()
   } catch (e) {
-    toast.error('無法讀取快取', { description: String(e) })
+    toast.error(t('library.loadCacheFailed'), { description: String(e) })
   }
 }
 
@@ -75,10 +77,14 @@ async function startDownload() {
   try {
     await api.startDownload(repo)
     repoInput.value = ''
-    toast.success(`開始下載 ${repo}`, { description: '可離開此頁，下載會在背景繼續。' })
+    toast.success(t('library.downloadStarted', { repo }), {
+      description: t('library.downloadStartedDesc'),
+    })
     await loadDownloads()
   } catch (e) {
-    toast.error('無法開始下載', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('library.downloadFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   } finally {
     starting.value = false
   }
@@ -86,13 +92,15 @@ async function startDownload() {
 
 async function remove(model: CachedModel) {
   if (!(await ensureUnlocked())) return
-  if (!confirm(`確定刪除已快取的 ${model.repo_id}？此操作會釋放磁碟空間。`)) return
+  if (!confirm(t('library.deleteConfirm', { repo: model.repo_id }))) return
   try {
     await api.deleteCache(model.repo_id)
-    toast.success(`已刪除 ${model.repo_id}`)
+    toast.success(t('library.deleted', { repo: model.repo_id }))
     await loadCache()
   } catch (e) {
-    toast.error('刪除失敗', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('library.deleteFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   }
 }
 
@@ -109,42 +117,41 @@ onBeforeUnmount(() => {
 <template>
   <div class="space-y-6 p-6">
     <div>
-      <h1 class="flex items-center gap-2 text-lg font-semibold"><Package class="size-5" />模型庫</h1>
+      <h1 class="flex items-center gap-2 text-lg font-semibold"><Package class="size-5" />{{ $t('library.title') }}</h1>
       <p class="mt-0.5 text-sm text-muted-foreground">
-        預先下載 Hugging Face 權重到共用快取，啟動模型時就不必等待。Gated 模型需在後端設定
-        <span class="font-mono">HF_TOKEN</span>。
+        {{ $t('library.description') }} <span class="font-mono">HF_TOKEN</span> {{ $t('library.descriptionEnd') }}
       </p>
     </div>
 
     <!-- Stats -->
     <div v-if="cache" class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-      <StatCard :icon="Package" label="已快取模型" :value="String(cache.models.length)" />
-      <StatCard :icon="HardDrive" label="佔用空間" :value="formatBytes(totalSize)" />
-      <StatCard :icon="Download" label="下載中" :value="String(activeDownloads.length)" />
+      <StatCard :icon="Package" :label="$t('library.cachedModels')" :value="String(cache.models.length)" />
+      <StatCard :icon="HardDrive" :label="$t('library.occupiedSpace')" :value="formatBytes(totalSize)" />
+      <StatCard :icon="Download" :label="$t('library.downloading')" :value="String(activeDownloads.length)" />
       <StatCard
         :icon="HardDrive"
-        label="磁碟剩餘"
+        :label="$t('library.diskRemaining')"
         :value="formatBytes(cache.disk.free)"
-        :hint="`已用 ${Math.round(diskPct)}% / ${formatBytes(cache.disk.total)}`"
+        :hint="$t('library.diskUsed') + ' ' + Math.round(diskPct) + '% / ' + formatBytes(cache.disk.total)"
         color="var(--chart-1)"
       />
     </div>
 
     <!-- Download -->
     <Card class="p-5">
-      <p class="mb-3 text-sm font-semibold">下載新模型</p>
+      <p class="mb-3 text-sm font-semibold">{{ $t('library.downloadNew') }}</p>
       <div class="flex items-end gap-2">
         <label class="flex-1">
-          <span class="text-xs text-muted-foreground">Hugging Face repo id</span>
+          <span class="text-xs text-muted-foreground">{{ $t('library.repoId') }}</span>
           <Input
             v-model="repoInput"
-            placeholder="例如：Qwen/Qwen3-0.6B"
+            :placeholder="$t('library.repoPlaceholder')"
             class="mt-1 font-mono"
             @keydown.enter="startDownload"
           />
         </label>
         <Button :disabled="!repoInput.trim() || starting" @click="startDownload">
-          <Loader2 v-if="starting" class="size-4 animate-spin" /><Download v-else class="size-4" />下載
+          <Loader2 v-if="starting" class="size-4 animate-spin" /><Download v-else class="size-4" />{{ $t('common.download') }}
         </Button>
       </div>
 
@@ -154,11 +161,11 @@ onBeforeUnmount(() => {
           <div class="flex items-center justify-between gap-3 text-sm">
             <span class="truncate font-mono text-xs">{{ job.repo_id }}</span>
             <span class="flex shrink-0 items-center gap-2">
-              <Badge v-if="job.state === 'completed'" variant="ready">完成</Badge>
-              <Badge v-else-if="job.state === 'failed'" variant="failed">失敗</Badge>
+              <Badge v-if="job.state === 'completed'" variant="ready">{{ $t('library.downloadComplete') }}</Badge>
+              <Badge v-else-if="job.state === 'failed'" variant="failed">{{ $t('library.downloadFailedBadge') }}</Badge>
               <span v-else class="flex items-center gap-1.5 text-muted-foreground">
                 <Loader2 class="size-3.5 animate-spin" />
-                {{ pct(job) != null ? `${pct(job)!.toFixed(0)}%` : '下載中…' }}
+                {{ pct(job) != null ? `${pct(job)!.toFixed(0)}%` : $t('library.downloading') + '…' }}
               </span>
             </span>
           </div>
@@ -181,7 +188,7 @@ onBeforeUnmount(() => {
 
     <!-- Cached models — card grid -->
     <div>
-      <p class="mb-2 text-sm font-semibold">已快取模型</p>
+      <p class="mb-2 text-sm font-semibold">{{ $t('library.cachedModels') }}</p>
       <div v-if="cache?.models.length" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         <div
           v-for="m in cache.models"
@@ -200,7 +207,7 @@ onBeforeUnmount(() => {
               size="icon-sm"
               variant="ghost"
               class="opacity-0 transition group-hover:opacity-100"
-              title="刪除快取"
+              :title="$t('library.deleteCache')"
               @click="remove(m)"
             >
               <Trash2 class="size-4" />
@@ -209,22 +216,22 @@ onBeforeUnmount(() => {
 
           <div class="mt-3 flex flex-wrap gap-1.5">
             <Badge variant="outline" class="text-[10px]">{{ kindMeta(m.repo_id).label }}</Badge>
-            <Badge variant="muted" class="text-[10px]"><Files class="size-3" />{{ m.nb_files }} 檔</Badge>
+            <Badge variant="muted" class="text-[10px]"><Files class="size-3" />{{ m.nb_files }} {{ $t('library.files') }}</Badge>
           </div>
 
           <dl class="mt-3 grid grid-cols-2 gap-x-3 gap-y-1.5 text-xs">
             <div>
-              <dt class="text-muted-foreground">大小</dt>
+              <dt class="text-muted-foreground">{{ $t('library.size') }}</dt>
               <dd class="tabular font-medium">{{ formatBytes(m.size_on_disk) }}</dd>
             </div>
             <div>
-              <dt class="flex items-center gap-1 text-muted-foreground"><Clock class="size-3" />更新</dt>
+              <dt class="flex items-center gap-1 text-muted-foreground"><Clock class="size-3" />{{ $t('library.updated') }}</dt>
               <dd class="font-medium">{{ timeAgo(m.last_modified) }}</dd>
             </div>
           </dl>
         </div>
       </div>
-      <Card v-else class="p-10 text-center text-sm text-muted-foreground">快取中尚無模型。</Card>
+      <Card v-else class="p-10 text-center text-sm text-muted-foreground">{{ $t('library.noCachedModels') }}</Card>
     </div>
   </div>
 </template>
diff --git a/apps/frontend_llmops/src/views/LoraLibraryView.vue b/apps/frontend_llmops/src/views/LoraLibraryView.vue
index 03c30ef..d5c40fe 100644
--- a/apps/frontend_llmops/src/views/LoraLibraryView.vue
+++ b/apps/frontend_llmops/src/views/LoraLibraryView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, onMounted, onBeforeUnmount, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Boxes, Cpu, Download, HardDrive, Layers, Loader2, Trash2 } from '@lucide/vue'
 import { api, ApiError } from '@/lib/api'
 import { useAuth } from '@/composables/useAuth'
@@ -12,6 +13,7 @@ import Input from '@/components/ui/Input.vue'
 import Badge from '@/components/ui/Badge.vue'
 import StatCard from '@/components/StatCard.vue'
 
+const { t } = useI18n()
 const { ensureUnlocked } = useAuth()
 
 const lib = ref<LoraLibraryInfo | null>(null)
@@ -39,7 +41,7 @@ async function loadLib() {
   try {
     lib.value = await api.listLora()
   } catch (e) {
-    toast.error('無法讀取 LoRA 庫', { description: String(e) })
+    toast.error(t('loraLibrary.loadFailed'), { description: String(e) })
   }
 }
 
@@ -62,10 +64,14 @@ async function startDownload() {
     await api.startLoraDownload(repo, nameInput.value.trim() || undefined)
     repoInput.value = ''
     nameInput.value = ''
-    toast.success(`開始下載 ${repo}`, { description: '可離開此頁，下載會在背景繼續。' })
+    toast.success(t('loraLibrary.downloadStarted', { repo }), {
+      description: t('loraLibrary.downloadStartedDesc'),
+    })
     await loadDownloads()
   } catch (e) {
-    toast.error('無法開始下載', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('loraLibrary.downloadFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   } finally {
     starting.value = false
   }
@@ -73,13 +79,15 @@ async function startDownload() {
 
 async function remove(name: string) {
   if (!(await ensureUnlocked())) return
-  if (!confirm(`確定刪除 LoRA「${name}」？此操作會移除磁碟上的 adapter 檔案。`)) return
+  if (!confirm(t('loraLibrary.deleteConfirm', { name }))) return
   try {
     await api.deleteLora(name)
-    toast.success(`已刪除 ${name}`)
+    toast.success(t('loraLibrary.deleted', { name }))
     await loadLib()
   } catch (e) {
-    toast.error('刪除失敗', { description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e) })
+    toast.error(t('loraLibrary.deleteFailed'), {
+      description: e instanceof ApiError ? `${e.status}: ${e.message}` : String(e),
+    })
   }
 }
 
@@ -96,52 +104,52 @@ onBeforeUnmount(() => {
 <template>
   <div class="space-y-6 p-6">
     <div>
-      <h1 class="flex items-center gap-2 text-lg font-semibold"><Layers class="size-5" />LoRA 庫</h1>
+      <h1 class="flex items-center gap-2 text-lg font-semibold"><Layers class="size-5" />{{ $t('loraLibrary.title') }}</h1>
       <p class="mt-0.5 text-sm text-muted-foreground">
-        管理本地 LoRA adapter。從 Hugging Face 下載、或把 adapter 資料夾直接放進
-        <span class="font-mono">{{ lib?.root ?? 'LoRA 目錄' }}</span> 也會出現在這。
-        新增 / 編輯模型時可在「LoRA Adapters」區從這裡挑選掛載。
+        {{ $t('loraLibrary.description') }}
+        <span class="font-mono">{{ lib?.root ?? $t('sidebar.loraLibrary') }}</span>
+        {{ $t('loraLibrary.descriptionEnd') }}
       </p>
     </div>
 
     <!-- Stats -->
     <div v-if="lib" class="grid grid-cols-2 gap-3 sm:grid-cols-4">
-      <StatCard :icon="Layers" label="Adapters" :value="String(lib.adapters.length)" />
-      <StatCard :icon="HardDrive" label="佔用空間" :value="formatBytes(totalSize)" />
-      <StatCard :icon="Download" label="下載中" :value="String(activeDownloads.length)" />
+      <StatCard :icon="Layers" :label="$t('loraLibrary.adapters')" :value="String(lib.adapters.length)" />
+      <StatCard :icon="HardDrive" :label="$t('loraLibrary.diskUsed')" :value="formatBytes(totalSize)" />
+      <StatCard :icon="Download" :label="$t('library.downloading')" :value="String(activeDownloads.length)" />
       <StatCard
         :icon="HardDrive"
-        label="磁碟剩餘"
+        :label="$t('loraLibrary.diskRemaining')"
         :value="formatBytes(lib.disk.free)"
-        :hint="`已用 ${Math.round(diskPct)}% / ${formatBytes(lib.disk.total)}`"
+        :hint="$t('library.diskUsed') + ' ' + Math.round(diskPct) + '% / ' + formatBytes(lib.disk.total)"
         color="var(--chart-1)"
       />
     </div>
 
     <!-- Download -->
     <Card class="p-5">
-      <p class="mb-3 text-sm font-semibold">下載 adapter</p>
+      <p class="mb-3 text-sm font-semibold">{{ $t('loraLibrary.downloadAdapter') }}</p>
       <div class="flex items-end gap-2">
         <label class="flex-1">
-          <span class="text-xs text-muted-foreground">Hugging Face repo id</span>
+          <span class="text-xs text-muted-foreground">{{ $t('loraLibrary.repoId') }}</span>
           <Input
             v-model="repoInput"
-            placeholder="例如：jeeejeee/llama32-3b-text2sql-spider"
+            :placeholder="$t('loraLibrary.repoPlaceholder')"
             class="mt-1 font-mono"
             @keydown.enter="startDownload"
           />
         </label>
         <label class="w-44">
-          <span class="text-xs text-muted-foreground">本地名稱（選填）</span>
+          <span class="text-xs text-muted-foreground">{{ $t('loraLibrary.localName') }}</span>
           <Input
             v-model="nameInput"
-            placeholder="預設取 repo 結尾"
+            :placeholder="$t('loraLibrary.localNamePlaceholder')"
             class="mt-1 font-mono"
             @keydown.enter="startDownload"
           />
         </label>
         <Button :disabled="!repoInput.trim() || starting" @click="startDownload">
-          <Loader2 v-if="starting" class="size-4 animate-spin" /><Download v-else class="size-4" />下載
+          <Loader2 v-if="starting" class="size-4 animate-spin" /><Download v-else class="size-4" />{{ $t('common.download') }}
         </Button>
       </div>
 
@@ -151,11 +159,11 @@ onBeforeUnmount(() => {
           <div class="flex items-center justify-between gap-3 text-sm">
             <span class="truncate font-mono text-xs">{{ job.name }} <span class="text-muted-foreground">← {{ job.repo_id }}</span></span>
             <span class="flex shrink-0 items-center gap-2">
-              <Badge v-if="job.state === 'completed'" variant="ready">完成</Badge>
-              <Badge v-else-if="job.state === 'failed'" variant="failed">失敗</Badge>
+              <Badge v-if="job.state === 'completed'" variant="ready">{{ $t('library.downloadComplete') }}</Badge>
+              <Badge v-else-if="job.state === 'failed'" variant="failed">{{ $t('library.downloadFailedBadge') }}</Badge>
               <span v-else class="flex items-center gap-1.5 text-muted-foreground">
                 <Loader2 class="size-3.5 animate-spin" />
-                {{ pct(job) != null ? `${pct(job)!.toFixed(0)}%` : '下載中…' }}
+                {{ pct(job) != null ? `${pct(job)!.toFixed(0)}%` : $t('library.downloading') + '…' }}
               </span>
             </span>
           </div>
@@ -178,7 +186,7 @@ onBeforeUnmount(() => {
 
     <!-- Adapters — card grid -->
     <div>
-      <p class="mb-2 text-sm font-semibold">本地 adapters</p>
+      <p class="mb-2 text-sm font-semibold">{{ $t('loraLibrary.localAdapters') }}</p>
       <div v-if="lib?.adapters.length" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
         <div
           v-for="a in lib.adapters"
@@ -192,14 +200,14 @@ onBeforeUnmount(() => {
             <div class="min-w-0 flex-1">
               <p class="truncate font-medium" :title="a.name">{{ a.name }}</p>
               <p class="flex items-center gap-1 truncate font-mono text-xs text-muted-foreground" :title="a.base_model ?? ''">
-                <Cpu class="size-3 shrink-0" />{{ a.base_model ?? '未知 base' }}
+                <Cpu class="size-3 shrink-0" />{{ a.base_model ?? $t('loraLibrary.unknownBase') }}
               </p>
             </div>
             <Button
               size="icon-sm"
               variant="ghost"
               class="opacity-0 transition group-hover:opacity-100"
-              title="刪除 adapter"
+              :title="$t('common.delete')"
               @click="remove(a.name)"
             >
               <Trash2 class="size-4" />
@@ -217,18 +225,18 @@ onBeforeUnmount(() => {
 
           <dl class="mt-3 grid grid-cols-2 gap-x-3 gap-y-1.5 text-xs">
             <div>
-              <dt class="text-muted-foreground">大小</dt>
+              <dt class="text-muted-foreground">{{ $t('library.size') }}</dt>
               <dd class="tabular font-medium">{{ formatBytes(a.size_on_disk) }}</dd>
             </div>
             <div class="min-w-0">
-              <dt class="text-muted-foreground">路徑</dt>
+              <dt class="text-muted-foreground">{{ $t('common.path') }}</dt>
               <dd class="truncate font-mono" :title="a.path">{{ a.path }}</dd>
             </div>
           </dl>
         </div>
       </div>
       <Card v-else class="p-10 text-center text-sm text-muted-foreground">
-        庫中尚無 adapter。從上方下載，或把資料夾放進 <span class="font-mono">{{ lib?.root }}</span>。
+        {{ $t('loraLibrary.noAdapters') }} <span class="font-mono">{{ lib?.root }}</span>。
       </Card>
     </div>
   </div>
diff --git a/apps/frontend_llmops/src/views/MonitoringView.vue b/apps/frontend_llmops/src/views/MonitoringView.vue
index 2a17370..fb8373e 100644
--- a/apps/frontend_llmops/src/views/MonitoringView.vue
+++ b/apps/frontend_llmops/src/views/MonitoringView.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { Activity, Cpu, ExternalLink, Gauge, LayoutDashboard, Server, TrendingUp } from '@lucide/vue'
 import { useTheme } from '@/composables/useTheme'
 
@@ -8,14 +9,7 @@ import { useTheme } from '@/composables/useTheme'
 // from the provisioned dashboards (deploy/grafana/dashboards).
 const BASE = '/grafana/d'
 
-const dashboards = [
-  { id: 'overview', label: '總覽', icon: LayoutDashboard, path: `${BASE}/vllm-overview/vllm-overview` },
-  { id: 'capacity', label: 'vLLM 容量', icon: Gauge, path: `${BASE}/vllm-scheduling-capacity/vllm-scheduling-and-capacity` },
-  { id: 'perf', label: 'vLLM 效能', icon: TrendingUp, path: `${BASE}/performance-statistics/performance-statistics` },
-  { id: 'query', label: 'vLLM 請求', icon: Activity, path: `${BASE}/query-statistics4/query-statistics-new4` },
-  { id: 'gpu', label: 'GPU', icon: Server, path: `${BASE}/Oxed_c6Wz/nvidia-dcgm-exporter-dashboard` },
-  { id: 'host', label: '主機', icon: Cpu, path: `${BASE}/rYdddlPWk/node-exporter-full` },
-] as const
+type DashboardId = 'overview' | 'capacity' | 'perf' | 'query' | 'gpu' | 'host'
 
 const ranges = [
   { label: '15m', from: 'now-15m' },
@@ -24,11 +18,23 @@ const ranges = [
   { label: '24h', from: 'now-24h' },
 ] as const
 
-const active = ref<(typeof dashboards)[number]['id']>('overview')
+const { t } = useI18n()
+const dashboards = computed(
+  () =>
+    [
+      { id: 'overview', label: t('monitoring.overview'), icon: LayoutDashboard, path: `${BASE}/vllm-overview/vllm-overview` },
+      { id: 'capacity', label: t('monitoring.vllmCapacity'), icon: Gauge, path: `${BASE}/vllm-scheduling-capacity/vllm-scheduling-and-capacity` },
+      { id: 'perf', label: t('monitoring.vllmPerf'), icon: TrendingUp, path: `${BASE}/performance-statistics/performance-statistics` },
+      { id: 'query', label: t('monitoring.vllmQuery'), icon: Activity, path: `${BASE}/query-statistics4/query-statistics-new4` },
+      { id: 'gpu', label: t('monitoring.gpu'), icon: Server, path: `${BASE}/Oxed_c6Wz/nvidia-dcgm-exporter-dashboard` },
+      { id: 'host', label: t('monitoring.host'), icon: Cpu, path: `${BASE}/rYdddlPWk/node-exporter-full` },
+    ] as const,
+)
+const active = ref<DashboardId>('overview')
 const range = ref<(typeof ranges)[number]['from']>('now-1h')
 const { isDark } = useTheme()
 
-const current = computed(() => dashboards.find((d) => d.id === active.value)!)
+const current = computed(() => dashboards.value.find((d) => d.id === active.value)!)
 
 // kiosk hides Grafana's own chrome (nav/time-picker) for a clean embed; theme
 // follows the app's light/dark so the panels don't clash with the surrounding
@@ -85,7 +91,7 @@ const openUrl = computed(() => current.value.path + `?from=${range.value}&to=now
         class="ml-auto flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
       >
         <ExternalLink class="size-4" />
-        在 Grafana 開啟
+        {{ $t('monitoring.openGrafana') }}
       </a>
     </div>
 
@@ -94,7 +100,7 @@ const openUrl = computed(() => current.value.path + `?from=${range.value}&to=now
       :key="active"
       :src="src"
       class="min-h-0 w-full flex-1 rounded-xl border border-border/70 bg-card"
-      title="Grafana dashboard"
+      :title="current.label"
     />
   </div>
 </template>
diff --git a/apps/frontend_llmops/src/views/OverviewView.vue b/apps/frontend_llmops/src/views/OverviewView.vue
index deaa15d..d7c87fb 100644
--- a/apps/frontend_llmops/src/views/OverviewView.vue
+++ b/apps/frontend_llmops/src/views/OverviewView.vue
@@ -166,7 +166,7 @@ function codeVariant(code: number) {
                 <th class="pb-2 pr-4 font-medium">{{ $t('overview.tablePath') }}</th>
                 <th class="pb-2 pr-4 font-medium">{{ $t('overview.tableStatus') }}</th>
                 <th class="pb-2 pr-4 text-right font-medium">{{ $t('overview.tableLatency') }}</th>
-                <th class="pb-2 text-right font-medium">Tokens</th>
+                <th class="pb-2 text-right font-medium">{{ $t('common.tokens') }}</th>
               </tr>
             </thead>
             <tbody>
diff --git a/apps/frontend_llmops/src/views/PlaygroundView.vue b/apps/frontend_llmops/src/views/PlaygroundView.vue
index 774b600..41645df 100644
--- a/apps/frontend_llmops/src/views/PlaygroundView.vue
+++ b/apps/frontend_llmops/src/views/PlaygroundView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { Bot, Loader2, Send, Square, Trash2, User, X } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import { api } from '@/lib/api'
 import { useModelsStore } from '@/stores/models'
 import { useModelOptions } from '@/composables/useModelOptions'
@@ -16,18 +17,16 @@ import Badge from '@/components/ui/Badge.vue'
 import { toast } from '@/lib/toast'
 import { formatLatency } from '@/lib/utils'
 
+const { t } = useI18n()
 const models = useModelsStore()
 const tab = ref('chat')
 
-// Only ready models are routable — each ready group plus the LoRA adapters
-// mounted on it, kept reactive so options appear/disappear as models start/stop.
 const { options: modelOptions } = useModelOptions()
 const model = ref('')
 const maxTokens = ref(256)
 const temperature = ref(0.7)
 const stream = ref(true)
 
-// Keep the single-chat selection valid as the ready set changes.
 watch(
   modelOptions,
   (opts) => {
@@ -36,24 +35,22 @@ watch(
   { immediate: true },
 )
 
-// ---- Chat ----
 interface ChatMsg {
   role: 'user' | 'assistant'
   content: string
-  reasoning?: string // thinking, when the model uses a reasoning parser (reasoning_content)
+  reasoning?: string
 }
+
 interface Usage {
   completion_tokens?: number
   total_tokens?: number
 }
+
 const messages = ref<ChatMsg[]>([])
 const chatInput = ref('')
 const systemPrompt = ref('')
 const busy = ref(false)
 
-// Auto-scroll a message pane to the bottom as content streams in — but only when
-// the user is already at the bottom, so scrolling up to read history isn't yanked
-// back down. `_stick` is captured *before* the DOM grows (in beforeUpdate).
 type StickyEl = HTMLElement & { _stick?: boolean }
 const vAutoscroll = {
   mounted: (el: StickyEl) => {
@@ -66,33 +63,41 @@ const vAutoscroll = {
     if (el._stick) el.scrollTop = el.scrollHeight
   },
 }
+
 const lastLatency = ref<number | null>(null)
 const lastUsage = ref<Usage | null>(null)
-// One controller per send (single or compare) so the Stop button aborts all.
 let abortController: AbortController | null = null
 
-// ---- Compare mode (one prompt → many models) ----
 interface CompareLane {
   model: string
   messages: ChatMsg[]
   busy: boolean
   latency: number | null
-  ttft: number | null // time-to-first-token
-  tps: number | null // generated tokens/sec
+  ttft: number | null
+  tps: number | null
   tokens: number | null
 }
+
 const compareMode = ref(false)
 const lanes = ref<CompareLane[]>([])
-
-const anyBusy = computed(() =>
-  compareMode.value ? lanes.value.some((l) => l.busy) : busy.value,
-)
+const anyBusy = computed(() => (compareMode.value ? lanes.value.some((l) => l.busy) : busy.value))
 
 function toggleLane(m: string) {
   const i = lanes.value.findIndex((l) => l.model === m)
   if (i >= 0) lanes.value.splice(i, 1)
-  else lanes.value.push({ model: m, messages: [], busy: false, latency: null, ttft: null, tps: null, tokens: null })
+  else {
+    lanes.value.push({
+      model: m,
+      messages: [],
+      busy: false,
+      latency: null,
+      ttft: null,
+      tps: null,
+      tokens: null,
+    })
+  }
 }
+
 function isSelected(m: string) {
   return lanes.value.some((l) => l.model === m)
 }
@@ -102,10 +107,6 @@ function tokensPerSec(usage: Usage | null, latencyMs: number): number | null {
   return usage.completion_tokens / (latencyMs / 1000)
 }
 
-/** Shared streaming core used by both single chat and each compare lane.
- *  `history` must already include the latest user message but NOT the empty
- *  assistant bubble that `assistant` points at. Returns the OpenAI usage block
- *  (token counts) when the backend reports it. */
 async function streamChatCompletion(
   modelId: string,
   history: ChatMsg[],
@@ -114,7 +115,7 @@ async function streamChatCompletion(
 ): Promise<Usage | null> {
   const msgs: { role: string; content: string }[] = []
   if (systemPrompt.value.trim()) msgs.push({ role: 'system', content: systemPrompt.value.trim() })
-  for (const m of history) msgs.push({ role: m.role, content: m.content })
+  for (const msg of history) msgs.push({ role: msg.role, content: msg.content })
 
   const res = await api.routerFetch('/v1/chat/completions', {
     method: 'POST',
@@ -148,22 +149,20 @@ async function streamChatCompletion(
         if (payload === '[DONE]') continue
         try {
           const json = JSON.parse(payload)
-          if (json.usage) usage = json.usage // final chunk carries token counts
-          const d = json.choices?.[0]?.delta ?? {}
-          // Reasoning parser splits <think> into a separate field; vLLM uses
-          // `reasoning`, some OpenAI-compatible servers use `reasoning_content`.
-          const think = d.reasoning ?? d.reasoning_content ?? ''
+          if (json.usage) usage = json.usage
+          const delta = json.choices?.[0]?.delta ?? {}
+          const think = delta.reasoning ?? delta.reasoning_content ?? ''
           if (think) {
             opts.onFirstToken?.()
             assistant.reasoning = (assistant.reasoning ?? '') + think
           }
-          const delta = d.content ?? ''
-          if (delta) {
+          const content = delta.content ?? ''
+          if (content) {
             opts.onFirstToken?.()
-            assistant.content += delta
+            assistant.content += content
           }
         } catch {
-          /* ignore partial frames */
+          // ignore partial frames
         }
       }
     }
@@ -173,8 +172,7 @@ async function streamChatCompletion(
     const msg = json.choices?.[0]?.message ?? {}
     const think = msg.reasoning ?? msg.reasoning_content
     if (think) assistant.reasoning = think
-    // content can be null when the model spent its whole budget thinking.
-    assistant.content = msg.content ?? (think ? '' : '（空回應）')
+    assistant.content = msg.content ?? (think ? '' : t('playground.emptyResponse'))
     usage = json.usage ?? null
   }
   return usage
@@ -190,8 +188,6 @@ async function sendChat() {
   messages.value.push(userMsg)
   chatInput.value = ''
   messages.value.push({ role: 'assistant', content: '' })
-  // Read the assistant back from the array so we mutate Vue's reactive proxy
-  // (not the raw object) — otherwise streamed deltas wouldn't render live.
   const assistant = messages.value[messages.value.length - 1]!
   busy.value = true
   lastUsage.value = null
@@ -202,10 +198,10 @@ async function sendChat() {
     })
   } catch (e) {
     if (isAbort(e)) {
-      if (!assistant.content) messages.value.pop() // nothing streamed yet — drop bubble
+      if (!assistant.content) messages.value.pop()
     } else {
       messages.value.pop()
-      toast.error('對話請求失敗', { description: String(e) })
+      toast.error(t('playground.chatFailed'), { description: String(e) })
     }
   } finally {
     lastLatency.value = performance.now() - t0
@@ -213,7 +209,6 @@ async function sendChat() {
   }
 }
 
-/** Stream one lane independently so one model failing never blocks the rest. */
 async function runLane(lane: CompareLane) {
   const assistant = lane.messages[lane.messages.length - 1]
   if (!assistant) return
@@ -238,7 +233,7 @@ async function runLane(lane: CompareLane) {
       if (!assistant.content) lane.messages.pop()
     } else {
       lane.messages.pop()
-      toast.error(`${lane.model} 請求失敗`, { description: String(e) })
+      toast.error(`${lane.model}: ${t('playground.chatFailed')}`, { description: String(e) })
     }
   } finally {
     lane.latency = performance.now() - t0
@@ -254,14 +249,13 @@ async function sendCompare() {
     lane.messages.push({ role: 'user', content: prompt })
     lane.messages.push({ role: 'assistant', content: '' })
   }
-  // Fan out in parallel; allSettled so one failure doesn't abort the others.
   await Promise.allSettled(lanes.value.map((lane) => runLane(lane)))
 }
 
 function send() {
   abortController = new AbortController()
-  if (compareMode.value) sendCompare()
-  else sendChat()
+  if (compareMode.value) void sendCompare()
+  else void sendChat()
 }
 
 function stop() {
@@ -274,6 +268,7 @@ function clearChat() {
   messages.value = []
   lastLatency.value = null
 }
+
 function clearCompare() {
   for (const lane of lanes.value) {
     lane.messages = []
@@ -282,9 +277,16 @@ function clearCompare() {
   }
 }
 
-// ---- Embedding / Rerank ----
 const embModel = ref('')
-const embInput = ref('The quick brown fox\nA lazy dog sleeps')
+const defaultEmbeddingInput = computed(() => `${t('usage.sampleInputA')}\n${t('usage.sampleInputB')}`)
+const embInput = ref('')
+watch(
+  defaultEmbeddingInput,
+  (next, prev) => {
+    if (!embInput.value || embInput.value === prev) embInput.value = next
+  },
+  { immediate: true },
+)
 const rerankQuery = ref('')
 const embBusy = ref(false)
 const embResult = ref<{ index: number; value: number; preview: string }[] | null>(null)
@@ -320,21 +322,18 @@ async function runEmbedding() {
       embResult.value.sort((a, b) => b.value - a.value)
     }
   } catch (e) {
-    toast.error('嵌入請求失敗', { description: String(e) })
+    toast.error(t('playground.embedFailed'), { description: String(e) })
   } finally {
     embBusy.value = false
   }
 }
 
 const isRerankMode = computed(() => !!rerankQuery.value.trim())
-
-// Embedding/reranking model picker — only the models a READY embedding server
-// actually serves, switching list by mode (rerank when a query is set).
 const embeddingReady = computed(() => models.byKey.get('embedding::default')?.state === 'ready')
 const embModelOptions = computed(() => {
-  const e = models.config?.embedding_server
-  if (!e) return []
-  return isRerankMode.value ? Object.keys(e.reranking_models) : Object.keys(e.embedding_models)
+  const server = models.config?.embedding_server
+  if (!server) return []
+  return isRerankMode.value ? Object.keys(server.reranking_models) : Object.keys(server.embedding_models)
 })
 watch(
   embModelOptions,
@@ -343,48 +342,60 @@ watch(
   },
   { immediate: true },
 )
+
+const embeddingModeLabel = computed(() =>
+  isRerankMode.value ? t('playground.rerank') : t('playground.embed'),
+)
+const embeddingResultType = computed(() =>
+  isRerankMode.value ? t('playground.relevanceScores') : t('playground.vectorDimensions'),
+)
+const embeddingEmptyHint = computed(() =>
+  embeddingReady.value ? t('playground.noModelsForMode') : t('playground.embNotStarted'),
+)
 </script>
 
 <template>
   <div class="p-6">
     <Tabs v-model="tab" class="space-y-4">
       <TabsList>
-        <TabsTrigger value="chat"><Bot class="size-4" />對話</TabsTrigger>
-        <TabsTrigger value="embedding">嵌入 / 重排序</TabsTrigger>
+        <TabsTrigger value="chat"><Bot class="size-4" />{{ t('playground.chat') }}</TabsTrigger>
+        <TabsTrigger value="embedding">{{ t('playground.embeddingRerank') }}</TabsTrigger>
       </TabsList>
 
-      <!-- Chat -->
       <TabsContent value="chat">
         <div class="grid gap-4 lg:grid-cols-[1fr_18rem]">
-          <!-- Single-model conversation -->
           <Card v-if="!compareMode" glass class="flex h-[calc(100vh-12rem)] flex-col">
             <div v-autoscroll class="flex-1 space-y-4 overflow-y-auto p-5">
               <div
-                v-for="(m, i) in messages"
+                v-for="(msg, i) in messages"
                 :key="i"
                 class="flex gap-3"
-                :class="m.role === 'user' ? 'flex-row-reverse' : ''"
+                :class="msg.role === 'user' ? 'flex-row-reverse' : ''"
               >
                 <div
                   class="flex size-7 shrink-0 items-center justify-center rounded-full"
-                  :class="m.role === 'user' ? 'bg-[var(--chart-1)] text-white' : 'bg-muted'"
+                  :class="msg.role === 'user' ? 'bg-[var(--chart-1)] text-white' : 'bg-muted'"
                 >
-                  <User v-if="m.role === 'user'" class="size-4" />
+                  <User v-if="msg.role === 'user'" class="size-4" />
                   <Bot v-else class="size-4" />
                 </div>
                 <div
                   class="max-w-[75%] whitespace-pre-wrap rounded-2xl px-4 py-2.5 text-sm leading-relaxed"
                   :class="
-                    m.role === 'user'
+                    msg.role === 'user'
                       ? 'bg-[var(--chart-1)] text-white'
                       : 'border border-border/60 bg-background/40'
                   "
                 >
-                  <details v-if="m.role === 'assistant' && m.reasoning" open class="mb-2">
-                    <summary class="cursor-pointer text-xs text-muted-foreground">💭 思考過程</summary>
-                    <div class="mt-1 whitespace-pre-wrap border-l-2 border-border/60 pl-2 text-xs text-muted-foreground">{{ m.reasoning }}</div>
+                  <details v-if="msg.role === 'assistant' && msg.reasoning" open class="mb-2">
+                    <summary class="cursor-pointer text-xs text-muted-foreground">
+                      {{ t('playground.thinkingProcess') }}
+                    </summary>
+                    <div class="mt-1 whitespace-pre-wrap border-l-2 border-border/60 pl-2 text-xs text-muted-foreground">
+                      {{ msg.reasoning }}
+                    </div>
                   </details>
-                  {{ m.content }}<span v-if="busy && i === messages.length - 1" class="animate-pulse">▋</span>
+                  {{ msg.content }}<span v-if="busy && i === messages.length - 1" class="animate-pulse">...</span>
                 </div>
               </div>
               <div
@@ -392,18 +403,26 @@ watch(
                 class="flex h-full flex-col items-center justify-center text-center text-muted-foreground"
               >
                 <Bot class="size-10 opacity-30" />
-                <p class="mt-3 text-sm">發送訊息以透過路由器測試 <span class="font-mono">{{ model || '模型' }}</span>。</p>
+                <p class="mt-3 text-sm">
+                  {{ t('playground.sendPrompt', { model: model || t('common.model') }) }}
+                </p>
               </div>
             </div>
             <div class="border-t border-border/70 p-4">
               <div class="flex items-end gap-2">
                 <Textarea
                   v-model="chatInput"
-                  placeholder="輸入訊息…（Enter 送出，Shift+Enter 換行）"
+                  :placeholder="t('playground.inputPlaceholder')"
                   class="min-h-[44px] resize-none"
                   @keydown.enter.exact.prevent="send"
                 />
-                <Button v-if="busy" variant="outline" class="h-11" title="停止生成" @click="stop">
+                <Button
+                  v-if="busy"
+                  variant="outline"
+                  class="h-11"
+                  :title="t('playground.stopGeneration')"
+                  @click="stop"
+                >
                   <Square class="size-4" />
                 </Button>
                 <Button v-else class="h-11" @click="send">
@@ -411,24 +430,29 @@ watch(
                 </Button>
               </div>
               <div class="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
-                <span v-if="lastLatency" class="tabular">⏱ {{ formatLatency(lastLatency) }}</span>
+                <span v-if="lastLatency" class="tabular">
+                  {{ t('common.latency') }} {{ formatLatency(lastLatency) }}
+                </span>
                 <span v-if="lastUsage?.completion_tokens" class="tabular">{{ lastUsage.completion_tokens }} tok</span>
                 <span v-if="lastTps" class="tabular">{{ lastTps.toFixed(1) }} tok/s</span>
-                <button v-if="messages.length" class="ml-auto flex items-center gap-1 hover:text-foreground" @click="clearChat">
-                  <Trash2 class="size-3.5" />清除
+                <button
+                  v-if="messages.length"
+                  class="ml-auto flex items-center gap-1 hover:text-foreground"
+                  @click="clearChat"
+                >
+                  <Trash2 class="size-3.5" />{{ t('common.clear') }}
                 </button>
               </div>
             </div>
           </Card>
 
-          <!-- Compare: one prompt, many models side by side -->
           <div v-else class="flex h-[calc(100vh-12rem)] flex-col gap-3">
             <div
               v-if="!lanes.length"
               class="flex flex-1 flex-col items-center justify-center rounded-xl border border-dashed border-border/60 text-center text-muted-foreground"
             >
               <Bot class="size-10 opacity-30" />
-              <p class="mt-3 text-sm">在右側選擇至少一個模型以開始並排對比。</p>
+              <p class="mt-3 text-sm">{{ t('playground.selectModelsHint') }}</p>
             </div>
             <div v-else class="flex flex-1 gap-3 overflow-x-auto">
               <Card
@@ -441,63 +465,80 @@ watch(
                   <span class="truncate font-mono text-xs font-semibold">{{ lane.model }}</span>
                   <Loader2 v-if="lane.busy" class="size-3.5 shrink-0 animate-spin text-muted-foreground" />
                   <div class="ml-auto flex shrink-0 items-center gap-1.5">
-                    <Badge v-if="lane.ttft != null" variant="muted" class="tabular">首字 {{ formatLatency(lane.ttft) }}</Badge>
-                    <Badge v-if="lane.latency != null" variant="muted" class="tabular">⏱ {{ formatLatency(lane.latency) }}</Badge>
+                    <Badge v-if="lane.ttft != null" variant="muted" class="tabular">
+                      {{ t('playground.firstToken') }} {{ formatLatency(lane.ttft) }}
+                    </Badge>
+                    <Badge v-if="lane.latency != null" variant="muted" class="tabular">
+                      {{ t('common.latency') }} {{ formatLatency(lane.latency) }}
+                    </Badge>
                     <Badge v-if="lane.tps != null" variant="muted" class="tabular">{{ lane.tps.toFixed(1) }} tok/s</Badge>
-                    <button class="text-muted-foreground hover:text-foreground" title="移除此模型" @click="toggleLane(lane.model)">
+                    <button
+                      class="text-muted-foreground hover:text-foreground"
+                      :title="t('common.remove')"
+                      @click="toggleLane(lane.model)"
+                    >
                       <X class="size-3.5" />
                     </button>
                   </div>
                 </div>
                 <div v-autoscroll class="flex-1 space-y-3 overflow-y-auto p-4">
                   <div
-                    v-for="(m, i) in lane.messages"
+                    v-for="(msg, i) in lane.messages"
                     :key="i"
                     class="flex gap-2"
-                    :class="m.role === 'user' ? 'flex-row-reverse' : ''"
+                    :class="msg.role === 'user' ? 'flex-row-reverse' : ''"
                   >
                     <div
                       class="flex size-6 shrink-0 items-center justify-center rounded-full"
-                      :class="m.role === 'user' ? 'bg-[var(--chart-1)] text-white' : 'bg-muted'"
+                      :class="msg.role === 'user' ? 'bg-[var(--chart-1)] text-white' : 'bg-muted'"
                     >
-                      <User v-if="m.role === 'user'" class="size-3.5" />
+                      <User v-if="msg.role === 'user'" class="size-3.5" />
                       <Bot v-else class="size-3.5" />
                     </div>
                     <div
                       class="max-w-[85%] whitespace-pre-wrap rounded-2xl px-3 py-2 text-sm leading-relaxed"
                       :class="
-                        m.role === 'user'
+                        msg.role === 'user'
                           ? 'bg-[var(--chart-1)] text-white'
                           : 'border border-border/60 bg-background/40'
                       "
                     >
-                      <details v-if="m.role === 'assistant' && m.reasoning" open class="mb-1.5">
-                        <summary class="cursor-pointer text-xs text-muted-foreground">💭 思考過程</summary>
-                        <div class="mt-1 whitespace-pre-wrap border-l-2 border-border/60 pl-2 text-xs text-muted-foreground">{{ m.reasoning }}</div>
+                      <details v-if="msg.role === 'assistant' && msg.reasoning" open class="mb-1.5">
+                        <summary class="cursor-pointer text-xs text-muted-foreground">
+                          {{ t('playground.thinkingProcess') }}
+                        </summary>
+                        <div class="mt-1 whitespace-pre-wrap border-l-2 border-border/60 pl-2 text-xs text-muted-foreground">
+                          {{ msg.reasoning }}
+                        </div>
                       </details>
-                      {{ m.content }}<span v-if="lane.busy && i === lane.messages.length - 1" class="animate-pulse">▋</span>
+                      {{ msg.content }}<span v-if="lane.busy && i === lane.messages.length - 1" class="animate-pulse">...</span>
                     </div>
                   </div>
                   <div
                     v-if="!lane.messages.length"
                     class="flex h-full items-center justify-center text-center text-xs text-muted-foreground"
                   >
-                    等待提問…
+                    {{ t('playground.waitingPrompt') }}
                   </div>
                 </div>
               </Card>
             </div>
 
-            <!-- Shared input fans out to every lane -->
             <Card class="p-4">
               <div class="flex items-end gap-2">
                 <Textarea
                   v-model="chatInput"
-                  placeholder="同一個問題會同時送給所有選中的模型…（Enter 送出）"
+                  :placeholder="t('playground.comparePlaceholder')"
                   class="min-h-[44px] resize-none"
                   @keydown.enter.exact.prevent="send"
                 />
-                <Button v-if="anyBusy" variant="outline" class="h-11" title="停止生成" @click="stop">
+                <Button
+                  v-if="anyBusy"
+                  variant="outline"
+                  class="h-11"
+                  :title="t('playground.stopGeneration')"
+                  @click="stop"
+                >
                   <Square class="size-4" />
                 </Button>
                 <Button v-else :disabled="!lanes.length" class="h-11" @click="send">
@@ -505,87 +546,102 @@ watch(
                 </Button>
               </div>
               <div class="mt-2 flex items-center gap-3 text-xs text-muted-foreground">
-                <span>{{ lanes.length }} 個模型並排</span>
+                <span>{{ t('playground.modelsParallel', { n: lanes.length }) }}</span>
                 <button
-                  v-if="lanes.some((l) => l.messages.length)"
+                  v-if="lanes.some((lane) => lane.messages.length)"
                   class="ml-auto flex items-center gap-1 hover:text-foreground"
                   @click="clearCompare"
                 >
-                  <Trash2 class="size-3.5" />清除全部
+                  <Trash2 class="size-3.5" />{{ t('common.clearAll') }}
                 </button>
               </div>
             </Card>
           </div>
 
-          <!-- Params -->
           <Card class="h-fit p-5">
-            <p class="mb-4 text-sm font-semibold">參數</p>
+            <p class="mb-4 text-sm font-semibold">{{ t('playground.params') }}</p>
             <div class="space-y-4 text-sm">
               <label class="flex items-center justify-between">
-                <span class="text-xs text-muted-foreground">對比模式（多模型同問題）</span>
+                <span class="text-xs text-muted-foreground">{{ t('playground.compareMode') }}</span>
                 <input v-model="compareMode" type="checkbox" class="size-4 accent-[var(--chart-1)]" />
               </label>
 
               <label class="block">
-                <span class="text-xs text-muted-foreground">系統提示（System prompt）</span>
+                <span class="text-xs text-muted-foreground">{{ t('playground.systemPrompt') }}</span>
                 <Textarea
                   v-model="systemPrompt"
-                  placeholder="留空則不送。例如：你是一位專業的繁體中文助理。"
+                  :placeholder="t('playground.systemPromptPlaceholder')"
                   class="mt-1 min-h-[60px] resize-none text-xs"
                 />
               </label>
 
-              <!-- Single: one model -->
               <label v-if="!compareMode" class="block">
-                <span class="text-xs text-muted-foreground">模型（僅顯示已就緒）</span>
+                <span class="text-xs text-muted-foreground">{{ t('playground.modelReady') }}</span>
                 <select
                   v-if="modelOptions.length"
                   v-model="model"
                   class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm"
                 >
-                  <option v-for="o in modelOptions" :key="o.value" :value="o.value">
-                    {{ o.isLora ? `${o.label}  (LoRA)` : o.label }}
+                  <option v-for="option in modelOptions" :key="option.value" :value="option.value">
+                    {{ option.isLora ? `${option.label}  (LoRA)` : option.label }}
                   </option>
                 </select>
-                <p v-else class="mt-1 text-xs text-muted-foreground">目前沒有已啟動的模型，請先至「模型」頁啟動。</p>
+                <p v-else class="mt-1 text-xs text-muted-foreground">{{ t('playground.noReadyModels') }}</p>
               </label>
 
-              <!-- Compare: pick many models -->
               <div v-else class="block">
-                <span class="text-xs text-muted-foreground">模型（可多選，僅顯示已就緒）</span>
+                <span class="text-xs text-muted-foreground">{{ t('playground.modelMulti') }}</span>
                 <div class="mt-1 max-h-48 space-y-1 overflow-y-auto rounded-md border border-input bg-background/40 p-2">
                   <label
-                    v-for="o in modelOptions"
-                    :key="o.value"
+                    v-for="option in modelOptions"
+                    :key="option.value"
                     class="flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 hover:bg-muted/50"
                   >
                     <input
                       type="checkbox"
-                      :checked="isSelected(o.value)"
+                      :checked="isSelected(option.value)"
                       class="size-3.5 accent-[var(--chart-1)]"
-                      @change="toggleLane(o.value)"
+                      @change="toggleLane(option.value)"
                     />
-                    <span class="truncate font-mono text-xs">{{ o.label }}</span>
-                    <Badge v-if="o.isLora" variant="outline" class="shrink-0 text-[10px]">LoRA</Badge>
+                    <span class="truncate font-mono text-xs">{{ option.label }}</span>
+                    <Badge v-if="option.isLora" variant="outline" class="shrink-0 text-[10px]">LoRA</Badge>
                   </label>
-                  <p v-if="!modelOptions.length" class="px-1 text-xs text-muted-foreground">目前沒有已啟動的模型。</p>
+                  <p v-if="!modelOptions.length" class="px-1 text-xs text-muted-foreground">
+                    {{ t('playground.noReadyModelsShort') }}
+                  </p>
                 </div>
               </div>
 
               <label class="block">
-                <span class="flex justify-between text-xs text-muted-foreground"
-                  >最大 Tokens <span class="tabular text-foreground">{{ maxTokens }}</span></span
-                >
-                <input v-model.number="maxTokens" type="range" min="16" max="2048" step="16" class="mt-1 w-full accent-[var(--chart-1)]" />
+                <span class="flex justify-between text-xs text-muted-foreground">
+                  {{ t('playground.maxTokens') }}
+                  <span class="tabular text-foreground">{{ maxTokens }}</span>
+                </span>
+                <input
+                  v-model.number="maxTokens"
+                  type="range"
+                  min="16"
+                  max="2048"
+                  step="16"
+                  class="mt-1 w-full accent-[var(--chart-1)]"
+                />
               </label>
               <label class="block">
-                <span class="flex justify-between text-xs text-muted-foreground"
-                  >溫度 <span class="tabular text-foreground">{{ temperature.toFixed(1) }}</span></span
-                >
-                <input v-model.number="temperature" type="range" min="0" max="2" step="0.1" class="mt-1 w-full accent-[var(--chart-1)]" />
+                <span class="flex justify-between text-xs text-muted-foreground">
+                  {{ t('playground.temperature') }}
+                  <span class="tabular text-foreground">{{ temperature.toFixed(1) }}</span>
+                </span>
+                <input
+                  v-model.number="temperature"
+                  type="range"
+                  min="0"
+                  max="2"
+                  step="0.1"
+                  class="mt-1 w-full accent-[var(--chart-1)]"
+                />
               </label>
               <label class="flex items-center justify-between">
-                <span class="text-xs text-muted-foreground">串流回應</span>
+                <span class="text-xs text-muted-foreground">{{ t('playground.streamResponse') }}</span>
                 <input v-model="stream" type="checkbox" class="size-4 accent-[var(--chart-1)]" />
               </label>
             </div>
@@ -593,70 +649,67 @@ watch(
         </div>
       </TabsContent>
 
-      <!-- Embedding / Rerank -->
       <TabsContent value="embedding">
         <div class="grid gap-4 lg:grid-cols-2">
           <Card class="p-5">
-            <p class="mb-4 text-sm font-semibold">請求</p>
+            <p class="mb-4 text-sm font-semibold">{{ t('playground.request') }}</p>
             <div class="space-y-4 text-sm">
               <label class="block">
                 <span class="text-xs text-muted-foreground">
-                  模型（{{ isRerankMode ? '重排序' : '嵌入' }}，僅顯示已就緒）
+                  {{ t('playground.modelLabel', { mode: embeddingModeLabel }) }}
                 </span>
                 <select
                   v-if="embModelOptions.length"
                   v-model="embModel"
                   class="mt-1 h-9 w-full rounded-md border border-input bg-background/40 px-2 text-sm"
                 >
-                  <option v-for="o in embModelOptions" :key="o" :value="o">{{ o }}</option>
+                  <option v-for="option in embModelOptions" :key="option" :value="option">{{ option }}</option>
                 </select>
-                <p v-else class="mt-1 text-xs text-muted-foreground">
-                  {{ embeddingReady ? '此模式無可用模型。' : 'embedding server 未啟動，請先至「模型」頁啟動。' }}
-                </p>
+                <p v-else class="mt-1 text-xs text-muted-foreground">{{ embeddingEmptyHint }}</p>
               </label>
               <label class="block">
-                <span class="text-xs text-muted-foreground">查詢（設定後進入重排序模式）</span>
-                <Input v-model="rerankQuery" placeholder="留空則為純嵌入模式" class="mt-1" />
+                <span class="text-xs text-muted-foreground">{{ t('playground.queryLabel') }}</span>
+                <Input v-model="rerankQuery" :placeholder="t('playground.queryPlaceholder')" class="mt-1" />
               </label>
               <label class="block">
-                <span class="text-xs text-muted-foreground">{{ $t('playground.inputLabel') }}</span>
+                <span class="text-xs text-muted-foreground">{{ t('playground.inputLabel') }}</span>
                 <Textarea v-model="embInput" class="mt-1 min-h-[140px] font-mono text-xs" />
               </label>
               <Button :disabled="embBusy || !embModel" @click="runEmbedding">
                 <Loader2 v-if="embBusy" class="size-4 animate-spin" />
-                {{ isRerankMode ? '重排序' : '嵌入' }}
+                {{ embeddingModeLabel }}
               </Button>
             </div>
           </Card>
 
           <Card class="p-5">
             <div class="mb-4 flex items-center gap-2">
-              <p class="text-sm font-semibold">結果</p>
+              <p class="text-sm font-semibold">{{ t('playground.result') }}</p>
               <Badge v-if="isRerankMode" variant="default">rerank</Badge>
               <Badge v-else-if="embDim" variant="muted">dim {{ embDim }}</Badge>
             </div>
             <div v-if="embResult" class="space-y-2">
               <div
-                v-for="r in embResult"
-                :key="r.index"
+                v-for="result in embResult"
+                :key="result.index"
                 class="rounded-lg border border-border/60 bg-background/40 p-3"
               >
                 <div class="flex items-center justify-between gap-3">
-                  <span class="truncate text-sm">{{ r.preview }}</span>
+                  <span class="truncate text-sm">{{ result.preview }}</span>
                   <span class="shrink-0 tabular text-sm font-medium">
-                    {{ isRerankMode ? r.value.toFixed(4) : `${r.value} 維向量` }}
+                    {{ isRerankMode ? result.value.toFixed(4) : t('playground.dimVector', { n: result.value }) }}
                   </span>
                 </div>
                 <div v-if="isRerankMode" class="mt-2 h-1.5 overflow-hidden rounded-full bg-muted">
                   <div
                     class="h-full rounded-full bg-[var(--chart-2)]"
-                    :style="{ width: `${Math.max(2, Math.min(100, r.value * 100))}%` }"
+                    :style="{ width: `${Math.max(2, Math.min(100, result.value * 100))}%` }"
                   />
                 </div>
               </div>
             </div>
             <p v-else class="py-10 text-center text-sm text-muted-foreground">
-              執行請求以查看{{ isRerankMode ? '相關性分數' : '向量維度' }}。
+              {{ t('playground.runToSee', { type: embeddingResultType }) }}
             </p>
           </Card>
         </div>
diff --git a/apps/frontend_llmops/src/views/RequestsView.vue b/apps/frontend_llmops/src/views/RequestsView.vue
index 813f9b5..01a8e11 100644
--- a/apps/frontend_llmops/src/views/RequestsView.vue
+++ b/apps/frontend_llmops/src/views/RequestsView.vue
@@ -87,7 +87,7 @@ onMounted(load)
         <input v-model="errorsOnly" type="checkbox" class="size-4 accent-[var(--chart-1)]" />{{ $t('requests.errorsOnly') }}
       </label>
       <label class="flex items-center gap-1.5 text-sm text-muted-foreground">
-        $/1M tokens
+        {{ $t('requests.costPerMTok') }}
         <Input
           :model-value="ratePerMTok"
           type="number"
@@ -146,7 +146,7 @@ onMounted(load)
               <th>{{ $t('requests.tablePath') }}</th>
               <th class="text-right">{{ $t('requests.tableStatus') }}</th>
               <th class="text-right">{{ $t('requests.tableLatency') }}</th>
-              <th class="text-right">tokens</th>
+              <th class="text-right">{{ $t('requests.tableTokens') }}</th>
               <th class="text-right">{{ $t('requests.tableCost') }}</th>
               <th>{{ $t('requests.tableKey') }}</th>
             </tr>
diff --git a/apps/frontend_llmops/src/views/ResourcesView.vue b/apps/frontend_llmops/src/views/ResourcesView.vue
index f3273a9..4f48b8c 100644
--- a/apps/frontend_llmops/src/views/ResourcesView.vue
+++ b/apps/frontend_llmops/src/views/ResourcesView.vue
@@ -27,7 +27,7 @@ function shortCmd(cmdline?: string[]) {
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-2">
             <Cpu class="size-4 text-[var(--chart-1)]" />
-            <span class="text-sm font-medium">處理器</span>
+            <span class="text-sm font-medium">{{ $t('resources.cpu') }}</span>
           </div>
           <span class="text-2xl font-semibold tabular">{{ formatPercent(resources.resources?.cpu) }}</span>
         </div>
@@ -40,7 +40,7 @@ function shortCmd(cmdline?: string[]) {
         <div class="flex items-center justify-between">
           <div class="flex items-center gap-2">
             <MemoryStick class="size-4 text-[var(--chart-2)]" />
-            <span class="text-sm font-medium">記憶體</span>
+            <span class="text-sm font-medium">{{ $t('resources.memory') }}</span>
           </div>
           <span class="text-2xl font-semibold tabular">{{ formatPercent(mem?.percent) }}</span>
         </div>
@@ -48,8 +48,11 @@ function shortCmd(cmdline?: string[]) {
           <Sparkline :data="resources.memHistory" :width="600" :height="48" :max="100" />
         </div>
         <p v-if="mem" class="mt-2 text-xs text-muted-foreground tabular">
-          {{ formatBytes(mem.used) }} used / {{ formatBytes(mem.total) }} total ·
-          {{ formatBytes(mem.available) }} available
+          {{ $t('resources.memorySummary', {
+            used: formatBytes(mem.used),
+            total: formatBytes(mem.total),
+            available: formatBytes(mem.available),
+          }) }}
         </p>
       </Card>
     </div>
@@ -62,19 +65,19 @@ function shortCmd(cmdline?: string[]) {
     <!-- GPU processes -->
     <Card>
       <CardHeader>
-        <CardTitle>GPU 程序</CardTitle>
-        <p class="text-xs text-muted-foreground">佔用 GPU 記憶體的程序（約每 5 秒更新）</p>
+        <CardTitle>{{ $t('resources.gpuProcesses') }}</CardTitle>
+        <p class="text-xs text-muted-foreground">{{ $t('resources.gpuProcessesDesc') }}</p>
       </CardHeader>
       <CardContent>
         <div class="overflow-x-auto">
           <table class="w-full text-sm">
             <thead class="text-left text-xs uppercase tracking-wide text-muted-foreground">
               <tr class="border-b border-border/60">
-                <th class="pb-2 pr-4 font-medium">PID</th>
-                <th class="pb-2 pr-4 font-medium">使用者</th>
-                <th class="pb-2 pr-4 font-medium">名稱</th>
-                <th class="pb-2 pr-4 font-medium">指令</th>
-                <th class="pb-2 text-right font-medium">GPU 記憶體</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('resources.tablePid') }}</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('resources.tableUser') }}</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('resources.tableName') }}</th>
+                <th class="pb-2 pr-4 font-medium">{{ $t('resources.tableCommand') }}</th>
+                <th class="pb-2 text-right font-medium">{{ $t('resources.tableGpuMem') }}</th>
               </tr>
             </thead>
             <tbody>
@@ -93,7 +96,7 @@ function shortCmd(cmdline?: string[]) {
                 <td class="py-2 text-right font-medium tabular">{{ formatBytes(p.used_memory_mib, true) }}</td>
               </tr>
               <tr v-if="!resources.processes.length">
-                <td colspan="5" class="py-6 text-center text-muted-foreground">無 GPU 程序。</td>
+                <td colspan="5" class="py-6 text-center text-muted-foreground">{{ $t('resources.noGpuProcesses') }}</td>
               </tr>
             </tbody>
           </table>
diff --git a/apps/frontend_llmops/src/views/TrafficView.vue b/apps/frontend_llmops/src/views/TrafficView.vue
index 410f699..3d49b74 100644
--- a/apps/frontend_llmops/src/views/TrafficView.vue
+++ b/apps/frontend_llmops/src/views/TrafficView.vue
@@ -108,7 +108,7 @@ function onFilter(e: Event) {
                 <th class="pb-2 pr-4 text-right font-medium">{{ $t('traffic.tableAvg') }}</th>
                 <th class="pb-2 pr-4 text-right font-medium">p50</th>
                 <th class="pb-2 pr-4 font-medium">p95</th>
-                <th class="pb-2 text-right font-medium">Tokens</th>
+                <th class="pb-2 text-right font-medium">{{ $t('common.tokens') }}</th>
               </tr>
             </thead>
             <tbody>
@@ -242,7 +242,7 @@ function onFilter(e: Event) {
                 <th class="pb-2 pr-3 font-medium">{{ $t('common.path') }}</th>
                 <th class="pb-2 pr-3 font-medium">{{ $t('common.status') }}</th>
                 <th class="pb-2 pr-3 text-right font-medium">{{ $t('common.latency') }}</th>
-                <th class="pb-2 text-right font-medium">Tok</th>
+                <th class="pb-2 text-right font-medium">{{ $t('common.tokens') }}</th>
               </tr>
             </thead>
             <tbody>
diff --git a/apps/frontend_llmops/src/views/UsageView.vue b/apps/frontend_llmops/src/views/UsageView.vue
index 86565ab..d69516e 100644
--- a/apps/frontend_llmops/src/views/UsageView.vue
+++ b/apps/frontend_llmops/src/views/UsageView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { CheckCircle2 } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
 import { api } from '@/lib/api'
 import { useModelsStore } from '@/stores/models'
 import { lorasOfGroup } from '@/composables/useModelOptions'
@@ -15,12 +16,11 @@ import TabsContent from '@/components/ui/TabsContent.vue'
 import Badge from '@/components/ui/Badge.vue'
 import CodeBlock from '@/components/CodeBlock.vue'
 
+const { t } = useI18n()
 const models = useModelsStore()
 const base = api.routerBase
 
 const groups = computed(() => [...new Set(models.llms.map((m) => m.key.split('::')[0] ?? m.key))])
-// LoRA adapters across all groups — selectable in the chat dropdown so the code
-// snippets switch to a LoRA call just by changing the `model` field.
 const loraOptions = computed(() => {
   const out: { value: string; group: string }[] = []
   for (const g of groups.value) {
@@ -48,10 +48,17 @@ const rerankModel = computed(
   () => models.config?.embedding_server?.reranking_models?.[0] ?? 'bge-reranker-large',
 )
 
-// ---- Chat snippet generators (per language, honouring the stream toggle) ----
 const m = computed(() => model.value || 'Qwen3-0.6B')
 const jsonBool = computed(() => (stream.value ? 'true' : 'false'))
 const pyBool = computed(() => (stream.value ? 'True' : 'False'))
+const samplePrompt = computed(() => JSON.stringify(t('usage.samplePrompt')))
+const sampleInputs = computed(() =>
+  [t('usage.sampleInputA'), t('usage.sampleInputB')].map((value) => JSON.stringify(value)).join(', '),
+)
+const sampleQuery = computed(() => JSON.stringify(t('usage.sampleQuery')))
+const sampleDocs = computed(() =>
+  [t('usage.sampleDocA'), t('usage.sampleDocB')].map((value) => JSON.stringify(value)).join(', '),
+)
 
 const curl = computed(
   () =>
@@ -59,7 +66,7 @@ const curl = computed(
   -H "Content-Type: application/json" \\${stream.value ? '\n  -N \\' : ''}
   -d '{
     "model": "${m.value}",
-    "messages": [{"role": "user", "content": "你好，請自我介紹"}],
+    "messages": [{"role": "user", "content": ${samplePrompt.value}}],
     "stream": ${jsonBool.value}
   }'`,
 )
@@ -67,11 +74,10 @@ const curl = computed(
 const python = computed(
   () => `from openai import OpenAI
 
-client = OpenAI(base_url="${base}/v1", api_key="not-needed")  # Router 不驗證金鑰
-
+client = OpenAI(base_url="${base}/v1", api_key="not-needed")  # ${t('usage.routerNoAuthComment')}
 resp = client.chat.completions.create(
     model="${m.value}",
-    messages=[{"role": "user", "content": "你好，請自我介紹"}],
+    messages=[{"role": "user", "content": ${samplePrompt.value}}],
     stream=${pyBool.value},
 )
 ${
@@ -89,7 +95,7 @@ resp = requests.post(
     "${base}/v1/chat/completions",
     json={
         "model": "${m.value}",
-        "messages": [{"role": "user", "content": "你好，請自我介紹"}],
+        "messages": [{"role": "user", "content": ${samplePrompt.value}}],
         "stream": ${pyBool.value},
     },
     stream=${pyBool.value},
@@ -112,7 +118,7 @@ const js = computed(
   headers: { "Content-Type": "application/json" },
   body: JSON.stringify({
     model: "${m.value}",
-    messages: [{ role: "user", content: "你好，請自我介紹" }],
+    messages: [{ role: "user", content: ${samplePrompt.value} }],
     stream: ${jsonBool.value},
   }),
 });
@@ -123,7 +129,7 @@ const decoder = new TextDecoder();
 while (true) {
   const { done, value } = await reader.read();
   if (done) break;
-  process.stdout.write(decoder.decode(value)); // 內含 SSE \`data:\` 行
+  process.stdout.write(decoder.decode(value)); // ${t('usage.streamComment')}
 }`
     : `const data = await res.json();
 console.log(data.choices[0].message.content);`
@@ -137,7 +143,7 @@ const client = new OpenAI({ baseURL: "${base}/v1", apiKey: "not-needed" });
 
 const resp = await client.chat.completions.create({
   model: "${m.value}",
-  messages: [{ role: "user", content: "你好，請自我介紹" }],
+  messages: [{ role: "user", content: ${samplePrompt.value} }],
   stream: ${jsonBool.value},
 });
 ${
@@ -157,12 +163,11 @@ const langs = [
   { value: 'node', label: 'Node (SDK)', code: node },
 ]
 
-// ---- LoRA snippets ----
 const exampleBase = computed(() => loraOptions.value[0]?.group ?? 'Qwen3-0.6B')
 const exampleLora = computed(() => loraOptions.value[0]?.value ?? 'qwen3-test-lora')
 const modelsCurl = computed(
   () => `curl ${base}/v1/models
-# 帶 "parent" 的項目就是 LoRA（指向它的 base 模型）：
+# ${t('usage.modelsComment')}
 # {"id": "${exampleBase.value}", "object": "model"}
 # {"id": "${exampleLora.value}", "object": "model", "parent": "${exampleBase.value}"}`,
 )
@@ -171,14 +176,13 @@ const loraListPy = computed(
 
 models = requests.get("${base}/v1/models").json()["data"]
 loras = [m["id"] for m in models if m.get("parent")]
-print(loras)  # 這些名稱可直接填進 chat 請求的 "model" 欄位`,
+print(loras)  # ${t('usage.loraListComment')}`,
 )
 
-// ---- Embedding / rerank snippets ----
 const embCurl = computed(
   () => `curl ${base}/v1/embeddings \\
   -H "Content-Type: application/json" \\
-  -d '{"model": "${embModel.value}", "input": ["第一段文字", "第二段文字"]}'`,
+  -d '{"model": "${embModel.value}", "input": [${sampleInputs.value}]}'`,
 )
 const embPython = computed(
   () => `from openai import OpenAI
@@ -186,72 +190,70 @@ const embPython = computed(
 client = OpenAI(base_url="${base}/v1", api_key="not-needed")
 resp = client.embeddings.create(
     model="${embModel.value}",
-    input=["第一段文字", "第二段文字"],
+    input=[${sampleInputs.value}],
 )
-print(len(resp.data[0].embedding))  # 向量維度`,
+print(len(resp.data[0].embedding))  # ${t('usage.vectorLengthComment')}`,
 )
 const rerankCurl = computed(
-  () => `# 帶 query 欄位即切換為 reranking，回傳每個候選的相關性分數
+  () => `# ${t('usage.rerankComment')}
 curl ${base}/v1/embeddings \\
   -H "Content-Type: application/json" \\
-  -d '{"model": "${rerankModel.value}", "query": "如何重置密碼？", "input": ["候選文件 A", "候選文件 B"]}'`,
+  -d '{"model": "${rerankModel.value}", "query": ${sampleQuery.value}, "input": [${sampleDocs.value}]}'`,
 )
 </script>
 
 <template>
   <div class="space-y-6 p-6">
-    <!-- Quick start -->
     <Card>
       <CardHeader>
-        <CardTitle>快速開始</CardTitle>
-        <p class="text-xs text-muted-foreground">
-          Router 是 OpenAI 相容的統一入口，請求的 <span class="font-mono">model</span> 欄位填「群組名」，Router 會自動選負載最低的實例。
-        </p>
+        <CardTitle>{{ t('usage.quickStart') }}</CardTitle>
+        <p class="text-xs text-muted-foreground">{{ t('usage.quickStartDesc') }}</p>
       </CardHeader>
       <CardContent class="space-y-2 text-sm">
         <p class="flex items-center gap-2">
           <CheckCircle2 class="size-4 text-status-ready" />
-          確認 Router 已啟動：<span class="font-mono text-xs">{{ base }}</span>
+          {{ t('usage.step1') }}<span class="font-mono text-xs">{{ base }}</span>
         </p>
         <p class="flex items-center gap-2">
           <CheckCircle2 class="size-4 text-status-ready" />
-          在 Models 頁把要用的模型 <span class="font-medium">Start</span> 到
-          <Badge variant="ready">ready</Badge>
+          {{ t('usage.step2') }}<span class="font-medium">{{ t('common.start') }}</span>
+          {{ t('usage.step2End') }}
+          <Badge variant="ready">{{ t('common.ready') }}</Badge>
         </p>
         <p class="flex items-center gap-2">
           <CheckCircle2 class="size-4 text-status-ready" />
-          用下方任一語言呼叫；金鑰可任意填（Router 不驗證）
+          {{ t('usage.step3') }}
         </p>
       </CardContent>
     </Card>
 
-    <!-- Chat completions -->
     <Card>
       <CardHeader class="flex-row flex-wrap items-center justify-between gap-3">
-        <CardTitle>Chat Completions</CardTitle>
+        <CardTitle>{{ t('usage.chatCompletions') }}</CardTitle>
         <div class="flex items-center gap-3">
           <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
-            模型
+            {{ t('usage.modelLabel') }}
             <select
               v-model="model"
               class="h-8 rounded-md border border-input bg-background/40 px-2 text-sm text-foreground"
             >
               <option v-for="g in groups" :key="g" :value="g">{{ g }}</option>
               <optgroup v-if="loraOptions.length" label="LoRA">
-                <option v-for="l in loraOptions" :key="l.value" :value="l.value">{{ l.group }} / {{ l.value }}</option>
+                <option v-for="l in loraOptions" :key="l.value" :value="l.value">
+                  {{ l.group }} / {{ l.value }}
+                </option>
               </optgroup>
             </select>
           </label>
           <label class="flex items-center gap-1.5 text-xs text-muted-foreground">
             <input v-model="stream" type="checkbox" class="size-4 accent-[var(--chart-1)]" />
-            串流 (stream)
+            {{ t('usage.streamLabel') }}
           </label>
         </div>
       </CardHeader>
       <CardContent>
         <p v-if="loraOptions.length" class="mb-3 text-xs text-muted-foreground">
-          下拉選單裡的 <span class="font-medium text-[var(--chart-3)]">LoRA</span> 項：把
-          <span class="font-mono">model</span> 換成它的 served name 即可，其餘請求完全不變。
+          {{ t('usage.loraDropdownHint') }}
         </p>
         <Tabs v-model="tab" class="space-y-3">
           <TabsList>
@@ -264,51 +266,48 @@ curl ${base}/v1/embeddings \\
       </CardContent>
     </Card>
 
-    <!-- LoRA adapters -->
     <Card>
       <CardHeader>
-        <CardTitle>LoRA Adapters</CardTitle>
+        <CardTitle>{{ t('usage.loraTitle') }}</CardTitle>
         <p class="text-xs text-muted-foreground">
-          呼叫 LoRA 與一般模型相同，只把 <span class="font-mono">model</span> 改成 adapter 的 served name（例
-          <span class="font-mono">{{ exampleLora }}</span>），Router 會路由到對應 base 模型的實例。
+          {{ t('usage.loraDesc') }}
+          <span class="font-mono">{{ exampleLora }}</span>
+          {{ t('usage.loraDescEnd') }}
         </p>
       </CardHeader>
       <CardContent class="space-y-4">
         <div class="grid gap-4 lg:grid-cols-2">
           <div class="space-y-2">
-            <p class="text-xs font-medium text-muted-foreground">列出可用模型 / LoRA · cURL</p>
+            <p class="text-xs font-medium text-muted-foreground">{{ t('usage.listModelsLabel') }}</p>
             <CodeBlock :code="modelsCurl" />
           </div>
           <div class="space-y-2">
-            <p class="text-xs font-medium text-muted-foreground">只挑出 LoRA · Python</p>
+            <p class="text-xs font-medium text-muted-foreground">{{ t('usage.filterLoraLabel') }}</p>
             <CodeBlock :code="loraListPy" />
           </div>
         </div>
         <div class="space-y-1 text-xs text-muted-foreground">
-          <p>· 前提：base 模型需以 <span class="font-mono">enable_lora</span> 啟動，且 adapter 已掛載（config 靜態掛，或在模型詳情抽屜熱載入）。</p>
-          <p>· 打一個未掛載的名稱會回 <span class="font-mono">404 — Model not found</span>。</p>
-          <p>· Base vs LoRA A/B：同一請求只換 <span class="font-mono">model</span>；Playground 比較模式可並排對照。</p>
+          <p>{{ t('usage.loraNote1') }}</p>
+          <p>{{ t('usage.loraNote2') }}</p>
+          <p>{{ t('usage.loraNote3') }}</p>
         </div>
       </CardContent>
     </Card>
 
-    <!-- Embeddings & Rerank -->
     <Card>
       <CardHeader>
-        <CardTitle>Embeddings & Rerank</CardTitle>
-        <p class="text-xs text-muted-foreground">
-          同一個 <span class="font-mono">/v1/embeddings</span> 端點：帶 <span class="font-mono">query</span> 欄位即切換為 reranking。
-        </p>
+        <CardTitle>{{ t('usage.embTitle') }}</CardTitle>
+        <p class="text-xs text-muted-foreground">{{ t('usage.embDesc') }}</p>
       </CardHeader>
       <CardContent class="grid gap-4 lg:grid-cols-2">
         <div class="space-y-2">
-          <p class="text-xs font-medium text-muted-foreground">Embedding · cURL</p>
+          <p class="text-xs font-medium text-muted-foreground">{{ t('usage.embCurlLabel') }}</p>
           <CodeBlock :code="embCurl" />
-          <p class="text-xs font-medium text-muted-foreground">Embedding · Python</p>
+          <p class="text-xs font-medium text-muted-foreground">{{ t('usage.embPyLabel') }}</p>
           <CodeBlock :code="embPython" />
         </div>
         <div class="space-y-2">
-          <p class="text-xs font-medium text-muted-foreground">Rerank · cURL</p>
+          <p class="text-xs font-medium text-muted-foreground">{{ t('usage.rerankCurlLabel') }}</p>
           <CodeBlock :code="rerankCurl" />
         </div>
       </CardContent>