Update app.py

app.py

@@ -2,23 +2,23 @@ import gradio as gr
 
 # Extended menu data with dish details
 menu_data = [
-    {"name": "Veg Burger", "category": "VEGAN", 
+    {"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"},
-    {"name": "Chicken Biryani", "category": "HALAL", 
+    {"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"},
-    {"name": "Paneer Butter Masala", "category": "VEGAN", 
+    {"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", 
+    {"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", 
+    {"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"}
@@ -54,10 +54,10 @@ def display_dishes(category):
 def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
-            return (dish["image"], dish["name"], dish["description"], dish["spice_level"], dish["portion_size"])
-    return ("https://via.placeholder.com/300x200", "Unknown Dish", "No description available.", "N/A", "N/A")
+            return dish["image"], dish["name"], dish["description"], dish["spice_level"], dish["portion_size"]
+    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available.", "N/A", "N/A"
 
-# Function to simulate placing an order with customizations
+# Function to simulate placing an order
 def place_order(dish_name, spice_level, portion_size):
     return f"Your order for '{dish_name}' with {spice_level} spice level and {portion_size} portion size has been placed successfully!"
 
@@ -65,32 +65,27 @@ def place_order(dish_name, spice_level, portion_size):
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center;'>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 Section
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # Detailed Dish View
-    gr.Markdown("### Dish Details")
-    dish_image = gr.Image(label="Dish Image", interactive=False)
-    dish_name = gr.Textbox(label="Dish Name", interactive=False)
-    dish_description = gr.Textbox(label="Description", interactive=False)
-
-    # Dropdowns for Spice Level and Portion Size
-    spice_dropdown = gr.Dropdown(label="Select Spice Level", choices=spice_options)
-    portion_dropdown = gr.Dropdown(label="Select Portion Size", choices=portion_options)
-
-    # Place Order Button
-    place_order_btn = gr.Button("Place Order")
-    order_status = gr.Textbox(label="Order Status", interactive=False)
-
-    # Event: Display dishes for selected category
+    # Dish Details Section
+    with gr.Row(visible=False) as dish_details:
+        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.Dropdown(label="Select Spice Level", choices=spice_options)
+            portion_dropdown = gr.Dropdown(label="Select Portion Size", choices=portion_options)
+            place_order_btn = gr.Button("Place Order")
+            order_status = gr.Textbox(label="Order Status", interactive=False)
+
+    # Event to update dishes based on category
     def update_dishes(category):
         return gr.update(value=display_dishes(category))
 
@@ -98,32 +93,33 @@ with gr.Blocks() as demo:
     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
+    # Event to show dish details
     def show_dish_details(dish_name):
         details = get_dish_details(dish_name)
-        return details + (details[3], details[4])  # Return spice level and portion size
+        return gr.update(visible=True), details[0], details[1], details[2], details[3], details[4]
 
-    # Dummy HTML input for JS trigger
     selected_dish_name = gr.Textbox(visible=False)
-
-    # Bind the selected dish name to the details display and prefill dropdowns
-    selected_dish_name.change(fn=show_dish_details, inputs=selected_dish_name, 
-                              outputs=[dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown])
-
-    # Event: Place Order Button
-    place_order_btn.click(fn=place_order, 
-                          inputs=[dish_name, spice_dropdown, portion_dropdown], 
-                          outputs=order_status)
-
-    # Inject JavaScript to handle clicks and pass dish names
+    selected_dish_name.change(
+        fn=show_dish_details,
+        inputs=selected_dish_name,
+        outputs=[dish_details, dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown]
+    )
+
+    place_order_btn.click(
+        fn=place_order,
+        inputs=[dish_name, spice_dropdown, portion_dropdown],
+        outputs=order_status
+    )
+
+    # Inject JavaScript for interaction
     gr.HTML("""
     <script>
     function selectDish(dishName) {
-        document.querySelector('input[aria-label="selected_dish_name"]').value = dishName;
-        document.querySelector('input[aria-label="selected_dish_name"]').dispatchEvent(new Event('input'));
+        let input = document.querySelector('input[aria-label="selected_dish_name"]');
+        input.value = dishName;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
     }
     </script>
     """)
 
-# Launch the app
-demo.launch()
+demo.launch()