Update app.py

app.py

@@ -1,62 +1,227 @@
 # app.py
-
 import streamlit as st
+import requests
+import time
+import os
+from dotenv import load_dotenv
 
-# Title of the App
-st.title("PAK ANGELS - ULEFUSA Gen AI Training Certificate Checker 🏆")
-
-# Explanation of Criteria
-st.write("""
-### Qualification Criteria:
-To qualify for the **Gen AI Training Success Certificate**, you must achieve a minimum of **50%** overall score. 
-Your final score is calculated with the following weightage:
-- **Quiz 1:** 5%
-- **Quiz 2:** 5%
-- **Quiz 3:** 10%
-- **Quiz 4:** 15%
-- **Quiz 5:** 15%
-- **Grand Quiz (Final Exam):** 50%
-
-Enter your scores below to check if you qualify!
-""")
+# Load environment variables
+load_dotenv()
 
-# Input fields for quiz scores (out of 60)
-quiz1 = st.number_input("Enter Quiz 1 Score (out of 60):", min_value=0, max_value=60, step=1)
-quiz2 = st.number_input("Enter Quiz 2 Score (out of 60):", min_value=0, max_value=60, step=1)
-quiz3 = st.number_input("Enter Quiz 3 Score (out of 60):", min_value=0, max_value=60, step=1)
-quiz4 = st.number_input("Enter Quiz 4 Score (out of 60):", min_value=0, max_value=60, step=1)
-quiz5 = st.number_input("Enter Quiz 5 Score (out of 60):", min_value=0, max_value=60, step=1)
-grand_quiz = st.number_input("Enter Grand Quiz (Final Exam) Score (out of 60):", min_value=0, max_value=60, step=1)
-
-# Calculate Final Weighted Score
-if st.button("Check Qualification"):
-    # Convert scores out of 60 to percentage
-    weighted_score = (
-        (quiz1 / 60) * 5 +
-        (quiz2 / 60) * 5 +
-        (quiz3 / 60) * 10 +
-        (quiz4 / 60) * 15 +
-        (quiz5 / 60) * 15 +
-        (grand_quiz / 60) * 50
-    )
+# Set up the page
+st.set_page_config(
+    page_title="CodeTales ✨",
+    page_icon="🚀",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
 
-    st.subheader("Your Results 📊")
-    st.write(f"**Final Weighted Score:** {weighted_score:.2f}%")
+# 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)
 
-    # Qualification Criteria
-    if weighted_score >= 50:
-        st.success("✅ Congratulations! You qualify for the **Gen AI Training Success Certificate** 🎉")
+# 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)
 
-        # Performance Categories
-        if weighted_score >= 80:
-            st.write("🏆 **Top Performer:** 80% or higher")
-        elif weighted_score >= 65:
-            st.write("⭐ **Skilled Performer:** 65% or higher")
-        else:
-            st.write("🔰 **Promising Performer:** 50% or higher")
+# 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.error("❌ Unfortunately, you did not qualify for the certificate. Keep practicing and try again!")
+        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 |
+""")
 
-# Final message
-st.write("\n\nI made this tool with ❤️")
+# 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)