AI Visual Lab — Guia Tutorial

1. Introducción

El Transformer es la arquitectura que revolucionó el procesamiento de lenguaje natural y que impulsa modelos como GPT, BERT, y Claude. A diferencia de las RNNs que procesan tokens uno a uno, el Transformer procesa todos los tokens en paralelo usando el mecanismo de atención.

Esta simulación implementa un micro-Transformer con 2 capas y 2 heads de atención, dimensión d = 32, y un vocabulario de 20 palabras. Puedes ejecutar un forward pass completo o avanzar paso a paso por cada componente:

1. Embedding: palabra → vector
2. Positional Encoding: inyectar información de posición
3. Multi-Head Attention (×2 capas): tokens se comunican entre sí
4. Feed-Forward Network (×2 capas): procesamiento individual por token
5. Output: representación final

Cada componente se anima y visualiza en el canvas, mostrando las activaciones como barras de calor.

2. Conceptos Fundamentales

2.1 El flujo completo

\text{Output} = \text{LayerNorm}(x + \text{FFN}(\text{LayerNorm}(x + \text{Attention}(x))))

Este patrón se repite N veces (en esta simulación, N = 2).

2.2 Embedding

Cada palabra se mapea a un vector de dimensión d usando una tabla de embedding:

e_\text{token} = W_E[\text{token\_id}] \in \mathbb{R}^d

donde W_E \in \mathbb{R}^{|\text{vocab}| \times d} es la matriz de embedding.

2.3 Positional Encoding

El Transformer no tiene noción intrínseca del orden. Las codificaciones posicionales sinusoidales inyectan esta información:

PE_{(pos, 2i)} = \sin\!\left(\frac{pos}{10000^{2i/d}}\right)

PE_{(pos, 2i+1)} = \cos\!\left(\frac{pos}{10000^{2i/d}}\right)

Se suman al embedding: x = e_\text{token} + PE_{pos}.

2.4 Multi-Head Attention

\text{MultiHead}(x) = \text{Concat}(\text{head}_1, \text{head}_2) W^O

\text{head}_i = \text{softmax}\!\left(\frac{Q_i K_i^T}{\sqrt{d_k}}\right) V_i

Con 2 heads y d = 32: cada head opera en un subespacio de dimensión d_k = 16.

2.5 Feed-Forward Network

\text{FFN}(x) = \text{ReLU}(xW_1 + b_1)W_2 + b_2

Típicamente, la dimensión interna es 4d (en esta simulación: 4 \times 32 = 128). Esto da capacidad de procesamiento no lineal a cada token individualmente.

2.6 Conexiones residuales + Layer Normalization

x' = \text{LayerNorm}(x + \text{Sublayer}(x))

• Residual (x + \text{Sublayer}(x)): permite que los gradientes fluyan directamente
• LayerNorm: normaliza las activaciones para estabilizar el entrenamiento

3. La Interfaz

3.1 Estructura general

3.2 Diagrama del canvas

El canvas muestra el Transformer como una torre vertical de bloques:

1. Embedding (base): tokens convertidos en vectores
2. + Positional Encoding: vectores sinusoidales sumados
3. Capa 1: Attention → Add & Norm → FFN → Add & Norm
4. Capa 2: mismo patrón
5. Output (tope): representaciones finales

Cada componente se ilumina cuando está activo, y las activaciones se visualizan como barras de calor dentro de cada bloque. Partículas fluyen entre componentes durante la animación.

3.3 Header

Muestra el paso actual del forward pass y el número de tokens.

4. Controles Interactivos

4.1 Entrada

Frases disponibles: - “el gato se sienta” - “la red aprende rapido” - “el modelo genera texto” - “atencion es todo”

4.2 Audio

• Volumen: 0-100%
• Silenciar: toggle de audio

4.3 Componente activo

5. Las Matemáticas

5.1 Dimensiones del modelo

5.2 Cómputo del attention score

Para cada head i, la query q, key k y value v de cada token se computan:

q_j = x_j W_i^Q, \quad k_j = x_j W_i^K, \quad v_j = x_j W_i^V

Los scores entre todos los pares de tokens:

\alpha_{jl} = \frac{\exp(q_j \cdot k_l / \sqrt{d_k})}{\sum_m \exp(q_j \cdot k_m / \sqrt{d_k})}

La salida para el token j:

\text{head}_i(j) = \sum_l \alpha_{jl} \cdot v_l

5.3 Layer Normalization

\text{LayerNorm}(x) = \gamma \odot \frac{x - \mu}{\sqrt{\sigma^2 + \epsilon}} + \beta

donde \mu = \frac{1}{d}\sum_i x_i, \sigma^2 = \frac{1}{d}\sum_i (x_i - \mu)^2, y \gamma, \beta son parámetros aprendidos.

5.4 Conteo de parámetros

5.5 Positional Encoding: propiedades

Las codificaciones sinusoidales tienen propiedades geométricas útiles:

PE_{pos+k} \cdot PE_{pos} = f(k)

El producto punto entre dos posiciones depende solo de su distancia relativa, no de sus posiciones absolutas. Esto permite al modelo generalizar a longitudes de secuencia no vistas.

6. Sonificación

6.1 Mapeo audio

6.2 Interpretación

El forward pass suena como una progresión musical: comienza con notas aisladas (embedding), se enriquece con armonías (attention), pasa por transformaciones (FFN), y culmina con las representaciones finales.

7. Guía Paso a Paso

7.1 Forward pass completo

1. Selecciona “el gato se sienta”
2. Pulsa Forward Pass
3. Observa la animación: cada componente se ilumina secuencialmente
4. Nota cómo las partículas fluyen de abajo hacia arriba
5. Al final, observa las activaciones de salida en el gráfico

7.2 Paso a paso

1. Selecciona una frase y pulsa Paso a Paso
2. Embedding: cada token se convierte en un vector (barras en el gráfico)
3. PosEnc: los vectores se modifican ligeramente (ondas sinusoidales sumadas)
4. Attention L0: los tokens se “comunican” — las activaciones cambian según el contexto
5. FFN L0: cada token se transforma individualmente
6. Attention L1, FFN L1: segunda capa refina las representaciones
7. Output: representación final

7.3 Comparar frases

1. Ejecuta “el gato se sienta” paso a paso, anotando las activaciones del token “gato”
2. Reset, ejecuta “la red aprende rapido”, observa las activaciones de “red”
3. ¿Cómo difieren las representaciones después de la atención? Cada token se contextualiza diferente según su contexto

7.4 Observar la atención

1. En el paso de Attention, el gráfico de activaciones muestra cómo los tokens se influencian mutuamente
2. Nota si “gato” atiende más a “el” (artículo) o a “sienta” (verbo)
3. En la segunda capa de atención, las relaciones pueden ser más abstractas

8. Conceptos Avanzados

8.1 Pre-norm vs Post-norm

Hay dos variantes de dónde colocar LayerNorm:

• Post-norm (original): \text{LN}(x + \text{Sublayer}(x))
• Pre-norm (moderna): x + \text{Sublayer}(\text{LN}(x))

Pre-norm es más estable para entrenar redes profundas y es la variante usada en GPT-2/3.

8.2 Encoder vs Decoder

El Transformer original tiene dos partes: - Encoder: procesa la entrada completa con self-attention bidireccional (BERT) - Decoder: genera la salida token a token con atención causal + cross-attention (GPT usa solo decoder)

Esta simulación modela un encoder: todos los tokens se ven entre sí.

8.3 Escalamiento

Los Transformers escalan de forma predecible (leyes de escalado):

L \propto N^{-\alpha}

donde L es la loss, N es el número de parámetros, y \alpha \approx 0.076 para modelos de lenguaje. Duplicar parámetros reduce la loss de forma consistente.

8.4 Rotary Position Embeddings (RoPE)

Las codificaciones posicionales sinusoidales clásicas se suman al embedding. RoPE (usado en LLaMA, Mistral) en cambio rota los vectores Q y K:

\text{RoPE}(x, pos) = R_\theta(pos) \cdot x

Esto codifica posiciones relativas directamente en los productos punto de atención.

8.5 KV-Cache

Durante la generación, los vectores K y V de tokens anteriores no cambian. El KV-cache los almacena para no recalcularlos, reduciendo la complejidad de generación de O(n^2) a O(n) por token.

9. Ejercicios

Ejercicio 1: Embedding vs Output

Compara las activaciones después del embedding con las del output final para la frase “el gato se sienta”. ¿Qué tan diferentes son? El embedding es una representación estática; el output incorpora contexto de toda la frase.

Ejercicio 2: Efecto del positional encoding

Ejecuta paso a paso y compara las activaciones antes y después de sumar el positional encoding. ¿Se notan las ondas sinusoidales? ¿Son más pronunciadas para posiciones tempranas o tardías?

Ejercicio 3: Una capa vs dos

Anota las activaciones después de la capa 1 y después de la capa 2. ¿La segunda capa cambia mucho las representaciones? ¿O las refina sutilmente? En redes reales con 32+ capas, las capas profundas hacen cambios cada vez más pequeños (gracias a las conexiones residuales).

Ejercicio 4: Conteo de operaciones

Calcula el número de multiplicaciones en un forward pass para 4 tokens con d = 32 y 2 heads. Pista: la atención requiere O(n^2 d) y el FFN requiere O(n \cdot d \cdot d_{ff}). ¿Cuál es el cuello de botella para secuencias largas?

Ejercicio 5: Frases diferentes, mismas palabras

Compara “el modelo genera texto” con “atencion es todo”. ¿Cómo difieren las representaciones finales? ¿El token “modelo” en una frase tiene la misma representación que “modelo” en otra frase?

Ejercicio 6: LayerNorm en acción

Observa el gráfico de activaciones antes y después de cada LayerNorm. ¿Las activaciones se centran (media ≈ 0) y normalizan (varianza ≈ 1)? ¿Por qué esto es importante para la estabilidad del entrenamiento?

10. Glosario

11. Referencias

1. Vaswani, A. et al. (2017). “Attention Is All You Need.” NeurIPS.
2. Devlin, J. et al. (2019). “BERT: Pre-training of Deep Bidirectional Transformers.” NAACL.
3. Radford, A. et al. (2019). “Language Models are Unsupervised Multitask Learners.” OpenAI Technical Report.
4. Kaplan, J. et al. (2020). “Scaling Laws for Neural Language Models.” arXiv:2001.08361.
5. Elhage, N. et al. (2021). “A Mathematical Framework for Transformer Circuits.” Anthropic.
6. Su, J. et al. (2021). “RoFormer: Enhanced Transformer with Rotary Position Embedding.” arXiv:2104.09864.