Update app.py

app.py

@@ -39,30 +39,23 @@ try:
 except Exception: whisper_stt_client = None
 
 # --- Helper Functions ---
-def generate_story_from_llm(name, grade_str, topic, progress=gr.Progress(track_tqdm=True)):
-    progress(0.0, desc="Starting story creation...")
+def generate_story_from_llm(name, grade_str, topic):
     default_passage_val = ""
-    default_audio_gen_update = gr.update(interactive=False, visible=False)
-    default_audio_player_update = gr.update(value=None, visible=False)
     if not LLM_API_CONFIGURED:
-        progress(1.0, desc="Complete")
-        return "LLM API key not configured...", default_audio_gen_update, default_audio_player_update
+        return "LLM API key not configured..."
     try:
         if grade_str.startswith("Grade "):
             grade = int(grade_str.replace("Grade ", ""))
         else:
             grade = int(grade_str)
     except ValueError:
-        progress(1.0, desc="Complete")
-        return "Invalid grade level selected.", default_audio_gen_update, default_audio_player_update
+        return "Invalid grade level selected."
     if grade <= 2: word_target, max_llm_tokens = "around 40-60 words", 100
     elif grade <= 5: word_target, max_llm_tokens = "around 80-100 words", 200
     elif grade <= 8: word_target, max_llm_tokens = "around 100-120 words", 250
     else: word_target, max_llm_tokens = "around 120-150 words", 300
     
-    progress(0.1, desc="Setting up AI story generator...")
     story_text_result = default_passage_val
-    audio_gen_btn_update = default_audio_gen_update
     try:
         model = genai.GenerativeModel(model_name="gemini-1.5-flash-latest")
         prompt = (
@@ -78,9 +71,7 @@ def generate_story_from_llm(name, grade_str, topic, progress=gr.Progress(track_t
             "HARM_CATEGORY_DANGEROUS_CONTENT"
         ]]
         generation_config = genai.types.GenerationConfig(candidate_count=1, max_output_tokens=max_llm_tokens, temperature=0.7)
-        progress(0.3, desc="AI is writing your story...")
         response = model.generate_content(prompt, generation_config=generation_config, safety_settings=safety_settings)
-        progress(0.8, desc="Polishing your story...")
         if response.candidates and response.candidates[0].content.parts:
             story = response.text
             if response.prompt_feedback and response.prompt_feedback.block_reason:
@@ -89,51 +80,40 @@ def generate_story_from_llm(name, grade_str, topic, progress=gr.Progress(track_t
                 story_text_result = f"The LLM couldn't generate a story for '{topic}'. Try another topic or rephrase. ✨"
             else:
                 story_text_result = story.strip()
-                audio_gen_btn_update = gr.update(interactive=True, visible=True)
         else:
             if response.prompt_feedback and response.prompt_feedback.block_reason:
                  story_text_result = f"Story idea for '{topic}' got blocked (Reason: {response.prompt_feedback.block_reason}). Try a different topic. 😊"
             else:
                 story_text_result = "Hmm, LLM had trouble with that topic. Maybe try another one? 🤔"
-        progress(1.0, desc="Story complete!")
-        return story_text_result, audio_gen_btn_update, default_audio_player_update
+        return story_text_result
     except Exception as e:
-        progress(1.0, desc="Complete")
-        return f"Oh no! 😟 Error generating story. Details: {e}", default_audio_gen_update, default_audio_player_update
+        return f"Oh no! 😟 Error generating story. Details: {e}"
 
-def text_to_speech_using_space(text_to_speak, progress=gr.Progress(track_tqdm=True)):
+def text_to_speech_using_space_simple(text):
+    """Simplified TTS function - Gradio will show its default loading indicator"""
     global tts_client
-    progress(0.0, desc="🔊 Preparing voice synthesis...")
     
-    if not text_to_speak or not text_to_speak.strip():
-        progress(1.0, desc="Complete")
+    if not text or not text.strip():
         return None
     
-    progress(0.1, desc="🔊 Initializing audio generation...")
-    
     # Reconnect to TTS client if needed
     if not tts_client:
-        progress(0.2, desc="🔗 Connecting to advanced voice service...")
         try:
             tts_client = Client("NihalGazi/Text-To-Speech-Unlimited")
-            progress(0.3, desc="🔗 Connected to voice service...")
         except Exception as e:
             print(f"Failed to connect to TTS service: {e}")
-            progress(1.0, desc="Complete")
             return None
-    
+
     if not tts_client:
-        progress(1.0, desc="Complete")
         return None
         
-    progress(0.4, desc="🎙️ AI is reading your story aloud...")
     try:
         # Try the correct API configuration with emotion parameter
         api_methods = [
-            {"params": [text_to_speak, "alloy", "happy"], "api_name": "/text_to_speech_app"},
-            {"params": [text_to_speak, "alloy", "neutral"], "api_name": "/text_to_speech_app"},
-            {"params": [text_to_speak, "nova", "neutral"], "api_name": "/text_to_speech_app"},
-            {"params": [text_to_speak], "api_name": "/predict"}
+            {"params": [text, "alloy", "happy"], "api_name": "/text_to_speech_app"},
+            {"params": [text, "alloy", "neutral"], "api_name": "/text_to_speech_app"},
+            {"params": [text, "nova", "neutral"], "api_name": "/text_to_speech_app"},
+            {"params": [text], "api_name": "/predict"}
         ]
         
         audio_filepath = None
@@ -163,8 +143,6 @@ def text_to_speech_using_space(text_to_speak, progress=gr.Progress(track_tqdm=Tr
                 continue
         
         if audio_filepath:
-            progress(0.9, desc="🎵 Voice generation complete!")
-            progress(1.0, desc="🔊 Audio ready!")
             print(f"FINAL: Returning audio file path: {audio_filepath}")
             return audio_filepath
         else:
@@ -175,13 +153,11 @@ def text_to_speech_using_space(text_to_speak, progress=gr.Progress(track_tqdm=Tr
         print(f"TTS error: {e}")
         # Try to reconnect on error
         try:
-            progress(0.6, desc="🔄 Reconnecting to voice service...")
             tts_client = Client("NihalGazi/Text-To-Speech-Unlimited")
             if tts_client:
-                progress(0.8, desc="🎙️ Retrying voice generation...")
                 # Try the most basic approach with emotion parameter
                 audio_result = tts_client.predict(
-                    text_to_speak, 
+                    text, 
                     "alloy",  # voice
                     "neutral",  # emotion
                     api_name="/text_to_speech_app"
@@ -197,7 +173,6 @@ def text_to_speech_using_space(text_to_speak, progress=gr.Progress(track_tqdm=Tr
                     audio_filepath = audio_result[0]
                     
                 if audio_filepath:
-                    progress(1.0, desc="🔊 Audio ready!")
                     print(f"RETRY SUCCESS: Returning audio file path: {audio_filepath}")
                     return audio_filepath
                     
@@ -205,23 +180,17 @@ def text_to_speech_using_space(text_to_speak, progress=gr.Progress(track_tqdm=Tr
             print(f"TTS retry failed: {retry_error}")
             pass
         
-        progress(1.0, desc="Audio generation failed")
         print("TTS failed completely - returning None")
         return None
 
-def speech_to_text_whisper_space(audio_filepath, progress=gr.Progress(track_tqdm=True), max_retries=3):
-    progress(0.1, desc="Sending your reading for transcription...")
+def speech_to_text_whisper_space(audio_filepath, max_retries=3):
     if not whisper_stt_client:
-        progress(1.0, desc="Complete")
         return "Speech-to-text service is not available. 🛠️"
     if not audio_filepath:
-        progress(1.0, desc="Complete") 
         return "No recording received for transcription. 🎤"
     for attempt in range(max_retries):
         try:
-            progress(0.2 + (attempt * 0.1), desc=f"Transcribing your voice (Whisper) - Attempt {attempt + 1}...")
             result = whisper_stt_client.predict(audio_filepath, api_name="/predict")
-            progress(0.9, desc="Transcription complete.")
             if isinstance(result, tuple) and len(result) > 0:
                 transcribed_text = result[0] if result[0] else ""
             elif isinstance(result, list) and len(result) > 0:
@@ -229,13 +198,10 @@ def speech_to_text_whisper_space(audio_filepath, progress=gr.Progress(track_tqdm
             elif isinstance(result, str):
                 transcribed_text = result
             else:
-                progress(1.0, desc="Complete")
                 return "Hmm, STT service returned unexpected format. 🤔"
-            progress(1.0, desc="Transcription complete!")
             return transcribed_text if transcribed_text else "No speech detected in the recording. 🤫"
         except Exception:
             continue
-    progress(1.0, desc="Complete")
     return "Unexpected error during transcription. Please try again! 🔄"
 
 def clean_text_for_comparison(text):
@@ -246,25 +212,64 @@ def clean_text_for_comparison(text):
 def compare_texts_for_feedback(original_text, student_text):
     original_words, student_words = clean_text_for_comparison(original_text), clean_text_for_comparison(student_text)
     if not student_words: return "It sounds like you didn't record or it was very quiet! 🤫 Try recording again nice and clear!", ""
+    
+    # Enhanced analysis metrics
+    total_original_words = len(original_words)
+    total_student_words = len(student_words)
+    
     matcher = difflib.SequenceMatcher(None, original_words, student_words, autojunk=False)
-    feedback_lines, highlighted_parts = [], []
-    word_diff_count = 0
-    pronunciation_tips = []
+    highlighted_parts = []
+    
+    # Detailed tracking
+    correct_words = 0
+    substituted_words = 0
+    missed_words = 0
+    extra_words = 0
+    
+    # New improved tracking
+    challenging_words = []
+    skill_areas = {
+        'accuracy': {'score': 0, 'tips': []},
+        'fluency': {'score': 0, 'tips': []},
+        'pronunciation': {'score': 0, 'tips': []}
+    }
+    
+    # Enhanced pronunciation guide with more words
     pronunciation_guide = {
         'the': 'thuh or thee', 'through': 'threw', 'though': 'thoh', 'thought': 'thawt',
         'knight': 'night', 'know': 'noh', 'write': 'right', 'wrong': 'rawng', 'what': 'wot',
         'where': 'wair', 'when': 'wen', 'why': 'wy', 'who': 'hoo', 'laugh': 'laff',
         'enough': 'ee-nuff', 'cough': 'koff', 'rough': 'ruff', 'tough': 'tuff', 'magic': 'maj-ik',
         'school': 'skool', 'friend': 'frend', 'said': 'sed', 'says': 'sez', 'once': 'wunts',
-        'was': 'wuz', 'were': 'wur', 'you': 'yoo', 'your': 'yor', 'there': 'thair', 'their': 'thair', 'they': 'thay'
+        'was': 'wuz', 'were': 'wur', 'you': 'yoo', 'your': 'yor', 'there': 'thair', 'their': 'thair', 'they': 'thay',
+        'because': 'bee-koz', 'beautiful': 'byoo-ti-ful', 'different': 'dif-er-ent', 'important': 'im-por-tant',
+        'people': 'pee-pul', 'together': 'too-geth-er', 'water': 'waw-ter', 'favorite': 'fay-vor-it',
+        'journey': 'jur-nee', 'treasure': 'trezh-er', 'adventure': 'ad-ven-cher', 'mysterious': 'mis-teer-ee-us'
     }
+    
+    def identify_challenging_words(text_words):
+        """Identify potentially difficult words from the story for proactive help"""
+        challenging = []
+        for word in text_words:
+            word_lower = word.lower()
+            # Add words that are commonly mispronounced or complex
+            if (len(word) > 6 or  # Long words
+                word_lower in pronunciation_guide or  # Known difficult words
+                'tion' in word_lower or 'ough' in word_lower or  # Tricky endings
+                word_lower.startswith(('wr', 'kn', 'ph')) or  # Silent letters
+                'gh' in word_lower or 'th' in word_lower):  # Difficult sounds
+                if word_lower not in challenging:
+                    challenging.append(word_lower)
+        return challenging[:5]  # Limit to 5 most relevant words
+    
     def get_pronunciation_tip(word):
         word_lower = word.lower()
         if word_lower in pronunciation_guide:
-            return f"🗣️ Try saying: \"{pronunciation_guide[word_lower]}\""
+            return pronunciation_guide[word_lower]
         elif len(word) > 6:
-            syllables = []
+            # Simple syllable breakdown
             vowels = 'aeiou'
+            syllables = []
             current_syllable = ''
             for i, char in enumerate(word_lower):
                 current_syllable += char
@@ -273,83 +278,264 @@ def compare_texts_for_feedback(original_text, student_text):
                         syllables.append(current_syllable)
                         current_syllable = ''
             if current_syllable: syllables.append(current_syllable)
-            if len(syllables) > 1: return f"🔤 Break it down: \"{'-'.join(syllables)}\""
-        if word_lower.endswith('tion'): return "🗣️ Words ending in '-tion' sound like 'shun'"
-        elif word_lower.endswith('ough'): return "🗣️ '-ough' can be tricky! Listen to the audio again"
-        elif 'gh' in word_lower: return "🗣️ 'gh' is often silent or sounds like 'f'"
-        elif word_lower.startswith('wr'): return "🗣️ In 'wr-' words, the 'w' is silent"
-        elif word_lower.startswith('kn'): return "🗣️ In 'kn-' words, the 'k' is silent"
-        return f"🎯 Focus on each sound in \"{word}\""
+            if len(syllables) > 1: return '-'.join(syllables)
+        return word_lower
+    
+    # Process each operation in the diff for highlighting
     for tag, i1, i2, j1, j2 in matcher.get_opcodes():
         orig_seg_words, stud_seg_words = original_words[i1:i2], student_words[j1:j2]
         orig_seg_text, stud_seg_text = " ".join(orig_seg_words), " ".join(stud_seg_words)
+        
         if tag == 'equal':
-            highlighted_parts.append(f'<span style="background: #90EE90; padding: 2px 4px; border-radius: 4px; margin: 1px;">{orig_seg_text}</span>')
-        else:
-            word_diff_count += max(len(orig_seg_words), len(stud_seg_words))
-            if tag == 'replace':
-                for orig_word, stud_word in zip(orig_seg_words, stud_seg_words):
-                    if orig_word != stud_word:
-                        tip = get_pronunciation_tip(orig_word)
-                        pronunciation_tips.append(f"**{orig_word.upper()}**: {tip}")
-                feedback_lines.append(f"🔄 Instead of: \"{orig_seg_text}\", you said: \"{stud_seg_text}\"")
-                highlighted_parts.append(f'<span style="background: #FFE4B5; padding: 2px 4px; border-radius: 4px; margin: 1px; text-decoration: line-through;">{orig_seg_text}</span> <span style="background: #FFB6C1; padding: 2px 4px; border-radius: 4px; margin: 1px; font-weight: bold;">{stud_seg_text}</span>')
-            elif tag == 'delete':
-                for missed_word in orig_seg_words:
-                    tip = get_pronunciation_tip(missed_word)
-                    pronunciation_tips.append(f"**{missed_word.upper()}** (missed): {tip}")
-                feedback_lines.append(f"⏭️ You missed: \"{orig_seg_text}\"")
-                highlighted_parts.append(f'<span style="background: #FFA0B4; padding: 2px 4px; border-radius: 4px; margin: 1px; text-decoration: line-through;">{orig_seg_text}</span> <span style="font-style: italic; color: #666;">(*skipped*)</span>')
-            elif tag == 'insert':
-                feedback_lines.append(f"➕ You added: \"{stud_seg_text}\" (not in original)")
-                highlighted_parts.append(f'<span style="background: #DDA0DD; padding: 2px 4px; border-radius: 4px; margin: 1px; font-style: italic;">(*added:* {stud_seg_text})</span>')
+            correct_words += len(orig_seg_words)
+            highlighted_parts.append(f'<span style="background: #22c55e; color: white; padding: 3px 6px; border-radius: 6px; margin: 2px; font-weight: 500;">{orig_seg_text}</span>')
+        elif tag == 'replace':
+            substituted_words += len(orig_seg_words)
+            highlighted_parts.append(f'<span style="background: #f59e0b; color: white; padding: 3px 6px; border-radius: 6px; margin: 2px; font-weight: 500; text-decoration: line-through;">{orig_seg_text}</span> <span style="background: #ef4444; color: white; padding: 3px 6px; border-radius: 6px; margin: 2px; font-weight: 500;">→{stud_seg_text}</span>')
+        elif tag == 'delete':
+            missed_words += len(orig_seg_words)
+            highlighted_parts.append(f'<span style="background: #ef4444; color: white; padding: 3px 6px; border-radius: 6px; margin: 2px; font-weight: 500; text-decoration: line-through;">{orig_seg_text}</span> <span style="font-style: italic; color: #9ca3af; font-size: 0.9em;">(skipped)</span>')
+        elif tag == 'insert':
+            extra_words += len(stud_seg_words)
+            highlighted_parts.append(f'<span style="background: #8b5cf6; color: white; padding: 3px 6px; border-radius: 6px; margin: 2px; font-weight: 500; font-style: italic;">+{stud_seg_text}</span>')
+    
+    # Calculate comprehensive metrics
+    accuracy_percentage = round((correct_words / total_original_words) * 100, 1) if total_original_words > 0 else 0
+    
+    # Determine performance level
+    if accuracy_percentage >= 95:
+        performance_level = "🏆 Excellent"
+        performance_color = "#10b981"
+        performance_message = "Outstanding reading! You're reading like a champion!"
+    elif accuracy_percentage >= 85:
+        performance_level = "🌟 Very Good"
+        performance_color = "#3b82f6"
+        performance_message = "Great job! You're doing really well with your reading."
+    elif accuracy_percentage >= 70:
+        performance_level = "💪 Good Progress"
+        performance_color = "#f59e0b"
+        performance_message = "Nice work! Keep practicing to improve even more."
+    elif accuracy_percentage >= 50:
+        performance_level = "📚 Keep Practicing"
+        performance_color = "#ef4444"
+        performance_message = "You're learning! More practice will help you improve."
+    else:
+        performance_level = "🚀 Just Getting Started"
+        performance_color = "#8b5cf6"
+        performance_message = "Every reader starts somewhere! Keep trying and you'll get better."
+    
+    # Generate challenging words for proactive help
+    challenging_words = identify_challenging_words(original_words)
+    
+    # Assess skill areas
+    skill_areas['accuracy']['score'] = accuracy_percentage
+    if accuracy_percentage < 90:
+        skill_areas['accuracy']['tips'] = ['Practice reading slowly and clearly', 'Follow along with the text while listening']
+    
+    skill_areas['fluency']['score'] = max(0, 100 - (missed_words * 10))
+    if missed_words > 2:
+        skill_areas['fluency']['tips'] = ['Try reading the story multiple times', 'Practice difficult words separately first']
+    
+    skill_areas['pronunciation']['score'] = max(0, 100 - (substituted_words * 15))
+    if substituted_words > 1:
+        skill_areas['pronunciation']['tips'] = ['Listen carefully to each word sound', 'Break long words into smaller parts']
+    
     final_text = " ".join(highlighted_parts)
-    if not feedback_lines:
-        feedback_html = """
-🎉🥳 **PERFECT READING!** 🥳🎉
-Amazing! You read every single word correctly! 🌟
-🏆 **Reading Champion!** 🏆
+    
+    # Perfect reading case
+    if accuracy_percentage == 100:
+        feedback_html = f"""
+<div style="background: linear-gradient(135deg, #10b981, #059669); padding: 24px; border-radius: 16px; color: white; text-align: center; margin-bottom: 20px;">
+    <h2 style="margin: 0 0 8px 0; font-size: 1.8rem;">🎉 PERFECT READING! 🎉</h2>
+    <p style="margin: 0; font-size: 1.1rem; opacity: 0.9;">Amazing! You read every single word correctly!</p>
+</div>
+
+<div style="background: #f0fdf4; border: 2px solid #22c55e; border-radius: 12px; padding: 20px; margin-bottom: 16px;">
+    <h3 style="color: #15803d; margin: 0 0 12px 0;">📊 Your Reading Score</h3>
+    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
+        <div style="text-align: center;">
+            <div style="font-size: 2rem; font-weight: bold; color: #15803d;">100%</div>
+            <div style="font-size: 0.9rem; color: #166534;">Word Accuracy</div>
+        </div>
+        <div style="text-align: center;">
+            <div style="font-size: 2rem; font-weight: bold, color: #15803d;">{total_original_words}/{total_original_words}</div>
+            <div style="font-size: 0.9rem, color: #166534;">Words Correct</div>
+        </div>
+    </div>
+    <div style="text-align: center; padding: 12px; background: #dcfce7; border-radius: 8px;">
+        <strong style="color: #15803d;">🏆 Reading Champion Level!</strong>
+    </div>
+</div>
+
+<div style="background: #fffbeb; border-radius: 12px; padding: 16px;">
+    <h4 style="color: #92400e; margin: 0 0 8px 0;">🎯 What's Next?</h4>
+    <ul style="margin: 8px 0; padding-left: 20px; color: #78350f;">
+        <li>Try a more challenging story topic</li>
+        <li>Practice reading faster while staying accurate</li>
+        <li>Help a friend or family member practice reading</li>
+        <li>Celebrate your excellent reading skills! 🎊</li>
+    </ul>
+</div>
         """
         return feedback_html, final_text
+    
+    # Improved analysis with non-repetitive, skill-focused feedback
+    feedback_html = f"""
+<div style="background: linear-gradient(135deg, {performance_color}, {performance_color}dd); padding: 20px; border-radius: 16px; color: white; text-align: center; margin-bottom: 20px;">
+    <h2 style="margin: 0 0 8px 0; font-size: 1.6rem;">{performance_level}</h2>
+    <p style="margin: 0; font-size: 1rem; opacity: 0.9;">{performance_message}</p>
+</div>
+
+<div style="background: #f8fafc; border-radius: 12px; padding: 20px; margin-bottom: 20px;">
+    <h3 style="color: #1e293b; margin: 0 0 16px 0;">📊 Reading Dashboard</h3>
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; margin-bottom: 16px;">
+        <div style="text-align: center; background: white; padding: 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+            <div style="font-size: 1.8rem; font-weight: bold; color: {performance_color};">{accuracy_percentage}%</div>
+            <div style="font-size: 0.85rem; color: #64748b;">Accuracy</div>
+        </div>
+        <div style="text-align: center; background: white; padding: 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+            <div style="font-size: 1.8rem; font-weight: bold; color: #22c55e;">{correct_words}</div>
+            <div style="font-size: 0.85rem; color: #64748b;">Words Correct</div>
+        </div>
+        <div style="text-align: center; background: white; padding: 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+            <div style="font-size: 1.8rem; font-weight: bold; color: #ef4444;">{missed_words}</div>
+            <div style="font-size: 0.85rem; color: #64748b;">Missed</div>
+        </div>
+        <div style="text-align: center; background: white; padding: 12px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
+            <div style="font-size: 1.8rem; font-weight: bold; color: #f59e0b;">{substituted_words}</div>
+            <div style="font-size: 0.85rem; color: #64748b;">Changed</div>
+        </div>
+    </div>
+    
+    <!-- Color Legend -->
+    <div style="background: #ffffff; border-radius: 8px; padding: 12px; margin-top: 16px;">
+        <h4 style="color: #374151; margin: 0 0 8px 0; font-size: 0.9rem;">📖 Word Color Guide:</h4>
+        <div style="display: flex; flex-wrap: wrap; gap: 8px; font-size: 0.8rem;">
+            <span style="background: #22c55e; color: white; padding: 2px 8px; border-radius: 4px;">✓ Correct</span>
+            <span style="background: #ef4444; color: white; padding: 2px 8px; border-radius: 4px;">✗ Missed</span>
+            <span style="background: #f59e0b; color: white; padding: 2px 8px; border-radius: 4px;">~ Changed</span>
+            <span style="background: #8b5cf6; color: white; padding: 2px 8px; border-radius: 4px;">+ Added</span>
+        </div>
+    </div>
+</div>
+"""
+
+    # Smart Focus Areas - skill-based instead of error repetition
+    improvement_areas = []
+    if accuracy_percentage < 85:
+        improvement_areas.append("🎯 **Reading Accuracy**: Focus on reading each word carefully")
+    if missed_words > 2:
+        improvement_areas.append("📖 **Reading Fluency**: Practice reading without skipping words")
+    if substituted_words > 2:
+        improvement_areas.append("🗣️ **Pronunciation**: Work on saying words clearly")
+    if extra_words > 1:
+        improvement_areas.append("👁️ **Focus & Attention**: Follow the text closely while reading")
+
+    if improvement_areas:
+        feedback_html += f"""
+<div style="background: #fef9c3; border-left: 4px solid #eab308; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
+    <h4 style="color: #a16207; margin: 0 0 12px 0;">🎯 Smart Focus Areas</h4>
+    <div style="color: #a16207;">
+"""
+        for area in improvement_areas[:3]:  # Limit to 3 most important areas
+            feedback_html += f"        • {area}<br>"
+        
+        feedback_html += """
+    </div>
+</div>
+"""
+
+    # Proactive Pronunciation Helper - based on story words, not just errors
+    if challenging_words:
+        feedback_html += f"""
+<div style="background: #e0f2fe; border-radius: 12px; padding: 16px; margin-bottom: 16px;">
+    <h4 style="color: #0277bd; margin: 0 0 12px 0;">🗣️ Story Word Pronunciation Guide</h4>
+    <p style="color: #0277bd; font-size: 0.9rem; margin: 0 0 12px 0;">Here are some words from your story that might be tricky:</p>
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
+"""
+        for word in challenging_words:
+            pronunciation = get_pronunciation_tip(word)
+            feedback_html += f"""
+        <div style="background: #b3e5fc; padding: 8px 12px; border-radius: 6px;">
+            <strong style="color: #01579b;">{word.upper()}</strong><br>
+            <span style="color: #0277bd; font-size: 0.85rem;">"say: {pronunciation}"</span>
+        </div>"""
+        
+        feedback_html += """
+    </div>
+    <div style="margin-top: 12px; padding: 8px; background: #b3e5fc; border-radius: 6px; font-size: 0.9rem;">
+        💡 <strong>Practice tip:</strong> Listen to the AI reading these words and repeat them slowly!
+    </div>
+</div>
+"""
+
+    # Progress Insights for Parents
+    feedback_html += f"""
+<div style="background: #f0f9ff; border-radius: 12px; padding: 16px; margin-bottom: 16px;">
+    <h4 style="color: #0369a1; margin: 0 0 12px 0;">📈 Reading Skills Progress</h4>
+    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;">
+        <div style="background: white; padding: 10px; border-radius: 6px; text-align: center;">
+            <div style="font-size: 1.2rem; font-weight: bold; color: #0369a1;">{skill_areas['accuracy']['score']:.0f}%</div>
+            <div style="font-size: 0.8rem; color: #64748b;">Word Accuracy</div>
+        </div>
+        <div style="background: white; padding: 10px; border-radius: 6px; text-align: center;">
+            <div style="font-size: 1.2rem; font-weight: bold; color: #0369a1;">{skill_areas['fluency']['score']:.0f}%</div>
+            <div style="font-size: 0.8rem; color: #64748b;">Reading Flow</div>
+        </div>
+        <div style="background: white; padding: 10px; border-radius: 6px; text-align: center;">
+            <div style="font-size: 1.2rem; font-weight: bold; color: #0369a1;">{skill_areas['pronunciation']['score']:.0f}%</div>
+            <div style="font-size: 0.8rem; color: #64748b;">Pronunciation</div>
+        </div>
+    </div>
+</div>
+"""
+
+    # Personalized Next Steps
+    if accuracy_percentage >= 85:
+        next_steps = [
+            "🎧 Practice reading along with the audio for better timing",
+            "📚 Try a slightly more challenging story topic",
+            "🗣️ Focus on reading with expression and emotion"
+        ]
+    elif accuracy_percentage >= 70:
+        next_steps = [
+            "🎧 Listen to the AI reading first, then read yourself",
+            "🔤 Practice the tricky words from above separately",
+            "📱 Record yourself multiple times and compare"
+        ]
     else:
-        feedback_parts = [
-            f"📈 **Reading Progress Report**",
-            f"📊 **Words to practice:** {word_diff_count}",
-            f"💪 **Keep improving!** Practice makes perfect!",
-            "",
-            "🔍 **What to work on:**"
+        next_steps = [
+            "🎧 Listen to the audio several times before recording",
+            "👁️ Follow along with the text while listening",
+            "⏰ Take your time - read slowly and clearly"
         ]
-        for line in feedback_lines: feedback_parts.append(f"• {line}")
-        if pronunciation_tips:
-            feedback_parts.extend([
-                "",
-                "🎤 **Pronunciation Helper**",
-                "Here's how to say the tricky words:"
-            ])
-            for tip in pronunciation_tips[:5]: feedback_parts.append(f"• {tip}")
-            feedback_parts.extend([
-                "",
-                "💡 **Pro tip:** Listen to the story audio again and pay special attention to these words!"
-            ])
-        feedback_parts.extend([
-            "",
-            "🎯 **Practice Suggestions**",
-            "• 🎧 Listen to the AI reading first",
-            "• 🔤 Practice saying difficult words slowly",
-            "• 📖 Read the story again at your own pace",
-            "• 🔄 Try recording again when you're ready!"
-        ])
-        feedback_html = "\n".join(feedback_parts)
-        return feedback_html, final_text
 
-def assess_student_reading_ui(original_passage_state, student_audio_path, progress=gr.Progress(track_tqdm=True)):
+    feedback_html += f"""
+<div style="background: #f0f9ff; border-radius: 12px; padding: 16px;">
+    <h4 style="color: #0369a1; margin: 0 0 12px 0;">🎮 Your Reading Quest - Next Steps!</h4>
+    <div style="color: #0369a1;">
+"""
+    for step in next_steps:
+        feedback_html += f"        • {step}<br>"
+    
+    feedback_html += f"""
+    </div>
+    <div style="margin-top: 16px; padding: 12px; background: #dbeafe; border-radius: 8px; text-align: center;">
+        <strong style="color: #1e40af;">🎯 Next Goal: Reach {min(accuracy_percentage + 15, 100)}% accuracy!</strong>
+    </div>
+</div>
+"""
+
+    return feedback_html, final_text
+
+def assess_student_reading_ui(original_passage_state, student_audio_path):
     if not student_audio_path: return "🎤 Please record your reading first!", ""
     if not original_passage_state: return "Hmm, the original story is missing. 😟 Please generate a story first.", ""
-    transcribed_text = speech_to_text_whisper_space(student_audio_path, progress=progress)
+    transcribed_text = speech_to_text_whisper_space(student_audio_path)
     stt_errors = ["couldn't understand", "had trouble", "service isn't working", "service is busy", "didn't get any recording", "filepath type issue"]
     if any(err in (transcribed_text or "").lower() for err in stt_errors): return transcribed_text, ""
-    progress(0.6, desc="Analyzing your reading accuracy..."); feedback, highlighted_passage = compare_texts_for_feedback(original_passage_state, transcribed_text)
-    progress(1.0, desc="Assessment complete!"); return feedback, highlighted_passage
+    feedback, highlighted_passage = compare_texts_for_feedback(original_passage_state, transcribed_text)
+    return feedback, highlighted_passage
 
 css = """
 body, .gradio-container {
@@ -357,17 +543,54 @@ body, .gradio-container {
     font-family: -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', 'Roboto', Arial, sans-serif !important;
 }
 .main-header {
-    background: white !important;
-    border-radius: 20px !important;
-    box-shadow: 0 8px 32px 0 rgba(60,60,90,0.06) !important;
-    padding: 36px 20px 24px 20px !important;
-    margin-bottom: 28px !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    border-radius: 0 !important;
+    box-shadow: 0 8px 32px 0 rgba(102, 126, 234, 0.3) !important;
+    padding: 32px 20px 28px 20px !important;
+    margin: -20px -20px 28px -20px !important;
+    width: calc(100% + 40px) !important;
     text-align: center;
     border: none !important;
+    position: relative;
+    overflow: hidden;
+}
+.main-header::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
+    pointer-events: none;
+}
+.main-header h1 {
+    font-size: 2.4rem !important; 
+    font-weight: 800 !important; 
+    color: white !important;
+    margin: 0 0 8px 0 !important;
+    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
+    letter-spacing: -0.5px !important;
+    position: relative;
+    z-index: 1;
+}
+.main-header p {
+    color: rgba(255,255,255,0.9) !important; 
+    font-size: 1.1rem !important; 
+    margin: 0 !important;
+    font-weight: 400 !important;
+    position: relative;
+    z-index: 1;
+}
+.tech-badge {
+    background: rgba(255,255,255,0.2) !important; 
+    color: white !important; 
+    border-radius: 12px !important; 
+    padding: 4px 12px !important; 
+    font-size: 12px !important; 
+    font-weight: 600 !important;
+    backdrop-filter: blur(10px) !important;
 }
-.main-header h1 {font-size: 2.2rem !important; font-weight: 700 !important; color: #23232b !important;}
-.main-header p {color: #6b7280 !important; font-size: 1.08rem !important; margin-bottom: 8px !important;}
-.tech-badge {background: #e0e7ef !important; color: #4f8fff !important; border-radius: 12px !important; padding: 4px 12px !important; font-size: 12px !important; font-weight: 600 !important;}
 .gr-block, .gr-panel {background: white !important; border-radius: 18px !important; box-shadow: 0 2px 8px 0 rgba(60,60,90,0.07) !important; border: none !important; padding: 28px 22px !important;}
 .section-header {background: transparent !important; border: none !important; padding: 0 !important; margin-bottom: 16px !important;}
 .section-header h3 {color: #1e293b !important; font-size: 1.14rem !important; font-weight: 600 !important;}
@@ -404,7 +627,7 @@ body, .gradio-container {
     background: linear-gradient(90deg, #e0e7ef, #dde5f2) !important; 
     color: #2a3140 !important;
     transition: all 0.15s cubic-bezier(0.4,0.0,0.2,1) !important;
-    transform: translateY(0) !important;
+    transform: translateY(0) !important
 }
 
 .gr-button[variant="secondary"]:hover {
@@ -480,7 +703,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
                     audio_out = gr.Audio(label="🎵 Story Audio", type="filepath", visible=True, autoplay=False)
                     gr.Markdown("""
                         <div style="margin: 20px 0 0 0; padding: 10px 20px; background: #f4f7fa; border-radius: 16px;">
-                            <b>➡️ Next:</b> Record yourself reading below for feedback.
+                            <b>➡️ Next:</b> Record yourself reading below, then check the "Analysis & Feedback" tab for results.
                         </div>
                     """)
                     stud_audio_in = gr.Audio(sources=["microphone"], type="filepath", label="🎤 Your Recording")
@@ -489,53 +712,56 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
                     assess_btn = gr.Button("🔍 Analyze Reading", variant="primary", size="lg", interactive=False)
                     recording_status = gr.Markdown("", elem_id="recording_status")
                     analysis_status = gr.Markdown("", elem_id="analysis_status")
-        with gr.TabItem("📊 Analysis & Feedback", elem_id="analysis_tab"):
-            gr.Markdown("""
-                <div class="section-header">
-                    <h3>📈 Analysis</h3>
-                    <p>See your performance and areas to improve</p>
-                </div>
-            """)
-            feedback_out = gr.Markdown(
-                value="""
-                <div style="text-align: center; color: #6b7280;">
-                    <h4>Analysis Results</h4>
-                    <p>Your feedback will appear here.</p>
-                </div>
-                """,
-                elem_id="feedback_output"
-            )
-            highlighted_out = gr.Markdown(
-                value="""
-                <div style="text-align: center; color: #6b7280;">
-                    <h4>Word-by-Word Analysis</h4>
-                    <p>Get color-coded feedback below.</p>
-                </div>
-                """,
-                elem_id="highlighted_passage_output"
-            )
-            gr.Markdown("""
-            <div style="background: #f7fafc; border-radius: 16px; padding: 16px 12px 10px 12px; margin: 22px 0 18px 0; box-shadow: 0 2px 6px 0 rgba(60,60,90,0.04);">
-                <b>Color code:</b>
-                <div style="display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px;">
-                    <span style="background: #90EE90; padding: 5px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #155724;">Perfect Match</span>
-                    <span style="background: #FFE4B5; padding: 5px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #856404;">Substitution</span>
-                    <span style="background: #FFA0B4; padding: 5px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #721c24;">Skipped Word</span>
-                    <span style="background: #DDA0DD; padding: 5px 14px; border-radius: 12px; font-size: 13px; font-weight: 500; color: #5f006a;">Extra Word</span>
-                </div>
-            </div>
-            """)
-            gr.Markdown("""
-                <div style="margin: 14px 0; padding: 14px 22px; background: #f8fafc; border-radius: 14px;">
-                    <span style="color: #0a58ca; font-weight: 500;">Goals:</span>
-                    <ul style="margin: 7px 0 0 18px; color: #6b7280;">
-                        <li>Word accuracy above 90%</li>
-                        <li>Speak clearly and with confidence</li>
-                        <li>Practice as much as you like</li>
-                    </ul>
-                </div>
-            """)
 
+        with gr.TabItem("📊 Analysis & Feedback", elem_id="analysis_tab"):
+            with gr.Row():
+                with gr.Column(scale=1, variant="panel"):
+                    gr.Markdown("""
+                        <div class="section-header">
+                            <h3>🔍 Word-by-Word Analysis</h3>
+                            <p>See exactly which words you read correctly</p>
+                        </div>
+                    """)
+                    highlighted_out = gr.HTML(
+                        value="""
+                        <div style="text-align: center; color: #6b7280; padding: 20px;">
+                            <h4>🎯 Detailed Word Analysis</h4>
+                            <p>Color-coded word analysis will appear here.</p>
+                            <div style="margin-top: 15px; padding: 15px; background: #f8fafc; border-radius: 12px;">
+                                <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: 0.8rem; margin-bottom: 10px;">
+                                    <span style="background: #22c55e; color: white; padding: 2px 8px; border-radius: 4px;">✓ Correct</span>
+                                    <span style="background: #ef4444; color: white; padding: 2px 8px; border-radius: 4px;">✗ Missed</span>
+                                    <span style="background: #f59e0b; color: white; padding: 2px 8px; border-radius: 4px;">~ Changed</span>
+                                    <span style="background: #8b5cf6; color: white; padding: 2px 8px; border-radius: 4px;">+ Added</span>
+                                </div>
+                                <p style="margin: 0; font-size: 14px;">🎤 Complete a reading practice session to see your word analysis!</p>
+                            </div>
+                        </div>
+                        """,
+                        elem_id="highlighted_passage_output"
+                    )
+            
+            with gr.Row():
+                with gr.Column(scale=1, variant="panel"):
+                    gr.Markdown("""
+                        <div class="section-header">
+                            <h3>📊 Reading Performance</h3>
+                            <p>Your detailed feedback and scores</p>
+                        </div>
+                    """)
+                    feedback_out = gr.HTML(
+                        value="""
+                        <div style="text-align: center; color: #6b7280; padding: 20px;">
+                            <h4>📈 Performance Analysis</h4>
+                            <p>Your detailed feedback will appear here after recording.</p>
+                            <div style="margin-top: 15px; padding: 15px; background: #f8fafc; border-radius: 12px;">
+                                <p style="margin: 0; font-size: 14px;">💡 <strong>Tip:</strong> Go to the "Practice & Generate" tab to record yourself reading!</p>
+                            </div>
+                        </div>
+                        """,
+                        elem_id="feedback_output"
+                    )
+            
         with gr.TabItem("ℹ️ About & How It Works", elem_id="about_tab"):
             gr.Markdown("""
                 <div class="section-header">
@@ -544,23 +770,10 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
                 </div>
             """)
             
-            gr.Markdown("""
-            ## 🎯 What This Platform Does
-            
-            ReadRight is an AI-powered tool designed to help students improve their reading skills through:
-            
-            - **✨ Personalized Story Generation**: Creates age-appropriate reading passages tailored to your grade level and interests
-            - **🔊 Audio Pronunciation Models**: Provides clear audio examples of proper pronunciation
-            - **⚡ Real-time Speech Analysis**: Analyzes your reading accuracy and identifies areas for improvement
-            - **🎯 Detailed Feedback**: Offers specific pronunciation tips and practice suggestions
-            
-            ## 🏗️ Reading Practice Application Workflow
-            """)
-            
-            # Use HTML component for the SVG
             gr.HTML("""
-            <div style="width: 100%; overflow-x: auto; padding: 20px 0;">
-                <svg width="1400" height="700" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto;">
+            <div style="text-align: center; margin: 20px 0;">
+                <h3 style="color: #1e293b; margin-bottom: 20px;">📊 Application Workflow</h3>
+                <svg width="1400" height="700" xmlns="http://www.w3.org/2000/svg" style="max-width: 100%; height: auto; border: 2px solid #e5e7eb; border-radius: 12px; background: white;">
                   <!-- Background -->
                   <rect width="1400" height="600" fill="#fafafa"/>
                   
@@ -656,6 +869,15 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
             """)
             
             gr.Markdown("""
+            ## 🚀 How to Use the App
+            
+            • **Enter details** → Name, grade, and story topic
+            • **Generate story** → Click "✨ Generate Story" button  
+            • **Listen to AI** → Play the audio to hear correct pronunciation
+            • **Record yourself** → Use microphone to read the story aloud
+            • **Get feedback** → Click "🔍 Analyze Reading" for results
+            • **Practice more** → Try new topics and improve your reading!
+            
             ---
             
             ## 🔧 Key Components
@@ -685,7 +907,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
                 passage_state = story_text
         return story_text, audio_btn_update, audio_player_update, passage_state
 
-    def assess_reading_with_analysis(original_passage_state, student_audio_path, progress=gr.Progress(track_tqdm=True)):
+    def assess_reading_with_analysis(original_passage_state, student_audio_path):
         if not student_audio_path:
             return (
                 """
@@ -707,12 +929,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
                 ""
             )
         
-        # Immediate feedback that analysis is starting
-        progress(0.05, desc="Analysis starting...")
-        
         # Start transcription
-        progress(0.1, desc="Starting transcription...")
-        transcribed_text = speech_to_text_whisper_space(student_audio_path, progress=progress)
+        transcribed_text = speech_to_text_whisper_space(student_audio_path)
         
         stt_errors = ["couldn't understand", "had trouble", "service isn't working", "service is busy", "didn't get any recording", "filepath type issue"]
         if any(err in (transcribed_text or "").lower() for err in stt_errors): 
@@ -727,9 +945,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
                 ""
             )
         
-        progress(0.6, desc="Analyzing your reading accuracy...")
         feedback, highlighted_passage = compare_texts_for_feedback(original_passage_state, transcribed_text)
-        progress(1.0, desc="Assessment complete!")
         
         analysis_msg = """
         <div class="status-indicator status-success">
@@ -739,6 +955,28 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
         """
         return (analysis_msg, feedback, highlighted_passage)
 
+    def generate_story_and_audio_complete(name, grade, topic):
+        """Generate story and audio in one function - Gradio will show default loading indicators"""
+        
+        # Generate story text first
+        story_text = generate_story_from_llm(name, grade, topic)
+        if not story_text:
+            return "", None, ""
+        
+        # Check if story generation was successful
+        if not story_text or any(err in story_text.lower() for err in ["error", "blocked", "couldn't", "api key not configured"]):
+            return story_text, None, story_text
+        
+        # Generate audio (Gradio will show its loading indicator)
+        audio_filepath = text_to_speech_using_space_simple(story_text)
+        
+        if audio_filepath:
+            print(f"COMPLETE: Story and audio generated successfully")
+            return story_text, audio_filepath, story_text
+        else:
+            print("COMPLETE: Story generated, but audio failed")
+            return story_text, None, story_text
+
     def update_recording_status(audio_file):
         if audio_file is not None:
             return (
@@ -810,89 +1048,29 @@ with gr.Blocks(theme=gr.themes.Soft(), css=css, title="ReadRight") as app:
             gr.update(visible=False),
             gr.update(interactive=False)
         )
-
-    def handle_audio_generation(story_text, progress=gr.Progress(track_tqdm=True)):
-        """Handle audio generation with visual progress indicator"""
-        if not story_text or not story_text.strip():
-            return (
-                gr.update(value=None, visible=True),
-                gr.update(value="", visible=False)
-            )
-        
-        # Generate the audio file
-        audio_filepath = text_to_speech_using_space(story_text, progress)
-        print(f"AUDIO HANDLER: Received audio file path: {audio_filepath}")
-        
-        if audio_filepath:
-            print(f"AUDIO HANDLER: Updating audio component with file: {audio_filepath}")
-            success_msg = """
-            <div style="background: #f0fdf4; border: 1px solid #22c55e; border-radius: 12px; padding: 12px 20px; margin: 8px 0; text-align: center;">
-                <span style="color: #15803d; font-weight: 500;">✅ Audio ready! You can now listen to your story.</span>
-            </div>
-            """
-            return (
-                gr.update(value=audio_filepath, visible=True),
-                gr.update(value=success_msg, visible=True)
-            )
-        else:
-            print("AUDIO HANDLER: No audio file received, returning None")
-            error_msg = """
-            <div style="background: #fef2f2; border: 1px solid #ef4444; border-radius: 12px; padding: 12px 20px; margin: 8px 0; text-align: center;">
-                <span style="color: #dc2626; font-weight: 500;">❌ Audio generation failed. Please try again.</span>
-            </div>
-            """
-            return (
-                gr.update(value=None, visible=True),
-                gr.update(value=error_msg, visible=True)
-            )
     
-    def generate_story_and_audio_automatically(name, grade, topic, progress=gr.Progress(track_tqdm=True)):
-        """Generate story and automatically create audio in one seamless flow"""
-        progress(0.0, desc="Starting story creation...")
-        
-        # First generate the story using the existing function
-        story_result = generate_story_from_llm(name, grade, topic, progress)
-        if not story_result:
-            return "", gr.update(value=None, visible=True), ""
-        
-        # Extract story text from the result tuple
-        story_text = story_result[0] if isinstance(story_result, tuple) else story_result
-        
-        # Check if story generation was successful
-        if not story_text or any(err in story_text.lower() for err in ["error", "blocked", "couldn't", "api key not configured"]):
-            return story_text, gr.update(value=None, visible=True), ""
-        
-        # Story generated successfully, now automatically generate audio
-        progress(0.5, desc="Story complete! Now generating audio...")
-        
-        try:
-            # Generate audio automatically
-            audio_filepath = text_to_speech_using_space(story_text, progress)
-            
-            if audio_filepath:
-                print(f"AUTO AUDIO: Successfully generated audio: {audio_filepath}")
-                return story_text, gr.update(value=audio_filepath, visible=True), story_text
-            else:
-                print("AUTO AUDIO: Audio generation failed, but story is still available")
-                return story_text, gr.update(value=None, visible=True), story_text
-                
-        except Exception as e:
-            print(f"AUTO AUDIO ERROR: {e}")
-            return story_text, gr.update(value=None, visible=True), story_text
-    
-    # Event handlers with automatic audio generation
+    # Event handlers - Generate story first, then audio separately
     gen_btn.click(
-        fn=generate_story_and_audio_automatically,
+        fn=generate_story_from_llm,
         inputs=[s_name, s_grade, s_topic],
-        outputs=[passage_out, audio_out, original_passage_state],
-        show_progress=True
+        outputs=[passage_out]
+    ).then(
+        fn=lambda story_text: story_text,  # Store story in state immediately
+        inputs=[passage_out],
+        outputs=[original_passage_state]
+    )
+    
+    # Separate audio generation triggered by story output change
+    passage_out.change(
+        fn=lambda story_text: text_to_speech_using_space_simple(story_text) if story_text and not any(err in story_text.lower() for err in ["error", "blocked", "couldn't", "api key not configured"]) else None,
+        inputs=[passage_out],
+        outputs=[audio_out]
     )
     
     assess_btn.click(
         fn=assess_reading_with_analysis,
         inputs=[original_passage_state, stud_audio_in],
-        outputs=[analysis_status, feedback_out, highlighted_out],
-        show_progress=True
+        outputs=[analysis_status, feedback_out, highlighted_out]
     )
     
     stud_audio_in.change(