Upload app.py

app.py

@@ -1,160 +1,195 @@
-# app.py
+from __future__ import annotations
+import re, json
+from pathlib import Path
 import pandas as pd
 import gradio as gr
-from html import escape as esc
-import re, json
-
-# ---------- Load & normalize ----------
-DF = pd.read_csv("offers_with_prices.csv")
-DF.columns = [c.strip().lower() for c in DF.columns]
-
-# Ensure required columns exist
-for col in [
-    "country","dealer","brand","model","trim_or_variant",
-    "starting_price","heading","offer_description",
-    "vehicle_offer_url","vehcileoffer_url","images"
-]:
-    if col not in DF.columns:
-        DF[col] = ""
-
-def _first_image(val) -> str:
-    if not val:
-        return ""
-    s = str(val).strip().replace("&", "&")
-    # try json list/dict
+from html import escape as _esc
+
+DATA_PATH = Path("data/offers_with_prices.csv")
+
+# ---------- Utilities ----------
+def h(x: str) -> str:
+    return _esc((x or ""))
+
+def load_csv() -> pd.DataFrame:
+    if not DATA_PATH.exists():
+        cols = ["country","dealer","brand","model","trim_or_variant","starting_price",
+                "heading","offer_description","images","currency","vehicle_offer_url"]
+        return pd.DataFrame(columns=cols)
+
+    df = pd.read_csv(DATA_PATH)
+    df.columns = [c.strip().lower() for c in df.columns]
+    alias = {
+        "brand_name": "brand", "make": "brand",
+        "model_name": "model",
+        "img": "images", "image_url": "images", "image": "images", "imageurl": "images",
+        "desc": "offer_description", "offer_text": "offer_description",
+        "price": "starting_price",
+        "offer heading": "heading", "title": "heading",
+        "vehcileoffer_url": "vehicle_offer_url",
+    }
+    for a,b in alias.items():
+        if a in df.columns and b not in df.columns:
+            df[b] = df[a]
+    for c in ["country","dealer","brand","model","trim_or_variant","starting_price",
+              "heading","offer_description","images","currency","vehicle_offer_url"]:
+        if c not in df.columns: df[c] = ""
+    return df
+
+_IMG_URL_RE = re.compile(r'https?://[^\s<>()\'"]+')
+def first_image(url_field) -> str:
+    if not url_field: return ""
+    s = str(url_field).strip().replace("&amp;", "&")
     try:
         if s[:1] in "[{" or (s[:1] == '"' and s[-1:] == '"'):
             j = json.loads(s)
             if isinstance(j, list):
                 for item in j:
-                    m = re.search(r'https?://[^\s<>()\'"]+', str(item))
+                    m = _IMG_URL_RE.search(str(item))
                     if m: return m.group(0)
             elif isinstance(j, dict):
                 for k in ("image","image_url","url","src"):
                     if k in j:
-                        m = re.search(r'https?://[^\s<>()\'"]+', str(j[k]))
+                        m = _IMG_URL_RE.search(str(j[k]))
                         if m: return m.group(0)
     except Exception:
         pass
-    # plain string
-    m = re.search(r'https?://[^\s<>()\'"]+', s)
+    m = _IMG_URL_RE.search(s)
     if m: return m.group(0)
-    # splitters
     for sep in ("|","\n"," "):
         if sep in s:
             for part in s.split(sep):
-                m = re.search(r'https?://[^\s<>()\'"]+', part)
+                m = _IMG_URL_RE.search(part)
                 if m: return m.group(0)
     return ""
 
-def _card_html(row: pd.Series) -> str:
-    img = _first_image(row.get("images",""))
-    heading = esc(str(row.get("heading","")) or f"{row.get('brand','')} {row.get('model','')}")
-    offer = esc(str(row.get("offer_description","")))
-    price = esc(str(row.get("starting_price","")))
-    url = str(row.get("vehicle_offer_url","") or row.get("vehcileoffer_url","") or "#")
-
-    country = esc(str(row.get("country","")))
-    brand   = esc(str(row.get("brand","")))
-    dealer  = esc(str(row.get("dealer","")))
-    model   = esc(str(row.get("model","")))
-    trim    = esc(str(row.get("trim_or_variant","")))
-
-    chips = " ".join(
-        f"<span class='chip'>{v}</span>"
-        for v in [country, brand, dealer, model, trim] if v
-    )
-    return f"""
-    <div class="card" onclick="window.open('{url}','_blank')">
-      <div class="thumb"><img src="{img}" alt="{heading}" onerror="this.style.opacity=0.2"></div>
-      <div class="body">
-        <div class="sp">Starting Price<strong>{price or "—"}</strong></div>
-        <div class="heading">{heading}</div>
-        <div class="offer">{offer}</div>
-      </div>
-      <div class="meta">{chips}</div>
-    </div>
-    """
+def price_number(s: str):
+    if not isinstance(s, str): return None
+    s = s.replace(",", "")
+    m = re.search(r"([\d]+(?:\.\d+)?)", s)
+    return float(m.group(1)) if m else None
+
+# ---------- Card Renderer ----------
+def card_html(row: pd.Series) -> str:
+    img = first_image(row.get("images",""))
+    brand, dealer, country = map(lambda x: h(str(x).strip()),
+                                 [row.get("brand",""), row.get("dealer",""), row.get("country","")])
+    model, trim = h(str(row.get("model","")).strip()), h(str(row.get("trim_or_variant","")).strip())
+    heading = h(str(row.get("heading","")).strip() or f"{brand} {model}".strip())
+    price = h(str(row.get("starting_price","")).strip())
+    offer = h(str(row.get("offer_description","")).strip()).replace("\n","<br>")
+    url = str(row.get("vehicle_offer_url","")).strip()
+    has_url = url and url.lower() != "nan"
+    onclick = f"onclick=\"window.open('{url}','_blank');\"" if has_url else ""
+    chips = "".join(f"<div class='chip'>{x}</div>" for x in [country, brand, dealer, model, trim] if x)
 
-def _grid_html(df: pd.DataFrame) -> str:
-    cards = "\n".join(_card_html(r) for _, r in df.iterrows())
     return f"""
-    <html>
-    <head>
-      <meta charset="utf-8" />
-      <style>
-        :root{{ --bg:#f6f7fb; --card:#ffffff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --chip:#eef2f7; }}
-        body{{background:var(--bg);margin:0;font-family:Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif;}}
-        .cards{{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;padding:6px;}}
-        .card{{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;
-               box-shadow:0 4px 12px rgba(0,0,0,.06);cursor:pointer;
-               transition:transform .08s ease,box-shadow .2s ease;}}
-        .card:hover{{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.12);}}
-        .thumb{{height:160px;overflow:hidden;background:#000;}}
-        .thumb img{{width:100%;height:100%;object-fit:cover;}}
-        .body{{padding:12px;display:flex;flex-direction:column;gap:6px;}}
-        .sp{{font-size:13px;color:var(--muted);}}
-        .sp strong{{display:block;font-size:20px;color:var(--ink);margin-top:2px;}}
-        .heading{{font-weight:700;color:var(--ink);font-size:15px;line-height:1.25;}}
-        .offer{{color:var(--ink);font-size:13px;line-height:1.45;opacity:.9;
-                display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}}
-        .meta{{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 12px;}}
-        .chip{{font-size:11px;color:#374151;background:var(--chip);border-radius:999px;padding:4px 8px;}}
-      </style>
-    </head>
-    <body>
-      <div class="cards">{cards}</div>
-    </body>
-    </html>
-    """
-
-# ---------- Filtering logic ----------
-def filter_offers(country: str, brand: str, dealer: str, limit: int):
-    df_f = DF.copy()
-    # normalize to str before comparing
-    if country and country != "All":
-        df_f = df_f[df_f["country"].astype(str) == str(country)]
-    if brand and brand != "All":
-        df_f = df_f[df_f["brand"].astype(str) == str(brand)]
-    if dealer and dealer != "All":
-        df_f = df_f[df_f["dealer"].astype(str) == str(dealer)]
-    df_show = df_f.head(int(limit))
-    return _grid_html(df_show)
-
-# ---------- Build Gradio UI ----------
-def app():
-    countries = ["All"] + sorted(DF["country"].dropna().astype(str).unique().tolist())
-    brands    = ["All"] + sorted(DF["brand"].dropna().astype(str).unique().tolist())
-    dealers   = ["All"] + sorted(DF["dealer"].dropna().astype(str).unique().tolist())
-
-    # One scrolling region (like an iframe) for the HTML
-    custom_css = """
-    body, .gradio-container, .gr-block, .gr-button, .gr-input, .gr-dropdown,
-    .gradio-container * { font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; }
-    #cards-pane { height: 820px; overflow: auto; border-radius: 10px; }
+      <div class="card" {onclick}>
+        <div class="thumb"><img src="{img}" alt="{brand} {model}" onerror="this.style.opacity=0.15"></div>
+        <div class="body">
+          <div class="sp">Starting Price<strong>{price or "—"}</strong></div>
+          <div class="heading">{heading}</div>
+          <div class="offer">{offer}</div>
+        </div>
+        <div class="meta">{chips}</div>
+      </div>
     """
 
-    with gr.Blocks(title="Vehicle Offers", css=custom_css) as demo:
-        gr.Markdown("## 🚗 Vehicle Offers")
-
-        with gr.Row():
-            dd_country = gr.Dropdown(choices=countries, label="Country", value="All")
-            dd_brand   = gr.Dropdown(choices=brands, label="Brand", value="All")
-            dd_dealer  = gr.Dropdown(choices=dealers, label="Dealer", value="All")
-            s_limit    = gr.Slider(6, 200, value=50, step=6, label="Max Offers")
-
-        out_html = gr.HTML(elem_id="cards-pane")
-
-        # Render once on page load using current input values
-        demo.load(filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-
-        # Auto-update whenever a filter changes (NO button needed)
-        dd_country.change(filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-        dd_brand.change(  filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-        dd_dealer.change( filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-        s_limit.change(  filter_offers, [dd_country, dd_brand, dd_dealer, s_limit], out_html)
-
-    return demo
+# ---------- CSS ----------
+CARD_CSS = """
+<style>
+  body, * {
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial !important;
+  }
+  .offers-container {
+    height: 850px;
+    overflow: auto;
+    background: #f6f7fb;
+    padding: 8px;
+    border-radius: 8px;
+  }
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: 18px;
+  }
+  .card {
+    background:#fff;
+    border:1px solid #e5e7eb;
+    border-radius:16px;
+    overflow:hidden;
+    box-shadow:0 4px 18px rgba(0,0,0,.05);
+    display:flex;
+    flex-direction:column;
+    transition: transform .08s ease, box-shadow .2s ease;
+    cursor:pointer;
+    height:100%;
+  }
+  .card:hover { box-shadow:0 10px 28px rgba(2,6,23,.12); transform:translateY(-1px); }
+  .thumb { background:#0b0b0b; height:180px; overflow:hidden; }
+  .thumb img { width:100%; height:100%; object-fit:cover; }
+  .body { padding:14px; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; }
+  .sp { font-size:15px; color:#070708; letter-spacing:.02em; }
+  .sp strong { display:block; font-size:22px; color:#e5c100; margin-top:2px; }
+  .heading { font-weight:700; color:#111827; font-size:16px; margin:4px 0; line-height:1.25; }
+  .offer { color:#111827; font-size:14px; line-height:1.45; opacity:.9;
+           display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden; }
+  .meta { display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 14px; margin-top:auto; }
+  .chip { font-size:13px; color:#f3eac0; background:#1e2640; border-radius:999px;
+          border:1px solid #e5e7eb; padding:4px 8px; }
+</style>
+"""
+
+# ---------- HTML Renderer ----------
+def render_html(df: pd.DataFrame) -> str:
+    if df.empty:
+        return f"{CARD_CSS}<div class='offers-container'><p style='padding:10px;color:#64748b;'>No offers found.</p></div>"
+    cards = "".join(card_html(r) for _, r in df.iterrows())
+    return f"{CARD_CSS}<div class='offers-container'><div class='cards'>{cards}</div></div>"
+
+# ---------- Filtering ----------
+DF = load_csv()
+
+def get_filters():
+    countries = ["All"] + sorted([x for x in DF["country"].dropna().astype(str).unique() if x])
+    brands = ["All"] + sorted([x for x in DF["brand"].dropna().astype(str).unique() if x])
+    dealers = ["All"] + sorted([x for x in DF["dealer"].dropna().astype(str).unique() if x])
+    return countries, brands, dealers
+
+def update_cards(country, brand, dealer, sort_choice, limit):
+    df = DF.copy()
+    if country != "All": df = df[df["country"].astype(str) == country]
+    if brand != "All": df = df[df["brand"].astype(str) == brand]
+    if dealer != "All": df = df[df["dealer"].astype(str) == dealer]
+
+    if sort_choice != "Default":
+        tmp = df.apply(lambda r: price_number(r["starting_price"]), axis=1)
+        df = df.assign(__p=tmp)
+        df = df.sort_values("__p", ascending=(sort_choice=="Price (Low → High)"), na_position="last").drop(columns="__p", errors="ignore")
+
+    df = df.head(int(limit))
+    return render_html(df)
+
+# ---------- Gradio UI ----------
+countries, brands, dealers = get_filters()
+
+with gr.Blocks(fill_height=True) as demo:
+    gr.Markdown("## 🚗 Vehicle Offers")
+    with gr.Row():
+        c = gr.Dropdown(countries, value="All", label="Country")
+        b = gr.Dropdown(brands, value="All", label="Brand")
+        d = gr.Dropdown(dealers, value="All", label="Dealer")
+        s = gr.Dropdown(["Default","Price (Low → High)","Price (High → Low)"], value="Default", label="Sort by")
+        l = gr.Slider(6, 200, 50, step=6, label="Max Cards")
+    out = gr.HTML()
+
+    # Auto-update and initial load
+    demo.load(update_cards, [c,b,d,s,l], [out])
+    c.change(update_cards, [c,b,d,s,l], [out])
+    b.change(update_cards, [c,b,d,s,l], [out])
+    d.change(update_cards, [c,b,d,s,l], [out])
+    s.change(update_cards, [c,b,d,s,l], [out])
+    l.change(update_cards, [c,b,d,s,l], [out])
 
 if __name__ == "__main__":
-    app().launch()
+    demo.launch()