IA y Desarrollo Web: ¿Hype o Realidad?

Gracias a todos por venir. Estoy muy emocionado por esta charla. Mi nombre es Wes Boss. Soy canadiense, pero tengo un 100% de sangre holandesa. Así que si quieres venir después y enseñarme alguna palabra en holandés, en realidad me gustaría mucho. Creo cursos de desarrollo web. Tengo un podcast muy premiado llamado Syntax, del cual estoy bastante emocionado. Y esta charla de hoy trata sobre programar con IA y también construir cosas con estos modelos de IA.

Y quiero comenzar con algunas cosas. Sé que algunos de ustedes en la sala están pensando, oh, este tipo que está hablando de IA en este momento, ¿verdad? No tengo nada aquí para venderte. No trabajo para alguna empresa de IA. No tengo ninguna locura. Bueno, si estás tan emocionado, tal vez intente venderte algo más tarde. Así que no te emociones demasiado. No soy un estafador que intenta promocionarlo. No soy un tipo Web3 de criptomonedas que descubrió que no funcionaba. Solo estoy emocionado por muchas de estas cosas de IA que están sucediendo, y estoy aquí solo para contarte cosas que son geniales.

Entonces, la IA, creo que nos brinda a los desarrolladores un impulso masivo en la productividad, calidad del código, así como en el tipo de cosas que podemos construir. Todavía estamos descubriendo muchas de estas cosas. Esto es solo, como, seis meses o un año de cosas volviéndose locas. Pero no creo que vaya a desaparecer. Siempre lo comparo con las cosas de criptomonedas, y pienso, oh, estaré atento a eso y cosas así. Y esas cosas nunca fueron realmente útiles para mí, pero esto es simplemente, wow, no puedo dejar de usar esto en mi día a día.

Entonces hablemos de algunos de los medios que utilizamos como desarrolladores web con IA. Probablemente el más grande. ¿Quién aquí está usando GitHub Copilot o algo similar, verdad? Sí, probablemente la mitad de la sala aquí. Y es súper útil. Mientras escribes código, simplemente dice, ¿es esto lo que quieres? Y lo seleccionas. También tenemos la CLI. Oh, mierda, debería haber un video ahí.

Imagina algo como GitHub Copilot o Fig donde tienes un comando de CLI y te da acceso y luego te muestra todos los comandos de CLI. Es bastante útil. También hay aplicaciones de chat con las que probablemente muchos de nosotros también interactuamos, donde simplemente le preguntas, ¿cómo hago X, Y y Z? Ahora también hay plantillas de solicitudes de extracción. Pasas todo este tiempo trabajando en tu código y luego tienes que crear una solicitud de extracción. A veces es difícil saber dónde está toda esa buena información.

Y hay tantos experimentos diferentes que tenemos. Hay una voz en GitHub Copilot que es bastante genial. Es enorme para la accessibility, pero también es interesante, ¿es tu voz una nueva entrada? Tienes tu ratón, tienes tu teclado, ¿es tu voz una nueva entrada? No lo sabemos. Estamos experimentando con eso. Hay pinceles donde solo tienes que hacer clic en un botón, hacerlo accesible, documentar esto, agregar tipos. Las indicaciones como la nueva sintaxis. Así que hay mucha discusión sobre si todavía escribimos código o simplemente escribimos indicaciones. Y obviamente aún no. Pero hay personas que intentan explorar si eso es algo. Tal vez sí, tal vez no. Generación de código de plantilla para estas cosas. ¿Necesitas generadores de código de plantilla o puede la IA hacerlo de manera más adecuada?

Entonces, ¿por qué quieres usar este tipo de cosas? Primero, es más rápido que Google. Es consciente del contexto, lo cual es realmente lo que marca la diferencia, sabe sobre el código que estás escribiendo. Sabe sobre los tipos de tu proyecto. Sabe sobre, como, qué pestañas tienes abiertas en ese momento. Y todo ese contexto realmente ayuda cuando estás tratando de encontrar una respuesta. Resuelve tu problema. No resuelve el problema de otra persona y no puedes decir, oh, este tipo en StackOverflow resolvió el problema de esta manera. ¿Cómo aplico eso a mi problema? Va directamente a tu problema. Veamos algunos ejemplos. Datos ficticios. Generar datos ficticios es muy útil. Entonces esto es, ah, maldición. ¿Qué está pasando con el... Espera. Esto no va a ser bueno si esto no funciona.

Um, veamos aquí. Disculpen, gente. Disculpen, gente. ¿Dónde se fue mi cosa? Uh-oh. Maldición. Disculpen, gente. Un momento. Déjenme resolver esto. Tengo que bajar mi premio. Um... ¿Deberíamos debug en vivo? Oh, no. Error al obtener. Maldición. ¿Es el Wi... Pero es local. Intentemos. Es como... ¿Cuál es ese? ¿Puedes venir y mostrarme? Oh, definitivamente es el Wi-Fi. Veo que el primer error es que codehike.org no está obteniendo las gramáticas. Disculpen. Me conecté a mi teléfono antes de esto.

¿Es este el tiempo que me queda? ¿Es este el tiempo que me queda? Oh, me dijeron 20 minutos. Tenemos tiempo extra. Esto es increíble. Te daré dos minutos más. Lo aprecio.

Muy bien. Entonces, datos ficticios. Dame una matriz de personas. Cada persona con nombre y apellido. Básicamente, estoy diciendo lo que quiero. Como un director de proyecto. Y al otro extremo te dan tipos y datos reales. Y esto es muy útil, especialmente para alguien como yo que crea muchos ejemplos y quieres datos reales ahí. Mucha gente usa Faker JS. Esto es mucho mejor que Faker JS. En este caso, toma este código y agrega tipos. A menudo puedes inferir muchos tipos, pero la IA también puede generarlos y colocarlos directamente en tu código. Haz el trabajo. Selecciona un par de elementos en la página y di: escribe una función para pintar el fotograma de video en el lienzo tan frecuentemente como sea posible. Obtén la salida completa en TypeScript y listo. Al otro extremo obtienes ese tipo de código de plantilla.

Hazlo reutilizable. Esto es algo que hago mucho. Estoy trabajando en una demostración. Estás creando funciones aquí y allá y está funcionando. Ahora necesito volver y limpiarlo. ¿Cuántas veces dices: funciona, pero aún tengo que limpiarlo, verdad? Solo conviértelo en una clase reutilizable y doo-doo-doo-doo. Se convierte en una hermosa clase reutilizable y utiliza las mejores prácticas y demás. Genera el CSS por ti. Tengo este HTML.

Este es un caso de uso realmente útil para el nuevo chat de GitHub Copilot. Puedes decir, selecciona este HTML y di, dado este HTML seleccionado, escríbeme un montón de selectores CSS generados entre X e Y y usa este término. Escribe regexes.

Este es muy útil. Odio escribir regexes. Así que solo le das algunos ejemplos de lo que quieres que haga y dices, bien, aquí tienes un regex y, ¿cómo sabes que realmente funciona? No sé mucho sobre regex, bueno, explícamelo. Vuelves a este regex en un par de meses. Puedes preguntarle, ok, desglosa, explica qué hace cada una de estas cosas específicas. Además, adelante y escribe algunas pruebas para los regexes que tenemos allí para que sepas que si alguna vez tienes que modificarlo o cambiar cómo se ve, tus pruebas van a fallar. Y por cierto, ejecuté todas esas pruebas. Y obviamente no es un ejemplo importante, pero lo ejecuté a través de una biblioteca de testing y funcionó de inmediato.

El desarrollo guiado por pruebas es escribir una función que cumpla con estas pruebas. Dije, bien, solo voy a imaginar una API de tomar me gustan las naranjas y cambiar las naranjas por plátanos, ¿verdad? Y luego en el otro extremo, te dará una función que devuelve un objeto que tiene un método y swap dentro de él. Luego, si no funciona de inmediato, puedes decir, bueno, gracias, IA, pero tengo este error. Y puedes tener esta recursividad donde dices, ok, no funcionó. Este es el error que obtuve y lo ejecutará nuevamente y te dará un código actualizado. En cierto momento, comencé a dar vueltas en círculos con esto, no es perfecto. No voy a decir aquí que esto va a codificar todo por ti. Pero ciertamente te va a ahorrar nueve minutos, al menos, en este tipo de cosas, ¿sabes? Control de flujo, toma este código de devolución de llamada y cámbialo.

Conviértelo en promesas. Así que simplemente lo encadené con then. Y dije, bueno, conviértelo en un sink. Boom, por el otro lado. Y en ese momento, dije, pero solo obtén fotos del clima si es necesario esperar a obtener el clima. El resto de ellos se pueden ejecutar en paralelo. Y en ese punto, no sabía qué hacer. Solo seguía dándome la respuesta incorrecta una y otra vez. Pero eso no significa que lo descartemos. Eso significa que me llevó al 73% del camino.

Es realmente bueno con entradas complejas. ¿Cuántos de ustedes han tenido que usar FFmpeg antes? Es terrible, ¿verdad? Es una herramienta increíble, pero tiene muchas entradas complejas. Miren todas estas Vs y As y dos puntos y cosas así. Y es realmente bueno tomando una entrada en inglés o cualquier otro idioma y convirtiéndola en la alternativa de CLI. Explícamelo. Entonces, si no sabes qué son esas cosas, nuevamente las descompondrá en las piezas y dirá, esta pieza significa X, Y y Z.

Uso esto bastante. Esto es realmente genial. Entonces, si estás viendo una demostración de algún código, dices, oh, quiero ejecutar eso pero no tengo las dependencias instaladas. En lugar de copiar y pegar cada importación o require, cambiar a tu terminal NPM install, solo usas el signo de interrogación, el signo de interrogación es la herramienta CLI de GitHub Copilot. Entonces dices, instala estos. Y luego boom. Y dirá, bien, creo que quieres instalar las siguientes cosas con NPM. Nuevamente, es solo un ahorro de tiempo rápido que puedes usar en lugar de tener que copiar y pegar todo. Podría mostrarte ejemplos todo el día, pero cambiemos al otro lado y veamos cómo—oh, eso es molesto. Mi cursor está encima de eso. ¿A alguien le molesta eso? ¿Sabes qué más me molesta? Que esto no es una importación. El require—lo cambiaremos el próximo año. Entonces veamos cómo puedes integrar IA en tu aplicación. Así que ejecuto un—bien, ahora podemos volver a ponerlo en pantalla.

Así que dirijo un—bien, ahora podemos volver a ponerlo en pantalla. Dirijo un podcast altamente premiado llamado Syntax. ¿Oh, está al revés? Oh, shoky doodle. Muy bien. Y estamos explorando, como, okay, ¿cómo podemos utilizar estas herramientas para integrarlas en una mejor experiencia para que podamos mostrar el contenido que está dentro del podcast de diferentes maneras? A las personas, tal vez no quieran escuchar un podcast completo, pero—o tal vez necesiten encontrar dónde en el podcast hablaste de eso. Eso es lo que recibo en mis mensajes directos de Twitter todo el día. Wes, ¿en qué episodio hablaste de X, Y y Z? ¿Cuál fue la cosa que usaste para eliminar tus antiguos NPM modules, ¿verdad? Así que utilizamos este servicio. Hay muchos modelos diferentes que transcribirán eso. Obtenemos algunos datos JSON para cada palabra—cuando se ha comenzado, cuando se ha terminado, quién es realmente el orador, y todo tipo de otros datos realmente buenos sobre eso.

Entonces, lo que queremos de la IA se formatea como JSON. Esto es realmente genial. Se puede notar. A veces requiere un poco de persuasión. Pero se puede decir a estos modelos de IA, ChatGPT y otros. Se puede decir, está bien, quiero estos data, pero entrégame el formato como X, Y y Z. Así que se puede decir, entrégame la salida formateada como JSON. Y lo he llevado a un punto en el que puedo analizar con confianza la entrada de la IA como JSON. Aún tengo un bloque try-catch de RapidTry alrededor, por si acaso. Pero probablemente, después de ejecutarlo 300 veces, nunca me ha dado algo que no sea JSON directo. Así que tenemos la transcripción. Luego lo que hacemos es decir, resumir la transcripción del podcast en puntos concisos cada uno conteniendo unas pocas palabras. Entonces, la solicitud real es mucho más larga, lleva un poco de tiempo, pero básicamente le das la marca de tiempo, le das el orador y le das como... Se llaman enunciados, cosas que se dijeron. Sin embargo, hay un problema en que estos modelos solo pueden tomar una cierta cantidad de entrada. Se llama tokens. Y un token es como una palabra, pero es un poco diferente y los puntos y las comillas también son tokens. Un podcast de una hora tiene 15,000 tokens y eso está más allá del límite de la mayoría de las IA accesibles. Así que GPT 3.5, que tiene un límite de 4,000 tokens, cuatro son aproximadamente 8,000 tokens. Luego hay un par de estos últimos tres que no son accesibles para la mayoría de los mortales en este momento. Anthropic dice que permitirán usar 100,000 tokens, lo cual será increíble porque literalmente podrías enviarle toda tu base de código, bueno, depende de qué tan grande sea tu base de código, pero puedes enviarle bastante contexto para que realmente entienda cómo funciona. Pero aquí estamos, incluso si tenemos el dinero para GPT 4, solo tienes 8,000 tokens y eso incluye la respuesta que te envía. Así que en realidad solo puedes enviarle 6,000, nosotros tenemos 15,000. Entonces, la respuesta a que la IA no pueda ajustarse es la IA, lo cual es un poco aterrador que la respuesta a muchos problemas de IA también sea la IA, pero la forma en que funciona es que condensas o resumir lo que tienes. Así que tomamos la transcripción de entrada tal como salió de mi boca y decimos, por favor condensa esto para que sea aproximadamente un 80% más corto o un 50% más corto o lo que sea, pero no pierdas ningún detalle, ¿verdad? No pierdas ningún detalle y sorprendentemente tengo muchas palabras de relleno que digo y puede hacer un buen trabajo al reducirlo al 50%, al 30% de la entrada real sin deshacerse de ella. Simplemente seguí leyendo, y dije, sí, realmente no dejó nada fuera. En ese punto tienes la transcripción que ha sido condensada. Cada enunciado es más pequeño sin dejar de lado ninguna información y luego escribimos esta solicitud masiva que dice resumir la transcripción proporcionada en forma concisa, blah, blah, blah. Además, crea lo siguiente para el episodio, uno o dos envíos a la suscripción, tweets, blah, blah, blah, todo tipo de información. Devuélvelos a todos en JSON para que se vea así.

La clave aquí es que si, esto me llevó mucho tiempo, recuerda que dije eso de analizar JSON, porque siempre decía, okay, aquí está tu resultado. Y yo decía, no, no digas nada. Solo dame el JSON. Vamos, ya sabes, y no quiero usar regex o lo que sea. Así que finalmente llegué a la conclusión de que si, la IA, tienes comentarios o aclaraciones, por favor inclúyelos en las notas. Y le doy su propio espacio. Y a veces, es como a veces tiene cosas que decirme, pero las pone en la sección de notas, lo cual es realmente amable de su parte.

Una vez que tienes ese prompt masivo, creas la solicitud a tu modelo. Estamos usando OpenAI aquí, pero garantizo que esto va a cambiar. Lo que estamos usando va a cambiar en los próximos meses. Básicamente, le dices al sistema de qué se trata. Dices que la sintaxis es un podcast sobre desarrollo web. Este es el episodio número 583. Tiene el título de lo que sea. Luego le das el prompt completo que acabo de mostrarte en la diapositiva anterior. Y finalmente, ese prompt condensado completo que ahora tenemos en una forma mucho más corta. Así que en general, trata de ajustarlo en aproximadamente 6,000 tokens, dejándote unos 2,000 tokens para la respuesta.

Luego, con el resultado, es bastante asombroso lo que obtienes. Dice, este es el título. ¿Puede el CSS puro reemplazar a SASEA? Un deep dive. Descripción. Hace una muy buena descripción de lo que es. Temas. Le pides que los agrupe en varios temas. Luego obtenemos un resumen detallado de cada tema o cosa de la que hablamos a lo largo de todo el episodio. Nos da los momentos en los que comenzaron. Además, profundiza en ellos. Y eso fue un poco complicado porque a veces pasaba por alto, como, las cosas personales o las digresiones en las que nos metíamos. Así que tenías que decirle, no, mantén las digresiones. Pero una vez que lo entendimos, hizo un muy buen trabajo, y honestamente, mucho mejor que un humano podría hacer para descubrir cuáles son los temas principales en esto.

Esto es completamente generado por IA a partir de mi voz. Tweets. Muy bien, intentemos descubrir de qué tratan los tweets. A veces tenemos personas que quieren tuitear sobre el podcast, pero no necesariamente saben cómo describirlo o crear algo bueno. Así que es realmente bueno que puedas crear cinco para que los tuiteemos, así como cinco para los oyentes reales.

Tiempo del hablante. Podríamos escribir un reduce para averiguarlo, pero también puedes preguntarle a la IA, muy bien, sabes sobre toda la transcripción. Sabes dónde comienza cada enunciado, así que súmalos. Y si hay invitados, intentará... En realidad es muy bueno para averiguar los nombres de los invitados basándose en, decimos, hoy tenemos a Josh, y la IA averiguará cuál es el nombre de la persona.

Referencias a sitios web. Esto es increíble, cada vez que hacemos referencia a un sitio web, no diciendo www.loquesea, sino cada vez que simplemente decimos, oh sí, echa un vistazo a la documentación, o echa un vistazo al sitio, la IA entenderá que estamos hablando de un sitio web específico e intentará encontrar las URL. No es perfecto, pero es probablemente un 93.8% perfecto.

Embeddings. Esto es interesante, porque mucha gente solo tiene experiencia con el chat y GitHub copilot, y eso es todo. Así que la tercera herramienta son los embeddings. Esto no es algo que vayas a usar a través de esas herramientas, al menos por ahora. Esta es otra herramienta que se me ocurrió, donde era como hacer preguntas sobre la sintaxis. Wes, ¿de qué hablaste? ¿Cuál fue la herramienta que usaste para sacar el resto de Nutella del frasco, verdad? Hay todas estas cosas extrañas de las que hablamos en el podcast, y a veces es difícil saber en qué episodio de los 600 fue eso. Así que simplemente le preguntamos. En este caso, solo dije herramientas caseras, porque estaba tratando de ver si podía distinguir entre herramientas de JavaScript y herramientas caseras. Y lo hizo muy bien. Así que dije, aquí están los aspectos más destacados. Y le dices, por favor, menciona los números de los programas donde lo encontraste. Y puede hacer un resumen muy bueno de los temas que hemos hablado. Entonces la pregunta es, ¿cómo sabe sobre las más de 600 horas de transcripciones que tenemos? Y la realidad es que no lo sabe. No estamos entrenando algún tipo de modelo de entrada especial. Lo que hacemos es tomar cada enunciado que hemos dicho y convertirlo en un embedding. Aquí tienes un ejemplo. Acabo de decir, entré en Twitter.

Dije, cuéntame qué hiciste hoy. Y la gente respondió. Y dos personas dijeron, muchas reuniones, y reuniones, reunión, reuniones. Tomé esos dos tweets, los convertí en embeddings. Eso es lo que son esos números. Son vectores. Y puedes averiguar qué tan similares son estas dos cosas. Lo mismo con este. Esto es 82% similar. Pero si miras las palabras, realmente solo hay la palabra componente y tal vez menú que se superponen. No es una superposición de texto. La IA comprende de qué está hablando la persona y luego generará un embedding basado en eso. Este es increíble. Tallé una cuchara e hice un gallinero. 80% similar. Y también puedes pasar esos tweets de vuelta al chat y preguntar, ¿por qué estas cosas son similares? Y dice que ambos son proyectos de bricolaje satisfactorios. Así que eso es bueno para la búsqueda. Es bueno para la clasificación, etiquetado, agrupación, anomalías, imágenes similares. También puedes incrustar imágenes, video fotogramas, cosas así. Entonces, con la sintaxis, tomamos cada enunciado que tenemos, lo convertimos en un embedding vector. Y el diseño funciona así, donde tomamos la pregunta, la convertimos en un embedding. Así que eso son un montón de números. Y luego usamos una database de vectores para encontrar enunciados similares a lo que la persona preguntó. Y luego tomo ese enunciado y digo, dame las dos oraciones anteriores en las que hablé sobre eso y las dos oraciones siguientes en las que hablé sobre eso. Y luego digo, está bien, eso es mi contexto. Pásalo de vuelta al chat y di, dado el siguiente contexto, ¿cuál es tu respuesta a esta pregunta? Y así es como se están construyendo muchos de estos modelos de chat personalizados. Entonces, la pregunta aquí es, ¿estamos en problemas? Cada persona a la que me he acercado hoy dice, ¿sobre qué es tu charla? Y, oh, nos quitará el trabajo, ¿verdad? ¿Sabes? No lo sé. Sinceramente, no lo sé. Y no creo que nadie realmente lo sepa, pero no creo que sea así. La IA nos brinda un impulso masivo en lo que podemos hacer. Y la pregunta realmente es, ¿qué podemos hacer ahora que tenemos esto? No soy una persona inteligente y aquí estoy en el escenario hablando de similitud coseno. Eso me parece increíble que ahora tenga estos nuevos superpoderes para hacer ese tipo de cosas. La tecnología no se quedará quieta. Será menos sobre centrar divs y más sobre empujar los límites en las cosas que podemos hacer. Somos solucionadores de problemas. Nuestras herramientas siempre están cambiando. Y este es otro ejemplo de cómo nuestras herramientas están cambiando. Así que te animo, no lo ignores. Y mantente alerta. Gracias.