Upload app.py

app.py

@@ -1,13 +1,14 @@
-# app.py  — Gradio version that matches Streamlit behavior + tooltips + smart filters
+# app.py — Gradio + tooltips (executed via js=), smart cascading filters, aligned cards
 import pandas as pd
 import gradio as gr
 from html import escape as esc
 import re, json
 
+ALL = "All"
+
 # ---------------- 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",
@@ -17,8 +18,7 @@ for col in [
         DF[col] = ""
 
 def _first_image(val) -> str:
-    if not val:
-        return ""
+    if not val: return ""
     s = str(val).strip().replace("&", "&")
     try:
         if s[:1] in "[{" or (s[:1] == '"' and s[-1:] == '"'):
@@ -50,34 +50,22 @@ def _card_html(row: pd.Series) -> str:
     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","")))
+    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
-    )
-
-    # Tooltip template stored hidden; JS moves it into the portal
+    chips = " ".join(f"<span class='chip'>{v}</span>" for v in [country, brand, dealer, model, trim] if v)
     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-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 ""}
+        {"<a class='tt-link' href='"+esc(url)+"' target='_blank' rel='noopener'>Open offer ↗</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>
@@ -101,48 +89,38 @@ def _grid_html(df: pd.DataFrame) -> str:
     """
 
 # ---------------- 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]
+    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 */
+# ---------------- CSS (injected once as a separate HTML) ----------------
+GLOBAL_STYLE = """
+<style>
+/* Unify font */
 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 */
+/* Colors + layout */
 :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; } }
+.cards{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); 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;
+  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; }
@@ -156,24 +134,17 @@ body, .gradio-container, .gradio-container * {
 .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) */
+/* Tooltip portal */
 #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;
-
+  width: min(520px, 86vw); max-height: 72vh; overflow-x: hidden; overflow-y: auto;
   background: rgba(255,255,255,.92);
-  -webkit-backdrop-filter: saturate(1.4) blur(8px);
-  backdrop-filter: saturate(1.4) blur(8px);
-
+  -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));
+  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); } }
@@ -186,60 +157,57 @@ body, .gradio-container, .gradio-container * {
 #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;
+.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;
-}
+  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{ display:inline-flex; align-items:center; gap:6px; margin-top:8px; color:#2563eb; 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; }
+</style>
 """
 
-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); }
+# ---------------- JS to bind tooltips (executed via js= on every update) ----------------
+TOOLTIP_BIND_JS = r"""
+() => {
+  const root = document.querySelector('#cards-pane #cards-root') || document.querySelector('#cards-root');
+  if (!root) return;
+
+  // Prepare portal
+  let portal = root.querySelector('#tt-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)); }
+  const clamp = (n,min,max)=> 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;
+    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');
+      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');
+      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';
+    portal.style.left = left + 'px'; portal.style.top = top + 'px';
   }
 
   function showFor(card, prefer='right'){
@@ -256,7 +224,6 @@ SHELL_JS = """
     });
     card.classList.add('active');
   }
-
   function hideSoon(){
     clearTimeout(hideTimer);
     hideTimer = setTimeout(()=>{
@@ -264,32 +231,23 @@ SHELL_JS = """
       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
+  // (Re)bind all cards each time this JS runs
+  root.querySelectorAll('.card').forEach(card=>{
+    card.onmouseenter = ()=>showFor(card);
+    card.onmouseleave = hideSoon;
+    card.onfocusin    = ()=>showFor(card);
+    card.onfocusout   = hideSoon;
+    card.onclick = (e)=>{
       if(activeCard === card){ hideNow(); e.stopPropagation(); return; }
-      showFor(card);
-      e.stopPropagation();
-    });
-  }
-
-  // Bind all cards
-  root.querySelectorAll('.card').forEach(bindCard);
+      showFor(card); e.stopPropagation();
+    };
+  });
 
-  // Keep positioned
   function maybeReposition(){
     if(!portal.classList.contains('show') || !activeCard) return;
     const side = portal.classList.contains('left') ? 'left' : 'right';
@@ -298,71 +256,38 @@ SHELL_JS = """
   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(); });
+  portal.onmouseenter = ()=>{ overPortal = true; clearTimeout(hideTimer); };
+  portal.onmouseleave = ()=>{ overPortal = false; hideSoon(); };
+  document.addEventListener('click', (e)=>{ if(!portal.contains(e.target)) hideNow(); }, {once:true});
 
-  // Clicking anywhere else closes
-  document.addEventListener('click', (e)=>{
-    if(!portal.contains(e.target)){
-      hideNow();
-    }
-  });
-})();
+  // Done
+  return null;
+}
 """
 
-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 ----------------
+# ---------------- Render functions ----------------
 def render_cards(country: str, dealer: str, brand: str, limit: int):
     df = _filtered_df(country, dealer, brand).head(int(limit))
-    return _page_html(df)
+    return _grid_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
+    dealer_choices = _choices(df_c["dealer"]); brand_choices = _choices(df_c["brand"])
+    dealer_val = 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
-    )
+    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
-
+    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
-
+    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
 
@@ -372,15 +297,12 @@ def on_limit_change(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:
+    with gr.Blocks(title="Vehicle Offers", css=".gradio-container{max-width:1400px;margin:0 auto;}") as demo:
         gr.Markdown("## 🚗 Vehicle Offers")
+        gr.HTML(GLOBAL_STYLE)  # inject styles once
 
         with gr.Row():
             dd_country = gr.Dropdown(choices=countries, value=ALL, label="Country")
@@ -390,36 +312,32 @@ def app():
 
         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
-        )
+        # Initial render + bind tooltips via JS
+        demo.load(render_cards, [dd_country, dd_dealer, dd_brand, s_limit], out_html, js=TOOLTIP_BIND_JS)
+
+        # Country change → reset dealer & brand + rebind JS
+        dd_country.change(on_country_change,
+                          [dd_country, dd_dealer, dd_brand, s_limit],
+                          [dd_dealer, dd_brand, out_html],
+                          js=TOOLTIP_BIND_JS)
+
+        # Dealer change → update brand + rebind JS
+        dd_dealer.change(on_dealer_change,
+                         [dd_country, dd_dealer, dd_brand, s_limit],
+                         [dd_brand, out_html],
+                         js=TOOLTIP_BIND_JS)
+
+        # Brand change → update dealer + rebind JS
+        dd_brand.change(on_brand_change,
+                        [dd_country, dd_dealer, dd_brand, s_limit],
+                        [dd_dealer, out_html],
+                        js=TOOLTIP_BIND_JS)
+
+        # Limit change → just re-render + rebind JS
+        s_limit.change(on_limit_change,
+                       [dd_country, dd_dealer, dd_brand, s_limit],
+                       out_html,
+                       js=TOOLTIP_BIND_JS)
 
     return demo