diff --git a/.gitignore b/.gitignore
index 4c41ce2..8edec37 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+.worktrees
 /build
 /.svelte-kit
 /package
@@ -16,4 +17,4 @@ __pycache__
 
 params_output
 
-static/consent-form.pdf
\ No newline at end of file
+static/consent-form.pdf
diff --git a/docs/superpowers/plans/2026-05-16-chinese-localization.md b/docs/superpowers/plans/2026-05-16-chinese-localization.md
new file mode 100644
index 0000000..267946d
--- /dev/null
+++ b/docs/superpowers/plans/2026-05-16-chinese-localization.md
@@ -0,0 +1,542 @@
+# Chinese Localization Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Build a Chinese-first version of Transformer Explainer with professional English terminology preserved where useful.
+
+**Architecture:** Add a small static localization module for short reusable UI labels and glossary terms, while translating rich article/tutorial HTML in place to avoid risky Svelte restructuring. Add a lightweight Node-based localization check that grows with each task and guards against accidental regression to the original English UI copy.
+
+**Tech Stack:** SvelteKit, Svelte 5, TypeScript, Node.js scripts, existing `~` alias from `svelte.config.js`.
+
+---
+
+## File Structure
+
+- Modify `package.json` and `package-lock.json`: restore a buildable baseline by aligning Vite with `@sveltejs/vite-plugin-svelte`.
+- Create `src/utils/i18n.ts`: Chinese UI strings and glossary constants for short labels reused by Svelte components.
+- Create `scripts/check-localization.mjs`: static text assertions for required Chinese strings and banned original English strings.
+- Modify `package.json`: add `localization:check`.
+- Modify `src/app.html`: set `lang="zh-CN"` and Chinese title/meta descriptions.
+- Modify core UI components:
+  - `src/components/InputForm.svelte`
+  - `src/components/Topbar.svelte`
+  - `src/components/Header.svelte`
+  - `src/components/Sampling.svelte`
+  - `src/components/Temperature.svelte`
+  - `src/components/Embedding.svelte`
+  - `src/components/Attention.svelte`
+  - `src/components/AttentionMatrix.svelte`
+  - `src/components/BlockTransition.svelte`
+  - `src/components/HeadStack.svelte`
+  - `src/components/LinearSoftmax.svelte`
+  - `src/components/Mlp.svelte`
+  - `src/components/Operation.svelte`
+  - `src/components/SubsequentBlocks.svelte`
+  - selected `src/components/Popovers/*.svelte`
+- Modify `src/utils/textbookPages.ts`: translate guided tutorial cards while preserving `id`, selectors, and analytics event names.
+- Modify `src/components/article/Article.svelte`: translate long explanatory article while preserving links, formulas, component imports, classes, and IDs.
+
+## Task 0: Restore Build Baseline
+
+**Files:**
+- Modify: `package.json`
+- Modify: `package-lock.json`
+
+- [ ] **Step 1: Verify the current build fails from dependency incompatibility**
+
+Run: `PATH=/Users/jiangxu/.nvm/versions/node/v22.14.0/bin:$PATH npm run build`
+
+Expected: FAIL with `Cannot read properties of undefined (reading 'config')` from `@sveltejs/vite-plugin-svelte`.
+
+- [ ] **Step 2: Update Vite to the lowest compatible major range**
+
+Run:
+
+```bash
+PATH=/Users/jiangxu/.nvm/versions/node/v22.14.0/bin:$PATH npm install vite@^6.3.0 --save-dev --legacy-peer-deps --registry=https://registry.npmjs.org
+```
+
+Expected: `package.json` changes `vite` from `^5.4.21` to `^6.3.0`, and `package-lock.json` resolves a Vite 6 release compatible with `@sveltejs/vite-plugin-svelte@6.2.4`.
+
+- [ ] **Step 3: Verify package install consistency**
+
+Run:
+
+```bash
+PATH=/Users/jiangxu/.nvm/versions/node/v22.14.0/bin:$PATH npm ci --legacy-peer-deps --registry=https://registry.npmjs.org
+```
+
+Expected: install completes successfully.
+
+- [ ] **Step 4: Verify build baseline**
+
+Run: `PATH=/Users/jiangxu/.nvm/versions/node/v22.14.0/bin:$PATH npm run build`
+
+Expected: PASS or, if unrelated pre-existing Svelte/TypeScript errors remain, the Vite plugin `reading 'config'` crash must be gone and the new failure must be documented.
+
+- [ ] **Step 5: Commit**
+
+Run:
+
+```bash
+git add --sparse package.json package-lock.json
+git commit -m "fix: align vite with svelte plugin"
+```
+
+## Task 1: Localization Guard And Metadata
+
+**Files:**
+- Create: `src/utils/i18n.ts`
+- Create: `scripts/check-localization.mjs`
+- Modify: `package.json`
+- Modify: `src/app.html`
+
+- [ ] **Step 1: Write the failing localization check**
+
+Create `scripts/check-localization.mjs` with this content:
+
+```js
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const root = process.cwd();
+
+function read(path) {
+	return readFileSync(join(root, path), 'utf8');
+}
+
+function assertIncludes(path, expected) {
+	const content = read(path);
+	if (!content.includes(expected)) {
+		throw new Error(`${path} should include: ${expected}`);
+	}
+}
+
+function assertExcludes(path, banned) {
+	const content = read(path);
+	if (content.includes(banned)) {
+		throw new Error(`${path} should not include original English copy: ${banned}`);
+	}
+}
+
+assertIncludes('src/app.html', '<html lang="zh-CN">');
+assertIncludes('src/app.html', 'Transformer Explainer：可视化理解 LLM Transformer 模型');
+assertExcludes('src/app.html', 'LLM Transformer Model Visually Explained');
+
+assertIncludes('src/utils/i18n.ts', '多层感知机（MLP, Multi-Layer Perceptron）');
+assertIncludes('src/utils/i18n.ts', '词元（Token）');
+assertIncludes('src/utils/i18n.ts', '自注意力（Self-Attention）');
+
+console.log('Localization checks passed.');
+```
+
+- [ ] **Step 2: Run the check and verify it fails**
+
+Run: `node scripts/check-localization.mjs`
+
+Expected: FAIL with an error that `src/app.html` does not include `<html lang="zh-CN">` or that `src/utils/i18n.ts` does not exist.
+
+- [ ] **Step 3: Add the localization module**
+
+Create `src/utils/i18n.ts`:
+
+```ts
+export const zhCN = {
+	app: {
+		title: 'Transformer Explainer：可视化理解 LLM Transformer 模型',
+		description:
+			'一个交互式可视化工具，帮助你理解 GPT 等大语言模型（LLM）中的 Transformer 模型如何工作。'
+	},
+	controls: {
+		examples: '示例',
+		generate: '生成',
+		inputPlaceholder: '输入你自己的英文提示词',
+		mobileExampleOnly: '请先试试示例。自定义输入建议在桌面端使用。',
+		modelDownloading: 'GPT-2 模型正在下载（600MB），你可以先试试示例。',
+		wordLimit: (limit: number) => `最多可输入 ${limit} 个英文单词。`,
+		temperature: 'Temperature',
+		sampling: 'Sampling'
+	},
+	glossary: {
+		token: '词元（Token）',
+		selfAttention: '自注意力（Self-Attention）',
+		multiHeadSelfAttention: '多头自注意力（Multi-Head Self-Attention）',
+		mlp: '多层感知机（MLP, Multi-Layer Perceptron）',
+		transformerBlock: 'Transformer Block',
+		positionalEncoding: '位置编码（Positional Encoding）',
+		tokenEmbedding: '词元嵌入（Token Embedding）',
+		outputProbabilities: '输出概率（Output Probabilities）'
+	}
+} as const;
+```
+
+- [ ] **Step 4: Translate app metadata**
+
+Change `src/app.html`:
+
+```html
+<html lang="zh-CN">
+```
+
+Use this title everywhere title content appears:
+
+```html
+Transformer Explainer：可视化理解 LLM Transformer 模型
+```
+
+Use this description everywhere description content appears:
+
+```html
+一个交互式可视化工具，帮助你理解 GPT 等大语言模型（LLM）中的 Transformer 模型如何工作。
+```
+
+- [ ] **Step 5: Add the npm script**
+
+Modify `package.json` scripts:
+
+```json
+"localization:check": "node scripts/check-localization.mjs"
+```
+
+- [ ] **Step 6: Run the check and verify it passes**
+
+Run: `npm run localization:check`
+
+Expected: PASS with `Localization checks passed.`
+
+- [ ] **Step 7: Commit**
+
+Run:
+
+```bash
+git add --sparse src/utils/i18n.ts scripts/check-localization.mjs package.json src/app.html
+git commit -m "test: add chinese localization guard"
+```
+
+## Task 2: Core UI And Visualization Labels
+
+**Files:**
+- Modify: `scripts/check-localization.mjs`
+- Modify: core UI component files listed in File Structure
+
+- [ ] **Step 1: Extend the failing check for core UI**
+
+Append these assertions to `scripts/check-localization.mjs` before the final `console.log`:
+
+```js
+assertIncludes('src/components/InputForm.svelte', '生成');
+assertIncludes('src/components/InputForm.svelte', '示例');
+assertIncludes('src/components/InputForm.svelte', '输入你自己的英文提示词');
+assertExcludes('src/components/InputForm.svelte', 'Test your own input text');
+assertExcludes('src/components/InputForm.svelte', 'Generate');
+
+assertIncludes('src/components/Embedding.svelte', 'Embedding');
+assertIncludes('src/components/Embedding.svelte', 'Tokenization');
+assertIncludes('src/components/Embedding.svelte', 'Token Embedding');
+assertIncludes('src/components/Attention.svelte', '多头自注意力');
+assertIncludes('src/components/LinearSoftmax.svelte', '输出概率');
+assertIncludes('src/components/SubsequentBlocks.svelte', '个相同的');
+assertIncludes('src/components/Operation.svelte', 'Layer Normalization');
+```
+
+- [ ] **Step 2: Run the check and verify it fails**
+
+Run: `npm run localization:check`
+
+Expected: FAIL on `InputForm.svelte` or another core UI assertion because the old English labels are still present.
+
+- [ ] **Step 3: Import reusable strings where it helps**
+
+In `src/components/InputForm.svelte`, add:
+
+```ts
+import { zhCN } from '~/utils/i18n';
+```
+
+Replace visible strings:
+
+```svelte
+{zhCN.controls.examples}
+placeholder={zhCN.controls.inputPlaceholder}
+{zhCN.controls.generate}
+{zhCN.controls.mobileExampleOnly}
+{zhCN.controls.modelDownloading}
+{zhCN.controls.wordLimit(wordLimit)}
+```
+
+- [ ] **Step 4: Translate compact component labels**
+
+Use these exact label choices:
+
+```text
+Topbar logo: Transformer Explainer
+Header link: Transformer Explainer
+Temperature control label: Temperature
+Sampling control label: Sampling
+Embedding title: Embedding
+Tokenization label: Tokenization
+Token Embedding label: Token Embedding
+Positional Encoding label: Positional Encoding
+Multi-head Self Attention title: 多头自注意力
+Subsequent blocks guide: {count} 个相同的 Transformer Blocks
+Probabilities title: 输出概率
+Tokens: Tokens
+Scaled logits: 缩放后的 logits
+Dot product: 点积（Dot Product）
+Scaling · Mask: 缩放 · Mask
+Softmax: Softmax
+Normalization: 归一化（Normalization）
+```
+
+Keep `Q`, `K`, `V`, `Query`, `Key`, `Value`, `Out`, `Softmax`, `MLP`, `GeLU`, `Dropout`, `Layer Normalization`, and `Residual` where labels are too narrow or already standard technical labels.
+
+- [ ] **Step 5: Run checks**
+
+Run: `npm run localization:check`
+
+Expected: PASS.
+
+Run: `npm run check`
+
+Expected: PASS with no Svelte or TypeScript errors.
+
+- [ ] **Step 6: Commit**
+
+Run:
+
+```bash
+git add --sparse scripts/check-localization.mjs src/components src/utils/i18n.ts
+git commit -m "feat: localize core interface labels"
+```
+
+## Task 3: Guided Textbook Cards
+
+**Files:**
+- Modify: `scripts/check-localization.mjs`
+- Modify: `src/utils/textbookPages.ts`
+
+- [ ] **Step 1: Extend the failing check for textbook cards**
+
+Append:
+
+```js
+const textbook = read('src/utils/textbookPages.ts');
+for (const expected of [
+	"title: '什么是 Transformer？'",
+	"title: 'Transformer 如何工作？'",
+	"title: 'Transformer 架构'",
+	"title: 'Embedding'",
+	"title: 'Token Embedding'",
+	"title: 'Positional Encoding'",
+	"title: '重复堆叠的 Transformer Blocks'",
+	"title: '多头自注意力（Multi-Head Self-Attention）'",
+	"title: 'Query、Key、Value'",
+	"title: 'Multi-head'",
+	"title: 'Masked Self-Attention'",
+	"title: 'Attention 输出与拼接'",
+	"title: 'MLP（Multi-Layer Perceptron）'",
+	"title: '输出 Logit'",
+	"title: '输出概率'",
+	"title: 'Temperature'",
+	"title: 'Sampling 策略'",
+	"title: '残差连接（Residual Connection）'",
+	"title: 'Layer Normalization'",
+	"title: 'Dropout'"
+]) {
+	if (!textbook.includes(expected)) {
+		throw new Error(`src/utils/textbookPages.ts should include: ${expected}`);
+	}
+}
+
+assertExcludes('src/utils/textbookPages.ts', 'What is Transformer?');
+assertExcludes('src/utils/textbookPages.ts', 'How Transformers Work?');
+assertExcludes('src/utils/textbookPages.ts', 'Transformer Architecture');
+```
+
+- [ ] **Step 2: Run the check and verify it fails**
+
+Run: `npm run localization:check`
+
+Expected: FAIL on the first missing Chinese textbook title.
+
+- [ ] **Step 3: Translate textbook titles and contents**
+
+Translate each `title` exactly as listed in Step 1. Translate each `content` HTML string into Chinese while preserving:
+
+```ts
+id: 'existing-id'
+on: () => {}
+out: () => {}
+complete: () => {}
+highlightElements([...])
+expandedBlock.set({ id: '...' })
+window.dataLayer?.push(...)
+```
+
+Use these recurring terminology forms in the card bodies:
+
+```text
+Transformer
+GPT-2（small）
+词元（Token）
+Tokenization
+Token Embedding
+Positional Encoding
+Multi-Head Self-Attention
+Query、Key、Value
+Masked Self-Attention
+Attention scores
+Softmax
+MLP（Multi-Layer Perceptron）
+logits
+Temperature
+top-k
+top-p
+Residual Connection
+Layer Normalization
+Dropout
+```
+
+- [ ] **Step 4: Run checks**
+
+Run: `npm run localization:check`
+
+Expected: PASS.
+
+Run: `npm run check`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+Run:
+
+```bash
+git add --sparse scripts/check-localization.mjs src/utils/textbookPages.ts
+git commit -m "feat: localize guided textbook"
+```
+
+## Task 4: Long Article
+
+**Files:**
+- Modify: `scripts/check-localization.mjs`
+- Modify: `src/components/article/Article.svelte`
+
+- [ ] **Step 1: Extend the failing check for the long article**
+
+Append:
+
+```js
+for (const expected of [
+	'<h1>什么是 Transformer？</h1>',
+	'<h1>Transformer 架构</h1>',
+	'<h2>Embedding</h2>',
+	'<h2>Transformer Block</h2>',
+	'<h3>Multi-Head Self-Attention</h3>',
+	'<h3>MLP：Multi-Layer Perceptron</h3>',
+	'<h2>输出概率</h2>',
+	'<h2>辅助架构特性</h2>',
+	'<h1>交互功能</h1>',
+	'<h2>视频教程</h2>',
+	'<h2>Transformer Explainer 是如何实现的？</h2>',
+	'<h2>谁开发了 Transformer Explainer？</h2>'
+]) {
+	assertIncludes('src/components/article/Article.svelte', expected);
+}
+
+assertExcludes('src/components/article/Article.svelte', '<h1>What is a Transformer?</h1>');
+assertExcludes('src/components/article/Article.svelte', '<h1>Interactive Features</h1>');
+assertExcludes('src/components/article/Article.svelte', '<h2>Output Probabilities</h2>');
+```
+
+- [ ] **Step 2: Run the check and verify it fails**
+
+Run: `npm run localization:check`
+
+Expected: FAIL on `<h1>什么是 Transformer？</h1>`.
+
+- [ ] **Step 3: Translate the article**
+
+Translate visible prose, list items, headings, and captions in `Article.svelte`. Preserve all of these exactly:
+
+```svelte
+<script>
+	import tailwindConfig from '../../../tailwind.config';
+	import resolveConfig from 'tailwindcss/resolveConfig';
+	import Katex from '~/utils/Katex.svelte';
+</script>
+```
+
+Preserve all `href`, `target`, `title`, `id`, `data-click`, `class`, `Katex math={...}`, image paths, and code examples. Translate text around inline code and links. Keep library names, model names, author names, paper title `"Attention is All You Need"`, and project name `Transformer Explainer` in English.
+
+- [ ] **Step 4: Run checks**
+
+Run: `npm run localization:check`
+
+Expected: PASS.
+
+Run: `npm run check`
+
+Expected: PASS.
+
+- [ ] **Step 5: Commit**
+
+Run:
+
+```bash
+git add --sparse scripts/check-localization.mjs src/components/article/Article.svelte
+git commit -m "feat: localize explanatory article"
+```
+
+## Task 5: Final Verification
+
+**Files:**
+- No production file changes expected unless verification reveals a concrete issue.
+
+- [ ] **Step 1: Run static localization check**
+
+Run: `npm run localization:check`
+
+Expected: PASS.
+
+- [ ] **Step 2: Run Svelte/TypeScript check**
+
+Run: `npm run check`
+
+Expected: PASS.
+
+- [ ] **Step 3: Run production build**
+
+Run: `npm run build`
+
+Expected: PASS and output written to `build/`.
+
+- [ ] **Step 4: Start local dev server**
+
+Run: `npm run dev -- --host 127.0.0.1`
+
+Expected: Vite prints a local URL such as `http://127.0.0.1:5173/`.
+
+- [ ] **Step 5: Browser smoke check**
+
+Open the local URL and verify:
+
+```text
+The metadata title is Chinese.
+The input controls show 示例 and 生成.
+The tutorial card titles are Chinese.
+The article headings are Chinese.
+Narrow labels such as Q/K/V/MLP/Softmax remain readable.
+No obvious text overlaps appear in the first viewport.
+```
+
+- [ ] **Step 6: Commit final fixes if any**
+
+If Step 5 required fixes, run:
+
+```bash
+git add --sparse src scripts package.json
+git commit -m "fix: polish chinese localization"
+```
+
+If no fixes were required, do not create an empty commit.
diff --git a/docs/superpowers/specs/2026-05-16-chinese-localization-design.md b/docs/superpowers/specs/2026-05-16-chinese-localization-design.md
new file mode 100644
index 0000000..be87f58
--- /dev/null
+++ b/docs/superpowers/specs/2026-05-16-chinese-localization-design.md
@@ -0,0 +1,79 @@
+# Transformer Explainer 中文汉化设计
+
+## 背景
+
+本项目是 `poloclub/transformer-explainer` 的 fork，当前页面文案以英文为主。目标是面向中文技术读者提供中文界面和中文讲解，同时保留关键技术术语的英文表达，避免翻译后失去专业语境或与模型可视化标签脱节。
+
+仓库是 SvelteKit 应用。主要英文来源包括：
+
+- `src/components/article/Article.svelte`：页面下方长文章正文。
+- `src/utils/textbookPages.ts`：交互式教程卡片标题与内容。
+- `src/components/*.svelte`：按钮、控件、图表短标签、popover 标签、提示语。
+- `src/store/index.ts`：示例 prompt 文本。
+- `src/app.html`：页面标题、meta 描述和分享文案。
+
+## 用户需求
+
+中文应自然、清楚，适合技术专业读者。专业术语可保留英文；缩写或重要术语首次出现时，需要给出英文全称或中英解释。例如 RAG 应写作「检索增强生成（Retrieval-Augmented Generation, RAG）」。
+
+## 推荐方案
+
+采用「中文静态汉化 + 术语英文保留」方案。
+
+不实现完整语言切换系统。当前 fork 的目标是中文版本，完整 i18n 会增加额外运行时状态、切换 UI 和维护成本。也不完全原地硬改所有文案；短文案应尽量集中在中文文案文件或术语文件中，长文章和富文本教程可以在原组件/数据结构中翻译，以减少 Svelte 富文本重构风险。
+
+## 翻译规则
+
+1. UI 操作文案使用中文，例如「生成」「示例」「试试示例」「最多可输入 12 个英文单词」。
+2. 专业术语保留英文或中英并列，例如「词元（Token）」「自注意力（Self-Attention）」「多层感知机（MLP, Multi-Layer Perceptron）」。
+3. 图表中的极短标签优先保持可读和不换行。`Q`、`K`、`V`、`MLP`、`Softmax` 等短标签可保留英文；标题和教程正文给出中文解释。
+4. 缩写首次出现时补充英文全称。之后可直接使用缩写或英文术语。
+5. 链接、论文标题、模型名、作者名、库名保持原文。
+6. 示例 prompt 暂时保留英文。GPT-2 tokenizer、缓存示例数据和模型输出都围绕英文 prompt 工作，直接改成中文会让演示行为和缓存数据不匹配。
+
+## 实现范围
+
+需要汉化：
+
+- `src/app.html` 的页面标题和 meta 文案。
+- `src/components/InputForm.svelte` 的按钮、占位符、helper 文案。
+- `src/components/Topbar.svelte` 和 `src/components/Header.svelte` 的可见标题或链接文本。
+- `src/components/Sampling.svelte`、`src/components/Temperature.svelte` 的控件标题和说明。
+- 主要可视化组件中的阶段名、矩阵标签、popover 标题和公式辅助文字。
+- `src/utils/textbookPages.ts` 中的交互式教程卡片。
+- `src/components/article/Article.svelte` 中的长文章正文、标题、图注和功能说明。
+- `src/store/index.ts` 中与示例相关的中文说明仅在不影响模型输入的前提下调整。
+
+不需要汉化：
+
+- 源代码变量名、CSS class、analytics event name、DOM selector、数据结构字段。
+- 模型输出 token、用户输入 prompt、缓存数据文件 `src/constants/examples/*.js`。
+- 外部链接标题、作者姓名、论文名和库名。
+
+## 文件结构
+
+新增 `src/lib/i18n/zh-CN.ts` 或类似位置，用于收纳短 UI 文案和术语常量。长文章 `Article.svelte` 与教程数据 `textbookPages.ts` 可以直接翻译现有 HTML 内容；若某些术语多次出现且容易不一致，再提取到小型 glossary 常量。
+
+预期结构：
+
+```text
+src/lib/i18n/zh-CN.ts
+src/lib/i18n/glossary.ts
+```
+
+如果项目现有别名不方便从 `src/lib` 引入，可改用 `src/utils/i18n.ts`，保持与现有 `~/utils/*` 引入风格一致。
+
+## 测试与验证
+
+1. 运行 `npm run check`，确保 Svelte 和 TypeScript 通过。
+2. 运行 `npm run build`，确保静态构建通过。
+3. 启动本地开发服务器，检查首页主要区域、教程卡片、长文章、popover 和移动端提示没有明显未翻译英文。
+4. 用文本扫描辅助检查剩余英文文案。允许保留术语、代码名、链接、模型名、作者名、库名和 prompt。
+5. 因当前 sparse checkout 未包含 `static/model-v2` 大模型分片，本地运行可能会在真实模型下载处不可用；验证时主要依赖缓存示例数据和构建检查。
+
+## 风险
+
+- 中文文案比英文更长，可能造成按钮、图表短标签或 popover 布局拥挤。短标签应保守处理，必要时保留英文。
+- 长文章包含大量 HTML 和 KaTeX，翻译时必须保留标签结构和公式内容。
+- 教程页的 `on/out/complete` 行为依赖 selector 和 page id，翻译不得修改这些 id 或 selector。
+- 示例 prompt 与缓存数据耦合，若未来要中文 prompt，需要重新生成缓存示例或改模型演示策略。
diff --git a/package-lock.json b/package-lock.json
index e9a5887..f32c955 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,7 +48,7 @@
 				"tailwindcss": "^3.4.1",
 				"tslib": "^2.4.1",
 				"typescript": "^5.0.0",
-				"vite": "^5.4.21"
+				"vite": "^6.4.2"
 			},
 			"engines": {
 				"node": ">=20.0.0",
@@ -69,9 +69,9 @@
 			}
 		},
 		"node_modules/@esbuild/aix-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.12.tgz",
+			"integrity": "sha512-Hhmwd6CInZ3dwpuGTF8fJG6yoWmsToE+vYgD4nytZVxcu1ulHpUQRAB1UJ8+N1Am3Mz4+xOByoQoSZf4D+CpkA==",
 			"cpu": [
 				"ppc64"
 			],
@@ -82,13 +82,13 @@
 				"aix"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
-			"integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.25.12.tgz",
+			"integrity": "sha512-VJ+sKvNA/GE7Ccacc9Cha7bpS8nyzVv0jdVgwNDaR4gDMC/2TTRc33Ip8qrNYUcpkOHUT5OZ0bUcNNVZQ9RLlg==",
 			"cpu": [
 				"arm"
 			],
@@ -99,13 +99,13 @@
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
-			"integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.25.12.tgz",
+			"integrity": "sha512-6AAmLG7zwD1Z159jCKPvAxZd4y/VTO0VkprYy+3N2FtJ8+BQWFXU+OxARIwA46c5tdD9SsKGZ/1ocqBS/gAKHg==",
 			"cpu": [
 				"arm64"
 			],
@@ -116,13 +116,13 @@
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/android-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
-			"integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.25.12.tgz",
+			"integrity": "sha512-5jbb+2hhDHx5phYR2By8GTWEzn6I9UqR11Kwf22iKbNpYrsmRB18aX/9ivc5cabcUiAT/wM+YIZ6SG9QO6a8kg==",
 			"cpu": [
 				"x64"
 			],
@@ -133,13 +133,13 @@
 				"android"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/darwin-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
-			"integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.25.12.tgz",
+			"integrity": "sha512-N3zl+lxHCifgIlcMUP5016ESkeQjLj/959RxxNYIthIg+CQHInujFuXeWbWMgnTo4cp5XVHqFPmpyu9J65C1Yg==",
 			"cpu": [
 				"arm64"
 			],
@@ -150,13 +150,13 @@
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/darwin-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
-			"integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.25.12.tgz",
+			"integrity": "sha512-HQ9ka4Kx21qHXwtlTUVbKJOAnmG1ipXhdWTmNXiPzPfWKpXqASVcWdnf2bnL73wgjNrFXAa3yYvBSd9pzfEIpA==",
 			"cpu": [
 				"x64"
 			],
@@ -167,13 +167,13 @@
 				"darwin"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/freebsd-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
-			"integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-gA0Bx759+7Jve03K1S0vkOu5Lg/85dou3EseOGUes8flVOGxbhDDh/iZaoek11Y8mtyKPGF3vP8XhnkDEAmzeg==",
 			"cpu": [
 				"arm64"
 			],
@@ -184,13 +184,13 @@
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/freebsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
-			"integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.25.12.tgz",
+			"integrity": "sha512-TGbO26Yw2xsHzxtbVFGEXBFH0FRAP7gtcPE7P5yP7wGy7cXK2oO7RyOhL5NLiqTlBh47XhmIUXuGciXEqYFfBQ==",
 			"cpu": [
 				"x64"
 			],
@@ -201,13 +201,13 @@
 				"freebsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-arm": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
-			"integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.25.12.tgz",
+			"integrity": "sha512-lPDGyC1JPDou8kGcywY0YILzWlhhnRjdof3UlcoqYmS9El818LLfJJc3PXXgZHrHCAKs/Z2SeZtDJr5MrkxtOw==",
 			"cpu": [
 				"arm"
 			],
@@ -218,13 +218,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
-			"integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.25.12.tgz",
+			"integrity": "sha512-8bwX7a8FghIgrupcxb4aUmYDLp8pX06rGh5HqDT7bB+8Rdells6mHvrFHHW2JAOPZUbnjUpKTLg6ECyzvas2AQ==",
 			"cpu": [
 				"arm64"
 			],
@@ -235,13 +235,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
-			"integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.25.12.tgz",
+			"integrity": "sha512-0y9KrdVnbMM2/vG8KfU0byhUN+EFCny9+8g202gYqSSVMonbsCfLjUO+rCci7pM0WBEtz+oK/PIwHkzxkyharA==",
 			"cpu": [
 				"ia32"
 			],
@@ -252,13 +252,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-loong64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
-			"integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.25.12.tgz",
+			"integrity": "sha512-h///Lr5a9rib/v1GGqXVGzjL4TMvVTv+s1DPoxQdz7l/AYv6LDSxdIwzxkrPW438oUXiDtwM10o9PmwS/6Z0Ng==",
 			"cpu": [
 				"loong64"
 			],
@@ -269,13 +269,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-mips64el": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
-			"integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.25.12.tgz",
+			"integrity": "sha512-iyRrM1Pzy9GFMDLsXn1iHUm18nhKnNMWscjmp4+hpafcZjrr2WbT//d20xaGljXDBYHqRcl8HnxbX6uaA/eGVw==",
 			"cpu": [
 				"mips64el"
 			],
@@ -286,13 +286,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-ppc64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
-			"integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.25.12.tgz",
+			"integrity": "sha512-9meM/lRXxMi5PSUqEXRCtVjEZBGwB7P/D4yT8UG/mwIdze2aV4Vo6U5gD3+RsoHXKkHCfSxZKzmDssVlRj1QQA==",
 			"cpu": [
 				"ppc64"
 			],
@@ -303,13 +303,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-riscv64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
-			"integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.25.12.tgz",
+			"integrity": "sha512-Zr7KR4hgKUpWAwb1f3o5ygT04MzqVrGEGXGLnj15YQDJErYu/BGg+wmFlIDOdJp0PmB0lLvxFIOXZgFRrdjR0w==",
 			"cpu": [
 				"riscv64"
 			],
@@ -320,13 +320,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-s390x": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
-			"integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.25.12.tgz",
+			"integrity": "sha512-MsKncOcgTNvdtiISc/jZs/Zf8d0cl/t3gYWX8J9ubBnVOwlk65UIEEvgBORTiljloIWnBzLs4qhzPkJcitIzIg==",
 			"cpu": [
 				"s390x"
 			],
@@ -337,13 +337,13 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/linux-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
-			"integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.25.12.tgz",
+			"integrity": "sha512-uqZMTLr/zR/ed4jIGnwSLkaHmPjOjJvnm6TVVitAa08SLS9Z0VM8wIRx7gWbJB5/J54YuIMInDquWyYvQLZkgw==",
 			"cpu": [
 				"x64"
 			],
@@ -354,13 +354,30 @@
 				"linux"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/netbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-arm64/-/netbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-xXwcTq4GhRM7J9A8Gv5boanHhRa/Q9KLVmcyXHCTaM4wKfIpWkdXiMog/KsnxzJ0A1+nD+zoecuzqPmCRyBGjg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"netbsd"
+			],
+			"engines": {
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/netbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-Ld5pTlzPy3YwGec4OuHh1aCVCRvOXdH8DgRjfDy/oumVovmuSzWfnSJg+VtakB9Cm0gxNO9BzWkj6mtO1FMXkQ==",
 			"cpu": [
 				"x64"
 			],
@@ -371,13 +388,30 @@
 				"netbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openbsd-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-arm64/-/openbsd-arm64-0.25.12.tgz",
+			"integrity": "sha512-fF96T6KsBo/pkQI950FARU9apGNTSlZGsv1jZBAlcLL1MLjLNIWPBkj5NlSz8aAzYKg+eNqknrUJ24QBybeR5A==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openbsd"
+			],
+			"engines": {
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/openbsd-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
-			"integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.25.12.tgz",
+			"integrity": "sha512-MZyXUkZHjQxUvzK7rN8DJ3SRmrVrke8ZyRusHlP+kuwqTcfWLyqMOE3sScPPyeIXN/mDJIfGXvcMqCgYKekoQw==",
 			"cpu": [
 				"x64"
 			],
@@ -388,13 +422,30 @@
 				"openbsd"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
+			}
+		},
+		"node_modules/@esbuild/openharmony-arm64": {
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/openharmony-arm64/-/openharmony-arm64-0.25.12.tgz",
+			"integrity": "sha512-rm0YWsqUSRrjncSXGA7Zv78Nbnw4XL6/dzr20cyrQf7ZmRcsovpcRBdhD43Nuk3y7XIoW2OxMVvwuRvk9XdASg==",
+			"cpu": [
+				"arm64"
+			],
+			"dev": true,
+			"license": "MIT",
+			"optional": true,
+			"os": [
+				"openharmony"
+			],
+			"engines": {
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/sunos-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
-			"integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.25.12.tgz",
+			"integrity": "sha512-3wGSCDyuTHQUzt0nV7bocDy72r2lI33QL3gkDNGkod22EsYl04sMf0qLb8luNKTOmgF/eDEDP5BFNwoBKH441w==",
 			"cpu": [
 				"x64"
 			],
@@ -405,13 +456,13 @@
 				"sunos"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-arm64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
-			"integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.25.12.tgz",
+			"integrity": "sha512-rMmLrur64A7+DKlnSuwqUdRKyd3UE7oPJZmnljqEptesKM8wx9J8gx5u0+9Pq0fQQW8vqeKebwNXdfOyP+8Bsg==",
 			"cpu": [
 				"arm64"
 			],
@@ -422,13 +473,13 @@
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-ia32": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
-			"integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.25.12.tgz",
+			"integrity": "sha512-HkqnmmBoCbCwxUKKNPBixiWDGCpQGVsrQfJoVGYLPT41XWF8lHuE5N6WhVia2n4o5QK5M4tYr21827fNhi4byQ==",
 			"cpu": [
 				"ia32"
 			],
@@ -439,13 +490,13 @@
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@esbuild/win32-x64": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
-			"integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.25.12.tgz",
+			"integrity": "sha512-alJC0uCZpTFrSL0CCDjcgleBXPnCrEAhTBILpeAp7M/OFgoqtAetfBzX0xM00MUsVVPpVjlPuMbREqnZCXaTnA==",
 			"cpu": [
 				"x64"
 			],
@@ -456,7 +507,7 @@
 				"win32"
 			],
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			}
 		},
 		"node_modules/@eslint-community/eslint-utils": {
@@ -3679,9 +3730,9 @@
 			"license": "MIT"
 		},
 		"node_modules/esbuild": {
-			"version": "0.21.5",
-			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
-			"integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+			"version": "0.25.12",
+			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
+			"integrity": "sha512-bbPBYYrtZbkt6Os6FiTLCTFxvq4tt3JKall1vRwshA3fdVztsLAatFaZobhkBC8/BrPetoa0oksYoKXoG4ryJg==",
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
@@ -3689,32 +3740,35 @@
 				"esbuild": "bin/esbuild"
 			},
 			"engines": {
-				"node": ">=12"
+				"node": ">=18"
 			},
 			"optionalDependencies": {
-				"@esbuild/aix-ppc64": "0.21.5",
-				"@esbuild/android-arm": "0.21.5",
-				"@esbuild/android-arm64": "0.21.5",
-				"@esbuild/android-x64": "0.21.5",
-				"@esbuild/darwin-arm64": "0.21.5",
-				"@esbuild/darwin-x64": "0.21.5",
-				"@esbuild/freebsd-arm64": "0.21.5",
-				"@esbuild/freebsd-x64": "0.21.5",
-				"@esbuild/linux-arm": "0.21.5",
-				"@esbuild/linux-arm64": "0.21.5",
-				"@esbuild/linux-ia32": "0.21.5",
-				"@esbuild/linux-loong64": "0.21.5",
-				"@esbuild/linux-mips64el": "0.21.5",
-				"@esbuild/linux-ppc64": "0.21.5",
-				"@esbuild/linux-riscv64": "0.21.5",
-				"@esbuild/linux-s390x": "0.21.5",
-				"@esbuild/linux-x64": "0.21.5",
-				"@esbuild/netbsd-x64": "0.21.5",
-				"@esbuild/openbsd-x64": "0.21.5",
-				"@esbuild/sunos-x64": "0.21.5",
-				"@esbuild/win32-arm64": "0.21.5",
-				"@esbuild/win32-ia32": "0.21.5",
-				"@esbuild/win32-x64": "0.21.5"
+				"@esbuild/aix-ppc64": "0.25.12",
+				"@esbuild/android-arm": "0.25.12",
+				"@esbuild/android-arm64": "0.25.12",
+				"@esbuild/android-x64": "0.25.12",
+				"@esbuild/darwin-arm64": "0.25.12",
+				"@esbuild/darwin-x64": "0.25.12",
+				"@esbuild/freebsd-arm64": "0.25.12",
+				"@esbuild/freebsd-x64": "0.25.12",
+				"@esbuild/linux-arm": "0.25.12",
+				"@esbuild/linux-arm64": "0.25.12",
+				"@esbuild/linux-ia32": "0.25.12",
+				"@esbuild/linux-loong64": "0.25.12",
+				"@esbuild/linux-mips64el": "0.25.12",
+				"@esbuild/linux-ppc64": "0.25.12",
+				"@esbuild/linux-riscv64": "0.25.12",
+				"@esbuild/linux-s390x": "0.25.12",
+				"@esbuild/linux-x64": "0.25.12",
+				"@esbuild/netbsd-arm64": "0.25.12",
+				"@esbuild/netbsd-x64": "0.25.12",
+				"@esbuild/openbsd-arm64": "0.25.12",
+				"@esbuild/openbsd-x64": "0.25.12",
+				"@esbuild/openharmony-arm64": "0.25.12",
+				"@esbuild/sunos-x64": "0.25.12",
+				"@esbuild/win32-arm64": "0.25.12",
+				"@esbuild/win32-ia32": "0.25.12",
+				"@esbuild/win32-x64": "0.25.12"
 			}
 		},
 		"node_modules/escalade": {
@@ -4088,6 +4142,24 @@
 				"reusify": "^1.0.4"
 			}
 		},
+		"node_modules/fdir": {
+			"version": "6.5.0",
+			"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+			"integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+			"dev": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"peerDependencies": {
+				"picomatch": "^3 || ^4"
+			},
+			"peerDependenciesMeta": {
+				"picomatch": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/file-entry-cache": {
 			"version": "6.0.1",
 			"resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5512,9 +5584,9 @@
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
-			"version": "4.0.3",
-			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-			"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+			"version": "4.0.4",
+			"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+			"integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
 			"dev": true,
 			"license": "MIT",
 			"engines": {
@@ -7331,6 +7403,23 @@
 				"node": ">=0.8"
 			}
 		},
+		"node_modules/tinyglobby": {
+			"version": "0.2.16",
+			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+			"integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
+			"dev": true,
+			"license": "MIT",
+			"dependencies": {
+				"fdir": "^6.5.0",
+				"picomatch": "^4.0.4"
+			},
+			"engines": {
+				"node": ">=12.0.0"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/SuperchupuDev"
+			}
+		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
 			"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -7520,21 +7609,24 @@
 			"license": "MIT"
 		},
 		"node_modules/vite": {
-			"version": "5.4.21",
-			"resolved": "https://registry.npmjs.org/vite/-/vite-5.4.21.tgz",
-			"integrity": "sha512-o5a9xKjbtuhY6Bi5S3+HvbRERmouabWbyUcpXXUA1u+GNUKoROi9byOJ8M0nHbHYHkYICiMlqxkg1KkYmm25Sw==",
+			"version": "6.4.2",
+			"resolved": "https://registry.npmjs.org/vite/-/vite-6.4.2.tgz",
+			"integrity": "sha512-2N/55r4JDJ4gdrCvGgINMy+HH3iRpNIz8K6SFwVsA+JbQScLiC+clmAxBgwiSPgcG9U15QmvqCGWzMbqda5zGQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
-				"esbuild": "^0.21.3",
-				"postcss": "^8.4.43",
-				"rollup": "^4.20.0"
+				"esbuild": "^0.25.0",
+				"fdir": "^6.4.4",
+				"picomatch": "^4.0.2",
+				"postcss": "^8.5.3",
+				"rollup": "^4.34.9",
+				"tinyglobby": "^0.2.13"
 			},
 			"bin": {
 				"vite": "bin/vite.js"
 			},
 			"engines": {
-				"node": "^18.0.0 || >=20.0.0"
+				"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
 			},
 			"funding": {
 				"url": "https://github.com/vitejs/vite?sponsor=1"
@@ -7543,19 +7635,25 @@
 				"fsevents": "~2.3.3"
 			},
 			"peerDependencies": {
-				"@types/node": "^18.0.0 || >=20.0.0",
+				"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
+				"jiti": ">=1.21.0",
 				"less": "*",
 				"lightningcss": "^1.21.0",
 				"sass": "*",
 				"sass-embedded": "*",
 				"stylus": "*",
 				"sugarss": "*",
-				"terser": "^5.4.0"
+				"terser": "^5.16.0",
+				"tsx": "^4.8.1",
+				"yaml": "^2.4.2"
 			},
 			"peerDependenciesMeta": {
 				"@types/node": {
 					"optional": true
 				},
+				"jiti": {
+					"optional": true
+				},
 				"less": {
 					"optional": true
 				},
@@ -7576,6 +7674,12 @@
 				},
 				"terser": {
 					"optional": true
+				},
+				"tsx": {
+					"optional": true
+				},
+				"yaml": {
+					"optional": true
 				}
 			}
 		},
diff --git a/package.json b/package.json
index d680935..ecc94e2 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"localization:check": "node scripts/check-localization.mjs",
 		"lint": "prettier --check . && eslint .",
 		"format": "prettier --write .",
 		"deploy": "gh-pages -d build --nojekyll",
@@ -47,7 +48,7 @@
 		"tailwindcss": "^3.4.1",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
-		"vite": "^5.4.21"
+		"vite": "^6.4.2"
 	},
 	"type": "module",
 	"dependencies": {
diff --git a/scripts/check-localization.mjs b/scripts/check-localization.mjs
new file mode 100644
index 0000000..38a7536
--- /dev/null
+++ b/scripts/check-localization.mjs
@@ -0,0 +1,104 @@
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
+
+const root = process.cwd();
+
+function read(path) {
+	return readFileSync(join(root, path), 'utf8');
+}
+
+function assertIncludes(path, expected) {
+	const content = read(path);
+	if (!content.includes(expected)) {
+		throw new Error(`${path} should include: ${expected}`);
+	}
+}
+
+function assertExcludes(path, banned) {
+	const content = read(path);
+	if (content.includes(banned)) {
+		throw new Error(`${path} should not include original English copy: ${banned}`);
+	}
+}
+
+assertIncludes('src/app.html', '<html lang="zh-CN">');
+assertIncludes('src/app.html', 'Transformer Explainer：可视化理解 LLM Transformer 模型');
+assertExcludes('src/app.html', 'LLM Transformer Model Visually Explained');
+
+assertIncludes('src/utils/i18n.ts', '多层感知机（MLP, Multi-Layer Perceptron）');
+assertIncludes('src/utils/i18n.ts', '词元（Token）');
+assertIncludes('src/utils/i18n.ts', '自注意力（Self-Attention）');
+
+assertIncludes('src/components/InputForm.svelte', '生成');
+assertIncludes('src/components/InputForm.svelte', '示例');
+assertIncludes('src/components/InputForm.svelte', '输入你自己的英文提示词');
+assertExcludes('src/components/InputForm.svelte', 'Test your own input text');
+assertExcludes('src/components/InputForm.svelte', 'Generate');
+
+assertIncludes('src/components/Embedding.svelte', 'Embedding');
+assertIncludes('src/components/Embedding.svelte', 'Tokenization');
+assertIncludes('src/components/Embedding.svelte', 'Token Embedding');
+assertIncludes('src/components/Attention.svelte', '多头自注意力');
+assertIncludes('src/components/LinearSoftmax.svelte', '输出概率');
+assertIncludes('src/components/SubsequentBlocks.svelte', '个相同的');
+assertIncludes('src/components/Operation.svelte', 'Layer Normalization');
+
+const textbook = read('src/utils/textbookPages.ts');
+for (const expected of [
+	"title: '什么是 Transformer？'",
+	"title: 'Transformer 如何工作？'",
+	"title: 'Transformer 架构'",
+	"title: 'Embedding'",
+	"title: 'Token Embedding'",
+	"title: 'Positional Encoding'",
+	"title: '重复堆叠的 Transformer Blocks'",
+	"title: '多头自注意力（Multi-Head Self-Attention）'",
+	"title: 'Query、Key、Value'",
+	"title: 'Multi-head'",
+	"title: 'Masked Self-Attention'",
+	"title: 'Attention 输出与拼接'",
+	"title: 'MLP（Multi-Layer Perceptron）'",
+	"title: '输出 Logit'",
+	"title: '输出概率'",
+	"title: 'Temperature'",
+	"title: 'Sampling 策略'",
+	"title: '残差连接（Residual Connection）'",
+	"title: 'Layer Normalization'",
+	"title: 'Dropout'"
+]) {
+	if (!textbook.includes(expected)) {
+		throw new Error(`src/utils/textbookPages.ts should include: ${expected}`);
+	}
+}
+
+assertExcludes('src/utils/textbookPages.ts', 'What is Transformer?');
+assertExcludes('src/utils/textbookPages.ts', 'How Transformers Work?');
+assertExcludes('src/utils/textbookPages.ts', 'Transformer Architecture');
+assertExcludes('src/utils/textbookPages.ts', "Transformers aren't magic");
+assertExcludes('src/utils/textbookPages.ts', 'What is the most probable next word');
+
+for (const expected of [
+	'<h1>什么是 Transformer？</h1>',
+	'<h1>Transformer 架构</h1>',
+	'<h2>Embedding</h2>',
+	'<h2>Transformer Block</h2>',
+	'<h3>Multi-Head Self-Attention</h3>',
+	'<h3>MLP：Multi-Layer Perceptron</h3>',
+	'<h2>输出概率</h2>',
+	'<h2>辅助架构特性</h2>',
+	'<h1>交互功能</h1>',
+	'<h2>视频教程</h2>',
+	'<h2>Transformer Explainer 是如何实现的？</h2>',
+	'<h2>谁开发了 Transformer Explainer？</h2>'
+]) {
+	assertIncludes('src/components/article/Article.svelte', expected);
+}
+
+assertExcludes('src/components/article/Article.svelte', '<h1>What is a Transformer?</h1>');
+assertExcludes('src/components/article/Article.svelte', '<h1>Interactive Features</h1>');
+assertExcludes('src/components/article/Article.svelte', '<h2>Output Probabilities</h2>');
+assertExcludes('src/components/article/Article.svelte', 'and even');
+assertExcludes('src/components/article/Article.svelte', 'This expansion step allows');
+assertExcludes('src/components/article/Article.svelte', 'Transformer Explainer was created by');
+
+console.log('Localization checks passed.');
diff --git a/src/app.html b/src/app.html
index 53fee17..996119e 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="zh-CN">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
@@ -7,13 +7,13 @@
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link href="https://fonts.googleapis.com/css2?family=Jersey+10&display=swap" rel="stylesheet" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		<title>Transformer Explainer: LLM Transformer Model Visually Explained</title>
+		<title>Transformer Explainer：可视化理解 LLM Transformer 模型</title>
 
 		<!-- Primary Meta Tags -->
-		<meta name="title" content="Transformer Explainer: LLM Transformer Model Visually Explained" />
+		<meta name="title" content="Transformer Explainer：可视化理解 LLM Transformer 模型" />
 		<meta
 			name="description"
-			content="An interactive visualization tool showing you how transformer models work in large language models (LLM) like GPT."
+			content="一个交互式可视化工具，帮助你理解 GPT 等大语言模型（LLM）中的 Transformer 模型如何工作。"
 		/>
 
 		<!-- Open Graph / Facebook -->
@@ -21,11 +21,11 @@
 		<meta property="og:url" content="https://poloclub.github.io/transformer-explainer/" />
 		<meta
 			property="og:title"
-			content="Transformer Explainer: LLM Transformer Model Visually Explained"
+			content="Transformer Explainer：可视化理解 LLM Transformer 模型"
 		/>
 		<meta
 			property="og:description"
-			content="An interactive visualization tool showing you how transformer models work in large language models (LLM) like GPT."
+			content="一个交互式可视化工具，帮助你理解 GPT 等大语言模型（LLM）中的 Transformer 模型如何工作。"
 		/>
 		<meta
 			property="og:image"
@@ -37,11 +37,11 @@
 		<meta property="twitter:url" content="https://poloclub.github.io/transformer-explainer/" />
 		<meta
 			property="twitter:title"
-			content="Transformer Explainer: LLM Transformer Model Visually Explained"
+			content="Transformer Explainer：可视化理解 LLM Transformer 模型"
 		/>
 		<meta
 			property="twitter:description"
-			content="An interactive visualization tool showing you how transformer models work in large language models (LLM) like GPT."
+			content="一个交互式可视化工具，帮助你理解 GPT 等大语言模型（LLM）中的 Transformer 模型如何工作。"
 		/>
 		<meta
 			property="twitter:image"
diff --git a/src/components/Attention.svelte b/src/components/Attention.svelte
index f87540f..64effd4 100644
--- a/src/components/Attention.svelte
+++ b/src/components/Attention.svelte
@@ -54,7 +54,7 @@
 		data-click="attention-step-title"
 	>
 		<div class="w-max">
-			<TextbookTooltip id="self-attention">Multi-head Self Attention</TextbookTooltip>
+			<TextbookTooltip id="self-attention">多头自注意力</TextbookTooltip>
 		</div>
 	</div>
 	<div class="content relative">
diff --git a/src/components/AttentionMatrix.svelte b/src/components/AttentionMatrix.svelte
index 66bf244..4b8f3ba 100644
--- a/src/components/AttentionMatrix.svelte
+++ b/src/components/AttentionMatrix.svelte
@@ -353,7 +353,7 @@
 				{showTooltip}
 			/>
 			<TextbookTooltip id="masked-self-attention">
-				<div class="matrix-label">Dot product</div>
+				<div class="matrix-label">点积（Dot Product）</div>
 			</TextbookTooltip>
 
 			<Tooltip class="popover tooltip">
@@ -419,7 +419,7 @@
 				/>
 			</div>
 			<TextbookTooltip id="masked-self-attention">
-				<div class="matrix-label">Scaling · Mask</div>
+				<div class="matrix-label">缩放 · Mask</div>
 			</TextbookTooltip>
 
 			<Tooltip class="popover tooltip">
diff --git a/src/components/Embedding.svelte b/src/components/Embedding.svelte
index 25d3258..a30de08 100644
--- a/src/components/Embedding.svelte
+++ b/src/components/Embedding.svelte
@@ -196,7 +196,8 @@
 				<!-- token id and embedding -->
 				<div class="column token-embedding embedding-detail">
 					<div class="subtitle flex items-center gap-1">
-						<TextbookTooltip id="token-embedding"><span>Token<br />Embedding</span></TextbookTooltip
+						<TextbookTooltip id="token-embedding"
+							><span aria-label="Token Embedding">Token<br />Embedding</span></TextbookTooltip
 						>
 						<!-- <HelpPopover
 							id="token-embedding"
diff --git a/src/components/InputForm.svelte b/src/components/InputForm.svelte
index 63b5b90..7ad38c5 100644
--- a/src/components/InputForm.svelte
+++ b/src/components/InputForm.svelte
@@ -27,6 +27,7 @@
 	import Sampling from './Sampling.svelte';
 	import { completeCurrentAnimation } from '~/utils/animation';
 	import { textPages } from '~/utils/textbookPages';
+	import { zhCN } from '~/utils/i18n';
 
 	let inputRef: HTMLDivElement;
 	let predictRef: HTMLDivElement;
@@ -144,10 +145,13 @@
 				data-click="dropdown-btn"
 				type="button"
 				disabled={selectDisabled}
+				aria-label="示例"
 				class:selectDisabled
 				class="select-button inline-flex shrink-0 items-center justify-center border border-s-0 border-gray-200 bg-white px-3 py-2 text-center text-xs font-medium text-gray-900 first:rounded-s-lg first:border-s last:rounded-e-lg"
 			>
-				Examples<ChevronDownOutline class="pointer-events-none h-4 w-4 text-gray-500" />
+				{zhCN.controls.examples}<ChevronDownOutline
+					class="pointer-events-none h-4 w-4 text-gray-500"
+				/>
 			</button>
 			<Dropdown bind:open={dropdownOpen} class="example-dropdown">
 				{#each inputTextExample as text, index}
@@ -180,7 +184,8 @@
 						bind:this={inputRef}
 						contenteditable={!disabled}
 						class="text-box"
-						placeholder="Test your own input text"
+						placeholder={zhCN.controls.inputPlaceholder}
+						aria-label="输入你自己的英文提示词"
 						on:focus={onFocusInput}
 						on:input={onInput}
 						on:keydown={handleKeyDown}
@@ -211,15 +216,11 @@
 					<div class="loading"><LoadingDots /></div>
 				{/if}
 				{#if $isMobile}
-					<span class="helper-text"
-						>Try the examples. Please use a desktop computer to input GPT-2 prompts directly.</span
-					>
+					<span class="helper-text">{zhCN.controls.mobileExampleOnly}</span>
 				{:else if $isLoaded && $isFetchingModel}
-					<span class="helper-text"
-						>Try the examples while GPT-2 model is being downloaded (600MB)</span
-					>
+					<span class="helper-text">{zhCN.controls.modelDownloading}</span>
 				{:else if exceedLimit}
-					<span class="helper-text">You can enter up to {wordLimit} words.</span>
+					<span class="helper-text">{zhCN.controls.wordLimit(wordLimit)}</span>
 				{/if}
 			</div>
 		</ButtonGroup>
@@ -232,8 +233,9 @@
 			})}
 			type="submit"
 			on:click={handleSubmit}
+			aria-label="生成"
 		>
-			Generate
+			{zhCN.controls.generate}
 		</button>
 	</form>
 	<div class="parameters" data-click="input-parameters">
diff --git a/src/components/LinearSoftmax.svelte b/src/components/LinearSoftmax.svelte
index b745271..310f1f8 100644
--- a/src/components/LinearSoftmax.svelte
+++ b/src/components/LinearSoftmax.svelte
@@ -211,7 +211,7 @@
 		data-click="prob-step-title"
 	>
 		<div class="title-text flex w-max items-center gap-1">
-			Probabilities
+			输出概率
 			<ZoomInOutline></ZoomInOutline>
 		</div>
 	</div>
@@ -260,7 +260,7 @@
 					</div>
 					<div class="title-box scaled">
 						<TextbookTooltip id="temperature"
-							><div class="title-text">Scaled logits</div></TextbookTooltip
+							><div class="title-text">缩放后的 logits</div></TextbookTooltip
 						>
 					</div>
 					<div class="title-box sampling">
@@ -272,7 +272,7 @@
 					</div>
 					<div class="title-box probability">
 						<div class="title-text mr-1">
-							{$sampling.type === 'top-k' ? 'Softmax' : 'Normalization'}
+							{$sampling.type === 'top-k' ? 'Softmax' : '归一化（Normalization）'}
 						</div>
 					</div>
 				</div>
diff --git a/src/components/Popovers/ActivationPopover.svelte b/src/components/Popovers/ActivationPopover.svelte
index 9e74bed..5192d47 100644
--- a/src/components/Popovers/ActivationPopover.svelte
+++ b/src/components/Popovers/ActivationPopover.svelte
@@ -19,7 +19,7 @@
 	goTo="article-activation"
 >
 	<div class="activation-content">
-		Applies non-linear transformation to linearly transformed output to learn complex patterns.
+		对线性变换后的输出施加非线性变换，帮助模型学习更复杂的模式。
 	</div></CommonPopover
 >
 
diff --git a/src/components/Popovers/DropoutPopover.svelte b/src/components/Popovers/DropoutPopover.svelte
index 082361d..0309a1f 100644
--- a/src/components/Popovers/DropoutPopover.svelte
+++ b/src/components/Popovers/DropoutPopover.svelte
@@ -18,9 +18,7 @@
 	{placement}
 	goTo="article-dropout"
 >
-	<div class="dropout-content">
-		Disables randomly selected neurons. Used only during training.
-	</div></CommonPopover
+	<div class="dropout-content">随机停用一部分神经元；只在训练阶段使用。</div></CommonPopover
 >
 
 <style lang="scss">
diff --git a/src/components/Popovers/LayerNormPopover.svelte b/src/components/Popovers/LayerNormPopover.svelte
index 4f1b0e6..82ab0bf 100644
--- a/src/components/Popovers/LayerNormPopover.svelte
+++ b/src/components/Popovers/LayerNormPopover.svelte
@@ -18,9 +18,7 @@
 	{placement}
 	goTo="article-ln"
 >
-	<div class="ln-content">
-		Normalizes layer input to have a standard distribution for stability.
-	</div></CommonPopover
+	<div class="ln-content">对层输入做归一化，让分布更稳定。</div></CommonPopover
 >
 
 <style lang="scss">
diff --git a/src/components/Popovers/LogitWeightPopover.svelte b/src/components/Popovers/LogitWeightPopover.svelte
index f21be64..0ae0371 100644
--- a/src/components/Popovers/LogitWeightPopover.svelte
+++ b/src/components/Popovers/LogitWeightPopover.svelte
@@ -321,9 +321,9 @@
 	<div class="weight-popover-content flex items-center justify-start">
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				<span>Output<br />Embedding</span>
-				<HelpPopover id="hidden-states" 
-					>{`After passing through all blocks, \nthe final token's embedding vector \ncontains all the contextual information \nfrom the preceding tokens.`}</HelpPopover
+				<span>输出<br />Embedding</span>
+				<HelpPopover id="hidden-states"
+					>{`经过所有 Transformer Blocks 后，\n最后一个 token 的 embedding 向量\n包含了前文 token 的上下文信息。`}</HelpPopover
 				>
 			</div>
 			<Matrix
@@ -341,9 +341,9 @@
 		<div class="operator"><div class="symbol mul pl-3">&times;</div></div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Output Projection Weights
-				<HelpPopover id="lm-head-weights" 
-					>{`Transforms the final embedding into a vocabulary distribution.\nParameters were learned in training, fixed in prediction.`}</HelpPopover
+				输出投影权重（Output Projection Weights）
+				<HelpPopover id="lm-head-weights"
+					>{`把最后的 embedding 变换为词表分布。\n参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<div class="flex gap-0">
@@ -365,8 +365,8 @@
 		<div class="operator"><div class="symbol plus">+</div></div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Output Projection Bias<HelpPopover id="lm-head-bias" 
-					>{`Offsets added after the transformation.\nParameters were learned in training, fixed in prediction.`}</HelpPopover
+				输出投影偏置（Output Projection Bias）<HelpPopover id="lm-head-bias"
+					>{`变换后额外加上的偏移量。\n参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<Matrix
@@ -386,8 +386,8 @@
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
 				Logits
-				<HelpPopover id="logits" 
-					>{`Raw scores representing the model’s preference \nfor each vocabulary token before applying softmax.`}</HelpPopover
+				<HelpPopover id="logits"
+					>{`应用 Softmax 之前的原始分数，\n表示模型对每个词表 token 的偏好。`}</HelpPopover
 				>
 			</div>
 			<div class="flex">
diff --git a/src/components/Popovers/MLPDownWeightPopover.svelte b/src/components/Popovers/MLPDownWeightPopover.svelte
index e0ea2c4..22b9724 100644
--- a/src/components/Popovers/MLPDownWeightPopover.svelte
+++ b/src/components/Popovers/MLPDownWeightPopover.svelte
@@ -304,7 +304,12 @@
 	};
 </script>
 
-<WeightPopoverCard id="mlp-down" title={'MLP Compression'} bind:isAnimationActive {timeline}>
+<WeightPopoverCard
+	id="mlp-down"
+	title={'MLP 压缩（Compression）'}
+	bind:isAnimationActive
+	{timeline}
+>
 	<div class="mlp-weight-popover weight-popover-content flex items-center justify-start">
 		<div class="matrix flex flex-col items-center">
 			<div class="tokens" style={`gap:${tokenGap}px`}>
@@ -315,8 +320,8 @@
 		</div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Expanded Embeddings <HelpPopover id="mlp-down-emgeddings" 
-					>{`Expanded latent vectors through MLP expansion layer.`}</HelpPopover
+				扩展后的 Embeddings <HelpPopover id="mlp-down-emgeddings"
+					>{`这些是经过 MLP 扩展层后的 latent vectors。`}</HelpPopover
 				>
 			</div>
 			<div class="flex">
@@ -339,8 +344,8 @@
 		</div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Compression Weights <HelpPopover id="mlp-down-weights" 
-					>{`Projects expanded latent vectors back to original space. \nParameters that learned in training, fixed in prediction.`}</HelpPopover
+				压缩权重（Compression Weights） <HelpPopover id="mlp-down-weights"
+					>{`把扩展后的 latent vectors 投影回原始维度空间。\n这些参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<div class="flex gap-0">
@@ -362,8 +367,8 @@
 		<div class="operator"><div class="symbol plus px-3">+</div></div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Compression Bias <HelpPopover id="mlp-down-bias" 
-					>{`Offsets added after compression. \nParameters that learned in training, fixed in prediction.`}</HelpPopover
+				压缩偏置（Compression Bias） <HelpPopover id="mlp-down-bias"
+					>{`压缩后额外加上的偏移量。\n这些参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<Matrix
@@ -383,7 +388,7 @@
 			<div class="symbol equal px-4">=</div>
 		</div>
 		<div class="matrix flex flex-col items-center">
-			<div class="title">Compressed <br />Embeddings</div>
+			<div class="title">压缩后的<br />Embeddings</div>
 			<div class="flex">
 				<Matrix
 					className="mlp-down-out"
diff --git a/src/components/Popovers/MLPWeightPopover.svelte b/src/components/Popovers/MLPWeightPopover.svelte
index 59bfaf9..d1e9149 100644
--- a/src/components/Popovers/MLPWeightPopover.svelte
+++ b/src/components/Popovers/MLPWeightPopover.svelte
@@ -310,7 +310,7 @@
 	};
 </script>
 
-<WeightPopoverCard id="mlp-up" title={'MLP Expansion'} bind:isAnimationActive {timeline}>
+<WeightPopoverCard id="mlp-up" title={'MLP 扩展（Expansion）'} bind:isAnimationActive {timeline}>
 	<div class="mlp-weight-popover weight-popover-content flex items-center justify-start">
 		<div class="matrix flex flex-col items-center">
 			<div class="tokens" style={`gap:${tokenGap}px`}>
@@ -321,8 +321,8 @@
 		</div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Embeddings<HelpPopover id="mlp-emgeddings" 
-					>{`Embeddings transformed through attention mechanism.`}</HelpPopover
+				嵌入向量（Embeddings）<HelpPopover id="mlp-emgeddings"
+					>{`这些 embedding 已经过 Attention 机制变换。`}</HelpPopover
 				>
 			</div>
 			<Matrix
@@ -340,8 +340,8 @@
 		<div class="operator"><div class="symbol mul">&times;</div></div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Expansion Weights<HelpPopover id="mlp-weights" 
-					>{`Projects embedding vectors to expanded latent space. \nParameters were learned in training, fixed in prediction.`}</HelpPopover
+				扩展权重（Expansion Weights）<HelpPopover id="mlp-weights"
+					>{`把 embedding 向量投影到更宽的 latent space。\n参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<div class="flex gap-0">
@@ -363,8 +363,8 @@
 		<div class="operator"><div class="symbol plus">+</div></div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Expansion Bias <HelpPopover id="mlp-bias" 
-					>{`Offsets added after expansion. \nParameters that learned in training, fixed in prediction.`}</HelpPopover
+				扩展偏置（Expansion Bias） <HelpPopover id="mlp-bias"
+					>{`扩展后额外加上的偏移量。\n这些参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<Matrix
@@ -392,7 +392,7 @@
 			</div>
 		</div> -->
 		<div class="matrix flex flex-col items-center">
-			<div class="title">Expanded <br />Embeddings</div>
+			<div class="title">扩展后的<br />Embeddings</div>
 			<div class="flex">
 				<Matrix
 					className="mlp-out"
diff --git a/src/components/Popovers/PositionalEncodingPopover.svelte b/src/components/Popovers/PositionalEncodingPopover.svelte
index fb903e4..6c8c901 100644
--- a/src/components/Popovers/PositionalEncodingPopover.svelte
+++ b/src/components/Popovers/PositionalEncodingPopover.svelte
@@ -89,7 +89,7 @@
 				</div>
 			</div>
 			<div class="positions">
-				<div class="subtitle">Position</div>
+				<div class="subtitle">位置</div>
 				<div class="subcontent flex flex-col">
 					{#each $tokens as token, token_idx}
 						<div
@@ -132,7 +132,7 @@
 			</div>
 		</div>
 		<div class="viz-container">
-			<div class="subtitle">Encoding Matrix</div>
+			<div class="subtitle">编码矩阵</div>
 			<div class="subcontent viz-subcontent">
 				<div class="chart-container mx-auto">
 					<div class="embed-dim-axis">
diff --git a/src/components/Popovers/QKVWeightPopover.svelte b/src/components/Popovers/QKVWeightPopover.svelte
index 1e0609c..3fbbd3e 100644
--- a/src/components/Popovers/QKVWeightPopover.svelte
+++ b/src/components/Popovers/QKVWeightPopover.svelte
@@ -308,7 +308,7 @@
 	// };
 </script>
 
-<WeightPopoverCard id="qkv" title={'Query Key Value'} bind:isAnimationActive {timeline}>
+<WeightPopoverCard id="qkv" title={'Query、Key、Value'} bind:isAnimationActive {timeline}>
 	<div class="weight-popover-content flex items-center justify-start">
 		<div class="matrix flex flex-col items-center">
 			<div class="tokens" style={`gap:${tokenGap}px`}>
@@ -319,8 +319,8 @@
 		</div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1 self-end">
-				Embeddings<HelpPopover id="qkv-emgeddings" 
-					>{`Embeddings originate from tokens \nbut evolve through blocks, becoming \nabstract representations.`}</HelpPopover
+				嵌入向量（Embeddings）<HelpPopover id="qkv-emgeddings"
+					>{`Embedding 起源于词元（Token），\n并在经过多个 Block 后逐步演化为\n更抽象的表示。`}</HelpPopover
 				>
 			</div>
 			<!-- (tokenLen, 768) -->
@@ -339,8 +339,8 @@
 		<div class="operator"><div class="symbol mul">&times;</div></div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Q·K·V Weights<HelpPopover id="qkv-weights" 
-					>{`Transforms embedding vectors into Query, Key, and Value vectors. \nParameters were learned in training, fixed in prediction.`}</HelpPopover
+				Q·K·V 权重（Weights）<HelpPopover id="qkv-weights"
+					>{`把 embedding 向量变换为 Query、Key、Value 向量。\n参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<div class="flex gap-0">
@@ -362,8 +362,8 @@
 		<div class="operator"><div class="symbol plus">+</div></div>
 		<div class="matrix flex flex-col items-center">
 			<div class="title flex items-center gap-1">
-				Q·K·V Bias<HelpPopover id="qkv-bias" 
-					>{`Offsets added after transformation. \nParameters that learned in training, fixed in prediction.`}</HelpPopover
+				Q·K·V 偏置（Bias）<HelpPopover id="qkv-bias"
+					>{`变换后额外加上的偏移量。\n这些参数在训练中学习得到，在预测时保持固定。`}</HelpPopover
 				>
 			</div>
 			<Matrix
diff --git a/src/components/Popovers/ResidualPopover.svelte b/src/components/Popovers/ResidualPopover.svelte
index dc2c5c9..ef7ea35 100644
--- a/src/components/Popovers/ResidualPopover.svelte
+++ b/src/components/Popovers/ResidualPopover.svelte
@@ -20,9 +20,7 @@
 	{reference}
 	goTo="article-residual"
 >
-	<div class="residual-content">
-		Adds layer input to output to help preserve information.
-	</div></CommonPopover
+	<div class="residual-content">把层输入加回输出，帮助保留信息。</div></CommonPopover
 >
 
 <style lang="scss">
diff --git a/src/components/Popovers/SoftmaxPopover.svelte b/src/components/Popovers/SoftmaxPopover.svelte
index 979f4cd..6471a79 100644
--- a/src/components/Popovers/SoftmaxPopover.svelte
+++ b/src/components/Popovers/SoftmaxPopover.svelte
@@ -29,14 +29,14 @@
 		class="softmax-popover-title rounded-t-md border-b border-gray-200 bg-gray-100 px-3 py-2 dark:border-gray-600 dark:bg-gray-700"
 	>
 		<h3 class="font-semibold text-gray-900">
-			Probability of <span class="highlight">"{selected?.token}"</span> token being sampled
+			采样到 <span class="highlight">"{selected?.token}"</span> token 的概率
 		</h3>
 	</div>
 	<div class="softmax-popover-content">
 		<div class="formula-steps">
 			<div class="formula-step scaled">
 				<TextbookTooltip id="temperature">
-					<div class="step-title">Scaled logit</div></TextbookTooltip
+					<div class="step-title">缩放后的 logit</div></TextbookTooltip
 				>
 				<div class="step-content">
 					<div class="fraction">
@@ -47,7 +47,7 @@
 						<div class="frac-line"></div>
 						<div class="frac-bottom relative">
 							<span class="number">{$temperature}</span>
-							<span class="annotation temp"> <Arrow size={16} /><span>temperature</span></span>
+							<span class="annotation temp"> <Arrow size={16} /><span>Temperature</span></span>
 						</div>
 					</div>
 				</div>
@@ -88,7 +88,7 @@
 			<div class="formula-step sampling">
 				<TextbookTooltip id="sampling">
 					<div class="step-title">
-						<span>{$sampling.type === 'top-k' ? 'Top-k' : 'Top-p'} Filtering</span>
+						<span>{$sampling.type === 'top-k' ? 'Top-k' : 'Top-p'} 过滤</span>
 						<span class="sub-title"
 							>({$sampling.type === 'top-k' ? 'k' : 'p'}={$sampling.value})</span
 						>
@@ -100,7 +100,7 @@
 							<div class="cases">
 								<div class="case-row">
 									<span class="condition text"
-										>If logit <Katex math={'\\in'} /> Top-{$sampling.value}
+										>如果 logit <Katex math={'\\in'} /> Top-{$sampling.value}
 									</span>
 									<span class="number" class:highlight={selected?.rank < $sampling.value}
 										>{getStringNumber(selected?.scaledLogit)}</span
@@ -108,7 +108,7 @@
 								</div>
 								<div class="case-row">
 									<span class="condition text"
-										>Otherwise <span
+										>否则 <span
 											class="number infinity"
 											class:highlight={selected?.rank >= $sampling.value}
 											><Katex math={'-\\infty'} /></span
@@ -120,7 +120,7 @@
 							<div class="cases">
 								<div class="case-row">
 									<span class="condition text">
-										If cumulative prob ≤ {$sampling.value}
+										如果累计概率 ≤ {$sampling.value}
 									</span>
 									<span class="number" class:highlight={selected?.rank <= selected?.cutoffIndex}
 										>{getStringNumber(selected?.topPProbability)}</span
@@ -128,7 +128,7 @@
 								</div>
 								<div class="case-row">
 									<span class="condition text"
-										>Otherwise <span
+										>否则 <span
 											class="number infinity"
 											class:highlight={selected?.rank > selected?.cutoffIndex}>0</span
 										></span
@@ -182,7 +182,7 @@
 				</div>
 			{:else}
 				<div class="formula-step norm-step">
-					<div class="step-title">Normalization</div>
+					<div class="step-title">归一化（Normalization）</div>
 					<div class="step-content">
 						{#if selected?.cutoffIndex >= selected?.rank}
 							<div class="fraction">
diff --git a/src/components/SubsequentBlocks.svelte b/src/components/SubsequentBlocks.svelte
index 0f9fb17..658a734 100644
--- a/src/components/SubsequentBlocks.svelte
+++ b/src/components/SubsequentBlocks.svelte
@@ -29,8 +29,9 @@
 			>
 				<div class="text" class:highlight={$isBoundingBoxActive}>
 					<TextbookTooltip id="blocks">
-						<span class="strong">{$modelMeta.layer_num - $blockIdx - 1}</span> more identical<br
-						/><span class="strong">Transformer<br />Blocks</span>
+						<span class="strong">{$modelMeta.layer_num - $blockIdx - 1}</span> 个相同的<br /><span
+							class="strong">Transformer<br />Blocks</span
+						>
 					</TextbookTooltip>
 				</div>
 
diff --git a/src/components/article/Article.svelte b/src/components/article/Article.svelte
index 607b84c..13715a1 100644
--- a/src/components/article/Article.svelte
+++ b/src/components/article/Article.svelte
@@ -6,92 +6,81 @@
 
 <div id="description">
 	<div class="article-section" data-click="article-intro">
-		<h1>What is a Transformer?</h1>
+		<h1>什么是 Transformer？</h1>
 
 		<p>
-			Transformer is a neural network architecture that has fundamentally changed the approach to
-			Artificial Intelligence. Transformer was first introduced in the seminal paper
+			Transformer 是一种神经网络架构，它从根本上改变了人工智能（AI, Artificial
+			Intelligence）的发展路径。Transformer 最早在 2017 年的重要论文
 			<a
 				href="https://dl.acm.org/doi/10.5555/3295222.3295349"
 				title="ACM Digital Library"
 				target="_blank">"Attention is All You Need"</a
 			>
-			in 2017 and has since become the go-to architecture for deep learning models, powering text-generative
-			models like OpenAI's <strong>GPT</strong>, Meta's <strong>Llama</strong>, and Google's
-			<strong>Gemini</strong>. Beyond text, Transformer is also applied in
+			中提出，此后逐渐成为深度学习模型的主流架构，支撑着 OpenAI 的 <strong>GPT</strong>、Meta 的
+			<strong>Llama</strong>、Google 的 <strong>Gemini</strong>
+			等文本生成模型。除了文本，Transformer 还被应用在
 			<a
 				href="https://huggingface.co/learn/audio-course/en/chapter3/introduction"
 				title="Hugging Face"
-				target="_blank">audio generation</a
+				target="_blank">音频生成</a
 			>,
 			<a
 				href="https://huggingface.co/learn/computer-vision-course/unit3/vision-transformers/vision-transformers-for-image-classification"
 				title="Hugging Face"
-				target="_blank">image recognition</a
+				target="_blank">图像识别</a
 			>,
-			<a href="https://elifesciences.org/articles/82819" title="eLife"
-				>protein structure prediction</a
-			>, and even
+			<a href="https://elifesciences.org/articles/82819" title="eLife">蛋白质结构预测</a>，甚至
 			<a
 				href="https://www.deeplearning.ai/the-batch/reinforcement-learning-plus-transformers-equals-efficiency/"
 				title="Deep Learning AI"
-				target="_blank">game playing</a
-			>, demonstrating its versatility across numerous domains.
+				target="_blank">游戏智能体</a
+			>等任务中，展现了跨领域的通用性。
 		</p>
 		<p>
-			Fundamentally, text-generative Transformer models operate on the principle of <strong
-				>next-token prediction</strong
-			>: given a text prompt from the user, what is the
-			<em>most probable next token (a word or part of a word)</em> that will follow this input? The core
-			innovation and power of Transformers lie in their use of self-attention mechanism, which allows
-			them to process entire sequences and capture long-range dependencies more effectively than previous
-			architectures.
+			从根本上说，文本生成 Transformer 模型遵循 <strong>next-token prediction</strong
+			>（下一个词元预测）的原则：给定用户输入的文本提示，接下来最可能出现的
+			<em>下一个 token（一个词或词的一部分）</em>是什么？Transformer 的核心创新和能力来自
+			self-attention 机制，它让模型可以处理完整序列，并比过去的架构更有效地捕捉长距离依赖关系。
 		</p>
 		<p>
-			GPT-2 family of models are prominent examples of text-generative Transformers. Transformer
-			Explainer is powered by the
+			GPT-2 系列模型是文本生成 Transformer 的代表性例子。Transformer Explainer 使用的是
 			<a href="https://huggingface.co/openai-community/gpt2" title="Hugging Face" target="_blank"
 				>GPT-2</a
 			>
-			(small) model which has 124 million parameters. While it is not the latest or most powerful Transformer
-			model, it shares many of the same architectural components and principles found in the current
-			state-of-the-art models making it an ideal starting point for understanding the basics.
+			（small）模型，它拥有 1.24 亿参数。虽然它不是最新、也不是最强大的 Transformer 模型，但它和当前最先进模型共享许多相同的架构组件与基本原理，因此很适合作为理解基础概念的起点。
 		</p>
 	</div>
 
 	<div class="article-section" data-click="article-overview">
-		<h1>Transformer Architecture</h1>
+		<h1>Transformer 架构</h1>
 
 		<p>
-			Every text-generative Transformer consists of these <strong>three key components</strong>:
+			每个文本生成 Transformer 都包含下面 <strong>三个关键组件</strong>：
 		</p>
 		<ol>
 			<li>
-				<strong class="bold-purple">Embedding</strong>: Text input is divided into smaller units
-				called tokens, which can be words or subwords. These tokens are converted into numerical
-				vectors called embeddings, which capture the semantic meaning of words.
+				<strong class="bold-purple">Embedding</strong>：文本输入会被切分成更小的单元，称为
+				tokens；它们可以是完整词，也可以是子词。随后这些 tokens 会被转换成数值向量，也就是
+				embeddings，用来表示词的语义。
 			</li>
 			<li>
-				<strong class="bold-purple">Transformer Block</strong> is the fundamental building block of
-				the model that processes and transforms the input data. Each block includes:
+				<strong class="bold-purple">Transformer Block</strong>
+				是模型处理和变换输入数据的基本模块。每个 block 包含：
 				<ul class="">
 					<li>
-						<strong>Attention Mechanism</strong>, the core component of the Transformer block. It
-						allows tokens to communicate with other tokens, capturing contextual information and
-						relationships between words.
+						<strong>Attention Mechanism</strong>，也就是 Transformer block 的核心组件。它允许 tokens
+						彼此“通信”，从而捕捉上下文信息和词语之间的关系。
 					</li>
 					<li>
-						<strong>MLP (Multilayer Perceptron) Layer</strong>, a feed-forward network that operates
-						on each token independently. While the goal of the attention layer is to route
-						information between tokens, the goal of the MLP is to refine each token's
-						representation.
+						<strong>MLP（Multilayer Perceptron）Layer</strong>，一种对每个 token
+						独立运行的前馈网络。Attention layer 的目标是在 tokens 之间路由信息，而 MLP
+						的目标是细化每个 token 的表示。
 					</li>
 				</ul>
 			</li>
 			<li>
-				<strong class="bold-purple">Output Probabilities</strong>: The final linear and softmax
-				layers transform the processed embeddings into probabilities, enabling the model to make
-				predictions about the next token in a sequence.
+				<strong class="bold-purple">输出概率（Output Probabilities）</strong>：最后的 linear 和
+				softmax layers 会把处理后的 embeddings 转换成概率，让模型预测序列中的下一个 token。
 			</li>
 		</ol>
 	</div>
@@ -99,52 +88,49 @@
 	<div class="article-section" id="embedding" data-click="article-embedding">
 		<h2>Embedding</h2>
 		<p>
-			Let's say you want to generate text using a Transformer model. You add the prompt like this
-			one: <code>“Data visualization empowers users to”</code>. This input needs to be converted
-			into a format that the model can understand and process. That is where embedding comes in: it
-			transforms the text into a numerical representation that the model can work with. To convert a
-			prompt into embedding, we need to 1) tokenize the input, 2) obtain token embeddings, 3) add
-			positional information, and finally 4) add up token and position encodings to get the final
-			embedding. Let’s see how each of these steps is done.
+			假设你想用 Transformer 模型生成文本，并输入这样一个 prompt：
+			<code>“Data visualization empowers users to”</code
+			>。这段输入需要先转换成模型能够理解和处理的格式，这就是 embedding
+			发挥作用的地方：它会把文本转换成模型可使用的数值表示。要把 prompt 转成 embedding，我们需要
+			1）对输入做 tokenization，2）获得 token embeddings，3）加入位置信息，最后 4）把 token 和
+			position encodings 相加得到最终 embedding。下面逐步看这些步骤如何完成。
 		</p>
 		<div class="figure">
 			<img src="./article_assets/embedding.png" width="65%" />
 		</div>
 		<div class="figure-caption">
-			Figure <span class="attention">1</span>. Expanding the Embedding layer view, showing how the
-			input prompt is converted to a vector representation. The process involves
-			<span class="fig-numbering">(1)</span> Tokenization, (2) Token Embedding, (3) Positional Encoding,
-			and (4) Final Embedding.
+			图 <span class="attention">1</span>。展开 Embedding layer 视图，展示输入 prompt
+			如何被转换成向量表示。这个过程包括
+			<span class="fig-numbering">(1)</span> Tokenization、(2) Token Embedding、(3) Positional Encoding
+			和 (4) Final Embedding。
 		</div>
 		<div class="article-subsection">
-			<h3>Step 1: Tokenization</h3>
+			<h3>步骤 1：Tokenization</h3>
 			<p>
-				Tokenization is the process of breaking down the input text into smaller, more manageable
-				pieces called tokens. These tokens can be a word or a subword. The words <code>"Data"</code>
-				and <code>"visualization"</code> correspond to unique tokens, while the word
+				Tokenization 是把输入文本拆分成更小、更易处理的片段的过程，这些片段称为 tokens。Token
+				可以是一个词，也可以是子词。单词 <code>"Data"</code>
+				和 <code>"visualization"</code> 分别对应唯一 token，而单词
 				<code>"empowers"</code>
-				is split into two tokens. The full vocabulary of tokens is decided before training the model:
-				GPT-2's vocabulary has <code>50,257</code> unique tokens. Now that we split our input text into
-				tokens with distinct IDs, we can obtain their vector representation from embeddings.
+				会被拆成两个 tokens。完整的 token 词表会在模型训练前确定：GPT-2 的词表包含
+				<code>50,257</code> 个唯一 tokens。现在我们已经把输入文本拆成带有不同 ID 的 tokens，就可以从
+				embeddings 中取得它们的向量表示。
 			</p>
 		</div>
 		<div class="article-subsection" id="article-token-embedding">
-			<h3>Step 2. Token Embedding</h3>
+			<h3>步骤 2：Token Embedding</h3>
 			<p>
-				GPT-2 (small) represents each token in the vocabulary as a 768-dimensional vector; the
-				dimension of the vector depends on the model. These embedding vectors are stored in a matrix
-				of shape <code>(50,257, 768)</code>, containing approximately 39 million parameters! This
-				extensive matrix allows the model to assign semantic meaning to each token, in the sense
-				that tokens with similar usage or meaning in language are placed close together in this
-				high-dimensional space, while dissimilar tokens are farther apart.
+				GPT-2（small）会把词表中的每个 token 表示成一个 768 维向量；向量维度取决于具体模型。这些
+				embedding vectors 存储在一个形状为 <code>(50,257, 768)</code>
+				的矩阵中，约包含 3900 万个参数！这个大型矩阵让模型能够为每个 token 赋予语义含义：在语言中用法或意义相近的
+				tokens 会在这个高维空间里更接近，而差异较大的 tokens 会相距更远。
 			</p>
 		</div>
 		<div class="article-subsection" id="article-positional-embedding">
-			<h3>Step 3. Positional Encoding</h3>
+			<h3>步骤 3：Positional Encoding</h3>
 			<p>
-				The Embedding layer also encodes information about each token's position in the input
-				prompt. Different models use various methods for positional encoding. GPT-2 trains its own
-				positional encoding matrix from scratch, integrating it directly into the training process.
+				Embedding layer 还会编码每个 token 在输入 prompt
+				中的位置信息。不同模型会使用不同的位置编码方法。GPT-2 会从头训练自己的 positional encoding
+				matrix，并把它直接纳入训练过程。
 			</p>
 
 			<!-- <div class="article-subsection-l2">
@@ -190,11 +176,10 @@
   </div> -->
 		</div>
 		<div class="article-subsection">
-			<h3>Step 4. Final Embedding</h3>
+			<h3>步骤 4：Final Embedding</h3>
 			<p>
-				Finally, we sum the token and positional encodings to get the final embedding
-				representation. This combined representation captures both the semantic meaning of the
-				tokens and their position in the input sequence.
+				最后，我们把 token encodings 和 positional encodings 相加，得到最终 embedding
+				表示。这个组合表示同时包含 token 的语义信息，以及它们在输入序列中的位置。
 			</p>
 		</div>
 	</div>
@@ -203,29 +188,24 @@
 		<h2>Transformer Block</h2>
 
 		<p>
-			The core of the Transformer's processing lies in the Transformer block, which comprises
-			multi-head self-attention and a Multi-Layer Perceptron layer. Most models consist of multiple
-			such blocks that are stacked sequentially one after the other. The token representations
-			evolve through layers, from the first block to the last one, allowing the model to build up an
-			intricate understanding of each token. This layered approach leads to higher-order
-			representations of the input. The GPT-2 (small) model we are examining consists of <code
-				>12</code
-			> such blocks.
+			Transformer 的核心处理发生在 Transformer block 中，它由 multi-head self-attention 和
+			Multi-Layer Perceptron layer 组成。大多数模型会把多个这样的 blocks 按顺序堆叠起来。Token
+			表示会从第一个 block 到最后一个 block 逐层演化，使模型能够逐渐建立对每个 token
+			的复杂理解。这种分层方式会产生更高阶的输入表示。我们正在研究的 GPT-2（small）模型包含
+			<code>12</code> 个这样的 blocks。
 		</p>
 	</div>
 
 	<div class="article-section" id="self-attention" data-click="article-attention">
 		<h3>Multi-Head Self-Attention</h3>
 		<p>
-			The self-attention mechanism enables the model to capture relationships among tokens in a
-			sequence, so that each token’s representation is influenced by the others. Multiple attention
-			heads allow the model to consider these relationships from different perspectives; for
-			example, one head may capture short-range syntactic links while another tracks broader
-			semantic context. In the following section, we will walk through how multi-head self-attention
-			is computed step by step.
+			Self-attention 机制让模型能够捕捉序列中 tokens 之间的关系，使每个 token 的表示都会受到其他
+			tokens 的影响。多个 attention heads 让模型可以从不同角度理解这些关系；例如，一个 head
+			可能关注短距离语法关联，另一个 head 则追踪更宽泛的语义上下文。下面我们会一步步看 multi-head
+			self-attention 是如何计算的。
 		</p>
 		<div class="article-subsection-l2">
-			<h4>Step 1: Query, Key, and Value Matrices</h4>
+			<h4>步骤 1：Query、Key 和 Value 矩阵</h4>
 
 			<div class="figure pt-10">
 				<img src="./article_assets/QKV.png" width="80%" />
@@ -239,302 +219,261 @@
 				</div>
 			</div>
 			<div class="figure-caption">
-				Figure <span class="attention">2</span>. Computing Query, Key, and Value matrices from the
-				original embedding.
+				图 <span class="attention">2</span>。从原始 embedding 中计算 Query、Key 和 Value 矩阵。
 			</div>
 
 			<p>
-				Each token's embedding vector is transformed into three vectors:
-				<span class="q-color">Query (Q)</span>,
-				<span class="k-color">Key (K)</span>, and
-				<span class="v-color">Value (V)</span>. These vectors are derived by multiplying the input
-				embedding matrix with learned weight matrices for
-				<span class="q-color">Q</span>,
-				<span class="k-color">K</span>, and
-				<span class="v-color">V</span>. Here's a web search analogy to help us build some intuition
-				behind these matrices:
+				每个 token 的 embedding vector 会被转换成三个向量：
+				<span class="q-color">Query (Q)</span>、
+				<span class="k-color">Key (K)</span> 和
+				<span class="v-color">Value (V)</span>。这些向量通过输入 embedding matrix 与学习到的
+				<span class="q-color">Q</span>、
+				<span class="k-color">K</span> 和
+				<span class="v-color">V</span> 权重矩阵相乘得到。可以用网页搜索来类比这些矩阵，帮助建立直觉：
 			</p>
 			<ul>
 				<li>
-					<strong class="q-color font-medium">Query (Q)</strong> is the search text you type in the
-					search engine bar. This is the token you want to
-					<em>"find more information about"</em>.
+					<strong class="q-color font-medium">Query (Q)</strong>
+					就像你在搜索框里输入的搜索词。它代表你想要
+					<em>“查找更多信息”</em>的 token。
 				</li>
 				<li>
-					<strong class="k-color font-medium">Key (K)</strong> is the title of each web page in the search
-					result window. It represents the possible tokens the query can attend to.
+					<strong class="k-color font-medium">Key (K)</strong> 就像搜索结果中每个网页的标题。它表示 query
+					可以关注的候选 tokens。
 				</li>
 				<li>
-					<strong class="v-color font-medium">Value (V)</strong> is the actual content of web pages shown.
-					Once we matched the appropriate search term (Query) with the relevant results (Key), we want
-					to get the content (Value) of the most relevant pages.
+					<strong class="v-color font-medium">Value (V)</strong> 就像网页中真正显示的内容。当合适的搜索词（Query）匹配到相关结果（Key）之后，我们想获得最相关页面的内容（Value）。
 				</li>
 			</ul>
 			<p>
-				By using these QKV values, the model can calculate attention scores, which determine how
-				much focus each token should receive when generating predictions.
+				利用这些 QKV 值，模型可以计算 attention scores，用来决定在生成预测时每个 token
+				应该获得多少关注。
 			</p>
 		</div>
 		<div class="article-subsection-l2">
-			<h4>Step 2: Multi-Head Splitting</h4>
+			<h4>步骤 2：Multi-Head 拆分</h4>
 			<p>
-				<span class="q-color">Query</span>, <span class="k-color">key</span>, and
+				<span class="q-color">Query</span>、<span class="k-color">Key</span> 和
 				<span class="v-color">Value</span>
-				vectors are split into multiple heads—in GPT-2 (small)'s case, into
-				<code>12</code> heads. Each head processes a segment of the embeddings independently, capturing
-				different syntactic and semantic relationships. This design facilitates parallel learning of
-				diverse linguistic features, enhancing the model's representational power.
+				vectors 会被拆分成多个 heads；以 GPT-2（small）为例，它们会被拆成
+				<code>12</code> 个 heads。每个 head 独立处理 embeddings 的一部分，捕捉不同的语法和语义关系。这种设计让模型可以并行学习多样的语言特征，提升表示能力。
 			</p>
 		</div>
 		<div class="article-subsection-l2">
-			<h4>Step 3: Masked Self-Attention</h4>
+			<h4>步骤 3：Masked Self-Attention</h4>
 			<p>
-				In each head, we perform masked self-attention calculations. This mechanism allows the model
-				to generate sequences by focusing on relevant parts of the input while preventing access to
-				future tokens.
+				在每个 head 中，我们会执行 masked self-attention
+				计算。这个机制让模型在生成序列时关注输入中的相关部分，同时避免访问未来 tokens。
 			</p>
 
 			<div class="figure">
 				<img src="./article_assets/attention.png" width="80%" align="middle" />
 			</div>
 			<div class="figure-caption">
-				Figure <span class="attention">3</span>. Using Query, Key, and Value matrices to calculate
-				masked self-attention.
+				图 <span class="attention">3</span>。使用 Query、Key 和 Value 矩阵计算 masked
+				self-attention。
 			</div>
 
 			<ul>
 				<li>
-					<strong>Dot Product</strong>: The dot product of
+					<strong>Dot Product</strong>：
 					<span class="q-color">Query</span>
-					and <span class="k-color">Key</span> matrices determines the
-					<strong>attention score</strong>, producing a square matrix that reflects the relationship
-					between all input tokens.
+					和 <span class="k-color">Key</span> 矩阵的点积会决定
+					<strong>attention score</strong>，生成一个方阵，用来反映所有输入 tokens 之间的关系。
 				</li>
 				<li>
-					<strong>Scaling · Mask</strong>: The attention scores are scaled and a mask is applied to
-					the upper triangle of the attention matrix to prevent the model from accessing future
-					tokens, setting these values to negative infinity. The model needs to learn how to predict
-					the next token without “peeking” into the future.
+					<strong>Scaling · Mask</strong>：attention scores 会先被缩放，然后在 attention matrix
+					的上三角区域应用 mask，防止模型访问未来
+					tokens，并把这些位置设为负无穷。模型需要学会在不“偷看”未来的情况下预测下一个 token。
 				</li>
 				<li>
-					<strong>Softmax · Dropout</strong>: After masking and scaling, the attention scores are
-					converted into probabilities by the softmax operation, then optionally regularized with
-					dropout. Each row of the matrix sums to one and indicates the relevance of every other
-					token to the left of it.
+					<strong>Softmax · Dropout</strong>：经过 masking 和 scaling 之后，attention scores 会通过
+					softmax 转换成概率，随后可选择用 dropout 做正则化。矩阵中每一行的和为 1，表示左侧其他
+					tokens 与当前 token 的相关程度。
 				</li>
 			</ul>
 		</div>
 		<div class="article-subsection-l2">
-			<h4>Step 4: Output and Concatenation</h4>
+			<h4>步骤 4：输出与拼接</h4>
 			<p>
-				The model uses the masked self-attention scores and multiplies them with the
-				<span class="v-color">Value</span> matrix to get the
+				模型会使用 masked self-attention scores，并将其与
+				<span class="v-color">Value</span> 矩阵相乘，得到 self-attention 机制的
 				<span class="purple-color">final output</span>
-				of the self-attention mechanism. GPT-2 has <code>12</code> self-attention heads, each capturing
-				different relationships between tokens. The outputs of these heads are concatenated and passed
-				through a linear projection.
+				。GPT-2 有 <code>12</code> 个 self-attention heads，每个 head 捕捉 tokens 之间不同类型的关系。这些
+				heads 的输出会被拼接起来，再通过一个 linear projection。
 			</p>
 		</div>
 	</div>
 
 	<div class="article-section" id="article-activation" data-click="article-mlp">
-		<h3>MLP: Multi-Layer Perceptron</h3>
+		<h3>MLP：Multi-Layer Perceptron</h3>
 
 		<div class="figure">
 			<img src="./article_assets/mlp.png" width="70%" align="middle" />
 		</div>
 		<div class="figure-caption">
-			Figure <span class="attention">4</span>. Using MLP layer to project the self-attention
-			representations into higher dimensions to enhance the model's representational capacity.
+			图 <span class="attention">4</span>。使用 MLP layer 将 self-attention
+			表示投影到更高维度，以增强模型的表示能力。
 		</div>
 
 		<p>
-			After the multiple heads of self-attention capture the diverse relationships between the input
-			tokens, the concatenated outputs are passed through the Multilayer Perceptron (MLP) layer to
-			enhance the model's representational capacity. The MLP block consists of two linear
-			transformations with a <a
+			多个 self-attention heads 捕捉输入 tokens 之间的多样关系后，拼接后的输出会进入 Multilayer
+			Perceptron（MLP）layer，以增强模型的表示能力。MLP block 由两个 linear transformations
+			组成，中间夹着一个
+			<a
 				href="https://en.wikipedia.org/wiki/Rectified_linear_unit#Gaussian-error_linear_unit_(GELU)"
 				>GELU</a
-			> activation function in between.
+			> activation function。
 		</p>
 		<p>
-			The first linear transformation expands the dimensionality of the input four-fold from <code
-				>768</code
-			>
-			to
-			<code>3072</code>. This expansion step allows the model to project the token representations
-			into a higher-dimensional space, where it can capture richer and more complex patterns that
-			may not be visible in the original dimension.
+			第一个 linear transformation 会把输入维度扩大 4 倍，从 <code>768</code>
+			变为
+			<code>3072</code>。这个 expansion step 让模型可以把 token representations
+			投影到更高维空间，从而捕捉在原始维度中可能看不到的更丰富、更复杂的模式。
 		</p>
 		<p>
-			The second linear transformation then reduces the dimensionality back to the original size of <code
-				>768</code
-			>.This compression step brings the representations back to a manageable size while retaining
-			the useful nonlinear transformations introduced in the expansion step.
+			第二个 linear transformation 再把维度压回原始大小 <code>768</code>。这个 compression step
+			会把表示带回可管理的尺寸，同时保留 expansion step 中引入的有用非线性变换。
 		</p>
 		<p>
-			Unlike the self-attention mechanism, which integrates information across tokens, the MLP
-			processes tokens independently and simply maps each token representation from one space to
-			another, enriching the overall model capacity.
+			不同于会跨 tokens 整合信息的 self-attention 机制，MLP 会独立处理每个 token，只是把每个 token
+			representation 从一个空间映射到另一个空间，从而提升整体模型能力。
 		</p>
 	</div>
 
 	<div class="article-section" id="article-prob" data-click="article-prob">
-		<h2>Output Probabilities</h2>
+		<h2>输出概率</h2>
 		<p>
-			After the input has been processed through all Transformer blocks, the output is passed
-			through the final linear layer to prepare it for token prediction. This layer projects the
-			final representations into a <code>50,257</code>
-			dimensional space, where every token in the vocabulary has a corresponding value called
-			<code>logit</code>. Any token can be the next word, so this process allows us to simply rank
-			these tokens by their likelihood of being that next word. We then apply the softmax function
-			to convert the logits into a probability distribution that sums to one. This will allow us to
-			sample the next token based on its likelihood.
+			输入经过所有 Transformer blocks 处理后，输出会进入最终 linear layer，为 token prediction
+			做准备。这个 layer 会把最终表示投影到一个 <code>50,257</code> 维空间，其中词表中的每个 token
+			都有一个对应数值，称为
+			<code>logit</code>。任何 token
+			都可能成为下一个词，因此这个过程让我们可以按“成为下一个词”的可能性对这些 tokens
+			排序。随后我们应用 softmax function，把 logits 转换成总和为 1 的 probability
+			distribution，从而可以根据概率采样下一个 token。
 		</p>
 
 		<div class="figure py-5">
 			<img src="./article_assets/softmax.png" width="70%" />
 		</div>
 		<div class="figure-caption">
-			Figure <span class="attention">5</span>. Each token in the vocabulary is assigned a
-			probability based on the model's output logits. These probabilities determine the likelihood
-			of each token being the next word in the sequence.
+			图 <span class="attention">5</span>。词表中的每个 token 都会根据模型输出 logits
+			得到一个概率。这些概率决定了每个 token 成为序列中下一个词的可能性。
 		</div>
 
 		<p id="article-temperature" data-click="article-temperature">
-			The final step is to generate the next token by sampling from this distribution The <code
-				>temperature</code
-			>
-			hyperparameter plays a critical role in this process. Mathematically speaking, it is a very simple
-			operation: model output logits are simply divided by the
-			<code>temperature</code>:
+			最后一步是从这个分布中采样，生成下一个 token。<code>temperature</code>
+			这个 hyperparameter 在这一过程中很关键。从数学上看，它是一个非常简单的操作：模型输出 logits 只需要除以
+			<code>temperature</code>：
 		</p>
 
 		<ul>
 			<li>
-				<code>temperature = 1</code>: Dividing logits by one has no effect on the softmax outputs.
+				<code>temperature = 1</code>：logits 除以 1，对 softmax 输出没有影响。
 			</li>
 			<li>
-				<code>temperature &lt; 1</code>: Lower temperature makes the model more confident and
-				deterministic by sharpening the probability distribution, leading to more predictable
-				outputs.
+				<code>temperature &lt; 1</code>：较低的 temperature 会让 probability distribution
+				更尖锐，使模型更自信、更确定，输出也更可预测。
 			</li>
 			<li>
-				<code>temperature &gt; 1</code>: Higher temperature creates a softer probability
-				distribution, allowing for more randomness in the generated text – what some refer to as
-				model <em>“creativity”</em>.
+				<code>temperature &gt; 1</code>：较高的 temperature 会让 probability distribution
+				更平滑，使生成文本中有更多随机性，也就是一些人所说的模型<em>“创造力”</em>。
 			</li>
 		</ul>
 
 		<p id="article-sampling" data-click="article-sampling">
-			In addition, the sampling process can be further refined using <code>top-k</code>
-			and
-			<code>top-p</code> parameters:
+			此外，采样过程还可以通过 <code>top-k</code> 和
+			<code>top-p</code> 参数进一步细化：
 		</p>
 		<ul>
 			<li>
-				<code>top-k sampling</code>: Limits the candidate tokens to the top k tokens with the
-				highest probabilities, filtering out less likely options.
+				<code>top-k sampling</code>：把候选 tokens 限制在概率最高的前 k 个 token
+				中，过滤掉可能性较低的选项。
 			</li>
 			<li>
-				<code>top-p sampling</code>: Considers the smallest set of tokens whose cumulative
-				probability exceeds a threshold p, ensuring that only the most likely tokens contribute
-				while still allowing for diversity.
+				<code>top-p sampling</code>：选择累计概率超过阈值 p 的最小 token 集合，既确保主要由高概率
+				tokens 参与生成，又保留一定多样性。
 			</li>
 		</ul>
 		<p>
-			By tuning <code>temperature</code>, <code>top-k</code>, and <code>top-p</code>, you can
-			balance between deterministic and diverse outputs, tailoring the model's behavior to your
-			specific needs.
+			通过调节 <code>temperature</code>、<code>top-k</code> 和
+			<code>top-p</code>，你可以在确定性输出和多样性输出之间取得平衡，让模型行为更贴近具体需求。
 		</p>
 	</div>
 
 	<div class="article-section" data-click="article-advanced-features">
-		<h2>Auxiliary Architectural Features</h2>
+		<h2>辅助架构特性</h2>
 
 		<p>
-			There are several auxiliary architectural features that enhance the performance of Transformer
-			models. While important for the model's overall performance, they are not as important for
-			understanding the core concepts of the architecture. Layer Normalization, Dropout, and
-			Residual Connections are crucial components in Transformer models, particularly during the
-			training phase. Layer Normalization stabilizes training and helps the model converge faster.
-			Dropout prevents overfitting by randomly deactivating neurons. Residual Connections allows
-			gradients to flow directly through the network and helps to prevent the vanishing gradient
-			problem.
+			Transformer
+			模型中还有几种辅助架构特性可以提升性能。它们对模型整体表现很重要，但对于理解架构核心概念来说，不如前面的组件关键。Layer
+			Normalization、Dropout 和 Residual Connections 都是 Transformer
+			模型中的重要组成部分，尤其是在训练阶段。Layer Normalization
+			可以稳定训练并帮助模型更快收敛；Dropout 通过随机停用神经元来防止过拟合；Residual Connections
+			则允许梯度更直接地流过网络，帮助缓解梯度消失问题。
 		</p>
 		<div class="article-subsection" id="article-ln">
 			<h3>Layer Normalization</h3>
 
 			<p>
-				Layer Normalization helps to stabilize the training process and improves convergence. It
-				works by normalizing the inputs across the features, ensuring that the mean and variance of
-				the activations are consistent. This normalization helps mitigate issues related to internal
-				covariate shift, allowing the model to learn more effectively and reducing the sensitivity
-				to the initial weights. Layer Normalization is applied twice in each Transformer block, once
-				before the self-attention mechanism and once before the MLP layer.
+				Layer Normalization 有助于稳定训练过程并改善收敛。它会沿特征维度对输入进行归一化，确保
+				activations 的均值和方差保持一致。这种归一化可以缓解 internal covariate shift
+				相关问题，让模型更有效地学习，并降低对初始权重的敏感性。在每个 Transformer block 中，Layer
+				Normalization 会应用两次：一次在 self-attention 机制之前，一次在 MLP layer 之前。
 			</p>
 		</div>
 		<div class="article-subsection" id="article-dropout">
 			<h3>Dropout</h3>
 
 			<p>
-				Dropout is a regularization technique used to prevent overfitting in neural networks by
-				randomly setting a fraction of model weights to zero during training. This encourages the
-				model to learn more robust features and reduces dependency on specific neurons, helping the
-				network generalize better to new, unseen data. During model inference, dropout is
-				deactivated. This essentially means that we are using an ensemble of the trained
-				subnetworks, which leads to a better model performance.
+				Dropout 是一种 regularization
+				技术，会在训练过程中随机把一部分模型权重设为零，用来防止神经网络过拟合。这会鼓励模型学习更稳健的特征，减少对特定神经元的依赖，从而帮助网络更好地泛化到未见过的新数据。在模型推理期间，dropout
+				会被停用。这本质上意味着我们在使用训练得到的多个子网络的集成效果，从而带来更好的模型表现。
 			</p>
 		</div>
 		<div class="article-subsection" id="article-residual">
 			<h3>Residual Connections</h3>
 
 			<p>
-				Residual connections were first introduced in the ResNet model in 2015. This architectural
-				innovation revolutionized deep learning by enabling the training of very deep neural
-				networks. Essentially, residual connections are shortcuts that bypass one or more layers,
-				adding the input of a layer to its output. This helps mitigate the vanishing gradient
-				problem, making it easier to train deep networks with multiple Transformer blocks stacked on
-				top of each other. In GPT-2, residual connections are used twice within each Transformer
-				block: once before the MLP and once after, ensuring that gradients flow more easily, and
-				earlier layers receive sufficient updates during backpropagation.
+				Residual connections 最早在 2015 年的 ResNet
+				模型中提出。这个架构创新让非常深的神经网络变得可训练，也由此改变了深度学习。简单来说，residual
+				connections 是绕过一层或多层的捷径，会把某一层的输入加到它的输出上。这有助于缓解 vanishing
+				gradient 问题，让堆叠多个 Transformer blocks 的深层网络更容易训练。在 GPT-2 中，每个
+				Transformer block 内会使用两次 residual connections：一次在 MLP
+				之前，一次在之后，从而确保梯度更容易流动，并让更早的层在反向传播中获得足够更新。
 			</p>
 		</div>
 	</div>
 
 	<div class="article-section" data-click="article-interactive-features">
-		<h1>Interactive Features</h1>
+		<h1>交互功能</h1>
 		<p>
-			Transformer Explainer is built to be interactive and allows you to explore the inner workings
-			of the Transformer. Here are some of the interactive features you can play with:
+			Transformer Explainer 被设计成可交互的形式，方便你探索 Transformer
+			的内部工作机制。下面是一些你可以直接尝试的交互功能：
 		</p>
 
 		<ul>
 			<li>
-				<strong>Input your own text sequence</strong> to see how the model processes it and predicts
-				the next word. Explore attention weights, intermediate computations, and see how the final output
-				probabilities are calculated.
+				<strong>输入你自己的文本序列</strong>，观察模型如何处理它并预测下一个词。你可以探索
+				attention weights、中间计算过程，以及最终输出概率的计算方式。
 			</li>
 			<li>
-				<strong>Use temperature slider</strong> to control the randomness of the model’s predictions.
-				Explore how you can make the model output more deterministic or more creative by changing the
-				temperature value.
+				<strong>使用 temperature slider</strong> 控制模型预测的随机性。通过改变 temperature 值，可以观察如何让模型输出更确定，或更有创造性。
 			</li>
 			<li>
-				<strong>Select top-k and top-p sampling methods</strong> to adjust sampling behavior during inference.
-				Experiment with different values and see how the probability distribution changes and influences
-				the model's predictions.
+				<strong>选择 top-k 和 top-p sampling methods</strong> 来调整推理期间的采样行为。试试不同取值，观察
+				probability distribution 如何变化，以及它如何影响模型预测。
 			</li>
 			<li>
-				<strong>Interact with attention maps</strong> to see how the model focuses on different tokens
-				in the input sequence. Hover over tokens to highlight their attention weights and explore how
-				the model captures context and relationships between words.
+				<strong>与 attention maps 交互</strong>，查看模型如何关注输入序列中的不同
+				tokens。将鼠标悬停在 tokens 上可以高亮它们的 attention
+				weights，并探索模型如何捕捉上下文和词语关系。
 			</li>
 		</ul>
 	</div>
 
 	<div class="article-section" data-click="article-video">
-		<h2>Video Tutorial</h2>
+		<h2>视频教程</h2>
 		<div class="video-container">
 			<iframe
 				src="https://www.youtube.com/embed/ECR4oAwocjs"
@@ -547,27 +486,27 @@
 	</div>
 
 	<div class="article-section" data-click="article-implementation">
-		<h2>How is Transformer Explainer Implemented?</h2>
+		<h2>Transformer Explainer 是如何实现的？</h2>
 		<p>
-			Transformer Explainer features a live GPT-2 (small) model running directly in the browser.
-			This model is derived from the PyTorch implementation of GPT by Andrej Karpathy's
+			Transformer Explainer 内置了一个直接在浏览器中运行的实时 GPT-2（small）模型。这个模型来自
+			Andrej Karpathy 的
 			<a href="https://github.com/karpathy/nanoGPT" title="Github" target="_blank"
 				>nanoGPT project</a
 			>
-			and has been converted to
+			中的 GPT PyTorch 实现，并已转换为
 			<a href="https://onnxruntime.ai/" title="ONNX" target="_blank">ONNX Runtime</a>
-			for seamless in-browser execution. The interface is built using JavaScript, with
+			，以便在浏览器中流畅执行。界面使用 JavaScript 构建，并采用
 			<a href="https://kit.svelte.dev/" title="Svelte" target="_blank">Svelte</a>
-			as a front-end framework and
+			作为前端框架，使用
 			<a href="https://d3js.org/" title="D3" target="_blank">D3.js</a>
-			for creating dynamic visualizations. Numerical values are updated live following the user input.
+			创建动态可视化。数值会随着用户输入实时更新。
 		</p>
 	</div>
 
 	<div class="article-section" data-click="article-credit">
-		<h2>Who developed the Transformer Explainer?</h2>
+		<h2>谁开发了 Transformer Explainer？</h2>
 		<p>
-			Transformer Explainer was created by
+			Transformer Explainer 由
 
 			<a href="https://aereeeee.github.io/" target="_blank">Aeree Cho</a>,
 			<a href="https://www.linkedin.com/in/chaeyeonggracekim/" target="_blank">Grace C. Kim</a>,
@@ -575,10 +514,10 @@
 			<a href="https://alechelbling.com/" target="_blank">Alec Helbling</a>,
 			<a href="https://zijie.wang/" target="_blank">Jay Wang</a>,
 			<a href="https://seongmin.xyz/" target="_blank">Seongmin Lee</a>,
-			<a href="https://bhoov.com/" target="_blank">Benjamin Hoover</a>, and
+			<a href="https://bhoov.com/" target="_blank">Benjamin Hoover</a> 和
 			<a href="https://poloclub.github.io/polochau/" target="_blank">Polo Chau</a>
 
-			at the Georgia Institute of Technology.
+			在 Georgia Institute of Technology 开发。
 		</p>
 	</div>
 </div>
diff --git a/src/components/common/WeightPopoverCard.svelte b/src/components/common/WeightPopoverCard.svelte
index 9c16499..981c052 100644
--- a/src/components/common/WeightPopoverCard.svelte
+++ b/src/components/common/WeightPopoverCard.svelte
@@ -52,6 +52,7 @@
 				<button
 					class="play-control forward"
 					data-click="matrix-calc-forward-btn"
+					aria-label="跳到动画结尾"
 					on:click={(e) => {
 						e.stopPropagation();
 						timeline.progress(1);
@@ -77,6 +78,7 @@
 				<button
 					class="play-control restart"
 					data-click="matrix-calc-restart-btn"
+					aria-label="重新播放动画"
 					on:click={(e) => {
 						e.stopPropagation();
 						isAnimationActive = true;
@@ -105,6 +107,7 @@
 			<button
 				class="close"
 				data-click="matrix-calc-close-btn"
+				aria-label="关闭弹窗"
 				on:click={(e) => {
 					e.stopPropagation();
 					weightPopover.set(null);
diff --git a/src/utils/i18n.ts b/src/utils/i18n.ts
new file mode 100644
index 0000000..6fde56f
--- /dev/null
+++ b/src/utils/i18n.ts
@@ -0,0 +1,27 @@
+export const zhCN = {
+	app: {
+		title: 'Transformer Explainer：可视化理解 LLM Transformer 模型',
+		description:
+			'一个交互式可视化工具，帮助你理解 GPT 等大语言模型（LLM）中的 Transformer 模型如何工作。'
+	},
+	controls: {
+		examples: '示例',
+		generate: '生成',
+		inputPlaceholder: '输入你自己的英文提示词',
+		mobileExampleOnly: '请先试试示例。自定义输入建议在桌面端使用。',
+		modelDownloading: 'GPT-2 模型正在下载（600MB），你可以先试试示例。',
+		wordLimit: (limit: number) => `最多可输入 ${limit} 个英文单词。`,
+		temperature: 'Temperature',
+		sampling: 'Sampling'
+	},
+	glossary: {
+		token: '词元（Token）',
+		selfAttention: '自注意力（Self-Attention）',
+		multiHeadSelfAttention: '多头自注意力（Multi-Head Self-Attention）',
+		mlp: '多层感知机（MLP, Multi-Layer Perceptron）',
+		transformerBlock: 'Transformer Block',
+		positionalEncoding: '位置编码（Positional Encoding）',
+		tokenEmbedding: '词元嵌入（Token Embedding）',
+		outputProbabilities: '输出概率（Output Probabilities）'
+	}
+} as const;
diff --git a/src/utils/textbookPages.ts b/src/utils/textbookPages.ts
index bc95163..da8e6ee 100644
--- a/src/utils/textbookPages.ts
+++ b/src/utils/textbookPages.ts
@@ -35,20 +35,20 @@ const { drawLine, removeLine } = drawResidualLine();
 export const textPages: TextbookPage[] = [
 	{
 		id: 'what-is-transformer',
-		title: 'What is Transformer?',
-		content: `<p><strong>Transformer</strong> is the core architecture behind modern AI, powering models like ChatGPT and Gemini. Introduced in 2017, it revolutionized how AI processes information. The same architecture is used for training on massive datasets and for inference to generate outputs. Here we use GPT-2 (small), simpler than newer ones but perfect for learning the fundamentals.</p>
+		title: '什么是 Transformer？',
+		content: `<p><strong>Transformer</strong> 是现代 AI，尤其是大型语言模型（LLM, Large Language Model）的核心架构，支撑着 ChatGPT、Gemini 等模型。它在 2017 年被提出，显著改变了 AI 处理信息的方式。同一套架构既用于在海量数据上训练模型，也用于推理（inference）生成输出。这里使用的是 GPT-2（small）：它比新一代模型更简单，但很适合用来理解基础原理。</p>
 `,
 		on: () => {},
 		out: () => {}
 	},
 	{
 		id: 'how-transformers-work',
-		title: 'How Transformers Work?',
-		content: `<p>Transformers aren't magic—they build text step by step by asking:</p>
+		title: 'Transformer 如何工作？',
+		content: `<p>Transformer 并不是魔法；它会通过不断追问下面这个问题，一步一步生成文本：</p>
 	<blockquote class="question">
-		"What is the most probable next word that will follow this input?"
+		“在这段输入之后，最可能出现的下一个词是什么？”
 	</blockquote>
-	<p>Here we explore how a trained model generates text. Write your own text or use an example, then click <strong>Generate</strong> to see it in action. If the model isn’t ready yet, try another <strong>Example</strong>.</p>`,
+	<p>这里会演示一个训练好的模型如何生成文本。你可以输入自己的英文文本，也可以使用示例，然后点击 <strong>生成</strong> 查看流程。如果模型还没有准备好，可以先切换另一个 <strong>示例</strong>。</p>`,
 		on: () => {
 			highlightElements(['.input-form']);
 			if (get(isFetchingModel)) {
@@ -77,9 +77,9 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'transformer-architecture',
-		title: 'Transformer Architecture',
+		title: 'Transformer 架构',
 		content:
-			'<p>Transformer has three main parts:</p><div class="numbered-list"><div class="numbered-item"><span class="number-circle">1</span><div class="item-content"><strong>Embeddings</strong> turn text into numbers.</div></div><div class="numbered-item"><span class="number-circle">2</span><div class="item-content"><strong>Transformer blocks</strong> mix information with Self-Attention and refine it with an MLP.</div></div><div class="numbered-item"><span class="number-circle">3</span><div class="item-content"><strong>Probabilities</strong> determine the likelihood of each next token.</div></div></div>',
+			'<p>Transformer 主要由三部分组成：</p><div class="numbered-list"><div class="numbered-item"><span class="number-circle">1</span><div class="item-content"><strong>Embeddings</strong> 将文本转换成数字表示。</div></div><div class="numbered-item"><span class="number-circle">2</span><div class="item-content"><strong>Transformer blocks</strong> 通过 Self-Attention 混合信息，再用 MLP（Multi-Layer Perceptron，多层感知机）进一步处理。</div></div><div class="numbered-item"><span class="number-circle">3</span><div class="item-content"><strong>Probabilities</strong> 表示每个候选下一个词元（Token）的可能性。</div></div></div>',
 		on: () => {
 			const selectors = [
 				'.step.embedding',
@@ -104,7 +104,7 @@ export const textPages: TextbookPage[] = [
 	{
 		id: 'embedding',
 		title: 'Embedding',
-		content: `<p>Before a Transformer can use text, it first breaks it into small units and represents each as a list of numbers (vector). This process is called <strong>embedding</strong>, and the term can refer to both the process and the resulting vector.</p><p>In this tool, each vector appears as a rectangle, and hovering over it shows its size.</p>`,
+		content: `<p>在 Transformer 处理文本之前，文本会先被拆成更小的单元，并把每个单元表示为一串数字，也就是向量（vector）。这个过程称为 <strong>embedding</strong>；这个词既可以指“转换过程”，也可以指转换后的向量本身。</p><p>在这个工具里，每个向量会显示成一个矩形；把鼠标悬停在上面可以查看它的尺寸。</p>`,
 		on: () => {
 			highlightElements(['.step.embedding .title']);
 		},
@@ -125,7 +125,7 @@ export const textPages: TextbookPage[] = [
 	{
 		id: 'token-embedding',
 		title: 'Token Embedding',
-		content: `<p><strong>Tokenization</strong> splits input text into tokens—small units like words or parts of words. GPT-2 (small) has 50,257 token vocabulary, each with a unique ID.</p><p>In the <strong>token embedding</strong> step, every token is matched to a 768-number vector from a large lookup table. These vectors are learned during training to best represent each token’s meaning.</p>`,
+		content: `<p><strong>Tokenization</strong> 会把输入文本切分成词元（Token）：它们可能是完整单词，也可能只是单词的一部分。GPT-2（small）的词表包含 50,257 个 token，每个 token 都有唯一的 ID。</p><p>在 <strong>token embedding</strong> 这一步，每个 token 都会从一个大型查找表中匹配到一个包含 768 个数字的向量。这些向量是在训练过程中学习出来的，用来尽可能表示对应 token 的语义。</p>`,
 		on: function () {
 			const selectors = [
 				'.token-column .column.token-string',
@@ -156,7 +156,7 @@ export const textPages: TextbookPage[] = [
 	{
 		id: 'positional-encoding',
 		title: 'Positional Encoding',
-		content: `<p>Word order matters in language. <strong>Positional encoding</strong> gives each token information about its place in the sequence.</p><p>GPT-2 does this by adding a learned positional embedding to the token's embedding, but newer models may use other methods, like RoPE, which encodes position by rotating certain vectors. All aim to help the model understand order in text.</p>`,
+		content: `<p>在语言中，词序非常重要。<strong>Positional encoding</strong> 会为每个 token 加入它在序列中的位置信息。</p><p>GPT-2 的做法是把学习到的 positional embedding 加到 token embedding 上；更新的模型也可能使用其他方法，例如 RoPE（Rotary Position Embedding，旋转位置编码），通过旋转某些向量来编码位置。它们的目标都是帮助模型理解文本顺序。</p>`,
 		on: function () {
 			const selectors = [
 				'.token-column .column.position-embedding',
@@ -186,8 +186,8 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'blocks',
-		title: 'Repetitive Transformer Blocks',
-		content: `<p>A <strong>Transformer block</strong> is the main unit of processing in the model. It has two parts:</p><ul><li><strong>Multi-head self-attention</strong> – lets tokens share information</li><li><strong>MLP</strong> – refines each token's details</li></ul><p>Models stack many blocks so token representations become richer as they pass through. GPT-2 (small) has 12 of them.</p>`,
+		title: '重复堆叠的 Transformer Blocks',
+		content: `<p><strong>Transformer block</strong> 是模型中的主要处理单元。它包含两部分：</p><ul><li><strong>Multi-Head Self-Attention</strong>：让 token 之间共享信息</li><li><strong>MLP</strong>：进一步细化每个 token 的表示</li></ul><p>模型会堆叠多个 block，让 token 表示在逐层传递时变得更丰富。GPT-2（small）一共有 12 个这样的 block。</p>`,
 		on: function () {
 			this.timeoutId = setTimeout(
 				() => {
@@ -230,9 +230,9 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'self-attention',
-		title: 'Multi-Head Self Attention',
+		title: '多头自注意力（Multi-Head Self-Attention）',
 		content:
-			'<p><strong>Self-attention</strong> lets the model decide which parts of the input are most relevant to each token. This helps it capture meaning and relationships, even between far-apart words.</p><p>In <strong>multi-head</strong> form, the model runs several attention processes in parallel, each focusing on different patterns in the text.</p>',
+			'<p><strong>Self-Attention</strong> 让模型判断输入中的哪些部分与当前 token 最相关。这可以帮助模型捕捉语义和关系，即使相关词之间相隔很远也可以关联起来。</p><p>在 <strong>multi-head</strong> 形式下，模型会并行运行多个 attention 过程，每个 head 关注文本中的不同模式。</p>',
 		on: () => {
 			highlightElements(['.step.attention']);
 		},
@@ -242,16 +242,16 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'qkv',
-		title: 'Query, Key, Value',
+		title: 'Query、Key、Value',
 		content: `
-	<p>To perform self-attention, each token's embedding is transformed into 
-  <span class="highlight">three new embeddings</span>—
-  <span class="blue">Query</span>,  
-  <span class="red">Key</span>, and  
-  <span class="green">Value</span>.
-  This transformation is done by applying different weights and biases to each token embedding. These parameters (weights and biases), are optimized through training.</p>
+	<p>为了执行 Self-Attention，每个 token 的 embedding 都会被转换成
+  <span class="highlight">三个新的 embeddings</span>：
+  <span class="blue">Query</span>、
+  <span class="red">Key</span> 和
+  <span class="green">Value</span>。
+  这个转换会对每个 token embedding 应用不同的权重和偏置。这些参数（weights 和 biases）会在训练过程中被优化。</p>
 
-<p>Once created, <span class="blue">Queries</span> compare with <span class="red">Keys</span> to measure relevance, and this relevance is used to weight the <span class="green">Values</span>.</p>
+<p>生成之后，<span class="blue">Queries</span> 会与 <span class="red">Keys</span> 比较来衡量相关性；这个相关性会进一步用于加权 <span class="green">Values</span>。</p>
 `,
 		on: function () {
 			this.timeoutId = setTimeout(
@@ -285,7 +285,7 @@ export const textPages: TextbookPage[] = [
 		id: 'multi-head',
 		title: 'Multi-head',
 		content:
-			'<p>After creating <span class="blue">Q</span>, <span class="red">K</span>, and <span class="green">V</span> embeddings, the model splits them into several <strong>heads</strong> (12 in GPT-2 small). Each head works with its own smaller set of <span class="blue">Q</span>/<span class="red">K</span>/<span class="green">V</span>, focusing on different patterns in the text—like grammar, meaning, or long-range links.</p><p>Multiple heads let the model learn many kinds of relationships in parallel, making its understanding richer.</p>',
+			'<p>生成 <span class="blue">Q</span>、<span class="red">K</span> 和 <span class="green">V</span> embeddings 之后，模型会把它们拆分成多个 <strong>heads</strong>（GPT-2 small 中是 12 个）。每个 head 使用自己的一组更小的 <span class="blue">Q</span>/<span class="red">K</span>/<span class="green">V</span>，关注文本中的不同模式，例如语法、语义或长距离关联。</p><p>多个 heads 让模型可以并行学习多种关系，从而形成更丰富的理解。</p>',
 		on: () => {
 			highlightAttentionPath();
 			highlightElements(['.multi-head .head-title']);
@@ -307,8 +307,8 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'masked-self-attention',
-		title: 'Masked Self Attention',
-		content: `<p>In each head, the model decides how much each token focuses on others:</p><ul><li><strong>Dot Product</strong> – Multiply matching numbers in <span class="blue">Query</span>/<span class="red">Key</span> vectors, sum to get <span class="purple">attention scores</span>.</li><li><strong>Mask</strong> – Hide future tokens so it can't peek ahead.</li><li><strong>Softmax</strong> – Convert scores to probabilities, each row summing to 1, showing focus on earlier tokens.</li></ul>`,
+		title: 'Masked Self-Attention',
+		content: `<p>在每个 head 中，模型会决定每个 token 应该关注其他 token 的程度：</p><ul><li><strong>Dot Product</strong>：把 <span class="blue">Query</span>/<span class="red">Key</span> 向量中对应位置的数字相乘再求和，得到 <span class="purple">attention scores</span>。</li><li><strong>Mask</strong>：隐藏未来 token，避免模型提前“偷看”答案。</li><li><strong>Softmax</strong>：把 scores 转成概率，每一行加起来等于 1，表示当前 token 对前面 token 的关注分布。</li></ul>`,
 		on: () => {
 			highlightAttentionPath();
 			highlightElements(['.attention-matrix.attention-result']);
@@ -331,9 +331,9 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'output-concatenation',
-		title: 'Attention Output & Concatenation',
+		title: 'Attention 输出与拼接',
 		content:
-			'<p>Each head <span class="highlight">multiplies its <span class="purple">attention scores</span> with the <span class="green">Value</span> embeddings to produce its attention output</span>—a refined representation of each token after considering context.</p><p>GPT-2 (small) has 12 such outputs, which are concatenated to form a single vector of the original size (768 numbers).</p>',
+			'<p>每个 head 会<span class="highlight">将自己的 <span class="purple">attention scores</span> 与 <span class="green">Value</span> embeddings 相乘，生成 attention output</span>：这是每个 token 在考虑上下文之后得到的精炼表示。</p><p>GPT-2（small）会产生 12 组这样的输出，然后把它们拼接起来，形成一个原始尺寸的向量（768 个数字）。</p>',
 		on: function () {
 			this.timeoutId = setTimeout(
 				() => {
@@ -363,9 +363,9 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'mlp',
-		title: 'MLP (Multi-Layer Perceptron)',
+		title: 'MLP（Multi-Layer Perceptron）',
 		content:
-			'<p>The attention output goes through an <strong>MLP</strong> to refine token representations. A Linear layer changes embedding values and size using learned weights and bias, then a non-linear activation decides how much each value passes.</p><p>Many activation types exist; GPT-2 uses <strong>GELU</strong>, which lets small values pass partially and large values pass fully, helping capture both subtle and strong patterns.</p>',
+			'<p>Attention output 会经过一个 <strong>MLP</strong> 来进一步优化 token 表示。Linear layer 会用学习到的权重和偏置改变 embedding 的数值与尺寸，随后非线性 activation 会决定每个值保留多少。</p><p>Activation 有很多类型；GPT-2 使用 <strong>GELU</strong>，它会让较小的值部分通过、较大的值充分通过，从而帮助模型同时捕捉细微模式和强模式。</p>',
 		on: () => {
 			highlightElements(['.step.mlp', '.operation-col.activation']);
 		},
@@ -376,8 +376,8 @@ export const textPages: TextbookPage[] = [
 
 	{
 		id: 'output-logit',
-		title: 'Output Logit',
-		content: `<p>After all Transformer blocks, the last token's output embedding, enriched with context from all previous tokens, is multiplied by learned weights in a final layer.</p><p>This produces <strong>logits</strong>, 50,257 numbers—one for each token in GPT-2’s vocabulary—that indicate how likely each token is to come next.</p>`,
+		title: '输出 Logit',
+		content: `<p>经过所有 Transformer blocks 之后，最后一个 token 的 output embedding 已经融合了前面所有 token 的上下文信息。最终层会把它与学习到的权重相乘。</p><p>这会产生 <strong>logits</strong>：一共 50,257 个数字，对应 GPT-2 词表中的每个 token，用来表示每个 token 接下来出现的可能性。</p>`,
 		on: () => {
 			highlightElements(['g.path-group.softmax', '.column.final']);
 		},
@@ -398,9 +398,9 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'output-probabilities',
-		title: 'Probabilities',
+		title: '输出概率',
 		content:
-			'<p>Logits are just raw scores. To make them easier to interpret, we convert them into <strong>probabilities</strong> between 0 and 1, where all add up to 1. This tells us the likelihood of each token being the next word.</p><p>Instead of always picking the highest-probability token, we can use different selection strategies to balance safety and creativity in the generated text.</p>',
+			'<p>Logits 只是原始分数。为了更容易解释，我们会把它们转换成 0 到 1 之间的 <strong>probabilities</strong>，并且所有概率加起来等于 1。这样就可以看出每个 token 成为下一个词的可能性。</p><p>生成文本时不一定总是选择概率最高的 token；我们也可以使用不同的选择策略，在稳定性和创造性之间取得平衡。</p>',
 		on: () => {
 			highlightElements(['.step.softmax .title']);
 		},
@@ -422,7 +422,7 @@ export const textPages: TextbookPage[] = [
 		id: 'temperature',
 		title: 'Temperature',
 		content:
-			'<p><strong>Temperature</strong> works by scaling the logits before turning them into probabilities. A <strong>low temperature</strong> (e.g., 0.2) makes large logits even larger and small ones smaller, favoring the highest-scoring tokens and leading to more <strong>predictable choices</strong>. A <strong>high temperature</strong> (e.g., 1.0 or above) flattens the differences, making less likely tokens more competitive and leading to more <strong>creative outputs</strong>.</p>',
+			'<p><strong>Temperature</strong> 会在 logits 转换为概率之前对它们进行缩放。<strong>较低的 temperature</strong>（例如 0.2）会让大的 logits 更大、小的 logits 更小，因此更偏向分数最高的 token，生成结果也更<strong>可预测</strong>。<strong>较高的 temperature</strong>（例如 1.0 或更高）会拉平差异，让原本可能性较低的 token 也更有竞争力，从而产生更<strong>有创造性</strong>的输出。</p>',
 		on: function () {
 			if (get(expandedBlock).id !== 'softmax') {
 				expandedBlock.set({ id: 'softmax' });
@@ -470,9 +470,9 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'sampling',
-		title: 'Sampling Strategy',
+		title: 'Sampling 策略',
 		content:
-			'<p>Finally, we need a strategy to pick the next token. Many exist, but here are common ones: Greedy search picks the top one. <strong>Top-k</strong> keeps only the k most likely tokens, and <strong>top-p</strong> keeps the smallest set whose total probability is at least p—trimming unlikely ones early.</p><p>Then softmax turns the remaining logits into probabilities, and one token is picked at random from the allowed set.</p>',
+			'<p>最后，我们需要一种策略来选择下一个 token。常见策略包括：Greedy search 直接选择最高分的 token；<strong>Top-k</strong> 只保留概率最高的 k 个 token；<strong>top-p</strong> 则保留累计概率至少达到 p 的最小 token 集合，从一开始就过滤掉低概率候选。</p><p>随后 softmax 会把剩余 logits 转换成概率，并从允许的集合中随机采样一个 token。</p>',
 		on: function () {
 			if (get(expandedBlock).id !== 'softmax') {
 				expandedBlock.set({ id: 'softmax' });
@@ -520,8 +520,8 @@ export const textPages: TextbookPage[] = [
 	},
 	{
 		id: 'residual',
-		title: 'Residual Connection',
-		content: `<p>Transformers have auxiliary features that enhance the model performance. For example, a <strong>residual connection</strong> adds a layer's input to its output, keeping information from fading through many blocks. In GPT-2, it's used twice per block to train deeper stacks effectively.</p>`,
+		title: '残差连接（Residual Connection）',
+		content: `<p>Transformer 还有一些辅助机制来提升模型性能。比如 <strong>residual connection</strong> 会把某一层的输入加回到它的输出上，避免信息在经过很多 block 后逐渐消失。在 GPT-2 中，每个 block 会使用两次 residual connection，从而更有效地训练更深的堆叠结构。</p>`,
 		on: function () {
 			this.timeoutId = setTimeout(
 				() => {
@@ -543,7 +543,7 @@ export const textPages: TextbookPage[] = [
 	{
 		id: 'layer-normalization',
 		title: 'Layer Normalization',
-		content: `<p><strong>Layer Normalization</strong> helps stabilize both training and inference by adjusting input numbers so their mean and variance stay consistent. This makes the model less sensitive to its starting weights and helps it learn more effectively. In GPT-2, it's applied before self-attention, before the MLP, and once more before the final output.</p>`,
+		content: `<p><strong>Layer Normalization</strong> 会调整输入数字，让它们的均值和方差保持稳定，从而同时稳定训练与推理过程。这会让模型对初始权重不那么敏感，也能更有效地学习。在 GPT-2 中，它会出现在 self-attention 之前、MLP 之前，以及最终输出之前。</p>`,
 		on: () => {
 			highlightElements(['.operation-col.ln']);
 		},
@@ -554,7 +554,7 @@ export const textPages: TextbookPage[] = [
 	{
 		id: 'dropout',
 		title: 'Dropout',
-		content: `<p>During training, <strong>dropout</strong> randomly turns off some connections between numbers so the model doesn't overfit to specific patterns. This helps it learn features that generalize better. GPT-2 uses it, but newer LLMs often skip it because they train on huge datasets and overfitting is less of a problem. In inference, dropout is turned off.</p>`,
+		content: `<p>训练期间，<strong>dropout</strong> 会随机关闭某些数字之间的连接，避免模型过度拟合特定模式。这有助于模型学习更容易泛化的特征。GPT-2 使用了 dropout，但更新的 LLM 通常会跳过它，因为它们在巨大数据集上训练，过拟合问题相对更小。推理时，dropout 会被关闭。</p>`,
 		on: () => {
 			highlightElements(['.operation-col.dropout']);
 		},
diff --git a/vite.config.ts b/vite.config.ts
index 9455ad0..6558f99 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ export default defineConfig({
 	css: {
 		preprocessorOptions: {
 			scss: {
+				loadPaths: ['.'],
 				additionalData: `@import 'src/styles/variables.scss';`
 			}
 		}