Update app.py

app.py

@@ -3,16 +3,13 @@ import gradio as gr
 menu_data = [
     {"name": "Veg Burger", "category": "VEGAN",
      "image": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg",
-     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
-     "spice_level": "Medium", "portion_size": "Regular"},
+     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato."},
     {"name": "Chicken Biryani", "category": "HALAL",
      "image": "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg",
-     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
-     "spice_level": "High", "portion_size": "Large"},
+     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces."},
     {"name": "Paneer Butter Masala", "category": "VEGAN",
      "image": "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg",
-     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
-     "spice_level": "Mild", "portion_size": "Medium"}
+     "description": "Paneer cooked in a rich and creamy tomato-based gravy."}
 ]
 
 # Filter dishes by category
@@ -43,13 +40,16 @@ def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
             return f"""
-            <div style="text-align: center; padding: 20px; font-family: Arial, sans-serif;">
+            <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+                        background-color: white; padding: 20px; border-radius: 10px; 
+                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center;">
                 <img src="{dish['image']}" alt="{dish['name']}" 
                      style="width: 250px; height: 150px; object-fit: cover; border-radius: 10px;">
                 <h2 style="margin-top: 20px; color: #444;">{dish['name']}</h2>
                 <p style="margin-top: 10px; font-size: 16px; color: #666;">{dish['description']}</p>
-                <button style="padding: 10px 20px; background-color: #28a745; color: white; border: none; 
-                               border-radius: 5px; cursor: pointer;" onclick="closePopup()">Close</button>
+                <button onclick="closePopup()" 
+                        style="margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; 
+                               border: none; border-radius: 5px; cursor: pointer;">Close</button>
             </div>
             """
     return "Dish not found!"