Update app.py

app.py

@@ -4,27 +4,19 @@ import gradio as gr
 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": "🌶 Mild", "portion_size": "🧆 Small"},
+     "description": "A delicious vegan burger with plant-based patty, lettuce, and tomato."},
     {"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": "🌶🌶 Medium", "portion_size": "🍛 Large"},
+     "description": "Spicy chicken biryani with aromatic basmati rice and tender chicken pieces."},
     {"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": "🌶🌶🌶 High", "portion_size": "🍽 Medium"},
+     "description": "Paneer cooked in a rich and creamy tomato-based gravy."},
 ]
 
-# Dropdown options
-spice_options = ["🌶 Mild", "🌶🌶 Medium", "🌶🌶🌶 High"]
-portion_options = ["🧆 Small", "🍽 Medium", "🍛 Large"]
-
-# Function to generate dish display HTML
-def display_dishes(category):
-    filtered_dishes = [dish for dish in menu_data if category == "ALL" or dish["category"] == category]
+# Function to display dishes
+def display_dishes():
     html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
-    for dish in filtered_dishes:
+    for dish in menu_data:
         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;'
@@ -37,22 +29,26 @@ def display_dishes(category):
     html_content += "</div>"
     return html_content
 
-# Function to retrieve dish details
+# Function to show details of a selected dish
 def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
-            return dish["image"], dish["name"], dish["description"], dish["spice_level"], dish["portion_size"]
-    return "https://via.placeholder.com/300x200", "Unknown Dish", "No description available.", "🌶 Mild", "🧆 Small"
+            return gr.update(visible=True), dish["image"], dish["name"], dish["description"]
+    return gr.update(visible=False), "", "Dish Not Found", "No description available."
 
-# Create the Gradio app
-with gr.Blocks() as demo:
-    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
+# Function to close the pop-up
+def close_popup():
+    return gr.update(visible=False)
 
+# Gradio App
+with gr.Blocks() as demo:
+    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Menu 🍛</h1>")
+    
     # JavaScript for dish selection
     gr.HTML("""
     <script>
     function selectDish(dishName) {
-        const input = document.querySelector('input[aria-label="selected_dish_name"]');
+        let input = document.querySelector('input[aria-label="selected_dish_name"]');
         if (input) {
             input.value = dishName;
             input.dispatchEvent(new Event('input', { bubbles: true }));
@@ -61,41 +57,28 @@ with gr.Blocks() as demo:
     </script>
     """)
 
-    gr.Markdown("### Select a Category")
-    with gr.Row():
-        btn_all = gr.Button("ALL")
-        btn_vegan = gr.Button("VEGAN")
-        btn_halal = gr.Button("HALAL")
-
     gr.Markdown("### Available Dishes")
-    dish_display = gr.HTML(value=display_dishes("ALL"))
+    dish_display = gr.HTML(value=display_dishes())
 
     # Pop-up for dish details
     popup = gr.Group(visible=False)
     with popup:
         with gr.Row():
-            dish_image = gr.Image(label="Dish Image", height=200, width=200)
+            dish_image = gr.Image()
             with gr.Column():
                 dish_name = gr.Textbox(label="Dish Name", interactive=False)
                 dish_description = gr.Textbox(label="Description", interactive=False)
-                spice_dropdown = gr.Radio(label="Select Spice Level", choices=spice_options, value="🌶 Mild")
-                portion_dropdown = gr.Radio(label="Select Portion Size", choices=portion_options, value="🧆 Small")
-        close_popup = gr.Button("Close")
-
-    def update_dishes(category):
-        return gr.update(value=display_dishes(category))
-
-    btn_all.click(fn=lambda: update_dishes("ALL"), outputs=dish_display)
-    btn_vegan.click(fn=lambda: update_dishes("VEGAN"), outputs=dish_display)
-    btn_halal.click(fn=lambda: update_dishes("HALAL"), outputs=dish_display)
+        close_button = gr.Button("Close")
 
+    # Hidden textbox to handle JavaScript -> Python communication
     selected_dish_name = gr.Textbox(visible=False)
     selected_dish_name.change(
-        fn=lambda dish_name: (*get_dish_details(dish_name), gr.update(visible=True)),
+        fn=get_dish_details,
         inputs=selected_dish_name,
-        outputs=[dish_image, dish_name, dish_description, spice_dropdown, portion_dropdown, popup],
+        outputs=[popup, dish_image, dish_name, dish_description]
     )
 
-    close_popup.click(fn=lambda: gr.update(visible=False), outputs=popup)
+    # Close button functionality
+    close_button.click(fn=close_popup, outputs=popup)
 
 demo.launch()