interactive visual explorer · ইন্টারঅ্যাক্টিভ ভিজ্যুয়াল এক্সপ্লোরার

অ্যাটেনশন,
সম্পূর্ণ ব্যাখ্যাসহ।

টোকেনাইজেশন থেকে আউটপুট পর্যন্ত — আধুনিক প্রতিটা LLM-এর পেছনের মেকানিজম।

RNN আর LSTM ভাষা বুঝতে চেয়েছিল এক শব্দ এক শব্দ করে। Attention সবকিছু বদলে দিল — আর এই পেজে তুমি সেটাকে অনুভব করবে: ৩-ডিতে ঘুরিয়ে দেখো, গণিতের স্লাইড নাড়াও, দেখো 'সে' শব্দটা নিজে থেকে 'ইঁদুর'-কে খুঁজে পায়। সবকিছু বাংলা ও ইংরেজিতে, সবকিছু ব্রাউজারে, কিছু ইনস্টল করতে হবে না।

25+ভিজ্যুয়ালাইজেশন
2ভাষা
5×3-Dএক্সপ্লোরার সিন
0সেটআপ লাগবে না
স্ক্রল

ছোট্ট ইতিহাস: স্মৃতির সমস্যা থেকে attention পর্যন্ত

Attention হঠাৎ আকাশ থেকে নামেনি। ত্রিশ বছর ধরে মানুষ চেষ্টা করেছে মেশিনকে শব্দের ক্রম বোঝাতে — প্রতিটা মডেল একটা সমস্যা সমাধান করে পরেরটা দেখিয়েছে। এই টাইমলাইন দেখলে বোঝা যাবে, ২০১৭-র Transformer 'বিপ্লব' কেন ছিল, কাকতালীয় নয়।

গভীরে: recurrence কেন রাস্তার শেষ ছিল (এক প্যারায়)
In an RNN, information from token 1 reaches token 100 only by passing through 99 intermediate states. At each hop some information is squashed, and gradients during training do the same — multiply a number by 0.9 ninety-nine times and see what remains. LSTMs patched this with gates, but the sequential chain remained: GPU parallelism was unusable across time, so models could not scale. Attention removes the chain completely — every token connects to every other token in ONE parallel step. That is what made GPT-3 possible.

টোকেনাইজেশন — মেশিন শব্দ পড়ে না, সংখ্যা পড়ে

story · গল্প A language model cannot read letters. Step one: cut the text into small pieces called tokens, and give each piece an integer ID. Real GPT tokenizers learn their cuts from trillions of characters — that is why 'unbelievable' becomes un + ##believ + ##able, and rare Bangla words often split more aggressively.

Gold chips are subword pieces; BERT-style "##" means "continuation of the previous piece". IDs here are toy hashes — real vocabularies (e.g. 50,257 entries in GPT-2) map IDs to pieces fixed at training time.

গভীরে: সাবওয়ার্ড কেন? (সহজ ভাষায় BPE)
Three options: characters (too tiny — wasteful context), words (too many — 'run', 'running', 'ran' would each need separate slots and new words would never fit), or subwords (just right). Byte Pair Encoding starts from characters and repeatedly merges the most frequent adjacent pair — 'e'+'r' → 'er', 'th'+'e' → 'the' — until the vocabulary reaches the target size (GPT-2: 50,257). Common words stay whole; rare words decompose into meaningful pieces. Bangla works the same way in multilingual tokenizers, though with less training data the cuts are usually finer. Try tiktokenizer.vercel.app to see real cuts live.

BPE মার্জ ল্যাব — টোকেনাইজারের কাটাশেখা চোখের সামনে

The actual Byte Pair Encoding algorithm, live on a 19-word corpus. Each step counts every adjacent pair and merges the most frequent one into a new vocabulary piece — exactly how GPT built 50,257 pieces, just with a bigger corpus.

কর্পাস (১৯টা শব্দ) — টুকরোগুলো · দিয়ে জোড়া
এই মুহূর্তে সবচেয়ে ঘন ঘন পাশাপাশি জোড়া
এখন পর্যন্ত ভোকাবুলারি (সোনালি = নতুন মার্জ)
নিজে করো: যেকোনো শব্দে এই মার্জগুলো প্রয়োগ করো

Type "lowest" → low + est. Type "glow" → g + low — the model reuses 'low' even inside 'glow'. That recycling is the whole point of subwords.

বাইট-অ্যানাটমি — মডেল আসলে প্রথমে কী দেখে

Modern tokenizers (GPT-2, GPT-4o, LLaMA) start from UTF-8 BYTES, not letters. An English letter is 1 byte; a Bangla letter is 3. That is why rare Bangla text costs 2–4× more tokens — more bytes, more pieces, more context window spent. Click any letter.

Byte-level BPE can encode ANY text — emoji, Bangla, code — with zero [UNK]. The merges then learn which byte groups are frequent in YOUR language.

স্পেশাল টোকেন — মডেল-ভাষার যতিচিহ্ন

Besides learned pieces, every tokenizer ships with reserved control tokens. They are not words — they are signals: where a sentence starts, where it ends, what is blank padding, what is hidden for guessing.

একই টেক্সট, তিন টোকেনাইজার — খরচ গুনে দেখো

Word-level: fewest tokens but chokes on new words. Character-level: never fails but wastes context. Subword: the trade-off that won. Watch the numbers change as you edit the text box above — Bangla words with suffixes split much more.

এমবেডিং — জ্যামিতি হয়ে ওঠা অর্থ

story · গল্প Each token ID borrows a vector — a list of numbers — from a huge virtual dictionary. In real GPT each vector has ~12,288 numbers. The beautiful part: directions in this space carry meaning, so words with similar meaning sit close together. Below, a toy 2-D map: hover the dots, then press the magic button.
টয় ২-D সেমান্টিক ম্যাপ — ক্লাস্টার = অর্থ (প্রাণী, রাজপরিবার, ফল, কাজ, রং)

ভেক্টরটা, সংখ্যা ধরে ধরে

One-hot × E — আসল lookup-টা

An embedding table E has one row per token. Multiplying a one-hot vector by E selects exactly one row — that IS the embedding.

one-hot (বাছাই টোকেনে ১)
E (৬ টোকেন × ৮ ডাইম) — বাছাই সারি জ্বলে ওঠে
ফল = সেই সারি = এমবেডিং

Cosine similarity — লাইভ হিসাব

ঘোরাতে ড্র্যাগ · জুমে স্ক্রল
গভীরে: দুই ভেক্টর তুলনা করা হয় কীভাবে?
The dot product: multiply the two vectors element by element and add everything up. Big result = vectors point the same way = similar meaning. It is literally the first half of every attention score you will see below. Cosine similarity is the same idea with vector lengths removed.

পজিশনাল এনকোডিং — attention ক্রম ভুলে যায়, তাই আমরা ফিসফিস করে বলি

story · গল্প Self-attention treats its input as a bag of tokens — 'dog bites man' and 'man bites dog' would look identical! Fix: add a unique positional fingerprint to every position. The 2017 recipe mixes sine and cosine waves of different frequencies — like clocks: one ticks fast, one slow, and together each position gets a signature.
$$PE_{(pos,\,2i)}=\sin\!\left(\frac{pos}{10000^{2i/d}}\right)\qquad PE_{(pos,\,2i+1)}=\cos\!\left(\frac{pos}{10000^{2i/d}}\right)$$
প্রতি সারি = এক ডাইমেনশন, প্রতি কলাম = এক পজিশন (০…৪৭)। হাইলাইট করা কলাম = স্লাইডারের বর্তমান পজিশন।
ডাইমেনশন ০–৫-এর কাঁচা sine/cosine তরঙ্গ — বাঁ দিকে দ্রুত ঘড়ি, ডান দিকে ধীর ঘড়ি।

তরঙ্গ-ল্যান্ডস্কেপ, ৩-ডিতে

Left→right = position 0…47, front→back = dimension 0…31, height = value (−1…+1). The glowing slice follows your slider — every position cuts a unique fingerprint out of this landscape.

ঘোরাতে ড্র্যাগ · জুমে স্ক্রল
গভীরে: ১,২,৩… না দিয়ে তরঙ্গ কেন?
Raw integers blow up (position 5000 ≫ any embedding value) and tell the model nothing about relative distance. Waves stay bounded in [−1, 1], and any shift by k positions is a fixed rotation of the wave pair — so '5 steps away' looks similar everywhere in the sentence. Modern models often learn positions or rotate queries/keys (RoPE in LLaMA) — same goal, newer math.

কুয়েরি, কী, ভ্যালু — প্রতিটা টোকেনের তিনটা ছদ্মবেশ

story · গল্প Think of a library. Your Query is what you type in the search box. Each book's Key is its spine label. The Value is the actual text inside. Search = compare your query with every key; the best matches hand you their values. That is ALL attention does — three learned projections of the same token, then a weighted mix.
Q

কুয়েরি — "আমি কী খুঁজছি?"

Q = X·W_Q। 'it'/'সে' সর্বনামটার কুয়েরি হয়ে ওঠে কিছু এমন: "কাছের একবচন বিশেষ্য, মিলবে প্রাণী বা বস্তু হলে"।

K

কী — "আমার মধ্যে কী আছে?"

K = X·W_K। 'mouse'/'ইঁদুর' শব্দের কী হয়ে ওঠে এমন: "একবচন প্রাণী-বিশেষ্য, সবেমাত্র উল্লেখ হয়েছে" — সে কীসের উত্তর দিতে পারে তার বিজ্ঞাপন।

V

ভ্যালু — "ম্যাচ পেলে কী দেব?"

V = X·W_V। 'it'/'সে' যদি 'mouse'/'ইঁদুর'-এর দিকে তাকায়, ইঁদুরের ভ্যালু (তার অর্থের পে-লোড) 'it'-এর ভেক্টরে ঢুকে যায়। তথ্য চলাচল করে V দিয়ে, কখনো স্কোর দিয়ে নয়।

নিজে দেখো — একটা টোকেন, চারটা আসল ভেক্টর

Pick a token from the sentence. You see its input vector x, then the SAME vector in three costumes (q, k, v) after multiplying by three learned 8×8 matrices — the real numbers the score matrix is built from.

টোকেন: x → ×W_Q, ×W_K, ×W_V → (q, k, v)
গভীরে: W_Q, W_K, W_V আসে কোথা থেকে?
They start as random matrices and are updated by gradient descent during training — nobody programs them. One attention block of GPT-3 size has 96 heads × 3 matrices per head. After training, heads self-organize into specialists (syntax, coreference, position…), exactly like the toy heads below.

স্কোর → সফটম্যাক্স → ওজন — সেই বিখ্যাত সূত্র, জীবন্ত

$$\text{Attention}(Q,K,V)=\text{softmax}\!\left(\frac{QK^{\top}}{\sqrt{d_k}}\right)V$$
play · খেলা Below: the score matrix for a real sentence. Row = the token doing the looking (query), column = the token being looked at (key). Click any row, then drag temperature and watch softmax sharpen or melt. When temperature is low, each token confidently picks one partner; when high, it listens to everyone a little.
0.0√d_k = √8 ≈ 2.831.0

গভীরে: √dk দিয়ে ভাগ করা হয় কেন?
If query and key components are independent with mean 0 and variance 1, their dot product over dk dimensions has variance dk. For dk=64 the raw scores spread over roughly ±8 — softmax saturates, gradients die. Dividing by √dk (not dk — that would over-flatten) restores a healthy spread for ANY head size. A one-line fix that makes deep stacks trainable.

আর্ক ডায়াগ্রাম — দেখো 'সে' কীভাবে 'ইঁদুর' খুঁজে পায়

play · খেলা This is the picture made famous by BertViz. Arc thickness = attention weight. Click any token to see who it listens to — and who listens to it. Try clicking 'it' / 'সে' first.

মাল্টি-হেড অ্যাটেনশন — বিশেষজ্ঞদের কমিটি

story · গল্প One head can only learn ONE kind of relationship. So the transformer runs many heads in parallel — GPT-3 uses 96 — each with its own W_Q, W_K, W_V. Their outputs are concatenated and mixed by W_O. Click each mini-matrix below to inspect a specialist.

গভীরে: ৮ হেড → concat → W_O (শেপগুলো)
With d_model=512 and 8 heads, each head works in dk = 512/8 = 64 dimensions. Head h computes softmax(Q_h K_hᵀ/√64)V_h ∈ ℝ^(n×64). Concatenating 8 heads gives ℝ^(n×512), multiplied by W_O ∈ ℝ^(512×512) to blend the specialists back into one representation. Same total cost as one big attention — but far more expressive.

কজ্যুয়াল মাস্কিং — ভবিষ্যতে চোখ দেওয়া নিষেধ

story · গল্প GPT writes left-to-right, one token at a time. If, while training on position 5, it could see token 6, that would be like cheating in an exam by reading tomorrow's answer sheet — the model would look brilliant during training and useless in real life. The causal mask sets every future score to −∞, so softmax gives the future exactly 0 weight.
সারি i শুধু j ≤ i কলামের দিকে তাকাতে পারে। ছানিযুক্ত (hatch) ঘরগুলো −∞ করা।

টগল করলে কী বদলায়

১. প্রতিটা সারি একমুখী দৃষ্টি পায়: টোকেন ৪ দেখে শুধু টোকেন ০–৪।

২. প্রতিটা সারির ওজন শুধু দৃশ্যমান ঘরগুলোর ওপরে আবার normalize হয়।

৩. এখন শেষ টোকেনই পুরো বাক্যের কনটেক্সট বহন করে — যে ভেক্টর দিয়ে পরের শব্দ অনুমান হয়, ঠিক সেটাই।

গভীরে: সমান্তরাল ট্রেনিংয়ের কৌশল
During training the FULL sentence is fed at once. The mask guarantees that position i's prediction never uses position >i — so we can predict every next-token target simultaneously in one pass, using GPUs to the max. At generation time no mask is even needed, because future tokens simply do not exist yet.

পুরো পাইপলাইন — এক বাক্য, শুরু থেকে শেষ

walk through · ধাপে ধাপে Everything you just learned, stitched into ONE computation, with real numbers computed in your browser. Click the chips or use the arrows. This is inspired by the Transformer Explainer sandbox.

আউটপুট — লজিটস, সফটম্যাক্স, স্যাম্পলিং: শব্দের জন্ম

story · গল্প At the very top, the transformer hands you a list of logits — one raw score for every token in the vocabulary. Softmax turns them into probabilities, and sampling picks one — that is the word you see appear in ChatGPT. Then the whole pipeline runs again with the new token appended. Press Sample many times and watch the histogram converge to the distribution: random individual picks, predictable long run.
পরের টোকেনের প্রার্থীদের ওপরে প্রোবাবিলিটি বণ্টন (টয় লজিট)

গভীরে: top-k, top-p, আর ChatGPT মানুষের মতো কেন শোনায়
Pure sampling occasionally lands on nonsense, so real systems trim the tail first: top-k keeps only the k highest, top-p (nucleus) keeps the smallest set whose probabilities sum to p (e.g. 0.9). Greedy decoding (always argmax) is safe but repetitive — models answer 'the same thing twice'. Temperature near 0 behaves like greedy; near 2, like a poet on espresso. Tools you use daily sit around 0.7–1.0.

গণিত, দুইবার — কঠোরভাবে এবং মানুষের ভাষায়

একই ভাবনা, দুই উচ্চতায়। যেচ্ছা সুইচ করো।
১ · রূপকথার সংস্করণ — সহজ ভাষায় ধাপ ১ — প্রতিটা টোকেন তিনটা নোট লেখে: আমি কী চাই (Q), আমি কী অফার করি (K), আমি কী বুঝিয়ে দেব (V)।
২ ধাপ ২ — প্রতিটা কুয়েরি প্রতিটা কী-এর সাক্ষাৎকার নেয়। সাক্ষাৎকারের স্কোর আসলে শুধুই একটা ডট প্রোডাক্ট — সাদৃশ্যের মিটার।
৩ ধাপ ৩ — স্কোরকে √dk দিয়ে ভাগ করা হয় (ভলিউম কন্ট্রোল), তারপর softmax দিয়ে নরম শতাংশে রূপান্তর।
৪ ধাপ ৪ — প্রতিটা টোকেন পায় সব ভ্যালুর ওজনসহ গড়: বেশিরভাগ আসে যার স্কোর সর্বোচ্চ, আর সবার থেকে এক চিমটি। এবার তার অর্থ কনটেক্সট-সচেতন — 'সে' অবশেষে জানে সে আসলে ইঁদুর।
৫ ধাপ ৫ — ব্লকটা N বার চলে (প্রতি লেয়ার অর্থকে আরও পরিশীলিত করে), তারপর ভোকাবুলারিতে প্রজেক্ট করে softmax: পরের টোকেন স্যাম্পল হয়। ব্যস, ChatGPT শুরু থেকে শেষ।

৩-ডি এক্সপ্লোরার — ঘোরাও, জুম করো, ক্লিক করো

dimension 3 · তৃতীয় মাত্রা Two Three.js scenes, built from scratch in the spirit of bbycroft.net/llm. Left: the whole transformer as a building you can walk around. Right: the attention matrix as a landscape of towers — every tower is one attention weight.

চারটা হেডই, ৩-ডিতে স্তূপাকারে

Four floors, one attention head per floor. Every tower is one weight. Click any tower to sync the 2-D explorers above to that head; hover for the exact token pair.

হেড বাছতে টাওয়ারে ক্লিক করো
তলা ১ = বাক্য-গঠন · তলা ২ = নির্দেশ-সম্পর্ক · তলা ৩ = অবস্থান · তলা ৪ = অর্থ

Attention নিয়ে সেরা ভিডিওগুলো — বাছাই করা ও এমবেড করা

Hand-picked explanations from 3Blue1Brown, StatQuest, Andrej Karpathy and Umar Jamil — the four channels teachers cite most. Watch after playing with the visualizations above; each video answers questions this page raises.

গ্লসারি — ২৫টা টার্ম, দুই ভাষাতেই

টার্ম বাংলা অর্থ

ক্রেডিট ও অনুপ্রেরণা

This site was built by combining the best ideas from six landmark visualizations. Open them all — each one goes deeper on a different axis.