File size: 7,702 Bytes
bfd0106
 
a9f0287
 
 
 
bfd0106
a9f0287
 
bfd0106
a9f0287
 
 
 
 
 
 
bfd0106
a9f0287
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bfd0106
a9f0287
 
 
 
bfd0106
a9f0287
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bfd0106
a9f0287
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bfd0106
a9f0287
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bfd0106
a9f0287
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
# 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)