Mejora el rendimiento y la UX de la IA del cliente

Maud Nalpas
Maud Nalpas

Si bien la mayoría de las funciones de IA en la Web dependen de los servidores, la IA del cliente se ejecuta directamente en el navegador del usuario. Esto ofrece beneficios como latencia baja, costos reducidos del servidor, sin requisitos de claves de API, mayor privacidad del usuario y acceso sin conexión. Puedes implementar IA del cliente que funcione en todos los navegadores con bibliotecas de JavaScript, como TensorFlow.js, Transformers.js y MediaPipe GenAI.

La IA del cliente también presenta desafíos de rendimiento: los usuarios deben descargar más archivos y su navegador debe trabajar más. Para que funcione bien, considera lo siguiente:

  • Tu caso de uso. ¿La IA del cliente es la opción adecuada para tu función? ¿Tu función se encuentra en un recorrido crítico del usuario? Si es así, ¿tienes un resguardo?
  • Prácticas recomendadas para la descarga y el uso de modelos. Sigue leyendo para obtener más información.

Antes de la descarga del modelo

Biblioteca de Mind y tamaño del modelo

Para implementar la IA del cliente, necesitarás un modelo y, por lo general, una biblioteca. Cuando elijas la biblioteca, evalúa su tamaño como lo harías con cualquier otra herramienta.

El tamaño del modelo también es importante. Lo que se considera grande para un modelo de IA depende de varios factores. 5 MB puede ser una regla práctica útil: también es el percentil 75 del tamaño medio de la página web. Un número más laxo sería 10 MB.

Estas son algunas consideraciones importantes sobre el tamaño del modelo:

  • Muchos modelos de IA específicos de la tarea pueden ser muy pequeños. Un modelo como BudouX, para la división precisa de caracteres en idiomas asiáticos, solo tiene 9.4 KB comprimidos con GZIP. El modelo de detección de idioma de MediaPipe es de 315 KB.
  • Incluso los modelos de visión pueden tener un tamaño razonable. El modelo Handpose y todos los recursos relacionados suman 13.4 MB. Si bien es mucho más grande que la mayoría de los paquetes de frontend reducidos, es comparable a la página web promedio, que es de 2.2 MB (2.6 MB en computadoras de escritorio).
  • Los modelos de IA generativa pueden exceder el tamaño recomendado para los recursos web. DistilBERT, que se considera un LLM muy pequeño o un modelo de NLP simple (las opiniones varían), pesa 67 MB. Incluso los LLM pequeños, como Gemma 2B, pueden alcanzar los 1.3 GB. Esto es más de 100 veces el tamaño de la página web promedio.

Puedes evaluar el tamaño de descarga exacto de los modelos que planeas usar con las herramientas para desarrolladores de tu navegador.

En el panel Network de Chrome DevTools, tamaño de descarga del modelo de detección de idioma de MediaPipe. Demostración.
En el panel Network de Chrome DevTools, tamaño de descarga para modelos de IA generativa: Gemma 2B (LLM pequeño), DistilBERT (NLP pequeño/LLM muy pequeño).

Optimiza el tamaño del modelo

  • Compara la calidad del modelo y los tamaños de descarga. Un modelo más pequeño puede tener suficiente exactitud para tu caso práctico, al tiempo que es mucho más pequeño. Existen técnicas de ajuste fino y reducción de modelos para reducir significativamente el tamaño de un modelo y, al mismo tiempo, mantener una precisión suficiente.
  • Elige modelos especializados siempre que sea posible. Los modelos que se adaptan a una tarea determinada tienden a ser más pequeños. Por ejemplo, si deseas realizar tareas específicas, como el análisis de opiniones o toxicidad, usa modelos especializados en estas tareas en lugar de un LLM genérico.
Selector de modelos para una demo de transcripción basada en IA del cliente de j0rd1smit.

Si bien todos estos modelos realizan la misma tarea, con precisión variable, sus tamaños varían mucho: de 3 MB a 1.5 GB.

Comprueba si se puede ejecutar el modelo

No todos los dispositivos pueden ejecutar modelos de IA. Incluso los dispositivos que tienen especificaciones de hardware suficientes pueden tener problemas si se ejecutan o se inician otros procesos costosos mientras se usa el modelo.

Mientras no haya una solución disponible, puedes hacer lo siguiente:

  • Verifica la compatibilidad con WebGPU. Varias bibliotecas de IA del cliente, como Transformers.js versión 3 y MediaPipe, usan WebGPU. Por el momento, algunas de estas bibliotecas no recurren automáticamente a Wasm si WebGPU no es compatible. Para mitigar esto, delimita tu código relacionado con la IA en una verificación de detección de funciones de WebGPU, si sabes que tu biblioteca de IA del cliente necesita WebGPU.
  • Descarta los dispositivos que no tienen suficiente potencia. Usa Navigator.hardwareConcurrency, Navigator.deviceMemory y la API de Compute Pressure para estimar las capacidades y la presión del dispositivo. Estas APIs no son compatibles con todos los navegadores y son imprecisas de forma intencional para evitar la creación de huellas digitales, pero aún pueden ayudar a descartar dispositivos que parecen tener poca potencia.

Cómo indicar descargas grandes

En el caso de los modelos grandes, advierte a los usuarios antes de descargarlos. Es más probable que los usuarios de computadoras de escritorio acepten descargas grandes que los usuarios de dispositivos móviles. Para detectar dispositivos móviles, usa mobile de la API de User-Agent Client Hints (o la cadena de usuario-agente si UA-CH no es compatible).

Limita las descargas grandes

  • Descarga solo lo necesario. Descarga el modelo solo una vez que tengas la certeza razonable de que se usarán las funciones de IA, en especial si el modelo es grande. Por ejemplo, si tienes una función de IA de sugerencias de escritura anticipada, descárgala solo cuando el usuario comience a usar las funciones de escritura.
  • Almacena en caché el modelo de forma explícita en el dispositivo con la API de caché para evitar descargarlo en cada visita. No te limites a la caché del navegador HTTP implícita.
  • Divide la descarga del modelo. fetch-in-chunks divide una descarga grande en fragmentos más pequeños.

Descarga y preparación del modelo

No bloquees al usuario

Prioriza una experiencia del usuario fluida: permite que las funciones clave funcionen incluso si el modelo de IA aún no se cargó por completo.

Asegúrate de que los usuarios aún puedan publicar contenido.
Los usuarios pueden publicar sus opiniones, incluso si la función de IA del cliente aún no está lista. Demostración de @maudnals.

Indica el progreso

A medida que descargues el modelo, indica el progreso completado y el tiempo restante.

Visualización del progreso de descarga del modelo. Implementación personalizada con recuperación en fragmentos Demo de @tomayac.

Controla las interrupciones de red con facilidad

Las descargas de modelos pueden tardar diferentes cantidades de tiempo, según su tamaño. Considera cómo controlar las interrupciones de la red si el usuario se desconecta. Cuando sea posible, informa al usuario que se cortó la conexión y continúa la descarga cuando se restablezca.

La conectividad inestable es otro motivo para descargar en partes.

Cómo transferir tareas costosas a un trabajador web

Las tareas costosas, como los pasos de preparación del modelo después de la descarga, pueden bloquear el subproceso principal, lo que provoca una experiencia del usuario inestable. Transferir estas tareas a un trabajador web ayuda.

Encuentra una demostración y una implementación completa basadas en un trabajador web:

Registro de rendimiento en las Herramientas para desarrolladores de Chrome.
Parte superior: Con un trabajador web. Parte inferior: No hay trabajador web.

Durante la inferencia

Una vez que el modelo se descargue y esté listo, podrás ejecutar la inferencia. La inferencia puede ser costosa en términos de procesamiento.

Cómo mover la inferencia a un trabajador web

Si la inferencia se produce a través de WebGL, WebGPU o WebNN, depende de la GPU. Esto significa que se produce en un proceso independiente que no bloquea la IU.

Sin embargo, en el caso de las implementaciones basadas en la CPU (como Wasm, que puede ser un resguardo para WebGPU, si no se admite WebGPU), mover la inferencia a un trabajador web mantiene la capacidad de respuesta de tu página, al igual que durante la preparación del modelo.

Tu implementación puede ser más simple si todo el código relacionado con la IA (recuperación del modelo, preparación del modelo, inferencia) se encuentra en el mismo lugar. Por lo tanto, puedes elegir un trabajador web, sin importar si la GPU está en uso o no.

Cómo solucionar errores

Aunque verificaste que el modelo debería ejecutarse en el dispositivo, es posible que el usuario comience otro proceso que consuma recursos de forma extensa más adelante. Para mitigar este problema, haz lo siguiente:

  • Soluciona errores de inferencia. Une la inferencia en bloques try/catch y controla los errores de tiempo de ejecución correspondientes.
  • Soluciona errores de WebGPU, tanto inesperados como GPUDevice.lost, que ocurren cuando la GPU se restablece debido a problemas con el dispositivo.

Indica el estado de la inferencia

Si la inferencia lleva más tiempo del que se parecería inmediato, indícale al usuario que el modelo está pensando. Usa animaciones para facilitar el tiempo de espera y asegurarle al usuario que la aplicación funciona según lo previsto.

Ejemplo de animación durante la inferencia.
Demostración de @maudnals y @argyleink

Cómo hacer que la inferencia se pueda cancelar

Permite que el usuario defina mejor su consulta sobre la marcha, sin que el sistema desperdicie recursos generando una respuesta que el usuario nunca verá.