Update app.py

app.py

@@ -1,129 +1,127 @@
 import gradio as gr
 
-# Define available dishes and their portion sizes with image paths and categories
-dish_data = {
-    "Pizza": {
-        "main": "pizza_main.jpg",
-        "small": "pizza_small.jpg",
-        "medium": "pizza_medium.jpg",
-        "large": "pizza_large.jpg",
-        "category": "All",
-    },
-    "Vegan Salad": {
-        "main": "images/vegan_salad_main.jpg",
-        "small": "images/vegan_salad_small.jpg",
-        "medium": "images/vegan_salad_medium.jpg",
-        "large": "images/vegan_salad_large.jpg",
-        "category": "Vegan",
-    },
-    "Halal Chicken": {
-        "main": "images/halal_chicken_main.jpg",
-        "small": "images/halal_chicken_small.jpg",
-        "medium": "images/halal_chicken_medium.jpg",
-        "large": "images/halal_chicken_large.jpg",
-        "category": "Halal",
-    },
-    "Allergenic Soup": {
-        "main": "images/allergenic_soup_main.jpg",
-        "small": "images/allergenic_soup_small.jpg",
-        "medium": "images/allergenic_soup_medium.jpg",
-        "large": "images/allergenic_soup_large.jpg",
-        "category": "Allergenic",
-    },
-}
-
+# 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",
+     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
+     "spice_level": "Medium", "portion_size": "Regular"},
+    {"name": "Chicken Biryani", "category": "HALAL",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg",
+     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
+     "spice_level": "High", "portion_size": "Large"},
+    {"name": "Paneer Butter Masala", "category": "VEGAN",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg",
+     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
+     "spice_level": "Mild", "portion_size": "Medium"},
+    {"name": "Beef Steak", "category": "HALAL",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/d/d5/Beef_Steak.jpg",
+     "description": "Juicy beef steak served with mashed potatoes and grilled vegetables.",
+     "spice_level": "Medium", "portion_size": "Large"},
+    {"name": "Mushroom Soup", "category": "VEGAN",
+     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3c/Mushroom_Soup.jpg",
+     "description": "Creamy mushroom soup with fresh herbs.",
+     "spice_level": "Mild", "portion_size": "Small"}
+]
+
+spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
+portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
+
+# Function to filter dishes based on category
 def filter_dishes(category):
-    return {dish: data for dish, data in dish_data.items() if category == "All" or data["category"] == category}
-
-def display_dish(dish):
-    if dish not in dish_data:
-        return None, dish, gr.update(visible=False), gr.update(visible=False)
-    main_image = dish_data[dish]["main"]
-    return main_image, dish, gr.update(visible=True), gr.update(visible=True)
-
-def display_portion(dish, portion):
-    if dish not in dish_data:
-        return None
-    portion_image = dish_data[dish].get(portion, None)
-    return portion_image
-
-def spice_level_selection(spice_level):
-    return f"Selected spice level: {spice_level}"
-
-# Define the Gradio interface
+    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):
+    for dish in menu_data:
+        if dish["name"] == dish_name:
+            return dish["image"], dish["name"], dish["description"], "🌶 Medium", "🍽 Medium"
+    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, spice_level, portion_size):
+    return f"✅ Order Confirmed: '{dish_name}' with {spice_level} spice level and {portion_size} portion size."
+
+# Main Gradio App
 with gr.Blocks() as demo:
-    gr.Markdown("# Food Ordering System")
-
-    # Category selection
-    category_dropdown = gr.Dropdown(
-        choices=["All", "Vegan", "Halal", "Allergenic"],
-        value="All",
-        label="Select Category"
-    )
-
-    # Dynamic dish buttons
-    dish_buttons = gr.Row()
-
-    def update_dish_buttons(category):
-        filtered_dishes = filter_dishes(category)
-        buttons = []
-        for dish, data in filtered_dishes.items():
-            buttons.append(gr.Button(value=dish))
-        return buttons
-
-    category_dropdown.change(
-        fn=update_dish_buttons,
-        inputs=category_dropdown,
-        outputs=dish_buttons
-    )
-
-    # Section to display the main image of the selected dish
-    selected_dish = gr.State()  # Store the selected dish
-    main_image = gr.Image(label="Dish Image")
-    dish_name_display = gr.Text(label="Dish Name")
-    portion_row = gr.Row(visible=False)  # Portion size buttons section
-    portion_image = gr.Image(label="Portion Size Image")
-    spice_row = gr.Row(visible=False)  # Spice level buttons section
-
-    # Portion size buttons
-    with portion_row:
-        portion_buttons = []
-        for portion in ["small", "medium", "large"]:
-            portion_buttons.append(gr.Button(value=portion.capitalize()))
-
-    # Spice level buttons
-    with spice_row:
-        spice_buttons = []
-        for spice in ["Mild", "Medium", "Spicy"]:
-            spice_buttons.append(gr.Button(value=spice))
-
-    # Link dish buttons to display the selected dish
-    def create_dish_click_handler(dish):
-        return lambda: display_dish(dish)
-
-    for dish in dish_data.keys():
-        button = gr.Button(value=dish, visible=False)
-        button.click(
-            fn=create_dish_click_handler(dish),
-            inputs=[],
-            outputs=[main_image, dish_name_display, portion_row, spice_row],
-        )
-
-    # Link portion buttons to display the portion image
-    for portion_button, portion in zip(portion_buttons, ["small", "medium", "large"]):
-        portion_button.click(
-            fn=display_portion,
-            inputs=[selected_dish, gr.Textbox(value=portion, visible=False)],
-            outputs=portion_image,
-        )
-
-    # Link spice level buttons to display the spice level
-    for spice_button, spice in zip(spice_buttons, ["Mild", "Medium", "Spicy"]):
-        spice_button.click(
-            fn=spice_level_selection,
-            inputs=[gr.Textbox(value=spice, visible=False)],
-            outputs=dish_name_display
-        )
-
-# Launch the Gradio app
+    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 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
+    gr.Markdown("### Available Dishes")
+    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 Button
+    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_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 when a dish is selected
+    def show_dish_details(dish_name):
+        image, name, description, spice, portion = get_dish_details(dish_name)
+        return image, name, description, spice, portion
+
+    # 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_description, spice_dropdown, portion_dropdown])
+
+    # 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()