Update app.py

app.py

@@ -1,4 +1,5 @@
 import gradio as gr
+from gradio_modal import Modal
 from components.cards import create_food_card
 from components.data import FOOD_DATA
 
@@ -19,8 +20,8 @@ with gr.Blocks(css="styles.css") as app:
         """
     )
 
-    # Create a hidden popup area
-    popup_area = gr.HTML(visible=False)
+    # Initialize the modal
+    modal = Modal()
 
     # Display all items as a vertical list
     with gr.Column(elem_id="food-list"):
@@ -30,13 +31,10 @@ with gr.Blocks(css="styles.css") as app:
                 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 popup HTML component
+                lambda x=food_name: (modal.show(), display_card(x)),
+                inputs=None,
+                outputs=[modal, modal.content]
             )
 
-    # Add the popup area to the app
-    popup_area.style()
-
 # Launch the app
 app.launch()