Correr modelos en el navegador: lo que aprendí montando un lab entero
Este porfolio tiene más de veinte demos de ML corriendo en tu navegador sin ningún servidor: redes que entrenan en vivo, un transformer generando texto, difusión, una GAN. Esta es la guía práctica que me habría ahorrado semanas: formatos, tamaños, trampas y qué técnica usar para qué.
El laboratorio de esta web tiene más de veinte demos de machine learning y ninguna toca un servidor: todo corre en tu navegador. Por el camino aprendí a base de golpes qué funciona, qué pesa y qué explota. Esta es la chuleta que me habría gustado tener el primer día, con los números reales de este sitio.
La decisión más importante: entrenar aquí o traer entrenado. Hay dos familias de demo. Las que entrenan en vivo (una red pequeña, word2vec, un perceptrón) solo necesitan matemática escrita a mano en JavaScript: arrays de floats, bucles y disciplina — sin librerías, sin descargas, arrancan al instante. Las que usan un modelo serio (reconocer dígitos, generar texto, difusión) se entrenan fuera, en Python, y viajan como un fichero de pesos. La trampa clásica es querer entrenar en el navegador algo demasiado grande: la frontera práctica hoy está en unas decenas de miles de parámetros por hilo.
Los pesos viajan mejor en int8. Un modelo en float32 pesa cuatro bytes por parámetro; redondeado a enteros de un byte con un factor de escala por tensor, pesa uno, y para inferencia la pérdida es casi siempre invisible (lo medí: mi clasificador de dígitos pasa de 98,7% a 98,3% de acierto). Mi formato son ficheros JSON con los pesos en base64: el transformer de caracteres completo queda en 1,1 MB, el generador de la GAN en 141 KB, el autoencoder en 168 KB. Se sirven estáticos, la CDN los comprime, y el navegador los decodifica en milisegundos.
Carga perezosa o pagarás el pato. Nada de esto debe descargarse hasta que el visitante lo pide. Cada demo se monta solo en cliente y los pesos se piden en el primer click. Aprendí esta lección por la vía cara: una librería de tokens de 3,6 MB coló en el bundle del servidor y rompió los despliegues durante doce días sin que me enterara.
Para modelos de verdad, ONNX o transformers.js. Cuando quieres un modelo preentrenado serio — embeddings de frases, clasificar imágenes de la cámara — no reinventes: transformers.js baja el modelo de Hugging Face, lo corre con WebAssembly o WebGPU, y lo cachea. El mapa de embeddings y la demo de la cámara de este lab van así. El precio es la primera descarga (decenas de MB para los pequeños): dilo claramente en la interfaz y deja que el usuario decida cuándo.
El hilo principal es sagrado. Evaluar 300 imágenes o entrenar mil pasos congela la página si lo haces de golpe. Las opciones, de simple a sofisticada: trocear el trabajo con setTimeout y una barra de progreso (así miden su precisión las demos de cuantización y poda), hacer solo un poco por frame de animación (así entrenan las que entrenan), o un web worker si el cálculo es opaco y largo. Y una sorpresa: lo que más congelaba mi web no era el ML, eran las escenas 3D decorativas — en máquinas sin GPU dejaban sin aire a todo lo demás.
Sé honesto con lo que sale. Un modelo de difusión de medio millón de parámetros a veces genera un dígito precioso y a veces un borrón. Puedes esconderlo con ejemplos escogidos, o puedes escribir en la propia demo que ambos resultados son normales y por qué. Lo segundo cuesta una frase y te la juegas menos: el visitante técnico nota los trucos, y el que no lo es aprende más de la limitación que del éxito.
La conclusión que me llevo: el navegador de 2026 es una plataforma de ML perfectamente seria para modelos de hasta unos pocos millones de parámetros — gratis, privada y sin operaciones. Todo lo que describe este artículo se puede tocar en el laboratorio.
