Construyamos a K.I.T.T. Con JavaScript

Bien. Así que, hola a todos. Es genial estar aquí en JS Nation y terminar el primer día con una charla sobre mi último proyecto paralelo donde intento recrear el que quizás sea el coche más icónico en la historia de la televisión en JavaScript. Pero antes de empezar, tengo una pequeña cosa. Sí, tengo muchas demostraciones en mis charlas y sí, se les permite aplaudir. Y les digo esto porque soy suizo y en Suiza realmente, realmente nos gusta obtener permiso antes de mostrar emociones. Y si no tienen ganas de aplaudir, pueden ir a yay.nico.de. Veo que ya está funcionando y pueden lanzar algunos fuegos artificiales en mi diapositiva. Construí esto para JS Nation. Nunca lo he probado antes, pero hey, ¿qué podría salir mal? Sí.

Pero ¿quién soy yo? Mi nombre es Nico. Soy un desarrollador frontend o como aprendimos hoy, soy un frontend. Quiero decir, no puedo apagarlo. No puedo apagarlo si es demasiado. Sí. También soy parte del programa de Google Developer Experts en tecnologías web y también en machine learning e IA, lo que significa que intento cerrar la brecha entre la IA en el dispositivo y el navegador.

Y sí, comencemos con una pregunta muy simple. ¿Quién es KIT? Entonces, KIT es la abreviatura de Knight Industries 2000 y es este coche avanzado impulsado por IA de la serie de televisión de los años 80 Knight Rider. Toda la serie trata sobre Michael Knight que intenta resolver casos, lucha contra los malos y KIT que es esta supercomputadora, una IA sofisticada que lo ayuda. Así que tal vez también deberíamos replantear la pregunta, ¿qué es KIT? Y en los años 80 era bastante simple. KIT es solo una computadora muy avanzada haciendo cosas de computadora muy avanzadas. Simple.

Luego aprendimos sobre machine learning, sobre redes neuronales artificiales, así que tal vez KIT es solo una gran red neuronal artificial que aprende cambiando las conexiones entre esas neuronas. Pero ahora en la era de la IA, tengo una explicación más simple. Así que tal vez KIT es solo un agente de IA que conecta diferentes servicios con un proceso de toma de decisiones. Suena bien. Vamos a construirlo. Si quieres construirlo, primero necesitas profundizar en las características. ¿Cuáles son las características que hacen que KIT sea humano? En primer lugar, podemos hablar con él en lenguaje natural. Es inteligente, por lo que puede procesar información. Tiene personalidad, no es solo una máquina sin alma. Tiene una historia, así que Michael Knight y KIT, vivieron tantas aventuras, por lo que pueden hablar sobre toda esa historia. Y por último, pero no menos importante, tiene un cuerpo, por lo que tiene una forma física con la que podemos interactuar. Ahora, si quieres construir eso, y soy un ingeniero frontend, así que naturalmente quiero ver hasta dónde puedo llegar en el navegador. Si quieres construir eso, necesitamos mucho machine learning. Y como aprendimos hoy, en realidad podemos usar machine learning en el navegador. Y hay una biblioteca que uso bastante. Ya hemos oído hablar de eso y es Transformers.js.

Luego podemos definir una tarea y también el modelo que queremos usar. Y luego podemos básicamente pasar cualquier cosa a través de este pipe, lo ejecutará a través del modelo, y obtendremos la salida de vuelta. Así que el tipo de entrada y el tipo de salida dependen mucho del uso.

Ahora, ¿cómo podemos usar Transformers.js para resolver nuestro primer problema? Hay dos modelos que podemos usar. El primero es Whisper. Entonces Whisper nos permite transcribir cualquier palabra hablada en texto. Y por otro lado, puedes usar Kokoro. Y Kokoro.

js es solo una pequeña capa de abstracción sobre Transformers.js donde podemos pasar cualquier texto, definir una voz, y devolverá el blob de audio.

Así que veamos cómo funciona eso. Tengo este pequeño pipeline aquí. Así que ahora puedo decir, por ejemplo, hola a todos, estoy ahora mismo en JS Nation, y es una conferencia increíble. Esperemos que esto funcione. Hola a todos, estoy ahora mismo en JS Nation, y es una conferencia increíble. ¿Escuchan los... gracias. ¿Escuchan los fuegos artificiales todo el tiempo? Bien, eso es molesto. No es así. Bien, eso funciona, pero en realidad no es muy inteligente.

Entonces, ¿cómo podemos agregar inteligencia a ese pipeline? Ahora, lo más cercano que tenemos a inteligencia son los LLMs. Así que tenemos grandes modelos de lenguaje, podemos agregar algo de texto, y generará algo de texto. Hay bastantes LLMs que podemos usar ahora mismo. Está toda la gama de GPD 4, Cloud y Gemini. Así que tenemos modelos cerrados que se ejecutan en algunas granjas de servidores que podemos usar a través de una API o usando su interfaz de texto. También hay modelos más pequeños como el Gemini Nano o GPD 4 o Mini que son lo suficientemente pequeños como para que podamos ejecutarlos en el dispositivo, pero todos están cerrados.

Así que no se nos permite usarlos de la manera que queremos. También hay otra gama de modelos. Y esos son modelos abiertos. Y abierto significa que los pesos entrenados y también la arquitectura son de código abierto. Así que se nos permite usarlos en nuestros propios sistemas. Está Meta con Lama, está Microsoft con Phi, está Google con la serie Gemma. Y también hay pequeños modelos abiertos como el Phi 3, Gemma 3, Quent 3. Y hay incluso modelos de código abierto. Así que está el pequeño LM 2, que es una acción o hasta donde sé el único modelo realmente de código abierto porque también los datos de entrenamiento son de código abierto que Hugging Face usó para entrenar ese modelo.

también los datos de entrenamiento son de código abierto que Hugging Face usó para entrenar ese modelo. Ahora con modelos que son lo suficientemente pequeños como para que podamos ejecutarlos en el dispositivo y también se nos permite usarlos en el dispositivo, también podemos ejecutarlos en el navegador. Hay una biblioteca que uso para eso llamada LLM. Con el LLM, básicamente podemos crear un motor, podemos luego crear una nueva conversación, donde pasamos un array de mensajes.

Y luego podemos esperar la respuesta completa, o podemos usar la transmisión, sus tokens se añaden a la respuesta a medida que se generan. Intentemos eso. Así que tenemos el mismo pipeline que antes. Pero tenemos este nuevo paso de procesamiento. Hola, mi nombre es Nico. Y estamos ahora mismo en JS Nation. Es una conferencia increíble y estamos en el escenario ahora mismo. Así que, ¿podrías presentarte rápidamente a la audiencia? Hola, es bueno estar aquí. Cara sonriente con ojos sonrientes. Nuestra nación es increíble. Espero conectarme con todos los asistentes increíbles.

Micrófono. Bien, eso funciona. Gracias. Pero al final, solo creamos otro chatbot aleatorio, porque ahora estamos hablando con algún Jemma LLM aleatorio de Google. Y quería hablar con Kit, el coche de Knight Rider. Entonces, ¿qué podríamos hacer al respecto? Lo más fácil para ajustar o personalizar la salida de un modelo de IA es usar la ingeniería de prompts. Y la ingeniería de prompts es el proceso de elaborar prompts de entrada precisos y efectivos para optimizar la salida de los modelos de IA.

¿Qué significa eso en nuestro caso? Así que aquí tengo el mismo pipeline que antes, pero ahora tengo un prompt de sistema diferente. Y en el prompt de sistema, le digo quién es. Así que es Kit de Knight Rider. Le doy contexto, está hablando con Nico. También tengo un resumen del tono de Kit. Y también tengo límites, porque todas esas sonrisas, asteriscos y todo eso, no funcionan bien en esa configuración. Así que intentemos lo mismo con un prompt de sistema diferente.

Es una conferencia increíble, y estamos en el escenario ahora mismo. ¿Podrías presentarte rápidamente a la audiencia? Por supuesto, Nico, vamos a refinar los datos de la presentación. ¿Debería optimizar la entrega para un máximo compromiso? Y como ves, es exactamente el mismo pipeline, exactamente el mismo modelo que antes. Pero se está comportando de manera muy, muy diferente.

Bien, hablemos de recuerdos. Porque a menudo, si interactuamos entre nosotros, hablamos de cosas que sucedieron en nuestro pasado. Y en el caso de Kit, hubo muchas, hubo temporadas serias, episodios llenos de recuerdos de cosas que vivieron. Y mi idea era, ¿cómo puedo hablar con Kit sobre esos recuerdos?

Y las próximas diapositivas me llevaron por un gran agujero de conejo, pero traté de mantenerlo lo más corto posible. Así que si alguna vez te encuentras en la misma situación, tal vez quieras ir a Reddit, habrá un subreddit de tu programa favorito. Y habrá alguien que tenga un enlace a un sitio web que tenga todos los guiones de ese programa.

Luego necesitas escribir un pequeño script de Playwright que extraiga todos los guiones en texto plano. Luego descubrirás que esos guiones fueron escritos en tiempos anteriores a la World Wide Web. Así que necesitas escribir tu propio analizador que analice el guion en JSON estructurado.

Y ahora tienes tus 6,275 escenas en 432 actos y 84 episodios que puedes agregar a tu base de datos. Y en mi caso, estoy usando el IndexDB, que es una base de datos de documentos que vive en el navegador. Ahora, el otro problema que tengo es que tengo una pregunta sobre algo que sucedió en el pasado, y ahora quiero que mi LLM, Kit, robot, lo que sea, sepa a qué escena me refiero.

Y la solución a eso se llama una base de datos vectorial.

El problema es que IndexDB no es per se una base de datos vectorial, porque en mi IndexDB, básicamente solo tengo toda la escena y algunos metadatos. Pero al final, cada base de datos es una base de datos vectorial si almacenas la cosa, el texto y su representación vectorial. Ahora, ¿qué es una representación vectorial? Básicamente es solo un número o un arreglo de números, y eso es generado por otro modelo de IA, y eso se llama o es la categoría de modelos de extracción de características.

En mi caso, estoy usando el viejo miniLM L6v2, que está entrenado para la similitud semántica. Así que lo que hace es que puedo pasar cualquier texto al extractor, y al final devolverá un arreglo de números. El otro problema que tengo es que teóricamente podría poner todo el episodio o toda la escena en un solo embedding, pero eso no es muy bueno para la búsqueda vectorial porque el embedding estará muy diluido. Así que la solución que se me ocurrió es que estaba usando un pequeño resumidor LLM, y eso significa que tengo este modelo de lenguaje grande donde primero doy el texto completo, toda la escena, como entrada.

Luego averiguo cuántas tramas espero en esa escena. Luego tengo un breve prompt del sistema. Tengo un prompt de usuario donde le digo al LLM, oye, encuentra las líneas argumentales principales, un máximo de tramas máximas en esa escena. Luego también soy muy estricto con el formato de salida, por lo que debería devolver solo un arreglo de cadenas y un arreglo de resúmenes.

Funcionó. Me tomó un par de días. También se colgó un par de veces, pero pude hacerlo en mi MacBook. Al final, terminé teniendo algo como esto. Ahora tengo un arreglo de resúmenes para cada escena y un arreglo de embeddings para esos resúmenes. Eso también me permitió crear esta función de búsqueda vectorial, donde tengo la pregunta, la consulta como entrada.

Luego crearé el embedding vectorial de esa consulta. Luego pasaré por el index DB, y calcularé la similitud de coseno entre la consulta y el resumen. Luego devolveré las cuatro escenas con la mayor similitud entre el resumen y la consulta. El otro problema es que ahora de alguna manera necesito llamar a esta función de búsqueda vectorial en mi pipeline.

La solución a eso es un concepto llamado tool calling. El concepto detrás de tool calling es que un LLM no puede ejecutar una función, pero la aplicación a su alrededor sí puede. El LLM puede detectar cuándo se debe llamar a una función. Luego puede generar una salida estructurada, podría ser texto, XML, JSON, o lo que sea. La aplicación puede entonces ejecutar la función, devolver la salida al LLM, y el LLM puede entonces trabajar con esa salida.

Existen bibliotecas para hacer eso, pero quería ver hasta dónde puedo llegar solo con texto básico de entrada y salida. Creé esta pequeña función de tool calling donde tengo un system prompt muy grande. En el system prompt, le digo al LLM, si quieres llamar a una función, puedes usar este fragmento XML llamado function call con el nombre de la función con la consulta. Luego tengo algunas instrucciones, algunos ejemplos, y básicamente solo tengo la consulta del usuario como la pregunta.

Así que, veamos cómo funciona eso. Vamos a kit.niko.dev. Luego podemos activarlo. Ahí vamos. Y luego podemos preguntar algo básico. Así que, cada vez que presiono la barra espaciadora, escuchará. Buenos días, Kit, ¿cómo estás? Buenos días, Niko. Estoy bien, gracias. ¿Cómo puedo asistirte hoy? Así que, esa es una entrada bastante básica. Pero intentemos algo más especial. Por ejemplo, preguntemos, escucha, ¿recuerdas la conexión entre Sonny y el intercambio de gas venenoso mortal y sucedió algo trágico en ese entonces?

Necesito buscar el episodio para proporcionarte la información correcta. Recuerdo que ocurrió un incidente trágico durante un intercambio de gas venenoso entre Sonny y Fidel. Un bote se descargó accidentalmente, matando a un transeúnte llamado Laurie. Ese evento dejó a Michael profundamente afectado. Bien. Así que, lo que ves aquí es... Gracias. Así que, lo que ves aquí es que tengo un system prompt muy grande. En el system prompt, tengo todas las herramientas.

Primero que nada, tengo KidStone y todo eso, y luego tengo una lista de todas las herramientas que puede usar. Ahora tengo mi pregunta, y luego genera este pequeño fragmento XML. Mi aplicación luego analizará la respuesta, descubrirá, oh, hay una función de búsqueda de episodios, necesito llamar a eso. Luego devolverá la salida de esa función como un nuevo mensaje en la conversación, y Kid puede usar eso para generar una respuesta con todo el contexto que necesita para realmente hacer eso.

Bien. Así que, eso funciona. Pero también quería que tuviera un cuerpo. Entonces, en la serie, Kid es un Pontiac Firebird, y los Pontiac Firebirds, comienzan alrededor de 20,000 francos. Aunque no lo creas, eso no está en mi presupuesto para proyectos secundarios, y además, no soy mecánico, así que no tenía idea de cómo lidiar con un coche real. Pero todavía soy un Kid de corazón, así que pude crear este pequeño Lego Kid. Ahora la pregunta es, ¿cómo puedo comunicarme con mi coche a través del navegador? Y eso, puedo hacerlo usando una API llamada Bluetooth, y esa es una API de navegador que me permite comunicarme con dispositivos de baja energía Bluetooth.

En el coche, básicamente tengo una pequeña placa de microcontrolador Arduino que está conectada a esta tira de LED, a las ruedas, y luego tengo dos baterías, una para las ruedas y otra para la placa de microcontrolador. Y en la placa, luego tengo un pequeño script en C++ que expone un servidor BLE con un servicio BLE con una característica BLE, y esa característica tiene dos bytes. Y un byte controla la velocidad de las ruedas en el lado izquierdo, y un byte controla la velocidad de las ruedas en el lado derecho. En mi aplicación, luego puedo conectarme al dispositivo, conectarme a la característica, cambiar el valor de esos bytes, lo que luego cambia la velocidad del coche.

Bien, me queda un minuto, así que veamos cómo funciona eso. Vamos a encenderlo. Ahora ves que está parpadeando, y puedo conectarme a eso. Ahí vamos. Hermoso. Y ahora puedo usar las teclas de flecha para controlarlo. Pero usar las teclas de flecha es bastante aburrido, y quería ver si podía implementar eso en mi flujo de trabajo de LLM. Así que vamos a comprobar eso. Hey Kit, creo que necesitamos salir de aquí. ¿Podrías ir a toda velocidad hacia adelante? Estoy acelerando a toda velocidad hacia adelante para sacarnos de aquí. De hecho, añadí un pequeño tiempo de espera, así que no quería que se fuera por el precipicio al final. Pero ese es un ejemplo muy simple, y podría haber logrado eso simplemente con reconocimiento de patrones básico donde estoy escuchando palabras como toda velocidad y adelante, pero quería tener un proceso de razonamiento real.

Así que lo que puedo hacer a continuación es, por ejemplo, decir, Hey Kit, tenemos un problema. Hay un bloqueo en la carretera frente a nosotros, y en el lado derecho, hay un gran río, así que tampoco podemos ir a la derecha. ¿Qué deberíamos hacer a continuación? Necesito navegar alrededor del bloqueo. Intentemos girar a la izquierda para encontrar una ruta alternativa. Bien. Como puedes ver, hay un proceso de razonamiento real donde intenta averiguar la mejor herramienta para resolver el problema.

Así que vamos a concluir. En realidad, pudimos crear Kit en puro JavaScript. Escucha y habla usando Jesper y Kokoro. Es inteligente usando el LLM Jemma2. Tiene personalidad usando solo ingeniería de prompts. Tenía una historia usando todas las escenas de la serie Knight Rider y agentic rack. Y finalmente tiene un cuerpo usando el Bluetooth y la llamada de herramientas. Así que ahora sabemos lo que hice, cómo lo hice, pero la verdadera pregunta es ¿por qué? ¿Por qué debería pasar horas tratando de recrear un coche de una serie que ni siquiera vi cuando era niño? Y la solución es bastante simple, simplemente porque es divertido. Es divertido aprender cosas. Es divertido construir cosas. Y ahora con LLMs, simplemente tenemos una herramienta más. Tenemos una herramienta más en nuestra caja de herramientas que podemos usar para construir cosas increíbles.

herramienta más. Tenemos una herramienta más en nuestra caja de herramientas que podemos usar para construir cosas increíbles.

Así que eso fue todo de mi parte. Muchas gracias por su atención. La pregunta es, ¿añadiste alguna otra sanitización de entrada o mecanismos de seguridad que no hayas comentado ya? Sí. Sí.

La cosa es, con los modelos pequeños, si usas modelos grandes como Gemini o con un Claude o JetGPT, entonces toda la estructura, si le dices al LLM, oye, llama a esta función una vez y si tienes los resultados, entonces llámala de nuevo. Una cosa que a menudo sucede cuando tengo un modelo pequeño es que primero llamaría a la función, luego obtendría el resultado de vuelta y luego intentará llamar a la misma función de nuevo. No tengo idea de por qué, simplemente porque de alguna manera está en el contexto que tiene cosas que tiene que ejecutar esta función. Por lo tanto, tuve que tener una lista de funciones y los parámetros que ya llamé. Así que si es la misma función con los mismos parámetros, no la llames de nuevo y terminas al final. Ese es un problema interesante para eso. Sí. Encontré que es una cosa extraña pasar de los modelos grandes donde, y luego la llamada de función está integrada en eso. No tienes que tener tu propia cosa de XML para eso tampoco. Eso es cierto, sí. Y están construidos para hacer eso con, y luego retrocedemos a estos modelos pequeños y tienes mucho más trabajo que hacer. Sí. Pero tienes que hacer eso cuando estás en la web. Y también el formato, si debería usar JSON o XML o solo texto, fue muy- Tienes que preguntar sobre eso. Sí. La cosa es, lo intenté con JSON antes, pero si quieres forzar a un LLM a siempre producir la misma estructura JSON solo en un prompt del sistema, entonces eso funciona a veces en el primer prompt, pero ya en el segundo prompt, se olvidará de eso o producirá JSON inválido. Así que para mí, descubrí que era más fácil tener solo esos bloques XML.

Así que, por lo tanto, usé XML. Justo. Justo.

¿Cuánta ayuda de LLM tuviste para trabajar con los LLMs? Ninguna. ¿Ninguna? No. Admitámoslo, todos usan LLMs para obtener algunas nuevas ideas, para averiguar qué está mal. Así que, por supuesto, uso mucho los LLMs, pero no es código borrado. Lo escribí yo mismo. Creo que eso es importante. Y cuando estás aprendiendo algo, especialmente cuando quieres ir y hablar sobre ello frente a un grupo de personas, no puedes simplemente dejar que un LLM escriba todo el código por ti, porque entonces no sabes lo que hizo. Ese es todo el punto. Quería entender cómo funciona la llamada de funciones o la llamada de herramientas. Por eso me metí en toda la estructura XML y todo eso. Muy bien.

Tenemos la última pregunta aquí. Voy a intervenir. Si quisieras acelerar las respuestas, ¿cuáles serían los pasos? ¿Tienes más trabajo por hacer para lograr eso? Bueno, un problema es que ahora mismo tengo todos esos pasos, primero paso uno, paso dos, paso tres. Y si pudiera dividir la respuesta y comenzar a generar, tal vez después de la primera oración, ya podría comenzar a generar el texto a voz. Eso sería más rápido. O tal vez hablaría con Joshua, porque su ejemplo fue mucho más rápido que el mío. Así que necesito profundizar en su código y ver qué magia estaba usando. Y también tenía un MacBook más nuevo. Ese es un gran punto. El poder ayuda, ¿no? Sí. Sí. Justo. Muy bien. Bueno, con demostraciones increíbles y una manera fantástica de terminar aquí en la pista de residencia, demos a Nico otro gran aplauso. Gracias.