Update app.py

app.py

@@ -178,6 +178,9 @@ def create_number_line(start, end, points, title="Number Line"):
     """(NEW & 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
     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)])
@@ -186,12 +189,68 @@ def create_number_line(start, end, points, title="Number Line"):
     return html
 
 def create_place_value_blocks(number):
-    """(Dynamic) Create place value blocks for understanding numbers."""
+    """(FIXED & 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>"""
+    
+    # --- Hundreds Block HTML ---
+    h_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 = ""
+    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 = ""
+    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>
+    """
     return html
 
 def create_shape_explorer():
@@ -206,10 +265,6 @@ def create_money_counter():
 
 # --- [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()
@@ -225,7 +280,7 @@ if api_key:
     
     # Main text model
     model = genai.GenerativeModel(
-        model_name="gemini-2.5-flash-lite",
+        model_name="gemini-1.5-flash",
         system_instruction="""
         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.
@@ -239,7 +294,6 @@ if api_key:
         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
@@ -392,9 +446,11 @@ 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()
-        share_url = f"{st.get_option('server.baseUrlPath')}?shared_chat={chat_b64}"
+        # 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!")
+        st.info("Copy the URL above to share this specific chat! (You might need to update the base URL)")
+
 
 st.header(f"Chatting with Math Jegna: _{st.session_state.active_chat_key}_")
 
@@ -402,6 +458,9 @@ st.header(f"Chatting with Math Jegna: _{st.session_state.active_chat_key}_")
 for message in st.session_state.chats[st.session_state.active_chat_key]:
     with st.chat_message(message["role"]):
         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)
 
 # User input
 if prompt := st.chat_input("Ask a K-8 math question..."):
@@ -430,18 +489,24 @@ if prompt := st.chat_input("Ask a K-8 math question..."):
                     response_container.markdown(full_response + " ▌")
                 response_container.markdown(full_response)
                 
-                # After generating text, decide if a visual is needed
+                # After generating text, decide if a visual is needed and generate it
+                visual_html_content = None
                 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)
+                    visual_html_content = create_visual_manipulative(prompt, full_response)
+                    if visual_html_content:
+                        components.html(visual_html_content, height=400, scrolling=True)
+
+                # Add AI response and visual to session state
+                st.session_state.chats[st.session_state.active_chat_key].append({
+                    "role": "assistant", 
+                    "content": full_response,
+                    "visual_html": visual_html_content # Store the visual with the message
+                })
 
-                # 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!"})
+                error_message = "I can only answer math questions for students. Please ask me about numbers, shapes, or other math topics!"
+                st.error(error_message)
+                st.session_state.chats[st.session_state.active_chat_key].append({"role": "assistant", "content": error_message, "visual_html": None})
             except Exception as e:
                 st.error(f"An error occurred: {e}")