Update app.py

app.py

@@ -1,4 +1,5 @@
 import gradio as gr
+
 # Define available dishes and their portion sizes with image paths
 dish_data = {
     "Pizza": {
@@ -24,9 +25,9 @@ dish_data = {
 # Function to handle displaying the main dish image and enabling portion buttons
 def display_dish(dish):
     if dish not in dish_data:
-        return None, dish, False
+        return None, dish, gr.update(visible=False)
     main_image = dish_data[dish]["main"]
-    return main_image, dish, True
+    return main_image, dish, gr.update(visible=True)
 
 # Function to handle displaying the portion size image
 def display_portion(dish, portion):
@@ -44,17 +45,16 @@ with gr.Blocks() as demo:
         selected_dish = gr.State()  # Store the selected dish
         main_image = gr.Image(label="Dish Image")
         dish_name_display = gr.Text(label="Dish Name")
-        portion_visible = gr.State(value=False)
+        portion_row = gr.Row(visible=False)  # Portion size buttons section
+        portion_image = gr.Image(label="Portion Size Image")
 
         dish_buttons = []
         for dish, data in dish_data.items():
             dish_buttons.append(gr.Button(value=dish, elem_id=f"button_{dish}"))
 
-    # Section to display portion size buttons and corresponding image
-    with gr.Row(visible=False) as portion_row:
-        gr.Markdown("## Select Portion Size")
+    # Section to display portion size buttons
+    with portion_row:
         portion_buttons = []
-        portion_image = gr.Image(label="Portion Size Image")
         for portion in ["small", "medium", "large"]:
             portion_buttons.append(gr.Button(value=portion.capitalize()))
 
@@ -63,7 +63,7 @@ with gr.Blocks() as demo:
         button.click(
             fn=display_dish,
             inputs=[gr.Textbox(value=dish, visible=False)],
-            outputs=[main_image, dish_name_display, portion_row.visible],
+            outputs=[main_image, dish_name_display, portion_row],
         )
         button.click(
             fn=lambda x: x,