clear1

app.py

@@ -4,14 +4,13 @@ import folium
 import numpy as np
 import os
 import re
-from huggingface_hub import InferenceClient
+import json
 
 BASE        = os.path.dirname(os.path.abspath(__file__))
 STAY_POINTS = os.path.join(BASE, "data", "stay_points_sampled.csv")
 POI_PATH    = os.path.join(BASE, "data", "poi_sampled.csv")
 DEMO_PATH   = os.path.join(BASE, "data", "demographics_sampled.csv")
-
-MODEL_ID = "meta-llama/Llama-3.2-1B-Instruct"
+COT_PATH    = os.path.join(BASE, "data", "cot_results.json")
 
 SEX_MAP  = {1:"Male", 2:"Female", -8:"Unknown", -7:"Prefer not to answer"}
 EDU_MAP  = {1:"Less than HS", 2:"HS Graduate/GED", 3:"Some College/Associate",
@@ -50,10 +49,60 @@ def parse_act_types(x):
         return str(x)
 
 sp["act_label"] = sp["act_types"].apply(parse_act_types)
+
+# Load CoT JSON (optional)
+cot_by_agent = {}
+if os.path.exists(COT_PATH):
+    with open(COT_PATH, "r") as f:
+        cot_raw = json.load(f)
+    for result in cot_raw.get("inference_results", []):
+        cot_by_agent[result["agent_id"]] = result
+    print(f"Loaded CoT for {len(cot_by_agent)} agents.")
+
 sample_agents = sorted(sp["agent_id"].unique().tolist())
 print(f"Ready. {len(sample_agents)} agents loaded.")
 
 
+# ── Mock CoT (fallback when agent not in JSON) ────────────────────────────────
+
+MOCK_S1 = """LOCATION INVENTORY:
+- Top venues: residence (36 visits), Clinton Mobile Estates (9 visits), 7-Eleven (8 visits)
+- Price level: budget (7-Eleven, car wash) and mid-range (Euro Caffe, Pepper Shaker Cafe)
+- Neighborhood: residential and commercial urban mix
+
+TEMPORAL PATTERNS:
+- Active hours: 09:00-23:00
+- Weekday/Weekend: 66% weekday, 34% weekend
+- Routine: consistent morning start times
+
+SEQUENCE:
+- Typical chain: Home to Exercise/Work to Home
+- Notable pattern: weekend religious visits every Sunday morning"""
+
+MOCK_S2 = """SCHEDULE: Fixed weekday routine with flexible afternoon activities
+ECONOMIC: Budget-conscious with occasional mid-range dining
+SOCIAL: Community-engaged through regular religious attendance
+LIFESTYLE: Urban working-class with active recreational habits
+STABILITY: Highly consistent 4-week pattern with minimal deviation"""
+
+MOCK_S3 = """INCOME_PREDICTION: Middle ($35k-$75k)
+INCOME_CONFIDENCE: 4
+INCOME_REASONING: Frequent budget venue visits (7-Eleven, self-service car wash) signal cost awareness, while occasional mid-range dining and stable employment-like patterns at Clinton Mobile Estates suggest a steady middle income. No luxury venue signals detected.
+ALTERNATIVES: Low ($15k-$35k) | Upper-Middle ($75k-$125k)"""
+
+
+def get_cot(agent_id):
+    """Return (s1, s2, s3) text for agent, falling back to mock."""
+    result = cot_by_agent.get(agent_id)
+    if result:
+        s1 = result.get("step1_response", MOCK_S1)
+        s2 = result.get("step2_response", MOCK_S2)
+        s3 = result.get("step3_response", MOCK_S3)
+    else:
+        s1, s2, s3 = MOCK_S1, MOCK_S2, MOCK_S3
+    return s1, s2, s3
+
+
 # ── Mobility text builders ────────────────────────────────────────────────────
 
 def build_mobility_summary(agent_sp):
@@ -90,7 +139,6 @@ def build_mobility_summary(agent_sp):
         return "night"
     agent_sp2["tod"] = agent_sp2["hour"].apply(tod)
     tod_pct = (agent_sp2["tod"].value_counts(normalize=True) * 100).round(0).astype(int)
-
     agent_sp2["is_weekend"] = agent_sp2["start_datetime"].dt.dayofweek >= 5
     wd_pct = int((~agent_sp2["is_weekend"]).mean() * 100)
 
@@ -121,302 +169,141 @@ def build_weekly_checkin(agent_sp):
     return "\n".join(lines)
 
 
-# ── Prompts ───────────────────────────────────────────────────────────────────
-
-STEP1_SYSTEM = """You are an expert mobility analyst. Extract objective features from the trajectory data.
-Respond with EXACTLY this structure, keep each point to one short sentence:
-
-LOCATION INVENTORY:
-- Top venues: [list top 3 with visit counts]
-- Price level: [budget/mid-range/high-end mix]
-- Neighborhood: [residential/commercial/urban/suburban]
-
-TEMPORAL PATTERNS:
-- Active hours: [time range]
-- Weekday/Weekend: [ratio]
-- Routine: [consistent/variable]
-
-SEQUENCE:
-- Typical chain: [e.g. Home → Work → Home]
-- Notable pattern: [one observation]
-
-Do NOT interpret or infer demographics. Be concise."""
-
-STEP2_SYSTEM = """You are an expert mobility analyst. Based on the extracted features, analyze behavioral patterns.
-Respond with EXACTLY this structure, one short sentence per point:
-
-SCHEDULE: [fixed/flexible/shift — one sentence]
-ECONOMIC: [budget/mid-range/premium spending — one sentence]  
-SOCIAL: [family/individual/community focus — one sentence]
-LIFESTYLE: [urban professional/suburban/student/other — one sentence]
-STABILITY: [routine consistency — one sentence]
-
-Do NOT make income predictions yet. Be concise."""
-
-STEP3_SYSTEM = """You are an expert mobility analyst performing final income inference.
-Based on the trajectory features and behavioral analysis, output EXACTLY:
-
-INCOME_PREDICTION: [Very Low (<$15k) | Low ($15k-$35k) | Middle ($35k-$75k) | Upper-Middle ($75k-$125k) | High ($125k-$200k) | Very High (>$200k)]
-INCOME_CONFIDENCE: [1-5]
-INCOME_REASONING: [2-3 sentences linking specific mobility evidence to the prediction]
-ALTERNATIVES: [2nd most likely] | [3rd most likely]"""
-
-
-def call_llm(client, system_prompt, user_content, max_tokens=400):
-    response = client.chat.completions.create(
-        model=MODEL_ID,
-        messages=[
-            {"role": "system", "content": system_prompt},
-            {"role": "user",   "content": user_content},
-        ],
-        max_tokens=max_tokens,
-        temperature=0.3,
-    )
-    return response.choices[0].message.content.strip()
-
-
-# ── HTML rendering ────────────────────────────────────────────────────────────
+# ── HTML reasoning chain ──────────────────────────────────────────────────────
 
 CHAIN_CSS = """
 <style>
 @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600&display=swap');
 
-.hicotraj-chain {
-    font-family: 'IBM Plex Sans', sans-serif;
-    padding: 12px 4px;
-    max-width: 100%;
-}
+.hicotraj-chain { font-family: 'IBM Plex Sans', sans-serif; padding: 12px 4px; }
 
-/* Stage cards */
 .stage-card {
-    border-radius: 10px;
-    padding: 16px 18px;
-    margin-bottom: 0;
-    position: relative;
-    transition: box-shadow 0.3s;
+    border-radius: 10px; padding: 16px 18px; margin-bottom: 0;
+    transition: opacity 0.4s, filter 0.4s;
 }
-.stage-card.dim { opacity: 0.35; filter: grayscale(0.4); }
-.stage-card.active { box-shadow: 0 4px 20px rgba(0,0,0,0.12); opacity: 1; filter: none; }
+.stage-card.dim  { opacity: 0.32; filter: grayscale(0.5); }
+.stage-card.active { opacity: 1; filter: none; }
 
 .stage-card.s1 { background: #f8f9fc; border: 1.5px solid #c8d0e0; }
 .stage-card.s2 { background: #fdf6f0; border: 1.5px solid #e8c9a8; }
 .stage-card.s3 { background: #fff8f8; border: 2px solid #c0392b; }
 
-.stage-header {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
-}
+.stage-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
 .stage-badge {
     font-family: 'IBM Plex Mono', monospace;
-    font-size: 10px;
-    font-weight: 600;
-    letter-spacing: 0.08em;
-    padding: 3px 8px;
-    border-radius: 4px;
-    text-transform: uppercase;
+    font-size: 10px; font-weight: 600; letter-spacing: 0.08em;
+    padding: 3px 8px; border-radius: 4px; text-transform: uppercase;
 }
 .s1 .stage-badge { background: #dde3f0; color: #3a4a6b; }
 .s2 .stage-badge { background: #f0dcc8; color: #7a4010; }
 .s3 .stage-badge { background: #c0392b; color: #fff; }
+.stage-title { font-size: 13px; font-weight: 600; color: #1a1a2e; }
 
-.stage-title {
-    font-size: 13px;
-    font-weight: 600;
-    color: #1a1a2e;
-}
-
-/* Content inside cards */
 .tag-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
 .tag {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 11px;
-    background: #e8ecf5;
-    color: #2c3e60;
-    padding: 3px 8px;
-    border-radius: 4px;
-    white-space: nowrap;
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
+    background: #e8ecf5; color: #2c3e60;
+    padding: 3px 8px; border-radius: 4px; white-space: nowrap;
 }
-.s2 .tag { background: #f5e8d8; color: #6b3a10; }
 
 .behavior-row {
-    display: grid;
-    grid-template-columns: 100px 1fr;
-    gap: 4px 10px;
-    margin-top: 2px;
-    font-size: 12px;
-    line-height: 1.5;
+    display: grid; grid-template-columns: 100px 1fr;
+    gap: 4px 10px; margin-top: 2px; font-size: 12px; line-height: 1.6;
 }
 .bkey {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 11px;
-    font-weight: 600;
-    color: #9b6a3a;
-    padding-top: 1px;
+    font-family: 'IBM Plex Mono', monospace; font-size: 11px;
+    font-weight: 600; color: #9b6a3a; padding-top: 1px;
 }
 .bval { color: #3a2a1a; }
 
-/* Prediction block */
-.pred-block { margin-top: 8px; }
+.pred-block { margin-top: 4px; }
 .pred-label {
-    font-size: 11px;
-    font-family: 'IBM Plex Mono', monospace;
-    color: #888;
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    margin-bottom: 4px;
-}
-.pred-value {
-    font-size: 22px;
-    font-weight: 600;
-    color: #c0392b;
-    letter-spacing: -0.01em;
-    margin-bottom: 8px;
-}
-.confidence-bar-wrap {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 10px;
-}
-.confidence-bar-bg {
-    flex: 1;
-    height: 6px;
-    background: #f0d0cf;
-    border-radius: 3px;
-    overflow: hidden;
-}
-.confidence-bar-fill {
-    height: 100%;
-    background: linear-gradient(90deg, #e74c3c, #8b0000);
-    border-radius: 3px;
-    transition: width 0.8s ease;
-}
-.confidence-label {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 11px;
-    color: #c0392b;
-    font-weight: 600;
-    white-space: nowrap;
-}
-.reasoning-text {
-    font-size: 12px;
-    color: #4a2a2a;
-    line-height: 1.6;
-    border-left: 3px solid #e8c0be;
-    padding-left: 10px;
-    margin-top: 6px;
-}
-.alternatives {
-    margin-top: 10px;
-    font-size: 11px;
-    font-family: 'IBM Plex Mono', monospace;
-    color: #999;
+    font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: #888;
+    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px;
 }
+.pred-value { font-size: 22px; font-weight: 600; color: #c0392b; margin-bottom: 8px; }
+.confidence-bar-wrap { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+.confidence-bar-bg { flex: 1; height: 6px; background: #f0d0cf; border-radius: 3px; overflow: hidden; }
+.confidence-bar-fill { height: 100%; background: linear-gradient(90deg, #e74c3c, #8b0000); border-radius: 3px; }
+.confidence-label { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: #c0392b; font-weight: 600; white-space: nowrap; }
+.reasoning-text { font-size: 12px; color: #4a2a2a; line-height: 1.6; border-left: 3px solid #e8c0be; padding-left: 10px; margin-top: 6px; }
+.alternatives { margin-top: 10px; font-size: 11px; font-family: 'IBM Plex Mono', monospace; color: #999; }
 .alternatives span { color: #c0392b; opacity: 0.7; }
 
-/* Arrow connector */
-.chain-arrow {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0;
-    padding: 4px 0;
-    gap: 0;
-}
-.arrow-line {
-    width: 2px;
-    height: 18px;
-    background: linear-gradient(180deg, #c8d0e0, #e8c9a8);
-}
+.chain-arrow { display: flex; flex-direction: column; align-items: center; padding: 4px 0; transition: opacity 0.4s; }
+.arrow-line { width: 2px; height: 16px; background: #d0c0b0; }
 .arrow-label {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 10px;
-    color: #aaa;
-    letter-spacing: 0.06em;
-    text-transform: uppercase;
-    background: white;
-    padding: 2px 8px;
-    border: 1px solid #e0e0e0;
-    border-radius: 10px;
-    margin: 2px 0;
-}
-.arrow-tip {
-    width: 0; height: 0;
-    border-left: 5px solid transparent;
-    border-right: 5px solid transparent;
-    border-top: 7px solid #e8c9a8;
+    font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: #aaa;
+    letter-spacing: 0.06em; text-transform: uppercase;
+    background: white; padding: 2px 8px; border: 1px solid #e0e0e0; border-radius: 10px; margin: 2px 0;
 }
+.arrow-tip { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid #d0c0b0; }
+
+.thinking { font-size: 13px; color: #888; padding: 8px 0; }
+.empty-hint { font-size: 12px; color: #ccc; padding: 6px 0; }
 
-/* Waiting state */
-.waiting-dot {
-    display: inline-block;
-    width: 7px; height: 7px;
-    border-radius: 50%;
-    background: #ccc;
-    margin: 0 2px;
-    animation: pulse 1.2s ease-in-out infinite;
+.wd {
+    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
+    background: currentColor; margin: 0 2px; opacity: 0.3;
+    animation: wd-pulse 1.2s ease-in-out infinite;
 }
-.waiting-dot:nth-child(2) { animation-delay: 0.2s; }
-.waiting-dot:nth-child(3) { animation-delay: 0.4s; }
-@keyframes pulse {
-    0%, 100% { opacity: 0.3; transform: scale(0.8); }
+.wd:nth-child(2) { animation-delay: 0.2s; }
+.wd:nth-child(3) { animation-delay: 0.4s; }
+@keyframes wd-pulse {
+    0%, 100% { opacity: 0.2; transform: scale(0.8); }
     50% { opacity: 1; transform: scale(1.1); }
 }
 </style>
 """
 
-def _waiting_dots():
-    return '<span class="waiting-dot"></span><span class="waiting-dot"></span><span class="waiting-dot"></span>'
 
-def render_chain(s1_text="", s2_text="", s3_text="", status="idle"):
-    """
-    status: idle | running1 | running2 | running3 | done
-    """
+def _dots():
+    return '<span class="wd"></span><span class="wd"></span><span class="wd"></span>'
+
+
+def render_chain(s1_text, s2_text, s3_text, status="done"):
+    # status: idle | running1 | running2 | running3 | done
     s1_active = status in ("running1", "running2", "running3", "done")
     s2_active = status in ("running2", "running3", "done")
     s3_active = status in ("running3", "done")
 
-    # ── Stage 1 content ──────────────────────────────────────────────────────
+    # ── Stage 1 ───────────────────────────────────────────────────────────────
     if status == "running1":
-        s1_content = f'<div style="padding:8px 0; color:#888; font-size:13px;">Extracting features {_waiting_dots()}</div>'
+        s1_content = f'<div class="thinking">Extracting features {_dots()}</div>'
     elif s1_text:
-        # Parse tags from the response — pull out short bullet points as tags
         tags = []
         for line in s1_text.splitlines():
             line = line.strip().lstrip("-").strip()
-            if line and len(line) < 60 and not line.endswith(":"):
+            if line and len(line) < 65 and not line.endswith(":"):
                 tags.append(line)
-            if len(tags) >= 8:
+            if len(tags) >= 9:
                 break
-        tag_html = "".join(f'<span class="tag">{t}</span>' for t in tags[:8])
-        s1_content = f'<div class="tag-row">{tag_html}</div>'
+        s1_content = '<div class="tag-row">' + \
+            "".join(f'<span class="tag">{t}</span>' for t in tags[:9]) + \
+            '</div>'
     else:
-        s1_content = '<div style="font-size:12px;color:#bbb;padding:6px 0;">Run inference to see results</div>'
+        s1_content = '<div class="empty-hint">Press ▶ Run HiCoTraj to start</div>'
 
-    # ── Stage 2 content ──────────────────────────────────────────────────────
-    BEHAVIOR_KEYS = ["SCHEDULE", "ECONOMIC", "SOCIAL", "LIFESTYLE", "STABILITY"]
+    # ── Stage 2 ───────────────────────────────────────────────────────────────
+    KEYS = ["SCHEDULE", "ECONOMIC", "SOCIAL", "LIFESTYLE", "STABILITY"]
     if status == "running2":
-        s2_content = f'<div style="padding:8px 0; color:#a06030; font-size:13px;">Analyzing behavior {_waiting_dots()}</div>'
+        s2_content = f'<div class="thinking" style="color:#a06030">Analyzing behavior {_dots()}</div>'
     elif s2_text:
         rows_html = ""
-        for key in BEHAVIOR_KEYS:
-            pattern = rf"{key}[:\s]+(.+)"
-            m = re.search(pattern, s2_text, re.IGNORECASE)
+        for key in KEYS:
+            m = re.search(rf"{key}[:\s]+(.+)", s2_text, re.IGNORECASE)
             val = m.group(1).strip().rstrip(".") if m else "—"
-            if len(val) > 80:
-                val = val[:77] + "..."
+            if len(val) > 85:
+                val = val[:82] + "..."
             rows_html += f'<div class="bkey">{key}</div><div class="bval">{val}</div>'
         s2_content = f'<div class="behavior-row">{rows_html}</div>'
     else:
-        s2_content = '<div style="font-size:12px;color:#bbb;padding:6px 0;">Run inference to see results</div>'
+        s2_content = '<div class="empty-hint">Waiting...</div>'
 
-    # ── Stage 3 content ──────────────────────────────────────────────────────
+    # ── Stage 3 ───────────────────────────────────────────────────────────────
     if status == "running3":
-        s3_content = f'<div style="padding:8px 0; color:#c0392b; font-size:13px;">Inferring demographics {_waiting_dots()}</div>'
+        s3_content = f'<div class="thinking" style="color:#c0392b">Inferring demographics {_dots()}</div>'
     elif s3_text:
-        # Parse structured output
         pred = conf_raw = reasoning = alts = ""
         for line in s3_text.splitlines():
             line = line.strip()
@@ -428,18 +315,12 @@ def render_chain(s1_text="", s2_text="", s3_text="", status="idle"):
                 reasoning = line.replace("INCOME_REASONING:", "").strip()
             elif line.startswith("ALTERNATIVES:"):
                 alts = line.replace("ALTERNATIVES:", "").strip()
-
-        # Confidence bar
         try:
             conf_int = int(re.search(r"\d", conf_raw).group())
         except:
             conf_int = 3
         bar_pct = conf_int * 20
-
-        alts_html = ""
-        if alts:
-            alts_html = f'<div class="alternatives">Also possible: <span>{alts}</span></div>'
-
+        alts_html = f'<div class="alternatives">Also possible: <span>{alts}</span></div>' if alts else ""
         s3_content = f"""
         <div class="pred-block">
             <div class="pred-label">Income Prediction</div>
@@ -450,16 +331,16 @@ def render_chain(s1_text="", s2_text="", s3_text="", status="idle"):
                 </div>
                 <div class="confidence-label">Confidence {conf_int}/5</div>
             </div>
-            <div class="reasoning-text">{reasoning or s3_text[:200]}</div>
+            <div class="reasoning-text">{reasoning}</div>
             {alts_html}
         </div>"""
     else:
-        s3_content = '<div style="font-size:12px;color:#bbb;padding:6px 0;">Run inference to see results</div>'
+        s3_content = '<div class="empty-hint">Waiting...</div>'
 
     def card(cls, badge, title, content, active):
-        dim_cls = "active" if active else "dim"
+        dim = "active" if active else "dim"
         return f"""
-        <div class="stage-card {cls} {dim_cls}">
+        <div class="stage-card {cls} {dim}">
             <div class="stage-header">
                 <span class="stage-badge">{badge}</span>
                 <span class="stage-title">{title}</span>
@@ -468,16 +349,16 @@ def render_chain(s1_text="", s2_text="", s3_text="", status="idle"):
         </div>"""
 
     def arrow(label, active):
-        opacity = "1" if active else "0.3"
+        op = "1" if active else "0.25"
         return f"""
-        <div class="chain-arrow" style="opacity:{opacity}">
+        <div class="chain-arrow" style="opacity:{op}">
             <div class="arrow-line"></div>
             <div class="arrow-label">{label}</div>
             <div class="arrow-line"></div>
             <div class="arrow-tip"></div>
         </div>"""
 
-    html = CHAIN_CSS + '<div class="hicotraj-chain">'
+    html  = CHAIN_CSS + '<div class="hicotraj-chain">'
     html += card("s1", "Stage 1", "Factual Feature Extraction", s1_content, s1_active)
     html += arrow("behavioral abstraction", s2_active)
     html += card("s2", "Stage 2", "Behavioral Pattern Analysis", s2_content, s2_active)
@@ -546,51 +427,23 @@ def on_select(agent_id):
     map_html  = build_map(agent_sp)
     demo_text = build_demo_text(agent_demo)
     raw_text  = build_mobility_summary(agent_sp) + "\n\n" + build_weekly_checkin(agent_sp)
-    chain_html = render_chain(status="idle")
+    chain_html = render_chain("", "", "", status="idle")
 
     return map_html, raw_text, demo_text, chain_html
 
 
-def run_inference(agent_id, hf_token):
-    if not hf_token or not hf_token.strip():
-        yield render_chain(s3_text="⚠️ Please enter your Hugging Face token first.", status="done")
-        return
-
+def run_reveal(agent_id):
+    import time
     agent_id = int(agent_id)
-    agent_sp = sp[sp["agent_id"] == agent_id].sort_values("start_datetime")
-    traj_text = build_mobility_summary(agent_sp) + "\n\n" + build_weekly_checkin(agent_sp)
-
-    try:
-        client = InferenceClient(token=hf_token.strip())
-
-        yield render_chain(status="running1")
-        s1 = call_llm(client, STEP1_SYSTEM, traj_text, max_tokens=400)
-
-        yield render_chain(s1_text=s1, status="running2")
-        s2_input = f"Features:\n{s1}\n\nNow analyze behavioral patterns."
-        s2 = call_llm(client, STEP2_SYSTEM, s2_input, max_tokens=300)
-
-        yield render_chain(s1_text=s1, s2_text=s2, status="running3")
-        s3_input = f"Features:\n{s1}\n\nBehavioral analysis:\n{s2}\n\nNow infer income."
-        s3 = call_llm(client, STEP3_SYSTEM, s3_input, max_tokens=300)
+    s1, s2, s3 = get_cot(agent_id)
 
-        yield render_chain(s1_text=s1, s2_text=s2, s3_text=s3, status="done")
-
-    except Exception as e:
-        yield render_chain(s3_text=f"❌ Error: {str(e)}", status="done")
-
-
-def call_llm(client, system_prompt, user_content, max_tokens=400):
-    response = client.chat.completions.create(
-        model=MODEL_ID,
-        messages=[
-            {"role": "system", "content": system_prompt},
-            {"role": "user",   "content": user_content},
-        ],
-        max_tokens=max_tokens,
-        temperature=0.3,
-    )
-    return response.choices[0].message.content.strip()
+    yield render_chain("", "", "", status="running1")
+    time.sleep(0.8)
+    yield render_chain(s1, "", "", status="running2")
+    time.sleep(0.8)
+    yield render_chain(s1, s2, "", status="running3")
+    time.sleep(0.8)
+    yield render_chain(s1, s2, s3, status="done")
 
 
 # ── UI ────────────────────────────────────────────────────────────────────────
@@ -599,14 +452,6 @@ with gr.Blocks(title="HiCoTraj Demo", theme=gr.themes.Soft()) as app:
     gr.Markdown("## HiCoTraj — Trajectory Visualization & Hierarchical CoT Demo")
     gr.Markdown("*Zero-Shot Demographic Reasoning via Hierarchical Chain-of-Thought Prompting from Trajectory*")
 
-    with gr.Row():
-        hf_token_box = gr.Textbox(
-            label="Hugging Face Token",
-            placeholder="hf_...",
-            type="password",
-            scale=2
-        )
-
     with gr.Row():
         agent_dd = gr.Dropdown(
             choices=[str(a) for a in sample_agents],
@@ -621,8 +466,6 @@ with gr.Blocks(title="HiCoTraj Demo", theme=gr.themes.Soft()) as app:
         )
 
     with gr.Row():
-
-        # LEFT: map + NUMOSIM data
         with gr.Column(scale=1):
             gr.Markdown("### Trajectory Map")
             map_out = gr.HTML()
@@ -632,11 +475,10 @@ with gr.Blocks(title="HiCoTraj Demo", theme=gr.themes.Soft()) as app:
                 label="Mobility Summary + Weekly Check-in"
             )
 
-        # RIGHT: reasoning chain
         with gr.Column(scale=1):
             gr.Markdown("### Hierarchical Chain-of-Thought Reasoning")
-            run_btn = gr.Button("▶ Run HiCoTraj Inference", variant="primary")
-            chain_out = gr.HTML(value=render_chain(status="idle"))
+            run_btn   = gr.Button("▶ Run HiCoTraj", variant="primary")
+            chain_out = gr.HTML(value=render_chain("", "", "", status="idle"))
 
     agent_dd.change(
         fn=on_select, inputs=agent_dd,
@@ -647,9 +489,8 @@ with gr.Blocks(title="HiCoTraj Demo", theme=gr.themes.Soft()) as app:
         outputs=[map_out, raw_out, demo_label, chain_out]
     )
     run_btn.click(
-        fn=run_inference,
-        inputs=[agent_dd, hf_token_box],
-        outputs=[chain_out]
+        fn=run_reveal, inputs=agent_dd,
+        outputs=chain_out
     )
 
 if __name__ == "__main__":