Update app.py

app.py

@@ -2,12 +2,28 @@ import gradio as gr
 
 # Define menu items
 menu_items = [
-    {"name": "Chicken Butter Masala"},
-    {"name": "Chicken Biryani"},
-    {"name": "Dosa"},
-    {"name": "Aloo Curry"},
+    {
+        "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="""
@@ -20,6 +36,10 @@ def render_menu():
         font-weight: bold;
         text-align: center;
         background-color: #fff;
+        cursor: pointer;
+    }
+    .menu-item:hover {
+        background-color: #f0f0f0;
     }
     .menu-container {
         margin-top: 20px;
@@ -27,10 +47,25 @@ def render_menu():
     """) 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"]):  # Use elem_classes for custom styling
-                    gr.Markdown(item["name"])
+                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