Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 
-# Menu data dictionary with image, nutrition, and portion size
+# Menu data dictionary with images, nutrition, and portion size
 menu_items = {
     "Tandoorrr": {
         "Tikka Murgh (Chicken)": {"price": "$16", "image": "static/tikka_murgh.png", "nutrition": "Calories: 220, Protein: 20g, Fat: 10g, Carbs: 5g", "portion": "250g"},
@@ -19,13 +19,13 @@ menu_items = {
     }
 }
 
-# Function to display popup card with image, nutrition, and portion
+# Function to generate the popup card
 def display_card(item_name, section):
     item = menu_items[section][item_name]
-    image_path = item.get("image", "")
-    nutrition = item.get("nutrition", "No data available")
-    portion = item.get("portion", "Not specified")
-    price = item.get("price", "")
+    image_path = item["image"]
+    nutrition = item["nutrition"]
+    portion = item["portion"]
+    price = item["price"]
     
     card = f"""
     <div style='font-family: Arial, sans-serif; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); max-width: 400px; margin: auto; position: relative; background-color: white;'>
@@ -48,15 +48,19 @@ def display_card(item_name, section):
 # Gradio App
 with gr.Blocks() as app:
     gr.Markdown("# 🍽️ Indian & Chinese Restaurant Menu")
-    
+
+    # Single popup card output
+    card_output = gr.HTML()
+
     # Display each section
     for section, items in menu_items.items():
         gr.Markdown(f"## {section.upper()}")
         with gr.Row():
             for item_name in items.keys():
                 btn = gr.Button(f"{item_name} - {items[item_name]['price']}")
-                card_output = gr.HTML()  # Popup card output
                 btn.click(display_card, inputs=[gr.Text(value=item_name), gr.Text(value=section)], outputs=card_output)
-                card_output.render()
-    
+
+    # Display the popup card below all buttons
+    card_output.render()
+
 app.launch()