Update app.py

app.py

@@ -38,7 +38,7 @@ def should_generate_visual(user_prompt, ai_response):
     """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',
+        'add', 'subtract', 'multiply', 'times', 'divide', 'divided by', 'counting', 'numbers',
         'fraction', 'half', 'quarter', 'third', 'parts', 'whole',
         'shape', 'triangle', 'circle', 'square', 'rectangle',
         'money', 'coins', 'dollars', 'cents', 'change',
@@ -47,20 +47,40 @@ def should_generate_visual(user_prompt, ai_response):
         'place value', 'tens', 'ones', 'hundreds',
         'pattern', 'sequence', 'skip counting',
         'greater than', 'less than', 'equal', 'compare',
-        'number line', 'array', 'grid'
+        'number line', 'array', 'grid', 'area model'
     ]
     
     combined_text = (user_prompt + " " + ai_response).lower()
-    return any(keyword in combined_text for keyword in k12_visual_keywords)
+    # Also check for symbols
+    return any(keyword in combined_text for keyword in k12_visual_keywords) or any(op in user_prompt for op in ['*', '/'])
+
 
 def create_visual_manipulative(user_prompt, ai_response):
     """-- SMART VISUAL ROUTER --
     Parses the user prompt and calls the appropriate dynamic visual function."""
     try:
-        user_lower = user_prompt.lower()
+        user_lower = user_prompt.lower().replace(' ', '') # Remove spaces for easier parsing
         
-        # 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)
+        # Priority 1: Division (e.g., "42 divided by 6", "21 / 3")
+        div_match = re.search(r'(\d+)dividedby(\d+)', user_lower) or re.search(r'(\d+)/(\d+)', user_lower)
+        if div_match and "fraction" not in user_lower: # Avoid confusion with fractions
+            dividend, divisor = int(div_match.group(1)), int(div_match.group(2))
+            if dividend <= 50 and divisor > 0: # Keep visuals manageable
+                return create_division_groups_visual(dividend, divisor)
+
+        # Priority 2: Multiplication (e.g., "3 times 5", "15 * 19")
+        mult_match = re.search(r'(\d+)(?:x|times|\*)(\d+)', user_lower)
+        if mult_match:
+            num1, num2 = int(mult_match.group(1)), int(mult_match.group(2))
+            # Use dot array for small numbers
+            if num1 <= 10 and num2 <= 10:
+                return create_multiplication_array(num1, num2)
+            # Use area model for larger numbers (up to 99x99)
+            elif 10 < num1 < 100 and 10 < num2 < 100:
+                return create_multiplication_area_model(num1, num2)
+
+        # Priority 3: 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})o\'clock', user_lower)
         if time_match:
             groups = time_match.groups()
             hour = int(groups[0])
@@ -68,22 +88,15 @@ def create_visual_manipulative(user_prompt, ai_response):
             if 1 <= hour <= 12 and 0 <= minute <= 59:
                 return create_clock_visual(hour, minute)
 
-        # Priority 2: Fractions (e.g., "2/5", "fraction 3/8")
+        # Priority 4: 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
+            if 0 < num <= den and den <= 16:
                  return create_dynamic_fraction_circle(num, den)
 
-        # 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)
-
-        # Priority 4: Addition/Subtraction Blocks
-        if any(word in user_lower for word in ['add', 'plus', '+', 'subtract', 'minus', 'take away', '-']):
+        # Priority 5: Addition/Subtraction Blocks
+        if any(word in user_lower for word in ['add', 'plus', '+', 'subtract', 'minus', 'takeaway', '-']):
             numbers = re.findall(r'\d+', user_prompt)
             if len(numbers) >= 2:
                 num1, num2 = int(numbers[0]), int(numbers[1])
@@ -91,16 +104,16 @@ def create_visual_manipulative(user_prompt, ai_response):
                 if num1 <= 20 and num2 <= 20:
                     return create_counting_blocks(num1, num2, operation)
 
-        # Priority 5: Number Lines
-        if 'number line' in user_lower:
+        # Priority 6: Number Lines
+        if 'numberline' 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:
+        # Priority 7: Place Value
+        if 'placevalue' in user_lower:
             numbers = re.findall(r'\d+', user_prompt)
             if numbers:
                 num = int(numbers[0])
@@ -108,10 +121,10 @@ def create_visual_manipulative(user_prompt, ai_response):
                     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 ['fraction', 'part']): return create_dynamic_fraction_circle(1, 2)
         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
+        if any(word in user_lower for word in ['time', 'clock']): return create_clock_visual(10, 10)
 
         return None # No relevant visual found
         
@@ -121,6 +134,74 @@ def create_visual_manipulative(user_prompt, ai_response):
 
 # --- VISUAL TOOLBOX FUNCTIONS ---
 
+def create_multiplication_area_model(num1, num2):
+    """(NEW & Dynamic) Creates an area model for 2-digit by 2-digit multiplication."""
+    n1_tens, n1_ones = num1 // 10, num1 % 10
+    n2_tens, n2_ones = num2 // 10, num2 % 10
+
+    p1 = n1_tens * n2_tens * 100  # E.g., 10 * 10
+    p2 = n1_tens * n2_ones * 10   # E.g., 10 * 9
+    p3 = n1_ones * n2_tens * 10   # E.g., 5 * 10
+    p4 = n1_ones * n2_ones       # E.g., 5 * 9
+    
+    total = p1 + p2 + p3 + p4
+
+    html = f"""
+    <div style="font-family: sans-serif; padding: 20px; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); border-radius: 15px; margin: 10px 0;">
+        <h3 style="text-align: center; color: #333;">Area Model for {num1} × {num2}</h3>
+        <div style="display: grid; grid-template-columns: auto 1fr 1fr; grid-template-rows: auto 1fr 1fr; gap: 5px; max-width: 400px; margin: 20px auto; color: #333;">
+            <!-- Corner --> <div/>
+            <div style="text-align: center; font-weight: bold; padding: 5px;">{n2_tens*10}</div>
+            <div style="text-align: center; font-weight: bold; padding: 5px;">{n2_ones}</div>
+            
+            <div style="text-align: center; font-weight: bold; padding: 5px;">{n1_tens*10}</div>
+            <div style="background: #FFADAD; padding: 20px; text-align: center; border-radius: 8px;"><b>{n1_tens*10}×{n2_tens*10}</b><br/>{p1}</div>
+            <div style="background: #FFD6A5; padding: 20px; text-align: center; border-radius: 8px;"><b>{n1_tens*10}×{n2_ones}</b><br/>{p2}</div>
+            
+            <div style="text-align: center; font-weight: bold; padding: 5px;">{n1_ones}</div>
+            <div style="background: #FDFFB6; padding: 20px; text-align: center; border-radius: 8px;"><b>{n1_ones}×{n2_tens*10}</b><br/>{p3}</div>
+            <div style="background: #CAFFBF; padding: 20px; text-align: center; border-radius: 8px;"><b>{n1_ones}×{n2_ones}</b><br/>{p4}</div>
+        </div>
+        <div style="text-align: center; margin-top: 15px; font-size: 1.1em;">
+            <b>Add the parts together:</b> {p1} + {p2} + {p3} + {p4} = <b>{total}</b>
+        </div>
+    </div>
+    """
+    return html
+
+def create_division_groups_visual(dividend, divisor):
+    """(NEW & Dynamic) Creates a visual for division by grouping."""
+    if divisor == 0: return ""
+    quotient = dividend // divisor
+    
+    groups_html = ""
+    dot_colors = ["#FF6B6B", "#4ECDC4", "#FFD93D", "#95E1D3", "#A0C4FF", "#FDBF6F"]
+    
+    for i in range(divisor):
+        dots_in_group = "".join([f'<div style="width: 15px; height: 15px; background: {dot_colors[i % len(dot_colors)]}; border-radius: 50%;"></div>' for _ in range(quotient)])
+        groups_html += f"""
+            <div style="border: 2px dashed {dot_colors[i % len(dot_colors)]}; border-radius: 10px; padding: 10px; text-align: center;">
+                <b style="color: #333;">Group {i+1}</b>
+                <div style="display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; justify-content: center;">
+                    {dots_in_group}
+                </div>
+            </div>
+        """
+
+    html = f"""
+    <div style="padding: 20px; background: #f0f2f6; border-radius: 15px; margin: 10px 0;">
+        <h3 style="text-align: center; color: #333;">Dividing {dividend} into {divisor} Groups</h3>
+        <p style="text-align: center; color: #555;">We are sharing {dividend} items equally among {divisor} groups.</p>
+        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 15px; margin-top: 20px;">
+            {groups_html}
+        </div>
+        <h4 style="text-align: center; margin-top: 25px; color: #333;">
+            Each group gets <b>{quotient}</b> items. So, {dividend} ÷ {divisor} = {quotient}.
+        </h4>
+    </div>
+    """
+    return html
+
 def create_counting_blocks(num1, num2, operation):
     """(Dynamic) Create colorful counting blocks for addition/subtraction."""
     html = f"""
@@ -166,7 +247,7 @@ def create_clock_visual(hours, minutes):
     return html
 
 def create_multiplication_array(rows, cols):
-    """(NEW & Dynamic) Generates an SVG grid of dots to show multiplication."""
+    """(Dynamic) Generates an SVG grid of dots to show small multiplication."""
     cell_size, gap = 25, 5
     svg_width = cols * (cell_size + gap)
     svg_height = rows * (cell_size + gap)
@@ -175,12 +256,10 @@ def create_multiplication_array(rows, cols):
     return html
 
 def create_number_line(start, end, points, title="Number Line"):
-    """(NEW & Dynamic) Creates a simple number line SVG."""
+    """(Dynamic) Creates a simple number line SVG."""
     width = 600
     padding = 30
-    # Handle the edge case where start equals end
-    if start >= end:
-        end = start + 1
+    if start >= end: end = start + 1
     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)])
@@ -191,66 +270,19 @@ def create_number_line(start, end, points, title="Number Line"):
 def create_place_value_blocks(number):
     """(FIXED & Dynamic) Create place value blocks for understanding numbers."""
     hundreds, tens, ones = number // 100, (number % 100) // 10, number % 10
-    
-    # --- Hundreds Block HTML ---
-    h_block_html = ""
+    h_block_html, t_block_html, o_block_html = "", "", ""
     if hundreds > 0:
         hundreds_grid = "".join(["<div style='background:#F5A6A6'></div>"] * 100)
-        hundreds_squares = "".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;">
-                {hundreds_grid}
-            </div>
-        """ for _ in range(hundreds)])
-        h_block_html = f"""
-            <div style="text-align: center;">
-                <h4>Hundreds: {hundreds}</h4>
-                <div style="display: flex; gap: 5px;">{hundreds_squares}</div>
-            </div>
-        """
-
-    # --- Tens Block HTML ---
-    t_block_html = ""
+        hundreds_squares = "".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;">{hundreds_grid}</div>' for _ in range(hundreds)])
+        h_block_html = f'<div style="text-align: center;"><h4>Hundreds: {hundreds}</h4><div style="display: flex; gap: 5px;">{hundreds_squares}</div></div>'
     if tens > 0:
         tens_grid = "".join(["<div style='background:#A2E8E4'></div>"] * 10)
-        tens_sticks = "".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;">
-                {tens_grid}
-            </div>
-        """ for _ in range(tens)])
-        t_block_html = f"""
-            <div style="text-align: center;">
-                <h4>Tens: {tens}</h4>
-                <div style="display: flex; gap: 5px; align-items: flex-end;">{tens_sticks}</div>
-            </div>
-        """
-
-    # --- Ones Block HTML ---
-    o_block_html = ""
+        tens_sticks = "".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;">{tens_grid}</div>' for _ in range(tens)])
+        t_block_html = f'<div style="text-align: center;"><h4>Tens: {tens}</h4><div style="display: flex; gap: 5px; align-items: flex-end;">{tens_sticks}</div></div>'
     if ones > 0:
          ones_cubes = "".join(['<div style="width: 10px; height: 10px; background: #FFE066; border: 2px solid #FDCB6E;"></div>' for _ in range(ones)])
-         o_block_html = f"""
-            <div style="text-align: center;">
-                <h4>Ones: {ones}</h4>
-                <div style="display: flex; gap: 5px; align-items: flex-end; flex-wrap: wrap; width: 50px; justify-content: center;">{ones_cubes}</div>
-            </div>
-         """
-
-    # --- Final Assembly ---
-    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; min-height: 150px;">
-            {h_block_html}
-            {t_block_html}
-            {o_block_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} Hundreds + {tens} Tens + {ones} Ones = {number}
-            </h4>
-        </div>
-    </div>
-    """
+         o_block_html = f'<div style="text-align: center;"><h4>Ones: {ones}</h4><div style="display: flex; gap: 5px; align-items: flex-end; flex-wrap: wrap; width: 50px; justify-content: center;">{ones_cubes}</div></div>'
+    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; min-height: 150px;">{h_block_html}{t_block_html}{o_block_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} Hundreds + {tens} Tens + {ones} Ones = {number}</h4></div></div>"""
     return html
 
 def create_shape_explorer():
@@ -289,18 +321,18 @@ if api_key:
         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..."
+        - "Let's use an area model to understand this multiplication problem..."
+        - "I'll create a picture showing how we can divide these into groups..."
         
         Focus on concepts appropriate for K-12 students:
         - Basic counting and number recognition
         - Simple addition and subtraction (using manipulatives)
         - Multiplication as arrays or groups
+        - Division as sharing into equal 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.
         
@@ -446,7 +478,6 @@ with st.sidebar:
     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()
-        # This part might need adjustment depending on how Streamlit Community Cloud handles base URLs
         share_url = f"https://huggingface.co/spaces/YOUR_SPACE_HERE?shared_chat={chat_b64}" # Placeholder
         st.code(share_url)
         st.info("Copy the URL above to share this specific chat! (You might need to update the base URL)")
@@ -460,7 +491,7 @@ for message in st.session_state.chats[st.session_state.active_chat_key]:
         st.markdown(message["content"])
         # If a visual was generated and saved with the message, display it
         if "visual_html" in message and message["visual_html"]:
-            components.html(message["visual_html"], height=400, scrolling=True)
+            components.html(message["visual_html"], height=450, scrolling=True)
 
 # User input
 if prompt := st.chat_input("Ask a K-8 math question..."):
@@ -494,7 +525,7 @@ if prompt := st.chat_input("Ask a K-8 math question..."):
                 if should_generate_visual(prompt, full_response):
                     visual_html_content = create_visual_manipulative(prompt, full_response)
                     if visual_html_content:
-                        components.html(visual_html_content, height=400, scrolling=True)
+                        components.html(visual_html_content, height=450, scrolling=True)
 
                 # Add AI response and visual to session state
                 st.session_state.chats[st.session_state.active_chat_key].append({