Update app.py

app.py

@@ -21,7 +21,7 @@ menu_data = [
 # Function to add an item to the cart
 def add_to_cart(item_name):
     cart.append({"item_name": item_name})
-    return {"status": "success", "message": f"'{item_name}' has been added to your cart!"}
+    return f"'{item_name}' has been added to your cart!"
 
 # Function to display the current cart
 def display_cart():
@@ -46,7 +46,7 @@ def display_dishes(category):
                 <h3 style='margin: 10px 0; font-size: 18px;'>{dish['name']}</h3>
                 <p style='margin: 5px 0; font-size: 14px; color: #555;'>{dish['description']}</p>
                 <p style='margin: 10px 0; font-size: 16px; font-weight: bold;'>Price: {dish['price']}</p>
-                <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;'>
+                <button onclick="addItemToCart('{dish['name']}')" style='padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;'>
                     Add to Cart
                 </button>
             </div>
@@ -54,70 +54,35 @@ def display_dishes(category):
     html_content += "</div>"
     return html_content
 
-# JavaScript for Popup Handling
+# JavaScript for Popup and Backend Calls
 popup_js = """
 <script>
-    function showPopup(name, description, price, image) {
-        const popup = document.getElementById("custom-popup");
-        const overlay = document.getElementById("overlay");
-        popup.innerHTML = `
-            <button onclick="closePopup()" style="position: absolute; top: 10px; right: 10px; background: none; border: none; font-size: 20px; cursor: pointer;">&times;</button>
-            <img src="${image}" alt="${name}" style="width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 10px;">
-            <h3>${name}</h3>
-            <p>${description}</p>
-            <p style="font-weight: bold;">Price: ${price}</p>
-            <button id="add-to-cart-button" style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">
-                Add to Cart
-            </button>
-        `;
-        popup.style.display = "block";
-        overlay.style.display = "block";
-
-        document.getElementById("add-to-cart-button").onclick = async function () {
-            try {
-                const response = await fetch("/add_to_cart", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ item_name: name })
-                });
-                const result = await response.json();
-
-                if (result.status === "success") {
-                    alert(result.message); // Show success message
-                } else {
-                    alert("Error: " + result.message); // Show error message
-                }
-            } catch (error) {
-                console.error("Error:", error);
-                alert("Something went wrong!");
+    async function addItemToCart(itemName) {
+        try {
+            const response = await fetch("/run/add_to_cart", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ item_name: itemName })
+            });
+            const result = await response.json();
+
+            if (response.ok) {
+                alert(result);
+            } else {
+                alert("Error adding item to cart!");
             }
-
-            closePopup();
-        };
-    }
-
-    function closePopup() {
-        const popup = document.getElementById("custom-popup");
-        const overlay = document.getElementById("overlay");
-        popup.style.display = "none";
-        overlay.style.display = "none";
+        } catch (error) {
+            console.error("Error:", error);
+            alert("Something went wrong!");
+        }
     }
 </script>
 """
 
-# HTML for the Popup Container
-popup_html = """
-<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 999;"></div>
-<div id="custom-popup" 
-     style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; max-width: 90%; background: white; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); display: none; z-index: 1000; position: relative;">
-</div>
-"""
-
 # Main Gradio app
 with gr.Blocks() as demo:
     gr.HTML("<h1 style='text-align: center;'>🍛 Welcome to the Biryani Hub 🍛</h1>")
-    gr.HTML(popup_html)  # Add HTML for the popup
-    gr.HTML(popup_js)    # Add JavaScript for handling interactions
+    gr.HTML(popup_js)  # Add JavaScript for handling interactions
 
     # Tabs for Menu and Cart
     with gr.Tabs():
@@ -152,5 +117,12 @@ with gr.Blocks() as demo:
                 outputs=cart_display
             )
 
+    # Add-to-Cart Backend Function
+    demo.load(
+        fn=add_to_cart,
+        inputs=gr.Textbox(label="Item Name", visible=False),  # Hidden input
+        outputs=gr.Textbox(label="Cart Update", visible=False)  # Hidden output
+    )
+
 # Launch Gradio app
 demo.launch()