Update app.py

app.py

@@ -21,6 +21,7 @@ with gr.Blocks(css="styles.css") as app:
 
     # Display all items as a vertical list
     with gr.Column(elem_id="food-list"):
+        popup_area = gr.HTML(visible=False)  # Popup card display area
         for food_name in FOOD_DATA.keys():
             gr.Button(
                 value=food_name,
@@ -29,11 +30,11 @@ with gr.Blocks(css="styles.css") as app:
             ).click(
                 display_card, 
                 inputs=[gr.Textbox(value=food_name, visible=False)], 
-                outputs="popup-card"
+                outputs=popup_area  # Reference the Gradio component, not a string
             )
 
-    # Popup area for displaying the card
-    popup_area = gr.HTML(visible=False, elem_id="popup-card")
+    # Add the popup area to the app
+    popup_area.render()
 
 # Launch the app
 app.launch()