Update app.py

app.py

@@ -3,10 +3,10 @@ import gradio as gr
 # 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,47 +22,67 @@ dish_data = {
     },
 }
 
-# Function to display images dynamically
-def display_images(dish, portion):
+def display_portion(dish, portion):
     if dish not in dish_data:
-        return None, None  # Handle invalid dish selection
-    main_image = dish_data[dish]["main"]
+        return None  # Handle invalid dish selection
     portion_image = dish_data[dish].get(portion, None)
-    return main_image, portion_image
+    return portion_image
+
+def display_dish(dish):
+    if dish not in dish_data:
+        return None, None
+    main_image = dish_data[dish]["main"]
+    return main_image, dish
 
 # Define the Gradio interface
 with gr.Blocks() as demo:
-    gr.Markdown("# Food Ordering System with Portion Sizes")
-    
-    # Dish selection dropdown
+    gr.Markdown("# Food Ordering System")
+
+    # Section to display dishes as clickable images
     with gr.Row():
-        dish_dropdown = gr.Dropdown(
-            choices=list(dish_data.keys()),
-            label="Select Dish",
-            value="Pizza"
+        dish_buttons = []
+        for dish, data in dish_data.items():
+            with gr.Column():
+                button = gr.Button(value=dish, elem_id=f"button_{dish}")
+                dish_buttons.append((button, dish))
+
+    # Section to display the main image of the selected dish
+    selected_dish = gr.State()  # Store the selected dish name
+    main_image = gr.Image(label="Dish Image")
+    dish_name_display = gr.Text(label="Dish Name")
+
+    # Section to display portion size buttons and corresponding image
+    with gr.Row(visible=False) as portion_row:
+        gr.Markdown("## Select Portion Size")
+        portion_buttons = []
+        for portion in ["small", "medium", "large"]:
+            portion_button = gr.Button(value=portion.capitalize())
+            portion_buttons.append(portion_button)
+
+        portion_image = gr.Image(label="Portion Size Image")
+
+    # Link dish buttons to display the selected dish
+    for button, dish in dish_buttons:
+        button.click(
+            fn=display_dish,
+            inputs=[gr.Textbox(value=dish, visible=False)],
+            outputs=[main_image, dish_name_display]
         )
-        portion_dropdown = gr.Dropdown(
-            choices=["small", "medium", "large"],
-            label="Select Portion Size",
-            value="small"
+        button.click(
+            fn=lambda x: x,
+            inputs=[gr.Textbox(value=dish, visible=False)],
+            outputs=[selected_dish],
+            show_progress=False
+        )
+        button.click(None, [], [], _js=f"() => document.querySelector('[visible=false]').style.display = 'flex';")
+
+    # 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
         )
-    
-    # Image display section
-    with gr.Row():
-        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 Gradio app
 demo.launch()