Update app.py

app.py

@@ -12,13 +12,13 @@ menu_data = [
      "description": "Paneer cooked in a rich and creamy tomato-based gravy."}
 ]
 
-# Filter dishes by category
+# Function to filter dishes by category
 def filter_dishes(category):
     if category == "ALL":
         return menu_data
     return [dish for dish in menu_data if dish["category"] == category]
 
-# Generate HTML for dish display
+# Function to display dish cards
 def display_dishes(category):
     filtered_dishes = filter_dishes(category)
     html_content = "<div style='display: flex; flex-wrap: wrap; justify-content: center;'>"
@@ -26,7 +26,8 @@ def display_dishes(category):
         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']}")'>
+             onclick="document.querySelector('input[aria-label=\\'selected_dish\\']').value='{dish['name']}';
+                      document.querySelector('input[aria-label=\\'selected_dish\\']').dispatchEvent(new Event('input'));">
             <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>
@@ -35,77 +36,60 @@ def display_dishes(category):
     html_content += "</div>"
     return html_content
 
-# Fetch selected dish details
+# Function to fetch dish details
 def get_dish_details(dish_name):
     for dish in menu_data:
         if dish["name"] == dish_name:
             return f"""
-            <div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
-                        background-color: white; padding: 20px; border-radius: 10px; 
-                        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center;">
+            <div style="text-align: center; padding: 20px; font-family: Arial, sans-serif;">
                 <img src="{dish['image']}" alt="{dish['name']}" 
                      style="width: 250px; height: 150px; object-fit: cover; border-radius: 10px;">
                 <h2 style="margin-top: 20px; color: #444;">{dish['name']}</h2>
                 <p style="margin-top: 10px; font-size: 16px; color: #666;">{dish['description']}</p>
-                <button onclick="closePopup()" 
-                        style="margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; 
-                               border: none; border-radius: 5px; cursor: pointer;">Close</button>
+                <button style="padding: 10px 20px; background-color: #28a745; color: white; border: none; 
+                               border-radius: 5px; cursor: pointer;"
+                        onclick="document.querySelector('button[aria-label=\\'close_popup\\']').click();">
+                        Close
+                </button>
             </div>
             """
-    return "Dish not found!"
+    return "<p>Dish not found!</p>"
 
 # Main Gradio App
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
 
-    # Category Buttons
+    # Buttons for category filtering
     with gr.Row():
         btn_all = gr.Button("ALL")
         btn_vegan = gr.Button("VEGAN")
         btn_halal = gr.Button("HALAL")
 
-    # Dish display
+    # Display dish cards
     dish_display = gr.HTML(value=display_dishes("ALL"))
 
-    # Hidden pop-up for dish details
+    # Pop-up for dish details
     popup = gr.HTML(visible=False)
 
-    # Event handlers
-    def update_dishes(category):
-        return gr.update(value=display_dishes(category))
+    # Hidden input for selected dish
+    selected_dish = gr.Textbox(visible=False, label="selected_dish")
 
-    def show_dish_details(dish_name):
-        return gr.update(visible=True, value=get_dish_details(dish_name))
+    # Close button (hidden) for the pop-up
+    close_popup_btn = gr.Button("Close Popup", visible=False)
 
-    def hide_popup():
-        return gr.update(visible=False)
+    # Button events
+    btn_all.click(lambda: gr.update(value=display_dishes("ALL")), outputs=dish_display)
+    btn_vegan.click(lambda: gr.update(value=display_dishes("VEGAN")), outputs=dish_display)
+    btn_halal.click(lambda: gr.update(value=display_dishes("HALAL")), outputs=dish_display)
 
-    # Button actions
-    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)
+    # Event to show pop-up
+    selected_dish.change(
+        lambda dish_name: gr.update(visible=True, value=get_dish_details(dish_name)),
+        inputs=selected_dish,
+        outputs=popup,
+    )
 
-    # JavaScript for dish selection
-    gr.HTML("""
-    <script>
-    function selectDish(dishName) {
-        let input = document.querySelector('input[aria-label="popup"]');
-        input.value = dishName;
-        input.dispatchEvent(new Event('input', { bubbles: true }));
-    }
-    function closePopup() {
-        let closeButton = document.querySelector('button[aria-label="close_popup"]');
-        closeButton.click();
-    }
-    </script>
-    """)
-
-    # Hidden input and close button
-    dish_name_input = gr.Textbox(visible=False, label="popup")
-    close_button = gr.Button("Close Popup", visible=False)
-
-    # Link events
-    dish_name_input.change(fn=show_dish_details, inputs=dish_name_input, outputs=popup)
-    close_button.click(fn=hide_popup, outputs=popup)
+    # Event to close pop-up
+    close_popup_btn.click(lambda: gr.update(visible=False), outputs=popup)
 
 demo.launch()