Update app.py

app.py

@@ -33,7 +33,7 @@ cart = {}
 
 def display_menu():
     """
-    Render the menu dynamically.
+    Render the menu dynamically as HTML.
     """
     menu_html = ""
     for item in menu_data:
@@ -47,9 +47,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="update_quantity('{item['name']}', {cart[item['name']]['quantity'] - 1})" style="background-color: #dc3545; color: white; border: none; padding: 5px; border-radius: 5px;">-</button>
+                    <button onclick="decrease_quantity('{item['name']}')" 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="update_quantity('{item['name']}', {cart[item['name']]['quantity'] + 1})" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
+                    <button onclick="increase_quantity('{item['name']}')" style="background-color: #28a745; color: white; border: none; padding: 5px; border-radius: 5px;">+</button>
                 </div>
             </div>
             """
@@ -62,7 +62,7 @@ def display_menu():
                     <h4 style="margin: 0;">{item['name']} - ${item['price']}</h4>
                     <p style="font-size: 12px; color: gray;">{item['description']}</p>
                 </div>
-                <button onclick="add_to_cart('{item['name']}')" style="background-color: #28a745; color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; margin-left: auto;">Add</button>
+                <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>
             </div>
             """
     return menu_html
@@ -84,49 +84,37 @@ def add_to_cart(item_name):
                 break
     return display_menu()
 
-def update_quantity(item_name, new_quantity):
+def update_quantity(item_name, operation):
     """
     Update the quantity of an item in the cart.
     """
     if item_name in cart:
-        if new_quantity <= 0:
-            del cart[item_name]
-        else:
-            cart[item_name]["quantity"] = new_quantity
+        if operation == "increase":
+            cart[item_name]["quantity"] += 1
+        elif operation == "decrease":
+            cart[item_name]["quantity"] -= 1
+            if cart[item_name]["quantity"] <= 0:
+                del cart[item_name]
     return display_menu()
 
-def view_cart():
-    """
-    Render the cart dynamically.
-    """
-    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']}', {item['quantity'] - 1})" 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']}', {item['quantity'] + 1})" 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>"
-    return cart_html
-
 # Gradio Interface
 with gr.Blocks() as demo:
     gr.Markdown("# Dynamic Food Menu")
     
-    with gr.Row():
-        menu_html = gr.HTML(value=display_menu())
-        cart_html = gr.HTML(value=view_cart())
-    
-    demo.launch()
+    menu_html = gr.HTML(value=display_menu())
+
+    # Hidden input fields for Gradio's event handling
+    item_name_input = gr.Textbox(visible=False)
+    operation_input = gr.Textbox(visible=False)
+
+    # Simulate "Add to Cart" and "Update Quantity"
+    add_button = gr.Button("Add to Cart", visible=False)
+    update_button = gr.Button("Update Quantity", visible=False)
+
+    # Update menu after adding or updating quantity
+    add_button.click(fn=add_to_cart, inputs=item_name_input, outputs=menu_html)
+    update_button.click(fn=update_quantity, inputs=[item_name_input, operation_input], outputs=menu_html)
+
+    demo.append(menu_html)
+
+demo.launch()