Update app.py

app.py

@@ -2,12 +2,27 @@ import gradio as gr
 from components.cards import create_food_card
 from components.data import FOOD_DATA
 
-# Function to render the popup card when a button is clicked
+# Function to generate popup card content
 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>"
+    food_info = FOOD_DATA[food_name]
+    image_src = f"assets/images/{food_info['image']}"
+    description = food_info["description"]
+    price = food_info["price"]
+
+    # HTML for the popup
+    card_html = f"""
+    <div class="popup-card">
+        <img src="{image_src}" alt="{food_name}" class="popup-image" />
+        <div class="popup-content">
+            <h3>{food_name}</h3>
+            <p class="price">₹{price}</p>
+            <button class="add-btn">ADD</button>
+            <p class="customizable">Customizable</p>
+            <p class="description">{description}</p>
+        </div>
+    </div>
+    """
+    return card_html
 
 # Gradio app interface
 with gr.Blocks(css="styles.css") as app:
@@ -30,17 +45,10 @@ with gr.Blocks(css="styles.css") as app:
                 elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                 interactive=True,
             ).click(
-                display_card,  # Update the popup content
-                inputs=[gr.Textbox(value=food_name, visible=False)],
-                outputs=popup_area  # Set the HTML content of the popup
+                lambda x=food_name: display_card(x),
+                inputs=None,
+                outputs=popup_area
             )
 
-    # 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()