VehiclesOffers_Test

Sleeping

App Files Files Community

ravim254 commited on Nov 6, 2025

Commit

72e1bde

verified ·

1 Parent(s): aba6e0e

Upload app.py

Browse files

Files changed (1) hide show

app.py +315 -127

app.py CHANGED Viewed

@@ -1,14 +1,13 @@
-# app.py
 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",
@@ -21,7 +20,6 @@ def _first_image(val) -> str:
     if not val:
         return ""
     s = str(val).strip().replace("&amp;", "&")
-    # try json list/dict
     try:
         if s[:1] in "[{" or (s[:1] == '"' and s[-1:] == '"'):
             j = json.loads(s)
@@ -36,10 +34,8 @@ def _first_image(val) -> str:
                         if m: return m.group(0)
     except Exception:
         pass
-    # plain string
     m = re.search(r'https?://[^\s<>()\'"]+', s)
     if m: return m.group(0)
-    # splitters
     for sep in ("|","\n"," "):
         if sep in s:
             for part in s.split(sep):
@@ -61,11 +57,29 @@ def _card_html(row: pd.Series) -> str:
     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>
@@ -73,163 +87,337 @@ def _card_html(row: pd.Series) -> str:
         <div class="offer">{offer}</div>
       </div>
       <div class="meta">{chips}</div>
     </div>
     """
 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>
     """
-# ---------- Helpers for cascading options ----------
-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)
-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"])
-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"])
-# ---------- Filtering logic ----------
-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))
-    return _grid_html(df_show)
-# --- Gradio event handlers for cascading behavior ---
-def init_on_load(country, brand, dealer, limit):
-    # On first render, set brand/dealer choices according to country
-    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
-    )
-def on_country_change(country, brand, dealer, limit):
-    # Update brand & dealer choices to match selected country
-    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
-    )
-def on_brand_change(country, brand, dealer, limit):
-    # Update dealer choices to match (country, brand)
-    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
     )
-def on_dealer_change(country, brand, dealer, limit):
-    return filter_offers(country, brand, dealer, limit)
-def on_limit_change(country, brand, dealer, limit):
-    return filter_offers(country, brand, dealer, limit)
-# ---------- Build Gradio UI ----------
 def app():
-    countries = _opts_with_all(DF["country"])
-    # initial (All) options for brand/dealer
-    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(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")
-        # Initialize choices + grid on page load
-        demo.load(
-            init_on_load,
-            [dd_country, dd_brand, dd_dealer, s_limit],
-            [dd_brand, dd_dealer, out_html]
-        )
-        # Country -> update Brand + Dealer choices + grid
         dd_country.change(
             on_country_change,
-            [dd_country, dd_brand, dd_dealer, s_limit],
-            [dd_brand, dd_dealer, out_html]
         )
-        # Brand -> update Dealer choices + grid
         dd_brand.change(
             on_brand_change,
-            [dd_country, dd_brand, dd_dealer, s_limit],
             [dd_dealer, out_html]
         )
-        # Dealer -> update grid
-        dd_dealer.change(
-            on_dealer_change,
-            [dd_country, dd_brand, dd_dealer, s_limit],
-            out_html
-        )
-        # Limit -> update grid
         s_limit.change(
             on_limit_change,
-            [dd_country, dd_brand, dd_dealer, s_limit],
             out_html
         )

+# app.py  — Gradio version that matches Streamlit behavior + tooltips + smart filters
 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]
 for col in [
     "country","dealer","brand","model","trim_or_variant",
     "starting_price","heading","offer_description",
     if not val:
         return ""
     s = str(val).strip().replace("&amp;", "&")
     try:
         if s[:1] in "[{" or (s[:1] == '"' and s[-1:] == '"'):
             j = json.loads(s)
                         if m: return m.group(0)
     except Exception:
         pass
     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):
     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
     )
+    # Tooltip template stored hidden; JS moves it into the portal
+    tooltip = f"""
+      <div class="card-tooltip-template" aria-hidden="true" style="display:none">
+        <div class="tt-head">
+          <span class="tt-dot"></span>
+          <div class="tt-title">{heading}</div>
+        </div>
+        <div class="tt-meta">
+          {"".join(f"<span class='tt-chip'>{x}</span>" for x in [country, brand, dealer, model, trim] if x)}
+        </div>
+        <div class="tt-grid">
+          <div class="tt-k">Starting Price</div><div class="tt-v">{price or "—"}</div>
+          <div class="tt-k">Details</div><div class="tt-v">{offer or "—"}</div>
+        </div>
+        {"<a class='tt-link' href='"+esc(url)+"' target='_blank' rel='noopener'>Open offer page ↗</a>" if url and url != "#" else ""}
+      </div>
+    """
     return f"""
+    <div class="card" onclick="window.open('{url}','_blank')" tabindex="0">
       <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="offer">{offer}</div>
       </div>
       <div class="meta">{chips}</div>
+      {tooltip}
     </div>
     """
 def _grid_html(df: pd.DataFrame) -> str:
     cards = "\n".join(_card_html(r) for _, r in df.iterrows())
     return f"""
+    <div id="cards-root">
+      <div id="tt-portal" aria-live="polite"></div>
       <div class="cards">{cards}</div>
+    </div>
     """
+# ---------------- Filtering helpers ----------------
+ALL = "All"
+def _choices(series: pd.Series):
     vals = [x for x in series.dropna().astype(str).unique() if str(x).strip()]
+    return [ALL] + sorted(vals)
+def _filtered_df(country: str, dealer: str, brand: str) -> pd.DataFrame:
+    df = DF.copy()
+    if country and country != ALL:
+        df = df[df["country"].astype(str) == country]
+    if dealer and dealer != ALL:
+        df = df[df["dealer"].astype(str) == dealer]
+    if brand and brand != ALL:
+        df = df[df["brand"].astype(str) == brand]
+    return df
+# ---------------- HTML shell (CSS + JS + content slot) ----------------
+SHELL_CSS = """
+/* Unify font everywhere */
+body, .gradio-container, .gradio-container * {
+  font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
+}
+/* Single scroll region */
+#cards-pane { height: 820px; overflow: auto; border-radius: 12px; }
+/* Page background and card styling */
+:root{ --bg:#f6f7fb; --card:#ffffff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb; --chip:#eef2f7; --accent:#2563eb; }
+#cards-root{ background: var(--bg); padding: 8px; }
+.cards{
+  display:grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4 per row on wide screens */
+  gap:18px;
+}
+@media (max-width: 1300px){ .cards{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
+@media (max-width: 1000px){ .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
+@media (max-width: 640px){  .cards{ grid-template-columns: 1fr; } }
+.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;
+  display:flex; flex-direction:column; 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; flex:1 1 auto; }
+.sp{ font-size:13px; color:var(--muted); }
+.sp strong{ display:block; font-size:20px; color:#e5b000; 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; margin-top:auto; }
+.chip{ font-size:11px; color:#374151; background:var(--chip); border-radius:999px; padding:4px 8px; }
+/* Tooltip portal (fixed within cards-root container) */
+#tt-portal{
+  position: fixed; top: 0; left: 0; z-index: 2147483647; display: none;
+  width: min(520px, 86vw); max-height: 72vh;
+  overflow-x: hidden; overflow-y: auto;
+  white-space: normal; overflow-wrap: anywhere; word-break: break-word;
+  background: rgba(255,255,255,.92);
+  -webkit-backdrop-filter: saturate(1.4) blur(8px);
+  backdrop-filter: saturate(1.4) blur(8px);
+  border: 1px solid transparent; border-radius: 14px; box-shadow: 0 18px 50px rgba(2,6,23,.18);
+  padding: 14px 16px; color: #0f172a; font-size: 13px; line-height: 1.5;
+  background-clip: padding-box, border-box;
+  background-image:
+    linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
+    linear-gradient(135deg, rgba(99,102,241,.25), rgba(99,102,241,.05));
+}
+#tt-portal.show { display:block; animation: tt-fade .16s ease-out; }
+@keyframes tt-fade { from { opacity:0; transform: translateY(-2px); } to { opacity:1; transform: translateY(0); } }
+#tt-portal::after{
+  content:""; position:absolute; top:16px; width:12px; height:12px; transform: rotate(45deg);
+  background: rgba(255,255,255,.92);
+  border-left: 1px solid rgba(99,102,241,.18); border-top: 1px solid rgba(99,102,241,.18);
+}
+#tt-portal.right::after{ left:-8px; }
+#tt-portal.left::after{ right:-8px; left:auto; border-left:none; border-top:none;
+  border-right:1px solid rgba(99,102,241,.18); border-bottom:1px solid rgba(99,102,241,.18); }
+/* Tooltip inner content */
+.tt-head{ display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; }
+.tt-dot{ width:10px; height:10px; border-radius:999px; margin-top:4px;
+  background: radial-gradient(circle at 30% 30%, #a78bfa, #6366f1); box-shadow: 0 0 0 3px rgba(99,102,241,.12); flex:0 0 auto; }
+.tt-title{ font-weight:800; font-size:15px; color:#0b1220; line-height:1.25; }
+.tt-meta{ display:flex; gap:6px; flex-wrap:wrap; margin:2px 0 8px; }
+.tt-chip{ font-size:11px; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; padding:4px 8px; border-radius:10px; }
+.tt-grid{
+  display:grid; grid-template-columns: 120px minmax(0,1fr); gap:8px 12px;
+  background: linear-gradient(180deg, rgba(99,102,241,.06), rgba(99,102,241,0) 45%);
+  border:1px dashed rgba(99,102,241,.15); border-radius:10px; padding:10px 12px; margin:8px 0;
+}
+.tt-k{ color:#334155; font-weight:600; font-size:12px; }
+.tt-v{ color:#0f172a; font-size:13px; }
+.tt-link{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:var(--accent); text-decoration:none; font-weight:600; }
+.tt-link:hover{ text-decoration:underline; }
+/* Avoid horizontal scroll in tooltip */
+#tt-portal, #tt-portal *{ box-sizing: border-box; }
+#tt-portal img, #tt-portal svg, #tt-portal video{ max-width:100%; height:auto; display:block; }
+"""
+SHELL_JS = """
+(function(){
+  // Tooltip portal logic (hover on desktop; click/tap toggles on mobile)
+  const root = document.getElementById('cards-root');
+  if(!root) return;
+  let portal = document.getElementById('tt-portal');
+  if(!portal){ portal = document.createElement('div'); portal.id = 'tt-portal'; root.prepend(portal); }
+  let activeCard = null, overPortal = false, hideTimer = null;
+  function clamp(n,min,max){ return Math.max(min, Math.min(max, n)); }
+  function placePortal(anchor, side){
+    const a = anchor.getBoundingClientRect();
+    const p = portal.getBoundingClientRect();
+    const vw = window.innerWidth, vh = window.innerHeight;
+    const gap = 14;
+    let left = a.right + gap;
+    portal.classList.remove('left','right');
+    if (side === 'left' || left + p.width > vw - 6){
+      left = Math.max(6, a.left - gap - p.width);
+      portal.classList.add('left');
+    } else {
+      left = Math.min(left, vw - 6 - p.width);
+      portal.classList.add('right');
+    }
+    const topDesired = a.top + 10;
+    const top = clamp(topDesired, 6, vh - p.height - 6);
+    portal.style.left = left + 'px';
+    portal.style.top  = top  + 'px';
+  }
+  function showFor(card, prefer='right'){
+    const tpl = card.querySelector('.card-tooltip-template');
+    if(!tpl) return;
+    clearTimeout(hideTimer);
+    activeCard = card;
+    portal.innerHTML = tpl.innerHTML;
+    portal.classList.add('show');
+    requestAnimationFrame(()=>{
+      placePortal(card, prefer);
+      const pr = portal.getBoundingClientRect();
+      if (pr.right > window.innerWidth - 2){ placePortal(card,'left'); }
+    });
+    card.classList.add('active');
+  }
+  function hideSoon(){
+    clearTimeout(hideTimer);
+    hideTimer = setTimeout(()=>{
+      const stillOnCard = activeCard && activeCard.matches(':hover');
+      if(!overPortal && !stillOnCard){ hideNow(); }
+    }, 120);
+  }
+  function hideNow(){
+    portal.classList.remove('show');
+    if(activeCard){ activeCard.classList.remove('active'); activeCard = null; }
+  }
+  function bindCard(card){
+    // Desktop hover
+    card.addEventListener('mouseenter', ()=>showFor(card));
+    card.addEventListener('mouseleave', hideSoon);
+    // Focus (keyboard)
+    card.addEventListener('focusin', ()=>showFor(card));
+    card.addEventListener('focusout', hideSoon);
+    // Mobile / click toggle
+    card.addEventListener('click', (e)=>{
+      // If already showing for this card, close
+      if(activeCard === card){ hideNow(); e.stopPropagation(); return; }
+      showFor(card);
+      e.stopPropagation();
+    });
+  }
+  // Bind all cards
+  root.querySelectorAll('.card').forEach(bindCard);
+  // Keep positioned
+  function maybeReposition(){
+    if(!portal.classList.contains('show') || !activeCard) return;
+    const side = portal.classList.contains('left') ? 'left' : 'right';
+    placePortal(activeCard, side);
+  }
+  window.addEventListener('scroll', maybeReposition, {passive:true});
+  window.addEventListener('resize', maybeReposition, {passive:true});
+  // Keep open when hovered
+  portal.addEventListener('mouseenter', ()=>{ overPortal = true; clearTimeout(hideTimer); });
+  portal.addEventListener('mouseleave', ()=>{ overPortal = false; hideSoon(); });
+  // Clicking anywhere else closes
+  document.addEventListener('click', (e)=>{
+    if(!portal.contains(e.target)){
+      hideNow();
+    }
+  });
+})();
+"""
+def _page_html(df_slice: pd.DataFrame) -> str:
+    return f"""
+    <html>
+      <head>
+        <meta charset="utf-8" />
+        <style>{SHELL_CSS}</style>
+      </head>
+      <body>
+        {_grid_html(df_slice)}
+        <script>{SHELL_JS}</script>
+      </body>
+    </html>
+    """
+# ---------------- Rendered content ----------------
+def render_cards(country: str, dealer: str, brand: str, limit: int):
+    df = _filtered_df(country, dealer, brand).head(int(limit))
+    return _page_html(df)
+# ---------------- Cascading updates ----------------
+def on_country_change(country, dealer, brand, limit):
+    # When country changes → reset dealer & brand to All
+    df_c = _filtered_df(country, ALL, ALL)
+    dealer_choices = _choices(df_c["dealer"])
+    brand_choices  = _choices(df_c["brand"])
+    dealer_val = ALL
+    brand_val  = ALL
+    html = render_cards(country, dealer_val, brand_val, limit)
     return (
+        gr.update(choices=dealer_choices, value=dealer_val),
+        gr.update(choices=brand_choices,  value=brand_val),
         html
     )
+def on_dealer_change(country, dealer, brand, limit):
+    # When dealer changes → narrow brands within country+dealer
+    df_cd = _filtered_df(country, dealer, ALL)
+    brand_choices = _choices(df_cd["brand"])
+    # If current brand not valid under new dealer, reset to All
+    brand_val = brand if (brand in brand_choices) else ALL
+    html = render_cards(country, dealer, brand_val, limit)
+    return gr.update(choices=brand_choices, value=brand_val), html
+def on_brand_change(country, dealer, brand, limit):
+    # Bidirectional: if brand chosen → narrow dealers within country+brand
+    df_cb = _filtered_df(country, ALL, brand)
+    dealer_choices = _choices(df_cb["dealer"])
+    dealer_val = dealer if (dealer in dealer_choices) else ALL
+    html = render_cards(country, dealer_val, brand, limit)
+    return gr.update(choices=dealer_choices, value=dealer_val), html
+def on_limit_change(country, dealer, brand, limit):
+    return render_cards(country, dealer, brand, limit)
+# ---------------- Build Gradio UI ----------------
 def app():
+    countries = _choices(DF["country"])
+    # default All for others; will be updated by country change
+    dealers   = _choices(DF["dealer"])
+    brands    = _choices(DF["brand"])
+    with gr.Blocks(title="Vehicle Offers", css="""
+        /* keep page itself from scrolling too much; use cards-pane */
+        .gradio-container { max-width: 1400px; margin: 0 auto; }
+    """) as demo:
         gr.Markdown("## 🚗 Vehicle Offers")
         with gr.Row():
+            dd_country = gr.Dropdown(choices=countries, value=ALL, label="Country")
+            dd_dealer  = gr.Dropdown(choices=dealers,   value=ALL, label="Dealer")
+            dd_brand   = gr.Dropdown(choices=brands,    value=ALL, label="Brand")
             s_limit    = gr.Slider(6, 200, value=50, step=6, label="Max Offers")
         out_html = gr.HTML(elem_id="cards-pane")
+        # Initial render
+        demo.load(render_cards, [dd_country, dd_dealer, dd_brand, s_limit], out_html)
+        # Country change → reset dealer & brand, refresh HTML
         dd_country.change(
             on_country_change,
+            [dd_country, dd_dealer, dd_brand, s_limit],
+            [dd_dealer,  dd_brand,  out_html]
         )
+        # Dealer change → update brand list (country+dealer), refresh HTML
+        dd_dealer.change(
+            on_dealer_change,
+            [dd_country, dd_dealer, dd_brand, s_limit],
+            [dd_brand, out_html]
+        )
+        # Brand change → update dealer list (country+brand), refresh HTML
         dd_brand.change(
             on_brand_change,
+            [dd_country, dd_dealer, dd_brand, s_limit],
             [dd_dealer, out_html]
         )
+        # Limit change → refresh HTML only
         s_limit.change(
             on_limit_change,
+            [dd_country, dd_dealer, dd_brand, s_limit],
             out_html
         )