app.py

# app.py
import streamlit as st
import requests
import time
import os
from dotenv import load_dotenv

# Load environment variables
load_dotenv()

# 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;
}
</style>
""", unsafe_allow_html=True)

# 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
with st.expander("✨ How It Works (Like Baking a Cake) 🎂"):
    st.markdown("""
    **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 (like translating English to Computer)
    
    **3. Animation Pops Out (The Cake!) 🎮**  
    See your spaceship flying and shooting instantly!
    
    **4. Robot Teacher Explains 🤖**  
    Tavus shows: *"See? 'spaceship.move_right()' makes it fly! That's coding!"*
    """)

# 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"
    )
    
    # Generate button with animation
    if st.button("✨ Generate Animation!", use_container_width=True, key="generate", type="primary"):
        st.session_state.generate_clicked = True
    st.markdown('</div>', unsafe_allow_html=True)

with col2:
    st.markdown('<div class="story-box">', unsafe_allow_html=True)
    st.markdown("### 🎮 Your Game Animation")
    
    if 'generate_clicked' in st.session_state and story_text:
        with st.spinner("🧙‍♂️ Cooking your story in the magic oven..."):
            # Simulate processing time
            time.sleep(3)
            
            # Generate animation (would use actual API call in production)
            st.session_state.animation_generated = True
            st.session_state.story_text = story_text
            
            # Display animation placeholder
            st.video("https://cdn.pixabay.com/video/2023/01/20/155564-810349295_large.mp4")
            
            st.success("🎉 Your animation is ready! Tavus will explain the magic now!")
    elif 'animation_generated' in st.session_state:
        st.video("https://cdn.pixabay.com/video/2023/01/20/155564-810349295_large.mp4")
    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)

# Tavus explanation section
if 'animation_generated' in st.session_state and 'story_text' in st.session_state:
    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"]
    found_actions = [word for word in action_words if word in st.session_state.story_text.lower()]
    
    if found_actions:
        action = found_actions[0]
        explanation = {
            "zoom": "makes your spaceship move super fast!",
            "shoot": "creates laser beams to defeat enemies!",
            "fly": "keeps your character moving through the air!",
            "move": "changes position on the screen!",
            "jump": "makes your character leap upwards!",
            "run": "makes your character move faster!",
            "attack": "lets your hero fight the bad guys!"
        }
        
        code_snippet = {
            "zoom": "spaceship.accelerate(speed=10)",
            "shoot": "laser = spaceship.fire_weapon()",
            "fly": "character.apply_gravity(False)",
            "move": "player.move(direction='right')",
            "jump": "hero.jump(height=100)",
            "run": "player.speed = player.speed * 2",
            "attack": "sword.swing(damage=15)"
        }
        
        st.markdown(f"See how your story became real code? When you said **'{action}'**, we used:")
        st.markdown(f'<div class="code-block">{code_snippet[action]}</div>', unsafe_allow_html=True)
        st.markdown(f"This code {explanation[action]} That's the magic of coding - turning words into actions!")
    else:
        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!")
    
    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 |
""")

# 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)