mirror of
https://github.com/NVIDIA/dgx-spark-playbooks.git
synced 2026-06-19 21:03:51 +00:00
1215 lines
46 KiB
Python
1215 lines
46 KiB
Python
"""Enterprise Fashion Recommender — FastAPI + vanilla HTML/CSS
|
||
|
||
Serves real HLLM-trained recommendations via FAISS nearest-neighbor search,
|
||
re-ranked by the LightGBM lambdarank model trained in Step 5. Item prices
|
||
shown in the UI are the PPO pricing agent's optimized prices by default;
|
||
pass --static-prices to display the original catalog (MSRP) prices instead.
|
||
|
||
Default: python app.py (HLLM retrieval + LightGBM rerank, PPO-optimized prices)
|
||
Retriever only: python app.py --retriever-only (HLLM retrieval, no rerank — for ablation)
|
||
Static prices: python app.py --static-prices (display original MSRP instead of PPO-optimized prices)
|
||
|
||
Opens at http://localhost:7860
|
||
"""
|
||
|
||
import argparse
|
||
import os
|
||
import subprocess
|
||
import time
|
||
from datetime import datetime
|
||
from pathlib import Path
|
||
|
||
import faiss
|
||
import lightgbm as lgb
|
||
import numpy as np
|
||
import pandas as pd
|
||
import uvicorn
|
||
from fastapi import FastAPI
|
||
from fastapi.responses import HTMLResponse
|
||
|
||
from prepare_data import looks_non_dress
|
||
|
||
|
||
def _parse_args() -> argparse.Namespace:
|
||
ap = argparse.ArgumentParser(description=__doc__.split('\n\n', 1)[0])
|
||
ap.add_argument('--retriever-only', action='store_true',
|
||
help='Skip the LightGBM re-ranker. Returns FAISS top-K directly.')
|
||
ap.add_argument('--static-prices', action='store_true',
|
||
help='Show the original MSRP from the catalog instead of '
|
||
'the PPO pricing agent\'s optimized prices.')
|
||
ap.add_argument('--host', default='0.0.0.0')
|
||
ap.add_argument('--port', type=int, default=7860)
|
||
return ap.parse_args()
|
||
|
||
|
||
ARGS = _parse_args()
|
||
USE_RERANKER = not ARGS.retriever_only
|
||
USE_OPTIMIZED_PRICES = not ARGS.static_prices
|
||
|
||
WORKSPACE = os.environ.get('PLAYBOOK_WORKSPACE', os.path.expanduser('~'))
|
||
DATA_DIR = os.path.join(WORKSPACE, "data")
|
||
MODELS_DIR = Path(WORKSPACE) / "models"
|
||
|
||
# Optional Nemotron client (gracefully degrades if server not running)
|
||
try:
|
||
from nemotron_client import get_explanation_or_fallback
|
||
HAS_NEMOTRON_CLIENT = True
|
||
except ImportError:
|
||
HAS_NEMOTRON_CLIENT = False
|
||
|
||
# --- Load item metadata ---
|
||
print("Loading data...")
|
||
item_meta = pd.read_parquet(os.path.join(DATA_DIR, "processed", "dress_metadata.parquet"))
|
||
interactions = pd.read_parquet(os.path.join(DATA_DIR, "processed", "dress_interactions.parquet"))
|
||
print(f" Raw: {len(item_meta):,} items, {len(interactions):,} interactions")
|
||
|
||
# Serve-time non-dress filter. The upstream `prepare_data.py` filter is a
|
||
# loose substring match that admits ~244 items obviously not dresses
|
||
# (socks, jackets, men's pants — see findings.md). Trust the upstream
|
||
# positive selection; just subtract obvious false-positives here.
|
||
_drop_mask = item_meta['title'].fillna('').apply(looks_non_dress)
|
||
_n_dropped = int(_drop_mask.sum())
|
||
item_meta = item_meta.loc[~_drop_mask].reset_index(drop=True)
|
||
_valid_ids = set(item_meta['item_id'])
|
||
interactions = interactions[interactions['item_id'].isin(_valid_ids)]
|
||
interactions = interactions.sort_values(['user_id', 'timestamp'])
|
||
print(f" Filtered: dropped {_n_dropped:,} non-dress items; "
|
||
f"{len(item_meta):,} items, {len(interactions):,} interactions remain")
|
||
|
||
# --- PPO-optimized prices (default) -----------------------------------------
|
||
# The pricing agent's trained PPO policy chooses a per-item price multiplier;
|
||
# we evaluate it once at day=0 on a fresh inventory state and cache the result
|
||
# so /api/recommend stays a cheap read. --static-prices skips this entirely
|
||
# and falls back to the catalog's MSRP.
|
||
optimized_prices: dict[str, float] = {}
|
||
if USE_OPTIMIZED_PRICES:
|
||
from pricing_agent import (
|
||
PRICING_CONFIG,
|
||
InventoryState,
|
||
PPOPolicy,
|
||
_build_actor_critic,
|
||
load_amazon_dresses_catalog,
|
||
load_checkpoint,
|
||
)
|
||
|
||
PPO_CKPT = MODELS_DIR / "pricing_ppo" / "policy.pt"
|
||
if not PPO_CKPT.exists():
|
||
raise FileNotFoundError(
|
||
f"PPO pricing checkpoint not found at {PPO_CKPT}.\n"
|
||
"Train it first (`bash assets/pricing_agent.sh`) "
|
||
"or launch with --static-prices to display the original MSRP."
|
||
)
|
||
|
||
print(f"Loading PPO pricing policy from {PPO_CKPT}...")
|
||
import torch # local; pricing_agent imports torch lazily
|
||
_ppo_ckpt = load_checkpoint(PPO_CKPT)
|
||
_multipliers = np.asarray(_ppo_ckpt["multipliers"], dtype=np.float64)
|
||
_ppo_catalog = load_amazon_dresses_catalog(n_items=0, seed=0)
|
||
_ppo_state = InventoryState.initialize(_ppo_catalog, PRICING_CONFIG, seed=0)
|
||
_ppo_device = "cuda" if torch.cuda.is_available() else "cpu"
|
||
_ppo_net = _build_actor_critic(len(_multipliers)).to(_ppo_device)
|
||
_ppo_net.load_state_dict(_ppo_ckpt["state_dict"])
|
||
_ppo_policy = PPOPolicy(
|
||
net=_ppo_net,
|
||
multipliers=_multipliers,
|
||
device=_ppo_device,
|
||
horizon=_ppo_ckpt["config"]["horizon"],
|
||
price_norm=float(_ppo_state.base_prices.max()),
|
||
inv_norm=float(_ppo_state._initial_inventories.max()),
|
||
greedy=True,
|
||
)
|
||
_ppo_day0 = _ppo_policy.select_prices(_ppo_state, day=0)
|
||
optimized_prices = {
|
||
str(iid): float(p)
|
||
for iid, p in zip(_ppo_catalog["item_id"].tolist(), _ppo_day0)
|
||
}
|
||
print(f" Optimized prices computed for {len(optimized_prices):,} items")
|
||
else:
|
||
print("Static prices mode (--static-prices): showing catalog MSRP.")
|
||
|
||
item_lookup = {}
|
||
for _, row in item_meta.iterrows():
|
||
iid = row['item_id']
|
||
base = float(row['price']) if pd.notna(row.get('price')) else None
|
||
if USE_OPTIMIZED_PRICES and str(iid) in optimized_prices:
|
||
display_price = optimized_prices[str(iid)]
|
||
else:
|
||
display_price = base
|
||
item_lookup[iid] = {
|
||
'title': str(row.get('title', ''))[:55],
|
||
'price': display_price,
|
||
'base_price': base,
|
||
'image_url': str(row.get('image_url', '')),
|
||
}
|
||
|
||
user_histories = {}
|
||
for uid, group in interactions.groupby('user_id'):
|
||
user_histories[uid] = group.to_dict('records')
|
||
|
||
good_users_raw = sorted(
|
||
[(uid, len(h)) for uid, h in user_histories.items() if len(h) >= 10],
|
||
key=lambda x: -x[1]
|
||
)[:200]
|
||
|
||
# Each of the 200 displayed users gets a stable, UNIQUE women's name
|
||
# (no hash collisions). Assigned by alphabetical user_id so it's
|
||
# deterministic across restarts regardless of interaction-count ties.
|
||
NAME_POOL = [
|
||
'Aaliyah','Abigail','Adelina','Aisha','Alaia','Alessia','Alina','Amara','Amaya','Amelia',
|
||
'Amira','Anais','Andrea','Anika','Anya','Aoife','Aria','Ariana','Astrid','Aurora',
|
||
'Ava','Aya','Ayla','Azure','Beatrix','Belen','Bianca','Briar','Brigitte','Calla',
|
||
'Camila','Carmen','Cassia','Celeste','Charlotte','Chiara','Chloe','Claire','Clara','Constance',
|
||
'Coralie','Dahlia','Daniela','Daphne','Delfina','Devi','Dunja','Eden','Edith','Elena',
|
||
'Eliana','Elif','Elin','Elisa','Eloise','Elsa','Ember','Emilia','Emma','Esme',
|
||
'Esra','Estelle','Eva','Evelyn','Farah','Fatima','Faye','Felicia','Fiona','Florence',
|
||
'Freya','Frida','Gabriela','Genevieve','Giulia','Greta','Gwen','Hadley','Hana','Hannah',
|
||
'Harlow','Hazel','Helena','Hira','Iara','Ida','Imani','Imogen','Inara','Ingrid',
|
||
'Iris','Isabella','Isadora','Isla','Ivy','Iza','Jade','Jana','Jasmine','Josephine',
|
||
'Juliette','June','Juno','Kaia','Kalia','Kara','Karina','Katia','Kavya','Khloe',
|
||
'Kira','Kiri','Lailah','Lana','Larisa','Lavinia','Layla','Leila','Lena','Lila',
|
||
'Liliana','Lily','Linnea','Lior','Liv','Liya','Lola','Lorena','Luna','Lyla',
|
||
'Maeve','Magnolia','Maja','Malia','Manon','Mara','Marcela','Margot','Maria','Marina',
|
||
'Marisol','Marlowe','Maya','Mei','Melisa','Mia','Mila','Mira','Miriam','Moana',
|
||
'Nadia','Naia','Naomi','Nara','Natasha','Nia','Niamh','Nika','Nina','Nisha',
|
||
'Nora','Noor','Nova','Oksana','Olivia','Ophelia','Paloma','Penelope','Petra','Phoebe',
|
||
'Priya','Quinn','Quintessa','Rachel','Raina','Raisa','Reema','Renata','Rhea','Riya',
|
||
'Romy','Rosalie','Ruby','Saanvi','Saba','Saoirse','Sasha','Selena','Selma','Senna',
|
||
'Serena','Shira','Sienna','Simone','Sloan','Sofia','Soleil','Sophia','Stella','Talia',
|
||
]
|
||
assert len(NAME_POOL) == 200, f"NAME_POOL must have exactly 200 entries (has {len(NAME_POOL)})"
|
||
assert len(set(NAME_POOL)) == len(NAME_POOL), "NAME_POOL has duplicates"
|
||
_sorted_uids = sorted(uid for uid, _ in good_users_raw)
|
||
_uid_to_name = {uid: NAME_POOL[i] for i, uid in enumerate(_sorted_uids)}
|
||
|
||
good_users = [(uid, count, _uid_to_name[uid]) for uid, count in good_users_raw]
|
||
|
||
item_popularity = interactions['item_id'].value_counts().index.tolist()
|
||
|
||
# --- Load trained HLLM embeddings + FAISS index ---
|
||
print("Loading HLLM embeddings...")
|
||
hllm_embeddings = np.load(os.path.join(DATA_DIR, "processed", "hllm_item_embeddings.npy")).astype(np.float32)
|
||
hllm_id_map = np.load(os.path.join(DATA_DIR, "processed", "hllm_item_id_map.npy"), allow_pickle=True)
|
||
|
||
# Build item_id → HLLM index mapping (skip padding at index 0)
|
||
item_to_hllm_idx = {str(iid): i for i, iid in enumerate(hllm_id_map) if iid != '[PAD]'}
|
||
hllm_idx_to_item = {i: str(iid) for i, iid in enumerate(hllm_id_map) if iid != '[PAD]'}
|
||
|
||
# Build FAISS index over item embeddings (skip padding row 0)
|
||
# Use all rows including padding for index consistency (HLLM uses 1-indexed)
|
||
print("Building FAISS index...")
|
||
faiss_index = faiss.IndexFlatIP(hllm_embeddings.shape[1])
|
||
faiss_index.add(hllm_embeddings)
|
||
print(f" FAISS index: {faiss_index.ntotal:,} vectors, {hllm_embeddings.shape[1]} dims")
|
||
|
||
# Build user embeddings from purchase history (mean of item embeddings)
|
||
print("Building user embeddings...")
|
||
user_embeddings = {}
|
||
for uid, records in user_histories.items():
|
||
item_ids = [r['item_id'] for r in records]
|
||
idxs = [item_to_hllm_idx[iid] for iid in item_ids if iid in item_to_hllm_idx]
|
||
if idxs:
|
||
emb = hllm_embeddings[idxs].mean(axis=0)
|
||
emb = emb / (np.linalg.norm(emb) + 1e-8)
|
||
user_embeddings[uid] = emb
|
||
print(f" {len(user_embeddings):,} user embeddings built")
|
||
|
||
# --- Re-ranker (default: LightGBM; bypass with --retriever-only) ---
|
||
RERANKER = None
|
||
ITEM_FEAT_ARR = None
|
||
USER_SCALARS = {}
|
||
RETRIEVAL_TOP_K = 100 # candidates pulled from FAISS before rerank
|
||
FINAL_TOP_K = 4 # items returned to the UI (top-4 gives recs more room beside the sidebar)
|
||
|
||
if USE_RERANKER:
|
||
from train_reranker_lightgbm import (
|
||
FEATURE_COLS, build_user_samples, compute_item_stats, compute_user_stats,
|
||
)
|
||
|
||
LGBM_PATH = MODELS_DIR / "reranker_lightgbm" / "reranker_lightgbm.txt"
|
||
if not LGBM_PATH.exists():
|
||
raise FileNotFoundError(
|
||
f"LightGBM re-ranker checkpoint not found at {LGBM_PATH}.\n"
|
||
"Train it first (`bash assets/train_reranker.sh`) "
|
||
"or launch with --retriever-only to skip the re-ranker."
|
||
)
|
||
print(f"Loading LightGBM re-ranker from {LGBM_PATH}...")
|
||
RERANKER = lgb.Booster(model_file=str(LGBM_PATH))
|
||
|
||
print("Precomputing item / user feature tables for re-ranker...")
|
||
_t = time.time()
|
||
_item_stats = compute_item_stats(interactions, item_meta)
|
||
_item_idx_to_id = [str(i) for i in hllm_id_map]
|
||
_item_feat_cols = [
|
||
'item_total_purchases', 'item_unique_buyers',
|
||
'item_pop_30d', 'item_pop_90d', 'item_pop_180d', 'item_trend',
|
||
'item_recency_days', 'item_age_days',
|
||
'log_price', 'title_length', 'desc_length', 'has_image',
|
||
]
|
||
ITEM_FEAT_ARR = (
|
||
_item_stats.reindex(_item_idx_to_id).fillna(0)[_item_feat_cols]
|
||
.to_numpy(dtype=np.float32)
|
||
)
|
||
|
||
# Build user samples in the format compute_user_stats expects. For inference
|
||
# we use the FULL history (no leave-last-out), so hist_idxs == idxs.
|
||
_item_to_idx = {str(iid): i for i, iid in enumerate(hllm_id_map) if iid != '[PAD]'}
|
||
_samples_for_inference = []
|
||
for _uid, _records in user_histories.items():
|
||
_seq = [r['item_id'] for r in _records]
|
||
_ts = [int(r['timestamp']) for r in _records]
|
||
_idxs = [_item_to_idx[i] for i in _seq if i in _item_to_idx]
|
||
_ts_kept = [t for i, t in zip(_seq, _ts) if i in _item_to_idx]
|
||
if _idxs:
|
||
_samples_for_inference.append((_uid, _idxs, _idxs[-1], _ts_kept))
|
||
USER_SCALARS = compute_user_stats(_samples_for_inference, item_meta, _item_idx_to_id)
|
||
_LOG_PRICE_COL = _item_feat_cols.index('log_price')
|
||
|
||
_USER_HISTORY_HLLM_IDX = {
|
||
uid: _idxs for (uid, _idxs, _, _) in _samples_for_inference
|
||
}
|
||
print(f" Precompute done in {time.time()-_t:.1f}s "
|
||
f"({RERANKER.num_trees()} trees, {len(FEATURE_COLS)} features, "
|
||
f"{len(USER_SCALARS):,} user scalar rows)")
|
||
else:
|
||
print("Re-ranker disabled (--retriever-only).")
|
||
|
||
|
||
def _rerank_candidates(
|
||
user_id: str,
|
||
cand_hllm_idxs: np.ndarray,
|
||
cand_scores: np.ndarray,
|
||
) -> np.ndarray:
|
||
"""Score candidates with LightGBM. Returns indices into ``cand_hllm_idxs``
|
||
sorted by descending model score. Caller filters / takes top-K.
|
||
|
||
Vectorized over candidates only (one user per request, K~=100).
|
||
"""
|
||
history = _USER_HISTORY_HLLM_IDX.get(user_id, [])
|
||
K = len(cand_hllm_idxs)
|
||
F = len(FEATURE_COLS)
|
||
f2p = {c: i for i, c in enumerate(FEATURE_COLS)}
|
||
X = np.zeros((K, F), dtype=np.float32)
|
||
|
||
# HLLM signals
|
||
X[:, f2p['hllm_dot_product']] = cand_scores
|
||
if history:
|
||
recent = history[-10:]
|
||
hist_emb = hllm_embeddings[recent] # (h, dim)
|
||
cand_emb = hllm_embeddings[cand_hllm_idxs] # (K, dim)
|
||
sims = cand_emb @ hist_emb.T # (K, h)
|
||
X[:, f2p['hllm_max_hist_sim']] = sims.max(axis=1)
|
||
X[:, f2p['hllm_avg_hist_sim']] = sims.mean(axis=1)
|
||
|
||
# Item-side
|
||
item_block = ITEM_FEAT_ARR[cand_hllm_idxs] # (K, 12)
|
||
for c, name in enumerate(_item_feat_cols):
|
||
X[:, f2p[name]] = item_block[:, c]
|
||
|
||
# User-side
|
||
us = USER_SCALARS.get(user_id, {})
|
||
for col in ('user_total_purchases', 'user_unique_items',
|
||
'user_avg_price', 'user_price_std', 'user_recency_days'):
|
||
X[:, f2p[col]] = us.get(col, 0.0)
|
||
|
||
# Cross
|
||
cand_price = np.expm1(item_block[:, _LOG_PRICE_COL])
|
||
u_avg = us.get('user_avg_price', 0.0)
|
||
X[:, f2p['price_ratio']] = cand_price / (u_avg + 1e-8)
|
||
X[:, f2p['price_diff']] = cand_price - u_avg
|
||
|
||
hist_set = set(history)
|
||
X[:, f2p['is_repurchase']] = np.fromiter(
|
||
(1.0 if int(c) in hist_set else 0.0 for c in cand_hllm_idxs),
|
||
dtype=np.float32, count=K,
|
||
)
|
||
|
||
scores = RERANKER.predict(X)
|
||
return np.argsort(-scores), scores
|
||
|
||
|
||
app = FastAPI()
|
||
|
||
|
||
_gpu_cache = {'data': None, 'ts': 0}
|
||
|
||
def gpu_stats():
|
||
"""GPU stats with 5-second cache to avoid nvidia-smi overhead on every request."""
|
||
now = time.time()
|
||
if _gpu_cache['data'] and now - _gpu_cache['ts'] < 5:
|
||
return _gpu_cache['data']
|
||
try:
|
||
r = subprocess.run(
|
||
['nvidia-smi', '--query-gpu=utilization.gpu,memory.used,memory.total,temperature.gpu,power.draw',
|
||
'--format=csv,noheader,nounits', '-i=1'],
|
||
capture_output=True, text=True, timeout=5)
|
||
p = r.stdout.strip().split(', ')
|
||
data = {'util': float(p[0]), 'vram_used': float(p[1])/1024,
|
||
'vram_total': float(p[2])/1024, 'temp': float(p[3]), 'power': float(p[4])}
|
||
except:
|
||
data = {'util': 0, 'vram_used': 0, 'vram_total': 252, 'temp': 0, 'power': 0}
|
||
_gpu_cache['data'] = data
|
||
_gpu_cache['ts'] = now
|
||
return data
|
||
|
||
|
||
@app.get("/api/users")
|
||
def api_users():
|
||
return [{"id": uid, "count": c, "name": name} for uid, c, name in good_users]
|
||
|
||
|
||
@app.get("/api/history/{user_id}")
|
||
def api_history(user_id: str):
|
||
history = user_histories.get(user_id, [])[-5:]
|
||
return [{
|
||
'item_id': h['item_id'],
|
||
'title': item_lookup.get(h['item_id'], {}).get('title', ''),
|
||
'price': item_lookup.get(h['item_id'], {}).get('price'),
|
||
'base_price': item_lookup.get(h['item_id'], {}).get('base_price'),
|
||
'image_url': item_lookup.get(h['item_id'], {}).get('image_url', ''),
|
||
'date': datetime.fromtimestamp(int(h['timestamp'])).strftime('%b %Y'),
|
||
} for h in history]
|
||
|
||
|
||
@app.get("/api/recommend/{user_id}")
|
||
def api_recommend(user_id: str):
|
||
t0 = time.time()
|
||
history = user_histories.get(user_id, [])
|
||
user_items = set(h['item_id'] for h in history)
|
||
|
||
lat_retriever_ms = 0.0
|
||
lat_reranker_ms = 0.0
|
||
lat_explainer_ms = 0.0
|
||
|
||
user_emb = user_embeddings.get(user_id)
|
||
if user_emb is not None:
|
||
t = time.time()
|
||
query = user_emb.reshape(1, -1).astype(np.float32)
|
||
distances, indices = faiss_index.search(query, RETRIEVAL_TOP_K)
|
||
lat_retriever_ms = (time.time() - t) * 1000
|
||
cand_hllm_idxs = indices[0]
|
||
cand_scores = distances[0].astype(np.float32)
|
||
|
||
if USE_RERANKER:
|
||
t = time.time()
|
||
order, rerank_scores = _rerank_candidates(user_id, cand_hllm_idxs, cand_scores)
|
||
lat_reranker_ms = (time.time() - t) * 1000
|
||
display_scores = rerank_scores
|
||
method = "HLLM + LightGBM"
|
||
else:
|
||
order = np.arange(len(cand_hllm_idxs))
|
||
display_scores = cand_scores
|
||
method = "HLLM"
|
||
|
||
candidates = []
|
||
scores = []
|
||
for rank in order:
|
||
idx = int(cand_hllm_idxs[rank])
|
||
item_id = hllm_idx_to_item.get(idx)
|
||
# Require item to be in the filtered metadata (drops non-dress
|
||
# items that the unfiltered FAISS index still surfaces) and not
|
||
# already in the user's history.
|
||
if item_id and item_id in item_lookup and item_id not in user_items:
|
||
candidates.append(item_id)
|
||
scores.append(float(display_scores[rank]))
|
||
if len(candidates) >= FINAL_TOP_K:
|
||
break
|
||
else:
|
||
# Cold-start fallback: popularity (re-ranker requires a user embedding)
|
||
candidates = [i for i in item_popularity if i not in user_items][:FINAL_TOP_K]
|
||
scores = [0.97 - i * 0.04 for i in range(len(candidates))]
|
||
method = "Popularity"
|
||
|
||
recs = []
|
||
for item_id, score in zip(candidates, scores):
|
||
info = item_lookup.get(item_id, {})
|
||
recs.append({
|
||
'item_id': item_id,
|
||
'title': info.get('title', ''),
|
||
'price': info.get('price'),
|
||
'base_price': info.get('base_price'),
|
||
'image_url': info.get('image_url', ''),
|
||
'score': round(score, 3),
|
||
})
|
||
|
||
# Build style-focused fallback (used only if Nemotron unreachable)
|
||
recent_titles = [item_lookup.get(h['item_id'], {}).get('title', '') for h in history[-3:]]
|
||
recent_titles = [t for t in recent_titles if t]
|
||
if recent_titles:
|
||
fallback = (
|
||
"These dresses share style characteristics with your recent picks — "
|
||
"similar cuts, silhouettes, and visual themes identified by the HLLM retriever "
|
||
"and ranked by the LightGBM re-ranker."
|
||
)
|
||
else:
|
||
fallback = "Showing popular dresses. Purchase a few items for personalized style matches."
|
||
|
||
# Try Nemotron explanation (graceful fallback if Ollama unreachable)
|
||
llm_generated = False
|
||
if HAS_NEMOTRON_CLIENT and recent_titles:
|
||
hist_for_llm = [{'title': item_lookup.get(h['item_id'], {}).get('title', ''),
|
||
'price': item_lookup.get(h['item_id'], {}).get('price')}
|
||
for h in history[-5:]]
|
||
t = time.time()
|
||
explanation, llm_generated = get_explanation_or_fallback(hist_for_llm, recs, fallback)
|
||
lat_explainer_ms = (time.time() - t) * 1000
|
||
else:
|
||
explanation = fallback
|
||
|
||
gpu = gpu_stats()
|
||
return {
|
||
'recommendations': recs,
|
||
'explanation': explanation,
|
||
'llm_generated': llm_generated,
|
||
'method': method,
|
||
'latency_ms': round((time.time() - t0) * 1000),
|
||
'latency_retriever_ms': round(lat_retriever_ms, 1),
|
||
'latency_reranker_ms': round(lat_reranker_ms, 1),
|
||
'latency_explainer_ms': round(lat_explainer_ms),
|
||
'reranker_active': USE_RERANKER,
|
||
'gpu': gpu,
|
||
}
|
||
|
||
|
||
@app.get("/", response_class=HTMLResponse)
|
||
def index():
|
||
return PAGE
|
||
|
||
|
||
PAGE = r"""<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>NVIDIA Fashion · Personalized Recommendations</title>
|
||
<style>
|
||
:root {
|
||
--bg: #fafafa;
|
||
--surface: #ffffff;
|
||
--surface-2: #f3f3f3;
|
||
--border: #e5e5e5;
|
||
--border-strong: #d0d0d0;
|
||
--text: #111111;
|
||
--text-muted: #5f5f5f;
|
||
--text-dim: #9a9a9a;
|
||
--accent: #76b900;
|
||
--accent-hover: #6aa600;
|
||
--star: #f5a623;
|
||
|
||
--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||
--mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Liberation Mono", monospace;
|
||
|
||
--t-micro: 11px;
|
||
--t-meta: 12px;
|
||
--t-body: 13px;
|
||
--t-title: 15px;
|
||
--t-heading: 18px;
|
||
--t-hero: 24px;
|
||
|
||
--s-1: 4px;
|
||
--s-2: 8px;
|
||
--s-3: 12px;
|
||
--s-4: 16px;
|
||
--s-5: 20px;
|
||
--s-6: 32px;
|
||
--s-7: 48px;
|
||
|
||
--radius: 6px;
|
||
--radius-lg: 10px;
|
||
}
|
||
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
|
||
body {
|
||
font-family: var(--font);
|
||
font-size: var(--t-body);
|
||
color: var(--text);
|
||
background: var(--bg);
|
||
line-height: 1.5;
|
||
}
|
||
a { color: inherit; text-decoration: none; }
|
||
|
||
/* ─── Utility bar ─────────────────────────────────────── */
|
||
.utility-bar {
|
||
background: #111;
|
||
color: #f5f5f5;
|
||
font-size: var(--t-micro);
|
||
padding: 6px var(--s-6);
|
||
display: flex; justify-content: space-between; align-items: center;
|
||
}
|
||
.utility-bar .util-center { flex: 1; text-align: center; letter-spacing: 0.04em; }
|
||
.utility-bar a { color: #d4d4d4; }
|
||
.utility-bar a:hover { color: #fff; }
|
||
|
||
/* ─── Navbar ──────────────────────────────────────────── */
|
||
.navbar {
|
||
background: var(--surface);
|
||
border-bottom: 1px solid var(--border);
|
||
padding: var(--s-3) var(--s-6);
|
||
display: grid;
|
||
grid-template-columns: auto 1fr auto;
|
||
align-items: center;
|
||
gap: var(--s-6);
|
||
}
|
||
.navbar .brand {
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
font-size: var(--t-heading);
|
||
font-weight: 700;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.navbar .brand .dot { color: var(--accent); font-size: 12px; line-height: 0; }
|
||
.navbar .brand .word { color: var(--text); }
|
||
.navbar .brand .subword { color: var(--text-muted); font-weight: 500; }
|
||
.navbar .cat-nav {
|
||
display: flex; gap: var(--s-5);
|
||
font-size: var(--t-body);
|
||
color: var(--text-muted);
|
||
}
|
||
.navbar .cat-nav a:hover { color: var(--text); }
|
||
.navbar .nav-right {
|
||
display: flex; align-items: center; gap: var(--s-4);
|
||
}
|
||
.navbar .searchbox {
|
||
background: var(--surface-2);
|
||
border: 1px solid var(--border);
|
||
border-radius: 999px;
|
||
padding: 6px 14px;
|
||
width: 320px;
|
||
font-size: var(--t-meta);
|
||
color: var(--text);
|
||
font-family: inherit;
|
||
}
|
||
.navbar .searchbox::placeholder { color: var(--text-dim); }
|
||
.navbar .icon-link {
|
||
display: inline-flex; flex-direction: column; align-items: center;
|
||
font-size: 10px;
|
||
color: var(--text-muted);
|
||
line-height: 1.1;
|
||
}
|
||
.navbar .icon-link .glyph { font-size: 18px; }
|
||
|
||
/* ─── Hero ────────────────────────────────────────────── */
|
||
.container {
|
||
max-width: 1440px;
|
||
margin: 0 auto;
|
||
padding: var(--s-3) var(--s-6) var(--s-3);
|
||
}
|
||
.hero {
|
||
display: flex; align-items: center; justify-content: space-between;
|
||
gap: var(--s-5);
|
||
margin-bottom: var(--s-3);
|
||
}
|
||
.hero h1 {
|
||
font-size: 26px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.015em;
|
||
}
|
||
.hero h1 .edit { color: var(--text-dim); margin-left: 6px; font-size: 14px; cursor: pointer; }
|
||
.hero-actions { display: flex; gap: var(--s-3); align-items: center; }
|
||
.hero-actions select {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border-strong);
|
||
padding: 9px 12px;
|
||
border-radius: var(--radius);
|
||
font-size: var(--t-meta);
|
||
color: var(--text);
|
||
font-family: inherit;
|
||
min-width: 240px;
|
||
}
|
||
.hero-actions button {
|
||
padding: 9px 18px;
|
||
background: #111;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: var(--radius);
|
||
font-size: var(--t-meta);
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
.hero-actions button:hover { background: #2a2a2a; }
|
||
.hero-actions button:disabled { background: var(--text-dim); cursor: wait; }
|
||
|
||
/* ─── Section ─────────────────────────────────────────── */
|
||
.section { margin-bottom: var(--s-3); }
|
||
.section-head {
|
||
display: flex; align-items: baseline; justify-content: space-between;
|
||
margin-bottom: var(--s-2);
|
||
}
|
||
.section-head h2 {
|
||
font-size: var(--t-heading);
|
||
font-weight: 600;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.section-head .view-all {
|
||
font-size: var(--t-meta);
|
||
color: var(--text-muted);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
/* ─── Product grid ────────────────────────────────────── */
|
||
.product-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: var(--s-4);
|
||
}
|
||
.product {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
transition: box-shadow .15s ease, border-color .15s ease;
|
||
position: relative;
|
||
}
|
||
.product:hover { box-shadow: 0 4px 18px rgba(0,0,0,0.06); border-color: var(--border-strong); }
|
||
.product .img {
|
||
width: 100%;
|
||
aspect-ratio: 1/1;
|
||
background: #fff;
|
||
overflow: hidden;
|
||
position: relative;
|
||
}
|
||
/* Recommendation cards inherit 1:1 from .product .img above. With top-4
|
||
recs the cards are wide enough (~270px) that 1:1 + object-fit: contain
|
||
shows the full dress without truncation. */
|
||
/* Show the whole product photo — no top/bottom cropping. Letterbox sides
|
||
against the card background if the image's natural aspect differs. */
|
||
.product .img img { width: 100%; height: 100%; object-fit: contain; display: block; }
|
||
.no-img {
|
||
height: 100%;
|
||
display: flex; align-items: center; justify-content: center;
|
||
color: var(--text-dim);
|
||
font-size: var(--t-micro);
|
||
}
|
||
.product .heart {
|
||
position: absolute;
|
||
top: 10px; right: 10px;
|
||
background: rgba(255,255,255,0.55);
|
||
backdrop-filter: blur(4px);
|
||
border: 1px solid rgba(0,0,0,0.06);
|
||
border-radius: 50%;
|
||
width: 30px; height: 30px;
|
||
display: flex; align-items: center; justify-content: center;
|
||
cursor: pointer;
|
||
transition: background .15s, color .15s;
|
||
font-size: 15px;
|
||
color: #555;
|
||
}
|
||
.product .heart:hover { background: rgba(255,255,255,0.95); color: #d62828; }
|
||
.product .info { padding: var(--s-2) var(--s-3) var(--s-3); }
|
||
.product .title {
|
||
font-size: var(--t-meta);
|
||
color: var(--text);
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
overflow: hidden;
|
||
margin-bottom: var(--s-1);
|
||
line-height: 1.35;
|
||
min-height: calc(var(--t-meta) * 1.35 * 2);
|
||
}
|
||
.product .price {
|
||
font-size: var(--t-title);
|
||
font-weight: 700;
|
||
color: var(--text);
|
||
display: flex;
|
||
align-items: baseline;
|
||
gap: 6px;
|
||
flex-wrap: wrap;
|
||
}
|
||
.product .price .delta {
|
||
font-size: var(--t-micro);
|
||
font-weight: 600;
|
||
letter-spacing: 0.01em;
|
||
}
|
||
.product .price .delta.up { color: #1b8f3a; }
|
||
.product .price .delta.down { color: #c0392b; }
|
||
.product .rating {
|
||
margin-top: var(--s-1);
|
||
display: flex; align-items: center; gap: 4px;
|
||
font-size: var(--t-micro);
|
||
color: var(--text-muted);
|
||
}
|
||
.product .rating .stars { color: var(--star); letter-spacing: 1px; }
|
||
.product .rating .count { color: var(--text-dim); }
|
||
|
||
/* ─── Recommendations row: why-panel + 4 cards as a 5-column grid where
|
||
all cells are the same width. #recs is layout-invisible so its 4 child
|
||
product cards flow into columns 2-5 as siblings to the why-panel. */
|
||
.recs-layout {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: var(--s-4);
|
||
align-items: stretch;
|
||
}
|
||
.recs-layout > #recs { display: contents; }
|
||
.why-panel {
|
||
background: #f8f6f2;
|
||
border: 1px solid var(--border);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--s-4);
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
.why-panel ul { flex: 1; } /* bullets fill the middle; link sits at bottom */
|
||
.why-panel h3 {
|
||
font-size: var(--t-body);
|
||
font-weight: 700;
|
||
margin-bottom: var(--s-3);
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.why-panel h3 .icon { color: var(--accent); }
|
||
.why-panel ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin-bottom: var(--s-3);
|
||
}
|
||
.why-panel li {
|
||
font-size: var(--t-meta);
|
||
color: var(--text-muted);
|
||
padding: 4px 0 4px 16px;
|
||
position: relative;
|
||
line-height: 1.5;
|
||
text-align: justify;
|
||
text-justify: inter-word;
|
||
hyphens: auto;
|
||
}
|
||
.why-panel li::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0; top: 11px;
|
||
width: 6px; height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--accent);
|
||
}
|
||
.why-panel .see-how {
|
||
font-size: var(--t-micro);
|
||
color: var(--text-muted);
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
.why-panel .source-line {
|
||
font-size: var(--t-micro);
|
||
color: var(--text-dim);
|
||
margin-top: var(--s-3);
|
||
padding-top: var(--s-3);
|
||
border-top: 1px solid var(--border);
|
||
display: none;
|
||
}
|
||
.why-panel .source-line.visible { display: block; }
|
||
.why-panel .source-line b { color: var(--accent); }
|
||
.why-panel .source-line .badge {
|
||
display: inline-block;
|
||
font-size: 9px;
|
||
padding: 1px 5px;
|
||
border-radius: 3px;
|
||
background: rgba(118,185,0,0.12);
|
||
color: var(--accent);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.06em;
|
||
font-weight: 700;
|
||
margin-left: 4px;
|
||
}
|
||
.why-panel .source-line .badge.fallback { background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
|
||
|
||
/* ─── Trust footer ────────────────────────────────────── */
|
||
.trust-bar {
|
||
background: var(--surface);
|
||
border-top: 1px solid var(--border);
|
||
padding: var(--s-2) var(--s-6);
|
||
}
|
||
.trust-bar-inner {
|
||
max-width: 1440px;
|
||
margin: 0 auto;
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: var(--s-5);
|
||
}
|
||
.trust-cell {
|
||
display: flex; align-items: center; gap: var(--s-3);
|
||
}
|
||
.trust-cell .glyph {
|
||
width: 34px; height: 34px;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
background: var(--surface-2);
|
||
border-radius: 50%;
|
||
color: var(--text);
|
||
flex: 0 0 34px;
|
||
}
|
||
.trust-cell .label {
|
||
font-size: var(--t-meta);
|
||
font-weight: 600;
|
||
color: var(--text);
|
||
line-height: 1.2;
|
||
}
|
||
.trust-cell .sub {
|
||
font-size: var(--t-micro);
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
/* ─── System info strip (tiny) ───────────────────────── */
|
||
.sysinfo {
|
||
background: var(--surface);
|
||
border-top: 1px solid var(--border);
|
||
padding: 8px var(--s-6);
|
||
font-family: var(--mono);
|
||
font-size: 10px;
|
||
color: var(--text-dim);
|
||
display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
|
||
}
|
||
.sysinfo .lbl { color: var(--text-dim); }
|
||
.sysinfo .val { color: var(--text-muted); font-weight: 500; }
|
||
.sysinfo .sep { color: var(--border-strong); }
|
||
|
||
/* ─── Responsive: switch from grid to horizontal scroll at narrow widths
|
||
so cards stay full-size and the user swipes/scrolls instead of wrapping. */
|
||
@media (max-width: 1280px) {
|
||
.product-grid {
|
||
display: flex;
|
||
grid-template-columns: none;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
gap: var(--s-3);
|
||
padding-bottom: var(--s-2);
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.product-grid::-webkit-scrollbar { height: 6px; }
|
||
.product-grid::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
|
||
.product-grid .product {
|
||
flex: 0 0 200px;
|
||
scroll-snap-align: start;
|
||
}
|
||
/* In horizontal-scroll mode, also collapse the recs-layout grid and
|
||
reuse the same overflow strategy. */
|
||
.recs-layout {
|
||
display: flex;
|
||
grid-template-columns: none;
|
||
overflow-x: auto;
|
||
scroll-snap-type: x mandatory;
|
||
gap: var(--s-3);
|
||
padding-bottom: var(--s-2);
|
||
}
|
||
.recs-layout > .why-panel { flex: 0 0 200px; scroll-snap-align: start; }
|
||
.recs-layout > #recs { display: contents; }
|
||
.recs-layout > #recs > .product { flex: 0 0 200px; scroll-snap-align: start; }
|
||
}
|
||
@media (max-width: 1024px) {
|
||
.navbar { grid-template-columns: auto 1fr auto; gap: var(--s-4); padding: var(--s-3) var(--s-4); }
|
||
.navbar .cat-nav { display: none; }
|
||
.navbar .searchbox { width: 200px; }
|
||
.container { padding: var(--s-4) var(--s-4); }
|
||
.trust-bar-inner { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
|
||
}
|
||
@media (max-width: 640px) {
|
||
.navbar { grid-template-columns: auto auto; }
|
||
.navbar .nav-right .icon-link { display: none; }
|
||
.navbar .searchbox { display: none; }
|
||
.hero { flex-direction: column; align-items: stretch; }
|
||
.hero-actions { flex-wrap: wrap; }
|
||
.hero-actions select { min-width: 0; flex: 1; }
|
||
.utility-bar .util-right { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="utility-bar">
|
||
<span class="util-left">●</span>
|
||
<span class="util-center">Free shipping on orders over $75</span>
|
||
<a href="#" class="util-right">Download our app for exclusive offers ↗</a>
|
||
</div>
|
||
|
||
<nav class="navbar">
|
||
<a href="#" class="brand">
|
||
<span class="dot">●</span>
|
||
<span class="word">NVIDIA</span>
|
||
<span class="subword">Fashion</span>
|
||
</a>
|
||
<div class="cat-nav">
|
||
<a href="#">Women's</a>
|
||
<a href="#">Men's</a>
|
||
<a href="#">Kids</a>
|
||
<a href="#">Sale</a>
|
||
<a href="#">Inspiration</a>
|
||
</div>
|
||
<div class="nav-right">
|
||
<input class="searchbox" type="search" placeholder="Search dresses, brands, more…" aria-label="Search">
|
||
<a href="#" class="icon-link" title="Account"><span class="glyph">👤</span>Account</a>
|
||
<a href="#" class="icon-link" title="Wishlist"><span class="glyph">♡</span>Wishlist</a>
|
||
<a href="#" class="icon-link" title="Cart"><span class="glyph">🛍</span>Cart</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="container">
|
||
<div class="hero">
|
||
<h1>Welcome back, <span id="greet-name">there</span><span class="edit" title="Personalized picks">✨</span></h1>
|
||
<div class="hero-actions">
|
||
<select id="user-select" aria-label="User"></select>
|
||
<button id="rec-btn" onclick="recommend()">Refresh picks</button>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2>Your recent purchases</h2>
|
||
<a href="#" class="view-all">View all →</a>
|
||
</div>
|
||
<div id="history" class="product-grid"></div>
|
||
</section>
|
||
|
||
<section class="section">
|
||
<div class="section-head">
|
||
<h2>Recommended for you</h2>
|
||
</div>
|
||
<div class="recs-layout">
|
||
<aside class="why-panel">
|
||
<h3><span class="icon">✦</span>Why these picks?</h3>
|
||
<ul id="why-list">
|
||
<li>Loading style match…</li>
|
||
</ul>
|
||
<a class="see-how" onclick="document.getElementById('source-line').classList.toggle('visible'); return false;">See how it works</a>
|
||
<div class="source-line" id="source-line">
|
||
<span id="method-label">HLLM + LightGBM</span> retriever & re-ranker →
|
||
<b>Nemotron Mini</b> explainer
|
||
<span class="badge" id="llm-badge">live</span>
|
||
</div>
|
||
</aside>
|
||
<div id="recs" class="product-grid"></div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<footer class="trust-bar">
|
||
<div class="trust-bar-inner">
|
||
<div class="trust-cell">
|
||
<span class="glyph"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1.5" y="6" width="13" height="10" rx="1"/><path d="M14.5 9h3.5l3 3v4h-6.5z"/><circle cx="5.5" cy="17" r="2"/><circle cx="17.5" cy="17" r="2"/></svg></span>
|
||
<div><div class="label">Free delivery</div><div class="sub">On orders over $75</div></div>
|
||
</div>
|
||
<div class="trust-cell">
|
||
<span class="glyph"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 16.5-5"/><path d="M21 4v5h-5"/><path d="M21 12a9 9 0 0 1-16.5 5"/><path d="M3 20v-5h5"/></svg></span>
|
||
<div><div class="label">Easy returns</div><div class="sub">30-day window</div></div>
|
||
</div>
|
||
<div class="trust-cell">
|
||
<span class="glyph"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="11" width="16" height="10" rx="1.5"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span>
|
||
<div><div class="label">Secure checkout</div><div class="sub">256-bit SSL</div></div>
|
||
</div>
|
||
<div class="trust-cell">
|
||
<span class="glyph"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12z"/></svg></span>
|
||
<div><div class="label">Customer support</div><div class="sub">7 days a week</div></div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<div class="sysinfo">
|
||
<span class="lbl">● NVIDIA DGX Station GB300</span>
|
||
<span class="sep">·</span>
|
||
<span><span class="lbl">retr</span> <span class="val" id="lat-retr">—</span></span>
|
||
<span><span class="lbl">rerank</span> <span class="val" id="lat-rerank">—</span></span>
|
||
<span><span class="lbl">llm</span> <span class="val" id="lat-llm">—</span></span>
|
||
<span class="sep">·</span>
|
||
<span><span class="lbl">gpu</span> <span class="val" id="hw-util">—</span></span>
|
||
<span><span class="lbl">vram</span> <span class="val" id="hw-vram">—</span></span>
|
||
<span><span class="lbl">temp</span> <span class="val" id="hw-temp">—</span></span>
|
||
<span><span class="lbl">power</span> <span class="val" id="hw-power">—</span></span>
|
||
</div>
|
||
|
||
<script>
|
||
const $ = id => document.getElementById(id);
|
||
|
||
// Server assigns unique women's names per user (one of 200, no collisions).
|
||
// Loaded via /api/users into USER_NAME_MAP.
|
||
const USER_NAME_MAP = {};
|
||
|
||
function escapeHtml(s) {
|
||
return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
||
}
|
||
|
||
// Stable 32-bit-ish hash for deterministic synthesis
|
||
function strHash(s) {
|
||
let h = 5381;
|
||
for (let i = 0; i < s.length; i++) h = ((h << 5) + h + s.charCodeAt(i)) | 0;
|
||
return Math.abs(h);
|
||
}
|
||
|
||
function nameFor(uid) { return USER_NAME_MAP[uid] || 'there'; }
|
||
|
||
function ratingFor(itemId) {
|
||
const h = strHash(itemId || 'x');
|
||
const r = 4.0 + (h % 10) / 10; // 4.0 .. 4.9
|
||
const reviews = 80 + (h % 9000); // 80 .. 9079
|
||
return { value: r, reviews };
|
||
}
|
||
|
||
function starGlyphs(r) {
|
||
const full = Math.floor(r);
|
||
const half = (r - full) >= 0.5;
|
||
const empty = 5 - full - (half ? 1 : 0);
|
||
return '★'.repeat(full) + (half ? '½' : '') + '☆'.repeat(empty);
|
||
}
|
||
|
||
function fmtLatency(ms) {
|
||
if (ms == null || ms === 0) return '—';
|
||
const n = Number(ms);
|
||
if (n < 1) return n.toFixed(2) + 'ms';
|
||
if (n < 100) return n.toFixed(1) + 'ms';
|
||
return Math.round(n) + 'ms';
|
||
}
|
||
|
||
function priceDeltaHTML(base, current) {
|
||
if (base == null || current == null || base <= 0) return '';
|
||
const pct = ((current - base) / base) * 100;
|
||
if (Math.abs(pct) < 0.05) return '';
|
||
const up = pct > 0;
|
||
const arrow = up ? '↑' : '↓';
|
||
const cls = up ? 'up' : 'down';
|
||
return `<span class="delta ${cls}" title="vs. MSRP $${Number(base).toFixed(2)}">${arrow} ${Math.abs(pct).toFixed(1)}%</span>`;
|
||
}
|
||
|
||
function cardHTML(item) {
|
||
const rating = ratingFor(item.item_id || item.title || '');
|
||
const priceText = item.price != null ? '$' + Number(item.price).toFixed(2) : '—';
|
||
const delta = priceDeltaHTML(item.base_price, item.price);
|
||
return `<article class="product">
|
||
<div class="img">
|
||
${item.image_url
|
||
? `<img src="${escapeHtml(item.image_url)}" alt="" loading="lazy" onerror="this.parentElement.innerHTML+='<div class=no-img>No image</div>'">`
|
||
: '<div class="no-img">No image</div>'}
|
||
<span class="heart" title="Save to wishlist">♡</span>
|
||
</div>
|
||
<div class="info">
|
||
<div class="title">${escapeHtml(item.title || '')}</div>
|
||
<div class="price"><span>${priceText}</span>${delta}</div>
|
||
<div class="rating">
|
||
<span class="stars">${starGlyphs(rating.value)}</span>
|
||
<span>${rating.value.toFixed(1)}</span>
|
||
<span class="count">(${rating.reviews.toLocaleString()})</span>
|
||
</div>
|
||
</div>
|
||
</article>`;
|
||
}
|
||
|
||
function parseBullets(text) {
|
||
// Nemotron returns 3 phrases tagged [1] [2] [3]. Robust to multiple shapes.
|
||
const s = String(text || '').trim();
|
||
let parts;
|
||
if (/\[[1-9]\]/.test(s)) {
|
||
parts = s.split(/\s*\[[1-9]\]\s*/).filter(p => p.length > 0);
|
||
} else if (s.includes('\n')) {
|
||
parts = s.split(/\r?\n/);
|
||
} else {
|
||
parts = s.split(/[,;]\s+/);
|
||
}
|
||
return parts
|
||
.map(p => p.replace(/^[-•*\d+.)\s]+/, '').trim())
|
||
.map(cleanBullet)
|
||
.filter(p => p.length > 0)
|
||
.slice(0, 4);
|
||
}
|
||
|
||
// Strip residual model artifacts — small 4B model drifts onto specific
|
||
// phrasings ("in customer history and recommendations", "across both
|
||
// collections") despite explicit prohibition. Defensive normalization.
|
||
function cleanBullet(s) {
|
||
// List of meta-reference phrases the model repeatedly emits despite
|
||
// the prompt forbidding them. Strip them all (case-insensitive).
|
||
const META_PHRASES = [
|
||
/\s+in (customer|user)\s+history\s+and\s+recommendations/gi,
|
||
/\s+in (customer|user)\s+history/gi,
|
||
/\s+and\s+recommendations/gi,
|
||
/\s+across\s+both\s+(collections|histories|sets|items?)/gi,
|
||
/\s+across\s+all\s+items?\s+listed\s+above/gi,
|
||
/\s+in\s+both\s+(collections|histories|sets)/gi,
|
||
/\s+on\s+dresses\s+like\s+[^.]+/gi,
|
||
/\s+naturally\s+extending\s+to\s+[^,.]+/gi,
|
||
/\s+as\s+seen\s+in\s+[^.]+/gi,
|
||
/\s+making\s+(it|them)\s+(harmonious|perfect)[^.]*/gi,
|
||
/\s+from\s+the\s+same\s+season/gi,
|
||
// "with LILLUSORY Womens Summer..." — strip when followed by an
|
||
// ALL-CAPS brand name (drops everything until next period/end).
|
||
/\s+with\s+[A-Z][A-Z]{2,}[^.]*/g,
|
||
// "(e.g., something or another)" parenthetical hedges
|
||
/\s*\(e\.g\.[^)]*\)/gi,
|
||
// "but the style varies by customer preference" filler
|
||
/\s*,?\s+but the style varies[^.]*/gi,
|
||
];
|
||
let out = String(s);
|
||
for (const re of META_PHRASES) out = out.replace(re, '');
|
||
// Normalize ASCII arrow variants to the Unicode arrow we use in the prompt.
|
||
out = out.replace(/\s*(-+>|=+>|—>|–>)\s*/g, ' → ');
|
||
return out
|
||
.replace(/\[([^\[\]]+)\]/g, '$1') // [Foo Bar] -> Foo Bar
|
||
.replace(/^[\]\)\d+.\-•*\s]+/, '') // residual "] " / "1) " / "• " prefixes
|
||
.replace(/\s*\([^)]*\b(verb|placeholder|trait|category)\b[^)]*\)\s*/gi, ' ') // (pairing verb)
|
||
.replace(/^([A-Z][^:]{3,80}):\s+/, '') // strip "Item Name: " prefix
|
||
.replace(/[:;,]\s*$/, '') // trailing punctuation
|
||
.replace(/\s+/g, ' ') // collapse whitespace
|
||
.trim();
|
||
}
|
||
|
||
async function loadUsers() {
|
||
const users = await (await fetch('/api/users')).json();
|
||
const sel = $('user-select');
|
||
users.forEach(u => {
|
||
USER_NAME_MAP[u.id] = u.name;
|
||
const opt = document.createElement('option');
|
||
opt.value = u.id;
|
||
opt.textContent = u.name + ' · ' + u.count + ' purchases';
|
||
sel.appendChild(opt);
|
||
});
|
||
sel.addEventListener('change', () => { updateGreeting(); loadHistory(); recommend(); });
|
||
if (users.length) { updateGreeting(); loadHistory(); recommend(); }
|
||
}
|
||
|
||
function updateGreeting() {
|
||
const uid = $('user-select').value;
|
||
$('greet-name').textContent = nameFor(uid);
|
||
}
|
||
|
||
async function loadHistory() {
|
||
const items = await (await fetch('/api/history/' + $('user-select').value)).json();
|
||
$('history').innerHTML = items.map(cardHTML).join('');
|
||
}
|
||
|
||
async function recommend() {
|
||
const btn = $('rec-btn');
|
||
btn.disabled = true; btn.textContent = 'Loading…';
|
||
const data = await (await fetch('/api/recommend/' + $('user-select').value)).json();
|
||
|
||
$('recs').innerHTML = data.recommendations.map(cardHTML).join('');
|
||
$('method-label').textContent = data.method;
|
||
|
||
const bullets = parseBullets(data.explanation);
|
||
if (bullets.length) {
|
||
$('why-list').innerHTML = bullets.map(b => `<li>${escapeHtml(b)}</li>`).join('');
|
||
} else {
|
||
$('why-list').innerHTML = `<li>${escapeHtml(data.explanation || 'Personalized recommendations')}</li>`;
|
||
}
|
||
|
||
const badge = $('llm-badge');
|
||
if (data.llm_generated) { badge.textContent = 'live'; badge.classList.remove('fallback'); }
|
||
else { badge.textContent = 'fallback'; badge.classList.add('fallback'); }
|
||
|
||
$('lat-retr').textContent = fmtLatency(data.latency_retriever_ms);
|
||
$('lat-rerank').textContent = data.reranker_active ? fmtLatency(data.latency_reranker_ms) : 'off';
|
||
$('lat-llm').textContent = fmtLatency(data.latency_explainer_ms);
|
||
|
||
const g = data.gpu;
|
||
$('hw-util').textContent = g.util.toFixed(0) + '%';
|
||
$('hw-vram').textContent = g.vram_used.toFixed(0) + '/' + g.vram_total.toFixed(0) + 'GB';
|
||
$('hw-temp').textContent = g.temp.toFixed(0) + '°C';
|
||
$('hw-power').textContent = g.power.toFixed(0) + 'W';
|
||
|
||
btn.disabled = false; btn.textContent = 'Refresh picks';
|
||
}
|
||
|
||
loadUsers();
|
||
</script>
|
||
</body>
|
||
</html>"""
|
||
|
||
if __name__ == "__main__":
|
||
retrieval_mode = "HLLM + LightGBM rerank" if USE_RERANKER else "HLLM retrieval only"
|
||
pricing_mode = "PPO-optimized prices" if USE_OPTIMIZED_PRICES else "static MSRP"
|
||
print(f"\nEnterprise Fashion Recommender ({retrieval_mode} · {pricing_mode})")
|
||
print(f" http://localhost:{ARGS.port}\n")
|
||
uvicorn.run(app, host=ARGS.host, port=ARGS.port)
|