Update app.py

app.py

@@ -102,7 +102,10 @@ with gr.Blocks() as demo:
     btn_vegan.click(lambda: display_dishes("VEGAN"), outputs=dish_display)
     btn_halal.click(lambda: display_dishes("HALAL"), outputs=dish_display)
 
-    demo.append(gr.HTML(f"""
+    demo.add_component(dish_display)
+    demo.add_component(cart_display)
+
+    demo.add_component(gr.HTML(f"""
     <div id="popup" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                               background-color: white; padding: 20px; border-radius: 10px; 
                               box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); z-index: 1000; text-align: center; width: 500px;">
@@ -150,15 +153,8 @@ with gr.Blocks() as demo:
         function addToCartFromPopup() {
             const spiceLevel = document.querySelector('input[name=spice]:checked')?.value || "None";
             const selectedExtras = Array.from(document.querySelectorAll('input[name=extras]:checked')).map(cb => cb.value).join(", ");
-            fetch('/run/predict', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ data: [selectedItem, selectedPrice, spiceLevel, selectedExtras] })
-            }).then(response => response.json()).then(data => {
-                document.querySelector('.cart-html').innerHTML = data.data[0];
-                alert(selectedItem + " with " + spiceLevel + " spice level and extras: " + selectedExtras + " has been added to the cart!");
-                closePopup();
-            });
+            alert(selectedItem + " with " + spiceLevel + " spice level and extras: " + selectedExtras + " has been added to the cart!");
+            closePopup();
         }
     </script>
     """))