Update app.py

app.py

@@ -1,15 +1,18 @@
-# app.py - Final Working Version with Animation
+# app.py - Final Version with Enhanced Animations
 import streamlit as st
 import os
 import time
 import random
 import numpy as np
-import matplotlib.pyplot as plt
+import pandas as pd
+import plotly.express as px
+import plotly.graph_objects as go
+from gtts import gTTS
 import base64
 from PIL import Image
 import io
-import pandas as pd
-import plotly.express as px
+import matplotlib.pyplot as plt
+import requests
 
 # Configure Streamlit page
 st.set_page_config(
@@ -136,6 +139,14 @@ st.markdown("""
         text-align: center;
         margin: 10px 0;
     }
+    
+    .audio-player {
+        width: 100%;
+        margin: 20px 0;
+        border-radius: 20px;
+        background: #f0f8ff;
+        padding: 15px;
+    }
 </style>
 """, unsafe_allow_html=True)
 
@@ -178,64 +189,93 @@ CONCEPTS = {
     }
 }
 
-# Character database
+# Character database with enhanced visuals
 CHARACTERS = [
-    {"name": "rabbit", "emoji": "🐰", "color": "#FFB6C1"},
-    {"name": "dragon", "emoji": "🐉", "color": "#FF6347"},
-    {"name": "cat", "emoji": "🐱", "color": "#DDA0DD"},
-    {"name": "dog", "emoji": "🐶", "color": "#FFD700"},
-    {"name": "knight", "emoji": "🤺", "color": "#87CEEB"},
-    {"name": "wizard", "emoji": "🧙", "color": "#98FB98"},
-    {"name": "scientist", "emoji": "🔬", "color": "#20B2AA"},
-    {"name": "pirate", "emoji": "🏴‍☠️", "color": "#FFA500"}
+    {"name": "rabbit", "emoji": "🐰", "color": "#FFB6C1", "speed": 1.5},
+    {"name": "dragon", "emoji": "🐉", "color": "#FF6347", "speed": 0.8},
+    {"name": "cat", "emoji": "🐱", "color": "#DDA0DD", "speed": 2.0},
+    {"name": "dog", "emoji": "🐶", "color": "#FFD700", "speed": 2.5},
+    {"name": "knight", "emoji": "🤺", "color": "#87CEEB", "speed": 1.2},
+    {"name": "wizard", "emoji": "🧙", "color": "#98FB98", "speed": 1.0},
+    {"name": "scientist", "emoji": "🔬", "color": "#20B2AA", "speed": 1.3},
+    {"name": "pirate", "emoji": "🏴‍☠️", "color": "#FFA500", "speed": 1.4}
+]
+
+# Object database for stories
+STORY_OBJECTS = [
+    {"name": "carrot", "emoji": "🥕", "color": "#FF8C00"},
+    {"name": "treasure", "emoji": "💰", "color": "#FFD700"},
+    {"name": "castle", "emoji": "🏰", "color": "#A9A9A9"},
+    {"name": "flower", "emoji": "🌸", "color": "#FF69B4"},
+    {"name": "book", "emoji": "📚", "color": "#8B4513"},
+    {"name": "star", "emoji": "⭐", "color": "#FFFF00"},
+    {"name": "key", "emoji": "🔑", "color": "#DAA520"},
+    {"name": "apple", "emoji": "🍎", "color": "#FF0000"}
 ]
 
-# Animation templates
+# Animation templates with visual cues
 ANIMATION_TEMPLATES = {
     "loop": {
         "description": "Character moving to a target multiple times",
+        "visual_cue": "🔄 Repeating action multiple times",
         "code": """
 # Loop Animation
 import matplotlib.pyplot as plt
 import numpy as np
 
 fig, ax = plt.subplots(figsize=(10, 6))
+ax.set_title('Your Story: {story}')
 ax.set_xlim(0, 10)
 ax.set_ylim(0, 10)
-ax.axis('off')
 
-character = ax.text(1, 5, "{emoji}", fontsize=48, color='{color}')
-target = ax.text(9, 5, "🎯", fontsize=48)
-ax.text(5, 9, "{story}", ha='center', fontsize=14)
+character = ax.text(1, 5, '{emoji}', fontsize=48, color='{color}')
+target = ax.text(9, 5, '{target_emoji}', fontsize=48)
+info = ax.text(5, 8, 'Loop: Repeating {count} times', 
+               fontsize=16, ha='center', color='{concept_color}')
 
 for i in range({count}):
+    # Update position
     for pos in np.linspace(1, 9, 20):
         character.set_position((pos, 5))
         plt.pause(0.05)
+    
+    # Show loop counter
+    info.set_text(f'Loop: Completed {{i+1}}/{count}')
+    plt.pause(0.2)
+    
+    # Return to start
+    for pos in np.linspace(9, 1, 20):
+        character.set_position((pos, 5))
+        plt.pause(0.05)
 plt.show()
         """
     },
     "conditional": {
         "description": "Character making a decision based on a condition",
+        "visual_cue": "❓ Making a decision based on a condition",
         "code": """
 # Conditional Animation
 import matplotlib.pyplot as plt
 import numpy as np
+import random
 
 fig, ax = plt.subplots(figsize=(10, 6))
+ax.set_title('Your Story: {story}')
 ax.set_xlim(0, 10)
 ax.set_ylim(0, 10)
-ax.axis('off')
 
-character = ax.text(5, 5, "{emoji}", fontsize=48, color='{color}')
-ax.text(5, 9, "{story}", ha='center', fontsize=14)
+character = ax.text(5, 5, '{emoji}', fontsize=48, color='{color}')
+condition = random.choice([True, False])
+info = ax.text(5, 8, 'Condition: {condition_desc}', 
+               fontsize=16, ha='center', color='{concept_color}')
 
-# Condition: {condition}
-if {condition}:
-    decision = ax.text(7, 7, "✅ Yes", fontsize=24, color='green')
+if condition:
+    # Path for True condition
+    decision = ax.text(8, 7, '✅ True Path', fontsize=20, color='green')
     path = np.linspace(5, 8, 20)
 else:
-    decision = ax.text(7, 7, "❌ No", fontsize=24, color='red')
+    # Path for False condition
+    decision = ax.text(2, 7, '❌ False Path', fontsize=20, color='red')
     path = np.linspace(5, 2, 20)
 
 for pos in path:
@@ -246,29 +286,34 @@ plt.show()
     },
     "function": {
         "description": "Character performing an action multiple times",
+        "visual_cue": "✨ Performing action with a function",
         "code": """
 # Function Animation
 import matplotlib.pyplot as plt
 import numpy as np
 
 fig, ax = plt.subplots(figsize=(10, 6))
+ax.set_title('Your Story: {story}')
 ax.set_xlim(0, 10)
 ax.set_ylim(0, 10)
-ax.axis('off')
 
-character = ax.text(5, 5, "{emoji}", fontsize=48, color='{color}')
-ax.text(5, 9, "{story}", ha='center', fontsize=14)
+character = ax.text(5, 5, '{emoji}', fontsize=48, color='{color}')
+info = ax.text(5, 8, 'Function: Performing action {count} times', 
+               fontsize=16, ha='center', color='{concept_color}')
 
-def perform_action():
-    for _ in range(5):
-        character.set_fontsize(60)
-        plt.pause(0.1)
-        character.set_fontsize(48)
-        plt.pause(0.1)
+def perform_action(position):
+    # Action animation
+    character.set_fontsize(60)
+    plt.pause(0.1)
+    character.set_fontsize(48)
+    plt.pause(0.1)
+    # Move to new position
+    character.set_position((position, 5))
 
 for i in range({count}):
-    perform_action()
-    character.set_position((5 + i, 5))
+    perform_action(5 + i)
+    info.set_text(f'Function: Action {{i+1}}/{count}')
+    plt.pause(0.3)
 plt.show()
         """
     }
@@ -308,12 +353,36 @@ def extract_count_from_story(story):
             return min(int(word), 10)
     return 3  # Default value
 
-def create_animation(story, concepts):
-    """Create an animation visualization based on the story and concepts"""
+def extract_story_elements(story):
+    """Extract characters and objects from the story"""
+    # Choose a random character
+    character = random.choice(CHARACTERS)
+    
+    # Choose a random object
+    story_object = random.choice(STORY_OBJECTS)
+    
+    # Try to find character in story
+    for char in CHARACTERS:
+        if char["name"] in story.lower():
+            character = char
+            break
+    
+    # Try to find object in story
+    for obj in STORY_OBJECTS:
+        if obj["name"] in story.lower():
+            story_object = obj
+            break
+    
+    return character, story_object
+
+def create_visualization(story, concepts):
+    """Create a visualization image based on the story and concepts"""
     try:
-        # Choose a random character
-        character = random.choice(CHARACTERS)
+        # Get story elements
+        character, story_object = extract_story_elements(story)
         count = extract_count_from_story(story)
+        concept = concepts[0] if concepts else "variable"
+        concept_color = CONCEPTS[concept]["color"]
         
         # Create figure
         fig, ax = plt.subplots(figsize=(10, 6))
@@ -323,7 +392,7 @@ def create_animation(story, concepts):
         ax.axis('off')
         
         # Add title
-        ax.text(5, 9, '✨ Your Story Animation ✨', 
+        ax.text(5, 9, '✨ Your Story Visualization ✨', 
                 fontsize=20, ha='center', color='purple', fontweight='bold')
         
         # Add story text
@@ -332,23 +401,26 @@ def create_animation(story, concepts):
                 fontsize=14, ha='center', color='#333')
         
         # Add character
-        ax.text(5, 5, character["emoji"], 
+        ax.text(3, 5, character["emoji"], 
                 fontsize=100, ha='center', color=character["color"])
         
+        # Add object
+        ax.text(7, 5, story_object["emoji"], 
+                fontsize=100, ha='center', color=story_object["color"])
+        
+        # Add connection arrow
+        ax.annotate('', xy=(7, 5), xytext=(3, 5),
+                    arrowprops=dict(arrowstyle='->', lw=3, color=concept_color))
+        
         # Add concept visualization
-        if "loop" in concepts:
-            ax.text(5, 3, f"🔄 Repeating {count} times", 
-                    fontsize=18, ha='center', color=CONCEPTS["loop"]["color"])
-        elif "conditional" in concepts:
-            condition = random.choice(["sunny", "raining", "dark"])
-            ax.text(5, 3, f"❓ Checking if it's {condition}", 
-                    fontsize=18, ha='center', color=CONCEPTS["conditional"]["color"])
-        elif "function" in concepts:
-            ax.text(5, 3, f"✨ Performing action {count} times", 
-                    fontsize=18, ha='center', color=CONCEPTS["function"]["color"])
-        else:
-            ax.text(5, 3, "📝 Creating your story visualization", 
-                    fontsize=18, ha='center', color=CONCEPTS["variable"]["color"])
+        concept_text = CONCEPTS[concept]["emoji"] + " " + CONCEPTS[concept]["name"]
+        ax.text(5, 3, concept_text, 
+                fontsize=24, ha='center', color=concept_color, fontweight='bold')
+        
+        # Add action text
+        action = f"Action: {character['name'].title()} moves toward {story_object['name']}"
+        ax.text(5, 2.5, action, 
+                fontsize=16, ha='center', color='#333')
         
         # Add footer
         ax.text(5, 1, "Created with StoryCoder", 
@@ -362,29 +434,49 @@ def create_animation(story, concepts):
         return buf
     
     except Exception as e:
-        st.error(f"Animation error: {str(e)}")
+        st.error(f"Visualization error: {str(e)}")
         return None
 
 def create_interactive_animation(story, concepts):
     """Create an interactive animation using Plotly"""
     try:
-        # Choose a random character
-        character = random.choice(CHARACTERS)
+        # Get story elements
+        character, story_object = extract_story_elements(story)
         count = extract_count_from_story(story)
+        concept = concepts[0] if concepts else "variable"
+        concept_color = CONCEPTS[concept]["color"]
         
         # Create animation data
         frames = []
         for i in range(count):
-            frames.append({
-                "frame": i,
-                "x": np.random.uniform(1, 9),
-                "y": np.random.uniform(1, 9),
-                "size": np.random.uniform(10, 30),
-                "character": character["emoji"]
-            })
+            # Create a path for the character
+            path_length = 20
+            for step in range(path_length):
+                progress = (i * path_length + step) / (count * path_length)
+                frames.append({
+                    "frame": i * path_length + step,
+                    "x": 3 + 4 * progress,
+                    "y": 5 + np.sin(progress * np.pi * 2) * 2,  # Wave motion
+                    "size": 20 + np.sin(step * 0.3) * 10,  # Pulsing effect
+                    "character": character["emoji"],
+                    "color": character["color"],
+                    "info": f"{character['name'].title()} moving to {story_object['name']}",
+                    "step": f"Action {i+1}/{count}"
+                })
         
         df = pd.DataFrame(frames)
         
+        # Create the target object (static)
+        target_df = pd.DataFrame([{
+            "x": 7,
+            "y": 5,
+            "character": story_object["emoji"],
+            "color": story_object["color"],
+            "size": 30,
+            "info": f"Target: {story_object['name']}",
+            "step": "Target"
+        }])
+        
         # Create animated scatter plot
         fig = px.scatter(
             df, 
@@ -396,38 +488,92 @@ def create_interactive_animation(story, concepts):
             size_max=45,
             color_discrete_sequence=[character["color"]],
             range_x=[0, 10],
-            range_y=[0, 10]
+            range_y=[0, 10],
+            hover_name="info",
+            hover_data={"step": True}
+        )
+        
+        # Add the target object
+        fig.add_trace(go.Scatter(
+            x=target_df["x"],
+            y=target_df["y"],
+            text=target_df["character"],
+            mode="text",
+            textfont=dict(size=40, color=story_object["color"]),
+            hoverinfo="text",
+            hovertext=target_df["info"],
+            showlegend=False
+        ))
+        
+        # Add concept indicator
+        fig.add_annotation(
+            x=0.5,
+            y=1.05,
+            xref="paper",
+            yref="paper",
+            text=f"{CONCEPTS[concept]['emoji']} {CONCEPTS[concept]['name']}",
+            showarrow=False,
+            font=dict(size=24, color=concept_color)
         )
         
         # Customize layout
         fig.update_layout(
-            title=f'Animation for: "{story[:50]}{"..." if len(story) > 50 else ""}"',
+            title=f'Animation: {story[:60]}{"..." if len(story) > 60 else ""}',
             showlegend=False,
             plot_bgcolor='rgba(240,248,255,1)',
             paper_bgcolor='rgba(240,248,255,1)',
             width=800,
-            height=600
+            height=600,
+            xaxis=dict(showgrid=False, zeroline=False, visible=False),
+            yaxis=dict(showgrid=False, zeroline=False, visible=False),
+            updatemenus=[dict(
+                type="buttons",
+                buttons=[dict(
+                    label="Play",
+                    method="animate",
+                    args=[None, {"frame": {"duration": 100, "redraw": True}}]
+                )]
         )
         
         fig.update_traces(
-            textfont_size=30,
-            textposition='middle center'
+            textfont_size=40,
+            textposition='middle center',
+            hoverlabel=dict(bgcolor="white", font_size=16)
         )
         
-        fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 1000
-        fig.layout.updatemenus[0].buttons[0].args[1]["transition"]["duration"] = 500
-        
         return fig
     
     except Exception as e:
         st.error(f"Interactive animation error: {str(e)}")
         return None
 
+def text_to_speech(text, filename="story_audio.mp3"):
+    """Convert text to speech using gTTS"""
+    try:
+        tts = gTTS(text=text, lang='en')
+        tts.save(filename)
+        return filename
+    except Exception as e:
+        st.error(f"Audio creation error: {str(e)}")
+        return None
+
+def autoplay_audio(file_path):
+    """Autoplay audio in Streamlit"""
+    with open(file_path, "rb") as f:
+        data = f.read()
+        b64 = base64.b64encode(data).decode()
+        md = f"""
+            <audio autoplay>
+            <source src="data:audio/mp3;base64,{b64}" type="audio/mp3">
+            </audio>
+            """
+        st.markdown(md, unsafe_allow_html=True)
+
 def generate_animation_code(story, concepts):
     """Generate Python animation code based on story"""
     try:
-        # Choose a random character
-        character = random.choice(CHARACTERS)
+        # Get story elements
+        character, story_object = extract_story_elements(story)
         count = extract_count_from_story(story)
         concept = concepts[0] if concepts else "loop"
         
@@ -435,19 +581,21 @@ def generate_animation_code(story, concepts):
         template = ANIMATION_TEMPLATES.get(concept, ANIMATION_TEMPLATES["loop"])
         
         # Fill in the template
-        condition = random.choice(["True", "False"])
+        condition_desc = random.choice(["sunny", "raining", "dark"])
         code = template["code"].format(
             emoji=character["emoji"],
             color=character["color"],
             story=story[:80] + ('...' if len(story) > 80 else ''),
             count=count,
-            condition=condition
+            condition_desc=condition_desc,
+            target_emoji=story_object["emoji"],
+            concept_color=CONCEPTS[concept]["color"]
         )
         
-        return code, template["description"]
+        return code, template["description"], template["visual_cue"]
     
     except Exception as e:
-        return f"# Error generating code\nprint('Could not generate code: {str(e)}')", ""
+        return f"# Error generating code\nprint('Could not generate code: {str(e)}')", "", ""
 
 def create_story_image(story):
     """Create a story image with Matplotlib"""
@@ -508,14 +656,18 @@ def main():
         st.session_state.story = ""
     if 'concepts' not in st.session_state:
         st.session_state.concepts = []
-    if 'animation' not in st.session_state:
-        st.session_state.animation = None
+    if 'visualization' not in st.session_state:
+        st.session_state.visualization = None
     if 'interactive_animation' not in st.session_state:
         st.session_state.interactive_animation = None
     if 'animation_code' not in st.session_state:
         st.session_state.animation_code = ""
     if 'code_description' not in st.session_state:
         st.session_state.code_description = ""
+    if 'visual_cue' not in st.session_state:
+        st.session_state.visual_cue = ""
+    if 'audio_file' not in st.session_state:
+        st.session_state.audio_file = None
     if 'active_tab' not in st.session_state:
         st.session_state.active_tab = "story"
     
@@ -538,10 +690,12 @@ def main():
         if st.button("🔄 Reset"):
             st.session_state.story = ""
             st.session_state.concepts = []
-            st.session_state.animation = None
+            st.session_state.visualization = None
             st.session_state.interactive_animation = None
             st.session_state.animation_code = ""
             st.session_state.code_description = ""
+            st.session_state.visual_cue = ""
+            st.session_state.audio_file = None
             st.session_state.active_tab = "story"
     
     # Story creation tab
@@ -566,19 +720,25 @@ def main():
                     with st.spinner("🧠 Analyzing your story for coding concepts..."):
                         st.session_state.concepts = analyze_story(story)
                     
-                    with st.spinner("🎬 Creating your animation..."):
-                        st.session_state.animation = create_animation(
+                    with st.spinner("🎨 Creating your visualization..."):
+                        st.session_state.visualization = create_visualization(
                             story, st.session_state.concepts
                         )
                         
+                    with st.spinner("🚀 Creating interactive animation..."):
                         st.session_state.interactive_animation = create_interactive_animation(
                             story, st.session_state.concepts
                         )
                         
-                        st.session_state.animation_code, st.session_state.code_description = generate_animation_code(
+                    with st.spinner("💻 Generating animation code..."):
+                        st.session_state.animation_code, st.session_state.code_description, st.session_state.visual_cue = generate_animation_code(
                             story, st.session_state.concepts
                         )
                     
+                    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(audio_text)
+                    
                     st.session_state.active_tab = "animation"
                     st.rerun()
             
@@ -588,12 +748,15 @@ def main():
             with col1:
                 st.caption("Loop Example")
                 st.code('"A dragon breathes fire 5 times at the castle"', language="text")
+                st.image("https://i.imgur.com/7zQY1eE.png", width=200)
             with col2:
                 st.caption("Conditional Example")
                 st.code('"If it rains, the cat stays inside, else it goes out"', language="text")
+                st.image("https://i.imgur.com/5X8jYAy.png", width=200)
             with col3:
                 st.caption("Function Example")
                 st.code('"A wizard casts a spell to make flowers grow"', language="text")
+                st.image("https://i.imgur.com/9zJkQ7P.png", width=200)
     
     # Animation tab
     elif st.session_state.active_tab == "animation":
@@ -604,29 +767,34 @@ def main():
             st.session_state.active_tab = "story"
             st.rerun()
         
-        # Display animation
-        st.markdown(f"""
-        <div class="animation-container">
-            <h3 style="color: white; text-align: center;">"{st.session_state.story[:60]}{'...' if len(st.session_state.story) > 60 else ''}"</h3>
-        </div>
-        """, unsafe_allow_html=True)
-        
-        # Display static animation
-        if st.session_state.animation:
-            st.image(st.session_state.animation, use_container_width=True)
+        # Display visualization
+        st.subheader("🎨 Story Visualization")
+        if st.session_state.visualization:
+            st.image(st.session_state.visualization, use_container_width=True)
         else:
-            st.warning("Static animation couldn't be generated. Showing story image instead.")
+            st.warning("Visualization couldn't be generated. Showing story image instead.")
             story_img = create_story_image(st.session_state.story)
             if story_img:
                 st.image(story_img, use_container_width=True)
         
         # Display interactive animation
-        st.subheader("📊 Interactive Animation")
+        st.subheader("🚀 Interactive Animation")
         if st.session_state.interactive_animation:
             st.plotly_chart(st.session_state.interactive_animation, use_container_width=True)
         else:
             st.info("Interactive animation preview. The real animation would run on your computer!")
-            st.image("https://i.imgur.com/5X8jYAy.gif", use_container_width=True)
+            st.image("https://i.imgur.com/8LzQY7a.gif", use_container_width=True)
+        
+        # Play audio narration
+        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/mp3')
+            
+            if st.button("▶️ Play Automatically"):
+                autoplay_audio(st.session_state.audio_file)
+        else:
+            st.info("Audio narration would play automatically here")
         
         st.success("✨ Animation created successfully!")
         st.caption("This animation was generated with Python code based on your story!")
@@ -667,7 +835,8 @@ def main():
         st.write("Here's the Python code that would create your animation:")
         
         if st.session_state.animation_code:
-            st.markdown(f"**{st.session_state.code_description}**")
+            st.subheader(st.session_state.code_description)
+            st.markdown(f"**Visual Cue:** {st.session_state.visual_cue}")
             st.code(st.session_state.animation_code, language="python")
             
             # Download button