Update app.py

app.py

@@ -77,9 +77,18 @@ def display_dishes(category):
     return html_content
 
 
-# Main Gradio App
+ Spice levels and extras options
+spice_levels = ["Mild", "Medium", "Spicy", "Extra Spicy"]
+extras = [
+    {"name": "Extra Cheese", "price": "$2.00"},
+    {"name": "Extra Sauce", "price": "$1.50"},
+    {"name": "No Onions", "price": "$0.00"},
+    {"name": "No Garlic", "price": "$0.00"}
+]
+
+# Main Gradio Application
 with gr.Blocks() as demo:
-    gr.HTML("<h1 style='text-align: center;'>Dynamic Menu with Cart</h1>")
+    gr.HTML("<h1 style='text-align: center;'>Biryani Hub Menu 🍴</h1>")
 
     with gr.Row():
         btn_all = gr.Button("ALL")
@@ -87,77 +96,71 @@ with gr.Blocks() as demo:
         btn_halal = gr.Button("HALAL")
 
     dish_display = gr.HTML(value=display_dishes("ALL"))
+    cart_display = gr.HTML(value="<p>Your cart is empty.</p>")
 
     btn_all.click(lambda: display_dishes("ALL"), outputs=dish_display)
     btn_vegan.click(lambda: display_dishes("VEGAN"), outputs=dish_display)
     btn_halal.click(lambda: display_dishes("HALAL"), outputs=dish_display)
 
-    cart_display = gr.HTML(value="<p>Your cart is empty.</p>")
-
-    def add_to_cart_handler(item_name, price):
-        return add_item_to_cart(item_name, price)
-
-    gr.HTML("""
-        <div id='cart-icon' style='position: fixed; top: 10px; right: 10px; cursor: pointer;'>
-            <img src='https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Shopping_cart_icon.svg/512px-Shopping_cart_icon.svg.png' alt='Cart' style='width: 40px;' onclick='toggleCartPopup()'>
-        </div>
-        <div id='cart-popup' style='display: none; position: fixed; top: 50px; right: 10px; background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px; height: auto; max-height: 80vh; overflow-y: auto;'>
-            <span onclick='toggleCartPopup()' style='position: absolute; top: 10px; right: 15px; font-size: 20px; font-weight: bold; cursor: pointer;'>&times;</span>
-            <div id='cart-content' style='margin-bottom: 10px;'>Your cart is empty.</div>
-            <button onclick='placeOrder()' style='margin-top: 10px; padding: 10px; background-color: #007bff; color: white; border: none; border-radius: 5px; display: block; width: 100%;'>Place Order</button>
+    demo.append(gr.HTML(f"""
+    <div id="popup" style="display: none; 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; width: 500px;">
+        <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>
+        <p id="popup-price" style="margin-top: 10px; font-size: 16px; color: #444;"></p>
+        
+        <h4 style="text-align: left; margin-top: 20px;">Choose a spice level</h4>
+        <div style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
+        """ + "".join([f'<label style="margin-right: 10px; display: block;"><input type="radio" name="spice" value="{spice}" style="margin-right: 5px;">{spice}</label>' for spice in spice_levels]) + """
         </div>
 
-        <div id='menu-popup' style='display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); width: 300px;'>
-            <span onclick='closeMenuPopup()' style='position: absolute; top: 10px; right: 15px; font-size: 20px; font-weight: bold; cursor: pointer;'>&times;</span>
-            <img id='popup-image' src='' style='width: 100%; border-radius: 5px; margin-bottom: 10px;'>
-            <h4 id='popup-title'></h4>
-            <p id='popup-description'></p>
-            <p id='popup-price'></p>
-            <button onclick='addItemToCartFromPopup()' style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 5px; width: 100%;'>Add to Cart</button>
+        <h4 style="text-align: left; margin-top: 20px;">Choose Extras</h4>
+        <div style="display: flex; flex-wrap: wrap; justify-content: space-between; border: 1px solid #ddd; padding: 10px; border-radius: 5px;">
+        """ + "".join([f'<label style="margin-right: 10px; display: block;"><input type="checkbox" name="extras" value="{extra["name"]}" style="margin-right: 5px;">{extra["name"]} + {extra["price"]}</label>' for extra in extras]) + """
         </div>
 
-        <script>
-            let selectedItem = '';
-            let selectedPrice = 0;
-            let selectedExtras = 'None';
-
-            window.toggleCartPopup = function() {
-                const popup = document.getElementById('cart-popup');
-                popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
-            }
-
-            window.showMenuPopup = function(name, description, price, image) {
-                selectedItem = name;
-                selectedPrice = price;
-                document.getElementById('popup-title').textContent = name;
-                document.getElementById('popup-description').textContent = description;
-                document.getElementById('popup-price').textContent = `Price: $${price}`;
-                document.getElementById('popup-image').src = image;
-                document.getElementById('menu-popup').style.display = 'block';
-            }
-
-            window.closeMenuPopup = function() {
-                document.getElementById('menu-popup').style.display = 'none';
-            }
-
-            window.addItemToCartFromPopup = function() {
-                fetch('/run/predict', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ data: [selectedItem, selectedPrice, selectedExtras] })
-                }).then(response => response.json()).then(data => {
-                    document.getElementById('cart-content').innerHTML = data.data;
-                    alert(`${selectedItem} has been added to your cart.`);
-                    closeMenuPopup();
-                });
-            }
-
-            window.placeOrder = function() {
-                alert('Your order has been placed!');
-                toggleCartPopup();
-            }
-        </script>
-    """)
-    
-
-    demo.launch()
+        <button onclick="addToCartFromPopup()" 
+                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; padding: 10px 20px; background-color: #28a745; 
+                                              color: white; border: none; border-radius: 5px; cursor: pointer;">Close</button>
+    </div>
+    <script>
+        let selectedItem = '';
+        let selectedPrice = 0;
+
+        function showPopup(image, title, description, price) {
+            document.getElementById('popup-image').src = image;
+            document.getElementById('popup-title').textContent = title;
+            document.getElementById('popup-description').textContent = description;
+            document.getElementById('popup-price').textContent = "Price: " + price;
+            selectedItem = title;
+            selectedPrice = price;
+
+            // Display the popup
+            document.getElementById('popup').style.display = 'block';
+        }
+
+        function closePopup() {
+            document.getElementById('popup').style.display = 'none';
+        }
+
+        function addToCartFromPopup() {
+            const spiceLevel = document.querySelector('input[name=spice]:checked')?.value || "None";
+            const selectedExtras = Array.from(document.querySelectorAll('input[name=extras]:checked')).map(cb => cb.value).join(", ");
+            fetch('/run/predict', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ data: [selectedItem, selectedPrice, spiceLevel, selectedExtras] })
+            }).then(response => response.json()).then(data => {
+                document.querySelector('.cart-html').innerHTML = data.data[0];
+                alert(selectedItem + " with " + spiceLevel + " spice level and extras: " + selectedExtras + " has been added to the cart!");
+                closePopup();
+            });
+        }
+    </script>
+    """))
+
+    demo.launch()