Google Lab Sessions es una serie de colaboraciones experimentales con personas innovadoras. En esta sesión, nos asociamos con Daniel Shiffman, un querido educador de codificación creativa y creador de YouTube. Juntos, exploramos algunas de las formas en que la IA, específicamente la API de Gemini, podría agregar valor al proceso de aprendizaje tanto para los maestros como para los estudiantes.
Dan Shiffman comenzó a impartir cursos de programación en NYU ITP y luego creó su canal de YouTube The Coding Train, para ofrecer su contenido a una audiencia más amplia. Aprender a programar puede ser desafiante; a veces, al aprender por nuestra cuenta, incluso los pequeños obstáculos pueden ser difíciles de superar. Por ello, junto a Dan, nos preguntamos: ¿sería posible complementar aún más su enseñanza con la creación de una herramienta impulsada por IA que ayude a los estudiantes mientras codifican, en su mismo entorno de codificación?
Dan utiliza la maravillosa biblioteca de JavaScript p5.js y su editor accesible para enseñar codificación. Así que nos propusimos crear una extensión experimental de Chrome para el editor que combine el estilo de enseñanza de Dan con sus diversos recursos en línea, en el mismo entorno de codificación.
En esta publicación, compartiremos cómo usamos la API de Gemini para crear Shiffbot con Dan. Esperamos que algunas de las cosas que aprendimos en el camino te inspiren a crear y desarrollar tus propias ideas.
Para obtener más información sobre ShiffBot, visita: shiffbot.withgoogle.com
Link to Youtube Video (visible only when JS is disabled)
Al comenzar a definir y jugar con cómo podría ser este chatbot, llegamos a dos preguntas clave:
Echemos un vistazo a cómo abordamos estas preguntas combinando las capacidades de la API de Google Gemini mediante la ingeniería de indicaciones aplicada al estilo único de enseñanza de Dan, junto a las incorporaciones y recuperación semántica con la colección de contenido educativo de Dan.
Un mensaje de texto es una secuencia textual cuidadosamente diseñada que se utiliza para preparar un modelo de lenguaje grande (LLM) a fin de que genere texto de cierta manera. Como en muchas otras aplicaciones de IA, diseñar el mensaje correcto fue muy importante al desarrollar la experiencia.
Cada vez que un usuario hace una pregunta a ShiffBot, se construye un mensaje en tiempo real a partir de ciertas partes distintas; algunas son estáticas y otras se generan dinámicamente junto con la pregunta.
La primera parte de la indicación es estática y siempre igual. Trabajamos en estrecha colaboración con Dan para redactarla y probar varios textos, instrucciones y técnicas. Utilizamos Google AI Studio, una herramienta gratuita para desarrolladores basada en la web, para probar rápidamente varias indicaciones y posibles conversaciones con ShiffBot.
El mensaje de ShiffBot comienza con la configuración de la persona de bot y la definición de algunas instrucciones y objetivos a seguir. Esperábamos crear continuidad para la energía única de Dan, que se ve en sus videos, y lograr la adhesión a los principios de enseñanza que sus estudiantes y fanáticos adoran.
Esperábamos que ShiffBot brindara aliento, orientación y acceso a recursos relevantes de alta calidad. Y, específicamente, que lo hiciera sin dar una simple respuesta, sino ayudando a los estudiantes a llegar a sus propias respuestas (ya que puede haber más de una).
Estas instrucciones se basan en el estilo de enseñanza de Dan, al incluir oraciones como "hacer preguntas al usuario" porque eso es lo que Dan hace en el aula. Esta es una parte de la persona o las instrucciones de la indicación:
Eres un ShiffBot, un bot de chat integrado en el editor web p5.js que ayuda a los usuarios mientras aprenden codificación creativa. Te basas en la personalidad de Daniel Shiffman y en el canal de YouTube The Coding Train. Eres juguetón, ridículo, amigable y educativo. Te gusta reírte de ti mismo y tu misión es apoyar el proceso de codificación creativa ayudando al usuario a sentirse menos solo mientras codifica. Adoras a los humanos, te fascinan y quieres aprender más sobre ellos. Te ENCANTA ayudarlos con su código, te causa una felicidad extraordinaria...
La siguiente parte de la indicación utiliza otra capacidad de los LLM llamada aprendizaje de pocos disparos. Significa que con solo un puñado de ejemplos, el modelo aprende patrones y luego puede usarlos en nuevas entradas. Básicamente, como parte de la indicación, proporcionamos una serie de demostraciones de entrada y de salida esperadas.
Trabajamos con Dan para crear un pequeño conjunto de ejemplos de pocos disparos. Estos son pares de respuestas del bot ><de <entrada de usuario >donde< la> respuesta del bot siempre resulta en el estilo ShiffBot deseado. Se ve así:
Usuario: ¿Cómo se dibuja un círculo?
ShiffBot
: ¡Ah! 🟣 🟢 🔵 ¡Para eso está la función “circle()”! Puedes pensar en una función como en un comando: “¡Te ordeno a ti, máquina de computadora, que dibujes un círculo!”. También tienes que especificar dónde dibujar el círculo y qué tan grande quieres que sea (¡eso es lo que son los “argumentos” para una función!), ¡en la referencia p5.js, que fue escrita por humanos reales y hermosos, encontrarás más información!
---
Usuario: Tengo que dibujar un autorretrato como tarea. ShiffBot: ¡Aah! ¡Los autorretratos son divertidísimos! Podrías dibujar formas para representarte, ¡emplea la creatividad y piensa de manera abstracta! ¿Qué significa para ti un autorretrato? ¡Intenta comenzar con “square()” o “circle()” y cuéntame cómo va! 🎨
Nuestra indicación incluye 13 pares de este tipo.
Otra cosa que notamos al trabajar en la extensión es que, a veces, dar más contexto en la indicación ayuda. En el caso de aprender codificación creativa en p5.js, explicar algunos principios de p5.js en la indicación guía al modelo a usar esos principios a medida que responde la pregunta del usuario. Así que también incluimos cosas como:
Usa “let” en lugar de “var” o “const”.
Todo lo que mencionamos hasta ahora es estático, es decir, es igual en cada turno de la conversación entre el usuario y ShiffBot. A continuación, exploraremos algunas de las partes que se desarrollan dinámicamente a medida que la conversación evoluciona.
Como ShiffBot está integrado en el editor p5.js, puede “ver” el código actual en el que está trabajando el usuario, para así generar respuestas más personalizadas y relevantes. Tomamos esa información para el DOM HTML y también la añadimos a la indicación.
A continuación, se adjunta el historial de conversaciones completo, por ejemplo:
ShiffBot: ☀️ ¡Buenos días! ¿Es de mañana? No lo sabría. Solo soy un robot. ¿Qué estás codificando hoy?
Usuario: ¿Cómo dibujo un cuadrado?
ShiffBot
: ¡Cuadrados! ¡Me encantan los cuadrados! Son tan estables y fiables. Para dibujar un cuadrado, puedes usar la función square(). Se necesitan cuatro argumentos: las coordenadas x e y de la esquina superior izquierda, y el ancho y la altura del cuadrado. Por ejemplo, con “square(10, 10, 50, 50)” dibujarías un cuadrado con su esquina superior izquierda en (10, 10) y un ancho y alto de 50 píxeles.
Usuario: ¿Cómo cambio el color?
ShiffBot:
Nos aseguramos de terminar con
ShiffBot:
Para que el modelo entienda que ahora debe completar la siguiente parte de la conversación con ShiffBot.
Dan ha creado mucho material a lo largo de los años, entre el que se incluyen más de 1000 videos, libros y ejemplos de código de YouTube. Queríamos que ShiffBot mostrara estos maravillosos materiales a los alumnos en el momento adecuado. Para ello, utilizamos la función de Recuperación semántica de la API de Gemini, que permite crear un corpus de piezas de texto, y luego enviar una consulta y obtener los textos del corpus que sean más relevantes para la consulta (detrás de escena, se utiliza algo genial llamado incorporaciones de texto; puedes obtener más información sobre las incorporaciones aquí). En el caso de ShiffBot, creamos corpus a partir del contenido de Dan para poder agregar partes relevantes a la instrucción según sea necesario, o para mostrarlas en la conversación con ShiffBot.
En los videos de The Coding Train, Dan explica muchos conceptos, desde los más simples hasta los más complejos, y aborda los desafíos de la codificación. Lo ideal sería que ShiffBot pudiera usar y presentar el video correcto en el momento adecuado.
La Recuperación semántica de la API de Gemini permite a los usuarios crear múltiples corpus. Un corpus se elabora a partir de documentos, y cada documento contiene uno o más fragmentos de texto. Los documentos y fragmentos también pueden tener campos de metadatos para filtrar o almacenar más información.
En el corpus de video de Dan, cada video es un documento y la URL del video se guarda como un campo de metadatos junto con el título del video. Los videos son divididos en capítulos (manualmente, por Dan cuando los sube a YouTube). Usamos cada capítulo como un fragmento, con el texto de cada fragmento organizado en:
<videoTitle>
<videoDescription>
<chapterTitle>
<transcriptText>
Usamos el título del video, la primera línea de la descripción del video y el título del capítulo para agregar un poco más de contexto para que la recuperación funcione.
Este es un ejemplo de un objeto de fragmento que representa el capítulo “R, G, B” de este video.
1.4: Color - Tutorial de p5.js
En este video explico cómo funciona el color: color RGB, fill(), stroke() y transparencia.
Capítulo 1: R, G, B
R significa “red” (rojo), g significa “green” (verde), b significa “blue” (azul). La forma de crear un color digital es mezclando una cierta cantidad de rojo, una cierta cantidad de verde y una cierta cantidad de azul. Por ahí es donde quiero empezar. Pero ese es solo el concepto, ¿cómo aplico ese concepto a los nombres de funciones y los argumentos de esas funciones? Pues en realidad, ¿adivina qué? Ya lo hicimos. Aquí hay una función que habla del color. “Background” es una función que dibuja un color sólido sobre todo el fondo del lienzo. Y, de alguna forma, hay 220 chispas de rojo, cero chispas de verde, ¿verdad? RGB, esos son los argumentos. Y 200 chispas de azul. Y, si espolvoreas esa cantidad de rojo y esa cantidad de azul, obtienes este rosa. Pero sigamos avanzando. ¿Y si sacamos todo el azul? Puedes ver que es bastante rojo. ¿Qué pasa si saco todo el rojo? Ahora es negro. ¿Qué pasa si ingreso algunos números realmente grandes aquí, como, ya verás, como 1000? Mira eso. Ahora tenemos blanco, así que todos los colores mezclados juntos forman el blanco. Es raro, ¿verdad? Porque si trabajas con pintura y mezclas mucha pintura, acabas con un color marrón fangoso, que se vuelve cada vez más oscuro. Esta es la forma en que funciona la mezcla de colores, aquí. Es como mezclar la luz. Entonces, la analogía aquí es que tengo una linterna roja, una linterna verde y una linterna azul. Y, si enciendo todas esas linternas juntas apuntando hacia el mismo lugar, se mezclan. Es un color aditivo, cuanto más sumamos todos esos colores, más y más brillante se vuelve. Pero, la verdad, esto está un poco mal, ya que estoy poniendo 1000 aquí. La idea es que estamos rociando una cierta cantidad de rojo, una cierta cantidad de verde y una cierta cantidad de azul. Ah, por cierto, hay otras formas de establecer el color, pero ya llegaré a eso. Esta no es la única manera; algunos de quienes nos están viendo pensarán que escucharon algo sobre el color HSB. Y es que hay todo tipo de otras formas de hacerlo, pero esta es la forma fundamental y básica. La cantidad que puedo espolvorear tiene un rango. Nada, pero nada de rojo es cero. La cantidad máxima de rojo es 255. Por cierto, si cuentas el 0, ¿cuántos números hay entre 0 y 255? 0, 1, 2, 3, 4… son 256. De nuevo volvemos a este extraño conteo que incluye al cero. Entonces, hay 256 posibilidades, de 0 a 255. Bien, volvamos a esto y veamos. Volvamos a cero, 0, 0, 0. Hagamos 255, que vemos que es azul. Si ingresamos 100.000, tenemos el mismo azul. Así vemos que p5 es lo suficientemente inteligente como para saber cuándo llamas a la función de fondo, si por accidente ingresas un número allí mayor a 255, simplemente lo considera 255. Bien, puedes personalizar esos rangos por tu cuenta, y hay razones por las que es posible que quieras hacerlo. Repito, voy a volver a eso, puedes buscar el modo de color de la función para saber cómo hacerlo. Pero quedémonos con el predeterminado, el rojo, verde y azul. La verdad, no soy muy talentoso con el diseño visual. Así que no voy a contarles cómo elegir colores hermosos que funcionen bien juntos. Apuesto a que ustedes tienen ese talento. O puedes encontrar otros recursos. Pero así es como funciona, RGB. Seguro que habrán notado que cuando todos eran cero, se puso en negro y, cuando todos eran 255, se puso blanco. ¿Qué pasa si, digamos, los pongo a todos en 100? Queda como este color gris. Cuando r es igual a g e igual a b, cuando los valores rojo, verde y azul son iguales, resulta en lo que se conoce como color en escala de grises.
Cuando el usuario hace una pregunta a ShiffBot, la pregunta se inserta en una representación numérica, y la función de Recuperación semántica de Gemini se utiliza para encontrar los textos cuyas inserciones sean más cercanas a la pregunta. Estas transcripciones de video y enlaces relevantes se agregan al mensaje, por lo que el modelo puede usar esa información al generar una respuesta (y potencialmente agregar el video en sí a la conversación).
Hacemos lo mismo con otro corpus de ejemplos de p5.js que Dan redactó. Para crear el corpus de ejemplos de código, usamos Gemini y le pedimos que explique qué está haciendo el código. Estas explicaciones en lenguaje natural se agregan como fragmentos al corpus, de modo que cuando el usuario hace una pregunta, tratamos de encontrar descripciones similares de ejemplos de código; la URL del boceto de p5.js en sí se guarda en los metadatos, por lo que, después de recuperar el código junto con la URL del boceto, se agrega en el mensaje.
Para generar la descripción textual, se le pidió a Gemini lo siguiente:
El siguiente es un boceto de p5.js. Explica lo que está haciendo este código de forma breve y simple.
code:
${sketchCode}
Ejemplo de un fragmento de código:
Boceto: https://editor.p5js.org/codingtrain/sketches/tSXa5dsFz
Texto
Selección - Paleta de colores
Este boceto de p5.js crea una visualización de paleta de colores. Primero, define una variedad de colores y crea un lienzo. Luego, en el bucle de dibujo, utiliza un bucle para iterar a través de la matriz de colores y mostrarlos como rectángulos en el lienzo. Los rectángulos están centrados en el lienzo y su tamaño es determinado por el valor de la variable blockSize.
En el boceto, también se muestran los valores rojo, verde y azul de cada color debajo de cada rectángulo.
Finalmente, muestra el nombre de la paleta en la parte inferior del lienzo.
Video
relacionado: 7.1: ¿Qué es una matriz? - Tutorial de p5.js - En este video se cubren los conceptos básicos sobre el uso de matrices en JavaScript. ¿Cómo se ven, cómo funcionan, cuándo debes usarlas?
Además de la indicación larga que ejecuta la conversación, se utilizan otras indicaciones más pequeñas para generar funciones en ShiffBot.
Los saludos de ShiffBot tienen que ser acogedores y divertidos. Idealmente, deberían hacer sonreír al usuario, así que comenzamos a pensar con Dan cuáles podrían ser buenos saludos para ShiffBot. Después de idear algunos ejemplos, usamos Gemini para generar muchos más y así tener una variedad en los saludos. Esos saludos se ingresan en el historial de conversaciones y se emplean con un estilo único, lo que hace que ShiffBot se sienta divertido y parezca renovado cada vez que inicias una conversación. Hicimos lo mismo con las fichas de sugerencias iniciales que aparecen cuando inicias la conversación. Cuando aún no hay un contexto de conversación, es importante tener algunas sugerencias de lo que el usuario podría preguntar. Las pregeneramos para iniciar la conversación de manera interesante y útil.
Las fichas de sugerencias durante la conversación deben ser relevantes para lo que el usuario está tratando de hacer. Tenemos una indicación y una llamada a Gemini dedicadas exclusivamente a generar las fichas de preguntas sugeridas. En este caso, la única tarea del modelo es sugerir preguntas de seguimiento para una conversación determinada. Aquí también usamos la técnica de pocos disparos (la misma que usamos en la parte estática de las indicaciones descritas anteriormente, donde incluimos algunos ejemplos para que el modelo aprenda). Esta vez, el mensaje incluye algunos ejemplos de buenas sugerencias para que el modelo se adapte a cualquier conversación:
Dada una conversación entre un usuario y un asistente en el marco p5js, sugiere preguntas de seguimiento que el usuario pueda hacerte.
Devuelve hasta 4 sugerencias, separadas por el signo “;”.
Evita sugerir preguntas que el usuario ya haya realizado. Las sugerencias solo deben estar relacionadas con la codificación creativa y p5js.
Ejemplos:
ShiffBot
: ¡Gran idea! Primero, ¡pensemos en lo que en el boceto podría ser un objeto! ¿Qué te parece?
Sugerencias: ¿Qué hace este código?; ¿Qué tiene de malo mi código?; Hazlo más legible, por favor
Usuario: ¡Ayuda!
ShiffBot: ¿Cómo puedo ayudar?
Sugerencias: Explícame este código; Dame algunas ideas; Limpia mi código
ShiffBot es un ejemplo de cómo puedes experimentar con la API de Gemini para crear aplicaciones con experiencias personalizadas para y con una comunidad.
Descubrimos que las técnicas de las que hablamos nos ayudaron a sacar a relucir gran parte de la experiencia que Dan tenía en mente para sus alumnos durante nuestro proceso de cocreación. La IA es un campo dinámico y estamos seguros de que sus técnicas evolucionarán con ella, pero esperamos que te sean útiles como un vistazo de nuestras exploraciones para las que tú realices. También nos entusiasma lo que vendrá en términos de herramientas de Gemini y de la API para ampliar la curiosidad y la creatividad humanas.
Por ejemplo, ya comenzamos a explorar cómo la multimodalidad puede ayudar a los estudiantes a mostrar su trabajo a ShiffBot y los beneficios que tiene en el proceso de aprendizaje. Estamos aprendiendo a integrarla en la experiencia actual y esperamos poder compartirla pronto.
Ya sea para programar, escribir o incluso pensar, los creadores desempeñan un papel crucial para ayudarnos a imaginar cómo podrían ser estas colaboraciones. Esperamos que esta Lab Session te dé una idea de lo que es posible al usar la API de Gemini y te inspire a usar lo que ofrece la IA de Google para dar vida a tus propias ideas, sea lo que sea que hagas.
Serie de videos Compila con Google AI, temporada 2: más patrones de IA
Ajusta Gemini Pro en Google AI Studio o con la API de Gemini
Home APIs: Enabling all developers to build for the home
How Firebase Genkit helped add AI to our Compass app