Update app.py

app.py

@@ -1,10 +1,4 @@
-# app.py - Final Version with AI-Powered Animations and Voice Explanations
-# Fix for huggingface_hub compatibility
-import huggingface_hub
-if not hasattr(huggingface_hub, 'cached_download'):
-    from huggingface_hub import hf_hub_download
-    huggingface_hub.cached_download = hf_hub_download
-
+# app.py - Final Version with Enhanced Performance & Light Purple Theme
 import streamlit as st
 import os
 import time
@@ -21,15 +15,6 @@ import matplotlib.pyplot as plt
 import requests
 from io import BytesIO
 import json
-import torch
-
-# Use compatible import for diffusers
-try:
-    from diffusers import StableDiffusionPipeline
-except ImportError:
-    from diffusers import DiffusionPipeline as StableDiffusionPipeline
-
-from transformers import pipeline
 
 # Configure Streamlit page
 st.set_page_config(
@@ -39,44 +24,45 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS for colorful UI
+# Custom CSS with Light Purple Theme
 st.markdown("""
 <style>
-    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Poppins:wght@400;600&display=swap');
     
     :root {
-        --primary: #FF6B6B;
-        --secondary: #4ECDC4;
-        --accent: #FFD166;
-        --dark: #1A535C;
-        --light: #F7FFF7;
+        --primary: #8A2BE2;       /* Violet */
+        --secondary: #9370DB;    /* Medium Purple */
+        --accent: #FFD700;       /* Gold */
+        --dark: #4B0082;         /* Indigo */
+        --light: #E6E6FA;        /* Lavender */
+        --light2: #F5F0FF;       /* Light Lavender */
     }
     
     body {
-        background: linear-gradient(135deg, var(--light) 0%, #E8F4F8 100%);
-        font-family: 'Comic Neue', cursive;
+        background: linear-gradient(135deg, var(--light) 0%, var(--light2) 100%);
+        font-family: 'Poppins', sans-serif;
     }
     
     .stApp {
-        background: url('https://www.transparenttextures.com/patterns/cartographer.png');
+        background: url('https://www.transparenttextures.com/patterns/soft-circle-scales.png');
     }
     
     .story-box {
         background-color: white;
         border-radius: 20px;
         padding: 25px;
-        box-shadow: 0 8px 16px rgba(26, 83, 92, 0.15);
+        box-shadow: 0 8px 16px rgba(74, 0, 128, 0.15);
         border: 3px solid var(--accent);
         margin-bottom: 25px;
     }
     
     .header {
         color: var(--dark);
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+        text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
     }
     
     .concept-card {
-        background: linear-gradient(145deg, #ffffff, #f0f0f0);
+        background: linear-gradient(145deg, #ffffff, #f8f4ff);
         border-radius: 15px;
         padding: 15px;
         margin: 10px 0;
@@ -88,22 +74,24 @@ st.markdown("""
         background: linear-gradient(45deg, var(--primary), var(--secondary));
         color: white;
         border-radius: 12px;
-        padding: 10px 24px;
+        padding: 12px 28px;
         font-weight: bold;
         font-size: 18px;
         border: none;
         transition: all 0.3s;
+        font-family: 'Comic Neue', cursive;
     }
     
     .stButton>button:hover {
-        transform: scale(1.05);
-        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+        transform: translateY(-3px);
+        box-shadow: 0 6px 12px rgba(138, 43, 226, 0.3);
     }
     
     .stTextInput>div>div>input {
         border-radius: 12px;
         padding: 12px;
         border: 2px solid var(--accent);
+        font-family: 'Poppins', sans-serif;
     }
     
     .tabs {
@@ -114,17 +102,23 @@ st.markdown("""
     }
     
     .tab {
-        padding: 10px 20px;
-        background-color: var(--accent);
-        border-radius: 10px;
+        padding: 12px 24px;
+        background-color: var(--secondary);
+        border-radius: 12px;
         cursor: pointer;
         font-weight: bold;
         white-space: nowrap;
+        color: white;
+        transition: all 0.3s;
+    }
+    
+    .tab:hover {
+        background-color: var(--primary);
     }
     
     .tab.active {
-        background-color: var(--secondary);
-        color: white;
+        background-color: var(--primary);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
     
     @media (max-width: 768px) {
@@ -134,10 +128,10 @@ st.markdown("""
     }
     
     .animation-container {
-        background-color: #1a1a2e;
+        background: linear-gradient(135deg, #d8bfd8, #e6e6fa);
         border-radius: 15px;
         padding: 20px;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        box-shadow: 0 8px 32px rgba(75, 0, 130, 0.2);
         margin-bottom: 25px;
         position: relative;
         overflow: hidden;
@@ -161,14 +155,15 @@ st.markdown("""
         width: 100%;
         margin: 20px 0;
         border-radius: 20px;
-        background: #f0f8ff;
+        background: #f0e6ff;
         padding: 15px;
     }
     
     .animation-gif {
         max-width: 100%;
         border-radius: 10px;
-        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
+        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
+        border: 2px solid white;
     }
     
     .ai-animation {
@@ -180,7 +175,7 @@ st.markdown("""
     }
     
     .explanation-box {
-        background: linear-gradient(135deg, #e3f2fd, #bbdefb);
+        background: linear-gradient(135deg, #f0e6ff, #e6d8ff);
         border-radius: 15px;
         padding: 20px;
         margin: 20px 0;
@@ -193,6 +188,24 @@ st.markdown("""
         display: flex;
         align-items: center;
         gap: 10px;
+        margin-bottom: 15px;
+    }
+    
+    .magic-pulse {
+        animation: pulse 2s infinite;
+    }
+    
+    @keyframes pulse {
+        0% { transform: scale(1); }
+        50% { transform: scale(1.05); }
+        100% { transform: scale(1); }
+    }
+    
+    .concept-highlight {
+        background: linear-gradient(120deg, #e0d6ff, #d8c8ff);
+        padding: 3px 8px;
+        border-radius: 6px;
+        font-weight: bold;
     }
 </style>
 """, unsafe_allow_html=True)
@@ -204,7 +217,7 @@ CONCEPTS = {
         "emoji": "🔄",
         "description": "Loops repeat actions multiple times",
         "example": "for i in range(5):\n    print('Hello!')",
-        "color": "#FF9E6D",
+        "color": "#8A2BE2",
         "explanation": "A loop is like a magic spell that makes something happen again and again. In programming, we use loops when we want to repeat an action multiple times without writing the same code over and over."
     },
     "conditional": {
@@ -212,7 +225,7 @@ CONCEPTS = {
         "emoji": "❓",
         "description": "Conditionals make decisions in code",
         "example": "if sunny:\n    go_outside()\nelse:\n    stay_inside()",
-        "color": "#4ECDC4",
+        "color": "#9370DB",
         "explanation": "Conditionals are like crossroads in a story where you choose which path to take. In programming, we use 'if' statements to make decisions based on certain conditions, just like choosing what to wear based on the weather."
     },
     "function": {
@@ -220,7 +233,7 @@ CONCEPTS = {
         "emoji": "✨",
         "description": "Functions are reusable blocks of code",
         "example": "def greet(name):\n    print(f'Hello {name}!')",
-        "color": "#FFD166",
+        "color": "#DA70D6",
         "explanation": "Functions are like magic spells you can create and reuse whenever you need them. They help us organize code into reusable blocks so we don't have to write the same thing multiple times."
     },
     "variable": {
@@ -228,7 +241,7 @@ CONCEPTS = {
         "emoji": "📦",
         "description": "Variables store information",
         "example": "score = 10\nplayer = 'Alex'",
-        "color": "#FF6B6B",
+        "color": "#BA55D3",
         "explanation": "Variables are like labeled boxes where you can store information. They help us remember values and use them later in our code, just like remembering a character's name in a story."
     },
     "list": {
@@ -236,7 +249,7 @@ CONCEPTS = {
         "emoji": "📝",
         "description": "Lists store collections of items",
         "example": "fruits = ['apple', 'banana', 'orange']",
-        "color": "#1A535C",
+        "color": "#9932CC",
         "explanation": "Lists are like magical scrolls that can hold multiple items. In programming, we use lists to store collections of related things, like a wizard's inventory of potions."
     }
 }
@@ -245,35 +258,40 @@ CONCEPTS = {
 ANIMATION_EXAMPLES = {
     "loop": "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif",
     "conditional": "https://media.giphy.com/media/l0HlG8vJXW0X5yX4s/giphy.gif",
-    "function": "https://media.giphy.com/media/3o7TKsQ8UQ4l4LhGz6/giphy.gif"
+    "function": "https://media.giphy.com/media/3o7TKsQ8UQ4l4LhGz6/giphy.gif",
+    "variable": "https://media.giphy.com/media/3o7TKsQ8UQ4l4LhGz6/giphy.gif",
+    "list": "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif"
 }
 
-# Initialize AI models
-@st.cache_resource
-def load_models():
-    """Load AI models for animation generation"""
-    models = {}
-    
+# Fallback images if URLs fail
+FALLBACK_IMAGES = {
+    "loop": "https://i.ibb.co/4sY7d0j/loop.gif",
+    "conditional": "https://i.ibb.co/8Xg7zY6/conditional.gif",
+    "function": "https://i.ibb.co/7yVnZ8C/function.gif",
+    "variable": "https://i.ibb.co/7yVnZ8C/function.gif",
+    "list": "https://i.ibb.co/4sY7d0j/loop.gif"
+}
+
+def check_url(url):
+    """Check if a URL is valid and accessible"""
     try:
-        # Use a fast, optimized model
-        models['text_to_image'] = StableDiffusionPipeline.from_pretrained(
-            "OFA-Sys/small-stable-diffusion-v0",  # Optimized for speed
-            torch_dtype=torch.float32,
-            safety_checker=None
-        )
-        device = "cuda" if torch.cuda.is_available() else "cpu"
-        models['text_to_image'] = models['text_to_image'].to(device)
-    except Exception as e:
-        st.error(f"Could not load text-to-image model: {str(e)}")
-        models['text_to_image'] = None
-    
+        response = requests.head(url, timeout=5)
+        return response.status_code == 200
+    except:
+        return False
+
+def create_animation_preview(concept):
+    """Create an animation preview for the concept with fallback"""
     try:
-        # Text-to-speech model
-        models['text_to_speech'] = pipeline("text-to-speech", model="suno/bark-small")
+        # Check if the URL is valid
+        url = ANIMATION_EXAMPLES.get(concept, "")
+        if url and check_url(url):
+            return url
+        
+        # Use fallback if primary URL fails
+        return FALLBACK_IMAGES.get(concept, FALLBACK_IMAGES["loop"])
     except:
-        models['text_to_speech'] = None
-    
-    return models
+        return FALLBACK_IMAGES["loop"]
 
 def analyze_story(story):
     """Analyze story and identify programming concepts"""
@@ -281,23 +299,23 @@ def analyze_story(story):
     detected_concepts = []
     
     # Check for loops
-    if any(word in story_lower for word in ["times", "repeat", "again", "multiple"]):
+    if any(word in story_lower for word in ["times", "repeat", "again", "multiple", "each"]):
         detected_concepts.append("loop")
     
     # Check for conditionals
-    if any(word in story_lower for word in ["if", "when", "unless", "whether"]):
+    if any(word in story_lower for word in ["if", "when", "unless", "whether", "decide"]):
         detected_concepts.append("conditional")
     
     # Check for functions
-    if any(word in story_lower for word in ["make", "create", "do", "perform", "cast"]):
+    if any(word in story_lower for word in ["make", "create", "do", "perform", "cast", "spell"]):
         detected_concepts.append("function")
     
     # Check for variables
-    if any(word in story_lower for word in ["is", "has", "set to", "value"]):
+    if any(word in story_lower for word in ["is", "has", "set to", "value", "named", "called"]):
         detected_concepts.append("variable")
     
     # Check for lists
-    if any(word in story_lower for word in ["and", "many", "several", "collection", "items"]):
+    if any(word in story_lower for word in ["and", "many", "several", "collection", "items", "group"]):
         detected_concepts.append("list")
     
     return list(set(detected_concepts))
@@ -309,55 +327,9 @@ def extract_count_from_story(story):
             return min(int(word), 10)
     return 3  # Default value
 
-def create_story_scene(story, concept, models):
-    """Create a story scene using AI text-to-image model"""
-    try:
-        # Create a prompt based on the story and concept
-        style = "cartoon style, bright colors, children's book illustration"
-        prompt = f"{story}. {CONCEPTS[concept]['name']} concept. {style}"
-        
-        # Generate image with optimized settings
-        image = models['text_to_image'](
-            prompt,
-            num_inference_steps=15,  # Faster generation
-            guidance_scale=7.5,
-            height=256,  # Smaller image for faster generation
-            width=256
-        ).images[0]
-        
-        # Convert to bytes
-        buf = io.BytesIO()
-        image.save(buf, format='PNG')
-        buf.seek(0)
-        
-        return buf
-    
-    except Exception as e:
-        st.error(f"AI scene generation error: {str(e)}")
-        return None
-
-def create_animation_preview(story, concept):
-    """Create an animation preview for the concept"""
-    try:
-        # Return a sample GIF for the concept
-        return ANIMATION_EXAMPLES.get(concept, "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif")
-    except:
-        return "https://media.giphy.com/media/3o7abKhOpu0NwenH3O/giphy.gif"
-
-def text_to_speech_custom(text, models, filename="story_audio.wav"):
-    """Convert text to speech using AI model"""
+def text_to_speech_custom(text, filename="story_audio.mp3"):
+    """Convert text to speech using gTTS (faster and reliable)"""
     try:
-        if models['text_to_speech']:
-            # Generate audio
-            audio = models['text_to_speech'](text)
-            
-            # Save to file
-            with open(filename, "wb") as f:
-                f.write(audio["audio"])
-            
-            return filename
-        
-        # Fallback to gTTS
         tts = gTTS(text=text, lang='en')
         tts.save(filename)
         return filename
@@ -372,7 +344,7 @@ def autoplay_audio(file_path):
         b64 = base64.b64encode(data).decode()
         md = f"""
             <audio autoplay>
-            <source src="data:audio/wav;base64,{b64}" type="audio/wav">
+            <source src="data:audio/mp3;base64,{b64}" type="audio/mp3">
             </audio>
             """
         st.markdown(md, unsafe_allow_html=True)
@@ -380,20 +352,28 @@ def autoplay_audio(file_path):
 def generate_animation_code(story, concept):
     """Generate Python animation code based on story"""
     try:
+        count = extract_count_from_story(story)
+        short_story = story[:20] + '...' if len(story) > 20 else story
+        
         # Sample code based on concept
         if concept == "loop":
             code = f"""
-# Loop Animation for: {story[:30]}...
+# Loop Animation: Repeating Actions
 import time
 
 def animate_story():
-    actions = {extract_count_from_story(story)}
+    actions = {count}
+    
+    print("Story: {short_story}")
+    print("Concept: Looping {count} times")
     
     for i in range(actions):
-        print(f"Action {{i+1}}: {story[:20]}...")
+        print(f"Action {{i+1}}: Performing story action")
         # Animation code would go here
         time.sleep(0.5)
         
+    print("Story animation complete!")
+
 animate_story()
             """
             description = "Looping through actions multiple times"
@@ -401,35 +381,93 @@ animate_story()
         
         elif concept == "conditional":
             code = f"""
-# Conditional Animation for: {story[:30]}...
+# Conditional Animation: Making Decisions
 import random
 
+print("Story: {short_story}")
+print("Concept: Making decisions based on conditions")
+
 condition = random.choice([True, False])
+print(f"Condition is {{condition}}")
 
 if condition:
-    print("Condition is True: {story[:20]}...")
+    print("Path 1: Following the true branch")
     # True branch animation
 else:
-    print("Condition is False: {story[:20]}...")
+    print("Path 2: Following the false branch")
     # False branch animation
+
+print("Story animation complete!")
             """
             description = "Making decisions based on conditions"
             visual_cue = "Branching paths based on conditions"
         
-        else:  # function
+        elif concept == "function":
             code = f"""
-# Function Animation for: {story[:30]}...
+# Function Animation: Reusable Actions
+import time
+
+print("Story: {short_story}")
+print("Concept: Creating reusable functions")
+
 def perform_action():
-    print("Performing action: {story[:20]}...")
+    print("Performing story action")
     # Action animation code
 
 # Call the function multiple times
-for _ in range({extract_count_from_story(story)}):
+for _ in range({count}):
     perform_action()
+    time.sleep(0.3)
+
+print("Story animation complete!")
             """
             description = "Reusing code with functions"
             visual_cue = "Calling a reusable function"
         
+        elif concept == "variable":
+            code = f"""
+# Variable Animation: Storing Information
+import time
+
+print("Story: {short_story}")
+print("Concept: Using variables to store information")
+
+character = "Hero"
+score = 10
+inventory = ["sword", "shield", "potion"]
+
+print(f"Welcome {{character}}! You have {{score}} points.")
+print(f"Your inventory: {{inventory}}")
+
+for item in inventory:
+    print(f"Using {{item}}...")
+    time.sleep(0.5)
+
+print("Story animation complete!")
+            """
+            description = "Storing information in variables"
+            visual_cue = "Using stored values"
+        
+        else:  # list
+            code = f"""
+# List Animation: Managing Collections
+import time
+
+print("Story: {short_story}")
+print("Concept: Working with lists of items")
+
+items = ["item1", "item2", "item3", "item4", "item5"][:{count}]
+print(f"Collection has {{len(items)}} items")
+
+for i, item in enumerate(items):
+    print(f"Processing item {{i+1}}: {{item}}")
+    time.sleep(0.4)
+
+print("Story animation complete!")
+            """
+            description = "Managing collections of items"
+            visual_cue = "Processing multiple items"
+        
         return code, description, visual_cue
     
     except Exception as e:
@@ -464,7 +502,7 @@ def create_interactive_animation(story, concept):
             size="size",
             size_max=45,
             color="color",
-            color_discrete_sequence=px.colors.qualitative.Alphabet,
+            color_discrete_sequence=px.colors.qualitative.Pastel,
             range_x=[0, 10],
             range_y=[0, 10],
             title=f"Interactive Animation: {story[:40]}{'...' if len(story) > 40 else ''}"
@@ -473,16 +511,17 @@ def create_interactive_animation(story, concept):
         # Customize layout
         fig.update_layout(
             showlegend=False,
-            plot_bgcolor='rgba(240,248,255,1)',
-            paper_bgcolor='rgba(240,248,255,1)',
+            plot_bgcolor='rgba(245, 240, 255, 0.8)',
+            paper_bgcolor='rgba(245, 240, 255, 0.8)',
             width=800,
             height=600,
             xaxis=dict(showgrid=False, zeroline=False, visible=False),
             yaxis=dict(showgrid=False, zeroline=False, visible=False),
+            font_family="Poppins"
         )
         
         fig.update_traces(
-            textfont_size=20,
+            textfont_size=18,
             textposition='middle center',
             marker=dict(sizemode='diameter')
         )
@@ -500,24 +539,29 @@ def generate_concept_explanation(story, concept, code_description, visual_cue):
     explanation = f"""
     Let me explain what's happening in your story and how it relates to programming!
     
-    Your story: "{story[:100]}..."
+    <div class='concept-highlight'>Your story</div>: "{story[:100]}..."
     
-    This story demonstrates the programming concept of: {concept_info.get('name', 'Programming')}
+    <div class='concept-highlight'>Programming concept</div>: {concept_info.get('name', 'Programming')}
     
     {concept_info.get('explanation', 'This is a fundamental programming concept.')}
     
-    In our animation:
+    <div class='concept-highlight'>In our animation</div>:
     - {visual_cue}
     - This represents: {code_description}
     
-    How it works in code:
+    <div class='concept-highlight'>How it works in code</div>:
     We use {concept_info.get('name', 'this concept')} like this:
+    ```
     {concept_info.get('example', 'Example code will appear here')}
+    ```
     
-    In real life, you might use this concept when:
+    <div class='concept-highlight'>Real-world use</div>:
+    You might use this concept when:
     - Creating games with repeating actions (loops)
     - Making decisions in apps (conditionals)
     - Building reusable components (functions)
+    - Storing player information (variables)
+    - Managing collections of data (lists)
     
     Try to spot this concept in other stories you create!
     """
@@ -534,8 +578,6 @@ def main():
         st.session_state.story = ""
     if 'concepts' not in st.session_state:
         st.session_state.concepts = []
-    if 'story_scene' not in st.session_state:
-        st.session_state.story_scene = None
     if 'interactive_animation' not in st.session_state:
         st.session_state.interactive_animation = None
     if 'animation_code' not in st.session_state:
@@ -557,22 +599,21 @@ def main():
     tabs = st.empty()
     tab_cols = st.columns(5)
     with tab_cols[0]:
-        if st.button("📖 Create Story"):
+        if st.button("📖 Create Story", key="tab_story"):
             st.session_state.active_tab = "story"
     with tab_cols[1]:
-        if st.button("🎬 Animation"):
+        if st.button("🎬 Animation", key="tab_animation"):
             st.session_state.active_tab = "animation"
     with tab_cols[2]:
-        if st.button("🔍 Concepts"):
+        if st.button("🔍 Concepts", key="tab_concepts"):
             st.session_state.active_tab = "concepts"
     with tab_cols[3]:
-        if st.button("💻 Code"):
+        if st.button("💻 Code", key="tab_code"):
             st.session_state.active_tab = "code"
     with tab_cols[4]:
-        if st.button("🔄 Reset"):
+        if st.button("🔄 Reset", key="tab_reset"):
             st.session_state.story = ""
             st.session_state.concepts = []
-            st.session_state.story_scene = None
             st.session_state.interactive_animation = None
             st.session_state.animation_code = ""
             st.session_state.code_description = ""
@@ -596,7 +637,7 @@ def main():
                 key="story_input"
             )
             
-            if st.button("Create Animation!", use_container_width=True):
+            if st.button("✨ Create Animation!", use_container_width=True, key="create_animation"):
                 if len(story) < 10:
                     st.error("Your story needs to be at least 10 characters long!")
                 else:
@@ -607,15 +648,6 @@ def main():
                     # Get the main concept
                     main_concept = st.session_state.concepts[0] if st.session_state.concepts else "variable"
                     
-                    # Load models only when needed
-                    with st.spinner("🚀 Loading AI models..."):
-                        ai_models = load_models()
-                    
-                    with st.spinner("🎨 Generating AI story scene (this may take 5-10 seconds)..."):
-                        st.session_state.story_scene = create_story_scene(
-                            story, main_concept, ai_models
-                        )
-                    
                     with st.spinner("🚀 Creating interactive animation..."):
                         st.session_state.interactive_animation = create_interactive_animation(
                             story, main_concept
@@ -629,7 +661,7 @@ def main():
                     with st.spinner("🔊 Creating audio narration..."):
                         audio_text = f"Your story: {story}. This demonstrates the programming concept: {st.session_state.code_description}"
                         st.session_state.audio_file = text_to_speech_custom(
-                            audio_text, ai_models
+                            audio_text
                         )
                     
                     with st.spinner("🧠 Generating concept explanation..."):
@@ -640,6 +672,13 @@ def main():
                             st.session_state.visual_cue
                         )
                     
+                    with st.spinner("🔊 Creating explanation audio..."):
+                        explanation_text = st.session_state.concept_explanation.replace('<div class="concept-highlight">', '').replace('</div>', '')
+                        st.session_state.explanation_audio = text_to_speech_custom(
+                            explanation_text,
+                            "concept_explanation.mp3"
+                        )
+                    
                     st.session_state.active_tab = "animation"
                     st.rerun()
             
@@ -649,19 +688,19 @@ def main():
             with col1:
                 st.caption("Loop Example")
                 st.code('"A dragon breathes fire 5 times at the castle"', language="text")
-                st.image(create_animation_preview("", "loop"), 
+                st.image(create_animation_preview("loop"), 
                          use_container_width=True, 
                          caption="Loop Animation Preview")
             with col2:
                 st.caption("Conditional Example")
                 st.code('"If it rains, the cat stays inside, else it goes out"', language="text")
-                st.image(create_animation_preview("", "conditional"), 
+                st.image(create_animation_preview("conditional"), 
                          use_container_width=True, 
                          caption="Conditional Animation Preview")
             with col3:
                 st.caption("Function Example")
                 st.code('"A wizard casts a spell to make flowers grow"', language="text")
-                st.image(create_animation_preview("", "function"), 
+                st.image(create_animation_preview("function"), 
                          use_container_width=True, 
                          caption="Function Animation Preview")
     
@@ -674,16 +713,6 @@ def main():
             st.session_state.active_tab = "story"
             st.rerun()
         
-        # Display AI-generated scene
-        st.subheader("🖼️ AI-Generated Story Scene")
-        if st.session_state.story_scene:
-            st.image(st.session_state.story_scene, use_container_width=True)
-        else:
-            st.warning("Scene couldn't be generated. Showing example instead.")
-            concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
-            st.image(create_animation_preview("", concept), 
-                     use_container_width=True)
-        
         # Display interactive animation
         st.subheader("🎮 Interactive Animation")
         if st.session_state.interactive_animation:
@@ -691,14 +720,14 @@ def main():
         else:
             st.info("Interactive animation preview. The real animation would run on your computer!")
             concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
-            st.image(create_animation_preview("", concept), 
+            st.image(create_animation_preview(concept), 
                     use_container_width=True)
         
         # Animation concept preview
         st.subheader("📽️ Animation Concept Preview")
         if st.session_state.concepts:
             concept = st.session_state.concepts[0]
-            st.image(create_animation_preview("", concept), 
+            st.image(create_animation_preview(concept), 
                      caption=f"{CONCEPTS[concept]['name']} Animation Example", 
                      use_container_width=True)
         else:
@@ -708,7 +737,7 @@ def main():
         st.subheader("🔊 Story Narration")
         if st.session_state.audio_file:
             audio_bytes = open(st.session_state.audio_file, 'rb').read()
-            st.audio(audio_bytes, format='audio/wav')
+            st.audio(audio_bytes, format='audio/mp3')
             
             if st.button("▶️ Play Story Automatically", use_container_width=True):
                 autoplay_audio(st.session_state.audio_file)
@@ -727,23 +756,13 @@ def main():
                     <span style="font-size:36px;">{details.get('emoji', '✨')}</span>
                     <h3>Understanding {details.get('name', 'Programming')} Concept</h3>
                 </div>
-                <p>{st.session_state.concept_explanation}</p>
+                {st.session_state.concept_explanation}
             </div>
             """, unsafe_allow_html=True)
             
-            # Generate explanation audio if not already generated
-            if not st.session_state.explanation_audio:
-                with st.spinner("🔊 Creating concept explanation audio..."):
-                    ai_models = load_models()
-                    st.session_state.explanation_audio = text_to_speech_custom(
-                        st.session_state.concept_explanation, 
-                        ai_models,
-                        "concept_explanation.wav"
-                    )
-            
             if st.session_state.explanation_audio:
                 explanation_bytes = open(st.session_state.explanation_audio, 'rb').read()
-                st.audio(explanation_bytes, format='audio/wav')
+                st.audio(explanation_bytes, format='audio/mp3')
                 
                 if st.button("▶️ Play Concept Explanation", use_container_width=True):
                     autoplay_audio(st.session_state.explanation_audio)
@@ -773,21 +792,21 @@ def main():
                             <h3 style="color:{details['color']};">{details['name']}</h3>
                         </div>
                         <p>{details['description']}</p>
-                        <pre style="background:#f0f0f0; padding:10px; border-radius:8px;">{details['example']}</pre>
+                        <pre style="background:#f8f4ff; padding:10px; border-radius:8px;">{details['example']}</pre>
                         <p><strong>Explanation:</strong> {details.get('explanation', 'Learn how this concept works!')}</p>
                     </div>
                     """, unsafe_allow_html=True)
                     
                     # Show animation preview for the concept
-                    st.image(create_animation_preview("", concept), 
+                    st.image(create_animation_preview(concept), 
                              caption=f"{details['name']} Animation Example", 
                              use_container_width=True)
         
         # Play explanation if available
         if st.session_state.explanation_audio:
-            st.subheader("🔊 Concept Explanation")
+            st.subheader("🔊 Full Concept Explanation")
             explanation_bytes = open(st.session_state.explanation_audio, 'rb').read()
-            st.audio(explanation_bytes, format='audio/wav')
+            st.audio(explanation_bytes, format='audio/mp3')
             
             if st.button("▶️ Play Full Explanation", use_container_width=True):
                 autoplay_audio(st.session_state.explanation_audio)
@@ -808,7 +827,7 @@ def main():
             
             # Download button
             st.download_button(
-                label="Download Animation Code",
+                label="📥 Download Animation Code",
                 data=st.session_state.animation_code,
                 file_name="story_animation.py",
                 mime="text/python",
@@ -828,7 +847,7 @@ def main():
             # Show what the animation would look like
             st.subheader("🎬 What Your Animation Would Look Like")
             concept = st.session_state.concepts[0] if st.session_state.concepts else "loop"
-            st.image(create_animation_preview("", concept), 
+            st.image(create_animation_preview(concept), 
                     caption="This is similar to what your animation would look like", 
                     use_container_width=True)
             
@@ -844,21 +863,21 @@ def main():
                         <span style="font-size:36px;">{details.get('emoji', '✨')}</span>
                         <h3>Understanding the Code</h3>
                     </div>
-                    <p>{st.session_state.concept_explanation}</p>
+                    {st.session_state.concept_explanation}
                 </div>
                 """, unsafe_allow_html=True)
                 
                 # Play explanation audio
                 if st.session_state.explanation_audio:
                     explanation_bytes = open(st.session_state.explanation_audio, 'rb').read()
-                    st.audio(explanation_bytes, format='audio/wav')
+                    st.audio(explanation_bytes, format='audio/mp3')
                     
                     if st.button("▶️ Play Code Explanation", use_container_width=True):
                         autoplay_audio(st.session_state.explanation_audio)
         else:
             st.warning("No code generated yet!")
         
-        if st.button("Create Another Story!", use_container_width=True):
+        if st.button("✨ Create Another Story!", use_container_width=True):
             st.session_state.active_tab = "story"
             st.session_state.story = ""
             st.rerun()