Upload app.py

app.py

@@ -1,508 +1,245 @@
-import math
-import re
-import json
-from pathlib import Path
-from html import escape as _esc
-
-import gradio as gr
+# app.py
 import pandas as pd
-
-# =========================
-#  Data loading utilities
-# =========================
-
-DATA_CANDIDATES = [Path("offers_with_prices.csv")]
-
-def find_csv() -> Path | None:
-    for p in DATA_CANDIDATES:
-        if p.exists():
-            return p
-    return None
-
-def filter_heading_rows(df: pd.DataFrame) -> pd.DataFrame:
-    """
-    Same logic as in vehciles_offers_common.filter_heading_rows,
-    but without any Streamlit dependencies.
-    - Drops headings with certain keywords
-    - Drops headings that are only a currency amount,
-      EXCEPT when heading contains a known model name.
-    """
-    if "heading" not in df.columns:
-        return df
-
-    col = "heading"
-    heading_series = df[col].astype(str)
-
-    # Load config files used in original code
-    with open("config_offers.json", "r", encoding="utf-8") as f:
-        config = json.load(f)
-    csv_filter_keywords = config["CSV_FILTER_KEYWORDS"]
-
-    with open("config_pricing_generic.json", "r", encoding="utf-8") as f:
-        config_pricing = json.load(f)
-    BRAND_MODEL_TYPES = config_pricing["BRAND_MODEL_TYPES"]
-    MONEY = config_pricing["MONEY"]
-
-    # Flatten list of model names
-    ALL_MODEL_NAMES = [
-        m.strip()
-        for models in BRAND_MODEL_TYPES.values()
-        for m in models.keys()
-        if m.strip()
-    ]
-
-    def heading_has_model(heading: str) -> bool:
-        if not isinstance(heading, str):
-            return False
-        text = heading.upper()
-        for model in ALL_MODEL_NAMES:
-            if model.upper() in text:
-                return True
-        return False
-
-    keyword_pattern = "|".join(re.escape(k) for k in csv_filter_keywords)
-    cond1 = heading_series.str.contains(keyword_pattern, case=False, na=False)
-
-    # currency-only headings
-    currency_pattern = rf"^(?:{MONEY})\s*\d[\d,]*(?:\*)?$"
-    cond2 = heading_series.str.strip().str.match(currency_pattern, case=False)
-
-    has_model = heading_series.apply(heading_has_model)
-
-    drop_mask = (cond1 | cond2) & ~has_model
-    df_cleaned = df[~drop_mask].copy()
-    return df_cleaned
-
-def normalize_columns(df: pd.DataFrame) -> pd.DataFrame:
-    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 col in ["country","dealer","brand","model","trim_or_variant",
-                "starting_price","heading","offer_description","images","currency"]:
-        if col not in df.columns:
-            df[col] = ""
-    return df
-
-def load_csv(path: str) -> pd.DataFrame:
-    df = pd.read_csv(path)
-    df.columns = [c.strip().lower() for c in df.columns]
-    df = normalize_columns(df)
-    df = filter_heading_rows(df)
-
-    ctx_cols = [c for c in df.columns if c.startswith("_debug_ctx_country_dealer_brand_currency")]
-    if not ctx_cols:
-        ctx_cols = [c for c in df.columns if c.startswith("_debug_ctx_")]
-    if ctx_cols:
-        df["__price_context_ok"] = df[ctx_cols].fillna(0).apply(
-            lambda r: any(pd.to_numeric(r, errors="coerce").fillna(0) > 0),
-            axis=1
-        )
-    else:
-        df["__price_context_ok"] = True
-    return df
-
-def load_data() -> pd.DataFrame:
-    data_file = find_csv()
-    if not data_file:
-        raise FileNotFoundError(
-            "Couldn't find 'data/offers_with_prices.csv'. "
-            "Place the CSV in a 'data' folder next to app.py."
-        )
-
-    df = load_csv(str(data_file))
-    if df.empty:
-        raise ValueError("The offers CSV appears to be empty.")
-    return df
-
-# ==========
-#  Helpers
-# ==========
-
-def h(x: str) -> str:
-    return _esc((x or ""))
-
-_IMG_URL_RE = re.compile(r'https?://[^\s<>()\'"]+')
-
-def first_image(url_field) -> str:
-    if not url_field:
+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(url_field).strip().replace("&amp;", "&")
+    s = str(val).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 = _IMG_URL_RE.search(str(item))
-                    if m:
-                        return m.group(0).rstrip('.,);]')
+                    m = re.search(r'https?://[^\s<>()\'"]+', str(item))
+                    if m: return m.group(0)
             elif isinstance(j, dict):
-                for k in ("image", "image_url", "url", "src"):
+                for k in ("image","image_url","url","src"):
                     if k in j:
-                        m = _IMG_URL_RE.search(str(j[k]))
-                        if m:
-                            return m.group(0).rstrip('.,);]')
+                        m = re.search(r'https?://[^\s<>()\'"]+', str(j[k]))
+                        if m: return m.group(0)
     except Exception:
         pass
-
-    m = _IMG_URL_RE.search(s)
-    if m:
-        return m.group(0).rstrip('.,);]')
-
-    for sep in ("|", "\n", " "):
+    m = re.search(r'https?://[^\s<>()\'"]+', s)
+    if m: return m.group(0)
+    for sep in ("|","\n"," "):
         if sep in s:
             for part in s.split(sep):
-                m = _IMG_URL_RE.search(part)
-                if m:
-                    return m.group(0).rstrip('.,);]')
+                m = re.search(r'https?://[^\s<>()\'"]+', part)
+                if m: return m.group(0)
     return ""
 
-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 CSS/HTML
-# =============
-
-def card_css_in_iframe() -> str:
-    return """
-      :root{
-        --bg:#f6f7fb; --card:#ffffff; --ink:#111827; --muted:#f3eac0;
-        --line:#e5e7eb; --brand:#4f46e5; --chip:#1e2640; --accent:#2563eb;
-        --good:#16a34a;
-        --popover-bg: rgba(255,255,255,.92);
-        --popover-border1: rgba(99,102,241,.25);
-        --popover-border2: rgba(99,102,241,.05);
-        --shadow-strong: 0 18px 50px rgba(2,6,23,.18);
-      }
-
-      * {
-        box-sizing: border-box;
-      }
-
-      html, body {
-        height: 100%;
-        margin: 0;
-        padding: 0;
-        overflow-x: hidden;
-        background: var(--bg);
-        font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
-      }
-
-      .wrap {
-        width: 100%;
-        max-width: 100%;
-        margin: 0 auto;
-        padding: 6px 6px 10px;
-      }
-
-      .cards {
-        position: relative;
-        z-index: 0;
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        gap: 18px;
-        padding: 2px 2px 8px 2px;
-      }
-
-      .card {
-        background: var(--card);
-        border: 1px solid var(--line);
-        border-radius: 16px;
-        overflow: visible;
-        box-shadow: 0 4px 18px rgba(0,0,0,.05);
-        display: flex;
-        flex-direction: column;
-        position: relative;
-        cursor: pointer;
-        transition: transform .08s ease, box-shadow .2s ease;
-        z-index: 1;
-        will-change: transform;
-        height: 100%;
-      }
-
-      .card:hover {
-        box-shadow: 0 10px 28px rgba(2,6,23,.12);
-        transform: translateY(-1px);
-      }
-
-      .thumb {
-        background: #0b0b0b;
-        overflow: hidden;
-        border-top-left-radius: 16px;
-        border-top-right-radius: 16px;
-        /* keeps aspect ratio without clipping */
-        aspect-ratio: 16 / 9;
-      }
-
-      .thumb img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-      }
-
-      .body {
-        padding: 14px 14px 12px;
-        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;
-        line-height: 1.05;
-        margin-top: 2px;
-      }
-
-      .heading {
-        font-weight: 700;
-        color: var(--ink);
-        margin: 6px 0 2px;
-        line-height: 1.25;
-      }
-
-      .offer {
-        color: var(--ink);
-        font-size: 15px;
-        line-height: 1.45;
-        opacity: .88;
-        display: -webkit-box;
-        -webkit-line-clamp: 5;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-      }
-
-      .meta {
-        display: flex;
-        gap: 8px;
-        flex-wrap: wrap;
-        padding: 0 14px 12px;
-        margin-top: auto;
-      }
-
-      .chip {
-        font-size: 14px;
-        color: var(--muted);
-        background: var(--chip);
-        border: 1px solid var(--line);
-        padding: 4px 8px;
-        border-radius: 999px;
-      }
-    """
-
-def card_html(row: pd.Series) -> str:
-    img = first_image(row.get("images",""))
-    brand   = h(str(row.get("brand","")).strip())
-    dealer  = h(str(row.get("dealer","")).strip())
-    country = h(str(row.get("country","")).strip())
-    model   = h(str(row.get("model","")).strip())
-    trim    = h(str(row.get("trim_or_variant","")).strip())
-
-    price_raw  = str(row.get("starting_price","")).strip()
-    context_ok = bool(row.get("__price_context_ok", True))
-    price      = h(price_raw if context_ok else "")
-
-    heading = h(str(row.get("heading","")).strip() or f"{brand} {model}".strip())
-    offer_raw = str(row.get("offer_description","")).strip()
-    offer = h(offer_raw).replace("\n","<br>")
-
-    url_raw = row.get("vehicle_offer_url", "") or row.get("vehcileoffer_url", "")
-    url_str = (str(url_raw) if url_raw is not None else "").strip()
-    has_url = bool(url_str) and url_str.lower() != "nan"
-    url_js = url_str.replace("\\", "\\\\").replace("'", "\\'")
-
-    onclick_attr = (
-        f"onclick=\"window.open('{url_js}','_blank');event.stopPropagation();\""
-        if has_url else ""
+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
     )
-    aria_label = f'aria-label="Open offer: {heading}"' if has_url else ""
-
     return f"""
-      <div class="card" {onclick_attr} {aria_label}>
-        <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">
-          <div class="chip">{country}</div>
-          <div class="chip">{brand}</div>
-          <div class="chip">{dealer}</div>
-          {f"<div class='chip'>{model}</div>" if model else ""}
-          {f"<div class='chip'>{trim}</div>" if trim else ""}
-        </div>
+    <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>
     """
 
-# =================
-#  Load offers once
-# =================
-
-DF = load_data()
+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>
+    """
 
-# Precompute filter options (simple “All + unique values” like Streamlit)
+# ---------- Options helpers ----------
 def _opts_with_all(series: pd.Series):
     vals = [x for x in series.dropna().astype(str).unique() if str(x).strip()]
     return ["All"] + sorted(vals)
 
-COUNTRY_OPTS = _opts_with_all(DF["country"])
-DEALER_OPTS  = _opts_with_all(DF["dealer"])
-BRAND_OPTS   = _opts_with_all(DF["brand"])
-
-# ==========================
-#  Gradio callback function
-# ==========================
-
-def render_offers(country, dealer, brand, sort_choice, limit):
-    df_f = DF.copy()
+def _brand_and_dealer_options_for_country(country: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    return _opts_with_all(df_c["brand"]), _opts_with_all(df_c["dealer"])
 
-    if country != "All":
-        df_f = df_f[df_f["country"].astype(str) == country]
-    if dealer != "All":
-        df_f = df_f[df_f["dealer"].astype(str) == dealer]
-    if brand != "All":
-        df_f = df_f[df_f["brand"].astype(str) == brand]
+def _dealer_options_for_country_brand(country: str, brand: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    df_cb = df_c if brand == "All" else df_c[df_c["brand"].astype(str) == str(brand)]
+    return _opts_with_all(df_cb["dealer"])
 
-    if sort_choice != "Default":
-        tmp_price = df_f.apply(
-            lambda r: price_number(r["starting_price"])
-                      if r.get("__price_context_ok", True) else None,
-            axis=1
-        )
-        df_f = df_f.assign(__p=tmp_price)
-        df_f = df_f.sort_values(
-            "__p",
-            ascending=(sort_choice == "Price (Low → High)"),
-            na_position="last"
-        ).drop(columns="__p", errors="ignore")
+def _brand_options_for_country_dealer(country: str, dealer: str):
+    df_c = DF if country == "All" else DF[DF["country"].astype(str) == str(country)]
+    df_cd = df_c if dealer == "All" else df_c[df_c["dealer"].astype(str) == str(dealer)]
+    return _opts_with_all(df_cd["brand"])
 
+# ---------- Filtering ----------
+def filter_offers(country: str, brand: str, dealer: str, limit: int):
+    df_f = DF.copy()
+    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))
-    if df_show.empty:
-        return "<p style='font-family:sans-serif'>No rows match your filters.</p>"
+    return _grid_html(df_show)
+
+# ---------- Gradio event handlers ----------
+def init_on_load(country, brand, dealer, limit):
+    brand_opts, dealer_opts = _brand_and_dealer_options_for_country(country)
+    brand_val  = brand  if brand  in brand_opts  else "All"
+    dealer_val = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand_val, dealer_val, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
 
-    cards_html = "".join(card_html(r) for _, r in df_show.iterrows())
-    css_iframe = card_css_in_iframe()
+def on_country_change(country, brand, dealer, limit):
+    brand_opts, dealer_opts = _brand_and_dealer_options_for_country(country)
+    brand_val  = brand  if brand  in brand_opts  else "All"
+    dealer_val = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand_val, dealer_val, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
 
-    # If you had a JS tooltip/portal from Streamlit version,
-    # paste it here as a raw string:
-    js_portal = ""  # r"""<YOUR EXISTING JS HERE>"""
+def on_brand_change(country, brand, dealer, limit):
+    # Country + Brand -> restrict Dealer
+    dealer_opts = _dealer_options_for_country_brand(country, brand)
+    dealer_val  = dealer if dealer in dealer_opts else "All"
+    html = filter_offers(country, brand, dealer_val, limit)
+    return (
+        gr.update(choices=dealer_opts, value=dealer_val),
+        html
+    )
 
-    rows = max(1, math.ceil(len(df_show) / 3))
-    base_h = 780
-    per_row = 340
-    est_height = max(base_h, min(2200, base_h + per_row * (rows - 1)))
+def on_dealer_change(country, brand, dealer, limit):
+    # Country + Dealer -> restrict Brand  (fix for your Saudi/Altawkilat => only GMC)
+    brand_opts = _brand_options_for_country_dealer(country, dealer)
+    brand_val  = brand if brand in brand_opts else "All"
+    html = filter_offers(country, brand_val, dealer, limit)
+    return (
+        gr.update(choices=brand_opts, value=brand_val),
+        html
+    )
 
-    full_html = f"""
-    <html>
-      <head>
-        <meta charset="utf-8" />
-        <style>{css_iframe}</style>
-      </head>
-      <body style="margin:0;padding:0;">
-        <div class="wrap" style="min-height:{est_height}px;">
-          <div class="cards">{cards_html}</div>
-        </div>
-        <script>{js_portal}</script>
-      </body>
-    </html>
-    """
-    return full_html
+def on_limit_change(country, brand, dealer, limit):
+    return filter_offers(country, brand, dealer, limit)
 
-# ==============
-#  Build Gradio UI
-# ==============
+# ---------- Build Gradio UI ----------
+def app():
+    countries = _opts_with_all(DF["country"])
+    brands, dealers = _brand_and_dealer_options_for_country("All")
 
+    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; }
+    """
 
-with gr.Blocks() as demo:
-    gr.Markdown(
-        """
-        # Vehicle Offers
+    with gr.Blocks(title="Vehicle Offers", css=custom_css) as demo:
+        gr.Markdown("## 🚗 Vehicle Offers")
 
-        Use the filters at the top to narrow down offers by Country, Dealer, and Brand.
-        """
-    )
-
-    # All controls stacked at the top, in rows
-    with gr.Column():
-        # First row: main filters
         with gr.Row():
-            country_dd = gr.Dropdown(
-                label="Country",
-                choices=COUNTRY_OPTS,
-                value="All",
-                scale=1
-            )
-            dealer_dd = gr.Dropdown(
-                label="Dealer",
-                choices=DEALER_OPTS,
-                value="All",
-                scale=1
-            )
-            brand_dd = gr.Dropdown(
-                label="Brand",
-                choices=BRAND_OPTS,
-                value="All",
-                scale=1
-            )
+            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")
+
+        # Initialize on load
+        demo.load(
+            init_on_load,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, dd_dealer, out_html]
+        )
 
-        # Second row: sort + limit + button
-        with gr.Row():
-            sort_dd = gr.Dropdown(
-                label="Sort by",
-                choices=["Default", "Price (Low → High)", "Price (High → Low)"],
-                value="Default",
-                scale=1
-            )
-            limit_slider = gr.Slider(
-                label="Max cards to show",
-                minimum=6, maximum=200, value=50, step=6,
-                scale=2
-            )
-            apply_btn = gr.Button("Apply filters", scale=0)
+        # Country -> update Brand + Dealer options + grid
+        dd_country.change(
+            on_country_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, dd_dealer, out_html]
+        )
 
-        # Offers grid underneath filters
-        offers_html = gr.HTML()
+        # Brand -> update Dealer options + grid
+        dd_brand.change(
+            on_brand_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_dealer, out_html]
+        )
 
-    # Run once on page load with default values
-    demo.load(
-        fn=render_offers,
-        inputs=[country_dd, dealer_dd, brand_dd, sort_dd, limit_slider],
-        outputs=offers_html,
-    )
+        # Dealer -> update Brand options + grid  (new)
+        dd_dealer.change(
+            on_dealer_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            [dd_brand, out_html]
+        )
 
-    # Re-run when user clicks "Apply filters"
-    apply_btn.click(
-        fn=render_offers,
-        inputs=[country_dd, dealer_dd, brand_dd, sort_dd, limit_slider],
-        outputs=offers_html,
-    )
+        # Limit -> update grid
+        s_limit.change(
+            on_limit_change,
+            [dd_country, dd_brand, dd_dealer, s_limit],
+            out_html
+        )
 
-if __name__ == "__main__":
-    demo.launch()
+    return demo
 
 if __name__ == "__main__":
-    demo.launch()
+    app().launch()