Update app.py

app.py

@@ -2,11 +2,11 @@ import gradio as gr
 from food_data import FOOD_ITEMS
 
 def get_food_details(name, image, nutrition_details):
-    """Generate clean HTML content with image and structured nutrition values."""
-    # Splitting the nutrition details into separate lines
+    """Generate clean HTML content with the image and structured nutrition values."""
+    # Split the nutrition details into separate lines
     nutrition_list = nutrition_details.split(", ")
     formatted_nutrition = "<br>".join(nutrition_list)
-    
+
     return f"""
     <div style="text-align: center; padding: 15px; border: 2px solid #ddd; 
                 border-radius: 10px; box-shadow: 0px 4px 8px rgba(0,0,0,0.2); 
@@ -16,7 +16,7 @@ def get_food_details(name, image, nutrition_details):
         <h2 style="color: #FF6347; margin: 10px 0; font-size: 1.8em;">{name}</h2>
         <div style="text-align: left; margin-top: 10px;">
             <h3 style="color: #555; text-align: center;">Nutrition</h3>
-            <p style="font-size: 1em; color: #333; line-height: 1.6;">
+            <p style="font-size: 1em; color: #333; line-height: 1.6; margin-left: 20px;">
                 {formatted_nutrition}
             </p>
         </div>
@@ -29,21 +29,21 @@ with gr.Blocks() as demo:
     
     for category, items in FOOD_ITEMS.items():
         gr.Markdown(f"<h2 style='text-align:center; color:#FF6347;'>{category} Menu</h2>")
-        
-        # Generate buttons for each item
         with gr.Row():
             for item in items:
                 with gr.Column():
+                    # Button for each food item
                     btn = gr.Button(item["name"], elem_id=f"menu-item-{item['name'].lower()}")
-                    output_html = gr.HTML()  # Display formatted HTML
-                    
-                    # Event: Show clean HTML output with image and structured nutrition
+                    output_html = gr.HTML()  # Output will be formatted HTML
+
+                    # Display only formatted HTML content
                     btn.click(
                         fn=get_food_details, 
-                        inputs=[gr.Text(item['name']), gr.Text(item['image']), gr.Text(item['nutrition'])],
-                        outputs=output_html
+                        inputs=[],  # No textboxes used here
+                        outputs=output_html,
+                        _js=f'() => {{"name": "{item["name"]}", "image": "{item["image"]}", "nutrition_details": "{item["nutrition"]}"}}'
                     )
-    
+
     gr.Markdown("<p style='text-align:center; margin-top:20px; color: gray;'>© 2024 Delicious Restaurant | Designed with ❤️</p>")
 
 demo.launch()