Update app.py

app.py

@@ -13,23 +13,29 @@ def get_food_details(name, image, nutrition):
     """
 
 # Gradio Interface
-with gr.Blocks(theme="soft") as demo:
+with gr.Blocks(css="templates/style.css") as demo:
     gr.Markdown("<h1 style='text-align:center;'>🍽️ Restaurant Menu 🍽️</h1>")
     gr.Markdown("<p style='text-align:center;'>Explore our Vegetarian and Non-Vegetarian Dishes</p>")
     
     for category, items in FOOD_ITEMS.items():
         gr.Markdown(f"<h2 style='color:#FF6347;'>{category} Menu</h2>")
-        
         with gr.Row():
-            for item in items:
-                btn = gr.Button(f"{item['name']}", elem_id="menu-item")
-                popup = gr.HTML("")
-                
-                btn.click(fn=get_food_details, 
-                          inputs=[gr.Text(item['name']), gr.Text(item['image']), gr.Text(item['nutrition'])],
-                          outputs=popup)
-                popup.render()
-    
+            for idx, item in enumerate(items):
+                # Each block must have a unique variable or unique creation
+                with gr.Column():
+                    btn = gr.Button(f"{item['name']}", elem_id=f"menu-item-{idx}")
+                    output = gr.HTML()
+                    
+                    btn.click(
+                        fn=get_food_details, 
+                        inputs=[
+                            gr.Text(item['name']), 
+                            gr.Text(item['image']), 
+                            gr.Text(item['nutrition'])
+                        ],
+                        outputs=output
+                    )
+
     gr.Markdown("<p style='text-align:center; margin-top:20px;'>© 2024 Delicious Restaurant | Built with ❤️</p>")
 
 demo.launch()