Update app.py

app.py

@@ -2,13 +2,13 @@ import gradio as gr
 from food_data import FOOD_ITEMS
 
 def get_food_details(name, image, nutrition):
-    """Returns the popup card details."""
+    """Returns formatted HTML content for popup with an image and nutrition details."""
     return f"""
     <div style='text-align: center;'>
-        <img src='{image}' alt='{name}' style='width: 100%; border-radius: 10px;'>
-        <h3>{name}</h3>
-        <p>{nutrition}</p>
-        <p style='color: gray;'>Portion Size: Standard</p>
+        <img src='{image}' alt='{name}' style='width: 100%; max-height: 200px; border-radius: 10px;'>
+        <h3 style="margin: 10px 0; font-size: 1.5em;">{name}</h3>
+        <p style="font-size: 1.1em; color: #555;">{nutrition}</p>
+        <p style='color: gray; font-size: 0.9em;'>Portion Size: Standard</p>
     </div>
     """
 
@@ -21,19 +21,18 @@ with gr.Blocks(css="templates/style.css") as demo:
         gr.Markdown(f"<h2 style='color:#FF6347;'>{category} Menu</h2>")
         with gr.Row():
             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()
+                    popup_output = gr.HTML("")  # Output HTML for image and nutrition
                     
                     btn.click(
                         fn=get_food_details, 
                         inputs=[
-                            gr.Text(item['name']), 
-                            gr.Text(item['image']), 
+                            gr.Text(item['name']),
+                            gr.Text(item['image']),
                             gr.Text(item['nutrition'])
                         ],
-                        outputs=output
+                        outputs=popup_output
                     )
 
     gr.Markdown("<p style='text-align:center; margin-top:20px;'>© 2024 Delicious Restaurant | Built with ❤️</p>")