Qué es WebGPU: inteligencia artificial en el navegador

01¿Qué es WebGPU?

Durante muchos años, las páginas web usaron sobre todo el procesador (CPU). Para acceder a la tarjeta gráfica existía WebGL, pero esa tecnología se diseñó principalmente para dibujar gráficos. La respuesta breve a la pregunta de qué es WebGPU es esta: el estándar web de nueva generación que abre al navegador toda la potencia de la tarjeta gráfica, tanto para gráficos como para cálculo.

WebGPU es un estándar desarrollado conjuntamente por los fabricantes de navegadores en el seno del W3C. En segundo plano utiliza las interfaces gráficas modernas del sistema operativo: Direct3D 12 en Windows, Metal en macOS e iOS, y Vulkan en Linux y Android. El desarrollador escribe una única interfaz JavaScript y el navegador la traduce al idioma del dispositivo.

Su novedad más importante es el soporte de compute shaders. Esto significa poder usar la tarjeta gráfica no solo para pintar píxeles, sino también para realizar miles de pequeños cálculos en paralelo. El funcionamiento de los modelos de inteligencia artificial se basa precisamente en este tipo de cálculos matriciales paralelos.

A los pequeños programas que se ejecutan en la tarjeta gráfica se les llama shaders. Para ellos WebGPU usa su propio lenguaje, WGSL (WebGPU Shading Language). La mayoría de los desarrolladores web no trabaja directamente con este lenguaje; los motores gráficos y las bibliotecas de IA generan el código WGSL en segundo plano. Aun así, conocer la lógica básica ayuda a entender los problemas de rendimiento: el procesador describe la tarea y la tarjeta gráfica aplica la misma operación a miles de datos a la vez.

02Diferencia entre WebGPU y WebGL

WebGL es la versión web de OpenGL ES, un antiguo estándar gráfico de escritorio, y sigue siendo de uso muy extendido. WebGPU, en cambio, está diseñado desde cero según el modo de funcionar de las tarjetas gráficas actuales. La diferencia entre WebGPU y WebGL se resume así:

03¿Cómo funciona la IA en el navegador?

Para ejecutar un modelo de inteligencia artificial en el navegador, el archivo del modelo (los pesos) se descarga en el dispositivo del usuario y se guarda en caché. Después, las bibliotecas JavaScript hacen que la tarjeta gráfica realice los cálculos del modelo mediante WebGPU. El resultado se muestra directamente en la página, sin pasar por el servidor.

Para ello los desarrolladores no necesitan escribir código desde cero. Bibliotecas de código abierto como ONNX Runtime Web, Transformers.js, TensorFlow.js y WebLLM ofrecen soporte de WebGPU. Estas bibliotecas reducen a unas pocas líneas de código la ejecución de modelos ya preparados en el navegador.

Otra tecnología que se menciona a menudo junto a WebGPU es WebAssembly. WebAssembly ejecuta en el procesador código a una velocidad próxima a la nativa; WebGPU, en cambio, utiliza la tarjeta gráfica. Muchas bibliotecas emplean ambas y recurren a WebAssembly en los dispositivos sin WebGPU. Para más detalles, consulte nuestro artículo qué es WebAssembly.

04Ventajas de la IA en el dispositivo

La on-device AI, o inteligencia artificial en el dispositivo, consiste en que el modelo no se ejecute en un servidor en la nube, sino en el propio dispositivo del usuario. Este enfoque tiene ventajas importantes para las empresas y los usuarios.

• Privacidad: la fotografía, el audio o el texto no salen del dispositivo; una gran ventaja para las aplicaciones que trabajan con datos sensibles.
• Baja latencia: al no haber ida y vuelta por la red, la respuesta es instantánea; fundamental para los efectos de cámara en directo y el procesamiento de audio.
• Coste de servidor: como el cálculo se hace en el dispositivo del usuario, no hay que pagar servidor por cada petición.
• Funcionamiento sin conexión: una vez descargado el modelo, se puede usar también sin conexión a internet.
• Escalabilidad: la carga del servidor no aumenta al crecer el número de usuarios, porque cada usuario emplea su propio dispositivo.

05Usos

La IA en el navegador todavía no sustituye a todos los grandes modelos de chat, pero con modelos pequeños y específicos ya se pueden hacer muchas cosas.

Imagen y cámara

La eliminación de fondos, la mejora de fotografías, el reconocimiento de objetos y los efectos de cámara en directo pueden hacerse en el dispositivo. Experiencias como ver un producto en su propia habitación o probarse unas gafas en la cara en una tienda online se sirven de esta tecnología.

Texto y voz

Los modelos de lenguaje pequeños pueden funcionar en el navegador para transcribir voz a texto, traducir, resumir y clasificar. Las sugerencias de escritura al rellenar un formulario o una aplicación de notas que funciona sin conexión son ejemplos de ello.

3D y visualización

Los configuradores de producto, las presentaciones arquitectónicas e inmobiliarias, las visualizaciones de grandes volúmenes de datos y los juegos de navegador aprovechan la parte gráfica de WebGPU. Este tipo de experiencias dan un resultado impresionante cuando se combinan con un buen planteamiento de diseño UI/UX.

06Compatibilidad con navegadores y comprobación

WebGPU está disponible de forma generalizada en el escritorio en los navegadores basados en Chromium (Chrome, Edge); en Safari y Firefox el soporte llega de forma gradual. En dispositivos móviles y hardware antiguo, la situación puede variar. Compruebe la tabla de compatibilidad actualizada en la documentación de MDN sobre WebGPU.

Por eso, en cualquier proyecto que use WebGPU hay que hacer una detección de funciones y prever una alternativa para los dispositivos no compatibles. El código siguiente comprueba si el navegador admite WebGPU.

• Puede probar el código rápidamente ejecutándolo en la consola de desarrollador del navegador.
• WebGPU solo puede usarse en un contexto seguro (HTTPS o localhost).
• En los dispositivos no compatibles, pase a una alternativa basada en WebGL o WebAssembly.

async function webgpuHazirMi() {
  if (!navigator.gpu) {
    console.log('Bu tarayici WebGPU desteklemiyor.');
    return null;
  }
  const adapter = await navigator.gpu.requestAdapter();
  if (!adapter) {
    console.log('Uygun GPU bulunamadi.');
    return null;
  }
  const device = await adapter.requestDevice();
  console.log('WebGPU hazir.');
  return device;
}

webgpuHazirMi();

07Límites y puntos de atención

El mayor límite es el tamaño del modelo. Los grandes modelos de lenguaje ocupan gigabytes; hacer que cada visitante los descargue no es realista ni por el tiempo ni por la cuota de datos. Los modelos que se ejecuten en el navegador deben ser pequeños, comprimidos (cuantizados) y estar orientados a una tarea concreta.

El segundo límite es la diversidad de dispositivos. Un modelo que funciona con fluidez en una potente tarjeta gráfica de sobremesa puede ir lento en un teléfono de gama básica o aumentar el consumo de batería. Compruebe en los datos de analítica qué dispositivos usa su público objetivo.

El tercero es el rendimiento de la página. Los archivos de modelo pesados y los cálculos no deben ralentizar la primera carga de la página. Cargar el modelo cuando el usuario necesite la función correspondiente es la forma de mantener los valores de Core Web Vitals (LCP ≤ 2,5 s, INP ≤ 200 ms). Lograr este equilibrio es tarea de la gestión de velocidad y rendimiento.

08¿Cuándo usarlo en proyectos web?

WebGPU no es necesario para todas las webs. Para una web corporativa de presentación o una tienda online estándar, una estructura rápida, sencilla y accesible es mucho más importante. WebGPU tiene sentido para las operaciones de IA que exigen privacidad, el procesamiento de imagen y audio en tiempo real, las experiencias 3D intensivas y los trabajos de cálculo en los que se quiere reducir el coste de servidor.

A la hora de decidir, hágase esta pregunta: si esta función se hiciera en el servidor, ¿qué perdería? Si la respuesta es privacidad, latencia o coste, WebGPU es un firme candidato. El enfoque que sitúa la IA en el centro del producto lo tratamos en nuestro artículo sobre las aplicaciones AI-native, y el uso de herramientas de IA en el desarrollo, en el artículo programar con inteligencia artificial.

Aurora Yazılım elige la tecnología según la necesidad en sus proyectos de diseño web y en sus soluciones de software sectoriales; solo usa un estándar nuevo allí donde realmente aporta valor. Si desea hablar de su proyecto, puede contactarnos desde nuestra página de contacto.