{(() => {
// Offline build replaces the Claude-backed lab with a pre-baked
// library of additional dice; both render in the same `.lab` shell.
const Offline = window.OfflineMoreLab;
if (window.__OFFLINE && Offline) return ;
return ;
})()}
);
}
/* ---- "Try your own prompt" — asks Claude to estimate the top-K tokens. ---- */
function YourOwnPromptLab() {
const [prompt, setPrompt] = useState("The first man to walk on the moon was");
const [working, setWorking] = useState(false);
const [error, setError] = useState(null);
const [dist, setDist] = useState(null); // [{token, p}]
const [lastHit, setLastHit] = useState(null);
const [needleLeft, setNeedleLeft] = useState(0);
const [rolling, setRolling] = useState(false);
const estimate = useCallback(async () => {
if (!prompt.trim()) return;
setWorking(true);
setError(null);
setDist(null);
setLastHit(null);
try {
const sys = `You are a probabilistic-language-model simulator. Given a partial sentence, list the 4 most likely next single tokens (words or short fragments) along with rough probability estimates, plus one comically unlikely token for contrast. Probabilities should reflect realistic language-model behavior: a confident next-token prediction often has p > 0.5; an unlikely one is < 0.001. Respond ONLY with a JSON array of objects, no prose, no markdown, no code fences. Each object: {"token": string, "p": number}.`;
const raw = await window.claude.complete({
messages: [
{ role: "user", content: `${sys}\n\nPartial sentence: "${prompt.trim()}"` },
],
});
// Tolerate code-fence wrappers if Claude includes them anyway.
const cleaned = raw.replace(/```(?:json)?/g, "").trim();
const start = cleaned.indexOf("[");
const end = cleaned.lastIndexOf("]");
if (start === -1 || end === -1) throw new Error("Could not find a JSON array in the response.");
const parsed = JSON.parse(cleaned.slice(start, end + 1));
if (!Array.isArray(parsed) || !parsed.length) throw new Error("Empty distribution.");
// Normalize + sort. Clamp p to leave some tail mass.
const cleanedDist = parsed
.filter(x => x && typeof x.token === "string" && typeof x.p === "number")
.map(x => ({ token: x.token.replace(/^["']|["']$/g, ""), p: Math.max(0, Math.min(1, x.p)) }))
.sort((a, b) => b.p - a.p)
.slice(0, 5);
const sum = cleanedDist.reduce((a, b) => a + b.p, 0);
// If the model returned probabilities that sum to > 0.999, scale them
// down a touch so there's room for a visible long tail.
if (sum > 0.985) {
const factor = 0.985 / sum;
cleanedDist.forEach(x => x.p *= factor);
}
setDist(cleanedDist);
} catch (err) {
console.error(err);
setError(err.message || "Something went wrong.");
} finally {
setWorking(false);
}
}, [prompt]);
const segs = useMemo(() => {
if (!dist) return null;
let acc = 0;
const named = dist.map(d => {
const seg = { ...d, left: acc, width: d.p * 100 };
acc += d.p * 100;
return seg;
});
return { named, tail: { left: acc, width: Math.max(0, 100 - acc) } };
}, [dist]);
const rollOnce = useCallback(() => {
if (!dist || rolling) return;
setRolling(true);
setLastHit(null);
const target = sample(dist);
let i = 0;
const id = setInterval(() => {
i++;
if (i < 14) {
setNeedleLeft(Math.random() * 100);
} else {
clearInterval(id);
const center = target === -1
? (segs.tail.left + segs.tail.width / 2)
: (segs.named[target].left + segs.named[target].width / 2);
setNeedleLeft(center);
setTimeout(() => {
setLastHit(target);
setRolling(false);
}, 600);
}
}, 70);
}, [dist, segs, rolling]);
return (
Lab · load your own die
powered by Claude
setPrompt(e.target.value)}
onKeyDown={e => { if (e.key === "Enter") estimate(); }}
placeholder="e.g. The sky on a clear afternoon is"
/>
{[
"The first man to walk on the moon was",
"After it rains, the air smells",
"She unlocked the door and stepped",
"The doctor said the prognosis was",
].map(p => (
))}
{error &&
⚠ {error}
}
{dist && segs && (
{segs.named.map((s, i) => (
{s.width > 6 ? s.token : ""}
))}
{segs.tail.width > 4 ? "…tail" : ""}
{lastHit !== null && (
landed on
{lastHit === -1 ? "(tail — an off-script token)" : dist[lastHit].token}
)}