Update app.py

app.py

@@ -76,7 +76,7 @@ def display_dishes(category):
 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 below:"
+        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
@@ -104,18 +104,16 @@ with gr.Blocks() as demo:
     gr.Markdown("### Available Dishes")
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # Dish Details Section
-    gr.Markdown("### Dish Details")
-    with gr.Row():
+    # 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="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")
 
-    # Place Order Button
+    # Place Order Button inside Modal
     place_order_btn = gr.Button("Place Order")
     order_status = gr.Textbox(label="Order Status", interactive=False)
 
@@ -127,15 +125,16 @@ 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 when a dish is selected
+    # 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_description])
+                              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)