feat(web): info icon on every param with hover/click tooltip; add help text to all params

server/models/chatterbox_en.py

@@ -23,38 +23,43 @@ class Adapter:
         ParamSpec(
             name="exaggeration", label="Exaggeration", type="float",
             default=0.5, min=0.0, max=2.0, step=0.05,
-            help="Higher = more expressive prosody.",
+            help="How emotive the speech is. Higher pushes prosody, pacing, and emphasis; lower stays flat and neutral.",
             group="basic",
         ),
         ParamSpec(
             name="cfg_weight", label="CFG weight", type="float",
             default=0.5, min=0.0, max=1.0, step=0.05,
+            help="Classifier-free guidance. Higher sticks closer to the reference voice; lower allows more variation but may drift in identity.",
             group="basic",
         ),
         ParamSpec(
             name="temperature", label="Temperature", type="float",
             default=0.8, min=0.1, max=1.5, step=0.05,
+            help="Sampling randomness. Lower = deterministic and safer; higher = more creative but riskier and prone to artifacts.",
             group="basic",
         ),
         ParamSpec(
             name="seed", label="Seed", type="int",
             default=-1, min=-1, step=1,
-            help="-1 draws a random seed each time.",
+            help="Reproducibility. -1 draws a fresh random seed every run; any non-negative value pins the result so you can reproduce it.",
             group="advanced",
         ),
         ParamSpec(
             name="repetition_penalty", label="Repetition penalty", type="float",
             default=1.2, min=1.0, max=3.0, step=0.05,
+            help="Discourages repeating the same tokens. >1 reduces stuttering and loops; too high hurts natural fluency.",
             group="advanced",
         ),
         ParamSpec(
             name="min_p", label="Min p", type="float",
             default=0.05, min=0.0, max=1.0, step=0.01,
+            help="Cuts off tokens whose probability is below this fraction of the top token's. Higher trims more aggressively.",
             group="advanced",
         ),
         ParamSpec(
             name="top_p", label="Top p", type="float",
             default=1.0, min=0.0, max=1.0, step=0.01,
+            help="Nucleus sampling. Keep tokens until cumulative probability reaches this. Lower = safer/conservative.",
             group="advanced",
         ),
     ]

server/models/chatterbox_mtl.py

@@ -50,37 +50,43 @@ class Adapter:
         ParamSpec(
             name="exaggeration", label="Exaggeration", type="float",
             default=0.5, min=0.0, max=2.0, step=0.05,
+            help="How emotive the speech is. Higher pushes prosody and emphasis; lower stays flat and neutral.",
             group="basic",
         ),
         ParamSpec(
             name="cfg_weight", label="CFG weight", type="float",
             default=0.5, min=0.0, max=1.0, step=0.05,
+            help="Classifier-free guidance. Higher sticks closer to the reference voice; lower allows more variation but may drift in identity.",
             group="basic",
         ),
         ParamSpec(
             name="temperature", label="Temperature", type="float",
             default=0.8, min=0.1, max=1.5, step=0.05,
+            help="Sampling randomness. Lower = deterministic and safer; higher = more creative but riskier and prone to artifacts.",
             group="basic",
         ),
         ParamSpec(
             name="repetition_penalty", label="Repetition penalty", type="float",
             default=2.0, min=1.0, max=3.0, step=0.05,
+            help="Discourages repeating the same tokens. Higher than for English because non-Latin scripts loop more easily.",
             group="basic",
         ),
         ParamSpec(
             name="seed", label="Seed", type="int",
             default=-1, min=-1, step=1,
-            help="-1 draws a random seed each time.",
+            help="Reproducibility. -1 draws a fresh random seed every run; any non-negative value pins the result so you can reproduce it.",
             group="advanced",
         ),
         ParamSpec(
             name="min_p", label="Min p", type="float",
             default=0.05, min=0.0, max=1.0, step=0.01,
+            help="Cuts off tokens whose probability is below this fraction of the top token's. Higher trims more aggressively.",
             group="advanced",
         ),
         ParamSpec(
             name="top_p", label="Top p", type="float",
             default=1.0, min=0.0, max=1.0, step=0.01,
+            help="Nucleus sampling. Keep tokens until cumulative probability reaches this. Lower = safer/conservative.",
             group="advanced",
         ),
     ]

server/models/chatterbox_turbo.py

@@ -34,37 +34,43 @@ class Adapter:
         ParamSpec(
             name="temperature", label="Temperature", type="float",
             default=0.8, min=0.1, max=1.5, step=0.05,
+            help="Sampling randomness. Lower = deterministic and safer; higher = more creative but riskier and prone to artifacts.",
             group="basic",
         ),
         ParamSpec(
             name="top_p", label="Top p", type="float",
             default=0.95, min=0.0, max=1.0, step=0.01,
+            help="Nucleus sampling. Keep tokens until cumulative probability reaches this. Lower = safer/conservative.",
             group="basic",
         ),
         ParamSpec(
             name="repetition_penalty", label="Repetition penalty", type="float",
             default=1.2, min=1.0, max=3.0, step=0.05,
+            help="Discourages repeating the same tokens. >1 reduces stuttering and loops; too high hurts natural fluency.",
             group="basic",
         ),
         ParamSpec(
             name="seed", label="Seed", type="int",
             default=-1, min=-1, step=1,
-            help="-1 draws a random seed each time.",
+            help="Reproducibility. -1 draws a fresh random seed every run; any non-negative value pins the result so you can reproduce it.",
             group="advanced",
         ),
         ParamSpec(
             name="top_k", label="Top k", type="int",
             default=1000, min=1, max=4000, step=1,
+            help="Sample only from the top-k most likely tokens. Higher = more diversity. Turbo defaults to a wide pool.",
             group="advanced",
         ),
         ParamSpec(
             name="exaggeration", label="Exaggeration", type="float",
             default=0.0, min=0.0, max=2.0, step=0.05,
+            help="How emotive the speech is. Turbo defaults to 0 (flat); raise it for more expressive prosody.",
             group="advanced",
         ),
         ParamSpec(
             name="cfg_weight", label="CFG weight", type="float",
             default=0.0, min=0.0, max=1.0, step=0.05,
+            help="Classifier-free guidance. Higher sticks closer to the reference voice; lower allows more variation.",
             group="advanced",
         ),
     ]

web/src/components/InfoTip.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useRef, useState } from "react";
+
+type Props = { text: string };
+
+export default function InfoTip({ text }: Props) {
+  const [hover, setHover] = useState(false);
+  const [sticky, setSticky] = useState(false);
+  const ref = useRef<HTMLSpanElement>(null);
+  const open = hover || sticky;
+
+  useEffect(() => {
+    if (!sticky) return;
+    function onDocClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setSticky(false);
+      }
+    }
+    document.addEventListener("mousedown", onDocClick);
+    return () => document.removeEventListener("mousedown", onDocClick);
+  }, [sticky]);
+
+  return (
+    <span ref={ref} className="relative inline-flex align-middle">
+      <button
+        type="button"
+        aria-label="What does this parameter do?"
+        onClick={(e) => {
+          e.stopPropagation();
+          setSticky((s) => !s);
+        }}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        className="inline-flex size-4 items-center justify-center rounded-full border border-border text-[10px] font-mono italic text-muted-foreground hover:text-[hsl(var(--ember))] hover:border-[hsl(var(--ember))]/60 transition-colors leading-none"
+      >
+        i
+      </button>
+      {open && (
+        <span
+          role="tooltip"
+          className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 w-56 px-3 py-2 rounded-sm border border-border bg-paper text-[11px] leading-snug text-foreground shadow-lg z-50 normal-case tracking-normal pointer-events-none"
+        >
+          {text}
+        </span>
+      )}
+    </span>
+  );
+}

web/src/components/ParamsPanel.tsx

@@ -1,4 +1,5 @@
 import type { ParamSpec } from "@/lib/api";
+import InfoTip from "@/components/InfoTip";
 
 type Props = {
   specs: ParamSpec[];
@@ -6,6 +7,15 @@ type Props = {
   onChange: (next: Record<string, unknown>) => void;
 };
 
+function ParamLabel({ id, label, help }: { id: string; label: string; help?: string }) {
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      <label htmlFor={id} className="label-mono">{label}</label>
+      {help && <InfoTip text={help} />}
+    </span>
+  );
+}
+
 function renderControl(
   s: ParamSpec,
   values: Record<string, unknown>,
@@ -17,7 +27,7 @@ function renderControl(
     const v = (values[s.name] ?? s.default) as number;
     return (
       <div key={s.name} className="space-y-1.5">
-        <label htmlFor={id} className="label-mono">{s.label}</label>
+        <ParamLabel id={id} label={s.label} help={s.help} />
         <div className="flex flex-wrap items-center gap-x-3 gap-y-2">
           <input
             id={id}
@@ -40,9 +50,6 @@ function renderControl(
             <span className="label-mono text-muted-foreground">(random per generate)</span>
           )}
         </div>
-        {s.help && (
-          <p className="text-[11px] text-muted-foreground/80 italic">{s.help}</p>
-        )}
       </div>
     );
   }
@@ -51,7 +58,7 @@ function renderControl(
     return (
       <div key={s.name} className="space-y-1.5">
         <div className="flex items-baseline justify-between">
-          <label htmlFor={id} className="label-mono">{s.label}</label>
+          <ParamLabel id={id} label={s.label} help={s.help} />
           <span className="font-mono text-[12px] text-foreground tracking-wider">
             {Number.isFinite(n) ? n.toFixed(2) : String(current)}
           </span>
@@ -67,20 +74,13 @@ function renderControl(
           onChange={(e) => set(s.name, Number(e.target.value))}
           className="w-full accent-[hsl(var(--ember))]"
         />
-        {s.help && (
-          <p className="text-[11px] text-muted-foreground/80 italic">{s.help}</p>
-        )}
       </div>
     );
   }
   if (s.type === "bool") {
     return (
-      <label
-        key={s.name}
-        htmlFor={id}
-        className="flex items-center justify-between cursor-pointer"
-      >
-        <span className="label-mono">{s.label}</span>
+      <div key={s.name} className="flex items-center justify-between">
+        <ParamLabel id={id} label={s.label} help={s.help} />
         <input
           id={id}
           aria-label={s.label}
@@ -89,12 +89,12 @@ function renderControl(
           onChange={(e) => set(s.name, e.target.checked)}
           className="accent-[hsl(var(--ember))]"
         />
-      </label>
+      </div>
     );
   }
   return (
     <div key={s.name} className="space-y-1.5">
-      <label htmlFor={id} className="label-mono block">{s.label}</label>
+      <ParamLabel id={id} label={s.label} help={s.help} />
       <select
         id={id}
         aria-label={s.label}