Update app.py

app.py

@@ -9,6 +9,10 @@ import numpy as np
 from transformers import pipeline
 import base64
 import re
+import pygame
+import sys
+import os
+import tempfile
 
 # Set up the page
 st.set_page_config(
@@ -178,10 +182,37 @@ st.markdown("""
     margin: 0 auto 10px;
 }
 
+.coding-tutorial {
+    background: rgba(41, 128, 185, 0.9);
+    border-radius: 20px;
+    padding: 1.5rem;
+    margin-top: 2rem;
+    color: white;
+    border: 3px solid #2980b9;
+}
+
+.code-playground {
+    background: rgba(44, 62, 80, 0.9);
+    border-radius: 15px;
+    padding: 1.5rem;
+    margin-top: 1.5rem;
+}
+
 /* Progress bar styling */
 .stProgress > div > div > div {
     background-color: #ff5722 !important;
 }
+
+.level-indicator {
+    background: rgba(52, 152, 219, 0.9);
+    color: white;
+    border-radius: 50px;
+    padding: 0.5rem 1rem;
+    display: inline-block;
+    margin-bottom: 1rem;
+    font-weight: bold;
+    border: 2px solid #2c3e50;
+}
 </style>
 """, unsafe_allow_html=True)
 
@@ -234,10 +265,10 @@ def create_storyboard_image(text, width=400, height=300):
     
     return img
 
-def generate_sprite_animation(story, character="spaceship", theme="space", num_frames=4):
+def generate_sprite_animation(story, character="spaceship", theme="space", num_frames=8):
     """Generate a sprite-based animation from story"""
     frames = []
-    width, height = 300, 200
+    width, height = 400, 300
     
     for i in range(num_frames):
         # Create base image with theme
@@ -245,14 +276,20 @@ def generate_sprite_animation(story, character="spaceship", theme="space", num_f
             bg_color = (0, 0, 30)
             star_color = (255, 255, 255)
         elif theme == "jungle":
-            bg_color = (0, 100, 0)
-            star_color = None  # No stars in jungle
+            bg_color = (34, 139, 34)
+            star_color = None
         elif theme == "medieval":
             bg_color = (139, 69, 19)
             star_color = None
         elif theme == "underwater":
             bg_color = (0, 105, 148)
             star_color = None
+        elif theme == "desert":
+            bg_color = (210, 180, 140)
+            star_color = None
+        elif theme == "arctic":
+            bg_color = (240, 248, 255)
+            star_color = None
         else:
             bg_color = (0, 0, 30)
             star_color = (255, 255, 255)
@@ -260,109 +297,391 @@ def generate_sprite_animation(story, character="spaceship", theme="space", num_f
         img = Image.new('RGB', (width, height), color=bg_color)
         draw = ImageDraw.Draw(img)
         
-        # Draw stars for space theme
-        if star_color:
-            for _ in range(30):
+        # Draw background elements
+        if theme == "space":
+            # Stars
+            for _ in range(50):
                 x = random.randint(0, width)
                 y = random.randint(0, height)
                 draw.ellipse([x, y, x+2, y+2], fill=star_color)
+            
+            # Planets
+            draw.ellipse([300, 30, 380, 110], fill=(255, 165, 0), outline=(255, 215, 0), width=2)
+        
+        elif theme == "jungle":
+            # Trees
+            for x in [50, 150, 250, 350]:
+                draw.rectangle([x, 150, x+20, 250], fill=(101, 67, 33))
+                draw.ellipse([x-20, 120, x+40, 180], fill=(34, 139, 34))
+            
+            # Sun
+            draw.ellipse([320, 30, 380, 90], fill=(255, 215, 0))
+        
+        elif theme == "medieval":
+            # Castle
+            draw.rectangle([250, 100, 350, 250], fill=(169, 169, 169))
+            draw.rectangle([280, 150, 320, 250], fill=(105, 105, 105))
+            for x in [260, 300, 340]:
+                draw.polygon([(x, 80), (x-20, 100), (x+20, 100)], fill=(220, 20, 60))
+            
+            # Mountains
+            draw.polygon([(0, 250), (100, 100), (200, 250)], fill=(120, 120, 120))
+        
+        elif theme == "underwater":
+            # Seaweed
+            for x in [50, 150, 250, 350]:
+                draw.line([(x, 250), (x, 180)], fill=(0, 128, 0), width=5)
+                draw.ellipse([x-20, 170, x+20, 190], fill=(0, 128, 0))
+            
+            # Bubbles
+            for _ in range(20):
+                x = random.randint(0, width)
+                y = random.randint(0, 200)
+                size = random.randint(5, 15)
+                draw.ellipse([x, y, x+size, y+size], fill=(173, 216, 230), outline=(70, 130, 180))
+        
+        elif theme == "desert":
+            # Sand dunes
+            for x in [0, 100, 200, 300]:
+                draw.arc([x, 150, x+200, 300], 180, 360, fill=(210, 180, 140), width=50)
+            
+            # Sun
+            draw.ellipse([300, 30, 370, 100], fill=(255, 140, 0))
+        
+        elif theme == "arctic":
+            # Snowy ground
+            draw.rectangle([0, 200, width, height], fill=(255, 255, 255))
+            
+            # Snowflakes
+            for _ in range(50):
+                x = random.randint(0, width)
+                y = random.randint(0, 180)
+                draw.ellipse([x, y, x+3, y+3], fill=(255, 255, 255))
+            
+            # Mountains
+            draw.polygon([(0, 250), (100, 100), (200, 250)], fill=(200, 200, 200))
         
         # Draw moving elements based on frame
         if character == "spaceship":
-            ship_x = 50 + i * 60
-            ship_y = 80
-            draw.polygon([(ship_x, ship_y), (ship_x+30, ship_y), 
-                          (ship_x+15, ship_y-20)], fill=(169, 169, 169))
+            ship_x = 50 + i * 40
+            ship_y = 120
+            # Spaceship body
+            draw.polygon([(ship_x, ship_y), (ship_x+50, ship_y), 
+                          (ship_x+25, ship_y-30)], fill=(169, 169, 169))
+            # Spaceship details
+            draw.rectangle([ship_x+20, ship_y-10, ship_x+30, ship_y], fill=(0, 191, 255))
             
             if "shoot" in story.lower() and i > 1:
                 for j in range(3):
-                    laser_x = ship_x + 15
-                    laser_y = ship_y - 20 + j*5
-                    draw.line([(laser_x, laser_y), (width, laser_y)], fill=(255, 0, 0), width=2)
+                    laser_x = ship_x + 25
+                    laser_y = ship_y - 30 + j*5
+                    draw.line([(laser_x, laser_y), (width, laser_y)], fill=(255, 0, 0), width=3)
         
         elif character == "dragon":
-            dragon_x = 50 + i * 40
-            dragon_y = 100
-            # Draw dragon body
-            draw.ellipse([dragon_x, dragon_y, dragon_x+40, dragon_y+20], fill=(178, 34, 34))
-            # Draw dragon head
-            draw.ellipse([dragon_x+30, dragon_y-5, dragon_x+50, dragon_y+15], fill=(178, 34, 34))
-            # Draw wings
-            draw.ellipse([dragon_x+10, dragon_y-15, dragon_x+30, dragon_y], fill=(138, 43, 226))
+            dragon_x = 50 + i * 30
+            dragon_y = 140
+            # Dragon body
+            draw.ellipse([dragon_x, dragon_y, dragon_x+60, dragon_y+30], fill=(178, 34, 34))
+            # Dragon head
+            draw.ellipse([dragon_x+50, dragon_y+5, dragon_x+70, dragon_y+25], fill=(178, 34, 34))
+            # Dragon wings
+            draw.ellipse([dragon_x+10, dragon_y-20, dragon_x+40, dragon_y+10], fill=(138, 43, 226))
             
             if "fire" in story.lower() and i > 0:
                 for j in range(5):
-                    flame_x = dragon_x + 50
-                    flame_y = dragon_y + 5 - j*5
-                    flame_size = random.randint(5, 15)
+                    flame_x = dragon_x + 70
+                    flame_y = dragon_y + 15 - j*5
+                    flame_size = random.randint(8, 18)
                     draw.ellipse([flame_x, flame_y, flame_x+flame_size, flame_y+flame_size], 
                                 fill=(255, random.randint(100, 200), 0))
         
         elif character == "knight":
-            knight_x = 50 + i * 40
-            knight_y = 120
-            # Draw knight body
-            draw.rectangle([knight_x, knight_y, knight_x+20, knight_y+40], fill=(70, 70, 70))
-            # Draw knight head
-            draw.ellipse([knight_x+5, knight_y-15, knight_x+15, knight_y-5], fill=(210, 180, 140))
-            # Draw sword
-            draw.rectangle([knight_x+15, knight_y+10, knight_x+25, knight_y+15], fill=(192, 192, 192))
-            draw.polygon([(knight_x+25, knight_y+12), (knight_x+35, knight_y+10), (knight_x+35, knight_y+15)], fill=(192, 192, 192))
+            knight_x = 50 + i * 30
+            knight_y = 150
+            # Knight body
+            draw.rectangle([knight_x, knight_y, knight_x+25, knight_y+50], fill=(70, 70, 70))
+            # Knight head
+            draw.ellipse([knight_x+5, knight_y-15, knight_x+20, knight_y], fill=(210, 180, 140))
+            # Knight helmet
+            draw.arc([knight_x, knight_y-20, knight_x+25, knight_y], 0, 180, fill=(50, 50, 50), width=3)
+            # Sword
+            draw.rectangle([knight_x+20, knight_y+10, knight_x+30, knight_y+15], fill=(192, 192, 192))
+            draw.polygon([(knight_x+30, knight_y+12), (knight_x+40, knight_y+10), (knight_x+40, knight_y+15)], fill=(192, 192, 192))
             
             if "attack" in story.lower() and i % 2 == 1:
                 # Draw sword swing
-                draw.line([(knight_x+25, knight_y+12), (knight_x+45, knight_y-10)], fill=(255, 255, 0), width=2)
+                draw.line([(knight_x+30, knight_y+12), (knight_x+60, knight_y-20)], fill=(255, 255, 0), width=3)
         
         elif character == "mermaid":
-            mermaid_x = 50 + i * 40
-            mermaid_y = 120
-            # Draw mermaid tail
-            draw.ellipse([mermaid_x, mermaid_y, mermaid_x+30, mermaid_y+20], fill=(255, 105, 180))
-            # Draw mermaid body
-            draw.ellipse([mermaid_x+5, mermaid_y-20, mermaid_x+25, mermaid_y], fill=(255, 218, 185))
-            # Draw hair
-            draw.ellipse([mermaid_x-5, mermaid_y-25, mermaid_x+30, mermaid_y-15], fill=(255, 215, 0))
+            mermaid_x = 50 + i * 30
+            mermaid_y = 150
+            # Mermaid tail
+            draw.ellipse([mermaid_x, mermaid_y, mermaid_x+40, mermaid_y+30], fill=(255, 105, 180))
+            # Mermaid body
+            draw.ellipse([mermaid_x+10, mermaid_y-30, mermaid_x+30, mermaid_y], fill=(255, 218, 185))
+            # Mermaid hair
+            draw.ellipse([mermaid_x-10, mermaid_y-35, mermaid_x+40, mermaid_y-20], fill=(255, 215, 0))
             
             if "swim" in story.lower() and i > 0:
                 # Draw bubbles
                 for j in range(3):
-                    bubble_x = mermaid_x + random.randint(0, 30)
-                    bubble_y = mermaid_y - random.randint(10, 30)
-                    draw.ellipse([bubble_x, bubble_y, bubble_x+5, bubble_y+5], fill=(173, 216, 230))
+                    bubble_x = mermaid_x + random.randint(0, 40)
+                    bubble_y = mermaid_y - random.randint(20, 40)
+                    draw.ellipse([bubble_x, bubble_y, bubble_x+8, bubble_y+8], fill=(173, 216, 230))
+        
+        elif character == "robot":
+            robot_x = 50 + i * 35
+            robot_y = 150
+            # Robot body
+            draw.rectangle([robot_x, robot_y, robot_x+30, robot_y+50], fill=(100, 100, 100))
+            # Robot head
+            draw.rectangle([robot_x-5, robot_y-20, robot_x+35, robot_y], fill=(150, 150, 150))
+            # Robot eyes
+            draw.ellipse([robot_x+5, robot_y-15, robot_x+10, robot_y-10], fill=(0, 255, 0))
+            draw.ellipse([robot_x+20, robot_y-15, robot_x+25, robot_y-10], fill=(0, 255, 0))
+            # Robot arms
+            draw.rectangle([robot_x-10, robot_y+10, robot_x, robot_y+20], fill=(100, 100, 100))
+            draw.rectangle([robot_x+30, robot_y+10, robot_x+40, robot_y+20], fill=(100, 100, 100))
+            
+            if "laser" in story.lower() and i > 1:
+                draw.line([(robot_x+40, robot_y+15), (width, robot_y+15)], fill=(0, 255, 0), width=3)
+        
+        elif character == "unicorn":
+            unicorn_x = 50 + i * 30
+            unicorn_y = 150
+            # Unicorn body
+            draw.ellipse([unicorn_x, unicorn_y, unicorn_x+40, unicorn_y+20], fill=(255, 240, 245))
+            # Unicorn head
+            draw.ellipse([unicorn_x+30, unicorn_y-5, unicorn_x+50, unicorn_y+15], fill=(255, 240, 245))
+            # Unicorn horn
+            draw.polygon([(unicorn_x+40, unicorn_y-10), (unicorn_x+45, unicorn_y-30), (unicorn_x+50, unicorn_y-10)], fill=(255, 215, 0))
+            # Unicorn mane
+            for j in range(5):
+                color = random.choice(['#FF69B4', '#9370DB', '#87CEFA'])
+                draw.ellipse([unicorn_x+25+j*3, unicorn_y-10-j*2, unicorn_x+35+j*3, unicorn_y+j*2], fill=color)
         
         # Draw enemies based on theme
         if theme == "space" and "alien" in story.lower():
-            alien_x = 200
-            alien_y = 100 - i*10
-            draw.ellipse([alien_x, alien_y, alien_x+20, alien_y+20], fill=(50, 205, 50))
-            draw.ellipse([alien_x+5, alien_y+5, alien_x+7, alien_y+7], fill=(0, 0, 0))
-            draw.ellipse([alien_x+13, alien_y+5, alien_x+15, alien_y+7], fill=(0, 0, 0))
+            alien_x = 300
+            alien_y = 120 - i*5
+            draw.ellipse([alien_x, alien_y, alien_x+30, alien_y+30], fill=(50, 205, 50))
+            draw.ellipse([alien_x+7, alien_y+8, alien_x+12, alien_y+13], fill=(0, 0, 0))
+            draw.ellipse([alien_x+18, alien_y+8, alien_x+23, alien_y+13], fill=(0, 0, 0))
+            draw.arc([alien_x+7, alien_y+15, alien_x+23, alien_y+25], 0, 180, fill=(0, 0, 0), width=2)
         
         elif theme == "jungle" and "snake" in story.lower():
-            snake_x = 200
-            snake_y = 150 - i*5
-            for segment in range(5):
-                offset = segment * 5
-                draw.ellipse([snake_x+offset, snake_y+offset, snake_x+offset+15, snake_y+offset+15], fill=(0, 128, 0))
+            snake_x = 300
+            snake_y = 180 - i*5
+            for segment in range(8):
+                offset = segment * 8
+                draw.ellipse([snake_x+offset, snake_y+offset, snake_x+offset+20, snake_y+offset+20], fill=(0, 128, 0))
         
         elif theme == "medieval" and "dragon" in story.lower() and character != "dragon":
-            dragon_x = 220
-            dragon_y = 80
-            draw.ellipse([dragon_x, dragon_y, dragon_x+40, dragon_y+20], fill=(178, 34, 34))
-            draw.line([(dragon_x+40, dragon_y+10), (dragon_x+60, dragon_y)], fill=(178, 34, 34), width=3)
+            dragon_x = 250
+            dragon_y = 100
+            draw.ellipse([dragon_x, dragon_y, dragon_x+50, dragon_y+25], fill=(178, 34, 34))
+            draw.line([(dragon_x+50, dragon_y+12), (dragon_x+80, dragon_y)], fill=(178, 34, 34), width=4)
         
         elif theme == "underwater" and "shark" in story.lower():
-            shark_x = 220
-            shark_y = 80 + i*10
-            # Draw shark body
-            draw.ellipse([shark_x, shark_y, shark_x+60, shark_y+30], fill=(169, 169, 169))
-            # Draw shark fin
-            draw.polygon([(shark_x+40, shark_y), (shark_x+50, shark_y-20), (shark_x+60, shark_y)], fill=(169, 169, 169))
+            shark_x = 250
+            shark_y = 100 + i*8
+            # Shark body
+            draw.ellipse([shark_x, shark_y, shark_x+80, shark_y+40], fill=(169, 169, 169))
+            # Shark fin
+            draw.polygon([(shark_x+60, shark_y), (shark_x+70, shark_y-30), (shark_x+80, shark_y)], fill=(169, 169, 169))
+        
+        elif theme == "desert" and "scorpion" in story.lower():
+            scorpion_x = 300
+            scorpion_y = 200
+            # Scorpion body
+            draw.ellipse([scorpion_x, scorpion_y, scorpion_x+40, scorpion_y+20], fill=(165, 42, 42))
+            # Scorpion tail
+            draw.line([(scorpion_x+40, scorpion_y+10), (scorpion_x+60, scorpion_y-10)], fill=(165, 42, 42), width=3)
+            # Scorpion claws
+            draw.line([(scorpion_x, scorpion_y+5), (scorpion_x-15, scorpion_y)], fill=(165, 42, 42), width=3)
+            draw.line([(scorpion_x, scorpion_y+15), (scorpion_x-15, scorpion_y+20)], fill=(165, 42, 42), width=3)
+        
+        elif theme == "arctic" and "yeti" in story.lower():
+            yeti_x = 280
+            yeti_y = 180
+            # Yeti body
+            draw.ellipse([yeti_x, yeti_y, yeti_x+50, yeti_y+50], fill=(240, 240, 240))
+            # Yeti eyes
+            draw.ellipse([yeti_x+15, yeti_y+15, yeti_x+20, yeti_y+20], fill=(0, 0, 0))
+            draw.ellipse([yeti_x+30, yeti_y+15, yeti_x+35, yeti_y+20], fill=(0, 0, 0))
+            # Yeti mouth
+            draw.arc([yeti_x+15, yeti_y+25, yeti_x+35, yeti_y+35], 0, 180, fill=(0, 0, 0), width=2)
+        
+        # Add frame number
+        draw.text((10, 10), f"Frame {i+1}", fill=(255, 255, 255))
         
         frames.append(img)
     
     return frames
 
+def generate_pygame_code(story, character, theme):
+    """Generate PyGame code based on the story"""
+    # Basic PyGame template
+    code = f"""import pygame
+import sys
+
+# Initialize Pygame
+pygame.init()
+
+# Screen dimensions
+WIDTH, HEIGHT = 800, 600
+screen = pygame.display.set_mode((WIDTH, HEIGHT))
+pygame.display.set_caption("Your Story: {character.capitalize()} in {theme.capitalize()}")
+
+# Colors
+BACKGROUND = {get_theme_color(theme)}
+HERO_COLOR = {get_character_color(character)}
+
+# Hero position
+hero_x = 100
+hero_y = HEIGHT // 2
+hero_speed = 5
+
+# Main game loop
+clock = pygame.time.Clock()
+running = True
+
+while running:
+    for event in pygame.event.get():
+        if event.type == pygame.QUIT:
+            running = False
+    
+    # Handle keyboard input
+    keys = pygame.key.get_pressed()
+    if keys[pygame.K_LEFT]:
+        hero_x -= hero_speed
+    if keys[pygame.K_RIGHT]:
+        hero_x += hero_speed
+    if keys[pygame.K_UP]:
+        hero_y -= hero_speed
+    if keys[pygame.K_DOWN]:
+        hero_y += hero_speed
+    
+    # Fill the background
+    screen.fill(BACKGROUND)
+    
+    # Draw the hero
+{get_character_drawing_code(character)}
+    
+    # Draw story elements
+{get_story_elements_code(story, theme)}
+    
+    pygame.display.flip()
+    clock.tick(60)
+
+pygame.quit()
+sys.exit()
+"""
+    return code
+
+def get_theme_color(theme):
+    """Get theme color for PyGame code"""
+    colors = {
+        "space": "(0, 0, 30)",
+        "jungle": "(34, 139, 34)",
+        "medieval": "(139, 69, 19)",
+        "underwater": "(0, 105, 148)",
+        "desert": "(210, 180, 140)",
+        "arctic": "(240, 248, 255)"
+    }
+    return colors.get(theme, "(0, 0, 30)")
+
+def get_character_color(character):
+    """Get character color for PyGame code"""
+    colors = {
+        "spaceship": "(169, 169, 169)",
+        "dragon": "(178, 34, 34)",
+        "knight": "(70, 70, 70)",
+        "mermaid": "(255, 105, 180)",
+        "robot": "(100, 100, 100)",
+        "unicorn": "(255, 240, 245)"
+    }
+    return colors.get(character, "(169, 169, 169)")
+
+def get_character_drawing_code(character):
+    """Get PyGame drawing code for character"""
+    if character == "spaceship":
+        return """    # Draw spaceship
+    pygame.draw.polygon(screen, HERO_COLOR, [(hero_x, hero_y), 
+                                            (hero_x+50, hero_y), 
+                                            (hero_x+25, hero_y-30)])
+    pygame.draw.rect(screen, (0, 191, 255), (hero_x+20, hero_y-10, 10, 10))"""
+    elif character == "dragon":
+        return """    # Draw dragon
+    pygame.draw.ellipse(screen, HERO_COLOR, (hero_x, hero_y, 60, 30))
+    pygame.draw.ellipse(screen, HERO_COLOR, (hero_x+50, hero_y+5, 20, 20))
+    pygame.draw.ellipse(screen, (138, 43, 226), (hero_x+10, hero_y-20, 30, 30))"""
+    elif character == "knight":
+        return """    # Draw knight
+    pygame.draw.rect(screen, HERO_COLOR, (hero_x, hero_y, 25, 50))
+    pygame.draw.ellipse(screen, (210, 180, 140), (hero_x+5, hero_y-15, 15, 15))
+    pygame.draw.arc(screen, (50, 50, 50), (hero_x, hero_y-20, 25, 20), 0, 3.14, 3)
+    pygame.draw.rect(screen, (192, 192, 192), (hero_x+20, hero_y+10, 10, 5))
+    pygame.draw.polygon(screen, (192, 192, 192), [(hero_x+30, hero_y+12), 
+                                                (hero_x+40, hero_y+10), 
+                                                (hero_x+40, hero_y+15)])"""
+    elif character == "mermaid":
+        return """    # Draw mermaid
+    pygame.draw.ellipse(screen, HERO_COLOR, (hero_x, hero_y, 40, 30))
+    pygame.draw.ellipse(screen, (255, 218, 185), (hero_x+10, hero_y-30, 20, 30))
+    pygame.draw.ellipse(screen, (255, 215, 0), (hero_x-10, hero_y-35, 50, 15))"""
+    elif character == "robot":
+        return """    # Draw robot
+    pygame.draw.rect(screen, HERO_COLOR, (hero_x, hero_y, 30, 50))
+    pygame.draw.rect(screen, (150, 150, 150), (hero_x-5, hero_y-20, 40, 20))
+    pygame.draw.ellipse(screen, (0, 255, 0), (hero_x+5, hero_y-15, 5, 5))
+    pygame.draw.ellipse(screen, (0, 255, 0), (hero_x+20, hero_y-15, 5, 5))
+    pygame.draw.rect(screen, HERO_COLOR, (hero_x-10, hero_y+10, 10, 10))
+    pygame.draw.rect(screen, HERO_COLOR, (hero_x+30, hero_y+10, 10, 10))"""
+    elif character == "unicorn":
+        return """    # Draw unicorn
+    pygame.draw.ellipse(screen, HERO_COLOR, (hero_x, hero_y, 40, 20))
+    pygame.draw.ellipse(screen, HERO_COLOR, (hero_x+30, hero_y-5, 20, 20))
+    pygame.draw.polygon(screen, (255, 215, 0), [(hero_x+40, hero_y-10), 
+                                               (hero_x+45, hero_y-30), 
+                                               (hero_x+50, hero_y-10)])"""
+    else:
+        return """    # Draw hero
+    pygame.draw.rect(screen, HERO_COLOR, (hero_x, hero_y, 40, 60))"""
+
+def get_story_elements_code(story, theme):
+    """Get PyGame code for story elements"""
+    code = ""
+    if "alien" in story.lower() and theme == "space":
+        code += """    # Draw alien
+    pygame.draw.ellipse(screen, (50, 205, 50), (600, 200, 30, 30))
+    pygame.draw.ellipse(screen, (0, 0, 0), (610, 210, 5, 5))
+    pygame.draw.ellipse(screen, (0, 0, 0), (620, 210, 5, 5))
+    pygame.draw.arc(screen, (0, 0, 0), (610, 220, 15, 10), 0, 3.14, 2)
+    """
+    
+    if "dragon" in story.lower() and theme == "medieval":
+        code += """    # Draw dragon
+    pygame.draw.ellipse(screen, (178, 34, 34), (650, 150, 50, 25))
+    pygame.draw.line(screen, (178, 34, 34), (700, 162), (730, 150), 4)
+    """
+    
+    if "treasure" in story.lower():
+        code += """    # Draw treasure
+    pygame.draw.rect(screen, (255, 215, 0), (700, 400, 30, 20))
+    pygame.draw.rect(screen, (255, 215, 0), (705, 395, 20, 10))
+    """
+    
+    if "castle" in story.lower() and theme == "medieval":
+        code += """    # Draw castle
+    pygame.draw.rect(screen, (169, 169, 169), (600, 300, 150, 150))
+    pygame.draw.rect(screen, (105, 105, 105), (650, 350, 50, 100))
+    for x in range(610, 740, 40):
+        pygame.draw.polygon(screen, (220, 20, 60), [(x, 300), (x-20, 320), (x+20, 320)])
+    """
+    
+    return code
+
 def generate_code_explanation(story, explanation_generator):
     """Generate code explanation using open-source model"""
     try:
@@ -391,14 +710,16 @@ def extract_story_elements(story, ner_model, classifier):
         
         # Find hero based on keywords and entities
         hero_keywords = {
-            "spaceship": ["spaceship", "rocket", "ship", "alien", "planet", "star"],
+            "spaceship": ["spaceship", "rocket", "ship", "alien", "planet", "star", "space"],
             "dragon": ["dragon", "monster", "creature", "beast", "wyvern"],
-            "knight": ["knight", "warrior", "prince", "princess", "king", "queen", "sword"],
-            "mermaid": ["mermaid", "merman", "sea", "ocean", "underwater", "fish"]
+            "knight": ["knight", "warrior", "prince", "princess", "king", "queen", "sword", "castle"],
+            "mermaid": ["mermaid", "merman", "sea", "ocean", "underwater", "fish"],
+            "robot": ["robot", "cyborg", "machine", "android"],
+            "unicorn": ["unicorn", "horse", "pony", "magic"]
         }
         
         # Find world based on keywords and classification
-        world_labels = ["space", "jungle", "medieval", "underwater"]
+        world_labels = ["space", "jungle", "medieval", "underwater", "desert", "arctic"]
         
         # Find hero by keywords
         story_lower = story.lower()
@@ -419,6 +740,10 @@ def extract_story_elements(story, ner_model, classifier):
                 hero = "knight"
             elif "mermaid" in story_lower or "sea" in story_lower:
                 hero = "mermaid"
+            elif "robot" in story_lower:
+                hero = "robot"
+            elif "unicorn" in story_lower:
+                hero = "unicorn"
         
         # Classify world
         result = classifier(story, world_labels)
@@ -429,10 +754,14 @@ def extract_story_elements(story, ner_model, classifier):
             world = "underwater"
         if "forest" in story_lower or "jungle" in story_lower:
             world = "jungle"
-        if "castle" in story_lower or "kingdom" in story_lower or "dragon" in story_lower:
+        if "castle" in story_lower or "kingdom" in story_lower or "dragon" in story_lower or "knight" in story_lower:
             world = "medieval"
         if "space" in story_lower or "alien" in story_lower or "planet" in story_lower:
             world = "space"
+        if "desert" in story_lower or "sand" in story_lower:
+            world = "desert"
+        if "arctic" in story_lower or "snow" in story_lower or "ice" in story_lower:
+            world = "arctic"
         
         return hero, world
     
@@ -440,6 +769,16 @@ def extract_story_elements(story, ner_model, classifier):
         st.error(f"Error analyzing story: {str(e)}")
         return "spaceship", "space"
 
+def run_pygame_code(code):
+    """Run PyGame code and capture the output"""
+    with tempfile.NamedTemporaryFile(suffix=".py", delete=False, mode="w") as f:
+        f.write(code)
+        temp_file_name = f.name
+    
+    # Create a video capture of the PyGame window
+    os.system(f"python {temp_file_name} &")
+    return temp_file_name
+
 # Header section
 st.markdown('<div class="header">CodeTales ✨</div>', unsafe_allow_html=True)
 st.markdown('<div class="subheader">Storytime + Coding Magic</div>', unsafe_allow_html=True)
@@ -483,20 +822,28 @@ if 'xp' not in st.session_state:
     st.session_state.xp = 0
 if 'analyzed' not in st.session_state:
     st.session_state.analyzed = False
+if 'pygame_code' not in st.session_state:
+    st.session_state.pygame_code = ""
+if 'show_code' not in st.session_state:
+    st.session_state.show_code = False
 
 # Character and theme mapping
 characters = {
     "spaceship": "🚀 Spaceship",
     "dragon": "🐉 Dragon",
     "knight": "🛡️ Knight",
-    "mermaid": "🧜‍♀️ Mermaid"
+    "mermaid": "🧜‍♀️ Mermaid",
+    "robot": "🤖 Robot",
+    "unicorn": "🦄 Unicorn"
 }
 
 themes = {
     "space": "🌌 Space",
     "jungle": "🌿 Jungle",
     "medieval": "🏰 Medieval",
-    "underwater": "🌊 Underwater"
+    "underwater": "🌊 Underwater",
+    "desert": "🏜️ Desert",
+    "arctic": "❄️ Arctic"
 }
 
 # Main content
@@ -540,25 +887,41 @@ with col1:
         st.markdown(f'<div class="world-suggestion">Your World: {themes[st.session_state.selected_theme]}</div>', 
                     unsafe_allow_html=True)
         
-        st.info("💡 The AI chose these based on your story! Click Generate Animation when ready.")
+        # Customization options
+        st.markdown("### 🎨 Customize Your Hero")
+        custom_char = st.selectbox(
+            "Choose a different hero:",
+            options=list(characters.keys()),
+            format_func=lambda x: characters[x],
+            index=list(characters.keys()).index(st.session_state.selected_character)
+        
+        st.session_state.selected_character = custom_char
         
         # Generate animation button
-        if st.button("🎬 Generate Animation!", use_container_width=True, key="generate", type="primary"):
+        if st.button("🎬 Generate Animation & Code!", use_container_width=True, key="generate", type="primary"):
             st.session_state.animation_generated = True
-            with st.spinner("🧙‍♂️ Creating your animation..."):
+            with st.spinner("🧙‍♂️ Creating your animation and code..."):
                 # Generate animation frames
                 st.session_state.animation_frames = generate_sprite_animation(
                     story_text, 
                     character=st.session_state.selected_character,
-                    theme=st.session_state.selected_theme
+                    theme=st.session_state.selected_theme,
+                    num_frames=8
                 )
                 
                 # Generate code explanation
                 st.session_state.code_explanation = generate_code_explanation(story_text, explanation_generator)
                 
+                # Generate PyGame code
+                st.session_state.pygame_code = generate_pygame_code(
+                    story_text,
+                    st.session_state.selected_character,
+                    st.session_state.selected_theme
+                )
+                
                 # Update user progress
                 st.session_state.story_count += 1
-                st.session_state.xp += 20
+                st.session_state.xp += 25
                 
                 # Check for level up
                 if st.session_state.xp >= 100:
@@ -575,12 +938,8 @@ with col2:
         st.markdown("### 🎮 Step 3: Your Animation")
         # Display animation frames
         st.markdown("**Your Story Comes to Life!**")
-        cols = st.columns(len(st.session_state.animation_frames))
-        for i, frame in enumerate(st.session_state.animation_frames):
-            with cols[i]:
-                st.image(frame, caption=f"Frame {i+1}", use_container_width=True)
         
-        # Create an animated GIF
+        # Show animation as GIF
         gif_buffer = BytesIO()
         st.session_state.animation_frames[0].save(
             gif_buffer,
@@ -590,10 +949,13 @@ with col2:
             duration=500,
             loop=0
         )
-        gif_data = gif_buffer.getvalue()
+        
+        st.image(gif_buffer, caption="Your Animated Story", use_container_width=True)
+        
+        # Download button
         st.download_button(
             label="⬇️ Download Animation",
-            data=gif_data,
+            data=gif_buffer.getvalue(),
             file_name="your_story.gif",
             mime="image/gif",
             use_container_width=True
@@ -606,7 +968,7 @@ with col2:
         st.markdown("### 🎮 Step 3: Your Animation")
         st.image("https://img.freepik.com/free-vector/hand-drawn-colorful-space-background_23-2148821798.jpg", 
                  use_container_width=True)
-        st.info("👆 Click 'Generate Animation' to bring your story to life!")
+        st.info("👆 Click 'Generate Animation & Code!' to bring your story to life!")
     elif story_text:
         st.markdown("### 🎮 Your Animation Will Appear Here")
         preview_img = create_storyboard_image(story_text)
@@ -619,65 +981,161 @@ with col2:
     
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Tavus explanation section
+# Coding tutorial section
 if st.session_state.animation_generated and st.session_state.story_text:
     st.markdown('<div class="robot-speech">', unsafe_allow_html=True)
     st.markdown("### 🤖 Step 4: Tavus the Robot Teacher Explains Coding")
     
-    # Extract action words from story
-    action_words = ["zoom", "shoot", "fly", "move", "jump", "run", "attack", 
-                   "laser", "alien", "spaceship", "dragon", "fire", "hero", 
-                   "sword", "castle", "escape", "fight", "win", "swim", "dive"]
-    found_actions = [word for word in action_words if re.search(r'\b' + word + r'\b', st.session_state.story_text.lower())]
-    
-    if found_actions:
-        # Create explanation based on found words
-        st.markdown("#### 🧩 Story Actions to Code Concepts")
-        cols = st.columns(3)
-        action_colors = ["#ff6b6b", "#4ecdc4", "#ffd166", "#06d6a0", "#118ab2"]
-        
-        for i, action in enumerate(found_actions[:6]):
-            with cols[i % 3]:
-                color = action_colors[i % len(action_colors)]
-                st.markdown(f'<div style="background:{color}; color:white; border-radius:10px; padding:10px; text-align:center;">', unsafe_allow_html=True)
-                st.markdown(f"**{action.capitalize()}**")
-                
-                # Add code snippets based on action
-                if action == "zoom":
-                    st.code("hero.move_fast(10)", language="python")
-                elif action == "shoot":
-                    st.code("laser = hero.create_weapon()", language="python")
-                elif action == "fly":
-                    st.code("hero.fly(height=100)", language="python")
-                elif action == "move":
-                    st.code("hero.move(direction='right')", language="python")
-                elif action == "jump":
-                    st.code("hero.jump(power=20)", language="python")
-                elif action == "run":
-                    st.code("hero.speed = hero.speed * 2", language="python")
-                elif action == "attack":
-                    st.code("hero.attack(enemy)", language="python")
-                elif action == "swim":
-                    st.code("hero.swim(speed=5)", language="python")
-                elif action == "dive":
-                    st.code("hero.dive(depth=30)", language="python")
-                else:
-                    st.code(f"hero.{action}()", language="python")
-                
-                st.markdown("</div>", unsafe_allow_html=True)
-        
-        st.markdown("---")
-    
-    # Show AI-generated explanation
+    # Show code explanation
     st.markdown("### 🧠 AI-Powered Explanation:")
     st.write(st.session_state.code_explanation)
     
-    st.markdown("#### 💡 Remember:")
-    st.markdown("""
-    - Every action in your story becomes code
-    - Code is just instructions for computers
-    - You're already thinking like a coder!
-    """)
+    # Toggle for showing full code
+    if st.button("👨‍💻 Show Me the Full Code!", key="show_code"):
+        st.session_state.show_code = not st.session_state.show_code
+    
+    if st.session_state.show_code:
+        st.markdown("### 🐍 Your Story as Python Code")
+        st.code(st.session_state.pygame_code, language='python')
+        
+        if st.button("▶️ Run This Code in PyGame", key="run_pygame"):
+            with st.spinner("🚀 Launching your game..."):
+                temp_file = run_pygame_code(st.session_state.pygame_code)
+                st.success(f"Game launched! Check your desktop for the PyGame window")
+                st.info("Use arrow keys to move your character!")
+    
+    # Step-by-step coding tutorial
+    st.markdown("### 👣 Step-by-Step Coding Tutorial")
+    with st.expander("1. Setting Up Your Game"):
+        st.markdown("""
+        Every PyGame program starts with these basic steps:
+        ```python
+        import pygame  # Import the game library
+        import sys     # Import system library for exit
+        
+        # Initialize Pygame
+        pygame.init()
+        
+        # Create a game window
+        WIDTH, HEIGHT = 800, 600
+        screen = pygame.display.set_mode((WIDTH, HEIGHT))
+        pygame.display.set_caption("Your Awesome Game")
+        ```
+        """)
+    
+    with st.expander("2. Creating Your Hero"):
+        st.markdown(f"""
+        Let's create your {st.session_state.selected_character} hero:
+        ```python
+        # Hero position
+        hero_x = 100
+        hero_y = 300
+        
+        # How to draw your hero
+        def draw_hero():
+            {get_character_drawing_code(st.session_state.selected_character).replace('\n', '\n            ')}
+        ```
+        """)
+    
+    with st.expander("3. Making Your Hero Move"):
+        st.markdown("""
+        We'll use keyboard input to move the hero:
+        ```python
+        hero_speed = 5
+        
+        # Inside the game loop
+        keys = pygame.key.get_pressed()
+        if keys[pygame.K_LEFT]:
+            hero_x -= hero_speed
+        if keys[pygame.K_RIGHT]:
+            hero_x += hero_speed
+        if keys[pygame.K_UP]:
+            hero_y -= hero_speed
+        if keys[pygame.K_DOWN]:
+            hero_y += hero_speed
+        ```
+        """)
+    
+    with st.expander("4. Adding Your Story Elements"):
+        story_elements = []
+        if "alien" in st.session_state.story_text.lower():
+            story_elements.append("Aliens")
+        if "dragon" in st.session_state.story_text.lower():
+            story_elements.append("Dragons")
+        if "treasure" in st.session_state.story_text.lower():
+            story_elements.append("Treasure")
+        
+        if story_elements:
+            elements = ", ".join(story_elements)
+            st.markdown(f"""
+            Let's add {elements} from your story:
+            ```python
+            def draw_story_elements():
+                {get_story_elements_code(st.session_state.story_text, st.session_state.selected_theme).replace('\n', '\n                ')}
+            ```
+            """)
+        else:
+            st.markdown("""
+            Add your own story elements with drawing commands:
+            ```python
+            # Example: Draw a treasure chest
+            pygame.draw.rect(screen, (255, 215, 0), (700, 400, 30, 20))
+            pygame.draw.rect(screen, (255, 215, 0), (705, 395, 20, 10))
+            ```
+            """)
+    
+    with st.expander("5. Running Your Game"):
+        st.markdown("""
+        Finally, we put everything together in a game loop:
+        ```python
+        # Main game loop
+        clock = pygame.time.Clock()
+        running = True
+        
+        while running:
+            # Handle events
+            for event in pygame.event.get():
+                if event.type == pygame.QUIT:
+                    running = False
+            
+            # Handle movement
+            # ... (movement code from step 3)
+            
+            # Draw everything
+            screen.fill(BACKGROUND)
+            draw_hero()
+            draw_story_elements()
+            
+            # Update the display
+            pygame.display.flip()
+            clock.tick(60)
+        
+        pygame.quit()
+        sys.exit()
+        ```
+        """)
+    
+    st.markdown("</div>", unsafe_allow_html=True)
+
+# Code Playground
+if st.session_state.animation_generated:
+    st.markdown('<div class="code-playground">', unsafe_allow_html=True)
+    st.markdown("### 🧪 Step 5: Code Playground")
+    st.markdown("Try modifying your code and see the changes!")
+    
+    # Editable code area
+    modified_code = st.text_area(
+        "Edit your Python code:",
+        value=st.session_state.pygame_code,
+        height=300,
+        key="code_editor"
+    )
+    
+    # Run the modified code
+    if st.button("🚀 Run My Modified Code", key="run_modified_code"):
+        with st.spinner("Running your code..."):
+            temp_file = run_pygame_code(modified_code)
+            st.success("Game launched with your modifications!")
     
     st.markdown("</div>", unsafe_allow_html=True)
 
@@ -687,6 +1145,30 @@ if 'new_level' in st.session_state and st.session_state.new_level:
     st.success(f"🌟 Level Up! You're now Level {st.session_state.level}!")
     st.session_state.new_level = False
 
+# Achievements
+st.markdown("### 🏆 Your Achievements")
+achievement_cols = st.columns(4)
+with achievement_cols[0]:
+    st.markdown('<div class="achievement-badge">📝</div>', unsafe_allow_html=True)
+    st.markdown("**Storyteller**", help="Created your first story")
+    st.markdown(f"{st.session_state.story_count} story created")
+
+with achievement_cols[1]:
+    st.markdown('<div class="achievement-badge">👾</div>', unsafe_allow_html=True)
+    st.markdown("**Animator**", help="Generated 5 animations")
+    st.markdown(f"{min(st.session_state.story_count, 5)}/5 animations")
+
+with achievement_cols[2]:
+    st.markdown('<div class="achievement-badge">💻</div>', unsafe_allow_html=True)
+    st.markdown("**Coder**", help="Modified and ran code")
+    st.markdown("Unlocked!" if st.session_state.animation_generated else "Locked")
+
+with achievement_cols[3]:
+    st.markdown('<div class="achievement-badge">🚀</div>', unsafe_allow_html=True)
+    st.markdown("**Explorer**", help="Used 3 different heroes")
+    heroes_used = len(set([st.session_state.selected_character]))
+    st.markdown(f"{heroes_used}/3 heroes used")
+
 # Benefits section
 st.markdown("""
 ## ❤ Why Kids & Parents Love CodeTales
@@ -698,6 +1180,7 @@ st.markdown("""
 | 🎮 Interactive game creation | ➗ Reinforces STEM fundamentals |
 | 😄 Fun characters and worlds | 🧩 Encourages logical reasoning |
 | 🌟 Unlock new levels | 📈 Tracks learning progress |
+| 💻 Real Python coding experience | 🎯 Aligned with coding curriculum |
 """)
 
 # Footer