Update app.py

app.py

@@ -3,49 +3,27 @@ import gradio as gr
 # Extended menu data with dish details
 menu_data = [
     {"name": "Veg Burger", "category": "VEGAN",
-     "image": "https://tse4.mm.bing.net/th?id=OIP.D-CrCFm5OSRi_pzqlRjfXQHaE8&pid=Api&P=0&h=180",
+     "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://tse4.mm.bing.net/th?id=OIP.D-CrCFm5OSRi_pzqlRjfXQHaE8&pid=Api&P=0&h=180",
+     "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://tse4.mm.bing.net/th?id=OIP.D-CrCFm5OSRi_pzqlRjfXQHaE8&pid=Api&P=0&h=180",
+     "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://tse4.mm.bing.net/th?id=OIP.D-CrCFm5OSRi_pzqlRjfXQHaE8&pid=Api&P=0&h=180",
+     "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://tse4.mm.bing.net/th?id=OIP.D-CrCFm5OSRi_pzqlRjfXQHaE8&pid=Api&P=0&h=180",
+     "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"}
 ]
 
-# Define available dishes and their portion sizes with image paths
-dish_data = {
-    "Veg Burger": {
-        "main": "pizza_main.jpg",
-        "small": "pizza_small.jpg",
-        "medium": "pizza_medium.jpg",
-        "large": "pizza_large.jpg",
-    },
-    "Chicken Biryani": {
-        "main": "pizza_main.jpg",
-        "small": "pizza_small.jpg",
-        "medium": "pizza_medium.jpg",
-        "large": "pizza_large.jpg",
-    },
-    "Paneer Butter Masala": {
-        "main": "pizza_main.jpg",
-        "small": "pizza_small.jpg",
-        "medium": "pizza_medium.jpg",
-        "large": "pizza_large.jpg",
-    },
-}
-
 spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
 portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
 
@@ -63,7 +41,7 @@ def display_dishes(category):
         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']}\")'>
+             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>
@@ -74,16 +52,10 @@ def display_dishes(category):
 
 # 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 a portion size and spice level below:"
-    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available."
-
-# 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, None)
-    return None
+    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):
@@ -104,16 +76,17 @@ with gr.Blocks() as demo:
     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 Details Section
+    gr.Markdown("### Dish Details")
+    with gr.Row():
         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="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=["small", "medium", "large"], value="medium")
-            portion_image = gr.Image(label="Portion Size Image")
+            portion_dropdown = gr.Radio(label="Select Portion Size", choices=portion_options, value="🍽 Medium")
 
-    # Place Order Button inside Modal
+    # Place Order Button
     place_order_btn = gr.Button("Place Order")
     order_status = gr.Textbox(label="Order Status", interactive=False)
 
@@ -125,19 +98,15 @@ with gr.Blocks() as demo:
     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
+    # Event: Show dish details 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
+        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_modal])
-
-    # Event: Display portion size image
-    portion_dropdown.change(fn=display_portion, inputs=[selected_dish_name, portion_dropdown], outputs=portion_image)
+                              outputs=[dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown])
 
     # Event: Place order button
     place_order_btn.click(fn=place_order,