Update app.py

app.py

@@ -1,103 +1,476 @@
-import os
+# app.py
 import streamlit as st
-from dotenv import load_dotenv
-from openai import OpenAI
-import ast
-import subprocess
-import tempfile
-
-load_dotenv()
-
-class StoryToCodeConverter:
-    def __init__(self):
-        api_key = os.getenv("NOVITA_API_KEY")
-        if not api_key:
-            raise ValueError("NOVITA_API_KEY not found in environment")
-        self.client = OpenAI(
-            api_key=api_key,
-            base_url="https://api.novita.ai/v3/openai"
-        )
+import time
+import random
+from transformers import pipeline
+from PIL import Image, ImageDraw, ImageFont
+import numpy as np
+import textwrap
+import os
+import base64
+from io import BytesIO
+
+# Set up the page
+st.set_page_config(
+    page_title="CodeTales ✨",
+    page_icon="🚀",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# Custom CSS
+st.markdown("""
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+            
+.stApp {
+    background: linear-gradient(135deg, #6e8efb, #a777e3);
+}
+            
+.header {
+    font-family: 'Comic Neue', cursive;
+    color: white;
+    text-align: center;
+    font-size: 3.5rem;
+    text-shadow: 3px 3px 0 #000;
+    padding: 1rem;
+}
+            
+.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;
+}
+            
+.robot-speech {
+    background-color: #4caf50;
+    color: white;
+    border-radius: 20px;
+    padding: 1.5rem;
+    font-size: 1.2rem;
+    position: relative;
+    margin-top: 2rem;
+}
+            
+.robot-speech:after {
+    content: '';
+    position: absolute;
+    top: -20px;
+    left: 50px;
+    border: 10px solid transparent;
+    border-bottom-color: #4caf50;
+}
+            
+.generate-btn {
+    background: #ff5722 !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;
+}
+            
+.generate-btn:hover {
+    transform: scale(1.05) !important;
+    box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important;
+}
+            
+.code-block {
+    background: #2d2d2d;
+    color: #f8f8f2;
+    padding: 1rem;
+    border-radius: 10px;
+    font-family: monospace;
+    font-size: 1.1rem;
+    margin: 1rem 0;
+    overflow-x: auto;
+}
+
+.animation-frame {
+    border: 3px solid #ffeb3b;
+    border-radius: 10px;
+    margin: 5px;
+}
+</style>
+""", unsafe_allow_html=True)
 
-    def generate_code(self, story: str) -> str:
-        prompt = f"""
-Convert this children's story into Python animation code using turtle graphics.
-Include comments that explain loops, movement, colors—easy for kids.
-
-Story:
-\"\"\"{story}\"\"\"
-
-Wrap the code in triple backticks like ```python ... ```
-"""
-        response = self.client.chat.completions.create(
-            model="meta-llama/llama-3.1-8b-instruct",
-            messages=[
-                {"role": "system", "content": "You are a friendly teacher and coder for kids."},
-                {"role": "user", "content": prompt}
-            ],
-            max_tokens=512,
+# Initialize AI models
+@st.cache_resource
+def load_models():
+    """Load open-source AI models"""
+    try:
+        # Text generation model for code explanations
+        story_to_code = pipeline("text-generation", model="gpt2", max_length=100)
+        
+        # Sentiment analysis for story understanding
+        sentiment_analyzer = pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")
+        
+        # Named entity recognition for identifying objects
+        ner_model = pipeline("ner", model="dbmdz/bert-large-cased-finetuned-conll03-english")
+        
+        return story_to_code, sentiment_analyzer, ner_model
+    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)
+    
+    # Draw title
+    draw.text((10, 10), "Your Story Comes to Life!", fill=(255, 215, 0), font=font)
+    
+    # Draw text box
+    draw.rectangle([10, 40, width-10, height-40], fill=(240, 248, 255), outline=(255, 215, 0), width=2)
+    
+    # Wrap text
+    wrapped_text = textwrap.fill(text, width=40)
+    draw.text((20, 50), wrapped_text, fill=(25, 25, 112), font=font)
+    
+    # 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)
+    
+    return img
+
+def generate_sprite_animation(story, num_frames=4):
+    """Generate a sprite-based animation from story"""
+    frames = []
+    width, height = 300, 200
+    
+    for i in range(num_frames):
+        # Create base image
+        img = Image.new('RGB', (width, height), color=(0, 0, 30))
+        draw = ImageDraw.Draw(img)
+        
+        # Draw stars
+        for _ in range(30):
+            x = random.randint(0, width)
+            y = random.randint(0, height)
+            draw.ellipse([x, y, x+2, y+2], fill=(255, 255, 255))
+        
+        # Draw moving elements based on frame
+        if "spaceship" in story.lower():
+            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))
+            
+            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)
+        
+        if "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))
+        
+        if "dragon" in story.lower():
+            dragon_x = 150 + i*20
+            dragon_y = 150
+            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)
+            
+            if "fire" in story.lower() and i > 0:
+                for j in range(5):
+                    flame_x = dragon_x + 60
+                    flame_y = dragon_y - j*5
+                    flame_size = random.randint(5, 15)
+                    draw.ellipse([flame_x, flame_y, flame_x+flame_size, flame_y+flame_size], 
+                                fill=(255, random.randint(100, 200), 0))
+        
+        frames.append(img)
+    
+    return frames
+
+def generate_code_explanation(story, story_to_code):
+    """Generate code explanation using open-source model"""
+    try:
+        # Create a prompt for the model
+        prompt = f"Explain how this story would be translated to code: '{story}'. Show a code snippet and explanation."
+        
+        # Generate text
+        result = story_to_code(
+            prompt, 
+            max_length=150,
+            num_return_sequences=1,
+            temperature=0.7,
+            top_k=50
         )
-        return self._extract_code(response.choices[0].message.content)
-
-    def _extract_code(self, content: str) -> str:
-        if "```python" in content:
-            return content.split("```python")[1].split("```")[0]
-        return content
-
-
-class CodeExecutor:
-    def execute_safely(self, code: str) -> bool:
-        try:
-            ast.parse(code)
-            with tempfile.NamedTemporaryFile(delete=False, suffix=".py") as tmp:
-                tmp.write(code.encode("utf-8"))
-                path = tmp.name
-            subprocess.Popen(["python", path])
-            return True
-        except Exception as e:
-            st.error(f"Robot Chef burned the cake: {e}")
-            return False
-
-
-st.set_page_config(page_title="CodeTales", page_icon="✨")
-with st.sidebar:
-    st.header("🍰 How It Works")
+        
+        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!"""
+
+# 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 open-source AI magic!</div>', unsafe_allow_html=True)
+
+# How it works section
+with st.expander("✨ How It Works (Like Baking a Cake) 🎂"):
     st.markdown("""
-1. 📝 Kids write a story  
-2. 🔮 Novita AI turns it into Python‑turtle code  
-3. 🎮 Animation plays  
-4. 🤖 Robot Teacher explains concepts  
-""")
+    **1. Kids Write a Story (The Recipe)**  
+    Example: *"The spaceship zooms past aliens and shoots lasers!"*
+    
+    **2. AI is the Magic Oven 🔮**  
+    We turn words into code using open-source AI models
+    
+    **3. Animation Pops Out (The Cake!) 🎮**  
+    See your story come to life with custom animations!
+    
+    **4. Robot Teacher Explains 🤖**  
+    Tavus shows: *"See? 'spaceship.move_right()' makes it fly! That's coding!"*
+    """)
+
+# Load models
+story_to_code, sentiment_analyzer, ner_model = 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 = ""
+
+# Main content
+col1, col2 = st.columns([1, 1])
+
+with col1:
+    st.markdown('<div class="story-box">', unsafe_allow_html=True)
+    st.markdown("### 📖 Write Your Story Here:")
+    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
+    )
+    
+    # Generate button with animation
+    if st.button("✨ Generate Animation!", use_container_width=True, key="generate", type="primary"):
+        if story_text.strip():
+            st.session_state.story_text = story_text
+            st.session_state.animation_generated = True
+            
+            with st.spinner("🧙‍♂️ Cooking your story in the magic oven..."):
+                # Generate animation frames
+                st.session_state.animation_frames = generate_sprite_animation(story_text)
+                
+                # Generate code explanation
+                st.session_state.code_explanation = generate_code_explanation(story_text, story_to_code)
+                
+                # Analyze story sentiment (just for fun)
+                if sentiment_analyzer:
+                    sentiment = sentiment_analyzer(story_text[:512])[0]
+                    st.session_state.sentiment = f"Your story feels {sentiment['label'].lower()}! (Confidence: {sentiment['score']:.2f})"
+                else:
+                    st.session_state.sentiment = "Your story is full of adventure!"
+                
+                # Identify story characters
+                if ner_model and len(story_text) > 10:
+                    entities = ner_model(story_text[:256])
+                    characters = list(set([ent['word'] for ent in entities if ent['entity'] in ['B-PER', 'I-PER']]))
+                    if characters:
+                        st.session_state.characters = f"Main characters: {', '.join(characters)}"
+                    else:
+                        st.session_state.characters = "Exciting characters are ready for action!"
+                else:
+                    st.session_state.characters = "Your heroes are preparing for adventure!"
+        else:
+            st.warning("Please enter a story first!")
+    st.markdown('</div>', unsafe_allow_html=True)
 
-st.title("✨ CodeTales: Storytime + Coding Magic")
-story = st.text_area("Write your story here:", height=200,
-                     placeholder="A turtle draws a rainbow circle...")
+with col2:
+    st.markdown('<div class="story-box">', unsafe_allow_html=True)
+    st.markdown("### 🎮 Your Game Animation")
+    
+    if st.session_state.animation_generated and st.session_state.animation_frames:
+        # 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_column_width=True)
+        
+        # Create an animated 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
+        )
+        gif_data = gif_buffer.getvalue()
+        st.download_button(
+            label="⬇️ Download Animation",
+            data=gif_data,
+            file_name="your_story.gif",
+            mime="image/gif",
+            use_container_width=True
+        )
+        
+        # Display story analysis
+        st.success("✨ Animation created!")
+        st.info(f"🎭 {st.session_state.characters}")
+        st.info(f"😊 {st.session_state.sentiment}")
+        
+    elif st.session_state.animation_generated:
+        st.warning("Couldn't generate animation. Try a different story!")
+        st.image("https://img.freepik.com/free-vector/hand-drawn-colorful-space-background_23-2148821798.jpg", 
+                 use_column_width=True)
+    elif story_text:
+        # Show storyboard preview
+        preview_img = create_storyboard_image(story_text)
+        st.image(preview_img, caption="Your Story Preview", use_column_width=True)
+        st.info("👆 Click Generate to bring your story to life!")
+    else:
+        st.image("https://img.freepik.com/free-vector/hand-drawn-colorful-space-background_23-2148821798.jpg", 
+                 use_column_width=True)
+        st.info("👆 Write your story and click Generate to see the magic!")
+    
+    st.markdown('</div>', unsafe_allow_html=True)
 
-if st.button("✨ Bake My Story Cake!"):
-    if not story.strip():
-        st.warning("Please enter a story!")
+# Tavus explanation 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("### 🤖 Tavus the Robot Teacher says:")
+    
+    # Extract action words from story
+    action_words = ["zoom", "shoot", "fly", "move", "jump", "run", "attack", "laser", "alien", "spaceship", 
+                   "dragon", "fire", "hero", "sword", "castle", "run", "escape", "fight", "win"]
+    found_actions = [word for word in action_words if word in st.session_state.story_text.lower()]
+    
+    if found_actions:
+        # Create explanation based on found words
+        explanations = []
+        code_snippets = []
+        
+        for action in found_actions[:3]:  # Limit to 3 explanations
+            if action == "zoom":
+                explanations.append("makes your spaceship move super fast!")
+                code_snippets.append("spaceship.accelerate(speed=10)")
+            elif action == "shoot":
+                explanations.append("creates laser beams to defeat enemies!")
+                code_snippets.append("laser = spaceship.fire_weapon()")
+            elif action == "fly":
+                explanations.append("keeps your character moving through the air!")
+                code_snippets.append("character.apply_gravity(False)")
+            elif action == "move":
+                explanations.append("changes position on the screen!")
+                code_snippets.append("player.move(direction='right')")
+            elif action == "jump":
+                explanations.append("makes your character leap upwards!")
+                code_snippets.append("hero.jump(height=100)")
+            elif action == "run":
+                explanations.append("makes your character move faster!")
+                code_snippets.append("player.speed = player.speed * 2")
+            elif action == "attack":
+                explanations.append("lets your hero fight the bad guys!")
+                code_snippets.append("sword.swing(damage=15)")
+            elif action == "laser":
+                explanations.append("creates powerful energy beams!")
+                code_snippets.append("weapon = Laser(color='red', damage=20)")
+            elif action == "alien":
+                explanations.append("adds enemies to your game!")
+                code_snippets.append("enemy = Alien(position=(100, 200))")
+            elif action == "spaceship":
+                explanations.append("creates your main character!")
+                code_snippets.append("player = Spaceship(image='spaceship.png')")
+            elif action == "dragon":
+                explanations.append("adds a fire-breathing challenge!")
+                code_snippets.append("boss = Dragon(health=100, damage=25)")
+            elif action == "fire":
+                explanations.append("creates dangerous fire effects!")
+                code_snippets.append("flame = FireEffect(position, size=30)")
+            elif action == "hero":
+                explanations.append("creates the main player character!")
+                code_snippets.append("player = Hero(name='Your Hero')")
+            elif action == "castle":
+                explanations.append("adds a majestic building to your world!")
+                code_snippets.append("castle = Building(type='castle', position=(300, 150))")
+            elif action == "escape":
+                explanations.append("creates exciting chase sequences!")
+                code_snippets.append("player.start_escape_sequence(speed=15)")
+            elif action == "fight":
+                explanations.append("initiates battle mechanics!")
+                code_snippets.append("initiate_combat(enemy)")
+            elif action == "win":
+                explanations.append("creates victory conditions!")
+                code_snippets.append("if player.score > 100: show_victory_screen()")
+        
+        st.markdown("See how your story became real code? Here's what happened:")
+        
+        for i, (action, explanation, snippet) in enumerate(zip(found_actions, explanations, code_snippets)):
+            st.markdown(f"**{i+1}. When you said '{action}'**:")
+            st.markdown(f'<div class="code-block">{snippet}</div>', unsafe_allow_html=True)
+            st.markdown(f"This code {explanation}")
+        
+        st.markdown("That's the magic of coding - turning words into actions!")
     else:
-        with st.spinner("Baking your story code... 🍰"):
-            try:
-                converter = StoryToCodeConverter()
-                code = converter.generate_code(story)
-            except Exception as e:
-                st.error(f"AI oven broke down! {e}")
-                st.stop()
-
-            st.subheader("📜 Your Code Recipe")
-            st.code(code, language="python")
-
-            executor = CodeExecutor()
-            if executor.execute_safely(code):
-                st.balloons()
-                with st.expander("🤖 Robot Teacher Says:"):
-                    st.markdown("""
-- `turtle.forward(100)` – Moves forward  
-- `turtle.color("red")` – Changes color  
-- `for` loops – Repeat patterns  
+        st.markdown("I see you created an awesome story! Every word you write can become game code. Try adding action words like 'jump', 'run', or 'shoot' next time!")
+    
+    # Show AI-generated explanation
+    st.markdown("### 🧠 AI-Powered Explanation:")
+    st.write(st.session_state.code_explanation)
+    
+    st.markdown("</div>", unsafe_allow_html=True)
+
+# Benefits section
+st.markdown("""
+## ❤ Why Everyone Will Love CodeTales
+
+| For Kids 👧👦 | For Parents & Teachers 👪👩‍🏫 |
+|--------------|----------------------------|
+| ✨ Feels like playing, not learning | 🧠 Secretly teaches programming concepts |
+| 🚀 Brings imagination to life | 🔍 Develops logical thinking skills |
+| 🎮 Creates personal video games | ➗ Reinforces math fundamentals |
+| 😄 Makes learning fun and exciting | 🧩 Encourages problem-solving abilities |
+| 🌟 100% private with no API keys | 💰 Completely free and open-source |
 """)
-                st.success("🎉 Animation ready!")
-            else:
-                st.error("Oops, something went wrong.")
 
-st.caption("Made with ❤️ for young coders | Powered by Novita AI + Python Turtle")
+# Footer
+st.markdown("---")
+st.markdown("""
+<center>
+    <p style="color:white; font-size:1.1rem;">
+        ✨ Made with open-source magic by CodeTales Team ✨<br>
+        Transforming stories into games since 2023 | No API Keys Required!
+    </p>
+</center>
+""", unsafe_allow_html=True)