Update app.py

app.py

@@ -1,6 +1,6 @@
 import gradio as gr
 
-# Extended menu data with dish details
+# 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,54 +30,31 @@ def filter_dishes(category):
         return menu_data
     return [dish for dish in menu_data if dish["category"] == category]
 
-# 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
+# Function to fetch dish details
 def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
-            return (gr.update(visible=True), dish["image"], dish["name"], dish["description"], 
-                    dish["spice_level"], dish["portion_size"])
-    return (gr.update(visible=True), "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!"
+            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")
 
 # Main Gradio App
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center;'>Biryani Hub Menu</h1>")
 
-    # Buttons for category selection
+    # Category Buttons
     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=display_dishes("ALL"))
+    dish_display = gr.HTML(value="", interactive=False)
 
-    # Dish details section (hidden initially)
+    # Dish Details Section (Hidden Initially)
     with gr.Row(visible=False) as dish_details:
-        dish_image = gr.Image(label="Dish Image", type="filepath", width=200, height=200)
+        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)
@@ -86,29 +63,51 @@ with gr.Blocks() as demo:
             place_order_btn = gr.Button("Place Order")
             order_status = gr.Textbox(label="Order Status", interactive=False)
 
-    # Event: Update dishes for selected category
+    # Function to update the dish display based on category
     def update_dishes(category):
-        return gr.update(value=display_dishes(category)), gr.update(visible=False)
+        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
+
+    # Event: Place Order
+    def place_order(dish_name):
+        return f"Your order for '{dish_name}' has been placed successfully!"
 
+    # 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])
 
-    # Bind the selected dish name to details display
+    # Hidden input for JS to Gradio interaction
     selected_dish_name = gr.Textbox(visible=False)
-    selected_dish_name.change(fn=get_dish_details, inputs=selected_dish_name, 
+    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])
 
-    # 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
     gr.HTML("""
     <script>
     function selectDish(dishName) {
-        const textbox = document.querySelector('input[aria-label="selected_dish_name"]');
-        textbox.value = dishName;
-        textbox.dispatchEvent(new Event('input'));
+        document.querySelector('input[aria-label="selected_dish_name"]').value = dishName;
+        document.querySelector('input[aria-label="selected_dish_name"]').dispatchEvent(new Event('input'));
     }
     </script>
     """)