React + WebGPU + AI – ¿Qué podría salir mal? 😳

This ad is not shown to multipass and full ticket holders
JSNation US
JSNation US 2025
November 17 - 20, 2025
New York, US & Online
See JS stars in the US biggest planetarium
Learn More
In partnership with Focus Reactive
Upcoming event
JSNation US 2025
JSNation US 2025
November 17 - 20, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

FAQ

Theater.js es una herramienta que permite a diseñadores y desarrolladores trabajar de manera conjunta en la creación de animaciones y composiciones 3D, optimizando la colaboración en proyectos como la cobertura de eventos en tiempo real. Se usa para integrar diseño y desarrollo en un solo flujo de trabajo sin necesidad de cambiar entre diferentes aplicaciones.

Según Aryami Naim, la integración de IA en aplicaciones creativas como Theater.js permite automatizar y agilizar procesos, ahorrar tiempo y facilitar la colaboración en tiempo real entre diversos profesionales, transformando fundamentalmente la forma en que se desarrollan y utilizan estas aplicaciones.

Crear un entorno que integre diseño y desarrollo de manera fluida es complejo debido a las limitaciones de las herramientas existentes que no pueden cubrir todas las necesidades de programación y diseño simultáneamente. Muchos intentos han sido hechos, pero aún es difícil lograr un equilibrio perfecto entre ambos.

WebGPU es una tecnología que permite ejecutar modelos de IA de manera eficiente usando el GPU del dispositivo. Es relevante porque reduce la latencia y puede mejorar la privacidad y costos al permitir la ejecución de modelos de IA directamente en el dispositivo del usuario.

React facilita la estructuración de aplicaciones en bloques de construcción que pueden ser editados de manera segura por IA. Esto permite que los modelos de IA modifiquen componentes específicos sin riesgo de afectar otras partes de la aplicación, haciendo el proceso más eficiente y menos propenso a errores.

La IA puede automatizar y personalizar la interacción con aplicaciones como Uber, permitiendo a los desarrolladores crear interfaces más eficientes y adaptativas que mejoren la experiencia del usuario, como realizar pedidos de transporte automáticamente a través de conversaciones con chatbots.

Aria Minaei
Aria Minaei
31 min
01 Jun, 2023

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Con AI y web GPU, es un momento emocionante para ser desarrollador. El viaje del orador implica combinar programación y diseño, lo que lleva a la creación de Pure Blue, un entorno de programación poderoso. Al agregar AI a la mezcla, el orador discute el potencial de AI en el proceso creativo y su impacto en el desarrollo de aplicaciones. La charla explora el papel de los componentes de React y WebGPU en permitir la edición detallada y la ejecución de modelos de AI localmente. Se discute el futuro del desarrollo de aplicaciones, enfatizando la necesidad de mantenerse a la vanguardia y aprovechar el poder de JavaScript.

1. Introduction to the Speaker's Journey

Short description:

Con IA y web GPU, es un momento emocionante para ser desarrollador. Mucho va a cambiar, incluyendo la forma en que hacemos aplicaciones. He estado haciendo cosas con computadoras desde que era niño, combinando programación y diseño. Sin embargo, usar diferentes herramientas para cada uno era creativamente limitante. Siempre quise hacer diseño y desarrollo al mismo tiempo, pero parecía imposible.

Entonces, llegaremos a esta pregunta en unos minutos. Pero, con IA y web GPU, es simplemente un momento emocionante para ser desarrollador. Parece que mucho va a cambiar. Creo que estamos haciendo aplicaciones diferentes. ¿Vamos a seguir llamándolas aplicaciones? No estoy seguro. Pero mucho va 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 haciendo cosas con computadoras desde que era niño. Así es como se veía el lado de la programación al principio. Y así es como hacía cosas de diseño. En realidad, no soy tan viejo. Solo tenía versiones antiguas y agrietadas de estos. Pero estaba haciendo pequeñas aplicaciones, pequeños sitios, pequeños juegos. Y siempre requería tanto programación como diseño. Así que más herramientas de programación, más herramientas de diseño se acumulaban. Y siempre era 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 diseño y desarrollo. Y muchas de esas decisiones simplemente no encajan dentro de, digamos, VS Code o 3D Studio MAX. Abarcan todo el espectro de hacer una aplicación. Así que siempre era extraño que tenía que estar en VS Code, por ejemplo, o en ese momento, digamos, Dreamweaver o en Photoshop. Y tenía todas estas pequeñas micro ideas. Y sentía que en el lapso de cambiar de una aplicación a otra, un montón de ellas morían. Era simplemente creativamente limitante. Así que siempre era extraño. Y siempre sentí que quería hacer diseño y desarrollo al mismo tiempo, pero todos los días me despertaba, y Morpheus básicamente me ofrecía una de dos píldoras. Toma la píldora azul o la roja, haz diseño o desarrollo. No hay una píldora buena o mala aquí, estoy estirando una metáfora ahora mismo. Pero tienes que elegir una. Y siempre decía, ¿puedo tomar ambas? Y él decía, así no es como funciona.

2. The Violet Pill and Pure Blue

Short description:

Siempre quise tomar diseño y programación juntos, sin problemas. Flash era un entorno de diseño y desarrollo, pero no era el adecuado. Se han hecho muchos intentos para crear un entorno de diseño y desarrollo sin fisuras, pero es un hueso duro de roer. Por eso comencé con pure blue, un entorno de programación poderoso.

Y así que siempre quise tomarlos ambos, como una píldora violeta. Puedes simplemente diseñar y programar en el mismo entorno sin problemas. Busqué este entorno, uno de ellos era este. ¿Alguien recuerda esto? ¿Sí? Bien. Es una audiencia joven aquí, solo muy pocas manos.

Esto es Flash y a algunas personas les encanta Flash. Me encanta Flash. ¡Sí! ¡Un aplauso para Flash! Tenemos como cinco personas mayores de 30 aquí. Bien, para aquellos de ustedes que no recuerdan, Flash era un entorno de diseño y desarrollo y me encantaba y a mucha gente le encantaba. Estaban haciendo cosas increíbles con él. ¿Era esa la píldora violeta? No realmente. Como que podías hacer programación y diseño en la misma ventana del sistema operativo, pero la programación era limitada, la herramienta de diseño no era tan expresiva como, digamos, Photoshop o Max y cosas así. Así que, realmente no era una píldora violeta. Era más como, ya sabes, una paleta azul y roja. Era sabrosa. Era realmente buena, pero no lo adecuado.

Así que, realmente quería tener esa píldora violeta. Muchas personas han intentado hacer ese entorno de diseño y desarrollo sin fisuras. Simplemente, nunca se populariza. Es simplemente un hueso duro de roer. Así que, 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, así lo pensé. De todos modos, eventualmente eso se convirtió en algo que llamamos TheaterJS. Ahora, toma un enfoque diferente. Pensé que en lugar de hacer toda esa píldora violeta desde el principio, lo cual es algo muy difícil de hacer, comencemos con algo de pure blue. Ahora, ¿qué es pure blue? Pure blue es un entorno de programación. Podría ser, ya sabes, VS code, el lenguaje de programación podría ser JavaScript o Swift o cualquier otra cosa más. Comencemos con algo de pure blue, porque pure blue es súper poderoso. No hay nada que no puedas hacer con un lenguaje de programación.

3. Pure Blue and Violet

Short description:

Si la CPU y la GPU pueden manejar eso, si la pantalla puede realmente mostrar los visuales, la herramienta de programación puede realmente hacerlo. Comencemos con algo de pure blue y luego agreguemos pequeños toques de rojo para convertirlo en violeta. Añadimos una herramienta de secuenciación para animación web y dispositivos nativos, seguida de una herramienta de composición 3D. The New York Times utilizó Theater.js para reconstruir tomas de la Copa del Mundo en tiempo real, permitiendo a los usuarios seguir los juegos a través de visualizaciones 3D. Otros ejemplos incluyen una página de reclutamiento de Planet and Wildlife y un scrolly bien elaborado por Studio Freight. Añadir IA a la mezcla es el siguiente paso, y la escena no-IA se construye con 3JS, React 3 fiber y React, con capacidades de edición usando Theater.js.

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

Así que, el primer toque de violeta que añadimos fue una herramienta de secuenciación. Así que, esto es para personas que hacen animación en la web o, ya sabes, y también algún tipo de dispositivos nativos. Luego añadimos una herramienta de composición 3D, y a medida que avanzamos, simplemente añadimos, ya sabes, más y más de estas cosas violetas. Ahora, es un poco...es realmente increíble cuánto pueden lograr las personas con solo ese pequeño toque de violeta.

Así que, por ejemplo, aquí está The New York Times. Han estado, como, cubriendo, por ejemplo, la Copa del Mundo. Tenían a alguien en Qatar tomando, como, solo, no sé, cientos, miles de tomas del juego y enviándolas a Nueva York, y luego estaban reconstruyendo todo en Nueva York usando 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 realmente rápido. Así que, usaron Theater.js, y debido a eso, puedes realmente, como, seguir...podías seguir la Copa del Mundo y podí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 probablemente el scrolly más bien elaborado por Studio Freight. Gran fan de ellos. Así que, sí. El proyecto se llama Theater.js. Puedes verlo en GitHub. Simplemente estamos añadiendo, ya sabes, más y más violeta a medida que avanzamos.

Muy bien. Así que, todo eso no requirió IA. Así que ahora veamos qué pasa cuando añadimos un poco de IA a la mezcla. Muy bien. Así que, aquí está mi escena no-IA. Ya sabes, está hecha con 3JS, React 3 fiber si algunos de ustedes conocen eso, y React, básicamente. Y ya sabes, puedo como editar cosas usando Theater.js.

4. AI in the Creative Process

Short description:

Añadir IA al proceso creativo puede ahorrar tiempo y mejorar el flujo de trabajo. Esperar por una IA tipo chatbot puede consumir tiempo, pero con una IA copiloto, puedes trabajar de manera más eficiente. El proceso implica manejar variables, solicitar efectos específicos como iluminación de estudio o grano de película, y utilizar código para inicializar la GPU y LLM.

Como puedo cambiar las variables y cosas así. Ahora, esa es una forma de hacerlo. Ahora, hemos añadido 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 podría no funcionar realmente. Pero veremos. Y mi internet no es bueno, así que tarda un poco. Normalmente debería tardar menos de un segundo. Así que dale un momento. Vamos, GPT. Podría no tener internet. Veamos. Bueno, dijeron que las demos son difíciles. Oh, ahí lo tienes. Bien. Ahora, esto normalmente tarda un segundo. Por cierto, ahora mismo acabamos de ahorrar unos 10 minutos a un usuario experimentado y unos tal vez 15 a 20 minutos a alguien que está empezando.

¿Podemos añadir algo de grano de película aquí? Ahora, aquí está la cosa. Esta es la primera cosa que quiero mencionar sobre hacer cosas con IA. Si la IA actúa como un chatbot, puedes esperar por un chatbot. Puedes esperar a que GPT-4 termine sus pensamientos. A veces elijo GPT-4 sobre 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 haces, simplemente no quieres esperar por las cosas. Muy bien.

Entonces, ¿cómo funciona esto realmente? Bueno, esta es una base de código. Es un pseudocódigo. Pero creo que es bastante obvio lo que está pasando. Obtienes un control de tu GPU. Inicializas tu LLM. Tienes que calentarlo. No hemos hecho eso.

5. The Infinite Loop and App Replacement

Short description:

El proceso implica un bucle infinito donde esperas un comando de voz del usuario. Generas un prompt basado en el comando y lo aplicas a la app. Este proceso iterativo continúa reemplazando la app y repitiendo los pasos.

Por eso tardó un poco porque estamos usando una oferta en la nube. Te diré más tarde por qué. Luego tienes este bucle infinito. Esperas un comando de voz. El usuario dice algo. Tomas ese comando y generas un prompt. Y el prompt es básicamente algo como, oye, aquí está mi app y aquí hay un comando. Por favor, haz ese comando en mi app. ¿Verdad? Así que acabo de pedir que me dé luces de estudio y añade luces de estudio a la app. Ahora obtenemos esa nueva app. La reemplazamos en caliente y repetimos el proceso. Y así es básicamente cómo funciona todo.

6. Challenges in Production App Development

Short description:

Configurar la primera iteración de este proceso lleva aproximadamente de media hora a una hora. Sin embargo, una app de producción requiere más preparación, incluyendo manejar errores, problemas de internet y evitar el cambio de modo, lo cual puede obstaculizar la creatividad.

Ahora, por supuesto, esta es solo la primera iteración. Por ejemplo, si quieres configurar algo así, solo toma, no sé, tal vez media hora o una hora. Y eso está muy lejos, digamos, de una app de producción.

Una app de producción requiere que, por ejemplo, estés preparado para que el LLM alucine. Como darte una app que simplemente no puedes ejecutar. Entonces, lo que haces allí es, por ejemplo, podrías intentarlo de nuevo o si tienes un LLM grande, puedes simplemente devolverle el error y así puedes darle otra oportunidad.

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

7. IA escribiendo código y diferentes comandos

Short description:

Bien. Probemos algo más. ¿Podemos tener un modo de pantalla panorámica cuando presiono la barra espaciadora? Oh, es una pantalla blanca. ¿Podemos tener un modo anamórfico? Si el LLM me entiende, no necesito estar en el teclado. El seguimiento de manos y la postura son entradas más intuitivas. La IA puede escribir código para ti. ¿Cómo sería diferente el comando para entrar en modo de pantalla panorámica? La IA escribiría código.

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 probemos algo más. ¿Podemos tener, como, cuando presiono la barra espaciadora, entramos en modo de pantalla panorámica, y cuando yo la presiono de nuevo, volvemos? Todos, crucen los dedos por mí, por favor? Gracias. Quiero hacer esto con el LLM local, pero solo quiero mostrarles cómo funcionan las cosas en producción.

Oh, es una pantalla blanca. ¿Podemos hacerlo de manera que cuando presione la barra espaciadora, vayamos a anamórfico, y cuando la presione de nuevo, volvamos? Eso no funcionó. Está bien. ¿Podrías imaginar por mí que eso funcionaría? ¡Guau! Todos digan, ¡guau! Entonces, en realidad esto es lo que está pasando aquí. Permíteme explicar. Entonces, hay este modelo de voz llamado Whisper, ¿verdad? Y en realidad entiende casi todo lo que le dices mejor que un ser humano. En realidad, en un contexto de programación, es mejor que un ser humano. No lo usamos aquí porque queríamos usar un modelo local para hacer que las cosas fueran un poco más rápido. Pero no me di cuenta de que todo el ruido aquí hace que me malinterprete. Pero si no me malinterpreta, lo cual es bastante fácil de conseguir, entonces ya no estás ni siquiera atado al teclado. Si estoy seguro de que el LLM me va a entender, entonces no necesito estar aquí siempre corrigiéndolo. Solo dije anamórfico y tomó anamórfico. Si eso no sucede, entonces ya no tengo que estar en el teclado. Puedo alejarme, hacer cosas con básicamente un dispositivo de control remoto. Esto es solo para mostrar. La gente no va a llevar pequeños controladores de juegos. Cosas como el seguimiento de manos y la postura van a tener mucho más sentido. Esos modelos se han vuelto realmente buenos en los últimos meses. Seis semanas. Dos cosas. Básicamente puedes alejarte del teclado y el trackpad. No creo que estos sean incluso los modos principales de entrada después de un tiempo. Y también puedes hacer que la AI escriba código para ti.

Entonces, aquí hay una pregunta. Cuando le pedí a la AI que, cuando presioné la barra espaciadora, entrara en modo de pantalla panorámica y cuando la presionara de nuevo, volviera, si eso hubiera funcionado, ¿cómo habría sido ese comando diferente de los comandos anteriores que le di? ¿Alguien tiene una suposición? Ahora, la diferencia es que esta vez la AI en realidad escribiría código. Escribiría un algoritmo.

8. El Poder de la Edición del Usuario y el Rol de React

Short description:

Cambiaría el algoritmo de la aplicación. Eso realmente funciona. El usuario puede agregar comportamientos a su aplicación o simplemente eliminar cosas y cambiar completamente la naturaleza de su aplicación. Sin embargo, todavía queremos dar 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 para mí, ahí es donde entra React. El modelo React dice que puedes dividir tu aplicación en pequeños bloques de construcción, y estos bloques de construcción son autocontenidos o sus requisitos son explícitos. Es solo una estructura organizativa que encaja bien con un LLM editando nuestra aplicación. Echemos un vistazo a un simple árbol de React y discutamos por qué un LLM estaría bien adaptado para editar esta aplicación.

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. De nuevo, aquí debido a que el modelo de voz no funcionó, pero esto es algo que realmente puedes hacer funcionar en tu aplicación como esta noche, básicamente. Pero lo que eso significa es que ahora el usuario puede agregar comportamientos a tu aplicación o simplemente eliminar cosas y cambiar completamente la naturaleza de tu aplicación incluso. Ahora eso es bastante poderoso, pero ¿cuánto de ese poder quieres dar al usuario? Hay un extremo alto de ese poder, que es que simplemente 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 de LM. Ahora eso es increíble, eso es realmente poderoso, pero ¿y si el usuario simplemente rompe la aplicación? ¿Y si ni siquiera arranca? ¿O qué pasa si hay un error 50 líneas de rastreo de pila profundas y tenemos que mostrar esto al usuario? Eso es obviamente demasiado poder y demasiada complejidad que simplemente estamos desatando al usuario. Simplemente no funciona para la mayoría de los casos. Sin embargo, todavía queremos dar 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 por 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. Así que contiene, también se aplica a Svelte, Veo, Solid, Swift, UI, Flutter, todos ellos. El modelo es realmente 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, sabes, el contexto es una prop implícita, pero una deficiencia de la biblioteca React, en mi opinión. Y si tienen, si un componente tiene un efecto secundario, devuelve un descriptor de efecto, eso es las etiquetas JSX básicamente que tenemos. Y si el efecto no encaja dentro de un descriptor, entonces usas la escotilla de escape, que es usar efecto. Así que no dice nada sobre reactivity. Sabes, podrías tener señales de grano fino, de grano grueso, todo eso. No dice nada, en realidad puedes ejecutar un motor ECS, Sistema de Componentes de Entidad, como un motor de juego, producido por componentes de React. Así que ni siquiera dice nada sobre eso, no dice nada sobre JavaScript o algún otro lenguaje, web o nativo. Es solo una estructura organizativa. Y esa estructura organizativa resulta encajar muy bien con un LLM editando nuestra aplicación porque no queremos que el LLM edite toda la aplicación, de nuevo, podrías simplemente romper todo. Pero lo que queremos hacer es crear estos pequeños bloques de construcción y dejar que el LLM simplemente edite esos pequeños bloques de construcción. Y esos bloques de construcción resultan encajar dentro del modelo React. Y lo que eso significa es que, bueno, primero, echemos un vistazo a un simple árbol de React. Simplemente hablaremos de por qué un LLM estaría bien adaptado para editar esta aplicación.

9. Componentes de React y WebGPU

Short description:

Los componentes de React pueden ser más detallados y pequeños, gracias a la capacidad del modelo LLM para manejar dependencias. WebGPU permite ejecutar modelos de IA localmente en una máquina, priorizando la privacidad, la latencia y el costo.

En primer lugar, ¿tiene el hijo A acceso al contexto B? Por supuesto que no. Podemos simplemente mirarlo y decirlo. Está explícitamente codificado en cómo representamos la aplicación de React. Además, si el hijo B falla, como si arroja un error, si tiene un límite de error, no va a afectar al hijo A, ¿verdad? Es solo... Es su propia cosa. Ahora, eso resulta funcionar 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 alimentar el error de vuelta al LLM y dejar que básicamente lo intente de nuevo. Así que, React encaja muy bien con el modelo LLM. Lo que eso realmente significa en mi opinión es que vamos a escribir componentes más finos y más pequeños. Porque, ¿recuerdan cuando solíamos separar nuestros componentes entre presentacionales y lógicos? Queríamos tener la unidad más pequeña posible de componente de React para hacer que todo el asunto fuera manejable. Pero eso no funcionó porque había demasiada dependencia para rastrear entre componentes. Un componente podría tener como 10 props y luego tienes que conseguir esas props y pasarlas al siguiente componente y era demasiado para tener en cuenta para un programador humano. Pero adivina qué, eso no es un problema para un LLM. Un LLM puede seguir fácilmente cientos de estas dependencias. Así que lo que esto significa, creo, es que vamos a tener componentes de React muy, muy pequeños y el LLM básicamente los va a editar por nosotros.

Ahora hablemos de WebGPU. Empezando con algunas definiciones, ¿qué es WebAssembly? WebAssembly te permite ejecutar código no confiable que no proviene de alguien que conoces de forma segura en tu CPU rápidamente. Bueno, WebGPU hace lo mismo con el otro procesador de tu ordenador. Y eso es realmente bueno porque los modelos de AI resultan amar realmente las GPUs. Así que eso significa que podemos ejecutar un modelo de AI localmente en nuestra máquina. ¿Por qué querríamos hacer eso? Bueno, probablemente estamos tomando algún tipo de... Básicamente estamos decidiendo a favor de la privacidad, la latencia y el costo. Así que, por ejemplo, con la privacidad, sabes, por supuesto, si hay una aplicación médica o algo así, todo el mundo sabe por qué la privacidad importa 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, eso puede ser liberador. Así que creo que la privacidad incluso importa en las herramientas creativas. La latencia, por supuesto, también importa. Y como acabamos de ver aquí, sabes, si aburre a los miembros de la audiencia, va a aburrir al creador. Así que, no quieres tiempos de espera tipo chatbot. Quieres que las cosas simplemente, sabes, sucedan realmente rápido. Así que, pondrías un LLM dentro de una máquina local.

10. Ejecutando LLMs en WebGPU

Short description:

¿Podemos ejecutar LLMs usando WebGPU? Aún no, ya que los modelos no están suficientemente entrenados. Sin embargo, actualmente se están entrenando modelos de código estrella y de replicación de código. Una vez optimizado, un modelo de instrucciones de edición de código puede editar una escena dentro del navegador.

Y, por supuesto, el costo también importa, pero lo voy a pasar por alto porque no tenemos mucho tiempo.

Ahora, ¿podemos realmente ejecutar estos tipos de LLMs usando WebGPU? Bueno, en realidad puedes. 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 allí. Los modelos no están suficientemente entrenados en este momento. Los modelos que realmente puedes ejecutar rápidamente en tu máquina. Por eso usamos un modelo basado en la nube en línea. Pero están llegando allí. Hay un modelo de código estrella y el modelo de replicación de código. Estos están siendo entrenados como, ya sabes, ahora mismo. Como que están, ya sabes, mejorando básicamente. Y, ya sabes, son bastante pequeños, como 15 mil millones de parámetros, 7 mil millones de parámetros. Trabajan realmente rápido. Se ejecutan en una máquina local. También tienen mucha optimización de WebGPU, frutas de bajo colgante. Como ahora mismo, si intentas ejecutarlos, lleva un poco de trabajo y también es lento. Pero eso es porque la tubería de WebGPU simplemente no está optimizada todavía. Entonces, una vez que se optimice, puedes ejecutar un modelo de instrucciones 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.

11. El impacto de la IA en las aplicaciones normales

Short description:

Ahora puedes esperar a que estos modelos maduren o puedes comenzar a desarrollar ahora mismo. La IA afecta tanto a las aplicaciones creativas como a las normales. Algunas personas están asombradas por las capacidades de codificación de la IA, mientras que otras están completamente ajenas. Para entender el impacto de la IA, prueba un experimento con la aplicación de Uber y GPT-4. Utiliza la API de Uber para crear un chatbot que pueda pedir viajes. Luego añade la API de Lyft para más opciones y funcionalidades.

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, vamos, sí, voy a, ya sabes, recortar un poco el tiempo de preguntas y respuestas. Está bien. Entonces puedes, ya sabes, ver hacia dónde se dirigen las cosas y desarrollar tu aplicación ahora mismo. Utiliza un modelo basado en la cloud y luego puedes cambiar a un modelo local si realmente tiene sentido en el caso de tu aplicación.

Ahora, hasta ahora, hemos hablado de cómo la AI afecta a una aplicación creativa como Theater.js, Blender o incluso a una aplicación de productivity como Notion. Pero, ¿cómo afecta a una aplicación normal como Uber? Hay mucho, ya sabes, miedo, incertidumbre y dudas circulando. Creo que algunas personas están simplemente en estado de shock y asombro por lo bien que la AI puede codificar. Y algunas personas están completamente ajenas. Quizás ambas descripciones se aplican a algunas personas.

Personalmente, cuando vi lo bueno que se había vuelto GPT-3, estuve en estado de shock durante un tiempo porque estaba pensando, ya sabes, ¿qué pasa con mi experiencia? ¿Qué pasa con, ya sabes, cómo gano dinero? Tengo un experimento que sugerir a todos ustedes. Creo que ni este estado de shock y asombro ni esta ignorancia, ya sabes, simplemente ignoremos todo el asunto, es saludable. Quiero sugerir un experimento para que todos puedan desarrollar su propio entendimiento de los primeros principios de cuánto puede hacer la AI y cómo afecta a tu trabajo. Entonces, aquí está el experimento. Abre la aplicación Uber en tu teléfono o alguna aplicación de viajes compartidos y haz clic alrededor, ya sabes, intenta pedir un viaje justo antes de que realmente consigas un viaje. Y imagina si Uber proporcionara una API abierta donde puedes simplemente hacer tu propia aplicación Uber utilizando esta API, ¿verdad? Puedes simplemente pedir viajes. Ahora toma esa API y aliméntala a, digamos, GPT-4 usando una biblioteca llamada LangChain. Puedes hacer eso como desarrollador de JavaScript, ya sabes, probablemente te lleve un día. Es un proyecto de fin de semana como máximo. Entonces, al final, obtendrías un chatbot que puede conseguirte viajes de Uber, ¿verdad? Podemos marcar la API. Y luego simplemente hablar con el chatbot. Y ver qué pasa. Como, ya sabes, consígueme un viaje a casa de mamá. Y probablemente te dirá, oh, va a costar 15 euros, ya sabes, y debería conseguirlo? Puedes decir que sí, y simplemente conseguirá ese viaje para ti. Ahora haz eso. Y luego dale una API más, que es la API de Lyft. ¿Verdad? Entonces dices, hey, consígueme un viaje. Y entonces el chatbot va a decir, sí, así que hay una opción de 15 euros, una opción de 17 euros, pero una de ellas está realmente más lejos de ti, así que te recogerá tres minutos antes. ¿Debería conseguir el más temprano? Sí. ¿Quieres que avise a mamá? Sí, por favor.

12. El Futuro del Desarrollo de Aplicaciones

Short description:

Probablemente será una forma mucho más rápida y mejor de pedir un viaje que abrir cualquier aplicación. ¿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. ¿Vamos a seguir utilizando las mismas herramientas que hemos estado utilizando? Probablemente no. ¿Vamos a tener que abandonar un montón de las bibliotecas y muchos de nuestros métodos? ¿Incluso los nombres de las conferencias? Probablemente sí. Pero al final, vamos a tener una forma mucho más poderosa de servir a los usuarios. Por cierto, servir a los usuarios todavía requiere la resolución de problemas. La última vez que lo comprobé, las capacidades de razonamiento de estos modelos, no son... 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 utilizamos no importen más. Podemos estar por delante de esa curva y podemos empezar a construir cosas hoy. Toda la tecnología está ahí y ¿adivina qué? Creo que como desarrolladores de JavaScript, como personas que son las mejores en conectar diferentes piezas de tecnología, eso es JavaScript. Creo que estamos en la mejor posición posible para estar en la industria.

Eso es todo. Bien. Probablemente eso va a ser... Voy a saltarme estos. Probablemente eso va a 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. Es simplemente 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, te llevará un día. Ahora, ¿es eso motivo de miedo? No sé cómo funciona tu psicología. El miedo es bueno para algunas personas. Para mí, es simplemente emocionante, finalmente, cuando lo miras. Porque ahora podemos servir a los usuarios de una forma mucho más grande.

¿Vamos a seguir utilizando las mismas herramientas que hemos estado utilizando? Probablemente no. ¿Vamos a tener que abandonar un montón de las bibliotecas y muchos de nuestros métodos? ¿Incluso los nombres de las conferencias? Probablemente sí. Pero al final, vamos a tener una forma mucho más poderosa de servir a los usuarios. Por cierto, servir a los usuarios todavía requiere la resolución de problemas. La última vez que lo comprobé, las capacidades de razonamiento de estos modelos, no son... 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 utilizamos no importen más. Podemos estar por delante de esa curva y podemos empezar a construir cosas hoy. Toda la tecnología está ahí y ¿adivina qué? Creo que como desarrolladores de JavaScript, como personas que son las mejores en conectar diferentes piezas de tecnología, eso es JavaScript. Creo que estamos en la mejor posición posible para estar en la industria. Bien. Muchas gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
Mishko, the creator of Angular and AngularJS, discusses the challenges of website performance and JavaScript hydration. He explains the differences between client-side and server-side rendering and introduces Quik as a solution for efficient component hydration. Mishko demonstrates examples of state management and intercommunication using Quik. He highlights the performance benefits of using Quik with React and emphasizes the importance of reducing JavaScript size for better performance. Finally, he mentions the use of QUIC in both MPA and SPA applications for improved startup performance.
Documentación Full Stack
JSNation 2022JSNation 2022
28 min
Documentación Full Stack
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
SolidJS: ¿Por qué tanto Suspense?
JSNation 2023JSNation 2023
28 min
SolidJS: ¿Por qué tanto Suspense?
Top Content
Suspense is a mechanism for orchestrating asynchronous state changes in JavaScript frameworks. It ensures async consistency in UIs and helps avoid trust erosion and inconsistencies. Suspense boundaries are used to hoist data fetching and create consistency zones based on the user interface. They can handle loading states of multiple resources and control state loading in applications. Suspense can be used for transitions, providing a smoother user experience and allowing prioritization of important content.
De GraphQL Zero a GraphQL Hero con RedwoodJS
GraphQL Galaxy 2021GraphQL Galaxy 2021
32 min
De GraphQL Zero a GraphQL Hero con RedwoodJS
Top Content
Tom Pressenwurter introduces Redwood.js, a full stack app framework for building GraphQL APIs easily and maintainably. He demonstrates a Redwood.js application with a React-based front end and a Node.js API. Redwood.js offers a simplified folder structure and schema for organizing the application. It provides easy data manipulation and CRUD operations through GraphQL functions. Redwood.js allows for easy implementation of new queries and directives, including authentication and limiting access to data. It is a stable and production-ready framework that integrates well with other front-end technologies.
Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With Three.js
Top Content
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.

Workshops on related topic

IA a demanda: IA sin servidor
DevOps.js Conf 2024DevOps.js Conf 2024
163 min
IA a demanda: IA sin servidor
Top Content
Featured WorkshopFree
Nathan Disidore
Nathan Disidore
En esta masterclass, discutimos los méritos de la arquitectura sin servidor y cómo se puede aplicar al espacio de la IA. Exploraremos opciones para construir aplicaciones RAG sin servidor para un enfoque más lambda-esque a la IA. A continuación, nos pondremos manos a la obra y construiremos una aplicación CRUD de muestra que te permite almacenar información y consultarla utilizando un LLM con Workers AI, Vectorize, D1 y Cloudflare Workers.
AI para Desarrolladores de React
React Advanced 2024React Advanced 2024
142 min
AI para Desarrolladores de React
Top Content
Featured Workshop
Eve Porcello
Eve Porcello
El conocimiento de las herramientas de AI es fundamental para preparar el futuro de las carreras de los desarrolladores de React, y la suite de herramientas de AI de Vercel es una vía de acceso accesible. En este curso, examinaremos más de cerca el Vercel AI SDK y cómo esto puede ayudar a los desarrolladores de React a construir interfaces de transmisión con JavaScript y Next.js. También incorporaremos APIs de terceros adicionales para construir y desplegar una aplicación de visualización de música.
Temas:- Creación de un Proyecto de React con Next.js- Elección de un LLM- Personalización de Interfaces de Transmisión- Construcción de Rutas- Creación y Generación de Componentes - Uso de Hooks (useChat, useCompletion, useActions, etc)
Building Full Stack Apps With Cursor
JSNation 2025JSNation 2025
46 min
Building Full Stack Apps With Cursor
Featured Workshop
Mike Mikula
Mike Mikula
En esta masterclass cubriré un proceso repetible sobre cómo iniciar aplicaciones full stack en Cursor. Espere comprender técnicas como el uso de GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usarlos en notas para generar listas de verificación que guíen el desarrollo de aplicaciones. Profundizaremos más en cómo solucionar alucinaciones/errores que ocurren, indicaciones útiles para hacer que su aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espere poder ejecutar su propia aplicación full stack generada por IA en su máquina!
Por favor, encuentre las preguntas frecuentes aquí
How to 9,2x Your Development Speed with Cline
JSNation 2025JSNation 2025
64 min
How to 9,2x Your Development Speed with Cline
Featured Workshop
Nik Pash
Nik Pash
La forma en que escribimos código está cambiando fundamentalmente. En lugar de quedar atrapado en bucles anidados y detalles de implementación, imagine enfocarse puramente en la arquitectura y la resolución creativa de problemas mientras su programador de pares de IA maneja la ejecución. En esta masterclass práctica, te mostraré cómo aprovechar Cline (un agente de codificación autónomo que recientemente alcanzó 1M de descargas en VS Code) para acelerar drásticamente tu flujo de trabajo de desarrollo a través de una práctica que llamamos "vibe coding" - donde los humanos se enfocan en el pensamiento de alto nivel y la IA maneja la implementación.Descubrirás:Los principios fundamentales del "vibe coding" y cómo se diferencia del desarrollo tradicionalCómo diseñar soluciones a un alto nivel y hacer que la IA las implemente con precisiónDemostración en vivo: Construcción de un sistema de almacenamiento en caché de grado de producción en Go que nos ahorró $500/semanaTécnicas para usar IA para entender bases de código complejas en minutos en lugar de horasMejores prácticas para solicitar a los agentes de IA que obtengan exactamente el código que deseasErrores comunes a evitar al trabajar con asistentes de codificación de IAEstrategias para usar IA para acelerar el aprendizaje y reducir la dependencia de ingenieros seniorCómo combinar efectivamente la creatividad humana con las capacidades de implementación de IAYa sea que seas un desarrollador junior que busca acelerar tu aprendizaje o un ingeniero senior que desea optimizar tu flujo de trabajo, saldrás de esta masterclass con experiencia práctica en desarrollo asistido por IA que puedes aplicar inmediatamente a tus proyectos. A través de demostraciones de codificación en vivo y ejercicios prácticos, aprenderás cómo aprovechar Cline para escribir mejor código más rápido mientras te enfocas en lo que importa: resolver problemas reales.
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Productivity Conf for Devs and Tech LeadersProductivity Conf for Devs and Tech Leaders
71 min
Webinar gratuito: Construyendo aplicaciones Full Stack con Cursor
Top Content
WorkshopFree
Mike Mikula
Mike Mikula
Para asistir al webinar, por favor regístrate aquí.En este webinar cubriré un proceso repetible sobre cómo iniciar aplicaciones Full Stack en Cursor. Espera entender técnicas como usar GPT para crear requisitos de producto, esquemas de base de datos, hojas de ruta y usar esos en notas para generar listas de verificación que guíen el desarrollo de la aplicación. Profundizaremos más en cómo corregir alucinaciones/errores que ocurren, indicaciones útiles para hacer que tu aplicación se vea y se sienta moderna, enfoques para conectar cada capa y más. Al final, ¡espera poder ejecutar tu propia aplicación Full Stack generada por IA en tu máquina!
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
React Advanced 2023React Advanced 2023
98 min
Trabajando con OpenAI y la Ingeniería de Prompts para Desarrolladores de React
Top Content
Workshop
Richard Moss
Richard Moss
En esta masterclass daremos un recorrido por la IA aplicada desde la perspectiva de los desarrolladores de front end, enfocándonos en las mejores prácticas emergentes cuando se trata de trabajar con LLMs para construir grandes productos. Esta masterclass se basa en los aprendizajes obtenidos al trabajar con la API de OpenAI desde su debut en noviembre pasado para construir un MVP funcional que se convirtió en PowerModeAI (una herramienta de creación de ideas y presentaciones orientada al cliente).
En la masterclass habrá una mezcla de presentación y ejercicios prácticos para cubrir temas que incluyen:
- Fundamentos de GPT- Trampas de los LLMs- Mejores prácticas y técnicas de ingeniería de prompts- Uso efectivo del playground- Instalación y configuración del SDK de OpenAI- Enfoques para trabajar con la API y la gestión de prompts- Implementación de la API para construir una aplicación orientada al cliente potenciada por IA- Ajuste fino y embeddings- Mejores prácticas emergentes en LLMOps