Update app.py

app.py

@@ -1,99 +1,58 @@
-import os
 import gradio as gr
 
-# 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"
-        }
-    }
+# Data for menu items
+menu_data = {
+    "TANDOORRR": [
+        {"name": "Tikka Murgh (Chicken)", "price": "$16", "image": "static/images/tikka_murgh.png",
+         "nutrition": "Calories: 220, Protein: 20g, Fat: 10g, Carbs: 5g", "portion": "250g"},
+        {"name": "Jhinga (Shrimp)", "price": "$18", "image": "static/images/jhinga_shrimp.png",
+         "nutrition": "Calories: 180, Protein: 25g, Fat: 8g, Carbs: 3g", "portion": "200g"},
+        {"name": "Murgh Malai Kabab", "price": "$17", "image": "static/images/murgh_malai_kabab.png",
+         "nutrition": "Calories: 240, Protein: 22g, Fat: 12g, Carbs: 6g", "portion": "300g"}
+    ],
+    "DOSAI": [
+        {"name": "Plain Dosai", "price": "$11", "image": "static/images/plain_dosai.png",
+         "nutrition": "Calories: 150, Protein: 3g, Fat: 5g, Carbs: 25g", "portion": "100g"},
+        {"name": "Cheese Dosai", "price": "$12", "image": "static/images/cheese_dosai.png",
+         "nutrition": "Calories: 200, Protein: 10g, Fat: 8g, Carbs: 22g", "portion": "150g"},
+        {"name": "Egg Dosai", "price": "$12", "image": "static/images/egg_dosai.png",
+         "nutrition": "Calories: 180, Protein: 12g, Fat: 6g, Carbs: 20g", "portion": "120g"},
+        {"name": "Kheema Dosai (Goat)", "price": "$15", "image": "static/images/kheema_dosai.png",
+         "nutrition": "Calories: 250, Protein: 20g, Fat: 15g, Carbs: 10g", "portion": "200g"}
+    ],
+    "NAAN (BREADS)": [
+        {"name": "Plain Naan", "price": "$3", "image": "static/images/plain_naan.png",
+         "nutrition": "Calories: 100, Protein: 2g, Fat: 3g, Carbs: 15g", "portion": "50g"},
+        {"name": "Garlic Naan", "price": "$4", "image": "static/images/garlic_naan.png",
+         "nutrition": "Calories: 120, Protein: 3g, Fat: 4g, Carbs: 18g", "portion": "60g"}
+    ]
 }
 
-# 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>
+# Function to display item details
+def display_item(category, index):
+    item = menu_data[category][index]
+    card_html = f"""
+    <div class="popup-card">
+        <img src="{item['image']}" alt="{item['name']}" class="popup-image">
+        <div class="popup-details">
+            <h3>{item['name']} - {item['price']}</h3>
+            <p>Nutrition: {item['nutrition']}</p>
+            <p>Portion Size: {item['portion']}</p>
         </div>
+        <button onclick="closePopup()" class="close-button">X</button>
     </div>
     """
+    return card_html
 
-# Gradio App
-with gr.Blocks() as app:
-    gr.Markdown("# 🍽️ Indian & Chinese Restaurant Menu")
+# Gradio app
+with gr.Blocks(css="static/css/style.css") as app:
+    gr.Markdown("# Indian & Chinese Restaurant Menu")
 
-    card_output = gr.HTML()
-
-    # 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)
-
-    # Popup area
-    card_output
+    for category, items in menu_data.items():
+        gr.Markdown(f"## {category}")
+        for i, item in enumerate(items):
+            gr.Button(f"{item['name']} - {item['price']}", elem_id=f"{category}_{i}").click(
+                display_item, inputs=[gr.Text(value=category), gr.Text(value=i)], outputs=gr.HTML()
+            )
 
 app.launch()