Update app.py

app.py

@@ -68,8 +68,7 @@ def filter_dishes(category):
         return menu_data
     return [dish for dish in menu_data if dish["category"] == category]
 
-# Function to generate dish cards
-# Function to generate dish cards with "Add" button
+# Generate dish cards with "Add" button
 def display_dishes(category):
     filtered_dishes = filter_dishes(category)
     html_content = "<div style='display: flex; flex-direction: column; align-items: center; width: 100%;'>"
@@ -92,55 +91,65 @@ def display_dishes(category):
     html_content += "</div>"
     return html_content
 
-# JavaScript for managing the pop-up and "Add" button
-gr.HTML("""
-    <div id="popup" style="display: none; position: fixed; left: 50%; justify-content: center; align-items: center; 
-                          transform: translate(-50%, 100%) 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; width: 300px;">
-        <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
-        <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
-        <p id="popup-description" style="margin-top: 10px; font-size: 16px; color: #666;"></p>
-        <button onclick="addToCart(document.getElementById('popup-title').textContent)" 
-                style="margin-top: 10px; 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: 10px; padding: 10px 20px; background-color: #28a745; 
-                                              color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
-    </div>
-    <script>
-        function showPopup(image, title, description) {
-            document.getElementById('popup-image').src = image;
-            document.getElementById('popup-title').textContent = title;
-            document.getElementById('popup-description').textContent = description;
+# Main Gradio App
+with gr.Blocks() as demo:
+    gr.HTML("<h1 style='text-align: center; color: #333;'>🍛 Biryani Hub Menu 🍛</h1>")
 
-            // Adjust the popup to always appear at the top of the viewport
-            const popup = document.getElementById('popup');
-            popup.style.top = window.pageYOffset + 'px';
-            popup.style.display = 'block';
-        }
-        function closePopup() {
-            document.getElementById('popup').style.display = 'none';
-        }
-        function addToCart(dishName) {
-            alert(dishName + " has been added to the cart!");
-        }
-    </script>
-""")
+    # Buttons for category selection
+    with gr.Row():
+        btn_all = gr.Button("ALL")
+        btn_vegan = gr.Button("VEGAN")
+        btn_halal = gr.Button("HALAL")
 
-dish_display = gr.HTML(value=display_dishes("ALL"))
+    # Dish display
+    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
-)
+    # JavaScript for managing the pop-up and "Add" button
+    gr.HTML("""
+        <div id="popup" style="display: none; position: fixed; left: 50%; justify-content: center; align-items: center; 
+                              transform: translate(-50%, 100%) 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; width: 300px;">
+            <img id="popup-image" src="" alt="" style="width: 100%; height: auto; border-radius: 10px;">
+            <h2 id="popup-title" style="margin-top: 20px; color: #444;"></h2>
+            <p id="popup-description" style="margin-top: 10px; font-size: 16px; color: #666;"></p>
+            <button onclick="addToCart(document.getElementById('popup-title').textContent)" 
+                    style="margin-top: 10px; 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: 10px; padding: 10px 20px; background-color: #28a745; 
+                                                  color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
+        </div>
+        <script>
+            function showPopup(image, title, description) {
+                document.getElementById('popup-image').src = image;
+                document.getElementById('popup-title').textContent = title;
+                document.getElementById('popup-description').textContent = description;
+
+                // Adjust the popup to always appear at the top of the viewport
+                const popup = document.getElementById('popup');
+                popup.style.top = window.pageYOffset + 'px';
+                popup.style.display = 'block';
+            }
+            function closePopup() {
+                document.getElementById('popup').style.display = 'none';
+            }
+            function addToCart(dishName) {
+                alert(dishName + " has been added to the cart!");
+            }
+        </script>
+    """)
+
+    # 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()