# app.py
import gradio as gr

# Menu data with food items, nutritional details, and portion sizes
menu = {
    "Roti": {
        "image": "https://via.placeholder.com/150?text=Roti",
        "nutrition": "Calories: 70 | Protein: 2g | Carbs: 15g",
        "portion": "Serves 1 person"
    },
    "Paneer Butter Masala": {
        "image": "https://via.placeholder.com/150?text=Paneer+Butter+Masala",
        "nutrition": "Calories: 450 | Protein: 15g | Carbs: 20g | Fat: 35g",
        "portion": "Serves 3-4 people"
    },
    "Chicken Curry": {
        "image": "https://via.placeholder.com/150?text=Chicken+Curry",
        "nutrition": "Calories: 300 | Protein: 25g | Carbs: 5g | Fat: 20g",
        "portion": "Serves 4-5 people"
    },
    "Vegetable Biryani": {
        "image": "https://via.placeholder.com/150?text=Vegetable+Biryani",
        "nutrition": "Calories: 250 | Protein: 5g | Carbs: 45g | Fat: 5g",
        "portion": "Serves 3-4 people"
    },
    "Naan": {
        "image": "https://via.placeholder.com/150?text=Naan",
        "nutrition": "Calories: 150 | Protein: 4g | Carbs: 28g | Fat: 1g",
        "portion": "Serves 1 person"
    }
}

def show_food_details(food_item):
    if food_item in menu:
        details = menu[food_item]
        return details["image"], f"Nutrition: {details['nutrition']}\nPortion Size: {details['portion']}"
    else:
        return None, "Food item not found."

with gr.Blocks() as demo:
    gr.Markdown("""# Welcome to Our Food App
    ## Click on a food item to see its nutritional details and portion size.
    """)

    food_image_output = gr.Image(label="Food Image", interactive=False)
    food_details_output = gr.Textbox(label="Food Details", interactive=False)

    with gr.Row():
        for food_item, details in menu.items():
            btn = gr.Button(food_item)
            btn.click(
                fn=show_food_details,
                inputs=[gr.Text(value=food_item, visible=False)],
                outputs=[food_image_output, food_details_output]
            )

demo.launch()