--- title: "Transformers.js: IA local y privada en el navegador" canonical: https://wavect.io/es/blog/transformers-js-browser-ai-guide/ language: es description: "¿Cuándo debe la IA ejecutarse en el navegador? Compara privacidad, coste API, WebGPU, casos de uso, límites y despliegue con Transformers.js." image: "https://wavect.io/img/blog/headers/header_transformers-js-browser-ai-guide.png" author: ["Kevin Riedl"] published: "2026-08-15" updated: "2026-09-02" reviewed: "2026-09-02" --- # Transformers.js en el navegador: cuándo llevar la IA local a tu producto [**Volver**](/es/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/es/team/kevin-riedl/) [Kevin Riedl](/es/team/kevin-riedl/) https://linkedin.com/in/wsdt 10 min de lectura · 15 de agosto de 2026 Última revisión 2 de septiembre de 2026 [**Siguiente**](/es/blog/github-spec-kit-production-guide/) Resumen Transformers.js puede mantener la inferencia compatible en el dispositivo, eliminar la tarifa del modelo por petición y funcionar sin conexión tras guardar los recursos, pero traslada coste a descargas, cómputo del usuario e ingeniería. Los paquetes actual y anterior de npm registraron 10.694.755 descargas combinadas durante los 30 días terminados el 9 de agosto de 2026, unas 4,7 veces el periodo comparable seis meses antes. Los mejores casos incluyen embeddings, clasificación, detección de PII, documentos, visión y audio. Usa Web Worker, recursos fijados, controles visibles de descarga y caché, evaluaciones propias, inspección de privacidad, detección WebGPU, alternativa WASM o API probada y despliegue controlado. **Transformers.js es una opción sólida para producción cuando la tarea de IA está acotada, una primera descarga del modelo es aceptable y el texto, las imágenes o el audio del usuario no deben enviarse a una API de inferencia.** Puede eliminar tarifas por petición, funcionar sin conexión después de guardar los recursos y mantener la inferencia en el dispositivo. No sustituye a toda la nube. El usuario aporta ancho de banda, memoria, batería y hardware, mientras tu equipo sigue siendo responsable de calidad, compatibilidad, licencias, privacidad y alternativas. Esta guía responde a la decisión de arquitectura del lado del cliente. Para la economía de servidores o nube privada, consulta nuestra [calculadora de equilibrio entre modelos locales y APIs](/es/blog/local-models-vs-apis-break-even-eu-2026/). Para un modelo comprimido concreto en hardware de móvil, usa el [análisis de Bonsai 27B en el dispositivo](/es/blog/bonsai-27b-phone-local-ai-review/). Separar estas intenciones evita competir con nuestras páginas de autoalojamiento y ajuste de hardware. | Pregunta | Respuesta breve | Lectura comercial | | --- | --- | --- | | ¿Qué es? | Una biblioteca JavaScript que ejecuta modelos compatibles de Hugging Face con ONNX Runtime | Añade IA a un producto web sin convertir cada inferencia en una petición al servidor | | ¿Es privada? | La inferencia puede quedar en el dispositivo, pero otros flujos de la aplicación no desaparecen | La privacidad pertenece a la arquitectura completa | | ¿Es gratis? | La inferencia local no tiene una tarifa API por token | Ingeniería, descarga, soporte, pruebas y cómputo del dispositivo siguen teniendo coste | | ¿Cuál es el patrón de producción? | Web Worker, detección de capacidades, modelo cuantizado, caché, evaluación y alternativa | Diseña para el dispositivo compatible más débil, no para la demo | ## ¿Transformers.js superó de verdad los diez millones de descargas mensuales? **Sí, al sumar el nombre actual y el anterior del paquete, aunque el crecimiento exige una base coherente.** La API pública de npm registra, durante los 30 días terminados el 9 de agosto de 2026, [8.251.156 descargas de `@huggingface/transformers`](https://api.npmjs.org/downloads/point/2026-07-11:2026-08-09/%40huggingface%2Ftransformers) y [2.443.599 del paquete anterior `@xenova/transformers`](https://api.npmjs.org/downloads/point/2026-07-11:2026-08-09/%40xenova%2Ftransformers). El total es 10.694.755. Un periodo comparable de 30 días seis meses antes muestra [1.113.605 descargas del paquete actual](https://api.npmjs.org/downloads/point/2026-01-11:2026-02-09/%40huggingface%2Ftransformers) y [1.158.603 del anterior](https://api.npmjs.org/downloads/point/2026-01-11:2026-02-09/%40xenova%2Ftransformers). El crecimiento combinado es de unas 4,7 veces y el paquete actual creció unas 7,4 veces. La adopción es extraordinaria, pero una comparación equivalente no permite repetir “casi diez veces” como cifra exacta para ambos paquetes. ## ¿Por qué crece ahora la IA en el navegador? [Transformers.js v4 de Hugging Face](https://huggingface.co/blog/transformersjs-v4) incorporó un runtime WebGPU reescrito en C++ y probado en unas 200 arquitecturas compatibles. Hugging Face comunica una aceleración de unas cuatro veces para embeddings BERT, un bundle web predeterminado un 53 por ciento menor, controles de producción y modelos de más de 8B parámetros. Su resultado de unos 60 tokens por segundo con GPT-OSS 20B en un M4 Pro Max demuestra una máquina de gama alta, no el portátil medio del cliente. `ModelRegistry` permite inspeccionar archivos, tamaño de descarga, estado de caché, tipos de datos y eliminación de recursos. Eso importa más a un producto que otro récord. La interfaz debe explicar la descarga, mostrar progreso, reintentar y ofrecer una forma de recuperar almacenamiento. En la fecha de revisión, [Transformers.js 4.2.0 es la versión estable actual](https://github.com/huggingface/transformers.js/releases/tag/4.2.0), publicada el 23 de abril de 2026. Fija la biblioteca, la revisión del modelo, la cuantización y los recursos del runtime. “Latest” no es una estrategia de despliegue. ## ¿Qué queda local y qué sigue usando la red? El navegador puede calcular el modelo sin enviar la entrada a un servidor de inferencia. La configuración inicial todavía descarga pesos y archivos WebAssembly. Analítica, informes de errores, fuentes remotas o APIs de negocio abren rutas distintas. 1. **Primera carga:** JavaScript, runtime, tokenizador y pesos llegan al dispositivo. 2. **Caché:** el navegador puede conservar los recursos para visitas posteriores y uso sin conexión. 3. **Inferencia:** WebGPU o WebAssembly procesa la entrada en el dispositivo. 4. **Lógica de aplicación:** el resultado solo queda local si tu código no lo transmite. 5. **Alternativa:** una ruta cloud necesita política explícita e información visible. [La guía oficial de modelos personalizados](https://huggingface.co/docs/transformers.js/main/en/custom_usage) explica cómo definir una ruta local, desactivar modelos remotos y servir WebAssembly desde tu propio origen. ``` import { env, pipeline } from "@huggingface/transformers"; env.allowRemoteModels = false; env.localModelPath = "/models/"; env.backends.onnx.wasm.wasmPaths = "/wasm/"; const task = "text-classification"; const model = "approved-model"; const wasmOptions = { device: "wasm", dtype: "q8" }; async function createClassifier() { let adapter; if ("gpu" in navigator) { try { adapter = await navigator.gpu.requestAdapter(); } catch (error) { console.warn("WebGPU adapter request failed.", error); } } if (adapter?.features.has("shader-f16")) { try { return await pipeline(task, model, { device: "webgpu", dtype: "q4f16", }); } catch (error) { console.warn( "WebGPU model initialization failed; using WASM.", error, ); } } return pipeline(task, model, wasmOptions); } const classify = await createClassifier(); ``` La comprobación del adaptador evita seleccionar `q4f16` sin `shader-f16`. El error de pipeline capturado también cubre el rechazo del modelo o backend y vuelve a crear el clasificador con WASM. No incluyas un token de Hugging Face en código del navegador. [Hugging Face solo admite tokens para modelos privados o restringidos en entornos de servidor](https://huggingface.co/docs/transformers.js/en/guides/private), porque el navegador puede exponer la credencial. Si el modelo debe permanecer secreto, entregarlo al cliente suele ser una arquitectura incorrecta. ## ¿Cuándo vence la IA del navegador a una API? | Factor | Transformers.js en el navegador | API alojada | | --- | --- | --- | | Coste variable | Sin tarifa del modelo por petición tras la entrega | Precio por uso o capacidad reservada | | Primera experiencia | Descarga y compilación visibles | Cliente ligero, viaje de red en cada tarea | | Entrada sensible | Puede quedar en el dispositivo | Sale bajo controles contractuales | | Consistencia | Varía por navegador, GPU, memoria, calor y batería | Infraestructura controlada | | Límite del modelo | Modelos pequeños o bien cuantizados | Modelos frontier y muy grandes | | Sin conexión | Posible tras completar la caché | Normalmente no disponible | | Secreto del modelo | Los pesos entregados se pueden inspeccionar | Los pesos permanecen en el servidor | [La guía web de ONNX Runtime](https://onnxruntime.ai/docs/tutorials/web/) identifica menor latencia para modelos adecuados, más privacidad, uso sin conexión y menos coste cloud. También advierte que los backends admiten operadores diferentes. Un modelo puede funcionar con WebAssembly y fallar con WebGPU, por lo que la alternativa necesita pruebas propias. ## ¿Qué casos comerciales son más fuertes? - **Búsqueda semántica privada:** embeddings de notas, archivos o historial sin subir el texto. - **Clasificación y routing:** etiquetar soporte, detectar intención o elegir el siguiente paso antes del servidor. - **Detección de PII antes de la nube:** localizar nombres, direcciones e identificadores. Nuestra [guía de redacción de PII](/es/blog/pii-redaction-before-llm-prompts/) cubre el control completo. - **Documentos, imagen y audio:** OCR, clasificación, eliminación de fondo, extracción, transcripción o clasificación de audio. - **Software de campo sin conexión:** mantener funciones útiles con conectividad deficiente. - **Generación híbrida:** tareas rutinarias locales y API potente solo para casos difíciles aprobados. El mejor primer proyecto rara vez es un chatbot general. Es un flujo estrecho con entrada clara, salida medible y un cuello de botella caro de privacidad o API. El servicio de [adopción de IA de Wavect](/es/services/ai-enablement/) cubre caso de uso, evaluación, modelo, privacidad, integración y despliegue. El [caso de Twinsoft AI](/es/case-studies/twinsoft-ai/) muestra por qué el flujo y los controles crean el valor. ## ¿Cuándo no deberías usar Transformers.js? - El razonamiento frontier es el producto y solo un modelo grande supera la evaluación. - Cada visitante es nuevo y una descarga única perjudica la conversión. - El modelo debe permanecer confidencial. - Memoria, calor, batería o cierre de pestañas crean deuda de soporte. - Son obligatorios control central, retención y auditoría. - No existe alternativa aceptable con WebAssembly o API. [MDN sigue marcando WebGPU con disponibilidad limitada](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU_API) y exige HTTPS. WebAssembly llega a más dispositivos, pero cambia rendimiento y elección del modelo. Define la matriz con dispositivos reales de clientes. ## Lista de control para producción 1. Define una tarea, usuario, límite de entrada y umbral de calidad. 2. Fija biblioteca, modelo, tokenizador, cuantización, runtime, licencia y hashes. 3. Muestra tamaño, progreso, almacenamiento, cancelación, reintento y borrado de caché. 4. Carga y ejecuta el modelo en un Web Worker. 5. Enruta por capacidades, no por nombre del navegador. 6. Compara ruta local, alternativa y sistema actual con una evaluación propia. 7. Inspecciona red, analítica, logs, errores y transiciones al cloud. 8. Despliega con opt-in y mide descarga, p50, p95, fallos, batería y escalado. 9. Mantén el modelo anterior y la API para revertir. ## Un piloto de 30 días | Semana | Entrega | Decisión | | --- | --- | --- | | 1 | Caso, evaluación, matriz de dispositivos y mapa de privacidad | ¿Existe un modelo compacto plausible? | | 2 | Prototipo en Worker con WebGPU, WASM, descarga y caché | ¿Cabe en el presupuesto de latencia y memoria? | | 3 | Recursos locales, inspección de red, licencia y alternativa API | ¿Se pueden demostrar privacidad y recuperación? | | 4 | Cohorte opt-in y coste por tarea correcta | ¿Escalar, mantener híbrido, cambiar o parar? | ## Preguntas frecuentes sobre Transformers.js ### ¿Transformers.js es gratis para uso comercial? La biblioteca usa Apache 2.0. Cada modelo tiene licencia y condiciones propias. La aprobación debe cubrir la revisión exacta, los datos y las obligaciones de la aplicación. ### ¿Transformers.js es completamente privado? La inferencia puede quedar local. Descargas, analítica, logs, errores, alternativa cloud y otros scripts siguen siendo rutas de red que debes probar y comunicar. ### ¿Funciona Transformers.js en cualquier navegador? WebAssembly ofrece cobertura amplia. WebGPU es más rápido, pero no está disponible de forma uniforme. Producción necesita detección, alternativa probada y matriz de dispositivos. ### ¿Puede ejecutar modelos de lenguaje grandes? Sí. La versión 4 admite modelos de más de 8B parámetros. Un resultado en M4 Pro Max no representa todos los equipos. Descarga, memoria, latencia, calor y calidad se deben medir. ### ¿Cuándo es más barata la IA del navegador? Suele serlo con usuarios recurrentes, volumen alto, tarea acotada, modelo compacto, caché caliente y la misma calidad. En otros casos suele ganar una API o una arquitectura híbrida. ## Reflexiones finales Transformers.js ha pasado de demo llamativa a infraestructura de producto creíble. La mejor arquitectura ejecuta localmente las tareas donde importan privacidad, acceso sin conexión, latencia y volumen repetido, con una alternativa explícita para dispositivos y casos donde el modelo del navegador no alcanza la calidad. Empieza con un flujo medible y escala solo cuando mejore el coste por tarea correcta. Modelos e infraestructura ## Qué leer después Selección de modelos, economía de inferencia, despliegue local, compresión y serving. [Empieza aquí**Alojar LLMs en la UE: Cuándo Salen a Cuenta los Open Weights**](/es/blog/self-hosting-llms-eu-cost/) - [Cue Turn Detection: teléfonos, benchmarks y límites](/es/blog/cue-turn-detection-phone-numbers/) - [Google SAM ahora es Agent Mesh: MCP entre equipos](/es/blog/google-sam-agent-mesh-mcp-tools/) - [EdgeQuake: GraphRAG en PostgreSQL y memoria MCP para agentes](/es/blog/edgequake-postgresql-graphrag-mcp-agent-memory/) - [BitNet en CPU: 2B4T, requisitos de RAM y la cifra de 100B](/es/blog/bitnet-cpu-llm-ram-requirements/) - [SuperPenguin: costes de IA por PR, cliente y función](/es/blog/superpenguin-ai-roi-cost-per-pr-customer/) [Artículo anterior**El stack vLLM y Triton de Netflix: 7 lecciones de producción**](/es/blog/netflix-vllm-triton-inference-stack/) [Artículo siguiente**Cómo autoalojar LiteLLM en producción: guía 2026**](/es/blog/self-host-litellm-production-2026/) [**Volver**](/es/blog/overview/) [![Kevin Riedl](/img/team/kevin.webp)](/es/team/kevin-riedl/) [Kevin Riedl](/es/team/kevin-riedl/) https://linkedin.com/in/wsdt 10 min de lectura · 15 de agosto de 2026 Última revisión 2 de septiembre de 2026 [**Siguiente**](/es/blog/github-spec-kit-production-guide/)