Update app.py

app.py

@@ -50,66 +50,109 @@ spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
 portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
 
 # Function to filter dishes based on category
+def filter_dishes(category):
+    if category == "ALL":
+        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; 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 fetch details of the selected dish
 def get_dish_details(dish_name):
     if dish_name in dish_data:
         main_image = dish_data[dish_name]["main"]
-        return main_image, dish_name, "Select portion size and spice level below:", gr.update(visible=True)
-    return None, "Unknown Dish", "No description available.", gr.update(visible=False)
+        return main_image, dish_name, "Select a portion size and spice level below:"
+    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available."
 
-# Function to display portion size image
+# Function to display the portion size image
 def display_portion(dish_name, portion):
     if dish_name in dish_data:
-        return dish_data[dish_name].get(portion.lower(), None)
+        return dish_data[dish_name].get(portion, None)
     return None
 
 # Function to simulate placing an order
 def place_order(dish_name, spice_level, portion_size):
     return f"✅ Order Confirmed: '{dish_name}' with {spice_level} spice level and {portion_size} portion size."
 
-# Gradio App
+# Main Gradio App
 with gr.Blocks() as demo:
-    gr.Markdown("# Food Ordering System")
+    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
 
-    # Dish selection buttons
+    # Buttons for category selection
+    gr.Markdown("### Select a Category")
     with gr.Row():
-        for dish in dish_data.keys():
-            gr.Button(dish).click(
-                fn=get_dish_details,
-                inputs=[gr.Textbox(value=dish, visible=False)],
-                outputs=[
-                    gr.Image(label="Dish Image"),
-                    gr.Text(label="Dish Name"),
-                    gr.Text(label="Dish Description"),
-                    gr.Row(visible=False),
-                ],
-            )
-
-    # Dish details section (simulated modal)
-    with gr.Row(visible=False) as details_section:
-        dish_image = gr.Image(label="Dish Image")
+        btn_all = gr.Button("ALL")
+        btn_vegan = gr.Button("VEGAN")
+        btn_halal = gr.Button("HALAL")
+
+    # Dish display section
+    gr.Markdown("### Available Dishes")
+    dish_display = gr.HTML(value=display_dishes("ALL"))
+
+    # Popup for Dish Details
+    with gr.Modal("Dish Details") as dish_modal:
+        dish_image = gr.Image(label="Dish Image", height=200, width=200)
+        dish_name = gr.Textbox(label="Dish Name", interactive=False)
         with gr.Column():
-            dish_name = gr.Textbox(label="Dish Name", interactive=False)
-            dish_description = gr.Textbox(label="Dish 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")
+            portion_dropdown = gr.Radio(label="Select Portion Size", choices=["small", "medium", "large"], value="medium")
             portion_image = gr.Image(label="Portion Size Image")
 
-    # Event: Update portion size image
-    portion_dropdown.change(
-        fn=display_portion,
-        inputs=[dish_name, portion_dropdown],
-        outputs=portion_image,
-    )
-
-    # Place Order button
+    # Place Order Button inside Modal
     place_order_btn = gr.Button("Place Order")
     order_status = gr.Textbox(label="Order Status", interactive=False)
 
-    # Event: Place order
-    place_order_btn.click(
-        fn=place_order,
-        inputs=[dish_name, spice_dropdown, portion_dropdown],
-        outputs=order_status,
-    )
+    # Event: Update dish display for selected category
+    def update_dishes(category):
+        return gr.update(value=display_dishes(category))
+
+    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)
+
+    # Event: Show dish details in the modal when a dish is selected
+    def show_dish_details(dish_name):
+        image, name, description = get_dish_details(dish_name)
+        dish_modal.show()
+        return image, name, description
+
+    # Hidden input to receive dish name from JavaScript
+    selected_dish_name = gr.Textbox(visible=False)
+    selected_dish_name.change(fn=show_dish_details, inputs=selected_dish_name,
+                              outputs=[dish_image, dish_name, dish_modal])
+
+    # Event: Display portion size image
+    portion_dropdown.change(fn=display_portion, inputs=[selected_dish_name, portion_dropdown], outputs=portion_image)
+
+    # 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
+    gr.HTML("""
+    <script>
+    function selectDish(dishName) {
+        let input = document.querySelector('input[aria-label="selected_dish_name"]');
+        input.value = dishName;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+    </script>
+    """)
 
-demo.launch()
+demo.launch()