Update app.py

app.py

@@ -2,13 +2,18 @@
 import streamlit as st
 import time
 import random
-from transformers import pipeline
-from PIL import Image, ImageDraw, ImageFont
-import numpy as np
+import json
 import textwrap
 import os
 import base64
 from io import BytesIO
+from PIL import Image, ImageDraw, ImageFont
+import numpy as np
+from gtts import gTTS
+from pygame import mixer
+import tempfile
+import requests
+from transformers import pipeline, set_seed
 
 # Set up the page
 st.set_page_config(
@@ -18,22 +23,26 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
+# Initialize pygame mixer
+mixer.init()
+
 # Custom CSS
 st.markdown("""
 <style>
-@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Press+Start+2P&display=swap');
             
 .stApp {
     background: linear-gradient(135deg, #6e8efb, #a777e3);
 }
             
 .header {
-    font-family: 'Comic Neue', cursive;
+    font-family: 'Press Start 2P', cursive;
     color: white;
     text-align: center;
-    font-size: 3.5rem;
+    font-size: 2.5rem;
     text-shadow: 3px 3px 0 #000;
     padding: 1rem;
+    letter-spacing: 2px;
 }
             
 .subheader {
@@ -50,6 +59,7 @@ st.markdown("""
     padding: 2rem;
     box-shadow: 0 8px 16px rgba(0,0,0,0.2);
     margin-bottom: 2rem;
+    border: 4px solid #ff6b6b;
 }
             
 .robot-speech {
@@ -60,6 +70,7 @@ st.markdown("""
     font-size: 1.2rem;
     position: relative;
     margin-top: 2rem;
+    border: 3px solid #2e7d32;
 }
             
 .robot-speech:after {
@@ -72,7 +83,7 @@ st.markdown("""
 }
             
 .generate-btn {
-    background: #ff5722 !important;
+    background: linear-gradient(135deg, #ff5722, #ff9800) !important;
     color: white !important;
     font-weight: bold !important;
     font-size: 1.2rem !important;
@@ -82,11 +93,14 @@ st.markdown("""
     box-shadow: 0 4px 8px rgba(0,0,0,0.3) !important;
     transition: all 0.3s !important;
     margin-top: 1rem;
+    font-family: 'Press Start 2P', cursive !important;
+    letter-spacing: 1px;
 }
             
 .generate-btn:hover {
     transform: scale(1.05) !important;
     box-shadow: 0 6px 12px rgba(0,0,0,0.4) !important;
+    background: linear-gradient(135deg, #ff7043, #ffa726) !important;
 }
             
 .code-block {
@@ -94,10 +108,11 @@ st.markdown("""
     color: #f8f8f2;
     padding: 1rem;
     border-radius: 10px;
-    font-family: monospace;
+    font-family: 'Courier New', monospace;
     font-size: 1.1rem;
     margin: 1rem 0;
     overflow-x: auto;
+    border-left: 4px solid #ff9800;
 }
 
 .animation-frame {
@@ -105,6 +120,60 @@ st.markdown("""
     border-radius: 10px;
     margin: 5px;
 }
+
+.achievement-badge {
+    background: #ffd54f;
+    color: #333;
+    border-radius: 50%;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    margin: 0 auto;
+}
+
+.character-option {
+    border: 3px solid transparent;
+    border-radius: 10px;
+    padding: 5px;
+    margin: 5px;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.character-option:hover {
+    transform: scale(1.05);
+}
+
+.character-option.selected {
+    border-color: #ff5722;
+}
+
+.tab-content {
+    padding: 1rem;
+    border: 2px solid #4caf50;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.8);
+    margin-top: 1rem;
+}
+
+.level-indicator {
+    background: #4caf50;
+    color: white;
+    border-radius: 20px;
+    padding: 0.5rem 1rem;
+    display: inline-block;
+    font-weight: bold;
+    margin-bottom: 1rem;
+}
+
+/* Progress bar styling */
+.stProgress > div > div > div {
+    background-color: #ff5722 !important;
+}
 </style>
 """, unsafe_allow_html=True)
 
@@ -122,10 +191,13 @@ def load_models():
         # 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
+        # Text-to-text generation for better explanations
+        explanation_generator = pipeline("text2text-generation", model="google/flan-t5-base")
+        
+        return story_to_code, sentiment_analyzer, ner_model, explanation_generator
     except Exception as e:
         st.error(f"Error loading models: {e}")
-        return None, None, None
+        return None, None, None, None
 
 # Image generation functions
 def create_storyboard_image(text, width=400, height=300):
@@ -157,24 +229,38 @@ def create_storyboard_image(text, width=400, height=300):
     
     return img
 
-def generate_sprite_animation(story, num_frames=4):
+def generate_sprite_animation(story, character="spaceship", theme="space", 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))
+        # Create base image with theme
+        if theme == "space":
+            bg_color = (0, 0, 30)
+            star_color = (255, 255, 255)
+        elif theme == "jungle":
+            bg_color = (0, 100, 0)
+            star_color = None  # No stars in jungle
+        elif theme == "medieval":
+            bg_color = (139, 69, 19)
+            star_color = None
+        else:
+            bg_color = (0, 0, 30)
+            star_color = (255, 255, 255)
+            
+        img = Image.new('RGB', (width, height), color=bg_color)
         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 stars for space theme
+        if star_color:
+            for _ in range(30):
+                x = random.randint(0, width)
+                y = random.randint(0, height)
+                draw.ellipse([x, y, x+2, y+2], fill=star_color)
         
         # Draw moving elements based on frame
-        if "spaceship" in story.lower():
+        if character == "spaceship":
             ship_x = 50 + i * 60
             ship_y = 80
             draw.polygon([(ship_x, ship_y), (ship_x+30, ship_y), 
@@ -186,44 +272,75 @@ def generate_sprite_animation(story, num_frames=4):
                     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():
+        elif character == "dragon":
+            dragon_x = 50 + i * 40
+            dragon_y = 100
+            # Draw dragon body
+            draw.ellipse([dragon_x, dragon_y, dragon_x+40, dragon_y+20], fill=(178, 34, 34))
+            # Draw dragon head
+            draw.ellipse([dragon_x+30, dragon_y-5, dragon_x+50, dragon_y+15], fill=(178, 34, 34))
+            # Draw wings
+            draw.ellipse([dragon_x+10, dragon_y-15, dragon_x+30, dragon_y], fill=(138, 43, 226))
+            
+            if "fire" in story.lower() and i > 0:
+                for j in range(5):
+                    flame_x = dragon_x + 50
+                    flame_y = dragon_y + 5 - 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))
+        
+        elif character == "knight":
+            knight_x = 50 + i * 40
+            knight_y = 120
+            # Draw knight body
+            draw.rectangle([knight_x, knight_y, knight_x+20, knight_y+40], fill=(70, 70, 70))
+            # Draw knight head
+            draw.ellipse([knight_x+5, knight_y-15, knight_x+15, knight_y-5], fill=(210, 180, 140))
+            # Draw sword
+            draw.rectangle([knight_x+15, knight_y+10, knight_x+25, knight_y+15], fill=(192, 192, 192))
+            draw.polygon([(knight_x+25, knight_y+12), (knight_x+35, knight_y+10), (knight_x+35, knight_y+15)], fill=(192, 192, 192))
+            
+            if "attack" in story.lower() and i % 2 == 1:
+                # Draw sword swing
+                draw.line([(knight_x+25, knight_y+12), (knight_x+45, knight_y-10)], fill=(255, 255, 0), width=2)
+        
+        # Draw enemies based on theme
+        if theme == "space" and "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
+        elif theme == "jungle" and "snake" in story.lower():
+            snake_x = 200
+            snake_y = 150 - i*5
+            for segment in range(5):
+                offset = segment * 5
+                draw.ellipse([snake_x+offset, snake_y+offset, snake_x+offset+15, snake_y+offset+15], fill=(0, 128, 0))
+        
+        elif theme == "medieval" and "dragon" in story.lower() and character != "dragon":
+            dragon_x = 220
+            dragon_y = 80
             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):
+def generate_code_explanation(story, explanation_generator):
     """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."
+        prompt = f"Explain to a child how this story would become code: '{story}'"
         
         # Generate text
-        result = story_to_code(
+        result = explanation_generator(
             prompt, 
-            max_length=150,
+            max_length=200,
             num_return_sequences=1,
-            temperature=0.7,
-            top_k=50
         )
         
         return result[0]['generated_text']
@@ -232,6 +349,34 @@ def generate_code_explanation(story, story_to_code):
         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!"""
 
+def text_to_speech(text, lang='en'):
+    """Convert text to speech using gTTS"""
+    try:
+        tts = gTTS(text=text, lang=lang, slow=False)
+        with tempfile.NamedTemporaryFile(delete=True, suffix='.mp3') as fp:
+            tts.save(fp.name)
+            return fp.name
+    except Exception as e:
+        st.error(f"Text-to-speech error: {e}")
+        return None
+
+# Achievement system
+ACHIEVEMENTS = {
+    "first_story": {"name": "Storyteller", "icon": "📖", "description": "Created your first story!"},
+    "code_master": {"name": "Code Master", "icon": "💻", "description": "Used 5 different coding concepts"},
+    "animator": {"name": "Animator", "icon": "🎬", "description": "Created 3 animations"},
+    "voice_artist": {"name": "Voice Artist", "icon": "🎤", "description": "Used text-to-speech feature"},
+    "character_designer": {"name": "Character Designer", "icon": "👾", "description": "Created a custom character"}
+}
+
+def unlock_achievement(achievement_id):
+    """Unlock an achievement for the user"""
+    if achievement_id not in st.session_state.achievements_unlocked:
+        st.session_state.achievements_unlocked.append(achievement_id)
+        st.session_state.new_achievement = achievement_id
+        return True
+    return False
+
 # 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)
@@ -251,10 +396,13 @@ with st.expander("✨ How It Works (Like Baking a Cake) 🎂"):
     
     **4. Robot Teacher Explains 🤖**  
     Tavus shows: *"See? 'spaceship.move_right()' makes it fly! That's coding!"*
+    
+    **5. Level Up! 🏆**  
+    Earn achievements as you learn and create!
     """)
 
 # Load models
-story_to_code, sentiment_analyzer, ner_model = load_models()
+story_to_code, sentiment_analyzer, ner_model, explanation_generator = load_models()
 
 # Initialize session state
 if 'animation_generated' not in st.session_state:
@@ -265,19 +413,103 @@ 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 = ""
+if 'selected_character' not in st.session_state:
+    st.session_state.selected_character = "spaceship"
+if 'selected_theme' not in st.session_state:
+    st.session_state.selected_theme = "space"
+if 'sound_enabled' not in st.session_state:
+    st.session_state.sound_enabled = True
+if 'achievements_unlocked' not in st.session_state:
+    st.session_state.achievements_unlocked = []
+if 'new_achievement' not in st.session_state:
+    st.session_state.new_achievement = None
+if 'story_count' not in st.session_state:
+    st.session_state.story_count = 0
+if 'level' not in st.session_state:
+    st.session_state.level = 1
+if 'xp' not in st.session_state:
+    st.session_state.xp = 0
+if 'voice_enabled' not in st.session_state:
+    st.session_state.voice_enabled = False
+if 'custom_character' not in st.session_state:
+    st.session_state.custom_character = None
+
+# Story templates
+story_templates = {
+    "None": "",
+    "Space Adventure": "A brave spaceship zooms through space, shooting lasers at alien spaceships!",
+    "Dragon Quest": "A knight fights a fire-breathing dragon to save the princess in the castle.",
+    "Jungle Explorer": "An explorer runs through the jungle, jumping over snakes and swinging on vines."
+}
 
 # Main content
+st.markdown(f'<div class="level-indicator">Level {st.session_state.level} ✨ XP: {st.session_state.xp}/100</div>', unsafe_allow_html=True)
+progress = st.progress(st.session_state.xp / 100)
+
 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 template selector
+    selected_template = st.selectbox(
+        "Or choose a story template to start with:",
+        list(story_templates.keys()),
+        index=0
+    )
+    
     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
+        value=story_templates[selected_template] if selected_template != "None" else st.session_state.story_text
+    )
+    
+    # Character selection
+    st.markdown("### 🧙 Choose Your Hero")
+    char_cols = st.columns(3)
+    characters = {
+        "spaceship": "🚀 Spaceship",
+        "dragon": "🐉 Dragon",
+        "knight": "🛡️ Knight"
+    }
+    
+    for i, (char_key, char_label) in enumerate(characters.items()):
+        with char_cols[i]:
+            if st.button(
+                char_label,
+                key=f"char_{char_key}",
+                use_container_width=True,
+                type="primary" if st.session_state.selected_character == char_key else "secondary"
+            ):
+                st.session_state.selected_character = char_key
+    
+    # Theme selection
+    st.markdown("### 🎨 Choose Your World")
+    theme_cols = st.columns(3)
+    themes = {
+        "space": "🌌 Space",
+        "jungle": "🌿 Jungle",
+        "medieval": "🏰 Medieval"
+    }
+    
+    for i, (theme_key, theme_label) in enumerate(themes.items()):
+        with theme_cols[i]:
+            if st.button(
+                theme_label,
+                key=f"theme_{theme_key}",
+                use_container_width=True,
+                type="primary" if st.session_state.selected_theme == theme_key else "secondary"
+            ):
+                st.session_state.selected_theme = theme_key
+    
+    # Voice options
+    st.session_state.voice_enabled = st.toggle(
+        "🗣️ Enable Tavus Voice", 
+        value=st.session_state.voice_enabled,
+        help="Hear Tavus explain coding concepts with text-to-speech"
     )
     
     # Generate button with animation
@@ -288,28 +520,41 @@ with col1:
             
             with st.spinner("🧙‍♂️ Cooking your story in the magic oven..."):
                 # Generate animation frames
-                st.session_state.animation_frames = generate_sprite_animation(story_text)
+                st.session_state.animation_frames = generate_sprite_animation(
+                    story_text, 
+                    character=st.session_state.selected_character,
+                    theme=st.session_state.selected_theme
+                )
                 
                 # Generate code explanation
-                st.session_state.code_explanation = generate_code_explanation(story_text, story_to_code)
+                st.session_state.code_explanation = generate_code_explanation(story_text, explanation_generator)
                 
-                # 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!"
+                # Update user progress
+                st.session_state.story_count += 1
+                st.session_state.xp += 15
+                
+                # Check for level up
+                if st.session_state.xp >= 100:
+                    st.session_state.level += 1
+                    st.session_state.xp = st.session_state.xp - 100
+                    st.session_state.new_level = True
+                
+                # Unlock achievements
+                if st.session_state.story_count == 1:
+                    unlock_achievement("first_story")
+                
+                # Generate speech if enabled
+                if st.session_state.voice_enabled:
+                    speech_file = text_to_speech(st.session_state.code_explanation)
+                    if speech_file:
+                        st.session_state.speech_file = speech_file
+                        unlock_achievement("voice_artist")
                 
-                # 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!"
+                # Simulate sound effect
+                if st.session_state.sound_enabled:
+                    st.session_state.sound_message = "🔊 Sound effects added: Laser blasts, explosions, and more!"
                 else:
-                    st.session_state.characters = "Your heroes are preparing for adventure!"
+                    st.session_state.sound_message = ""
         else:
             st.warning("Please enter a story first!")
     st.markdown('</div>', unsafe_allow_html=True)
@@ -345,10 +590,21 @@ with col2:
             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}")
+        # Display sound message
+        if st.session_state.sound_enabled and 'sound_message' in st.session_state:
+            st.info(st.session_state.sound_message)
+        
+        # Display character and theme info
+        st.success(f"✨ Your {characters[st.session_state.selected_character]} in the {themes[st.session_state.selected_theme]} world!")
+        
+        # Play voice explanation
+        if st.session_state.voice_enabled and 'speech_file' in st.session_state:
+            if st.button("🔊 Play Tavus Explanation", use_container_width=True):
+                try:
+                    mixer.music.load(st.session_state.speech_file)
+                    mixer.music.play()
+                except:
+                    st.warning("Couldn't play audio. Try enabling sound in your browser.")
         
     elif st.session_state.animation_generated:
         st.warning("Couldn't generate animation. Try a different story!")
@@ -451,6 +707,64 @@ if st.session_state.animation_generated and st.session_state.story_text:
     
     st.markdown("</div>", unsafe_allow_html=True)
 
+# Achievements section
+if st.session_state.achievements_unlocked:
+    st.markdown("### 🏆 Your Achievements")
+    achievement_cols = st.columns(5)
+    for i, ach_id in enumerate(st.session_state.achievements_unlocked):
+        with achievement_cols[i % 5]:
+            ach = ACHIEVEMENTS[ach_id]
+            st.markdown(f'<div class="achievement-badge">{ach["icon"]}</div>', unsafe_allow_html=True)
+            st.markdown(f"**{ach['name']}**")
+            st.caption(ach['description'])
+
+# New achievement notification
+if 'new_achievement' in st.session_state and st.session_state.new_achievement:
+    ach = ACHIEVEMENTS[st.session_state.new_achievement]
+    st.success(f"🎉 Achievement Unlocked: {ach['name']} - {ach['description']}")
+    st.session_state.new_achievement = None
+
+# New level notification
+if 'new_level' in st.session_state and st.session_state.new_level:
+    st.balloons()
+    st.success(f"🌟 Level Up! You're now Level {st.session_state.level}!")
+    st.session_state.new_level = False
+
+# Coding challenges section
+st.markdown("### 💻 Coding Challenges")
+with st.expander("Complete challenges to earn XP!"):
+    challenge_cols = st.columns(3)
+    
+    with challenge_cols[0]:
+        st.markdown("#### Challenge 1: The Mover")
+        st.code("""
+# Make the character move to the right
+character.move_right(10)
+        """)
+        if st.button("Run Challenge 1", key="challenge1"):
+            st.session_state.xp += 5
+            st.success("+5 XP! Character moved right!")
+    
+    with challenge_cols[1]:
+        st.markdown("#### Challenge 2: The Jumper")
+        st.code("""
+# Make the character jump
+character.jump(20)
+        """)
+        if st.button("Run Challenge 2", key="challenge2"):
+            st.session_state.xp += 5
+            st.success("+5 XP! Character jumped!")
+    
+    with challenge_cols[2]:
+        st.markdown("#### Challenge 3: The Shooter")
+        st.code("""
+# Make the character shoot a laser
+laser = character.shoot()
+        """)
+        if st.button("Run Challenge 3", key="challenge3"):
+            st.session_state.xp += 5
+            st.success("+5 XP! Laser fired!")
+
 # Benefits section
 st.markdown("""
 ## ❤ Why Everyone Will Love CodeTales
@@ -462,6 +776,8 @@ st.markdown("""
 | 🎮 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 |
+| 🏆 Achievement system motivates learning | 📈 Progress tracking shows growth |
+| 🗣️ Voice explanations for accessibility | 🎨 Creative expression through stories |
 """)
 
 # Footer