Update app.py

app.py

@@ -1,54 +1,28 @@
 import gradio as gr
 
 # -----------------------------
-# PRODUCT DATA (WORKING IMAGES)
+# PRODUCT DATA
 # -----------------------------
 
 products = [
-    {
-        "id": 1,
-        "name": "Fresh Apples",
-        "price": 120,
-        "image": "https://upload.wikimedia.org/wikipedia/commons/1/15/Red_Apple.jpg",
-        "best_seller": True
-    },
-    {
-        "id": 2,
-        "name": "Milk 1L",
-        "price": 60,
-        "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/Milk_glass.jpg/800px-Milk_glass.jpg",
-        "best_seller": False
-    },
-    {
-        "id": 3,
-        "name": "Potato Chips",
-        "price": 20,
-        "image": "https://upload.wikimedia.org/wikipedia/commons/6/69/Potato-Chips.jpg",
-        "best_seller": True
-    },
-    {
-        "id": 4,
-        "name": "Bananas",
-        "price": 50,
-        "image": "https://upload.wikimedia.org/wikipedia/commons/8/8a/Banana-Single.jpg",
-        "best_seller": False
-    },
+    {"id": 1, "name": "Fresh Apples", "price": 120, "best": True},
+    {"id": 2, "name": "Milk 1L", "price": 60, "best": False},
+    {"id": 3, "name": "Potato Chips", "price": 20, "best": True},
+    {"id": 4, "name": "Bananas", "price": 50, "best": False},
 ]
 
-cart = []
-
 # -----------------------------
 # FUNCTIONS
 # -----------------------------
 
-def add_to_cart(product_id):
+def add_to_cart(product_id, cart):
     for p in products:
         if p["id"] == product_id:
             cart.append(p)
             break
-    return view_cart()
+    return cart, view_cart(cart)
 
-def view_cart():
+def view_cart(cart):
     if not cart:
         return "🛒 Cart is empty"
 
@@ -61,59 +35,50 @@ def view_cart():
     text += f"\nTotal: ₹{total}"
     return text
 
-def sort_low_to_high():
-    global products
-    products = sorted(products, key=lambda x: x["price"])
-    return render_products()
+def sort_products():
+    products.sort(key=lambda x: x["price"])
+    return "Products sorted by price (Low → High)"
 
 # -----------------------------
 # UI
 # -----------------------------
 
-with gr.Blocks(css="""
-.product-card {
-    border: 1px solid #ddd;
-    padding: 10px;
-    border-radius: 10px;
-    text-align: center;
-}
-.best {
-    color: red;
-    font-weight: bold;
-}
-""") as demo:
+with gr.Blocks() as demo:
 
-    gr.Markdown("# 🛒 AI Grocery Store (Amazon Style UI)")
+    cart_state = gr.State([])
 
-    sort_btn = gr.Button("📊 Sort by Price (Low to High)")
+    gr.Markdown("# 🛒 AI Grocery Store")
 
-    product_area = gr.Column()
+    sort_btn = gr.Button("📊 Sort by Price (Low → High)")
+    sort_output = gr.Textbox(show_label=False)
 
-    cart_output = gr.Textbox(label="🛒 Cart", lines=10)
+    with gr.Row():
+        for p in products:
+            with gr.Column():
+                title = p["name"]
+                if p["best"]:
+                    title += " ⭐ Best Seller"
 
-    def render_products():
-        with product_area:
-            product_area.clear()
-            for p in products:
-                with gr.Row():
-                    img = gr.Image(value=p["image"], height=150, show_label=False)
-                    with gr.Column():
-                        title = p["name"]
-                        if p["best_seller"]:
-                            title += " ⭐ Best Seller"
+                gr.Markdown(f"### {title}")
+                gr.Markdown(f"**Price: ₹{p['price']}**")
 
-                        gr.Markdown(f"### {title}")
-                        gr.Markdown(f"**Price: ₹{p['price']}**")
+                btn = gr.Button("Add to Cart")
 
-                        btn = gr.Button("Add to Cart")
+                btn.click(
+                    add_to_cart,
+                    inputs=[gr.Number(value=p["id"], visible=False), cart_state],
+                    outputs=[cart_state, None]
+                )
 
-                        btn.click(
-                            lambda pid=p["id"]: add_to_cart(pid),
-                            outputs=cart_output
-                        )
+    cart_box = gr.Textbox(label="🛒 Cart", lines=8)
 
-    sort_btn.click(sort_low_to_high, outputs=None)
+    # Update cart display whenever state changes
+    cart_state.change(
+        view_cart,
+        inputs=cart_state,
+        outputs=cart_box
+    )
 
-    render_products()
+    sort_btn.click(sort_products, outputs=sort_output)
 
 demo.launch(server_name="0.0.0.0", server_port=7860)