Update app.py

app.py

@@ -1,12 +1,15 @@
 import streamlit as st
+import streamlit.components.v1 as components
 import torch
-import logging
 import numpy as np
+import av
+import logging
+import os
 from transformers import AutoModelForCausalLM, AutoTokenizer
 import whisper
 from TTS.api import TTS
 from streamlit_webrtc import webrtc_streamer, WebRtcMode, AudioProcessorBase
-import av
+
 
 # Configure logging
 logging.basicConfig(
@@ -23,186 +26,315 @@ logger = logging.getLogger(__name__)
 AVATAR_PERSONAS = {
     "Rat": {
         "name": "Puzzle Master Rat",
-        "description": "Clever linguistic detective specializing in language mysteries",
-        "teaching_style": "Analytical, puzzle-driven language learning",
-        "learning_approach": """
-        Transform language learning into an intellectual adventure.
-        Break complex linguistic concepts into engaging, logical puzzles.
-        Encourage critical thinking and systematic problem-solving.
-        """,
+        "description": "I love solving word puzzles and making learning fun!",
+        "teaching_style": "Learning is like solving a fun game",
+        "learning_approach": "I break big words into small, easy pieces",
         "motivation_techniques": [
-            "Convert grammar rules into exciting challenges",
-            "Reward innovative language problem-solving",
-            "Create intricate linguistic treasure hunts"
-        ]
+            "Turn hard words into exciting challenges",
+            "Make learning feel like play"
+        ],
+        "voice_sample": "Let's solve this language puzzle together!",
+        "image": "rat.png"
     },
     "Ox": {
         "name": "Professor Steady Ox",
-        "description": "Methodical language foundation builder",
-        "teaching_style": "Structured, step-by-step comprehensive learning",
-        "learning_approach": """
-        Construct language skills like building a robust architectural design.
-        Provide clear, systematic explanations of grammatical structures.
-        Emphasize consistent, patient progression in linguistic development.
-        """,
+        "description": "I help you learn English step by step, slowly and carefully",
+        "teaching_style": "Learning is like building a big tower, one block at a time",
+        "learning_approach": "We go slow and make sure you understand everything",
         "motivation_techniques": [
-            "Break down complex language concepts into manageable segments",
-            "Celebrate incremental learning achievements",
-            "Provide consistent, encouraging feedback"
-        ]
+            "Break big lessons into small, easy parts",
+            "Celebrate every little success"
+        ],
+        "voice_sample": "We will build your English skills step by step, carefully and steadily.",
+        "image": "ox.png"
     },
     "Tiger": {
         "name": "Adventure Coach Tiger",
-        "description": "Dynamic linguistic expedition leader",
-        "teaching_style": "High-energy, challenge-driven language exploration",
-        "learning_approach": """
-        Transform language learning into an exhilarating global adventure.
-        Create competitive and motivational linguistic environments.
-        Encourage bold communication attempts and celebrate linguistic courage.
-        """,
+        "description": "Learning English is an exciting adventure!",
+        "teaching_style": "Every English lesson is a fun mission",
+        "learning_approach": "We learn by trying new things and having fun",
         "motivation_techniques": [
-            "Design exciting language learning challenges",
-            "Turn mistakes into heroic growth opportunities",
-            "Use passionate, motivational communication"
-        ]
+            "Make learning feel like a game",
+            "Cheer you on with lots of energy"
+        ],
+        "voice_sample": "Are you ready for an exciting English language adventure?",
+        "image": "tiger.png"
     },
     "Rabbit": {
         "name": "Storyteller Rabbit",
-        "description": "Gentle narrative-based language nurturer",
-        "teaching_style": "Empathetic, story-driven emotional learning",
-        "learning_approach": """
-        Teach language through compassionate, engaging storytelling.
-        Connect emotional experiences with linguistic development.
-        Create a safe, nurturing language learning sanctuary.
-        """,
+        "description": "I love telling stories that help you learn English",
+        "teaching_style": "Learning through fun and friendly stories",
+        "learning_approach": "Words become magic when they tell a story",
         "motivation_techniques": [
-            "Use storytelling to illustrate complex language concepts",
-            "Connect vocabulary to emotional narratives",
-            "Provide gentle, supportive linguistic guidance"
-        ]
+            "Use funny and interesting stories",
+            "Help you imagine new words"
+        ],
+        "voice_sample": "Let me tell you a story that will help you learn English.",
+        "image": "rabbit.png"
     },
     "Dragon": {
-        "name": "Scholar Dragon",
-        "description": "Intellectual linguistic mentor",
-        "teaching_style": "Sophisticated, precision-focused academic learning",
-        "learning_approach": """
-        Develop a scholarly, analytical approach to language acquisition.
-        Explore linguistic structures with intellectual curiosity.
-        Encourage deep, critical engagement with communication.
-        """,
+        "name": "Smart Dragon",
+        "description": "I help you understand English like a language explorer",
+        "teaching_style": "Learning is like discovering a new world",
+        "learning_approach": "We look at words like they are treasure maps",
         "motivation_techniques": [
-            "Explain intricate linguistic logic and patterns",
-            "Encourage sophisticated language analysis",
-            "Provide nuanced, intellectual explanations"
-        ]
+            "Make learning feel like an exciting discovery",
+            "Explain things in a clear way"
+        ],
+        "voice_sample": "Let us explore the world of English together!",
+        "image": "dragon.png"
     },
     "Snake": {
-        "name": "Philosophical Snake",
-        "description": "Contemplative language wisdom guide",
-        "teaching_style": "Reflective, meditative language exploration",
-        "learning_approach": """
-        Explore language as a profound means of human connection.
-        Encourage deep thinking about communication's subtle nuances.
-        Develop critical, mindful language comprehension skills.
-        """,
+        "name": "Wise Snake",
+        "description": "I help you understand English slowly and carefully",
+        "teaching_style": "Learning is like solving a gentle puzzle",
+        "learning_approach": "We think about words and their meanings",
         "motivation_techniques": [
-            "Discuss language as a cultural and philosophical expression",
-            "Encourage thoughtful, intentional communication",
-            "Explore linguistic subtleties and contextual meanings"
-        ]
+            "Take time to understand each word",
+            "Think about how words connect"
+        ],
+        "voice_sample": "Let's understand language together, step by step.",
+        "image": "snake.png"
     },
     "Horse": {
         "name": "Energetic Coach Horse",
-        "description": "Dynamic, interactive language motivator",
-        "teaching_style": "Active, participatory communication training",
-        "learning_approach": """
-        Engage learners through vibrant, interactive language practice.
-        Encourage continuous speaking, listening, and communication.
-        Build confidence through enthusiastic participation.
-        """,
+        "description": "Let's speak English and have fun!",
+        "teaching_style": "Learning is an active, exciting game",
+        "learning_approach": "We learn by speaking and playing",
         "motivation_techniques": [
-            "Create engaging, interactive speaking exercises",
-            "Provide immediate, energetic feedback",
-            "Celebrate every communication attempt"
-        ]
+            "Speak English with lots of energy",
+            "Make learning feel like a fun activity"
+        ],
+        "voice_sample": "Come on, let's speak English and have fun doing it!",
+        "image": "horse.png"
     },
     "Goat": {
-        "name": "Creative Mentor Goat",
-        "description": "Imaginative linguistic artist",
-        "teaching_style": "Creative, visual language exploration",
-        "learning_approach": """
-        Transform language learning into an artistic, imaginative journey.
-        Connect vocabulary and grammar to creative expression.
-        Make linguistic development a playful, visual experience.
-        """,
+        "name": "Creative Goat",
+        "description": "I help you draw pictures with English words",
+        "teaching_style": "Learning is like creating colorful art",
+        "learning_approach": "We use imagination to learn words",
         "motivation_techniques": [
-            "Use artistic and visual language learning techniques",
-            "Encourage creative linguistic representation",
-            "Turn grammar into artistic challenges"
-        ]
+            "Make words feel like colorful pictures",
+            "Use creativity to remember"
+        ],
+        "voice_sample": "Let's paint beautiful pictures with our English words!",
+        "image": "sheep.png"
     },
     "Monkey": {
-        "name": "Playful Genius Monkey",
-        "description": "Witty, intelligent language game master",
-        "teaching_style": "Humorous, game-oriented linguistic play",
-        "learning_approach": """
-        Transform language learning into an entertaining, witty adventure.
-        Use word games, linguistic puzzles, and clever challenges.
-        Make communication feel like an enjoyable, intellectual game.
-        """,
+        "name": "Playful Monkey",
+        "description": "Learning English is the most fun game!",
+        "teaching_style": "Every lesson is a funny, exciting game",
+        "learning_approach": "We laugh and learn at the same time",
         "motivation_techniques": [
-            "Create entertaining language learning games",
-            "Use humor to make learning memorable",
-            "Reward creative and playful language use"
-        ]
+            "Turn learning into a funny game",
+            "Make English feel like play"
+        ],
+        "voice_sample": "Learning English is the most fun game we'll play today!",
+        "image": "monkey.png"
     },
     "Rooster": {
-        "name": "Pronunciation Master Rooster",
-        "description": "Precise linguistic sound expert",
-        "teaching_style": "Phonetic, accent-perfection focused learning",
-        "learning_approach": """
-        Develop crystal-clear pronunciation and melodious intonation.
-        Focus on the musical rhythm and precise articulation of language.
-        Encourage confident, articulate communication.
-        """,
+        "name": "Pronunciation Rooster",
+        "description": "I help you speak English clearly and correctly",
+        "teaching_style": "Learning is about saying words just right",
+        "learning_approach": "We practice saying words perfectly",
         "motivation_techniques": [
-            "Practice pronunciation through engaging exercises",
-            "Provide detailed, constructive phonetic guidance",
-            "Celebrate clear, confident speaking"
-        ]
+            "Practice saying words clearly",
+            "Make pronunciation feel like a fun challenge"
+        ],
+        "voice_sample": "Listen carefully and repeat after me, with perfect pronunciation!",
+        "image": "rooster.png"
     },
     "Dog": {
-        "name": "Supportive Buddy Dog",
-        "description": "Loyal, encouraging language learning companion",
-        "teaching_style": "Supportive, confidence-building linguistic nurturing",
-        "learning_approach": """
-        Create a safe, unconditionally supportive language learning environment.
-        Build learner confidence through patient, kind guidance.
-        Emphasize emotional well-being in communication development.
-        """,
+        "name": "Friendly Dog",
+        "description": "I'm always here to help you learn English",
+        "teaching_style": "Learning is about being kind and patient",
+        "learning_approach": "We learn together, step by step",
         "motivation_techniques": [
-            "Provide constant, positive linguistic reinforcement",
-            "Create a judgment-free learning space",
-            "Celebrate every communication milestone"
-        ]
+            "Cheer you on with lots of love",
+            "Make you feel confident"
+        ],
+        "voice_sample": "You're doing great! Keep practicing your English.",
+        "image": "dog.png"
     },
     "Pig": {
-        "name": "Relaxed Mentor Pig",
-        "description": "Easygoing, kind language learning facilitator",
-        "teaching_style": "Calm, natural language absorption",
-        "learning_approach": """
-        Promote stress-free, organic language learning.
-        Allow learners to progress at their comfortable, natural pace.
-        Create a relaxed, enjoyable linguistic exploration environment.
-        """,
+        "name": "Calm Pig",
+        "description": "Let's learn English together, nice and easy",
+        "teaching_style": "Learning is relaxed and comfortable",
+        "learning_approach": "We take our time and enjoy learning",
         "motivation_techniques": [
-            "Reduce language learning anxiety",
-            "Encourage natural, pressure-free communication",
-            "Provide gentle, supportive linguistic guidance"
-        ]
+            "Make learning feel relaxed",
+            "No stress, just fun"
+        ],
+        "voice_sample": "Let's learn English together, nice and easy.",
+        "image": "pig.png"
     }
 }
 
+class CharacterSelector:
+    def __init__(self):
+        self.tts_model = TTS(model_name="tts_models/multilingual/multi-dataset/your_tts")
+
+    def create_avatar_carousel(self):
+        """
+        Create a Swiper-like avatar carousel using HTML, CSS, and JavaScript
+        """
+        carousel_html = """
+        <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
+        <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
+        
+        <style>
+        .swiper-container {
+            width: 100%;
+            height: 500px;
+        }
+        .swiper-slide {
+            text-align: center;
+            background: #f4f4f4;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            border-radius: 18px;
+            padding: 20px;
+        }
+        .avatar-image {
+            width: 250px;
+            height: 250px;
+            object-fit: cover;
+            border-radius: 50%;
+            margin-bottom: 15px;
+        }
+        .voice-preview-btn {
+            margin-top: 10px;
+            padding: 10px;
+            background-color: #4CAF50;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        </style>
+        
+        <div class="swiper-container">
+            <div class="swiper-wrapper">
+        """
+        
+        # Generate slides for each avatar
+        for avatar_key, avatar_info in AVATAR_PERSONAS.items():
+            carousel_html += f"""
+            <div class="swiper-slide" data-avatar="{avatar_key}">
+                <img src="images/{avatar_info['image']}" class="avatar-image" alt="{avatar_info['name']}">
+                <h3>{avatar_info['name']}</h3>
+                <p>{avatar_info['description']}</p>
+                <button class="voice-preview-btn" onclick="previewVoice('{avatar_key}')">
+                    Preview Voice
+                </button>
+            </div>
+            """
+        
+        carousel_html += """
+            </div>
+            <div class="swiper-pagination"></div>
+            <div class="swiper-button-prev"></div>
+            <div class="swiper-button-next"></div>
+        </div>
+        
+        <script>
+        var swiper = new Swiper('.swiper-container', {
+            slidesPerView: 'auto',
+            centeredSlides: true,
+            spaceBetween: 30,
+            pagination: {
+                el: '.swiper-pagination',
+                clickable: true
+            },
+            navigation: {
+                nextEl: '.swiper-button-next',
+                prevEl: '.swiper-button-prev',
+            }
+        });
+        
+        function previewVoice(avatarKey) {
+            window.parent.postMessage({
+                type: 'previewVoice', 
+                avatarKey: avatarKey
+            }, '*');
+        }
+        
+        function selectAvatar(avatarKey) {
+            window.parent.postMessage({
+                type: 'avatarSelected', 
+                avatarKey: avatarKey
+            }, '*');
+        }
+        </script>
+        """
+        
+        return carousel_html
+
+    def generate_voice_preview(self, avatar_key):
+        """Generate voice preview for a specific avatar"""
+        avatar = AVATAR_PERSONAS[avatar_key]
+        try:
+            # Generate voice preview
+            self.tts_model.tts_to_file(
+                text=avatar['voice_sample'], 
+                file_path=f"{avatar_key}_preview.wav"
+            )
+            return f"{avatar_key}_preview.wav"
+        except Exception as e:
+            logging.error(f"Voice preview error for {avatar_key}: {e}")
+            return None
+
+def main():
+    st.title("Language Learning Companion")
+    
+    # Character Selection Carousel
+    character_selector = CharacterSelector()
+    
+    # Render Swiper Carousel
+    carousel_html = character_selector.create_avatar_carousel()
+    components.html(carousel_html, height=600, scrolling=True)
+    
+    # JavaScript communication for avatar selection and voice preview
+    components.html("""
+    <script>
+    window.addEventListener('message', function(event) {
+        if (event.data.type === 'avatarSelected') {
+            window.parent.postMessage({
+                type: 'streamlit:setComponentValue', 
+                key: 'selected_avatar', 
+                value: event.data.avatarKey
+            }, '*');
+        }
+        if (event.data.type === 'previewVoice') {
+            window.parent.postMessage({
+                type: 'streamlit:setComponentValue', 
+                key: 'preview_voice', 
+                value: event.data.avatarKey
+            }, '*');
+        }
+    });
+    </script>
+    """, height=0)
+    
+    # Handle Voice Preview
+    preview_avatar = st.experimental_get_query_params().get('preview_voice', [None])[0]
+    if preview_avatar:
+        preview_audio = character_selector.generate_voice_preview(preview_avatar)
+        if preview_audio:
+            st.audio(preview_audio, format='audio/wav')
+    
+    # Selected Avatar Handling
+    selected_avatar = st.experimental_get_query_params().get('selected_avatar', [None])[0]
+    if selected_avatar:
+        # Initialize Language Learning Companion with selected avatar
+        companion = LanguageLearningCompanion(selected_avatar)
+        # Rest of the conversation interface...
+
+if __name__ == "__main__":
+    main()
+    
 class AudioProcessor(AudioProcessorBase):
     def __init__(self, companion):
         self.companion = companion