Update app.py

app.py

@@ -36,7 +36,7 @@ def filter_menu(preference):
             </div>
             <div style="flex-shrink: 0; text-align: center;">
                 <img src="{item['Image URL']}" alt="{item['Dish Name']}" style="width: 100px; height: 100px; border-radius: 8px; object-fit: cover; margin-bottom: 10px;">
-                <button style="background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;" 
+                <button value="{item['Dish Name']}" style="background-color: #28a745; color: white; border: none; padding: 8px 15px; font-size: 14px; border-radius: 5px; cursor: pointer;" 
                         onclick="return '{item['Dish Name']}'">Add</button>
             </div>
         </div>
@@ -47,17 +47,12 @@ def filter_menu(preference):
 def render_dish_details(dish_name):
     menu_data = load_menu()
     dish = menu_data[menu_data["Dish Name"] == dish_name].iloc[0]
-
-    # Build detailed view HTML
-    details_html = f"""
-    <div style="text-align: left;">
-        <img src="{dish['Image URL']}" alt="{dish_name}" style="width: 100%; max-height: 300px; object-fit: cover; margin-bottom: 10px;">
-        <h2 style="margin: 10px 0;">{dish_name}</h2>
-        <p style="font-size: 16px; color: #555;">{dish['Description']}</p>
-        <h4>${dish['Price ($)']}</h4>
-    </div>
-    """
-    return details_html
+    return (
+        dish["Image URL"],
+        f"## {dish_name}",
+        dish["Description"],
+        f"**Price:** ${dish['Price ($)']}"
+    )
 
 # Gradio app definition
 def app():
@@ -76,7 +71,10 @@ def app():
 
         # Detailed view
         detailed_view = gr.Column(visible=False)
-        dish_details = gr.HTML()
+        dish_image = gr.Image()
+        dish_name = gr.Markdown()
+        dish_description = gr.Markdown()
+        dish_price = gr.Markdown()
         spice_level = gr.Radio(
             choices=["Mild", "Medium", "Spicy"],
             label="Choose Spice Level",
@@ -102,8 +100,8 @@ def app():
             return filter_menu(preference)
 
         def show_dish_details(dish_name):
-            details_html = render_dish_details(dish_name)
-            return gr.update(visible=False), gr.update(visible=True), details_html
+            img, name, desc, price = render_dish_details(dish_name)
+            return gr.update(visible=False), gr.update(visible=True), img, name, desc, price
 
         def add_to_cart(dish_name, spice_level, extras, quantity, instructions, cart):
             cart.append({
@@ -128,12 +126,12 @@ def app():
         menu_output.change(
             show_dish_details,
             inputs=[menu_output],
-            outputs=[menu_output, detailed_view, dish_details],
+            outputs=[menu_output, detailed_view, dish_image, dish_name, dish_description, dish_price],
         )
 
         add_to_bag_button.click(
             add_to_cart,
-            inputs=[menu_output, spice_level, extras, quantity, special_instructions, cart_state],
+            inputs=[dish_name, spice_level, extras, quantity, special_instructions, cart_state],
             outputs=[cart_state, cart_output],
         )
 
@@ -147,7 +145,10 @@ def app():
             menu_output
 
         with detailed_view:
-            dish_details
+            dish_image
+            dish_name
+            dish_description
+            dish_price
             spice_level
             extras
             quantity
@@ -160,7 +161,7 @@ def app():
 
     return demo
 
-# Run the app
+
 if __name__ == "__main__":
     demo = app()
     demo.launch()