Update app.py

app.py

@@ -1,152 +1,244 @@
-import streamlit as st
 import pandas as pd
+import gradio as gr
 import re
 
-# Load and clean data
-@st.cache_data
-def load_data():
-    df = pd.read_csv("amazon_eco-friendly_products.csv")
+# =============================
+# Load & Clean Data
+# =============================
+df = pd.read_csv("amazon_eco-friendly_products.csv")
+df.fillna('', inplace=True)
 
-    # --- Clean price ---
-    def clean_price(p):
-        if isinstance(p, str):
-            match = re.search(r"(\d+(\.\d{1,2})?)", p.replace(",", ""))
-            return float(match.group(1)) if match else None
+# --- Price Cleaning ---
+def parse_price(price_str):
+    if not isinstance(price_str, str):
         return None
-
-    df["price"] = df["price"].apply(clean_price)
-
-    # Remove rows with invalid price
-    df = df[df["price"].notna()]
-
-    # --- Clean rating ---
-    def clean_rating(r):
-        if isinstance(r, str):
-            match = re.search(r"(\d+(\.\d)?)", r)
-            return float(match.group(1)) if match else None
-        return r
-
-    df["rating"] = df["rating"].apply(clean_rating)
-
-    # --- Clean stock ---
-    df["inStock"] = df["inStock"].astype(str).str.strip().str.lower().isin(["true", "yes", "1"])
-
-    return df
-
-df = load_data()
-
-# --- UI ---
-st.set_page_config(page_title="Eco-Friendly Products", layout="wide")
-
-# Custom CSS
-st.markdown(
+    match = re.search(r"[\d,.]+", price_str)
+    if match:
+        try:
+            return float(match.group().replace(",", ""))
+        except:
+            return None
+    return None
+
+df["price_num"] = df["price"].apply(parse_price)
+df = df[df["price_num"].notnull()]  # drop invalid prices
+
+# --- Rating Cleaning ---
+df["rating_num"] = pd.to_numeric(df["rating"], errors="coerce").fillna(0)
+
+# --- Stock Normalization ---
+df["inStockBool"] = df["inStockText"].str.contains("In Stock", case=False, na=False)
+
+# Categories
+categories = sorted(df['category'].dropna().unique().tolist())
+
+# =============================
+# UI Helpers
+# =============================
+def product_card(prod):
+    """Render a single product card with hover popup"""
+    return f"""
+    <div class="card">
+        <a href='{prod["url"]}' target='_blank'>
+            <img src='{prod["img_url"]}' class="prod-img">
+            <div class="card-title">{prod["title"]}</div>
+        </a>
+        <div class="card-meta">
+            <span class="price">${prod["price_num"]:.2f}</span><br>
+            ⭐ {prod["rating_num"]}/5<br>
+            {prod["inStockText"]}
+        </div>
+        <div class="popup">
+            <b>Brand:</b> {prod.get("brand","")}<br>
+            <b>Category:</b> {prod.get("category","")}<br>
+            <b>Price:</b> ${prod["price_num"]:.2f}<br>
+            <b>Rating:</b> {prod["rating_num"]}/5<br>
+            <b>Status:</b> {prod["inStockText"]}
+        </div>
+    </div>
     """
-    <style>
-    body { background: linear-gradient(135deg,#1e3c72,#2a5298); color: white; }
-    .stApp { background: transparent; }
-    .glass {
-        background: rgba(255,255,255,0.1);
-        backdrop-filter: blur(12px);
-        border-radius: 20px;
-        padding: 20px;
-        margin-bottom: 20px;
-        transition: all 0.3s ease-in-out;
-    }
-    .glass:hover {
-        transform: scale(1.02);
-        box-shadow: 0 8px 20px rgba(0,0,0,0.3);
-    }
-    .footer {
-        background: rgba(255,255,255,0.15);
-        backdrop-filter: blur(15px);
-        border-radius: 15px;
-        padding: 15px;
-        text-align: center;
-        color: #fff;
-        font-weight: bold;
-        margin-top: 30px;
-        animation: glow 2s infinite alternate;
-    }
-    @keyframes glow {
-        from { text-shadow: 0 0 5px #00ffcc, 0 0 10px #00ffcc; }
-        to { text-shadow: 0 0 20px #00ffcc, 0 0 30px #00ffcc; }
-    }
-    .category-pill {
-        display:inline-block;
-        padding:8px 18px;
-        margin:5px;
-        border-radius:25px;
-        background:rgba(255,255,255,0.15);
-        color:white;
-        cursor:pointer;
-        transition:0.2s;
-    }
-    .category-pill:hover {
-        background:rgba(255,255,255,0.3);
-        transform:scale(1.1);
-    }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
-
-st.title("🌍 Eco-Friendly Products")
-
-# --- Filters ---
-col1, col2, col3 = st.columns([2, 2, 2])
-with col1:
-    category = st.selectbox("Category", ["All"] + sorted(df["category"].dropna().unique().tolist()))
-with col2:
-    min_price, max_price = st.slider("Price range ($)", 0.0, float(df["price"].max()), (0.0, float(df["price"].max())))
-with col3:
-    min_rating = st.slider("Minimum Rating ⭐", 0.0, 5.0, 0.0, 0.1)
-
-in_stock_only = st.checkbox("Show In-Stock Only", True)
-
-# --- Sorting ---
-sort_by = st.selectbox("Sort By", ["Relevance", "Price: Low → High", "Price: High → Low", "Rating: High → Low"])
-
-# --- Filter logic ---
-filtered = df.copy()
-
-if category != "All":
-    filtered = filtered[filtered["category"] == category]
-
-filtered = filtered[
-    (filtered["price"] >= min_price) &
-    (filtered["price"] <= max_price) &
-    (filtered["rating"].fillna(0) >= min_rating)
-]
-
-if in_stock_only:
-    filtered = filtered[filtered["inStock"]]
-
-# Sorting
-if sort_by == "Price: Low → High":
-    filtered = filtered.sort_values("price", ascending=True)
-elif sort_by == "Price: High → Low":
-    filtered = filtered.sort_values("price", ascending=False)
-elif sort_by == "Rating: High → Low":
-    filtered = filtered.sort_values("rating", ascending=False)
-
-# --- Display ---
-if filtered.empty:
-    st.warning("No products match your filters.")
-else:
-    cols = st.columns(3)
-    for i, (_, row) in enumerate(filtered.iterrows()):
-        with cols[i % 3]:
-            st.markdown(
-                f"""
-                <div class="glass">
-                    <h4>{row['name']}</h4>
-                    <p>💲 <b>${row['price']:.2f}</b></p>
-                    <p>⭐ {row['rating'] if not pd.isna(row['rating']) else "N/A"}</p>
-                    <p>📦 {"In Stock" if row['inStock'] else "Out of Stock"}</p>
-                </div>
-                """,
-                unsafe_allow_html=True,
-            )
-
-# --- Footer ---
-st.markdown('<div class="footer">Made with ❤️ for a Greener World 🌱</div>', unsafe_allow_html=True)
+
+def render_products(products_df):
+    if products_df.empty:
+        return """
+        <div class="no-results">
+            <h3>😕 No products found</h3>
+            <p>Try adjusting filters or searching again.</p>
+        </div>
+        """
+    return "<div class='grid'>" + "".join(product_card(row) for _, row in products_df.iterrows()) + "</div>"
+
+# =============================
+# Core Functions
+# =============================
+batch_size = 8
+shown_ids = []
+
+def home_tab(category=None):
+    global shown_ids
+    if category:
+        filtered = df[df['category'].str.contains(category, case=False, na=False)]
+    else:
+        filtered = df
+    shown_ids = []
+    sample = filtered.sample(min(batch_size, len(filtered)), random_state=1)
+    shown_ids = sample['id'].tolist()
+    return render_products(sample)
+
+def load_more(category=None):
+    global shown_ids
+    if category:
+        filtered = df[df['category'].str.contains(category, case=False, na=False)]
+    else:
+        filtered = df
+    remaining = filtered[~filtered['id'].isin(shown_ids)]
+    if remaining.empty:
+        return render_products(filtered[filtered['id'].isin(shown_ids)])
+    next_batch = remaining.sample(min(batch_size, len(remaining)))
+    shown_ids += next_batch['id'].tolist()
+    return render_products(df[df['id'].isin(shown_ids)])
+
+def search_products(query):
+    filtered = df[
+        df['title'].str.contains(query, case=False, na=False) |
+        df['brand'].str.contains(query, case=False, na=False) |
+        df['category'].str.contains(query, case=False, na=False)
+    ]
+    return render_products(filtered)
+
+def filter_sort(category=None, price_min=0, price_max=1000, min_rating=0, in_stock=False, sort_by="Price: Low→High"):
+    filtered = df.copy()
+    if category:
+        filtered = filtered[filtered['category'].str.contains(category, case=False, na=False)]
+    # Fix slider swap
+    if price_min > price_max:
+        price_min, price_max = price_max, price_min
+    filtered = filtered[(filtered['price_num'] >= price_min) & (filtered['price_num'] <= price_max)]
+    filtered = filtered[filtered['rating_num'] >= min_rating]
+    if in_stock:
+        filtered = filtered[filtered['inStockBool'] == True]
+    if sort_by == "Price: Low→High":
+        filtered = filtered.sort_values("price_num")
+    elif sort_by == "Price: High→Low":
+        filtered = filtered.sort_values("price_num", ascending=False)
+    elif sort_by == "Rating: High→Low":
+        filtered = filtered.sort_values("rating_num", ascending=False)
+    return render_products(filtered)
+
+# =============================
+# Gradio App
+# =============================
+with gr.Blocks(css="""
+.grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  gap: 20px;
+}
+.card {
+  position: relative;
+  padding: 12px;
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(12px);
+  text-align: center;
+  transition: transform 0.3s, box-shadow 0.3s;
+}
+.card:hover {
+  transform: translateY(-6px) scale(1.03);
+  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
+}
+.prod-img {
+  width: 160px;
+  height: 160px;
+  object-fit: cover;
+  border-radius: 12px;
+}
+.card-title {
+  font-weight: bold;
+  margin: 10px 0;
+}
+.card-meta {
+  font-size: 14px;
+}
+.popup {
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.3s;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  background: rgba(0,0,0,0.85);
+  color: white;
+  padding: 12px;
+  font-size: 14px;
+}
+.card:hover .popup {
+  visibility: visible;
+  opacity: 1;
+}
+.no-results {
+  text-align:center;
+  padding:30px;
+  border-radius: 16px;
+  background: rgba(255,255,255,0.15);
+  backdrop-filter: blur(10px);
+}
+""") as app:
+
+    # Header
+    gr.Markdown("""
+    <div style='background: linear-gradient(90deg, #6dd5ed, #2193b0); padding:20px; border-radius:14px; text-align:center; color:white;'>
+        <h1 style='margin:0;'>🌿 Ecoducts Online</h1>
+        <p style='margin:0;'>Discover eco-friendly alternatives at one place</p>
+    </div>
+    """)
+
+    with gr.Tabs():
+        # Home
+        with gr.TabItem("🏠 Home"):
+            with gr.Row():
+                cat_buttons = []
+                for cat in categories[:8]:
+                    btn = gr.Button(cat, elem_classes="pill")
+                    cat_buttons.append(btn)
+            home_output = gr.HTML(home_tab())
+            load_btn = gr.Button("Load More")
+        
+        # Search
+        with gr.TabItem("🔎 Search"):
+            query_in = gr.Textbox(label="Search products")
+            query_out = gr.HTML()
+            query_in.submit(search_products, inputs=query_in, outputs=query_out)
+            gr.Button("Search").click(search_products, inputs=query_in, outputs=query_out)
+        
+        # Filters
+        with gr.TabItem("⚙ Filters & Sort"):
+            c_dd = gr.Dropdown(choices=categories, label="Category")
+            price_min = gr.Number(value=0, label="Min Price ($)")
+            price_max = gr.Number(value=1000, label="Max Price ($)")
+            rating_slider = gr.Slider(0, 5, value=0, step=0.1, label="Minimum Rating")
+            stock_cb = gr.Checkbox(label="In Stock Only")
+            sort_dd = gr.Dropdown(choices=["Price: Low→High","Price: High→Low","Rating: High→Low"], value="Price: Low→High", label="Sort By")
+            filter_out = gr.HTML()
+            gr.Button("Apply Filters").click(filter_sort, 
+                inputs=[c_dd, price_min, price_max, rating_slider, stock_cb, sort_dd],
+                outputs=filter_out)
+
+    # Footer
+    gr.HTML("""
+    <div style='margin-top:30px; padding:15px; text-align:center;
+        border-radius:14px; background: linear-gradient(90deg,#6dd5ed,#2193b0); color:white;'>
+        <h3>Made with ❤️ by <b>Krishna Jha</b></h3>
+        <a href='https://instagram.com/kosmos.cpp' target='_blank' style='color:white;text-decoration:none;'>@kosmos.cpp</a>
+    </div>
+    """)
+
+    # Link buttons
+    for btn in cat_buttons:
+        btn.click(home_tab, inputs=btn, outputs=home_output)
+    load_btn.click(load_more, outputs=home_output)
+
+app.launch()