# app.py
import streamlit as st
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("""
""", unsafe_allow_html=True)
# 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 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('
', unsafe_allow_html=True)
st.markdown('', unsafe_allow_html=True)
st.markdown('Turn wild stories into playable games with open-source AI magic!
', 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 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('', 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('
', unsafe_allow_html=True)
with col2:
st.markdown('', 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_container_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_container_width=True)
elif story_text:
# Show storyboard preview
preview_img = create_storyboard_image(story_text)
st.image(preview_img, caption="Your Story Preview", use_container_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_container_width=True)
st.info("👆 Write your story and click Generate to see the magic!")
st.markdown('
', unsafe_allow_html=True)
# Tavus explanation section
if st.session_state.animation_generated and st.session_state.story_text:
st.markdown('', 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'
{snippet}
', unsafe_allow_html=True)
st.markdown(f"This code {explanation}")
st.markdown("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!")
# Show AI-generated explanation
st.markdown("### 🧠 AI-Powered Explanation:")
st.write(st.session_state.code_explanation)
st.markdown("
", 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 |
""")
# Footer
st.markdown("---")
st.markdown("""
✨ Made with open-source magic by CodeTales Team ✨
Transforming stories into games since 2023 | No API Keys Required!
""", unsafe_allow_html=True)