fix llm explanation

backend/engines/cards_engine.py

@@ -108,40 +108,40 @@ class CardsEngine:
         out["score"] = score[idx]
         return out
 
-def explain(self, user_input: dict, card_row: dict, score: float) -> str:
-    prompt = f"""You are explaining credit-card recommendations to a user.
-Keep it short (6-10 bullet lines). Be careful: do not invent fees/APR/rewards.
-If a field is missing/blank, say "not listed".
-
-User profile:
-- credit_score: {user_input.get("credit_score")}
-- annual_income: {user_input.get("annual_income")}
-- carry_balance: {user_input.get("carry_balance")}
-- travel_abroad: {user_input.get("travel_abroad")}
-- no_annual_fee: {user_input.get("no_annual_fee")}
-- balance_transfer: {user_input.get("balance_transfer")}
-- rewards_pref: {user_input.get("rewards_pref")}
-- monthly spend: groceries={user_input.get("spend_groceries")}, dining={user_input.get("spend_dining")},
-  gas={user_input.get("spend_gas")}, travel={user_input.get("spend_travel")}, online={user_input.get("spend_online")}
-
-Recommended card (from dataset row):
-- Institution: {card_row.get("Institution Name")}
-- Product: {card_row.get("Product Name")}
-- Annual Fee: {card_row.get("Annual Fee")}
-- Foreign Transaction Fee (%): {card_row.get("Foreign Transaction Fee (%)")}
-- Purchase APR median: {card_row.get("Purchase APR median")}
-- Balance Transfer Offered?: {card_row.get("Balance Transfer Offered?")}
-- Rewards: {card_row.get("Rewards")}
-- Card Features: {card_row.get("Card Features")}
-- Website: {card_row.get("Website for Consumer")}
-- Phone: {card_row.get("Telephone Number for Consumers")}
-
-Model score: {score:.3f}
-
-Explain:
-1) why it matches this user's needs
-2) what to watch out for (APR/fees)
-3) who this card is best for (one sentence)
-Add a final line: "Not financial advice."
-"""
-    return generate_text(prompt)
+    def explain(self, user_input: dict, card_row: dict, score: float) -> str:
+        prompt = f"""You are explaining credit-card recommendations to a user.
+    Keep it short (6-10 bullet lines). Be careful: do not invent fees/APR/rewards.
+    If a field is missing/blank, say "not listed".
+
+    User profile:
+    - credit_score: {user_input.get("credit_score")}
+    - annual_income: {user_input.get("annual_income")}
+    - carry_balance: {user_input.get("carry_balance")}
+    - travel_abroad: {user_input.get("travel_abroad")}
+    - no_annual_fee: {user_input.get("no_annual_fee")}
+    - balance_transfer: {user_input.get("balance_transfer")}
+    - rewards_pref: {user_input.get("rewards_pref")}
+    - monthly spend: groceries={user_input.get("spend_groceries")}, dining={user_input.get("spend_dining")},
+    gas={user_input.get("spend_gas")}, travel={user_input.get("spend_travel")}, online={user_input.get("spend_online")}
+
+    Recommended card (from dataset row):
+    - Institution: {card_row.get("Institution Name")}
+    - Product: {card_row.get("Product Name")}
+    - Annual Fee: {card_row.get("Annual Fee")}
+    - Foreign Transaction Fee (%): {card_row.get("Foreign Transaction Fee (%)")}
+    - Purchase APR median: {card_row.get("Purchase APR median")}
+    - Balance Transfer Offered?: {card_row.get("Balance Transfer Offered?")}
+    - Rewards: {card_row.get("Rewards")}
+    - Card Features: {card_row.get("Card Features")}
+    - Website: {card_row.get("Website for Consumer")}
+    - Phone: {card_row.get("Telephone Number for Consumers")}
+
+    Model score: {score:.3f}
+
+    Explain:
+    1) why it matches this user's needs
+    2) what to watch out for (APR/fees)
+    3) who this card is best for (one sentence)
+    Add a final line: "Not financial advice."
+    """
+        return generate_text(prompt)

backend/engines/movies_engine.py

@@ -115,25 +115,25 @@ class MoviesEngine:
         out["score"] = scores[idx]
         return out
 
-def explain(self, user_input: dict, movie_row: dict, score: float) -> str:
-    genres = user_input.get("genres") or []
-    liked_ids = user_input.get("liked_movie_ids") or []
-
-    prompt = f"""You are explaining recommendations to a user in a friendly way.
-Keep it short (6-10 bullet lines). Do not invent facts not provided.
-
-User preferences:
-- Selected genres: {genres}
-- Liked movie ids: {liked_ids}
-
-Recommended movie:
-- Title: {movie_row.get("title")}
-- Genres: {movie_row.get("genres")}
-- Model score: {score:.3f}
-
-Explain:
-1) why it matches the user
-2) what kind of vibe they should expect based on title/genres
-3) when to pick this vs the other results (one sentence)
-"""
-    return generate_text(prompt)
+    def explain(self, user_input: dict, movie_row: dict, score: float) -> str:
+        genres = user_input.get("genres") or []
+        liked_ids = user_input.get("liked_movie_ids") or []
+
+        prompt = f"""You are explaining recommendations to a user in a friendly way.
+    Keep it short (6-10 bullet lines). Do not invent facts not provided.
+
+    User preferences:
+    - Selected genres: {genres}
+    - Liked movie ids: {liked_ids}
+
+    Recommended movie:
+    - Title: {movie_row.get("title")}
+    - Genres: {movie_row.get("genres")}
+    - Model score: {score:.3f}
+
+    Explain:
+    1) why it matches the user
+    2) what kind of vibe they should expect based on title/genres
+    3) when to pick this vs the other results (one sentence)
+    """
+        return generate_text(prompt)

backend/llm.py

@@ -1,33 +1,34 @@
 import os
-from typing import Optional
-from huggingface_hub import InferenceClient
+from openai import OpenAI
 
-def _fallback(prompt):
-    lines = prompt.splitlines()
-    return "Here’s why this showed up:\n- It matches your preferences.\n- It scored high in the ranking model.\n\nTip: Click a few results and compare which fits your taste/budget best."
+def _fallback(prompt: str) -> str:
+    return (
+        "Here’s why this showed up:\n"
+        "- It matches your stated preferences.\n"
+        "- It scored highly in the ranking model.\n"
+        "- Compare a couple options to pick the best fit.\n"
+    )
 
-def generate_text(prompt, max_new_tokens=220):
+def generate_text(prompt: str, max_new_tokens: int = 220) -> str:
     provider = (os.getenv("LLM_PROVIDER") or "off").lower()
     if provider == "off":
         return _fallback(prompt)
 
-    if provider == "hf":
-        token = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACEHUB_API_TOKEN")
-        model = os.getenv("HF_LLM_MODEL") or "mistralai/Mistral-7B-Instruct-v0.3"
-        if not token:
-            return _fallback(prompt)
-
-        try:
-            client = InferenceClient(model=model, token=token)
-            out = client.text_generation(
-                prompt,
-                max_new_tokens=max_new_tokens,
-                temperature=0.3,
-                top_p=0.9,
-                repetition_penalty=1.05,
-            )
-            return (out or "").strip() or _fallback(prompt)
-        except Exception:
-            return _fallback(prompt)
+    token = os.getenv("HF_TOKEN") or os.getenv("HUGGINGFACEHUB_API_TOKEN")
+    model = os.getenv("HF_CHAT_MODEL") or "google/gemma-2-2b-it"
+    if not token:
+        return _fallback(prompt)
 
-    return _fallback(prompt)
+    try:
+        client = OpenAI(base_url="https://router.huggingface.co/v1", api_key=token)
+        resp = client.chat.completions.create(
+            model=model,
+            messages=[{"role": "user", "content": prompt}],
+            max_tokens=max_new_tokens,
+            temperature=0.3,
+            top_p=0.9,
+        )
+        text = (resp.choices[0].message.content or "").strip()
+        return text or _fallback(prompt)
+    except Exception:
+        return _fallback(prompt)

backend/main.py

@@ -143,13 +143,14 @@ class ExplainCardReq(BaseModel):
 
 @app.post("/api/cards/explain", response_model=ExplainOut)
 def explain_card(req: ExplainCardReq):
-    row = cards_engine.cards[cards_engine.cards["Product Name"] == req.product]
+    row = cards_engine.meta[cards_engine.meta["Product Name"] == req.product]
     if row.empty:
         return ExplainOut(text="Could not find that card in the catalog.")
     card_row = row.iloc[0].to_dict()
     text = cards_engine.explain(req.user_input.model_dump(), card_row, req.score)
     return ExplainOut(text=text)
 
+
 from fastapi.staticfiles import StaticFiles
 
 STATIC_DIR = os.path.join(os.path.dirname(__file__), "static")

backend/requirements.txt

@@ -7,4 +7,5 @@ scikit-learn==1.5.2
 joblib==1.4.2
 torch==2.4.1
 sentence-transformers==3.0.1
-huggingface_hub==0.26.3
+huggingface_hub==0.26.3
+openai>=1.0.0

frontend/src/components/ResultsGrid.jsx

@@ -1,20 +1,30 @@
-export default function ResultsGrid({ items, renderTitle, renderMeta, onExplain }) {
+export default function ResultsGrid({ items, renderTitle, renderMeta, onExplain, getKey }) {
   if (!items?.length) return null;
 
   return (
-    <div className="grid">
+    <div className="resultsList">
       {items.map((r, idx) => (
-        <div className="resultCard" key={idx}>
-          <div className="resultTitle">{renderTitle(r)}</div>
-          <div className="muted small">{renderMeta(r)}</div>
+        <div
+          className="resultCard"
+          key={getKey ? getKey(r) : (r.movieId ?? r.product ?? idx)}
+        >
+          <div className="resultRow">
+            <div className="resultLeft">
+              <div className="resultTitleRow">
+                <span className="resultIndex">{idx + 1}.</span>
+                <div className="resultTitle">{renderTitle(r)}</div>
+              </div>
+              <div className="muted small">{renderMeta(r)}</div>
+            </div>
 
-          {onExplain && (
-            <button className="secondary" style={{ marginTop: 10 }} onClick={() => onExplain(r)}>
-              Why this?
-            </button>
-          )}
+            {onExplain && (
+              <button className="secondary whyBtn" onClick={() => onExplain(r)}>
+                Why this?
+              </button>
+            )}
+          </div>
         </div>
       ))}
     </div>
   );
-}
+}

frontend/src/pages/CardsPage.jsx

@@ -69,6 +69,7 @@ export default function CardsPage() {
 
       <ResultsGrid
         items={recs}
+        getKey={(r) => r.product}
         renderTitle={(r) => r.product}
         renderMeta={(r) => `${r.institution || "Institution"} • Score: ${r.score.toFixed(3)}`}
         onExplain={explainOne}

frontend/src/pages/MoviesPage.jsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import MovieForm from "../components/MovieForm";
 import ResultsGrid from "../components/ResultsGrid";
 
-const API = import.meta.env.VITE_API_BASE || "";
+const API = "";
 
 export default function MoviesPage() {
   const [liked, setLiked] = useState([]);
@@ -102,6 +102,7 @@ export default function MoviesPage() {
 
       <ResultsGrid
         items={recs}
+        getKey={(r) => r.movieId}
         renderTitle={(r) => r.title}
         renderMeta={(r) => `Score: ${r.score.toFixed(3)} • ${r.genres || "-"}`}
         onExplain={explainOne}

frontend/src/styles.css

@@ -83,3 +83,55 @@ input:focus, select:focus { border-color: var(--accent); }
   .grid2 { grid-template-columns: 1fr; }
   .results { grid-template-columns: 1fr; }
 }
+.resultsList{
+  display:flex;
+  flex-direction:column;
+  gap:12px;
+  margin-top:14px;
+}
+
+.resultCard{
+  border:1px solid rgba(255,255,255,0.10);
+  border-radius:14px;
+  padding:14px;
+  background:rgba(255,255,255,0.03);
+}
+
+.resultCard:hover{
+  background:rgba(255,255,255,0.05);
+}
+
+.resultRow{
+  display:flex;
+  align-items:flex-start;
+  justify-content:space-between;
+  gap:12px;
+}
+
+.resultLeft{
+  flex:1;
+  min-width:0;
+}
+
+.resultTitleRow{
+  display:flex;
+  align-items:baseline;
+  gap:10px;
+}
+
+.resultIndex{
+  opacity:0.65;
+  font-size:13px;
+  flex:0 0 auto;
+}
+
+.resultTitle{
+  font-size:18px;
+  font-weight:650;
+  line-height:1.25;
+}
+
+.whyBtn{
+  white-space:nowrap;
+  align-self:center;
+}