app.py

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
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>"

# Gradio app interface
with gr.Blocks(css="styles.css") as app:
    gr.Markdown("# 🍽️ Indian & Chinese Food Nutritional Information App")
    gr.Markdown(
        """
        ### Explore Popular Dishes 🍛
        Click on any dish below to view its image, nutritional facts, and portion size.
        """
    )

    # Display all items as a vertical list
    with gr.Column(elem_id="food-list"):
        for food_name in FOOD_DATA.keys():
            gr.Button(
                value=food_name,
                elem_id=f"food-{food_name.replace(' ', '-').lower()}",
                interactive=True,
            ).click(
                display_card,
                inputs=[gr.Textbox(value=food_name, visible=False)],
                outputs="popup-content"  # Update the popup content dynamically
            )

    # Popup container
    with gr.HTML(elem_id="popup-container", visible=True):
        gr.HTML(value="", elem_id="popup-content")  # Placeholder for popup content

# Launch the app
app.launch()