Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 
-# Menu data with dish details
+# 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",
@@ -30,79 +30,86 @@ def filter_dishes(category):
         return menu_data
     return [dish for dish in menu_data if dish["category"] == category]
 
-# Function to fetch dish details
+# Function to display dishes with images
+def display_dishes(category):
+    filtered_dishes = filter_dishes(category)
+    html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
+    for dish in filtered_dishes:
+        html_content += f"""
+        <div style='margin: 10px; text-align: center; cursor: pointer; border: 1px solid #ddd; 
+                    padding: 10px; border-radius: 10px; width: 200px;'
+             onclick='selectDish("{dish['name']}")'>
+            <img src='{dish['image']}' alt='{dish['name']}' 
+                 style='width: 180px; height: 120px; object-fit: cover; border-radius: 10px;'>
+            <h4 style='margin-top: 10px; font-size: 16px;'>{dish['name']}</h4>
+        </div>
+        """
+    html_content += "</div>"
+    return html_content
+
+# Function to fetch details of the selected dish
 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
+def place_order(dish_name):
+    return f"Your order for '{dish_name}' has been placed successfully!"
 
 # Main Gradio App
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center;'>Biryani Hub Menu</h1>")
 
-    # Category Buttons
+    # Buttons for category selection
     gr.Markdown("### Select a Category")
     with gr.Row():
         btn_all = gr.Button("ALL")
         btn_vegan = gr.Button("VEGAN")
         btn_halal = gr.Button("HALAL")
 
-    # Dish Display Section
+    # Dish display section
     gr.Markdown("### Available Dishes")
-    dish_display = gr.HTML(value="")
-
-    # Dish Details Section (Hidden Initially)
-    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)
-            dish_spice = gr.Textbox(label="Spice Level", interactive=False)
-            dish_portion = gr.Textbox(label="Portion Size", interactive=False)
-            place_order_btn = gr.Button("Place Order")
-            order_status = gr.Textbox(label="Order Status", interactive=False)
-
-    # Function to update the dish display based on category
+    dish_display = gr.HTML(value=display_dishes("ALL"))
+
+    # Detailed Dish View
+    gr.Markdown("### Dish Details")
+    dish_image = gr.Image(label="Dish Image")
+    dish_name = gr.Textbox(label="Dish Name", interactive=False)
+    dish_description = gr.Textbox(label="Description", interactive=False)
+    dish_spice = gr.Textbox(label="Spice Level", interactive=False)
+    dish_portion = gr.Textbox(label="Portion Size", interactive=False)
+
+    # 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
     def update_dishes(category):
-        dishes = filter_dishes(category)
-        html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
-        for dish in dishes:
-            html_content += f"""
-            <div style='margin: 10px; text-align: center; cursor: pointer; border: 1px solid #ddd; 
-                        padding: 10px; border-radius: 10px; width: 200px;'
-                 onclick='selectDish("{dish['name']}")'>
-                <img src='{dish['image']}' alt='{dish['name']}' 
-                     style='width: 180px; height: 120px; object-fit: cover; border-radius: 10px;'>
-                <h4 style='margin-top: 10px; font-size: 16px;'>{dish['name']}</h4>
-            </div>
-            """
-        html_content += "</div>"
-        return html_content, gr.update(visible=False)
-
-    # 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 gr.update(visible=True), image, name, description, spice, portion
+        return gr.update(value=display_dishes(category))
 
-    # Event: Place Order
-    def place_order(dish_name):
-        return f"Your order for '{dish_name}' has been placed successfully!"
+    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)
 
-    # Buttons for category filtering
-    btn_all.click(fn=lambda: update_dishes("ALL"), outputs=[dish_display, dish_details])
-    btn_vegan.click(fn=lambda: update_dishes("VEGAN"), outputs=[dish_display, dish_details])
-    btn_halal.click(fn=lambda: update_dishes("HALAL"), outputs=[dish_display, dish_details])
+    # Event: Show dish details
+    def show_dish_details(dish_name):
+        return get_dish_details(dish_name)
 
-    # Hidden input for JS to Gradio interaction
+    # Dummy HTML input for JS trigger
     selected_dish_name = gr.Textbox(visible=False)
+
+    # Bind the selected dish name to the details display
     selected_dish_name.change(fn=show_dish_details, inputs=selected_dish_name, 
-                              outputs=[dish_details, dish_image, dish_name, dish_description, dish_spice, dish_portion])
+                              outputs=[dish_image, dish_name, dish_description, dish_spice, dish_portion])
 
-    # Place order button
+    # Event: Place Order Button
     place_order_btn.click(fn=place_order, inputs=dish_name, outputs=order_status)
 
-    # Inject JavaScript for dish selection
+    # Inject JavaScript to handle clicks and pass dish names
     gr.HTML("""
     <script>
     function selectDish(dishName) {
@@ -113,4 +120,4 @@ with gr.Blocks() as demo:
     """)
 
 # Launch the app
-demo.launch()
+demo.launch()