IA y Desarrollo Web: ¿Exageración o Realidad?

Gracias a todos por venir. Estoy súper emocionado por esta charla. Mi nombre es Wes Boss. Soy canadiense, sin embargo, tengo 100% de sangre holandesa. Así que si quieres acercarte después y enseñarme alguna palabra en holandés, realmente me gustaría eso. Creo cursos de desarrollo web. Tengo un podcast muy premiado llamado Syntax, del cual estoy bastante emocionado. Y la charla de hoy es sobre codificación con AI y también sobre construcción de cosas con estos modelos de AI.

Y quiero comenzar con algunas cosas. Sé que hay algunos de ustedes en la sala que están como, oh, este tipo que está hablando sobre AI ahora mismo, ¿verdad? No tengo nada aquí para venderte. No trabajo para alguna compañía de AI. No tengo nada loco. Bueno, si estás tan emocionado por eso, podría intentar venderte algo más tarde. Así que no te emociones demasiado. No soy un charlatán tratando de promocionarlo. No soy un tipo de Web3 crypto que descubrió que no funcionó. Estoy emocionado por muchas de estas cosas de AI que están sucediendo, y estoy aquí solo para decirte cosas que son geniales.

Entonces, AI, creo que nos da a los desarrolladores un gran impulso en productividad, calidad de código, así como el tipo de cosas que somos capaces de construir. Todavía estamos descubriendo muchas de estas cosas. Esto es solo, como, seis meses al año de cosas volviéndose locas. Pero no creo que vaya a ninguna parte. Siempre lo comparo con las cosas de crypto, y digo, oh, mantendré mi ojo en eso y cosas así. Y esas cosas nunca fueron realmente útiles para mí, pero esto es como, wow, no puedo dejar de usar estas cosas en mi día a día.

Entonces, hablemos de algunos de los medios que utilizamos AI como desarrollador web. Probablemente el más grande. ¿Quién aquí está usando GitHub Copilot o algo así, 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 aceptas. También tenemos CLI. Oh, mierda, se supone que debe haber un video allí.

Solo imagina algo como GitHub Copilot o Fig donde tienes un comando CLI y te da acceso y luego te muestra cuáles son todos los comandos CLI. Es bastante útil. 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 hay plantillas de solicitud 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 averiguar qué es todo eso bueno.

Y hay tantos experimentos diferentes que tenemos. Hay voz, que es la voz de GitHub Copilot, que es bastante genial. Es enorme para la accesibilidad, 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 ello. Hay pinceles donde solo tienes que hacer clic en un botón, hacerlo accesible, documentar esto, agregar tipos. Los mensajes como la nueva sintaxis. Entonces, hay mucho debate sobre, como, ¿escribimos código todavía o solo escribimos mensajes? Y obviamente aún no. Pero hay personas que intentan explorar tal vez eso es algo. Tal vez no lo es. Generación de plantillas para estas cosas. ¿Necesitas generadores de plantillas o puede hacerlo la IA donde es un poco más adecuado?

Entonces, ¿por qué quieres usar estos tipos de cosas? Primero, es más rápido que Google. Es consciente del contexto, que es realmente el cambio de juego, ya que 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 cuál es mi problema? Va directamente a tu problema. Entonces, veamos algunos ejemplos. Datos ficticios. Generar datos ficticios es súper útil. Entonces esto es, ah, mierda. ¿Qué pasa con el... Espera. Esto no va a ser bueno si esto no funciona.

Um, veamos aquí. Lo siento, gente. Lo siento, gente. ¿Dónde fue mi cosa? Uh-oh. Maldición. Lo siento, gente. Un segundo. Permítanme resolver esto. Tengo que bajar mi premio. Um... ¿Deberíamos debug en vivo? Oh, no. Fallo al buscar. Maldita sea. ¿Es el Wi... Pero es local. Intentemos. Es como... ¿Cuál es ese? ¿Puedes venir y mostrarme? Oh, definitivamente es el Wi-Fi. Estoy viendo que el primer error es que codehike.org no está recibiendo las gramáticas. Lo siento. Me conecté a mi teléfono antes de esto.

¿Es esto cuánto tiempo me queda? ¿Es esto cuánto tiempo me queda? Oh, me dijeron 20 minutos. Tenemos tiempo extra. Esto es genial. Te daré dos minutos más. Lo agradezco.

Muy bien. Entonces, datos ficticios data. Dame un array de personas. Cada persona primero y último. Básicamente estoy divagando sobre lo que quiero. Algo así como un gestor de proyectos. Y en el otro extremo te dan tipos y datos reales data. Y esto es muy útil para, especialmente para alguien como yo que crea muchos ejemplos y quieres datos reales data en ellos. Mucha gente usa Faker JS. Esto es mucho mejor que Faker JS. En este caso, toma este code y añade tipos. Así que a menudo puedes inferir muchos tipos, pero la AI también puede generarlos y pegarlos directamente en tu code. Haz el trabajo. Así que seleccionas un par de elementos en la página y dices escribe una función para pintar el fotograma del video en el lienzo lo más frecuentemente posible. Da toda la salida en TypeScript y bam. Al otro extremo obtienes ese tipo de código de plantilla code.

Hazlo reutilizable. Esto es algo que hago mucho. Estoy como hackeando en una demo. Estás haciendo funciones aquí y allá y bien, está funcionando. Ahora necesito volver y limpiarlo. ¿Cuántas veces estás como, bien, funciona pero tengo que limpiarlo todavía, verdad? Así que simplemente lo conviertes en una clase reutilizable y doo-doo-doo-doo. Lo convierte en una hermosa clase reutilizable y utiliza best practices y demás. Genera el CSS para ti. Así que tengo este HTML.

Este es un caso de uso realmente útil para el nuevo chat de GitHub Copilot. Puedes decir, selecciona esto HTML y decir, 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 simplemente le das algunos ejemplos de lo que quieres que haga y dices, está bien, aquí tienes un regex y como, ¿cómo sabes que eso realmente funciona? No sé mucho sobre regex, bueno, explícalo. Vuelves a este regex en un par de meses. Puedes preguntarle, está bien, 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 manipularlo o cambiar su apariencia, tus pruebas van a fallar. Y por cierto, hice todas esas pruebas. Y obviamente no es un ejemplo importante, pero lo pasé por una biblioteca de testing y funcionó de inmediato.

El desarrollo guiado por pruebas es escribir una función que satisfaga estas pruebas. Dije, está bien, solo voy a imaginar una API de toma que me gustan las naranjas y cambia las naranjas con plátanos, ¿verdad? Y luego, al otro extremo, te dará una función que devuelve un objeto que tiene un método de intercambio en su interior. Entonces, si no funciona de inmediato, puedes decir, está bien, gracias, AI, pero tengo este error. Y puedes tener este trabajo recursivo con él donde dices, está bien, no funcionó. Este es el error que obtuve y lo ejecutará de nuevo y te dará algo de code actualizado. En cierto momento, estaba empezando a dar vueltas con él donde no es perfecto. No voy a subir aquí y decir que esto va a code todo para ti. Pero ciertamente te va a ahorrar al menos nueve minutos, en este tipo de cosas, ¿sabes? Control de flujo, toma este code de devolución de llamada y cámbialo.

Conviértelo en promesas. Así que simplemente lo encadenó a continuación. Y dije, bueno, conviértelo en un sumidero. Boom, por el otro lado. Y luego en ese momento, dije que está bien, pero solo obtén fotos del clima si es necesario esperar para obtener el clima. El resto de ellos puede ejecutarse simultáneamente. Y en ese punto, no sabía qué hacer. Simplemente me seguía dando la respuesta incorrecta una y otra vez. Pero eso no es para descartarlo. Eso es para decir, bueno, eso me llevó al 73% del camino.

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

Uso esto bastante. Esto es realmente genial. Entonces, si estás mirando una demostración de algún código, estás diciendo, oh, quiero ejecutar eso pero no tengo las dependencias instaladas. Entonces, en lugar de copiar, pegar cada importación o requerimiento, cambiando a tu terminal NPM install, simplemente 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á, está bien, creo que quieres NPM instalar las siguientes cosas. De nuevo, eso es solo un ahorro de tiempo rápido que puedes usar en lugar de tener que copiar, pegar todo. Podría mostrarte ejemplos todo el día, pero vamos a cambiar al otro lado y ver cómo, oh, eso es molesto. Mi cursor está encima de eso. ¿Eso molesta a alguien? ¿Sabes lo que también me molesta? Es que esto no es import. El require, lo cambiaremos el próximo año. Entonces, veamos cómo puedes integrar la AI en tu aplicación. Así que dirijo una, bueno, podemos volver a ponerlo ahora.

Así que dirijo un—bueno, podemos volver a ponerlo ahora. Dirijo un podcast altamente premiado llamado Syntax. ¿Oh, está al revés? Oh, shoky doodle. Muy bien. Y estamos viendo, como, ¿cómo podemos usar estas herramientas para integrar en una mejor experiencia para que podamos presentar el contenido que está dentro del podcast de muchas diferentes maneras? A las personas, tal vez no quieras escuchar un podcast completo, pero—o tal vez necesitas poder encontrar dónde en el podcast hablaste de ello. Eso son mis DMs 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 viejos NPM modules, ¿verdad? Así que usamos este servicio. Hay muchos modelos diferentes por ahí que lo transcribirán. obtenemos algunos datos JSON para cada palabra—cuándo se ha iniciado, cuándo se ha terminado, quién es realmente el hablante, y todo tipo de otros datos realmente buenos sobre ello.

Entonces, lo que queremos de la AI está formateado como JSON. Esto es realmente genial. Puedes decirlo. A veces requiere un poco de persuasión. Pero puedes decirle a estos modelos de AI—ChatGPT y lo que sea. Puedes decir, está bien, quiero estos data, pero dámelo formateado como X, Y y Z. Entonces puedes decir, dame la salida formateada como JSON. Y lo he llevado a un punto donde puedo analizar con confianza el JSON.parse de la entrada de la AI. Todavía tengo RapidTry catch alrededor, por si acaso. Pero probablemente después de ejecutarlo 300 veces, nunca me ha dado un JSON directo. Entonces tenemos la transcripción. Luego lo que hacemos es decir, resumir la transcripción del podcast en puntos muy concisos cada uno conteniendo unas pocas palabras. Entonces el indicador real para eso es mucho más largo, lleva un poco de tiempo, pero básicamente lo haces, le das la marca de tiempo, le das el hablante 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 llaman tokens. Y un token es algo así como una palabra, pero es un poco diferente y los períodos y las comillas también son tokens. Entonces un podcast de una hora son 15,000 tokens y eso está más allá del límite de la mayoría de las AI accesibles. Entonces GPT 3.5, tiene un límite de 4,000 tokens, cuatro son alrededor de 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 está diciendo que te permitirán usar 100,000 tokens, lo cual va a ser salvaje porque literalmente podrías enviarle toda tu base de código, bueno, depende de cuán 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 está enviando. Entonces en realidad solo puedes enviarle 6,000, tenemos 15,000. Entonces la respuesta a que la AI no pueda encajar es la AI, lo cual es un poco aterrador que la respuesta a muchos problemas de la AI también sea la AI pero la forma en que funciona es que condensas o resumir lo que tienes. Entonces tomamos la transcripción de entrada que es 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 renuncies a ningún detalle, ¿verdad? No renuncies a ningún detalle y sorprendentemente tengo muchas palabras de relleno que digo y puede hacer un muy buen trabajo reduciéndolo a un 50, 30% de la entrada real sin deshacerse de ella. Simplemente seguí leyéndolos, y pensé, 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 este indicador masivo que dice resumir la transcripción proporcionada en resúmenes concisos, blah, blah, blah. Además, por favor crea lo siguiente para el episodio, uno o dos envíos a la suscripción, tweets, blah, blah, blah, todo tipo de información. Devuelve cada uno de ellos en JSON para que parezca eso.

La clave aquí es que si tú, esto me llevó más tiempo, recuerda que dije esa cosa de JSON parse, porque siempre sería como, aquí está tu resultado. Yo digo, no, no digas nada. Solo dame el JSON. Vamos, sabes, y no quiero hacer regexit o lo que sea. Así que finalmente llegué a si tú, la AI, tienes comentarios o aclaraciones, por favor ponlos en las notas. Y le doy su propio pequeño espacio. Y a veces, es como a veces tiene cosas que decirme, pero las pone en la sección de notas, lo cual es muy amable de su parte.

Entonces, una vez que tienes ese enorme prompt, elaboras 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 lo que es. Dices que la sintaxis es un podcast sobre web development. Este es el episodio número 583. Está titulado como sea. Luego le das el prompt completo que acabo de mostrarte en la última diapositiva. Y finalmente, ese prompt condensado completo que ahora tenemos en mucho más corto. En general, intenta ajustar eso a unos 6,000 tokens, dejándote unos 2,000 tokens para la respuesta.

Luego, a partir del resultado, es bastante asombroso lo que obtienes. Entonces dice, este es el título. ¿Puede el CSS vainilla reemplazar a SASEA? Un deep dive. Descripción. Hace una descripción realmente buena de lo que es. Temas. Le pides que los agrupe en un montón de temas. Luego obtenemos un resumen detallado de cada tema o cosa de la que hablamos a través del episodio completo. Así que te da las marcas de tiempo de dónde empezó. Así como entra en ello. Y eso fue un poco complicado porque a veces pasaría por alto, como, las cosas personales, o las tangentes en las que nos habríamos metido. Así que tendrías que, no, mantén las tangentes. Pero una vez que lo conseguimos, hizo un trabajo realmente bueno, y honestamente, bastante mejor que un humano podría hacer para averiguar cuáles son los temas principales dentro de esto.

Entonces esto es completamente generado por AI a partir de mi voz. Tweets. Bien, intentemos averiguar cuáles son los tweets. A veces tenemos personas que quieren tuitear sobre el podcast, pero no necesariamente saben cómo describirlo, o se les ocurre algo bueno. Así que es bastante bueno que puedas crear cinco para que nosotros los tuiteemos, así como cinco para los propios oyentes.

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

Referencia a sitios web. Esto es increíble, es que cada vez que hacemos referencia a un sitio web, no diciendo www.loquesea, sino cualquier vez que simplemente dices, oh sí, revisa los docs, o revisa el sitio, recogerá que estamos hablando de un sitio web específico e intentará encontrar las URL. No es perfecto, pero probablemente es un 93.8% perfecto.

Incrustaciones. Esto es genial, porque mucha gente solo tiene experiencia con el chat y GitHub copilot y eso es todo. Así que el tercero son las incrustaciones. Esto no es algo que vayas a usar a través de esas herramientas, al menos no todavía. Así que esta es otra herramienta que se me ocurrió, donde era algo así como hacer preguntas sobre la sintaxis. Wes, ¿de qué hablaste? ¿Cuál fue la herramienta que usaste para sacar el resto de la Nutella del frasco, verdad? Hay todas estas cosas raras de las que hablamos en el podcast, y a veces es difícil averiguar en cuál de los 600 episodios fue eso. Así que simplemente le hacíamos preguntas. En este caso, simplemente dije herramientas de bricolaje, porque estaba tratando de ver si podía conocer la diferencia entre las herramientas de JavaScript y las herramientas de casa. Y lo hizo realmente bien. Así que dije, aquí están los puntos destacados. Y le dices, por favor, referencia los números de los shows donde realmente lo encontraste. Y puede hacer un resumen realmente bueno de los temas de los que hemos hablado. Así que 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 lo convertimos en una incrustación. Así que aquí está un ejemplo. Acabo de decir, fui a Twitter.

Dije, dime qué hiciste hoy. Y la gente respondió. Y dos personas dijeron, muchas reuniones, y reuniones, reuniones, reuniones. Tomé esos dos tweets, los convertí en incrustaciones. 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 la palabra componente y quizás menú que se superponen. No es una superposición de texto. Es la AI comprende de qué está hablando la persona, y luego generará una incrustación basada en eso. Este es increíble. Tallé una cuchara y construí un gallinero. 80% similar. Y también puedes pasar esos tweets de vuelta al chat y decir, ¿por qué son similares estas cosas? Y dice que ambos son satisfactorios proyectos de bricolaje. Así que eso es bueno para la búsqueda. Es bueno para la clasificación, etiquetado, agrupación, anomalía, imágenes similares. También puedes incrustar imágenes, video frames, cosas así. Así que con la sintaxis, tomamos cada una de las frases que tenemos, la convertimos en una incrustación vector. Y el diseño funciona mucho como esto, donde tomamos la pregunta, la convertimos en una incrustación. Así que eso es un montón de números. Y luego usamos una base de datos vectorial para encontrar frases que son similares a lo que la persona preguntó. Y luego tomo esa frase y digo, dame las dos frases antes de que hablé sobre eso y dos frases después de que hablé sobre eso. Y luego digo, está bien, ese 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. Así que la pregunta aquí es, ¿estamos jodidos? Cada persona a la que me he acercado hoy dice, ¿de qué trata tu charla? Y, oh, ¿nos quitan el trabajo, verdad? ¿Sabes? No lo sé. Realmente no lo sé. Y no creo que nadie realmente lo sepa, pero no creo que sí. AI nos da un impulso masivo en lo que somos capaces de hacer. Y la pregunta realmente es, ¿qué somos capaces de hacer ahora que tenemos esto? No soy un tipo inteligente y aquí estoy en el escenario hablando de similitud de coseno. Es increíble para mí que ahora tenga estos nuevos superpoderes para hacer ese tipo de cosas. La tecnología no va a quedarse quieta. Va a ser menos sobre centrar divs y más sobre empujar los límites en las cosas que somos capaces de hacer. Somos solucionadores de problemas. Nuestras herramientas siempre están cambiando. Y este es otro ejemplo de que nuestras herramientas están cambiando. Así que te animo, no lo ignores. Y mantente alerta. Gracias.