Update app.py

app.py

@@ -21,6 +21,7 @@ with gr.Blocks(css="styles.css") as app:
 
     # Display all items as clickable cards
     with gr.Row(elem_id="food-list"):
+        display_area = gr.HTML()  # Popup card display area
         for food_name in FOOD_DATA.keys():
             with gr.Column():
                 # Each button is a card for a food item
@@ -28,10 +29,11 @@ with gr.Blocks(css="styles.css") as app:
                     value=food_name,
                     elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                     interactive=True,
-                ).click(display_card, inputs=[gr.Textbox(value=food_name, visible=False)], outputs="display-area")
-
-    # Display area for the popup card
-    display_area = gr.HTML(elem_id="display-area")
+                ).click(
+                    display_card, 
+                    inputs=[gr.Textbox(value=food_name, visible=False)], 
+                    outputs=display_area
+                )
 
 # Launch the app
 app.launch()