Update src/streamlit_app.py

src/streamlit_app.py

@@ -1,116 +1,92 @@
+import altair as alt
 import streamlit as st
 import pandas as pd
 import os
 import zipfile
 from PIL import Image
+import sympy as sp
 import time
 import tempfile
-import random
 
-# Page config with optimized settings
-st.set_page_config(
-    page_title="Math Adventure Land", 
-    layout="wide",
-    initial_sidebar_state="expanded"
-)
+# Page config
+st.set_page_config(page_title="🎓 Smart Math Teacher", layout="centered")
 
-# COMPLETELY CLEAN CSS - NO ANIMATIONS, NO MOVEMENTS, NO TRANSITIONS
+# Custom CSS with beautiful colors
 st.markdown("""
     <style>
-    @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);
-        padding: 20px;
-        border-radius: 25px;
-        border: 8px dashed #FFD93D;
-        margin-bottom: 20px;
-    }
-    
     .fun-title { 
-        font-size: 50px; 
+        font-size: 40px; 
         color: #FF6B6B; 
         text-align: center; 
-        font-family: 'Comic Neue', cursive;
-        margin-bottom: 30px;
+        font-family: 'Comic Sans MS', cursive; 
+        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
     }
-    
     .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;
-        margin: 20px 0;
+        border: 4px solid #4ECDC4; 
+        padding: 20px; 
+        border-radius: 15px; 
+        background: linear-gradient(135deg, #FFF9C4, #E3F2FD);
+        font-size: 20px; 
+        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
     }
-    
     .stButton > button { 
-        font-size: 20px; 
-        background: #FF6B6B;
+        font-size: 18px; 
+        background: linear-gradient(45deg, #FF6B6B, #FF8E53);
         color: white; 
-        border-radius: 15px; 
-        padding: 12px 25px;
+        border-radius: 10px; 
+        padding: 10px;
         border: none;
-        font-family: 'Comic Neue', cursive;
         font-weight: bold;
     }
-    
+    .stButton > button:hover {
+        background: linear-gradient(45deg, #FF8E53, #FF6B6B);
+    }
     .stTextInput > div > input { 
-        font-size: 20px; 
-        border-radius: 15px;
-        border: 3px solid #4ECDC4;
-        padding: 15px;
-        font-family: 'Comic Neue', cursive;
+        font-size: 18px; 
+        border: 2px solid #4ECDC4;
+        border-radius: 10px;
+        padding: 10px;
     }
     
-    .progress-bar {
-        background: #f0f0f0;
-        border-radius: 10px;
-        height: 25px;
-        margin: 20px 0;
+    /* Main container background */
+    .stApp {
+        background: linear-gradient(135deg, #E3F2FD, #F3E5F5);
     }
     
-    .progress-fill {
-        background: #FF6B6B;
-        border-radius: 10px;
-        height: 100%;
+    /* Progress bar styling */
+    .stProgress > div > div > div {
+        background: linear-gradient(45deg, #4ECDC4, #00C9FF);
     }
     
-    .animal-characters {
-        display: flex;
-        justify-content: space-around;
-        margin: 20px 0;
-        font-size: 40px;
+    /* Success message */
+    .stSuccess {
+        background: linear-gradient(135deg, #4ECDC4, #00C9FF);
+        color: white;
+        border-radius: 10px;
     }
     
-    .help-box {
-        background: rgba(255, 255, 255, 0.95);
-        padding: 20px;
-        border-radius: 15px;
-        border: 3px solid #FFD93D;
-        margin-bottom: 20px;
-        font-family: 'Comic Neue', cursive;
+    /* Info message */
+    .stInfo {
+        background: linear-gradient(135deg, #FFD93D, #FF9A3D);
+        color: white;
+        border-radius: 10px;
     }
     
-    .completion-message {
-        text-align: center;
-        padding: 40px;
-        background: #FF6B6B;
-        border-radius: 25px;
+    /* Error message */
+    .stError {
+        background: linear-gradient(135deg, #FF6B6B, #FF8E8E);
         color: white;
-        margin: 20px 0;
+        border-radius: 10px;
     }
     
-    .countdown {
-        font-size: 18px;
-        color: #FF6B6B;
-        font-weight: bold;
-        text-align: center;
-        margin: 10px 0;
+    /* Warning message */
+    .stWarning {
+        background: linear-gradient(135deg, #FFD93D, #FF9A3D);
+        color: white;
+        border-radius: 10px;
     }
     
-    /* DISABLE ALL ANIMATIONS GLOBALLY */
+    /* DISABLE ALL ANIMATIONS */
     * {
         animation: none !important;
         transition: none !important;
@@ -119,323 +95,131 @@ st.markdown("""
     </style>
 """, unsafe_allow_html=True)
 
-# Initialize session state with proper age group management
-def initialize_session_state():
-    if 'app_initialized' not in st.session_state:
-        st.session_state.app_initialized = True
-        st.session_state.temp_dir = tempfile.mkdtemp()
-        st.session_state.last_activity = time.time()
-        st.session_state.auto_progress = True
-        
-        # Initialize age group specific states
-        st.session_state.current_age_group = None
-        st.session_state.age_group_states = {}
+# Welcome title
+st.markdown("<div class='fun-title'>🧠✨ Welcome to the Smart Math Teacher! ✨🧠</div>", unsafe_allow_html=True)
 
-# Initialize the app
-initialize_session_state()
+# Initialize session state for temp directory
+if 'temp_dir' not in st.session_state:
+    st.session_state.temp_dir = tempfile.mkdtemp()
 
-# COMPLETELY STABLE WELCOME - NO MOVEMENT AT ALL
-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)
-
-# Age group setup
+# Age group setup 
 age_groups = {
-    "👶 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": "🌟"}
+    "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"},
 }
 
-# SIDEBAR - Clean and stable
-with st.sidebar:
-    st.markdown("### Quick Help Guide")
-    
-    st.markdown("""
-    <div class="help-box">
-        <h4>How to Play:</h4>
-        <p>1. Choose your age group<br>
-        2. Pick a math category<br>
-        3. Solve the fun problems!<br>
-        4. Get instant feedback</p>
-    </div>
-    """, unsafe_allow_html=True)
-    
-    # Auto-progress toggle
-    st.markdown("### Settings")
-    auto_progress = st.toggle("Auto-Progress", value=st.session_state.auto_progress, 
-                            help="Automatically move to next category when finished")
-    
-    if auto_progress != st.session_state.auto_progress:
-        st.session_state.auto_progress = auto_progress
-        st.rerun()
-    
-    st.markdown("### Achievement Tips")
-    st.info("""
-    Pro Tips:
-    - Take your time with each problem
-    - Use the hints when you need help
-    - Practice makes perfect!
-    """)
-
-# MAIN CONTENT AREA
-col1, col2 = st.columns([3, 1])
-
-with col1:
-    # Update activity timestamp
-    st.session_state.last_activity = time.time()
-    
-    # Age group selection
-    selected_age_group = st.selectbox("Choose Your Adventure Level:", list(age_groups.keys()))
-
-    # Initialize or get age group state
-    if selected_age_group not in st.session_state.age_group_states:
-        st.session_state.age_group_states[selected_age_group] = {
-            'category': None,
-            'question_index': 0,
-            'show_answer': False,
-            'show_steps': False,
-            'df_loaded': False,
-            'df': None,
-            'categories': []
-        }
-
-    # Get current age group state
-    age_state = st.session_state.age_group_states[selected_age_group]
-    
-    # Reset if age group changed
-    if st.session_state.current_age_group != selected_age_group:
-        st.session_state.current_age_group = selected_age_group
-        # Don't reset the state, just use the stored state for this age group
-
-    # Load dataset if not already loaded for this age group
-    if not age_state['df_loaded']:
-        group_info = age_groups[selected_age_group]
-        dataset_path = group_info["dataset"]
-        zip_path = group_info["zip_file"]
-        image_folder = group_info["image_folder"]
-
-        # Create image folder in temp directory
-        temp_image_folder = os.path.join(st.session_state.temp_dir, image_folder)
-        os.makedirs(temp_image_folder, exist_ok=True)
-
-        # Extract images if zip exists
-        try:
-            if os.path.exists(zip_path):
-                with zipfile.ZipFile(zip_path, "r") as zip_ref:
-                    zip_ref.extractall(temp_image_folder)
-        except Exception as e:
-            st.warning(f"Could not extract images: {e}")
-
-        if not os.path.exists(dataset_path):
-            st.error(f"Dataset not found: {dataset_path}")
-            st.stop()
-
-        try:
-            age_state['df'] = pd.read_excel(dataset_path)
-            age_state['df']['category'] = age_state['df']['category'].astype(str).str.strip()
-            age_state['categories'] = sorted(age_state['df']['category'].dropna().unique())
-            age_state['df_loaded'] = True
-        except Exception as e:
-            st.error(f"Error loading dataset: {e}")
-            st.stop()
-
-    # Category selection
-    category_emojis = {"Addition": "+", "Subtraction": "-", "Multiplication": "×", "Division": "÷", "Geometry": "📐", "Algebra": "📊"}
-    selected_category = st.selectbox("Choose Your Math Quest:", options=age_state['categories'])
-
-    # Update session if category changes
-    if age_state['category'] != selected_category:
-        age_state['category'] = selected_category
-        age_state['question_index'] = 0
-        age_state['show_answer'] = False
-        age_state['show_steps'] = False
-        st.rerun()
-
-    # Filter questions by selected category only
-    subset_df = age_state['df'][age_state['df']['category'] == selected_category].reset_index(drop=True)
-
-    # MATH QUESTIONS SECTION
-    if not subset_df.empty and age_state['question_index'] < len(subset_df):
-        question = subset_df.iloc[age_state['question_index']]
-        progress = int((age_state['question_index'] / len(subset_df)) * 100)
-        
-        # Progress bar - NO ANIMATIONS
-        st.markdown(f"""
-        <div style="text-align: center; margin: 20px 0;">
-            <div style="font-family: 'Comic Neue', cursive; color: #FF6B6B; font-size: 18px;">
-                Progress: {age_state['question_index'] + 1} of {len(subset_df)}
-            </div>
-            <div class="progress-bar">
-                <div class="progress-fill" style="width: {progress}%;"></div>
-            </div>
-        </div>
-        """, unsafe_allow_html=True)
-
-        # Display question - NO ANIMATIONS
-        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;">
-                Challenge {age_state['question_index'] + 1}
-            </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')):
-            image_name = str(question['image']).strip()
-            image_found = False
-            temp_image_folder = os.path.join(st.session_state.temp_dir, age_groups[selected_age_group]["image_folder"])
-            for root, _, files in os.walk(temp_image_folder):
-                for file in files:
-                    if file.lower().startswith(image_name.lower()) or os.path.splitext(file)[0].lower() == image_name.lower():
-                        try:
-                            st.image(Image.open(os.path.join(root, file)), use_column_width=True)
-                            image_found = True
-                            break
-                        except:
-                            pass
-            if not image_found:
-                st.warning("Image not available")
-        
-        # Answer input
-        user_ans = st.text_input("Your Answer:", key=f"ans_{selected_age_group}_{selected_category}_{age_state['question_index']}")
-
-        # Action buttons
-        col_btn1, col_btn2, col_btn3 = st.columns([1, 1, 1])
-        
-        with col_btn1:
-            if st.button("Submit Answer", key=f"submit_{selected_age_group}_{selected_category}_{age_state['question_index']}", use_container_width=True):
-                st.session_state.last_activity = time.time()
-                if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
-                    # SIMPLE SUCCESS MESSAGE - NO ANIMATIONS
-                    st.success("CORRECT! Great job!")
-                    
-                    success_messages = [
-                        "You're a math superstar!",
-                        "Excellent work!",
-                        "Brilliant answer!",
-                        "Perfect!",
-                        "Outstanding!"
-                    ]
-                    
-                    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)
-                    
-                    # Wait 2 seconds then continue
-                    time.sleep(2)
-                    age_state['question_index'] += 1
-                    age_state['show_answer'] = False
-                    age_state['show_steps'] = False
-                    st.session_state.last_activity = time.time()
-                    st.rerun()
-                else:
-                    st.error("Not quite right. Try again!")
-                    age_state['show_answer'] = True
-                    age_state['show_steps'] = False
-
-        with col_btn2:
-            if st.button("Show Hint", key=f"hint_{selected_age_group}_{selected_category}_{age_state['question_index']}", use_container_width=True):
-                st.session_state.last_activity = time.time()
-                age_state['show_answer'] = True
-                st.info("Need some help? Here's the answer below!")
-
-        with col_btn3:
-            if st.button("Skip", key=f"skip_{selected_age_group}_{selected_category}_{age_state['question_index']}", use_container_width=True):
-                st.session_state.last_activity = time.time()
-                age_state['question_index'] += 1
-                age_state['show_answer'] = False
-                age_state['show_steps'] = False
-                st.info("Moving to next challenge...")
-                time.sleep(1)
-                st.rerun()
-
-        # Show answer
-        if age_state['show_answer']:
-            st.info(f"Correct Answer: {question['answer']}")
-            
-            if selected_age_group in ["🚀 Math Adventurers (7-9)", "🌟 Math Wizards (13-15)"]:
-                if st.button("Show Steps", key=f"steps_{selected_age_group}_{selected_category}_{age_state['question_index']}"):
-                    st.session_state.last_activity = time.time()
-                    age_state['show_steps'] = True
-            if age_state['show_steps'] and pd.notna(question.get("steps", None)):
-                st.success(f"Step-by-Step Solution:\n{question['steps']}")
-            
-    elif subset_df.empty:
-        st.warning("No questions available in this category. Try another one!")
-    else:
-        # COMPLETION MESSAGE - NO ANIMATIONS
-        st.markdown("""
-        <div class="completion-message">
-            <h1 style="font-family: 'Comic Neue', cursive;">
-                CONGRATULATIONS!
-            </h1>
-            <p style="font-size: 24px;">
-                You've completed all challenges in this category!
-            </p>
-        </div>
-        """, unsafe_allow_html=True)
-        
-        # Auto-progress logic
-        if st.session_state.auto_progress:
-            st.markdown("""
-            <div class="countdown">
-                Next adventure starting in: 5 seconds
-            </div>
-            """, unsafe_allow_html=True)
-            
-            time.sleep(5)
-            age_state['question_index'] = 0
-            age_state['show_answer'] = False
-            age_state['show_steps'] = False
-            
-            # Move to next category
-            current_idx = age_state['categories'].index(selected_category)
-            if current_idx < len(age_state['categories']) - 1:
-                age_state['category'] = age_state['categories'][current_idx + 1]
-            else:
-                age_state['category'] = age_state['categories'][0]
-                
+selected_age_group = st.selectbox("🧒 Select your Age Group:", list(age_groups.keys()))
+
+# Initialize session
+if "session_initialized" not in st.session_state or st.session_state.age_group != selected_age_group:
+    st.session_state.age_group = selected_age_group
+    st.session_state.category = None
+    st.session_state.question_index = 0
+    st.session_state.show_answer = False
+    st.session_state.show_steps = False
+    st.session_state.session_initialized = True
+
+# Load dataset
+group_info = age_groups[selected_age_group]
+dataset_path = group_info["dataset"]
+zip_path = group_info["zip_file"]
+image_folder = group_info["image_folder"]
+
+# Create image folder in temp directory
+temp_image_folder = os.path.join(st.session_state.temp_dir, image_folder)
+os.makedirs(temp_image_folder, exist_ok=True)
+
+# Extract images if zip exists
+try:
+    if os.path.exists(zip_path):
+        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}")
+
+if not os.path.exists(dataset_path):
+    st.error(f"Dataset 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.stop()
+
+# Category selection
+categories = sorted(df['category'].dropna().unique())
+selected_category = st.selectbox("📚 Choose a Math Category:", options=categories)
+
+# Update session if category changes
+if st.session_state.category != selected_category:
+    st.session_state.category = selected_category
+    st.session_state.question_index = 0
+    st.session_state.show_answer = False
+    st.session_state.show_steps = False
+    st.rerun()
+
+# Filter questions by selected category only
+subset_df = df[df['category'] == selected_category].reset_index(drop=True)
+
+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)
+
+    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 image with error handling
+    if pd.notna(question.get('image')):
+        image_name = str(question['image']).strip()
+        image_found = False
+        for root, _, files in os.walk(temp_image_folder):
+            for file in files:
+                if file.lower().startswith(image_name.lower()) or os.path.splitext(file)[0].lower() == image_name.lower():
+                    try:
+                        st.image(Image.open(os.path.join(root, file)), use_column_width=True)
+                        image_found = True
+                        break
+                    except:
+                        pass
+        if not image_found:
+            st.warning("❌ Image not found.")
+
+    user_ans = st.text_input("📝 Your Answer:", key=f"ans_{st.session_state.question_index}")
+
+    if st.button("✅ Submit Answer"):
+        if str(user_ans).strip().lower() == str(question['answer']).strip().lower():
+            st.success("🎉 Correct! Well done!")
+            st.balloons()
+            time.sleep(2)
+            st.session_state.question_index += 1
+            st.session_state.show_answer = False
+            st.session_state.show_steps = False
             st.rerun()
         else:
-            if st.button("Start New Adventure", use_container_width=True):
-                st.session_state.last_activity = time.time()
-                age_state['question_index'] = 0
-                age_state['show_answer'] = False
-                age_state['show_steps'] = False
-                st.rerun()
-
-with col2:
-    st.markdown("### Fun Zone")
-    st.markdown("""
-    <div style="text-align: center; font-size: 40px; margin: 20px 0;">
-        🎪<br>✨<br>🌟
-    </div>
-    """, unsafe_allow_html=True)
-    
-    st.markdown("### Progress")
-    if not subset_df.empty:
-        completed = min(age_state['question_index'], len(subset_df))
-        st.metric("Completed", f"{completed}/{len(subset_df)}")
+            st.error("❌ Try again or view the correct answer below.")
+            st.session_state.show_answer = True
+            st.session_state.show_steps = False
+
+    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.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']}")
+
+    if st.button("⏭️ Skip"):
+        st.session_state.question_index += 1
+        st.session_state.show_answer = False
+        st.session_state.show_steps = False
+        st.rerun()
+elif subset_df.empty:
+    st.warning("⚠️ No questions available in this category. Try another one.")
+else:
+    st.success("🏁 You've completed all questions in this category!")
 
 # Cleanup function
 def cleanup():