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 f"{item_name} added to cart!"
+    return {"data": f"{item_name} added to cart!"}
 
 # Function to display the current cart
 def display_cart():
@@ -63,6 +63,7 @@ popup_js = """
         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>
@@ -97,7 +98,7 @@ popup_js = """
 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;">
+     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>
 """
 
@@ -140,7 +141,7 @@ with gr.Blocks() as demo:
                 outputs=cart_display
             )
 
-# Gradio serves all registered functions automatically
+# Register the add_to_cart function
 demo.add_to_cart = add_to_cart
 
 demo.launch()