Update app.py

app.py

@@ -93,6 +93,30 @@ extras = [
     {"name": "Extra Onion & Lemon", "price": "$2.00"}
 ]
 
+
+
+# Global cart variable
+cart = []
+
+
+def add_to_cart(item_name, spice_level=None, extras=None):
+    """Add selected item to cart."""
+    cart.append({"item_name": item_name, "spice_level": spice_level, "extras": extras or []})
+    return f"{item_name} added to cart!"
+
+
+def display_cart():
+    """Return the current cart contents."""
+    if not cart:
+        return "Your cart is empty."
+    cart_content = "<h3>Your Cart:</h3><ul>"
+    for item in cart:
+        extras = ', '.join(item['extras']) if item['extras'] else "No extras"
+        cart_content += f"<li>{item['item_name']} - Spice: {item['spice_level'] or 'Default'} - Extras: {extras}</li>"
+    cart_content += "</ul>"
+    return cart_content
+
+
 # JavaScript for popup modal
 popup_js = """
 <script>
@@ -147,9 +171,9 @@ popup_html = """
 </div>
 """
 
-# Generate dish cards
 def display_dishes(category):
-    html_content = "<div style='display: flex; flex-wrap: wrap; gap: 20px; width: 80%; margin: 0 auto;'>"
+    """Render dishes dynamically based on the selected category."""
+    html_content = "<div style='display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;'>"
     for dish in menu_data:
         if category == "ALL" or dish["category"] == category:
             html_content += f"""
@@ -160,10 +184,9 @@ def display_dishes(category):
                 <h3 style='margin: 10px 0; font-size: 18px;'>{dish['name']}</h3>
                 <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
                 <p style='margin: 10px 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
-                <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')" 
-                        style='padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
-                    Add
-                </button>
+                <button style='padding: 10px 20px; background-color: #28a745; color: white; border: none; 
+                               border-radius: 5px; cursor: pointer;'
+                        onclick="addToCart('{dish['name']}')">Add to Cart</button>
             </div>
             """
     html_content += "</div>"
@@ -173,12 +196,10 @@ def display_dishes(category):
 
 # Main Gradio App
 with gr.Blocks() as demo:
-    gr.HTML(popup_html)  # Add the popup container and overlay
-    gr.HTML(popup_js)    # Add the JavaScript
-
-    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
+    gr.HTML("<h1 style='text-align: center;'>🍛 Welcome to the Biryani Hub 🍛</h1>")
 
     with gr.Tabs():
+        # Menu Tab
         with gr.Tab("Menu"):
             with gr.Row():
                 btn_all = gr.Button("ALL")
@@ -188,22 +209,24 @@ with gr.Blocks() as demo:
             dish_display = gr.HTML(value=display_dishes("ALL"))
 
             btn_all.click(
-                        lambda: display_dishes("ALL"),
-                        outputs=dish_display
-                            )
+                lambda: display_dishes("ALL"),
+                outputs=dish_display
+            )
             btn_vegan.click(
-                        lambda: display_dishes("VEGAN"),
-                        outputs=dish_display
-                            )
+                lambda: display_dishes("VEGAN"),
+                outputs=dish_display
+            )
             btn_halal.click(
-                        lambda: display_dishes("HALAL"),
-                        outputs=dish_display
-                            )
+                lambda: display_dishes("HALAL"),
+                outputs=dish_display
+            )
 
+        # Cart Tab
         with gr.Tab("Cart"):
             cart_display = gr.HTML(value=display_cart())
-            gr.Button("Refresh Cart").click(
-                lambda: gr.update(value=display_cart()),
+            refresh_cart_btn = gr.Button("Refresh Cart")
+            refresh_cart_btn.click(
+                lambda: display_cart(),
                 outputs=cart_display
             )