Update src/streamlit_app.py

src/streamlit_app.py

@@ -7,35 +7,300 @@ from PIL import Image
 import sympy as sp
 import time
 import tempfile
+import random
 
 # Page config
-st.set_page_config(page_title="🎓 Smart Math Teacher", layout="centered")
+st.set_page_config(page_title="🎪 Math Adventure Land", layout="centered")
 
-# Custom CSS
+# Custom CSS with LOTS of fun animations and styles
 st.markdown("""
     <style>
-    .fun-title { font-size: 40px; color: #ff3399; text-align: center; font-family: 'Comic Sans MS', cursive; }
-    .question-box { border: 4px dotted #ffcc00; padding: 20px; border-radius: 20px; background-color: #fff7e6; font-size: 20px; }
-    .stButton > button { font-size: 18px; background-color: #00cc99; color: white; border-radius: 10px; padding: 10px; }
-    .stTextInput > div > input { font-size: 18px; }
+    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
+    
+    .main-container {
+        background: linear-gradient(45deg, #FF6B6B, #4ECDC4, #45B7D1, #96CEB4, #FFEAA7);
+        background-size: 400% 400%;
+        animation: gradientBG 15s ease infinite;
+        padding: 20px;
+        border-radius: 25px;
+        border: 8px dashed #FFD93D;
+    }
+    
+    @keyframes gradientBG {
+        0% { background-position: 0% 50% }
+        50% { background-position: 100% 50% }
+        100% { background-position: 0% 50% }
+    }
+    
+    .fun-title { 
+        font-size: 50px; 
+        color: #FF6B6B; 
+        text-align: center; 
+        font-family: 'Comic Neue', cursive;
+        text-shadow: 3px 3px 0 #FFD93D, 6px 6px 0 #4ECDC4;
+        animation: bounce 2s infinite;
+        margin-bottom: 30px;
+    }
+    
+    @keyframes bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-20px); }
+    }
+    
+    .question-box { 
+        border: 6px dotted #FF6B6B; 
+        padding: 25px; 
+        border-radius: 25px; 
+        background-color: rgba(255, 255, 255, 0.9);
+        font-size: 22px; 
+        font-family: 'Comic Neue', cursive;
+        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        animation: wiggle 3s ease-in-out infinite;
+        margin: 20px 0;
+    }
+    
+    @keyframes wiggle {
+        0%, 100% { transform: rotate(-1deg); }
+        50% { transform: rotate(1deg); }
+    }
+    
+    .stButton > button { 
+        font-size: 20px; 
+        background: linear-gradient(45deg, #FF6B6B, #FFD93D);
+        color: white; 
+        border-radius: 15px; 
+        padding: 12px 25px;
+        border: none;
+        font-family: 'Comic Neue', cursive;
+        font-weight: bold;
+        transition: all 0.3s ease;
+        box-shadow: 0 5px 15px rgba(255, 107, 107, 0.4);
+    }
+    
+    .stButton > button:hover {
+        transform: scale(1.1);
+        box-shadow: 0 8px 25px rgba(255, 107, 107, 0.6);
+    }
+    
+    .stTextInput > div > input { 
+        font-size: 20px; 
+        border-radius: 15px;
+        border: 3px solid #4ECDC4;
+        padding: 15px;
+        font-family: 'Comic Neue', cursive;
+    }
+    
+    /* Calculator Styles */
+    .calculator-container {
+        background: rgba(255, 255, 255, 0.95);
+        padding: 25px 30px;
+        border-radius: 20px;
+        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
+        text-align: center;
+        width: 320px;
+        margin: 20px auto;
+        border: 5px solid #FFD93D;
+        animation: float 4s ease-in-out infinite;
+    }
+    
+    @keyframes float {
+        0%, 100% { transform: translateY(0px); }
+        50% { transform: translateY(-10px); }
+    }
+    
+    .calculator-title {
+        margin-bottom: 15px;
+        color: #FF6B6B;
+        font-family: 'Comic Neue', cursive;
+        font-size: 28px;
+        text-shadow: 2px 2px 0 #FFD93D;
+    }
+    
+    .calculator-input {
+        width: 80%;
+        padding: 12px;
+        margin: 10px 0;
+        border-radius: 12px;
+        border: 3px solid #4ECDC4;
+        text-align: center;
+        font-size: 18px;
+        font-family: 'Comic Neue', cursive;
+        background: #FFF9C4;
+    }
+    
+    .calculator-buttons {
+        margin-top: 15px;
+    }
+    
+    .calculator-button {
+        margin: 6px;
+        padding: 12px 18px;
+        border: none;
+        border-radius: 12px;
+        cursor: pointer;
+        font-size: 18px;
+        color: white;
+        background: linear-gradient(45deg, #4ECDC4, #45B7D1);
+        transition: all 0.3s ease;
+        font-family: 'Comic Neue', cursive;
+        font-weight: bold;
+    }
+    
+    .calculator-button:hover {
+        transform: scale(1.1);
+        background: linear-gradient(45deg, #45B7D1, #4ECDC4);
+    }
+    
+    .calculator-clear {
+        background: linear-gradient(45deg, #FF6B6B, #FF8E8E);
+    }
+    
+    .calculator-clear:hover {
+        background: linear-gradient(45deg, #FF8E8E, #FF6B6B);
+    }
+    
+    .calculator-result {
+        margin-top: 15px;
+        font-size: 20px;
+        font-weight: bold;
+        color: #FF6B6B;
+        min-height: 30px;
+        font-family: 'Comic Neue', cursive;
+        padding: 10px;
+        background: #FFF9C4;
+        border-radius: 10px;
+        border: 2px dashed #FFD93D;
+    }
+    
+    /* Fun elements */
+    .emoji-rain {
+        position: fixed;
+        top: 0;
+        left: 0;
+        pointer-events: none;
+        z-index: 9999;
+    }
+    
+    .emoji {
+        position: absolute;
+        font-size: 24px;
+        animation: fall linear forwards;
+    }
+    
+    @keyframes fall {
+        to { transform: translateY(100vh) rotate(360deg); }
+    }
+    
+    .confetti {
+        position: fixed;
+        width: 15px;
+        height: 15px;
+        background: #FF6B6B;
+        animation: confetti-fall 3s linear forwards;
+        z-index: 9998;
+    }
+    
+    @keyframes confetti-fall {
+        0% { transform: translateY(-100px) rotate(0deg); }
+        100% { transform: translateY(100vh) rotate(360deg); }
+    }
+    
+    .progress-bar {
+        background: linear-gradient(45deg, #FF6B6B, #FFD93D, #4ECDC4);
+        border-radius: 10px;
+        height: 25px;
+        margin: 20px 0;
+    }
+    
+    .animal-characters {
+        display: flex;
+        justify-content: space-around;
+        margin: 20px 0;
+        font-size: 40px;
+        animation: bounce 2s infinite;
+    }
     </style>
 """, unsafe_allow_html=True)
 
-# Welcome title
-st.markdown("<div class='fun-title'>🧠✨ Welcome to the Smart Math Teacher! ✨🧠</div>", unsafe_allow_html=True)
+# JavaScript for animations and effects
+st.markdown("""
+<script>
+function createEmojiRain() {
+    const emojis = ['🎉', '🎈', '⭐', '🎊', '🌈', '🚀', '🎨', '🐱', '🐶', '🦄'];
+    const container = document.createElement('div');
+    container.className = 'emoji-rain';
+    document.body.appendChild(container);
+    
+    for (let i = 0; i < 50; i++) {
+        setTimeout(() => {
+            const emoji = document.createElement('div');
+            emoji.className = 'emoji';
+            emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];
+            emoji.style.left = Math.random() * 100 + 'vw';
+            emoji.style.animationDuration = (Math.random() * 3 + 2) + 's';
+            container.appendChild(emoji);
+            
+            setTimeout(() => emoji.remove(), 5000);
+        }, i * 100);
+    }
+    
+    setTimeout(() => container.remove(), 6000);
+}
+
+function createConfetti() {
+    const colors = ['#FF6B6B', '#4ECDC4', '#FFD93D', '#45B7D1', '#96CEB4'];
+    for (let i = 0; i < 150; i++) {
+        setTimeout(() => {
+            const confetti = document.createElement('div');
+            confetti.className = 'confetti';
+            confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
+            confetti.style.left = Math.random() * 100 + 'vw';
+            confetti.style.animationDuration = (Math.random() * 2 + 1) + 's';
+            document.body.appendChild(confetti);
+            
+            setTimeout(() => confetti.remove(), 3000);
+        }, i * 10);
+    }
+}
+
+function celebrate() {
+    createEmojiRain();
+    createConfetti();
+    // Play celebration sound (you can add actual sound files)
+    console.log("🎉 Celebration time!");
+}
+</script>
+""", unsafe_allow_html=True)
+
+# Welcome title with fun characters
+st.markdown("""
+<div class="main-container">
+    <div class="animal-characters">
+        <span>🐱</span>
+        <span>🐶</span>
+        <span>🦄</span>
+        <span>🐼</span>
+        <span>🐯</span>
+    </div>
+    <div class="fun-title">🎪 Welcome to Math Adventure Land! 🎪</div>
+    <div style="text-align: center; font-size: 24px; color: #FF6B6B; font-family: 'Comic Neue', cursive;">
+        Where Numbers Become Friends! 🤗
+    </div>
+</div>
+""", unsafe_allow_html=True)
 
 # Initialize session state for temp directory
 if 'temp_dir' not in st.session_state:
     st.session_state.temp_dir = tempfile.mkdtemp()
 
-# Age group setup 
+# Age group setup with fun descriptions
 age_groups = {
-    "4-6 Age Group": {"dataset": "src/Datase_of_4-6_Age_Group.xlsx", "zip_file": "src/Image_for_group_4-6.zip", "image_folder": "Image_for_group_4-6"},
-    "7-9 Age Group": {"dataset": "src/Datase_of_7-9_Age_Group.xlsx", "zip_file": "src/Image_for_group_7-9.zip", "image_folder": "Image_for_group_7-9"},
-    "13-15 Age Group": {"dataset": "src/Datase_of_13-15_Age_Group.xlsx", "zip_file": "src/Image_for_group_13-15.zip", "image_folder": "Image_for_group_13-15"},
+    "👶 Little Explorers (4-6)": {"dataset": "src/Datase_of_4-6_Age_Group.xlsx", "zip_file": "src/Image_for_group_4-6.zip", "image_folder": "Image_for_group_4-6", "emoji": "👶"},
+    "🚀 Math Adventurers (7-9)": {"dataset": "src/Datase_of_7-9_Age_Group.xlsx", "zip_file": "src/Image_for_group_7-9.zip", "image_folder": "Image_for_group_7-9", "emoji": "🚀"},
+    "🌟 Math Wizards (13-15)": {"dataset": "src/Datase_of_13-15_Age_Group.xlsx", "zip_file": "src/Image_for_group_13-15.zip", "image_folder": "Image_for_group_13-15", "emoji": "🌟"}
 }
 
-selected_age_group = st.selectbox("🧒 Select your Age Group:", list(age_groups.keys()))
+selected_age_group = st.selectbox("🎯 Choose Your Adventure Level:", list(age_groups.keys()))
 
 # Initialize session
 if "session_initialized" not in st.session_state or st.session_state.age_group != selected_age_group:
@@ -62,22 +327,23 @@ try:
         with zipfile.ZipFile(zip_path, "r") as zip_ref:
             zip_ref.extractall(temp_image_folder)
 except Exception as e:
-    st.warning(f"Error extracting images: {e}")
+    st.warning(f"⚠️ Oops! Our image treasure chest is hiding! {e}")
 
 if not os.path.exists(dataset_path):
-    st.error(f"Dataset not found: {dataset_path}")
+    st.error(f"❌ Adventure map not found: {dataset_path}")
     st.stop()
 
 try:
     df = pd.read_excel(dataset_path)
     df['category'] = df['category'].astype(str).str.strip()
 except Exception as e:
-    st.error(f"Error loading dataset: {e}")
+    st.error(f"❌ Oh no! The math treasure got mixed up! {e}")
     st.stop()
 
-# Category selection
+# Category selection with fun names
 categories = sorted(df['category'].dropna().unique())
-selected_category = st.selectbox("📚 Choose a Math Category:", options=categories)
+category_emojis = {"Addition": "➕", "Subtraction": "➖", "Multiplication": "✖️", "Division": "➗", "Geometry": "📐", "Algebra": "📊"}
+selected_category = st.selectbox("📚 Choose Your Math Quest:", options=categories)
 
 # Update session if category changes
 if st.session_state.category != selected_category:
@@ -90,12 +356,135 @@ if st.session_state.category != selected_category:
 # Filter questions by selected category only
 subset_df = df[df['category'] == selected_category].reset_index(drop=True)
 
+# 🧮 SUPER FUN CALCULATOR SECTION
+st.markdown("---")
+st.markdown("<h2 style='text-align: center; color: #FF6B6B; font-family: Comic Neue, cursive;'>🧮 Magical Math Calculator 🧮</h2>", unsafe_allow_html=True)
+st.markdown("<p style='text-align: center; font-size: 18px; color: #4ECDC4;'>Use this magical calculator to help with your math adventures! ✨</p>", unsafe_allow_html=True)
+
+# Create calculator in columns
+col1, col2, col3 = st.columns([1, 2, 1])
+
+with col2:
+    st.markdown(f"""
+    <div class="calculator-container">
+        <h3 class="calculator-title">✨ Magic Calculator ✨</h3>
+        <input type="number" id="num1" class="calculator-input" placeholder="🔢 First number">
+        <input type="number" id="num2" class="calculator-input" placeholder="🔢 Second number">
+        
+        <div class="calculator-buttons">
+            <button class="calculator-button" onclick="calculate('+')">➕ Add</button>
+            <button class="calculator-button" onclick="calculate('-')">➖ Subtract</button>
+            <button class="calculator-button" onclick="calculate('*')">✖️ Multiply</button>
+            <button class="calculator-button" onclick="calculate('/')">➗ Divide</button>
+            <button class="calculator-button calculator-clear" onclick="clearCalculator()">🧹 Clear</button>
+        </div>
+        
+        <div id="result" class="calculator-result">🎯 Your answer will appear here!</div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    # JavaScript for calculator with fun messages
+    st.markdown("""
+    <script>
+    function calculate(operator) {
+      const num1 = parseFloat(document.getElementById('num1').value);
+      const num2 = parseFloat(document.getElementById('num2').value);
+      const resultDisplay = document.getElementById('result');
+
+      // Error handling for invalid input
+      if (isNaN(num1) || isNaN(num2)) {
+        resultDisplay.innerHTML = "⚠️ Oops! Please enter magical numbers! ✨";
+        resultDisplay.style.color = "#FF6B6B";
+        return;
+      }
+
+      let result;
+      let emoji = "🎉";
+      switch (operator) {
+        case '+':
+          result = num1 + num2;
+          emoji = "🎊";
+          break;
+        case '-':
+          result = num1 - num2;
+          emoji = "🚀";
+          break;
+        case '*':
+          result = num1 * num2;
+          emoji = "🌈";
+          break;
+        case '/':
+          if (num2 === 0) {
+            resultDisplay.innerHTML = "❌ Whoa! You can't divide by zero! 🚫";
+            resultDisplay.style.color = "#FF6B6B";
+            return;
+          }
+          result = num1 / num2;
+          emoji = "⭐";
+          break;
+        default:
+          resultDisplay.innerHTML = "🤔 Unknown magic operation!";
+          return;
+      }
+
+      resultDisplay.innerHTML = `${emoji} Magical Result: <strong>${result}</strong> ${emoji}`;
+      resultDisplay.style.color = "#4ECDC4";
+      
+      // Mini celebration for calculator
+      if(Math.abs(result) > 100) {
+          setTimeout(() => {
+              const miniEmoji = document.createElement('div');
+              miniEmoji.textContent = '🎉';
+              miniEmoji.style.position = 'fixed';
+              miniEmoji.style.fontSize = '30px';
+              miniEmoji.style.left = Math.random() * 100 + 'vw';
+              miniEmoji.style.animation = 'fall 2s linear forwards';
+              document.body.appendChild(miniEmoji);
+              setTimeout(() => miniEmoji.remove(), 2000);
+          }, 100);
+      }
+    }
+
+    // Clear function
+    function clearCalculator() {
+      document.getElementById('num1').value = '';
+      document.getElementById('num2').value = '';
+      document.getElementById('result').innerHTML = "🎯 Your answer will appear here!";
+      document.getElementById('result').style.color = "#FF6B6B";
+    }
+    </script>
+    """, unsafe_allow_html=True)
+
+st.markdown("---")
+
+# 🎮 MATH QUESTIONS SECTION
 if not subset_df.empty and st.session_state.question_index < len(subset_df):
     question = subset_df.iloc[st.session_state.question_index]
     progress = int((st.session_state.question_index / len(subset_df)) * 100)
-    st.progress(progress)
+    
+    # Fun progress bar
+    st.markdown(f"""
+    <div style="text-align: center; margin: 20px 0;">
+        <div style="font-family: 'Comic Neue', cursive; color: #FF6B6B; font-size: 18px;">
+            🎯 Adventure Progress: {st.session_state.question_index + 1} of {len(subset_df)}
+        </div>
+        <div class="progress-bar" style="width: 100%; background: #f0f0f0; border-radius: 10px; height: 25px;">
+            <div style="width: {progress}%; background: linear-gradient(45deg, #FF6B6B, #FFD93D); height: 100%; border-radius: 10px; transition: width 0.5s;"></div>
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
 
-    st.markdown(f"<div class='question-box'>📘 <b>Question {st.session_state.question_index + 1}:</b><br><br>{question['problem']}</div>", unsafe_allow_html=True)
+    # Display question with fun styling
+    category_emoji = category_emojis.get(selected_category, "❓")
+    st.markdown(f"""
+    <div class="question-box">
+        <div style="text-align: center; font-size: 30px; margin-bottom: 15px;">
+            {category_emoji} Challenge {st.session_state.question_index + 1} {category_emoji}
+        </div>
+        📘 <b>Math Quest:</b><br><br>
+        {question['problem']}
+    </div>
+    """, unsafe_allow_html=True)
 
     # Display image with error handling
     if pd.notna(question.get('image')):
@@ -111,41 +500,118 @@ if not subset_df.empty and st.session_state.question_index < len(subset_df):
                     except:
                         pass
         if not image_found:
-            st.warning("❌ Image not found.")
+            st.warning("🖼️ Oh no! The picture is playing hide and seek!")
+    
+    # Fun answer input
+    user_ans = st.text_input("✏️ Your Magical Answer:", key=f"ans_{st.session_state.question_index}")
 
-    user_ans = st.text_input("📝 Your Answer:", key=f"ans_{st.session_state.question_index}")
-
-    if st.button("✅ Submit Answer"):
+    # Submit button with celebration
+    if st.button("🎯 Submit Answer", key=f"submit_{st.session_state.question_index}"):
         if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
-            st.success("🎉 Correct! Well done!")
+            # MEGA CELEBRATION FOR CORRECT ANSWER!
+            st.markdown("""
+            <script>
+            celebrate();
+            </script>
+            """, unsafe_allow_html=True)
+            
+            st.success("""
+            🎉✨ AMAZING! YOU'RE A MATH SUPERSTAR! ✨🎉
+            """)
+            
+            # Multiple balloons and effects
+            st.balloons()
+            st.balloons()
             st.balloons()
-            time.sleep(2)
+            
+            # Fun success message with random emojis
+            success_messages = [
+                "🌟 You're shining brighter than a supernova!",
+                "🚀 To infinity and beyond! Math genius detected!",
+                "🌈 You just painted the town with math brilliance!",
+                "🎊 Party time! You nailed it!",
+                "🦄 Unicorn-level math skills activated!"
+            ]
+            
+            st.markdown(f"""
+            <div style="text-align: center; font-size: 24px; color: #FF6B6B; font-family: 'Comic Neue', cursive; padding: 20px;">
+                {random.choice(success_messages)}
+            </div>
+            """, unsafe_allow_html=True)
+            
+            time.sleep(3)
             st.session_state.question_index += 1
             st.session_state.show_answer = False
             st.session_state.show_steps = False
             st.rerun()
         else:
-            st.error("❌ Try again or view the correct answer below.")
+            st.error("""
+            ❌ Oops! That's not quite right, but don't give up! 
+            Every great math wizard makes mistakes sometimes! 💫
+            """)
             st.session_state.show_answer = True
             st.session_state.show_steps = False
 
+    # Show answer with encouragement
     if st.session_state.show_answer:
-        st.info(f"✅ Correct Answer: **{question['answer']}**")
-        if selected_age_group in ["7-9 Age Group", "13-15 Age Group"]:
-            if st.button("🔍 Show Steps"):
+        st.info(f"""
+        💡 **Hint from Your Math Friend:** 
+        The magical answer is **{question['answer']}**
+        
+        Remember: Even math superheroes need help sometimes! 🦸
+        """)
+        
+        if selected_age_group in ["🚀 Math Adventurers (7-9)", "🌟 Math Wizards (13-15)"]:
+            if st.button("🔍 Show Magic Steps", key=f"steps_{st.session_state.question_index}"):
                 st.session_state.show_steps = True
         if st.session_state.show_steps and pd.notna(question.get("steps", None)):
-            st.success(f"### 🪄 Steps:\n{question['steps']}")
+            st.success(f"""
+            ### 🪄 Secret Math Magic:
+            {question['steps']}
+            """)
 
-    if st.button("⏭️ Skip"):
+    # Skip button with fun message
+    if st.button("⏭️ Skip to Next Adventure", key=f"skip_{st.session_state.question_index}"):
         st.session_state.question_index += 1
         st.session_state.show_answer = False
         st.session_state.show_steps = False
+        st.info("💨 Zooming to the next challenge! Get ready! 🚀")
+        time.sleep(1)
         st.rerun()
+        
 elif subset_df.empty:
-    st.warning("⚠️ No questions available in this category. Try another one.")
+    st.warning("""
+    ⚠️ Oh dear! No math adventures here yet! 
+    Try another magical category! 🧙
+    """)
 else:
-    st.success("🏁 You've completed all questions in this category!")
+    # GRAND FINALE CELEBRATION!
+    st.markdown("""
+    <div style="text-align: center; padding: 40px;">
+        <div style="font-size: 60px; margin-bottom: 20px;">
+            🏆🎉✨
+        </div>
+        <h1 style="color: #FF6B6B; font-family: 'Comic Neue', cursive;">
+            YOU DID IT! MATH CHAMPION! 🏅
+        </h1>
+        <p style="font-size: 24px; color: #4ECDC4;">
+            You've completed all the challenges in this category!<br>
+        </p>
+        <div style="font-size: 40px; margin: 20px 0;">
+            🌟🎊👑🎈🚀
+        </div>
+    </div>
+    """, unsafe_allow_html=True)
+    
+    st.balloons()
+    st.balloons()
+    st.balloons()
+    
+    if st.button("🔄 Start New Adventure"):
+        st.session_state.question_index = 0
+        st.session_state.show_answer = False
+        st.session_state.show_steps = False
+        st.rerun()
 
 # Cleanup function
 def cleanup():
@@ -154,4 +620,4 @@ def cleanup():
         shutil.rmtree(st.session_state.temp_dir)
 
 import atexit
-atexit.register(cleanup)
+atexit.register(cleanup)