Create app.py

app.py

@@ -0,0 +1,404 @@
+"""
+Amazon Trailer Inspector
+HuggingFace Spaces + Gradio pipeline
+Gemma-3 (primary) → Llama-3.2-Vision → Qwen2.5-VL (fallbacks)
+Parallel multi-image inference, clean results UI.
+"""
+
+import gradio as gr
+import base64
+import concurrent.futures
+import json
+import re
+import os
+from PIL import Image
+import io
+from huggingface_hub import InferenceClient
+
+# ──────────────────────────────────────────────────────────────
+# Model chain  (Gemma first, automatic fallback)
+# ──────────────────────────────────────────────────────────────
+MODELS = [
+    "google/gemma-3-4b-it",                        # Primary  – Gemma 3 multimodal (free)
+    "meta-llama/Llama-3.2-11B-Vision-Instruct",    # Fallback 1
+    "Qwen/Qwen2.5-VL-7B-Instruct",                 # Fallback 2
+]
+
+DETECTION_PROMPT = """You are a precise visual inspector for Amazon trailer fleets.
+Carefully examine the trailer image and locate these 4 components:
+
+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 — absolutely no extra text, no markdown code 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"}
+}"""
+
+KEYS = ["sensors", "gps_device", "prime_logo", "trailer_id"]
+
+# ──────────────────────────────────────────────────────────────
+# Vision helpers
+# ──────────────────────────────────────────────────────────────
+
+def pil_to_b64(img: Image.Image, max_side: int = 1120) -> str:
+    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=88)
+    return base64.b64encode(buf.getvalue()).decode()
+
+
+def call_model(img: Image.Image, model: str) -> dict:
+    """One LLM call — raises on failure."""
+    token  = os.environ.get("HF_TOKEN")
+    client = InferenceClient(model=model, token=token)
+    b64    = pil_to_b64(img)
+
+    messages = [{
+        "role": "user",
+        "content": [
+            {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{b64}"}},
+            {"type": "text", "text": DETECTION_PROMPT},
+        ],
+    }]
+
+    resp = client.chat_completion(messages=messages, max_tokens=512, temperature=0.05)
+    raw  = resp.choices[0].message.content.strip()
+
+    m = re.search(r'\{[\s\S]*\}', raw)
+    if not m:
+        raise ValueError(f"No JSON in response: {raw[:200]}")
+    return json.loads(m.group())
+
+
+def analyze_one(img: Image.Image) -> tuple:
+    """Try models in order. Returns (result_dict_or_None, model_name_or_error)."""
+    last_err = "no models tried"
+    for model in MODELS:
+        try:
+            result = call_model(img, model)
+            return result, model.split("/")[-1]
+        except Exception as e:
+            last_err = f"{model.split('/')[-1]}: {e}"
+    return None, last_err
+
+
+# ──────────────────────────────────────────────────────────────
+# Result merging
+# ──────────────────────────────────────────────────────────────
+
+def merge(results: list) -> dict:
+    """
+    Union across all images:
+    - component is FOUND if any image found it
+    - highest confidence wins
+    - first non-empty notes kept
+    """
+    RANK = {"high": 3, "medium": 2, "low": 1, "": 0}
+    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"):
+                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"]
+    return merged
+
+
+# ──────────────────────────────────────────────────────────────
+# Main pipeline function (called by Gradio)
+# ──────────────────────────────────────────────────────────────
+
+def load_images(file_paths):
+    """
+    HF Spaces Gradio 5.x: gr.File(type='filepath') returns list[str].
+    Handles string paths and legacy file-object fallback.
+    """
+    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", None) or str(p))
+            imgs.append(Image.open(path).convert("RGB"))
+        except Exception as e:
+            print(f"[load] skipped {p}: {e}")
+    return imgs
+
+
+def analyze(file_paths):
+    """
+    Main Gradio callback.
+    Returns: (result_html: str, status_html: str)
+    """
+    images = load_images(file_paths)
+
+    if not images:
+        return (
+            _placeholder(),
+            _status("idle"),
+        )
+
+    n = len(images)
+    all_results, errors, models_used = [], [], set()
+
+    with concurrent.futures.ThreadPoolExecutor(max_workers=min(n, 4)) as pool:
+        futs = [pool.submit(analyze_one, img) for img in images]
+        for fut in concurrent.futures.as_completed(futs):
+            res, meta = fut.result()
+            if res is not None:
+                all_results.append(res)
+                models_used.add(meta)
+            else:
+                errors.append(meta)
+
+    if not all_results:
+        return (
+            _error("Analysis failed — all models returned errors.<br>"
+                   "Make sure <b>HF_TOKEN</b> is set in Space Secrets."),
+            _status("error"),
+        )
+
+    merged    = merge(all_results)
+    model_str = " · ".join(sorted(models_used)) or "AI"
+    warn      = (f"<br><small style='color:#d97706;'>⚠️ {len(errors)} image(s) failed</small>"
+                 if errors else "")
+    result_h  = build_cards(merged, n, model_str, warn)
+    status_h  = _status("done", n, len(all_results))
+
+    return result_h, status_h
+
+
+# ──────────────────────────────────────────────────────────────
+# 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"),
+    ("trailer_id", "🏷️", "Trailer ID Label", "Vertical strip on the corner post",   "#10b981", "#d1fae5"),
+]
+
+
+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")
+
+    rows = ""
+    for key, icon, name, desc, accent, pill in COMP_META:
+        d     = merged.get(key, {})
+        found = d.get("found", False)
+        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")
+        note = (
+            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 ""
+        )
+
+        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>
+    <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>
+      {note}
+    </div>
+    <div style="text-align:right;flex-shrink:0;padding-left:8px;">
+      <div style="font-weight:700;color:{stc};font-size:13px;white-space:nowrap;">{stx}</div>
+      <div style="font-size:11px;color:{cdc};margin-top:3px;">● {conf.capitalize()}</div>
+    </div>
+  </div>
+</div>"""
+
+    return f"""
+<div style="font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;">
+  <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:12px;color:#6b7280;margin-top:3px;">
+        {img_n} image{'s' if img_n>1 else ''} · {model_str}{warn}
+      </div>
+    </div>
+    <div style="font-size:36px;">🚛</div>
+  </div>
+  {rows}
+</div>"""
+
+
+def _placeholder() -> str:
+    return """
+<div style="text-align:center;padding:60px 20px;color:#94a3b8;
+            font-family:-apple-system,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>
+</div>"""
+
+
+def _status(state: str, total: int = 0, ok: int = 0) -> str:
+    msgs = {
+        "idle":  ("🟡", "#d97706", "Waiting for images"),
+        "done":  ("🟢", "#16a34a", f"{ok}/{total} image{'s' if total>1 else ''} processed"),
+        "error": ("🔴", "#dc2626", "Analysis failed — check HF_TOKEN secret"),
+    }
+    icon, color, text = msgs.get(state, msgs["idle"])
+    return (
+        f'<div style="font-size:12px;color:{color};text-align:center;'
+        f'padding:6px 0 2px;">{icon} {text}</div>'
+    )
+
+
+def _error(msg: str) -> str:
+    return (
+        f'<div style="background:#fef2f2;border:1.5px solid #fca5a5;border-radius:12px;'
+        f'padding:20px;color:#b91c1c;font-family:sans-serif;font-size:14px;">'
+        f'⚠️ {msg}</div>'
+    )
+
+
+# ──────────────────────────────────────────────────────────────
+# Gradio UI
+# ──────────────────────────────────────────────────────────────
+
+CSS = """
+.gradio-container { max-width: 980px !important; margin: auto !important; }
+#upload-box .wrap { border-radius: 12px !important; min-height: 120px; }
+#analyze-btn { font-size: 15px !important; font-weight: 700 !important;
+               letter-spacing: .02em; border-radius: 10px !important; }
+footer { display: none !important; }
+"""
+
+THEME = gr.themes.Soft(
+    primary_hue=gr.themes.colors.blue,
+    neutral_hue=gr.themes.colors.slate,
+    font=[gr.themes.GoogleFont("DM Sans"), "sans-serif"],
+)
+
+with gr.Blocks(title="🚛 Amazon Trailer Inspector", theme=THEME, css=CSS) as demo:
+
+    # ── Header ────────────────────────────────────────────────
+    gr.HTML("""
+<div style="text-align:center;padding:30px 0 18px;font-family: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
+  </h1>
+  <p style="color:#64748b;font-size:14px;margin:0;">
+    AI-powered verification of required trailer components from photos
+  </p>
+</div>""")
+
+    # ── Two-column layout ─────────────────────────────────────
+    with gr.Row(equal_height=False):
+
+        # Left – 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;">
+  <div style="font-weight:700;font-size:12px;color:#475569;
+              letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;">
+    What we check
+  </div>
+  <div style="display:grid;gap:9px;font-size:13px;color:#334155;">
+    <div style="display:flex;align-items:center;gap:10px;">
+      <span style="background:#fef3c7;border-radius:7px;padding:4px 9px;font-size:15px;">🔷</span>
+      <span><b>Sensors</b> — two diamond-shaped plates</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;">
+      <span style="background:#dbeafe;border-radius:7px;padding:4px 9px;font-size:15px;">📡</span>
+      <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;font-size:15px;">🔵</span>
+      <span><b>Prime Logo</b> — Amazon Prime mark</span>
+    </div>
+    <div style="display:flex;align-items:center;gap:10px;">
+      <span style="background:#d1fae5;border-radius:7px;padding:4px 9px;font-size:15px;">🏷️</span>
+      <span><b>Trailer ID</b> — corner post label strip</span>
+    </div>
+  </div>
+</div>""")
+
+            file_input = gr.File(
+                label="Upload Trailer Image(s)",
+                file_count="multiple",
+                file_types=["image"],
+                type="filepath",          # HF Spaces: returns plain string paths
+                elem_id="upload-box",
+            )
+
+            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>""")
+
+            analyze_btn = gr.Button(
+                "🔍  Analyze Trailer",
+                variant="primary",
+                size="lg",
+                elem_id="analyze-btn",
+            )
+
+            status_html = gr.HTML(_status("idle"))
+
+        # Right – results panel
+        with gr.Column(scale=1, min_width=320):
+            result_html = gr.HTML(_placeholder())
+
+    # ── Footer ────────────────────────────────────────────────
+    gr.HTML("""
+<div style="text-align:center;padding:20px 0 10px;color:#94a3b8;
+            font-size:12px;font-family:sans-serif;">
+  Gemma 3 · Llama 3.2 Vision · Qwen2.5-VL &nbsp;|&nbsp;
+  Images processed in parallel &nbsp;|&nbsp; No data is stored
+</div>""")
+
+    # ── Wiring ────────────────────────────────────────────────
+    analyze_btn.click(
+        fn=analyze,
+        inputs=[file_input],
+        outputs=[result_html, status_html],
+    )
+
+
+# HF Spaces handles host/port — no arguments needed
+demo.launch()