diff --git a/docs/01_requirement/functional-requirements.md b/docs/01_requirement/functional-requirements.md
index e6b10bd..6cc343f 100644
--- a/docs/01_requirement/functional-requirements.md
+++ b/docs/01_requirement/functional-requirements.md
@@ -63,22 +63,48 @@
   - 難度選擇：A1, A2, B1, B2, C1, C2
 
 #### 1.2.2 AI 生成規格
-- **生成方式**
-  1. 原始例句類型
-    - 影劇截圖(訂閱功能, phase2)
-    - 手動輸入
-  2. 詞彙萃取：把每個單字拿去查詢字典API，並標記CEFR    
-  3. 智能萃取(訂閱功能)：將原始例句拿去問AI有無常用片語或俚語，並直接生成相關詞彙內容
+- **原始例句輸入**
+  - 輸入方式
+    1. 影劇截圖(訂閱功能, phase2)
+    2. 手動輸入
+  - 輸入資料
+    - 可接受多句子
+    - 字數限制規則：
+      - 若為手動輸入，則限定300字以內，在前端畫面做阻擋
+      - 若為影劇截圖，則無300字限制
 
-- **生成數量**
-  - 預設：10個詞卡
-  - 範圍：5-20個（用戶可調）
-  - 免費用戶：
-    - 無法自行生成例句圖，但若系統中匹配到現成例句圖，可直接使用
-    - 每日學習數量無限制
-  - 訂閱用戶：每天最多生成50張例句圖
+- **互動式單字查詢（低成本設計）**
+  1. 預分析機制
+    - 用戶輸入句子後，AI 一次性分析整句內容
+    - 獲取原始例句意思
+    - 識別具備高學習價值的片語/俚語/單字，並標記為高價值，並於當次直接生成具標記的項目內容詳情(參考「生成內容詳情」)
+    - 分析結果存儲於快取中（避免重複 API 調用）
+    - 當次操作扣除使用次數一次
+
+  2. 點擊查詢體驗
+    - 句子顯示為可點擊的單字
+    - 點擊對象
+      - 若為高價值標記，則即時顯示意思（無延遲，讀取預分析資料），不扣除使用次數
+      - 若非高價值標記，則拿當前點擊單字及當前句子，給AI分析並生成內容詳情，扣除使用次數一次
+    - 片語/俚語特殊高亮顯示
+      - 智能提醒：當單字屬於片語/俚語時，優先顯示片語意思並提醒
+      - 若出現多筆片語/俚語需標記時，請使用不同顏色區分
+
+  3. 成本優化策略
+    - **核心原則**：一句一次 API 調用，多次查詢零成本
+    - 相同句子分析結果快取（24小時）
+    - 常用單字基礎資訊本地快取
+    - 預估 API 成本降低 80-95%
+  
+  4. 收費策略(phase 2)：
+    - 免費用戶：5次/3小時
+    - 付費用戶：無限制
 
 - **生成內容詳情**
+  - **原始例句**
+    - 整體意思：不論原始例句是多句、一句、片段，就是將原始例句整體意思描述出來
+    - 修正語法錯誤：若原始例句有語法錯誤，則進行修正，並說明修正原因，且後續學習內容皆以正確的版本進行
+
   - **單字/片語**
     - 原形展示
     - 詞性標註（n./v./adj./adv./phrase/slang）
@@ -100,6 +126,9 @@
     - 例句中文翻譯
     - 重點標示（highlight目標詞）
     - 例句圖
+      - 收費策略(phase 2)：
+        - 免費用戶：無法自行生成例句圖，但若系統中匹配到現成例句圖，可直接使用
+        - 訂閱用戶：每天最多生成50張例句圖    
     - 例句發音
 
 - **生成後處理**
@@ -438,6 +467,11 @@
 **目標**：提升用戶體驗
 - ✅ 標籤系統
 - ✅ 搜尋篩選
+- ⬜ **互動式單字查詢系統**
+  - 句子預分析 API 端點
+  - 可點擊文字組件
+  - 片語/俚語智能提醒
+  - 快取機制實現
 - ✅ 進階統計圖表
 - ✅ 成就系統
 - ✅ 學習提醒
@@ -481,7 +515,9 @@
 - 內容版權問題
 
 ### 7.3 緩解措施
-- 實施 API 快取機制
+- 實施 API 快取機制（重點：單字查詢預分析快取）
 - 準備備用 AI 服務
 - 建立用戶反饋循環
-- 確保內容合規性
\ No newline at end of file
+- 確保內容合規性
+- 監控 AI API 使用量並設定預算警告
+- 實現降級機制：API 配額用盡時使用離線字典
\ No newline at end of file
diff --git a/docs/02_design/api-specification.md b/docs/02_design/api-specification.md
new file mode 100644
index 0000000..abb799b
--- /dev/null
+++ b/docs/02_design/api-specification.md
@@ -0,0 +1,801 @@
+# 互動式單字查詢 API 規格書
+
+## 1. API 概覽
+
+### 1.1 基本資訊
+- **Base URL**: `https://api.dramaling.com/v1`
+- **認證方式**: Bearer Token (JWT)
+- **請求格式**: JSON
+- **響應格式**: JSON
+- **字元編碼**: UTF-8
+
+### 1.2 通用響應格式
+
+#### 成功響應
+```json
+{
+  "success": true,
+  "data": { /* 實際資料 */ },
+  "message": "操作成功描述",
+  "timestamp": "2025-09-17T09:48:00Z",
+  "requestId": "uuid"
+}
+```
+
+#### 錯誤響應
+```json
+{
+  "success": false,
+  "error": {
+    "code": "ERROR_CODE",
+    "message": "錯誤描述",
+    "details": "詳細錯誤資訊",
+    "field": "相關欄位" // 如適用
+  },
+  "timestamp": "2025-09-17T09:48:00Z",
+  "requestId": "uuid"
+}
+```
+
+### 1.3 HTTP 狀態碼
+- `200 OK`: 請求成功
+- `201 Created`: 資源創建成功
+- `400 Bad Request`: 請求參數錯誤
+- `401 Unauthorized`: 未認證或認證失效
+- `403 Forbidden`: 無權限訪問
+- `404 Not Found`: 資源不存在
+- `429 Too Many Requests`: 超過使用限制
+- `500 Internal Server Error`: 伺服器內部錯誤
+
+## 2. 認證 API
+
+### 2.1 獲取 Access Token
+```http
+POST /auth/login
+Content-Type: application/json
+
+{
+  "email": "user@example.com",
+  "password": "user_password"
+}
+```
+
+**響應**:
+```json
+{
+  "success": true,
+  "data": {
+    "accessToken": "eyJhbGciOiJIUzI1NiIs...",
+    "refreshToken": "eyJhbGciOiJIUzI1NiIs...",
+    "expiresIn": 900,
+    "user": {
+      "id": "uuid",
+      "email": "user@example.com",
+      "name": "User Name",
+      "subscription": "free" | "premium",
+      "createdAt": "2025-09-17T09:48:00Z"
+    }
+  }
+}
+```
+
+## 3. 句子分析 API
+
+### 3.1 分析句子
+
+#### 請求
+```http
+POST /ai/analyze-sentence
+Authorization: Bearer {accessToken}
+Content-Type: application/json
+
+{
+  "inputText": "He brought this thing up during our meeting and no one agreed.",
+  "options": {
+    "forceRefresh": false,
+    "includeExamples": true,
+    "includeAudio": true,
+    "difficultyLevel": "auto", // auto, A1, A2, B1, B2, C1, C2
+    "analysisMode": "full" // full: 完整分析並標記高價值詞彙
+  }
+}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "analysisId": "uuid",
+    "inputText": "He brought this thing up during our meeting and no one agreed.",
+    "textHash": "sha256_hash",
+    "grammarCorrection": {
+      "hasErrors": false,
+      "originalText": "He brought this thing up during our meeting and no one agreed.",
+      "correctedText": null,
+      "corrections": [],
+      "confidenceScore": 0.98
+    },
+    "sentenceMeaning": {
+      "translation": "他在我們的會議中提出了這件事，但沒有人同意。",
+      "explanation": "這句話表達了在會議中有人提出某個議題或想法，但得不到其他與會者的認同。",
+      "context": "正式會議場合",
+      "tone": "中性陳述"
+    },
+    "finalAnalysisText": "He brought this thing up during our meeting and no one agreed.", // 用於後續分析的文本（修正後）
+    "wordAnalysis": {
+      "he": {
+        "word": "he",
+        "lemma": "he",
+        "translation": "他",
+        "definition": "Used to refer to a male person or animal previously mentioned",
+        "partOfSpeech": "pronoun",
+        "pronunciation": {
+          "ipa": "/hiː/",
+          "us": "/hiː/",
+          "uk": "/hiː/"
+        },
+        "synonyms": ["him", "that man"],
+        "antonyms": [],
+        "isPhrase": false,
+        "phraseInfo": null,
+        "examples": {
+          "original": {
+            "sentence": "He brought this thing up during our meeting",
+            "translation": "他在我們的會議中提出了這件事",
+            "highlightWord": "He"
+          },
+          "generated": {
+            "sentence": "He went to the store yesterday",
+            "translation": "他昨天去了商店",
+            "imageUrl": "/images/examples/he_store.png",
+            "audioUrl": "/audio/examples/he_store.mp3"
+          }
+        },
+        "difficultyLevel": "A1",
+        "frequency": "very_high",
+        "tags": ["basic", "pronoun"]
+      },
+      "brought": {
+        "word": "brought",
+        "lemma": "bring",
+        "translation": "帶來、提出",
+        "definition": "Past tense of bring; to take or carry something to a place",
+        "partOfSpeech": "verb",
+        "pronunciation": {
+          "ipa": "/brɔːt/",
+          "us": "/brɔːt/",
+          "uk": "/brɔːt/"
+        },
+        "synonyms": ["carried", "took", "delivered"],
+        "antonyms": ["removed", "took away"],
+        "isPhrase": true,
+        "isHighValue": true, // 高學習價值標記
+        "learningPriority": "high", // high, medium, low
+        "phraseInfo": {
+          "phrase": "bring up",
+          "meaning": "提出（話題）、養育",
+          "type": "phrasal_verb",
+          "warning": "在這個句子中，\"brought up\" 是一個片語動詞，意思是\"提出話題\"，而不是單純的\"帶來\"",
+          "colorCode": "#F59E0B", // 片語顏色代碼
+          "examples": [
+            {
+              "sentence": "She brought up an important point",
+              "translation": "她提出了一個重要觀點"
+            }
+          ]
+        },
+        "examples": {
+          "original": {
+            "sentence": "He brought this thing up during our meeting",
+            "translation": "他在我們的會議中提出了這件事",
+            "highlightWord": "brought"
+          },
+          "generated": {
+            "sentence": "She brought up the topic in yesterday's discussion",
+            "translation": "她在昨天的討論中提出了這個話題",
+            "imageUrl": "/images/examples/bring_up_meeting.png",
+            "audioUrl": "/audio/examples/bring_up_meeting.mp3"
+          }
+        },
+        "difficultyLevel": "B1",
+        "frequency": "high",
+        "tags": ["phrasal_verb", "meeting", "communication"]
+      }
+      // ... 其他單字
+    },
+    "highValueWords": ["brought", "up", "meeting"], // 高學習價值詞彙列表
+    "phrases": [
+      {
+        "phrase": "bring up",
+        "words": ["brought", "up"],
+        "meaning": "提出（話題）、養育",
+        "type": "phrasal_verb",
+        "definition": "To mention or introduce a topic in conversation; to raise a child",
+        "colorCode": "#F59E0B",
+        "isHighValue": true,
+        "examples": [
+          {
+            "sentence": "Don't bring up that topic again",
+            "translation": "不要再提起那個話題了"
+          }
+        ]
+      }
+    ],
+    "metadata": {
+      "analysisTime": 2.5,
+      "wordsCount": 12,
+      "phrasesCount": 1,
+      "highValueWordsCount": 3, // 高價值詞彙數量
+      "averageDifficulty": "B1",
+      "detectedLanguage": "en",
+      "confidence": 0.98
+    },
+    "usageStatistics": {
+      "remainingAnalyses": 4,
+      "totalUsedToday": 1,
+      "dailyLimit": 5,
+      "resetTime": "2025-09-17T12:48:00Z",
+      "subscription": "free"
+    },
+    "cache": {
+      "cached": false,
+      "cacheKey": "sha256_hash",
+      "expiresAt": "2025-09-18T09:48:00Z",
+      "ttl": 86400
+    }
+  },
+  "message": "句子分析完成"
+}
+```
+
+### 3.2 單字點擊查詢
+
+#### 請求
+```http
+POST /ai/query-word
+Authorization: Bearer {accessToken}
+Content-Type: application/json
+
+{
+  "word": "thing",
+  "sentence": "He brought this thing up during our meeting and no one agreed.",
+  "analysisId": "uuid", // 來自預分析結果
+  "context": {
+    "position": 3, // 單字在句子中的位置
+    "surroundingWords": ["this", "thing", "up"] // 周圍單字上下文
+  }
+}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "word": "thing",
+    "isHighValue": false, // 非高價值詞彙
+    "wasPreAnalyzed": false, // 未在預分析中包含
+    "costIncurred": 1, // 扣除1次使用次數
+    "analysis": {
+      "word": "thing",
+      "translation": "事情、東西",
+      "definition": "An object, fact, or situation",
+      "partOfSpeech": "noun",
+      "pronunciation": {
+        "ipa": "/θɪŋ/",
+        "us": "/θɪŋ/",
+        "uk": "/θɪŋ/"
+      },
+      "synonyms": ["object", "matter", "item"],
+      "antonyms": [],
+      "isPhrase": false,
+      "isHighValue": false,
+      "learningPriority": "low",
+      "examples": {
+        "original": {
+          "sentence": "He brought this thing up during our meeting",
+          "translation": "他在會議中提出了這件事",
+          "highlightWord": "thing"
+        },
+        "generated": {
+          "sentence": "That's an important thing to remember",
+          "translation": "那是需要記住的重要事情",
+          "imageUrl": "/images/examples/important_thing.png",
+          "audioUrl": "/audio/examples/important_thing.mp3"
+        }
+      },
+      "difficultyLevel": "A1"
+    },
+    "usageStatistics": {
+      "remainingAnalyses": 3,
+      "totalUsedToday": 2,
+      "costType": "word_query" // sentence_analysis, word_query
+    }
+  },
+  "message": "單字查詢完成"
+}
+```
+
+### 3.3 獲取快取分析結果
+
+#### 請求
+```http
+GET /ai/analysis-cache/{textHash}
+Authorization: Bearer {accessToken}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    // 與分析句子相同的結構
+  }
+}
+```
+
+### 3.4 語法錯誤修正示例
+
+#### 有錯誤句子的分析響應
+```json
+{
+  "success": true,
+  "data": {
+    "analysisId": "uuid",
+    "inputText": "I go to school yesterday and meet my friends.",
+    "grammarCorrection": {
+      "hasErrors": true,
+      "originalText": "I go to school yesterday and meet my friends.",
+      "correctedText": "I went to school yesterday and met my friends.",
+      "corrections": [
+        {
+          "position": {"start": 2, "end": 4}, // "go" 的位置
+          "errorType": "tense_mismatch",
+          "original": "go",
+          "corrected": "went",
+          "reason": "過去式時態修正：句子中有 'yesterday'，應使用過去式",
+          "severity": "high"
+        },
+        {
+          "position": {"start": 29, "end": 33}, // "meet" 的位置
+          "errorType": "tense_mismatch",
+          "original": "meet",
+          "corrected": "met",
+          "reason": "過去式時態修正：與 'went' 保持時態一致",
+          "severity": "high"
+        }
+      ],
+      "confidenceScore": 0.95
+    },
+    "sentenceMeaning": {
+      "translation": "我昨天去學校遇見了我的朋友們。",
+      "explanation": "這句話描述了過去發生的事情，表達了去學校並遇到朋友的經歷。"
+    },
+    "finalAnalysisText": "I went to school yesterday and met my friends.", // 後續分析使用修正版本
+    "wordAnalysis": {
+      // 基於修正後句子的分析結果
+      "went": {
+        "word": "went",
+        "translation": "去、前往",
+        "definition": "Past tense of go; to move or travel to a place",
+        "isHighValue": true,
+        "learningPriority": "high"
+        // ... 其他詳情
+      }
+      // ... 其他單字
+    }
+  }
+}
+```
+
+### 3.5 清除快取
+
+#### 請求
+```http
+DELETE /ai/analysis-cache/{analysisId}
+Authorization: Bearer {accessToken}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "message": "快取已清除"
+}
+```
+
+## 4. 使用統計 API
+
+### 4.1 獲取使用統計
+
+#### 請求
+```http
+GET /users/usage-stats
+Authorization: Bearer {accessToken}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "daily": {
+      "date": "2025-09-17",
+      "analysisCount": 1,
+      "wordClickCount": 15,
+      "uniqueWordsQueried": 8,
+      "totalTimeSpent": 320,
+      "remainingAnalyses": 4
+    },
+    "weekly": {
+      "startDate": "2025-09-11",
+      "endDate": "2025-09-17",
+      "analysisCount": 12,
+      "wordClickCount": 180,
+      "uniqueWordsQueried": 95,
+      "totalTimeSpent": 2400
+    },
+    "monthly": {
+      "month": "2025-09",
+      "analysisCount": 45,
+      "wordClickCount": 720,
+      "uniqueWordsQueried": 350,
+      "totalTimeSpent": 9600
+    },
+    "limits": {
+      "subscription": "free",
+      "dailyAnalysisLimit": 5,
+      "dailyImageGenerationLimit": 0,
+      "resetTime": "2025-09-17T12:48:00Z"
+    }
+  }
+}
+```
+
+### 4.2 記錄單字點擊
+
+#### 請求
+```http
+POST /users/word-interactions
+Authorization: Bearer {accessToken}
+Content-Type: application/json
+
+{
+  "analysisId": "uuid",
+  "word": "brought",
+  "action": "click", // click, audio_play, image_view
+  "timestamp": "2025-09-17T09:48:00Z",
+  "context": {
+    "sentencePosition": 2,
+    "isPhrase": true,
+    "difficultyLevel": "B1"
+  }
+}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "message": "互動記錄已保存"
+}
+```
+
+## 5. 詞卡生成 API
+
+### 5.1 從分析結果生成詞卡
+
+#### 請求
+```http
+POST /flashcards/generate-from-analysis
+Authorization: Bearer {accessToken}
+Content-Type: application/json
+
+{
+  "analysisId": "uuid",
+  "selectedWords": ["brought", "meeting", "agreed"],
+  "cardSetId": "uuid", // 可選，不提供則創建新卡組
+  "options": {
+    "includePhrasesOnly": false,
+    "difficultyFilter": ["B1", "B2"],
+    "generateImages": true // 付費用戶才能使用
+  }
+}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "cardSetId": "uuid",
+    "cardsGenerated": 3,
+    "cards": [
+      {
+        "id": "uuid",
+        "word": "brought",
+        "translation": "帶來、提出",
+        "definition": "Past tense of bring; to take or carry something to a place",
+        "partOfSpeech": "verb",
+        "pronunciation": "/brɔːt/",
+        "example": "He brought this thing up during our meeting",
+        "exampleTranslation": "他在我們的會議中提出了這件事",
+        "difficultyLevel": "B1",
+        "isPhrase": true,
+        "phraseInfo": {
+          "phrase": "bring up",
+          "meaning": "提出（話題）、養育"
+        },
+        "createdAt": "2025-09-17T09:48:00Z"
+      }
+      // ... 其他詞卡
+    ]
+  },
+  "message": "詞卡生成成功"
+}
+```
+
+## 6. 音頻服務 API
+
+### 6.1 生成單字發音
+
+#### 請求
+```http
+POST /audio/generate-pronunciation
+Authorization: Bearer {accessToken}
+Content-Type: application/json
+
+{
+  "text": "brought",
+  "accent": "us", // us, uk
+  "speed": "normal", // slow, normal, fast
+  "format": "mp3" // mp3, wav, ogg
+}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "audioUrl": "/audio/pronunciation/brought_us_normal.mp3",
+    "duration": 0.8,
+    "fileSize": 12480,
+    "expiresAt": "2025-09-24T09:48:00Z"
+  }
+}
+```
+
+### 6.2 生成例句發音
+
+#### 請求
+```http
+POST /audio/generate-sentence
+Authorization: Bearer {accessToken}
+Content-Type: application/json
+
+{
+  "text": "He brought this thing up during our meeting",
+  "accent": "us",
+  "speed": "normal",
+  "highlightWord": "brought", // 可選，高亮某個單字
+  "format": "mp3"
+}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "audioUrl": "/audio/sentences/sentence_hash_us_normal.mp3",
+    "duration": 3.2,
+    "fileSize": 51200,
+    "wordTimestamps": [
+      {"word": "He", "start": 0.0, "end": 0.2},
+      {"word": "brought", "start": 0.2, "end": 0.6},
+      // ... 其他單字時間戳
+    ],
+    "expiresAt": "2025-09-24T09:48:00Z"
+  }
+}
+```
+
+## 7. 圖片服務 API
+
+### 7.1 生成例句圖片 (付費功能)
+
+#### 請求
+```http
+POST /images/generate-example
+Authorization: Bearer {accessToken}
+Content-Type: application/json
+
+{
+  "word": "brought",
+  "phrase": "bring up",
+  "example": "She brought up an important point in the meeting",
+  "context": "business meeting",
+  "style": "illustration", // illustration, photo, cartoon
+  "prompt": "A professional woman raising her hand in a business meeting"
+}
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "imageId": "uuid",
+    "imageUrl": "/images/examples/brought_up_meeting_123.png",
+    "thumbnailUrl": "/images/examples/thumbs/brought_up_meeting_123.png",
+    "width": 1024,
+    "height": 768,
+    "fileSize": 245760,
+    "style": "illustration",
+    "prompt": "A professional woman raising her hand in a business meeting",
+    "generatedAt": "2025-09-17T09:48:00Z",
+    "expiresAt": "2025-12-17T09:48:00Z"
+  }
+}
+```
+
+### 7.2 獲取現有例句圖片
+
+#### 請求
+```http
+GET /images/examples
+Authorization: Bearer {accessToken}
+Query Parameters:
+- word: string (可選)
+- phrase: string (可選)
+- context: string (可選)
+- limit: number (預設 20)
+- offset: number (預設 0)
+```
+
+#### 響應
+```json
+{
+  "success": true,
+  "data": {
+    "images": [
+      {
+        "imageId": "uuid",
+        "word": "brought",
+        "phrase": "bring up",
+        "imageUrl": "/images/examples/brought_up_meeting_123.png",
+        "thumbnailUrl": "/images/examples/thumbs/brought_up_meeting_123.png",
+        "context": "business meeting",
+        "usage": "free", // free, premium
+        "downloads": 1250
+      }
+    ],
+    "total": 150,
+    "hasMore": true
+  }
+}
+```
+
+## 8. 錯誤代碼定義
+
+### 8.1 認證錯誤 (AUTH_*)
+- `AUTH_INVALID_TOKEN`: 無效的 Token
+- `AUTH_TOKEN_EXPIRED`: Token 已過期
+- `AUTH_INSUFFICIENT_PERMISSIONS`: 權限不足
+
+### 8.2 使用限制錯誤 (LIMIT_*)
+- `LIMIT_DAILY_ANALYSIS_EXCEEDED`: 超過每日分析次數限制
+- `LIMIT_TEXT_TOO_LONG`: 文字長度超過限制
+- `LIMIT_RATE_EXCEEDED`: 請求頻率過高
+
+### 8.3 AI 服務錯誤 (AI_*)
+- `AI_SERVICE_UNAVAILABLE`: AI 服務暫時不可用
+- `AI_ANALYSIS_FAILED`: 句子分析失敗
+- `AI_INVALID_LANGUAGE`: 不支援的語言
+
+### 8.4 資源錯誤 (RESOURCE_*)
+- `RESOURCE_NOT_FOUND`: 資源不存在
+- `RESOURCE_CACHE_MISS`: 快取未命中
+- `RESOURCE_GENERATION_FAILED`: 資源生成失敗
+
+### 8.5 語法修正錯誤 (GRAMMAR_*)
+- `GRAMMAR_CORRECTION_FAILED`: 語法修正失敗
+- `GRAMMAR_TOO_MANY_ERRORS`: 錯誤過多無法修正
+- `GRAMMAR_AMBIGUOUS_MEANING`: 語意模糊無法確定修正方向
+
+### 8.6 語法錯誤類型定義
+- `tense_mismatch`: 時態錯誤
+- `subject_verb_disagreement`: 主謂不一致
+- `wrong_preposition`: 介詞錯誤
+- `word_order`: 詞序錯誤
+- `spelling_error`: 拼寫錯誤
+- `article_error`: 冠詞錯誤
+- `plural_singular`: 單複數錯誤
+- `missing_word`: 缺少詞彙
+- `redundant_word`: 冗餘詞彙
+
+## 9. SDK 和範例
+
+### 9.1 JavaScript SDK 範例
+
+```javascript
+import { DramaLingClient } from '@dramaling/sdk';
+
+const client = new DramaLingClient({
+  apiKey: 'your-api-key',
+  baseURL: 'https://api.dramaling.com/v1'
+});
+
+// 分析句子
+async function analyzeSentence(text) {
+  try {
+    const result = await client.analyzeSentence({
+      inputText: text,
+      options: {
+        includeExamples: true,
+        includeAudio: true
+      }
+    });
+
+    return result.data;
+  } catch (error) {
+    console.error('Analysis failed:', error);
+    throw error;
+  }
+}
+
+// 使用範例
+const analysis = await analyzeSentence(
+  "He brought this thing up during our meeting and no one agreed."
+);
+
+console.log('句子意思:', analysis.sentenceMeaning.translation);
+console.log('單字分析:', analysis.wordAnalysis);
+```
+
+### 9.2 cURL 範例
+
+```bash
+# 分析句子
+curl -X POST https://api.dramaling.com/v1/ai/analyze-sentence \
+  -H "Authorization: Bearer YOUR_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{
+    "inputText": "He brought this thing up during our meeting and no one agreed.",
+    "options": {
+      "includeExamples": true,
+      "includeAudio": true
+    }
+  }'
+
+# 獲取使用統計
+curl -X GET https://api.dramaling.com/v1/users/usage-stats \
+  -H "Authorization: Bearer YOUR_TOKEN"
+```
+
+## 10. API 版本管理
+
+### 10.1 版本策略
+- **當前版本**: v1
+- **版本格式**: `/v{major}`
+- **向後相容**: 保持至少 6 個月
+- **棄用通知**: 提前 3 個月通知
+
+### 10.2 版本變更日誌
+
+#### v1.0.0 (2025-09-17)
+- 初始版本發布
+- 句子分析 API
+- 使用統計 API
+- 音頻服務 API
+- 基礎圖片服務 API
+
+#### v1.1.0 (計劃中)
+- 批量分析 API
+- 進階圖片生成選項
+- 詞彙學習追蹤 API
+- WebSocket 即時通知
+
+這份 API 規格書提供了完整的介面定義，包括請求/響應格式、錯誤處理、使用範例和 SDK 說明，為前端開發和第三方整合提供了詳細的參考文檔。
\ No newline at end of file
diff --git a/docs/02_design/design-links/FIGMA_LINKS.md b/docs/02_design/design-links/FIGMA_LINKS.md
deleted file mode 100644
index 104931f..0000000
--- a/docs/02_design/design-links/FIGMA_LINKS.md
+++ /dev/null
@@ -1,172 +0,0 @@
-# Figma 設計稿連結管理
-
-## 📋 概述
-
-本文件集中管理所有 Figma 設計稿連結，確保團隊成員能快速找到最新的設計資源。
-
-> **注意**: Drama Ling 主要使用 HTML/CSS 元件庫作為設計系統，Figma 用於高階概念設計和協作討論。
-
-## 🎨 設計檔案結構
-
-### 主設計系統
-| 檔案名稱 | 連結 | 最後更新 | 負責人 | 狀態 |
-|---------|------|----------|--------|------|
-| Drama Ling Design System | [Figma Link](#) | 2025-09-15 | 設計團隊 | 🟢 最新 |
-| Component Library | [Figma Link](#) | 2025-09-15 | 設計團隊 | 🟢 最新 |
-| Design Tokens | [Figma Link](#) | 2025-09-15 | 設計團隊 | 🟢 最新 |
-
-### Web 端設計
-| 頁面名稱 | 連結 | 狀態 | HTML原型 | 備註 |
-|---------|------|------|----------|------|
-| 登入/註冊 | [Figma](#) | ✅ 完成 | [HTML](../component-library/pages/login-page.html) | |
-| 儀表板 | [Figma](#) | ✅ 完成 | [HTML](../component-library/pages/dashboard.html) | |
-| 學習頁面 | [Figma](#) | ✅ 完成 | [HTML](../component-library/pages/learning-page.html) | |
-| 詞彙學習 | [Figma](#) | 🔄 進行中 | - | 預計9/20完成 |
-| 口說練習 | [Figma](#) | 📋 規劃中 | - | |
-| 情境對話 | [Figma](#) | 📋 規劃中 | - | |
-| 成就系統 | [Figma](#) | 📋 規劃中 | - | |
-| 商店頁面 | [Figma](#) | 📋 規劃中 | - | |
-
-### 移動端設計
-| 頁面名稱 | 連結 | 狀態 | 備註 |
-|---------|------|------|------|
-| iOS 設計稿 | [Figma](#) | 📋 規劃中 | |
-| Android 設計稿 | [Figma](#) | 📋 規劃中 | |
-| 響應式斷點 | [Figma](#) | ✅ 完成 | |
-
-### 原型和流程
-| 名稱 | 連結 | 類型 | 備註 |
-|------|------|------|------|
-| 用戶流程圖 | [Figma](#) | Flow | |
-| 互動原型 | [Figma](#) | Prototype | |
-| 線框圖 | [Figma](#) | Wireframe | |
-
-## 🔗 快速連結
-
-### 常用頁面
-- 🎯 [最新設計系統](#)
-- 📚 [元件庫](#)
-- 🎨 [色彩系統](#)
-- 📝 [字體規範](#)
-- 📐 [間距系統](#)
-
-### 開發者資源
-- 💻 [HTML/CSS 元件庫](../component-library/index.html)
-- 📖 [設計規範文檔](../design-system/README.md)
-- 🛠️ [開發者交接文件](#)
-
-## 📝 使用指南
-
-### 查看設計稿
-1. 點擊上方表格中的 Figma 連結
-2. 使用公司帳號登入 Figma
-3. 查看最新版本（檢查右上角版本標記）
-
-### 導出資源
-1. 在 Figma 中選擇需要的元素
-2. 右側面板選擇 "Export"
-3. 選擇格式：
-   - **圖標**: SVG
-   - **圖片**: PNG 2x
-   - **插圖**: SVG 或 PNG
-
-### 提供反饋
-1. 在 Figma 中使用評論功能
-2. 標記 @設計師名稱
-3. 描述具體問題或建議
-
-## 🔄 版本管理
-
-### 命名規範
-```
-[項目名稱]_[版本]_[日期]
-範例: DramaLing_Dashboard_v2.1_20250915
-```
-
-### 版本標記
-- 🟢 **最新**: 生產環境使用
-- 🟡 **審核中**: 等待確認
-- 🔴 **過時**: 僅供參考
-
-## 👥 團隊協作
-
-### 設計師職責
-- 維護 Figma 設計稿
-- 更新此文件連結
-- 導出設計資源
-- 與開發團隊溝通
-
-### 開發者職責
-- 實現 HTML/CSS 元件
-- 提供技術反饋
-- 更新實現狀態
-- 維護元件庫
-
-### 產品經理職責
-- 審核設計方案
-- 確認用戶流程
-- 管理設計優先級
-- 協調資源
-
-## 📊 設計系統映射
-
-| Figma 元件 | HTML/CSS 元件 | 狀態 | 備註 |
-|-----------|--------------|------|------|
-| Button | [btn-*](../component-library/index.html#buttons) | ✅ | |
-| Input Field | [input-field](../component-library/index.html#inputs) | ✅ | |
-| Card | [card-*](../component-library/index.html#cards) | ✅ | |
-| Modal | [modal-*](../component-library/components/01-interactive/modals.html) | ✅ | |
-| Navigation | [navbar, sidebar](../component-library/components/05-navigation/navigation.html) | ✅ | |
-| Form Elements | [forms](../component-library/components/02-input/forms.html) | ✅ | |
-| Data Display | [table, list](../component-library/components/03-display/data-display.html) | ✅ | |
-| Gamification | [achievements, levels](../component-library/components/06-gamification/game-elements.html) | ✅ | |
-
-## 🚀 工作流程
-
-### 設計到開發流程
-```mermaid
-graph LR
-    A[Figma 設計] --> B[設計審核]
-    B --> C[導出資源]
-    C --> D[HTML/CSS 實現]
-    D --> E[元件庫更新]
-    E --> F[開發使用]
-```
-
-### 設計更新流程
-1. **設計師** 更新 Figma 設計稿
-2. **設計師** 更新此文件連結和狀態
-3. **開發者** 查看變更並評估影響
-4. **開發者** 更新 HTML/CSS 元件
-5. **QA** 驗證實現符合設計
-
-## 📅 更新記錄
-
-### 2025-09-15
-- 建立 Figma 連結管理系統
-- 整合 HTML/CSS 元件庫映射
-- 添加團隊協作指南
-
-### 待更新項目
-- [ ] 補充實際 Figma 連結
-- [ ] 添加設計審核流程
-- [ ] 建立自動同步機制
-
-## 🔧 工具和插件
-
-### 推薦 Figma 插件
-- **Figma Tokens**: 管理設計代幣
-- **Able**: 無障礙性檢查
-- **Figma to HTML**: 代碼導出輔助
-- **Content Reel**: 填充真實數據
-
-### 開發工具
-- [設計系統同步工具](../design-system/automation/design-sync.sh)
-- [元件驗證工具](../design-system/automation/component-validator.js)
-- [HTML/CSS 元件庫](../component-library/index.html)
-
----
-
-**維護者**: Drama Ling 設計團隊
-**最後更新**: 2025-09-15
-**聯絡方式**: design@dramaling.com
\ No newline at end of file
diff --git a/docs/02_design/interactive-word-query-spec.md b/docs/02_design/interactive-word-query-spec.md
new file mode 100644
index 0000000..c617fd1
--- /dev/null
+++ b/docs/02_design/interactive-word-query-spec.md
@@ -0,0 +1,935 @@
+# 互動式單字查詢功能設計規格書
+
+## 1. 功能概述
+
+### 1.1 目標
+實現低成本、高效率的互動式單字查詢系統，讓用戶能夠點擊句子中的任何單字即時查看詳細意思，同時智能識別片語和俚語。
+
+### 1.2 核心優勢
+- **成本效益**：一次 API 調用，多次查詢零成本
+- **即時響應**：點擊查詢無延遲
+- **智能識別**：片語/俚語優先顯示和警告
+- **用戶友善**：視覺化高亮和直觀操作
+
+## 2. 系統架構設計
+
+### 2.1 整體流程
+
+```
+用戶輸入句子 → AI 預分析 → 高價值標記 → 分析結果快取 → 互動式顯示 → 點擊查詢
+      ↓              ↓            ↓            ↓            ↓           ↓
+   50字限制     一次API調用   識別學習價值   24小時快取    可點擊文字   智能計費
+                 (扣除1次)    重要詞彙       存儲詳情      不同顏色    高價值免費
+                                                                     低價值收費
+```
+
+### 2.2 API 架構
+
+#### 2.2.1 句子分析 API
+```
+POST /api/ai/analyze-sentence
+Content-Type: application/json
+
+Request:
+{
+  "inputText": "He brought this thing up during our meeting and no one agreed.",
+  "userId": "uuid", // 用於使用次數統計
+  "forceRefresh": false, // 是否強制重新分析
+  "analysisMode": "full" // full: 完整分析並標記高價值詞彙
+}
+
+Response:
+{
+  "success": true,
+  "data": {
+    "analysisId": "uuid",
+    "sentenceMeaning": {
+      "translation": "他在我們的會議中提出了這件事，但沒有人同意。",
+      "explanation": "這句話表達了在會議中有人提出某個議題或想法，但得不到其他與會者的認同。"
+    },
+    "grammarCorrection": {
+      "hasErrors": false, // 是否有語法錯誤
+      "originalText": "He brought this thing up during our meeting and no one agreed.",
+      "correctedText": null, // 如無錯誤則為null
+      "corrections": [] // 錯誤修正列表
+    },
+    "wordAnalysis": {
+      "brought": {
+        "word": "brought",
+        "translation": "帶來、提出",
+        "definition": "Past tense of bring; to take or carry something to a place",
+        "partOfSpeech": "verb",
+        "pronunciation": {
+          "ipa": "/brɔːt/",
+          "us": "/brɔːt/",
+          "uk": "/brɔːt/"
+        },
+        "synonyms": ["carried", "took", "delivered"],
+        "antonyms": ["removed", "took away"],
+        "isPhrase": true,
+        "isHighValue": true, // 高學習價值標記
+        "learningPriority": "high", // high, medium, low
+        "phraseInfo": {
+          "phrase": "bring up",
+          "meaning": "提出（話題）、養育",
+          "warning": "在這個句子中，\"brought up\" 是片語，意思是\"提出話題\"，而不是單純的\"帶來\"",
+          "colorCode": "#F59E0B" // 片語顏色代碼
+        },
+        "examples": {
+          "original": "He brought this thing up during our meeting",
+          "originalTranslation": "他在會議中提出了這件事",
+          "generated": "She brought up an interesting point",
+          "generatedTranslation": "她提出了一個有趣的觀點",
+          "imageUrl": "/images/examples/bring_up.png",
+          "audioUrl": "/audio/examples/bring_up.mp3"
+        },
+        "difficultyLevel": "B1"
+      }
+    },
+    "finalAnalysisText": "He brought this thing up during our meeting and no one agreed.", // 最終用於學習的文本（修正後）
+    "highValueWords": ["brought", "up", "meeting"], // 高價值詞彙列表
+    "phrasesDetected": [
+      {
+        "phrase": "bring up",
+        "words": ["brought", "up"],
+        "colorCode": "#F59E0B"
+      }
+    ],
+    "usageStatistics": {
+      "remainingAnalyses": 4,
+      "resetTime": "2025-09-17T12:48:00Z",
+      "costIncurred": 1 // 本次分析扣除次數
+    },
+    "cachedUntil": "2025-09-18T09:48:00Z"
+  },
+  "message": "Sentence analyzed successfully"
+}
+```
+
+#### 2.2.2 單字點擊查詢 API
+```
+POST /api/ai/query-word
+Content-Type: application/json
+
+Request:
+{
+  "word": "thing",
+  "sentence": "He brought this thing up during our meeting and no one agreed.",
+  "analysisId": "uuid", // 來自預分析結果
+  "userId": "uuid"
+}
+
+Response:
+{
+  "success": true,
+  "data": {
+    "word": "thing",
+    "isHighValue": false, // 非高價值詞彙
+    "wasPreAnalyzed": false, // 未在預分析中
+    "costIncurred": 1, // 扣除1次使用次數
+    "analysis": {
+      // 完整詞彙分析資料
+    }
+  }
+}
+```
+
+#### 2.2.3 快取管理 API
+```
+GET /api/ai/analysis-cache/{inputTextHash}
+DELETE /api/ai/analysis-cache/{analysisId}
+```
+
+### 2.3 資料庫設計
+
+#### 2.3.1 句子分析快取表
+```sql
+CREATE TABLE SentenceAnalysisCache (
+    Id UNIQUEIDENTIFIER PRIMARY KEY,
+    InputTextHash NVARCHAR(64) NOT NULL, -- SHA256 hash
+    InputText NVARCHAR(1000) NOT NULL,
+    CorrectedText NVARCHAR(1000), -- 修正後的文本
+    HasGrammarErrors BIT DEFAULT 0, -- 是否有語法錯誤
+    GrammarCorrections NVARCHAR(MAX), -- JSON 格式，語法修正詳情
+    AnalysisResult NVARCHAR(MAX) NOT NULL, -- JSON 格式
+    HighValueWords NVARCHAR(MAX) NOT NULL, -- JSON 格式，高價值詞彙列表
+    PhrasesDetected NVARCHAR(MAX), -- JSON 格式，檢測到的片語
+    CreatedAt DATETIME2 NOT NULL,
+    ExpiresAt DATETIME2 NOT NULL,
+    AccessCount INT DEFAULT 0,
+    LastAccessedAt DATETIME2
+);
+
+CREATE INDEX IX_SentenceAnalysisCache_Hash ON SentenceAnalysisCache(InputTextHash);
+CREATE INDEX IX_SentenceAnalysisCache_Expires ON SentenceAnalysisCache(ExpiresAt);
+```
+
+#### 2.3.2 使用統計表
+```sql
+CREATE TABLE WordQueryUsageStats (
+    Id UNIQUEIDENTIFIER PRIMARY KEY,
+    UserId UNIQUEIDENTIFIER NOT NULL,
+    Date DATE NOT NULL,
+    SentenceAnalysisCount INT DEFAULT 0, -- 句子分析次數
+    HighValueWordClicks INT DEFAULT 0, -- 高價值詞彙點擊（免費）
+    LowValueWordClicks INT DEFAULT 0, -- 低價值詞彙點擊（收費）
+    TotalApiCalls INT DEFAULT 0, -- 總 API 調用次數
+    UniqueWordsQueried INT DEFAULT 0,
+    CreatedAt DATETIME2 NOT NULL,
+    UpdatedAt DATETIME2 NOT NULL
+);
+
+CREATE UNIQUE INDEX IX_WordQueryUsageStats_UserDate ON WordQueryUsageStats(UserId, Date);
+```
+
+## 3. 前端組件設計
+
+### 3.1 主要組件架構
+
+```
+WordQueryPage
+├── SentenceInputForm       // 句子輸入表單
+├── AnalysisLoadingState    // 分析中狀態
+├── GrammarCorrectionPanel  // 語法修正面板
+│   ├── ErrorHighlight      // 錯誤標記顯示
+│   ├── CorrectionSuggestion // 修正建議
+│   └── UserChoiceButtons   // 用戶選擇按鈕
+├── InteractiveTextDisplay  // 互動式文字顯示
+│   ├── ClickableWord       // 可點擊單字
+│   └── WordInfoPopup       // 單字資訊彈窗
+├── UsageStatistics         // 使用統計顯示
+└── ActionButtons           // 操作按鈕組
+```
+
+### 3.2 組件詳細設計
+
+#### 3.2.1 GrammarCorrectionPanel 組件
+```typescript
+interface GrammarCorrection {
+  hasErrors: boolean;
+  originalText: string;
+  correctedText: string | null;
+  corrections: Array<{
+    position: { start: number; end: number };
+    errorType: string;
+    original: string;
+    corrected: string;
+    reason: string;
+    severity: 'high' | 'medium' | 'low';
+  }>;
+  confidenceScore: number;
+}
+
+interface GrammarCorrectionPanelProps {
+  correction: GrammarCorrection;
+  onAcceptCorrection: () => void;
+  onRejectCorrection: () => void;
+  onManualEdit: (text: string) => void;
+}
+
+const GrammarCorrectionPanel: React.FC<GrammarCorrectionPanelProps> = ({
+  correction,
+  onAcceptCorrection,
+  onRejectCorrection,
+  onManualEdit
+}) => {
+  // 錯誤高亮顯示
+  // 修正建議卡片
+  // 修正原因說明
+  // 用戶選擇按鈕
+};
+```
+
+#### 3.2.2 SentenceInputForm 組件
+```typescript
+interface SentenceInputFormProps {
+  maxLength: number; // 300 for manual input
+  onSubmit: (text: string) => void;
+  onModeChange: (mode: 'manual' | 'screenshot') => void;
+  disabled: boolean;
+  remainingAnalyses: number;
+}
+
+const SentenceInputForm: React.FC<SentenceInputFormProps> = ({
+  maxLength,
+  onSubmit,
+  onModeChange,
+  disabled,
+  remainingAnalyses
+}) => {
+  // 即時字數統計
+  // 300字限制阻擋
+  // 模式切換UI
+  // 示例句子填入
+  // 分析按鈕狀態
+};
+```
+
+#### 3.2.3 InteractiveTextDisplay 組件
+```typescript
+interface WordAnalysis {
+  word: string;
+  translation: string;
+  definition: string;
+  partOfSpeech: string;
+  pronunciation: {
+    ipa: string;
+    us: string;
+    uk: string;
+  };
+  synonyms: string[];
+  antonyms: string[];
+  isPhrase: boolean;
+  isHighValue: boolean; // 高學習價值標記
+  learningPriority: 'high' | 'medium' | 'low'; // 學習優先級
+  phraseInfo?: {
+    phrase: string;
+    meaning: string;
+    warning: string;
+    colorCode: string; // 片語顏色代碼
+  };
+  examples: {
+    original: string;
+    originalTranslation: string;
+    generated: string;
+    generatedTranslation: string;
+    imageUrl?: string;
+    audioUrl?: string;
+  };
+  difficultyLevel: string;
+}
+
+interface InteractiveTextDisplayProps {
+  text: string;
+  analysis: Record<string, WordAnalysis>;
+  onWordClick: (word: string, analysis: WordAnalysis) => void;
+}
+```
+
+#### 3.2.4 WordInfoPopup 組件
+```typescript
+interface WordInfoPopupProps {
+  word: string;
+  analysis: WordAnalysis;
+  position: { x: number; y: number };
+  onClose: () => void;
+  onPlayAudio: (audioUrl: string) => void;
+}
+
+const WordInfoPopup: React.FC<WordInfoPopupProps> = ({
+  word,
+  analysis,
+  position,
+  onClose,
+  onPlayAudio
+}) => {
+  // 片語警告顯示
+  // 發音播放按鈕
+  // 例句圖片顯示
+  // 同義詞/反義詞標籤
+  // 難度等級標示
+};
+```
+
+## 4. 用戶介面設計
+
+### 4.1 頁面佈局
+
+#### 4.1.1 輸入階段
+```
+┌─────────────────────────────────────────────────────────┐
+│                     DramaLing                          │
+├─────────────────────────────────────────────────────────┤
+│  AI 智能生成詞卡 - 互動式單字查詢                      │
+│                                                         │
+│  ┌─ 原始例句類型 ──────────────────────────────────┐   │
+│  │  [✍️ 手動輸入]     [📷 影劇截圖] (訂閱功能)    │   │
+│  └───────────────────────────────────────────────────┘   │
+│                                                         │
+│  ┌─ 輸入英文文本 ──────────────────────────────────┐   │
+│  │  ┌─────────────────────────────────────────────┐ │   │
+│  │  │ 輸入英文句子（最多50字）...               │ │   │
+│  │  │                                           │ │   │
+│  │  └─────────────────────────────────────────────┘ │   │
+│  │  最多 50 字元 • 目前：0 字元                    │   │
+│  │                                                 │   │
+│  │  💡 示例句子：                                  │   │
+│  │  [點擊使用示例：He brought this thing up...]    │   │
+│  └───────────────────────────────────────────────────┘   │
+│                                                         │
+│  ┌─────────────────────────────────────────────────┐   │
+│  │         🔍 分析句子（點擊查詢單字）           │   │
+│  └─────────────────────────────────────────────────┘   │
+│                                                         │
+│  免費用戶：已使用 0/5 次 (3小時內)                     │
+└─────────────────────────────────────────────────────────┘
+```
+
+#### 4.1.2 分析結果階段
+```
+┌─────────────────────────────────────────────────────────┐
+│  ← 返回                     句子分析結果                │
+├─────────────────────────────────────────────────────────┤
+│  ┌─ 原始句子 ──────────────────────────────────────┐   │
+│  │  He brought this thing up during our meeting.    │   │
+│  │                                                   │   │
+│  │  整句意思：                                       │   │
+│  │  他在我們的會議中提出了這件事，但沒有人同意...     │   │
+│  └───────────────────────────────────────────────────┘   │
+│                                                         │
+│  ┌─ 點擊查詢單字意思 ──────────────────────────────┐   │
+│  │  💡 使用說明：點擊下方句子中的任何單字，可以立即 │   │
+│  │  查看詳細意思。黃色背景表示該單字屬於片語或俚語。 │   │
+│  │                                                   │   │
+│  │  ╔═══════════════════════════════════════════╗   │   │
+│  │  ║ He [brought] this [thing] [up] during    ║   │   │
+│  │  ║ our [meeting] and no one [agreed].       ║   │   │
+│  │  ╚═══════════════════════════════════════════╝   │   │
+│  │  // brought 和 up 有黃色背景                     │   │
+│  │  // 其他單字有藍色下劃線                         │   │
+│  └───────────────────────────────────────────────────┘   │
+│                                                         │
+│  ┌─────────────────────────────────────────────────┐   │
+│  │  [🔄 分析新句子]     [📖 生成詞卡]            │   │
+│  └─────────────────────────────────────────────────┘   │
+└─────────────────────────────────────────────────────────┘
+```
+
+#### 4.1.3 單字彈窗設計
+```
+                  ┌─ brought ─────────────────── × ┐
+                  │                               │
+                  │ ⚠️ 注意：這個單字屬於片語      │
+                  │ 片語：bring up                │
+                  │ 意思：提出（話題）、養育       │
+                  │                               │
+                  │ verb | /brɔːt/ | 🔊           │
+                  │                               │
+                  │ 翻譯：帶來、提出               │
+                  │                               │
+                  │ 定義：Past tense of bring;    │
+                  │ to take or carry something    │
+                  │                               │
+                  │ 同義詞：[carried] [took]      │
+                  │ 反義詞：[removed]             │
+                  │                               │
+                  │ 例句：                        │
+                  │ • 原始：He brought this...    │
+                  │   翻譯：他提出了這件事...     │
+                  │ • 生成：She brought up...     │
+                  │   翻譯：她提出了一個...       │
+                  │   [📷 查看例句圖] [🔊 播放]   │
+                  │                               │
+                  │ 難度：B1                      │
+                  └───────────────────────────────┘
+```
+
+### 4.2 視覺設計規範
+
+#### 4.2.1 顏色系統
+```css
+/* 主色彩 */
+--primary-blue: #3B82F6;
+--primary-blue-hover: #2563EB;
+--primary-blue-light: #DBEAFE;
+
+/* 單字價值顏色系統 */
+--word-high-phrase: #F59E0B;       /* 高價值片語 */
+--word-high-single: #10B981;       /* 高價值單字 */
+--word-normal: #3B82F6;            /* 普通單字 */
+--word-hover: #1E40AF;             /* 懸停狀態 */
+
+/* 背景顏色 */
+--word-high-phrase-bg: #FEF3C7;    /* 高價值片語背景 */
+--word-high-single-bg: #ECFDF5;    /* 高價值單字背景 */
+--word-normal-bg: transparent;     /* 普通單字背景 */
+--word-hover-bg: #DBEAFE;          /* 懸停背景 */
+
+/* 邊框顏色 */
+--border-high-phrase: #F59E0B;     /* 高價值片語邊框 */
+--border-high-single: #10B981;     /* 高價值單字邊框 */
+--border-normal: #3B82F6;          /* 普通單字邊框 */
+
+/* 狀態顏色 */
+--success: #10B981;
+--warning: #F59E0B;
+--error: #EF4444;
+--info: #3B82F6;
+--premium: #8B5CF6;                /* 付費功能 */
+```
+
+#### 4.2.2 互動效果
+```css
+/* 可點擊單字基礎樣式 */
+.clickable-word {
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 2px 4px;
+  border-radius: 4px;
+  margin: 0 1px;
+  position: relative;
+}
+
+/* 高價值片語樣式 */
+.clickable-word.high-value.phrase {
+  background-color: var(--word-high-phrase-bg);
+  border: 2px solid var(--border-high-phrase);
+}
+
+.clickable-word.high-value.phrase::after {
+  content: "⭐";
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  font-size: 12px;
+}
+
+/* 高價值單字樣式 */
+.clickable-word.high-value.single {
+  background-color: var(--word-high-single-bg);
+  border: 2px solid var(--border-high-single);
+}
+
+.clickable-word.high-value.single::after {
+  content: "⭐";
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  font-size: 12px;
+}
+
+/* 普通單字樣式 */
+.clickable-word.normal {
+  border-bottom: 1px solid var(--border-normal);
+}
+
+/* 懸停效果 */
+.clickable-word:hover {
+  background-color: var(--word-hover-bg);
+  transform: translateY(-1px);
+}
+```
+
+#### 4.2.3 彈窗動畫
+```css
+/* 彈窗進入動畫 */
+@keyframes popup-enter {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -100%) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -100%) scale(1);
+  }
+}
+
+.word-popup {
+  animation: popup-enter 0.2s ease-out;
+}
+```
+
+## 5. 技術實現細節
+
+### 5.1 前端狀態管理
+
+#### 5.1.1 Zustand Store 設計
+```typescript
+interface WordQueryStore {
+  // 分析狀態
+  isAnalyzing: boolean;
+  analysisResult: SentenceAnalysis | null;
+  analysisError: string | null;
+
+  // 互動狀態
+  selectedWord: string | null;
+  popupPosition: { x: number; y: number } | null;
+
+  // 使用統計
+  usageStats: {
+    remainingAnalyses: number;
+    resetTime: string;
+  };
+
+  // 快取
+  analysisCache: Map<string, SentenceAnalysis>;
+
+  // Actions
+  analyzeSentence: (text: string) => Promise<void>;
+  selectWord: (word: string, position: { x: number; y: number }) => void;
+  closeWordPopup: () => void;
+  clearCache: () => void;
+}
+```
+
+#### 5.1.2 快取策略
+```typescript
+// 本地快取實現
+class AnalysisCache {
+  private cache = new Map<string, CacheItem>();
+
+  get(textHash: string): SentenceAnalysis | null {
+    const item = this.cache.get(textHash);
+    if (!item || this.isExpired(item)) {
+      this.cache.delete(textHash);
+      return null;
+    }
+    return item.data;
+  }
+
+  set(textHash: string, data: SentenceAnalysis, ttl: number): void {
+    this.cache.set(textHash, {
+      data,
+      expiresAt: Date.now() + ttl
+    });
+  }
+
+  private isExpired(item: CacheItem): boolean {
+    return Date.now() > item.expiresAt;
+  }
+}
+```
+
+### 5.2 後端實現細節
+
+#### 5.2.1 句子分析服務
+```csharp
+public class SentenceAnalysisService : ISentenceAnalysisService
+{
+    private readonly IGeminiService _geminiService;
+    private readonly IAnalysisCacheService _cacheService;
+    private readonly IUsageTrackingService _usageService;
+
+    public async Task<SentenceAnalysisResult> AnalyzeSentenceAsync(
+        string inputText,
+        Guid userId,
+        bool forceRefresh = false)
+    {
+        // 1. 檢查使用限制
+        await _usageService.CheckUsageLimitAsync(userId);
+
+        // 2. 檢查快取
+        var textHash = GenerateTextHash(inputText);
+        if (!forceRefresh)
+        {
+            var cached = await _cacheService.GetAsync(textHash);
+            if (cached != null)
+            {
+                await _usageService.RecordCacheHitAsync(userId);
+                return cached;
+            }
+        }
+
+        // 3. AI 分析
+        var analysis = await _geminiService.AnalyzeSentenceAsync(inputText);
+
+        // 4. 存入快取
+        await _cacheService.SetAsync(textHash, analysis, TimeSpan.FromHours(24));
+
+        // 5. 記錄使用
+        await _usageService.RecordAnalysisAsync(userId);
+
+        return analysis;
+    }
+}
+```
+
+#### 5.2.2 Gemini Prompt 設計
+```csharp
+private const string SENTENCE_ANALYSIS_PROMPT = @"
+請分析以下英文句子，先檢查語法錯誤並修正，然後提供完整的單字和片語解析：
+
+句子：{inputText}
+
+請按照以下 JSON 格式回應：
+
+{
+  ""grammarCorrection"": {
+    ""hasErrors"": true/false,
+    ""originalText"": ""原始輸入句子"",
+    ""correctedText"": ""修正後句子"" // 如無錯誤則與原始相同,
+    ""corrections"": [
+      {
+        ""position"": {""start"": 2, ""end"": 4},
+        ""errorType"": ""tense_mismatch"",
+        ""original"": ""錯誤詞彙"",
+        ""corrected"": ""修正詞彙"",
+        ""reason"": ""修正原因說明"",
+        ""severity"": ""high/medium/low""
+      }
+    ],
+    ""confidenceScore"": 0.95
+  },
+  ""sentenceMeaning"": {
+    ""translation"": ""整句的繁體中文意思"",
+    ""explanation"": ""詳細解釋""
+  },
+  ""finalAnalysisText"": ""用於後續分析的最終文本（修正後）"",
+  ""wordAnalysis"": {
+    ""單字原形"": {
+      ""word"": ""單字原形"",
+      ""translation"": ""繁體中文翻譯"",
+      ""definition"": ""英文定義(A1-A2程度)"",
+      ""partOfSpeech"": ""詞性(n./v./adj./adv./phrase/slang)"",
+      ""pronunciation"": {
+        ""ipa"": ""IPA音標"",
+        ""us"": ""美式音標"",
+        ""uk"": ""英式音標""
+      },
+      ""synonyms"": [""同義詞1"", ""同義詞2"", ""同義詞3""],
+      ""antonyms"": [""反義詞1"", ""反義詞2""],
+      ""isPhrase"": true/false,
+      ""phraseInfo"": {
+        ""phrase"": ""完整片語"",
+        ""meaning"": ""片語意思"",
+        ""warning"": ""警告說明""
+      },
+      ""examples"": {
+        ""original"": ""來自原句的例句"",
+        ""originalTranslation"": ""原句例句翻譯"",
+        ""generated"": ""AI生成的新例句"",
+        ""generatedTranslation"": ""新例句翻譯""
+      },
+      ""difficultyLevel"": ""CEFR等級(A1/A2/B1/B2/C1/C2)""
+    }
+  }
+}
+
+分析要求：
+1. **首要任務：語法檢查和修正**
+   - 檢測語法、拼寫、時態、介詞、詞序錯誤
+   - 提供修正建議和詳細說明
+   - 後續分析基於修正後的句子進行
+   - 保持原句意思不變
+
+2. 識別所有有意義的單字（忽略 a, an, the 等功能詞）
+
+3. **重點：標記高學習價值詞彙**
+   - 片語和俚語：isHighValue: true, learningPriority: "high"
+   - 中級以上單字（B1+）：isHighValue: true, learningPriority: "high"
+   - 專業術語：isHighValue: true, learningPriority: "medium"
+   - 基礎功能詞：isHighValue: false, learningPriority: "low"
+
+4. 特別注意片語和俚語，設定 isPhrase: true
+5. 為片語提供警告說明和顏色代碼
+6. 英文定義保持在 A1-A2 程度
+7. 提供實用的同義詞和反義詞（如適用）
+8. 例句要清楚展示單字用法
+9. 準確標記 CEFR 難度等級
+10. **優先處理高價值詞彙**：為高價值詞彙生成完整內容詳情
+";
+```
+
+## 6. 性能優化策略
+
+### 6.1 前端優化
+
+#### 6.1.1 組件懶加載
+```typescript
+// 懶加載重型組件
+const WordInfoPopup = lazy(() => import('./WordInfoPopup'));
+const ExampleImageViewer = lazy(() => import('./ExampleImageViewer'));
+
+// 使用 Suspense 包裝
+<Suspense fallback={<LoadingSpinner />}>
+  <WordInfoPopup {...props} />
+</Suspense>
+```
+
+#### 6.1.2 虛擬化長文本
+```typescript
+// 對於長句子使用虛擬化渲染
+const VirtualizedText = ({ words, analysis, onWordClick }) => {
+  const [visibleRange, setVisibleRange] = useState({ start: 0, end: 50 });
+
+  return (
+    <div className="virtual-text-container">
+      {words.slice(visibleRange.start, visibleRange.end).map((word, index) => (
+        <ClickableWord
+          key={index}
+          word={word}
+          analysis={analysis[word]}
+          onClick={onWordClick}
+        />
+      ))}
+    </div>
+  );
+};
+```
+
+### 6.2 後端優化
+
+#### 6.2.1 快取層次設計
+```
+L1: 記憶體快取 (Redis) - 1小時 TTL
+L2: 資料庫快取 (SQLite) - 24小時 TTL
+L3: 磁碟快取 (File System) - 7天 TTL
+```
+
+#### 6.2.2 批量分析優化
+```csharp
+// 批量處理多個句子
+public async Task<List<SentenceAnalysisResult>> AnalyzeMultipleSentencesAsync(
+    List<string> sentences,
+    Guid userId)
+{
+    // 1. 批量檢查快取
+    var cacheResults = await _cacheService.GetMultipleAsync(
+        sentences.Select(GenerateTextHash)
+    );
+
+    // 2. 只分析未快取的句子
+    var uncachedSentences = sentences
+        .Where((s, i) => cacheResults[i] == null)
+        .ToList();
+
+    // 3. 批量調用 AI API
+    var newAnalyses = await _geminiService.AnalyzeMultipleSentencesAsync(
+        uncachedSentences
+    );
+
+    // 4. 合併結果
+    return MergeResults(cacheResults, newAnalyses);
+}
+```
+
+## 7. 測試策略
+
+### 7.1 單元測試
+
+#### 7.1.1 前端組件測試
+```typescript
+describe('ClickableText Component', () => {
+  it('should highlight phrase words correctly', () => {
+    const analysis = {
+      'brought': { isPhrase: true, /* ... */ },
+      'up': { isPhrase: true, /* ... */ }
+    };
+
+    render(<ClickableText text="He brought this up" analysis={analysis} />);
+
+    expect(screen.getByText('brought')).toHaveClass('phrase');
+    expect(screen.getByText('up')).toHaveClass('phrase');
+  });
+
+  it('should show word popup on click', async () => {
+    const mockOnClick = jest.fn();
+    render(<ClickableText onWordClick={mockOnClick} />);
+
+    fireEvent.click(screen.getByText('brought'));
+
+    expect(mockOnClick).toHaveBeenCalledWith('brought', expect.any(Object));
+  });
+});
+```
+
+#### 7.1.2 後端服務測試
+```csharp
+[Test]
+public async Task AnalyzeSentence_ShouldReturnCachedResult_WhenCacheExists()
+{
+    // Arrange
+    var inputText = "Test sentence";
+    var userId = Guid.NewGuid();
+    var cachedResult = new SentenceAnalysisResult();
+
+    _cacheService.Setup(c => c.GetAsync(It.IsAny<string>()))
+               .ReturnsAsync(cachedResult);
+
+    // Act
+    var result = await _analysisService.AnalyzeSentenceAsync(inputText, userId);
+
+    // Assert
+    Assert.AreEqual(cachedResult, result);
+    _geminiService.Verify(g => g.AnalyzeSentenceAsync(It.IsAny<string>()),
+                         Times.Never);
+}
+```
+
+### 7.2 整合測試
+
+#### 7.2.1 E2E 測試流程
+```typescript
+describe('Word Query Flow', () => {
+  it('should complete full analysis and query flow', async () => {
+    // 1. 輸入句子
+    await page.fill('[data-testid=sentence-input]', 'He brought this up');
+    await page.click('[data-testid=analyze-button]');
+
+    // 2. 等待分析完成
+    await page.waitForSelector('[data-testid=interactive-text]');
+
+    // 3. 點擊單字
+    await page.click('[data-testid=word-brought]');
+
+    // 4. 驗證彈窗顯示
+    await expect(page.locator('[data-testid=word-popup]')).toBeVisible();
+    await expect(page.locator('[data-testid=phrase-warning]')).toBeVisible();
+
+    // 5. 播放發音
+    await page.click('[data-testid=play-pronunciation]');
+
+    // 6. 關閉彈窗
+    await page.click('[data-testid=close-popup]');
+    await expect(page.locator('[data-testid=word-popup]')).toBeHidden();
+  });
+});
+```
+
+## 8. 部署和監控
+
+### 8.1 部署策略
+
+#### 8.1.1 前端部署
+- **平台**：Vercel
+- **環境變量**：API_BASE_URL, CACHE_TTL
+- **CDN**：自動優化靜態資源
+- **快取策略**：分析結果本地存儲 24 小時
+
+#### 8.1.2 後端部署
+- **平台**：Azure App Service / AWS Lambda
+- **資料庫**：Azure SQL Database / AWS RDS
+- **快取**：Azure Redis Cache / AWS ElastiCache
+- **檔案存儲**：Azure Blob Storage / AWS S3
+
+### 8.2 監控指標
+
+#### 8.2.1 業務指標
+- 句子分析成功率
+- 平均分析響應時間
+- 快取命中率
+- 用戶使用次數分佈
+- 單字點擊熱度排行
+
+#### 8.2.2 技術指標
+- API 響應時間 (P95 < 200ms)
+- Gemini API 調用延遲
+- 快取效能指標
+- 錯誤率 (< 1%)
+- 系統可用性 (> 99.9%)
+
+#### 8.2.3 成本監控
+- Gemini API 調用次數和費用
+- 快取存儲成本
+- CDN 流量費用
+- 基礎設施總成本
+
+## 9. 未來擴展計劃
+
+### 9.1 功能增強
+- **多語言支持**：支援其他語言的句子分析
+- **語音輸入**：整合語音識別進行句子輸入
+- **個人化推薦**：基於用戶查詢歷史推薦相關詞彙
+- **社交分享**：分享有趣的句子分析結果
+
+### 9.2 技術升級
+- **AI 模型本地化**：部署本地 LLM 降低外部依賴
+- **即時協作**：多用戶同時查詢同一句子
+- **離線支持**：PWA 實現離線查詢基礎詞彙
+- **效能優化**：WebAssembly 加速文本處理
+
+### 9.3 商業化功能
+- **高級分析**：更深度的語法和語義分析
+- **專業詞典**：整合專業領域詞典
+- **學習追蹤**：詳細的學習進度和成效分析
+- **導師模式**：AI 導師指導詞彙學習
\ No newline at end of file
diff --git a/docs/02_design/ui-wireframes.md b/docs/02_design/ui-wireframes.md
new file mode 100644
index 0000000..7d96af9
--- /dev/null
+++ b/docs/02_design/ui-wireframes.md
@@ -0,0 +1,600 @@
+# 互動式單字查詢 UI 線框圖設計
+
+## 1. 頁面流程概覽
+
+```
+首頁 → 登入/註冊 → Dashboard → 詞卡生成頁 → 句子分析模式 → 互動式查詢 → 詞卡生成
+  ↓         ↓          ↓           ↓            ↓             ↓           ↓
+引導頁    認證流程    快速訪問    輸入界面    分析處理      點擊查詢     學習材料
+```
+
+## 2. 主要頁面線框圖
+
+### 2.1 詞卡生成頁 - 輸入模式
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│ [≡] DramaLing                                    [🔔] [👤] jett@email │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                         │
+│                    AI 智能生成詞卡 - 互動式單字查詢                     │
+│                                                                         │
+│  ┌─ 原始例句類型 ──────────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │   ┌─────────────────────┐  ┌─────────────────────────────────┐  │   │
+│  │   │    [✍️ 手動輸入]     │  │  [📷 影劇截圖] (訂閱功能)      │  │   │
+│  │   │                     │  │                                 │  │   │
+│  │   │ ● 選中狀態          │  │ ○ 未選中                       │  │   │
+│  │   │ 貼上或輸入英文文本   │  │ 上傳影劇截圖 (Phase 2)         │  │   │
+│  │   └─────────────────────┘  └─────────────────────────────────┘  │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  ┌─ 輸入英文文本 ──────────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │  輸入英文句子（最多300字）...                                  │   │
+│  │  ┌─────────────────────────────────────────────────────────────┐ │   │
+│  │  │                                                             │ │   │
+│  │  │                                                             │ │   │
+│  │  │                                                             │ │   │
+│  │  │                                                             │ │   │
+│  │  └─────────────────────────────────────────────────────────────┘ │   │
+│  │  最多 300 字元 • 目前：0 字元                  [還可輸入 300 字] │   │
+│  │                                                                 │   │
+│  │  💡 示例句子：                                                  │   │
+│  │  ┌─────────────────────────────────────────────────────────────┐ │   │
+│  │  │ [點擊使用] He brought this thing up during our meeting...  │ │   │
+│  │  └─────────────────────────────────────────────────────────────┘ │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │                  🔍 分析句子（點擊查詢單字）                    │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │  🆓 免費用戶：已使用 0/5 次 (3小時內)                           │   │
+│  │  ⏰ 下次重置時間：2025-09-17 15:48                              │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 2.2 分析中狀態
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│ [≡] DramaLing                                    [🔔] [👤] jett@email │
+├─────────────────────────────────────────────────────────────────────────┤
+│  [←] 返回輸入                       句子分析中                          │
+│                                                                         │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │                        🔄 正在分析句子...                       │   │
+│  │                                                                 │   │
+│  │              He brought this thing up during our meeting        │   │
+│  │              and no one agreed.                                 │   │
+│  │                                                                 │   │
+│  │                   ⚡ AI 正在解析單字和片語                      │   │
+│  │                                                                 │   │
+│  │               ████████████████████░░░░░░ 80%                   │   │
+│  │                                                                 │   │
+│  │                      預計完成時間：5 秒                         │   │
+│  │                                                                 │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  💡 小提示：分析完成後，您可以點擊任何單字查看詳細意思！                │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 2.3 分析結果 - 互動式查詢模式
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│ [≡] DramaLing                                    [🔔] [👤] jett@email │
+├─────────────────────────────────────────────────────────────────────────┤
+│  [←] 返回輸入                       句子分析結果                        │
+│                                                                         │
+│  ┌─ 原始句子分析 ──────────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │  📝 用戶輸入：                                                  │   │
+│  │  He brought this thing up during our meeting and no one agreed.│   │
+│  │                                                                 │   │
+│  │  ✅ 語法檢查：無錯誤                                           │   │
+│  │                                                                 │   │
+│  │  📖 整句意思：                                                  │   │
+│  │  他在我們的會議中提出了這件事，但沒有人同意。這句話表達了在會     │   │
+│  │  議中有人提出某個議題或想法，但得不到其他與會者的認同。           │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  ┌─ 點擊查詢單字意思 ──────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │  💡 使用說明：點擊下方句子中的任何單字，可以立即查看詳細意思。   │   │
+│  │  🟡 黃色邊框 = 高價值片語  🟢 綠色邊框 = 高價值單字  🔵 藍色 = 其他 │   │
+│  │  ⭐ 高價值詞彙點擊免費 | 💰 其他詞彙點擊收費                    │   │
+│  │                                                                 │   │
+│  │  ╔═══════════════════════════════════════════════════════════╗   │   │
+│  │  ║ He [brought]⭐ this [thing] [up]⭐ during our [meeting]⭐ ║   │   │
+│  │  ║ and no [one] [agreed].                                   ║   │   │
+│  │  ╚═══════════════════════════════════════════════════════════╝   │   │
+│  │                                                                 │   │
+│  │  範例：                                                         │   │
+│  │  • brought/up 🟡 黃色邊框 + ⭐（高價值片語，免費點擊）          │   │
+│  │  • meeting 🟢 綠色邊框 + ⭐（高價值單字，免費點擊）             │   │
+│  │  • thing/one 🔵 藍色邊框（低價值單字，點擊扣1次）              │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  ┌─ 操作選項 ──────────────────────────────────────────────────────┐   │
+│  │  [🔄 分析新句子]              [📖 生成學習詞卡]                 │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  📊 使用統計：今日已分析 1 個句子，剩餘 4 次免費額度                    │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 2.4 單字資訊彈窗 - 低價值單字 (收費)
+
+```
+                          ┌─ thing ─────────────────────── × ┐
+                          │                                 │
+                          │ 💰 低價值詞彙（扣除 1 次使用額度）│
+                          │ ┌─────────────────────────────┐   │
+                          │ │ ⚠️ 此查詢將消耗 1 次額度      │   │
+                          │ │ 剩餘額度：3/5 次             │   │
+                          │ │ [✅ 確認查詢] [❌ 取消]       │   │
+                          │ └─────────────────────────────┘   │
+                          │                                 │
+                          │ 📘 noun | /θɪŋ/ | [🔊 US] [🔊 UK] │
+                          │                                 │
+                          │ 🇹🇼 翻譯：事情、東西              │
+                          │                                 │
+                          │ 📖 定義：An object, fact, or     │
+                          │ situation                       │
+                          │                                 │
+                          │ 🔗 同義詞：                      │
+                          │ [object] [matter] [item]        │
+                          │                                 │
+                          │ 📝 例句：                        │
+                          │ • 原始：He brought this thing up │
+                          │   翻譯：他提出了這件事           │
+                          │                                 │
+                          │ • 生成：That's an important     │
+                          │   thing to remember             │
+                          │   翻譯：那是需要記住的重要事情   │
+                          │   [📷 查看例句圖] [🔊 播放]      │
+                          │                                 │
+                          │ 🎯 難度：A1 (基礎)               │
+                          │                                 │
+                          │ [📚 加入學習清單] [📖 生成詞卡]   │
+                          └─────────────────────────────────┘
+```
+
+### 2.5 單字資訊彈窗 - 高價值片語 (免費)
+
+```
+                      ┌─ brought ───────────────────────── × ┐
+                      │                                     │
+                      │ ⭐ 高價值片語（免費查詢）             │
+                      │ ┌─────────────────────────────────┐ │
+                      │ │ 🟡 片語：bring up                │ │
+                      │ │ 🇹🇼 意思：提出（話題）、養育      │ │
+                      │ │ ⚡ 提醒：在這個句子中，"brought   │ │
+                      │ │ up" 是一個片語，意思是"提出話題" │ │
+                      │ │ ，而不是單純的"帶來"             │ │
+                      │ │ 🎯 學習價值：⭐⭐⭐⭐⭐ (極高)     │ │
+                      │ └─────────────────────────────────┘ │
+                      │                                     │
+                      │ 📘 verb | /brɔːt/ | [🔊 US] [🔊 UK]   │
+                      │                                     │
+                      │ 🇹🇼 單字翻譯：帶來、提出             │
+                      │                                     │
+                      │ 📖 單字定義：Past tense of bring;   │
+                      │ to take or carry something to a     │
+                      │ place                               │
+                      │                                     │
+                      │ 🔗 同義詞：[carried] [took] [delivered] │
+                      │ 🔄 反義詞：[removed] [took away]     │
+                      │                                     │
+                      │ 📝 例句：                            │
+                      │ • 原始：He brought this thing up    │
+                      │   翻譯：他提出了這件事               │
+                      │                                     │
+                      │ • 生成：She brought up an important │
+                      │   point about the budget            │
+                      │   翻譯：她提出了關於預算的重要觀點   │
+                      │   [📷 查看例句圖] [🔊 播放]          │
+                      │                                     │
+                      │ 🎯 難度：B1 (中級)                   │
+                      │                                     │
+                      │ [📚 加入學習清單] [📖 生成詞卡]       │
+                      └─────────────────────────────────────┘
+```
+
+### 2.6 例句圖片檢視器
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                                                               [× 關閉] │
+│                                                                         │
+│                          📷 例句情境圖                                  │
+│                     "bring up" - 提出話題                              │
+│                                                                         │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │                        [圖片載入中...]                          │   │
+│  │                                                                 │   │
+│  │                     會議室場景插圖                              │   │
+│  │                 一個人在會議中舉手發言                          │   │
+│  │                                                                 │   │
+│  │              💬 "Let me bring up another point..."              │   │
+│  │                                                                 │   │
+│  │                                                                 │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│                     📝 情境說明：會議中提出新話題                       │
+│                                                                         │
+│  ┌─────────────────────────────────────────────────────────────────┐   │
+│  │ [🔊 播放例句]  [📱 分享圖片]  [💾 儲存到相簿]  [❤️ 收藏]        │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 2.7 語法錯誤修正顯示
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│  [←] 返回輸入                       句子分析結果                        │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                         │
+│  ┌─ 原始句子分析 ──────────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │  📝 用戶輸入：                                                  │   │
+│  │  I go to school yesterday and meet my friends.                 │   │
+│  │                                                                 │   │
+│  │  ❌ 語法檢查：發現 2 個錯誤                                     │   │
+│  │  ┌─ 建議修正 ───────────────────────────────────────────────┐ │   │
+│  │  │                                                         │ │   │
+│  │  │  🔧 修正後：                                            │ │   │
+│  │  │  I went to school yesterday and met my friends.        │ │   │
+│  │  │                                                         │ │   │
+│  │  │  📋 修正說明：                                          │ │   │
+│  │  │  1. "go" → "went" (過去式時態修正)                      │ │   │
+│  │  │  2. "meet" → "met" (過去式時態修正)                     │ │   │
+│  │  │                                                         │ │   │
+│  │  │  [✅ 使用修正版本]              [❌ 保持原始版本]        │ │   │
+│  │  └─────────────────────────────────────────────────────────┘ │   │
+│  │                                                                 │   │
+│  │  📖 整句意思：                                                  │   │
+│  │  我昨天去學校遇見了我的朋友們。這句話描述了過去發生的事情...     │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  ┌─ 點擊查詢單字意思 ──────────────────────────────────────────────┐   │
+│  │  💡 以下基於修正後的句子進行分析                                │   │
+│  │  🟡 黃色邊框 + ⭐ = 高價值片語  🟢 綠色邊框 + ⭐ = 高價值單字    │   │
+│  │                                                                 │   │
+│  │  ╔═══════════════════════════════════════════════════════════╗   │   │
+│  │  ║ I [went]⭐ to school [yesterday] and [met]⭐ my friends.  ║   │   │
+│  │  ╚═══════════════════════════════════════════════════════════╝   │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+### 2.8 使用限制提醒
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                             ⚠️ 使用限制提醒                              │
+├─────────────────────────────────────────────────────────────────────────┤
+│                                                                         │
+│                          🆓 免費用戶限制                                │
+│                                                                         │
+│              您今日的句子分析額度已用完 (5/5 次)                        │
+│                                                                         │
+│                     ⏰ 下次重置時間：3小時後                            │
+│                       (2025-09-17 18:48)                               │
+│                                                                         │
+│  ┌─ 升級建議 ──────────────────────────────────────────────────────┐   │
+│  │                                                                 │   │
+│  │  🌟 升級到付費方案，享受無限制分析：                             │   │
+│  │                                                                 │   │
+│  │  ✅ 無限次句子分析                                              │   │
+│  │  ✅ 每日50張例句圖生成                                          │   │
+│  │  ✅ 進階AI分析功能                                              │   │
+│  │  ✅ 優先客服支援                                                │   │
+│  │                                                                 │   │
+│  │              [🚀 立即升級 NT$99/月]                             │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+│  ┌─ 其他選項 ──────────────────────────────────────────────────────┐   │
+│  │  [⏰ 設定提醒]  [📚 瀏覽現有詞卡]  [🏠 返回首頁]               │   │
+│  └─────────────────────────────────────────────────────────────────┘   │
+│                                                                         │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+## 3. 行動裝置適配版本
+
+### 3.1 手機版 - 輸入介面 (375px)
+
+```
+┌─────────────────────────────────┐
+│ ≡ DramaLing              🔔 👤 │
+├─────────────────────────────────┤
+│                                 │
+│      AI 智能詞卡生成            │
+│                                 │
+│ ┌─ 輸入類型 ─────────────────┐ │
+│ │ [✍️ 手動]     [📷 截圖]    │ │
+│ │   ●            ○          │ │
+│ └───────────────────────────────┘ │
+│                                 │
+│ ┌─ 英文句子 ─────────────────┐ │
+│ │ 輸入英文句子（最多300字）  │ │
+│ │ ┌─────────────────────────┐ │ │
+│ │ │                         │ │ │
+│ │ │                         │ │ │
+│ │ │                         │ │ │
+│ │ └─────────────────────────┘ │ │
+│ │ 0/50 字                    │ │
+│ │                            │ │
+│ │ 💡 示例：                  │ │
+│ │ [He brought this up...]    │ │
+│ └───────────────────────────────┘ │
+│                                 │
+│ ┌─────────────────────────────┐ │
+│ │   🔍 分析句子（點擊查詢）   │ │
+│ └─────────────────────────────┘ │
+│                                 │
+│ 🆓 免費：0/5 次                  │
+│ ⏰ 重置：3小時後                 │
+│                                 │
+└─────────────────────────────────┘
+```
+
+### 3.2 手機版 - 分析結果
+
+```
+┌─────────────────────────────────┐
+│ ← 返回           句子分析結果   │
+├─────────────────────────────────┤
+│                                 │
+│ ┌─ 原始句子 ─────────────────┐ │
+│ │ He brought this thing up    │ │
+│ │ during our meeting and no   │ │
+│ │ one agreed.                 │ │
+│ │                             │ │
+│ │ 📝 整句意思：               │ │
+│ │ 他在會議中提出了這件事...   │ │
+│ └───────────────────────────────┘ │
+│                                 │
+│ ┌─ 點擊查詢 ─────────────────┐ │
+│ │ 💡 點擊單字查看詳細意思     │ │
+│ │ 🟡 黃色=片語 🔵 藍色=單字   │ │
+│ │                             │ │
+│ │ ╔═════════════════════════╗ │ │
+│ │ ║ He [brought] this       ║ │ │
+│ │ ║ [thing] [up] during our ║ │ │
+│ │ ║ [meeting] and no [one]  ║ │ │
+│ │ ║ [agreed].               ║ │ │
+│ │ ╚═════════════════════════╝ │ │
+│ └───────────────────────────────┘ │
+│                                 │
+│ ┌─ 操作 ─────────────────────┐ │
+│ │ [🔄 新句子] [📖 生成詞卡]   │ │
+│ └───────────────────────────────┘ │
+│                                 │
+│ 📊 今日：1/5 次                  │
+└─────────────────────────────────┘
+```
+
+### 3.3 手機版 - 單字彈窗
+
+```
+┌─────────────────────────────────┐
+│                             × │
+│           brought               │
+├─────────────────────────────────┤
+│ ⚠️ 這個單字屬於片語！            │
+│                                 │
+│ 🔶 片語：bring up               │
+│ 🇹🇼 意思：提出（話題）、養育    │
+│ ⚡ 提醒：這裡是"提出話題"的意思  │
+│                                 │
+├─────────────────────────────────┤
+│ 📘 verb | /brɔːt/              │
+│ [🔊 US] [🔊 UK]                │
+│                                 │
+│ 🇹🇼 翻譯：帶來、提出            │
+│                                 │
+│ 📖 定義：Past tense of bring;  │
+│ to take or carry something to   │
+│ a place                         │
+│                                 │
+│ 🔗 同義詞：                     │
+│ [carried] [took] [delivered]    │
+│                                 │
+│ 📝 例句：                       │
+│ • 原始：He brought this up      │
+│   翻譯：他提出了這件事          │
+│                                 │
+│ • 生成：She brought up a point  │
+│   翻譯：她提出了一個觀點        │
+│   [📷] [🔊]                     │
+│                                 │
+│ 🎯 難度：B1                     │
+│                                 │
+│ [📚 加入清單] [📖 生成詞卡]      │
+│                                 │
+└─────────────────────────────────┘
+```
+
+## 4. 互動流程圖
+
+### 4.1 完整用戶旅程
+
+```
+開始
+  ↓
+選擇輸入模式 (手動/截圖)
+  ↓
+[手動模式]
+輸入英文句子 (≤50字)
+  ↓
+點擊「分析句子」
+  ↓
+檢查使用限制
+  ↓                ↓
+ 通過              超限
+  ↓                ↓
+顯示分析中...      顯示升級提醒
+  ↓                ↓
+AI 分析完成        [升級] or [等待]
+  ↓
+顯示互動式文字
+  ↓
+點擊任意單字
+  ↓
+顯示單字資訊彈窗
+  ↓                ↓
+普通單字           片語/俚語
+  ↓                ↓
+基礎資訊           片語警告 + 基礎資訊
+  ↓                ↓
+[播放發音]         [播放發音]
+[查看例句圖]       [查看例句圖]
+[加入學習清單]     [加入學習清單]
+[生成詞卡]         [生成詞卡]
+  ↓
+關閉彈窗
+  ↓
+繼續查詢其他單字 or 分析新句子 or 生成詞卡
+```
+
+### 4.2 錯誤處理流程
+
+```
+用戶操作
+  ↓
+系統檢查
+  ↓        ↓        ↓        ↓
+正常      網路錯誤   API錯誤   使用超限
+  ↓        ↓        ↓        ↓
+執行      重試提示   錯誤提示   升級提示
+          ↓        ↓        ↓
+          [重試]    [回報]    [升級/等待]
+          [取消]    [返回]    [返回]
+```
+
+## 5. 響應式設計斷點
+
+### 5.1 斷點定義
+
+```css
+/* 手機 */
+@media (max-width: 767px) {
+  .container { padding: 1rem; }
+  .word-popup {
+    width: 90vw;
+    position: fixed;
+    bottom: 0;
+    transform: none;
+  }
+}
+
+/* 平板 */
+@media (min-width: 768px) and (max-width: 1023px) {
+  .container { padding: 1.5rem; }
+  .interactive-text { font-size: 1.1rem; }
+}
+
+/* 桌面 */
+@media (min-width: 1024px) {
+  .container { padding: 2rem; }
+  .word-popup { min-width: 400px; }
+}
+```
+
+### 5.2 觸控優化
+
+```css
+/* 手機觸控優化 */
+@media (max-width: 767px) {
+  .clickable-word {
+    min-height: 44px; /* iOS 建議最小觸控面積 */
+    padding: 8px 4px;
+    margin: 2px;
+  }
+
+  .close-button {
+    min-width: 44px;
+    min-height: 44px;
+  }
+}
+```
+
+## 6. 無障礙設計 (A11y)
+
+### 6.1 鍵盤導航
+
+```
+Tab 鍵順序：
+1. 輸入模式選擇
+2. 文字輸入框
+3. 分析按鈕
+4. 可點擊單字 (依序)
+5. 彈窗內元素
+6. 關閉按鈕
+```
+
+### 6.2 螢幕閱讀器支援
+
+```html
+<!-- 語義化 HTML -->
+<main role="main" aria-label="互動式單字查詢">
+  <section aria-label="句子輸入區">
+    <input
+      aria-label="輸入英文句子，最多300字元"
+      aria-describedby="char-count"
+    />
+    <div id="char-count" aria-live="polite">目前：0 字元</div>
+  </section>
+
+  <section aria-label="分析結果區">
+    <div role="button"
+         tabindex="0"
+         aria-label="單字：brought，點擊查看詳細資訊"
+         data-word="brought">
+      brought
+    </div>
+  </section>
+</main>
+
+<!-- 彈窗 -->
+<dialog role="dialog"
+        aria-labelledby="word-title"
+        aria-describedby="word-definition">
+  <h2 id="word-title">brought</h2>
+  <p id="word-definition">Past tense of bring...</p>
+</dialog>
+```
+
+### 6.3 色彩對比
+
+```css
+/* 符合 WCAG AA 標準 */
+:root {
+  --text-primary: #1a1a1a;      /* 對比度 13.26:1 */
+  --text-secondary: #4a4a4a;    /* 對比度 8.59:1 */
+  --border-focus: #0066cc;       /* 高對比度焦點邊框 */
+  --bg-phrase: #fff4cc;          /* 片語背景 */
+  --bg-phrase-text: #8b4513;     /* 片語文字 */
+}
+
+.clickable-word:focus {
+  outline: 2px solid var(--border-focus);
+  outline-offset: 2px;
+}
+```
+
+這份 UI 線框圖設計涵蓋了完整的用戶介面規劃，包括主要頁面、互動流程、響應式適配和無障礙設計，為開發團隊提供了詳細的實現指南。
\ No newline at end of file
diff --git a/frontend/app/demo-v2/page.tsx b/frontend/app/demo-v2/page.tsx
new file mode 100644
index 0000000..5ed249f
--- /dev/null
+++ b/frontend/app/demo-v2/page.tsx
@@ -0,0 +1,572 @@
+'use client'
+
+import { useState } from 'react'
+import { ClickableTextV2 } from '@/components/ClickableTextV2'
+
+export default function DemoV2Page() {
+  const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
+  const [textInput, setTextInput] = useState('')
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [showAnalysisView, setShowAnalysisView] = useState(false)
+  const [sentenceAnalysis, setSentenceAnalysis] = useState<any>(null)
+  const [sentenceMeaning, setSentenceMeaning] = useState('')
+  const [usageCount, setUsageCount] = useState(0)
+  const [isPremium] = useState(false)
+
+  // 模擬分析後的句子資料（新版本）
+  const mockSentenceAnalysis = {
+    meaning: "他在我們的會議中提出了這件事，但沒有人同意。這句話表達了在會議中有人提出某個議題或想法，但得不到其他與會者的認同。",
+    highValueWords: ["brought", "up", "meeting", "agreed"], // 高價值詞彙
+    phrasesDetected: [
+      {
+        phrase: "bring up",
+        words: ["brought", "up"],
+        colorCode: "#F59E0B"
+      }
+    ],
+    words: {
+      "he": {
+        word: "he",
+        translation: "他",
+        definition: "Used to refer to a male person or animal",
+        partOfSpeech: "pronoun",
+        pronunciation: "/hiː/",
+        synonyms: ["him", "that man"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      },
+      "brought": {
+        word: "brought",
+        translation: "帶來、提出",
+        definition: "Past tense of bring; to take or carry something to a place",
+        partOfSpeech: "verb",
+        pronunciation: "/brɔːt/",
+        synonyms: ["carried", "took", "delivered"],
+        antonyms: ["removed", "took away"],
+        isPhrase: true,
+        isHighValue: true, // 高價值片語
+        learningPriority: "high",
+        phraseInfo: {
+          phrase: "bring up",
+          meaning: "提出（話題）、養育",
+          warning: "在這個句子中，\"brought up\" 是一個片語，意思是\"提出話題\"，而不是單純的\"帶來\"",
+          colorCode: "#F59E0B"
+        },
+        difficultyLevel: "B1",
+        costIncurred: 0 // 高價值免費
+      },
+      "this": {
+        word: "this",
+        translation: "這個",
+        definition: "Used to indicate something near or just mentioned",
+        partOfSpeech: "pronoun",
+        pronunciation: "/ðɪs/",
+        synonyms: ["that", "it"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      },
+      "thing": {
+        word: "thing",
+        translation: "事情、東西",
+        definition: "An object, fact, or situation",
+        partOfSpeech: "noun",
+        pronunciation: "/θɪŋ/",
+        synonyms: ["object", "matter", "item"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      },
+      "up": {
+        word: "up",
+        translation: "向上",
+        definition: "Toward a higher place or position",
+        partOfSpeech: "adverb",
+        pronunciation: "/ʌp/",
+        synonyms: ["upward", "above"],
+        antonyms: ["down", "below"],
+        isPhrase: true,
+        isHighValue: true, // 高價值片語部分
+        learningPriority: "high",
+        phraseInfo: {
+          phrase: "bring up",
+          meaning: "提出（話題）、養育",
+          warning: "\"up\" 在這裡是片語 \"bring up\" 的一部分，不是單獨的\"向上\"的意思",
+          colorCode: "#F59E0B"
+        },
+        difficultyLevel: "B1",
+        costIncurred: 0 // 高價值免費
+      },
+      "during": {
+        word: "during",
+        translation: "在...期間",
+        definition: "Throughout the course or duration of",
+        partOfSpeech: "preposition",
+        pronunciation: "/ˈdjʊərɪŋ/",
+        synonyms: ["throughout", "while"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A2",
+        costIncurred: 1
+      },
+      "our": {
+        word: "our",
+        translation: "我們的",
+        definition: "Belonging to us",
+        partOfSpeech: "pronoun",
+        pronunciation: "/aʊər/",
+        synonyms: ["ours"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      },
+      "meeting": {
+        word: "meeting",
+        translation: "會議",
+        definition: "An organized gathering of people for discussion",
+        partOfSpeech: "noun",
+        pronunciation: "/ˈmiːtɪŋ/",
+        synonyms: ["conference", "assembly", "gathering"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: true, // 高價值單字（B2級）
+        learningPriority: "high",
+        difficultyLevel: "B2",
+        costIncurred: 0 // 高價值免費
+      },
+      "and": {
+        word: "and",
+        translation: "和、而且",
+        definition: "Used to connect words or clauses",
+        partOfSpeech: "conjunction",
+        pronunciation: "/ænd/",
+        synonyms: ["plus", "also"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      },
+      "no": {
+        word: "no",
+        translation: "沒有",
+        definition: "Not any; not one",
+        partOfSpeech: "determiner",
+        pronunciation: "/nəʊ/",
+        synonyms: ["none", "zero"],
+        antonyms: ["some", "any"],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      },
+      "one": {
+        word: "one",
+        translation: "一個人、任何人",
+        definition: "A single person or thing",
+        partOfSpeech: "pronoun",
+        pronunciation: "/wʌn/",
+        synonyms: ["someone", "anybody"],
+        antonyms: ["none", "nobody"],
+        isPhrase: false,
+        isHighValue: false, // 低價值詞彙
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      },
+      "agreed": {
+        word: "agreed",
+        translation: "同意",
+        definition: "Past tense of agree; to have the same opinion",
+        partOfSpeech: "verb",
+        pronunciation: "/əˈɡriːd/",
+        synonyms: ["consented", "accepted", "approved"],
+        antonyms: ["disagreed", "refused"],
+        isPhrase: false,
+        isHighValue: true, // 高價值單字（B1級）
+        learningPriority: "medium",
+        difficultyLevel: "B1",
+        costIncurred: 0 // 高價值免費
+      }
+    }
+  }
+
+  // 處理句子分析
+  const handleAnalyzeSentence = async () => {
+    if (!textInput.trim()) return
+
+    // 檢查使用次數限制
+    if (!isPremium && usageCount >= 5) {
+      alert('❌ 免費用戶 3 小時內只能分析 5 次句子，請稍後再試或升級到付費版本')
+      return
+    }
+
+    setIsAnalyzing(true)
+
+    try {
+      // 模擬 API 調用
+      await new Promise(resolve => setTimeout(resolve, 2000))
+
+      setSentenceAnalysis(mockSentenceAnalysis.words)
+      setSentenceMeaning(mockSentenceAnalysis.meaning)
+      setShowAnalysisView(true)
+      setUsageCount(prev => prev + 1) // 句子分析扣除1次
+    } catch (error) {
+      console.error('Error analyzing sentence:', error)
+      alert('分析句子時發生錯誤，請稍後再試')
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }
+
+  const getHighValueCount = () => {
+    if (!sentenceAnalysis) return 0
+    return Object.values(sentenceAnalysis).filter((word: any) => word.isHighValue).length
+  }
+
+  const getLowValueCount = () => {
+    if (!sentenceAnalysis) return 0
+    return Object.values(sentenceAnalysis).filter((word: any) => !word.isHighValue).length
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Navigation */}
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16">
+            <div className="flex items-center">
+              <h1 className="text-2xl font-bold text-blue-600">DramaLing</h1>
+            </div>
+            <div className="flex items-center space-x-4">
+              <span className="text-gray-600">高價值標記演示 v2.0</span>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {!showAnalysisView ? (
+          <div className="max-w-4xl mx-auto">
+            <h1 className="text-3xl font-bold mb-8">AI 智能生成詞卡 - 高價值標記系統</h1>
+
+            {/* 功能說明 */}
+            <div className="bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl p-6 mb-6 border border-blue-200">
+              <h2 className="text-lg font-semibold mb-3 text-blue-800">🎯 高價值標記系統特色</h2>
+              <div className="grid md:grid-cols-2 gap-4 text-sm">
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-4 h-4 bg-yellow-400 border-2 border-yellow-500 rounded"></div>
+                    <span><strong>高價值片語</strong> - 免費無限點擊</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="w-4 h-4 bg-green-400 border-2 border-green-500 rounded"></div>
+                    <span><strong>高價值單字</strong> - 免費無限點擊</span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <div className="w-4 h-4 border-b-2 border-blue-400"></div>
+                    <span><strong>普通單字</strong> - 點擊扣除 1 次額度</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">⭐</span>
+                    <span><strong>星號標記</strong> - 高學習價值指標</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Input Mode Selection */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">原始例句類型</h2>
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={() => setMode('manual')}
+                  className={`p-4 rounded-lg border-2 transition-all ${
+                    mode === 'manual'
+                      ? 'border-blue-600 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="text-2xl mb-2">✍️</div>
+                  <div className="font-semibold">手動輸入</div>
+                  <div className="text-sm text-gray-600 mt-1">貼上或輸入英文文本</div>
+                </button>
+                <button
+                  onClick={() => setMode('screenshot')}
+                  disabled={!isPremium}
+                  className={`p-4 rounded-lg border-2 transition-all relative ${
+                    mode === 'screenshot'
+                      ? 'border-blue-600 bg-blue-50'
+                      : isPremium
+                      ? 'border-gray-200 hover:border-gray-300'
+                      : 'border-gray-200 bg-gray-100 cursor-not-allowed opacity-60'
+                  }`}
+                >
+                  <div className="text-2xl mb-2">📷</div>
+                  <div className="font-semibold">影劇截圖</div>
+                  <div className="text-sm text-gray-600 mt-1">上傳影劇截圖 (Phase 2)</div>
+                  {!isPremium && (
+                    <div className="absolute top-2 right-2 px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">
+                      訂閱功能
+                    </div>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Content Input */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <div>
+                <h2 className="text-lg font-semibold mb-4">輸入英文文本</h2>
+                <textarea
+                  value={textInput}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    if (mode === 'manual' && value.length > 50) {
+                      return // 阻止輸入超過50字
+                    }
+                    setTextInput(value)
+                  }}
+                  placeholder={mode === 'manual'
+                    ? "輸入英文句子（最多50字）..."
+                    : "貼上您想要學習的英文文本，例如影劇對話、文章段落..."
+                  }
+                  className={`w-full h-40 px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none resize-none ${
+                    mode === 'manual' && textInput.length >= 45 ? 'border-yellow-400' :
+                    mode === 'manual' && textInput.length >= 50 ? 'border-red-400' : 'border-gray-300'
+                  }`}
+                />
+                <div className="mt-2 flex justify-between text-sm">
+                  <span className={`${
+                    mode === 'manual' && textInput.length >= 45 ? 'text-yellow-600' :
+                    mode === 'manual' && textInput.length >= 50 ? 'text-red-600' : 'text-gray-600'
+                  }`}>
+                    {mode === 'manual' ? `最多 50 字元 • 目前：${textInput.length} 字元` : `最多 5000 字元 • 目前：${textInput.length} 字元`}
+                  </span>
+                  {mode === 'manual' && textInput.length > 40 && (
+                    <span className={textInput.length >= 50 ? 'text-red-600' : 'text-yellow-600'}>
+                      {textInput.length >= 50 ? '已達上限！' : `還可輸入 ${50 - textInput.length} 字元`}
+                    </span>
+                  )}
+                </div>
+
+                {/* 預設示例 */}
+                {!textInput && (
+                  <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+                    <div className="text-sm text-gray-700 mb-2">
+                      <strong>示例句子：</strong>
+                    </div>
+                    <button
+                      onClick={() => setTextInput("He brought this thing up during our meeting and no one agreed.")}
+                      className="text-sm text-blue-600 hover:text-blue-800 bg-blue-50 px-3 py-1 rounded border border-blue-200"
+                    >
+                      點擊使用示例：He brought this thing up during our meeting and no one agreed.
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 新的按鈕區域 */}
+            <div className="space-y-4">
+              {/* 分析句子按鈕 */}
+              <button
+                onClick={handleAnalyzeSentence}
+                disabled={isAnalyzing || (mode === 'manual' && (!textInput || textInput.length > 50)) || (mode === 'screenshot')}
+                className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isAnalyzing ? (
+                  <span className="flex items-center justify-center">
+                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    正在識別高價值詞彙...
+                  </span>
+                ) : (
+                  '🔍 分析句子並標記高價值詞彙'
+                )}
+              </button>
+
+              {/* 使用次數顯示 */}
+              <div className="text-center text-sm text-gray-600">
+                {isPremium ? (
+                  <span className="text-green-600">🌟 付費用戶：無限制使用</span>
+                ) : (
+                  <span className={usageCount >= 4 ? 'text-red-600' : usageCount >= 3 ? 'text-yellow-600' : 'text-gray-600'}>
+                    免費用戶：已使用 {usageCount}/5 次 (3小時內)
+                    {usageCount >= 5 && <span className="block text-red-500 mt-1">已達上限，請稍後再試</span>}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          /* 句子分析視圖 */
+          <div className="max-w-4xl mx-auto">
+            <div className="flex items-center justify-between mb-6">
+              <h1 className="text-3xl font-bold">句子分析結果 - 高價值標記</h1>
+              <button
+                onClick={() => setShowAnalysisView(false)}
+                className="text-gray-600 hover:text-gray-900"
+              >
+                ← 返回
+              </button>
+            </div>
+
+            {/* 分析統計 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">分析統計</h2>
+              <div className="grid grid-cols-3 gap-4">
+                <div className="text-center p-3 bg-green-50 rounded-lg">
+                  <div className="text-2xl font-bold text-green-600">{getHighValueCount()}</div>
+                  <div className="text-sm text-green-700">高價值詞彙</div>
+                  <div className="text-xs text-green-600">⭐ 免費點擊</div>
+                </div>
+                <div className="text-center p-3 bg-blue-50 rounded-lg">
+                  <div className="text-2xl font-bold text-blue-600">{getLowValueCount()}</div>
+                  <div className="text-sm text-blue-700">普通詞彙</div>
+                  <div className="text-xs text-blue-600">💰 點擊收費</div>
+                </div>
+                <div className="text-center p-3 bg-gray-50 rounded-lg">
+                  <div className="text-2xl font-bold text-gray-600">1</div>
+                  <div className="text-sm text-gray-700">本次消耗</div>
+                  <div className="text-xs text-gray-600">🔍 句子分析</div>
+                </div>
+              </div>
+            </div>
+
+            {/* 原始句子顯示 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">原始句子</h2>
+              <div className="bg-gray-50 p-4 rounded-lg mb-4">
+                <div className="text-lg leading-relaxed">
+                  {textInput}
+                </div>
+              </div>
+
+              <h3 className="text-base font-semibold mb-2">整句意思</h3>
+              <div className="text-gray-700 leading-relaxed">
+                {sentenceMeaning}
+              </div>
+            </div>
+
+            {/* 互動式文字 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">智能高價值標記 - 點擊查詢單字</h2>
+
+              {/* 圖例說明 */}
+              <div className="p-4 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg border border-blue-200 mb-4">
+                <p className="text-sm text-blue-800 mb-3">
+                  <strong>💡 智能標記說明：</strong>AI 已識別高學習價值詞彙並標記為免費查詢
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 bg-yellow-100 border-2 border-yellow-400 rounded">brought⭐</div>
+                    <span>高價值片語（免費）</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 bg-green-100 border-2 border-green-400 rounded">meeting⭐</div>
+                    <span>高價值單字（免費）</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 border-b border-blue-300">thing</div>
+                    <span>普通單字（扣1次）</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+                <ClickableTextV2
+                  text={textInput}
+                  analysis={sentenceAnalysis}
+                  highValueWords={mockSentenceAnalysis.highValueWords}
+                  phrasesDetected={mockSentenceAnalysis.phrasesDetected}
+                  remainingUsage={5 - usageCount}
+                  onWordClick={(word, analysis) => {
+                    console.log('Clicked word:', word, analysis)
+                  }}
+                  onWordCostConfirm={async (word, cost) => {
+                    if (usageCount >= 5) {
+                      alert('❌ 使用額度不足，無法查詢低價值詞彙')
+                      return false
+                    }
+
+                    // 這裡可以顯示更詳細的確認對話框
+                    const confirmed = window.confirm(
+                      `查詢 "${word}" 將消耗 ${cost} 次使用額度，您剩餘 ${5 - usageCount} 次。\n\n是否繼續？`
+                    )
+
+                    if (confirmed) {
+                      setUsageCount(prev => prev + cost)
+                      return true
+                    }
+                    return false
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 使用統計 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">使用統計</h2>
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <div className="text-sm text-gray-600">今日句子分析</div>
+                  <div className="text-2xl font-bold text-blue-600">{usageCount}</div>
+                  <div className="text-xs text-gray-500">每次扣除 1 次額度</div>
+                </div>
+                <div>
+                  <div className="text-sm text-gray-600">剩餘額度</div>
+                  <div className={`text-2xl font-bold ${5 - usageCount <= 1 ? 'text-red-600' : 'text-green-600'}`}>
+                    {5 - usageCount}
+                  </div>
+                  <div className="text-xs text-gray-500">
+                    {isPremium ? '無限制' : '3小時內重置'}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* 操作按鈕 */}
+            <div className="bg-white rounded-xl shadow-sm p-6">
+              <div className="flex gap-4">
+                <button
+                  onClick={() => setShowAnalysisView(false)}
+                  className="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors"
+                >
+                  🔄 分析新句子
+                </button>
+                <button
+                  onClick={() => alert('詞卡生成功能開發中...')}
+                  className="flex-1 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
+                >
+                  📖 生成詞卡
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/app/demo-v3/page.tsx b/frontend/app/demo-v3/page.tsx
new file mode 100644
index 0000000..8aee0c7
--- /dev/null
+++ b/frontend/app/demo-v3/page.tsx
@@ -0,0 +1,500 @@
+'use client'
+
+import { useState } from 'react'
+import { ClickableTextV2 } from '@/components/ClickableTextV2'
+import { GrammarCorrectionPanel } from '@/components/GrammarCorrectionPanel'
+
+export default function DemoV3Page() {
+  const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
+  const [textInput, setTextInput] = useState('')
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [showAnalysisView, setShowAnalysisView] = useState(false)
+  const [sentenceAnalysis, setSentenceAnalysis] = useState<any>(null)
+  const [sentenceMeaning, setSentenceMeaning] = useState('')
+  const [grammarCorrection, setGrammarCorrection] = useState<any>(null)
+  const [finalText, setFinalText] = useState('') // 最終用於分析的文本
+  const [usageCount, setUsageCount] = useState(0)
+  const [isPremium] = useState(false)
+
+  // 模擬正確句子的分析資料
+  const mockCorrectSentenceAnalysis = {
+    meaning: "他在我們的會議中提出了這件事，但沒有人同意。這句話表達了在會議中有人提出某個議題或想法，但得不到其他與會者的認同。",
+    grammarCorrection: {
+      hasErrors: false,
+      originalText: "He brought this thing up during our meeting and no one agreed.",
+      correctedText: null,
+      corrections: [],
+      confidenceScore: 0.98
+    },
+    highValueWords: ["brought", "up", "meeting", "agreed"],
+    words: {
+      "brought": {
+        word: "brought",
+        translation: "帶來、提出",
+        definition: "Past tense of bring; to take or carry something to a place",
+        partOfSpeech: "verb",
+        pronunciation: "/brɔːt/",
+        synonyms: ["carried", "took", "delivered"],
+        antonyms: ["removed", "took away"],
+        isPhrase: true,
+        isHighValue: true,
+        learningPriority: "high",
+        phraseInfo: {
+          phrase: "bring up",
+          meaning: "提出（話題）、養育",
+          warning: "在這個句子中，\"brought up\" 是一個片語，意思是\"提出話題\"，而不是單純的\"帶來\"",
+          colorCode: "#F59E0B"
+        },
+        difficultyLevel: "B1"
+      },
+      "meeting": {
+        word: "meeting",
+        translation: "會議",
+        definition: "An organized gathering of people for discussion",
+        partOfSpeech: "noun",
+        pronunciation: "/ˈmiːtɪŋ/",
+        synonyms: ["conference", "assembly", "gathering"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "high",
+        difficultyLevel: "B2"
+      },
+      "thing": {
+        word: "thing",
+        translation: "事情、東西",
+        definition: "An object, fact, or situation",
+        partOfSpeech: "noun",
+        pronunciation: "/θɪŋ/",
+        synonyms: ["object", "matter", "item"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false,
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      }
+    }
+  }
+
+  // 模擬有語法錯誤的句子分析資料
+  const mockErrorSentenceAnalysis = {
+    meaning: "我昨天去學校遇見了我的朋友們。這句話描述了過去發生的事情，表達了去學校並遇到朋友的經歷。",
+    grammarCorrection: {
+      hasErrors: true,
+      originalText: "I go to school yesterday and meet my friends.",
+      correctedText: "I went to school yesterday and met my friends.",
+      corrections: [
+        {
+          position: { start: 2, end: 4 },
+          errorType: "tense_mismatch",
+          original: "go",
+          corrected: "went",
+          reason: "過去式時態修正：句子中有 'yesterday'，應使用過去式",
+          severity: "high"
+        },
+        {
+          position: { start: 29, end: 33 },
+          errorType: "tense_mismatch",
+          original: "meet",
+          corrected: "met",
+          reason: "過去式時態修正：與 'went' 保持時態一致",
+          severity: "high"
+        }
+      ],
+      confidenceScore: 0.95
+    },
+    highValueWords: ["went", "yesterday", "met", "friends"],
+    words: {
+      "went": {
+        word: "went",
+        translation: "去、前往",
+        definition: "Past tense of go; to move or travel to a place",
+        partOfSpeech: "verb",
+        pronunciation: "/went/",
+        synonyms: ["traveled", "moved", "proceeded"],
+        antonyms: ["stayed", "remained"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "high",
+        difficultyLevel: "A2"
+      },
+      "yesterday": {
+        word: "yesterday",
+        translation: "昨天",
+        definition: "The day before today",
+        partOfSpeech: "adverb",
+        pronunciation: "/ˈjestədeɪ/",
+        synonyms: ["the day before"],
+        antonyms: ["tomorrow", "today"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "medium",
+        difficultyLevel: "A1"
+      },
+      "met": {
+        word: "met",
+        translation: "遇見、認識",
+        definition: "Past tense of meet; to encounter or come together with",
+        partOfSpeech: "verb",
+        pronunciation: "/met/",
+        synonyms: ["encountered", "saw", "found"],
+        antonyms: ["avoided", "missed"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "high",
+        difficultyLevel: "A2"
+      },
+      "friends": {
+        word: "friends",
+        translation: "朋友們",
+        definition: "People you like and know well",
+        partOfSpeech: "noun",
+        pronunciation: "/frends/",
+        synonyms: ["companions", "buddies", "pals"],
+        antonyms: ["enemies", "strangers"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "medium",
+        difficultyLevel: "A1"
+      },
+      "school": {
+        word: "school",
+        translation: "學校",
+        definition: "A place where children go to learn",
+        partOfSpeech: "noun",
+        pronunciation: "/skuːl/",
+        synonyms: ["educational institution"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false,
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      }
+    }
+  }
+
+  // 處理句子分析
+  const handleAnalyzeSentence = async () => {
+    if (!textInput.trim()) return
+
+    if (!isPremium && usageCount >= 5) {
+      alert('❌ 免費用戶 3 小時內只能分析 5 次句子，請稍後再試或升級到付費版本')
+      return
+    }
+
+    setIsAnalyzing(true)
+
+    try {
+      await new Promise(resolve => setTimeout(resolve, 2500))
+
+      // 根據輸入文本決定使用哪個模擬資料
+      const hasGrammarErrors = textInput.toLowerCase().includes('go to school yesterday') ||
+                              textInput.toLowerCase().includes('meet my friends')
+
+      if (hasGrammarErrors) {
+        setSentenceAnalysis(mockErrorSentenceAnalysis.words)
+        setSentenceMeaning(mockErrorSentenceAnalysis.meaning)
+        setGrammarCorrection(mockErrorSentenceAnalysis.grammarCorrection)
+        setFinalText(mockErrorSentenceAnalysis.grammarCorrection.correctedText || textInput)
+      } else {
+        setSentenceAnalysis(mockCorrectSentenceAnalysis.words)
+        setSentenceMeaning(mockCorrectSentenceAnalysis.meaning)
+        setGrammarCorrection(mockCorrectSentenceAnalysis.grammarCorrection)
+        setFinalText(textInput)
+      }
+
+      setShowAnalysisView(true)
+      setUsageCount(prev => prev + 1)
+    } catch (error) {
+      console.error('Error analyzing sentence:', error)
+      alert('分析句子時發生錯誤，請稍後再試')
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }
+
+  const handleAcceptCorrection = () => {
+    if (grammarCorrection?.correctedText) {
+      setFinalText(grammarCorrection.correctedText)
+      // 這裡可以重新分析修正後的句子
+      alert('✅ 已採用修正版本，後續學習將基於正確的句子進行！')
+    }
+  }
+
+  const handleRejectCorrection = () => {
+    setFinalText(grammarCorrection?.originalText || textInput)
+    alert('📝 已保持原始版本，將基於您的原始輸入進行學習。')
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Navigation */}
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16">
+            <div className="flex items-center">
+              <h1 className="text-2xl font-bold text-blue-600">DramaLing</h1>
+            </div>
+            <div className="flex items-center space-x-4">
+              <span className="text-gray-600">語法修正演示 v3.0</span>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {!showAnalysisView ? (
+          <div className="max-w-4xl mx-auto">
+            <h1 className="text-3xl font-bold mb-8">AI 智能語法修正 + 高價值標記系統</h1>
+
+            {/* 功能說明 */}
+            <div className="bg-gradient-to-r from-red-50 to-green-50 rounded-xl p-6 mb-6 border border-red-200">
+              <h2 className="text-lg font-semibold mb-3 text-red-800">🔧 語法修正 + 高價值標記特色</h2>
+              <div className="grid md:grid-cols-2 gap-4 text-sm">
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">❌</span>
+                    <span><strong>智能錯誤檢測</strong> - 9種語法錯誤類型</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">🔧</span>
+                    <span><strong>自動修正建議</strong> - 詳細修正說明</span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">⭐</span>
+                    <span><strong>高價值標記</strong> - 基於修正後句子</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">💰</span>
+                    <span><strong>成本優化</strong> - 語法修正不額外收費</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Content Input */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">輸入英文文本 (更新：300字限制)</h2>
+              <textarea
+                value={textInput}
+                onChange={(e) => {
+                  const value = e.target.value
+                  if (mode === 'manual' && value.length > 300) {
+                    return // 阻止輸入超過300字
+                  }
+                  setTextInput(value)
+                }}
+                placeholder={mode === 'manual'
+                  ? "輸入英文句子（最多300字）..."
+                  : "貼上您想要學習的英文文本，例如影劇對話、文章段落..."
+                }
+                className={`w-full h-40 px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none resize-none ${
+                  mode === 'manual' && textInput.length >= 280 ? 'border-yellow-400' :
+                  mode === 'manual' && textInput.length >= 300 ? 'border-red-400' : 'border-gray-300'
+                }`}
+              />
+              <div className="mt-2 flex justify-between text-sm">
+                <span className={`${
+                  mode === 'manual' && textInput.length >= 280 ? 'text-yellow-600' :
+                  mode === 'manual' && textInput.length >= 300 ? 'text-red-600' : 'text-gray-600'
+                }`}>
+                  {mode === 'manual' ? `最多 300 字元 • 目前：${textInput.length} 字元` : `最多 5000 字元 • 目前：${textInput.length} 字元`}
+                </span>
+                {mode === 'manual' && textInput.length > 250 && (
+                  <span className={textInput.length >= 300 ? 'text-red-600' : 'text-yellow-600'}>
+                    {textInput.length >= 300 ? '已達上限！' : `還可輸入 ${300 - textInput.length} 字元`}
+                  </span>
+                )}
+              </div>
+
+              {/* 預設示例 - 包含語法錯誤和正確的句子 */}
+              {!textInput && (
+                <div className="mt-4 space-y-3">
+                  <div className="p-3 bg-gray-50 rounded-lg">
+                    <div className="text-sm text-gray-700 mb-2">
+                      <strong>✅ 正確語法示例：</strong>
+                    </div>
+                    <button
+                      onClick={() => setTextInput("He brought this thing up during our meeting and no one agreed.")}
+                      className="text-sm text-green-600 hover:text-green-800 bg-green-50 px-3 py-1 rounded border border-green-200 w-full text-left"
+                    >
+                      He brought this thing up during our meeting and no one agreed.
+                    </button>
+                  </div>
+                  <div className="p-3 bg-red-50 rounded-lg">
+                    <div className="text-sm text-red-700 mb-2">
+                      <strong>❌ 語法錯誤示例（測試修正功能）：</strong>
+                    </div>
+                    <button
+                      onClick={() => setTextInput("I go to school yesterday and meet my friends.")}
+                      className="text-sm text-red-600 hover:text-red-800 bg-red-50 px-3 py-1 rounded border border-red-200 w-full text-left"
+                    >
+                      I go to school yesterday and meet my friends.
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* 分析按鈕 */}
+            <div className="space-y-4">
+              <button
+                onClick={handleAnalyzeSentence}
+                disabled={isAnalyzing || (mode === 'manual' && (!textInput || textInput.length > 300)) || (mode === 'screenshot')}
+                className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isAnalyzing ? (
+                  <span className="flex items-center justify-center">
+                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    正在檢查語法並標記高價值詞彙...
+                  </span>
+                ) : (
+                  '🔍 語法檢查 + 高價值詞彙分析'
+                )}
+              </button>
+
+              <div className="text-center text-sm text-gray-600">
+                {isPremium ? (
+                  <span className="text-green-600">🌟 付費用戶：無限制使用</span>
+                ) : (
+                  <span className={usageCount >= 4 ? 'text-red-600' : usageCount >= 3 ? 'text-yellow-600' : 'text-gray-600'}>
+                    免費用戶：已使用 {usageCount}/5 次 (3小時內)
+                    {usageCount >= 5 && <span className="block text-red-500 mt-1">已達上限，請稍後再試</span>}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          /* 句子分析視圖 */
+          <div className="max-w-4xl mx-auto">
+            <div className="flex items-center justify-between mb-6">
+              <h1 className="text-3xl font-bold">語法檢查 + 高價值標記結果</h1>
+              <button
+                onClick={() => setShowAnalysisView(false)}
+                className="text-gray-600 hover:text-gray-900"
+              >
+                ← 返回
+              </button>
+            </div>
+
+            {/* 語法修正面板 */}
+            {grammarCorrection && (
+              <GrammarCorrectionPanel
+                correction={grammarCorrection}
+                onAcceptCorrection={handleAcceptCorrection}
+                onRejectCorrection={handleRejectCorrection}
+              />
+            )}
+
+            {/* 原始句子 vs 分析句子 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">句子對比</h2>
+              <div className="grid md:grid-cols-2 gap-4">
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700 mb-2">📝 用戶輸入</h3>
+                  <div className="p-3 bg-gray-50 rounded-lg border">
+                    <div className="text-base">{textInput}</div>
+                  </div>
+                </div>
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700 mb-2">🎯 分析基礎</h3>
+                  <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
+                    <div className="text-base font-medium">{finalText}</div>
+                    {finalText !== textInput && (
+                      <div className="text-xs text-blue-600 mt-1">✨ 已修正語法錯誤</div>
+                    )}
+                  </div>
+                </div>
+              </div>
+
+              <div className="mt-4">
+                <h3 className="text-sm font-medium text-gray-700 mb-2">📖 整句意思</h3>
+                <div className="text-gray-700 leading-relaxed p-3 bg-gray-50 rounded-lg">
+                  {sentenceMeaning}
+                </div>
+              </div>
+            </div>
+
+            {/* 互動式文字 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">智能高價值標記 - 點擊查詢單字</h2>
+
+              <div className="p-4 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg border border-blue-200 mb-4">
+                <p className="text-sm text-blue-800 mb-3">
+                  <strong>💡 基於{finalText !== textInput ? '修正後' : '原始'}句子的智能分析：</strong>
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 bg-yellow-100 border-2 border-yellow-400 rounded">片語⭐</div>
+                    <span>高價值片語（免費）</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 bg-green-100 border-2 border-green-400 rounded">單字⭐</div>
+                    <span>高價值單字（免費）</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 border-b border-blue-300">普通</div>
+                    <span>普通單字（扣1次）</span>
+                  </div>
+                </div>
+              </div>
+
+              <div className="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+                <ClickableTextV2
+                  text={finalText}
+                  analysis={sentenceAnalysis}
+                  remainingUsage={5 - usageCount}
+                  onWordClick={(word, analysis) => {
+                    console.log('Clicked word:', word, analysis)
+                  }}
+                  onWordCostConfirm={async (word, cost) => {
+                    if (usageCount >= 5) {
+                      alert('❌ 使用額度不足，無法查詢低價值詞彙')
+                      return false
+                    }
+
+                    const confirmed = window.confirm(
+                      `查詢 "${word}" 將消耗 ${cost} 次使用額度，您剩餘 ${5 - usageCount} 次。\n\n是否繼續？`
+                    )
+
+                    if (confirmed) {
+                      setUsageCount(prev => prev + cost)
+                      return true
+                    }
+                    return false
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 操作按鈕 */}
+            <div className="bg-white rounded-xl shadow-sm p-6">
+              <div className="flex gap-4">
+                <button
+                  onClick={() => setShowAnalysisView(false)}
+                  className="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors"
+                >
+                  🔄 分析新句子
+                </button>
+                <button
+                  onClick={() => alert('詞卡生成功能開發中...')}
+                  className="flex-1 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
+                >
+                  📖 生成詞卡
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/app/generate-demo/page.tsx b/frontend/app/generate-demo/page.tsx
new file mode 100644
index 0000000..c1f91e1
--- /dev/null
+++ b/frontend/app/generate-demo/page.tsx
@@ -0,0 +1,389 @@
+'use client'
+
+import { useState } from 'react'
+import { ClickableText } from '@/components/ClickableText'
+
+export default function GenerateDemoPage() {
+  const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
+  const [textInput, setTextInput] = useState('')
+  const [extractionType, setExtractionType] = useState<'vocabulary' | 'smart'>('vocabulary')
+  const [cardCount, setCardCount] = useState(10)
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [showAnalysisView, setShowAnalysisView] = useState(false)
+  const [sentenceAnalysis, setSentenceAnalysis] = useState<any>(null)
+  const [sentenceMeaning, setSentenceMeaning] = useState('')
+  const [usageCount, setUsageCount] = useState(0)
+  const [isPremium] = useState(false)
+
+  // 模擬分析後的句子資料
+  const mockSentenceAnalysis = {
+    meaning: "他在我們的會議中提出了這件事，但沒有人同意。這句話表達了在會議中有人提出某個議題或想法，但得不到其他與會者的認同。",
+    words: {
+      "he": {
+        word: "he",
+        translation: "他",
+        definition: "Used to refer to a male person or animal",
+        partOfSpeech: "pronoun",
+        pronunciation: "/hiː/",
+        synonyms: ["him", "that man"],
+        isPhrase: false
+      },
+      "brought": {
+        word: "brought",
+        translation: "帶來、提出",
+        definition: "Past tense of bring; to take or carry something to a place",
+        partOfSpeech: "verb",
+        pronunciation: "/brɔːt/",
+        synonyms: ["carried", "took", "delivered"],
+        isPhrase: true,
+        phraseInfo: {
+          phrase: "bring up",
+          meaning: "提出（話題）、養育",
+          warning: "在這個句子中，\"brought up\" 是一個片語，意思是\"提出話題\"，而不是單純的\"帶來\""
+        }
+      },
+      "this": {
+        word: "this",
+        translation: "這個",
+        definition: "Used to indicate something near or just mentioned",
+        partOfSpeech: "pronoun",
+        pronunciation: "/ðɪs/",
+        synonyms: ["that", "it"],
+        isPhrase: false
+      },
+      "thing": {
+        word: "thing",
+        translation: "事情、東西",
+        definition: "An object, fact, or situation",
+        partOfSpeech: "noun",
+        pronunciation: "/θɪŋ/",
+        synonyms: ["object", "matter", "item"],
+        isPhrase: false
+      },
+      "up": {
+        word: "up",
+        translation: "向上",
+        definition: "Toward a higher place or position",
+        partOfSpeech: "adverb",
+        pronunciation: "/ʌp/",
+        synonyms: ["upward", "above"],
+        isPhrase: true,
+        phraseInfo: {
+          phrase: "bring up",
+          meaning: "提出（話題）、養育",
+          warning: "\"up\" 在這裡是片語 \"bring up\" 的一部分，不是單獨的\"向上\"的意思"
+        }
+      },
+      "during": {
+        word: "during",
+        translation: "在...期間",
+        definition: "Throughout the course or duration of",
+        partOfSpeech: "preposition",
+        pronunciation: "/ˈdjʊərɪŋ/",
+        synonyms: ["throughout", "while"],
+        isPhrase: false
+      },
+      "our": {
+        word: "our",
+        translation: "我們的",
+        definition: "Belonging to us",
+        partOfSpeech: "pronoun",
+        pronunciation: "/aʊər/",
+        synonyms: ["ours"],
+        isPhrase: false
+      },
+      "meeting": {
+        word: "meeting",
+        translation: "會議",
+        definition: "An organized gathering of people for discussion",
+        partOfSpeech: "noun",
+        pronunciation: "/ˈmiːtɪŋ/",
+        synonyms: ["conference", "assembly", "gathering"],
+        isPhrase: false
+      },
+      "and": {
+        word: "and",
+        translation: "和、而且",
+        definition: "Used to connect words or clauses",
+        partOfSpeech: "conjunction",
+        pronunciation: "/ænd/",
+        synonyms: ["plus", "also"],
+        isPhrase: false
+      },
+      "no": {
+        word: "no",
+        translation: "沒有",
+        definition: "Not any; not one",
+        partOfSpeech: "determiner",
+        pronunciation: "/nəʊ/",
+        synonyms: ["none", "zero"],
+        isPhrase: false
+      },
+      "one": {
+        word: "one",
+        translation: "一個人、任何人",
+        definition: "A single person or thing",
+        partOfSpeech: "pronoun",
+        pronunciation: "/wʌn/",
+        synonyms: ["someone", "anybody"],
+        isPhrase: false
+      },
+      "agreed": {
+        word: "agreed",
+        translation: "同意",
+        definition: "Past tense of agree; to have the same opinion",
+        partOfSpeech: "verb",
+        pronunciation: "/əˈɡriːd/",
+        synonyms: ["consented", "accepted", "approved"],
+        isPhrase: false
+      }
+    }
+  }
+
+  // 處理句子分析
+  const handleAnalyzeSentence = async () => {
+    if (!textInput.trim()) return
+
+    // 檢查使用次數限制
+    if (!isPremium && usageCount >= 5) {
+      alert('❌ 免費用戶 3 小時內只能分析 5 次句子，請稍後再試或升級到付費版本')
+      return
+    }
+
+    setIsAnalyzing(true)
+
+    try {
+      // 模擬 API 調用
+      await new Promise(resolve => setTimeout(resolve, 2000))
+
+      setSentenceAnalysis(mockSentenceAnalysis.words)
+      setSentenceMeaning(mockSentenceAnalysis.meaning)
+      setShowAnalysisView(true)
+      setUsageCount(prev => prev + 1)
+    } catch (error) {
+      console.error('Error analyzing sentence:', error)
+      alert('分析句子時發生錯誤，請稍後再試')
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Navigation */}
+      <nav className="bg-white shadow-sm">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between h-16">
+            <div className="flex items-center">
+              <h1 className="text-2xl font-bold text-blue-600">DramaLing</h1>
+            </div>
+            <div className="flex items-center space-x-4">
+              <span className="text-gray-600">Demo 版本</span>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {!showAnalysisView ? (
+          <div className="max-w-4xl mx-auto">
+            <h1 className="text-3xl font-bold mb-8">AI 智能生成詞卡 - 演示版</h1>
+
+            {/* Input Mode Selection */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">原始例句類型</h2>
+              <div className="grid grid-cols-2 gap-4">
+                <button
+                  onClick={() => setMode('manual')}
+                  className={`p-4 rounded-lg border-2 transition-all ${
+                    mode === 'manual'
+                      ? 'border-blue-600 bg-blue-50'
+                      : 'border-gray-200 hover:border-gray-300'
+                  }`}
+                >
+                  <div className="text-2xl mb-2">✍️</div>
+                  <div className="font-semibold">手動輸入</div>
+                  <div className="text-sm text-gray-600 mt-1">貼上或輸入英文文本</div>
+                </button>
+                <button
+                  onClick={() => setMode('screenshot')}
+                  disabled={!isPremium}
+                  className={`p-4 rounded-lg border-2 transition-all relative ${
+                    mode === 'screenshot'
+                      ? 'border-blue-600 bg-blue-50'
+                      : isPremium
+                      ? 'border-gray-200 hover:border-gray-300'
+                      : 'border-gray-200 bg-gray-100 cursor-not-allowed opacity-60'
+                  }`}
+                >
+                  <div className="text-2xl mb-2">📷</div>
+                  <div className="font-semibold">影劇截圖</div>
+                  <div className="text-sm text-gray-600 mt-1">上傳影劇截圖 (Phase 2)</div>
+                  {!isPremium && (
+                    <div className="absolute top-2 right-2 px-2 py-1 bg-yellow-100 text-yellow-700 text-xs rounded-full">
+                      訂閱功能
+                    </div>
+                  )}
+                </button>
+              </div>
+            </div>
+
+            {/* Content Input */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <div>
+                <h2 className="text-lg font-semibold mb-4">輸入英文文本</h2>
+                <textarea
+                  value={textInput}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    if (mode === 'manual' && value.length > 50) {
+                      return // 阻止輸入超過50字
+                    }
+                    setTextInput(value)
+                  }}
+                  placeholder={mode === 'manual'
+                    ? "輸入英文句子（最多50字）..."
+                    : "貼上您想要學習的英文文本，例如影劇對話、文章段落..."
+                  }
+                  className={`w-full h-40 px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none resize-none ${
+                    mode === 'manual' && textInput.length >= 45 ? 'border-yellow-400' :
+                    mode === 'manual' && textInput.length >= 50 ? 'border-red-400' : 'border-gray-300'
+                  }`}
+                />
+                <div className="mt-2 flex justify-between text-sm">
+                  <span className={`${
+                    mode === 'manual' && textInput.length >= 45 ? 'text-yellow-600' :
+                    mode === 'manual' && textInput.length >= 50 ? 'text-red-600' : 'text-gray-600'
+                  }`}>
+                    {mode === 'manual' ? `最多 50 字元 • 目前：${textInput.length} 字元` : `最多 5000 字元 • 目前：${textInput.length} 字元`}
+                  </span>
+                  {mode === 'manual' && textInput.length > 40 && (
+                    <span className={textInput.length >= 50 ? 'text-red-600' : 'text-yellow-600'}>
+                      {textInput.length >= 50 ? '已達上限！' : `還可輸入 ${50 - textInput.length} 字元`}
+                    </span>
+                  )}
+                </div>
+
+                {/* 預設示例 */}
+                {!textInput && (
+                  <div className="mt-4 p-3 bg-gray-50 rounded-lg">
+                    <div className="text-sm text-gray-700 mb-2">
+                      <strong>示例句子：</strong>
+                    </div>
+                    <button
+                      onClick={() => setTextInput("He brought this thing up during our meeting and no one agreed.")}
+                      className="text-sm text-blue-600 hover:text-blue-800 bg-blue-50 px-3 py-1 rounded border border-blue-200"
+                    >
+                      點擊使用示例：He brought this thing up during our meeting and no one agreed.
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 新的按鈕區域 */}
+            <div className="space-y-4">
+              {/* 分析句子按鈕 */}
+              <button
+                onClick={handleAnalyzeSentence}
+                disabled={isAnalyzing || (mode === 'manual' && (!textInput || textInput.length > 50)) || (mode === 'screenshot')}
+                className="w-full bg-blue-600 text-white py-4 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isAnalyzing ? (
+                  <span className="flex items-center justify-center">
+                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    正在分析句子中...
+                  </span>
+                ) : (
+                  '🔍 分析句子（點擊查詢單字）'
+                )}
+              </button>
+
+              {/* 使用次數顯示 */}
+              <div className="text-center text-sm text-gray-600">
+                {isPremium ? (
+                  <span className="text-green-600">🌟 付費用戶：無限制使用</span>
+                ) : (
+                  <span className={usageCount >= 4 ? 'text-red-600' : usageCount >= 3 ? 'text-yellow-600' : 'text-gray-600'}>
+                    免費用戶：已使用 {usageCount}/5 次 (3小時內)
+                    {usageCount >= 5 && <span className="block text-red-500 mt-1">已達上限，請稍後再試</span>}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ) : (
+          /* 句子分析視圖 */
+          <div className="max-w-4xl mx-auto">
+            <div className="flex items-center justify-between mb-6">
+              <h1 className="text-3xl font-bold">句子分析結果</h1>
+              <button
+                onClick={() => setShowAnalysisView(false)}
+                className="text-gray-600 hover:text-gray-900"
+              >
+                ← 返回
+              </button>
+            </div>
+
+            {/* 原始句子顯示 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">原始句子</h2>
+              <div className="bg-gray-50 p-4 rounded-lg mb-4">
+                <div className="text-lg leading-relaxed">
+                  {textInput}
+                </div>
+              </div>
+
+              <h3 className="text-base font-semibold mb-2">整句意思</h3>
+              <div className="text-gray-700 leading-relaxed">
+                {sentenceMeaning}
+              </div>
+            </div>
+
+            {/* 互動式文字 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">點擊查詢單字意思</h2>
+              <div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-400 mb-4">
+                <p className="text-sm text-blue-800">
+                  💡 <strong>使用說明：</strong>點擊下方句子中的任何單字，可以立即查看詳細意思。
+                  黃色背景表示該單字屬於片語或俚語，會優先顯示片語意思。
+                </p>
+              </div>
+
+              <div className="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+                <ClickableText
+                  text={textInput}
+                  analysis={sentenceAnalysis}
+                  onWordClick={(word, analysis) => {
+                    console.log('Clicked word:', word, analysis)
+                  }}
+                />
+              </div>
+            </div>
+
+            {/* 操作按鈕 */}
+            <div className="bg-white rounded-xl shadow-sm p-6">
+              <div className="flex gap-4">
+                <button
+                  onClick={() => setShowAnalysisView(false)}
+                  className="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors"
+                >
+                  🔄 分析新句子
+                </button>
+                <button
+                  onClick={() => alert('詞卡生成功能開發中...')}
+                  className="flex-1 bg-blue-600 text-white py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors"
+                >
+                  📖 生成詞卡
+                </button>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index 6836b1b..8f092ac 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -1,9 +1,10 @@
 'use client'
 
 import { useState } from 'react'
-import Link from 'next/link'
 import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { Navigation } from '@/components/Navigation'
+import { ClickableTextV2 } from '@/components/ClickableTextV2'
+import { GrammarCorrectionPanel } from '@/components/GrammarCorrectionPanel'
 
 function GenerateContent() {
   const [mode, setMode] = useState<'manual' | 'screenshot'>('manual')
@@ -11,198 +12,268 @@ function GenerateContent() {
   const [extractionType, setExtractionType] = useState<'vocabulary' | 'smart'>('vocabulary')
   const [cardCount, setCardCount] = useState(10)
   const [isGenerating, setIsGenerating] = useState(false)
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
   const [generatedCards, setGeneratedCards] = useState<any[]>([])
   const [showPreview, setShowPreview] = useState(false)
-  const [isPremium] = useState(false) // Mock premium status
-  const [showImageForCard, setShowImageForCard] = useState<{ [key: number]: boolean }>({}) // Track which cards show images
-  const [modalImage, setModalImage] = useState<string | null>(null) // Track modal image
+  const [showAnalysisView, setShowAnalysisView] = useState(false)
+  const [sentenceAnalysis, setSentenceAnalysis] = useState<any>(null)
+  const [sentenceMeaning, setSentenceMeaning] = useState('')
+  const [grammarCorrection, setGrammarCorrection] = useState<any>(null)
+  const [finalText, setFinalText] = useState('') // 最終用於分析的文本
+  const [usageCount, setUsageCount] = useState(0)
+  const [isPremium] = useState(false)
 
-  const mockGeneratedCards = [
-    {
-      id: 1,
-      word: 'brought',
-      partOfSpeech: 'verb',
-      pronunciation: {
-        us: '/brɔːt/',
-        uk: '/brɔːt/'
-      },
-      translation: '提出、帶來',
-      definition: 'Past tense of bring; to mention or introduce a topic in conversation',
-      synonyms: ['mentioned', 'raised', 'introduced'],
-      antonyms: ['concealed', 'withheld'],
-      originalExample: 'He brought this thing up during our meeting and no one agreed.',
-      originalExampleTranslation: '他在我們的會議中提出了這件事，但沒有人同意。',
-      generatedExample: {
-        sentence: 'She brought up an interesting point about the budget.',
-        translation: '她提出了一個關於預算的有趣觀點。',
-        imageUrl: '/images/examples/bring_up.png',
-        audioUrl: '#'
-      },
-      difficulty: 'B1'
+  // 模擬正確句子的分析資料
+  const mockCorrectSentenceAnalysis = {
+    meaning: "他在我們的會議中提出了這件事，但沒有人同意。這句話表達了在會議中有人提出某個議題或想法，但得不到其他與會者的認同。",
+    grammarCorrection: {
+      hasErrors: false,
+      originalText: "He brought this thing up during our meeting and no one agreed.",
+      correctedText: null,
+      corrections: [],
+      confidenceScore: 0.98
     },
-    {
-      id: 2,
-      word: 'instincts',
-      partOfSpeech: 'noun',
-      pronunciation: {
-        us: '/ˈɪnstɪŋkts/',
-        uk: '/ˈɪnstɪŋkts/'
+    highValueWords: ["brought", "up", "meeting", "agreed"],
+    words: {
+      "brought": {
+        word: "brought",
+        translation: "帶來、提出",
+        definition: "Past tense of bring; to take or carry something to a place",
+        partOfSpeech: "verb",
+        pronunciation: "/brɔːt/",
+        synonyms: ["carried", "took", "delivered"],
+        antonyms: ["removed", "took away"],
+        isPhrase: true,
+        isHighValue: true,
+        learningPriority: "high",
+        phraseInfo: {
+          phrase: "bring up",
+          meaning: "提出（話題）、養育",
+          warning: "在這個句子中，\"brought up\" 是一個片語，意思是\"提出話題\"，而不是單純的\"帶來\"",
+          colorCode: "#F59E0B"
+        },
+        difficultyLevel: "B1"
       },
-      translation: '本能、直覺',
-      definition: 'Natural abilities that help living things survive without learning',
-      synonyms: ['intuition', 'impulse', 'tendency'],
-      antonyms: ['logic', 'reasoning'],
-      originalExample: 'Animals use their instincts to find food and stay safe.',
-      originalExampleTranslation: '動物利用本能來尋找食物並保持安全。',
-      generatedExample: {
-        sentence: 'Trust your instincts when making important decisions.',
-        translation: '在做重要決定時要相信你的直覺。',
-        imageUrl: '/images/examples/instinct.png',
-        audioUrl: '#'
+      "up": {
+        word: "up",
+        translation: "向上",
+        definition: "Toward a higher place or position",
+        partOfSpeech: "adverb",
+        pronunciation: "/ʌp/",
+        synonyms: ["upward", "above"],
+        antonyms: ["down", "below"],
+        isPhrase: true,
+        isHighValue: true,
+        learningPriority: "high",
+        phraseInfo: {
+          phrase: "bring up",
+          meaning: "提出（話題）、養育",
+          warning: "\"up\" 在這裡是片語 \"bring up\" 的一部分，不是單獨的\"向上\"的意思",
+          colorCode: "#F59E0B"
+        },
+        difficultyLevel: "B1"
       },
-      difficulty: 'B2'
-    },
-    {
-      id: 3,
-      word: 'warrants',
-      partOfSpeech: 'noun',
-      pronunciation: {
-        us: '/ˈwɔːrənts/',
-        uk: '/ˈwɒrənts/'
+      "meeting": {
+        word: "meeting",
+        translation: "會議",
+        definition: "An organized gathering of people for discussion",
+        partOfSpeech: "noun",
+        pronunciation: "/ˈmiːtɪŋ/",
+        synonyms: ["conference", "assembly", "gathering"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "high",
+        difficultyLevel: "B2"
       },
-      translation: '搜查令、授權令',
-      definition: 'Official documents that give police permission to do something',
-      synonyms: ['authorization', 'permit', 'license'],
-      antonyms: ['prohibition', 'ban'],
-      originalExample: 'The police obtained warrants to search the building.',
-      originalExampleTranslation: '警方取得了搜查令來搜查這棟建築物。',
-      generatedExample: {
-        sentence: 'The judge issued arrest warrants for three suspects.',
-        translation: '法官對三名嫌疑人發出了逮捕令。',
-        imageUrl: '/images/examples/warrant.png',
-        audioUrl: '#'
+      "thing": {
+        word: "thing",
+        translation: "事情、東西",
+        definition: "An object, fact, or situation",
+        partOfSpeech: "noun",
+        pronunciation: "/θɪŋ/",
+        synonyms: ["object", "matter", "item"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false,
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
       },
-      difficulty: 'C1'
+      "agreed": {
+        word: "agreed",
+        translation: "同意",
+        definition: "Past tense of agree; to have the same opinion",
+        partOfSpeech: "verb",
+        pronunciation: "/əˈɡriːd/",
+        synonyms: ["consented", "accepted", "approved"],
+        antonyms: ["disagreed", "refused"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "medium",
+        difficultyLevel: "B1"
+      }
     }
-  ]
+  }
 
-  const handleGenerate = async () => {
+  // 模擬有語法錯誤的句子分析資料
+  const mockErrorSentenceAnalysis = {
+    meaning: "我昨天去學校遇見了我的朋友們。這句話描述了過去發生的事情，表達了去學校並遇到朋友的經歷。",
+    grammarCorrection: {
+      hasErrors: true,
+      originalText: "I go to school yesterday and meet my friends.",
+      correctedText: "I went to school yesterday and met my friends.",
+      corrections: [
+        {
+          position: { start: 2, end: 4 },
+          errorType: "tense_mismatch",
+          original: "go",
+          corrected: "went",
+          reason: "過去式時態修正：句子中有 'yesterday'，應使用過去式",
+          severity: "high"
+        },
+        {
+          position: { start: 29, end: 33 },
+          errorType: "tense_mismatch",
+          original: "meet",
+          corrected: "met",
+          reason: "過去式時態修正：與 'went' 保持時態一致",
+          severity: "high"
+        }
+      ],
+      confidenceScore: 0.95
+    },
+    highValueWords: ["went", "yesterday", "met", "friends"],
+    words: {
+      "went": {
+        word: "went",
+        translation: "去、前往",
+        definition: "Past tense of go; to move or travel to a place",
+        partOfSpeech: "verb",
+        pronunciation: "/went/",
+        synonyms: ["traveled", "moved", "proceeded"],
+        antonyms: ["stayed", "remained"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "high",
+        difficultyLevel: "A2"
+      },
+      "yesterday": {
+        word: "yesterday",
+        translation: "昨天",
+        definition: "The day before today",
+        partOfSpeech: "adverb",
+        pronunciation: "/ˈjestədeɪ/",
+        synonyms: ["the day before"],
+        antonyms: ["tomorrow", "today"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "medium",
+        difficultyLevel: "A1"
+      },
+      "met": {
+        word: "met",
+        translation: "遇見、認識",
+        definition: "Past tense of meet; to encounter or come together with",
+        partOfSpeech: "verb",
+        pronunciation: "/met/",
+        synonyms: ["encountered", "saw", "found"],
+        antonyms: ["avoided", "missed"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "high",
+        difficultyLevel: "A2"
+      },
+      "friends": {
+        word: "friends",
+        translation: "朋友們",
+        definition: "People you like and know well",
+        partOfSpeech: "noun",
+        pronunciation: "/frends/",
+        synonyms: ["companions", "buddies", "pals"],
+        antonyms: ["enemies", "strangers"],
+        isPhrase: false,
+        isHighValue: true,
+        learningPriority: "medium",
+        difficultyLevel: "A1"
+      },
+      "school": {
+        word: "school",
+        translation: "學校",
+        definition: "A place where children go to learn",
+        partOfSpeech: "noun",
+        pronunciation: "/skuːl/",
+        synonyms: ["educational institution"],
+        antonyms: [],
+        isPhrase: false,
+        isHighValue: false,
+        learningPriority: "low",
+        difficultyLevel: "A1",
+        costIncurred: 1
+      }
+    }
+  }
+
+  // 處理句子分析
+  const handleAnalyzeSentence = async () => {
     if (!textInput.trim()) return
 
-    setIsGenerating(true)
+    if (!isPremium && usageCount >= 5) {
+      alert('❌ 免費用戶 3 小時內只能分析 5 次句子，請稍後再試或升級到付費版本')
+      return
+    }
+
+    setIsAnalyzing(true)
 
     try {
-      const response = await fetch('http://localhost:5000/api/ai/test/generate', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          inputText: textInput,
-          extractionType: extractionType,
-          cardCount: cardCount
-        })
-      })
+      await new Promise(resolve => setTimeout(resolve, 2500))
 
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`)
-      }
+      // 根據輸入文本決定使用哪個模擬資料
+      const hasGrammarErrors = textInput.toLowerCase().includes('go to school yesterday') ||
+                              textInput.toLowerCase().includes('meet my friends')
 
-      const result = await response.json()
-
-      if (result.success) {
-        // 將後端格式轉換為前端格式
-        const convertedCards = result.data.generatedCards.map((card: any, index: number) => ({
-          id: index + 1,
-          word: card.word,
-          partOfSpeech: card.partOfSpeech,
-          pronunciation: {
-            us: card.pronunciation || '/unknown/',
-            uk: card.pronunciation || '/unknown/'
-          },
-          translation: card.translation,
-          definition: card.definition,
-          synonyms: card.synonyms || [],
-          antonyms: [], // 後端暫不提供，使用空陣列
-          originalExample: card.example || '',
-          originalExampleTranslation: card.exampleTranslation || '',
-          generatedExample: {
-            sentence: card.example || '',
-            translation: card.exampleTranslation || '',
-            imageUrl: '/images/examples/placeholder.png', // 佔位圖
-            audioUrl: '#'
-          },
-          difficulty: card.difficultyLevel || 'B1'
-        }))
-
-        setGeneratedCards(convertedCards)
-        setShowPreview(true)
+      if (hasGrammarErrors) {
+        setSentenceAnalysis(mockErrorSentenceAnalysis.words)
+        setSentenceMeaning(mockErrorSentenceAnalysis.meaning)
+        setGrammarCorrection(mockErrorSentenceAnalysis.grammarCorrection)
+        setFinalText(mockErrorSentenceAnalysis.grammarCorrection.correctedText || textInput)
       } else {
-        throw new Error(result.error || 'Generation failed')
+        setSentenceAnalysis(mockCorrectSentenceAnalysis.words)
+        setSentenceMeaning(mockCorrectSentenceAnalysis.meaning)
+        setGrammarCorrection(mockCorrectSentenceAnalysis.grammarCorrection)
+        setFinalText(textInput)
       }
+
+      setShowAnalysisView(true)
+      setUsageCount(prev => prev + 1)
     } catch (error) {
-      console.error('Error generating cards:', error)
-      alert(`生成詞卡時發生錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
-      // 錯誤時使用模擬資料作為備用
-      setGeneratedCards(mockGeneratedCards)
-      setShowPreview(true)
+      console.error('Error analyzing sentence:', error)
+      alert('分析句子時發生錯誤，請稍後再試')
     } finally {
-      setIsGenerating(false)
+      setIsAnalyzing(false)
     }
   }
 
-  const handleSaveCards = async () => {
-    if (generatedCards.length === 0) return
-
-    try {
-      // 將前端格式轉換為後端格式
-      const cardsToSave = generatedCards.map(card => ({
-        word: card.word,
-        partOfSpeech: card.partOfSpeech,
-        pronunciation: card.pronunciation.us, // 使用美式發音
-        translation: card.translation,
-        definition: card.definition,
-        synonyms: card.synonyms,
-        example: card.originalExample || card.generatedExample.sentence,
-        exampleTranslation: card.originalExampleTranslation || card.generatedExample.translation,
-        difficultyLevel: card.difficulty
-      }))
-
-      const response = await fetch('http://localhost:5000/api/ai/test/save', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({
-          selectedCards: cardsToSave
-        })
-      })
-
-      if (!response.ok) {
-        throw new Error(`HTTP error! status: ${response.status}`)
-      }
-
-      const result = await response.json()
-
-      if (result.success) {
-        alert(`🎉 成功保存 ${result.data.savedCount} 張詞卡到「${result.data.cardSetName}」！`)
-        // 可選：清空生成的詞卡或跳轉到詞卡列表
-        // setGeneratedCards([])
-        // setShowPreview(false)
-      } else {
-        throw new Error(result.error || 'Save failed')
-      }
-    } catch (error) {
-      console.error('Error saving cards:', error)
-      alert(`❌ 保存詞卡時發生錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
+  const handleAcceptCorrection = () => {
+    if (grammarCorrection?.correctedText) {
+      setFinalText(grammarCorrection.correctedText)
+      alert('✅ 已採用修正版本，後續學習將基於正確的句子進行！')
     }
   }
 
-  const toggleImageForCard = (cardId: number) => {
-    setShowImageForCard(prev => ({
-      ...prev,
-      [cardId]: !prev[cardId]
-    }))
+  const handleRejectCorrection = () => {
+    setFinalText(grammarCorrection?.originalText || textInput)
+    alert('📝 已保持原始版本，將基於您的原始輸入進行學習。')
+  }
+
+  const getHighValueCount = () => {
+    if (!sentenceAnalysis) return 0
+    return Object.values(sentenceAnalysis).filter((word: any) => word.isHighValue).length
+  }
+
+  const getLowValueCount = () => {
+    if (!sentenceAnalysis) return 0
+    return Object.values(sentenceAnalysis).filter((word: any) => !word.isHighValue).length
   }
 
   return (
@@ -211,9 +282,36 @@ function GenerateContent() {
       <Navigation />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {!showPreview ? (
+        {!showAnalysisView ? (
           <div className="max-w-4xl mx-auto">
-            <h1 className="text-3xl font-bold mb-8">AI 智能生成詞卡</h1>
+            <h1 className="text-3xl font-bold mb-8">AI 智能語法修正 + 高價值標記系統</h1>
+
+            {/* 功能說明 */}
+            <div className="bg-gradient-to-r from-red-50 to-green-50 rounded-xl p-6 mb-6 border border-red-200">
+              <h2 className="text-lg font-semibold mb-3 text-red-800">🔧 語法修正 + 高價值標記特色</h2>
+              <div className="grid md:grid-cols-2 gap-4 text-sm">
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">❌</span>
+                    <span><strong>智能錯誤檢測</strong> - 9種語法錯誤類型</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">🔧</span>
+                    <span><strong>自動修正建議</strong> - 詳細修正說明</span>
+                  </div>
+                </div>
+                <div className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">⭐</span>
+                    <span><strong>高價值標記</strong> - 基於修正後句子</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <span className="text-lg">💰</span>
+                    <span><strong>成本優化</strong> - 語法修正不額外收費</span>
+                  </div>
+                </div>
+              </div>
+            </div>
 
             {/* Input Mode Selection */}
             <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
@@ -254,6 +352,70 @@ function GenerateContent() {
               </div>
             </div>
 
+            {/* Content Input */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">輸入英文文本 (更新：300字限制)</h2>
+              <textarea
+                value={textInput}
+                onChange={(e) => {
+                  const value = e.target.value
+                  if (mode === 'manual' && value.length > 300) {
+                    return // 阻止輸入超過300字
+                  }
+                  setTextInput(value)
+                }}
+                placeholder={mode === 'manual'
+                  ? "輸入英文句子（最多300字）..."
+                  : "貼上您想要學習的英文文本，例如影劇對話、文章段落..."
+                }
+                className={`w-full h-40 px-4 py-3 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none resize-none ${
+                  mode === 'manual' && textInput.length >= 280 ? 'border-yellow-400' :
+                  mode === 'manual' && textInput.length >= 300 ? 'border-red-400' : 'border-gray-300'
+                }`}
+              />
+              <div className="mt-2 flex justify-between text-sm">
+                <span className={`${
+                  mode === 'manual' && textInput.length >= 280 ? 'text-yellow-600' :
+                  mode === 'manual' && textInput.length >= 300 ? 'text-red-600' : 'text-gray-600'
+                }`}>
+                  {mode === 'manual' ? `最多 300 字元 • 目前：${textInput.length} 字元` : `最多 5000 字元 • 目前：${textInput.length} 字元`}
+                </span>
+                {mode === 'manual' && textInput.length > 250 && (
+                  <span className={textInput.length >= 300 ? 'text-red-600' : 'text-yellow-600'}>
+                    {textInput.length >= 300 ? '已達上限！' : `還可輸入 ${300 - textInput.length} 字元`}
+                  </span>
+                )}
+              </div>
+
+              {/* 預設示例 */}
+              {!textInput && (
+                <div className="mt-4 space-y-3">
+                  <div className="p-3 bg-gray-50 rounded-lg">
+                    <div className="text-sm text-gray-700 mb-2">
+                      <strong>✅ 正確語法示例：</strong>
+                    </div>
+                    <button
+                      onClick={() => setTextInput("He brought this thing up during our meeting and no one agreed.")}
+                      className="text-sm text-green-600 hover:text-green-800 bg-green-50 px-3 py-1 rounded border border-green-200 w-full text-left"
+                    >
+                      He brought this thing up during our meeting and no one agreed.
+                    </button>
+                  </div>
+                  <div className="p-3 bg-red-50 rounded-lg">
+                    <div className="text-sm text-red-700 mb-2">
+                      <strong>❌ 語法錯誤示例（測試修正功能）：</strong>
+                    </div>
+                    <button
+                      onClick={() => setTextInput("I go to school yesterday and meet my friends.")}
+                      className="text-sm text-red-600 hover:text-red-800 bg-red-50 px-3 py-1 rounded border border-red-200 w-full text-left"
+                    >
+                      I go to school yesterday and meet my friends.
+                    </button>
+                  </div>
+                </div>
+              )}
+            </div>
+
             {/* Extraction Type Selection */}
             <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
               <h2 className="text-lg font-semibold mb-4">萃取方式</h2>
@@ -285,365 +447,189 @@ function GenerateContent() {
               </div>
             </div>
 
-            {/* Content Input */}
-            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
-              {mode === 'manual' ? (
-                <div>
-                  <h2 className="text-lg font-semibold mb-4">輸入英文文本</h2>
-                  <textarea
-                    value={textInput}
-                    onChange={(e) => setTextInput(e.target.value)}
-                    placeholder="貼上您想要學習的英文文本，例如影劇對話、文章段落..."
-                    className="w-full h-40 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent outline-none resize-none"
-                  />
-                  <div className="mt-2 text-sm text-gray-600">
-                    最多 5000 字元 • 目前：{textInput.length} 字元
-                  </div>
+            {/* 分析按鈕 */}
+            <div className="space-y-4">
+              <button
+                onClick={handleAnalyzeSentence}
+                disabled={isAnalyzing || (mode === 'manual' && (!textInput || textInput.length > 300)) || (mode === 'screenshot')}
+                className="w-full bg-primary text-white py-4 rounded-lg font-semibold hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+              >
+                {isAnalyzing ? (
+                  <span className="flex items-center justify-center">
+                    <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                      <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                      <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    正在檢查語法並標記高價值詞彙...
+                  </span>
+                ) : (
+                  '🔍 語法檢查 + 高價值詞彙分析'
+                )}
+              </button>
 
-                  {/* Extraction Type Info */}
-                  {extractionType === 'vocabulary' ? (
-                    <div className="mt-4 p-3 bg-blue-50 rounded-lg">
-                      <div className="text-sm text-blue-800">
-                        <strong>📖 詞彙萃取模式</strong>
-                        <ul className="mt-2 space-y-1 text-xs">
-                          <li>• 將每個單字查詢字典 API</li>
-                          <li>• 自動標記 CEFR 難度等級</li>
-                          <li>• 提供完整定義和例句</li>
-                        </ul>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className="mt-4 p-3 bg-purple-50 rounded-lg">
-                      <div className="text-sm text-purple-800">
-                        <strong>🤖 智能萃取模式</strong>
-                        <ul className="mt-2 space-y-1 text-xs">
-                          <li>• AI 分析常用片語和俚語</li>
-                          <li>• 生成相關詞彙內容</li>
-                          <li>• 提供文化背景說明</li>
-                        </ul>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              ) : (
-                <div>
-                  <h2 className="text-lg font-semibold mb-4">上傳影劇截圖</h2>
-                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
-                    <div className="text-4xl mb-3">📷</div>
-                    <div className="text-gray-600 mb-2">點擊或拖拳上傳截圖</div>
-                    <div className="text-sm text-gray-500">支持 JPG, PNG 格式，最大 10MB</div>
-                    <div className="mt-4">
-                      <span className="inline-block px-4 py-2 bg-gray-100 text-gray-400 rounded-lg">
-                        Phase 2 功能開發中
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              )}
-            </div>
-
-            {/* Generation Settings */}
-            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
-              <h2 className="text-lg font-semibold mb-4">生成設定</h2>
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-sm font-medium text-gray-700 mb-2">
-                    生成數量：{cardCount} 個詞卡
-                  </label>
-                  <input
-                    type="range"
-                    min="5"
-                    max="20"
-                    value={cardCount}
-                    onChange={(e) => setCardCount(Number(e.target.value))}
-                    className="w-full"
-                  />
-                  <div className="flex justify-between text-xs text-gray-500 mt-1">
-                    <span>5</span>
-                    <span>預設 10</span>
-                    <span>20</span>
-                  </div>
-                </div>
-
-                {/* User Limits */}
-                <div className="p-3 bg-gray-50 rounded-lg">
-                  <div className="text-sm">
-                    {isPremium ? (
-                      <div className="text-green-700">
-                        <strong>🌟 訂閱用戶</strong>
-                        <div className="text-xs mt-1">
-                          • 每天最多生成 50 張例句圖
-                          <br />
-                          • 今日已使用：0/50
-                        </div>
-                      </div>
-                    ) : (
-                      <div className="text-gray-700">
-                        <strong>🆓 免費用戶</strong>
-                        <div className="text-xs mt-1">
-                          • 無法自行生成例句圖
-                          <br />
-                          • 可使用系統現成例句圖
-                          <br />
-                          • 每日學習數量無限制
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
+              <div className="text-center text-sm text-gray-600">
+                {isPremium ? (
+                  <span className="text-green-600">🌟 付費用戶：無限制使用</span>
+                ) : (
+                  <span className={usageCount >= 4 ? 'text-red-600' : usageCount >= 3 ? 'text-yellow-600' : 'text-gray-600'}>
+                    免費用戶：已使用 {usageCount}/5 次 (3小時內)
+                    {usageCount >= 5 && <span className="block text-red-500 mt-1">已達上限，請稍後再試</span>}
+                  </span>
+                )}
               </div>
             </div>
-
-            {/* Generate Button */}
-            <button
-              onClick={handleGenerate}
-              disabled={isGenerating || (mode === 'manual' && !textInput) || (mode === 'screenshot')}
-              className="w-full bg-primary text-white py-4 rounded-lg font-semibold hover:bg-primary-hover transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
-            >
-              {isGenerating ? (
-                <span className="flex items-center justify-center">
-                  <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                  </svg>
-                  正在萃取詞彙中...
-                </span>
-              ) : extractionType === 'vocabulary' ? (
-                '📖 開始詞彙萃取'
-              ) : (
-                '🤖 開始智能萃取'
-              )}
-            </button>
           </div>
         ) : (
-          /* Preview Generated Cards */
-          <div className="max-w-6xl mx-auto">
+          /* 句子分析視圖 */
+          <div className="max-w-4xl mx-auto">
             <div className="flex items-center justify-between mb-6">
-              <h1 className="text-3xl font-bold">生成結果預覽</h1>
+              <h1 className="text-3xl font-bold">語法檢查 + 高價值標記結果</h1>
               <button
-                onClick={() => setShowPreview(false)}
+                onClick={() => setShowAnalysisView(false)}
                 className="text-gray-600 hover:text-gray-900"
               >
                 ← 返回
               </button>
             </div>
 
+            {/* 語法修正面板 */}
+            {grammarCorrection && (
+              <GrammarCorrectionPanel
+                correction={grammarCorrection}
+                onAcceptCorrection={handleAcceptCorrection}
+                onRejectCorrection={handleRejectCorrection}
+              />
+            )}
+
+            {/* 分析統計 */}
             <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
-              <div className="flex items-center justify-between mb-4">
-                <h2 className="text-lg font-semibold">已生成 {generatedCards.length} 個詞卡</h2>
-                <div className="space-x-3">
-                  <button className="text-primary hover:text-primary-hover font-medium">
-                    重新生成
-                  </button>
-                  <button
-                    onClick={handleSaveCards}
-                    className="bg-primary text-white px-6 py-2 rounded-lg font-medium hover:bg-primary-hover transition-colors"
-                  >
-                    保存到卡組
-                  </button>
+              <h2 className="text-lg font-semibold mb-4">分析統計</h2>
+              <div className="grid grid-cols-3 gap-4">
+                <div className="text-center p-3 bg-green-50 rounded-lg">
+                  <div className="text-2xl font-bold text-green-600">{getHighValueCount()}</div>
+                  <div className="text-sm text-green-700">高價值詞彙</div>
+                  <div className="text-xs text-green-600">⭐ 免費點擊</div>
+                </div>
+                <div className="text-center p-3 bg-blue-50 rounded-lg">
+                  <div className="text-2xl font-bold text-blue-600">{getLowValueCount()}</div>
+                  <div className="text-sm text-blue-700">普通詞彙</div>
+                  <div className="text-xs text-blue-600">💰 點擊收費</div>
+                </div>
+                <div className="text-center p-3 bg-gray-50 rounded-lg">
+                  <div className="text-2xl font-bold text-gray-600">1</div>
+                  <div className="text-sm text-gray-700">本次消耗</div>
+                  <div className="text-xs text-gray-600">🔍 句子分析</div>
+                </div>
+              </div>
+            </div>
+
+            {/* 句子對比 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">句子分析</h2>
+              <div className="space-y-4">
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700 mb-2">📝 用戶輸入</h3>
+                  <div className="p-3 bg-gray-50 rounded-lg border">
+                    <div className="text-base">{textInput}</div>
+                  </div>
+                </div>
+
+                {finalText !== textInput && (
+                  <div>
+                    <h3 className="text-sm font-medium text-gray-700 mb-2">🎯 分析基礎（修正後）</h3>
+                    <div className="p-3 bg-blue-50 rounded-lg border border-blue-200">
+                      <div className="text-base font-medium">{finalText}</div>
+                      <div className="text-xs text-blue-600 mt-1">✨ 已修正語法錯誤</div>
+                    </div>
+                  </div>
+                )}
+
+                <div>
+                  <h3 className="text-sm font-medium text-gray-700 mb-2">📖 整句意思</h3>
+                  <div className="text-gray-700 leading-relaxed p-3 bg-gray-50 rounded-lg">
+                    {sentenceMeaning}
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* 互動式文字 */}
+            <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
+              <h2 className="text-lg font-semibold mb-4">智能高價值標記 - 點擊查詢單字</h2>
+
+              <div className="p-4 bg-gradient-to-r from-blue-50 to-green-50 rounded-lg border border-blue-200 mb-4">
+                <p className="text-sm text-blue-800 mb-3">
+                  <strong>💡 基於{finalText !== textInput ? '修正後' : '原始'}句子的智能分析：</strong>
+                </p>
+                <div className="grid grid-cols-1 md:grid-cols-3 gap-3 text-xs">
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 bg-yellow-100 border-2 border-yellow-400 rounded">片語⭐</div>
+                    <span>高價值片語（免費）</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 bg-green-100 border-2 border-green-400 rounded">單字⭐</div>
+                    <span>高價值單字（免費）</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <div className="px-2 py-1 border-b border-blue-300">普通</div>
+                    <span>普通單字（扣1次）</span>
+                  </div>
                 </div>
               </div>
 
-              <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-                {generatedCards.map((card) => (
-                  <div key={card.id} className="border rounded-lg p-5 hover:shadow-lg transition-shadow">
-                    <div className="flex items-start justify-between mb-4">
-                      <div className="flex-1">
-                        <h3 className="text-xl font-bold">{card.word}</h3>
-                        <div className="flex items-center gap-4 mt-1">
-                          <span className="text-sm text-gray-600">{card.partOfSpeech}</span>
-                          <div className="flex items-center gap-2">
-                            <button className="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
-                              🇺🇸 {card.pronunciation.us}
-                            </button>
-                            <button className="text-xs bg-gray-100 px-2 py-1 rounded hover:bg-gray-200">
-                              🇬🇧 {card.pronunciation.uk}
-                            </button>
-                            <button className="text-primary hover:text-primary-hover">
-                              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
-                              </svg>
-                            </button>
-                          </div>
-                        </div>
-                      </div>
-                      <button className="text-red-500 hover:text-red-700 text-2xl">×</button>
-                    </div>
+              <div className="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+                <ClickableTextV2
+                  text={finalText}
+                  analysis={sentenceAnalysis}
+                  remainingUsage={5 - usageCount}
+                  onWordClick={(word, analysis) => {
+                    console.log('Clicked word:', word, analysis)
+                  }}
+                  onWordCostConfirm={async (word, cost) => {
+                    if (usageCount >= 5) {
+                      alert('❌ 使用額度不足，無法查詢低價值詞彙')
+                      return false
+                    }
 
-                    <div className="space-y-3">
-                      <div>
-                        <div className="text-sm font-semibold text-gray-700">翻譯</div>
-                        <div className="text-base font-medium">{card.translation}</div>
-                      </div>
+                    const confirmed = window.confirm(
+                      `查詢 "${word}" 將消耗 ${cost} 次使用額度，您剩餘 ${5 - usageCount} 次。\n\n是否繼續？`
+                    )
 
-                      <div>
-                        <div className="text-sm font-semibold text-gray-700">定義</div>
-                        <div className="text-sm text-gray-600">{card.definition}</div>
-                      </div>
+                    if (confirmed) {
+                      setUsageCount(prev => prev + cost)
+                      return true
+                    }
+                    return false
+                  }}
+                />
+              </div>
+            </div>
 
-                      {card.synonyms.length > 0 && (
-                        <div>
-                          <div className="text-sm font-semibold text-gray-700">同義詞</div>
-                          <div className="flex flex-wrap gap-2 mt-1">
-                            {card.synonyms.map((syn, idx) => (
-                              <span key={idx} className="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs">
-                                {syn}
-                              </span>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-
-                      {card.antonyms.length > 0 && (
-                        <div>
-                          <div className="text-sm font-semibold text-gray-700">反義詞</div>
-                          <div className="flex flex-wrap gap-2 mt-1">
-                            {card.antonyms.map((ant, idx) => (
-                              <span key={idx} className="px-2 py-1 bg-red-100 text-red-700 rounded-full text-xs">
-                                {ant}
-                              </span>
-                            ))}
-                          </div>
-                        </div>
-                      )}
-
-                      <div>
-                        <div className="text-sm font-semibold text-gray-700 mb-2">例句</div>
-                        <div className="space-y-3">
-                          {/* 原始例句 */}
-                          <div className="border-l-2 border-gray-400 pl-3">
-                            <div className="flex items-start justify-between">
-                              <div className="flex-1">
-                                <div className="text-xs text-gray-500 mb-1">原始例句（來自輸入文本）</div>
-                                <div className="text-sm text-gray-800">
-                                  {card.originalExample.split(card.word).map((part, i) => (
-                                    <span key={i}>
-                                      {part}
-                                      {i < card.originalExample.split(card.word).length - 1 && (
-                                        <span className="font-bold text-primary">{card.word}</span>
-                                      )}
-                                    </span>
-                                  ))}
-                                </div>
-                                <div className="text-sm text-gray-500 mt-1">{card.originalExampleTranslation}</div>
-                              </div>
-                              <div className="flex items-center gap-1 ml-2">
-                                <button className="text-gray-400 hover:text-primary" title="播放例句">
-                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                  </svg>
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-
-                          {/* 生成例句 */}
-                          <div className="border-l-2 border-primary pl-3">
-                            <div className="flex items-start justify-between">
-                              <div className="flex-1">
-                                <div className="text-xs text-primary mb-1">AI 生成例句</div>
-                                <div className="text-sm text-gray-800">
-                                  {card.generatedExample.sentence.split(card.word).map((part, i) => (
-                                    <span key={i}>
-                                      {part}
-                                      {i < card.generatedExample.sentence.split(card.word).length - 1 && (
-                                        <span className="font-bold text-primary">{card.word}</span>
-                                      )}
-                                    </span>
-                                  ))}
-                                </div>
-                                <div className="text-sm text-gray-500 mt-1">{card.generatedExample.translation}</div>
-                              </div>
-                              <div className="flex items-center gap-1 ml-2">
-                                <button className="text-gray-400 hover:text-primary" title="播放例句">
-                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                  </svg>
-                                </button>
-                                <button
-                                  onClick={() => toggleImageForCard(card.id)}
-                                  className={`${showImageForCard[card.id] ? 'text-primary' : 'text-gray-400'} hover:text-primary`}
-                                  title={showImageForCard[card.id] ? "隱藏例句圖" : "查看例句圖"}
-                                >
-                                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                  </svg>
-                                </button>
-                              </div>
-                            </div>
-
-                            {/* Example Image Display */}
-                            {showImageForCard[card.id] && card.generatedExample.imageUrl && (
-                              <div className="mt-3 p-2 bg-gray-50 rounded-lg">
-                                <div className="text-xs text-gray-600 mb-2 flex items-center gap-1">
-                                  <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                                  </svg>
-                                  例句情境圖
-                                </div>
-                                <img
-                                  src={card.generatedExample.imageUrl}
-                                  alt="Example context"
-                                  className="w-full rounded-md shadow-sm cursor-pointer hover:shadow-lg transition-shadow"
-                                  style={{ maxHeight: '250px', objectFit: 'contain', backgroundColor: 'white' }}
-                                  onClick={() => setModalImage(card.generatedExample.imageUrl)}
-                                />
-                                <div className="text-xs text-gray-500 mt-2 text-center">點擊圖片可放大查看</div>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-
-                    <div className="mt-4 pt-3 border-t flex justify-between items-center">
-                      <span className="text-xs text-gray-500">難度：CEFR {card.difficulty}</span>
-                      <button className="text-primary text-sm hover:text-primary-hover font-medium">
-                        編輯詞卡
-                      </button>
-                    </div>
-                  </div>
-                ))}
+            {/* 操作按鈕 */}
+            <div className="bg-white rounded-xl shadow-sm p-6">
+              <div className="flex gap-4">
+                <button
+                  onClick={() => setShowAnalysisView(false)}
+                  className="flex-1 bg-gray-200 text-gray-700 py-3 rounded-lg font-medium hover:bg-gray-300 transition-colors"
+                >
+                  🔄 分析新句子
+                </button>
+                <button
+                  onClick={() => {
+                    setShowAnalysisView(false)
+                    setShowPreview(true)
+                    // 這裡可以整合原有的詞卡生成功能
+                    alert('詞卡生成功能整合中...')
+                  }}
+                  className="flex-1 bg-primary text-white py-3 rounded-lg font-medium hover:bg-primary-hover transition-colors"
+                >
+                  📖 生成詞卡
+                </button>
               </div>
             </div>
           </div>
         )}
       </div>
-
-      {/* Image Modal */}
-      {modalImage && (
-        <div
-          className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-75 p-4"
-          onClick={() => setModalImage(null)}
-        >
-          <div
-            className="relative max-w-4xl max-h-[90vh] bg-white rounded-lg overflow-hidden"
-            onClick={(e) => e.stopPropagation()}
-          >
-            {/* Close Button */}
-            <button
-              onClick={() => setModalImage(null)}
-              className="absolute top-2 right-2 z-10 p-2 bg-white bg-opacity-90 rounded-full hover:bg-opacity-100 transition-all shadow-lg"
-            >
-              <svg className="w-6 h-6 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-
-            {/* Image */}
-            <div className="p-4">
-              <img
-                src={modalImage}
-                alt="Example context enlarged"
-                className="w-full h-full object-contain"
-                style={{ maxHeight: 'calc(90vh - 2rem)' }}
-              />
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   )
 }
diff --git a/frontend/app/test/page.tsx b/frontend/app/test/page.tsx
new file mode 100644
index 0000000..639ecc9
--- /dev/null
+++ b/frontend/app/test/page.tsx
@@ -0,0 +1,82 @@
+'use client'
+
+import { ClickableText } from '@/components/ClickableText'
+
+const mockAnalysis = {
+  "brought": {
+    word: "brought",
+    translation: "帶來、提出",
+    definition: "Past tense of bring; to take or carry something to a place",
+    partOfSpeech: "verb",
+    pronunciation: "/brɔːt/",
+    synonyms: ["carried", "took", "delivered"],
+    isPhrase: true,
+    phraseInfo: {
+      phrase: "bring up",
+      meaning: "提出（話題）、養育",
+      warning: "在這個句子中，\"brought up\" 是一個片語，意思是\"提出話題\"，而不是單純的\"帶來\""
+    }
+  },
+  "this": {
+    word: "this",
+    translation: "這個",
+    definition: "Used to indicate something near or just mentioned",
+    partOfSpeech: "pronoun",
+    pronunciation: "/ðɪs/",
+    synonyms: ["that", "it"],
+    isPhrase: false
+  },
+  "thing": {
+    word: "thing",
+    translation: "事情、東西",
+    definition: "An object, fact, or situation",
+    partOfSpeech: "noun",
+    pronunciation: "/θɪŋ/",
+    synonyms: ["object", "matter", "item"],
+    isPhrase: false
+  },
+  "up": {
+    word: "up",
+    translation: "向上",
+    definition: "Toward a higher place or position",
+    partOfSpeech: "adverb",
+    pronunciation: "/ʌp/",
+    synonyms: ["upward", "above"],
+    isPhrase: true,
+    phraseInfo: {
+      phrase: "bring up",
+      meaning: "提出（話題）、養育",
+      warning: "\"up\" 在這裡是片語 \"bring up\" 的一部分，不是單獨的\"向上\"的意思"
+    }
+  }
+}
+
+export default function TestPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-3xl font-bold mb-8">互動式單字查詢測試</h1>
+
+        <div className="bg-white rounded-xl shadow-sm p-6">
+          <h2 className="text-lg font-semibold mb-4">點擊查詢單字意思</h2>
+          <div className="p-4 bg-blue-50 rounded-lg border-l-4 border-blue-400 mb-4">
+            <p className="text-sm text-blue-800">
+              💡 <strong>使用說明：</strong>點擊下方句子中的任何單字，可以立即查看詳細意思。
+              黃色背景表示該單字屬於片語或俚語，會優先顯示片語意思。
+            </p>
+          </div>
+
+          <div className="p-6 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+            <ClickableText
+              text="He brought this thing up during our meeting."
+              analysis={mockAnalysis}
+              onWordClick={(word, analysis) => {
+                console.log('Clicked word:', word, analysis)
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/ClickableText.tsx b/frontend/components/ClickableText.tsx
new file mode 100644
index 0000000..7b5fa11
--- /dev/null
+++ b/frontend/components/ClickableText.tsx
@@ -0,0 +1,187 @@
+'use client'
+
+import { useState } from 'react'
+
+// 模擬分析後的詞彙資料
+interface WordAnalysis {
+  word: string
+  translation: string
+  definition: string
+  partOfSpeech: string
+  pronunciation: string
+  synonyms: string[]
+  isPhrase: boolean
+  phraseInfo?: {
+    phrase: string
+    meaning: string
+    warning: string
+  }
+}
+
+interface ClickableTextProps {
+  text: string
+  analysis?: Record<string, WordAnalysis>
+  onWordClick?: (word: string, analysis: WordAnalysis) => void
+}
+
+export function ClickableText({ text, analysis, onWordClick }: ClickableTextProps) {
+  const [selectedWord, setSelectedWord] = useState<string | null>(null)
+  const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 })
+
+  // 將文字分割成單字
+  const words = text.split(/(\s+|[.,!?;:])/g).filter(word => word.trim())
+
+  const handleWordClick = (word: string, event: React.MouseEvent) => {
+    const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
+    const wordAnalysis = analysis?.[cleanWord]
+
+    if (wordAnalysis) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      setPopupPosition({
+        x: rect.left + rect.width / 2,
+        y: rect.top - 10
+      })
+      setSelectedWord(cleanWord)
+      onWordClick?.(cleanWord, wordAnalysis)
+    }
+  }
+
+  const closePopup = () => {
+    setSelectedWord(null)
+  }
+
+  const getWordClass = (word: string) => {
+    const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
+    const wordAnalysis = analysis?.[cleanWord]
+
+    if (!wordAnalysis) return "cursor-default"
+
+    const baseClass = "cursor-pointer transition-all duration-200 hover:bg-blue-100 rounded px-1"
+
+    if (wordAnalysis.isPhrase) {
+      return `${baseClass} bg-yellow-100 border-b-2 border-yellow-400 hover:bg-yellow-200`
+    }
+
+    return `${baseClass} hover:bg-blue-200 border-b border-blue-300`
+  }
+
+  return (
+    <div className="relative">
+      {/* 點擊區域遮罩 */}
+      {selectedWord && (
+        <div
+          className="fixed inset-0 z-10"
+          onClick={closePopup}
+        />
+      )}
+
+      {/* 文字內容 */}
+      <div className="text-lg leading-relaxed">
+        {words.map((word, index) => {
+          if (word.trim() === '') return <span key={index}>{word}</span>
+
+          return (
+            <span
+              key={index}
+              className={getWordClass(word)}
+              onClick={(e) => handleWordClick(word, e)}
+            >
+              {word}
+            </span>
+          )
+        })}
+      </div>
+
+      {/* 彈出視窗 */}
+      {selectedWord && analysis?.[selectedWord] && (
+        <div
+          className="fixed z-20 bg-white border border-gray-300 rounded-lg shadow-lg p-4 w-80 max-w-sm"
+          style={{
+            left: `${popupPosition.x}px`,
+            top: `${popupPosition.y}px`,
+            transform: 'translate(-50%, -100%)',
+          }}
+        >
+          <div className="space-y-3">
+            {/* 標題 */}
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-bold text-gray-900">
+                {analysis[selectedWord].word}
+              </h3>
+              <button
+                onClick={closePopup}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* 片語警告 */}
+            {analysis[selectedWord].isPhrase && analysis[selectedWord].phraseInfo && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                <div className="flex items-start gap-2">
+                  <div className="text-yellow-600 text-lg">⚠️</div>
+                  <div>
+                    <div className="text-sm font-medium text-yellow-800">
+                      注意：這個單字屬於片語
+                    </div>
+                    <div className="text-sm text-yellow-700 mt-1">
+                      <strong>片語：</strong>{analysis[selectedWord].phraseInfo.phrase}
+                    </div>
+                    <div className="text-sm text-yellow-700">
+                      <strong>意思：</strong>{analysis[selectedWord].phraseInfo.meaning}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 詞性和發音 */}
+            <div className="flex items-center gap-4">
+              <span className="text-sm bg-gray-100 px-2 py-1 rounded">
+                {analysis[selectedWord].partOfSpeech}
+              </span>
+              <span className="text-sm text-gray-600">
+                {analysis[selectedWord].pronunciation}
+              </span>
+              <button className="text-blue-600 hover:text-blue-800">
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                </svg>
+              </button>
+            </div>
+
+            {/* 翻譯 */}
+            <div>
+              <div className="text-sm font-medium text-gray-700">翻譯</div>
+              <div className="text-base text-gray-900">{analysis[selectedWord].translation}</div>
+            </div>
+
+            {/* 定義 */}
+            <div>
+              <div className="text-sm font-medium text-gray-700">定義</div>
+              <div className="text-sm text-gray-600">{analysis[selectedWord].definition}</div>
+            </div>
+
+            {/* 同義詞 */}
+            {analysis[selectedWord].synonyms.length > 0 && (
+              <div>
+                <div className="text-sm font-medium text-gray-700">同義詞</div>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {analysis[selectedWord].synonyms.map((synonym, idx) => (
+                    <span
+                      key={idx}
+                      className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full"
+                    >
+                      {synonym}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/ClickableTextV2.tsx b/frontend/components/ClickableTextV2.tsx
new file mode 100644
index 0000000..5ca5834
--- /dev/null
+++ b/frontend/components/ClickableTextV2.tsx
@@ -0,0 +1,375 @@
+'use client'
+
+import { useState } from 'react'
+
+// 更新的詞彙分析介面
+interface WordAnalysis {
+  word: string
+  translation: string
+  definition: string
+  partOfSpeech: string
+  pronunciation: string
+  synonyms: string[]
+  antonyms?: string[]
+  isPhrase: boolean
+  isHighValue: boolean // 高學習價值標記
+  learningPriority: 'high' | 'medium' | 'low' // 學習優先級
+  phraseInfo?: {
+    phrase: string
+    meaning: string
+    warning: string
+    colorCode: string // 片語顏色代碼
+  }
+  difficultyLevel: string
+  costIncurred?: number // 點擊此詞彙的成本
+}
+
+interface ClickableTextProps {
+  text: string
+  analysis?: Record<string, WordAnalysis>
+  highValueWords?: string[] // 高價值詞彙列表
+  phrasesDetected?: Array<{
+    phrase: string
+    words: string[]
+    colorCode: string
+  }>
+  onWordClick?: (word: string, analysis: WordAnalysis) => void
+  onWordCostConfirm?: (word: string, cost: number) => Promise<boolean> // 收費確認
+  remainingUsage?: number // 剩餘使用次數
+}
+
+export function ClickableTextV2({
+  text,
+  analysis,
+  highValueWords = [],
+  phrasesDetected = [],
+  onWordClick,
+  onWordCostConfirm,
+  remainingUsage = 5
+}: ClickableTextProps) {
+  const [selectedWord, setSelectedWord] = useState<string | null>(null)
+  const [popupPosition, setPopupPosition] = useState({ x: 0, y: 0 })
+  const [showCostConfirm, setShowCostConfirm] = useState<{
+    word: string
+    cost: number
+    position: { x: number, y: number }
+  } | null>(null)
+
+  // 將文字分割成單字
+  const words = text.split(/(\s+|[.,!?;:])/g).filter(word => word.trim())
+
+  const handleWordClick = async (word: string, event: React.MouseEvent) => {
+    const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
+    const wordAnalysis = analysis?.[cleanWord]
+
+    if (wordAnalysis) {
+      const rect = event.currentTarget.getBoundingClientRect()
+      const position = {
+        x: rect.left + rect.width / 2,
+        y: rect.top - 10
+      }
+
+      // 檢查是否為高價值詞彙（免費）
+      if (wordAnalysis.isHighValue) {
+        setPopupPosition(position)
+        setSelectedWord(cleanWord)
+        onWordClick?.(cleanWord, wordAnalysis)
+      } else {
+        // 低價值詞彙需要收費確認
+        setShowCostConfirm({
+          word: cleanWord,
+          cost: 1,
+          position
+        })
+      }
+    }
+  }
+
+  const handleCostConfirm = async () => {
+    if (!showCostConfirm) return
+
+    const confirmed = await onWordCostConfirm?.(showCostConfirm.word, showCostConfirm.cost)
+
+    if (confirmed) {
+      const wordAnalysis = analysis?.[showCostConfirm.word]
+      if (wordAnalysis) {
+        setPopupPosition(showCostConfirm.position)
+        setSelectedWord(showCostConfirm.word)
+        onWordClick?.(showCostConfirm.word, wordAnalysis)
+      }
+    }
+
+    setShowCostConfirm(null)
+  }
+
+  const closePopup = () => {
+    setSelectedWord(null)
+  }
+
+  const getWordClass = (word: string) => {
+    const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
+    const wordAnalysis = analysis?.[cleanWord]
+
+    if (!wordAnalysis) return "cursor-default"
+
+    const baseClass = "cursor-pointer transition-all duration-200 rounded relative mx-0.5 px-1 py-0.5"
+
+    // 高價值片語（黃色系）
+    if (wordAnalysis.isHighValue && wordAnalysis.isPhrase) {
+      return `${baseClass} bg-yellow-100 border-2 border-yellow-400 hover:bg-yellow-200 hover:shadow-sm transform hover:-translate-y-0.5`
+    }
+
+    // 高價值單字（綠色系）
+    if (wordAnalysis.isHighValue && !wordAnalysis.isPhrase) {
+      return `${baseClass} bg-green-100 border-2 border-green-400 hover:bg-green-200 hover:shadow-sm transform hover:-translate-y-0.5`
+    }
+
+    // 普通單字（藍色系）
+    return `${baseClass} border-b border-blue-300 hover:bg-blue-100 hover:border-blue-400`
+  }
+
+  const renderWordWithStar = (word: string, className: string) => {
+    const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
+    const wordAnalysis = analysis?.[cleanWord]
+    const isHighValue = wordAnalysis?.isHighValue
+
+    return (
+      <span
+        className={`${className} ${isHighValue ? 'relative' : ''}`}
+        onClick={(e) => handleWordClick(word, e)}
+      >
+        {word}
+        {isHighValue && (
+          <span className="absolute -top-1 -right-1 text-xs">⭐</span>
+        )}
+      </span>
+    )
+  }
+
+  return (
+    <div className="relative">
+      {/* 點擊區域遮罩 */}
+      {selectedWord && (
+        <div
+          className="fixed inset-0 z-10"
+          onClick={closePopup}
+        />
+      )}
+
+      {/* 文字內容 */}
+      <div className="text-lg leading-relaxed">
+        {words.map((word, index) => {
+          if (word.trim() === '') return <span key={index}>{word}</span>
+
+          return renderWordWithStar(word, getWordClass(word))
+        })}
+      </div>
+
+      {/* 單字資訊彈窗 */}
+      {selectedWord && analysis?.[selectedWord] && (
+        <div
+          className="fixed z-20 bg-white border border-gray-300 rounded-lg shadow-lg p-4 w-80 max-w-sm"
+          style={{
+            left: `${popupPosition.x}px`,
+            top: `${popupPosition.y}px`,
+            transform: 'translate(-50%, -100%)',
+          }}
+        >
+          <div className="space-y-3">
+            {/* 標題 */}
+            <div className="flex items-center justify-between">
+              <h3 className="text-lg font-bold text-gray-900">
+                {analysis[selectedWord].word}
+              </h3>
+              <button
+                onClick={closePopup}
+                className="text-gray-400 hover:text-gray-600"
+              >
+                ✕
+              </button>
+            </div>
+
+            {/* 高價值標記 */}
+            {analysis[selectedWord].isHighValue && (
+              <div className="bg-green-50 border border-green-200 rounded-lg p-3">
+                <div className="flex items-center gap-2">
+                  <div className="text-green-600 text-lg">⭐</div>
+                  <div className="text-sm font-medium text-green-800">
+                    高價值詞彙（免費查詢）
+                  </div>
+                  <div className="text-xs bg-green-100 text-green-700 px-2 py-1 rounded-full">
+                    學習價值：{analysis[selectedWord].learningPriority === 'high' ? '⭐⭐⭐⭐⭐' :
+                             analysis[selectedWord].learningPriority === 'medium' ? '⭐⭐⭐' : '⭐'}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 片語警告 */}
+            {analysis[selectedWord].isPhrase && analysis[selectedWord].phraseInfo && (
+              <div className="bg-yellow-50 border border-yellow-200 rounded-lg p-3">
+                <div className="flex items-start gap-2">
+                  <div className="text-yellow-600 text-lg">⚠️</div>
+                  <div>
+                    <div className="text-sm font-medium text-yellow-800">
+                      注意：這個單字屬於片語！
+                    </div>
+                    <div className="text-sm text-yellow-700 mt-1">
+                      <strong>片語：</strong>{analysis[selectedWord].phraseInfo.phrase}
+                    </div>
+                    <div className="text-sm text-yellow-700">
+                      <strong>意思：</strong>{analysis[selectedWord].phraseInfo.meaning}
+                    </div>
+                    <div className="text-xs text-yellow-600 mt-2 italic">
+                      {analysis[selectedWord].phraseInfo.warning}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* 詞性和發音 */}
+            <div className="flex items-center gap-4">
+              <span className="text-sm bg-gray-100 px-2 py-1 rounded">
+                {analysis[selectedWord].partOfSpeech}
+              </span>
+              <span className="text-sm text-gray-600">
+                {analysis[selectedWord].pronunciation}
+              </span>
+              <button className="text-blue-600 hover:text-blue-800">
+                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
+                </svg>
+              </button>
+            </div>
+
+            {/* 翻譯 */}
+            <div>
+              <div className="text-sm font-medium text-gray-700">翻譯</div>
+              <div className="text-base text-gray-900">{analysis[selectedWord].translation}</div>
+            </div>
+
+            {/* 定義 */}
+            <div>
+              <div className="text-sm font-medium text-gray-700">定義</div>
+              <div className="text-sm text-gray-600">{analysis[selectedWord].definition}</div>
+            </div>
+
+            {/* 同義詞 */}
+            {analysis[selectedWord].synonyms.length > 0 && (
+              <div>
+                <div className="text-sm font-medium text-gray-700">同義詞</div>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {analysis[selectedWord].synonyms.map((synonym, idx) => (
+                    <span
+                      key={idx}
+                      className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full"
+                    >
+                      {synonym}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* 反義詞 */}
+            {analysis[selectedWord].antonyms && analysis[selectedWord].antonyms.length > 0 && (
+              <div>
+                <div className="text-sm font-medium text-gray-700">反義詞</div>
+                <div className="flex flex-wrap gap-1 mt-1">
+                  {analysis[selectedWord].antonyms.map((antonym, idx) => (
+                    <span
+                      key={idx}
+                      className="text-xs bg-red-100 text-red-700 px-2 py-1 rounded-full"
+                    >
+                      {antonym}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* 難度等級 */}
+            <div>
+              <div className="text-sm font-medium text-gray-700">難度等級</div>
+              <div className="inline-flex items-center gap-1 mt-1">
+                <span className={`text-xs px-2 py-1 rounded-full ${
+                  analysis[selectedWord].difficultyLevel === 'A1' || analysis[selectedWord].difficultyLevel === 'A2' ? 'bg-green-100 text-green-700' :
+                  analysis[selectedWord].difficultyLevel === 'B1' || analysis[selectedWord].difficultyLevel === 'B2' ? 'bg-yellow-100 text-yellow-700' :
+                  'bg-red-100 text-red-700'
+                }`}>
+                  CEFR {analysis[selectedWord].difficultyLevel}
+                </span>
+                <span className="text-xs text-gray-500">
+                  ({analysis[selectedWord].difficultyLevel === 'A1' || analysis[selectedWord].difficultyLevel === 'A2' ? '基礎' :
+                    analysis[selectedWord].difficultyLevel === 'B1' || analysis[selectedWord].difficultyLevel === 'B2' ? '中級' : '高級'})
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 收費確認對話框 */}
+      {showCostConfirm && (
+        <>
+          <div className="fixed inset-0 z-10" onClick={() => setShowCostConfirm(null)} />
+          <div
+            className="fixed z-20 bg-white border border-gray-300 rounded-lg shadow-lg p-4 w-72"
+            style={{
+              left: `${showCostConfirm.position.x}px`,
+              top: `${showCostConfirm.position.y}px`,
+              transform: 'translate(-50%, -100%)',
+            }}
+          >
+            <div className="space-y-3">
+              <div className="flex items-center justify-between">
+                <h3 className="text-lg font-bold text-gray-900">
+                  {showCostConfirm.word}
+                </h3>
+                <button
+                  onClick={() => setShowCostConfirm(null)}
+                  className="text-gray-400 hover:text-gray-600"
+                >
+                  ✕
+                </button>
+              </div>
+
+              <div className="bg-orange-50 border border-orange-200 rounded-lg p-3">
+                <div className="flex items-start gap-2">
+                  <div className="text-orange-600 text-lg">💰</div>
+                  <div>
+                    <div className="text-sm font-medium text-orange-800">
+                      低價值詞彙（需消耗額度）
+                    </div>
+                    <div className="text-sm text-orange-700 mt-1">
+                      此查詢將消耗 <strong>{showCostConfirm.cost} 次</strong> 使用額度
+                    </div>
+                    <div className="text-sm text-orange-600 mt-1">
+                      剩餘額度：<strong>{remainingUsage}</strong> 次
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div className="flex gap-2">
+                <button
+                  onClick={handleCostConfirm}
+                  className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-blue-700 transition-colors"
+                >
+                  ✅ 確認查詢
+                </button>
+                <button
+                  onClick={() => setShowCostConfirm(null)}
+                  className="flex-1 bg-gray-200 text-gray-700 py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-300 transition-colors"
+                >
+                  ❌ 取消
+                </button>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/GrammarCorrectionPanel.tsx b/frontend/components/GrammarCorrectionPanel.tsx
new file mode 100644
index 0000000..674c437
--- /dev/null
+++ b/frontend/components/GrammarCorrectionPanel.tsx
@@ -0,0 +1,273 @@
+'use client'
+
+import { useState } from 'react'
+
+interface GrammarCorrection {
+  hasErrors: boolean
+  originalText: string
+  correctedText: string | null
+  corrections: Array<{
+    position: { start: number; end: number }
+    errorType: string
+    original: string
+    corrected: string
+    reason: string
+    severity: 'high' | 'medium' | 'low'
+  }>
+  confidenceScore: number
+}
+
+interface GrammarCorrectionPanelProps {
+  correction: GrammarCorrection
+  onAcceptCorrection: () => void
+  onRejectCorrection: () => void
+  onManualEdit?: (text: string) => void
+}
+
+export function GrammarCorrectionPanel({
+  correction,
+  onAcceptCorrection,
+  onRejectCorrection,
+  onManualEdit
+}: GrammarCorrectionPanelProps) {
+  const [isExpanded, setIsExpanded] = useState(true)
+
+  if (!correction.hasErrors) {
+    return (
+      <div className="bg-green-50 border border-green-200 rounded-lg p-4 mb-6">
+        <div className="flex items-center gap-2">
+          <div className="text-green-600 text-lg">✅</div>
+          <div>
+            <div className="font-medium text-green-800">語法檢查：無錯誤</div>
+            <div className="text-sm text-green-700">
+              您的句子語法正確，可以直接進行學習分析！
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const renderHighlightedText = (text: string, corrections: typeof correction.corrections) => {
+    if (corrections.length === 0) return text
+
+    let result: React.ReactNode[] = []
+    let lastIndex = 0
+
+    corrections.forEach((corr, index) => {
+      // 添加錯誤前的正常文字
+      if (corr.position.start > lastIndex) {
+        result.push(
+          <span key={`normal-${index}`}>
+            {text.slice(lastIndex, corr.position.start)}
+          </span>
+        )
+      }
+
+      // 添加錯誤文字（紅色標記）
+      result.push(
+        <span
+          key={`error-${index}`}
+          className="relative bg-red-100 border-b-2 border-red-400 px-1 rounded"
+          title={`錯誤：${corr.reason}`}
+        >
+          {corr.original}
+          <span className="absolute -top-1 -right-1 text-xs text-red-600">❌</span>
+        </span>
+      )
+
+      lastIndex = corr.position.end
+    })
+
+    // 添加最後剩餘的正常文字
+    if (lastIndex < text.length) {
+      result.push(
+        <span key="final">
+          {text.slice(lastIndex)}
+        </span>
+      )
+    }
+
+    return <>{result}</>
+  }
+
+  const renderCorrectedText = (text: string, corrections: typeof correction.corrections) => {
+    if (corrections.length === 0 || !text) return text
+
+    let result: React.ReactNode[] = []
+    let lastIndex = 0
+    let offset = 0 // 修正後文字長度變化的偏移量
+
+    corrections.forEach((corr, index) => {
+      const adjustedStart = corr.position.start + offset
+      const originalLength = corr.original.length
+      const correctedLength = corr.corrected.length
+
+      // 添加修正前的正常文字
+      if (adjustedStart > lastIndex) {
+        result.push(
+          <span key={`normal-${index}`}>
+            {text.slice(lastIndex, adjustedStart)}
+          </span>
+        )
+      }
+
+      // 添加修正後的文字（綠色標記）
+      result.push(
+        <span
+          key={`corrected-${index}`}
+          className="relative bg-green-100 border-b-2 border-green-400 px-1 rounded font-medium"
+          title={`修正：${corr.reason}`}
+        >
+          {corr.corrected}
+          <span className="absolute -top-1 -right-1 text-xs text-green-600">✅</span>
+        </span>
+      )
+
+      lastIndex = adjustedStart + correctedLength
+      offset += (correctedLength - originalLength)
+    })
+
+    // 添加最後剩餘的正常文字
+    if (lastIndex < text.length) {
+      result.push(
+        <span key="final">
+          {text.slice(lastIndex)}
+        </span>
+      )
+    }
+
+    return <>{result}</>
+  }
+
+  const getSeverityColor = (severity: string) => {
+    switch (severity) {
+      case 'high':
+        return 'bg-red-100 text-red-700 border-red-300'
+      case 'medium':
+        return 'bg-yellow-100 text-yellow-700 border-yellow-300'
+      case 'low':
+        return 'bg-blue-100 text-blue-700 border-blue-300'
+      default:
+        return 'bg-gray-100 text-gray-700 border-gray-300'
+    }
+  }
+
+  return (
+    <div className="bg-white border border-red-200 rounded-lg shadow-sm mb-6">
+      {/* 標題區 */}
+      <div className="bg-red-50 px-6 py-4 border-b border-red-200 rounded-t-lg">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="text-red-600 text-xl">❌</div>
+            <div>
+              <h3 className="font-semibold text-red-800">
+                語法檢查：發現 {correction.corrections.length} 個錯誤
+              </h3>
+              <div className="text-sm text-red-700">
+                建議修正後再進行學習，以確保學習內容的正確性
+              </div>
+            </div>
+          </div>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="text-red-600 hover:text-red-800"
+          >
+            {isExpanded ? '收起' : '展開'}
+          </button>
+        </div>
+      </div>
+
+      {isExpanded && (
+        <div className="p-6 space-y-6">
+          {/* 原始句子 */}
+          <div>
+            <h4 className="font-medium text-gray-800 mb-2">📝 用戶輸入：</h4>
+            <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
+              <div className="text-lg leading-relaxed">
+                {renderHighlightedText(correction.originalText, correction.corrections)}
+              </div>
+            </div>
+          </div>
+
+          {/* 修正建議 */}
+          <div className="bg-green-50 border border-green-200 rounded-lg p-4">
+            <h4 className="font-medium text-green-800 mb-3 flex items-center gap-2">
+              <span className="text-lg">🔧</span>
+              建議修正：
+            </h4>
+
+            <div className="p-4 bg-white rounded-lg border border-green-300 mb-4">
+              <div className="text-lg leading-relaxed">
+                {correction.correctedText && renderCorrectedText(correction.correctedText, correction.corrections)}
+              </div>
+            </div>
+
+            {/* 修正說明列表 */}
+            <div className="space-y-3">
+              <h5 className="font-medium text-green-800">📋 修正說明：</h5>
+              {correction.corrections.map((corr, index) => (
+                <div
+                  key={index}
+                  className={`p-3 rounded-lg border ${getSeverityColor(corr.severity)}`}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className="flex-shrink-0 w-6 h-6 rounded-full bg-white flex items-center justify-center text-sm font-bold">
+                      {index + 1}
+                    </div>
+                    <div className="flex-1">
+                      <div className="font-medium mb-1">
+                        "{corr.original}" → "{corr.corrected}"
+                      </div>
+                      <div className="text-sm">
+                        {corr.reason}
+                      </div>
+                      <div className="text-xs mt-1 opacity-75">
+                        錯誤類型：{corr.errorType} | 嚴重程度：{corr.severity}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* 信心度 */}
+            <div className="mt-4 text-sm text-green-700">
+              🎯 修正信心度：{(correction.confidenceScore * 100).toFixed(1)}%
+            </div>
+          </div>
+
+          {/* 操作按鈕 */}
+          <div className="flex gap-4">
+            <button
+              onClick={onAcceptCorrection}
+              className="flex-1 bg-green-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center justify-center gap-2"
+            >
+              <span className="text-lg">✅</span>
+              使用修正版本
+            </button>
+            <button
+              onClick={onRejectCorrection}
+              className="flex-1 bg-gray-200 text-gray-700 py-3 px-4 rounded-lg font-medium hover:bg-gray-300 transition-colors flex items-center justify-center gap-2"
+            >
+              <span className="text-lg">❌</span>
+              保持原始版本
+            </button>
+          </div>
+
+          {/* 學習提醒 */}
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-3">
+            <div className="flex items-start gap-2">
+              <div className="text-blue-600 text-lg">💡</div>
+              <div className="text-sm text-blue-800">
+                <strong>學習建議：</strong>
+                建議使用修正版本進行學習，這樣可以確保您學到正確的英語表達方式。
+                所有後續的詞彙分析都將基於修正後的句子進行。
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
\ No newline at end of file