Dando Superpoderes a tus Aplicaciones de React con Aprendizaje Automático

Bueno, hola a todos. Bienvenidos a mi charla relámpago en React Summit 2023. Está otorgando superpoderes a tus aplicaciones de React con aprendizaje automático. Soy Shailamba. Soy líder del grupo de trabajo y SIG de TensorFlow.js en India. Y también soy mentor de código de Google en TensorFlow.

Ahora, estamos aprendiendo sobre la emoción del aprendizaje automático. Y, por supuesto, con herramientas como Chats ABT y modelos de lenguaje grandes, estamos viendo el aprendizaje automático en todas partes. Ya sea que se trate de texto iterativo o de IA iterativa. Y como ingeniero de front-end, es posible que también estés muy interesado en aprovechar el uso del aprendizaje automático en tus propias aplicaciones.

Por lo general, si observamos a cualquier nuevo desarrollador web que quiera construir una aplicación basada en aprendizaje automático muy genial, tienden a adentrarse directamente en React. Y sabemos que React en sí puede ser muy confuso y tiene muchos temas avanzados. Así que en lugar de saltar directamente de HTML, Javascript y aprender sobre Git y GitHub y luego finalmente aprender sobre React, los nuevos desarrolladores tienden a saltar directamente a React. Y ahora piensa en ti como un nuevo desarrollador de front-end donde estás aprendiendo los conceptos básicos de Javascript, si quieres integrar capacidades de aprendizaje automático en tu aplicación de Javascript o tu aplicación de React, tradicionalmente tendrías que usar un lenguaje de programación como Python o R, que están más enfocados en general hacia el aprendizaje automático.

Pero ese no es el caso. Tú mismo, como ingeniero de front-end, puedes integrar capacidades de aprendizaje automático sin tener que entrar en el bucle o aprender un nuevo conjunto de lenguajes por completo. Y cómo puedes lograrlo es con la ayuda de una gran cantidad de bibliotecas de aprendizaje automático de código abierto para Javascript que están disponibles para que las uses con tu aplicación de React.

Entonces, ya sea una de las bibliotecas de aprendizaje automático de código abierto más populares basadas en Javascript como TensorFlow.js o ONNX.js, o incluso algunos de los frameworks y bibliotecas más nuevos como Transformers.js que te permiten agregar la capacidad de modelos de aprendizaje automático muy grandes directamente en tu navegador con la ayuda de Javascript, que por supuesto puedes incluir en tu aplicación de React.

Y hay cinco razones diferentes por las que deberías ejecutar el modelo de inferencia de aprendizaje automático en React y en tus aplicaciones de front-end. Y principalmente se debe a cinco cosas. La primera es la privacidad. Cuando utilizas estos modelos basados en aprendizaje automático y ejecutas estas inferencias en el navegador mismo, eso es mucho más privado y tiene una mejor privacidad. Porque no estás haciendo la inferencia de aprendizaje automático en un servidor dedicado. Eso también es mucho menos costoso porque no tienes que mantener servidores dedicados. Por lo tanto, puedes hacer todas estas inferencias de aprendizaje automático directamente en el navegador y también obtienes un menor costo y una menor latencia.

Y el alcance y la escala con los que realmente puedes construir y servir estas aplicaciones ahora es mucho mayor. También una cosa importante a considerar aquí es que la forma en que podemos hacer esta inferencia en el navegador es con la ayuda de poder aprovechar el uso del hardware del sistema como CPU, GPU, porque todas estas bibliotecas diferentes que hemos discutido vienen con soporte para tecnologías como WebAssembly, WebGPU, que permiten mejorar el rendimiento de tus aplicaciones basadas en el navegador con la ayuda de diferentes tecnologías como WebGL o, por supuesto, con el hardware de tu sistema que se utiliza para ejecutar estas inferencias o entrenamientos directamente en el navegador. Por lo tanto, la idea es que, con la ayuda de estas bibliotecas en particular, puedes usarlas sin tener que aprender algo como Python y, de hecho, en muchos casos obtienes un mejor rendimiento con JavaScript en comparación incluso con Python en muchos de estos modelos en particular, porque están más optimizados para JavaScript y en algunos casos JavaScript es incluso más rápido.

Y una demostración que les mostraré a todos ustedes está construida con la ayuda de TensorFlow.js, que, por supuesto, es una biblioteca de aprendizaje automático de código abierto completamente disponible para que cualquiera la use, y utilizaremos un modelo de aprendizaje automático preconstruido que utilizaremos para nuestra aplicación. Por lo tanto, hay muchas aplicaciones o modelos preconstruidos que ya están disponibles con TensorFlow y de manera similar para otras bibliotecas que ya hemos cubierto, incluidas las basadas en humanos, texto, sonido y otras más. Y el que usaremos es el modelo CocoaSSIST. Por lo tanto, el modelo CocoaSSIST es un modelo muy famoso y conocido por ser capaz de clasificar tus imágenes. Así que será un paso muy sencillo. Cargaremos una imagen, cargaremos el modelo de aprendizaje automático real y obtendremos predicciones. Por ejemplo, aquí estamos prediciendo algunos perros dentro de una imagen que subimos, y obtenemos un cuadro delimitador con el resultado de la imagen clasificada y la etiqueta con la que se clasifica. Entonces, para nuestra demostración, instalaremos estos paquetes en particular. Será el propio TensorFlow.js y el modelo CocoaSSIST. Y puedes importar estos modelos directamente en React utilizando esta forma en particular. Luego cargaremos estos modelos en nuestra aplicación de React y esperaremos a que el modelo se cargue por completo. En este caso, vamos a cargar el modelo CocoaSSIST. Ahora, una vez que se haya cargado el modelo, podemos seguir adelante y escribir las predicciones para poder predecir en función de una fuente de video en particular. Así que digamos que abro mi cámara web y trato de detectar qué hay en la fuente de video y podré hacerlo muy fácilmente con la ayuda de la función de predicciones. Ahora, para comenzar con esto, veamos cómo se ve en realidad. Así que iré a mi VS Code y esta es mi aplicación de React.

Así que estoy utilizando React Blanco y CocoaSSIST. Si echas un vistazo a mi packets.json, aquí están mis dos dependencias principales para mi aplicación de React.

Ahora, si voy a mi archivo principal, ese es mi app.jsx. Aquí es donde he importado mis dos marcos de JavaScript para el marco de ML que significa JS y el modelo en sí. He creado algunos estados para asegurarme de que mi modelo esté cargado. Aquí está la función que cubrimos en la diapositiva donde cargo mi modelo CocoaSSIST.

Primero cargo o obtengo mi conjunto de datos. Este conjunto de datos es un conjunto de imágenes que han sido entrenadas. Y una vez que realmente abres tu fuente de video, si uno de los fotogramas contiene alguna imagen que está en el conjunto de datos, podrá detectar y clasificar esa imagen en particular. Luego tenemos nuestra función asíncrona donde estamos usando el modelo cargado.detect. Entonces, la función detect primero analizará el fotograma de tu fuente de video y luego básicamente predecirá una clase particular y la puntuación de la predicción. Entonces, ¿qué tan seguro está el algoritmo de aprendizaje automático en determinar si por ejemplo, una imagen lo contiene todo, si está 90% seguro o 100% seguro. Entonces, estás obteniendo esas detecciones para tu configuración. Y, por supuesto, aquí estamos usando nuestro componente de cámara web para obtener las imágenes de la cámara web y luego aquí, desde la línea número 56 y 57, en realidad estamos detectando estos resultados.

Entonces, sigamos adelante y abramos una terminal y hagamos rápidamente npm run dev. Así que voy a hacer npm run dev y comenzar a ejecutar en mi navegador. Entonces, si actualizo mi pantalla, esta es mi simple detección de objetos y si hago clic en predecir objeto, verá que esto es una persona con una precisión del 58%. Intentemos traer un teléfono. Así que tengo mi teléfono delante de mí y veamos si puede detectar esto también. Por supuesto, en este momento está tratando de detectar a la persona y ahora podemos ver que es un teléfono celular. Así que volveré atrás y si intento hacer clic de nuevo, detecta el nombre de la persona. Entonces, lo que hemos hecho fácilmente es crear una aplicación de front-end donde básicamente hemos implementado un modelo preconstruido. No tuvimos que entrenar el modelo. No tuvimos que saber qué está sucediendo detrás de escena con este modelo en particular. Pero pudimos entender, ver y crear una aplicación de aprendizaje automático muy simple de usar en menos de 70 líneas de código de React real.

De manera similar, también podrías usar algunas de las otras bibliotecas como Transforms.js, esta también es un marco muy popular, un ejemplo realmente genial que se está utilizando y que me gustaría mostrar rápidamente es este llamado Ermine.ai que en realidad hace transcripción de audio en vivo en el lado del cliente directamente con la ayuda de Transforms.js y es también una aplicación de React para que puedas echar un vistazo aquí. Entonces, si cargas, esperas a que se cargue el modelo, esto hace grabación y transcripción de audio en vivo para ti. Por ejemplo, digamos, hola, soy Shivaay, y estoy hablando en React Summit virtualmente. Entonces, si detengo esto ahora, hará la transcripción en vivo para ti. Y está utilizando Transforms.js, y puedes ver que dice que estoy hablando en React Summit virtualmente, así que en cuestión de dos segundos, hizo la transcripción de audio en vivo.

Y de manera similar, por supuesto, puedes usar TensorFlow.js. También puedes usar Onyx.js. Y estas son todas las diferentes bibliotecas que puedes usar directamente, así que solo necesitas conocer o estar al tanto de al menos los conceptos básicos del aprendizaje automático, es decir, qué es el entrenamiento, qué es la predicción, y tú mismo puedes construir una aplicación de este tipo.

Aquí tienes algunos de los recursos que puedes aprovechar. Y finalmente, puedes conectarte conmigo en Twitter. Ahí es donde soy más activo, si tienes alguna pregunta relacionada con cómo integrar capacidades de aprendizaje automático en tu aplicación de React. Pero me gustaría concluir con la afirmación de que como desarrollador de React, no tienes que preocuparte demasiado por aprender los conceptos básicos del aprendizaje automático o aprender otro marco como Python.

Hay suficientes marcos y bibliotecas de JavaScript disponibles para que los uses en tu aplicación de React, y muchos de ellos se utilizan en producción también. Así que si tienes una idea genial para una startup y quieres crear una aplicación de React que aproveche el uso del aprendizaje automático, adelante y usa todas estas diferentes bibliotecas que compartí contigo hoy y construye tu próxima idea de startup sin tener que aprender otro lenguaje de aprendizaje automático o las capacidades básicas del aprendizaje automático. Eso es todo. Muchas gracias, y espero que tengas un maravilloso React Summit. Gracias.