Transformers — Índice dos Slides

Bloco 1 — Motivação: Tarefas de PLN

Bloco 2 — Representação de Texto: Bag-of-Words

Slide 02

📦

Do Exemplo à Bag-of-Words

Pipeline passo a passo + toggle entre "Ela saiu só" e variantes mostrando que a BoW perde a ordem.

interativo

Bloco 3 — Texto como Sequência e Limitações das RNNs

Slide 03

🔗

Texto como Sequência

Pipeline token→ID→embedding→LSTM passo a passo. Slider de comprimento comparando processamento sequencial (RNN) vs. paralelo (Transformer).

interativo

Bloco 4 — Embeddings Contextuais e Introdução a Transformers

Slide 04

✨

Embeddings Contextuais

Três frases com as mesmas palavras ("Ela saiu só", "Só ela saiu", "Ela só saiu"). Clique em "só" para ver como o significado muda com a posição.

interativo

Bloco 5 — Entrada do Transformer como Matriz de Tokens

Slide 05

📐

Sequência → Matriz de Embeddings

Token chips interativos com hover ligando token à linha da matriz E. Toggle entre três frases mostra a reordenação das linhas.

interativo

Bloco 6 — Positional Encoding dentro da Matriz de Entrada

Slide 06

📍

X = E + P — Identidade + Posição

Visualização de E + P = X com toggle entre frases. Destaca que P é fixo (posições inalteradas), E reordena, e X muda completamente.

interativo

Bloco 7 — Projeções Lineares Q, K, V

Slide 07

🔭

Projeções Q, K, V

Clique em tokens para ver suas projeções em Q, K e V. Tabela com papéis semânticos de cada projeção.

interativo

Bloco 8 — QKᵀ — Matriz de Alinhamento

Slide 08

🔥

QKᵀ — Matriz de Alinhamento

Heatmap 3×3 de scores. Clique em qualquer célula para ver o produto interno qᵢ·kⱼ e sua interpretação.

interativo

Bloco 9 — Escalonamento e Softmax

Slide 09

📊

Escalonamento e Softmax

Slider para dₖ mostrando efeito do escalonamento. Selecione linha para ver transformação em pesos que somam 1.

interativo

Bloco 10 — Z = AV — Combinação Ponderada

Slide 10

⚖️

Z = AV — Combinação Ponderada

Selecione token para ver a soma ponderada z = Σ aᵢⱼ·vⱼ passo a passo.

interativo

Bloco 11 — Pipeline Completo da Atenção

Slide 11

🔁

Pipeline Completo

Pipeline passo a passo do início ao fim. Comparação de três frases com heatmaps e saídas contextuais lado a lado.

interativo

Bloco 12 — Multi-Head Attention

Slide 12

🔀

Multi-Head Attention

Toggle entre cabeças de atenção para ver diferentes padrões de alinhamento. Heatmaps side-by-side comparando Head 1 e Head 2. Fórmula MultiHead = Concat(head₁,...,headₕ)W^O.

interativo

Bloco 13 — Feed-Forward, Residual e Normalização

Slide 13

🔧

Camada do Encoder

Diagrama clicável da camada: MHA → Add&Norm → FFN → Add&Norm. Clique em cada bloco para ver fórmulas e função. Passo a passo com matrizes para "Ela saiu só".

interativo

Bloco 14 — Encoder como Pilha de Blocos

Slide 14

🏗️

Encoder como Pilha

Botão "Adicionar camada" empilha blocos encoder incrementalmente. Mostra refinamento da matriz Z a cada camada. Referências a BERT (N=12) e GPT-3 (N=96).

interativo

Bloco 15 — Decoder: Estrutura e Mecanismos

Slide 15

🔓

Estrutura do Decoder

Diagrama clicável das três sublayers do decoder: Masked Self-Attention, Cross-Attention e FFN. Clique em cada bloco para ver descrição e fórmula.

interativo

Slide 16

🔒

Masked Self-Attention

Heatmap 4×4 para [<BOS>, Ela, saiu, só]. Toggle Sem/Com máscara causal. Clique nas linhas para ver os pesos e tokens bloqueados (−∞).

Diagrama mostrando Q do decoder e K,V do encoder. Clique em um token do decoder para ver as setas ponderadas ao encoder e o heatmap 3×3 de cross-attention.

interativo

Slide 18

▶️

Geração Autoregressiva

Passo a passo da geração de "Ela saiu só" token por token. Botão "Próximo passo" avança a sequência do decoder e mostra top-3 probabilidades.

interativo

Bloco 16 — Famílias de Transformers

Slide 19

🗂️

Famílias de Transformers

Três cards clicáveis: Encoder-only (BERT), Decoder-only (GPT) e Encoder-Decoder (T5). Expanda cada família para ver arquitetura, tarefas e modelos conhecidos.

interativo