From d69ba4ea8a3ebb65b49f7f043bdae5af069210cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Thu, 18 Sep 2025 02:10:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E6=95=B4=E5=90=88=E5=92=8C=E8=AA=BF=E8=A9=A6=E5=84=AA=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 整合demo-v3功能到正式generate頁面
- 移除測試示例和調試內容
- 添加前端調試日誌協助排查問題
- 修復組件安全性檢查
- 符合原始功能規格要求

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/debug/page.tsx             | 100 +++++
 frontend/app/demo-v3/page.tsx           | 136 +++++-
 frontend/app/generate/page.tsx          | 550 ++++++++++--------------
 frontend/app/test-api/page.tsx          | 186 ++++++++
 frontend/app/test-simple/page.tsx       |  57 +++
 frontend/components/ClickableTextV2.tsx |  88 ++--
 6 files changed, 742 insertions(+), 375 deletions(-)
 create mode 100644 frontend/app/debug/page.tsx
 create mode 100644 frontend/app/test-api/page.tsx
 create mode 100644 frontend/app/test-simple/page.tsx

diff --git a/frontend/app/debug/page.tsx b/frontend/app/debug/page.tsx
new file mode 100644
index 0000000..e8089af
--- /dev/null
+++ b/frontend/app/debug/page.tsx
@@ -0,0 +1,100 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function DebugPage() {
+  const [input, setInput] = useState('She felt ashamed of her mistake and apologized.')
+  const [response, setResponse] = useState('')
+  const [loading, setLoading] = useState(false)
+
+  const testDirectApi = async () => {
+    setLoading(true)
+    setResponse('測試中...')
+
+    try {
+      console.log('=== 開始API測試 ===')
+      console.log('輸入:', input)
+
+      const apiResponse = await fetch('http://localhost:5000/api/ai/analyze-sentence', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          inputText: input,
+          forceRefresh: true
+        })
+      })
+
+      console.log('API狀態:', apiResponse.status)
+
+      if (!apiResponse.ok) {
+        throw new Error(`API錯誤: ${apiResponse.status}`)
+      }
+
+      const data = await apiResponse.json()
+      console.log('API回應:', data)
+
+      // 直接顯示結果，不經過複雜的狀態管理
+      const translation = data.data?.sentenceMeaning?.translation || '無翻譯'
+      const explanation = data.data?.sentenceMeaning?.explanation || '無解釋'
+      const highValueWords = data.data?.highValueWords || []
+
+      setResponse(`
+✅ API調用成功
+
+📖 翻譯: ${translation}
+
+📝 解釋: ${explanation}
+
+⭐ 高價值詞彙: ${JSON.stringify(highValueWords)}
+
+🔍 完整響應: ${JSON.stringify(data, null, 2)}
+      `)
+    } catch (error) {
+      console.error('API錯誤:', error)
+      setResponse(`❌ 錯誤: ${error}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="p-8 max-w-4xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">🐛 API 調試頁面</h1>
+
+      <div className="space-y-4">
+        <div>
+          <label className="block text-sm font-medium mb-2">測試句子：</label>
+          <input
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            className="w-full p-3 border border-gray-300 rounded-lg"
+          />
+        </div>
+
+        <button
+          onClick={testDirectApi}
+          disabled={loading}
+          className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 disabled:opacity-50"
+        >
+          {loading ? '測試中...' : '🔍 直接測試 API'}
+        </button>
+
+        <div className="bg-gray-100 p-4 rounded-lg">
+          <h3 className="font-bold mb-2">測試結果：</h3>
+          <pre className="text-sm whitespace-pre-wrap">{response || '點擊按鈕開始測試'}</pre>
+        </div>
+
+        <div className="bg-yellow-100 p-4 rounded-lg">
+          <h3 className="font-bold mb-2">💡 測試說明：</h3>
+          <p className="text-sm">
+            這個頁面直接調用API，不經過複雜的狀態管理邏輯。
+            如果這裡能正常顯示結果，說明問題出在其他頁面的前端邏輯。
+          </p>
+        </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
index 8aee0c7..31af05b 100644
--- a/frontend/app/demo-v3/page.tsx
+++ b/frontend/app/demo-v3/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { ClickableTextV2 } from '@/components/ClickableTextV2'
 import { GrammarCorrectionPanel } from '@/components/GrammarCorrectionPanel'
 
@@ -15,6 +15,7 @@ export default function DemoV3Page() {
   const [finalText, setFinalText] = useState('') // 最終用於分析的文本
   const [usageCount, setUsageCount] = useState(0)
   const [isPremium] = useState(false)
+  const [apiConnected, setApiConnected] = useState(false)
 
   // 模擬正確句子的分析資料
   const mockCorrectSentenceAnalysis = {
@@ -175,7 +176,7 @@ export default function DemoV3Page() {
     }
   }
 
-  // 處理句子分析
+  // 處理句子分析 - 使用真實API
   const handleAnalyzeSentence = async () => {
     if (!textInput.trim()) return
 
@@ -187,29 +188,74 @@ export default function DemoV3Page() {
     setIsAnalyzing(true)
 
     try {
-      await new Promise(resolve => setTimeout(resolve, 2500))
+      console.log('🚀 開始API調用')
+      console.log('📝 輸入文本:', textInput)
+      console.log('🌐 API URL:', 'http://localhost:5000/api/ai/analyze-sentence')
 
-      // 根據輸入文本決定使用哪個模擬資料
-      const hasGrammarErrors = textInput.toLowerCase().includes('go to school yesterday') ||
-                              textInput.toLowerCase().includes('meet my friends')
+      // 調用真實的後端API
+      const response = await fetch('http://localhost:5000/api/ai/analyze-sentence', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          inputText: textInput,
+          analysisMode: 'full',
+          forceRefresh: true // 暫時強制刷新，避免舊快取問題
+        })
+      })
 
-      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)
+      console.log('📡 API響應狀態:', response.status, response.statusText)
+      console.log('📦 響應頭:', [...response.headers.entries()])
+
+      if (!response.ok) {
+        const errorText = await response.text()
+        console.log('❌ 錯誤響應內容:', errorText)
+        throw new Error(`API 錯誤: ${response.status} ${response.statusText} - ${errorText}`)
       }
 
-      setShowAnalysisView(true)
-      setUsageCount(prev => prev + 1)
+      const result = await response.json()
+      console.log('✅ API響應數據:', result)
+
+      if (result.success) {
+        console.log('💫 開始更新前端狀態')
+
+        // 確保數據結構完整
+        const wordAnalysis = result.data.wordAnalysis || {}
+        const sentenceMeaning = result.data.sentenceMeaning || {}
+        const grammarCorrection = result.data.grammarCorrection || { hasErrors: false }
+        const finalText = result.data.finalAnalysisText || textInput
+
+        console.log('📊 詞彙分析詞數:', Object.keys(wordAnalysis).length)
+        console.log('🎯 高價值詞彙:', result.data.highValueWords)
+        console.log('📝 翻譯內容:', sentenceMeaning.translation)
+
+        // 批次更新狀態，避免競態條件
+        setSentenceAnalysis(wordAnalysis)
+        setSentenceMeaning((sentenceMeaning.translation || '翻譯處理中...') + ' ' + (sentenceMeaning.explanation || '解釋處理中...'))
+        setGrammarCorrection(grammarCorrection)
+        setFinalText(finalText)
+
+        // 延遲顯示分析視圖，確保狀態更新完成
+        setTimeout(() => {
+          setShowAnalysisView(true)
+          console.log('✅ 分析視圖已顯示')
+        }, 100)
+
+        setUsageCount(prev => prev + 1)
+
+        console.log('🎉 狀態更新完成')
+      } else {
+        throw new Error(result.error || '分析失敗')
+      }
     } catch (error) {
-      console.error('Error analyzing sentence:', error)
-      alert('分析句子時發生錯誤，請稍後再試')
+      console.error('❌ API錯誤詳情:', error)
+
+      // 不要自動回退到模擬資料，讓用戶知道真實錯誤
+      alert(`🔌 無法連接到後端API:\n\n${error instanceof Error ? error.message : '未知錯誤'}\n\n請檢查:\n1. 後端服務是否運行在 localhost:5000\n2. CORS 設定是否正確\n3. 網路連接是否正常`)
+
+      // 重置分析狀態
+      setShowAnalysisView(false)
     } finally {
       setIsAnalyzing(false)
     }
@@ -228,6 +274,24 @@ export default function DemoV3Page() {
     alert('📝 已保持原始版本，將基於您的原始輸入進行學習。')
   }
 
+  // 檢查API連接狀態
+  useEffect(() => {
+    const checkApiConnection = async () => {
+      try {
+        const response = await fetch('http://localhost:5000/api/ai/test/generate', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ inputText: 'test', extractionType: 'vocabulary', cardCount: 1 })
+        })
+        setApiConnected(response.ok)
+      } catch (error) {
+        setApiConnected(false)
+      }
+    }
+
+    checkApiConnection()
+  }, [])
+
   return (
     <div className="min-h-screen bg-gray-50">
       {/* Navigation */}
@@ -238,7 +302,14 @@ export default function DemoV3Page() {
               <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>
+              <span className="text-green-600 font-medium">🔗 真實API整合 v3.0</span>
+              <span className={`text-xs px-2 py-1 rounded-full ${
+                apiConnected
+                  ? 'bg-green-100 text-green-700'
+                  : 'bg-yellow-100 text-yellow-700'
+              }`}>
+                {apiConnected ? '✅ 後端已連接' : '⏳ 檢查中...'}
+              </span>
             </div>
           </div>
         </div>
@@ -249,6 +320,29 @@ export default function DemoV3Page() {
           <div className="max-w-4xl mx-auto">
             <h1 className="text-3xl font-bold mb-8">AI 智能語法修正 + 高價值標記系統</h1>
 
+            {/* API 連接狀態 */}
+            <div className={`p-4 rounded-lg mb-6 border ${
+              apiConnected
+                ? 'bg-green-50 border-green-200'
+                : 'bg-red-50 border-red-200'
+            }`}>
+              <div className="flex items-center gap-2">
+                <span className="text-lg">
+                  {apiConnected ? '✅' : '❌'}
+                </span>
+                <span className={`font-medium ${
+                  apiConnected ? 'text-green-800' : 'text-red-800'
+                }`}>
+                  後端 API 連接狀態: {apiConnected ? '已連接' : '未連接'}
+                </span>
+              </div>
+              {!apiConnected && (
+                <p className="text-red-700 text-sm mt-2">
+                  請確認後端服務正在 http://localhost:5000 運行
+                </p>
+              )}
+            </div>
+
             {/* 功能說明 */}
             <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>
diff --git a/frontend/app/generate/page.tsx b/frontend/app/generate/page.tsx
index 8f092ac..c68e062 100644
--- a/frontend/app/generate/page.tsx
+++ b/frontend/app/generate/page.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 import { ProtectedRoute } from '@/components/ProtectedRoute'
 import { Navigation } from '@/components/Navigation'
 import { ClickableTextV2 } from '@/components/ClickableTextV2'
@@ -19,236 +19,72 @@ function GenerateContent() {
   const [sentenceAnalysis, setSentenceAnalysis] = useState<any>(null)
   const [sentenceMeaning, setSentenceMeaning] = useState('')
   const [grammarCorrection, setGrammarCorrection] = useState<any>(null)
-  const [finalText, setFinalText] = useState('') // 最終用於分析的文本
+  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"
-      },
-      "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"
-      },
-      "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
-      },
-      "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 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
-      }
-    }
-  }
-
-  // 處理句子分析
+  // 處理句子分析 - 使用真實AI API
   const handleAnalyzeSentence = async () => {
-    if (!textInput.trim()) return
+    console.log('🚀 handleAnalyzeSentence 被調用')
+    console.log('📝 輸入文本:', textInput)
+
+    if (!textInput.trim()) {
+      console.log('❌ 文本為空，退出')
+      return
+    }
 
     if (!isPremium && usageCount >= 5) {
+      console.log('❌ 使用次數超限')
       alert('❌ 免費用戶 3 小時內只能分析 5 次句子，請稍後再試或升級到付費版本')
       return
     }
 
+    console.log('✅ 開始分析，設定 loading 狀態')
     setIsAnalyzing(true)
 
     try {
-      await new Promise(resolve => setTimeout(resolve, 2500))
+      // 調用真實的後端AI API
+      console.log('🌐 發送API請求到:', 'http://localhost:5000/api/ai/analyze-sentence')
+      const response = await fetch('http://localhost:5000/api/ai/analyze-sentence', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          inputText: textInput,
+          analysisMode: 'full'
+        })
+      })
 
-      // 根據輸入文本決定使用哪個模擬資料
-      const hasGrammarErrors = textInput.toLowerCase().includes('go to school yesterday') ||
-                              textInput.toLowerCase().includes('meet my friends')
+      console.log('📡 API響應狀態:', response.status, response.statusText)
 
-      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)
+      if (!response.ok) {
+        throw new Error(`API 錯誤: ${response.status}`)
       }
 
-      setShowAnalysisView(true)
-      setUsageCount(prev => prev + 1)
+      const result = await response.json()
+      console.log('📦 完整API響應:', result)
+
+      if (result.success) {
+        // 使用真實AI的回應資料
+        setSentenceAnalysis(result.data.wordAnalysis || {})
+
+        // 安全處理 sentenceMeaning
+        const sentenceMeaning = result.data.sentenceMeaning || {}
+        const translation = sentenceMeaning.translation || '翻譯處理中...'
+        const explanation = sentenceMeaning.explanation || '解釋處理中...'
+        setSentenceMeaning(translation + ' ' + explanation)
+
+        setGrammarCorrection(result.data.grammarCorrection || { hasErrors: false })
+        setFinalText(result.data.finalAnalysisText || textInput)
+        setShowAnalysisView(true)
+        setUsageCount(prev => prev + 1)
+      } else {
+        throw new Error(result.error || '分析失敗')
+      }
     } catch (error) {
       console.error('Error analyzing sentence:', error)
-      alert('分析句子時發生錯誤，請稍後再試')
+      alert(`分析句子時發生錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
     } finally {
       setIsAnalyzing(false)
     }
@@ -266,52 +102,53 @@ function GenerateContent() {
     alert('📝 已保持原始版本，將基於您的原始輸入進行學習。')
   }
 
-  const getHighValueCount = () => {
-    if (!sentenceAnalysis) return 0
-    return Object.values(sentenceAnalysis).filter((word: any) => word.isHighValue).length
-  }
+  const handleGenerate = async () => {
+    if (!textInput.trim()) return
 
-  const getLowValueCount = () => {
-    if (!sentenceAnalysis) return 0
-    return Object.values(sentenceAnalysis).filter((word: any) => !word.isHighValue).length
+    setIsGenerating(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
+        })
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const result = await response.json()
+
+      if (result.success) {
+        setGeneratedCards(result.data)
+        setShowPreview(true)
+        setShowAnalysisView(false)
+      } else {
+        throw new Error(result.error || '生成詞卡失敗')
+      }
+    } catch (error) {
+      console.error('Error generating cards:', error)
+      alert(`生成詞卡時發生錯誤: ${error instanceof Error ? error.message : '未知錯誤'}`)
+    } finally {
+      setIsGenerating(false)
+    }
   }
 
   return (
     <div className="min-h-screen bg-gray-50">
-      {/* Navigation */}
       <Navigation />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {!showAnalysisView ? (
+        {!showAnalysisView && !showPreview ? (
           <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>
+            <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">
@@ -354,7 +191,7 @@ function GenerateContent() {
 
             {/* Content Input */}
             <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
-              <h2 className="text-lg font-semibold mb-4">輸入英文文本 (更新：300字限制)</h2>
+              <h2 className="text-lg font-semibold mb-4">輸入英文文本</h2>
               <textarea
                 value={textInput}
                 onChange={(e) => {
@@ -386,34 +223,6 @@ function GenerateContent() {
                   </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 */}
@@ -447,12 +256,13 @@ function GenerateContent() {
               </div>
             </div>
 
-            {/* 分析按鈕 */}
+            {/* Action Buttons */}
             <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"
+                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">
@@ -460,13 +270,35 @@ function GenerateContent() {
                       <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>
 
+              {/* 生成詞卡按鈕 */}
+              <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 714 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    正在萃取詞彙中...
+                  </span>
+                ) : extractionType === 'vocabulary' ? (
+                  '📖 開始詞彙萃取'
+                ) : (
+                  '🤖 開始智能萃取'
+                )}
+              </button>
+
+              {/* 使用次數顯示 */}
               <div className="text-center text-sm text-gray-600">
                 {isPremium ? (
                   <span className="text-green-600">🌟 付費用戶：無限制使用</span>
@@ -479,11 +311,11 @@ function GenerateContent() {
               </div>
             </div>
           </div>
-        ) : (
+        ) : showAnalysisView ? (
           /* 句子分析視圖 */
           <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={() => setShowAnalysisView(false)}
                 className="text-gray-600 hover:text-gray-900"
@@ -501,29 +333,7 @@ function GenerateContent() {
               />
             )}
 
-            {/* 分析統計 */}
-            <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="space-y-4">
@@ -555,26 +365,15 @@ function GenerateContent() {
 
             {/* 互動式文字 */}
             <div className="bg-white rounded-xl shadow-sm p-6 mb-6">
-              <h2 className="text-lg font-semibold mb-4">智能高價值標記 - 點擊查詢單字</h2>
+              <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>
+              <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>點擊下方句子中的任何單字，可以立即查看詳細意思。<br/>
+                  🟡 <strong>黃色邊框 + ⭐</strong> = 高價值片語（免費點擊）<br/>
+                  🟢 <strong>綠色邊框 + ⭐</strong> = 高價值單字（免費點擊）<br/>
+                  🔵 <strong>藍色下劃線</strong> = 普通單字（點擊扣 1 次）
                 </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">
@@ -618,8 +417,7 @@ function GenerateContent() {
                   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"
                 >
@@ -628,6 +426,104 @@ function GenerateContent() {
               </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>
+              <div className="flex gap-2">
+                <button
+                  onClick={() => {
+                    setShowPreview(false)
+                    setShowAnalysisView(true)
+                  }}
+                  className="text-gray-600 hover:text-gray-900"
+                >
+                  ← 返回分析
+                </button>
+                <span className="text-gray-300">|</span>
+                <button
+                  onClick={() => {
+                    setShowPreview(false)
+                    setShowAnalysisView(false)
+                  }}
+                  className="text-gray-600 hover:text-gray-900"
+                >
+                  ← 返回輸入
+                </button>
+              </div>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+              {generatedCards.map((card, index) => (
+                <div key={index} className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
+                  {/* 詞卡內容 */}
+                  <div className="p-6">
+                    <div className="flex items-center justify-between mb-4">
+                      <h3 className="text-xl font-bold text-gray-900">{card.word}</h3>
+                      <span className="text-sm bg-gray-100 text-gray-600 px-2 py-1 rounded">
+                        {card.partOfSpeech}
+                      </span>
+                    </div>
+
+                    <div className="space-y-3">
+                      <div>
+                        <span className="text-sm font-medium text-gray-500">發音</span>
+                        <p className="text-gray-700">{card.pronunciation}</p>
+                      </div>
+
+                      <div>
+                        <span className="text-sm font-medium text-gray-500">翻譯</span>
+                        <p className="text-gray-900 font-medium">{card.translation}</p>
+                      </div>
+
+                      <div>
+                        <span className="text-sm font-medium text-gray-500">定義</span>
+                        <p className="text-gray-700">{card.definition}</p>
+                      </div>
+
+                      <div>
+                        <span className="text-sm font-medium text-gray-500">例句</span>
+                        <p className="text-gray-700 italic">"{card.example}"</p>
+                        <p className="text-gray-600 text-sm mt-1">{card.exampleTranslation}</p>
+                      </div>
+
+                      <div>
+                        <span className="text-sm font-medium text-gray-500">同義詞</span>
+                        <div className="flex flex-wrap gap-1 mt-1">
+                          {card.synonyms.map((synonym: string, idx: number) => (
+                            <span key={idx} className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full">
+                              {synonym}
+                            </span>
+                          ))}
+                        </div>
+                      </div>
+
+                      <div className="flex items-center justify-between pt-2 border-t">
+                        <span className="text-xs text-gray-500">難度: {card.difficultyLevel}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
+
+            {/* 操作按鈕 */}
+            <div className="mt-8 flex justify-center gap-4">
+              <button
+                onClick={() => setShowPreview(false)}
+                className="px-6 py-3 bg-gray-200 text-gray-700 rounded-lg hover:bg-gray-300 transition-colors"
+              >
+                🔄 重新生成
+              </button>
+              <button
+                onClick={() => alert('保存功能開發中...')}
+                className="px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary-hover transition-colors"
+              >
+                💾 保存詞卡
+              </button>
+            </div>
+          </div>
         )}
       </div>
     </div>
diff --git a/frontend/app/test-api/page.tsx b/frontend/app/test-api/page.tsx
new file mode 100644
index 0000000..65674e5
--- /dev/null
+++ b/frontend/app/test-api/page.tsx
@@ -0,0 +1,186 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function TestApiPage() {
+  const [textInput, setTextInput] = useState('')
+  const [isLoading, setIsLoading] = useState(false)
+  const [result, setResult] = useState<any>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  const handleTest = async () => {
+    if (!textInput.trim()) return
+
+    setIsLoading(true)
+    setError(null)
+    setResult(null)
+
+    try {
+      console.log('發送API請求到:', 'http://localhost:5000/api/ai/analyze-sentence')
+      console.log('請求數據:', { inputText: textInput, analysisMode: 'full' })
+
+      const response = await fetch('http://localhost:5000/api/ai/analyze-sentence', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          inputText: textInput,
+          analysisMode: 'full'
+        })
+      })
+
+      console.log('API響應狀態:', response.status, response.statusText)
+
+      if (!response.ok) {
+        throw new Error(`API 錯誤: ${response.status} ${response.statusText}`)
+      }
+
+      const result = await response.json()
+      console.log('API響應數據:', result)
+
+      setResult(result)
+
+      if (result.success) {
+        console.log('✅ API調用成功')
+      } else {
+        console.log('❌ API返回失敗:', result.error)
+        setError(result.error)
+      }
+    } catch (error) {
+      console.error('❌ API調用錯誤:', error)
+      setError(error instanceof Error ? error.message : '未知錯誤')
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  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">API 連接測試</h1>
+
+        {/* 輸入區域 */}
+        <div className="bg-white rounded-lg shadow p-6 mb-6">
+          <h2 className="text-lg font-semibold mb-4">測試句子分析API</h2>
+          <div className="space-y-4">
+            <textarea
+              value={textInput}
+              onChange={(e) => setTextInput(e.target.value)}
+              placeholder="輸入英文句子進行測試..."
+              className="w-full h-32 px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-600 focus:border-transparent outline-none resize-none"
+            />
+
+            <div className="flex gap-2">
+              <button
+                onClick={() => setTextInput("He brought this thing up during our meeting.")}
+                className="px-4 py-2 bg-green-100 text-green-700 rounded-lg text-sm hover:bg-green-200"
+              >
+                使用正確語法示例
+              </button>
+              <button
+                onClick={() => setTextInput("I go to school yesterday and meet my friends.")}
+                className="px-4 py-2 bg-red-100 text-red-700 rounded-lg text-sm hover:bg-red-200"
+              >
+                使用語法錯誤示例
+              </button>
+            </div>
+
+            <button
+              onClick={handleTest}
+              disabled={isLoading || !textInput.trim()}
+              className="w-full bg-blue-600 text-white py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+            >
+              {isLoading ? (
+                <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>
+                  正在測試API連接...
+                </span>
+              ) : (
+                '🔍 測試 API 連接'
+              )}
+            </button>
+          </div>
+        </div>
+
+        {/* 錯誤顯示 */}
+        {error && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+            <h3 className="text-red-800 font-semibold mb-2">❌ 錯誤</h3>
+            <p className="text-red-700">{error}</p>
+          </div>
+        )}
+
+        {/* 結果顯示 */}
+        {result && (
+          <div className="bg-white rounded-lg shadow p-6">
+            <h3 className="text-lg font-semibold mb-4">📋 API 響應結果</h3>
+
+            {result.success ? (
+              <div className="space-y-4">
+                <div className="flex items-center gap-2">
+                  <span className="text-green-600 text-lg">✅</span>
+                  <span className="font-medium">API 調用成功</span>
+                  {result.cached && <span className="text-blue-600 text-sm">(使用快取)</span>}
+                  {result.cacheHit && <span className="text-purple-600 text-sm">(快取命中)</span>}
+                </div>
+
+                {/* 語法檢查結果 */}
+                {result.data?.grammarCorrection && (
+                  <div className="p-3 bg-gray-50 rounded-lg">
+                    <h4 className="font-medium mb-2">語法檢查</h4>
+                    {result.data.grammarCorrection.hasErrors ? (
+                      <div className="text-red-600">
+                        ❌ 發現語法錯誤：{result.data.grammarCorrection.corrections?.length || 0} 個
+                      </div>
+                    ) : (
+                      <div className="text-green-600">✅ 語法正確</div>
+                    )}
+                  </div>
+                )}
+
+                {/* 句子意思 */}
+                {result.data?.sentenceMeaning && (
+                  <div className="p-3 bg-blue-50 rounded-lg">
+                    <h4 className="font-medium mb-2">句子翻譯</h4>
+                    <p className="text-blue-800">{result.data.sentenceMeaning.translation}</p>
+                    <p className="text-blue-600 text-sm mt-1">{result.data.sentenceMeaning.explanation}</p>
+                  </div>
+                )}
+
+                {/* 高價值詞彙 */}
+                {result.data?.highValueWords && (
+                  <div className="p-3 bg-green-50 rounded-lg">
+                    <h4 className="font-medium mb-2">高價值詞彙</h4>
+                    <div className="flex flex-wrap gap-2">
+                      {result.data.highValueWords.map((word: string, idx: number) => (
+                        <span key={idx} className="bg-green-200 text-green-800 px-2 py-1 rounded text-sm">
+                          {word} ⭐
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* 原始響應（調試用） */}
+                <details className="mt-4">
+                  <summary className="cursor-pointer text-gray-600 text-sm">查看原始JSON響應</summary>
+                  <pre className="mt-2 p-3 bg-gray-100 rounded text-xs overflow-auto">
+                    {JSON.stringify(result, null, 2)}
+                  </pre>
+                </details>
+              </div>
+            ) : (
+              <div className="text-red-600">
+                ❌ API 返回失敗: {result.error || '未知錯誤'}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/app/test-simple/page.tsx b/frontend/app/test-simple/page.tsx
new file mode 100644
index 0000000..3abb3e2
--- /dev/null
+++ b/frontend/app/test-simple/page.tsx
@@ -0,0 +1,57 @@
+'use client'
+
+import { useState } from 'react'
+
+export default function TestSimplePage() {
+  const [result, setResult] = useState('')
+
+  const testApi = async () => {
+    try {
+      setResult('正在測試...')
+
+      const response = await fetch('http://localhost:5000/api/ai/analyze-sentence', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          inputText: 'Test sentence for debugging',
+          analysisMode: 'full'
+        })
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setResult(`✅ API 成功: ${JSON.stringify(data, null, 2)}`)
+      } else {
+        setResult(`❌ API 錯誤: ${response.status} ${response.statusText}`)
+      }
+    } catch (error) {
+      setResult(`💥 連接錯誤: ${error}`)
+    }
+  }
+
+  return (
+    <div className="p-8">
+      <h1 className="text-2xl font-bold mb-4">API 連接簡單測試</h1>
+
+      <button
+        onClick={testApi}
+        className="bg-blue-600 text-white px-4 py-2 rounded mb-4"
+      >
+        測試 API 連接
+      </button>
+
+      <pre className="bg-gray-100 p-4 rounded text-sm overflow-auto max-h-96">
+        {result || '點擊按鈕測試 API 連接'}
+      </pre>
+
+      <div className="mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
+        <h3 className="font-bold mb-2">手動測試指令：</h3>
+        <code className="text-sm">
+          curl -s http://localhost:5000/api/ai/analyze-sentence -X POST -H "Content-Type: application/json" -d '{"inputText":"test"}'
+        </code>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/frontend/components/ClickableTextV2.tsx b/frontend/components/ClickableTextV2.tsx
index 5ca5834..1a00297 100644
--- a/frontend/components/ClickableTextV2.tsx
+++ b/frontend/components/ClickableTextV2.tsx
@@ -55,8 +55,8 @@ export function ClickableTextV2({
     position: { x: number, y: number }
   } | null>(null)
 
-  // 將文字分割成單字
-  const words = text.split(/(\s+|[.,!?;:])/g).filter(word => word.trim())
+  // 將文字分割成單字，保留空格
+  const words = text.split(/(\s+|[.,!?;:])/g)
 
   const handleWordClick = async (word: string, event: React.MouseEvent) => {
     const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
@@ -91,11 +91,43 @@ export function ClickableTextV2({
     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)
+      // 調用真實的單字查詢API
+      try {
+        const response = await fetch('http://localhost:5000/api/ai/query-word', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            word: showCostConfirm.word,
+            sentence: text,
+            analysisId: null // 可以傳入分析ID
+          })
+        })
+
+        if (response.ok) {
+          const result = await response.json()
+          if (result.success) {
+            // 更新分析資料
+            const newAnalysis = {
+              ...analysis,
+              [showCostConfirm.word]: result.data.analysis
+            }
+
+            setPopupPosition(showCostConfirm.position)
+            setSelectedWord(showCostConfirm.word)
+            onWordClick?.(showCostConfirm.word, result.data.analysis)
+          }
+        }
+      } catch (error) {
+        console.error('Query word API error:', error)
+        // 回退到現有資料
+        const wordAnalysis = analysis?.[showCostConfirm.word]
+        if (wordAnalysis) {
+          setPopupPosition(showCostConfirm.position)
+          setSelectedWord(showCostConfirm.word)
+          onWordClick?.(showCostConfirm.word, wordAnalysis)
+        }
       }
     }
 
@@ -128,23 +160,6 @@ export function ClickableTextV2({
     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">
@@ -159,9 +174,28 @@ export function ClickableTextV2({
       {/* 文字內容 */}
       <div className="text-lg leading-relaxed">
         {words.map((word, index) => {
-          if (word.trim() === '') return <span key={index}>{word}</span>
+          // 如果是空格或標點，直接顯示
+          if (word.trim() === '' || /^[.,!?;:\s]+$/.test(word)) {
+            return <span key={index}>{word}</span>
+          }
 
-          return renderWordWithStar(word, getWordClass(word))
+          const className = getWordClass(word)
+          const cleanWord = word.toLowerCase().replace(/[.,!?;:]/g, '')
+          const wordAnalysis = analysis?.[cleanWord]
+          const isHighValue = wordAnalysis?.isHighValue
+
+          return (
+            <span
+              key={index}
+              className={`${className} ${isHighValue ? 'relative' : ''}`}
+              onClick={(e) => handleWordClick(word, e)}
+            >
+              {word}
+              {isHighValue && (
+                <span className="absolute -top-1 -right-1 text-xs">⭐</span>
+              )}
+            </span>
+          )
         })}
       </div>
 
@@ -256,7 +290,7 @@ export function ClickableTextV2({
             </div>
 
             {/* 同義詞 */}
-            {analysis[selectedWord].synonyms.length > 0 && (
+            {analysis[selectedWord].synonyms && 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">