Update app.py

app.py

@@ -1,5 +1,4 @@
 import gradio as gr
-from gradio_modal import Modal
 from components.cards import create_food_card
 from components.data import FOOD_DATA
 
@@ -20,8 +19,8 @@ with gr.Blocks(css="styles.css") as app:
         """
     )
 
-    # Create a modal
-    modal = Modal()
+    # Define the popup area as an HTML component
+    popup_area = gr.HTML(visible=False, elem_id="popup")
 
     # Display all items as a vertical list
     with gr.Column(elem_id="food-list"):
@@ -31,10 +30,17 @@ with gr.Blocks(css="styles.css") as app:
                 elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                 interactive=True,
             ).click(
-                lambda x=food_name: modal.show(content=display_card(x)),
-                inputs=None,
-                outputs=[]
+                display_card,  # Update the popup content
+                inputs=[gr.Textbox(value=food_name, visible=False)],
+                outputs=popup_area  # Set the HTML content of the popup
             )
 
+    # Close popup button
+    gr.Button("Close Popup", elem_id="close-popup").click(
+        lambda: "",  # Clear the popup content
+        inputs=None,
+        outputs=popup_area,
+    )
+
 # Launch the app
 app.launch()