Update app.py

Tightened up spacing.

app.py

@@ -24,44 +24,51 @@ model = AutoModelForCausalLM.from_pretrained(MODEL_ID)
 # ---------- Theme & layout (light blue / white / black accents) ----------
 theme_css = """
 :root{
-  --primary:#38bdf8;     /* light blue */
-  --bg:#ffffff;          /* white */
-  --text:#0b0f14;        /* near-black */
-  --muted:#6b7280;       /* gray-500 */
-  --border:#e5e7eb;      /* gray-200 */
+  --primary:#38bdf8;  --bg:#ffffff;  --text:#0b0f14;  --muted:#6b7280;  --border:#e5e7eb;
+  --mono:'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
 }
-body{ background:var(--bg); color:var(--text); }
 
-.badge{
-  display:inline-block; padding:2px 8px; border:1px solid var(--border);
-  border-radius:999px; margin:2px;
-}
+/* Base */
+body{ background:var(--bg); color:var(--text); }
 
-/* Two-column layout with clear stacking (predictions above plot for events) */
-.app-row { display:flex; align-items:flex-start; gap:24px; }
-.predictions-panel { flex:0 0 360px; position:relative; z-index:10; }
-.plot-panel        { flex:1 1 auto;  position:relative; z-index:1; overflow:hidden; }
+/* Two-column layout */
+.app-row { display:flex; align-items:flex-start; gap:16px; }        /* was 24px */
+.predictions-panel { flex:0 0 320px; position:relative; z-index:10;}/* was 360px */
+.plot-panel        { flex:1 1 auto; position:relative; z-index:1; overflow:hidden; }
 
-/* Prediction rows (styled on a button or wrapper div) */
+/* Prediction rows (tighter) */
 .rowbtn{
-  width:100%; padding:10px 12px; border-radius:12px;
-  border:1px solid var(--border); background:#fff; color:var(--text);
+  width:100%;
+  padding:6px 10px;               /* was 10px 12px */
+  border-radius:10px;             /* was 12px */
+  border:1px solid var(--border);
+  background:#fff; color:var(--text);
   display:flex; justify-content:flex-start; align-items:center;
   text-align:left; cursor:pointer; user-select:none;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: var(--mono);
+  font-size:13px;                 /* was default ~14–16 */
+  line-height:1.15;
   letter-spacing:.2px;
+  margin-bottom:6px;              /* explicit, keeps list consistent */
 }
 .rowbtn:hover{ background:#f7fbff; border-color:#c3e8fb; }
+
+/* Neighbor chips (smaller) */
+.badge{
+  display:inline-block; padding:2px 6px;       /* was 2px 8px */
+  border:1px solid var(--border); border-radius:999px; margin:2px;
+  font-size:12px; line-height:1.15;
+}
 """
 
 
+
 # ---------- Reactive state ----------
-text_rx = solara.reactive("twinkle, twinkle, little ")
+text_rx = solara.reactive("Twinkle, twinkle, little ")
 preds_rx = solara.reactive(pd.DataFrame(columns=["probs", "id", "tok"]))
 selected_token_id_rx = solara.reactive(None)
 neighbor_list_rx = solara.reactive([])
 last_hovered_id_rx = solara.reactive(None)
-notice_rx = solara.reactive("Click a candidate (or hover to preview).")
 auto_running_rx = solara.reactive(True)
 
 
@@ -141,7 +148,7 @@ def base_scatter():
             hoverinfo="skip",
         ))
     fig.update_layout(
-        height=460, margin=dict(l=10,r=10,t=10,b=10),
+        height=380, margin=dict(l=6,r=6,t=6,b=6),
         paper_bgcolor="white", plot_bgcolor="white",
         xaxis=dict(visible=False), yaxis=dict(visible=False),
         showlegend=False,
@@ -289,7 +296,7 @@ def PredictionsList():
     with solara.Column(gap="6px", style={"maxWidth": "720px"}):
         solara.Markdown("### Prediction")
         solara.Text(
-            " #  probs    token  predicted next token",
+            " #  probs    tokenID  next predicted",
             style={
                 "color": "var(--muted)",
                 "fontFamily": 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
@@ -329,16 +336,15 @@ def PredictionsList():
 def Page():
     solara.Style(theme_css)
 
-    with solara.Column(margin=12, gap="16px"):
+    with solara.Column(margin=10, gap="12px"):
         solara.Markdown("# Next-Token Predictor + Semantic Neighborhood")
         solara.Markdown(
-            "Type text to see predictions update automatically. "
-            "Click a candidate to append it and highlight its **semantic neighborhood**. "
-            "Hover a candidate to preview its neighborhood."
+            "Type text to see AI's top predictions for the next token. "
+            "Click a token to append it to your text. "
+            "Hover over a token to preview its **semantic neighborhood**."
         )
 
         solara.InputText("Enter text", value=text_rx, continuous_update=True, style={"minWidth":"520px"})
-        solara.Markdown(f"*{notice_rx.value}*")
 
         with solara.Row(classes=["app-row"]):
             with solara.Column(classes=["predictions-panel"]):