Rebuild passport as native HTML cards (light theme, no more alien dark-teal block)

app.py

@@ -647,7 +647,152 @@ def _sensory_profile(name):
         out[axis] = float(np.mean(vals)) if vals else 0.0
     return out
 
+def render_passport_html(name):
+    """Native HTML/CSS passport that lives inside the white Gradio page.
+    Returns (html_str, sensory_radar_png_figure)."""
+    if not name:
+        return "<p style='color:#888'>Pick an ingredient.</p>", None
+    pretty = name.replace("_", " ").title()
+    group = _NAME_TO_GROUP.get(name, "Other")
+    sens = _sensory_profile(name)
+    # Build sensory radar as a small standalone figure
+    fig, ax = plt.subplots(figsize=(4.5, 4.5), subplot_kw={"projection": "polar"})
+    fig.patch.set_facecolor("#ffffff")
+    ax.set_facecolor("#ffffff")
+    theta = np.linspace(0, 2*np.pi, len(PASSPORT_SENS), endpoint=False)
+    r = np.array([max(0.0, sens[a]) for a in PASSPORT_SENS])
+    theta_c = np.concatenate([theta, theta[:1]])
+    r_c = np.concatenate([r, r[:1]])
+    ax.plot(theta_c, r_c, color=KAIKAKU_ACCENT, lw=2.2)
+    ax.fill(theta_c, r_c, color=KAIKAKU_ACCENT, alpha=0.22)
+    ax.set_xticks(theta)
+    ax.set_xticklabels([a.title() for a in PASSPORT_SENS], color="#0f172a", fontsize=11, fontweight="bold")
+    ax.set_yticklabels([])
+    ax.set_ylim(0, max(0.5, float(r.max()) + 0.08))
+    ax.grid(color="#cbd5e1", alpha=0.7, lw=0.5)
+    ax.spines["polar"].set_color("#94a3b8")
+    plt.tight_layout()
+    radar_fig = fig
+
+    # Compute neighbours per sibling
+    nb_blocks = []
+    for sib in PASSPORT_SIBS:
+        m = MODELS[sib]
+        if name not in m.vocab:
+            rows_html = "<div style='color:#94a3b8;font-style:italic;padding:8px'>(not in vocab)</div>"
+        else:
+            q = _unit(m.E[m.vocab[name]])
+            items = []
+            for nb, sim in _topk(m, q, 5, exclude=[name]):
+                items.append(
+                    f"<div style='display:flex;justify-content:space-between;padding:5px 0;"
+                    f"border-bottom:1px solid #e2e8f0'>"
+                    f"<span style='color:#0f172a;font-weight:500'>{nb.replace('_', ' ')}</span>"
+                    f"<span style='color:{KAIKAKU_ACCENT};font-family:monospace;font-weight:600'>{sim:.3f}</span>"
+                    f"</div>"
+                )
+            rows_html = "".join(items)
+        nb_blocks.append(
+            f"<div style='flex:1;min-width:0;background:#f8fafc;border:1px solid #e2e8f0;"
+            f"border-radius:10px;padding:14px 16px'>"
+            f"<div style='color:{KAIKAKU_ACCENT};font-family:monospace;font-size:0.78em;"
+            f"font-weight:700;margin-bottom:10px;letter-spacing:0.04em'>{sib.upper()} · NEAREST NEIGHBOURS</div>"
+            f"{rows_html}</div>"
+        )
+
+    # Cuisine affiliation bars
+    m_chem = MODELS["chem"]
+    cuisine_html = ""
+    if name in m_chem.vocab:
+        v = _unit(m_chem.E[m_chem.vocab[name]])
+        vals = []
+        for cu in _CUISINES:
+            key = f"cuisine:{cu}"
+            if key in m_chem.supervised_poles:
+                vals.append((cu.replace("_", " "), float(v @ _unit(m_chem.supervised_poles[key]))))
+        vmax = max((abs(v_) for _, v_ in vals), default=1.0) or 1.0
+        cuisine_rows = []
+        for label, val in vals:
+            pct = abs(val) / vmax * 100
+            bar_color = KAIKAKU_ACCENT if val >= 0 else "#f59e0b"
+            cuisine_rows.append(
+                f"<div style='display:grid;grid-template-columns:140px 1fr 60px;gap:10px;"
+                f"align-items:center;padding:5px 0'>"
+                f"<span style='color:#0f172a;font-weight:500;font-size:0.92em'>{label}</span>"
+                f"<div style='background:#e2e8f0;border-radius:6px;height:14px;position:relative;overflow:hidden'>"
+                f"<div style='background:{bar_color};height:100%;width:{pct:.1f}%;border-radius:6px'></div>"
+                f"</div>"
+                f"<span style='color:{KAIKAKU_ACCENT};font-family:monospace;text-align:right;"
+                f"font-weight:600;font-size:0.88em'>{val:+.3f}</span>"
+                f"</div>"
+            )
+        cuisine_html = "".join(cuisine_rows)
+    else:
+        cuisine_html = "<div style='color:#94a3b8;font-style:italic'>(not in chem vocab)</div>"
+
+    # Closest factor modes
+    scored = []
+    for sib in PASSPORT_SIBS:
+        m = MODELS[sib]
+        if name not in m.vocab: continue
+        v = _unit(m.E[m.vocab[name]])
+        for md in m.modes:
+            if md.kind != "factor": continue
+            scored.append((float(_unit(md.pole) @ v), sib, md))
+    scored.sort(key=lambda x: -x[0])
+    mode_rows = []
+    for sim, sib, md in scored[:3]:
+        members = ", ".join(n.replace("_", " ") for n in md.members[:6])
+        mode_rows.append(
+            f"<div style='background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;"
+            f"padding:14px 16px;margin-bottom:10px'>"
+            f"<div style='display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px'>"
+            f"<div><span style='color:{KAIKAKU_ACCENT};font-family:monospace;font-size:0.78em;"
+            f"font-weight:700;margin-right:10px;letter-spacing:0.04em'>{sib.upper()}</span>"
+            f"<span style='color:#0f172a;font-weight:600;font-size:1.05em'>{md.label}</span></div>"
+            f"<span style='color:{KAIKAKU_ACCENT};font-family:monospace;font-weight:600'>cos {sim:.3f}</span>"
+            f"</div>"
+            f"<div style='color:#475569;font-size:0.88em;line-height:1.4'>{members}</div>"
+            f"</div>"
+        )
+
+    html = f"""
+    <div style='max-width:1180px;margin:0 auto'>
+      <div style='border-bottom:3px solid {KAIKAKU_ACCENT};padding-bottom:8px;margin-bottom:18px'>
+        <div style='font-size:2.2em;font-weight:800;color:#0f172a;letter-spacing:-0.02em;line-height:1.0'>{pretty}</div>
+        <div style='color:{KAIKAKU_ACCENT};font-family:monospace;font-size:0.82em;font-weight:600;
+                    margin-top:6px;letter-spacing:0.04em'>
+          INGREDIENT PASSPORT · FOOD GROUP: {group.upper()}
+        </div>
+      </div>
+      <div style='display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap'>{''.join(nb_blocks)}</div>
+      <div style='background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;
+                  padding:14px 18px;margin-bottom:18px'>
+        <div style='color:{KAIKAKU_ACCENT};font-family:monospace;font-size:0.78em;
+                    font-weight:700;margin-bottom:10px;letter-spacing:0.04em'>CUISINE AFFILIATION (chem)</div>
+        {cuisine_html}
+      </div>
+      <div>
+        <div style='color:{KAIKAKU_ACCENT};font-family:monospace;font-size:0.78em;
+                    font-weight:700;margin-bottom:10px;letter-spacing:0.04em'>
+          CLOSEST EMERGENT FACTOR MODES (top 3 across siblings)
+        </div>
+        {''.join(mode_rows) if mode_rows else "<div style='color:#94a3b8'>(no modes)</div>"}
+      </div>
+    </div>
+    """
+    return html, radar_fig
+
+
 def render_passport(name):
+    """Legacy entry point - delegate to the HTML version and discard the radar."""
+    html, _radar = render_passport_html(name)
+    # Return a placeholder matplotlib fig (small) since callers may expect one
+    fig, ax = plt.subplots(figsize=(0.1, 0.1))
+    ax.axis("off")
+    return fig
+
+def _render_passport_dummy(name):
     fig = plt.figure(figsize=(12, 10.5), facecolor=KAIKAKU_DARK)
     fig.patch.set_facecolor(KAIKAKU_DARK)
     gs = gridspec.GridSpec(4, 6, figure=fig,
@@ -1815,15 +1960,22 @@ Three sibling ingredient embeddings from [arXiv:2605.22391](https://arxiv.org/ab
         with gr.Tab("Inspect"):
             with gr.Tabs():
                 with gr.Tab("Ingredient passport"):
-                    gr.Markdown("Single-page dossier for one ingredient. Tweetable PNG.")
+                    gr.Markdown("Single-page dossier for one ingredient.")
                     with gr.Row():
                         pp_pick = gr.Dropdown(choices=ALL_INGREDIENTS, label="Ingredient", value="basil")
                         pp_btn = gr.Button("Generate passport", variant="primary")
-                    pp_plot = gr.Plot(label="")
-                    pp_btn.click(render_passport, inputs=[pp_pick], outputs=[pp_plot], show_progress="full")
-                    pp_pick.change(render_passport, inputs=[pp_pick], outputs=[pp_plot], show_progress="minimal")
-                    # render initial value
-                    demo.load(render_passport, inputs=[pp_pick], outputs=[pp_plot])
+                    with gr.Row():
+                        with gr.Column(scale=3):
+                            pp_html = gr.HTML(value=render_passport_html("basil")[0])
+                        with gr.Column(scale=1):
+                            gr.Markdown(f"<div style='color:{KAIKAKU_ACCENT};font-family:monospace;"
+                                        f"font-size:0.78em;font-weight:700;letter-spacing:0.04em'>SENSORY RADAR</div>")
+                            pp_radar = gr.Plot(value=render_passport_html("basil")[1], label="")
+                    def _passport_outputs(name):
+                        h, r = render_passport_html(name)
+                        return h, r
+                    pp_btn.click(_passport_outputs, inputs=[pp_pick], outputs=[pp_html, pp_radar], show_progress="minimal")
+                    pp_pick.change(_passport_outputs, inputs=[pp_pick], outputs=[pp_html, pp_radar], show_progress="minimal")
 
                 with gr.Tab("Mode wiki"):
                     gr.Markdown("Click into any of the ~500 modes for a per-mode wiki page.")