Update app.py

app.py

@@ -1,1196 +1,545 @@
-# app.py
+# app.py - Hugging Face Compatible Version
 import streamlit as st
+import requests
+import json
 import time
+import base64
 import random
-import textwrap
-from io import BytesIO
-from PIL import Image, ImageDraw, ImageFont
+from PIL import Image
+import io
+import matplotlib.pyplot as plt
+import matplotlib.animation as animation
+from matplotlib.animation import FuncAnimation
 import numpy as np
-from transformers import pipeline
-import base64
-import re
-import pygame
-import sys
-import os
-import tempfile
 
-# Set up the page
+# Configure Streamlit page
 st.set_page_config(
-    page_title="CodeTales ✨",
-    page_icon="🚀",
+    page_title="StoryCoder - Learn Python Through Stories",
+    page_icon="🧙‍♂️",
     layout="wide",
     initial_sidebar_state="expanded"
 )
 
-# Custom CSS
+# Custom CSS for colorful UI
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Press+Start+2P&display=swap');
-            
-.stApp {
-    background: linear-gradient(135deg, #6e8efb, #a777e3);
-}
-            
-.header {
-    font-family: 'Press Start 2P', cursive;
-    color: white;
-    text-align: center;
-    font-size: 2.5rem;
-    text-shadow: 3px 3px 0 #000;
-    padding: 1rem;
-    letter-spacing: 2px;
-}
-            
-.subheader {
-    font-family: 'Comic Neue', cursive;
-    color: #ffeb3b;
-    text-align: center;
-    font-size: 1.8rem;
-    margin-bottom: 2rem;
-}
-            
-.story-box {
-    background-color: rgba(255, 255, 255, 0.9);
-    border-radius: 20px;
-    padding: 2rem;
-    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
-    margin-bottom: 2rem;
-    border: 4px solid #ff6b6b;
-}
-            
-.robot-speech {
-    background-color: #4caf50;
-    color: white;
-    border-radius: 20px;
-    padding: 1.5rem;
-    font-size: 1.2rem;
-    position: relative;
-    margin-top: 2rem;
-    border: 3px solid #2e7d32;
-}
-            
-.robot-speech:after {
-    content: '';
-    position: absolute;
-    top: -20px;
-    left: 50px;
-    border: 10px solid transparent;
-    border-bottom-color: #4caf50;
-}
-            
-.generate-btn {
-    background: linear-gradient(135deg, #ff5722, #ff9800) !important;
-    color: white !important;
-    font-weight: bold !important;
-    font-size: 1.2rem !important;
-    padding: 0.7rem 2rem !important;
-    border-radius: 50px !important;
-    border: none !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
-    transition: all 0.3s !important;
-    margin-top: 1rem;
-    font-family: 'Press Start 2P', cursive !important;
-    letter-spacing: 1px;
-}
-            
-.generate-btn:hover {
-    transform: scale(1.05) !important;
-    box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important;
-    background: linear-gradient(135deg, #ff7043, #ffa726) !important;
-}
-            
-.code-block {
-    background: #2d2d2d;
-    color: #f8f8f2;
-    padding: 1rem;
-    border-radius: 10px;
-    font-family: 'Courier New', monospace;
-    font-size: 1.1rem;
-    margin: 1rem 0;
-    overflow-x: auto;
-    border-left: 4px solid #ff9800;
-}
-
-.animation-frame {
-    border: 3px solid #ffeb3b;
-    border-radius: 10px;
-    margin: 5px;
-}
-
-.achievement-badge {
-    background: #ffd54f;
-    color: #333;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    margin: 0 auto;
-}
-
-.hero-suggestion {
-    background: #ffeb3b;
-    color: #333;
-    border-radius: 10px;
-    padding: 1rem;
-    margin: 1rem 0;
-    text-align: center;
-    font-weight: bold;
-    border: 2px dashed #ff9800;
-}
-
-.world-suggestion {
-    background: #4caf50;
-    color: white;
-    border-radius: 10px;
-    padding: 1rem;
-    margin: 1rem 0;
-    text-align: center;
-    font-weight: bold;
-    border: 2px dashed #2e7d32;
-}
-
-.step-container {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 2rem;
-}
-
-.step {
-    background: rgba(255, 255, 255, 0.9);
-    border-radius: 10px;
-    padding: 1rem;
-    width: 23%;
-    text-align: center;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-}
-
-.step-number {
-    font-size: 1.5rem;
-    font-weight: bold;
-    background: #ff5722;
-    color: white;
-    border-radius: 50%;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    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)
-
-# Initialize AI models
-@st.cache_resource
-def load_models():
-    """Load open-source AI models"""
-    try:
-        # Named entity recognition for identifying objects
-        ner_model = pipeline("ner", model="dbmdz/bert-large-cased-finetuned-conll03-english")
-        
-        # Text classification for theme detection
-        classifier = pipeline("zero-shot-classification", model="facebook/bart-large-mnli")
-        
-        # Text generation for code explanations
-        explanation_generator = pipeline("text2text-generation", model="google/flan-t5-large")
-        
-        return ner_model, classifier, explanation_generator
-    except Exception as e:
-        st.error(f"Error loading models: {e}")
-        return None, None, None
-
-# Image generation functions
-def create_storyboard_image(text, width=400, height=300):
-    """Create a storyboard image from text"""
-    # Create blank image
-    img = Image.new('RGB', (width, height), color=(25, 25, 112))  # Dark blue background
-    
-    # Load a comic-style font (fallback to default if not available)
-    try:
-        font = ImageFont.truetype("comic.ttf", 16)
-    except:
-        font = ImageFont.load_default()
-    
-    draw = ImageDraw.Draw(img)
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+    
+    :root {
+        --primary: #FF6B6B;
+        --secondary: #4ECDC4;
+        --accent: #FFD166;
+        --dark: #1A535C;
+        --light: #F7FFF7;
+    }
     
-    # Draw title
-    draw.text((10, 10), "Your Story Comes to Life!", fill=(255, 215, 0), font=font)
+    body {
+        background: linear-gradient(135deg, var(--light) 0%, #E8F4F8 100%);
+        font-family: 'Comic Neue', cursive;
+    }
     
-    # Draw text box
-    draw.rectangle([10, 40, width-10, height-40], fill=(240, 248, 255), outline=(255, 215, 0), width=2)
+    .stApp {
+        background: url('https://www.transparenttextures.com/patterns/cartographer.png');
+    }
     
-    # Wrap text
-    wrapped_text = textwrap.fill(text, width=40)
-    draw.text((20, 50), wrapped_text, fill=(25, 25, 112), font=font)
+    .story-box {
+        background-color: white;
+        border-radius: 20px;
+        padding: 25px;
+        box-shadow: 0 8px 16px rgba(26, 83, 92, 0.15);
+        border: 3px solid var(--accent);
+        margin-bottom: 25px;
+    }
     
-    # Draw decorations
-    draw.rectangle([width-50, height-30, width-30, height-10], fill=(220, 20, 60), outline=(255, 215, 0), width=1)
-    draw.ellipse([20, height-50, 70, height], fill=(30, 144, 255), outline=(255, 215, 0), width=1)
+    .header {
+        color: var(--dark);
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+    }
     
-    return img
-
-def generate_sprite_animation(story, character="spaceship", theme="space", num_frames=8):
-    """Generate a sprite-based animation from story"""
-    frames = []
-    width, height = 400, 300
+    .concept-card {
+        background: linear-gradient(145deg, #ffffff, #f0f0f0);
+        border-radius: 15px;
+        padding: 15px;
+        margin: 10px 0;
+        border-left: 5px solid var(--secondary);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+    }
     
-    for i in range(num_frames):
-        # Create base image with theme
-        if theme == "space":
-            bg_color = (0, 0, 30)
-            star_color = (255, 255, 255)
-        elif theme == "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)
-            
-        img = Image.new('RGB', (width, height), color=bg_color)
-        draw = ImageDraw.Draw(img)
-        
-        # 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 * 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 + 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 * 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 + 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 * 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+30, knight_y+12), (knight_x+60, knight_y-20)], fill=(255, 255, 0), width=3)
-        
-        elif character == "mermaid":
-            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, 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 = 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 = 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 = 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 = 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)
+    .stButton>button {
+        background: linear-gradient(45deg, var(--primary), var(--secondary));
+        color: white;
+        border-radius: 12px;
+        padding: 10px 24px;
+        font-weight: bold;
+        font-size: 18px;
+        border: none;
+        transition: all 0.3s;
+    }
     
-    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
+    .stButton>button:hover {
+        transform: scale(1.05);
+        box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+    }
     
-    # 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
+    .stTextInput>div>div>input {
+        border-radius: 12px;
+        padding: 12px;
+        border: 2px solid var(--accent);
+    }
     
-    # Fill the background
-    screen.fill(BACKGROUND)
+    .tabs {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 20px;
+        overflow-x: auto;
+    }
     
-    # Draw the hero
-{get_character_drawing_code(character)}
+    .tab {
+        padding: 10px 20px;
+        background-color: var(--accent);
+        border-radius: 10px;
+        cursor: pointer;
+        font-weight: bold;
+        white-space: nowrap;
+    }
     
-    # Draw story elements
-{get_story_elements_code(story, theme)}
+    .tab.active {
+        background-color: var(--secondary);
+        color: white;
+    }
     
-    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)"
+    @media (max-width: 768px) {
+        .tabs {
+            flex-wrap: wrap;
+        }
     }
-    return colors.get(theme, "(0, 0, 30)")
+</style>
+""", unsafe_allow_html=True)
 
-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)"
+# Concept database
+CONCEPTS = {
+    "loop": {
+        "name": "Loop",
+        "emoji": "🔄",
+        "description": "Loops repeat actions multiple times",
+        "example": "for i in range(5):\n    print('Hello!')",
+        "color": "#FF9E6D"
+    },
+    "conditional": {
+        "name": "Conditional",
+        "emoji": "❓",
+        "description": "Conditionals make decisions in code",
+        "example": "if sunny:\n    go_outside()\nelse:\n    stay_inside()",
+        "color": "#4ECDC4"
+    },
+    "function": {
+        "name": "Function",
+        "emoji": "✨",
+        "description": "Functions are reusable blocks of code",
+        "example": "def greet(name):\n    print(f'Hello {name}!')",
+        "color": "#FFD166"
+    },
+    "variable": {
+        "name": "Variable",
+        "emoji": "📦",
+        "description": "Variables store information",
+        "example": "score = 10\nplayer = 'Alex'",
+        "color": "#FF6B6B"
+    },
+    "list": {
+        "name": "List",
+        "emoji": "📝",
+        "description": "Lists store collections of items",
+        "example": "fruits = ['apple', 'banana', 'orange']",
+        "color": "#1A535C"
     }
-    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))"""
+# Free AI models via Hugging Face Inference API
+HF_API_URL = "https://api-inference.huggingface.co/models/"
+MODELS = {
+    "codegen": "Salesforce/codegen-350M-mono",
+    "story": "gpt2"
+}
 
-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)
-    """
+def analyze_story(story):
+    """Analyze story using simple NLP and identify programming concepts"""
+    story_lower = story.lower()
+    detected_concepts = []
     
-    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)
-    """
+    # Check for loops
+    if any(word in story_lower for word in ["times", "repeat", "again", "multiple"]):
+        detected_concepts.append("loop")
     
-    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))
-    """
+    # Check for conditionals
+    if any(word in story_lower for word in ["if", "when", "unless", "whether"]):
+        detected_concepts.append("conditional")
     
-    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)])
-    """
+    # Check for functions
+    if any(word in story_lower for word in ["make", "create", "do", "perform", "cast"]):
+        detected_concepts.append("function")
     
-    return code
-
-def generate_code_explanation(story, explanation_generator):
-    """Generate code explanation using open-source model"""
-    try:
-        # Create a prompt for the model
-        prompt = f"Explain to a child how this story would become code: '{story}'. Use simple analogies and relate to real-world objects."
-        
-        # Generate text
-        result = explanation_generator(
-            prompt, 
-            max_length=250,
-            num_return_sequences=1,
-        )
-        
-        return result[0]['generated_text']
-    except:
-        # Fallback explanation if model fails
-        return f"""See how your story became real code? For example, when you wrote "{story.split()[0]}", 
-we used code like: character.move(). That's how we turn words into actions!"""
+    # Check for variables
+    if any(word in story_lower for word in ["is", "has", "set to", "value"]):
+        detected_concepts.append("variable")
+    
+    # Check for lists
+    if any(word in story_lower for word in ["and", "many", "several", "collection", "items"]):
+        detected_concepts.append("list")
+    
+    return list(set(detected_concepts))
 
-def extract_story_elements(story, ner_model, classifier):
-    """Extract hero and world from the story using AI models"""
+def generate_animation_code(story, concepts):
+    """Generate Python animation code using free Hugging Face model"""
     try:
-        # Default values
-        hero = "spaceship"
-        world = "space"
+        # For Hugging Face Spaces, we'll use a simplified approach
+        # since we can't run complex AI models for free
         
-        # Find hero based on keywords and entities
-        hero_keywords = {
-            "spaceship": ["spaceship", "rocket", "ship", "alien", "planet", "star", "space"],
-            "dragon": ["dragon", "monster", "creature", "beast", "wyvern"],
-            "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"]
-        }
+        # Build a template-based code generator
+        characters = ["rabbit", "dragon", "cat", "dog", "knight", "wizard", "scientist", "pirate"]
+        actions = ["hop", "run", "fly", "jump", "cast", "collect", "change", "grow"]
         
-        # Find world based on keywords and classification
-        world_labels = ["space", "jungle", "medieval", "underwater", "desert", "arctic"]
+        character = random.choice(characters)
+        action = random.choice(actions)
+        count = random.randint(2, 5)
         
-        # Find hero by keywords
-        story_lower = story.lower()
-        for candidate, keywords in hero_keywords.items():
-            if any(keyword in story_lower for keyword in keywords):
-                hero = candidate
-                break
+        concept = concepts[0] if concepts else "loop"
         
-        # Use NER to find entities
-        entities = ner_model(story)
-        person_entities = [e['word'] for e in entities if e['entity'] in ['B-PER', 'I-PER']]
-        
-        # If we found specific character names, adjust hero
-        if person_entities:
-            if "dragon" in story_lower:
-                hero = "dragon"
-            elif "knight" in story_lower or "king" in story_lower or "queen" in story_lower:
-                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)
-        world = result['labels'][0]
-        
-        # Override based on specific keywords
-        if "underwater" in story_lower or "ocean" in story_lower or "sea" in story_lower:
-            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 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
-    
-    except Exception as e:
-        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)
-st.markdown('<div style="text-align:center; color:white; font-size:1.2rem; margin-bottom:2rem;">Turn wild stories into playable games with AI magic!</div>', unsafe_allow_html=True)
-
-# How it works section
-st.markdown("### ✨ How It Works")
-step_container = st.container()
-with step_container:
-    cols = st.columns(4)
-    with cols[0]:
-        st.markdown('<div class="step"><div class="step-number">1</div>Write Your Story</div>', unsafe_allow_html=True)
-    with cols[1]:
-        st.markdown('<div class="step"><div class="step-number">2</div>AI Chooses Hero & World</div>', unsafe_allow_html=True)
-    with cols[2]:
-        st.markdown('<div class="step"><div class="step-number">3</div>Watch Animation</div>', unsafe_allow_html=True)
-    with cols[3]:
-        st.markdown('<div class="step"><div class="step-number">4</div>Learn Coding</div>', unsafe_allow_html=True)
-
-# Load models
-ner_model, classifier, explanation_generator = load_models()
-
-# Initialize session state
-if 'animation_generated' not in st.session_state:
-    st.session_state.animation_generated = False
-if 'story_text' not in st.session_state:
-    st.session_state.story_text = ""
-if 'animation_frames' not in st.session_state:
-    st.session_state.animation_frames = []
-if 'code_explanation' not in st.session_state:
-    st.session_state.code_explanation = ""
-if 'selected_character' not in st.session_state:
-    st.session_state.selected_character = "spaceship"
-if 'selected_theme' not in st.session_state:
-    st.session_state.selected_theme = "space"
-if 'story_count' not in st.session_state:
-    st.session_state.story_count = 0
-if 'level' not in st.session_state:
-    st.session_state.level = 1
-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",
-    "robot": "🤖 Robot",
-    "unicorn": "🦄 Unicorn"
-}
-
-themes = {
-    "space": "🌌 Space",
-    "jungle": "🌿 Jungle",
-    "medieval": "🏰 Medieval",
-    "underwater": "🌊 Underwater",
-    "desert": "🏜️ Desert",
-    "arctic": "❄️ Arctic"
-}
-
-# Main content
-st.markdown(f'<div class="level-indicator">Level {st.session_state.level} ✨ XP: {st.session_state.xp}/100</div>', unsafe_allow_html=True)
-progress = st.progress(st.session_state.xp / 100)
+        if concept == "loop":
+            code = f"""# {story}
+import matplotlib.pyplot as plt
+import matplotlib.animation as animation
+import numpy as np
 
-col1, col2 = st.columns([1, 1])
+fig, ax = plt.subplots(figsize=(8, 6))
+ax.set_xlim(0, 10)
+ax.set_ylim(0, 10)
+ax.set_title('{" ".join(story.split()[:5])}...')
+ax.set_facecolor('#f0f8ff')
+
+{character}_x = [2]
+{character}_y = [2]
+{character}_dot, = ax.plot({character}_x, {character}_y, 'o', markersize=20, color='orange')
+
+carrot_x = [8]
+carrot_y = [8]
+carrot_dot, = ax.plot(carrot_x, carrot_y, 'o', markersize=15, color='orange')
+
+def animate(frame):
+    # This is a loop that runs {count} times
+    if frame < {count}:
+        # Move the {character} closer to the target
+        new_x = {character}_x[-1] + 1.5
+        new_y = {character}_y[-1] + 1.5
+        {character}_x.append(new_x)
+        {character}_y.append(new_y)
+        {character}_dot.set_data({character}_x[-1], {character}_y[-1])
+    
+    return {character}_dot, carrot_dot
+
+ani = animation.FuncAnimation(fig, animate, frames={count+1}, interval=1000)
+plt.grid(True, linestyle='--', alpha=0.7)
+plt.show()
+"""
+        elif concept == "conditional":
+            code = f"""# {story}
+import matplotlib.pyplot as plt
+import numpy as np
 
-with col1:
-    st.markdown('<div class="story-box">', unsafe_allow_html=True)
-    st.markdown("### 📖 Step 1: Write Your Story")
-    
-    story_text = st.text_area(
-        "Tell your adventure story...", 
-        height=200,
-        placeholder="Once upon a time, a brave spaceship zoomed through space, shooting lasers at alien spaceships...",
-        label_visibility="collapsed",
-        value=st.session_state.story_text
-    )
-    
-    if st.button("✨ Analyze My Story!", use_container_width=True, key="analyze", type="primary"):
-        if story_text.strip():
-            st.session_state.story_text = story_text
-            with st.spinner("🔍 AI is reading your story to find the perfect hero and world..."):
-                # Extract story elements using AI
-                hero, world = extract_story_elements(story_text, ner_model, classifier)
-                st.session_state.selected_character = hero
-                st.session_state.selected_theme = world
-                st.session_state.analyzed = True
-                
-                # Show suggestions
-                st.success(f"🎯 AI found a {characters[hero]} hero in a {themes[world]} world!")
+fig, ax = plt.subplots(figsize=(8, 6))
+ax.set_xlim(0, 10)
+ax.set_ylim(0, 10)
+ax.set_title('{" ".join(story.split()[:5])}...')
+ax.set_facecolor('#f0f8ff')
+
+# This variable stores our condition
+is_unlocked = {'True' if random.choice([True, False]) else 'False'}
+
+# Draw treasure chest
+chest = plt.Rectangle((4, 4), 2, 2, fill=True, color='brown')
+ax.add_patch(chest)
+
+# Draw lock if not unlocked
+if not is_unlocked:
+    lock = plt.Rectangle((5, 6), 0.5, 0.8, fill=True, color='gray')
+    ax.add_patch(lock)
+    ax.text(5, 3, 'Locked! Find the key', fontsize=12, ha='center')
+else:
+    # Show open chest with treasure
+    chest.set_fill(False)
+    chest.set_edgecolor('brown')
+    chest.set_linestyle('--')
+    ax.text(5, 5, '$$$', fontsize=20, ha='center')
+    ax.text(5, 3, 'Treasure Acquired!', fontsize=12, ha='center')
+
+plt.grid(True, linestyle='--', alpha=0.7)
+plt.show()
+"""
         else:
-            st.warning("Please enter a story first!")
-    
-    if st.session_state.analyzed:
-        st.markdown("### 🧙 Step 2: Your Hero & World")
-        
-        st.markdown(f'<div class="hero-suggestion">Your Hero: {characters[st.session_state.selected_character]}</div>', 
-                    unsafe_allow_html=True)
-        st.markdown(f'<div class="world-suggestion">Your World: {themes[st.session_state.selected_theme]}</div>', 
-                    unsafe_allow_html=True)
-        
-        # 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 & Code!", use_container_width=True, key="generate", type="primary"):
-            st.session_state.animation_generated = True
-            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,
-                    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 += 25
-                
-                # Check for level up
-                if st.session_state.xp >= 100:
-                    st.session_state.level += 1
-                    st.session_state.xp = st.session_state.xp - 100
-                    st.session_state.new_level = True
-    
-    st.markdown('</div>', unsafe_allow_html=True)
+            code = f"""# {story}
+import matplotlib.pyplot as plt
+import numpy as np
 
-with col2:
-    st.markdown('<div class="story-box">', unsafe_allow_html=True)
-    
-    if st.session_state.animation_generated and st.session_state.animation_frames:
-        st.markdown("### 🎮 Step 3: Your Animation")
-        # Display animation frames
-        st.markdown("**Your Story Comes to Life!**")
-        
-        # Show animation as GIF
-        gif_buffer = BytesIO()
-        st.session_state.animation_frames[0].save(
-            gif_buffer,
-            format='GIF',
-            save_all=True,
-            append_images=st.session_state.animation_frames[1:],
-            duration=500,
-            loop=0
-        )
-        
-        st.image(gif_buffer, caption="Your Animated Story", use_container_width=True)
-        
-        # Download button
-        st.download_button(
-            label="⬇️ Download Animation",
-            data=gif_buffer.getvalue(),
-            file_name="your_story.gif",
-            mime="image/gif",
-            use_container_width=True
-        )
-        
-        # Display character and theme info
-        st.success(f"✨ Your {characters[st.session_state.selected_character]} in the {themes[st.session_state.selected_theme]} world!")
+fig, ax = plt.subplots(figsize=(8, 6))
+ax.set_xlim(0, 10)
+ax.set_ylim(0, 10)
+ax.set_title('{" ".join(story.split()[:5])}...')
+ax.set_facecolor('#f0f8ff')
+
+# Draw the scene
+ax.text(5, 8, '✨ Your Story ✨', fontsize=20, ha='center')
+ax.text(5, 7, f'"{story[:50]}{"..." if len(story) > 50 else ""}"', 
+        fontsize=14, ha='center', wrap=True)
+
+# Draw coding concept icons
+y_pos = 5
+for concept in {concepts}:
+    details = {CONCEPTS}[concept]
+    ax.text(2, y_pos, details['emoji'], fontsize=30, ha='center')
+    ax.text(5, y_pos, details['name'], fontsize=16, ha='left')
+    y_pos -= 1
+
+ax.text(5, 2, 'Generated with Python!', fontsize=14, ha='center', style='italic')
+plt.grid(True, linestyle='--', alpha=0.7)
+plt.show()
+"""
         
-    elif st.session_state.analyzed:
-        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 & Code!' to bring your story to life!")
-    elif story_text:
-        st.markdown("### 🎮 Your Animation Will Appear Here")
-        preview_img = create_storyboard_image(story_text)
-        st.image(preview_img, caption="Your Story Preview", use_container_width=True)
-        st.info("👆 Click 'Analyze My Story' to begin the magic!")
-    else:
-        st.image("https://img.freepik.com/free-vector/hand-drawn-colorful-space-background_23-2148821798.jpg", 
-                 use_container_width=True)
-        st.info("👆 Write your story and click 'Analyze My Story' to begin!")
-    
-    st.markdown('</div>', unsafe_allow_html=True)
+        return code
+    except Exception as e:
+        return f"# Error generating code\nprint('Could not generate code: {str(e)}')"
 
-# 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")
-    
-    # Show code explanation
-    st.markdown("### 🧠 AI-Powered Explanation:")
-    st.write(st.session_state.code_explanation)
-    
-    # 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')
+def create_matplotlib_animation(code):
+    """Create an animation using matplotlib"""
+    try:
+        # Create a namespace to execute the code
+        namespace = {}
+        exec(code, namespace)
         
-        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
+        # Get the figure from the executed code
+        fig = plt.gcf()
         
-        # Initialize Pygame
-        pygame.init()
+        # Create a BytesIO object to save the animation
+        buf = io.BytesIO()
+        fig.savefig(buf, format='png')
+        buf.seek(0)
+        image = Image.open(buf)
         
-        # 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            ')}
-    ```
-    """)
+        return image
+    except Exception as e:
+        st.error(f"Animation error: {str(e)}")
+        return None
 
-    
-    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
+def generate_story_image(story):
+    """Generate a story image using a free API"""
+    try:
+        # For Hugging Face deployment, we'll use placeholders
+        # In a real deployment, you could use Hugging Face's diffusion models
+        
+        # Create a simple image with text
+        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
+        ax.text(5, 8, '✨ Your Story ✨', fontsize=24, 
+                ha='center', color='purple', fontweight='bold')
+        
+        # Add story text (wrapped)
+        words = story.split()
+        lines = []
+        current_line = []
+        
+        for word in words:
+            if len(' '.join(current_line + [word])) < 60:
+                current_line.append(word)
+            else:
+                lines.append(' '.join(current_line))
+                current_line = [word]
+        
+        if current_line:
+            lines.append(' '.join(current_line))
+        
+        for i, line in enumerate(lines):
+            ax.text(5, 6.5 - i*0.7, line, fontsize=14, ha='center')
+        
+        # Add decoration
+        ax.text(2, 2, '🐰', fontsize=40, ha='center')
+        ax.text(8, 2, '🐉', fontsize=40, ha='center')
+        ax.text(5, 1, 'Created with StoryCoder', fontsize=12, 
+                ha='center', style='italic', color='gray')
+        
+        # Save to buffer
+        buf = io.BytesIO()
+        plt.savefig(buf, format='png', bbox_inches='tight', pad_inches=0.5)
+        buf.seek(0)
+        image = Image.open(buf)
+        plt.close()
+        
+        return image
+    except Exception as e:
+        st.error(f"Image generation error: {str(e)}")
+        return None
+
+def main():
+    """Main application function"""
+    st.title("🧙‍♂️ StoryCoder - Learn Python Through Stories!")
+    st.subheader("Turn your story into an animation and discover coding secrets!")
+    
+    # Initialize session state
+    if 'story' not in st.session_state:
+        st.session_state.story = ""
+    if 'concepts' not in st.session_state:
+        st.session_state.concepts = []
+    if 'animation_code' not in st.session_state:
+        st.session_state.animation_code = ""
+    if 'active_tab' not in st.session_state:
+        st.session_state.active_tab = "story"
+    if 'animation_image' not in st.session_state:
+        st.session_state.animation_image = None
+    
+    # Create tabs
+    tabs = st.empty()
+    tab_cols = st.columns(5)
+    with tab_cols[0]:
+        if st.button("📖 Create Story"):
+            st.session_state.active_tab = "story"
+    with tab_cols[1]:
+        if st.button("🎬 Animation"):
+            st.session_state.active_tab = "animation"
+    with tab_cols[2]:
+        if st.button("🔍 Concepts"):
+            st.session_state.active_tab = "concepts"
+    with tab_cols[3]:
+        if st.button("💻 Code"):
+            st.session_state.active_tab = "code"
+    with tab_cols[4]:
+        if st.button("🔄 Reset"):
+            st.session_state.story = ""
+            st.session_state.concepts = []
+            st.session_state.animation_code = ""
+            st.session_state.animation_image = None
+            st.session_state.active_tab = "story"
+    
+    # Story creation tab
+    if st.session_state.active_tab == "story":
+        with st.container():
+            st.header("📖 Create Your Story")
+            st.write("Write a short story (2-5 sentences) and I'll turn it into an animation!")
             
-            # Handle movement
-            # ... (movement code from step 3)
+            story = st.text_area(
+                "Your story:",
+                height=200,
+                placeholder="Once upon a time, a rabbit hopped 3 times to reach a carrot...",
+                value=st.session_state.story,
+                key="story_input"
+            )
             
-            # Draw everything
-            screen.fill(BACKGROUND)
-            draw_hero()
-            draw_story_elements()
+            if st.button("Create Animation!", use_container_width=True):
+                if len(story) < 10:
+                    st.error("Your story needs to be at least 10 characters long!")
+                else:
+                    st.session_state.story = story
+                    with st.spinner("🧠 Analyzing your story for coding concepts..."):
+                        st.session_state.concepts = analyze_story(story)
+                    
+                    with st.spinner("✨ Generating animation code..."):
+                        st.session_state.animation_code = generate_animation_code(
+                            story, st.session_state.concepts
+                        )
+                    
+                    with st.spinner("🎨 Creating your animation..."):
+                        st.session_state.animation_image = create_matplotlib_animation(
+                            st.session_state.animation_code
+                        )
+                    
+                    st.session_state.active_tab = "animation"
+                    st.experimental_rerun()
             
-            # Update the display
-            pygame.display.flip()
-            clock.tick(60)
+            # Show examples
+            st.subheader("✨ Story Examples")
+            col1, col2, col3 = st.columns(3)
+            with col1:
+                st.caption("Loop Example")
+                st.code('"A dragon breathes fire 5 times at the castle"', language="text")
+            with col2:
+                st.caption("Conditional Example")
+                st.code('"If it rains, the cat stays inside, else it goes out"', language="text")
+            with col3:
+                st.caption("Function Example")
+                st.code('"A wizard casts a spell to make flowers grow"', language="text")
+    
+    # Animation tab
+    elif st.session_state.active_tab == "animation":
+        st.header("🎬 Your Story Animation")
+        
+        if not st.session_state.animation_image:
+            st.warning("Please create a story first!")
+            st.session_state.active_tab = "story"
+            st.experimental_rerun()
+        
+        # Display animation
+        st.image(st.session_state.animation_image, use_column_width=True)
+        
+        st.success("✨ Animation created successfully!")
+        st.caption("This animation was generated with Python code based on your story!")
+        
+        if st.button("Reveal Coding Secrets!", use_container_width=True):
+            st.session_state.active_tab = "concepts"
+            st.experimental_rerun()
+    
+    # Concepts tab
+    elif st.session_state.active_tab == "concepts":
+        st.header("🔍 Coding Concepts in Your Story")
+        st.subheader("We secretly used these programming concepts:")
+        
+        if not st.session_state.concepts:
+            st.warning("No concepts detected in your story! Try adding words like '3 times', 'if', or 'make'.")
+        else:
+            for concept in st.session_state.concepts:
+                if concept in CONCEPTS:
+                    details = CONCEPTS[concept]
+                    st.markdown(f"""
+                    <div class="concept-card" style="border-left: 5px solid {details['color']};">
+                        <div style="display:flex; align-items:center; gap:15px;">
+                            <span style="font-size:36px;">{details['emoji']}</span>
+                            <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>
+                    </div>
+                    """, unsafe_allow_html=True)
+        
+        if st.button("See the Magic Code!", use_container_width=True):
+            st.session_state.active_tab = "code"
+            st.experimental_rerun()
+    
+    # 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:")
+        
+        if st.session_state.animation_code:
+            st.code(st.session_state.animation_code, language="python")
+            
+            # 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.write("You can run this code on your computer to see the animation!")
+        else:
+            st.warning("No code generated yet!")
         
-        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)
-
-# New level notification
-if 'new_level' in st.session_state and st.session_state.new_level:
-    st.balloons()
-    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")
+        if st.button("Create Another Story!", use_container_width=True):
+            st.session_state.active_tab = "story"
+            st.session_state.story = ""
+            st.experimental_rerun()
 
-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
-
-| For Kids 👧👦 | For Parents & Teachers 👪👩‍🏫 |
-|--------------|----------------------------|
-| ✨ Create your own animated stories | 🧠 Teaches computational thinking |
-| 🚀 See imagination come to life | 🔍 Develops problem-solving skills |
-| 🎮 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
-st.markdown("---")
-st.markdown("""
-<center>
-    <p style="color:white; font-size:1.1rem;">
-        ✨ Made with magic by CodeTales Team ✨<br>
-        Transforming stories into games since 2023
-    </p>
-</center>
-""", unsafe_allow_html=True)
+if __name__ == "__main__":
+    main()