Show product images in consumer interface

app.py

@@ -9,6 +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
 
 try:
     import huggingface_hub as _hf_hub
@@ -164,6 +165,9 @@ def _coerce_product(item, idx=0):
         "category": category,
         "features": features,
         "categories": categories,
+        "image_url": str(item.get("image_url") or item.get("image") or item.get("main_image") or ""),
+        "store": str(item.get("store") or item.get("brand") or "Amazon"),
+        "parent_asin": str(item.get("parent_asin") or item.get("asin") or "-"),
         "price": _safe_float(item.get("price")),
         "average_rating": _safe_float(item.get("average_rating")),
         "rating_number": _safe_float(item.get("rating_number")),
@@ -252,6 +256,18 @@ def _get_product(name: str) -> Dict[str, Any]:
     return next((p for p in PRODUCTS if p["name"] == name), PRODUCTS[0])
 
 
+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}"
+
+
 def _meta(product_or_meta: Dict[str, Any]) -> Dict[str, Any]:
     return {
         "features_text": product_or_meta.get("features", product_or_meta.get("features_text", "")),
@@ -404,7 +420,25 @@ def consumer_product_view(product_name: str, selected_aspect: str) -> Tuple[str,
         result = _predict_product(product_name)
     except Exception:
         return _error_html(traceback.format_exc(limit=5)), "", "", []
-    detail = f'<div class="product-card"><h3>{_esc(product["name"])}</h3><p class="muted">{_esc(product["categories"])}</p><div class="meta-pills"><span>Source: {_esc(product.get("source", "demo"))}</span><span>Price: ${_safe_float(product["price"]):.2f}</span><span>Rating: {_safe_float(product["average_rating"]):.1f}</span><span>Reviews: {int(_safe_float(product["rating_number"]))}</span></div><p><b>Metadata:</b> {_esc(product["features"])}</p>{_recommendation_html(result, product["name"])}{_overall_html(result)}</div>'
+    image_html = (
+        f'<img class="product-img" src="{_esc(_product_image_url(product))}" '
+        f'alt="{_esc(product["name"])} product image" loading="lazy">'
+    )
+    store = product.get("store") or "Amazon"
+    asin = product.get("parent_asin") or "-"
+    detail = (
+        f'<div class="product-card product-layout">{image_html}<div>'
+        f'<h3>{_esc(product["name"])}</h3>'
+        f'<p class="muted">{_esc(product["categories"])}</p>'
+        f'<div class="meta-pills"><span>Store: {_esc(store)}</span>'
+        f'<span>ASIN: {_esc(asin)}</span>'
+        f'<span>Source: {_esc(product.get("source", "demo"))}</span>'
+        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'{_recommendation_html(result, product["name"])}{_overall_html(result)}</div></div>'
+    )
     evidence = f'<h4>Key review evidence</h4>{_highlight_review(product["review"], selected_aspect)}'
     return detail, _aspect_cards(result, product["review"], selected_aspect), evidence, _aspect_rows(result, product["review"])
 
@@ -622,6 +656,8 @@ 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; }
 .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); }
@@ -654,7 +690,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 { grid-template-columns:1fr; } }
+@media (max-width:860px) { .aspect-grid, .metric-grid, .product-layout { grid-template-columns:1fr; } .product-img { width:100%; height:220px; } }
 """