Update app.py

app.py

@@ -2,15 +2,9 @@ import gradio as gr
 from components.cards import create_food_card
 from components.data import FOOD_DATA
 
-# Function to display the food card when an item is selected
+# Function to render the popup card when an item is clicked
 def display_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>"
-
-# List of food items
-food_items = list(FOOD_DATA.keys())
+    return create_food_card(food_name)
 
 # Gradio app interface
 with gr.Blocks(css="styles.css") as app:
@@ -18,22 +12,23 @@ with gr.Blocks(css="styles.css") as app:
     gr.Markdown(
         """
         ### Explore Popular Dishes 🍛
-        Select a dish from the dropdown menu to see its image, nutritional facts, and portion size.
+        Click on any dish card below to view its image, nutritional facts, and portion size.
         """
     )
 
+    # Display all items as clickable cards
     with gr.Row():
-        with gr.Column(scale=1):
-            food_dropdown = gr.Dropdown(
-                label="Select a Dish",
-                choices=food_items,
-                value=food_items[0],
-            )
-        with gr.Column(scale=2):
-            display_area = gr.HTML(value=create_food_card(food_items[0]))
+        for food_name in FOOD_DATA.keys():
+            with gr.Column():
+                # Each item card is a clickable button
+                gr.Button(
+                    value=food_name,
+                    elem_id=f"food-{food_name.replace(' ', '-').lower()}",
+                    interactive=True,
+                ).click(display_card, inputs=None, outputs=gr.HTML())
 
-    # Event to update card content when a food item is selected
-    food_dropdown.change(display_card, inputs=food_dropdown, outputs=display_area)
+    # Display area for the popup card
+    display_area = gr.HTML()
 
 # Launch the app
 app.launch()