Update app.py

app.py

@@ -1,12 +1,12 @@
 import gradio as gr
 
-# Dictionary to store images for each dish and portion size
+# Define available dishes and their portion sizes with image paths
 dish_data = {
     "Pizza": {
-        "main": "pizza_main.jpg",
-        "small": "pizza_small.jpg",
-        "medium": "pizza_medium.jpg",
-        "large": "pizza_large.jpg",
+        "main": "images/pizza_main.jpg",
+        "small": "images/pizza_small.jpg",
+        "medium": "images/pizza_medium.jpg",
+        "large": "images/pizza_large.jpg",
     },
     "Burger": {
         "main": "images/burger_main.jpg",
@@ -22,34 +22,47 @@ dish_data = {
     },
 }
 
-# Function to display the main image and portion size image
+# Function to display images dynamically
 def display_images(dish, portion):
-    if dish in dish_data:
-        main_image = dish_data[dish]["main"]
-        portion_image = dish_data[dish].get(portion, main_image)  # Default to main image if portion not found
-        return main_image, portion_image
-    return "", ""
-
-# Gradio interface
-dish_list = list(dish_data.keys())
-portion_sizes = ["small", "medium", "large"]
+    if dish not in dish_data:
+        return None, None  # Handle invalid dish selection
+    main_image = dish_data[dish]["main"]
+    portion_image = dish_data[dish].get(portion, None)
+    return main_image, portion_image
 
+# Define the Gradio interface
 with gr.Blocks() as demo:
-    gr.Markdown("### Select a Dish and Portion Size")
-
+    gr.Markdown("# Food Ordering System with Portion Sizes")
+    
+    # Dish selection dropdown
     with gr.Row():
-        dish_dropdown = gr.Dropdown(choices=dish_list, label="Select Dish")
-        portion_dropdown = gr.Dropdown(choices=portion_sizes, label="Select Portion Size")
-
+        dish_dropdown = gr.Dropdown(
+            choices=list(dish_data.keys()),
+            label="Select Dish",
+            value="Pizza"
+        )
+        portion_dropdown = gr.Dropdown(
+            choices=["small", "medium", "large"],
+            label="Select Portion Size",
+            value="small"
+        )
+    
+    # Image display section
     with gr.Row():
-        main_image_display = gr.Image(label="Main Image")
-        portion_image_display = gr.Image(label="Portion Image")
-
-    # Button to trigger image display
-    submit_button = gr.Button("Show Images")
-
-    # Update images based on selections
-    submit_button.click(display_images, inputs=[dish_dropdown, portion_dropdown], outputs=[main_image_display, portion_image_display])
+        main_image = gr.Image(label="Main Image")
+        portion_image = gr.Image(label="Portion Size Image")
+    
+    # Link dropdowns to the image display function
+    dish_dropdown.change(
+        fn=display_images,
+        inputs=[dish_dropdown, portion_dropdown],
+        outputs=[main_image, portion_image]
+    )
+    portion_dropdown.change(
+        fn=display_images,
+        inputs=[dish_dropdown, portion_dropdown],
+        outputs=[main_image, portion_image]
+    )
 
-# Launch the application
+# Launch the Gradio app
 demo.launch()