Update app.py

app.py

@@ -2,9 +2,12 @@ import gradio as gr
 from components.cards import create_food_card
 from components.data import FOOD_DATA
 
-# Function to render the popup card when an item is clicked
+# Function to render the popup card when a button is clicked
 def display_card(food_name):
-    return create_food_card(food_name)
+    if food_name in FOOD_DATA:
+        return create_food_card(food_name)
+    else:
+        return "<p>No data available for the selected item.</p>"
 
 # Gradio app interface
 with gr.Blocks(css="styles.css") as app:
@@ -17,18 +20,18 @@ with gr.Blocks(css="styles.css") as app:
     )
 
     # Display all items as clickable cards
-    with gr.Row():
+    with gr.Row(elem_id="food-list"):
         for food_name in FOOD_DATA.keys():
             with gr.Column():
-                # Each item card is a clickable button
+                # Each button is a card for a food item
                 gr.Button(
                     value=food_name,
                     elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                     interactive=True,
-                ).click(display_card, inputs=None, outputs=gr.HTML())
+                ).click(display_card, inputs=[gr.Textbox(value=food_name, visible=False)], outputs="display-area")
 
     # Display area for the popup card
-    display_area = gr.HTML()
+    display_area = gr.HTML(elem_id="display-area")
 
 # Launch the app
 app.launch()