Update app.py

app.py

@@ -1,50 +1,99 @@
+import os
 import gradio as gr
 
-# Nutrition and Portion Data
-menu_data = {
-    "Tikka Murgh (Chicken)": {"price": "$16", "nutrition": "Calories: 220, Protein: 20g, Fat: 10g, Carbs: 5g", "portion": "250g"},
-    "Jhinga (Shrimp)": {"price": "$18", "nutrition": "Calories: 180, Protein: 25g, Fat: 8g, Carbs: 3g", "portion": "200g"},
-    "Murgh Malai Kabob": {"price": "$17", "nutrition": "Calories: 240, Protein: 18g, Fat: 12g, Carbs: 7g", "portion": "300g"},
-    "Plain Dosai": {"price": "$11", "nutrition": "Calories: 150, Protein: 3g, Fat: 5g, Carbs: 25g", "portion": "100g"},
-    "Cheese Dosai": {"price": "$12", "nutrition": "Calories: 200, Protein: 7g, Fat: 8g, Carbs: 22g", "portion": "120g"},
-    "Egg Dosai": {"price": "$12", "nutrition": "Calories: 210, Protein: 9g, Fat: 10g, Carbs: 20g", "portion": "150g"},
-    "Kheema Dosai (Goat)": {"price": "$15", "nutrition": "Calories: 250, Protein: 15g, Fat: 12g, Carbs: 15g", "portion": "180g"},
-    "Plain Naan": {"price": "$3", "nutrition": "Calories: 110, Protein: 2g, Fat: 1g, Carbs: 15g", "portion": "80g"},
-    "Garlic Naan": {"price": "$4", "nutrition": "Calories: 130, Protein: 3g, Fat: 3g, Carbs: 18g", "portion": "90g"},
+# Menu data with absolute paths for images
+menu_items = {
+    "Tandoorrr": {
+        "Tikka Murgh (Chicken)": {
+            "price": "$16",
+            "image": os.path.abspath("static/tikka_murgh.png"),
+            "nutrition": "Calories: 220, Protein: 20g, Fat: 10g, Carbs: 5g",
+            "portion": "250g"
+        },
+        "Jhinga (Shrimp)": {
+            "price": "$18",
+            "image": os.path.abspath("static/jhinga_shrimp.png"),
+            "nutrition": "Calories: 180, Protein: 25g, Fat: 8g, Carbs: 3g",
+            "portion": "200g"
+        },
+        "Murgh Malai Kabob": {
+            "price": "$17",
+            "image": os.path.abspath("static/murgh_malai.png"),
+            "nutrition": "Calories: 240, Protein: 22g, Fat: 12g, Carbs: 6g",
+            "portion": "220g"
+        },
+    },
+    "Dosai": {
+        "Plain Dosai": {
+            "price": "$11",
+            "image": os.path.abspath("static/plain_dosai.png"),
+            "nutrition": "Calories: 150, Protein: 3g, Fat: 5g, Carbs: 25g",
+            "portion": "100g"
+        },
+        "Cheese Dosai": {
+            "price": "$12",
+            "image": os.path.abspath("static/cheese_dosai.png"),
+            "nutrition": "Calories: 250, Protein: 8g, Fat: 12g, Carbs: 30g",
+            "portion": "120g"
+        },
+        "Egg Dosai": {
+            "price": "$12",
+            "image": os.path.abspath("static/egg_dosai.png"),
+            "nutrition": "Calories: 200, Protein: 10g, Fat: 6g, Carbs: 20g",
+            "portion": "130g"
+        },
+        "Kheema Dosai (Goat)": {
+            "price": "$15",
+            "image": os.path.abspath("static/kheema_dosai.png"),
+            "nutrition": "Calories: 280, Protein: 15g, Fat: 15g, Carbs: 20g",
+            "portion": "150g"
+        },
+    },
+    "Naan (Breads)": {
+        "Plain Naan": {
+            "price": "$3",
+            "image": os.path.abspath("static/plain_naan.png"),
+            "nutrition": "Calories: 150, Protein: 4g, Fat: 2g, Carbs: 30g",
+            "portion": "1 piece"
+        },
+        "Garlic Naan": {
+            "price": "$4",
+            "image": os.path.abspath("static/garlic_naan.png"),
+            "nutrition": "Calories: 170, Protein: 5g, Fat: 4g, Carbs: 35g",
+            "portion": "1 piece"
+        }
+    }
 }
 
-# Function to display popup card
-def display_card(item_name):
-    data = menu_data[item_name]
-    return (
-        f"**{item_name} - {data['price']}**\n"
-        f"**Nutrition**: {data['nutrition']}\n"
-        f"**Portion Size**: {data['portion']}"
-    )
+# Function to display popup with image and details
+def display_card(item_name, section):
+    item = menu_items[section][item_name]
+    return f"""
+    <div style='font-family: Arial, sans-serif; max-width: 400px; border: 1px solid #ddd; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2);'>
+        <img src='file://{item["image"]}' style='width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px;' alt='{item_name}' />
+        <div style='padding: 10px; text-align: left;'>
+            <h3 style='margin: 0; color: #444;'>{item_name} - {item["price"]}</h3>
+            <p style='margin: 5px 0; color: #666;'>Nutrition: {item["nutrition"]}</p>
+            <p style='margin: 5px 0; color: #666;'>Portion Size: {item["portion"]}</p>
+        </div>
+    </div>
+    """
 
-# UI Layout
-with gr.Blocks(css="footer {visibility: hidden;}") as demo:
-    gr.Markdown("<h1>🍽️ Indian & Chinese Restaurant Menu</h1>")
+# Gradio App
+with gr.Blocks() as app:
+    gr.Markdown("# 🍽️ Indian & Chinese Restaurant Menu")
 
-    with gr.Row():
-        gr.Markdown("<h2>TANDOORRR</h2>")
-    with gr.Row():
-        for item in ["Tikka Murgh (Chicken)", "Jhinga (Shrimp)", "Murgh Malai Kabob"]:
-            btn = gr.Button(f"{item} - {menu_data[item]['price']}")
-            btn.click(display_card, inputs=[gr.Text(item, visible=False)], outputs=gr.Markdown())
+    card_output = gr.HTML()
 
-    with gr.Row():
-        gr.Markdown("<h2>DOSAI</h2>")
-    with gr.Row():
-        for item in ["Plain Dosai", "Cheese Dosai", "Egg Dosai", "Kheema Dosai (Goat)"]:
-            btn = gr.Button(f"{item} - {menu_data[item]['price']}")
-            btn.click(display_card, inputs=[gr.Text(item, visible=False)], outputs=gr.Markdown())
+    # Display buttons row-wise
+    for section, items in menu_items.items():
+        gr.Markdown(f"## {section.upper()}")
+        for item_name, details in items.items():
+            with gr.Row():
+                btn = gr.Button(f"{item_name} - {details['price']}")
+                btn.click(display_card, inputs=[gr.Textbox(value=item_name, visible=False), gr.Textbox(value=section, visible=False)], outputs=card_output)
 
-    with gr.Row():
-        gr.Markdown("<h2>NAAN (BREADS)</h2>")
-    with gr.Row():
-        for item in ["Plain Naan", "Garlic Naan"]:
-            btn = gr.Button(f"{item} - {menu_data[item]['price']}")
-            btn.click(display_card, inputs=[gr.Text(item, visible=False)], outputs=gr.Markdown())
+    # Popup area
+    card_output
 
-demo.launch()
+app.launch()