feat: 完成前端整合和調試優化
- 整合demo-v3功能到正式generate頁面 - 移除測試示例和調試內容 - 添加前端調試日誌協助排查問題 - 修復組件安全性檢查 - 符合原始功能規格要求 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
95097cf3f1
commit
d69ba4ea8a
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue