Compact consumer product card image fallback

app.py

@@ -9,7 +9,7 @@ import traceback
 from functools import lru_cache
 from pathlib import Path
 from typing import Any, Dict, List, Tuple
-from urllib.parse import quote_plus
+from urllib.parse import quote
 
 try:
     import huggingface_hub as _hf_hub
@@ -200,6 +200,13 @@ def _esc(value: Any) -> str:
     return html.escape(str(value))
 
 
+def _short_text(value: Any, limit: int = 220) -> str:
+    text = re.sub(r"\s+", " ", str(value or "")).strip()
+    if len(text) <= limit:
+        return text
+    return text[: limit - 3].rstrip() + "..."
+
+
 def _pct(value: Any) -> str:
     try:
         return f"{float(value) * 100:.2f}%"
@@ -260,12 +267,18 @@ def _product_image_url(product: Dict[str, Any]) -> str:
     image_url = str(product.get("image_url") or "").strip()
     if image_url:
         return image_url
-    query = quote_plus(" ".join([
-        str(product.get("category") or "clothing"),
-        str(product.get("tags", ["fashion"])[0] if product.get("tags") else "fashion"),
-        "product"
-    ]))
-    return f"https://source.unsplash.com/320x420/?{query}"
+    category = _short_text(product.get("category") or "Clothing", 28)
+    tag = _short_text(product.get("tags", ["fashion"])[0] if product.get("tags") else "fashion", 18)
+    svg = f"""<svg xmlns="http://www.w3.org/2000/svg" width="320" height="420" viewBox="0 0 320 420">
+<defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#eff6ff"/><stop offset="1" stop-color="#fff7ed"/></linearGradient></defs>
+<rect width="320" height="420" rx="24" fill="url(#g)"/>
+<rect x="62" y="58" width="196" height="250" rx="30" fill="#ffffff" stroke="#dbe3ef" stroke-width="4"/>
+<path d="M116 90 C128 120 192 120 204 90 L238 124 L214 166 L202 150 L202 300 L118 300 L118 150 L106 166 L82 124 Z" fill="#1f2937"/>
+<path d="M126 96 C140 114 180 114 194 96" fill="none" stroke="#f97316" stroke-width="8" stroke-linecap="round"/>
+<text x="160" y="350" text-anchor="middle" font-family="Arial, sans-serif" font-size="24" font-weight="700" fill="#0f172a">{html.escape(category)}</text>
+<text x="160" y="382" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#475569">{html.escape(tag)}</text>
+</svg>"""
+    return "data:image/svg+xml;charset=utf-8," + quote(svg)
 
 
 def _meta(product_or_meta: Dict[str, Any]) -> Dict[str, Any]:
@@ -436,7 +449,7 @@ def consumer_product_view(product_name: str, selected_aspect: str) -> Tuple[str,
         f'<span>Price: ${_safe_float(product["price"]):.2f}</span>'
         f'<span>Rating: {_safe_float(product["average_rating"]):.1f}</span>'
         f'<span>Reviews: {int(_safe_float(product["rating_number"]))}</span></div>'
-        f'<p><b>Metadata:</b> {_esc(product["features"])}</p>'
+        f'<p class="metadata-summary"><b>Metadata:</b> {_esc(_short_text(product["features"], 190))}</p>'
         f'{_recommendation_html(result, product["name"])}{_overall_html(result)}</div></div>'
     )
     evidence = f'<h4>Key review evidence</h4>{_highlight_review(product["review"], selected_aspect)}'
@@ -656,8 +669,11 @@ button.primary, .gradio-button.primary { background:var(--accent) !important; bo
 .status.ok { background:#ecfdf5; border-color:#86efac; color:#065f46; }
 .status.bad { background:#fff1f2; border-color:#fda4af; color:#991b1b; }
 .product-card, .overall-card, .note-card { border:1px solid var(--line); border-radius:8px; padding:16px; background:white; }
-.product-layout { display:grid; grid-template-columns:132px 1fr; gap:16px; align-items:start; }
-.product-img { width:132px; height:166px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#f8fafc; }
+.product-layout { display:grid; grid-template-columns:104px 1fr; gap:14px; align-items:start; }
+.product-img { width:104px; height:132px; object-fit:cover; border-radius:8px; border:1px solid var(--line); background:#f8fafc; }
+.product-card h3 { margin:0 0 6px; font-size:18px; line-height:1.25; }
+.product-card p { margin:7px 0; }
+.metadata-summary { color:#334155; font-size:13px; line-height:1.45; }
 .recommendation-card { border:1px solid #fed7aa; border-left:5px solid var(--accent); background:#fff7ed; border-radius:8px; padding:13px 14px; margin:12px 0; }
 .recommendation-card p { margin:7px 0 0; }
 .muted { color:var(--muted); }
@@ -690,7 +706,7 @@ mark { background:#fde68a; color:#111827; border-radius:4px; padding:1px 3px; }
 .kv-table td { border-bottom:1px solid #e2e8f0; padding:9px 12px; }
 .kv-table td:first-child { width:220px; color:#334155; font-weight:700; background:#f8fafc; }
 .compact-note { color:#475569; font-size:13px; margin:4px 0 10px; }
-@media (max-width:860px) { .aspect-grid, .metric-grid, .product-layout { grid-template-columns:1fr; } .product-img { width:100%; height:220px; } }
+@media (max-width:860px) { .aspect-grid, .metric-grid, .product-layout { grid-template-columns:1fr; } .product-img { width:100%; height:180px; } }
 """