Construyendo Aplicaciones AI para la Web

Rate this content
Bookmark

Hoy en día, cada desarrollador está utilizando LLMs en diferentes formas y figuras. Muchos productos han introducido capacidades AI incorporadas, y en esta masterclass aprenderás cómo construir tu propia aplicación AI. No se necesita experiencia en la construcción de LLMs o en el aprendizaje automático. En cambio, utilizaremos tecnologías web como JavaScript, React y GraphQL que ya conoces y amas.

98 min
18 Dec, 2023

AI Generated Video Summary

La masterclass de hoy se centra en AI para desarrolladores front-end y construcción con Lengtchain JS. Los participantes aprenderán cómo crear una aplicación MyGPT personalizada, explorarán la ingeniería de prompts y la recuperación, y utilizarán conjuntos de datos locales. La masterclass cubre la creación de una función de manejo, convirtiendo un área de texto en un componente controlado, y renderizando un componente de mensaje en la pantalla. Los participantes también aprenderán sobre plantillas de prompts, prompts de pocos disparos, y la configuración de una base de datos vectorial. La masterclass concluye con información sobre cómo mantenerse en contacto y acceder a la versión beta de un curso basado en la masterclass.

1. Introducción a la Masterclass

Short description:

La masterclass de hoy será IA para desarrolladores front-end. Nos centraremos más en el código y en escribir código. Puedes usar un asistente de código si quieres.

Así que la masterclass de hoy será IA para desarrolladores front-end. Tengo un par de suposiciones y simplemente asumo que son ciertas. Incluso si no lo son, simplemente hágamelo saber en el chat. Supongo que todos ustedes han usado gpt o Bart o cualquier tipo de herramienta de IA para sugerencias ya. Probablemente también supongo que has estado usando Github Copilot o tal vez un asistente de código diferente también. Estas son cosas que no vamos a cubrir. Hice una masterclass una vez, una muy básica, donde entré en detalle sobre estas herramientas también, pero hoy nos centraremos un poco más en el código. Así que estaremos escribiendo código. Puedes usar un asistente de código si quieres. Estoy usando una computadora de trabajo y no se me permite usar Github Copilot. Así que para esta, no estaré usando un editor que tenga algunos asistentes de código en él. Así que estoy un poco celoso del resto de ustedes que probablemente puedan usar un asistente de código.

2. Construyendo con Lengtchain JS

Short description:

Hoy estaremos construyendo usando Lengtchain JS, una herramienta para interactuar con modelos y usarlos en tus propias aplicaciones. Puedes crear fácilmente tu próxima startup o agregar una nueva característica a proyectos existentes. Consulta el repositorio de GitHub para la aplicación de inicio y los ejercicios. Estaremos construyendo una aplicación MyGPT personalizada, explorando la ingeniería de prompts, la recuperación y el uso de conjuntos de datos locales. Al final de la masterclass, tendrás una aplicación que puede usar un modelo de open AI y tu propio conjunto de datos. Clona el repositorio, sigue las instrucciones en el readme y regístrate para una prueba gratuita de la clave de la API de open AI.

Así que hoy estaremos construyendo usando Lengtchain JS. Probablemente hayas oído hablar de Lengtchain. Tal vez lo hayas probado. Tal vez has usado la versión de Python. También hay una versión de JavaScript que tiene prácticamente todas las cosas que la versión de Python tiene. Pero para los desarrolladores de JavaScript o frontend o TypeScript, es una herramienta bastante útil.

Es principalmente una herramienta para interactuar con modelos y usar modelos en tus propias aplicaciones. Si quieres construir tu propio modelo o tal vez quieres construir un servicio de backend de IA muy complejo, no recomendaría necesariamente Lengtchain JS. Creo que es realmente bueno para hacer las cosas que estaremos haciendo hoy. Puedes usarlo bastante fácilmente para crear tu próxima startup o crear una nueva característica en los proyectos existentes que tienes.

Aquí tienes un código QR que lleva al repositorio de GitHub de hoy. También publicaré el chat en el canal porque probablemente estás viendo en tu ordenador por lo que no podrás usar el código QR. Este es el enlace al repositorio de GitHub. Y en el repositorio de GitHub puedes encontrar una aplicación de inicio. Así que esto es solo una aplicación de React y Tailwind. Nada más que algo de estilo. Y también puedes encontrar un conjunto de ejercicios. Estaremos haciendo en estas dos horas y media a tres horas. Podríamos tomar algunos descansos en medio o tal vez terminamos temprano. Es la primera vez que hago esta masterclass. Así que siempre es bueno averiguar cuán rápido podemos pasar por todos los diferentes ejercicios. Así que asegúrate de abrir el repositorio y luego verás...

Así que este es el repositorio. Tiene la aplicación de inicio. Tiene un readme y también tiene el resultado final de lo que estaremos construyendo hoy. Así que hoy estaremos construyendo esta aplicación MyGPT personalizada y puedes usarla para hacer preguntas contra open AI, pero también puedes cambiarla por modelos de diferentes proveedores. Y basándonos en nuestras preguntas obtendremos una respuesta. Vamos a intentar construirlo como una interfaz Jetlike. Vamos a repasar un poco la ingeniería de prompts, mirar varios prompts de disparo o unos pocos prompts de disparo. También estaremos haciendo algo de recuperación. Así que vamos a intentar tomar nuestro conjunto de data local y colocarlo directamente, o en realidad no colocarlo en un modelo, pero usar el contexto de un conjunto de data local para que el modelo produzca mejores respuestas para nosotros. Y luego tenemos todo el tiempo para preguntas o para jugar con diferentes cosas. Así que al final de esta masterclass, tendrás una aplicación como esta, que puedes usar con un modelo de open AI y luego también con tu propio conjunto de data. Y basándonos en el tipo de, solo tenemos como dos horas y media a tres horas, por lo que el número de cosas que podemos hacer es bastante limitado, pero creo que te dará una buena sensación de lo que puedes construir y también algunas ideas sobre los fundamentos para empezar a construir tu propia cosa encima de esto. Empezar algo siempre es la parte difícil. Así que espero poder ayudarte un poco con eso hoy. Así que asegúrate de revisar el repositorio, y luego vamos a tomar un par de minutos para que todos ejecuten la aplicación de inicio. Es un repositorio, siéntete libre de iniciarlo o hacerle un fork en caso de que quieras. Siempre es útil.

Así que una vez que tengas el repositorio, vas a tener que clonarlo a tu máquina local. A mí me gusta usar VS code. Así que lo único que necesitas hacer para clonar esto a tu máquina es ejecutar git clone, y luego pegar la dirección del repositorio. Y después de esto, obtendrás algo similar a lo que tengo en mi VS code aquí, que es la aplicación de inicio, y luego también el readme. Y quiero que vayan al readme, y luego sigan las instrucciones aquí para configurarlo. También hay un prerrequisito donde vas a necesitar una clave de la API de open AI. Y puedes registrarte para una prueba gratuita. Así que te darán un par de dólares en créditos que puedes usar. Y esto debería ser más que suficiente para el ejercicio de hoy, necesitas ir aquí. Y luego necesitas hacer login en la parte superior. Y esto creará una clave de la API de open AI.

3. Preparando la Masterclass

Short description:

Para participar en la masterclass, necesitarás una clave API de OpenAI. Si no quieres registrarte para obtener una, puedes usar otra clave LLM. El costo es bastante barato, alrededor de un dólar como máximo. Vamos a utilizar un modelo predeterminado con 1k tokens, que cuesta mucho menos que un centavo. También obtendrás créditos gratuitos al principio. Si tienes algún problema con la configuración, puedes enviarme un mensaje para obtener acceso temporal. Una vez que tengas tu clave API, sigue las instrucciones en el README para ejecutar la aplicación. Asegúrate de instalar las dependencias y agregar tu clave OpenAI al archivo .environment.

Y podrás usar esta clave API para ejecutar los ejemplos que vamos a construir más tarde. Entonces, si no quieres registrarte para obtener una clave API de OpenAI, necesitarás algo más. Hay una lista completa de LLMs que podrías usar. Así que si tienes una clave para cualquiera de estos, siéntete libre de usarla.

Sí, si te registraste para una cuenta antes, es posible que necesites agregar algunos créditos. Te van a dar créditos gratuitos durante el primer mes más o menos. Así que podría ser que expiren. Aunque es bastante barato. Así que al preparar los materiales para la masterclass, creo que me costó como un dólar como máximo. Porque si miras lo que vamos a hacer es, bueno, dependiendo del modelo que uses, vamos a usar este modelo por defecto, 1k tokens. Y voy a explicarte más qué son los tokens. Solo te cuesta como, bueno, muy lejos de un centavo. Y vamos a utilizar un modelo abandonado, que es aún más barato. Así que debería ser bastante barato. Si pones como cinco dólares allí, deberías ser capaz de hacer todo lo que estamos haciendo hoy. Obtendrás algo de crédito gratuito al principio, que debería ser como cinco dólares. Y está disponible durante el primer mes, 30 días más o menos, algo así. Así que debería ser suficiente para pasar por estos ejercicios. Si no puedes configurar esto, no dudes en enviarme un mensaje privado aquí y entonces veré si puedo crear una clave API para ti. Pero entonces solo podrás usar esto durante la próxima hora más o menos. Y luego vamos a hacer esto durante las próximas dos horas porque voy a eliminarla una vez que completemos la masterclass.

Entonces, si tienes tu clave API, no tienes que hacer nada todavía. Solo asegúrate de ejecutar la API, de ejecutar la aplicación como se define en el README. Así que asegúrate de obtener tu clave API y luego ejecuta la aplicación de esta manera. Y en el primer ejercicio, que vamos a hacer juntos, hay un lugar donde deberías poner tu clave API. Así que déjame ir también a mi editor de código VS. Está justo aquí. Así que asumo que tú. Clonaste el repositorio. Y una vez que clonaste el repositorio, hay un directorio llamado my GPT. Así que puedes verlo allí, necesitas ejecutar npm install. Esto instalará las dependencias para el proyecto o al menos las dependencias que necesitamos al principio, que es como VTest, creo también, porque vamos a agregar algunas pruebas en medio. Y también Tailwind, porque estoy usando Tailwind para el estilo, porque generalmente no me gusta escribir CSS. Si no estás familiarizado con Vt, es un, cómo se dice, es como un paquete de construcción para aplicaciones. Es un poco como crear una aplicación react. Pero entonces para una serie de frameworks front-end de JavaScript, incluyendo React, no estoy seguro si quieres llamar a React un framework front-end, pero eso depende de ti. Necesitas instalar las dependencias y luego puedes hacer npm run dev, también puedes usar yarn, lo que prefieras. Me quedo con la escuela y me quedo con npm. Y deberías estar viendo esto. Así que tiene un título, my GPT. Tiene un cuadro de texto y un botón de enviar. Es bastante similar a lo que parece gpt, o tal vez algunas de las otras interfaces GPT que has estado usando. Y esto lo estamos usando Lengtjn, voy a mantener los documentos abiertos aquí, por si acaso podría necesitarlo más tarde. Así que este es nuestro punto de partida de la aplicación. Vas a obtener algunas manos en el chat o en algún otro lugar si tienes problemas para obtener esta pantalla.

Bueno, entonces creo que estamos todos bien. Así que una vez que tengas la pantalla, podemos continuar yendo al primer ejercicio. Y esto incluye instalar Lengtjn, agregar la clave OpenAI a un archivo .environment en el raíz de la aplicación Vita, lo que significa que tendrás que crear un archivo .environment aquí, que creo que también no tengo, así que puedes hacer .environment. Y luego aquí deberías agregar tu clave OpenAI, que comienza con SK y luego algo más. Así que esto es lo primero que haces, instalas Lengtjn, y luego necesitas poner tu OpenAI clave aquí.

4. Creando Lengtjn.js y Generando Respuestas

Short description:

Para crear un nuevo archivo llamado util/Lengtjn.js, importa la interfaz OpenAI desde Lengtjn e inicializa una conexión a un LLM. El modelo predeterminado para OpenAI es GPT 3.5. Luego, crea una función llamada generar respuesta que toma una pregunta como entrada y devuelve una respuesta. Lengtjn te permite conectarte a varios proveedores de LLM, como OpenAI, Google e IBM Watson. Puedes cambiar el proveedor según sea necesario. Si estás interesado en entrenar tu propio modelo, considera LLM Ops o Watson X. También cubriremos la afinación y la recuperación utilizando tu propio conjunto de datos. Para el primer ejercicio, crea una prueba utilizando v-test.

Una vez que hayas hecho eso, hay un par de pasos que debes seguir, y el código para esto está todo aquí. Y vamos a hacer esto juntos y luego te dejaré crear una prueba para esto tú mismo.

Entonces necesitamos crear un nuevo archivo llamado util/Lengtjn.js. Así que estoy usando TypeScript aquí. Eres más que bienvenido a usar JavaScript. No necesitamos muchos tipos que necesitamos, y lo genial de Vita es que es capaz de analizar tanto TypeScript como JavaScript. Así que aunque estoy usando TypeScript, siéntete libre de usar JavaScript si eso es lo que prefieres. Si no estás familiarizado con TypeScript, tampoco necesitas estresarte, el número de tipos es muy limitado, así que no tienes que preocuparte demasiado por la necesidad de crear tipos o hacer cosas complicadas en TypeScript.

Así que necesitaré crear un nuevo archivo, que llamo util/Lengtjn.js. Y aquí, estoy haciendo dos cosas. Estoy importando una interfaz OpenAI desde Lengtjn. Como mencioné, Lengtjn es capaz de conectarse a todo tipo de proveedores de LLM, como OpenAI, pero también Google, IBM Watson, cualquier tipo de cosa que quieras. Y luego necesitamos inicializar una conexión a un LLM. Y el modelo predeterminado para OpenAI será GPT 3.5. Más adelante, vamos a jugar con diferentes modelos. Si quieres usar un modelo diferente desde el principio, siéntete libre de hacerlo, pero voy a quedarme con el predeterminado por ahora. Así que vamos a inicializar OpenAI, y luego creamos una conexión que podemos usar para interactuar con el modelo. Y luego la segunda cosa que voy a hacer es que voy a crear una pequeña función, que llamo generar respuesta, que toma una pregunta. Y puedes ver que es el único TypeScript que tengo aquí porque todo lo demás está siendo inferido por TypeScript automáticamente. Así que tengo una función llamada generar respuesta. Tengo una pregunta, que es una cadena. Y luego tengo un retorno, que es respuesta2. Así que voy a usar esta función de Lengtjn, donde predigo la respuesta a una pregunta usando mi modelo LLM.

Así que una de las razones por las que me gusta trabajar con Lengtjn, especialmente para proyectos iniciales, donde estás tratando de averiguar cuál es la mejor manera de hacer las cosas, es que estas funciones como predecir y otras funciones que usaremos más adelante. Realmente no les importa qué proveedor tengas para tus LLMs. Así que en teoría, todo el código que estaremos construyendo hoy, podrás cambiar OpenAI por IBM Watson, con Google Vertex, con algunos de los otros proveedores de código abierto, como Mistral. Así que es como mantener las cosas bien abiertas para ti y eres capaz de conectarte usando tu propio proveedor de LLM de elección. Así que esta es mi primera función. La llamo generar respuesta y debería devolver una respuesta, que es una cadena porque esto está todo tipado en OpenAI. Lengtjn se asegurará de que mi respuesta sea una cadena. Así que, sí, es una buena pregunta si puedes entrenar tu propio modelo. Realmente no puedes hacerlo a través de Lengtjn. Es mejor hacerlo a través de una herramienta especializada para esto. Así que deberías buscar algo llamado LLM Ops. Es como DevOps, pero entonces LLM Ops. Yo personalmente, trabajo en IBM después de que mi startup fue adquirida. IBM tiene herramientas para hacer esto que se llaman Watson X. Estoy bastante seguro de que OpenAI tiene una forma de afinar tu modelo y también puedes construir tu propio modelo desde cero. Pero para eso, probablemente necesites experiencia como científico de data o ingeniero de data. Así que tal vez eres uno y eso sería genial. Eso sería genial. Pero probablemente sea más razonable que estés buscando afinar, lo que significa tomar un modelo existente y seguir entrenándolo usando otras data, que son tus propias data, lo que llamamos afinación. O al final de la masterclass y uno de los ejercicios finales. Estaremos haciendo algo de recuperación o básicamente recuperación aumentada. Y esto significa que tomaremos nuestro propio conjunto de data y junto con una pregunta al LLM, vamos a proporcionar partes de nuestras data y vamos a ser inteligentes sobre qué partes de las data vamos a enviar. Y luego esperamos que el modelo pueda generar respuestas correctas para nosotros basadas en las data que proporcionas. Más sobre eso más adelante. Así que para el primer ejercicio, deberías tener esta función y lo que quiero que hagas. Para probarlo es crear una prueba. Y para esto, necesitamos usar v-test.

5. Escribiendo la v-test

Short description:

v-test es una pequeña prueba para ver si nuestra pregunta coincide con una respuesta. Es una buena forma de interactuar con nuestra función recién creada. Crea un archivo llamado blank-chain test.ts y pega el código. Ejecuta npm run test para ejecutar la prueba. Cambia la pregunta y la respuesta por las tuyas. Tómate unos minutos para hacer funcionar la prueba. Si ya has terminado, prueba diferentes respuestas. La prueba puede fallar debido a diferentes respuestas de LM. Es una buena forma de probar nuestra función antes de implementarla en la aplicación. Stuart, por favor, vuelve a subir.

v-test es bastante similar a otras bibliotecas de testing que podrías haber utilizado. Y vamos a escribir una pequeña prueba y en esta prueba, vamos a ver si nuestra pregunta coincide con una respuesta. Es una prueba un poco tonta porque en teoría, el LLM podría generar una respuesta diferente cada vez, pero es una buena forma de ver cómo interactuar con nuestra función recién creada. Así que voy a crear otro archivo llamado blank-chain test.ts y aquí, voy a pegar este código. Y ahora para ejecutar esto, necesito ejecutar npm run test. Y esto ejecutará esta solución de prueba. Tal vez quieras hacer un console log aquí. Para responder. Tal vez quieras ver a qué se resuelve. Y por supuesto, necesitas cambiar esta pregunta por tu propia pregunta. Así que mira esto así y luego necesitas cambiar algo aquí por la respuesta real. Así que veo que Ricardo en el chat tiene un buen ejemplo que podrás probar. Realmente bastante inteligente porque puedes ver los resultados en el chat. Así que si realmente quieres probar esto, podrás probarlo y realmente bastante inteligente porque para este, el LLM probablemente te dará la misma respuesta cada vez o al menos la respuesta debería contener para cualquiera como un valor numérico o escrito.

Así que vamos a tomar un par de minutos para hacer que esta prueba funcione para ti. Es una buena forma de probar el funcionamiento de nuestra función generar respuesta. Aquí. Y necesitas. Escribir algo aquí. Y luego siéntete libre de usar el console log entre todo configurado correctamente, deberías ser capaz de obtener un valor para la respuesta y luego deberías ser capaz de coincidirlo en esta prueba aquí mismo. Como dije, es una prueba un poco tonta, pero es una buena forma de probar nuestra función antes de implementarla en la aplicación que tenemos. Así que vamos a tomar cinco minutos para hacer el ejercicio número uno. Si ya lo terminaste, siéntete libre de jugar enviando diferentes respuestas y ver si ya hay algunas mejoras que podrías ser capaz de hacer. Así que esta es la función que creamos y esta es la prueba que creamos. Y también tengo este pequeño console log. Vi algunos buenos ejemplos. Así que intenta poner algo allí que no sea demasiado vago. Creo que vi un ejercicio de matemáticas. ¿Cuál es el resultado de dos más dos? Y si ejecutamos esta prueba haciendo NPM run test. Deberíamos ser capaces de ver. Un error de afirmación porque tenemos el resultado de 2 más 2 es 4. Y aquí tenemos dicho es el resultado real de nuestro LM, lo que significa que. ¿Cuál es el numérico? Así que tal vez esto nos dará un. Déjame ver cómo lo hizo alguien en el chat. Ver. ¿Cuánto es dos más dos? Tal vez eso nos dé un mejor resultado. Y esto dice que dos más dos es cuatro. Y eso es lo que estoy diciendo. Siempre puedes obtener diferentes resultados del LM. Así que por eso podría llevar algún tiempo. Si volviera a ejecutar esto. Podría fallar en algún momento porque ahora está diciendo que dos más dos es igual a cuatro. Así que podría ser un problema porque dice que 2 más 2 es. Podría fallar en algún momento porque ahora está diciendo que 2 más 2 es igual a 4. Así que siempre es un poco de ajuste y por eso también dije que podría no ser la mejor prueba para ejecutar porque cada vez el LM podría tener una mirada en el. Podría generar una respuesta ligeramente diferente para ti.

6. Prueba Tonta y Ejemplos de Pruebas

Short description:

Es una prueba tonta, pero una buena manera de probar la función generar respuesta. Puedes hacer todo tipo de pruebas como nulo, falsy, longitud específica, contención de cadena o objeto. Es solo un ejemplo un poco tonto, pero hay personas más inteligentes intentando hacer reg access. Gracias por compartir eso.

Entonces, es un poco de una prueba tonta, pero es una buena manera de probar nuestra función generar respuesta. Y Stuart, por favor, vuelve a subir. Necesitas verificar dos veces. Tienes los créditos de prueba gratis. En tu OpenAI. Sí, hay todo tipo de cosas que puedes hacer. La prueba de velocidad es bastante similar a. Autotesting frameworks que podrías estar usando. Entonces, hay todo tipo de cosas que puedes hacer, así que podemos hacer. Ahora estoy usando certificados. Entonces, puedes hacer todas estas cosas, como ser nulo, ser falsy, tener una longitud específica. También podemos decir. Puedes hacer algunas otras cosas como que contenga una cadena. Contiene un objeto. Hay todo tipo de pruebas que puedes escribir. Como dije, es solo un ejemplo un poco tonto. Y veo que hay personas más inteligentes que yo intentando hacer reg access. Eso es realmente genial. Gracias por compartir eso. Y también puedes. Eso es realmente genial. Gracias por compartir eso.

7. Ejercicio 1 y Pasando al Ejercicio 2

Short description:

Aumenta los tiempos de espera para la prueba para evitar posibles retrasos en la resolución de la respuesta. OpenAI sirve su intel desde los EE.UU., por lo que aumentar el tiempo de espera puede ayudar. ¿Alguna pregunta sobre el ejercicio 1? Pasemos al segundo ejercicio.

Entonces este fue el ejercicio número uno. Veo alguna actividad en el chat acerca de un tiempo de espera. Entonces, sí, es posible que quieras aumentar los tiempos de espera para la prueba. Eso es algo que podrías ser capaz de hacer, así que lo que puedes hacer aquí, puedes poner un. Valor de tiempo de espera como este, creo, o debería ser. Sí, debería ser así. Porque tal vez tomará mucho tiempo para que la respuesta se resuelva. También podría depender de tu ubicación. Creo que OpenAI intenta. Sirve adecuadamente su intel desde los EE.UU., en lugar de Europa o Asia o dondequiera que puedas estar. Así que aumentar el tiempo de espera de esta manera podría ser una solución a tu problema. Significa decir esto, responde a una pregunta, creo que aquí hay una llamada a la función, y después de eso puedes pasar un objeto y cualquier objeto, puedes establecer un tiempo de espera. Y esto asegurará que no veas ningún tiempo de espera de la API, ya que podría tardar demasiado en resolverse. OK, ¿alguna pregunta sobre el ejercicio 1 hasta ahora? Si no, entonces podemos continuar al segundo ejercicio donde vamos a añadir nuestro.

8. Ejercicio 2: Configuración del Estado y Función Controladora

Short description:

En el ejercicio número dos, utilizaremos una nueva función en el componente de la aplicación para configurar las variables de estado y crear una función controladora. El objetivo es convertir el área de texto en un componente controlado y enviar el formulario para llamar a la función controladora. Tendrás de 10 a 15 minutos para completar estos pasos. Consulta el archivo readme para obtener orientación. Una vez hecho esto, revisaremos la solución y responderemos a cualquier pregunta.

Entonces vamos a ver el ejercicio número dos, y este es el ejercicio en el que utilizaremos nuestra nueva función y la conectaremos en los componentes de la aplicación. Así que el componente de la aplicación es nuestro componente principal. Déjame detener mi prueba y ejecutar. La aplicación de nuevo. Parece que esto es así que el componente de la aplicación es nuestro componente principal. Es básicamente todo esto. Y lo que quiero hacer aquí, quiero configurar algunas variables de estado primero. Voy a utilizar variables de estado realmente simples. Es una aplicación sencilla que estamos construyendo, así que no quiero involucrarme demasiado en la gestión del estado o en la configuración del uso del contexto o en el uso de algo como X state. Así que vamos a utilizar un estado simple como este.

Necesitamos importar o generar la función de respuesta. Y luego necesitamos crear una función controladora. Y con esta función controladora, podemos utilizarla para llamarla cada vez que enviemos los elementos del formulario. Y luego podríamos querer convertir esto también en un componente controlado, porque quiero asegurarme de que el componente del área de texto está controlado. Así que cada vez que empiece a escribir, muestra la variable de estado de la pregunta en lugar del valor que escribo directamente allí.

Así que para el ejercicio número dos, voy a daros, no sé, digamos de 10 a 15 minutos para crear una función controladora, crear un estado básico. Y luego ser capaz de llamar a nuestra nueva función cada vez que enviéis los elementos del formulario que tenemos en nuestro componente de la aplicación. El paso básico que necesitas hacer aquí es uno, importar el elemento del formulario. Importar la función para llamar a OpenAI. Dos, necesitas crear algunas variables de estado. Y quiero tenerlas en el formato en el que tendrías una pregunta. Que es una cadena. Y también la respuesta, que es una cadena. Así que este debería ser tu objeto de estado. Y luego tres, quiero que crees una función controladora para llamar a la función de OpenAI. Y luego finalmente cuatro, bueno cuatro y cinco. Así que cuatro, convierte el área de texto en un componente controlado. Y luego cinco, quiero enviar el formulario y llamar a la función controladora. Así que estos son los pasos básicos que debes seguir para el ejercicio número dos. Como dije, vamos a, bueno, empecemos por tomar 10 minutos y luego vamos a ver si necesitamos más tiempo. Estos son los pasos básicos que necesitas seguir. Y también si vas al archivo readme, hay algunos puntos que te orientarán en la dirección correcta. Así que 10 minutos a partir de ahora para el ejercicio número dos. Vamos a ver la solución entonces y si hay alguna pregunta puedes ver qué está pasando. Así que si vamos al archivo readme, tenemos el ejercicio número dos. Así que queremos ser capaces de utilizar el cuadro de mensajes en la aplicación para enviar la pregunta y mostrar la respuesta en la pantalla. Así que lo que queremos hacer, voy a reorganizar mis pantallas. Así que lo que queremos hacer es que queremos ser capaces de utilizar este cuadro de mensajes para enviar la pregunta. Así que desde nuestro componente de la aplicación, necesitamos llamar a la nueva función que hemos creado. Para esto, voy a copiar y pegar estas importaciones. Así que necesitamos importar useState de React ya que necesitamos tener algunas variables de estado y luego necesitamos importar la función que acabamos de crear. Así que básicamente es sólo esta parte. Luego necesitamos crear algunas variables de estado y voy a crear unas realmente básicas. Voy a decir const. De hecho, las tengo en el archivo readme, así que vamos a utilizar el archivo readme. Así que estas son las dos variables de estado que voy a crear. La primera es una variable llamada pregunta. Así que esta se utilizará para hacer que el área de texto sea un componente controlado. Puedes ver que esto es sólo una cadena vacía. Y la segunda es la variable de estado del resultado.

9. Creando la Función Controladora y el Componente Controlado

Short description:

Esta sección explica cómo crear una función controladora en TypeScript. La función controladora permite acciones adicionales y manejo de errores. Establece la pregunta y genera la respuesta utilizando la entrada. La respuesta generada se almacena entonces en los resultados. El área de texto se transforma en un componente controlado y se envía el formulario, llamando a la función controladora.

Así que esto tendrá dos valores porque es un objeto. Tiene la pregunta que se hizo. Así que no la pregunta que estamos escribiendo, sino la pregunta real que se hizo. Y su respuesta. Como puedes ver, estamos usando TypeScript. Pero incluso si no estás familiarizado con TypeScript, debido a la forma en que creamos estos valores, TypeScript es capaz de ver que el objeto de la variable de resultado es algo con dos campos que son ambas cadenas porque estas son cadenas vacías. Y esto asegurará que TypeScript sea capaz de averiguar cómo se ve este tipo.

Así que esto es importar el estado, importar la función y crear las variables de estado. Luego quiero crear una función controladora. Porque no quiero llamar a la función para generar mi respuesta directamente, quiero ser capaz de hacer algunas cosas aquí, como enviar cosas. Y también quiero ser capaz de hacer tal vez un try-catch allí o averiguar algo que salió mal. Así que normalmente nunca llamo a esta función directamente. Siempre creo una función controladora. Así que lo que voy a hacer aquí, primero voy a hacer set results, donde voy a establecer la pregunta para que sea igual a la entrada de esta función. Y luego para los resultados, aún no puedo hacer nada, pero sólo estoy poniendo esta cadena vacía aquí. Lo siento, poniendo esta cadena vacía aquí porque tal vez quiero hacer una nueva pregunta más tarde, así que quiero que este valor sea más claro. Y lo que luego quiero hacer, quiero... Hacer un try de mi respuesta real, así que puedo hacer const generated answer. ¿Es esta función que tenemos... Déjame hacer esto más pequeño para que puedas ver más. Déjame hacer esto más pequeño para que puedas ver más. Junto con mi entrada. Porque esta función controladora, siempre que la envíe desde mi formulario, quiero ser capaz de usar su valor, así. Esta es mi respuesta generada. Puedo hacer una pequeña comprobación. Así que digamos si existe la respuesta generada. Tal vez debería hacer los nombres diferentes porque esto ya es un poco confuso. Quiero hacer set results. Quiero... No sé. Sólo extender esto porque ya tenía una pregunta. Y tal vez hacer que la respuesta debería ser......respuesta generada así. Veamos qué está pasando aquí. Tipo promesa. ¿Por qué es esto una promesa? Porque necesito esperar. Porque esta es una función asíncrona. Lo que voy a hacer es esperar. Y ahora debería estar todo bien. Por supuesto quiero hacer un catch. No voy a hacer demasiado aquí. Sólo hacer un console log. Para mi error. Para mi error. Que es esto. Vale. Así que esta debería ser mi función controladora. Pongo esto en el chat, para que todos puedan conseguirlo. Así que esta es mi función controladora. Y luego lo siguiente que voy a hacer es......convertir el área de texto en un componente controlado. Y enviar el formulario y llamar a la función controladora.

10. Convirtiendo el Área de Texto en un Componente Controlado

Short description:

Quiero convertir mi área de texto en un componente controlado. Cada vez que escribo, quiero establecer la pregunta. Esto es lo que llamamos el componente controlado. El valor del área de texto está controlado por una variable de estado.

Así que para esto voy a desplazarme hacia abajo. Para hacer estas cosas aquí. Así que quiero convertir mi área de texto en un componente controlado. Y la razón por la que necesito hacer esto es porque......si guardo esto y voy aquí. Puedo escribir aquí, pero no está pasando nada. Porque tengo un valor establecido en lo que sea. Así que lo que quiero hacer es cada vez que empiece a escribir......y esto es probablemente como en......cambio. Y aquí tendría un evento. Y cada vez que escribo, quiero......hacer algo como establecer la pregunta. Es event.target.value. Y luego quiero establecer......la pregunta aquí también. Así que esto es lo que llamamos el componente controlado. Esto es lo que llamamos el componente controlado porque el valor del área de texto......está controlado por una variable de estado. Así que cada vez que escribo aquí quiero actualizar este valor. Veamos si esto funciona como se espera. Esto es genial. Así que este valor ahora no es sólo el valor de mi componente. También es el valor de mi variable de estado llamada pregunta. Así que podemos deshacernos de esto.

11. Manejo de la Presentación del Formulario y Renderización

Short description:

Cada vez que envío mi formulario, quiero que el evento onSubmit llame a mi función de manejo, handleSubmitQuestion, y guarde el último valor para la pregunta. Lo probé y está funcionando como se esperaba. Ahora voy a ingresar al formulario y me hará una pregunta. Después de eso, pasaremos a la pregunta número 3, que implica renderizar todo en la pantalla. No duden en hacer cualquier pregunta o compartir cualquier error que hayan encontrado. Vamos a tomar cinco minutos para implementar la pregunta número 3, que es crear un componente de mensaje y renderizarlo en la pantalla.

Lo siguiente que quiero hacer es cada vez que envío mi formulario......déjame ver. Siempre odio estas cosas de una línea. Siempre que vayamos a hacer una actualización aquí......el formulario tendrá un evento onSubmit que puedo usar. Siempre necesito usar un prevent default......porque el formulario podría querer refrescar mi página......lo cual es algo que no quiero porque estamos construyendo una aplicación de una sola página. Y luego quiero que llame a mi......función de manejo, handleSubmitQuestion......y quiero que tome este valor, que es el último valor que tengo para la pregunta. Y luego guardar esto. Así que déjame ver si funciona antes de poner esto en el chat. Y para ver si funciona, voy a echar un vistazo a mi pestaña de red. Así que voy a poner una pregunta aquí. Entonces, ¿cuál es la capital de los Países Bajos......que es el país en el que estoy? Va a hacer esta pregunta......y dice que la capital de los Países Bajos es Ámsterdam. Así que mi pregunta se disparó. Ahora lo único que necesito comprobar es ver si se está poniendo en mi respuesta aquí. Así que voy a hacer una alerta de consola aleatoria o algo así. Donde digo......resultados......resultados......respuesta. Aquí......así console.log. Ve aquí. Ve a......aquí y luego puedes ver que la capital de los Países Bajos es Ámsterdam. Así que todo está funcionando como se esperaba. Así que déjame poner......esto aquí. Y lo que necesitarías es esto. Hagamos nuestro chat grupal. Y mi mensaje sigue siendo largo......así que voy a enviar el formulario. Y el otro por separado. Así que esto es formulario. Y esta es el área de texto. Para un formulario. Que quiero enviar a mi mensaje. Estoy enviando una solicitud a open.ai. Y luego debería poder descartar eso. Pero lo añadiremos más tarde. Así que ahora estoy llegando al sitio goto de mi aplicación. Donde voy a ingresar el formulario. Y me va a preguntar, ¿por qué se va xly? Y devuelve una respuesta. Y la pregunta número 3, que es la siguiente. En esta pregunta vamos a renderizar todo esto en la pantalla. ¿Tenemos alguna pregunta? ¿Todos pueden ejecutar este código? Bien, eso es genial. ¿Alguien tiene algún error? Escribiste tu propio código, eso es genial. La mejor manera de aprender es simplemente escribiendo lo que quieras. Solo estoy proporcionando algunos manejadores para hacer las cosas más simples. Pero siéntete libre de escribir tu propio código de hecho. Vi a alguien preguntando sobre los ganchos del foro de React. Eso también es genial, usa lo que funcione para ti. Solo proporciono algunos manejadores para facilitarlo. Solo proporciono algunos manejadores para hacer las cosas más simples. Pero al final, la mejor manera de aprender es escribiendo tu propio código. Vamos a tomar... No sé, hagamos... cinco minutos para implementar la pregunta número 3. Es una bastante sencilla. Solo se trata de crear un componente de mensaje y renderizarlo en la pantalla.

12. Creación del Componente de Mensaje y Uso de Tailwind

Short description:

Para mostrar la respuesta y la pregunta en la pantalla, cree un nuevo componente llamado components-message-message.tsx. Organice su código creando directorios para componentes y mensajes. Las props de TypeScript se utilizan para definir las props de entrada de este componente. El componente utiliza Tailwind para el estilo, y para obtener más información sobre Tailwind, puede consultar el canal de YouTube para explicaciones y tutoriales.

Sí, esa es una buena pregunta en el chat. El LLM va a hacer lo que el LLM piense que debería hacer. En uno de los ejercicios de seguimiento, vamos a echar un vistazo al few-shot prompting. Básicamente hay diferentes formas de hacer prompting. El few-shot prompting es un método de prompting donde daríamos un par de ejemplos al LLM. Entonces el LLM imitará el tipo de respuesta que queremos. No hay lógica en el LLM. Si preguntas qué es 2 más 2, obtienes una respuesta corta, pero si escribes 2 más 2, obtienes una larga. Si vas a escribir un script para hacer esto cada cinco segundos o así, o cada cinco minutos, y echar un vistazo a los resultados más tarde, verás que no hay lógica en ello. Por eso existe algo llamado few-shot prompting, que implementaremos más tarde en uno de los ejercicios posteriores. Allí, vamos a dar ejemplos de un formato en el que el LLM debería responder. Esto debería cubrir este caso de uso. Esa es una buena pregunta. Gracias por hacerla. Ejercicio número tres. Este fue bastante sencillo. El primer paso es crear un nuevo componente. Este es el componente de mensaje que utilizaremos para mostrar la respuesta y la pregunta en la pantalla. Déjame tomar esto, copiarlo, y luego voy a crear un nuevo archivo, al que voy a llamar components-message-message.tsx. También estoy creando un par de nuevos directorios, el de componentes, que contendrá todos mis componentes, y luego también creo un directorio de mensajes, que contiene mis componentes de mensajes. Parece un poco excesivo crear este directorio, pero en realidad es útil si empiezas a construir sobre lo que tienes aquí, y más adelante, quieres tener archivos de prueba, o quizás archivos de estilo, tal vez algunas utilidades o ayudantes. Por eso siempre trato de entrar en el estado mental de crear todos estos directorios. También puedes ver que estoy creando algunas props de TypeScript. Estas son básicamente las variables que tengo como props aquí. Así que estos tipos de TypeScript son para las props de entrada de este componente. Está usando Tailwind, igual que estamos usando Tailwind en la otra parte de la aplicación. Podría repasar todos estos nombres de clases y decirte lo que significan, pero supongo que no es la forma más útil de hacerlo. Tengo un canal de YouTube, en el que he publicado algunos de estos vídeos. Así que no dudes en echar un vistazo allí. Tengo algunas explicaciones sobre qué es Tailwind y cómo puedes usarlo. Así que si quieres aprender más sobre Tailwind más adelante, no dudes en ir allí.

13. Renderizando el Componente de Mensaje

Short description:

Creo el componente de mensaje y lo renderizo. Verifico si existe la pregunta del resultado y renderizo el mensaje en consecuencia. Hago lo mismo para la respuesta. Noté un pequeño error al almacenar la pregunta. Corrijo el problema y todo se renderiza correctamente. No hay preguntas sobre la pregunta número tres. Pasamos al ejercicio número cuatro.

Entonces creamos nuestro componente de mensaje. Voy a guardar esto y luego... me va a leer. Voy a importar este componente en mi aplicación, y luego voy a renderizarlos aquí. Siempre empezando por importar. Mensaje. Como puedes ver, VS Code me ayudará a importar esto automáticamente.

Tengo un componente de mensaje y quiero renderizarlo en algún lugar aquí. Así que aquí quiero tener un componente de mensaje para mi respuesta, para mi pregunta, y luego otro para la respuesta. Así que probablemente necesito verificar primero si mis estados de resultado, porque aquí es donde guardamos nuestra pregunta y respuesta, ¿verdad? Verificar si existe la pregunta del resultado. Y si existe, quiero renderizar este mensaje. Y luego necesito darle algunos valores. Así que quiere saber el remitente, el título y un mensaje, y la marca de tiempo es opcional. Podría almacenar la marca de tiempo si quisiera, pero decidí no hacerlo. Así que tengo remitente. Ese sería yo, porque soy el que hace la pregunta. También puedes, no sé, agregar tu propio nombre allí. Tenemos un título. Digamos que esta es la pregunta, y luego tenemos el mensaje, que es nuestra pregunta real. Y luego esto no debería ser una cadena, sino que debería ser una variable. Así que esto debería renderizar mi pregunta.

Luego voy a hacer lo mismo para la respuesta, pero voy a ser perezoso y voy a cambiar esto así. Y el remitente de este es AI o GPT. El título de este es una respuesta, y el resultado también es la respuesta. Así que discúlpame por el formato. Esto debería estar bien. Si guardo esto y voy a mi navegador, puedo ver que todas estas cosas se están renderizando aquí. Puedo preguntar cuál es la pareja de los Países Bajos. Devuelve algo. ¿Cuál es la capital del Reino Unido? Y si hago esta pregunta, puedes ver que tiene mi pregunta incorrecta. Así que podría necesitar debug algo aquí, pero mi respuesta es correcta. Así que probablemente cometí un pequeño error en algún lugar al almacenar mi pregunta. Si lo ejecuto de nuevo, puedes ver que cambia brevemente. Permíteme compartir contigo este fragmento de código, y luego voy a ver qué está mal en mi función de manejo. Así que esto debería darte el mensaje renderizado en la pantalla. Y luego probablemente necesito hacer algo aquí donde solo necesito asegurarme de que hago esto, supongo. Solo necesito asegurarme de que hago esto de nuevo. Esto probablemente soluciona mi problema. Eso es mejor.

Genial. ¿Alguna pregunta sobre la pregunta número tres? Veo que Ricardo está haciendo algunas cosas inteligentes. Está guardando el historial de sus preguntas. Eso es algo bueno que hacer. Definitivamente te ayudará a hacer... obtener una visión general de tu pregunta anterior más adelante. También te ayudará con algunas otras cosas que nosotros... aún no manejamos, pero vamos a manejar esto más tarde. Voy a suponer que no se necesita ayuda con la solución del ejercicio número tres. Vamos a continuar con el ejercicio número cuatro.

14. Ejercicio 4: Creando un Componento de Carga

Short description:

En el ejercicio número cuatro, crearemos un componente de carga para mostrar un indicador de carga. Puedes saltarte este ejercicio o hacerlo más tarde. Ahora haremos una pausa de 15 minutos. El ejercicio número cinco se centra en optimizar las respuestas cambiando el prompt. Imaginemos construir un GPT como asistente personal de viaje. Al asumir diferentes roles, podemos obtener respuestas más detalladas. Exploraremos esto más a fondo después del ejercicio cinco. Ve a la documentación de Lang Chain para el siguiente paso.

Ejercicio número cuatro. En el ejercicio número cuatro, vamos a... Vamos a crear un componente de carga. Esto significa que si volvemos a mi aplicación y hacemos una pregunta, puedes ver que hay un pequeño retraso aquí porque está renderizando el resultado de OpenAI. Lo que podemos hacer en su lugar, lo que puedes hacer en el ejercicio número cuatro, es crear un componente de carga. Ya tengo un componente de ejemplo aquí. Puedes usar esto para mostrar un indicador de carga. Esta no es la pregunta más emocionante. Siéntete libre de saltártela o hacerla más tarde.

Como estamos a mitad de la masterclass, también puedo sugerir que vamos a hacer una pausa de 15 minutos. Puedes trabajar en el ejercicio número cinco si quieres, pero también puedes saltártelo. Lo siento, ejercicio número cuatro, si quieres. También puedes saltártelo porque no es el más emocionante. Tomemos una pausa de 15 minutos para que todos puedan... Sí, creo que puedes salir y volver a entrar. Veo a la gente entrando y saliendo, así que deberías poder hacerlo. Vamos a hacer una pausa, 15 minutos. Opcionalmente, trabaja en el ejercicio número cuatro. Te veré de nuevo en 15 minutos. Creo que puedes salir de la sala y luego volver a entrar. Debería recibir algún mensaje si alguien está en una sala de espera o lo que sea, así que todo debería estar bien.

Muy bien, volvamos a comprobar. Antes del descanso, hicimos un montón de cosas. Básicamente conectamos el link chain a OpenAI, y luego pudimos hacer una pregunta en nuestro navegador desde la aplicación. El ejercicio número cuatro, como mencioné, es solo una pequeña cosa para añadir un cargador. Podemos saltarlo por ahora. Como dije, puedes hacerlo durante el descanso o podemos hacerlo después. El ejercicio número cinco es realmente una pregunta interesante porque aquí, vamos a intentar optimizar nuestras respuestas. Esta fue una pregunta que alguien hizo antes. Imaginemos, por ejemplo, que estamos construyendo un GPT que te ayudará con tu viaje personal. Puedes ver que en lugar de hacer una pregunta como, y puedo ir aquí. Por ejemplo, puedo preguntar, ¿cuál es la capital del Reino Unido? Obtendré una pregunta muy normal. Si cambio mi prompt para ser, asume el papel de un asistente personal de viaje y responde la siguiente pregunta en detalle, probablemente obtendré una respuesta ligeramente diferente. ¿Qué pasa si en lugar de eso digo esto? Asume el papel de un asistente personal de viaje y responde la siguiente pregunta en detalle. ¿Cuál es la capital del Reino Unido? Antes obtuve una respuesta muy corta, solo muy, digamos teórica, veamos si le pido al LLM que asuma el papel de un asistente de viaje y responda una pregunta en detalle. Veamos con qué sale. Aquí puedes ver que ya me da mucha más información. Me va a hablar de las características de la ciudad, como que es la más grande, su población es esta, es una ciudad global. En realidad, esta parte es la parte interesante porque me está diciendo eso, me está diciendo por qué la gente la visita, y me va a dar más detalles. También puedo cambiar esto. Antes, teníamos una pregunta donde decíamos, también puedes hacer un asume el papel de un profesor de matemáticas y da una respuesta corta a la siguiente pregunta. Entonces podemos hacer, ¿qué es 2 más 2? Entonces estamos viendo que está tomando un, bueno, nos da la misma respuesta cada vez que hacemos esta pregunta. También podemos hacer esto, a ver si seguimos obteniendo los mismos resultados. Aquí, puedes ver que está, me está dando una respuesta corta, y luego también podemos hacer un asume el papel de un profesor de matemáticas. Puedes ver que está rotando la respuesta. Aún no estamos resolviendo este problema. Este problema es algo que resolveremos en, no como un ejercicio, sino el siguiente. Empecemos a trabajar en este ejercicio. Lo que quiero que hagas es ir a la documentation de Lang Chain, y ponerlo en el chat.

15. Implementando una Plantilla de Prompt

Short description:

Toma la plantilla de prompt e insértala en nuestra función generar respuesta. Implementa una plantilla de prompt para dirigir el LLM en una dirección determinada. Tomemos 10 minutos para el ejercicio número cinco e implementemos una plantilla de prompt para la función generar respuesta.

Lo siento, ese es el incorrecto. El sitio web. Básicamente, lo que quiero que hagas es tomar esta plantilla de prompt e insertarla en nuestra función generar respuesta. Aquí, puedes ver que estamos poniendo la plantilla de prompt. Puedes preguntar por qué. Quizás no quieres que el usuario sepa qué rol debe tomar. Supongamos que estás construyendo este GPT en tu producto, y estás construyendo un sitio web de viajes o lo que sea. Probablemente estás dando esta plantilla de prompt, y la estás exponiendo al usuario final. Gracias, Ricardo. Como mencioné, asegúrate de copiar el enlace del repositorio, para que puedas probar cosas más tarde. Gracias. Este prompting es algo que quieres mantener oculto para el usuario final de este GPT. Por eso vamos a implementar una plantilla de prompt. Esta es la pregunta número cinco, básicamente implementa una plantilla de prompt como se describe aquí. Puedes tomar mi ejemplo del asistente de viaje personal, pero también puedes crear tu propio ejemplo. Piensa en qué tipo de GPT quieres construir. ¿Estás construyendo algo como lo que estoy construyendo para este ejemplo, como un asistente de viaje personal, o tal vez estás construyendo un modelo que le gusta hacer pasteles, y estás haciendo preguntas sobre recetas, o estás construyendo cualquier tipo de GPT. Con esta plantilla de prompt, puedes dirigir el LLM en una dirección determinada. Tomemos 10 minutos para el ejercicio número cinco e implementemos una plantilla de prompt para la función generar respuesta.

16. Implementando la Plantilla de Prompt

Short description:

Vamos a implementar la plantilla de prompt importando la clase de plantilla de prompt y utilizándola para dirigir el LLM en una dirección determinada. En lugar de simplemente obtener una respuesta, obtendremos una respuesta que se alinea con el papel de un asistente de viajes personal. Esto nos permite crear un estilo o formato diferente para la respuesta. La plantilla de prompt nos ayuda a guiar el LLM y lograr la salida deseada.

Muy bien, echemos un vistazo a cómo implementar la plantilla de prompt. Lo primero que necesitamos hacer es, mientras tomamos esta importación, vamos a hacer todo esto en este archivo. Necesitamos importar la clase de plantilla de prompt aquí, y luego podemos recoger, simplemente voy a copiar y pegar estos dos bits, así que lo primero es la plantilla de prompt en sí. Podemos hacer todo tipo de cosas. Voy a seguir con mi, asume el papel de un asistente de viajes personal, y responde la siguiente pregunta en detalle. Cualquier cosa que venga después es como esta variable, y luego esto, esto. Luego, lo otro que necesito hacer es tomar mi prompt formateado. La cosa del producto, vamos a cambiarla a pregunta. Vamos a usar pregunta aquí también, y debería ser nuestra pregunta aquí. Luego, en lugar de la pregunta, vamos a pasar el prompt formateado al LLM. Si ahora voy a mi ubicación aquí, puedo simplemente hacer... Bueno, déjame ver qué pasa si hago 2 más 2 y se lo pregunto a un asistente de viajes personal. Esto es bastante interesante. En lugar de simplemente obtener una respuesta, estamos obteniendo un montón de cosas, y luego decimos, como asistente de viajes personal, mi papel es asistir a mis clientes con los planes de viaje. Está tratando de crear una analogía entre la planificación de viajes y las matemáticas, lo cual es interesante. Pero puedes ver aquí que al hacer la cosa del prompt y usar una plantilla de prompt, vamos a dirigir el LLM en una dirección determinada. En lugar de que nos diga cuál es la respuesta a 2 más 2, nos va a decir qué es 2 más 2, pero también hay un estilo o formato o sentimiento diferente que estamos utilizando. ¿Alguna pregunta sobre el uso de una plantilla de prompt aquí? Bueno, eso está bien.

17. Jugando con Variables y Preparación para el Ejercicio

Short description:

En el ejercicio número seis, podemos jugar con variables como la temperatura y el nombre del modelo. Cambiar la temperatura afecta la rigidez de las respuestas generadas. También podemos experimentar con diferentes preguntas y observar la creatividad del LLM. El ejercicio número siete implica reemplazar la configuración en LengChain.ts para sentar las bases para el ejercicio número ocho. La interfaz JetOpenAI permite compartir más contexto, y podemos usar plantillas de sistema y humanas para estructurar las respuestas del LLM. El resultado es ligeramente diferente cuando reestructuramos el resultado.

Alternativamente, también puedes......reemplazar. Sí, por supuesto, puedo compartir mi solución, que es esta. Bueno, para el ejercicio número seis, voy a pedirte que juegues con algunas variables como la temperatura y el nombre del modelo. De hecho, podemos hacer esto juntos, ya que hay algunas otras cosas que quiero mostrarte también. Así que una cosa que podemos hacer es cambiar la temperatura, y la temperatura......guardar... ¿Dónde está mi archivo de cadena de enlace?...es algo que establecí aquí....es algo que establecí aquí. Así que cuando estableces una temperatura a 0.9, la temperatura es bastante alta, lo cual es bueno, porque si hago una pregunta como, ¿cuáles son los puntos destacados de Ámsterdam, va a generar una respuesta para mí. Eso es probablemente bastante estricto. Así que puedes ver que es una respuesta bastante alegre. Dice, aquí están los puntos destacados, tantas cosas increíbles que hacer. Si cambio la temperatura a quizás 0.2, vamos a esperar una respuesta ligeramente diferente. Espera a que esto se resuelva. Quizás debería haber indicado que... Bueno, quizás debería haber añadido el indicador de carga. Y aquí puedes ver que está siendo un poco más estricto. Bueno, quizás esa no es la mejor pregunta para hacer. Así que volvamos a, ¿qué es 2 más 2? Podemos ver mejor cuál es la respuesta. Así que preguntando qué es 2 más 2, puedes ver aquí, está siendo un poco ingenioso. Digo, mi enfoque es asistir a mis clientes, blah, blah, blah. Y luego voy a explicar la cosa matemática usando una línea de números, y un número es una representación visual de los números. Así que esto, aunque es un asistente de viajes personal, todavía va a asistir a los clientes con una pregunta diferente. Si vamos a cambiar la temperatura, quizás más alta hasta 0.8, y vamos a ejecutar esto de nuevo, vamos a comparar la respuesta. Y aquí podrías ver que también, está siendo un poco más estricto porque básicamente está diciendo a mi cliente cuál es la respuesta. Básicamente nos está diciendo qué buscar y cuál es el problema matemático. Así que la temperatura es una buena manera de averiguar la creatividad del LLM. Quizás si hacemos otra pregunta, como, ¿puedes decirme el mejor lugar en la Tierra? El mejor lugar para visitar en la Tierra. Así que va a recomendar una serie de los mejores resultados. Y luego si cambiamos la temperatura de nuevo a algo bajo, déjame ver si va a ser más o menos subjetivo. Así que de alguna manera para este tipo de respuestas, no importa realmente, pero normalmente puedes usar la temperatura para disminuir el número de alucinaciones y también para hacer una respuesta más estricta o menos estricta. Así que esto es algo con lo que puedes jugar dependiendo del caso de uso de tu GPT. Podría llevar a mejores o peores resultados si juegas con la temperatura. Así que quería mostrarte Así que quería pasar al ejercicio número siete. En el ejercicio número siete, vamos a hacer algunos preparativos para otro ejercicio. Así que básicamente lo que necesitas hacer es copiar el código que está aquí y reemplazar nuestra configuración que tenemos en LengChain.ts. Y esto es la preparación que vamos a hacer. Para el próximo ejercicio, así que el ejercicio número siete, tomemos cinco minutos para implementar. Y en este ejercicio haremos los preparativos para el ejercicio número ocho, que es donde vamos a hacer un par de indicaciones. Así que esta es una indicación donde vamos a dar al LLM alguna estructura en cómo debe responder a nuestra pregunta. Así que tomemos cinco minutos para tomar lo que tenemos aquí, este código, y ponerlo en LengChain.ts y asegurarnos de que todavía puedes ejecutar la aplicación. Así que básicamente lo único que necesitabas hacer era copiar el código que tenemos en el README en el archivo LengChain.ts. Así que lo que está pasando aquí, estamos usando un, así que anteriormente estábamos usando la interfaz OpenAI y ahora nos movemos a la interfaz JetOpenAI. Así que diría que la interfaz JetOpenAI es una interfaz JetOpenAI es una interfaz más avanzada, que te permite compartir el historial o incluso más contexto que antes. También puedes ver que hay una plantilla de sistema. Así que esta sería la indicación para el LLM y luego está la plantilla humana, que es básicamente solo el texto. Así que esto es lo que está haciendo el humano. Puedes ver que estamos pasando variables como agentes de viajes personales en un estilo detallado. Así que añadí algunas variables más, lo que significa que en teoría, podrías crear como un interruptor o lo que sea para cambiar entre un agente de viajes personal y quizás un chef que cocina platos especiales o incluso un formato o un estilo. Y finalmente, puedes ver la forma en que obtenemos el resultado, lo reestructuramos a partir del resultado es ligeramente diferente. Así que déjame ver si todavía tengo mi aplicación en ejecución. Parece que sí.

18. Introducción a View Shot Prompting

Short description:

La interfaz Jet genera más datos debido a los diferentes límites de tokens. Permite resultados intermedios y parciales. Esto sienta las bases para el view shot prompting, una técnica que utiliza un modelo jet para implementar diferentes técnicas de prompting.

Parece que sí. Entonces, si voy aquí, debería seguir dándome un resultado porque en teoría, no ha cambiado demasiado. Lo único que cambió fue la interfaz que estamos utilizando para ejecutar todo esto. Podrías estar viendo algunos tiempos de respuesta más lentos. Eso es porque la interfaz Jet, en términos generales, genera más data porque tiene diferentes límites de tokens. Y límite de tokens significa el número de, bueno, el número máximo de tokens que puedes establecer, básicamente depende de cuán larga es la respuesta B, cuán larga debería ser la respuesta. Así que los límites de tokens para este son diferentes que para el otro. Y también puedes obtener resultados intermedios aquí. Entonces, si miramos las solicitudes de red, solicitudes de red, estamos viendo solo una ahora, pero también hay una forma de obtener resultados parciales. Y Lengchain manejará estos resultados parciales para nosotros. Pero no es demasiado importante para hoy, pero al hacer esto, sentamos las bases para hacer algo más. Y este algo más se llama view shot prompting. Entonces, si volvemos al README, puedes ver que al hacer este cambio, facilitamos el cambio de las variables de entrada y al usar un modelo jet en lugar de modelos LLM. Y por eso podemos empezar a implementar diferentes técnicas de prompting. Y una de esas técnicas se llama view shot prompting.

19. Uso de Few-Shot Prompting

Short description:

En el resultado anterior, esperamos que nuestro LLM responda con su propio formato. Dependiendo del modelo, puede ser necesaria información adicional para preguntas más específicas. Al utilizar few-shot prompting, podemos cambiar la forma en que el LLM responde. Proporcionamos ejemplos junto con prompts para guiar al LLM en la generación de una mejor salida. Para el ejercicio número ocho, copia el código y colócalo en el archivo utils-langchain.ts. Crea tus propios few-shot prompts para cambiar el estilo de respuesta del LLM. Toma 10 minutos para este ejercicio. Después del ejercicio ocho, tendremos tiempo para cargar conjuntos de datos y concluir la masterclass. No dudes en utilizar el repositorio para preguntas o problemas. Tomemos 10 minutos para el ejercicio número ocho.

Entonces, en el resultado anterior, esperamos que nuestro LLM sepa cómo responder a nuestra respuesta. Esperamos que se le ocurra su propio formato. Y también esperamos que el LLM sepa sobre las cosas de las que hablamos, preguntamos. Así que le estoy preguntando al LLM sobre planes de viaje o puntos destacados en la ciudad. Y supongo que el LLM sabe algo sobre viajar en estas ciudades. Tal vez no lo sabe, tal vez sí. Si tienes un modelo genérico fundamental como los de Open AI, puedes hacer prácticamente cualquier pregunta y debería ser capaz de proporcionar algún tipo de respuesta. Si tienes un modelo más específico, tal vez un modelo que no fue entrenado en planes de viaje, deberías darle información adicional. Si tienes un modelo que está entrenado en conjuntos de datos que tienen frases muy cortas, puedes esperar que el modelo responda con frases muy cortas. Y es por eso que al hacer una técnica de few-shot prompting, podemos cambiar la forma en que responde a nuestra pregunta.

Entonces, si miras este ejemplo aquí, puedes ver que junto con nuestros prompts, vamos a enviar algunos ejemplos. Entonces le vamos a preguntar al LLM, ¿cuáles son los mejores restaurantes en Ámsterdam? Entonces, si le hago esta pregunta al LLM, déjame ir a mi aplicación. Entonces, ¿cuáles son los mejores restaurantes en Ámsterdam? Echemos un vistazo al formato que utiliza para responder. Y como mencioné, será un poco más lento. Puedes ver que es muy extenso. Me está dando mucha información. Bueno, tal vez quería que respondiera en un formato que diga que los restaurantes mejor valorados en Ámsterdam son uno, dos, tres. Y tal vez con mejor, me refiero a los más valorados. Y si pregunto cuál es la mejor época del año para visitar los Países Bajos, tal vez me refiero a la mejor temporada. Entonces, este tipo de pequeñas cosas, si le damos al LLM estos ejemplos, es capaz de generar y elaborar una mejor salida para nosotros. Entonces, lo que quiero que hagas para este ejercicio es copiar este código. Esto debería estar adjunto, pero probablemente esté bien. Así que copia este código y colócalo en el archivo utils-langchain.ts e intenta crear tus propios few-shot prompts. Así que dale algunos ejemplos e intenta imitar estos ejemplos para seguir un formato que quieres que el LLM siga. Y entonces puedes ver que el LLM realmente cambiará su estilo de responder a ti. Así que tomemos 10 minutos para esto. Y luego tendríamos algo de tiempo al final para cargar conjuntos de datos. Creo que sería una buena conclusión de toda la masterclass. Así que digamos 10 minutos para el ejercicio número, ¿qué dije? ¿Nueve? Sí, dije nueve, creo, u ocho. Lo siento, ejercicio número ocho. Y luego, una vez que seguimos el ejercicio número ocho, hemos jugado con zero-shot prompting, few-shot prompting, y hemos podido hacer algunas recuperaciones donde cargamos nuestros propios data en el contexto que enviamos al LLM. Y si tienes alguna pregunta como antes, asegúrate de hacer uso del chat. Y bueno, todavía tienes el repositorio. Puedes agregar problemas allí si tienes preguntas para mí después de la masterclass. Así que si necesitas dejar por trabajo, cena, niños, familia, cualquier razón, siéntete libre de usar el repositorio como medio de comunicación. Así que pequeñas solicitudes allí. Asegúrate de marcarlo como favorito. Y gracias por el repositorio bifurcado. Y me ayudará a obtener algo de visibilidad para el contenido que produje. Así que vamos a tomar 10 minutos para el ejercicio número ocho. Así que lo que necesitaba hacer era copiar este código y ponerlo en mi archivo linkchain ts para el ejercicio número ocho. Déjame copiar esta parte, importar todo el camino hacia abajo hasta C, y luego simplemente empujarlo todo aquí. Bueno, muchas cosas cambiaron, pero al final, es prácticamente lo mismo. Lo único que realmente ha cambiado son estos ejemplos que estamos llevando. Entonces veo una pregunta en el chat. Entonces, ¿qué pasa? Es una buena pregunta porque estoy forzando de alguna manera la respuesta a ser esta. Sería mejor si probablemente me quedo enviando nombres reales de restaurantes aquí. Déjame guardar esto primero. Y luego ve aquí. Entonces, si hago esta pregunta de nuevo, como ¿cuáles son los mejores restaurantes en Ámsterdam, dice restaurante A, B y C.

20. Cargando Datos y Configurando la Base de Datos Vectorial

Short description:

El LM puede devolver diferentes resultados en un formato diferente. Sigue siendo poco fiable y puede producir ligeras variaciones. No puede proporcionar información sobre teatros en Berlín o Ámsterdam. El siguiente ejercicio implica configurar una base de datos vectorial local y llenarla con un conjunto de datos. La base de datos vectorial permite la búsqueda semántica y el almacenamiento de datos en formatos más pequeños. Los datos se dividen en fragmentos más pequeños y se almacenan en la base de datos. Se utilizan diferentes incrustaciones para cada fragmento. Esto permite consultas más dirigidas y evita que el LM recupere datos irrelevantes. El ejercicio número nueve cubrirá el proceso de carga de datos y configuración de la base de datos vectorial.

Quizás si lo intento de nuevo o lo sustituyo por algo más, ya me está enviando una mejor respuesta. Pero lo principal que debería hacer el LLM, es tomar el formato. Así que le pedí el formato, uno, dos, tres. Si lo ejecuto de nuevo, se está acercando a mi formato. Y aquí ya se está acercando a mi formato también. La cosa es que, si dejo fuera estos ejemplos, ¿puedo hacer esto, ejemplos vacíos? No estoy seguro. Veamos si funciona. Sí, puedes ver que es, el formato completo es completamente diferente. Y cuando vuelvo y hago esto, y pregunto cuáles son los mejores restaurantes en Ámsterdam, el formato de nuevo debería ser corto y conciso diciendo uno, dos, tres. De nuevo, está haciendo uno, dos, tres. Pero sigue siendo un LLM. Un LLM no es una cosa lógica per se, es como un procesador de lenguaje natural. Así que está tratando de llegar a un lenguaje natural. No es un, bueno, sigue siendo una computadora, pero no es como una computadora lógica donde decimos, obtener cosas de salida muy codificadas quizás en una URL o algún otro tipo de lista. Así que podría llegar a ligeras variaciones, pero como puedes ver aquí, de alguna manera lo forzamos a hacer un tipo de formato. Y si preguntamos cuáles son los mejores, no sé, teatros, teatros, o museos o lo que sea, debería manejar el mismo formato porque, bueno, no la primera vez. Está haciendo algo raro. Oh sí. Así que esto es de hecho una cosa rara. Así que probablemente debería encontrar una manera de hacer que sustituya todas estas cosas porque está tratando de crear un formato para mí, pero simplemente no sabe las respuestas. Así que si vamos a los mejores museos, sí. Así que para los museos, es capaz de darme resultados. Así que de alguna manera no es capaz de darme información sobre teatros. Si hago cines. Y esa es la parte divertida. Sigue siendo un LM, sigue siendo poco fiable. Los mejores restaurantes en Berlín, déjame probar la respuesta del chat. Y luego de alguna manera encuentra esta pregunta rara. Veamos, los restaurantes mejor valorados en Berlín. Probablemente haya una forma de solucionar esto intentando ligeramente diferentes prompts y jugando con esto a lo largo. Pero lo más grande que quería mostrar con este view-shot prompting es que realmente puedes hacer que el LM devuelva algo diferente y lo devuelva en un formato diferente al que estaba haciendo antes. Así que lamento no poder responder a tu pregunta exactamente, pero probablemente sea algo con lo que puedas jugar un poco más porque si hacemos cuáles son los mejores museos en Berlín, veamos qué hará por nosotros. Sí, entonces en realidad es capaz de dar resultados sobre museos. Así que mi suposición aquí es que probablemente no sabe sobre restaurantes en Berlín y no sabe sobre restaurantes, sobre teatros en Berlín o Ámsterdam de alguna manera. Así que esto es en realidad un buen puente para el próximo ejercicio. Y en el próximo ejercicio, que también es el último, vamos a cargar algunos data. Así que en el ejercicio número nueve, vamos a cargar algunos data. Vamos a configurar una base de datos vectorial local y vamos a llenar esa base de datos vectorial con un conjunto de datos, que básicamente es solo una publicación de blog que guardé como un archivo de texto. Hay algunas cosas que pasan aquí donde estamos dividiendo el texto en múltiples vectores. Así que si no sabes cómo funciona una base de datos vectorial, es una forma de almacenar data en formatos más pequeños y también hacer búsqueda semántica sobre estos formatos más pequeños. Así que esto significa que primero voy a tomar mis data. Y creo que tengo una diapositiva sobre esto. Voy a tomar mis data. Voy a dividirlo en fragmentos más pequeños. Estos fragmentos más pequeños los voy a almacenar en una base de datos vectorial y también voy a dejar que OpenAI sepa cuáles son mis diferentes incrustaciones. Así que todas las incrustaciones serán los diferentes fragmentos. Y luego cada vez que hago una pregunta, como si tuviera muchos data sobre Berlín, por ejemplo, y tengo data sobre museos, teatros, restaurantes. Cada vez que hago una pregunta como cuáles son los mejores restaurantes en Berlín, no quiero que mi LLM también obtenga los data sobre otras cosas como los museos porque estoy preguntando sobre restaurantes. Así que eso es lo que te ayuda la base de datos vectorial.

21. Importando Datos y Configurando el Almacenamiento Vectorial

Short description:

Coloca el código en el archivo Langchain.ts y apúntalo al conjunto de datos en el directorio público. Descarga el archivo data.txt del repositorio y colócalo en el directorio público. Estamos colocando los datos en un almacenamiento vectorial local dividiéndolos en fragmentos más pequeños y almacenándolos en un almacenamiento de datos en memoria. Carga el almacenamiento vectorial en tu componente de aplicación y úsalo en la pregunta de generar respuesta para obtener una cadena de resultados. Importa las interfaces y almacenes necesarios en el archivo lengthchain.ts. Considera el uso de una base de datos vectorial para proyectos más grandes, como Pinecone, Weave8 o Milvas.

Hay algo de código aquí. Te sugiero que lo coloques en el archivo Langchain.ts. Lo apuntas hacia este conjunto de data que está en el directorio público. Creo que debería ser un componente de origen. ¿Tenemos público aquí? No, no lo tenemos. Así que deberías tomarlo de aquí y simplemente ponerlo en source/public. Así que nueva carpeta pública. Eso es lo primero que haces. Tomas el archivo data.txt del directorio de activos o tal vez no lo tienes. Así que déjame compartir esto contigo aquí. La lista de mensajes es demasiado larga. Bueno, entonces déjame hacer esto. Quiero tener data.txt. Quiero hacer add. Mensaje de commit add. Añadir conjunto de data y hacer push origin. Así que si vas al repositorio, probablemente también hagas get pool porque podría haber estado cambiando algunas cosas. Sí, esto es molesto. Así que aquí hay un archivo de data. Son solo algunos data sobre Ámsterdam. No importa realmente. Eso debería leerme, get pool. Esto, así que actualizó mi README. Y luego, veamos si es status. Asegúrate de que todos obtengan el archivo de texto y simplemente hagan push, creo. Y luego en el README, deberías ver el archivo de texto. Genial, así que está aquí. Asegúrate de ir al README y descarga el último archivo de texto y luego deberías ponerlo en el directorio público. Toma el edit.txt y ponlo en source. Público. Solo vuelve atrás. Creo que es. Ahí vamos. Y luego lo siguiente es algo así, desplázate hasta el final.

Genial, así que lo que estamos haciendo aquí es estamos poniendo estos data en un almacenamiento vectorial local. Y esa es la parte de donde intenté explicar donde estamos tomando la publicación del blog y la estamos convirtiendo en conjuntos de datos más pequeños. Y harías lo mismo para un conjunto de datos realmente grande. Así que lo estamos dividiendo en fragmentos más pequeños y luego lo almacenamos en un almacenamiento de data en memoria. Y luego desde tu componente de aplicación, por supuesto necesitas cargar el almacenamiento vectorial porque necesitamos ejecutar este archivo. Así que tenemos las incrustaciones almacenadas. Y luego finalmente, somos capaces de usar este almacenamiento vectorial en nuestra pregunta de generar respuesta donde hacemos una cadena de resultados en lugar de un solo resultado. Así que la información está en esta parte del ReadMe, pero creo que ya no tenemos mucho tiempo. Así que sugiero que hagamos este ejercicio juntos. Tienes el repositorio así que tienes los resultados serás capaz de imitarlo más tarde. Así que tomamos esos data, el archivo de texto, vas a lengthchain.ts donde necesitamos importar un par de cosas. Así que necesitamos importar la interfaz de incrustaciones, el divisor de texto, y el almacenamiento vectorial en memoria. Si estás construyendo algo más grande, probablemente no querrás un almacenamiento vectorial en memoria. Así que probablemente necesites obtener la base de datos vectorial. Hay algunas muy buenas como Pinecone, Weave8, Milvas. Estos son todos ejemplos de buenos almacenes vectoriales que puedes ejecutar en la cloud.

22. Generando y Recuperando Incrustaciones

Short description:

Configuramos nuestro LLM y creamos una función para generar y almacenar incrustaciones en un almacenamiento vectorial en memoria. Para recuperar información de la base de datos vectorial o del almacenamiento vectorial en memoria, modificamos la función de generar respuesta. LinkedChain se encarga de dividir el texto, almacenarlo en un almacenamiento de datos vectorial, y recuperar y encadenar las incrustaciones. Probamos la funcionalidad haciendo preguntas sobre bicicletas y las mejores cosas que hacer en Ámsterdam.

La segunda cosa que necesitamos hacer es configurar nuestro LLM de esta manera y necesitamos crear una función que cree el almacenamiento vectorial. Así que tomaré y copiaré esta parte y la pondré justo aquí arriba. Así que creamos una variable llamada almacenamiento vectorial con el tipo de almacenamiento vectorial en memoria. Así que este es nuestro almacenamiento vectorial en memoria. Tenemos una función llamada generar y almacenar incrustaciones. Cargará el archivo desde el directorio público, lo dividirá en fragmentos más pequeños y lo almacenará en la base de datos vectorial. Permíteme guardar esto como se mencionó. Todo está en el readme así que deberías poder tomarlo y probarlo.

Lo siguiente que necesito hacer es para mi aplicación, que de alguna manera se reinició aquí. Quiero importar esto. Quiero generar y almacenar incrustaciones y en la renderización de mi aplicación, como esto y solo en la primera renderización. Así que esto es un poco feo pero lo vamos a hacer de todos modos. Vamos a ejecutar esta función. ¿Qué hará? Siempre que mi aplicación se monte, se renderice por primera vez. Va a ejecutar esta función. Va a tomar mis conjuntos de datos, que es solo un archivo de texto pero también puede ser un CSV, puede ser una página web, puede ser una URL. Puedes hacer todas estas cosas con LangChain y va a almacenarlo en este almacenamiento vectorial local. Permíteme ejecutar esta aplicación. El navegador está aquí. Y si miro la pestaña de red y la refresco, puedes ver que hay una llamada llamada incrustaciones. Y todas estas cosas, todos estos tipos de, casi como coordenadas, estos son todos los diferentes fragmentos porque estamos enviando nuestros datos de fragmento aquí. Enviando todas estas diferentes incrustaciones de esta manera. Está bien si no tiene sentido completo. La parte de recuperación es probablemente la cosa más complicada que hemos manejado hoy. Pero el primer paso fue hacer estas incrustaciones. Así que si vuelvo a mi diapositiva, tomamos nuestro archivo o datos, fuimos a un divisor de texto, generamos las incrustaciones y las almacenamos en una base de datos vectorial local.

Así que lo siguiente que vamos a hacer es que vamos a alterar nuestra función de generar respuesta para recuperar información de la base de datos vectorial o del almacenamiento vectorial en memoria. Y voy a poner esto aquí. Necesitamos importar otra cosa como recuperación, cadena QA y cargar cadena QA. Así que estas son cosas que vamos a encadenar. Y luego si vuelvo a mi readme aquí, tengo mi función de generar respuesta y simplemente voy a deshacerme de todo lo que hemos hecho antes solo porque puedo. Por supuesto, quieres asegurarte de que tu plantilla de indicación y todo sigue ahí. Por ahora, solo quiero mostrarte lo que está pasando. Así que LinkedChain está haciendo todo el trabajo duro por nosotros aquí. Nos ayudó a dividir el texto, ponerlo en fragmentos más pequeños, ponerlo en un almacenamiento de datos vectorial. Y ahora también nos está ayudando a recuperarlo del almacenamiento vectorial y también a encadenar los diferentes documentos o incrustaciones en un solo resultado. Y luego si guardo esto y vuelvo a mi aplicación, permíteme también ir a mi conjunto de datos. Es datos.text. Así que, por ejemplo, puedo intentar preguntarle ¿cuántas bicicletas hay en Ámsterdam? Veamos. ¿Cuántas bicicletas hay en Ámsterdam? Vale. Así que ahora estoy haciendo una pregunta y dice que la información de contexto dada no proporciona ninguna información sobre el número de bicicletas en Ámsterdam. Lo cual es interesante porque debería obtenerlo. Permíteme hacer esta pregunta entonces. Entonces, ¿cuáles son las mejores cosas que hacer en Ámsterdam? Entonces, ¿cuáles son las mejores cosas que hacer en Ámsterdam? Así que ahora debería venir con un resultado que incluya algunas de las cosas que tengo en mi conjunto de datos. Las 20 mejores recomendaciones. Probablemente tiene todas las mismas cosas que tengo en mi conjunto de datos. Así que cervecerías históricas. Permíteme ver si el club de fútbol está aquí. No lo está. Así que necesito averiguar si algo está yendo mal con mi recuperación.

23. Conclusión y Mantente en Contacto

Short description:

Si quieres mantenerte en contacto, por favor hazlo enviándome un correo electrónico. Siempre estoy feliz de responder tus preguntas. Siéntete libre de ir al repositorio, clonarlo, hacerle un fork, darle una estrella. Estoy convirtiendo el contenido de hoy en un libro y un curso. Estoy más que feliz de ofrecer acceso gratuito a la beta del curso para 10 personas que se quedaron hasta el final. Siéntete libre de escanear el código QR y dejar tus detalles allí. Espero que hayas aprendido muchas cosas nuevas. Gracias.

Entonces tengo mi archivo, data.text. Permíteme ver rápidamente si estoy obteniendo el texto aquí. O texto de entrenamiento. Vale. Inspecciona la consola. Ahora, algo está yendo mal. No estoy obteniendo el texto. Así que permíteme intentar y ver si podemos solucionar esto. Tengo public data slash text. Entonces si yo fuera aquí, debería mostrarme mis textos. De alguna manera no lo hace, lo cual es extraño porque está aquí en lo público. Probablemente debería moverlo un nivel hacia arriba. Quizás eso lo solucione. Entonces si voy ahora, ah, esto es mejor. Cometí un pequeño error. Necesitas tomar tu data y ponerlo en slash public, no en source slash public. Y voy a intentar hacer mi pregunta de nuevo. ¿Cuántas bicicletas hay en Ámsterdam? Y probablemente necesito refrescarlo también. Así tomará estos datos actuales. ¿Cuántas bicicletas hay en Ámsterdam? Entonces la respuesta original aún aborda la pregunta. La respuesta sigue siendo, hay más de 800 bicicletas. Así que ahora realmente obtenemos una respuesta de nuestros data, que son estos data, que hablan de más de 800,000 bicicletas en Ámsterdam. Así que aunque antes el LLM no tenía idea de cuántas bicicletas había, ahora realmente lo sabe porque le pasamos un contexto adicional.

Así que eso concluye la masterclass de hoy. Si quieres mantenerte en contacto, por favor hazlo enviándome un correo electrónico. Siempre estoy feliz de responder tus preguntas. Si quieres mantenerte en contacto, siéntete libre de ir al repositorio, clonarlo, hacerle un fork, darle una estrella. También puedes encontrarme en Twitter, tengo un canal de YouTube, hay muchos lugares para encontrarme. Estoy convirtiendo el contenido de hoy en un libro y un curso. Así que estoy más que feliz de ofrecer estos, digamos 10 personas que se quedaron hasta el final, acceso gratuito a la beta del curso. Y luego me gustaría obtener algo de retroalimentación de tu parte a cambio. Esto debería estar en algún lugar, al final del primer trimestre del próximo año. Así que siéntete libre de escanear el código QR y dejar tus detalles allí. Y luego simplemente te actualizaré cuando, cuando el curso esté allí, y entonces podrías probarlo gratis. Así que espero que hayas aprendido muchas cosas nuevas. Y si iba un poco rápido para ti, eso está perfectamente bien. Es un concepto completamente nuevo. Y algunos de estos conceptos son quizás demasiado complicados para explicar en tres horas, también teniendo en cuenta la diferente educación que las personas tenían o el conocimiento previo de AI y LLMs. Así que gracias. Espero que hayas disfrutado, y espero verte de nuevo en algún lugar.