Update app.py

app.py

@@ -1,5 +1,4 @@
 import gradio as gr
-import json
 
 # Global variables for cart and menu data
 cart = []
@@ -20,7 +19,7 @@ menu_data = [
 ]
 
 # Function to add an item to the cart
-def add_to_cart(item_name: str):
+def add_to_cart(item_name):
     cart.append({"item_name": item_name})
     return f"'{item_name}' has been added to your cart!"
 
@@ -57,7 +56,7 @@ def display_dishes(category):
     html_content += "</div>"
     return html_content
 
-# Popup JavaScript for handling the modal
+# JavaScript for handling the popup
 popup_js = """
 <script>
     function showPopup(name, description, price, image) {
@@ -75,16 +74,28 @@ popup_js = """
         `;
         popup.style.display = "block";
         overlay.style.display = "block";
-        
-        document.getElementById("add-to-cart-button").onclick = async function() {
-            const response = await fetch("/run/add_to_cart", {
-                method: "POST",
-                body: JSON.stringify({ data: name }),
-                headers: { "Content-Type": "application/json" }
-            });
-            const result = await response.json();
-            alert(result.message);  // Show success message
-            closePopup();  // Automatically close popup
+
+        document.getElementById("add-to-cart-button").onclick = async function () {
+            try {
+                const response = await fetch("/run/add_to_cart", {
+                    method: "POST",
+                    body: JSON.stringify({ name }),
+                    headers: { "Content-Type": "application/json" },
+                });
+
+                const result = await response.json();
+
+                if (response.ok) {
+                    alert(result); // Show success message
+                } else {
+                    alert("Error adding item to cart: " + (result.error || "Unknown error"));
+                }
+            } catch (error) {
+                console.error("Error:", error);
+                alert("Something went wrong while adding the item.");
+            }
+
+            closePopup();
         };
     }
 
@@ -95,7 +106,7 @@ popup_js = """
 </script>
 """
 
-# Popup HTML structure
+# HTML structure for the popup
 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" 
@@ -103,7 +114,7 @@ popup_html = """
 </div>
 """
 
-# Main Gradio App
+# Main Gradio app
 with gr.Blocks() as demo:
     gr.HTML(popup_html)  # Add popup container
     gr.HTML(popup_js)    # Add popup JavaScript
@@ -142,4 +153,8 @@ with gr.Blocks() as demo:
                 outputs=cart_display
             )
 
+# Register backend functions
+demo.load(add_to_cart, inputs="text", outputs="text")
+
 demo.launch()
+