Update app.py

app.py

@@ -60,7 +60,7 @@ def display_dishes(category="ALL"):
             <h4>{dish['name']}</h4>
             <p>{dish['description']}</p>
             <p><strong>Price:</strong> ${dish['price']}</p>
-            <button onclick="addToCart('{dish['name']}', '{dish['price']}')" style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 3px;'>Add to Cart</button>
+            <button onclick="addToCart('{dish['name']}', {dish['price']})" style='padding: 5px 10px; background-color: #28a745; color: white; border: none; border-radius: 3px;'>Add to Cart</button>
         </div>
         """
     html_content += "</div>"
@@ -86,12 +86,6 @@ with gr.Blocks() as demo:
     def add_to_cart_handler(item_name, price):
         return add_item_to_cart(item_name, price)
 
-    add_to_cart_interface = gr.Interface(
-        fn=add_to_cart_handler,
-        inputs=[gr.Textbox(visible=False, label="Item Name"), gr.Textbox(visible=False, label="Price")],
-        outputs=cart_display,
-    )
-
     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()'>
@@ -99,7 +93,7 @@ with gr.Blocks() as demo:
         <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: auto;'>Place Order</button>
+            <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>
         </div>
 
         <script>
@@ -114,7 +108,7 @@ with gr.Blocks() as demo:
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ data: [name, price] })
                 }).then(response => response.json()).then(data => {
-                    document.getElementById('cart-content').innerHTML = data.data[0];
+                    document.getElementById('cart-content').innerHTML = data.data;
                     alert(`${name} has been added to your cart.`);
                 });
             }