Update app.py

app.py

@@ -54,8 +54,8 @@ def display_dishes(category):
 def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
-            return (dish["image"], dish["name"], dish["description"], "🌶 Medium", "🍽 Regular")
-    return ("https://via.placeholder.com/300x200", "Unknown Dish", "No description available.", "N/A", "N/A")
+            return dish["image"], dish["name"], dish["description"], "🌶 Medium", "🍽 Medium"
+    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available.", "N/A", "N/A"
 
 # Function to simulate placing an order
 def place_order(dish_name, spice_level, portion_size):
@@ -76,7 +76,7 @@ with gr.Blocks() as demo:
     gr.Markdown("### Available Dishes")
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # Detailed Dish View
+    # Dish Details Section
     gr.Markdown("### Dish Details")
     with gr.Row():
         dish_image = gr.Image(label="Dish Image", height=200, width=200)
@@ -117,8 +117,9 @@ with gr.Blocks() as demo:
     gr.HTML("""
     <script>
     function selectDish(dishName) {
-        document.querySelector('input[aria-label="selected_dish_name"]').value = dishName;
-        document.querySelector('input[aria-label="selected_dish_name"]').dispatchEvent(new Event('input'));
+        let input = document.querySelector('input[aria-label="selected_dish_name"]');
+        input.value = dishName;
+        input.dispatchEvent(new Event('input', { bubbles: true }));
     }
     </script>
     """)