Update app.py

app.py

@@ -22,27 +22,16 @@ menu_data = [
 spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
 portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
 
-# Function to display dishes dynamically based on category
-def display_dishes(category):
-    filtered_dishes = menu_data if category == "ALL" else [dish for dish in menu_data if dish["category"] == 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; background-color: #f9f9f9;'
-             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; color: #444;'>{dish['name']}</h4>
-        </div>
-        """
-    html_content += "</div>"
-    return html_content
+# Function to filter dishes by category
+def get_dish_list(category):
+    if category == "ALL":
+        return [dish["name"] for dish in menu_data]
+    return [dish["name"] for dish in menu_data if dish["category"] == category]
 
 # Function to fetch dish details
 def get_dish_details(dish_name):
     for dish in menu_data:
-        if dish["name"] == dish_name.strip():
+        if dish["name"] == dish_name:
             return dish["image"], dish["name"], dish["description"]
     return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available."
 
@@ -53,65 +42,49 @@ def place_order(dish_name, spice_level, portion_size):
     return "⚠️ Please select a dish before placing an order."
 
 # Main Gradio App
-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")
-    with gr.Row():
-        btn_all = gr.Button("ALL")
-        btn_vegan = gr.Button("VEGAN")
-        btn_halal = gr.Button("HALAL")
-
-    # Dish display section
-    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_btn = gr.Button("Place Order")
-            order_status = gr.Textbox(label="Order Status", interactive=False)
-
-    # Event: Update Dish Display for Selected Category
-    def update_category(category):
-        return display_dishes(category)
-
-    btn_all.click(fn=lambda: update_category("ALL"), outputs=dish_display)
-    btn_vegan.click(fn=lambda: update_category("VEGAN"), outputs=dish_display)
-    btn_halal.click(fn=lambda: update_category("HALAL"), outputs=dish_display)
-
-    # Hidden textbox to pass dish name dynamically
-    selected_dish_name = gr.Textbox(visible=False)
-
-    # Event: Show Dish Details
-    def update_dish_details(selected_dish):
-        image, name, description = get_dish_details(selected_dish)
-        return image, name, description
-
-    selected_dish_name.change(fn=update_dish_details,
-                              inputs=selected_dish_name,
-                              outputs=[dish_image, dish_name, dish_description])
-
-    # Place Order
-    place_order_btn.click(fn=place_order,
-                          inputs=[dish_name, spice_dropdown, portion_dropdown],
-                          outputs=order_status)
-
-    # Inject JavaScript to pass dish name dynamically
-    gr.HTML("""
-    <script>
-    function selectDish(dishName) {
-        const input = document.querySelector('input[aria-label="selected_dish_name"]');
-        input.value = dishName;
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-    }
-    </script>
-    """)
-
-demo.launch()
+def gradio_app():
+    with gr.Blocks() as demo:
+        gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
+
+        # Category Selection
+        gr.Markdown("### Select a Category")
+        category_dropdown = gr.Radio(choices=["ALL", "VEGAN", "HALAL"], label="Categories", value="ALL")
+
+        # Dish Selection
+        gr.Markdown("### Select a Dish")
+        dish_selector = gr.Radio(label="Available Dishes", choices=get_dish_list("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_btn = gr.Button("Place Order")
+                order_status = gr.Textbox(label="Order Status", interactive=False)
+
+        # Update dish list dynamically
+        def update_dish_list(category):
+            return gr.update(choices=get_dish_list(category))
+
+        category_dropdown.change(fn=update_dish_list, inputs=category_dropdown, outputs=dish_selector)
+
+        # Update dish details dynamically
+        def update_dish_details(dish_name_input):
+            return get_dish_details(dish_name_input)
+
+        dish_selector.change(fn=update_dish_details, inputs=dish_selector,
+                             outputs=[dish_image, dish_name, dish_description])
+
+        # Place order functionality
+        place_order_btn.click(fn=place_order,
+                              inputs=[dish_name, spice_dropdown, portion_dropdown],
+                              outputs=order_status)
+
+    return demo
+
+# Launch the app
+gradio_app().launch()