Archtin
Sign in

Visualizers

Ten interactive labs for the ideas that are hardest to grasp from prose alone. Everything runs in your browser, so you can break it, retune it and build intuition before the interview asks you to explain it.

Interactive

Tokenizer playground

Models never see characters — they see sub-word tokens. Type anything and watch how words split, and how cost is really measured.

Characters
120
Tokens
34
Chars / token
3.53
Words
17
Retrieval-augmented␣generation␣grounds␣the␣model␣in␣your␣own␣documents,␣so␣answers␣can␣cite␣sources␣instead␣of␣guessing.
Rule of thumb for English: about 4 characters per token. Code, non-English text and long identifiers cost noticeably more.
Interactive

Temperature, top-k and top-p

Same model, same logits — only the sampling knobs change. Watch which candidate tokens survive truncation.

database52.3%
index24.7%
cache13.2%
queue5.5%
service3.3%
spreadsheet0.8%
banana0.1%
Candidates kept
3
Probability mass kept
90.2%
Low temperature with a tight nucleus for extraction, classification and code. Loosen both only for brainstorming and copy.
Interactive

Attention heatmap

Pick a query token. Each earlier token is shaded by how much the query pulls from it — and nothing after it is visible, because decoding is causal.

The
2%
cache
4%
returned
4%
stale
6%
data
10%
because
11%
it
12%
never
15%
expired
35%
Real heads specialise: some track syntax, some track coreference, some just copy the previous token. This is a simplified stand-in.
Interactive

KV cache calculator

Decoding memory is dominated by the key-value cache, not the weights. Move the sliders to see why long context caps concurrency.

KV cache
31.3 GiB
With multi-query
0.98 GiB
Saving
32x
Grouped and multi-query attention exist for exactly this reason: they shrink the cache by the number of shared key-value heads.
Interactive

Embedding space and cosine similarity

A toy two-dimensional embedding space. Pick an anchor word and see which words point in the same direction.

databaseindexquerycachelatencyembeddingvectorsimilarityretrievalinvoicerecipeguitar
Closest to retrieval
vector0.99
embedding0.96
similarity0.96
query0.92
index0.88
database0.79
cache0.75
Real embeddings live in hundreds or thousands of dimensions, but the intuition holds: meaning is direction, not distance from the origin.
Interactive

Chunking lab

Slide the chunk size and overlap over a real support document and watch what each chunk would look like in the index.

Chunks
4
Stored chars
618
Duplication
24%
chunk 1

Payment webhooks are retried with exponential backoff for up to 24 hours. Every delivery carries an idempotency key in the header, and the same key is reused across retries. Consum

chunk 2

ame key is reused across retries. Consumers must therefore treat delivery as at-least-once and store processed keys. If a webhook is rejected with a 5xx response, the retry schedul

chunk 3

d with a 5xx response, the retry schedule restarts. A 4xx response is treated as a permanent failure and the event is moved to the dead letter queue, where it can be replayed manua

chunk 4

er queue, where it can be replayed manually from the dashboard for seven days.

Overlap buys recall for sentences that straddle a boundary, and costs storage plus duplicate hits. Split on structure first, then tune size.
Interactive

Approximate nearest neighbour search

Click anywhere to move the query vector. Increase the probe budget to explore more of the index and watch recall recover.

Recall @k
100%
Returned
5

Green points were returned by the approximate search. Red points are true nearest neighbours that were missed — exactly the silent quality loss you cannot see without ground-truth recall measurement.

This is the trade-off every vector index exposes: more probes or a higher efSearch means better recall and higher latency.
Interactive

RAG pipeline walkthrough

Step through a production retrieval pipeline stage by stage and watch the token budget being consumed.

Query rewrite

Resolve pronouns and history into a standalone query, optionally fan out into variants.

Context budget120 / 4000 tokens
Each stage needs its own metric. End-to-end quality hides which stage actually failed.
Interactive

Agent loop, step by step

A ReAct-style trace: reason, act with a tool, observe, repeat — under a hard step budget, with confirmation before any side effect.

step 1

The user asks why invoice 8891 was not paid. I need the invoice record first.

→ get_invoice(id: 8891)
← status: failed, reason: card_declined, retry_at: null
Step budget1 / 6
Without step and cost caps, the same loop happily retries a failing tool forever. Budget enforcement belongs in the orchestrator, not the prompt.
Interactive

Cost model

Estimate the monthly bill of an LLM feature, and see how much prompt caching and shorter outputs are actually worth.

With caching
$59
Without caching
$93
Saved
36%
Report cost per successful task, not cost per call — a cheap feature that fails is the most expensive option.