Update app.py

app.py

@@ -21,17 +21,20 @@ 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,
                 elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                 interactive=True,
             ).click(
-                display_card, 
-                inputs=[gr.Textbox(value=food_name, visible=False)], 
-                outputs=popup_area  # Reference the Gradio component
+                display_card,
+                inputs=[gr.Textbox(value=food_name, visible=False)],
+                outputs="popup-content"  # Update the popup content dynamically
             )
 
+    # Popup container
+    with gr.HTML(elem_id="popup-container", visible=True):
+        gr.HTML(value="", elem_id="popup-content")  # Placeholder for popup content
+
 # Launch the app
 app.launch()