Update app.py

app.py

@@ -45,9 +45,9 @@ def display_menu():
                     <p style="font-size: 12px; color: gray;">{item['description']}</p>
                 </div>
                 <div style="margin-left: auto; display: flex; align-items: center;">
-                    <button onclick="decrease_quantity('{item['name']}')" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px;">-</button>
+                    <button onclick="update_quantity('{item['name']}', 'decrease')" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px;">-</button>
                     <span style="margin: 0 10px;">{cart[item['name']]['quantity']}</span>
-                    <button onclick="increase_quantity('{item['name']}')" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
+                    <button onclick="update_quantity('{item['name']}', 'increase')" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
                 </div>
             </div>
             """
@@ -60,7 +60,8 @@ def display_menu():
                     <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                     <p style="font-size: 12px; color: gray;">{item['description']}</p>
                 </div>
-                <button id="add-{item['name']}" style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; margin-left: auto;">Add</button>
+                <button style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; margin-left: auto;" 
+                onclick="add_to_cart('{item['name']}')">Add</button>
             </div>
             """
     return menu_html
@@ -78,53 +79,30 @@ def add_to_cart(item_name):
                     "quantity": 1
                 }
                 break
-    return update_cart_summary()
+    return display_menu(), update_cart_summary()
 
 # Function to update the cart summary
 def update_cart_summary():
     num_items = sum(item["quantity"] for item in cart.values())
     total_price = sum(item["price"] * item["quantity"] for item in cart.values())
-    return f"{num_items} items added", f"Total: ${total_price:.2f}"
-
-# Function to render the cart page
-def display_cart():
-    if not cart:
-        return "Your cart is empty."
-    
-    cart_html = "<h3>Your Cart:</h3>"
-    total_price = 0
-    for item in cart.values():
-        item_total = item["price"] * item["quantity"]
-        total_price += item_total
-        cart_html += f"""
-        <div style="display: flex; align-items: center; margin-bottom: 15px; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
-            <h4 style="margin: 0;">{item['name']}</h4>
-            <div style="margin-left: auto; display: flex; align-items: center;">
-                <button onclick="update_quantity('{item['name']}', 'decrease')" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px;">-</button>
-                <span style="margin: 0 10px;">{item['quantity']}</span>
-                <button onclick="update_quantity('{item['name']}', 'increase')" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
-            </div>
-            <p style="margin: 0 0 0 15px;">${item_total:.2f}</p>
-        </div>
-        """
-    cart_html += f"<h4>Total: ${total_price:.2f}</h4>"
-    cart_html += '<button style="padding: 10px; background-color: #28a745; color: white; border: none; border-radius: 5px;">Place Order</button>'
-    return cart_html
+    return f"{num_items} items added to cart. Total: ${total_price:.2f}"
 
 # Gradio Interface
 with gr.Blocks() as demo:
     gr.Markdown("# Dynamic Food Menu")
     
-    with gr.Tab("Menu"):
-        menu_html = gr.HTML(value=display_menu())
-        cart_summary = gr.HTML(value="No items added to cart.")
+    menu_html = gr.HTML(value=display_menu())
+    cart_summary = gr.HTML(value="No items added to cart.")
+
+    # Hidden input fields for Gradio's event handling
+    item_name_input = gr.Textbox(visible=False)
 
-        # Add to Cart buttons
-        item_name_input = gr.Textbox(visible=False)
-        add_button = gr.Button("Add to Cart", visible=False)
-        add_button.click(add_to_cart, inputs=item_name_input, outputs=[menu_html, cart_summary])
+    # Add to Cart button logic
+    add_button = gr.Button("Add to Cart", visible=False)
+    add_button.click(fn=add_to_cart, inputs=item_name_input, outputs=[menu_html, cart_summary])
 
-    with gr.Tab("Cart"):
-        cart_html = gr.HTML(value=display_cart())
+    # Add the menu and cart summary to the interface
+    menu_html.render()
+    cart_summary.render()
 
 demo.launch()