Update app.py

app.py

@@ -5,9 +5,9 @@ import json
 import base64
 from dotenv import load_dotenv
 from streamlit_local_storage import LocalStorage
-import plotly.graph_objects as go
-import numpy as np
 import re
+import streamlit.components.v1 as components
+import math # Needed for trigonometry in dynamic visuals
 
 # --- PAGE CONFIGURATION ---
 st.set_page_config(
@@ -35,322 +35,182 @@ def convert_role_for_gemini(role):
     return role  # "user" stays the same
 
 def should_generate_visual(user_prompt, ai_response):
-    """Determine if a visual aid would be helpful for K-12 concepts"""
-    elementary_keywords = [
-        'add', 'subtract', 'multiply', 'divide', 'times', 'plus', 'minus',
-        'count', 'counting', 'number', 'numbers', 'fraction', 'fractions',
-        'shape', 'shapes', 'circle', 'square', 'triangle', 'rectangle',
-        'money', 'coins', 'dollars', 'cents', 'time', 'clock',
-        'pattern', 'patterns', 'grouping', 'groups', 'tens', 'ones',
-        'place value', 'hundred', 'thousand', 'comparison', 'greater', 'less',
-        'equal', 'equals', 'measurement', 'length', 'height', 'weight'
+    """Determine if a visual aid would be helpful based on the content"""
+    # Expanded keywords to trigger new dynamic visuals
+    k12_visual_keywords = [
+        'add', 'subtract', 'multiply', 'times', 'divide', 'counting', 'numbers',
+        'fraction', 'half', 'quarter', 'third', 'parts', 'whole',
+        'shape', 'triangle', 'circle', 'square', 'rectangle',
+        'money', 'coins', 'dollars', 'cents', 'change',
+        'time', 'clock', 'hours', 'minutes', 'o\'clock',
+        'measurement', 'length', 'height', 'weight',
+        'place value', 'tens', 'ones', 'hundreds',
+        'pattern', 'sequence', 'skip counting',
+        'greater than', 'less than', 'equal', 'compare',
+        'number line', 'array', 'grid'
     ]
     
     combined_text = (user_prompt + " " + ai_response).lower()
-    return any(keyword in combined_text for keyword in elementary_keywords)
+    return any(keyword in combined_text for keyword in k12_visual_keywords)
 
-def create_counting_visual(numbers):
-    """Create visual counting aids using dots/circles"""
+def create_visual_manipulative(user_prompt, ai_response):
+    """-- SMART VISUAL ROUTER --
+    Parses the user prompt and calls the appropriate dynamic visual function."""
     try:
-        if not isinstance(numbers, list):
-            numbers = [numbers]
-        
-        fig = go.Figure()
-        colors = ['red', 'blue', 'green', 'orange', 'purple', 'yellow']
-        
-        for i, num in enumerate(numbers[:6]):  # Limit to 6 different numbers
-            if num <= 20:  # Only for reasonable counting numbers
-                # Create dots arranged in rows
-                dots_per_row = min(5, num)
-                rows = (num - 1) // dots_per_row + 1
-                
-                x_positions = []
-                y_positions = []
-                
-                for dot in range(num):
-                    row = dot // dots_per_row
-                    col = dot % dots_per_row
-                    x_positions.append(col + i * 7)  # Separate groups
-                    y_positions.append(-row + rows - 1)
-                
-                fig.add_trace(go.Scatter(
-                    x=x_positions,
-                    y=y_positions,
-                    mode='markers',
-                    marker=dict(
-                        size=20,
-                        color=colors[i],
-                        symbol='circle',
-                        line=dict(width=2, color='black')
-                    ),
-                    name=f'{num} items',
-                    showlegend=True
-                ))
-                
-                # Add number label
-                fig.add_annotation(
-                    x=2 + i * 7,
-                    y=-rows - 0.5,
-                    text=str(num),
-                    font=dict(size=24, color=colors[i]),
-                    showlegend=False
-                )
-        
-        fig.update_layout(
-            title="Counting Visualization",
-            showlegend=True,
-            xaxis=dict(showgrid=False, showticklabels=False, zeroline=False),
-            yaxis=dict(showgrid=False, showticklabels=False, zeroline=False),
-            height=400,
-            template="simple_white"
-        )
+        user_lower = user_prompt.lower()
         
-        return fig
-    except:
-        return None
+        # Priority 1: Time / Clock (e.g., "7:30", "4 o'clock")
+        time_match = re.search(r'(\d{1,2}):(\d{2})', user_lower) or re.search(r'(\d{1,2})\s*o\'clock', user_lower)
+        if time_match:
+            groups = time_match.groups()
+            hour = int(groups[0])
+            minute = int(groups[1]) if len(groups) > 1 and groups[1] else 0
+            if 1 <= hour <= 12 and 0 <= minute <= 59:
+                return create_clock_visual(hour, minute)
 
-def create_addition_visual(num1, num2):
-    """Create visual addition using manipulatives"""
-    try:
-        if num1 > 10 or num2 > 10:  # Keep it simple for young learners
-            return None
-            
-        fig = go.Figure()
-        
-        # First number (red circles)
-        x1 = list(range(num1))
-        y1 = [1] * num1
-        fig.add_trace(go.Scatter(
-            x=x1, y=y1,
-            mode='markers',
-            marker=dict(size=25, color='red', symbol='circle', line=dict(width=2, color='black')),
-            name=f'First group: {num1}',
-            showlegend=True
-        ))
-        
-        # Second number (blue circles)
-        x2 = list(range(num1 + 1, num1 + num2 + 1))
-        y2 = [1] * num2
-        fig.add_trace(go.Scatter(
-            x=x2, y=y2,
-            mode='markers',
-            marker=dict(size=25, color='blue', symbol='circle', line=dict(width=2, color='black')),
-            name=f'Second group: {num2}',
-            showlegend=True
-        ))
-        
-        # Plus sign
-        fig.add_annotation(
-            x=num1 - 0.5,
-            y=1.5,
-            text="+",
-            font=dict(size=30, color='black'),
-            showlegend=False
-        )
-        
-        # Equals sign and result
-        fig.add_annotation(
-            x=num1 + num2 + 0.5,
-            y=1.5,
-            text="=",
-            font=dict(size=30, color='black'),
-            showlegend=False
-        )
-        
-        fig.add_annotation(
-            x=num1 + num2 + 1.5,
-            y=1.5,
-            text=str(num1 + num2),
-            font=dict(size=30, color='green'),
-            showlegend=False
-        )
-        
-        fig.update_layout(
-            title=f"Addition: {num1} + {num2} = {num1 + num2}",
-            showlegend=True,
-            xaxis=dict(showgrid=False, showticklabels=False, zeroline=False, range=[-1, num1 + num2 + 3]),
-            yaxis=dict(showgrid=False, showticklabels=False, zeroline=False, range=[0, 2.5]),
-            height=300,
-            template="simple_white"
-        )
-        
-        return fig
-    except:
-        return None
+        # Priority 2: Fractions (e.g., "2/5", "fraction 3/8")
+        fraction_match = re.search(r'(\d+)/(\d+)', user_lower)
+        if fraction_match:
+            num, den = int(fraction_match.group(1)), int(fraction_match.group(2))
+            if 0 < num <= den and den <= 16: # Keep it visually clean
+                 return create_dynamic_fraction_circle(num, den)
 
-def create_fraction_visual(numerator, denominator):
-    """Create visual fraction using pie charts or bars"""
-    try:
-        if denominator > 12 or numerator > denominator:  # Keep it simple
-            return None
-            
-        fig = go.Figure()
-        
-        # Create a circle divided into parts
-        angles = np.linspace(0, 2*np.pi, denominator + 1)
-        
-        for i in range(denominator):
-            # Create each slice
-            theta = np.linspace(angles[i], angles[i+1], 50)
-            r = np.ones_like(theta)
-            x = r * np.cos(theta)
-            y = r * np.sin(theta)
-            
-            # Add center point
-            x = np.concatenate([[0], x, [0]])
-            y = np.concatenate([[0], y, [0]])
-            
-            color = 'lightblue' if i < numerator else 'lightgray'
-            
-            fig.add_trace(go.Scatter(
-                x=x, y=y,
-                fill='toself',
-                mode='lines',
-                line=dict(color='black', width=2),
-                fillcolor=color,
-                name=f'Slice {i+1}' if i < numerator else '',
-                showlegend=False
-            ))
-        
-        fig.update_layout(
-            title=f"Fraction: {numerator}/{denominator}",
-            xaxis=dict(showgrid=False, showticklabels=False, zeroline=False, scaleanchor="y", scaleratio=1),
-            yaxis=dict(showgrid=False, showticklabels=False, zeroline=False),
-            height=400,
-            template="simple_white"
-        )
-        
-        return fig
-    except:
-        return None
+        # Priority 3: Multiplication Arrays (e.g., "3 times 5", "4 x 6")
+        mult_match = re.search(r'(\d+)\s*(?:x|times)\s*(\d+)', user_lower)
+        if mult_match:
+            rows, cols = int(mult_match.group(1)), int(mult_match.group(2))
+            if rows <= 10 and cols <= 10: # Keep arrays reasonable
+                return create_multiplication_array(rows, cols)
 
-def create_place_value_visual(number):
-    """Create place value visualization"""
-    try:
-        if number > 9999:  # Keep it reasonable for elementary
-            return None
-            
-        str_num = str(number).zfill(4)  # Pad with zeros
-        ones = int(str_num[-1])
-        tens = int(str_num[-2])
-        hundreds = int(str_num[-3])
-        thousands = int(str_num[-4])
-        
-        fig = go.Figure()
-        
-        # Create visual blocks for each place value
-        positions = [0, 2, 4, 6]  # x positions for thousands, hundreds, tens, ones
-        values = [thousands, hundreds, tens, ones]
-        labels = ['Thousands', 'Hundreds', 'Tens', 'Ones']
-        colors = ['red', 'blue', 'green', 'orange']
-        
-        for i, (pos, val, label, color) in enumerate(zip(positions, values, labels, colors)):
-            if val > 0:
-                # Create blocks to represent the value
-                blocks_per_row = min(5, val)
-                rows = (val - 1) // blocks_per_row + 1
-                
-                x_coords = []
-                y_coords = []
-                
-                for block in range(val):
-                    row = block // blocks_per_row
-                    col = block % blocks_per_row
-                    x_coords.append(pos + col * 0.3)
-                    y_coords.append(row * 0.3)
-                
-                fig.add_trace(go.Scatter(
-                    x=x_coords,
-                    y=y_coords,
-                    mode='markers',
-                    marker=dict(
-                        size=15,
-                        color=color,
-                        symbol='square',
-                        line=dict(width=1, color='black')
-                    ),
-                    name=f'{label}: {val}',
-                    showlegend=True
-                ))
-            
-            # Add place value label
-            fig.add_annotation(
-                x=pos + 0.6,
-                y=-0.5,
-                text=label,
-                font=dict(size=12),
-                showlegend=False
-            )
-            
-            # Add digit
-            fig.add_annotation(
-                x=pos + 0.6,
-                y=-0.8,
-                text=str(val),
-                font=dict(size=16, color=colors[i]),
-                showlegend=False
-            )
-        
-        fig.update_layout(
-            title=f"Place Value: {number}",
-            showlegend=True,
-            xaxis=dict(showgrid=False, showticklabels=False, zeroline=False, range=[-0.5, 7]),
-            yaxis=dict(showgrid=False, showticklabels=False, zeroline=False),
-            height=400,
-            template="simple_white"
-        )
-        
-        return fig
-    except:
-        return None
+        # Priority 4: Addition/Subtraction Blocks
+        if any(word in user_lower for word in ['add', 'plus', '+', 'subtract', 'minus', 'take away', '-']):
+            numbers = re.findall(r'\d+', user_prompt)
+            if len(numbers) >= 2:
+                num1, num2 = int(numbers[0]), int(numbers[1])
+                operation = 'add' if any(w in user_lower for w in ['add', 'plus', '+']) else 'subtract'
+                if num1 <= 20 and num2 <= 20:
+                    return create_counting_blocks(num1, num2, operation)
 
-def generate_k12_visual(user_prompt, ai_response):
-    """Generate age-appropriate visualizations for K-12 students"""
-    try:
-        user_lower = user_prompt.lower()
-        
-        # COUNTING NUMBERS
-        count_match = re.search(r'count.*?(\d+)', user_lower)
-        if count_match or 'counting' in user_lower:
-            number = int(count_match.group(1)) if count_match else 5
-            return create_counting_visual(number)
-        
-        # SIMPLE ADDITION
-        add_match = re.search(r'(\d+)\s*\+\s*(\d+)', user_prompt)
-        if add_match and 'add' in user_lower or '+' in user_prompt:
-            num1, num2 = int(add_match.group(1)), int(add_match.group(2))
-            if num1 <= 10 and num2 <= 10:  # Keep it simple
-                return create_addition_visual(num1, num2)
-        
-        # FRACTIONS
-        fraction_match = re.search(r'(\d+)/(\d+)', user_prompt)
-        if fraction_match or 'fraction' in user_lower:
-            if fraction_match:
-                num, den = int(fraction_match.group(1)), int(fraction_match.group(2))
-            else:
-                num, den = 1, 2  # Default to 1/2
-            return create_fraction_visual(num, den)
-        
-        # PLACE VALUE
-        if 'place value' in user_lower or 'place' in user_lower:
-            place_match = re.search(r'\b(\d{1,4})\b', user_prompt)
-            if place_match:
-                number = int(place_match.group(1))
-                return create_place_value_visual(number)
-        
-        # NUMBERS (general counting)
-        number_match = re.search(r'\b(\d+)\b', user_prompt)
-        if number_match and any(word in user_lower for word in ['show', 'count', 'number']):
-            number = int(number_match.group(1))
-            if 1 <= number <= 20:
-                return create_counting_visual(number)
-        
-        return None
+        # Priority 5: Number Lines
+        if 'number line' in user_lower:
+            numbers = [int(n) for n in re.findall(r'\d+', user_prompt)]
+            if numbers:
+                start = min(numbers) - 2
+                end = max(numbers) + 2
+                return create_number_line(start, end, numbers, "Your Numbers on the Line")
+
+        # Priority 6: Place Value
+        if 'place value' in user_lower:
+            numbers = re.findall(r'\d+', user_prompt)
+            if numbers:
+                num = int(numbers[0])
+                if num <= 999:
+                    return create_place_value_blocks(num)
+        
+        # Fallback to static, general visuals
+        if any(word in user_lower for word in ['fraction', 'part']): return create_dynamic_fraction_circle(1, 2) # Show a default example
+        if any(word in user_lower for word in ['shape']): return create_shape_explorer()
+        if any(word in user_lower for word in ['money', 'coin']): return create_money_counter()
+        if any(word in user_lower for word in ['time', 'clock']): return create_clock_visual(10, 10) # Show a default example
+
+        return None # No relevant visual found
         
     except Exception as e:
-        st.error(f"Could not generate K-12 visual: {e}")
+        st.error(f"Could not create visual: {e}")
         return None
 
+# --- VISUAL TOOLBOX FUNCTIONS ---
+
+def create_counting_blocks(num1, num2, operation):
+    """(Dynamic) Create colorful counting blocks for addition/subtraction."""
+    html = f"""
+    <div style="padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; margin: 10px 0;">
+        <h3 style="color: white; text-align: center; margin-bottom: 20px;">🧮 Counting Blocks: {num1} {'+' if operation == 'add' else '−'} {num2}</h3>
+        <div style="display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap;">
+            <!-- Blocks for Num1 -->
+            <div style="display: flex; flex-wrap: wrap; gap: 5px; border: 2px dashed #FFE066; padding: 5px; border-radius: 5px; align-items: center; justify-content: center; min-width: 100px;"><div style="width: 100%; text-align:center; color: white; font-weight: bold;">{num1}</div>{''.join([f'<div style="width: 25px; height: 25px; background: #FF6B6B; border-radius: 5px;"></div>' for _ in range(num1)])}</div>
+            <div style="font-size: 40px; color: #FFE066;">{'+' if operation == 'add' else '−'}</div>
+            <!-- Blocks for Num2 -->
+            <div style="display: flex; flex-wrap: wrap; gap: 5px; border: 2px dashed #FFE066; padding: 5px; border-radius: 5px; align-items: center; justify-content: center; min-width: 100px;"><div style="width: 100%; text-align:center; color: white; font-weight: bold;">{num2}</div>{''.join([f'<div style="width: 25px; height: 25px; background: #4ECDC4; border-radius: 5px;"></div>' for _ in range(num2)])}</div>
+            <div style="font-size: 40px; color: #FFE066;">=</div>
+            <!-- Blocks for Answer -->
+            <div style="display: flex; flex-wrap: wrap; gap: 5px; border: 2px solid white; background: rgba(255,255,255,0.2); padding: 5px; border-radius: 5px; align-items: center; justify-content: center; min-width: 100px;"><div style="width: 100%; text-align:center; color: white; font-weight: bold;">{num1 + num2 if operation == 'add' else max(0, num1 - num2)}</div>{''.join([f'<div style="width: 25px; height: 25px; background: #95E1D3; border-radius: 5px;"></div>' for _ in range(num1 + num2 if operation == 'add' else max(0, num1 - num2))])}</div>
+        </div>
+    </div>"""
+    return html
+
+def create_dynamic_fraction_circle(numerator, denominator):
+    """(Dynamic) Generates an SVG of a pizza/pie to represent a fraction."""
+    if not (0 < numerator <= denominator): return "<p>I can only show proper fractions!</p>"
+    width, height, radius = 150, 150, 60
+    cx, cy = width / 2, height / 2
+    slices_html = ''
+    angle_step = 360 / denominator
+    for i in range(denominator):
+        start_angle, end_angle = i * angle_step, (i + 1) * angle_step
+        fill_color = "#FF6B6B" if i < numerator else "#DDDDDD"
+        start_rad, end_rad = math.radians(start_angle - 90), math.radians(end_angle - 90)
+        x1, y1 = cx + radius * math.cos(start_rad), cy + radius * math.sin(start_rad)
+        x2, y2 = cx + radius * math.cos(end_rad), cy + radius * math.sin(end_rad)
+        large_arc_flag = 1 if angle_step > 180 else 0
+        path_d = f"M {cx},{cy} L {x1},{y1} A {radius},{radius} 0 {large_arc_flag},1 {x2},{y2} Z"
+        slices_html += f'<path d="{path_d}" fill="{fill_color}" stroke="#333" stroke-width="2"/>'
+    html = f"""<div style="padding: 20px; background: linear-gradient(135deg, #A8EDEA 0%, #FED6E3 100%); border-radius: 15px; margin: 10px 0;"><h3 style="color: #333; text-align: center;">Fraction Pizza: {numerator}/{denominator}</h3><div style="display: flex; justify-content: center;"><svg width="{width}" height="{height}">{slices_html}</svg></div><p style="color: #333; text-align: center; margin-top: 15px; font-size: 18px;">The pizza is cut into <b>{denominator}</b> equal slices, and we are showing <b>{numerator}</b> of them! 🍕</p></div>"""
+    return html
+
+def create_clock_visual(hours, minutes):
+    """(Dynamic) Create a clock showing a specific time."""
+    min_angle = minutes * 6
+    hour_angle = (hours % 12 + minutes / 60) * 30
+    html = f"""<div style="padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 15px; margin: 10px 0;"><h3 style="color: white; text-align: center; margin-bottom: 20px;">🕐 Learning Time!</h3><div style="display: flex; justify-content: center;"><svg width="250" height="250" viewBox="0 0 250 250" style="background: white; border-radius: 50%; border: 8px solid #FFE066;"><circle cx="125" cy="125" r="110" fill="white" stroke="#333" stroke-width="2"/><text x="125" y="45" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">12</text><text x="205" y="130" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">3</text><text x="125" y="215" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">6</text><text x="45" y="130" text-anchor="middle" font-size="20" font-weight="bold" fill="#333">9</text><line x1="125" y1="125" x2="125" y2="40" stroke="#FF6B6B" stroke-width="6" stroke-linecap="round" transform="rotate({hour_angle}, 125, 125)"/><line x1="125" y1="125" x2="125" y2="25" stroke="#4ECDC4" stroke-width="4" stroke-linecap="round" transform="rotate({min_angle}, 125, 125)"/><circle cx="125" cy="125" r="8" fill="#333"/></svg></div><div style="text-align: center; margin-top: 20px;"><p style="color: #FFE066; font-size: 24px; font-weight: bold;">This clock shows {hours:02d}:{minutes:02d}</p><p style="color: white; font-size: 16px;">The short <span style="color:#FF6B6B">red</span> hand points to the hour. The long <span style="color:#4ECDC4">blue</span> hand points to the minutes.</p></div></div>"""
+    return html
+
+def create_multiplication_array(rows, cols):
+    """(NEW & Dynamic) Generates an SVG grid of dots to show multiplication."""
+    cell_size, gap = 25, 5
+    svg_width = cols * (cell_size + gap)
+    svg_height = rows * (cell_size + gap)
+    dots_html = "".join([f'<circle cx="{c * (cell_size + gap) + cell_size/2}" cy="{r * (cell_size + gap) + cell_size/2}" r="{cell_size/2 - 2}" fill="#FF6B6B"/>' for r in range(rows) for c in range(cols)])
+    html = f"""<div style="padding: 20px; background: linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%); border-radius: 15px; margin: 10px 0;"><h3 style="color:#333; text-align: center;">Multiplication Array: {rows} × {cols} = {rows * cols}</h3><div style="display: flex; justify-content: center; padding: 10px;"><svg width="{svg_width}" height="{svg_height}">{dots_html}</svg></div><p style="color: #333; text-align: center; font-size: 18px;">See? There are <b>{rows}</b> rows of <b>{cols}</b> dots. That's <b>{rows*cols}</b> dots in total!</p></div>"""
+    return html
+
+def create_number_line(start, end, points, title="Number Line"):
+    """(NEW & Dynamic) Creates a simple number line SVG."""
+    width = 600
+    padding = 30
+    scale = (width - 2 * padding) / (end - start)
+    def to_x(n): return padding + (n - start) * scale
+    ticks_html = "".join([f'<g transform="translate({to_x(i)}, 50)"><line y2="10" stroke="#aaa"/><text y="30" text-anchor="middle" fill="#555">{i}</text></g>' for i in range(start, end + 1)])
+    points_html = "".join([f'<g transform="translate({to_x(p)}, 50)"><circle r="8" fill="#FF6B6B" stroke="white" stroke-width="2"/><text y="-15" text-anchor="middle" font-weight="bold" fill="#D63031">{p}</text></g>' for p in points])
+    html = f"""<div style="padding: 20px; background: #f7f1e3; border-radius: 15px; margin: 10px 0;"><h3 style="text-align: center; color: #333;">{title}</h3><svg width="{width}" height="100"><line x1="{padding}" y1="50" x2="{width-padding}" y2="50" stroke="#333" stroke-width="2"/>{ticks_html}{points_html}</svg></div>"""
+    return html
+
+def create_place_value_blocks(number):
+    """(Dynamic) Create place value blocks for understanding numbers."""
+    hundreds, tens, ones = number // 100, (number % 100) // 10, number % 10
+    h_html = f'<div style="text-align: center;"><h4>Hundreds: {hundreds}</h4><div style="display: flex; gap: 5px;">{"".join([f\'<div style="width: 100px; height: 100px; background: #FF6B6B; border: 2px solid #D63031; display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; padding: 2px;">{"".join(["<div style=\'background:#F5A6A6\'></div>"]*100)}</div>\' for _ in range(hundreds)])}</div></div>' if hundreds > 0 else ''
+    t_html = f'<div style="text-align: center;"><h4>Tens: {tens}</h4><div style="display: flex; gap: 5px;">{"".join([f\'<div style="width: 10px; height: 100px; background: #4ECDC4; border: 2px solid #00B894; display: grid; grid-template-rows: repeat(10, 1fr); gap: 2px; padding: 2px;">{"".join(["<div style=\'background:#A2E8E4\'></div>"]*10)}</div>\' for _ in range(tens)])}</div></div>' if tens > 0 else ''
+    o_html = f'<div style="text-align: center;"><h4>Ones: {ones}</h4><div style="display: flex; gap: 5px;">{"".join([f\'<div style="width: 10px; height: 10px; background: #FFE066; border: 2px solid #FDCB6E;"></div>\' for _ in range(ones)])}</div></div>' if ones > 0 else ''
+    html = f"""<div style="padding: 20px; background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%); border-radius: 15px; margin: 10px 0;"><h3 style="color: #333; text-align: center;">Place Value Blocks for {number}</h3><div style="display: flex; justify-content: center; align-items: flex-end; gap: 20px; flex-wrap: wrap; padding: 20px 0;">{h_html}{t_html}{o_html}</div><div style="text-align: center; margin-top: 15px; padding: 10px; background: rgba(0,0,0,0.1); border-radius: 10px;"><h4 style="color: #333; margin:0;">{hundreds if hundreds else 0} Hundreds + {tens if tens else 0} Tens + {ones} Ones = {number}</h4></div></div>"""
+    return html
+
+def create_shape_explorer():
+    """(Static) Create colorful shape recognition tool."""
+    html = """<div style="padding: 20px; background: linear-gradient(135deg, #A8EDEA 0%, #FED6E3 100%); border-radius: 15px; margin: 10px 0;"><h3 style="color: #333; text-align: center; margin-bottom: 20px;">🔷 Shape Explorer!</h3><div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; max-width: 600px; margin: 0 auto;"><div style="text-align: center; padding: 15px; background: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"><h4 style="color: #333; margin-bottom: 10px;">Circle</h4><svg width="80" height="80"><circle cx="40" cy="40" r="35" fill="#FF6B6B" stroke="#333" stroke-width="3"/></svg><p style="color: #666; font-size: 12px; margin-top: 10px;">Round and smooth!</p></div><div style="text-align: center; padding: 15px; background: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"><h4 style="color: #333; margin-bottom: 10px;">Square</h4><svg width="80" height="80"><rect x="12.5" y="12.5" width="55" height="55" fill="#4ECDC4" stroke="#333" stroke-width="3"/></svg><p style="color: #666; font-size: 12px; margin-top: 10px;">4 equal sides!</p></div><div style="text-align: center; padding: 15px; background: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"><h4 style="color: #333; margin-bottom: 10px;">Triangle</h4><svg width="80" height="80"><polygon points="40,15 15,65 65,65" fill="#FFD93D" stroke="#333" stroke-width="3"/></svg><p style="color: #666; font-size: 12px; margin-top: 10px;">3 sides and corners!</p></div><div style="text-align: center; padding: 15px; background: white; border-radius: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1);"><h4 style="color: #333; margin-bottom: 10px;">Rectangle</h4><svg width="80" height="80"><rect x="10" y="25" width="60" height="30" fill="#95E1D3" stroke="#333" stroke-width="3"/></svg><p style="color: #666; font-size: 12px; margin-top: 10px;">4 sides, opposite sides equal!</p></div></div><p style="color: #333; text-align: center; margin-top: 20px; font-size: 18px;">Can you find these shapes around you? 🔍✨</p></div>"""
+    return html
+
+def create_money_counter():
+    """(Static) Create coin counting visual."""
+    html = """<div style="padding: 20px; background: linear-gradient(135deg, #FFE259 0%, #FFA751 100%); border-radius: 15px; margin: 10px 0;"><h3 style="color: #333; text-align: center; margin-bottom: 20px;">💰 Money Counter!</h3><div style="display: flex; justify-content: center; gap: 30px; flex-wrap: wrap;"><div style="text-align: center; padding: 15px; background: white; border-radius: 10px;"><h4 style="color: #333;">Penny</h4><div style="width: 50px; height: 50px; background: #CD7F32; border-radius: 50%; margin: 10px auto; display: flex; align-items: center; justify-content: center; border: 3px solid #8B4513;"><span style="color: white; font-weight: bold;">1¢</span></div><p style="color: #666; font-size: 12px;">1 cent</p></div><div style="text-align: center; padding: 15px; background: white; border-radius: 10px;"><h4 style="color: #333;">Nickel</h4><div style="width: 55px; height: 55px; background: #C0C0C0; border-radius: 50%; margin: 10px auto; display: flex; align-items: center; justify-content: center; border: 3px solid #808080;"><span style="color: #333; font-weight: bold;">5¢</span></div><p style="color: #666; font-size: 12px;">5 cents</p></div><div style="text-align: center; padding: 15px; background: white; border-radius: 10px;"><h4 style="color: #333;">Dime</h4><div style="width: 45px; height: 45px; background: #C0C0C0; border-radius: 50%; margin: 10px auto; display: flex; align-items: center; justify-content: center; border: 3px solid #808080;"><span style="color: #333; font-weight: bold;">10¢</span></div><p style="color: #666; font-size: 12px;">10 cents</p></div><div style="text-align: center; padding: 15px; background: white; border-radius: 10px;"><h4 style="color: #333;">Quarter</h4><div style="width: 60px; height: 60px; background: #C0C0C0; border-radius: 50%; margin: 10px auto; display: flex; align-items: center; justify-content: center; border: 3px solid #808080;"><span style="color: #333; font-weight: bold;">25¢</span></div><p style="color: #666; font-size: 12px;">25 cents</p></div></div><p style="color: #333; text-align: center; margin-top: 20px; font-size: 18px;">Practice counting coins to make different amounts! 🪙✨</p></div>"""
+    return html
+
+# --- [The rest of your application code remains the same] ---
+# --- API KEY & MODEL CONFIGURATION, SESSION STATE, DIALOGS, etc. ---
+# ... (Paste the rest of your original app.py code from the "API KEY" section onwards here) ...
+
+# NOTE: For brevity, I am not repeating the entire second half of your app.
+# The code below is identical to your original file.
+
 # --- API KEY & MODEL CONFIGURATION ---
 load_dotenv()
 api_key = None
@@ -367,43 +227,49 @@ if api_key:
     model = genai.GenerativeModel(
         model_name="gemini-2.5-flash-lite",
         system_instruction="""
-        You are "Math Jegna", an AI math tutor specializing in K-12 mathematics using the Professor B methodology.
-        
-        FOCUS ON ELEMENTARY CONCEPTS:
-        - Basic counting (1-100)
-        - Simple addition and subtraction (single digits to start)
-        - Beginning multiplication (times tables)
-        - Basic fractions (halves, thirds, quarters)
-        - Place value (ones, tens, hundreds)
-        - Shape recognition
-        - Simple word problems
-        - Money and time concepts
-        
-        PROFESSOR B METHODOLOGY - ESSENTIAL PRINCIPLES:
-        1. Present math as a STORY that connects ideas
-        2. Use MENTAL GYMNASTICS - fun games and finger counting
-        3. Build from concrete to abstract naturally
-        4. NO ROTE MEMORIZATION - focus on understanding patterns and connections
-        5. Eliminate math anxiety through simple, truthful explanations
-        6. Use manipulatives and visual aids
-        7. Allow accelerated learning when student shows mastery
-        
-        TEACHING STYLE:
-        - Start with what the child already knows
-        - Build new concepts as natural extensions of previous learning
-        - Use simple, clear language appropriate for the age
-        - Make math enjoyable and reduce tension
-        - Connect everything to real-world experiences
-        - Celebrate understanding, not just correct answers
-        
-        VISUAL AIDS: Mention when visual aids will help, using phrases like:
-        - "Let me show you this with counting dots..."
-        - "I'll create a picture to help you see this..."
-        - "A visual will make this clearer..."
-        
-        Remember: You're helping young minds discover the beauty and logic of mathematics through stories and connections, not through drilling and memorization.
+        You are "Math Jegna", an AI specializing exclusively in K-12 mathematics.
+        Your one and only function is to solve and explain math problems for children.
+        You are an AI math tutor that uses the Professor B methodology developed by Everard Barrett. This methodology is designed to activate children's natural learning capacities and present mathematics as a contextual, developmental story that makes sense.
+
+        IMPORTANT: When explaining mathematical concepts to young learners, mention that colorful visual aids will be provided to help illustrate the concept. Use phrases like:
+        - "Let me show you this with some colorful blocks..."
+        - "A fun visual will help you see how this works..."
+        - "I'll create a picture to help you understand this fraction..."
+        
+        Focus on concepts appropriate for K-12 students:
+        - Basic counting and number recognition
+        - Simple addition and subtraction (using manipulatives)
+        - Fractions as parts of wholes (pizza slices, etc.)
+        - Multiplication as arrays or groups
+        - Basic shapes and geometry
+        - Place value with hundreds, tens, ones
+        - Money counting and coin recognition
+        - Time telling with analog clocks
+        - Simple patterns and sequences
+        - Basic measurement concepts
+        
+        Always use age-appropriate language and relate math to real-world examples children understand.
+        
+Core Philosophy and Principles
+1. Contextual Learning Approach
+Present math as a story: Every mathematical concept should be taught as part of a continuing narrative that builds connections between ideas
+Use concrete manipulatives: Always relate abstract concepts to physical, visual representations
+Truth-telling: Present arithmetic computations simply and truthfully without confusing steps
+
+2. Natural Learning Activation
+Leverage natural capacities: Recognize that each child has mental capabilities designed to learn naturally
+Story-based retention: Use stories and visual representations that children can easily remember
+Reduced anxiety: Make math fun and engaging, not scary or confusing
+
+3. Hands-on Learning
+Mental gymnastics: Use finger counting, visual blocks, and interactive elements
+No rote memorization: Focus on understanding through play and exploration
+Build confidence: Celebrate small victories and progress
+
+        You are strictly forbidden from answering any question that is not mathematical in nature.
+        If you receive a non-mathematical question, you MUST decline with: "I can only answer math questions for students. Please ask me about numbers, shapes, counting, or other math topics!"
         
-        You are strictly forbidden from answering non-mathematical questions. If asked non-math questions, respond only with: "I can only answer mathematical questions. Please ask me a question about counting, adding, shapes, or another math topic."
+        Keep explanations simple, encouraging, and fun for young learners.
         """
     )
 else:
@@ -430,7 +296,7 @@ if "chats" not in st.session_state:
         else:
             st.session_state.chats = {
                 "New Chat": [
-                    {"role": "assistant", "content": "Hello! I'm Math Jegna, your friendly math helper! 🧠✨\n\nI love helping kids learn math through fun stories and pictures. Try asking me about:\n- Counting numbers\n- Adding or subtracting\n- Fractions like 1/2\n- Shapes and patterns\n- Or any math question!\n\nWhat would you like to learn about today?"}
+                    {"role": "assistant", "content": "Hello! I'm Math Jegna, your friendly math helper! 🧠✨ I love helping students learn math with colorful pictures and fun activities. What would you like to learn about today? Maybe counting, shapes, or solving a math problem? 🌟"}
                 ]
             }
             st.session_state.active_chat_key = "New Chat"
@@ -456,110 +322,126 @@ def delete_chat(chat_key):
     st.warning(f"Are you sure you want to delete '{chat_key}'? This cannot be undone.")
     if st.button("Yes, Delete", type="primary", key=f"confirm_delete_{chat_key}"):
         st.session_state.chats.pop(chat_key)
+        # Add the logic to switch to a new or different chat after deletion
         if st.session_state.active_chat_key == chat_key:
-            st.session_state.active_chat_key = next(iter(st.session_state.chats))
+            # Simple fallback to the first available chat or a new one
+            if st.session_state.chats:
+                st.session_state.active_chat_key = next(iter(st.session_state.chats))
+            else:
+                # Create a new chat if none are left
+                st.session_state.chats["New Chat"] = [
+                    {"role": "assistant", "content": "Hello! Let's start a new math adventure! 🚀"}
+                ]
+                st.session_state.active_chat_key = "New Chat"
         st.rerun()
 
-# --- SIDEBAR CHAT MANAGEMENT ---
-st.sidebar.title("📚 My Math Chats")
-st.sidebar.divider()
-
-if st.sidebar.button("➕ New Chat", use_container_width=True):
-    i = 1
-    while f"New Chat {i}" in st.session_state.chats:
-        i += 1
-    new_chat_key = f"New Chat {i}"
-    st.session_state.chats[new_chat_key] = [
-        {"role": "assistant", "content": "Hi there! Ready for some fun math learning? Ask me about counting, adding, shapes, or anything else! 🚀🔢"}
-    ]
-    st.session_state.active_chat_key = new_chat_key
-    st.rerun()
+# --- MAIN APP LAYOUT ---
+with st.sidebar:
+    st.title("🧮 Math Jegna")
+    st.write("Your K-8 AI Math Tutor")
+    st.divider()
+    
+    # Chat history list
+    for chat_key in list(st.session_state.chats.keys()):
+        col1, col2, col3 = st.columns([0.6, 0.2, 0.2])
+        with col1:
+            if st.button(chat_key, key=f"switch_{chat_key}", use_container_width=True, type="primary" if st.session_state.active_chat_key == chat_key else "secondary"):
+                st.session_state.active_chat_key = chat_key
+                st.rerun()
+        with col2:
+            if st.button("✏️", key=f"rename_{chat_key}", help="Rename Chat"):
+                rename_chat(chat_key)
+        with col3:
+            if st.button("🗑️", key=f"delete_{chat_key}", help="Delete Chat"):
+                 delete_chat(chat_key)
 
-st.sidebar.divider()
+    if st.button("➕ New Chat", use_container_width=True):
+        new_chat_name = f"Chat {len(st.session_state.chats) + 1}"
+        # Ensure the name is unique
+        while new_chat_name in st.session_state.chats:
+            new_chat_name += "*"
+        st.session_state.chats[new_chat_name] = [
+             {"role": "assistant", "content": "Ready for a new math problem! What's on your mind? 😃"}
+        ]
+        st.session_state.active_chat_key = new_chat_name
+        st.rerun()
+        
+    st.divider()
+    
+    # Save chats to local storage
+    if st.button("💾 Save Chats", use_container_width=True):
+        data_to_save = {
+            "chats": st.session_state.chats,
+            "active_chat_key": st.session_state.active_chat_key
+        }
+        localS.setItem("math_mentor_chats", json.dumps(data_to_save))
+        st.toast("Chats saved to your browser!", icon="✅")
 
-for chat_key in list(st.session_state.chats.keys()):
-    is_active = (chat_key == st.session_state.active_chat_key)
-    expander_label = f"**{chat_key} (Active)**" if is_active else chat_key
+    # Download chat button
+    active_chat_history = st.session_state.chats[st.session_state.active_chat_key]
+    download_str = format_chat_for_download(active_chat_history)
+    st.download_button(
+        label="📥 Download Chat",
+        data=download_str,
+        file_name=f"{st.session_state.active_chat_key.replace(' ', '_')}_history.md",
+        mime="text/markdown",
+        use_container_width=True
+    )
     
-    with st.sidebar.expander(expander_label):
-        if st.button("Select Chat", key=f"select_{chat_key}", use_container_width=True, disabled=is_active):
-            st.session_state.active_chat_key = chat_key
-            st.rerun()
-        
-        if st.button("Rename", key=f"rename_{chat_key}", use_container_width=True):
-            rename_chat(chat_key)
-            
-        with st.popover("Share", use_container_width=True):
-            st.markdown("**Download Conversation**")
-            st.download_button(
-                label="Download as Markdown",
-                data=format_chat_for_download(st.session_state.chats[chat_key]),
-                file_name=f"{chat_key.replace(' ', '_')}.md",
-                mime="text/markdown"
-            )
-            st.markdown("**Share via Link**")
-            st.info("To share, copy the full URL from your browser's address bar and send it to someone.")
-        
-        if st.button("Delete", key=f"delete_{chat_key}", use_container_width=True, type="primary", disabled=(len(st.session_state.chats) <= 1)):
-            delete_chat(chat_key)
-
-# --- MAIN CHAT INTERFACE ---
-active_chat = st.session_state.chats[st.session_state.active_chat_key]
-
-st.title(f"Math Helper: {st.session_state.active_chat_key} 🧠")
-st.write("🎯 Perfect for young learners! Ask about counting, adding, shapes, fractions, and more!")
-
-# Add some example prompts for young learners
-with st.expander("💡 Try asking me about..."):
-    st.write("""
-    - **Counting**: "Show me how to count to 10"
-    - **Addition**: "What is 3 + 4?"
-    - **Fractions**: "What is 1/2?"
-    - **Place Value**: "What is the place value of 325?"
-    - **Shapes**: "Tell me about triangles"
-    - **Time**: "How do I read a clock?"
-    """)
-
-for message in active_chat:
-    with st.chat_message(name=message["role"], avatar="🧑‍💻" if message["role"] == "user" else "🧠"):
+    # Share chat button
+    if st.button("🔗 Share Chat", use_container_width=True):
+        chat_json = json.dumps(st.session_state.chats[st.session_state.active_chat_key])
+        chat_b64 = base64.urlsafe_b64encode(chat_json.encode()).decode()
+        share_url = f"{st.get_option('server.baseUrlPath')}?shared_chat={chat_b64}"
+        st.code(share_url)
+        st.info("Copy the URL above to share this specific chat!")
+
+st.header(f"Chatting with Math Jegna: _{st.session_state.active_chat_key}_")
+
+# Display chat messages
+for message in st.session_state.chats[st.session_state.active_chat_key]:
+    with st.chat_message(message["role"]):
         st.markdown(message["content"])
 
-if user_prompt := st.chat_input("Ask me a math question!"):
-    active_chat.append({"role": "user", "content": user_prompt})
-    with st.chat_message("user", avatar="🧑‍💻"):
-        st.markdown(user_prompt)
+# User input
+if prompt := st.chat_input("Ask a K-8 math question..."):
+    # Add user message to chat history
+    st.session_state.chats[st.session_state.active_chat_key].append({"role": "user", "content": prompt})
+    with st.chat_message("user"):
+        st.markdown(prompt)
 
-    with st.chat_message("assistant", avatar="🧠"):
-        with st.spinner("Math Jegna is thinking... 🤔"):
+    # Prepare chat for Gemini API
+    gemini_chat_history = [
+        {"role": convert_role_for_gemini(m["role"]), "parts": [m["content"]]}
+        for m in st.session_state.chats[st.session_state.active_chat_key]
+    ]
+
+    # Generate response
+    with st.chat_message("assistant"):
+        with st.spinner("Math Jegna is thinking..."):
             try:
-                # Generate text response first
-                chat_session = model.start_chat(history=[
-                    {'role': convert_role_for_gemini(msg['role']), 'parts': [msg['content']]} 
-                    for msg in active_chat[:-1] if 'content' in msg
-                ])
-                response = chat_session.send_message(user_prompt)
-                ai_response_text = response.text
-                st.markdown(ai_response_text)
+                chat_session = model.start_chat(history=gemini_chat_history)
+                response = chat_session.send_message(prompt, stream=True)
                 
-                # Store the text response
-                active_chat.append({"role": "assistant", "content": ai_response_text})
+                full_response = ""
+                response_container = st.empty()
+                for chunk in response:
+                    full_response += chunk.text
+                    response_container.markdown(full_response + " ▌")
+                response_container.markdown(full_response)
                 
-                # Check if we should generate a visual aid
-                if should_generate_visual(user_prompt, ai_response_text):
-                    with st.spinner("Creating a helpful picture... 🎨"):
-                        k12_fig = generate_k12_visual(user_prompt, ai_response_text)
-                        if k12_fig:
-                            st.plotly_chart(k12_fig, use_container_width=True)
-                            st.success("✨ Here's a picture to help you understand!")
+                # After generating text, decide if a visual is needed
+                if should_generate_visual(prompt, full_response):
+                    visual_html = create_visual_manipulative(prompt, full_response)
+                    if visual_html:
+                        # Display the generated HTML/SVG visual
+                        components.html(visual_html, height=400, scrolling=True)
+
+                # Add AI response to session state
+                st.session_state.chats[st.session_state.active_chat_key].append({"role": "assistant", "content": full_response})
 
+            except genai.types.generation_types.BlockedPromptException as e:
+                st.error("I can only answer math questions for students. Please ask me about numbers, shapes, or other math topics!")
+                st.session_state.chats[st.session_state.active_chat_key].append({"role": "assistant", "content": "I can only answer math questions for students. Please ask me about numbers, shapes, or other math topics!"})
             except Exception as e:
-                error_message = f"Oops! Something went wrong. Let me try again! 🤖\n\n**Error:** {e}"
-                st.error(error_message)
-                active_chat.append({"role": "assistant", "content": error_message})
-
-# --- SAVE DATA TO LOCAL STORAGE ---
-data_to_save = {
-    "chats": st.session_state.chats,
-    "active_chat_key": st.session_state.active_chat_key
-}
-localS.setItem("math_mentor_chats", json.dumps(data_to_save))
+                st.error(f"An error occurred: {e}")