Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 
-# Menu data with dish details
+# Menu data with all details
 menu_data = {
     "All": [
         {"name": "Veg Burger", "category": "Vegan", "image": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg",
@@ -18,7 +18,7 @@ menu_data = {
     ]
 }
 
-# Function to get dish names based on the selected category
+# Function to filter dishes based on category
 def filter_dishes(category):
     if category == "ALL":
         return [dish["name"] for dish in menu_data["All"]]
@@ -28,53 +28,53 @@ def filter_dishes(category):
         return [dish["name"] for dish in menu_data["All"] if dish["category"] == "Halal"]
     return []
 
-# Function to display dish details when a dish is selected
+# Function to show dish details
 def show_dish_details(dish_name):
     for dish in menu_data["All"]:
         if dish["name"] == dish_name:
-            return (
-                dish["image"],
-                dish["description"],
-                dish["price"],
-                dish["spice_level"],
-                dish["portion_size"]
-            )
+            return (dish["image"], dish["description"], dish["price"], dish["spice_level"], dish["portion_size"])
     return None, "Dish not found", "N/A", "N/A", "N/A"
 
-# Gradio UI
+# Main Gradio UI
 def create_ui():
     with gr.Blocks() as demo:
         # Heading
         gr.HTML("<h1 style='text-align: center;'>Biryani Hub Menu</h1>")
-
+        
         # Category Selection Buttons
         with gr.Row():
             all_button = gr.Button("ALL")
             vegan_button = gr.Button("VEGAN")
             halal_button = gr.Button("HALAL")
-
-        # Dropdown for selecting dishes
-        dish_dropdown = gr.Dropdown(label="Select Dish", choices=filter_dishes("ALL"), value=None, interactive=True)
-
-        # Dish Details
+        
+        # Section 1: Menu 1 - Dish Names by Category
+        gr.Markdown("### Select Items by Category")
+        dish_list = gr.CheckboxGroup(label="Available Dishes", choices=filter_dishes("ALL"), interactive=True)
+        
+        # Section 2: Menu 2 - Selected Items
+        gr.Markdown("### Selected Items")
+        selected_dishes = gr.Dropdown(label="Select a Dish to View Details", choices=[], interactive=True)
+        
+        # Section 3: Dish Details
+        gr.Markdown("### Dish Details")
         dish_image = gr.Image(label="Dish Image", type="pil")
         dish_description = gr.Textbox(label="Description", interactive=False)
         dish_price = gr.Textbox(label="Price", interactive=False)
         dish_spice_level = gr.Textbox(label="Spice Level", interactive=False)
         dish_portion_size = gr.Textbox(label="Portion Size", interactive=False)
 
-        # Update dish list based on category button click
-        all_button.click(fn=lambda: filter_dishes("ALL"), outputs=dish_dropdown)
-        vegan_button.click(fn=lambda: filter_dishes("VEGAN"), outputs=dish_dropdown)
-        halal_button.click(fn=lambda: filter_dishes("HALAL"), outputs=dish_dropdown)
+        # Event: Update dish_list based on category buttons
+        all_button.click(fn=lambda: filter_dishes("ALL"), outputs=dish_list)
+        vegan_button.click(fn=lambda: filter_dishes("VEGAN"), outputs=dish_list)
+        halal_button.click(fn=lambda: filter_dishes("HALAL"), outputs=dish_list)
 
-        # Display dish details when a dish is selected
-        dish_dropdown.change(
-            fn=show_dish_details,
-            inputs=dish_dropdown,
-            outputs=[dish_image, dish_description, dish_price, dish_spice_level, dish_portion_size]
-        )
+        # Event: Update selected_dishes dropdown when items are selected in dish_list
+        dish_list.change(fn=lambda x: x if x else [], inputs=dish_list, outputs=selected_dishes)
 
+        # Event: Show dish details when a dish is selected from selected_dishes
+        selected_dishes.change(fn=show_dish_details, inputs=selected_dishes, 
+                               outputs=[dish_image, dish_description, dish_price, dish_spice_level, dish_portion_size])
+        
     return demo
 
 # Launch the Gradio app