Update app.py

app.py

@@ -82,7 +82,9 @@ menu_data = [
 
 
 
-spice_levels = ["American Mild", "American Medium", "American Spicy", "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"]
+# Spice levels and extras
+spice_levels = ["American Mild", "American Medium", "American Spicy", 
+                "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"]
 extras = [
     {"name": "Extra Raitha 4oz", "price": "$1.00"},
     {"name": "Extra Raitha 8oz", "price": "$2.00"},
@@ -96,7 +98,7 @@ popup_js = """
     function showPopup(name, description, price, image) {
         const popup = document.getElementById("custom-popup");
         const overlay = document.getElementById("overlay");
-        popup.innerHTML = `
+        popup.innerHTML = 
             <img src="${image}" alt="${name}" style="width: auto; height: 250px; border-radius: 10px; margin-bottom: 10px;">
             <h3 style="margin-top: 10px;">${name}</h3>
             <p>${description}</p>
@@ -104,25 +106,25 @@ popup_js = """
             
             <h4 style="margin-top: 20px;">Choose a Spice Level</h4>
             <div style="display: flex; flex-wrap: wrap; gap: 10px;">
-                ${["American Mild", "American Medium", "American Spicy", "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"].map(spice => `
+                ${["American Mild", "American Medium", "American Spicy", "Indian Mild", "Indian Medium", "Indian Spicy", "Indian Very Spicy"].map(spice => 
                     <label style="margin-right: 10px;">
                         <input type="radio" name="spice" value="${spice}"> ${spice}
                     </label>
-                `).join("")}
+                ).join("")}
             </div>
             
             <h4 style="margin-top: 20px;">Choose Extras</h4>
             <div style="display: flex; flex-wrap: wrap; gap: 10px;">
-                ${["Extra Raitha 4oz + $1.00", "Extra Raitha 8oz + $2.00", "Extra Onion + $1.00", "Extra Onion & Lemon + $2.00"].map(extra => `
+                ${["Extra Raitha 4oz + $1.00", "Extra Raitha 8oz + $2.00", "Extra Onion + $1.00", "Extra Onion & Lemon + $2.00"].map(extra => 
                     <label style="margin-right: 10px;">
                         <input type="checkbox" name="extras" value="${extra}"> ${extra}
                     </label>
-                `).join("")}
+                ).join("")}
             </div>
             
-            <button onclick="closePopup()" style="margin-top: 20px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
-            <button onclick="closePopup()" style="margin-top: 20px; margin-left: 10px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
-        `;
+            <button onclick="closePopup()" style="margin-top: 20px; padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; cursor: pointer;">Add to Cart</button>
+            <button onclick="closePopup()" style="margin-top: 20px; margin-left: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
+        ;
         popup.style.display = "block";
         overlay.style.display = "block";
     }
@@ -145,25 +147,26 @@ popup_html = """
 """
 
 # Generate dish cards
-def display_dishes():
+def display_dishes(category):
     html_content = "<div style='display: flex; flex-direction: column;  gap: 20px; width: 80%; margin: auto;'>"
     for dish in menu_data:
-        html_content += f"""
-        <div style='display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;'>
-            <div style='flex: 3; text-align: left;'>
-                <h3 style='margin: 0; font-size: 20px;'>{dish['name']}</h3>
-                <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
-                <p style='margin: 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
+        if category == "ALL" or dish["category"] == category:
+            html_content += f"""
+            <div style='display: flex; align-items: center; justify-content: space-between; padding: 20px; border: 1px solid #ddd; border-radius: 10px; background-color: #f9f9f9;'>
+                <div style='flex: 3; text-align: left;'>
+                    <h3 style='margin: 0; font-size: 20px;'>{dish['name']}</h3>
+                    <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
+                    <p style='margin: 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
+                </div>
+                <div style='flex: 1; flex-direction: row; text-align: center;'>
+                    <img src='{dish['image']}' alt='{dish['name']}' style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px;'>
+                    <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')" 
+                            style='margin-top: 10px; padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
+                        Add
+                    </button>
+                </div>
             </div>
-            <div style='flex: 1; display: flex; flex-direction: column; align-items: center;'>
-                <img src='{dish['image']}' alt='{dish['name']}' style='width: 120px; height: 80px; object-fit: cover; border-radius: 10px; margin-bottom: 10px;'>
-                <button onclick="showPopup('{dish['name']}', '{dish['description']}', '{dish['price']}', '{dish['image']}')" 
-                        style='padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
-                    Add
-                </button>
-            </div>
-        </div>
-        """
+            """
     html_content += "</div>"
     return html_content
 
@@ -172,9 +175,30 @@ with gr.Blocks() as demo:
     gr.HTML(popup_html)  # Add the popup container and overlay
     gr.HTML(popup_js)    # Add the JavaScript
 
-    gr.HTML("<h1 style='text-align: center;'>\ud83c\udf5b Biryani Hub Menu \ud83c\udf5b</h1>")
+    gr.HTML("<h1 style='text-align: center;'>🍛 Biryani Hub Menu 🍛</h1>")
+
+    # Buttons for filtering categories
+    with gr.Row():
+        btn_all = gr.Button("ALL")
+        btn_vegan = gr.Button("VEGAN")
+        btn_halal = gr.Button("HALAL")
 
     # Dish display
-    dish_display = gr.HTML(value=display_dishes())
+    dish_display = gr.HTML(value=display_dishes("ALL"))
+
+    # Button click 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
+    )
+
+demo.launch()
 
-demo.launch()