Update app.py

app.py

@@ -1,92 +1,17 @@
-import gradio as gr
-
-# Extended menu data with dish details
-menu_data = [
-    {"name": "Veg Burger", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/6/6e/Veggie_burger.jpg",
-     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato.",
-     "spice_level": "Medium", "portion_size": "Regular"},
-    {"name": "Chicken Biryani", "category": "HALAL",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/7/79/Chicken_Biryani.jpg",
-     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces.",
-     "spice_level": "High", "portion_size": "Large"},
-    {"name": "Paneer Butter Masala", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3d/Paneer_Butter_Masala.jpg",
-     "description": "Paneer cooked in a rich and creamy tomato-based gravy.",
-     "spice_level": "Mild", "portion_size": "Medium"},
-    {"name": "Beef Steak", "category": "HALAL",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/d/d5/Beef_Steak.jpg",
-     "description": "Juicy beef steak served with mashed potatoes and grilled vegetables.",
-     "spice_level": "Medium", "portion_size": "Large"},
-    {"name": "Mushroom Soup", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/3/3c/Mushroom_Soup.jpg",
-     "description": "Creamy mushroom soup with fresh herbs.",
-     "spice_level": "Mild", "portion_size": "Small"},
-    {"name": "Pasta Alfredo", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/4/44/Fettuccine_Alfredo.jpg",
-     "description": "Rich and creamy Alfredo pasta topped with fresh parsley.",
-     "spice_level": "Mild", "portion_size": "Medium"},
-    {"name": "Grilled Chicken", "category": "HALAL",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/6/65/Grilled_Chicken.jpg",
-     "description": "Succulent grilled chicken served with a side of vegetables.",
-     "spice_level": "Medium", "portion_size": "Large"},
-    {"name": "Caesar Salad", "category": "VEGAN",
-     "image": "https://upload.wikimedia.org/wikipedia/commons/4/4d/Caesar_Salad.jpg",
-     "description": "Fresh Caesar salad with crispy croutons and creamy dressing.",
-     "spice_level": "Mild", "portion_size": "Small"}
-]
-
-spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
-portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
-
-def filter_dishes(category):
-    if category == "ALL":
-        return menu_data
-    return [dish for dish in menu_data if dish["category"] == category]
-
-def display_dishes(category):
-    filtered_dishes = filter_dishes(category)
-    html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
-    for dish in filtered_dishes:
-        html_content += f"""
-        <div style='margin: 10px; text-align: center; cursor: pointer; border: 1px solid #ddd; 
-                    padding: 10px; border-radius: 10px; width: 200px; background-color: #f9f9f9;'
-             onclick='selectDish("{dish['name']}")'>
-            <img src='{dish['image']}' alt='{dish['name']}' 
-                 style='width: 180px; height: 120px; object-fit: cover; border-radius: 10px;'>
-            <h4 style='margin-top: 10px; font-size: 16px; color: #444;'>{dish['name']}</h4>
-        </div>
-        """
-    html_content += "</div>"
-    return html_content
-
-def get_dish_details(dish_name):
-    for dish in menu_data:
-        if dish["name"] == dish_name:
-            # JavaScript to simulate a click event
-            return (
-                dish["image"],
-                dish["name"],
-                dish["description"],
-                f"<script>selectDish('{dish_name}');</script>",
-                "🌶 Medium",
-                "🍽 Medium",
-            )
-    # Return placeholder if no match
-    return (
-        "https://via.placeholder.com/300x200",
-        "Unknown Dish",
-        "No description available.",
-        f"<script>alert('Dish not found!');</script>",
-        "N/A",
-        "N/A",
-    )
-    
-def place_order(dish_name, spice_level, portion_size):
-    return f"✅ Order Confirmed: '{dish_name}' with {spice_level} spice level and {portion_size} portion size."
-
 with gr.Blocks() as demo:
-    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
+    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
+    
+    gr.HTML("""
+    <script>
+    function selectDish(dishName) {
+        let input = document.querySelector('input[aria-label="selected_dish_name"]');
+        if (input) {
+            input.value = dishName;
+            input.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+    }
+    </script>
+    """)
 
     gr.Markdown("### Select a Category")
     with gr.Row():
@@ -97,7 +22,6 @@ with gr.Blocks() as demo:
     gr.Markdown("### Available Dishes")
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # Dish Details Pop-up
     popup = gr.Group(visible=False)
     with popup:
         with gr.Row():
@@ -119,31 +43,15 @@ with gr.Blocks() as demo:
     btn_vegan.click(fn=lambda: update_dishes("VEGAN"), outputs=dish_display)
     btn_halal.click(fn=lambda: update_dishes("HALAL"), outputs=dish_display)
 
-    def show_dish_details(dish_name):
-        image, name, description, spice, portion = get_dish_details(dish_name)
-        return gr.update(visible=True), image, name, description, spice, portion
-
-    def close_dish_popup():
-        return gr.update(visible=False)
-
     selected_dish_name = gr.Textbox(visible=False)
-    selected_dish_name.change(fn=show_dish_details, inputs=selected_dish_name,
-                              outputs=[popup, dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown])
+    selected_dish_name.change(
+        fn=show_dish_details,
+        inputs=selected_dish_name,
+        outputs=[popup, dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown],
+    )
 
     close_popup.click(fn=close_dish_popup, outputs=popup)
 
-    place_order_btn.click(fn=place_order, 
-                          inputs=[dish_name, spice_dropdown, portion_dropdown], 
-                          outputs=order_status)
-
-    gr.HTML("""
-    <script>
-    function selectDish(dishName) {
-        let input = document.querySelector('input[aria-label="selected_dish_name"]');
-        input.value = dishName;
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-    }
-    </script>
-    """)
+    place_order_btn.click(fn=place_order, inputs=[dish_name, spice_dropdown, portion_dropdown], outputs=order_status)
 
 demo.launch()