Por Javier Ruiz, Periodista Especializado en Inteligencia Artificial y Tecnologías Emergente
Guía práctica para “ver” un Transformer por dentro con dos demos interactivos (NexGen y Polo Club)
Esta guía te explica, paso a paso, cómo usar dos visualizaciones web que muestran el recorrido interno de un modelo tipo GPT: el Transformer Architecture Explorer de NexGen y el Transformer Explainer del Polo Club (Georgia Tech).
Ambas interfaces están en inglés. La primera es minimalista y rápida para entender el pipeline; la segunda es profunda, con más controles y vistas internas del modelo.
Parte A: Transformer Architecture Explorer (NexGen): guía de uso detallada
Qué es y qué vas a ver
Es una demo interactiva que arranca siempre con una frase base en inglés: “the cat sat on”. Podés añadir hasta dos palabras más a esa base. Al hacer clic en Generate, la página visualiza cinco etapas típicas de un Transformer orientado a generación: Input Embeddings; Masked Multi-Head Attention; Add & Norm; Feed Forward Network; Linear + Softmax. También trae un control de Temperature con la indicación en inglés de que valores bajos hacen la predicción más enfocada y valores altos más creativa.
Cómo usarla paso a paso
-
Abrí la página del Explorer. Verás arriba el texto que indica que se parte de “the cat sat on” y que podés agregar hasta dos palabras.
-
En el cuadro de texto, añadí una o dos palabras en inglés a esa base. Ejemplo del propio sitio: la base fija es “the cat sat on” (vos completás hasta dos tokens más).
-
Revisá el control Temperature (aparece como “1.0 • Balanced”). Si lo dejás así, la predicción será equilibrada; si lo bajás, tenderá a ser más conservadora; si lo subís, más variada.
-
Hacé clic en Generate. La interfaz va iluminando las etapas del pipeline:
• Input Embeddings: tokeniza y convierte a vectores; añade la codificación posicional.
• Masked Multi-Head Attention: el token actual distribuye “atención” sobre los anteriores.
• Add & Norm: suma residual y normalización para estabilizar.
• Feed Forward Network: transformación no lineal por token para refinar la representación.
• Linear + Softmax: convierte la representación final en probabilidades y elige la siguiente palabra. -
Observá la palabra predicha. Podés repetir cambiando la palabra añadida o la temperatura para ver diferencias en la animación y en la salida.
Buenas prácticas con esta demo
Usá solo una o dos palabras extra: la interfaz está pensada así. Probá primero con Temperature en 1.0 y después compará una corrida con temperatura baja y otra alta. Si la animación no corre, verificá que el navegador tenga JavaScript habilitado. Esta demo prioriza claridad sobre complejidad: no esperes controles avanzados de muestreo ni vistas por cabeza de atención; su utilidad es mostrar el esqueleto en cinco pasos, rápido y sin ruido.
Problemas frecuentes y soluciones
No se ve la animación: asegurate de no tener bloqueadores que impidan la ejecución de scripts.
Se traba en móviles antiguos: probá en un navegador de escritorio actualizado.
No acepta una frase larga: es esperado; solo permite agregar hasta dos palabras a la base.
Resumen de aprendizaje con NexGen
Qué representa cada etapa y cómo se encadenan. Qué hace realmente la temperatura en la elección de la siguiente palabra. Cómo se transita desde texto crudo a una distribución de probabilidades sobre el próximo token, sin entrar en fórmulas.
Parte B: Transformer Explainer (Polo Club, Georgia Tech): guía de uso detallada
Qué es y qué vas a ver
Es una visualización interactiva más completa, basada en un modelo GPT-2 “small” (124M). La interfaz está en inglés y permite escribir tu propio texto (en inglés), ajustar Temperature y usar estrategias de muestreo Top-k y Top-p. Muestra tres bloques conceptuales: Embedding (tokenización, embeddings y posición), Transformer Block (self-attention multi-cabeza + MLP) y Output Probabilities (capa linear + softmax). Ofrece mapas de atención interactivos y vistas paso a paso (incluyendo Q, K y V) para entender cómo se calcula la atención.
Cómo usarla paso a paso
-
Abrí el Transformer Explainer. Identificá los controles superiores: Generate, Temperature y Sampling (Top-k y Top-p). El cuadro de entrada indica en inglés que podés escribir tu propia secuencia.
-
Ingresá un texto en inglés. La propia página usa como ejemplo “Data visualization empowers users to” para explicar el flujo; podés usar ese ejemplo o escribir el tuyo.
-
Configurá los parámetros (podés dejarlos por defecto para la primera corrida):
• Temperature: 1 implica distribución sin reescalar; menos de 1 hace la salida más determinista; mayor a 1 la hace más diversa.
• Top-k: limita la elección a las k palabras más probables.
• Top-p: considera los tokens más probables cuya suma de probabilidades supera p (nucleus sampling). -
Hacé clic en Generate. La página mostrará el recorrido:
• Embedding: tokenización; suma de embeddings de token y posición.
• Transformer Block: atención multi-cabeza y red feed-forward. Podés ver, por cabeza, cómo se reparten los pesos.
• Output Probabilities: distribución final (softmax) y token elegido. -
Explorá los mapas de atención. Pasá el cursor sobre un token para ver a qué otros “mira” y con qué peso. Si el panel lo permite, alterná entre diferentes cabezas para ver cómo cada una captura patrones distintos.
-
Repetí con variaciones controladas. Una corrida con Temperature menor que 1 y otra mayor que 1 te mostrará cómo cambia la diversidad de la salida. Luego probá Top-k y Top-p por separado para ver la diferencia entre “recortar a las k opciones principales” y “acumular probabilidad hasta p”.
Cómo interpretar lo que ves
Un peso de atención alto indica que, para ese paso, el token actual usa con mayor fuerza información de otro token específico; no es “causalidad biológica”, sino una ponderación en la operación de atención. Temperature reescala la distribución de logits: menor temperatura concentra probabilidad en pocas opciones; mayor temperatura la reparte, subiendo la chance de alternativas menos probables. Top-k y Top-p son filtros de muestreo: con Top-k reducís el espacio a un número fijo de candidatos; con Top-p, el tamaño del conjunto varía para cubrir una masa de probabilidad objetivo.
Buenas prácticas con este demo
Primero, una corrida con los valores por defecto para tener una línea base. Después, mové solo un parámetro por vez (Temperature, luego Top-k, luego Top-p) para atribuir cambios sin confusión. Si el texto es largo, generá por tramos para seguir mejor la visualización. Si el inglés no es fluido, usá la frase de ejemplo que la página muestra (“Data visualization empowers users to”) para que la distribución sea más estable.
Problemas frecuentes y soluciones
El navegador se siente lento: la visualización dibuja matrices y mapas; cerrá pestañas pesadas y evitá extensiones que inyectan scripts.
No veo cambios entre corridas: fijate que hayas modificado realmente el valor de Temperature o de Top-k/Top-p y que hayas presionado de nuevo Generate.
El texto en español da resultados pobres: el modelo y el interfaz están en inglés; usá prompts en inglés para obtener mapas de atención y probabilidades más informativos.
Resumen de aprendizaje con el Explainer
Cómo se implementa el bloque de atención (Q, K, V) y qué significa “multi-cabeza”. Cómo comparar efectos de Temperature vs Top-k vs Top-p en la selección del próximo token. Cómo leer un mapa de atención para entender qué fragmentos del contexto dominan la decisión.
Comparar y combinar: cuándo usar cada demo
NexGen es la entrada rápida y limpia: enseña el pipeline en cinco pasos y el efecto de Temperature sin abrumar. Polo Club es la inmersión profunda: mismos fundamentos pero con texto libre en inglés, mapas de atención, parámetros de muestreo y vistas por cabeza. Una secuencia razonable es empezar con NexGen para fijar el esqueleto mental y luego pasar al Explainer para ver detalles que NexGen no expone (Q-K-V, heads, Top-k/Top-p).
Consejos de precisión y control
Trabajá con cambios controlados: no muevas tres parámetros a la vez. Repetí una corrida base y cambiá un solo ajuste para entender su efecto. No sobreinterpretes un mapa de atención como “explicación última”: sirve para ver ponderaciones internas, no para atribuir intenciones. Recordá que las dos interfaces están en inglés; si lo que te interesa es observar el mecanismo (no la calidad literaria del texto), usá prompts simples y claros en inglés para que el flujo sea más nítido.
Glosario breve para seguir la visualización
Token: fragmento mínimo del texto de entrada (palabra o subpalabra).
Embedding: vector numérico que representa un token; se suma con el embedding posicional para incorporar orden.
Positional encoding: información de posición que se agrega a cada token.
Multi-Head Attention: varias “cabezas” calculan atención en paralelo; cada una aprende patrones distintos.
Q, K, V: Query, Key y Value, los vectores que usa la atención para calcular pesos.
Add & Norm (residual + normalización): estabiliza el entrenamiento y el paso de información entre capas.
Feed Forward (MLP): transforma cada token con capas densas no lineales.
Softmax: función que convierte puntajes en probabilidades y permite elegir el próximo token.
Temperature: reescala la distribución de probabilidades (baja = más enfocada; alta = más diversa).
Top-k / Top-p: métodos de muestreo para limitar el conjunto de candidatos (k fijo) o cubrir una masa de probabilidad p.
En un momento en el que los modelos de lenguaje dominan la inteligencia artificial, abrir la caja negra ya no es un lujo: es una responsabilidad. Estos demos cumplen esa tarea de manera ejemplar. Permiten ver que lo que parecía magia es, en realidad, un proceso comprensible y accesible. Y al mostrarlo, democratizan el conocimiento y preparan a la sociedad para un uso más crítico y consciente de la tecnología.
Referencias: