Construye una Interfaz de Usuario que Aprende - Prefetching Inteligente con React y TensorFlow.js

Hola a todos y bienvenidos a esta sesión. Mi nombre es Eli Ranatan, y estoy feliz de estar aquí en la Cumbre de React. Hoy hablaré sobre el prefetching inteligente en React. Así que comenzamos hablando sobre el prefetching de código, luego mostramos cómo podemos predecir el comportamiento del usuario utilizando el aprendizaje automático, y finalmente combinamos esas soluciones para formar aplicaciones React rápidas. Así que quiero empezar hablando sobre el contexto. Por lo general, estamos construyendo esas increíbles aplicaciones de una sola página y eventualmente nos encontramos con este enorme tamaño de paquete que eventualmente causa problemas en los tiempos de carga, la lentitud y potencialmente perjudica la experiencia del usuario. Entonces, ¿qué podemos hacer? Podemos usar la API de code splitting de React para importar componentes según la demanda. Así que en lugar de simplemente importar el componente de gráfico, aumentando el tamaño de mi paquete, estoy cargando el componente de gráfico de forma perezosa y la carga real de código solo ocurrirá cuando lo rendericemos. Pero eso no resuelve completamente el problema, ¿verdad? Porque simplemente estamos desplazando el tiempo de carga a otro lugar. Cuando el usuario realmente quiera renderizar este componente de gráfico, entonces tendrá que esperar a que ocurra la carga, y eso puede afectar el tiempo de carga y perjudicar la experiencia del usuario. ¿Qué tal esta idea loca? Podríamos prefetch, podríamos romper este compromiso prefetching el componente de gráfico. Así que usando el tiempo en que el usuario solo está mirando la pantalla y antes de que llegue a ella, podríamos preparar este contenido, podríamos usar la función de importación dinámica para importar dinámicamente el componente y luego anular esta variable. Ahora, podríamos hacer eso si tuviéramos alguna indicación o suposición educada sobre el próximo movimiento del usuario. Podríamos usar este truco para aumentar aún más el rendimiento de nuestras aplicaciones si lo estamos haciendo para rutas completas. Si tengo esta navegación entre paneles de control y productos, podría usar una carga perezosa para cargar perezosamente esas rutas. Y luego, condicionalmente, si tengo alguna indicación sobre el próximo movimiento del usuario, podría importar dinámicamente esas rutas, ahorrando mucho tiempo. Eso nos lleva a la pregunta, y esa es una pregunta muy interesante, de cómo podemos predecir el próximo movimiento del usuario. Así que analicemos esta pregunta por un momento. Tenemos esta complicada aplicación de una sola página que está compuesta por muchos componentes diferentes. Y podemos enumerar esos diferentes desencadenantes, esas acciones, enlaces, botones con los que el usuario puede interactuar, o al menos aquellos que son interesantes en el sentido de que provocarían la renderización de otros componentes grandes. Ahora podríamos realizar un seguimiento del comportamiento del usuario y realizar esta secuencia ordenada de interacciones que el usuario está realizando. Y la pregunta es cómo podemos basarnos en esta secuencia cómo podemos predecir el próximo elemento en esa secuencia. Lo que necesitamos es este mecanismo inteligente que reciba una secuencia y devuelva la predicción o estimación del próximo elemento en esa secuencia. Y en el aprendizaje automático, a este problema lo llamamos predicción de secuencia. Podemos usar el aprendizaje supervisado, específicamente una red neuronal, para descubrir esta estimación. Una red neuronal recibirá una codificación de esa secuencia como una serie de números. Cada número es una identificación de un cierto desencadenante y devuelve esta distribución de probabilidad en todos los desencadenantes posibles con los que el usuario puede interactuar. Cada salida representaría la probabilidad de que ese elemento correspondiente sea el próximo elemento en la secuencia. Así que esto es un aprendizaje supervisado y la red neuronal actúa como un aproximador de funciones. La función recibe una secuencia y devuelve una distribución de probabilidad.

Ahora que tenemos esta salida, podríamos simplemente tomar el argumento máximo y derivar de eso el siguiente elemento de la interfaz de usuario con el que el usuario está a punto de interactuar. Por supuesto, esas predicciones no tendrán sentido a menos que entrenemos la red. En el aprendizaje supervisado, tenemos que proporcionar ejemplos a la red. La mejor fuente para esos ejemplos es el comportamiento real del usuario. Podríamos muestrear el comportamiento del usuario, tomar esas secuencias y alimentar la red neuronal con esos ejemplos, básicamente diciéndole a la red neuronal que este es el comportamiento real del usuario, por favor ajusta tus predicciones en consecuencia.

Me parece genial que estemos utilizando al usuario para entrenar la aplicación. Cuanto más use el usuario la aplicación, más se entrenará en consecuencia. Y cuando el usuario cambie su comportamiento con el tiempo, la aplicación puede adaptarse. Hablando específicamente de la implementación, este predictor se puede implementar como una red neuronal. Lo que estás viendo aquí es que la entrada de esa red neuronal será... Estamos utilizando la codificación one-hot en lugar de solo números puros. Y esto se debe a que queremos romper cualquier correlación numérica entre esos elementos. No tiene sentido decir que un panel de control es más pequeño que los productos, porque está representado por el número tres y no por el número 21. Así es como rompemos esta correlación.

Lo más importante en la arquitectura de tu red neuronal es que tenemos que usar este tipo de red LSTM. Este es el mejor tipo que puede soportar predicciones de secuencia. También es importante tener en cuenta que la capa de entrada está aquí. El número de unidades en la capa de entrada debe coincidir con la longitud de las secuencias con las que estamos trabajando, y el número de unidades en la capa de salida debe coincidir con el número... Todos los posibles desencadenantes con los que el usuario puede interactuar. Ahora, una vez que tenemos la salida de la red, podemos adjuntarla al elemento correspondiente en la experiencia del usuario y asumir que el usuario está a punto de hacer clic en este elemento.

En cuanto a la implementación, tenemos que implementar este mecanismo en algún lugar del entorno del navegador, y podemos hacerlo utilizando la biblioteca TensorFlow.js. Esta biblioteca se basa en WebGL y nos permite implementar algoritmos de aprendizaje automático dentro del entorno del navegador. Estamos utilizando el comando secuencial para apilar capas en la red una tras otra, y estamos especificando esta capa de tipo LSTM, especificando la forma de la entrada como una matriz de números binarios. Y finalmente, una vez que tenemos esta red, podemos usar el comando predict suministrando una secuencia y pidiendo que prediga la probabilidad para cada elemento. Esas predicciones no tendrán sentido a menos que entrenemos la red, como dijimos, y para la parte de entrenamiento, usaríamos el comando fit. Estamos suministrando este lote de secuencias y las etiquetas correlacionadas. Esas etiquetas representan elementos. Tomamos el comportamiento real del usuario y lo suministramos como ejemplos para el mecanismo de ajuste. El entrenamiento de la red puede llevar tiempo.

Esa es una operación pesada. Y no queremos perturbar la experiencia del usuario. Por lo tanto, estamos utilizando el hecho de que el comando de ajuste es asíncrono. Y básicamente podemos hacerlo en segundo plano sin perturbar al usuario.

Ahora, el próximo desafío que debemos resolver aquí es cómo debemos vincular entre esas predicciones que estamos haciendo y el prefetching que discutimos anteriormente. Entonces, lo que queremos hacer es prefetching de contenido siempre que sepamos que el usuario está a punto de hacer clic en un determinado botón. Básicamente, haciendo que la aplicación sea más rápida y más rápida. Y cuanto más use el usuario la aplicación, más rápido se vuelve.

Tenemos este botón en algún lugar de la aplicación que se llama mostrar gráfico. Y podemos envolverlo con este componente personalizado que llamo enlace de predicción. Y este enlace de predicción estará conectado a un contexto de React. El propósito del contexto de React es suministrar este estado global que está disponible para toda la aplicación. Aquí estoy utilizando un contexto de React para encapsular toda la lógica de predicción. Por lo tanto, contendría toda la implementación de la red neuronal junto con el código de TensorFlow, etc. Y estará disponible en toda la aplicación. Por lo tanto, esos componentes de predicción pueden consultar al predictor para obtener la predicción actual con el próximo movimiento del usuario. Y pueden exponer este controlador onPrediction que se activaría al producirse una predicción asociada.

Ahora, este onPrediction, podríamos usar este disparador para comunicarnos con otro contexto de React, que es responsable del prefetching. Por lo tanto, básicamente actúa como un bus de mensajes que anuncia que se debe prefetching el contenido asociado con este botón. Ahora, cualquier consumidor interesado en esta información puede usarla y utilizar importaciones dinámicas para importar dinámicamente el contenido necesario. Por lo tanto, lo que estamos haciendo aquí es vincular las predicciones y el prefetching utilizando dos contextos de React.

Ahora veamos cómo funciona en el código. Por lo tanto, tenemos este botón en algún lugar de la aplicación, este mostrar gráfico. Podemos envolverlo con un componente personalizado de enlace de predicción. Ahora, este enlace de predicción expone el disparador de predicción. Siempre que haya una predicción para ese gráfico clave, entonces podríamos hacer algo con esta predicción. Echemos un vistazo más de cerca a cómo se implementa este enlace de predicción. Estamos utilizando el gancho use context para conectarnos al contexto del predictor, y luego estamos consultando este contexto del predictor para obtener la predicción actual. Si la predicción actual coincide con este enlace de predicción específico, entonces activamos el controlador de onPrediction. Ahora, para tener el predictor disponible en toda la aplicación, tenemos que envolverlo con este proveedor de nivel superior.

Ahora que tenemos este enlace de predicción, podemos usarlo para llamar al contexto de prefetcher utilizando este disparador. Básicamente, estamos diciendo, por favor prefetching el contenido necesario que está asociado con este botón.

Ahora volviendo al componente que realmente obtuvo el código y renderizó el contenido necesario, podríamos usar nuevamente el gancho use context para conectarnos al contexto de prefetcher, consultar ese contexto y básicamente preguntar si el componente que debemos prefetching es el componente de gráfico. Y si es así, estamos utilizando las importaciones dinámicas para hacerlo.

Y, por supuesto, podemos hacer lo mismo con rutas completas. Por lo tanto, si tenemos esta ruta entre el panel de control y los productos, podríamos importar dinámicamente esas rutas condicionalmente, según el contexto de prefetcher.

Quiero resumir todo lo que hemos discutido aquí. Lo primero que hicimos fue utilizar la API de React code splitting para mejorar el rendimiento de nuestra aplicación. Más tarde, combinamos la carga perezosa y el prefetching de contenido para mejorar aún más el rendimiento de nuestra aplicación, básicamente utilizando el tiempo que el usuario está mirando la pantalla para preparar el próximo contenido.

Luego mostramos cómo podemos predecir el comportamiento del usuario utilizando un predictor de clics basado en aprendizaje automático en el entorno del navegador utilizando TensorFlow.js. Por supuesto, predecir el comportamiento del usuario tiene más aplicaciones que son muy interesantes de pensar.

Ahora mostramos que podemos usar el contexto de React para vincular los controladores de UI y las predicciones. Y finalmente, podríamos usar otro contexto de React para vincular las predicciones y el prefetching. Esa es toda la descripción general. Es un proyecto personal en el que pensé. Y espero que te brinde algo de inspiración sobre cómo podemos combinar IA y UI y básicamente utilizar el aprendizaje automático para aprovechar el desarrollo de UI. Gracias. Fue divertido.