Upload app.py

app.py

@@ -8,7 +8,6 @@ ALL = "All"
 DEFAULT_LIMIT = 50  # fallback when slider momentarily returns None
 
 def _norm_limit(limit):
-    """Ensure we always have a valid int for limit (guards None/invalid)."""
     try:
         return int(limit) if limit is not None else DEFAULT_LIMIT
     except Exception:
@@ -108,28 +107,18 @@ def _filtered_df(country: str, dealer: str, brand: str) -> pd.DataFrame:
     if brand   and brand   != ALL: df = df[df["brand"].astype(str)   == brand]
     return df
 
-# ---------------- CSS (injected once as a separate HTML) ----------------
+# ---------------- CSS (injected once) ----------------
 GLOBAL_STYLE = """
 <style>
-/* Unify font */
-body, .gradio-container, .gradio-container * {
-  font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
-}
-/* Single scroll region */
+body, .gradio-container, .gradio-container * { font-family: Inter, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important; }
 #cards-pane { height: 820px; overflow: auto; border-radius: 12px; }
-/* 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)); 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{ 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; }
@@ -137,138 +126,62 @@ body, .gradio-container, .gradio-container * {
 .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; }
+.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 */
-#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;
-  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{ position: fixed; top: 0; left: 0; z-index: 2147483647; display: none; 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); 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::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); }
-
+#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); }
 .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-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-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:#2563eb; text-decoration:none; font-weight:600; }
 .tt-link:hover{ text-decoration:underline; }
-
 #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>
 """
 
-# ---------------- JS to bind tooltips (executed via js= on every update) ----------------
+# ---------------- JS to bind tooltips ----------------
 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);
-  }
-
+  if (!portal) { portal = document.createElement('div'); portal.id = 'tt-portal'; root.prepend(portal); }
   let activeCard = null, overPortal = false, hideTimer = null;
   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 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);
+    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'); }
-    });
+    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; }
-  }
-
-  // (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();
-    };
-  });
-
-  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});
-
-  portal.onmouseenter = ()=>{ overPortal = true; clearTimeout(hideTimer); };
-  portal.onmouseleave = ()=>{ overPortal = false; hideSoon(); };
+  function hideSoon(){ clearTimeout(hideTimer); hideTimer = setTimeout(()=>{ const still = activeCard && activeCard.matches(':hover'); if(!overPortal && !still){ hideNow(); } }, 120); }
+  function hideNow(){ portal.classList.remove('show'); if(activeCard){ activeCard.classList.remove('active'); activeCard = null; } }
+  root.querySelectorAll('.card').forEach(card=>{ card.onmouseenter = ()=>showFor(card); card.onmouseleave = hideSoon; card.onfocusin = ()=>showFor(card); card.onfocusout = hideSoon; });
+  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});
+  portal.onmouseenter = ()=>{ overPortal = true; clearTimeout(hideTimer); }; portal.onmouseleave = ()=>{ overPortal = false; hideSoon(); };
   document.addEventListener('click', (e)=>{ if(!portal.contains(e.target)) hideNow(); }, {once:true});
-
-  // Done
   return null;
 }
 """
@@ -315,7 +228,7 @@ def app():
 
     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
+        gr.HTML(GLOBAL_STYLE)
 
         with gr.Row():
             dd_country = gr.Dropdown(choices=countries, value=ALL, label="Country")
@@ -323,10 +236,13 @@ def app():
             dd_brand   = gr.Dropdown(choices=brands,    value=ALL, label="Brand")
             s_limit    = gr.Slider(6, 200, value=DEFAULT_LIMIT, step=6, label="Max Offers")
 
+        # State used ONLY for initial load to avoid None from slider
+        limit_state = gr.State(DEFAULT_LIMIT)
+
         out_html = gr.HTML(elem_id="cards-pane")
 
-        # Initial render + bind tooltips via JS
-        demo.load(render_cards, [dd_country, dd_dealer, dd_brand, s_limit], out_html, js=TOOLTIP_BIND_JS)
+        # Initial render uses limit_state (not the Slider) -> prevents None crash
+        demo.load(render_cards, [dd_country, dd_dealer, dd_brand, limit_state], out_html, js=TOOLTIP_BIND_JS)
 
         # Country change → reset dealer & brand + rebind JS
         dd_country.change(on_country_change,