Update app.py

app.py

@@ -1,27 +1,62 @@
 import gradio as gr
-from components.menu_display import display_menu
-from components.popup_card import show_popup_card
 
-# Main application
-def main():
-    with gr.Blocks(css="components/styles.css") as app:
-        gr.Markdown("## Welcome to the Restaurant Menu 🍴")
-        
-        # Display menu
-        menu = display_menu()
-        
-        # Area for popup display
-        popup_output = gr.HTML(elem_id="popup-container")
-        
-        # Click handling for menu items
-        menu_items = menu["items"]
-        for item_button, item_name in menu_items:
-            item_button.click(show_popup_card, inputs=item_name, outputs=popup_output)
+# Menu data dictionary with image, 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"},
+        "Jhinga (Shrimp)": {"price": "$18", "image": "static/jhinga_shrimp.png", "nutrition": "Calories: 180, Protein: 25g, Fat: 8g, Carbs: 3g", "portion": "200g"},
+        "Murgh Malai Kabob": {"price": "$17", "image": "static/murgh_malai.png", "nutrition": "Calories: 240, Protein: 22g, Fat: 12g, Carbs: 6g", "portion": "220g"}
+    },
+    "Dosai": {
+        "Plain Dosai": {"price": "$11", "image": "static/plain_dosai.png", "nutrition": "Calories: 150, Protein: 3g, Fat: 5g, Carbs: 25g", "portion": "100g"},
+        "Cheese Dosai": {"price": "$12", "image": "static/cheese_dosai.png", "nutrition": "Calories: 250, Protein: 8g, Fat: 12g, Carbs: 30g", "portion": "120g"},
+        "Egg Dosai": {"price": "$12", "image": "static/egg_dosai.png", "nutrition": "Calories: 200, Protein: 10g, Fat: 6g, Carbs: 20g", "portion": "130g"},
+        "Kheema Dosai (Goat)": {"price": "$15", "image": "static/kheema_dosai.png", "nutrition": "Calories: 280, Protein: 15g, Fat: 15g, Carbs: 20g", "portion": "150g"}
+    },
+    "Naan (Breads)": {
+        "Plain Naan": {"price": "$3", "image": "static/plain_naan.png", "nutrition": "Calories: 150, Protein: 4g, Fat: 2g, Carbs: 30g", "portion": "1 piece"},
+        "Garlic Naan": {"price": "$4", "image": "static/garlic_naan.png", "nutrition": "Calories: 170, Protein: 5g, Fat: 4g, Carbs: 35g", "portion": "1 piece"}
+    }
+}
 
-        gr.Markdown("### Click on a dish to view details!")
+# Function to display popup card with image, nutrition, and portion
+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", "")
+    
+    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;'>
+        <!-- Close Button -->
+        <div style='position: absolute; top: 10px; right: 10px;'>
+            <button onclick="document.getElementById('popup-card').style.display='none'" style='background: none; border: none; font-size: 18px; cursor: pointer;'>✖</button>
+        </div>
+        <!-- Image -->
+        <img src='{image_path}' alt='{item_name}' style='width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px;'>
+        <!-- Nutrition and Portion -->
+        <div style='padding: 15px; text-align: left;'>
+            <h3 style='margin: 0; color: #444;'>{item_name} - {price}</h3>
+            <p style='margin: 10px 0; color: #666;'>Nutrition: {nutrition}</p>
+            <p style='margin: 10px 0; color: #666;'>Portion Size: {portion}</p>
+        </div>
+    </div>
+    """
+    return card
 
-    return app
-
-if __name__ == "__main__":
-    app = main()
-    app.launch()
+# Gradio App
+with gr.Blocks() as app:
+    gr.Markdown("# 🍽️ Indian & Chinese Restaurant Menu")
+    
+    # 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()
+    
+app.launch()