React + WebGPU + IA - ¿Qué podría salir mal? 😳

Entonces, responderemos a esta pregunta en unos minutos. Pero, con IA y web GPU, es simplemente un momento emocionante para ser un desarrollador. Parece que muchas cosas van a cambiar. Creo que estamos creando aplicaciones diferentes. ¿Incluso las llamaremos aplicaciones todavía? No estoy seguro. Pero muchas cosas van a cambiar. Y exploremos algunas de esas posibilidades hoy.

Ahora, ¿quién soy yo? Mi nombre es Aryami Naim. Como la mayoría de nosotros aquí en esta sala, he estado creando cosas con computadoras desde que era un niño. Así es como se veía el lado de la programación al principio. Y así es como hacía cosas de design. En realidad no soy tan viejo. Solo tenía versiones viejas y agrietadas de estas. Pero estaba creando pequeñas aplicaciones, pequeños sitios, pequeños juegos. Y siempre requería tanto programación como design. Así que se acumulaban más herramientas de programación, más herramientas de design. Y siempre fue extraño. Porque cuando estás haciendo un juego o una aplicación, en un día, estás tomando cientos, si no miles de estas micro decisiones de design y desarrollo. Y muchas de esas decisiones simplemente no encajan dentro, digamos, VS Code o 3D Studio MAX. Abarcan todo el espectro de crear una aplicación. Así que siempre fue extraño que tuviera que estar en VS Code, por ejemplo, o en ese momento, digamos, Dreamweaver o en Photoshop. Y tenía todas estas pequeñas ideas micro. Y sentía que en el lapso de cambiar de una aplicación a otra, muchas de ellas morirían. Fue creativamente sofocante. Así que siempre fue extraño. Y siempre sentí que quería hacer desarrollo de design al mismo tiempo, pero todos los días me despertaba, y Morpheus básicamente me ofrecía una de dos pastillas. Toma la pastilla azul o la pastilla roja, haz design o desarrollo. No hay pastilla buena o mala aquí, estoy estirando una metáfora en este momento. Pero tienes que elegir una. Y siempre pensé, ¿puedo tomar ambas? Y él me dijo, así no funciona.

Y siempre quise combinar ambos, como una píldora violeta. Puedes diseñar y programar en el mismo entorno de manera fluida. Busqué este entorno, uno de ellos fue este. ¿Alguien lo recuerda? ¿Sí? De acuerdo. Es una audiencia joven aquí, solo muy pocas manos.

Esto es Flash y a algunas personas les encanta Flash. Yo amo Flash. ¡Sí! ¡Apoyemos a Flash! Tenemos como cinco personas mayores de 30 aquí. De acuerdo, para aquellos que no lo recuerdan, Flash era un entorno de diseño y desarrollo y a mucha gente le encantaba. Hacían cosas increíbles con él. ¿Era esa píldora violeta? No realmente. Podías programar y diseñar en la misma ventana del sistema operativo, pero la programación era limitada, la herramienta de diseño no era tan expresiva como Photoshop o Max y cosas así. Así que no era realmente una píldora violeta. Era más como, ya sabes, un chupetín azul y rojo. Era sabroso. Era muy bueno, pero no era lo correcto.

Así que realmente quería tener esa píldora violeta. Mucha gente ha intentado crear ese entorno de diseño y desarrollo fluido. Simplemente, nunca ha tenido éxito. Es simplemente difícil de lograr. Ha habido muchos intentos a lo largo de los años. En algún momento, pensé que tal vez debería intentarlo. ¿Qué tan difícil podría ser? Ingenuamente, pensé eso. De todos modos, eventualmente eso se convirtió en algo que llamamos TheaterJS. Ahora, toma un enfoque diferente. Pensé que en lugar de crear toda esa píldora violeta desde el principio, lo cual es algo muy difícil de hacer, comencemos con algo de pure blue. ¿Qué es pure blue? Pure blue es un entorno de programación. Puede ser, ya sabes, VS code, el lenguaje de programación puede ser JavaScript o Swift o cualquier otro. Comencemos con algo de pure blue, porque pure blue es súper poderoso. No hay nada que no se pueda hacer con un lenguaje de programación.

Si la CPU y la GPU pueden manejar eso, si la pantalla puede mostrar realmente los visuales, la herramienta de programación puede hacerlo. Entonces, comencemos con algo de pure blue. Y luego agreguemos pequeños trozos de rojo. Se convierte, como, en violeta lentamente.

Entonces, el primer trozo de violeta que agregamos fue una herramienta de secuenciación. Esto es para personas que hacen animación en la web o, ya sabes, y también algunos dispositivos nativos. Luego agregamos una herramienta de composición 3D, y a medida que avanzamos, simplemente agregamos, ya sabes, más y más de esta cosa violeta. Ahora, es algo... es realmente increíble lo que la gente puede lograr con solo ese pequeño trozo de violeta.

Por ejemplo, aquí está The New York Times. Han estado, por ejemplo, cubriendo la Copa del Mundo. Tenían a alguien en Qatar tomando, como, no sé, cientos, miles de tomas del juego y enviándolas a Nueva York, y luego reconstruían todo en Nueva York utilizando Theater.js para juntar todo porque tienes diseñadores, desarrolladores, periodistas, todos trabajando juntos. No quieres pasar cosas entre ellos. Es todo, ya sabes, es una sala de redacción. Tiene que funcionar muy rápido. Así que usaron Theater.js, y gracias a eso, en realidad puedes, ya sabes, seguir... podrías seguir la Copa del Mundo y podrías seguir estas visualizaciones 3D de los juegos, ya sabes, en ese mismo día. Este es otro ejemplo de Planet and Wildlife. Probablemente la página de reclutamiento más hardcore de todas. Y este es simplemente el scrolly más bien elaborado de Studio Freight. Gran fan de ellos. Entonces, sí. El proyecto se llama Theater.js. Puedes echarle un vistazo en GitHub. Simplemente estamos agregando, ya sabes, más y más violeta a medida que avanzamos.

Muy bien. Todo eso no requirió IA. Así que ahora veamos qué sucede cuando agregamos un poco de IA a la mezcla. Muy bien. Entonces, aquí está mi escena sin IA. Está hecha con 3JS, React 3 fiber si algunos de ustedes lo conocen, y React, básicamente. Y, ya sabes, puedo editar cosas usando Theater.js.

Como puedo cambiar las variables y cosas así. Ahora, esa es una forma de hacerlo. Ahora, hemos agregado un poco de IA aquí. Así que puedo decir algo como, ¿podemos tener algo de iluminación de estudio aquí? Es un poco ruidoso y no tengo mi micrófono, así que es posible que no funcione realmente. Pero veremos. Y mi internet no es bueno, así que lleva un tiempo. Normalmente debería tomar menos de un segundo. Así que espera un momento. Vamos, GPT. Es posible que en realidad no tenga internet. Veamos. Bueno, dijeron que las demostraciones son difíciles. Oh, ahí lo tienes. De acuerdo. Ahora, esto normalmente lleva un segundo. Por cierto, ahora mismo acabamos de ahorrar unos 10 minutos para un usuario experimentado y unos tal vez 15 a 20 minutos para alguien que recién comienza.

¿Podemos agregar algo de grano de película aquí? Ahora, aquí está la cosa. Esto es lo primero que quiero mencionar sobre hacer cosas con IA. Si la IA actúa como un chatbot, puedes esperar a un chatbot. Puedes esperar a que GPT-4 termine sus pensamientos. A veces elijo GPT-4 en lugar de GPT-3 porque me gusta la calidad de la respuesta. Pero si la IA es un copiloto, si quieres que te ayude en tu trabajo creativo mientras lo estás haciendo, simplemente no quieres esperar por las cosas. De acuerdo.

Entonces, ¿cómo funciona esto en realidad? Bueno, este es un código base. Es un seudocódigo. Pero creo que es bastante obvio lo que está sucediendo. Obtienes un controlador para tu GPU. Inicializas tu LLM. Tienes que calentarlo. No hemos hecho eso.

Por eso tomó un tiempo porque estamos usando una oferta en la cloud. Te lo explicaré más adelante por qué. Luego tienes este bucle infinito. Esperas un comando de voz. El usuario dice algo. Tomas ese comando y generas una indicación. Y la indicación es básicamente algo como, oye, aquí está mi aplicación y aquí está un comando. Por favor, realiza ese comando en mi aplicación. ¿Verdad? Así que acabo de pedir que me den luces de estudio y agrega luces de estudio a la aplicación. Ahora obtenemos esa nueva aplicación. La reemplazamos en caliente y repetimos el proceso. Y así es como básicamente funciona todo el asunto.

Ahora, por supuesto, esta es solo la primera iteración. Por ejemplo, si quieres configurar algo como esto, solo lleva, no sé, tal vez media hora o una hora. Y eso está mucho más lejos, digamos, de una aplicación en producción.

Una aplicación en producción requiere, por ejemplo, que estés preparado para que el LLM alucine. Como darte una aplicación que simplemente no puedes ejecutar. Entonces, lo que haces ahí es, por ejemplo, puedes intentarlo de nuevo o si tienes un LLM grande, simplemente puedes enviarle el error y así puedes intentarlo nuevamente.

Otra cosa es, como acabamos de ver, si hay un problema de internet, o por ejemplo, tu LLM es demasiado grande y tarda un tiempo en darte una respuesta, entonces eso va a ser... Lo que le sucede al usuario es que el usuario tiene que cambiar de modo. Como en un modo estoy haciendo cosas con mis manos, como editar cosas. Y en el otro modo, estoy hablando con algún agente... Este cambio de modo, también mata creativamente, pequeñas ideas, no quieres hacer eso, quieres tener algo que funcione muy rápido.

Bien. Entonces, todo esto fue muy febrero de 2023, como, ya sabes, hay un LLM editando una aplicación, ¿qué más hay de nuevo? Así que intentemos algo diferente. ¿Podemos tener, como, cuando presiono la barra espaciadora, entrar en modo panorámico, y cuando lo presiono de nuevo, volver atrás? Todos, crucen los dedos por mí, por favor. Gracias. Quiero hacer esto con el LLM local, pero solo quiero mostrarte cómo funcionan las cosas en producción.

Oh, es una pantalla blanca. ¿Podemos hacer que cuando presione la barra espaciadora, vayamos en modo anamórfico, y cuando lo presione de nuevo, volvamos atrás? Eso no funcionó. Bien. ¿Puedes imaginar que eso funcionaría? ¡Wow! Todos digan, ¡wow! Así que esto es lo que está sucediendo aquí. Permíteme explicar. Hay este modelo de voz llamado Whisper, ¿verdad? Y en realidad entiende todo lo que le dices casi mejor que un ser humano. De hecho, en un contexto de programación, es incluso mejor que un ser humano. No lo usamos aquí porque queríamos usar un modelo local solo para que las cosas fueran un poco más rápidas. Pero no me di cuenta de que todo el ruido aquí hace que me malinterprete. Pero si no malinterpreta, lo cual es bastante fácil de lograr, entonces ya no estás atado al teclado. Si estoy seguro de que el LLM me va a entender, entonces no necesito estar aquí corrigiéndolo siempre. Simplemente dije anamórfico y lo tomó anamórfico. Si eso no sucede, entonces no tengo que estar en el teclado. Puedo alejarme, hacer cosas con básicamente un dispositivo de control remoto. Esto es solo para mostrar. Las personas no van a llevar pequeños controladores de juegos. Cosas como el seguimiento de manos y el seguimiento de posturas van a tener mucho más sentido. Esos modelos han mejorado mucho en los últimos meses. Seis semanas. Dos cosas. Básicamente puedes alejarte del teclado y el panel táctil. No creo que estos sean incluso los modos principales de entrada después de un tiempo. Y también puedes hacer que el AI escriba código por ti.

Entonces, aquí hay una pregunta. Cuando le pedí al AI que, cuando presionara la barra espaciadora, entrara en modo panorámico y cuando lo presionara de nuevo, volviera atrás, ¿cómo sería diferente ese comando de los comandos anteriores que le di? ¿Alguien tiene una idea? Ahí la diferencia es que esta vez el AI realmente escribiría código. Escribiría un algoritmo.

Cambiaría el algoritmo de la aplicación. Básicamente cambiaría el comportamiento de la aplicación. Y eso es bastante poderoso. Eso realmente funciona. Nuevamente, aquí, debido a que el modelo de voz no funcionó, pero esto es algo que realmente puedes hacer funcionar en tu aplicación esta noche, básicamente. Pero lo que eso significa es que ahora el usuario puede agregar comportamientos a su aplicación o simplemente eliminar cosas y cambiar por completo la naturaleza de su aplicación. Eso es bastante poderoso, pero ¿cuánto de ese poder quieres darle al usuario? Existe un extremo alto de ese poder, que es que vamos a abrir el código fuente de toda nuestra aplicación. Es como si el usuario estuviera editando la aplicación en VS Code o Repl.it. Y simplemente vamos a permitir que el usuario edite la aplicación hablando con nuestros agentes LLM. Eso es increíble, eso es realmente poderoso, pero ¿qué pasa si el usuario simplemente rompe la aplicación? ¿Qué pasa si ni siquiera se inicia? ¿O qué pasa si hay un error con una traza de pila de 50 líneas y tenemos que mostrar esto al usuario? Eso obviamente es demasiado poder y demasiada complejidad que estamos liberando al usuario. Simplemente no funciona para la mayoría de los casos. Sin embargo, aún queremos darle algo de ese poder al usuario, por lo que tenemos que encontrar este punto intermedio entre demasiado poder y ningún poder en absoluto. ¿Y dónde está ese punto intermedio? Y para mí, ahí es donde entra React. Y con React, no me refiero a la biblioteca React, me refiero al modelo React. Entonces, el modelo React, imagina la definición más amplia del modelo React. Se aplica también a Svelte, Veo, Solid, Swift, UI, Flutter, todos ellos. El modelo es en realidad bastante simple. Dice que puedes dividir tu aplicación en pequeños bloques de construcción, y estos bloques de construcción son, en su mayoría, autocontenidos o sus requisitos son explícitos, que son básicamente props, o si requieren contexto, ya sabes, el contexto es un prop implícito, pero una limitación de la biblioteca React, en mi opinión. Y si un componente tiene un efecto secundario, devuelve un descriptor de efecto, que es básicamente las etiquetas JSX que tenemos. Y si el efecto no encaja dentro de un descriptor, entonces se usa el escape hatch, que es use effect. Entonces, no dice nada sobre la reactividad. Sabes, podrías tener señales de granularidad fina o gruesa, todo eso. No dice nada, puedes ejecutar un motor ECS, Entity Component System, como un game engine, producido por componentes React. Ni siquiera dice nada sobre eso, no dice nada sobre JavaScript u otro lenguaje, web o nativo. Es solo una estructura organizativa. Y esa estructura organizativa se ajusta muy bien a un LLM que edita nuestra aplicación porque no queremos que el LLM edite toda la aplicación, nuevamente, podrías romper todo. Pero lo que queremos hacer es crear estos pequeños bloques de construcción y permitir que el LLM simplemente edite esos pequeños bloques de construcción. Y esos bloques de construcción se ajustan al modelo React. Y lo que eso significa es que, bueno, en primer lugar, echemos un vistazo a un árbol React simple. Simplemente hablaremos sobre por qué un LLM sería adecuado para editar esta aplicación.

En primer lugar, ¿tiene el hijo A acceso al contexto B? Por supuesto que no. Solo podemos verlo y decirlo. Está explícitamente codificado en cómo representamos la aplicación React. Además, si el hijo B falla, como si arroja un error, si tiene un límite de error, no afectará al hijo A, ¿verdad? Es solo... Es su propia cosa. Ahora, eso funciona muy bien para un LLM. Pero en primer lugar, si solo está editando un componente, la fuente de uno de estos componentes, bueno, si el componente falla, básicamente podemos volver a intentar la ejecución del LLM o incluso podríamos enviar el error de vuelta al LLM y dejar que lo intente de nuevo. Entonces, React encaja muy bien con el modelo LLM. Lo que eso significa en realidad, en mi opinión, es que simplemente vamos a escribir componentes de React más detallados y pequeños. ¿Recuerdan cuando solíamos separar nuestros componentes entre presentacionales y lógicos? Queríamos tener la unidad más pequeña posible de componente React para poder manejar todo de manera más sencilla. Pero eso no funcionó porque había demasiadas dependencias entre componentes. Un componente podía tener como 10 props y luego tenías que obtener esas props y pasarlas al siguiente componente, y era demasiado para que un programador humano lo tuviera en cuenta. Pero adivinen qué, eso no es un problema para un LLM. Un LLM puede realizar un seguimiento fácilmente de cientos de estas dependencias. Entonces, lo que esto significa, creo, es que vamos a tener componentes de React muy pequeños y el LLM simplemente los va a editar por nosotros.

Ahora hablemos de WebGPU. Comenzando con algunas definiciones, ¿qué es WebAssembly? WebAssembly te permite ejecutar código no confiable que no proviene de alguien que conoces de manera segura en tu CPU de forma rápida. Bueno, WebGPU hace lo mismo con el otro procesador de tu computadora. Y eso es realmente bueno porque a los modelos de IA les encantan las GPUs. Así que eso significa que podemos ejecutar un modelo de IA localmente en nuestra máquina. ¿Por qué querríamos hacer eso? Bueno, probablemente estemos tomando alguna decisión a favor de la privacidad, la latencia y el costo. Por ejemplo, en el caso de una aplicación médica o algo así, todos saben por qué la privacidad es importante allí. Pero en el caso de una herramienta creativa como TheaterGist, por ejemplo, creo que las herramientas creativas son como herramientas para el pensamiento, y en realidad ayuda poder crear en privado durante un tiempo que puede ser liberador. Así que creo que la privacidad también importa en las herramientas creativas. La latencia, por supuesto, también importa. Y como acabamos de ver aquí, ya saben, si aburre a los miembros de la audiencia, también aburrirá al creador. Así que no quieres tiempos de espera como los de un chatbot. Quieres que las cosas sucedan muy rápido. Entonces, pondrías un LLM dentro de una máquina local.

Y, por supuesto, el costo también importa, pero voy a omitirlo porque no tenemos tanto tiempo.

Ahora, ¿podemos realmente ejecutar este tipo de LLMs utilizando WebGPU? Bueno, en realidad sí se puede. Estos son dos ejemplos. Puedes simplemente, ya sabes, probarlos. Pruébalos en tu, ya sabes, última versión de Chrome, por ejemplo. Funcionan bastante bien. ¿Pueden realmente hacer lo que te estaba mostrando allí? En realidad no, no pueden. Aún no. Todavía no están ahí. Los modelos no están suficientemente entrenados en este momento. Los modelos que realmente puedes ejecutar rápidamente en tu máquina. Es por eso que en realidad utilizamos un modelo basado en la nube en línea. Pero están llegando allí. Hay un modelo de código estelar y un modelo de replicación de código. Actualmente se están entrenando, ya sabes, en este momento. Como que están mejorando cada vez más básicamente. Y, ya sabes, son bastante pequeños, como 15 mil millones de parámetros, 7 mil millones de parámetros. Funcionan realmente rápido. Se ejecutan en una máquina local. También tienen muchas optimizaciones de WebGPU de bajo costo. Como ahora mismo, si intentas ejecutarlos, lleva un poco de trabajo y también es lento. Pero eso se debe a que el pipeline de WebGPU aún no está optimizado. Entonces, una vez que se optimice, puedes ejecutar un modelo de instrucción de edición de código que básicamente edita una escena que es, ya sabes, tu página de Notion o algo así, básicamente ejecutándose dentro del navegador.

Ahora puedes esperar a que estos modelos maduren o simplemente saber hacia dónde se dirigen las cosas y comenzar a desarrollar ahora mismo. Entonces, en el caso del teatro, sí, voy a interrumpir un poco el tiempo de preguntas y respuestas. De acuerdo. Así que puedes ver hacia dónde se dirigen las cosas y desarrollar tu aplicación ahora mismo. Utiliza un modelo basado en la cloud y luego más adelante puedes cambiar a un modelo local si tiene sentido en el caso de tu aplicación.

Hasta ahora, hemos hablado de cómo la IA afecta a una aplicación creativa como Theater.js, Blender o incluso una aplicación de productivity como Notion. Pero, ¿cómo afecta a una aplicación normal como Uber? Hay mucho miedo, incertidumbre y dudas en el aire. Creo que algunas personas están en estado de shock y asombro por lo bien que la IA puede codificar. Y algunas personas son completamente ignorantes. Tal vez eso describa a algunas personas en ambos casos.

Personalmente, cuando vi lo bueno que se había vuelto GPT-3, estuve en estado de shock por un tiempo porque estaba pensando, ¿qué sucede con mi experiencia? ¿Qué sucede con cómo gano dinero? Tengo un experimento que sugerirles a todos ustedes. Creo que ni este estado de shock y asombro ni este estado de ignorancia, vamos a ignorar todo el asunto, son saludables. Quiero sugerir un experimento para que todos puedan desarrollar su propia comprensión de los principios fundamentales de lo que la IA puede hacer y cómo afecta su trabajo. Así que aquí está el experimento. Abre la aplicación de Uber en tu teléfono o alguna aplicación de viajes compartidos y haz clic, ya sabes, intenta solicitar un viaje justo antes de que realmente lo necesites. E imagina si Uber proporcionara una API abierta donde pudieras crear tu propia aplicación de Uber utilizando esta API, ¿verdad? Solo puedes solicitar viajes. Ahora toma esa API y aliméntala, digamos, a GPT-4 utilizando una biblioteca llamada LangChain. Puedes hacerlo como desarrollador de JavaScript, ya sabes, probablemente te llevará un día. Es un proyecto de fin de semana como máximo. Al final, obtendrías un chatbot que puede solicitar viajes de Uber por ti, ¿verdad? Podemos marcar la API. Y luego simplemente hablas con el chatbot. Y ve qué sucede. Como, ya sabes, llévame a casa de mamá. Y probablemente te dirá, oh, costará 15 euros, ya sabes, ¿debería hacerlo? Puedes decir que sí, y simplemente lo solicitará por ti. Ahora haz eso. Y luego agrégale otra API, que es la API de Lyft. ¿De acuerdo? Entonces dices, hey, llévame a algún lugar. Y luego el chatbot te dirá, sí, hay una opción de 15 euros, una opción de 17 euros, pero una de ellas está más lejos de ti, por lo que te recogerá tres minutos antes. ¿Debería tomar la opción más temprana? Sí. ¿Quieres que avise a mamá? Sí, por favor.

Eso es todo. Muy bien. Probablemente eso será... Voy a omitir esto. Probablemente esa será una forma mucho más rápida y mejor de pedir un viaje que abrir cualquier aplicación. Si quieres pedir un viaje, si quieres hacer muchas de las cosas en esta pequeña animación, será más rápido con un AirPod. No vas a usar React. Como usuario, no vas a interactuar con React, no vas a interactuar con Solid, con Svelte, probablemente ni siquiera con JavaScript. Simplemente es más rápido.

¿Todas las aplicaciones van a desaparecer? No lo creo. Los juegos no van a desaparecer. No creo que las aplicaciones creativas dejen de ser una aplicación. Pero pedir un viaje, seguro. Puedes hacer eso, de nuevo, tú mismo, como desarrollador en casa, lleva un día. Ahora, ¿eso es motivo de temor? No sé cómo funciona tu psicología. El miedo es bueno para algunas personas. Para mí, es simplemente emocionante, eventualmente, cuando lo miras. Porque ahora podemos servir a los usuarios de una manera mucho más grande.

¿Vamos a seguir utilizando las mismas herramientas que hemos estado utilizando? Probablemente no. ¿Vamos a tener que desechar muchas de las bibliotecas y metodologías? Incluso los nombres de las conferencias, ¿probablemente sí? Pero al final, solo tendremos una forma mucho más poderosa de servir a los usuarios. Por cierto, servir a los usuarios todavía requiere resolver problemas. La última vez que lo comprobé, las capacidades de razonamiento de estos modelos no están... Si están al nivel humano, entonces tenemos otros problemas de los que preocuparnos. Así que creo que tiene sentido ver hacia dónde se dirigen las cosas y en lugar de esperar a que nuestros trabajos sean interrumpidos y las aplicaciones sean irrelevantes y las bibliotecas que usamos ya no importen. Podemos estar por delante de esa curva y comenzar a construir cosas hoy. Toda la tecnología está ahí y ¿adivina qué? Creo que como desarrolladores de JavaScript, como personas que son expertas en conectar diferentes piezas de tecnología, eso es JavaScript. Creo que estamos en la mejor posición posible en la industria. Muy bien. Muchas gracias.