Update app.py

app.py

@@ -22,66 +22,62 @@ 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
+    main_image = dish_data[dish]["main"]
+    return main_image, dish, True
+
+# Function to handle displaying the portion size image
 def display_portion(dish, portion):
     if dish not in dish_data:
-        return None  # Handle invalid dish selection
+        return None
     portion_image = dish_data[dish].get(portion, None)
     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")
 
-    # Section to display dishes as clickable images
+    # Section to display dishes as clickable buttons
     with gr.Row():
+        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)
+
         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")
+            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")
         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")
+        for portion in ["small", "medium", "large"]:
+            portion_buttons.append(gr.Button(value=portion.capitalize()))
 
     # Link dish buttons to display the selected dish
-    for button, dish in dish_buttons:
+    for button, dish in zip(dish_buttons, dish_data.keys()):
         button.click(
             fn=display_dish,
             inputs=[gr.Textbox(value=dish, visible=False)],
-            outputs=[main_image, dish_name_display]
+            outputs=[main_image, dish_name_display, portion_row.visible],
         )
         button.click(
             fn=lambda x: x,
             inputs=[gr.Textbox(value=dish, visible=False)],
-            outputs=[selected_dish],
-            show_progress=False
+            outputs=selected_dish,
         )
-        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
+            outputs=portion_image,
         )
 
 # Launch the Gradio app