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 card below to view its image, nutritional facts, and portion size.
        """
    )

    # Display all items as clickable cards
    with gr.Row(elem_id="food-list"):
        display_area = gr.HTML()  # Popup card display area
        for food_name in FOOD_DATA.keys():
            with gr.Column():
                # 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=[gr.Textbox(value=food_name, visible=False)], 
                    outputs=display_area
                )

# Launch the app
app.launch()