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.
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.
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.
Indica el progreso
A medida que descargues el modelo, indica el progreso completado y el tiempo restante.
- Si tu biblioteca de IA del cliente controla las descargas de modelos, usa el estado de progreso de la descarga para mostrárselo al usuario. Si esta función no está disponible, considera abrir un problema para solicitarlo (o contribuir).
- Si controlas las descargas de modelos en tu propio código, puedes recuperar el modelo en fragmentos con una biblioteca, como fetch-in-chunks, y mostrarle el progreso de la descarga al usuario.
- Para obtener más sugerencias, consulta Prácticas recomendadas para indicadores de progreso animados y Cómo diseñar para interrupciones y esperas largas.
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:
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.
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á.