Update app.py

app.py

@@ -67,7 +67,7 @@ popup_js = """
             <h3>${name}</h3>
             <p>${description}</p>
             <p style="font-weight: bold;">Price: ${price}</p>
-            <button onclick="addToCart('${name}')" style="padding: 10px 20px; background-color: #28a745; color: white; border: none; border-radius: 5px; cursor: pointer;">
+            <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>
             <button onclick="closePopup()" style="padding: 10px 20px; background-color: #dc3545; color: white; border: none; border-radius: 5px; cursor: pointer; margin-left: 10px;">
@@ -76,19 +76,18 @@ popup_js = """
         `;
         popup.style.display = "block";
         overlay.style.display = "block";
+        
+        document.getElementById("add-to-cart-button").onclick = async function() {
+            const response = await google.colab.kernel.invokeFunction('add_to_cart', [name], {});
+            alert(response.data);
+            closePopup();
+        };
     }
 
     function closePopup() {
         document.getElementById("custom-popup").style.display = "none";
         document.getElementById("overlay").style.display = "none";
     }
-
-    async function addToCart(name) {
-        // Call the Gradio backend function to add item to the cart
-        const response = await google.colab.kernel.invokeFunction('notebook.add_to_cart', [name], {});
-        alert(response.data); // Show a success message
-        closePopup(); // Close the popup
-    }
 </script>
 """
 
@@ -140,6 +139,6 @@ with gr.Blocks() as demo:
             )
 
 # Register the backend function for JavaScript integration
-demo.add_to_cart = add_to_cart
+demo.load(lambda: None, inputs=[], outputs=[], live=True)  # Dummy to integrate JavaScript
 
 demo.launch()