Update app.py

app.py

@@ -1,6 +1,5 @@
 import gradio as gr
 
-# Extended menu data with dish details
 menu_data = [
     {"name": "Veg Burger", "category": "VEGAN",
      "image": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg",
@@ -13,27 +12,16 @@ menu_data = [
     {"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"},
-    {"name": "Beef Steak", "category": "HALAL",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/d/d5/Beef_Steak.jpg",
-     "description": "Juicy beef steak served with mashed potatoes and grilled vegetables.",
-     "spice_level": "Medium", "portion_size": "Large"},
-    {"name": "Mushroom Soup", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3c/Mushroom_Soup.jpg",
-     "description": "Creamy mushroom soup with fresh herbs.",
-     "spice_level": "Mild", "portion_size": "Small"}
+     "spice_level": "Mild", "portion_size": "Medium"}
 ]
 
-spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
-portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
-
-# Function to filter dishes based on category
+# Filter dishes by category
 def filter_dishes(category):
     if category == "ALL":
         return menu_data
     return [dish for dish in menu_data if dish["category"] == category]
 
-# Function to display dishes with images
+# Generate HTML for dish display
 def display_dishes(category):
     filtered_dishes = filter_dishes(category)
     html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
@@ -50,78 +38,74 @@ def display_dishes(category):
     html_content += "</div>"
     return html_content
 
-# Function to fetch details of the selected dish
+# Fetch selected dish details
 def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
-            return dish["image"], dish["name"], dish["description"], "🌶 Medium", "🍽 Medium"
-    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available.", "N/A", "N/A"
-
-# Function to simulate placing an order
-def place_order(dish_name, spice_level, portion_size):
-    return f"✅ Order Confirmed: '{dish_name}' with {spice_level} spice level and {portion_size} portion size."
+            return f"""
+            <div style="text-align: center; padding: 20px; font-family: Arial, sans-serif;">
+                <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>
+            </div>
+            """
+    return "Dish not found!"
 
 # Main Gradio App
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
 
-    # Buttons for category selection
-    gr.Markdown("### Select a Category")
+    # Category Buttons
     with gr.Row():
         btn_all = gr.Button("ALL")
         btn_vegan = gr.Button("VEGAN")
         btn_halal = gr.Button("HALAL")
 
-    # Dish display section
-    gr.Markdown("### Available Dishes")
+    # Dish display
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # Dish Details Section
-    gr.Markdown("### Dish Details")
-    with gr.Row():
-        dish_image = gr.Image(label="Dish Image", height=200, width=200)
-        with gr.Column():
-            dish_name = gr.Textbox(label="Dish Name", interactive=False)
-            dish_description = gr.Textbox(label="Description", interactive=False)
-            spice_dropdown = gr.Radio(label="Select Spice Level", choices=spice_options, value="🌶 Medium")
-            portion_dropdown = gr.Radio(label="Select Portion Size", choices=portion_options, value="🍽 Medium")
-
-    # Place Order Button
-    place_order_btn = gr.Button("Place Order")
-    order_status = gr.Textbox(label="Order Status", interactive=False)
-
-    # Event: Update dish display for selected category
+    # Hidden pop-up for dish details
+    popup = gr.HTML(visible=False)
+
+    # Event handlers
     def update_dishes(category):
         return gr.update(value=display_dishes(category))
 
-    btn_all.click(fn=lambda: update_dishes("ALL"), outputs=dish_display)
-    btn_vegan.click(fn=lambda: update_dishes("VEGAN"), outputs=dish_display)
-    btn_halal.click(fn=lambda: update_dishes("HALAL"), outputs=dish_display)
-
-    # Event: Show dish details when a dish is selected
     def show_dish_details(dish_name):
-        image, name, description, spice, portion = get_dish_details(dish_name)
-        return image, name, description, spice, portion
+        return gr.update(visible=True, value=get_dish_details(dish_name))
 
-    # Hidden input to receive dish name from JavaScript
-    selected_dish_name = gr.Textbox(visible=False)
-    selected_dish_name.change(fn=show_dish_details, inputs=selected_dish_name,
-                              outputs=[dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown])
+    def hide_popup():
+        return gr.update(visible=False)
 
-    # Event: Place order button
-    place_order_btn.click(fn=place_order, 
-                          inputs=[dish_name, spice_dropdown, portion_dropdown], 
-                          outputs=order_status)
+    # Button actions
+    btn_all.click(fn=lambda: update_dishes("ALL"), outputs=dish_display)
+    btn_vegan.click(fn=lambda: update_dishes("VEGAN"), outputs=dish_display)
+    btn_halal.click(fn=lambda: update_dishes("HALAL"), outputs=dish_display)
 
-    # Inject JavaScript to handle clicks and pass dish names
+    # JavaScript for dish selection
     gr.HTML("""
     <script>
     function selectDish(dishName) {
-        let input = document.querySelector('input[aria-label="selected_dish_name"]');
+        let input = document.querySelector('input[aria-label="popup"]');
         input.value = dishName;
         input.dispatchEvent(new Event('input', { bubbles: true }));
     }
+    function closePopup() {
+        let closeButton = document.querySelector('button[aria-label="close_popup"]');
+        closeButton.click();
+    }
     </script>
     """)
 
+    # Hidden input and close button
+    dish_name_input = gr.Textbox(visible=False, label="popup")
+    close_button = gr.Button("Close Popup", visible=False)
+
+    # Link events
+    dish_name_input.change(fn=show_dish_details, inputs=dish_name_input, outputs=popup)
+    close_button.click(fn=hide_popup, outputs=popup)
+
 demo.launch()