修复部分已知问题

App.tsx

@@ -32,8 +32,10 @@ const App: React.FC = () => {
   // Default to 'zh' (Chinese)
   const [language, setLanguage] = useState<Language>(() => (localStorage.getItem(STORAGE_KEYS.LANGUAGE) as Language) || 'zh');
   const [chatSessions, setChatSessions] = useState<ChatSession[]>(() => {
-    const stored = localStorage.getItem(STORAGE_KEYS.CHAT_SESSIONS);
+    try {
-    if (stored) return JSON.parse(stored);
+      const stored = localStorage.getItem(STORAGE_KEYS.CHAT_SESSIONS);
+      if (stored) return JSON.parse(stored);
+    } catch (e) { console.error("Failed to load chat sessions", e); }
     return [];
   });
   const [activeSessionId, setActiveSessionId] = useState<string>(() => localStorage.getItem(STORAGE_KEYS.ACTIVE_SESSION) || '');
@@ -65,14 +67,63 @@ const App: React.FC = () => {
 
   const t = translations[language];
 
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.CHAT_SESSIONS, JSON.stringify(chatSessions)); }, [chatSessions]);
+  // Safe Storage Helper to prevent white screen on QuotaExceededError
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.ACTIVE_SESSION, activeSessionId); }, [activeSessionId]);
+  const saveToStorage = (key: string, data: any) => {
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.TRANSLATION_HISTORY, JSON.stringify(translationHistory)); }, [translationHistory]);
+    try {
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.READING_HISTORY, JSON.stringify(readingHistory)); }, [readingHistory]);
+      const json = JSON.stringify(data);
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.LISTENING_HISTORY, JSON.stringify(listeningHistory)); }, [listeningHistory]);
+      localStorage.setItem(key, json);
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.OCR_HISTORY, JSON.stringify(ocrHistory)); }, [ocrHistory]);
+    } catch (e: any) {
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.LANGUAGE, language); }, [language]);
+      // Check for QuotaExceededError
-  useEffect(() => { localStorage.setItem(STORAGE_KEYS.SELECTED_MODEL, selectedModel); }, [selectedModel]);
+      if (e.name === 'QuotaExceededError' || e.message?.includes('exceeded the quota')) {
+        console.warn(`Storage quota exceeded for key: ${key}`);
+        addToast('error', translations[language].common.storageFull);
+        
+        // Attempt to recover by stripping heavy data (e.g., audioUrl from chats, base64 images from OCR)
+        if (key === STORAGE_KEYS.CHAT_SESSIONS && Array.isArray(data)) {
+             try {
+                 // Create a lightweight version by removing audioUrl base64 strings
+                 const leanData = (data as ChatSession[]).map(s => ({
+                     ...s,
+                     messages: s.messages.map(m => ({
+                         ...m,
+                         metadata: {
+                             ...m.metadata,
+                             audioUrl: undefined // Remove cached audio to save space
+                         }
+                     }))
+                 }));
+                 localStorage.setItem(key, JSON.stringify(leanData));
+                 addToast('info', translations[language].common.storageOptimized);
+             } catch (retryError) {
+                 console.error("Failed to save even lean chat data", retryError);
+             }
+        } else if (key === STORAGE_KEYS.OCR_HISTORY && Array.isArray(data)) {
+             try {
+                 // Create lightweight version by removing imagePreview
+                 const leanData = (data as OCRRecord[]).map(r => ({
+                     ...r,
+                     imagePreview: '' // Remove heavy base64 image
+                 }));
+                 localStorage.setItem(key, JSON.stringify(leanData));
+                 addToast('info', translations[language].common.storageOptimized);
+             } catch (retryError) {
+                 console.error("Failed to save even lean OCR data", retryError);
+             }
+        }
+      } else {
+        console.error("LocalStorage save failed", e);
+      }
+    }
+  };
+
+  useEffect(() => { saveToStorage(STORAGE_KEYS.CHAT_SESSIONS, chatSessions); }, [chatSessions]);
+  useEffect(() => { saveToStorage(STORAGE_KEYS.ACTIVE_SESSION, activeSessionId); }, [activeSessionId]);
+  useEffect(() => { saveToStorage(STORAGE_KEYS.TRANSLATION_HISTORY, translationHistory); }, [translationHistory]);
+  useEffect(() => { saveToStorage(STORAGE_KEYS.READING_HISTORY, readingHistory); }, [readingHistory]);
+  useEffect(() => { saveToStorage(STORAGE_KEYS.LISTENING_HISTORY, listeningHistory); }, [listeningHistory]);
+  useEffect(() => { saveToStorage(STORAGE_KEYS.OCR_HISTORY, ocrHistory); }, [ocrHistory]);
+  useEffect(() => { saveToStorage(STORAGE_KEYS.LANGUAGE, language); }, [language]);
+  useEffect(() => { saveToStorage(STORAGE_KEYS.SELECTED_MODEL, selectedModel); }, [selectedModel]);
   
   useEffect(() => {
     const activeSession = chatSessions.find(s => s.id === activeSessionId);

index.html

@@ -28,6 +28,77 @@
         background: #94a3b8;
       }
 
+      /* Loading Animation Styles */
+      #app-loader {
+        position: fixed;
+        inset: 0;
+        z-index: 9999;
+        background-color: #f8fafc;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        transition: opacity 0.5s ease-out;
+      }
+      
+      .sakura-spinner {
+        position: relative;
+        width: 80px;
+        height: 80px;
+        animation: spin-slow 6s linear infinite;
+      }
+      
+      .petal {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 30px;
+        height: 30px;
+        background: radial-gradient(circle at 70% 70%, #f43f5e, #fb7185);
+        border-radius: 0 100% 0 100%;
+        opacity: 0.9;
+        transform-origin: 0 0;
+      }
+
+      .petal:nth-child(1) { transform: rotate(0deg) translate(10px, 10px); }
+      .petal:nth-child(2) { transform: rotate(72deg) translate(10px, 10px); }
+      .petal:nth-child(3) { transform: rotate(144deg) translate(10px, 10px); }
+      .petal:nth-child(4) { transform: rotate(216deg) translate(10px, 10px); }
+      .petal:nth-child(5) { transform: rotate(288deg) translate(10px, 10px); }
+
+      .center-dot {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 12px;
+        height: 12px;
+        background-color: #fef3c7;
+        border-radius: 50%;
+        transform: translate(-50%, -50%);
+        z-index: 10;
+        box-shadow: 0 0 10px rgba(251, 113, 133, 0.5);
+      }
+
+      .loader-text {
+        margin-top: 2rem;
+        font-family: 'Nunito', sans-serif;
+        font-weight: 800;
+        font-size: 1.5rem;
+        color: #e11d48;
+        letter-spacing: -0.025em;
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes spin-slow {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+      
+      @keyframes pulse {
+        0%, 100% { opacity: 1; transform: scale(1); }
+        50% { opacity: 0.7; transform: scale(0.98); }
+      }
+
       /* Animations */
       @keyframes fadeInUp {
         from { opacity: 0; transform: translateY(20px); }
@@ -70,6 +141,19 @@
 </script>
 </head>
   <body class="bg-slate-50 text-slate-800 h-[100dvh] overflow-hidden">
+    <!-- Preloader -->
+    <div id="app-loader">
+      <div class="sakura-spinner">
+        <div class="petal"></div>
+        <div class="petal"></div>
+        <div class="petal"></div>
+        <div class="petal"></div>
+        <div class="petal"></div>
+        <div class="center-dot"></div>
+      </div>
+      <div class="loader-text">Sakura Sensei</div>
+    </div>
+
     <div id="root" class="h-full w-full"></div>
     <script type="module" src="/index.tsx"></script>
     <script>

index.tsx

@@ -12,4 +12,24 @@ root.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>
-);
+);
+
+// Remove the preloader when everything is loaded
+const removeLoader = () => {
+  const loader = document.getElementById('app-loader');
+  if (loader) {
+    // Add fade out effect
+    loader.style.opacity = '0';
+    // Remove from DOM after transition
+    setTimeout(() => {
+      loader.remove();
+    }, 500);
+  }
+};
+
+// Check if already loaded
+if (document.readyState === 'complete') {
+  removeLoader();
+} else {
+  window.addEventListener('load', removeLoader);
+}

utils/localization.ts

@@ -216,7 +216,9 @@ export const translations = {
       langJa: "Japanese",
       langNative: "User Language",
       today: "Today",
-      yesterday: "Yesterday"
+      yesterday: "Yesterday",
+      storageFull: "Storage full. History may not be saved.",
+      storageOptimized: "Storage full. Cleared audio cache to save text."
     },
     onboarding: {
       welcome: "Welcome to Sakura Sensei!",
@@ -466,7 +468,9 @@ export const translations = {
       langJa: "日本語",
       langNative: "ユーザー言語",
       today: "今日",
-      yesterday: "昨日"
+      yesterday: "昨日",
+      storageFull: "保存容量がいっぱいです。履歴が保存されない可能性があります。",
+      storageOptimized: "保存容量がいっぱいのため、音声キャッシュを削除してテキストのみ保存しました。"
     },
     onboarding: {
       welcome: "さくら先生へようこそ！",
@@ -716,7 +720,9 @@ export const translations = {
       langJa: "日语",
       langNative: "用户语言",
       today: "今天",
-      yesterday: "昨天"
+      yesterday: "昨天",
+      storageFull: "存储空间已满，历史记录可能无法保存。",
+      storageOptimized: "存储空间已满，已自动清除音频缓存以保存文本。"
     },
     onboarding: {
       welcome: "欢迎来到樱花老师！",

views/OCRView.tsx

@@ -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="font-bold text-slate-800">{v.word || ''}</span>
-                                                    <span className="text-xs text-slate-500 font-mono">({v.reading})</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>
+                                                <h5 className="font-bold text-emerald-900 mb-1">{g.point || ''}</h5>
-                                                <p className="text-sm text-emerald-700 leading-relaxed">{g.explanation}</p>
+                                                <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;

views/ReadingView.tsx

@@ -1,5 +1,3 @@
-
-
 import React, { useState, useRef, useEffect } from 'react';
 import { Language, ReadingLesson, ReadingDifficulty, ChatMessage, Role, MessageType, ReadingLessonRecord } from '../types';
 import { geminiService, decodeAudioData } from '../services/geminiService';
@@ -536,7 +534,7 @@ const ReadingView: React.FC<ReadingViewProps> = ({ language, history, onSaveToHi
                                     <List size={18} /> {t.vocabTitle}
                                 </h4>
                                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                                    {lesson.vocabulary.map((v, i) => (
+                                    {lesson.vocabulary?.map((v, i) => (
                                         <div key={i} className="bg-white p-3 rounded-xl shadow-sm border border-emerald-100 hover:shadow-md transition-shadow relative group">
                                             <div className="flex items-baseline justify-between mb-1">
                                                 <div className="flex items-baseline gap-2">

views/SpeakingPracticeView.tsx

@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect, useRef } from 'react';
 import { geminiService, decodeAudioData } from '../services/geminiService';
 import AudioRecorder from '../components/AudioRecorder';
@@ -190,13 +189,13 @@ const SpeakingPracticeView: React.FC<SpeakingPracticeViewProps> = ({ language })
                     <circle cx="56" cy="56" r="48" stroke="currentColor" strokeWidth="8" fill="transparent" className="text-slate-100" />
                     <circle cx="56" cy="56" r="48" stroke="currentColor" strokeWidth="8" fill="transparent" 
                             strokeDasharray={301.6} 
-                            strokeDashoffset={301.6 - (301.6 * feedback.score) / 100} 
+                            strokeDashoffset={301.6 - (301.6 * (feedback.score || 0)) / 100} 
                             strokeLinecap="round"
-                            className={`${feedback.score > 80 ? 'text-green-500' : feedback.score > 60 ? 'text-amber-500' : 'text-red-500'} transition-all duration-1000 ease-out`} 
+                            className={`${(feedback.score || 0) > 80 ? 'text-green-500' : (feedback.score || 0) > 60 ? 'text-amber-500' : 'text-red-500'} transition-all duration-1000 ease-out`} 
                     />
                   </svg>
                   <div className="absolute flex flex-col items-center animate-scale-in">
-                      <span className="text-3xl font-black text-slate-800">{feedback.score}</span>
+                      <span className="text-3xl font-black text-slate-800">{feedback.score || 0}</span>
                   </div>
                </div>
                <span className="text-xs font-bold text-slate-400 uppercase tracking-widest">{t.score}</span>
@@ -207,7 +206,7 @@ const SpeakingPracticeView: React.FC<SpeakingPracticeViewProps> = ({ language })
               <h4 className="text-xs font-bold text-slate-400 mb-4 uppercase tracking-wider flex items-center gap-2">
                 <AlertCircle size={14} className="text-red-500" /> {t.toImprove}
               </h4>
-              {feedback.pronunciationIssues.length > 0 ? (
+              {feedback.pronunciationIssues && feedback.pronunciationIssues.length > 0 ? (
                 <ul className="space-y-2">
                   {feedback.pronunciationIssues.map((issue, i) => (
                     <li key={i} className="text-sm text-slate-700 bg-red-50/50 p-3 rounded-lg border border-red-100 flex items-start gap-2">
@@ -394,4 +393,4 @@ const SpeakingPracticeView: React.FC<SpeakingPracticeViewProps> = ({ language })
   );
 };
 
-export default SpeakingPracticeView;
+export default SpeakingPracticeView;