Spaces:
Running
Running
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) |