修复部分已知问题
This commit is contained in:
@@ -1,11 +1,10 @@
|
||||
|
||||
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import { Language, OCRAnalysis, ChatMessage, Role, MessageType, OCRRecord } from '../types';
|
||||
import { geminiService, decodeAudioData } from '../services/geminiService';
|
||||
import { translations } from '../utils/localization';
|
||||
import { processAndDownloadAudio } from '../utils/audioUtils';
|
||||
import { ScanText, Upload, Camera, Loader2, Send, Book, PenTool, RotateCcw, History, Trash2, X, PanelRightClose, PanelRightOpen, Volume2, Square, MessageCircle, HelpCircle, ChevronLeft, FileText, Download } from 'lucide-react';
|
||||
import { ScanText, Upload, Camera, Loader2, Send, Book, PenTool, RotateCcw, History, Trash2, X, PanelRightClose, PanelRightOpen, Volume2, Square, MessageCircle, HelpCircle, ChevronLeft, FileText, Download, Image as ImageIcon } from 'lucide-react';
|
||||
import ChatBubble from '../components/ChatBubble';
|
||||
|
||||
interface OCRViewProps {
|
||||
@@ -76,7 +75,7 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
id: 'init',
|
||||
role: Role.MODEL,
|
||||
type: MessageType.TEXT,
|
||||
content: t.analyzedIntro.replace('$lang', result.detectedLanguage),
|
||||
content: t.analyzedIntro.replace('$lang', result.detectedLanguage || 'Unknown'),
|
||||
timestamp: Date.now()
|
||||
}]);
|
||||
|
||||
@@ -111,7 +110,7 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
id: 'init',
|
||||
role: Role.MODEL,
|
||||
type: MessageType.TEXT,
|
||||
content: t.historyIntro.replace('$lang', record.analysis.detectedLanguage),
|
||||
content: t.historyIntro.replace('$lang', record.analysis?.detectedLanguage || 'Unknown'),
|
||||
timestamp: Date.now()
|
||||
}]);
|
||||
};
|
||||
@@ -183,7 +182,7 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
const historyText = newHistory.slice(-4).map(m => `${m.role}: ${m.content}`).join('\n');
|
||||
|
||||
try {
|
||||
const dummyLesson = { title: "OCR Scan", japaneseContent: analysis.extractedText, translation: analysis.summary, vocabulary: [] };
|
||||
const dummyLesson = { title: "OCR Scan", japaneseContent: analysis.extractedText || '', translation: analysis.summary || '', vocabulary: [] };
|
||||
const answer = await geminiService.generateReadingTutorResponse(question, dummyLesson, historyText, language);
|
||||
setChatMessages(prev => [...prev, { id: (Date.now() + 1).toString(), role: Role.MODEL, type: MessageType.TEXT, content: answer, timestamp: Date.now() }]);
|
||||
} catch (e) {
|
||||
@@ -224,12 +223,18 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
className="group flex items-start gap-3 p-3 rounded-xl bg-slate-50 border border-slate-100 hover:bg-white hover:shadow-md cursor-pointer transition-all relative"
|
||||
>
|
||||
{/* Image Thumbnail */}
|
||||
<img src={rec.imagePreview} className="w-12 h-12 object-cover rounded-lg border border-slate-200 flex-shrink-0 bg-white" alt="scan thumbnail" />
|
||||
{rec.imagePreview ? (
|
||||
<img src={rec.imagePreview} className="w-12 h-12 object-cover rounded-lg border border-slate-200 flex-shrink-0 bg-white" alt="scan thumbnail" />
|
||||
) : (
|
||||
<div className="w-12 h-12 rounded-lg border border-slate-200 flex-shrink-0 bg-slate-100 flex items-center justify-center text-slate-300">
|
||||
<ImageIcon size={20} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="text-xs font-bold text-slate-700 line-clamp-1 pr-6">{rec.analysis.extractedText.substring(0, 30) || 'Text'}...</div>
|
||||
<div className="text-xs font-bold text-slate-700 line-clamp-1 pr-6">{(rec.analysis?.extractedText || '').substring(0, 30) || 'Text'}...</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mt-1">
|
||||
<span className="text-[10px] text-slate-400">
|
||||
@@ -237,7 +242,7 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-[10px] text-indigo-400 mt-1 truncate">
|
||||
{t.analyzedIntro.replace('$lang', rec.analysis.detectedLanguage)}
|
||||
{t.analyzedIntro.replace('$lang', rec.analysis?.detectedLanguage || 'Auto')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -370,7 +375,13 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
<div className="flex flex-col md:flex-row gap-6">
|
||||
<div className="w-full md:w-1/3">
|
||||
<div className="rounded-2xl overflow-hidden border border-slate-200 shadow-sm bg-slate-900/5">
|
||||
<img src={imagePreview!} className="w-full h-auto object-contain" alt="scan result" />
|
||||
{imagePreview ? (
|
||||
<img src={imagePreview} className="w-full h-auto object-contain" alt="scan result" />
|
||||
) : (
|
||||
<div className="w-full h-48 flex items-center justify-center text-slate-400">
|
||||
<ImageIcon size={48} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
@@ -393,7 +404,7 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4 bg-white rounded-2xl border border-slate-200 text-lg leading-relaxed whitespace-pre-wrap font-serif text-slate-800 shadow-sm">
|
||||
{analysis?.extractedText}
|
||||
{analysis?.extractedText || ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -401,43 +412,47 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
{/* 2. Summary */}
|
||||
<div className="animate-fade-in-up delay-100">
|
||||
<h4 className="text-xs font-bold text-slate-400 uppercase tracking-wider mb-2">{t.summaryHeader}</h4>
|
||||
<p className="text-slate-700 leading-relaxed bg-indigo-50/50 p-6 rounded-2xl border border-indigo-100">{analysis?.summary}</p>
|
||||
<p className="text-slate-700 leading-relaxed bg-indigo-50/50 p-6 rounded-2xl border border-indigo-100">{analysis?.summary || ''}</p>
|
||||
</div>
|
||||
|
||||
{/* 3. Vocabulary */}
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm animate-fade-in-up delay-200">
|
||||
<h4 className="text-sm font-bold text-indigo-800 mb-4 flex items-center gap-2"><Book size={18} /> {t.vocabHeader}</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{analysis?.vocabulary.map((v, i) => (
|
||||
{analysis?.vocabulary?.map((v, i) => (
|
||||
v ? (
|
||||
<div key={i} className="bg-slate-50 p-3 rounded-xl border border-slate-100 flex flex-col group hover:bg-white hover:shadow-md transition-all">
|
||||
<div className="flex justify-between items-baseline mb-1">
|
||||
<div className="flex items-baseline gap-2">
|
||||
<span className="font-bold text-slate-800">{v.word}</span>
|
||||
<span className="text-xs text-slate-500 font-mono">({v.reading})</span>
|
||||
<span className="font-bold text-slate-800">{v.word || ''}</span>
|
||||
<span className="text-xs text-slate-500 font-mono">({v.reading || ''})</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => playAudio(v.word, `vocab-${i}`)}
|
||||
onClick={() => playAudio(v.word || '', `vocab-${i}`)}
|
||||
className={`p-1.5 rounded-full transition-colors ${playingAudioId === `vocab-${i}` ? 'bg-pink-100 text-pink-500' : 'text-slate-300 hover:bg-indigo-50 hover:text-indigo-500'}`}
|
||||
>
|
||||
{playingAudioId === `vocab-${i}` ? <Loader2 size={14} className="animate-spin" /> : <Volume2 size={14} />}
|
||||
</button>
|
||||
</div>
|
||||
<span className="text-sm text-indigo-600 font-medium">{v.meaning}</span>
|
||||
<span className="text-sm text-indigo-600 font-medium">{v.meaning || ''}</span>
|
||||
</div>
|
||||
) : null
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 4. Grammar */}
|
||||
{analysis?.grammarPoints && analysis.grammarPoints.length > 0 && (
|
||||
{analysis?.grammarPoints && analysis.grammarPoints?.length > 0 && (
|
||||
<div className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm animate-fade-in-up delay-300">
|
||||
<h4 className="text-sm font-bold text-emerald-800 mb-4 flex items-center gap-2"><PenTool size={18} /> {t.grammarHeader}</h4>
|
||||
<div className="space-y-4">
|
||||
{analysis.grammarPoints.map((g, i) => (
|
||||
g ? (
|
||||
<div key={i} className="bg-emerald-50/50 p-4 rounded-xl border border-emerald-100">
|
||||
<h5 className="font-bold text-emerald-900 mb-1">{g.point}</h5>
|
||||
<p className="text-sm text-emerald-700 leading-relaxed">{g.explanation}</p>
|
||||
<h5 className="font-bold text-emerald-900 mb-1">{g.point || ''}</h5>
|
||||
<p className="text-sm text-emerald-700 leading-relaxed">{g.explanation || ''}</p>
|
||||
</div>
|
||||
) : null
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
@@ -510,4 +525,4 @@ const OCRView: React.FC<OCRViewProps> = ({ language, history, onSaveToHistory, o
|
||||
);
|
||||
};
|
||||
|
||||
export default OCRView;
|
||||
export default OCRView;
|
||||
|
||||
Reference in New Issue
Block a user