Update app.py

app.py

@@ -1,15 +1,15 @@
-# app.py - Final Working Version
+# app.py - Final Working Version with Animation
 import streamlit as st
 import os
 import time
 import random
 import numpy as np
 import matplotlib.pyplot as plt
-from matplotlib.animation import FuncAnimation
-from matplotlib import rc
 import base64
 from PIL import Image
 import io
+import pandas as pd
+import plotly.express as px
 
 # Configure Streamlit page
 st.set_page_config(
@@ -190,6 +190,90 @@ CHARACTERS = [
     {"name": "pirate", "emoji": "🏴‍☠️", "color": "#FFA500"}
 ]
 
+# Animation templates
+ANIMATION_TEMPLATES = {
+    "loop": {
+        "description": "Character moving to a target multiple times",
+        "code": """
+# Loop Animation
+import matplotlib.pyplot as plt
+import numpy as np
+
+fig, ax = plt.subplots(figsize=(10, 6))
+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)
+
+for i in range({count}):
+    for pos in np.linspace(1, 9, 20):
+        character.set_position((pos, 5))
+        plt.pause(0.05)
+plt.show()
+        """
+    },
+    "conditional": {
+        "description": "Character making a decision based on a condition",
+        "code": """
+# Conditional Animation
+import matplotlib.pyplot as plt
+import numpy as np
+
+fig, ax = plt.subplots(figsize=(10, 6))
+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)
+
+# Condition: {condition}
+if {condition}:
+    decision = ax.text(7, 7, "✅ Yes", fontsize=24, color='green')
+    path = np.linspace(5, 8, 20)
+else:
+    decision = ax.text(7, 7, "❌ No", fontsize=24, color='red')
+    path = np.linspace(5, 2, 20)
+
+for pos in path:
+    character.set_position((pos, 5))
+    plt.pause(0.05)
+plt.show()
+        """
+    },
+    "function": {
+        "description": "Character performing an action multiple times",
+        "code": """
+# Function Animation
+import matplotlib.pyplot as plt
+import numpy as np
+
+fig, ax = plt.subplots(figsize=(10, 6))
+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)
+
+def perform_action():
+    for _ in range(5):
+        character.set_fontsize(60)
+        plt.pause(0.1)
+        character.set_fontsize(48)
+        plt.pause(0.1)
+
+for i in range({count}):
+    perform_action()
+    character.set_position((5 + i, 5))
+plt.show()
+        """
+    }
+}
+
 def analyze_story(story):
     """Analyze story and identify programming concepts"""
     story_lower = story.lower()
@@ -225,84 +309,146 @@ def extract_count_from_story(story):
     return 3  # Default value
 
 def create_animation(story, concepts):
-    """Create a matplotlib animation based on the story and concepts"""
+    """Create an animation visualization based on the story and concepts"""
     try:
         # Choose a random character
         character = random.choice(CHARACTERS)
         count = extract_count_from_story(story)
         
-        # Create figure and axis
-        fig, ax = plt.subplots(figsize=(10, 6), facecolor='#f0f8ff')
+        # Create figure
+        fig, ax = plt.subplots(figsize=(10, 6))
+        ax.set_facecolor('#f0f8ff')
         ax.set_xlim(0, 10)
         ax.set_ylim(0, 10)
         ax.axis('off')
         
         # Add title
-        fig.suptitle('Your Story Animation', fontsize=20, color='purple', fontweight='bold')
+        ax.text(5, 9, '✨ Your Story Animation ✨', 
+                fontsize=20, ha='center', color='purple', fontweight='bold')
         
         # Add story text
-        ax.text(5, 9, f'"{story[:50]}{"..." if len(story) > 50 else ""}"', 
-                fontsize=14, ha='center', wrap=True, color='#333')
-        
-        # Character position
-        x_pos = 5
-        y_pos = 6
-        
-        # Create character element
-        char_text = ax.text(x_pos, y_pos, character["emoji"], 
-                          fontsize=48, ha='center', color=character["color"])
+        story_text = story[:80] + ('...' if len(story) > 80 else '')
+        ax.text(5, 8, f'"{story_text}"', 
+                fontsize=14, ha='center', color='#333')
+        
+        # Add character
+        ax.text(5, 5, character["emoji"], 
+                fontsize=100, ha='center', color=character["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"])
         
-        # Target position
-        target_x = 8
-        target_y = 6
-        ax.plot(target_x, target_y, 'ro', markersize=15, alpha=0.5)
-        ax.text(target_x, target_y - 0.8, 'Target', ha='center', fontsize=12)
+        # Add footer
+        ax.text(5, 1, "Created with StoryCoder", 
+                fontsize=12, ha='center', style='italic', color='gray')
         
-        # Add hop counter
-        counter_text = ax.text(2, 8, f'Hops: 0/{count}', fontsize=16, color='#333')
+        # Save to buffer
+        buf = io.BytesIO()
+        plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0.5, dpi=150)
+        buf.seek(0)
+        plt.close()
+        return buf
+    
+    except Exception as e:
+        st.error(f"Animation 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)
+        count = extract_count_from_story(story)
         
-        # Animation function
-        def animate(frame):
-            nonlocal x_pos, y_pos
-            
-            # Move character toward target
-            if frame < count:
-                x_pos += 0.3
-                
-                # Hop animation
-                if frame % 2 == 0:
-                    y_pos = 6.5
-                else:
-                    y_pos = 6
-                
-                char_text.set_position((x_pos, y_pos))
-                counter_text.set_text(f'Hops: {frame+1}/{count}')
-            
-            # Return to start after reaching target
-            elif frame == count:
-                x_pos = 5
-                y_pos = 6
-                char_text.set_position((x_pos, y_pos))
-            
-            return char_text, counter_text
+        # 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"]
+            })
+        
+        df = pd.DataFrame(frames)
+        
+        # Create animated scatter plot
+        fig = px.scatter(
+            df, 
+            x="x", 
+            y="y", 
+            animation_frame="frame",
+            text="character",
+            size="size",
+            size_max=45,
+            color_discrete_sequence=[character["color"]],
+            range_x=[0, 10],
+            range_y=[0, 10]
+        )
         
-        # Create animation
-        ani = FuncAnimation(fig, animate, frames=count*2, interval=500, blit=True)
+        # Customize layout
+        fig.update_layout(
+            title=f'Animation for: "{story[:50]}{"..." if len(story) > 50 else ""}"',
+            showlegend=False,
+            plot_bgcolor='rgba(240,248,255,1)',
+            paper_bgcolor='rgba(240,248,255,1)',
+            width=800,
+            height=600
+        )
         
-        # Save animation as GIF in memory
-        buf = io.BytesIO()
-        ani.save(buf, format='gif', writer='pillow', fps=2)
-        buf.seek(0)
+        fig.update_traces(
+            textfont_size=30,
+            textposition='middle center'
+        )
         
-        # Close the figure to free memory
-        plt.close(fig)
+        fig.layout.updatemenus[0].buttons[0].args[1]["frame"]["duration"] = 1000
+        fig.layout.updatemenus[0].buttons[0].args[1]["transition"]["duration"] = 500
         
-        return buf
+        return fig
     
     except Exception as e:
-        st.error(f"Animation error: {str(e)}")
+        st.error(f"Interactive animation error: {str(e)}")
         return None
 
+def generate_animation_code(story, concepts):
+    """Generate Python animation code based on story"""
+    try:
+        # Choose a random character
+        character = random.choice(CHARACTERS)
+        count = extract_count_from_story(story)
+        concept = concepts[0] if concepts else "loop"
+        
+        # Get the appropriate template
+        template = ANIMATION_TEMPLATES.get(concept, ANIMATION_TEMPLATES["loop"])
+        
+        # Fill in the template
+        condition = random.choice(["True", "False"])
+        code = template["code"].format(
+            emoji=character["emoji"],
+            color=character["color"],
+            story=story[:80] + ('...' if len(story) > 80 else ''),
+            count=count,
+            condition=condition
+        )
+        
+        return code, template["description"]
+    
+    except Exception as e:
+        return f"# Error generating code\nprint('Could not generate code: {str(e)}')", ""
+
 def create_story_image(story):
     """Create a story image with Matplotlib"""
     try:
@@ -343,7 +489,7 @@ def create_story_image(story):
         
         # Save to buffer
         buf = io.BytesIO()
-        plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0.5, dpi=100)
+        plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0.5, dpi=150)
         buf.seek(0)
         plt.close()
         return buf
@@ -364,6 +510,12 @@ def main():
         st.session_state.concepts = []
     if 'animation' not in st.session_state:
         st.session_state.animation = 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 'active_tab' not in st.session_state:
         st.session_state.active_tab = "story"
     
@@ -387,6 +539,9 @@ def main():
             st.session_state.story = ""
             st.session_state.concepts = []
             st.session_state.animation = None
+            st.session_state.interactive_animation = None
+            st.session_state.animation_code = ""
+            st.session_state.code_description = ""
             st.session_state.active_tab = "story"
     
     # Story creation tab
@@ -415,6 +570,14 @@ def main():
                         st.session_state.animation = create_animation(
                             story, st.session_state.concepts
                         )
+                        
+                        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(
+                            story, st.session_state.concepts
+                        )
                     
                     st.session_state.active_tab = "animation"
                     st.rerun()
@@ -448,14 +611,23 @@ def main():
         </div>
         """, unsafe_allow_html=True)
         
+        # Display static animation
         if st.session_state.animation:
             st.image(st.session_state.animation, use_container_width=True)
         else:
-            st.warning("Animation couldn't be generated. Showing story image instead.")
+            st.warning("Static animation 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")
+        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.success("✨ Animation created successfully!")
         st.caption("This animation was generated with Python code based on your story!")
         
@@ -492,81 +664,32 @@ def main():
     # Code tab
     elif st.session_state.active_tab == "code":
         st.header("💻 The Magic Code Behind Your Animation")
-        st.write("Here's the Python code that created your animation:")
-        
-        # Sample code (in a real app, you would generate this based on the story)
-        count = extract_count_from_story(st.session_state.story)
-        character = random.choice(CHARACTERS)
+        st.write("Here's the Python code that would create your animation:")
         
-        sample_code = f"""
-# Story: {st.session_state.story[:50]}{'...' if len(st.session_state.story) > 50 else ''}
-
-import matplotlib.pyplot as plt
-from matplotlib.animation import FuncAnimation
-import numpy as np
-
-# Setup the figure
-fig, ax = plt.subplots(figsize=(10, 6))
-ax.set_xlim(0, 10)
-ax.set_ylim(0, 10)
-ax.axis('off')
-
-# Add story text
-ax.text(5, 9, "{st.session_state.story[:50]}{'...' if len(st.session_state.story) > 50 else ''}", 
-        fontsize=14, ha='center', wrap=True)
-
-# Add character
-char = ax.text(5, 6, "{character['emoji']}", fontsize=48, ha='center', color='{character['color']}')
-
-# Add target
-ax.plot(8, 6, 'ro', markersize=15, alpha=0.5)
-ax.text(8, 5.2, 'Target', ha='center', fontsize=12)
-
-# Add counter
-counter = ax.text(2, 8, 'Hops: 0/{count}', fontsize=16)
-
-# Animation function
-def animate(frame):
-    x = char.get_position()[0]
-    
-    # Move character toward target
-    if frame < {count}:
-        new_x = x + 0.3
-        
-        # Hop animation
-        if frame % 2 == 0:
-            new_y = 6.5
-        else:
-            new_y = 6
+        if st.session_state.animation_code:
+            st.markdown(f"**{st.session_state.code_description}**")
+            st.code(st.session_state.animation_code, language="python")
             
-        char.set_position((new_x, new_y))
-        counter.set_text(f'Hops: {{frame+1}}/{count}')
-    
-    # Return to start after reaching target
-    elif frame == {count}:
-        char.set_position((5, 6))
-    
-    return char, counter
-
-# Create and save animation
-ani = FuncAnimation(fig, animate, frames={count*2}, interval=500, blit=True)
-ani.save('animation.gif', writer='pillow', fps=2)
-
-plt.close()
-        """
-        
-        st.code(sample_code, language="python")
-        
-        # Download button
-        st.download_button(
-            label="Download Animation Code",
-            data=sample_code,
-            file_name="story_animation.py",
-            mime="text/python",
-            use_container_width=True
-        )
-        
-        st.write("You can run this code on your computer to create similar animations!")
+            # Download button
+            st.download_button(
+                label="Download Animation Code",
+                data=st.session_state.animation_code,
+                file_name="story_animation.py",
+                mime="text/python",
+                use_container_width=True
+            )
+            
+            st.info("💡 To run this animation on your computer:")
+            st.markdown("""
+            1. Install Python from [python.org](https://python.org)
+            2. Install required libraries: `pip install matplotlib numpy`
+            3. Copy the code above into a file named `animation.py`
+            4. Run it with: `python animation.py`
+            """)
+            
+            st.success("🎉 When you run this code, you'll see your story come to life!")
+        else:
+            st.warning("No code generated yet!")
         
         if st.button("Create Another Story!", use_container_width=True):
             st.session_state.active_tab = "story"