Update app.py

app.py

@@ -1,202 +1,317 @@
 """
-Amazon Trailer Inspector
-HuggingFace Spaces + Gradio 5.x pipeline
-Gemma-3 (primary) → Llama-3.2-Vision → Qwen2.5-VL (fallbacks)
+Amazon Trailer Inspector — app.py
+HuggingFace Spaces · Gradio 5.x · Free vision LLMs
+
+FIXES over previous version:
+  - Uses requests directly (avoids huggingface_hub API version breakage)
+  - Correct chat-completions endpoint format for HF Serverless Inference
+  - Updated model list to currently-working free vision models
+  - Removed blocking whoami() startup check
+  - Robust JSON extraction with multi-pass recovery
+  - Detailed per-model error logging to Space logs
 """
 
 import gradio as gr
 import base64
 import concurrent.futures
 import json
-import re
 import os
-from PIL import Image
+import re
 import io
-from huggingface_hub import InferenceClient, HfApi
 
-# ──────────────────────────────────────────────────────────────
-# Model chain  (tried in order, first success wins)
-# ──────────────────────────────────────────────────────────────
+import requests
+from PIL import Image
+
+# ──────────────────────────────────────────────────────────────────────────────
+# MODELS  — ordered by reliability on HF free tier (most reliable first)
+# ──────────────────────────────────────────────────────────────────────────────
 MODELS = [
-    "meta-llama/Llama-3.2-11B-Vision-Instruct",  # Most reliable free vision model
-    "Qwen/Qwen2.5-VL-7B-Instruct",               # Fallback 1
-    "google/gemma-3-4b-it",                       # Fallback 2
+    "meta-llama/Llama-3.2-11B-Vision-Instruct",   # Best free vision model on HF
+    "Qwen/Qwen2.5-VL-7B-Instruct",                # Good fallback
+    "google/gemma-3-4b-it",                        # Smaller, faster fallback
 ]
 
-DETECTION_PROMPT = """You are a precise visual inspector for Amazon trailer fleets.
-Carefully examine the trailer image and locate these 4 components:
+# HF Serverless Inference — chat completions endpoint
+HF_CHAT_URL = "https://api-inference.huggingface.co/models/{model}/v1/chat/completions"
 
-1. SENSORS    — Two silver/beige DIAMOND (rhombus) shaped metal plates near the rear bottom of the trailer back doors.
-2. GPS_DEVICE — A small white or light-gray rectangular electronic box at the upper corner of the trailer rear face.
-3. PRIME_LOGO — The Amazon Prime logo: blue swooping arrow/checkmark. Can be full or partial, on rear or side.
-4. TRAILER_ID — A vertical fluorescent green or yellow-green ID label strip on the corner post (shows a number like SV2602705).
-
-Reply ONLY with valid JSON — no extra text, no markdown fences:
+# ──────────────────────────────────────────────────────────────────────────────
+# DETECTION PROMPT
+# ──────────────────────────────────────────────────────────────────────────────
+DETECTION_PROMPT = """You are a precise visual inspector for Amazon trailer fleets.
+Carefully examine the full trailer image and locate these 4 components:
+
+1. SENSORS    — Exactly TWO silver/beige DIAMOND (rhombus/rotated-square) shaped metal plates.
+                They are mounted near the lower-rear area on the back doors of the trailer.
+2. GPS_DEVICE — A small white or light-gray rectangular electronic box mounted at the upper
+                corner of the trailer rear face. About the size of a paperback book.
+3. PRIME_LOGO — The Amazon Prime branding: the word "prime" OR the Amazon arrow/smile logo
+                OR both. Can be full or partially visible, on rear or side of trailer.
+4. TRAILER_ID — A vertical fluorescent-green or yellow-green label strip on the corner post/pillar,
+                showing an alphanumeric code like "SV2602705".
+
+IMPORTANT: Reply ONLY with valid JSON — absolutely no extra text before or after, no markdown fences:
 {
   "sensors":    {"found": true,  "confidence": "high",   "notes": "two diamond plates visible lower-left"},
-  "gps_device": {"found": false, "confidence": "medium", "notes": "top corner obscured"},
-  "prime_logo": {"found": true,  "confidence": "high",   "notes": "partial prime swoosh on rear panel"},
-  "trailer_id": {"found": true,  "confidence": "high",   "notes": "SV2602705 label on right corner post"}
+  "gps_device": {"found": false, "confidence": "medium", "notes": "top corner not visible in this angle"},
+  "prime_logo": {"found": true,  "confidence": "high",   "notes": "prime word visible on rear panel"},
+  "trailer_id": {"found": true,  "confidence": "high",   "notes": "SV2602705 on right corner post"}
 }"""
 
 KEYS = ["sensors", "gps_device", "prime_logo", "trailer_id"]
 
+# ──────────────────────────────────────────────────────────────────────────────
+# IMAGE HELPERS
+# ──────────────────────────────────────────────────────────────────────────────
 
-# ──────────────────────────────────────────────────────────────
-# Token validation (runs once at startup)
-# ──────────────────────────────────────────────────────────────
+def pil_to_b64(img: Image.Image, max_side: int = 1024) -> str:
+    """Resize large images and encode as base64 JPEG."""
+    img = img.copy().convert("RGB")
+    if max(img.size) > max_side:
+        img.thumbnail((max_side, max_side), Image.LANCZOS)
+    buf = io.BytesIO()
+    img.save(buf, format="JPEG", quality=82)
+    return base64.b64encode(buf.getvalue()).decode("utf-8")
 
-def check_token() -> tuple[bool, str]:
-    token = os.environ.get("HF_TOKEN", "").strip()
-    if not token:
-        return False, "HF_TOKEN secret is not set. Go to Space Settings → Repository Secrets → add HF_TOKEN."
-    try:
-        api = HfApi(token=token)
-        api.whoami()
-        return True, "Token OK"
-    except Exception as e:
-        return False, f"HF_TOKEN is invalid or expired: {e}"
 
-TOKEN_OK, TOKEN_MSG = check_token()
+def load_images(file_paths) -> list[Image.Image]:
+    """Load PIL images from Gradio 5.x file paths (str or filepath objects)."""
+    imgs = []
+    if not file_paths:
+        return imgs
+    if isinstance(file_paths, str):
+        file_paths = [file_paths]
+    for p in file_paths:
+        try:
+            path = p if isinstance(p, str) else getattr(p, "name", str(p))
+            imgs.append(Image.open(path).convert("RGB"))
+        except Exception as e:
+            print(f"[load_images] skipped {p}: {e}")
+    return imgs
 
 
-# ──────────────────────────────────────────────────────────────
-# Image helpers
-# ──────────────────────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────────────────────────
+# JSON EXTRACTION  — multi-pass recovery
+# ──────────────────────────────────────────────────────────────────────────────
 
-def pil_to_b64(img: Image.Image, max_side: int = 1024) -> str:
-    """Resize and encode to base64 JPEG."""
-    if max(img.size) > max_side:
-        img = img.copy()
-        img.thumbnail((max_side, max_side), Image.LANCZOS)
-    buf = io.BytesIO()
-    img.save(buf, format="JPEG", quality=85)
-    return base64.b64encode(buf.getvalue()).decode()
+def extract_json(text: str) -> dict | None:
+    """Try multiple strategies to pull valid JSON from LLM output."""
+    if not text:
+        return None
+
+    # Strip markdown code fences
+    text = re.sub(r"```(?:json)?", "", text, flags=re.IGNORECASE).replace("```", "").strip()
 
+    # Find outermost { ... } block
+    m = re.search(r"\{[\s\S]*\}", text)
+    if not m:
+        return None
+    raw = m.group()
 
-# ──────────────────────────────────────────────────────────────
-# LLM call — with detailed error capture
-# ──────────────────────────────────────────────────────────────
+    # Pass 1: direct parse
+    try:
+        return json.loads(raw)
+    except json.JSONDecodeError:
+        pass
 
-def call_model(img: Image.Image, model: str) -> dict:
-    """Call one vision LLM. Raises ValueError with a descriptive message on failure."""
-    token = os.environ.get("HF_TOKEN", "").strip() or None
-    client = InferenceClient(token=token)
+    # Pass 2: fix trailing commas
+    fixed = re.sub(r",\s*([}\]])", r"\1", raw)
+    try:
+        return json.loads(fixed)
+    except json.JSONDecodeError:
+        pass
+
+    # Pass 3: extract only the lines containing our keys
+    try:
+        rebuilt = {
+            key: json.loads(
+                re.search(
+                    rf'"{key}"\s*:\s*(\{{[^}}]+\}})', raw, re.DOTALL
+                ).group(1)
+            )
+            for key in KEYS
+            if re.search(rf'"{key}"\s*:\s*\{{', raw)
+        }
+        if rebuilt:
+            return rebuilt
+    except Exception:
+        pass
+
+    return None
+
+
+def validate_result(data: dict) -> dict | None:
+    """Ensure result has all keys and correct types; coerce where possible."""
+    if not data:
+        return None
+    out = {}
+    for key in KEYS:
+        item = data.get(key)
+        if not isinstance(item, dict):
+            return None   # hard fail — missing a required key
+        found = item.get("found", False)
+        if isinstance(found, str):
+            found = found.lower() in ("true", "yes", "1")
+        out[key] = {
+            "found":      bool(found),
+            "confidence": item.get("confidence", "low") or "low",
+            "notes":      (item.get("notes") or "").strip(),
+        }
+    return out
+
+
+# ──────────────────────────────────────────────────────────────────────────────
+# LLM CALL  — direct requests, no huggingface_hub dependency for inference
+# ──────────────────────────────────────────────────────────────────────────────
+
+def call_model(img: Image.Image, model: str, token: str) -> dict:
+    """
+    Call one HF vision model via the chat-completions endpoint.
+    Returns validated result dict on success.
+    Raises RuntimeError with a clear message on failure.
+    """
     b64 = pil_to_b64(img)
 
-    messages = [{
-        "role": "user",
-        "content": [
-            {
-                "type": "image_url",
-                "image_url": {"url": f"data:image/jpeg;base64,{b64}"},
-            },
+    headers = {
+        "Content-Type": "application/json",
+        "Authorization": f"Bearer {token}",
+    }
+
+    payload = {
+        "model": model,
+        "messages": [
             {
-                "type": "text",
-                "text": DETECTION_PROMPT,
-            },
+                "role": "user",
+                "content": [
+                    {
+                        "type": "image_url",
+                        "image_url": {"url": f"data:image/jpeg;base64,{b64}"},
+                    },
+                    {
+                        "type": "text",
+                        "text": DETECTION_PROMPT,
+                    },
+                ],
+            }
         ],
-    }]
+        "max_tokens": 512,
+        "temperature": 0.05,
+        "stream": False,
+    }
 
-    resp = client.chat_completion(
-        model=model,
-        messages=messages,
-        max_tokens=512,
-        temperature=0.05,
-    )
-    raw = resp.choices[0].message.content.strip()
+    url = HF_CHAT_URL.format(model=model)
+    short = model.split("/")[-1]
 
-    # Strip accidental markdown fences
-    raw = re.sub(r"^```(?:json)?", "", raw).strip()
-    raw = re.sub(r"```$", "", raw).strip()
+    try:
+        resp = requests.post(url, headers=headers, json=payload, timeout=90)
+    except requests.exceptions.Timeout:
+        raise RuntimeError(f"{short}: request timed out (90s)")
+    except requests.exceptions.ConnectionError as e:
+        raise RuntimeError(f"{short}: connection error — {e}")
+
+    # ── HTTP-level error handling ────────────────────────────────────────────
+    if resp.status_code == 401:
+        raise RuntimeError(f"{short}: 401 Unauthorized — HF_TOKEN is missing or invalid")
+    if resp.status_code == 403:
+        raise RuntimeError(f"{short}: 403 Forbidden — token may not have access to this model")
+    if resp.status_code == 404:
+        raise RuntimeError(f"{short}: 404 Not Found — model not available on serverless endpoint")
+    if resp.status_code == 422:
+        raise RuntimeError(f"{short}: 422 Unprocessable — model may not support vision input")
+    if resp.status_code == 429:
+        raise RuntimeError(f"{short}: 429 Rate Limited — try again in ~60 seconds")
+    if resp.status_code in (502, 503):
+        raise RuntimeError(f"{short}: {resp.status_code} Service Unavailable — model is loading")
+    if resp.status_code != 200:
+        body_preview = resp.text[:200].replace("\n", " ")
+        raise RuntimeError(f"{short}: HTTP {resp.status_code} — {body_preview}")
+
+    # ── Parse response ──���────────────────────────────────────────────────────
+    try:
+        body = resp.json()
+        content = body["choices"][0]["message"]["content"]
+    except (KeyError, IndexError, json.JSONDecodeError) as e:
+        raise RuntimeError(f"{short}: unexpected response shape — {e} | body: {resp.text[:200]}")
+
+    print(f"[{short}] raw LLM output: {content[:300]}")  # visible in Space logs
+
+    data = extract_json(content)
+    result = validate_result(data)
+    if result is None:
+        raise RuntimeError(
+            f"{short}: could not extract valid JSON.\n"
+            f"Raw output (first 300 chars): {content[:300]}"
+        )
 
-    m = re.search(r"\{[\s\S]*\}", raw)
-    if not m:
-        raise ValueError(f"Model returned no JSON.\nRaw output: {raw[:300]}")
+    return result
 
-    try:
-        return json.loads(m.group())
-    except json.JSONDecodeError as e:
-        raise ValueError(f"JSON parse error: {e}\nRaw: {m.group()[:300]}")
 
+# ──────────────────────────────────────────────────────────────────────────────
+# PER-IMAGE ANALYSIS  — try each model in order
+# ──────────────────────────────────────────────────────────────────────────────
 
-def analyze_one(img: Image.Image) -> tuple:
+def analyze_one(img: Image.Image, token: str) -> tuple[dict | None, str]:
     """
-    Try each model in MODELS order.
+    Try MODELS in order for a single image.
     Returns (result_dict, model_short_name) on success,
-            (None, error_summary_string)     on total failure.
+            (None, joined_error_string)      on total failure.
     """
-    attempt_log = []
+    errors = []
     for model in MODELS:
         short = model.split("/")[-1]
         try:
-            result = call_model(img, model)
+            result = call_model(img, model, token)
+            print(f"[analyze_one] SUCCESS with {short}")
             return result, short
-        except Exception as e:
+        except RuntimeError as e:
             msg = str(e)
-            # Shorten common HTTP error noise
-            if "429" in msg:
-                msg = "rate-limited (429)"
-            elif "401" in msg or "403" in msg:
-                msg = "auth error — check HF_TOKEN"
-            elif "404" in msg:
-                msg = "model not found (404)"
-            elif "503" in msg or "502" in msg:
-                msg = "model loading / unavailable"
-            attempt_log.append(f"{short}: {msg}")
-
-    return None, " | ".join(attempt_log)
-
-
-# ──────────────────────────────────────────────────────────────
-# Result merging
-# ──────────────────────────────────────────────────────────────
-
-def merge(results: list) -> dict:
-    RANK = {"high": 3, "medium": 2, "low": 1, "": 0}
+            print(f"[analyze_one] FAIL {msg}")
+            errors.append(msg)
+
+    return None, " | ".join(errors)
+
+
+# ──────────────────────────────────────────────────────────────────────────────
+# RESULT MERGING
+# ──────────────────────────────────────────────────────────────────────────────
+
+CONF_RANK = {"high": 3, "medium": 2, "low": 1, "": 0}
+
+def merge(results: list[dict]) -> dict:
+    """found=True wins across images; highest confidence wins."""
     merged = {k: {"found": False, "confidence": "low", "notes": ""} for k in KEYS}
     for res in results:
         if not res:
             continue
         for k in KEYS:
-            item = res.get(k, {})
-            if item.get("found"):
+            src = res.get(k, {})
+            if src.get("found"):
                 merged[k]["found"] = True
-            if RANK.get(item.get("confidence", ""), 0) > RANK.get(merged[k]["confidence"], 0):
-                merged[k]["confidence"] = item.get("confidence", "low")
-            if item.get("found") and item.get("notes") and not merged[k]["notes"]:
-                merged[k]["notes"] = item["notes"]
+                if CONF_RANK.get(src.get("confidence", ""), 0) > CONF_RANK.get(merged[k]["confidence"], 0):
+                    merged[k]["confidence"] = src["confidence"]
+                if src.get("notes") and not merged[k]["notes"]:
+                    merged[k]["notes"] = src["notes"]
     return merged
 
 
-# ──────────────────────────────────────────────────────────────
-# Load images from Gradio 5.x file paths
-# ──────────────────────────────────────────────────────────────
-
-def load_images(file_paths) -> list:
-    imgs = []
-    if not file_paths:
-        return imgs
-    if isinstance(file_paths, str):
-        file_paths = [file_paths]
-    for p in file_paths:
-        try:
-            path = p if isinstance(p, str) else getattr(p, "name", str(p))
-            imgs.append(Image.open(path).convert("RGB"))
-        except Exception as e:
-            print(f"[load] skipped {p}: {e}")
-    return imgs
-
-
-# ──────────────────────────────────────────────────────────────
-# Main Gradio callback
-# ──────────────────────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────────────────────────
+# MAIN GRADIO CALLBACK
+# ──────────────────────────────────────────────────────────────────────────────
 
 def analyze(file_paths):
-    # ── Token guard ──
-    if not TOKEN_OK:
+    token = os.environ.get("HF_TOKEN", "").strip()
+
+    # ── Token guard — show actionable message ───────────────────────────────
+    if not token:
         return (
-            _error(f"<b>Setup required:</b> {TOKEN_MSG}"),
+            _error(
+                "<b>Setup required: HF_TOKEN not set.</b><br><br>"
+                "Go to your Space → <b>Settings → Repository Secrets</b> "
+                "→ add a secret named <code>HF_TOKEN</code> with your "
+                "HuggingFace Read token.<br>"
+                "Get a free token at "
+                "<a href='https://huggingface.co/settings/tokens' target='_blank'>"
+                "huggingface.co/settings/tokens</a>"
+            ),
             _status("error"),
         )
 
@@ -205,10 +320,13 @@ def analyze(file_paths):
         return _placeholder(), _status("idle")
 
     n = len(images)
+    print(f"[analyze] processing {n} image(s)")
+
     all_results, all_errors, models_used = [], [], set()
 
+    # Parallel: one thread per image (up to 4)
     with concurrent.futures.ThreadPoolExecutor(max_workers=min(n, 4)) as pool:
-        futs = [pool.submit(analyze_one, img) for img in images]
+        futs = {pool.submit(analyze_one, img, token): i for i, img in enumerate(images)}
         for fut in concurrent.futures.as_completed(futs):
             res, meta = fut.result()
             if res is not None:
@@ -218,50 +336,64 @@ def analyze(file_paths):
                 all_errors.append(meta)
 
     if not all_results:
-        # Show the REAL error from each model attempt
-        err_detail = "<br>".join(all_errors) if all_errors else "Unknown error"
+        err_lines = "<br>".join(
+            f"<code style='font-size:11px;'>{e}</code>" for e in all_errors
+        ) or "<code>Unknown error</code>"
+
         return (
             _error(
-                f"<b>All models failed.</b><br><br>"
-                f"<code style='font-size:12px;line-height:1.8;'>{err_detail}</code><br><br>"
-                f"Common causes:<br>"
-                f"• HF_TOKEN missing/expired → Space Settings → Secrets<br>"
-                f"• Models overloaded (rate limit 429) → retry in a minute<br>"
-                f"• Image too large → try a smaller/compressed photo"
+                f"<b>All models failed for all images.</b><br><br>"
+                f"<b>Exact errors:</b><br>{err_lines}<br><br>"
+                f"<b>Most likely fixes:</b><br>"
+                f"• <b>401/403</b> → HF_TOKEN is wrong or expired — regenerate at "
+                f"<a href='https://huggingface.co/settings/tokens' target='_blank'>hf.co/settings/tokens</a><br>"
+                f"• <b>429</b> → Rate limited — wait 60 seconds and retry<br>"
+                f"• <b>404</b> → Model temporarily unavailable — retry or report as issue<br>"
+                f"• <b>503</b> → Model is loading (cold start) — wait 30s and retry"
             ),
             _status("error"),
         )
 
     merged    = merge(all_results)
     model_str = " · ".join(sorted(models_used)) or "AI"
-    warn      = (f"<br><small style='color:#d97706;'>⚠️ {len(all_errors)} image(s) failed: "
-                 f"{all_errors[0][:80]}</small>" if all_errors else "")
+    warn      = ""
+    if all_errors:
+        warn = (
+            f"<br><small style='color:#d97706;'>⚠️ {len(all_errors)} image(s) failed — "
+            f"{all_errors[0][:100]}</small>"
+        )
 
     return build_cards(merged, n, model_str, warn), _status("done", n, len(all_results))
 
 
-# ──────────────────────────────────────────────────────────────
-# HTML builders
-# ──────────────────────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────────────────────────
+# HTML BUILDERS
+# ──────────────────────────────────────────────────────────────────────────────
 
 COMP_META = [
     ("sensors",    "🔷", "Sensors",          "Two diamond-shaped sensor plates",    "#f59e0b", "#fef3c7"),
     ("gps_device", "📡", "GPS Device",       "White electronic box — upper corner", "#3b82f6", "#dbeafe"),
-    ("prime_logo", "🔵", "Prime Logo",       "Amazon Prime arrow/swoosh mark",      "#8b5cf6", "#ede9fe"),
+    ("prime_logo", "🔶", "Prime Logo",       "Amazon Prime logo (full or partial)", "#f97316", "#fff7ed"),
     ("trailer_id", "🏷️", "Trailer ID Label", "Vertical strip on the corner post",   "#10b981", "#d1fae5"),
 ]
 
+CONF_COLOR = {"high": "#15803d", "medium": "#b45309", "low": "#b91c1c"}
+
 
 def build_cards(merged: dict, img_n: int, model_str: str, warn: str) -> str:
     found_n = sum(1 for k, *_ in COMP_META if merged.get(k, {}).get("found"))
     total   = len(COMP_META)
     all_ok  = found_n == total
 
-    sc = "#16a34a" if all_ok else ("#d97706" if found_n >= 2 else "#dc2626")
-    sb = "#f0fdf4" if all_ok else ("#fffbeb" if found_n >= 2 else "#fef2f2")
-    se = "#86efac" if all_ok else ("#fde68a" if found_n >= 2 else "#fca5a5")
-    si = "✅" if all_ok else ("⚠️" if found_n >= 2 else "❌")
-    sl = "All Clear" if all_ok else ("Partial" if found_n >= 2 else "Issues Found")
+    # Banner colours
+    if all_ok:
+        sc, sb, se, si, sl = "#16a34a", "#f0fdf4", "#86efac", "✅", "All Clear — All Components Found"
+    elif found_n >= 3:
+        sc, sb, se, si, sl = "#d97706", "#fffbeb", "#fde68a", "⚠️", "Mostly Complete"
+    elif found_n >= 2:
+        sc, sb, se, si, sl = "#ea580c", "#fff7ed", "#fed7aa", "⚠️", "Partially Complete"
+    else:
+        sc, sb, se, si, sl = "#dc2626", "#fef2f2", "#fca5a5", "❌", "Missing Components"
 
     rows = ""
     for key, icon, name, desc, accent, pill in COMP_META:
@@ -270,23 +402,22 @@ def build_cards(merged: dict, img_n: int, model_str: str, warn: str) -> str:
         conf  = d.get("confidence", "low")
         notes = d.get("notes", "")
 
-        rbg = "#f0fdf4" if found else "#fef2f2"
-        rbd = "#bbf7d0" if found else "#fecaca"
-        stc = "#15803d" if found else "#b91c1c"
-        stx = "✅ Found" if found else "❌ Missing"
-        cdc = {"high": "#16a34a", "medium": "#d97706", "low": "#dc2626"}.get(conf, "#9ca3af")
+        rbg  = "#f0fdf4" if found else "#fef2f2"
+        rbd  = "#bbf7d0" if found else "#fecaca"
+        stc  = "#15803d" if found else "#b91c1c"
+        stx  = "✅ Found" if found else "❌ Missing"
+        cdc  = CONF_COLOR.get(conf, "#9ca3af")
         note_html = (
             f'<div style="margin-top:8px;padding-top:8px;border-top:1px solid {rbd};'
             f'font-size:12px;color:#4b5563;font-style:italic;line-height:1.5;">"{notes}"</div>'
-            if notes else ""
-        )
+        ) if notes else ""
 
         rows += f"""
 <div style="background:{rbg};border:1.5px solid {rbd};border-radius:12px;
             padding:14px 16px;margin-bottom:10px;">
   <div style="display:flex;align-items:flex-start;gap:12px;">
     <div style="background:{pill};border-radius:10px;padding:9px 11px;
-                font-size:20px;line-height:1;flex-shrink:0;">{icon}</div>
+                font-size:22px;line-height:1;flex-shrink:0;">{icon}</div>
     <div style="flex:1;min-width:0;">
       <div style="font-weight:700;font-size:14px;color:#111827;">{name}</div>
       <div style="font-size:11px;color:#9ca3af;margin-top:1px;">{desc}</div>
@@ -300,14 +431,12 @@ def build_cards(merged: dict, img_n: int, model_str: str, warn: str) -> str:
 </div>"""
 
     return f"""
-<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
+<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;max-width:600px;">
   <div style="background:{sb};border:2px solid {se};border-radius:14px;
               padding:16px 20px;margin-bottom:18px;
               display:flex;align-items:center;justify-content:space-between;gap:12px;">
     <div>
-      <div style="font-size:18px;font-weight:800;color:{sc};">
-        {si} {found_n}/{total} — {sl}
-      </div>
+      <div style="font-size:18px;font-weight:800;color:{sc};">{si} {found_n}/{total} — {sl}</div>
       <div style="font-size:12px;color:#6b7280;margin-top:3px;">
         {img_n} image{'s' if img_n > 1 else ''} · {model_str}{warn}
       </div>
@@ -320,7 +449,8 @@ def build_cards(merged: dict, img_n: int, model_str: str, warn: str) -> str:
 
 def _placeholder() -> str:
     return """
-<div style="text-align:center;padding:60px 20px;color:#94a3b8;font-family:sans-serif;">
+<div style="text-align:center;padding:60px 20px;color:#94a3b8;
+            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
   <div style="font-size:48px;margin-bottom:14px;">📷</div>
   <div style="font-size:15px;font-weight:600;color:#64748b;">Upload trailer images to begin</div>
   <div style="font-size:13px;margin-top:6px;">Front view, rear view, or both — all work</div>
@@ -343,39 +473,40 @@ def _status(state: str, total: int = 0, ok: int = 0) -> str:
 def _error(msg: str) -> str:
     return (
         f'<div style="background:#fef2f2;border:1.5px solid #fca5a5;border-radius:12px;'
-        f'padding:18px 20px;color:#b91c1c;font-family:sans-serif;font-size:13px;line-height:1.7;">'
-        f'{msg}</div>'
+        f'padding:18px 20px;color:#b91c1c;font-family:-apple-system,sans-serif;'
+        f'font-size:13px;line-height:1.8;">{msg}</div>'
     )
 
 
-# ──────────────────────────────────────────────────────────────
-# Startup banner (shown in Space logs)
-# ──────────────────────────────────────────────────────────────
-
-print("=" * 55)
-print("  Amazon Trailer Inspector — starting up")
-print(f"  Token status : {TOKEN_MSG}")
-print(f"  Models       : {[m.split('/')[-1] for m in MODELS]}")
-print("=" * 55)
+# ──────────────────────────────────────────────────────────────────────────────
+# STARTUP LOG
+# ──────────────────────────────────────────────────────────────────────────────
 
+_tok = os.environ.get("HF_TOKEN", "")
+print("=" * 60)
+print("  Amazon Trailer Inspector — startup")
+print(f"  HF_TOKEN : {'SET (' + str(len(_tok)) + ' chars)' if _tok else 'NOT SET ← add to Space Secrets!'}")
+print(f"  Models   : {[m.split('/')[-1] for m in MODELS]}")
+print("=" * 60)
 
-# ──────────────────────────────────────────────────────────────
-# Gradio UI
-# ──────────────────────────────────────────────────────────────
+# ──────────────────────────────────────────────────────────────────────────────
+# GRADIO UI
+# ──────────────────────────────────────────────────────────────────────────────
 
-TOKEN_BANNER = "" if TOKEN_OK else (
+TOKEN_BANNER = "" if _tok else (
     '<div style="background:#fef3c7;border:1.5px solid #fde68a;border-radius:10px;'
-    'padding:12px 16px;margin-bottom:14px;font-size:13px;color:#92400e;font-family:sans-serif;">'
-    '⚠️ <b>HF_TOKEN not set.</b> Go to Space <b>Settings → Repository Secrets</b> '
-    'and add <code>HF_TOKEN</code> with your HuggingFace Read token. '
-    'Get one free at <a href="https://huggingface.co/settings/tokens" target="_blank">'
-    'huggingface.co/settings/tokens</a></div>'
+    'padding:12px 16px;margin-bottom:14px;font-size:13px;color:#92400e;'
+    'font-family:-apple-system,sans-serif;">'
+    '⚠️ <b>HF_TOKEN not set.</b> Space Settings → Repository Secrets → add '
+    '<code>HF_TOKEN</code> = your Read token from '
+    '<a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a>'
+    '</div>'
 )
 
 CSS = """
 .gradio-container { max-width: 980px !important; margin: auto !important; }
 #analyze-btn { font-size: 15px !important; font-weight: 700 !important;
-               letter-spacing: .02em; border-radius: 10px !important; }
+               letter-spacing: .02em !important; border-radius: 10px !important; }
 footer { display: none !important; }
 """
 
@@ -388,7 +519,8 @@ THEME = gr.themes.Soft(
 with gr.Blocks(title="🚛 Amazon Trailer Inspector", theme=THEME, css=CSS) as demo:
 
     gr.HTML(f"""
-<div style="text-align:center;padding:30px 0 18px;font-family:sans-serif;">
+<div style="text-align:center;padding:30px 0 18px;
+            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
   <div style="font-size:46px;margin-bottom:10px;">🚛</div>
   <h1 style="font-size:26px;font-weight:800;color:#0f172a;margin:0 0 6px;">
     Amazon Trailer Inspector
@@ -401,10 +533,12 @@ with gr.Blocks(title="🚛 Amazon Trailer Inspector", theme=THEME, css=CSS) as d
 
     with gr.Row(equal_height=False):
 
+        # LEFT COLUMN — upload + checklist
         with gr.Column(scale=1, min_width=280):
             gr.HTML("""
 <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;
-            padding:16px 18px;margin-bottom:14px;">
+            padding:16px 18px;margin-bottom:14px;
+            font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
   <div style="font-weight:700;font-size:12px;color:#475569;
               letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;">
     What we check
@@ -419,7 +553,7 @@ with gr.Blocks(title="🚛 Amazon Trailer Inspector", theme=THEME, css=CSS) as d
       <span><b>GPS Device</b> — white box, top corner</span>
     </div>
     <div style="display:flex;align-items:center;gap:10px;">
-      <span style="background:#ede9fe;border-radius:7px;padding:4px 9px;">🔵</span>
+      <span style="background:#fff7ed;border-radius:7px;padding:4px 9px;">🔶</span>
       <span><b>Prime Logo</b> — Amazon Prime mark</span>
     </div>
     <div style="display:flex;align-items:center;gap:10px;">
@@ -437,8 +571,9 @@ with gr.Blocks(title="🚛 Amazon Trailer Inspector", theme=THEME, css=CSS) as d
             )
 
             gr.HTML("""
-<p style="font-size:12px;color:#94a3b8;text-align:center;margin:8px 0 14px;">
-  💡 Upload both rear &amp; side views for best results
+<p style="font-size:12px;color:#94a3b8;text-align:center;margin:8px 0 14px;
+          font-family:-apple-system,sans-serif;">
+  💡 Upload front, rear, or side views — more angles = better accuracy
 </p>""")
 
             analyze_btn = gr.Button(
@@ -450,12 +585,13 @@ with gr.Blocks(title="🚛 Amazon Trailer Inspector", theme=THEME, css=CSS) as d
 
             status_html = gr.HTML(_status("idle"))
 
+        # RIGHT COLUMN — results
         with gr.Column(scale=1, min_width=320):
             result_html = gr.HTML(_placeholder())
 
     gr.HTML("""
 <div style="text-align:center;padding:20px 0 10px;color:#94a3b8;
-            font-size:12px;font-family:sans-serif;">
+            font-size:12px;font-family:-apple-system,sans-serif;">
   Llama 3.2 Vision · Qwen2.5-VL · Gemma 3 &nbsp;|&nbsp;
   Images processed in parallel &nbsp;|&nbsp; No data stored
 </div>""")