Update app.py

app.py

@@ -1,74 +1,39 @@
 import gradio as gr
-
-# Define menu items
-menu_items = [
-    {
-        "name": "Chicken Butter Masala",
-        "description": "A creamy and rich butter chicken dish.",
-    },
-    {
-        "name": "Chicken Biryani",
-        "description": "Aromatic rice cooked with chicken and spices.",
-    },
-    {
-        "name": "Dosa",
-        "description": "A crispy South Indian crepe served with chutney.",
-    },
-    {
-        "name": "Aloo Curry",
-        "description": "Potatoes cooked in a spicy curry sauce.",
-    },
-]
-
-# Function to handle the popup
-def show_popup(item_name, item_description):
-    return f"### {item_name}\n\n{item_description}"
-
-# Create the Gradio interface
-def render_menu():
-    with gr.Blocks(css="""
-    .menu-item {
-        border: 2px solid black;
-        border-radius: 5px;
-        padding: 15px;
-        margin: 10px 0;
-        font-size: 18px;
-        font-weight: bold;
-        text-align: center;
-        background-color: #fff;
-        cursor: pointer;
-    }
-    .menu-item:hover {
-        background-color: #f0f0f0;
-    }
-    .menu-container {
-        margin-top: 20px;
-    }
-    """) as demo:
-        gr.Markdown("# Menu")
-
-        # Popup display area
-        popup_output = gr.Markdown("### Select an item to view details.")
-
-        # Display the menu items
-        with gr.Column(elem_id="menu-container"):
-            for item in menu_items:
-                with gr.Row(elem_classes=["menu-item"]):
-                    # Display item name with a clickable action
-                    button = gr.Button(item["name"], elem_id=f"{item['name']}-button")
-                    button.click(
-                        fn=show_popup,
-                        inputs=[],
-                        outputs=popup_output,
-                        _js=f"() => ['{item['name']}', '{item['description']}']"
-                    )
-
-        # Popup section to show details
-        gr.Markdown("## Selected Item Details")
-        gr.Box(popup_output)
-
-    return demo
-
-# Render the app
-demo = render_menu()
-demo.launch()
+from components.cards import create_food_card
+from components.data import FOOD_DATA
+
+# Function to display the food card when an item is selected
+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())
+
+# Gradio app interface
+with gr.Blocks(css="styles.css") as app:
+    gr.Markdown("# 🍽️ Indian & Chinese Food Nutritional Information App")
+    gr.Markdown(
+        """
+        ### Explore Popular Dishes 🍛
+        Select a dish from the dropdown menu to see its image, nutritional facts, and portion size.
+        """
+    )
+
+    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]))
+
+    # Event to update card content when a food item is selected
+    food_dropdown.change(display_card, inputs=food_dropdown, outputs=display_area)
+
+# Launch the app
+app.launch()