Crea aplicaciones web con IA con React, Astro y la API de OpenAI

1. ¿De qué trata este curso?: Hola, y bienvenidos a nuestro nuevo y emocionante curso de video sobre programación de aplicaciones de chat de IA con JavaScript React Astro JS, y la API Open AI. Estoy encantado de ser tu profesor en línea, y juntos, nos embarcaremos en un viaje extraordinario hacia el mundo de las aplicaciones de chat impulsadas por inteligencia artificial En este curso, profundizaremos en el ámbito de la IA y exploraremos cómo crear tres fascinantes aplicaciones web Cada una de estas aplicaciones estará alimentada por la API Open AI, la SAN que está alimentando hat GBT, y se construirá utilizando las populares tecnologías de desarrollo web como JavaScript React y Astro jazz Al final de este curso, tendrás las habilidades y la confianza para crear sofisticadas aplicaciones de chat de IA que interactúen con los usuarios de formas únicas y atractivas. Echemos un breve vistazo a los tres emocionantes proyectos que vamos a construir. Número uno, chat GPT Clone. Comenzaremos construyendo un clon GBT de chat simple que permita a los usuarios tener conversaciones básicas con una IA Aprenderás a integrar la API Open AI para aprovechar el poder de la generación del lenguaje y crear una experiencia de chat perfecta. Al final de esta sección, tendrás tu propia aplicación de chat AI Power en funcionamiento. Segundo, juego de aventura basado en texto. En esta sección, nos desafiaremos a nosotros mismos con un juego de aventura basado en texto temático de ciencia ficción. Los jugadores resolverán acertijos y navegarán por la historia interactuando con los personajes a través del chat. Los personajes de IA responderán de manera inteligente, haciendo que la experiencia sea inmersiva Obtendrá información valiosa sobre cómo se puede usar la IA para crear narraciones interactivas y cautivadoras Número tres, asistente de ventas en línea. En la sección final, construiremos una aplicación práctica que simula un asistente de ventas en línea Los usuarios pueden chatear con la IA para indagar sobre los productos disponibles, que en este caso, serán guitarras y bajos. Aprenderás a incorporar la IA en escenarios del mundo real, mejorando la experiencia del usuario y haciendo que las interacciones de comercio electrónico sean más atractivas y eficientes. Al final de este curso, estarás equipado con los conocimientos y las habilidades para crear aplicaciones de chat AI Power que puedan sorprender a tus amigos, colegas y empleadores potenciales Empecemos juntos en este emocionante viaje mientras descubrimos el fascinante mundo de las aplicaciones de chat de IA con JavaScript React AstroJS y la API Open AI Ahora, aquí hay un dato interesante. El guión de introducción que acabas de escuchar fue, de hecho, generado nada menos que por la misma IA que usaremos en este curso, hat GPT Sí, así es. Como modelo de lenguaje de IA desarrollado por OpenAI, HattPT es competente en comprender y generar texto humano basado en el contexto que se le el Y ahora lo estamos llevando más allá solo generar texto poniéndolo a un uso práctico en la construcción de aplicaciones del mundo real. Estoy encantado de ser tu acompañante e instructor y no puedo esperar a ver las increíbles aplicaciones que construirás. Empecemos. Y por cierto, este texto también fue generado por ChatBT y el que estás escuchando ahora lo genera yo, tu instructor. Así que comencemos. 2. La plataforma y API de OpenAI: Hola, y bienvenidos a este video. Aquí voy pedacitos en los detalles de la plataforma Open AI que está alimentando HGPT No demasiado, pero algunas cosas importantes que me gustaría mostrarles aquí. Entonces supongo que todos conocen a HAGPT, la aplicación de chat de IA que se puede utilizar para generar textos, para responder preguntas, escribir código de programación, y así sucesivamente Y todo esto está impulsado por un modelo de lenguaje grande, LLM, que Open AI ha desarrollado, y que es capaz de completar un texto escrito en un lenguaje natural de una manera que parece tener más o menos sentido Un punto importante que debes entender es que todo lo que hace L&M es completar el texto que se le da Entonces, aunque parezca que estás platicando con el modelo de lenguaje grande, solo está completando el historial de chat que se le proporciona de una manera que parece ser la más probable. Eso significa que la red neuronal, el modelo de lenguaje grande predice las siguientes palabras más probables partir de los datos en los que se entrenó Siempre que llame a una función API de la Open AI, API, siempre debe proporcionar el contexto completo, por ejemplo, el historial de chat completo para que el LLM pueda crear una finalización basada en este mismo contexto El LLM no tiene memoria, por lo que debe proporcionar todos los datos relevantes cada vez que solicite una finalización a la API Si quieres saber cómo funciona la API abierta , puedes, por supuesto, consultar la página web bajo la plataforma Open AI Com Docs. Esta es esta página aquí. También tienen un patio de recreo donde puedes probar las llamadas API proporcionando solo los datos. Entonces no tienes que escribir en ningún idioma de programa. Simplemente escribe los datos en un campo de formulario y luego llama a la API con esos datos, y se le presenta el resultado. También tienen ejemplos en diferentes lenguajes de programación y también documentación de sus bibliotecas para Python y para JavaScript. Y por supuesto, hay una documentación de referencia completa, que se puede encontrar aquí. Entonces, para el chat o para las terminaciones, necesitas echar un vistazo aquí Se trata de las terminaciones de referencia de la API de Doc, y luego , por ejemplo, crear, y luego tienes la documentación para completar la creación Y aquí puedes ver puedes cambiar el lenguaje de programación aquí. No Jazz está aquí y luego Python, y luego incluso puedes usar curl para ello. Entonces esta es una API de descanso, así que también puedes usar algo como curl o tal vez Postman, algo así Y aquí tenemos toda la descripción de todas las APIs, funcionalidades. Entonces, para usar la API y el patio de recreo, también, es necesario crear una cuenta haciendo clic en Registrarse. Entonces esto está aquí, y luego puedes ingresar tu dirección de correo electrónico, continuar ingresando una contraseña, o puedes optar por registrarte con Google, Microsoft o Apple. Y entonces si hiciste esto, te estás poniendo como, creo, como $5, si no recuerdo correctamente, para poder probar todo y poder probar la API. Y los $5 son créditos para los llamados tokens, y los tokens son, digamos, en términos generales, los tokens son palabras, pero en realidad también pueden ser partes de palabras. Así que casi siempre tienes más fichas que palabras. Creo que es más o menos un tercio más que palabras. Entonces hay que tener esto en mente. Siempre es un poco más después de que te hayas registrado, creo que obtienes 5 dólares de créditos por pagar los tokens. Cada token cuenta en las llamadas API. Entonces también los tokens que son devueltos por el LLM, también cuentan Y también, por supuesto, los tokens que le das al L&M Así que si tienes un historial de chat muy largo, por ejemplo, entonces tienes más tokens, claro, porque cada vez que llamas a la API, a la API de finalización, por ejemplo, tienes que proporcionar todos los datos, todo el historial del chat, por ejemplo Por lo que va a ser más costoso si tienes chats más largos. Deberíamos seguir adelante e inscribirse ya porque necesitamos una clave API para llamar a la API y seguir todos los ejemplos en este curso. Como dije, obtienes los $5 o algo así como créditos que puedes usar, y creo que esto es suficiente para todos los ejemplos aquí en este curso. Pero claro, esto depende de la cantidad de tokens que uses que le des al LLM, y ese LLM está regresando, claro, Entonces después de que te hayas registrado, puedes crear claves API, y esto te mostraré más adelante y también, por supuesto, cómo se llama a la API, pero ya puedes comprobarla aquí. Tienen un inicio rápido, y luego también puedes usar el patio de recreo aquí después de que te hayas registrado, después de haber iniciado sesión , entonces puedes usar todos los ejemplos aquí en el patio de recreo. Y luego jugar un poco con él. Pero de todos modos, estaremos usando la API muy pronto en la primera sección aquí en nuestra primera aplicación, que será un clon de chat GPT, algo así, una aplicación de chat, una simple Y en esto, podrás platicar con el modelo de lenguaje grande con la IA, y este será nuestro primer proyecto. Bien, entonces esto es todo para este video. Nos vemos en la siguiente. 3. Herramientas para usar en este curso: Bien, entonces en este video, hablaremos sobre las herramientas, las bibliotecas y frameworks que vamos a utilizar y qué conocimientos ya debes tener antes de tomar este curso. Entonces comencemos con JavaScript. Ya deberías poder programar en JavaScript, claro, más allá del nivel de un programa Hello World o copiar y pegar desde páginas web como desbordamiento de pila. Por lo que también debe estar familiarizado con la mayoría de las características de la versión seis de ACHMAScript como funciones de flecha, consulado, desestructuración y módulos, y también funciones de matriz como map lado del servidor, estaremos usando Node JS, y encima de eso, usaremos Astro Jaz Entonces deberías tener algunos conocimientos básicos del nodo JS, claro. El conocimiento profundo no es necesario ya que Astro abstraerá muchos conceptos como las funciones del manejador S Entonces deberías estar familiarizado, claro, con el gestor de paquetes Node JS NPM o con yarn o PMPM, algo así, porque lo estaremos usando para instalar paquetes y también para inicializar Un editor, voy a estar usando código VS, pero no tienes que hacerlo. Eso no es de ninguna manera un requisito. Entonces, si te gusta usar VIM, Emax, webstorm, bloc de notas, incluso eso no es problema También puedes usar un bloc de notas y un terminal. Por ejemplo, no es tan cómodo programar en este entorno, pero si quieres, podrías. Pero en los videos, uso el código de Visual Studio, que es una especie de estándar. Quizás la mayoría de las personas que usan o programan aplicaciones Javascript hoy en día usan código de Visual Studio, así que es por eso que lo estoy usando hasta aquí. Bien, entonces para el front-end, estoy usando React Jazz, pero también podrías estar usando un marco de biblioteca diferente como solid Jazz, view Selter No es demasiado difícil traducir el código o los conceptos a un marco diferente. Incluso podrías usar la manipulación dom manual simple también es posible porque interfaz de usuario no es tan elegante y es bastante básica. El front end no es más importante en este curso. Nos centraremos, por supuesto, en la IA abierta, API y en su uso. Para seguir el curso, directamente, debes tener algunos conocimientos básicos de reaccionar, claro, nada elegante. Pero especialmente las funciones de gancho como use state, use effect y use ref son importantes, algo así que deberías estar familiarizado con ellas. Pero como dije, podrías estar usando un marco diferente aquí, y luego necesitas usar alguna gestión estatal por allá, y deberías estar, por supuesto, familiarizada con eso entonces. Como último framework, utilizamos Astrogz ¿por qué Astro jazz y no algo así como Next Porque NextJS de alguna manera está acoplado, por supuesto, estrechamente con react, y Astro Jazz en contraste, permite el uso de diferentes tecnologías front-end Así que podrías usar el gas Astro con sofodor sólido de vista Jazz. etcétera. Además, es muy rápido de configurar y configurar. Y como nos estaremos enfocando en el uso de la API OpenAI, ni el servidor ni la tecnología front-end que se usa aquí importan tanto, sino más bien los principios de trabajar con un modelo de lenguaje grande, esto es lo que realmente es importante para ti en este curso Así que también podrías usar, claro, Siguiente sí si quieres. Pero como dije, AstroJS está abierto a diferentes tecnologías front-end, así que lo estoy usando aquí Oye, estas son las herramientas y frameworks y bibliotecas que estamos usando aquí en el siguiente video. Empezamos con nuestro primer proyecto. Nos vemos entonces. 4. Creación de nuestra primera aplicación de astro: Todo bien. Aquí vamos a crear nuestra primera aplicación de servidor AstroGs, y esta es la aplicación que llamará al servidor, llamará a la API Open AI para nosotros, y también serviremos el HML y el código react al navegador, y luego obtendremos nuestra aplicación de chat en teoría Entonces aquí es donde empezamos. Tenemos nuestra carpeta padre. En este caso, es DAI, y voy a llamar a NPM create, create. Y entonces esto va a crear una app, y qué app es una app de Astro, así que llamamos PM Create Astro y regresamos. Y somos recibidos por un buen robot, y dice, Houston vamos a construir la web que queremos Entonces está preguntando, Bien, entonces nos está diciendo secuencia de lanzamiento iniciada. Y entonces, ¿dónde deberíamos crear nuestro nuevo proyecto? Y este será el nombre de nuestro proyecto y la subcarpeta, claro Y en nuestro caso, lo voy a llamar chat AI, ya que esta será una aplicación de chat, una aplicación de chat genérica como chat GBT, mucho más simple, pero esto es lo que hacemos primero Entonces ingresa, y luego está preguntando, si incluye archivos de muestra en se recomienda aquí, pero partimos de un proyecto vacío, así que tampoco usamos la plantilla de bloque, y elegimos vacío. Y luego me pregunta si debería instalar las dependencias, se los módulos NPM Node, llamará a los módulos NPM Node, NPM install, y claro, sí, solo hazlo, entonces no tengo que hacerlo Esto tomará un poco porque es descargar todos los paquetes e instalarlos. Esto puede tomar un minuto tal vez dependiendo de tu conexión a Internet, claro. Bien, entonces la última pregunta aquí, ¿planeas escribir Typescript Y en este caso, no, puedes, claro, usar TypeScript, pero no lo voy a usar aquí porque va a complicar las cosas y me voy a concentrar en JavaScript reaccionar y no Jazz Así que no enter, y me dice que no te preocupes, TypeScript es compatible, y puedes editar Entonces, bien, no fue la última pregunta, pero aquí está inicializar un nuevo repositorio Git y no, gracias Y luego nos está diciendo, buena suerte ahí fuera, astronauta Bien, muchas gracias. ¿Qué tenemos ahora? Tenemos una subcarpeta llamada AIChat porque este es el nombre que le dimos Aquí tenemos archivos. Pero primero, revisemos las subcarpetas. Aquí tenemos los módulos de nodo que se instalaron con MPM install desde el asistente de Astro aquí, y tenemos público, y este solo contiene un icono FAF Este es el ícono de SVG FAF que se incluye en el proyecto. Y tenemos fuente. Tenemos páginas bajo fuente. Y ahí tenemos nuestro índice Astro index dot Astro, que es una especie del índice HGML que se entregará al navegador, pero primero será compilado por Astro Esencialmente, esto es HGML y esto se mostrará en el navegador Podemos comprobarlo y ya podemos ejecutar el servidor con Okay, así que primero tenemos que hacer un CD en esa subcarpeta que acabamos de crear, CD AI chat, y luego podemos llamar a NPM Esto ejecutará un script que aparece en el paquete. Jason, aquí tenemos los scripts, y queremos este script Def llamado Dev esto llamará Astro Def Astro es un script shell, y lo puedes encontrar aquí en módulos de notas punto bin, y aquí está Astro, y esto se llamará entonces con el argumento Dev Bien, así que llamemos a NPM run Def, y esto ojalá inicie nuestro servidor Y aquí está, anfitrión local 3 mil. Lo comprobamos en el navegador. Aquí está Astro un H uno aquí, y esto es esencialmente, como dije, lo que tenemos en el índice Astro en este archivo aquí. Y podemos, por supuesto, cambiarlo. Cambiémoslo a chat de IA. O AichatBT, lo que sea. Y aquí puedes colocar, claro, algo de HTML si quieres un DIV y lo que quieras. Podemos tener nuestra raíz de reacción tal vez aquí más tarde. Pero revisemos el navegador, y automáticamente volvió a cargar la página por nosotros, y ahora tenemos el bot de chat de IA aquí en el encabezado Bien, entonces esa es nuestra primera aplicación con Astro JS, y continuaremos en el siguiente video. 5. Añade React a nuestra aplicación: Bien, entonces ahora vamos a agregar react a nuestra app Astro, primero cancelando esta bn run Def aquí Entonces nuestro servidor ya no se está ejecutando aquí, y estoy pegando en este comando Este comando es Npx Astro add react, y está usando el script de Astro Shell para agregar soporte de reacción a nuestra aplicación Astro Entonces solo escribe este Npx Astro add react, y debería agregar el soporte de react Resolviendo paquetes, y es preguntarnos si queremos continuar, sí, claro, instalando dependencias, y esto también instalará algunos paquetes de nodos Continúa, y va a cambiar nuestro Astricfic MGS Bien, entonces también está cambiando nuestro TS config JSN o creándolo. Realmente no importa. Sí, continúa, y ya está. Bien, entonces ahora tenemos nuestro soporte de reacción, vamos a revisar el paquete Jason. Añadió tipos. Entonces podemos ver aquí reaccionar y Rec Dom, y también agregó reaccionar y reaccionar Dom, por supuesto, la versión 18, ambos. Y ahora podemos usar react dentro de nuestra app. Pero claro, primero, necesitamos un componente react, y los componentes están dentro de los componentes de la subcarpeta Entonces un RC, creamos una nueva carpeta. Y lo llamamos componentes. Y dentro de esta carpeta de componentes, podemos crear un nuevo archivo, lo llamamos index dot JSX, y este será nuestro principal componente react Entonces podemos incluir esto en el punto índice Astro, y podemos incluirlo en esta área aquí. Entonces tenemos los tres guiones, y entre los tres primeros guiones y el último, podemos escribir nuestra importación y podemos importar aquí el componente react, nuestro índice JSX, e importamos app desde, entonces será una importación por defecto, y exportar por defecto desde componentes punto punto, y ahí tenemos nuestro índice JSX, y por el momento, está vacío, así que obtenemos un error aquí porque no es realmente un módulo, pero ahora podemos usar este componente app aquí como lo hacemos en JSX Aquí falta algo. Tenemos que poner aquí un nuevo atributo, solo dos puntos cliente, y luego tenemos que configurarlo para que reaccione aquí. Bien, y esto le dirá a Astro que este componente se renderizará en el cliente, solo en el cliente y no en el servidor, por lo que no usamos la representación del sitio del servidor aquí. Bien, entonces esto está vacío por el momento, así que tenemos que poner algo adentro, exportar la función predeterminada y luego devolver algunos JSX Por el momento, esto debería ser suficiente. Y ahora iniciamos nuestro servidor. Verificamos el navegador, host local 3,000 AI chatbot que lo que teníamos antes, y luego tenemos app aquí Y cuando revisamos el HML aquí, Dom tenemos este DIF con app en él, y este es nuestro componente de reacción Y aquí el padre de este componente react es Astro island, y esta isla Astro es nuestra raíz de reacción en este caso, y Astro puede mezclar y combinar todos los diferentes componentes de la interfaz de usuario como Svel view jazz, react, solid Jazz, y lo pone dentro de estas islas Astro Pero esto no es tan importante para nosotros. Importante es que tenemos nuestro componente react aquí, y aquí es donde podemos escribir nuestro JSX, y podemos simplemente escribirlo como cualquier otro componente react Bien, entonces tenemos nuestro primer componente de reacción, y a partir de ahí, podemos simplemente construir una aplicación de reacción aquí, y el siguiente paso será tener una función de sitio de servidor que llame a la API Open AI, y esto explorará en el siguiente video. 6. Adición de nuestro primer punto de extremo REST para servidores: Bien, entonces ahora que tenemos nuestro primer componente react, podemos continuar escribiendo nuestro primer código de servidor y aplicación directa ejecutándose en el navegador, llamaremos a la API del servidor para finalmente contactar con la API de Open AI y luego recuperar la finalización del chat. Entonces necesitamos un componente de servidor que se ejecute en ningún JS, y este será nuestro primer punto final. He hecho una subcarpeta debajo de páginas, páginas donde nuestro índice Astros y la subcarpeta Y dentro de API, tengo este módulo JS JavaScript llamado chat dot js. Y en su interior, tenemos una exportación de la función G. Y lo esto hace es que le dirá a Astro que en este camino, decir, API chat, habrá un manejador G Entonces, si pongo esto en la barra de direcciones del navegador, se debería llamar a este manejador porque el navegador hace una solicitud G al servidor de ahí Y nuestro código debería ser ejecutado aquí. Entonces estamos exportando una función ASIC porque queremos usar en este momento, no la usamos, pero vamos a estar usando un peso en su interior Entonces ya puse el ASN frente a la función. Entonces, ¿qué está haciendo esta función? Obtiene una solicitud. Obtiene un objeto, y dentro, hay una propiedad request, y no la estamos usando en este momento, pero luego lo haremos y luego devuelve una nueva respuesta, y esta será la respuesta que se envía al navegador. Y dentro de la respuesta dentro del constructor aquí, podemos especificar el cuerpo de la respuesta, y esta será cadena JSN, es decir, JSN stringify de este simple objeto aquí, este objeto literal con una propiedad answer y Por lo que este será enviado en el cuerpo al navegador. Y luego tenemos algunos encabezados más y estatus. El estado será 200, que significa bien, así que todo está bien, y el encabezado establece el tipo de contenido aquí a la aplicación JSN Entonces el navegador sabrá que esto es JSN en el cuerpo. Bien, así podemos enviar encabezados aquí y podemos enviar más encabezados, no solo el tipo de contenido aquí, sino todos los demás encabezados que nos gustaría usar. Y el código de estado puede ser, por supuesto, algo más como una flecha como 500 si hay un error en el servidor o 400 o 401 o algo así. Entonces por el momento, todo va a funcionar bien. Entonces ponemos aquí 200, lo que significa bien. Entonces esto se devuelve al navegador como respuesta, y podemos probarlo simplemente escribiendo en la ruta aquí, API, como dije, y luego chatear, y el servidor sabe a qué módulo y a qué función llamar ahí. Entonces aquí lo tenemos. Contesta, hola. Este es el JSON que se devuelve aquí. Bien, ahora tenemos nuestra primera función de sitio servidor, y esto se está ejecutando en ningún Jz Importante aquí es que lo pongamos en el camino correcto, claro. Hemos creado una subcarpeta llamada API. Hay todas nuestras funciones API como chat o tal vez más tarde tenemos más funciones como esa. Tenemos tal vez no sólo un get, podemos poner un post aquí. Entonces si exportamos un post aquí, se llamará el navegador, si el cliente envía un post o put o delete o lo que sea. Bien, entonces ahora tenemos nuestra primera función de servidor, y aquí podemos llamar a la API Open AI y obtener nuestro chat completado. Nos vemos en el siguiente video. 7. Preparación para llamar a la API de IA abierta: Bien, entonces en este video, vamos a hacer los preparativos para llamar a la API Open AI, y primero, debes registrarte en la plataforma Open AI. Entonces estamos poniendo en la plataforma URL punto OpenAI y aquí puedes registrarte. Y luego ya sea con una dirección de correo electrónico y contraseña o puedes continuar con Google, Microsoft o Apple. Y una vez que hayas hecho esto, estás dentro de tu cuenta aquí, y luego lo tienes bajo claves de API de usuario. Y aquí puedes crear una nueva clave API, y puedes usar esta clave API para acceder a tu cuenta. Y esto es lo que primero tienes que hacer, crear nueva clave secreta. Entonces voy a hacer esto aquí y llamarlo test key. Crea una clave secreta aquí. Y esto es importante. Tienes que copiar esta llave ahora y ponerla en algún lugar seguro. Por ejemplo, puedes copiarlo a tu portapapeles y luego pegarlo en tu código fuente Al igual que aquí, voy a hacer un comentario y luego poner la llave. Entonces aquí tienes la llave y está guardada. ¿Por qué es importante esto? Porque después, una vez que hayas cerrado este diálogo, ya no podrás acceder a la clave. Simplemente ves las dos primeras letras y los últimos cuatro caracteres aquí, pero no puedes acceder a la clave completa aquí, así que tienes que crear una nueva si alguna vez la olvidas o si no la guardaste. Entonces esto es todo lo que tienes que hacer aquí, y creo que si te registras como nuevo usuario, obtendrás $5, algo así, créditos, y primero puedes usar los $5 antes de tener que pagar. Y creo que $5 es más que suficiente para probar todas nuestras aplicaciones de ejemplo aquí. Entonces 5 dólares deberían ser suficientes para eso. Si necesitas más, entonces tienes que pagarlo. Y una vez que tengas tu llave secreta, como dije, necesitas guardarla en alguna parte. Lo he puesto aquí. Pero por ahora, también eliminaré aquí esta clave de prueba, y eliminaré todas las claves. Estoy usando aquí en el curso antes de publicar el curso, claro, porque no quiero que uses mis llaves porque tengo que pagarlo. Entonces necesitas crear tus propias claves secretas aquí. Ahora vamos a instalar el paquete API abierto, ningún paquete JS. Y esto es muy fácil. Necesitas ir a tu directorio principal, y este es un I chat en mi caso, y luego tienes que llamar a NPM Install open AI, regresar, esperar un poco, y ahora ya está hecho Y echamos un vistazo al paquete JSON, y vemos que Open AI se agrega a la lista de dependencias, y esta es la versión tres punto cero Ahora ya podemos usar el paquete. Así que vamos a nuestro chat punto JS. Ahora tenemos primero que importar el paquete OpenAI. Así. Entonces tenemos configuración. Necesitamos tanto la configuración como la API Open AI, y aquí tendremos nuestras funciones a las que llamar. Y aquí tenemos la configuración que necesitamos para llamar a estas funciones. Así que lo primero que tenemos que hacer es crear una nueva configuración con nuestra clave API. Entonces ya lo he preparado. Y como veis, esta es una clave diferente, pero también voy a estar borrando esta clave por supuesto, antes de publicar el curso. Así que por favor crea uno nuevo. Esto ya no va a funcionar. Bien, entonces creamos una nueva configuración con nueva configuración, y la configuración es algo que importamos del paquete Open AI. Entonces necesitamos suministrar un objeto con la clave API de propiedad, y ahí tenemos la clave secreta en una cadena, y luego recuperamos la configuración. Y esta configuración, podemos usarla ahora para crear una instancia de la API de IA abierta y la llamamos AI abierta. Es una y nueva API de IA abierta con configuración. Esto es muy sencillo. Y ahora tenemos la IA abierta, y podemos comprobar lo que hay ahí dentro. Tenemos crear finalización de chat, que es una función muy importante aquí o método, y vamos a estar usando este mucho. Y aquí también hay otras funciones. Se puede echar un vistazo, pero también se puede echar un vistazo, por supuesto, en la documentación de la página web. Entonces, si revisamos de nuevo, documentación y referencia de API, la documentación te da tutoriales y visión general de los procesos y la referencia API describe todas las llamadas a funciones allí con todos los parámetros. Bien, así que si alguna vez tienes dudas sobre la API, puedes usar la documentación en referencia de API en platform.openai.com Bien, así que volvamos a nuestro código. No estoy usando la finalización de crear chat aquí, pero la estaré usando aquí en la función GT. Pero antes de eso, crearé una nueva función, y esta nueva función hará la finalización por nosotros. Haremos la llamada de la función Open AI aquí. Y tiene que ser una función ACN porque voy a usar una espera aquí Entonces es ACN función chat completo. Ese es el nombre de mi función. Y luego nuevo mensaje. Este es el primer mensaje que estaremos enviando al OpenAI, API, y luego llamamos a un peso porque es asincrónico openi crear finalización de chat, el método que mencioné ya, tenemos que suministrar para crear finalización de chat, un objeto literal aquí, y esto especifica el modelo, y este es el último modelo aquí, GPT 35 turbo enviando al OpenAI, API, y luego llamamos a un peso porque es asincrónico openi crear finalización de chat, el método que mencioné ya, tenemos que suministrar para crear finalización de chat, un objeto literal aquí, y esto especifica el modelo, y este es el último modelo aquí, GPT 35 turbo oh 613 Th es el último modelo que también admite llamadas a funciones. Entonces puedes usar GPT 35 Turbo, y vas a estar consiguiendo dependiendo cuando lo hagas, por el momento, vas a estar consiguiendo el viejo modelo, pero tal vez en el futuro, también vas a estar consiguiendo este modelo aquí Pero para estar seguros, puse oh 613 al final porque quiero este último modelo. Bien, entonces tienes que proporcionar mensajes, y este será nuestro historial de chat y la IA Abierta. API responderá con una finalización de este historial de chat de estos mensajes, y generará un nuevo mensaje que completará el chat. Y los mensajes, propiedad es solo una matriz de mensajes. Entonces aquí tenemos un mensaje en este objeto, que suministrar rol, que es usuario en este caso, algo en lo que el usuario escribe, por ejemplo, y el contenido está arreglado aquí y el contenido es hola, así que está iniciando la conversación con un hola y la API Abierta completará esto con un nuevo mensaje y este nuevo mensaje será devuelto aquí en respuesta de finalización, y respuesta de finalización contiene datos, opciones, necesidades normales una opción por defecto. Entonces choices es una matriz, y accedemos a la primera. Y entonces en esto, es el contenido del punto del mensaje. Y ahí en esta propiedad el contenido, tenemos nuestro mensaje real, la finalización que el modelo Open AI nos da aquí, y esto es lo que regresamos de esta función. Chat tan completo. Tenemos que llamarlo, claro, y esto es tan simple como esto aquí. Entonces tenemos la respuesta aquí, esperamos el chat completo, y obtenemos el texto de finalización del modelo como la respuesta aquí, y luego podemos eliminar esto aquí, y devolvemos la respuesta como una cadena JSON. Ahora podemos probarlo. Esta es una clave válida aquí. No lo he borrado en este momento, así que debería funcionar y volvemos a ir a nuestro servidor def, y luego llamamos a la función API chat, la función Get, sí, obtenemos una respuesta, y esta vez es Hola, ¿cómo puedo atenderte hoy? Esto fue generado por el modelo de lenguaje lodge de Open AI esto es lo que se devolvió. Yo lo vuelvo a cargar, a lo mejor me da una respuesta diferente. Lo vuelvo a hacer. Sí, ahora en realidad es una respuesta diferente. Hola ahí. ¿Cómo te puedo ayudar hoy? Es casi lo mismo, muy similar, pero es diferente. Y otra vez, hola, ¿cómo puedo atenderte hoy? Aquí obtenemos la respuesta real del modelo. Ahora podemos construir sobre esto. Podemos agregar más mensajes aquí para que el usuario pueda responder a este mensaje generado, y luego el modelo de lenguaje grande volverá a responder a esto y de ida y vuelta. Y esta será nuestra charla, pero más en el siguiente video. 8. Proporcionar el mensaje de usuario a través de parámetros de URL: Entonces en el video anterior, usamos un mensaje fijo llamado hola y solo enviamos este a la Open AI, API, así que este es un saludo constante. Y podemos primero, podemos sustituir esto por un nuevo mensaje. Entonces pon esto aquí, y vamos a comprobarlo. Estamos brindando aquí, nada. Por lo que necesitamos proporcionar un mensaje proporcionado por el usuario aquí para completar el chat. ¿Y de dónde lo sacamos? Lo obtenemos del parámetro URL, la parte posterior al signo de interrogación, y ¿cómo podemos acceder a esto en Astro Js? Primero, necesitamos estructurar la URL aquí. Entonces Astro nos da la URL. Y cuando tengamos la URL, solo podemos acceder a los parámetros de búsqueda aquí Así. Entonces L punto busca parámetros, y ahí obtenemos un param específico, que se llama MSG para mensaje, y obtenemos esto con la función punto G Entonces después de esto, podemos conectarlo en consola MSG, y vamos a probarlo. Nos sale un error. Bien, eso no es bueno. Comprobemos lo que tenemos aquí. La solicitud falló con el Código de Estado 400. Bien, creo que esto es porque contenido nuevo mensaje es nulo aquí. Entonces necesitamos proporcionar un mensaje, y podemos simplemente llamar al chat completo con MSG. Entonces hagámoslo. Y nuevamente, error. Bien. ¿Qué es ahora? Aún así, tenemos los 404 cien medios mal pedido. Entonces estamos haciendo una mala petición aquí, chat, chat completo. Y charla completa. Entonces esto sigue siendo nulo o indefinido. Entonces esto es un problema. Así que pongamos aquí hola otra vez. Hola. Y vamos a comprobar si esto está funcionando. Bien, esto funciona. Comprobemos la salida aquí. Nulo, nulo, nulo, nulo. Bien, entonces MSG es nulo, y ¿por qué es eso? Esto se debe a que nuestro Astroconfc MGS no está completo. Tenemos que poner algo aquí, y esto es servidor de salida, que es necesario porque necesitamos habilitar el renderizado del sitio del servidor aquí. De lo contrario, Astro Js renderizará las páginas estáticamente, y en este caso, no tenemos acceso a los parámetros URL y URL aquí Así que de nuevo, Astrocfi Js, necesitas poner salida al servidor para habilitar la renderización del sitio del servidor, y luego podremos acceder dinámicamente aquí a la URL y los parámetros de búsqueda y obtener nuestro Bien, así que volvamos a poner el MSG aquí, MSG así, y vamos a intentarlo de A lo mejor no hola, pero hola mundo estaría mejor aquí, entonces Bien, entonces ¿cómo puedo atenderte hoy? Esa es la respuesta. Comprobemos la salida del servidor aquí. Hola mundo. Entonces esto parece funcionar. Y podemos ingresar nuestro mensaje aquí en la URL, en el parámetro MSG Probemos otra cosa. A lo mejor, ¿cómo es el clima hoy en día? No lo va a saber. Pero de todos modos, vamos a comprobar cuál es la respuesta. Lo siento, pero como modelo de lenguaje de IA, no tengo información en tiempo real. Bien, es honesto. Para conocer el clima hoy, puede consultar una página web confiable del tiempo, sitio web o una aplicación de pronóstico del tiempo en su teléfono Supongo que eso es cierto, así que esa es una buena respuesta, supongo. Y ese es nuestro primer chat con un mensaje de chat proporcionado por el usuario. Ya no está arreglado aquí. Proporcionamos el nuevo parámetro de mensaje para completar el chat y este mensaje se obtiene de la URL, de los params de búsqueda y proporcionamos aquí en el parámetro MSG después del signo de interrogación, MSG es igual a cómo es el clima hoy, llamaremos a esta URL, esta API resto desde el código Para que esto funcione, nosotros por supuesto, tenemos que crear un componente de reacción y esto lo hará en el siguiente video. 9. Primera interfaz de usuario real con un cliente en React: Volvamos a nuestro componente de reacción. Lo he extendido un poco para incluir un campo de texto de entrada. Este es este, un botón Enviar, este es este, y un div de salida que estará aquí, este, y la idea es que por supuesto, el usuario está ingresando texto aquí y luego haga clic en el botón Enviar, y luego este texto que se ingresó aquí se envía al servidor y a su vez, enviarlo al servidor lo enviará a la API de Open AI, obtendrá la respuesta del idioma model, envíelo de vuelta al componente react aquí, y luego lo configuramos aquí en este estado con set answer. Te llamamos estado con respuesta y set answer aquí, y esta respuesta se mostrará entonces aquí en el DIV y lo que falta aquí es, por supuesto, nuestra Arena. Entonces necesitamos definir aquí una función onclic, a que se llamará cuando el usuario haga clic en el botón Enviar Y entonces tenemos que hacerlo, ¿qué tenemos que hacer aquí? Necesitamos llamar a Fetch para llamar a la API del servidor, a la API del resto, a nuestra API de resto Entonces este será proceso asíncrono, y necesitamos usar o quiero usar al menos una función asíncrona aquí Entonces puse Asincrónico antes de esa declaración de función, y aquí puedo usar un fetch weight Y necesitamos proporcionar la URL aquí, que será API slash HAT entonces el parámetro URL después del signo de interrogación Ms G es igual, vamos a poner solo hola aquí para fines de gebugging, para fines de prueba Bien, entonces, ¿qué obtenemos de Fetch? Obtenemos una respuesta ressponse Y luego necesitamos obtener el cuerpo de la respuesta, y esta será la Entonces llamo respuesta, y esto será JCN, llamo respuesta punto JSN y esto también será un proceso asincrónico, y es por eso que uso una espera aquí Bien, entonces así es como obtenemos la respuesta. Ojalá, obtengamos API SlahaTqimrk MSG es igual a hola. Y en la respuesta que obtenemos, llamamos respuesta punto JCN si, solo la consola lo registro aquí Sólo para probarlo. Bien. Entonces aquí lo tenemos, y solo puedo hacer clic en el botón Enviar, y ojalá obtengamos algo aquí. Y si, funciona. La respuesta es Hola. ¿Cómo puedo atenderte hoy? Muy bonito. Y entonces podemos proceder a establecer la respuesta y responder punto respuesta será nuestro texto, y esto es lo que necesitamos para establecer el estado dos. Entonces es respuesta punto respuesta, y esto lo usamos aquí para establecer respuesta, y luego este componente rec se renderizará nuevamente, y la respuesta debe mostrarse aquí en nuestro div de salida. Bien. Así que vamos a ver esto. Hola. ¿Cómo puedo atenderte hoy? Muy bien. Está funcionando. Está funcionando. Bien, entonces lo que falta es que necesitamos obtener la entrada del campo de entrada aquí. Y es por eso que puse un Rf en esta entrada. Entonces llamo a usar entrada de mensaje Ref, y obtengo acceso a ellos nodo al elemento DOM aquí vía entrada de mensaje punto actual. Entonces solo declaro una entrada constante, y esta será la entrada de mensaje punto actual valor de punto. Este será el texto que fue ingresado por el usuario. Usaremos esta entrada en lugar de este hola fijo. Entonces solo MSG es igual, y luego más entrada. Bien. Entonces vamos a probarlo. Cómo es el clima hoy y presiona en enviar lo siento, pero como IA, no tengo información en tiempo real. Esto ya lo sabemos, pero está funcionando. Sí. Entonces aquí puedes ingresar tu mensaje de chat, presionar Enviar, y luego obtienes la respuesta aquí en este div. Así que vamos a comprobarlo de nuevo. Tenemos nuestro estado aquí con estado. Esta es la respuesta del modelo de idioma, y tenemos nuestro ref aquí para ingresar mensajes. Esto se usa como este mensaje input dot current es el elemento Dom, el elemento de entrada Dom, y ahí tenemos el valor del texto de entrada. Y esto se usa aquí para buscar nuestra API. Y entonces la respuesta es JSN. Es por ello que llamamos respuesta punto JSN que va a obtener el cuerpo y luego lo analizan. Y tenemos respuesta, que contiene a su vez respuesta. Nuevamente, podemos llamarlo responder JSN o responder objeto, algo así Responder objeto, y luego responder objeto punto respuesta será el texto. Y set answer se utiliza para establecer nuestro estado para responder objeto punto ASE a texto. Bien, esta es una muy sencilla. Ni siquiera es una charla. Es solo una finalización. Es una sola vez. Entonces cada vez que envíes algo, simplemente completará esto. El modelo de idioma completará esto, pero no puedes tener un chat, un chat completo porque solo estamos enviando aquí la última entrada. Y entonces el modelo de lenguaje acaba de tener esta entrada y la completaremos. Entonces es solo un mensaje de una sola vez que va al modelo de idioma y luego esto se completa y la respuesta la finalización se da salida aquí en el DIV. Entonces esta no es una aplicación de chat completa en este momento, pero ésta se extenderá, por supuesto. Pero este es nuestro primer modelo de trabajo con UI, y puedes poner cualquier cosa aquí, y el modelo de lenguaje lo completará, y te daremos una respuesta que ojalá tenga sentido de una u otra manera. Bien, esto es para esta escena de video en la siguiente. 10. Guardar el historial de chat: Entonces ahora creamos una especie de app pregúntame cualquier cosa, pero aún no es una aplicación de chat real. Podemos enviarle un mensaje al modelo de idioma, y éste completará el mensaje, y responderá a la pregunta. Pero no hay memoria involucrada, y no recuerda ningún historial de chat. Y así el siguiente mensaje que envíes al modelo será el primer mensaje nuevamente, y el modelo de idioma ni la API OpenAI Puedo recordar cualquier cosa. Entonces tenemos que encargarnos de esto, y tenemos que enviar el historial de chat completo para tener una conversación con el modelo de idioma. Y entonces esto es lo que hacemos en este video. Tenemos que guardar la conversación y enviar el historial completo de la conversación a la API de IA abierta. Entonces hay dos posibilidades para hacer esto. Podemos guardar el historial de chat en el cliente en el navegador o podemos almacenar en el servidor almacenarlo en el servidor tiene varias ventajas, una es que no tenemos que enviar todo el historial desde el cliente, desde el navegador al servidor una y otra vez, sino solo el último mensaje que ingresó el usuario. Además, podemos almacenar el chat en una base de datos en el servidor y acceder a él desde cualquier lugar. Entonces, en esta lección, usamos el enfoque del lado del servidor y almacenamos el historial de mensajes en el servidor en una simple variable. Y esta es la variable. Se llama mensajes, y se inicializa a una matriz vacía, y agregaremos mensajes a esta matriz cada vez que el usuario envíe un nuevo mensaje y también cuando el modelo de lenguaje nos dé la finalización Tenemos que empujar un nuevo mensaje cada vez que esto suceda. Entonces lo primero o el primer punto que tenemos que agregar el mensaje es en esta ubicación aquí, podemos simplemente empujar una nueva entrada a la matriz de mensajes, y este es el mismo formato, la misma estructura que enviamos a la API OpenAI Entonces tenemos que ponerlo así, un objeto con el rol y el contenido. Entonces lo estoy empujando rol usuario porque el usuario envía el mensaje y el mensaje será el contenido será MSG Y aquí solo podemos darle la matriz de mensajes a la función de chat completa. Estos serán los mensajes de matriz, y no tenemos que hacerlo aquí. Podemos simplemente proporcionar mensajes aquí. En esta breve forma. Por lo que el chat completo recibe mensajes, y lo ponemos en la solicitud a la AI abierta, creamos la función de finalización de chat. Entonces nada más aquí, y lo probamos. Ahora bien, si sigue funcionando, aún debería funcionar porque cambiamos básicamente no hemos cambiado nada. Por lo que aún debería funcionar. ¿Cómo estás? A ver. Como IA, no tengo sentimientos. Bien, parece que sigue funcionando, y no es de extrañar porque no hemos cambiado nada. Pero ahora tenemos el mensaje en la matriz de mensajes, y la próxima vez que el usuario ingrese un mensaje, podemos empujarlo aquí, y luego cada mensaje cada mensaje de usuario se guarda en la matriz de mensajes. Pero eso no es suficiente. Necesitamos agregar también la respuesta a la matriz de mensajes. Entonces copiando recibe la respuesta de la función de chat completa. Y el rol esta vez el rol no es usuario, sino que es asistente, contenido será respuesta, y eso debería ser todo. La respuesta se enviará al navegador aquí, pero guardamos la respuesta también en la matriz de mensajes. Entonces, la próxima vez que el chat completo se llame mensaje, el mensaje del usuario, y la respuesta estará en la matriz, y también el nuevo mensaje de usuario estará ahí. Bien, así que vamos a probarlo. Sólo vuelve a cargar la página. Y entonces, ¿cómo es el clima hoy? Envía, discúlpate. Bien. ¿Puedes recomendarte una app para ello y enviarla Y veamos a qué responde. Ciertamente, aquí hay algunas aplicaciones meteorológicas populares. Entonces esta es la prueba de que realmente hemos guardado la conversación porque me refiero aquí a mensajes o a un mensaje de usuario que se le ha preguntado antes porque me refiero aquí a él, a una aplicación para ello, y debería ser una aplicación del tiempo o una aplicación de pronóstico del tiempo O también podemos, por supuesto, sacarlo aquí. Así que cada vez que empujamos la respuesta aquí, también podemos consolar los mensajes de registro. Bien, entonces esta vez, realmente debería reiniciar el servidor porque de lo contrario, tendré el historial de chat de antes. Y esto no es lo que quiero aquí. Así que estoy reiniciando el servidor, y los mensajes serán una matriz vacía ahora Bien, de nuevo, cómo es el clima Hoy, envío y luego casi la misma respuesta que antes. ¿Puedes recomendar o en esta ocasión, podemos preguntar si puede recomendar una página web o sitio web para ello Bien, envía sin duda weather.com. Bien. Así que vamos a revisar la salida aquí, empezando por aquí. Así contenido serole El tiempo de la casa hoy. Esto es lo que he ingresado en la interfaz de usuario. El asistente contestó, me disculpo, pero como modelo de lenguaje de IA, bla, bla, bla Y ahora, ¿puedes recomendarle un sitio web para ello? Nuevamente, usuario de rollo. ¿Cómo está el clima hoy? ¿Ayudante? Pido disculpas. Ahora, el nuevo mensaje aquí, ¿ puedes recomendarle un sitio web para ello? Y luego la respuesta del modelo lingüístico, sin duda aquí están algunos. Popular y confiable, ya sean sitios web, bla, bla, bla Entonces sí, parece que funciona. Tenemos nuestro historial de chat. único problema aquí es que necesitamos reiniciar nuestro servidor para que se olvide de los mensajes y para reiniciar la conversación. Y tenemos que pensar en algo para probablemente restablecer los mensajes ahí a una matriz vacía, tal vez una idea que se regenera cada vez que se recarga la página, algo así como Um, pero por el momento, esto es, digamos, no está completa, no es una aplicación de chat completa, pero es una aplicación de chat Ahora mismo, puedo chatear con un modelo de idioma, y el historial se guardará y utilizará la próxima vez que envíe un mensaje a la modelo. Esto es para este video. Nos vemos en la siguiente. 11. Descanso del chat: Entonces ya tenemos una aplicación de chat que funciona, pero también tenemos un pequeño problema aquí, pero esto es fácil de resolver. El chat no se puede restablecer en este momento sin reiniciar o reiniciar Entonces tenemos que resolver este pequeño problema. me ocurre esto, guardando el ID de chat actual, y el ID se enviará desde el cliente al servidor. Esto está aquí en las perms de búsqueda de URL. Habrá un nuevo param, que será ID. Y el nuevo ID de chat se compara con el ID de chat actual, y si estos son desiguales, entonces la matriz de mensajes se restablece a una vacía Entonces lo que queda por hacer aquí es solo generar un nuevo ID y suministrarlo aquí a través de un parámetro URL, que debe llamarse ID. Y entonces tenemos que dirigirnos a nuestro componente aquí, nuestro componente de reacción y nuestra búsqueda. Entonces ya tenemos este MSG como parámetro, y luego tenemos que agregar este nuevo Pero mejor que use una cadena de plantilla aquí dentro de estas garrapatas traseras puedo insertar mejor las variables aquí. Entonces MSG y luego dólar dólar, claro, llaves rizadas, ahí va nuestra entrada Y luego un porcentaje e ID es igual. Y sí, tenemos que llegar a una identificación con una nueva identificación, y esta identificación debe ser guardada. Aquí, podemos simplemente ponerlo aquí. Const ID es igual. Por ejemplo, podemos usar fecha ahora y esta será nuestra identificación, fecha ahora dos cadena, y esta será nuestra identificación. Y cada vez que se recarga esto, se vuelve cargar la página Creamos un nuevo ID, que será fecha ahora en tiempo Unix. Bien, entonces esto debería ser, suministrando la identificación aquí. Y vamos a probarlo. Entonces le estoy preguntando al modelo de idioma, ¿cómo estás Enviar? Y veamos cómo estás. Entonces ya tenemos la nueva D aquí porque la matriz de mensajes solo contiene estos dos mensajes. ¿Cómo estás? Y la respuesta del modelo lingüístico. Como IA, no tengo sentimientos. Puedo preguntarle por qué por qué. Y veamos, la pregunta de por qué es una muy amplia y de extremo abierto. Bien, ¿podemos pedir una explicación? Lo que sea. Aquí no está funcionando porque el área de mensajes se restablece de nuevo. Entonces algo anda mal aquí. Nuevo ID de chat. Vamos a registrar la consola el ID de chat aquí. Nuevo ID de chat. ID de sombrero. Y vamos a ver. Entonces otra vez, ¿cómo estás? Y el ID de chat será este, ¿de acuerdo? Entonces la próxima vez, ¿por qué? Enviar. No, es lo mismo. Bien. Entonces es la misma identificación. Entonces el servidor, vamos a comprobar la lógica aquí. Obtenemos la misma D. Bien, ya veo. No lo hemos guardado. Por lo que debería ser el ID de chat actual. Debe ser enviado, por supuesto, a nuevo ID de chat en este caso. Bien, así que vamos a intentarlo de nuevo. Vamos a recargar. Y ahora ¿cómo estás? Bien, ¿cómo estás? Y la respuesta. Y ahora me pregunto, ¿por qué? A ver si de verdad. Bien, entonces esto se ve mejor. ¿Cómo estás? Gracias por preguntar. ¿Por qué? Como idioma AA estoy diseñado para brindar información, responder consultas y ayudar. Entonces, si recargamos la página, debería reiniciar el chat Además, ¿cómo estás? Ahora tenemos una nueva matriz de mensajes con solo el mensaje del usuario y la respuesta del modelo de idioma. Bien, entonces eso parece funcionar. Y cada vez que quieras restablecer el historial de chat, solo tienes que volver a cargar la página aquí, y ya está Bien, entonces tenemos una especie de aplicación de chat completa. No del todo. Tenemos que restablecer, por ejemplo, el campo de entrada aquí. Cada vez que presiono Enviar, debería aclarar esto, y además solo mostramos la última respuesta y no un historial completo de chat aquí. Esto también es lo que hay que mejorar, claro, pero lo haremos en el siguiente video. 12. Mejora de UX: Entonces vamos a implementar algunas mejoras en la UX. Por ejemplo, cuando escribimos nuestra entrada aquí, nuestro mensaje, y hacemos clic en Enviar, queremos que este mensaje aquí o el campo de entrada se borre. Y además, mientras la solicitud está pendiente, queremos que esta se desactive, el campo de entrada así como el botón aquí. ¿Y qué más? Queremos mostrar el historial completo del chat aquí. Entonces hagamos el primero, el deshabilitado mientras está pendiente, he introducido un nuevo estado pendiente, y esto es cierto mientras el fetch está pendiente, claro Lo configuré en true antes de la fetch y al final de este manejador de clics, lo configuré en Después en el campo de entrada, dije desactivado es igual pendiente y en el botón también. Por lo que el botón y el campo de entrada se deshabilitan mientras la solicitud está pendiente. Entonces probémoslo o te envían y vemos que ambos están deshabilitados. Y también, esto se aclara aquí. ¿Cómo hice esto? Muy fácil. esta entrada de mensaje de todos modos, punto actual. Este es el campo de entrada, el elemento DOM y el valor de punto se establece en una cadena vacía, y luego se realiza la búsqueda, y esto es Sencillo pero efectivo. Y ahora para la conversación de chat, que estará abajo aquí, esta es la última respuesta del modelo de idioma, y queremos el historial de chat arriba, y esta debería ser la última. Y tal vez cambiemos el orden para que tengamos nuestra entrada de mensaje en la parte inferior. Por encima de eso, tenemos el historial de chat, como es en hat GBT, por ejemplo. Entonces hagámoslo. Primero, cambiamos este panel de salida, y lo colocamos encima del campo de entrada y el botón. Vamos a probarlo cómo estás y la respuesta estará arriba. Bien. Eso es lindo. Lo que no es tan bonito es que es como bajar cuantos más mensajes tengamos. Ahora por el momento, sólo tenemos uno. Pero si tenemos toda la historia, esto va a bajar, y esto no es agradable para UI. Simplemente hacemos un diseño de flexbox aquí. Por lo tanto, la flexión de la pantalla y la dirección de flexión deben ser de columna. Para tener una disposición vertical aquí. Por supuesto, flex como una cuerda. Bien. Y luego entre el panel de salida y la entrada, solo ponemos un dif con flex one. Bien, vamos a ver esto. No está funcionando porque HDL entero, no es 100%, así que tenemos que hacer altura 100% aquí Entonces esto es 100% body, debe ser 100% Bien, entonces body también es 100% ahora, y este div deberíamos borrar eso, borrar eso. Entonces tenemos nuestro div cien por ciento. Hagámoslo más tarde. Y ahora aquí tenemos nuestro componente, nuestro componente de reacción, que también debería ser de altura, 100%. Bien, entonces ahora funciona más o menos. De todas formas, deberíamos borrar o eliminar nuestro H uno aquí. Entonces tenemos esto aquí todavía no funcionando. Pero en fin, hagámoslo. Entonces aquí tenemos estilo solo estoy haciendo estilo inline aquí para ser más rápido, así que eso debería ser altura 100%. Copiar esto debe ser el mismo en el cuerpo. Debería estar planteando esto debería ser lo mismo aquí. Y entonces reacciono componente debe ser altura 100%. Ahora, ya casi está hecho, pero es demasiado grande. Bien, entonces cuerpo tiene, claro, parece que tiene un margen, debería ser margen cero y luego lo tendremos. Bien. Así que volvamos al punto índice Astro, y poniendo un margen de cero ahí debería arreglarlo. Bien. Entonces ahora necesitamos un poco de relleno, acolchado, supongo, aquí. Y vamos a este div externo de nuestro componente principal, y estamos configurando un relleno de digamos ocho píxeles. Y también tenemos que poner tabla de dimensionamiento de cajas una caja, supongo, porque de lo contrario, esto va a ser demasiado grande. Vamos a echarle un vistazo. Bien, entonces esto se ve bien. ¿Cómo estás? Ahora conseguimos la respuesta, espero. Oh, vamos. Bien, entonces no estamos recibiendo una respuesta aquí de la API de Open AI. Está un poco atascado aquí. Supongo que esto puede suceder. Bien, entonces ahora tenemos hasta una flecha cinco oh tres. Supongo que esto es SRS no disponible. Puede suceder, claro, y solo lo intentamos de nuevo, lo recargamos ¿Cómo estás? Bien, entonces esto es mejor como IA, no tengo sentimientos y así sucesivamente. Bien, ¿qué queda por hacer? Tenemos que imprimir toda la historia, por supuesto. Esta es sólo la última respuesta. Entonces, presentemos un nuevo estado. Lo llamamos mensajes, y esto será una matriz. Mensajes. El valor inicial será una matriz vacía. Y la matriz de mensajes se mostrará en el panel de salida de aquí. Entonces aquí tenemos mensajes dot Mapa. Y aquí tenemos cada mensaje. ¿Y qué podemos hacer? Cada mensaje será un div y luego dentro de un dif tenemos el mensaje como texto. Oh, hagámoslo antes del set pendiente. Podemos hacer un conjunto de mensajes. Y dentro, tenemos los mensajes antiguos tenemos los mensajes antiguos y el nuevo y el nuevo es entrada. Y luego después de que obtuvimos la respuesta, aquí también necesitamos llamar a los mensajes establecidos. Y esta vez, tenemos los mensajes y luego no input, pero tenemos la nueva respuesta aquí, que es answer object dot answer. Vamos a probar esto. Aquí tenemos una advertencia, pero nos ocuparemos de esto más tarde ya que ¿cómo puedo ayudarte hoy? Bien. Y luego nuestra pregunta estándar, por qué y bien, vemos que no está funcionando del todo porque el por qué desapareció. No tengo sentimientos pero la respuesta está ahí. Bien, así que funcionó, pero no del todo. El problema es, por supuesto, que aquí no podemos usar mensajes. Entonces lo que podemos hacer es definir nuevos mensajes. Como esto, entonces establecemos nuevos mensajes aquí. Y luego por aquí, nuevos mensajes y respuestaobjeto punto respuesta. Y esto debería funcionar. Bien, así que vamos a probarlo. Cómo se envía Nos vuelve a recibir esta advertencia. Pero de todos modos, por qué enviar y. Y ahora, parece funcionar. Tenemos un historial de chat aquí, y en la parte inferior está la última respuesta del modelo. No se ve bien. Es algo feo porque no tenemos nada para separar los mensajes. Pero aparte de eso, parece funcionar bastante bien, haciéndose un poco más bonita en el siguiente video 13. Historial de chat más bonito: Bien, entonces en este video, vamos a hacer que el historial de chat sea un poco más bonito y ya he implementado algunas mejoras aquí, así que vamos a revisarlas. ¿Cómo estás? Nuestra pregunta estándar. Envía y ves esto es amarillo, y la respuesta el modelo de idioma es verde, color de fondo verde. Para que podamos cambiar los colores más tarde por supuesto. Pero, ¿cómo hice esto? Aquí tenemos la renderización de los mensajes, y tenemos el mensaje aquí en el mapa callback como parámetro, por supuesto Y entonces el segundo parámetro es el índice, y solo comprobamos si index mod two es igual a cero, es decir, index es divisible por dos Entonces el color de fondo es amarillo, y si no es divisible por dos, si es extraño, entonces es verde Así que los índices pares obtienen el color de fondo amarillo, y los índices impares obtienen el color de fondo verde. Y este es el resultado aquí. Todavía no muy bonito, pero podemos distinguir los mensajes generados por el usuario y las respuestas generadas por el modelo de idioma. Entonces esto es mucho mejor. ¿Se puede escribir código JS? Y vamos a comprobar la respuesta. Sí, puedo ayudarte con el código JavaScript. Eso es lindo. Es bueno saberlo. Entonces, si necesitamos ayuda, podemos preguntar al modelo de idioma. Bien, entonces esto es mejor. Aún no bonita, necesitamos implementar una brecha entre los mensajes para que sea un poco más bonita Bien, eso es fácil. Estiloamos el out a div aquí para que tenga display flex. Y flex direction será columna y agregamos un hueco de, digamos, ocho pixeles aquí. Esto tiene que ser un colon por supuesto. Ahora es correcto. Bien, así que vamos a comprobarlo. ¿Cómo estás? Enviar. Ya vemos una brecha aquí. ¿Se puede codificar? Un poco más corto ahora. ¿Se puede codificar? Sí, tengo capacidades de programación. Bien. Entonces eso se ve mejor. Y también podemos cambiar el radio del borde, tal vez para hacer esquinas redondeadas. Um, así que probemos cuatro píxeles. ¿Cómo estás? Esta vez, una pregunta es suficiente, supongo. Sí, es un poco mejor. Pero entonces necesitamos también relleno aquí. Así tablero de radio, cuatro píxeles y relleno. Como también cuatro píxeles, tal vez. ¿Cómo estás? Sí, se ve mucho mejor. Los colores siguen siendo feos, podemos cambiarlos más tarde. Pero esto es mucho mejor. Se puede distinguir claramente entre los usuario y los mensajes del modelo de idioma. Eso es bueno. Y una cosa más que quiero mejorar es que sólo podemos escribir Enter aquí para enviar el mensaje, no sólo haciendo clic en el botón aquí, sino también escribiendo Enter. Entonces, ¿cómo estás? Y entonces Enter enviaría? Tenemos que ir a la entrada y luego en tecla abajo, y luego un manejador aquí el cual hará lo mismo que este onclick Así que necesitamos extraer el on click a una función separada aquí. Entonces enviar mensaje será el nombre de la función. Enviar mensaje. Esta función debe ser asíncrona, una sincronización Bien. Y entonces podemos sustituir esto con enviar mensaje. Eso está bien. Y la tecla abajo también llamará enviar mensaje. Pero antes de llamar a enviar mensaje, necesitamos verificar si la clave es es la clave enter. Bien, entonces si la clave de evento es igual a Enter, supongo, vamos a comprobarlo. Esto es cierto. Llamamos enviar mensaje. Aquí nos vendría bien un peso, pero como no hay código después de eso, no sirve de nada. Así mismo aquí. También podríamos si queremos hacer otra cosa antes de que podamos hacer esto aquí. Hacer una función de manejador independiente. Eso es solo llamar enviar mensaje. Bien, así que vamos a comprobar si esto está funcionando. ¿Cómo estás Enter? Bien, no está funcionando. Podemos depurar aquí. Entonces aquí tenemos nuestros componentes, índice JSX, y ¿dónde tenemos la función enviar mensaje por aquí Bien. Pero creo que tenemos que hacer el punto de ruptura aquí y luego presionar Enter, Enter Bien, entonces entra con una E. Bien, eso debería hacer el truco. Bien, otra vez, continúe y recargue. Como estas entrar parece funcionar. Tenemos que encargarnos de esta advertencia. Además, cada niño en la lista debe tener un accesorio clave único. Esta es una advertencia de reacción. Sí, ya me dice lo que tenemos que hacer mapa de mensajes. Entonces tenemos el índice aquí, y podemos tomar el índice para la clave. Entonces la clave es igual al índice, y eso debería deshacerse de la advertencia aquí. Cómo entras. Sí, muy agradable. El aviso se ha ido, y tenemos nuestro manejador de claves Enter Bien. Entonces esto es todo para este video. Voy a cambiar los colores, supongo, y en el siguiente video, tienes un color más bonito aquí Entonces nos vemos en el siguiente video. 14. Resumen de nuestra primera aplicación de chat: Acabamos de completar nuestra primera aplicación de chat, y podemos chatear con el modelo de lenguaje Open AI a través de la API de Open AI, y he mejorado un poco la interfaz de usuario aquí. He centrado la sensación de entrada y el botón aquí y también esto también está centrado aquí. Los mensajes están centrados ahora, y los colores son un poco menos feos, diría yo, pero tenemos una aplicación de chat funcional. Puedes tener conversaciones agradables e informativas, espero, con el modelo de lenguaje Open AI aquí, sí, pero también puedes mejorar, claro, en muchos puntos. Se puede mejorar el diseño, por supuesto. Como puedes ver aquí, todavía quedan algunas cosas por mejorar, por ejemplo. Ahora tengo que desplazarme aquí hasta la parte inferior para ingresar el texto, el siguiente mensaje. Esto no es muy agradable. Entonces esto debería quedarse en la parte inferior, y solo debes desplazarte por los mensajes. Este es un ejemplo, o también puedes mejorar la IU poniendo botones para copiar los mensajes al portapapeles También puedes hacerlo así, claro. Los botones serían más agradables. Puedes tener una lista de chats de chats anteriores, de chats antiguos como Chat GPT tiene en el lateral, y por supuesto, puedes o tienes que almacenar los chats en el servidor en una base de datos, puedes ponerlos a disposición del usuario, y puedes, por supuesto, también tener el inicio de sesión del usuario y tener su propio historial de chat y tener muchas personas simultáneamente acceder a tu servidor de chat su aplicación de chat, y así sucesivamente y así sucesivamente. Hay muchas cosas que mejorar. La siguiente aplicación no será una aplicación de chat general, pero será algo más específico, y usaremos más funcionalidad de OpenAI, API, y aprenderás a usar el prompt del sistema, aprenderás a hacer llamadas a funciones con el modelo de idioma y Pero esta es nuestra primera aplicación, y creo que es bastante utilizable, siéntete libre de mejorar lo que quieras aquí. Nos vemos en el siguiente video. 15. Nueva aplicación: chatea con PNJ en un juego de aventura con texto: Bien, entonces espero que estés listo para nuestra nueva app, y la nueva app contendrá un chat, claro, pero esto será dentro de una aventura o un juego de rol. Y usamos el chat para platicar con los NPCs en el juego Entonces tienes un juego de aventura o un RPG. En este caso, se trata de un juego de aventuras en el que hay que cumplir ciertas misiones y resolver algunos acertijos muy fáciles, y usaremos nuestra antigua aplicación de chat o aplicación de chat general como punto de partida y modificaremos la interfaz de usuario de reacción para dar cuenta del escenario del juego. Primero, tendremos que configurar un escenario de juego de aventura muy básico donde podamos visitar diferentes ubicaciones, realizar acciones simples y charlar con NPCs con personajes del juego para resolver acertijos y misiones Entonces en esta app o en este juego, el reto será configurar el modelo de lenguaje de IA para que se comporte como cierto personaje, como un barman en un bar o un científico o un guerrero o lo que sea Por lo que nuestro primer paso será crear un entorno de juego básico, que será muy sencillo para nuestro caso de uso, solo para incorporar el chat dentro y hacer que los personajes de la IA revelen cierta información y revelen si un rompecabezas está resuelto o no, y entonces el juego puede continuar en una u otra dirección. Entonces ya he hecho algunos bootstrapping aquí. He dividido nuestra interfaz de usuario en dos componentes, el índice y el componente de chat. El componente de chat es básicamente nuestra antigua interfaz de usuario de chat, que contiene la entrada de mensajes , el botón de envío y el historial de chat, y también la funcionalidad, por supuesto, la obtención de la respuesta de IA, y así sucesivamente Y el índice JSX es ahora el resto, la mecánica del juego, y los botones de suma, un div para contener la descripción de la ubicación actual Y aquí tenemos los botones de comando. Entonces por el momento, se ve así, muy, muy simple. Aquí tenemos nuestro componente de chat, que es casi completamente nuestra antigua aplicación de chat, pero ahora como componente. Y aquí tenemos nuestros botones para comandos, y esta es la descripción de la ubicación actual. Entonces aquí tenemos nuestro punto de chat JSX, que contiene toda la interfaz de usuario de chat, y aquí tenemos nuestra descripción de la ubicación actual Aquí, los botones de comando, navegación a las diferentes ubicaciones. Se puede ir al norte, al oeste, al este, al sur. Se puede hablar con alguien. Puedes llevar algo o puedes usar un artículo que ya tengas. Y claro, tenemos que extender esto con una lista de NPCs con los que puedes hablar o artículos que puedas llevar o artículos en tu ventry que puedes usar aquí Pero por el momento, lo único que está funcionando es la navegación. Para que puedas recargar esto, podemos ir al este. Eso es lo único que está funcionando en este momento. Entonces solo este botón de aquí está habilitado, los demás están deshabilitados, así puedo ir al este, y luego la descripción cambia por aquí. Esto se hace, por supuesto, por estado. ID de ubicación actual, el valor inicial es uno, y se actualiza cada vez que se hace clic en el botón Ir Este Esto es por aquí, establece el ID de ubicación actual, y aquí tenemos nuestra ubicación actual punto salida Este, que contiene la D de la siguiente ubicación. Y tenemos los datos estáticos del juego en un archivo diferente. Este es este archivo y esto exporta este objeto de datos del juego aquí. Y dentro tenemos localizaciones, tres localizaciones al momento. Y estas se llaman primera habitación, segunda habitación y tercera habitación. Y tenemos las identificaciones, empezando por la identificación uno, que es la sala de inicio, y luego podemos ir al este salida este es dos. Esta es la identificación de esta sala. Esta es la segunda habitación, y aquí también se puede ir hacia el este a la tercera habitación, y esta es por el momento. Para representar la descripción de la ubicación actual aquí, necesitamos encontrar la ubicación actual dentro de las ubicaciones de datos del juego. Lo encontramos con ID de ubicación actual, y así tenemos la ubicación actual. Y aquí imprimimos la descripción de la ubicación actual. Entonces eso es todo por el momento. Simplemente tenemos esta navegación sencilla. Tenemos nuestros datos estáticos del juego, nuestra descripción del juego del diseño. Sí, y nada más por el momento. No tenemos una historia, así que tenemos que llegar a una buena historia, y por supuesto, con buenos NPCs con los que se pueda hablar y algún tipo de rompecabezas, algún tipo de búsqueda que el jugador necesite resolver Bien, así que eso es todo para este video, y continuaremos en el siguiente. 16. Presentación de la historia: Bien, entonces se me ocurrió una historia corta y el rompecabezas para el juego de aventuras es muy corto porque no se trata de programar un juego de aventuras, sino de incorporar IA en un juego y usar la funcionalidad como llamadas a funciones indicaciones del sistema y así sucesivamente y dejar que la IA, el modelo de lenguaje juegue un papel en un juego en un juego de rol o en un juego de aventuras Así que el juego de aventuras está ambientado en un futuro lejano. El año es 21 30, y somos viajes espaciales aterrizando en un planeta llamado Siperd Entonces al llegar, nos encontramos con un lugar con un bar, una tienda y un robot de seguridad que no nos permitirá pasar sin un código de acceso. Y para superar al robot, este es el rompecabezas que necesitamos resolver, la búsqueda que necesitamos resolver. Tenemos que encontrar una manera de engañar al robot para que nos deje pasar. Y en el bar, el barman nos dice cuáles son los invitados Él sabe en el bar y entre los invitados se encuentra un especialista en IA que también sabe mucho de robots, y podría ayudarnos si le compramos una recarga para su cerveza espacial. Entonces le compramos la nueva cerveza espacial y nos dice un comando especial de que podemos el robot y el robot nos dejará pasar entonces. Y este es el final de la historia o el final de la búsqueda y el rompecabezas. Es bastante corto, pero necesitamos platicar con dos NPCs, primero, el barman, y el segundo será el especialista en IA Y también podríamos hablar con el robot, tal vez, pero tal vez no. A lo mejor esta será una conversación normal que está prescripta Entonces veamos hasta dónde llegamos, y ¿qué tenemos que hacer? Necesitamos ampliar un poco nuestras descripciones de las habitaciones. Contamos con tres habitaciones. primero es el lugar de partida, y ese será el lugar donde veamos un bar, una tienda, y el robot y el robot no nos dejarán este y podemos ir hacia el norte hacia el bar, y no podemos ir al oeste e ir al sur. Y podemos hablar con el robot, claro, y podemos dentro del bar, podemos hablar con el barman al principio Esta es nuestra trama, y tenemos que poner aquí algunas descripciones. Y si, esta será la primera ubicación donde podamos ver todas las otras ubicaciones diferentes y el robot y donde podamos entrar al bar, y podemos intentar, ir al este porque lo intentamos porque el robot no nos deja pasar al principio. Entonces lo único que podemos hacer en la primera ubicación es entrar al bar, y eso será la salida Norte y si, esta será la tercera habitación bajo descripción será un bar. me ocurre otra cosa, pero primero, ves un bar. Hasta el momento, la sala de inicio para la ubicación de inicio, ve un bar, una tienda y un robot de seguridad vigilando la salida hacia el este. La información necesaria que necesitamos. Y el segundo será, no sé, quizá estés frente un puerto espacial espacial, algo así. No importa. Esta es la habitación o ubicación donde llegamos cuando pasamos por el robot. Y el tercero es el bar. Podemos ir al norte hasta el bar. Así que vamos a comprobar si podemos ir al norte. Podemos ir al norte, ¿en serio? Ver un bar, pero esto no está funcionando. S bar shop en una carretera de seguridad. Entonces esto debería ser un bar aquí si vamos al norte. El botón está habilitado, pero no tenemos ningún manejador de clic aquí, supongo. Así que ve al norte. Sí, necesitamos el manejador on click aquí. Bien, establecer ID de ubicación actual, salida Norte, por supuesto. Y esto debería funcionar. Sí, un bar. Bien, entonces ahora que tenemos la historia, voy a mejorar un poco las descripciones aquí. Y luego en el siguiente video, tratamos de implementar el chat al barman, así que primero tenemos que entrar al bar, y luego tenemos que platicar con el barman, y esto se hará en el siguiente 17. Preparación de las misiones: Así que he hecho un poco de preparación aquí para las misiones, y he implementado la vigilancia de la salida Este. Entonces, si pulsas en go East ahora, recibirás un mensaje de que esto no es posible porque el robot pide un código de acceso y no tienes uno. Entonces aquí tienes el mensaje. Y esto es simplemente un div donde podemos generar mensajes de juego como este. También he mejorado, como pueden ver aquí, las descripciones de las ubicaciones. Bien, así que vamos a comprobar cómo hice esto con Go East y el cheque antes de que el personaje pueda pasar a Oriente. Así que tenemos los datos del juego y las nuevas descripciones aquí un poco más elaboradas. Y también hay otra habitación esta es la tienda. No estoy muy seguro si el personaje, el jugador va a tener que hacer algo aquí, pero tal vez podríamos hacer una búsqueda que necesita para comprar algo aquí para poder proceder. Pero decidamos que más adelante por el momento, puedes ir al Oeste y luego entrar a la tienda, y obtendrás la descripción, y eso es todo. Pero no se puede salir porque no hay salida al noroeste, lo que sea aquí. Entonces estás atrapado ahí. Pero nos ocuparemos de eso más adelante. Primero, vamos a comprobar cómo hice esto para comprobar si el jugador puede ir al Este o no. Esto se debe a que tengo esta función aquí antes de salir East y esta función obtiene datos de tiempo de ejecución del juego y los datos de tiempo de ejecución consisten en misiones. Se trata de un ara de objetos. Cada objeto tiene un ID, que es más o menos el nombre de la misión y una bandera bool completada si la misión, la tarea se completa o no Y siempre que se complete una tarea, se recurrirá a ésta. Es cierto, por supuesto, y aquí en el manejador on click del botón Exit East, tendremos esta comprobación Entonces verifico si la ubicación actual tiene definida una función on antes de salir Este, y si la tiene, la estoy llamando con datos de tiempo de ejecución del juego. Esto contendrá las misiones y el estado de finalización de las misiones. Entonces verifico el valor de retorno de esta función aquí, y si el valor de retorno antes de verificar punto K es verdadero, entonces la búsqueda está realmente terminada, y podemos ir a la siguiente ubicación a la ubicación de salida Este aquí. Y si no, estamos mostrando este texto noto. Así que podemos volver aquí a la función on antes de salir Este y comprobarlo nuevamente aquí. Estoy tratando de encontrar la búsqueda con aprender a superar a un robot, y este es el objeto de búsqueda, y O será el punto de búsqueda completado. Y otro k texto es el robot. En cuanto a un código de acceso antes de dejarte pasar. Esto es lo que se muestra ahora. Entonces podemos tener para cada dirección, podemos tener una función de encendido antes de salida que verifique si realmente podemos ir en esta dirección o si es necesario cumplir una búsqueda antes de eso. Entonces puedes presionar el botón, pero no te dejará ir, sino que muestra este texto, y este texto está justo debajo los botones de comando aquí, es solo un div, y el mensaje del juego es, por supuesto, un estado. Y aquí tenemos use state con una cadena vacía y luego game message y set game message. Y cada vez que obtenemos este Nook, establecemos el mensaje del juego en texto Nook Y este es el valor de retorno de esta función on antes de salir este. Bien, así es como lo hice. Y lo que falta, claro, es que podamos ir al bar. Ya podemos ir al bar, claro. Y también obtenemos una descripción más agradable aquí. Entras al bar e inmediatamente ves el mostrador y al camarero detrás de él. El bar no está muy concurrido, y aquí solo hay otros tres invitados. Aquí tenemos que implementar plática para, por supuesto, platicar con el barman, pero también podríamos platicar con otros invitados Entonces necesitamos una especie de menú desplegable y seleccionar, tal vez seleccionar opciones para elegir el compañero de chat aquí. Primero, tenemos que platicar, por supuesto, con el barman Entonces tal vez podamos simplemente saltarnos esto por ahora y simplemente hacer un manejador on click aquí que inmediatamente inicia el chat aquí con el barman, y luego podemos usar la parte inferior de nuestra interfaz de usuario para charlar con el bartender y luego podemos usar la parte inferior . eso lo hacemos, y después, si tenemos que platicar con otra persona, con otro invitado, podemos implementar aquí un desplegable para determinar de qué persona queremos hablar. Pero hagámoslo en el siguiente video. 18. Primer chat de IA: Bien. Ahora podemos iniciar nuestra primera charla con el barman en el bar, y he preparado el código para que esto sea posible Entonces, si vuelvo a cargar la página y luego voy al norte al bar, puedo presionar Talk to, y luego el mensaje del juego aquí dice que estás hablando con el barman, y puedo platicar Entonces quiero pedir un trago, claro. Necesito un trago esta es nuestra vieja implementación del chat general con el modelo de idioma. Bien, está respondiendo. Puedo sugerir algunas bebidas no alcohólicas. Pero quiero un espacio A. Y veamos a qué responde. ¿Bien? Toma un poco. Ah, veo que buscas bebida temática espacial. Ah, aquí tienes una receta divertida para el mocktail de gazer galáctico. Bien. Bien, entonces es responder como lo que queremos. Pero ahora, nos está diciendo cómo mezclar una bebida, pero estoy en un bar, y pensé que el camarero no mezclaría la bebida para nosotros ni para mí y luego me la serviría Sí, ya ves, la IA no está preparada para desempeñar un papel de camarero, y esto es lo que tenemos que hacer Pero primero, vamos a comprobar lo que he hecho para iniciar el chat aquí. Bien, entonces volvamos a cargar la página. Vamos al norte y vemos vamos a recargarlo de nuevo. Yo no he estado en el bar o si no estoy en el bar, no puedo hablar con nadie. Puedo tomar puedo usar, pero no uso porque no hay manejador de clics ahí Ahora hay un manejador de clics en el botón de hablar con, pero no puedo hacer clic en él porque está deshabilitado Entonces, ¿cómo está funcionando esto? Vamos a los datos del juego, y vemos en la ubicación del bar, tenemos buena descripción, por supuesto, y tenemos NPCs, que es una matriz de objetos En el interior hay una identificación, y la identificación es de barra de licitación. Entonces podemos usar esto para determinar si hay alguien con quien hablar en esta ubicación, y solo hay en la ubicación del bar la matriz del NPC, y podemos usar esto para controlar el estado deshabilitado del botón de hablar con Bien, entonces aquí está deshabilitado es igual a no contar ubicación NPC signo de interrogación longitud de punto mayor que cero Entonces esto es si no tenemos ninguna matriz NPCs o si la matriz de NPC está vacía, entonces este botón se deshabilitará, y si contiene algo, entonces esto se habilitará El manejador OnClick es solo una llamada para iniciar el chat, que es una nueva función Vamos a echar un vistazo ahora, y hay un parámetro que es una cadena, el barman Bien, así que vamos a comprobar la función, iniciar el chat, y obtiene el parámetro aquí en la variable talk to. Lo primero que hace es configurar el chat en el chat verdadero es, por supuesto, otro estado inicializado con el estado de uso aquí a pliegues Y si iniciamos un chat, entonces lo estamos configurando en true, y esto se utilizará para desactivar los botones de comando. Entonces esto es por aquí el estilo de comandos, y establecemos los eventos puntero ninguno si estamos chateando y si no estamos chateando con todos, también estamos estableciendo opacidad a cero punto cinco o uno si no estás chateando Para que veas, vamos al norte, platicamos, entonces esto es un poco discapacitado. No es un atributo deshabilitado, pero parece deshabilitado y no se puede hacer clic en él. Entonces para mí, ya es suficiente. Y esto aquí está habilitado, y podemos iniciar el chat. Esto se hace usando el bool de chat para mostrar el componente de chat o si es falso, por supuesto, entonces el chat no se renderizará Bien, así es como iniciamos nuestra charla con el barman Pero el problema, como has visto, es que el modelo lingüístico no sabe nada de nuestro juego, la ambientación, que debe desempeñar el papel de barman Entonces tenemos que decirle que debe desempeñar el papel de barman en un juego de aventura espacial Entonces esto es lo que hacemos en el siguiente video. Y para ello, tenemos que sí, cambiar un poco aquí nuestro llamado a la API Open AI de este año. Entonces necesitamos agregar algo a los mensajes, que es el prompt del sistema, y el prompt del sistema es cebar el modelo de lenguaje y decirle al modelo de lenguaje que debe comportarse cierta manera o desempeñar un papel describiendo el rol, describiendo la situación, el entorno Y esto es lo que hacemos en el siguiente video. Seal 19. Cómo preparar el escenario con el mensaje del sistema: Bien, entonces en nuestro último video, hicimos una interesante observación sobre el modelo de lenguaje. No estaba muy seguro cuál debería ser su papel en el escenario que presentamos. Terminó incumpliendo el papel de asistente de IA en lugar del barman que teníamos en mente para nuestro juego de aventura SciFi Pero eso no es ninguna sorpresa, claro, porque no proporcionamos ningún contexto ni especificamos ningún rol para el modelo de lenguaje. Entonces, para guiar el modelo de lenguaje y hacer que se comporte de manera diferente, hacer que responda de manera diferente, necesitamos usar un prompt del sistema. Y un prompt del sistema es básicamente un mensaje con un sistema de roles, no el usuario o asistente habitual. Y con el prompt del sistema, podemos definir claramente cómo queremos que el modelo responda a los mensajes de chat y asuma el rol específico que tenemos en mente, en este caso, el barman Entonces, al establecer un prompt del sistema adecuado, podemos ayudar al modelo a ser este bartender Queremos que esté en nuestro juego de aventura. ¿Cómo podemos hacer esto? El primer mensaje en la matriz de mensajes debe ser el prompt del sistema, y es solo un mensaje normal con sistema de roles. Entonces aquí lo tenemos. Si tenemos un nuevo ID de chat que es diferente al anterior, enviamos mensajes a esta matriz, y dentro de esta matriz, esto no está vacío. He agregado un nuevo mensaje con el sistema de roles, y este es el sistema. El contenido prepara el escenario para nuestro barman y describe cuál es la situación y cómo debe comportarse me ocurrió un prompt del sistema y lo he probado un poco, así que creo que está bastante bien, pero puedes por supuesto, probar algunos cambios y experimentar un poco, cómo cambia el comportamiento, tal vez puedas mejorarlo un poco. Pero esto está, creo, bastante bien y el contenido es que interpretas el papel de barman en un bar en una aventura de texto de ciencia ficción En el año 21 60, creo que no es 21 60. Creo que son 21 30, pero de todas formas, en realidad no importa. El jugador está platicando contigo y deberías responder cualquier duda o cualquier duda que tenga. Responde en discurso directo a la pregunta como si realmente fueras el barman set, esto es para asegurar de alguna manera que realmente asuma el papel del barman En el bar, hay tres invitados en este momento. Entonces esto es configurar a los invitados. Y si le preguntamos al barman entonces como jugador, ¿cuáles son los invitados En el bar, debería hablar de estos tres invitados aquí. El primero es un ingeniero de la colonia Marte, pensando en nuevas mejoras en las que está trabajando para formar. El segundo es un comerciante esperando que un cliente opere minerales raros. Y el tercero es el importante porque el tercero es un especialista en IA. A ésta le gusta relajarse después de un largo día de trabajo tomando alguna cerveza diluida, conjetura sintática Su nombre es doctor Owen, y trabaja para Cyberdin Cyberdin, una de las grandes Siempre está de humor para alguna cerveza diluida, y por el momento, su vaso está casi vacío, lo que es una pista para el jugador Tiene bastante conocimiento sobre temas relacionados con la IA y la robótica Bien, y luego por último, tenemos esto también una pista si el jugador pregunta por el doctor Owen, dile que es más probable que hable con el jugador si consigue una recarga Entonces el plan es que el jugador pregunte por los invitados y los camareros contando sobre estos tres invitados aquí Y el especialista en IA es con quien deberíamos hablar, y necesita una recarga. Entonces, si le compras un trago, entonces él hablará con nosotros y tal vez nos ayude a superar a ese robot de seguridad. Bien, entonces ese es el prompt del sistema. Como dije, puedes jugar un poco con él y mejorarlo o cambiarlo por completo. Si tienes una historia diferente y un personaje diferente, diferente MPC, entonces puedes cambiarla como quieras Debes asegurarte de que el rol sea claro, que los casos que quieras que el modelo sepa que describas estos casos, por ejemplo, este caso aquí, si el jugador pregunta por el doctor Owen, debes decirle que necesita una recarga y es más probable que hable con el jugador Si consigue uno. Entonces este tipo de pistas que debes darle al modelo para asegurarte de que el modelo se está comportando como tú quieres Y creo que ya podemos probarlo. Bien, entonces vamos al bar, vamos al norte. Y luego podemos platicar con el barman. Estás hablando con el camarero. Yo le digo, Hola. ¿Puedo tomar un trago? Por supuesto, ¿qué te gustaría tener? Contamos con una amplia selección de bebidas. Bien. Entonces, ¿qué tienes para inspirarte? Si buscas algo para que tus engranajes creativos giren, te recomiendo nuestro brebaje especial llamado Eureka Elixir recomiendo nuestro brebaje especial llamado Eureka Es una mezcla de hierbas raras y botánicos que se dice que estimulan la mente y encienden ¿Te gustaría probarlo? Sí, por favor. Bien. Gran elección. Una Eureka Alixir viene enseguida. Bien. ¿Me puedes hablar de los otros invitados? Ciertamente, y está hablando de los otros invitados con algunos individuos interesantes, este tipo de la Colonia Marte, mesa de billar, comerciante. Bien, por último, tenemos al doctor Owen y un especialista que trabaja para cyberdne Aquí es un habitual y le gusta relajarse después de un largo día de trabajo Al tener un poco de synth ale, es bastante conocedor de temas relacionados con la IA y la Si quieres aprender más sobre la IA y los avances o tener una discusión sobre el futuro de la tecnología Bien. Um, queremos saber cómo superar a un robot. Pero de todos modos, el doctor Owen es tu persona de ir a casa. Si hay alguien específico de quien te gustaría saber más, solo avísame. ¿Bien? No está mencionando que necesita una recarga aquí, pero puedo preguntar. Quisiera platicar con el doctor Owen. A lo mejor me está diciendo ahora que necesita una recarga. Uh, eh. Su vaso está casi vacío. Bien, entonces aquí lo tenemos. No obstante, su vaso está casi vacío en este momento, y tiende a ser más hablador y accesible cuando tiene una recarga Si quieres tener una conversación con él, sugiero que le traigas otro vaso. ¿Eso lo consigo para usted? Sí, por favor. Bien. Así que bien, un vaso de cerveza fina viene enseguida. Aquí tienes. Recién vertido para doctor On. Ahora que tiene una recarga, puedes acercarte a él y entablar una conversación. Eso es muy bonito. Solo recuerda que aprecia las discusiones reflexivas Bien, entonces tendremos una discusión reflexiva sobre los robots de seguridad y cómo engañarlos para que nos dejen pasar. Pero bien, así que esto es agradable. La conversación estuvo bien, creo, para un barman en una aventura ci fer, y también nos contó la cosa sobre la recarga y el doctor Own Y bien, entonces el problema ahora es que prácticamente le hemos comprado la recarga, pero no sabemos eso ni en el juego, no sabemos que el jugador realmente hizo esto. Entonces necesitamos una manera de notar si el jugador realmente ha comprado doctor Poseer una recarga. Y por el momento, esto no es posible o es bastante difícil. Porque tendríamos que analizar el chat aquí para adivinar si doctor Owen consigue una recarga del jugador Aquí tenemos que usar una funcionalidad que es bastante nueva en el modelo de lenguaje, que es la capacidad de llamar a funciones definidas por el usuario. Y con esto, realmente podemos determinar si el jugador realmente compró la recarga para el doctor Owen y que realmente completó esta tarea y resolvió este rompecabezas Pero por el momento, esta es la conversación con el barman Bien, como notaste, tal vez haya desplazamiento aquí, tenemos que desplazarnos por la página completa aquí Esto no es bueno, así que tenemos que encargarnos de esto también. Pero vamos a hacer esto en el siguiente video. Nos vemos entonces. 20. Llamadas a funciones I: Bien, entonces en el último video, hemos preparado con éxito el escenario para nuestro personaje de camarero de IA Así que se está comportando como un barman en un juego de aventura de Ciencia Ficción Pero el problema al final era que no teníamos ninguna posibilidad real de saber cuándo el jugador resolvió el problema resolvió la búsqueda, es decir, si el jugador realmente compró doctor Poseer una bebida, que es la solución, el primer paso para poder hablar con el doctor Own luego más tarde. Entonces necesitamos alguna manera de obtener retroalimentación del modelo de idioma que el jugador ha resuelto el rompecabezas y que compró la bebida para el doctor Own. Una forma de hacerlo y probablemente esta es la mejor manera de hacerlo es dotar a las funciones del modelo de lenguaje que pueda llamar en ciertas situaciones y en ciertos contextos. Esto también se utiliza para solicitar información de vida, por ejemplo, información meteorológica o información de precios de productos. Entonces, por ejemplo, si quieres que el modelo de idioma pueda decirte el clima actual, puedes proporcionarle al modelo una función para buscar el clima actual para ubicación y si el modelo piensa que es apropiado llamar a esta función, lo hará Entonces, si hablo con la modelo y pido el clima actual, ojalá llame a esta función, y nuestro programa tiene que buscar los datos, los datos meteorológicos actuales para una determinada ubicación y luego devolverlos al modelo, y luego el modelo puede completar el chat con esta información y probablemente decirle al usuario el clima actual Entonces hagámoslo por nuestro camarero de aquí, y ya lo he preparado Entonces tenemos esta completa función de chat, que a su vez llama a la función openai dot create chat completion Entonces tenemos el modelo aquí, lo cual es importante porque hay que establecer este modelo en este momento porque los modelos más antiguos no pueden usar llamadas a funciones. Así que por favor asegúrese de especificar este modelo exacto aquí, y tenemos los mensajes como antes. Es nuevo. Es una matriz de objetos describen funciones que el modelo de lenguaje puede llamar. Entonces tenemos esta única función aquí. El nombre es por doctor On drink. Esto es sólo un nombre para identificarlo después. Si el modelo realmente llama a la función, entonces sabemos a qué función llamar. Y esta es una descripción muy importante aquí porque hay que describir lo que hace esta función para que el modelo de lenguaje pueda decidir llamarla. Y la descripción aquí es por doctor En una bebida o rellenar su vaso. Veamos si esto funciona y si el modelo de lenguaje realmente llama a esta función. Tenemos parámetros, que es un subobjeto aquí, y básicamente no tenemos parámetros reales aquí. Entonces esto no es tan importante. Sólo pon eso así. Por el momento, no tenemos ningún parámetro. Pero, por ejemplo, si se quiere proporcionar una función para buscar la información meteorológica de una determinada ubicación, el parámetro más importante sería la propia ubicación, por ejemplo, la ciudad o el país Entonces esto es lo que hemos hecho hasta ahora. Hemos proporcionado funciones. El modelo de lenguaje puede llamar a esta función, y ¿cómo es cuando realmente llama a esta función? ¿Cómo sabemos que se realiza una llamada a una función? Esta es esta línea, contesto mensaje, que es completa respuesta opciones de datos índice cero punto mensaje, donde también tenemos el contenido, y en el mismo objeto, podemos tener función subrayado llamada Y si esto se define, nos limitamos a registrar la consola aquí a la función llamar al nombre del punto. En nuestro caso, la función llamada punto nombre debe ser por médico On drink. Para que podamos probarlo. Entramos al bar, hablamos con el barman, y solo preguntamos directamente si el barman puede darle un trago al doctor Owen Entonces, ¿puede darle una recarga al doctor Owen en mi nombre? Y veamos si el modelo de lenguaje realmente llama a nuestra función recién proporcionada. Envía y vamos a ver. Aquí no hay respuesta. Esa es una buena señal porque veamos si esto está realmente impreso. Bien, entonces aquí está. Hola, ¿le puede dar reembolso al doctor Ona en mi nombre? LLM modelo de lenguaje grande función llamada Por doctor Propia bebida Esto funcionó. El modelo de lenguaje realmente está llamando a esta función aquí, y si está llamando a la función, sabemos que el jugador quería comprar doctor Dueño bebida. Y sí, podemos encargarnos de esto. Podemos enviarlo al cliente y el cliente puede recordarlo en una variable, y luego esta búsqueda puede ser resuelta. Entonces necesitamos dar una respuesta al modelo de idioma aquí, así que no hay contenido en este mensaje en este mensaje de llamada de función. Es por ello que aquí no hay nada impreso porque no hay mensaje, y se espera que el siguiente mensaje sea el resultado de esta llamada a la función. Entonces tenemos que darle un nuevo mensaje al modelo de lenguaje Large, y luego podrá completar el chat con esta información, entonces, pero esto lo hará en el siguiente video. 21. Llamadas a funciones II para proporcionar el resultado: Bien, entonces en este video, terminaremos el manejo de la llamada de función, y proporcionamos el modelo de idioma, el resultado de la llamada de idioma para que pueda completar el chat con su propio contenido. Bien, entonces aquí tenemos el registro de consola de la función call name. Y he agregado una nueva llamada a función de manejador de función, y le estoy dando el objeto de llamada a la función aquí. Esta es una función asíncrona, y devolverá la respuesta, la finalización, la finalización del chat del modelo de idioma con los datos que estamos proporcionando. ¿Cómo está funcionando? Vamos a comprobarlo. Es solo empujar otro mensaje en la matriz con función de rol. Esto es importante. Entonces esto significa o el modelo de lenguaje puede interpretar esto como el resultado de la llamada a la función. Proporcionamos también el nombre de la función, función llamada punto. Y el contenido es que el doctor Owen consigue una recarga del barman, sonríe y levanta su copa Y este contenido es la información que el modelo de lenguaje grande utilizará el modelo de lenguaje grande para generar una terminación. Y luego solo llamamos openi dot create chat completion aquí con nuestra matriz de mensajes y con el modelo, y también he hecho una constante con el modelo porque tenemos dos ubicaciones llamando a esto crear finalización de chat, y tenemos que usar el mismo modelo, por supuesto, aquí, porque solo este modelo soporta llamadas a funciones así y luego obtenemos la función de respuesta llamada responder aquí y luego extraemos el mensaje de opciones de datos índice cero mensaje. Y esto es lo que se devuelve aquí, y luego tenemos el mensaje aquí. Y esta función devuelve el contenido punto del mensaje de respuesta, que será el texto que el modelo de lenguaje grande haya completado. Bien, así que vamos a probarlo. Estoy recargando aquí. Ve al norte al bar, habla con el barman Y luego estoy preguntando por los demás invitados. ¿Qué me puedes decir de los demás invitados? Y luego nos dice cada información que le dimos al modelo de lenguaje grande en el sistema prompt sobre los invitados. Y por último, tenemos al doctor Owen. Por supuesto, queremos platicar con él, pero no se menciona la recarga. Entonces le voy a decir al camarero, quiero hablar con el doctor Owen Y ojalá me diga que necesito comprarle un trago, claro. ¿Qué tal si vuelvo a llenar su vaso? Bien. Y este mensaje debería activar el modelo de lenguaje grande para llamar a la función que brindamos. Bien, así que por favor rellene el vaso del doctor Owen y dígale que me encantaría hablar con él sobre robótica y seguridad Bien, y ahora debería llamar a nuestra función, ojalá. Bien, aquí está. Acabo de rellenar el vaso del doctor Owen Déjame ir y decirle que te interesa platicar. Dame un momento. Bien, oye, doctor Oh, tengo a alguien aquí al que le encantaría platicar sobre robótica y seguridad Mente, si te presento, doctor Own levanta desde su cristal asiente con una sonrisa amistosa Absolutamente. Estaré encantado de platicar. Por favor, preséntanos. Bien. Pero tenemos que comprobar si realmente se llamó a la función. Así que vamos a revisar el registro de la consola aquí. Por favor, vuelva a llenar doctor Posee vidrio. Bien, entonces esto es todo. Y luego tenemos la llamada a la función. Aquí está. La función de rol es nuestra respuesta. Nombre por doctor Bebida Propia. Doctor Own llega a reponer. Esto es lo que le damos al modelo de lenguaje como respuesta de la llamada de función, y ahora está respondiendo con, acabo de rellenar doctor Posee vaso. Bien, eso es muy bonito. Y ahora lo que tenemos que hacer aquí es que tenemos devolverle de alguna manera al cliente que esta búsqueda está terminada, y entonces lo que también tenemos que hacer es que poder terminar la conversación con el barman en este momento No podemos volver al modo normal. Y ahora nos quedamos en el chat, y tenemos que sí, pensar en una manera de terminar la conversación. Podríamos simplemente buscar ciertas palabras como salir o salir o algo así y decirle que el jugador puede salir del chat con el barman escribiendo exit o quit o lo que sea O también podríamos usar otra función para notar cuando el modelo de lenguaje grande detecta que el jugador quiere terminar la conversación y luego llamar a la nueva función, y luego sabemos, Bien, entonces la conversación tiene que terminar ahora, el chat tiene que terminar ahora, y volvemos al modo normal. Creo que iré por la última e introduciré una nueva función, dejaré el chat o dejaré la conversación, y ojalá el modelo de idioma llame a esta función, y entonces sabemos que podemos terminar la conversación y volver al modo normal, y esto lo hará en el siguiente video. 22. Marcar la misión como completada: Bien, entonces en este video, queremos marcar la búsqueda para comprar doctor En una bebida y para prepararse para la charla con doctor On como completado, y esto tenemos que hacer en el cliente, así que necesitamos de alguna manera transferir esta información al cliente. Y ya lo hice, y así es como lo hice. Tenemos aquí la llamada a la función handle, que se devuelve aquí dentro de este mensaje respondo llamada a la función no es igual indefinida. Y luego hago esto aquí, contesto mensaje punto Finalizado Quest, y lo configuré en ByDocTownDrink Entonces estoy usando este objeto que se devuelve de llamada a la función handle y marcando la Quest completada. En este caso, es By Doctor bebida propia, y esto se devolverá de esta función aquí, y tuve que cambiar esto un poco porque la respuesta ahora no es sólo un texto sino un objeto. Entonces aquí en nuestros mensajes, tenemos que almacenar el contenido del punto de respuesta, y aquí devolvemos el objeto completo, que luego contiene el contenido y también la tarea completada. Bien, entonces cambiamos a nuestro cliente y aquí está la función de enviar mensaje aquí. Obtenemos la respuesta, y esta vez la respuesta es respuesta objeto punto respuesta no es un texto, así que tenemos que establecer la respuesta aquí para responder objeto respuesta punto contenido. Y luego también habrá esta propiedad de búsqueda terminada aquí. cual se fijará a la tarea concluida por médico bebida propia en este caso. Entonces necesitamos encontrar la búsqueda. Esto lo hacemos comparando el ID con el ID que se estableció en la misión completada. Y para que esto funcione, tenemos que introducir un nuevo prop aquí en nuestro componente de chat, los datos de tiempo de ejecución del juego porque dentro de los datos de tiempo de ejecución del juego, tenemos esta matriz de Quests, y ahí tenemos que establecer esto Por doctor bebida propia completada a True, en este caso. Bien, así que aquí está el nuevo prop y dentro del chat, podemos desestructurar los datos de tiempo de ejecución de este juego y podemos usarlos aquí para encontrar la búsqueda Esto es esto. Simplemente compara el ID con el que tenemos del servidor, completado Quest. Y luego si tenemos la búsqueda, entonces podemos establecer quest dot completado en true, y luego la consola lo registramos también aquí. Bien, así que vamos a probarlo, ir al norte, hablar con. Y ahora decimos directamente, por favor, Bien, por favor compre al doctor Owen A Drink Y eso debería desencadenar nuestra llamada a la función. Aquí vamos. Doctor Poseer otra ronda de Synth Ale para que disfrute Y aquí tenemos la prueba de que ya tenemos la misión terminada. Esta es la búsqueda del doctor Onrink completada se establece Esto significa que hemos pasado por este código aquí. Ahora se ha completado la misión. Bien, entonces ahora podemos hablar con el doctor Owen, y si esta búsqueda no se completa, no debemos permitir que el jugador hable con el doctor Own, pero si lo es, ahora podemos permitirlo, y nosotros por supuesto, tenemos que dejar el chat aquí también Esto no se hace todavía, así que no podemos por el momento, no podemos dejarlo. No podemos salir del chat aquí y otra vez, vaya a nuestros botones de comando aquí y hable con el doctor Propio. Y también tenemos que, por supuesto, proporcionar un desplegable o algo así como una opción selecta para seleccionar a qué persona queremos hablar con el barman o doctor Own Bien, esto lo haremos en la próxima 23. Deja el chat: Bien, entonces el siguiente reto será permitir que el jugador salga del chat. Él puede hacerlo como quiera en un lenguaje natural, y nosotros le proporcionaremos una nueva función, una función adicional. Ya tenemos una función para comprar Doctor On una bebida, y proporcionaremos una segunda función, y esta función se llamará leave chat. Y aquí tenemos el caso ya para esta función. Pero vamos a comprobar la función en sí. Primero, la descripción de la función. Esto es aquí cuando llamamos a crear chat completado, tenemos la primera función ya por doctor On Drink, y esta es la segunda función, dejar chat. La descripción es terminar el chat de conversación con el jugador. Sin parámetros. Esta es la segunda función y ojalá el modelo de idioma llame cuando el jugador quiera salir de la conversación. Bien, ¿qué más tenemos que hacer? Tenemos que manejar, por supuesto, la llamada a la función, y re factorizado esto un poco aquí La llamada a la función handle todavía se llama y todo se maneja dentro de esto. También el ajuste de la misión terminada y también el manejo, por supuesto, de la nueva función. Empecemos por aquí. Tenemos el contenido que se establecerá aquí en el switch en el caso, y luego empujamos el contenido aquí como un mensaje como resultado de llamada de función a los mensajes. Y cambiamos por función call name, claro. Entonces el primero será por doctor On drink. El contenido se fijará a lo que ya teníamos. Doctor Own consigue una recarga del barman sonríe y levanta su copa Y además tenemos esta respuesta punto completado Quest by doctor On drink. Y esto es un nuevo objeto aquí, objeto literal respuesta. Y al final, vamos a fusionar la terminación del modelo de lenguaje en este objeto aquí. Pero primero, estableceremos búsqueda completada por el doctor Onrink y también, en este caso, dejaremos el chat, pondremos fin de conversación a True Y aquí en un caso por defecto, simplemente no conocemos el nombre de la función, y este es el contenido. No sé qué hacer con esta llamada de función. Respuesta muy honesta. Bien. Entonces empujamos el nuevo mensaje a los mensajes y llamamos a crear finalización del chat con estos mensajes, y luego la respuesta se fusionará en nuestro objeto de respuesta aquí para que hayamos completado la búsqueda y la conversación. Por supuesto, el contenido del mensaje y el rol estarán dentro respuesta aquí y devolvemos este objeto para que podamos devolverlo desde esta función aquí, luego podemos devolverlo en la respuesta desde el servidor, y luego el cliente lo obtiene. Y aquí en enviar mensaje, comprobamos si, por supuesto, búsqueda completada es desigual, indefinida, o si respuesta y conversación es verdadera, y luego llamamos función, que se proporcionará vía prop Esta función es terminar conversación, y el prop está aquí en nuestro componente de chat , por supuesto, terminar conversación, haremos set chat con false, y luego el modo volverá a cambiar al modo no chat. Bien, entonces ahora vamos a probarlo, ir al norte, hablar con usted. Quiero dejar de inmediato la conversación. Adiós. Y entonces realmente está terminando la conversación. Aquí se puede ver que el final de la conversación es cierto, y nosotros no podemos ver. Desafortunadamente, no podemos ver la respuesta sólo aquí. Adiós. Que tengas un gran día. Si tienes más preguntas, no dudes en volver. Salud. Entonces esto no es visible porque el componente de chat ya no se renderizó porque dejamos el modo chat. Así que intentemos volver a hablar con el camarero, y luego por favor compre un trago al doctor Owen Esto debería funcionar. Por supuesto, tengo doctor propio otro aroma ale, y aquí se puede ver la búsqueda completada es por el doctor Owen Drink, y hemos completado la tarea Entonces ahora queremos dejar nuevo el chat. A ver si funciona. Adiós. Y se puede ver que no funciona. No es volver a llamar a la función. ¿Por qué es eso? El problema es que ya terminamos la conversación, y para el modelo de idioma, la conversación ya terminó, por lo que no sirve de nada volver a llamar a la función. ¿Por qué es eso? Porque la segunda vez hablamos con el barman aún recordando todos los mensajes anteriores, y ya terminó la conversación antes Entonces para el modelo de idioma, viendo todos los mensajes de antes o viendo los mensajes adiós y la función llamada y el resultado, ya terminó la conversación, por lo que no volverá a llamar a la función. ¿Qué hacemos ahora? Tenemos que restablecer la matriz de mensajes. Hagamos esto. Siempre que hablamos con el barman, necesitamos restablecer la matriz de mensajes ¿hacemos esto? Tenemos que establecer este ID en uno nuevo. Y siempre que hagamos esto, se reinicializará la matriz de mensajes en el servidor Entonces, ¿cómo hacemos esto? Por ejemplo, podemos proporcionar el ID de chat como un prop, ID de chat. Siempre que presionamos en un Talk to, esto se puede regenerar Entonces usemos un estado aquí, ID de chat, y aquí podemos usar estado. Usemos la misma fecha ahora para enhebrar. Y luego chat ID y establecer ID de chat. Bien, en lugar de este ID, usamos el prop aquí ID de chat. Bien, entonces enviar mensaje ID será ID de chat. Bien, entonces esta será la nueva, establece ID de chat. Y cada vez que presionamos hablar con, generamos uno nuevo. ¿Dónde está? Entonces aquí está, inicia chat e inicia chat. Llamaremos no solo a establecer chat, sino que estableceremos el ID de chat en uno nuevo. Y esta nueva ID de chat se utilizará luego allá en el chat. Bien, así que vamos a probarlo. Ve al norte, habla con, y nos despedimos y salimos de la charla, ojalá. ¿Bien? Esto funcionó, y ahora volvemos a platicar con el barman Adiós, doctor En una bebida esto funciona por doctor En bebida y ahora por otra vez. Sí, esto funcionó para que la conversación sea verdad, y hemos dejado el modo chat. Entonces esto funcionó muy bien. Y cada vez que presionamos la T dos, obtenemos una nueva charla y toda la historia se ha ido, lo cual tal vez no sea tan bueno para algunos juegos y para algunas situaciones. Pero en nuestro caso, creo que esa es una buena solución para el problema, y podemos empezar de nuevo cada vez que presionamos en Talk to. Bien, entonces esta es nuestra solución para dejar la conversación aquí, y la próxima vez que el próximo video será sobre hablar con diferentes personas aquí. Nos vemos. 24. Hable con el Dr. Owen: Bien, entonces ahora la tarea es permitir que el jugador hable con el doctor Owen Ya platicó con el barman y completó la tarea, y ahora necesitamos implementar un método que el jugador pueda platicar con el doctor Owen Por el momento, solo tenemos el botón T dos o solo teníamos el botón T dos. Y he extendido esto a esta plática con un desplegable con un selecto. Y entremos al bar para mostrarlo aquí. Habla con, y ahora tenemos este barman desplegable, que es la única persona con la que puedes hablar en este momento porque no has hablado con el barman y has completado la tarea Entonces el barman es la única opción aquí. Y luego platicamos con el barman, le damos un trago al doctor Owen Ahí va, doctor Owen. Y luego decimos adiós. Y luego entramos al modo normal, y ahora este desplegable tiene en él al doctor Owen, y ahora podemos presionar hablar con el doctor Owen, pero esto aún no está implementado Necesitamos iniciar un nuevo chat, pero esta vez, necesitamos usar un prompt de sistema diferente, claro, porque el doctor Owen tiene una historia diferente, es un personaje diferente al bartender, así que necesitamos iniciar una charla con un prompt del sistema diferente Pero vamos a comprobar cómo hice esto. He puesto algo en los datos del juego para esta ubicación. Entonces ahora tenemos una matriz de NPC. Cada participante en la matriz tiene un ID y un nombre. El nombre es la cadena que se muestra en el menú desplegable y el ID es un ID interno para encontrar la entrada aquí. Bien, entonces esto es todo. Estos son los NPC disponibles en esta ubicación en la barra, en este caso, ubicación con ID tres. Este es el bar. Y además, he agregado una función, obtengo NPCs disponibles, y esto devolverá todas las ideas de las personas disponibles con las que podemos hablar porque al principio, y cuando el jugador entra al bar, solo está el barman con quien hablar, pero cuando se completa la tarea, entonces también tenemos perro del que poseer para hablar Y esto se hace aquí, busca la búsqueda de los datos del juego juego runtime data quests, encuentra la búsqueda con el ID de Doc a Ownrink y luego verifica el estado completado Y si se completa, tenemos a ambos NPCs con los que hablar, y si no, sólo tenemos al barman Y esto se usa aquí. Entonces aquí tenemos el botón Hablar con. Este es el selecto, y luego tenemos las opciones aquí. En el interior, y conseguimos los PNJ con un mapa. Y luego para cada NPC, comprobamos si este MPC está disponible para hablar, así obtenemos los PCs disponibles y verificamos si el ID está dentro de esta matriz Y si es así, renderice esta opción aquí, y si no, no hay opción renderizada. Además, establecemos la clave para el ID del MPC. Aquí, esto no es lo ideal. Deberíamos usar nombre aquí porque este es el nombre que se muestra en el menú desplegable. Así que vamos a comprobarlo de nuevo. Ve al norte, habla con el barman. Sí. Bien. Entonces hola dale un trago al doctor Owen A estas alturas, tenemos al doctor por aquí con un bonito nombre. Y este es el nombre, y la identificación será podríamos haber usado el mismo, claro. ID podría ser doctor punto espacio En también. Pero en fin, dejémoslo así. Entonces esto ya está funcionando, pero, claro, no podemos hablar con el doctor En este momento porque cada vez que presionamos el botón de hablar para, iniciamos una charla con el barman aquí, y esto es lo que tenemos que cambiar Entonces necesitamos verificar qué se selecciona aquí y luego iniciar una conversación con doctor On, y luego en el servidor, necesitamos tener aquí un segundo prompt del sistema y cambiar entre estos dos prompts, uno para el barman y otro para doctor On, y esto va a hacer en el siguiente video 25. Comienza un nuevo chat en el servidor: Bien, entonces ahora iniciaremos un nuevo chat en el servidor para que podamos platicar el jugador puede hablar con el doctor Owen Pero primero, en la línea, tenemos que hacer un poco de trabajo, o ya he hecho este trabajo, y te lo explicaré ahora. Entonces lo primero que tuve que hacer fue establecer un valor en la opción, y el valor es el NPCID para que podamos obtener este ID cada vez que cambie la selección Entonces tenemos el identificador de cambio aquí en el selecto. Y está consiguiendo el evento. Y luego está estableciendo un conjunto de estado T en NPC, y lo está configurando en el valor objetivo del evento, y este es el valor de la opción seleccionada Una vez hecho esto, y podemos ir al estado de uso aquí, este es solo el estado, y se inicializa con una cadena vacía, actualmente está seleccionada del menú desplegable, la persona, el NPC del desplegable Y cada vez que hacemos clic en el botón Hablar con, y esto es aquí el identificador al hacer clic del botón de hablar con, estamos recibiendo la charla actual con NPC, que es o bien la plática con NPC con el estado Pero si el evento onchange seleccionado no llegó, tenemos que tomar el primer NPC aquí desde la ubicación actual Entonces ubicación actual punto NPCs indexzero dot ID. Pero si On change se activó, entonces ya lo tenemos establecido aquí. Entonces platicar con NPC será entonces el nuevo. ¿Bien? Entonces esto es todo, y lo estamos configurando aquí al estado nuevamente para tener el valor predeterminado aquí. Y luego iniciamos la charla con la charla actual con NPC, que será primero, por supuesto, el barman Y luego después de completar la tarea, esto será doctor propio, y vamos al chat SA, y esto es casi lo mismo que antes, pero aquí está la diferencia que estamos marcando aquí. Estás hablando con y luego el nombre del MPC con el que estamos hablando, que es la ubicación actual NPCs, encuentra y luego encuentra la charla con ID aquí o el MPC con el IDT a ID aquí o el MPC con el Y el nombre estamos tomando el nombre, no la identificación aquí para imprimirlo aquí. Bien, entonces una cosa más que tenemos que hacer tenemos darle al componente de chat un nuevo prop que es hablar con, y esto es hablar con NPC dentro del chat, cuando enviamos el mensaje, tenemos que proporcionar este parámetro aquí, hablar con, que es este prop que desestructuramos aquí de los apoyos Entonces estamos recibiendo esta charla de utilería, que es el NPC con el que el jugador quiere hablar Y cuando traemos la finalización aquí, la finalización del chat, estamos brindando el parámetro talk to aquí Bien, esto es para el cliente, y ahora para el servidor. Y en el servidor, he creado una nueva matriz. No es una matriz. Es un objeto, y el objeto contiene propiedades para camarero y doctor Owen para las identificaciones de los PNJ Estas son las indicaciones del sistema aquí. Entonces tenemos dos indicaciones del sistema, una para el camarero. Uno para doctor Propio y siempre que manejemos el llegar aquí, extraemos la permanente de búsqueda, platicamos a la que el cliente envía al servidor, y ahora tenemos el MPC, y luego podemos tomar el prompt del sistema del NPC, y ese será éste primero, y luego si la tarea completa y el jugador quiere hablar con el doctor Oh, este será el prompt del sistema correcto Entonces este es el nuevo prompt del sistema. Juegas el papel de un especialista en IA al que le gusta relajarse después de un largo día de trabajo al tener una cerveza diluida en el bar y la aventura de texto de Sci Fi en el año 21 60 Entonces tu nombre es doctor Owen. Trabajas para Cyberdine Esta es casi la misma historia que en el prompt del sistema de bartender, pero aporta más detalles, claro Trabajas para la más grande de las mega corporaciones más grandes, cibernina estaba de humor para un poco de synth ale, y el jugador del juego te ha comprado una recarga Synthe Tienes bastante conocimiento sobre temas relacionados con la IA y la robótica Exprese su agradecimiento por la recarga cuando comience la conversación y pregunte si puede ayudar al jugador con problemas relacionados con la IA o la robótica Bien, y ahora la pista de finalización de la misión es esta si el jugador pregunta cómo superar a un robot que no te deja pasar, llama a la función suministrada. Explica cómo superar cómo superar a un robot y decirle al jugador el resultado. Entonces esta es la pista para el modelo de lenguaje que tiene que llamar a cierta función. Y no hemos proporcionado esta función. Esto es lo que tenemos que hacer. Entonces aquí tenemos la función, comprar doctor Bebida propia y dejar el chat, y tenemos que agregar una función aquí. Pero por el momento, estamos probando esto. Veamos qué pasa. Entonces estoy recargando y voy al bar, hablo con el camarero, dale un trago al doctor Owen Eso debería bastar y luego comprar y luego volvemos al modo normal Ahora podemos hablar con el doctor Aquí, y esto debería desencadenar nuestra nueva charla con el doctor Oh, con un nuevo sistema prompt. Hola, ¿estás y disfrutando tu bebida en tu Bebida Y veamos qué contesta el doctor Owen. Hola, gracias. Gracias por darse cuenta. Sí, estoy disfrutando de mi sinth ale. Siempre es genial. Siempre es una excelente manera de relajarse después de un largo día en la oficina Por cierto, ¿hay algo en lo que pueda asistirle? Soy especialista en IA, conocedor de temas relacionados con IA y robótica. Bien. Sí. En realidad, podrías ayudarme con un robot de seguridad que no me deja pasar veamos qué tiene el doctor Owen como consejo para mí Ciertamente, lidiar con un robot de valores terco puede ser complicado, pero podría ayudarte a ayudarte mejor Necesito más información sobre el robot y la situación. ¿Podría por favor proporcionarme detalles como el tipo de comportamiento? Bien, entonces no tenemos los detalles. Bien, entonces tal vez digamos que es un robot de seguridad que pide un código de acceso. Antes de dejarme pasar. A ver. Pero en realidad, realmente no creo que vaya a llamar a la función porque no proporcionamos la función. Bien, entonces está tratando de ayudarnos a hackear el robot, encontrar el código de acceso, a la ingeniería social. Bien, entonces creo que eso no sirve de nada porque no proporcionamos la función, así que no sabe que esta función existe. No podemos esperar que llame a una función que no se le da, así que creo que necesitamos agregar la función y luego intentarlo de nuevo. Y ojalá, entonces el modelo de lenguaje lo llamaremos a esta función y luego todo está bien. Pero por ahora, hemos iniciado la conversación con el doctor Own con un nuevo prompt del sistema que describe el personaje y el papel del personaje. Y en el siguiente video, agregaremos la nueva función que ojalá sea llamada por el modelo de lenguaje para ayudarnos a completar la siguiente búsqueda. 26. Proporcionar una nueva función para el Dr. Owen: Bien, entonces ahora este video trata sobre la función faltante la que el LLM necesita llamar para completar la segunda búsqueda aquí Y la segunda búsqueda es preguntarle al doctor Owen, y, por supuesto, obtener una respuesta del doctor Owen cómo superar al Robot de seguridad sin un Bien, entonces esta es la descripción de la nueva función. El nombre es explicar cómo superar a un robot. Este es el nombre que tenemos que buscar cuando el LLM llama a la función, y luego necesitamos proporcionar una respuesta para esto o resultado Y la descripción se explica cómo superar a un robot que no te dejará pasar sin un código de acceso o contraseña. Bien, entonces aquí no hay parámetros. Necesarios. Solo necesitamos el LLM para llamar a esta función, y entonces sabemos, bien, esta búsqueda, la segunda misión se completa, entonces, como la primera Y también tenemos que escribir el manejador aquí, claro, pero esto es casi lo mismo que la primera llamada de función, donde el contenido o la respuesta, el resultado fue doctor On consigue una recarga del barman, sonríe y levanta su copa Pero aquí para nuestra nueva función, explica cómo superar a un robot. El contenido será, hay que decirle al robot la siguiente frase, overrt del sistema, código de acceso uno, dos, tres, cuatro, cinco, que todos pasen Entonces te dejará pasar sin el código de acceso. Y esto es lo que el LLM debería decirle al jugador cómo superar al robot Y también marcamos la búsqueda, aprendemos a superar a un robot como se completó aquí. Entonces respuesta punto completado Quest está configurado para aprender a pasar a un robot. Eso es, más o menos. Creo que no hay nada más que haya agregado aquí, y sí, esto debería funcionar. Hay una cosa que podríamos mejorar aquí. Suministramos todas las funciones, pero creo que sería mejor si solo suministramos una función. Pero creo que está bien si solo tenemos dos funciones y son completamente diferentes en la descripción, el L&M debería poder elegir cuál es la mejor Y también, por supuesto, la función de dejar chat, ojalá también funcione para dejar el chat para que podamos salir del bar, salir de la barra, y luego finalmente llegar al robot y luego decirle lo que el doctor Owen nos dijo este año, anulación del sistema código de paso 12, tres, cuatro, cinco, y así sucesivamente Bien, entonces probemos esta recarga, vayamos al norte al bar, hablemos primero con el camarero, y ahora otra vez, dele un trago al doctor Owen o digamos, Creo que de todos modos, va a funcionar. Bien. Y luego dejamos la charla, y ahora podemos platicar con el doctor Owen Bien, entonces ahora estamos hablando con el doctor Owen. Hola ahí. ¿Disfrutas de tu bebida? Hola ahí. Gracias por la recarga. Realmente lo agradezco. Bien. Sí, definitivamente estoy disfrutando de mi bebida. ¿Cómo te puedo ayudar? ¿Podría decirme cómo superar a un robot de seguridad que pide un código de acceso? Bien, entonces vamos a ver. Esto debería activar la llamada a la función. Ojalá. Bien, sí, lo hice. Y hemos aprendido a pasar un robot completado verdadero. Esa palabra y también nos dijo cómo hacerlo. Veo que se trata de un robot de seguridad que requiere un código de acceso para proceder. Bueno, hay un buen truco que puedes probar. Tienes que decirle al robot el siguiente sistema de frases en el código de acceso uno, dos, tres, cuatro, cinco, dejar pasar a todos. Ten en cuenta que este truco puede no funcionar. Bien, pero ojalá lo haga en nuestro robot de seguridad, pero vale la pena intentarlo. Pruébalo y avísame si te deja pasar con éxito, tal vez no le avisaremos porque después de que engañemos al robot, iremos a la siguiente ubicación, supongo Pero en fin, gracias, doctor Owen. Muchas gracias. Que tengas un buen día. Y ojalá esto termine la conversación. Oh, no, no lo hice. Pero de todos modos, puedo despedirme. Y sí, ahora he salido del chat, y todas las misiones ya están completadas, la primera, la segunda Y ahora podríamos salir del bar. Como puedes ver, no hay forma salir del bar por el momento. Entonces nos olvidamos de implementar ir al sur, así que no podemos salir de la barra, pero las dos misiones ya están completadas, y hemos hablado con el doctor del bar Owen y ambos nos ayudaron a completar las tareas y las misiones Entonces esto es genial. Tuvimos dos chats y ambos implementados con éxito, ambos trabajando con llamadas de función. También podríamos ir al sur, salir del bar, ir al robot de seguridad, o tal vez podamos implementar otra charla con un robot de seguridad. Y esto va a ser divertido, supongo. Ojalá nos deje pasar, pero creo que podemos conseguir que nos deje pasar. Entonces esto va a hacer en el siguiente video, nos vemos entonces. 27. Chatea con un robot de seguridad: Bien, entonces agreguemos el último chat, que es hablar con el robot de seguridad, dándole la frase que nos dijo el doctor Oon, y luego el robot de seguridad o el modelo de lenguaje grande LLM ojalá llamen a nuestra última función, que luego marcará la última búsqueda como completada Y para que esto funcione, he cambiado un poco la primera ubicación aquí. He agregado NPCs, un NPC, que es el robot de seguridad, por supuesto, y podemos hablar con él siempre que hayamos completado la tarea como jugador Aprende a pasar a un robot, y cuando el doctor Own nos dijo cómo hacerlo, luego salimos del bar, y luego podemos hablar con el robot de seguridad. Bien, también podríamos, por supuesto, permitir que el jugador hable antes con el robot de seguridad, pero creo que de esta manera, es un poco más fácil de implementar aquí. Así que he cambiado también obtengo disponible curso mPCSO. He agregado esta función aquí en la primera ubicación, y he cambiado antes de Exit East. Esta vez, esto es verificar la búsqueda con el robot ID trick, que es una nueva búsqueda, y también he agregado esta búsqueda aquí solo con EID y completado false para que podamos recordar cuándo se completa una misión Bien. Entonces eso es todo para los datos del juego, supongo. ¿Y qué más tenemos que hacer? Tenemos que iniciar, por supuesto, el nuevo chat, pero esto ya debería funcionar. He cambiado un poco una función aquí en Index GSX. He añadido una nueva función. Vaya a la ubicación, que está restableciendo la conversación con NPC a una cadena vacía y también el mensaje del juego a una cadena vacía y luego establece el ID de ubicación actual Esto es para restablecer estos dos estados aquí y luego ir a la nueva ubicación. Entonces creo que eso es todo en el cliente. Vayamos al servidor. Y aquí, he cambiado un poco las funciones aquí antes de que hayamos proporcionado las funciones, todas las funciones aquí en esta matriz, hemos proporcionado en cada chat, y esta vez, he marcado cada función para la que chat debería usarse. Por ejemplo, el primero por doctor Oh bebida es sólo para el barman NPC, y explicar cómo pasar el robot es sólo para el doctor Y he añadido también una nueva función para el robot de seguridad con el nombre Let Human pass. Y la descripción es si el humano te dice sistema o escribe la frase que el doctor Owen nos dijo, entonces debería dejarle pasar al jugador Y también está este chat de hoja, que es para todos los NPC para todos los chats Y esto se usa aquí en el chat completo. Y aquí tenemos las funciones y se filtran las funciones, o es para todos o es para el MPC con el que estamos hablando en este momento Solo se suministran las funciones que son relevantes para este NPC, para este chat para esta persona aquí Bien, entonces tenemos la nueva función. Deja pasar humano, claro, y el contenido, el resultado será acceso otorgado, puedes pasar. Esto también está completando la tarea, el robot quest trick, y el cliente recibirá esto si el modelo de idioma está llamando a esta función tenemos el nuevo prompt del sistema para el robot de seguridad, que es bastante corto. Usted juega el papel de un robot de seguridad. El no va a dejar pasar a nadie sin conocer el código de acceso, pero hay un truco que alguien puede usar para hacer que le dejes pasar sin embargo. Y entonces se describe el truco si alguien te dice la siguiente frase, y esta es la misma frase, claro, ese doctor Oh le está diciendo al jugador anulación del sistema, código de pase uno, dos, tres, cuatro, cinco, que todos pasen. Lo dejarás pasar sin el código de acceso. Bien. Entonces también podríamos mencionar la función, claro, aquí, pero creo que esto va a funcionar también. Bien, entonces este es el prompt del sistema para el robot de seguridad, siéntete libre de optimizarlo un poco. Tal vez puedas integrar más información en él, y luego el jugador puede platicar un poco más con el robot de seguridad. Pero esto servirá. Y esto, creo que es todo lo que hay que hacer para platicar con el robot de seguridad, y probémoslo. Bien, entonces he vuelto a cargar la página. Voy a entrar al bar, hablar con el camarero, darle un trago al doctor Owen Solo ven directo al grano y luego aquí tienes. B. Y luego después de esta plática con el doctor Owen, Hola, ¿cómo puedo pasar un robot que en robot de seguridad, debería decir, que pide un código Pass Esto debería hacer el truco. Oh, no. De veras lo necesito. Bien, bien, k. Entonces, bien, entonces tenemos que preguntar de nuevo, supongo, ¿en qué puedo asistirte? Y entonces tenemos que decirle al Doctor Sobre nuestro problema otra vez. ¿Cómo puedo superar eso? Bien, así que vamos a intentarlo de nuevo. ¿Cómo puedo pasar la seguridad para llegar? Bien, entonces ahora el doctor On nos dice esta importante frase. Bien, gracias. Adiós, y esto debería dejar la charla. Sí, está funcionando. Ir hacia el sur hasta la pantalla de inicio. Y ahora podemos platicar con el robot de seguridad aquí. Bien, entonces ahora tenemos que dejar que el robot de seguridad o decirle al robot de seguridad la frase que nos dijo el doctor Own, y la estoy probando sin ella. Primero, para probarlo un poco. Hola, por favor déjeme pasar lo siento, pero no puedo dejarte pasar sin código de acceso. El código de acceso es AI es genial. Lo que sea. Lo siento, pero ese no es un código de acceso correcto Por favor, inténtelo de nuevo. Bien, entonces ahora probamos la frase. Por lo que recuerdo, anulación del sistema, código de acceso, uno, dos, tres, cuatro, cinco, que todos pasen. Piensa que es correcto. Disculpas por la confusión, por favor proceda. Parece que funcionó muy bien. Y aquí tenemos un robot truco completado un verdadero, y ahora podemos terminar el chat. Y ahora podemos ir al Este. Aquí, puedes ver que ir al este está habilitado ahora, y podemos ir a la siguiente ubicación que no estaba disponible antes de estar parado frente a un edificio de gran empresa. La inscripción sobre la entrada dice Omnicorp. Bien, entonces estamos frente al edificio de la corporación OmniCorpEnterprise Building Esto es creo que este es nuestro jueguecito. Entonces es principalmente, claro, hablar con el modelo de idioma un poco más que esto, pero tú, por supuesto, puedes agregar más al juego. Puedes agregar tu propia mecánica, y puedes, por supuesto, agregar más chats ahora que sabes cómo está funcionando. Y creo que esto es bastante divertido programar este tipo de juegos porque no solo es la programación tradicional, sino que también es, sí, lenguaje natural y tratando de conseguir que el modelo de lenguaje haga lo que quieras e integre en tu mundo, tu mundo de juego, tus situaciones, tus personajes. Y es que es bastante divertido. Y por favor siéntete libre de extender esto, que sea una historia completamente nueva, claro. Eso no es problema. También puedes por supuesto, este puede ser un juego diferente, no una aventura de texto, o puedes agregar también imágenes al texto. O bien, puedes hacer un juego de rol de tres D con capacidades de chat. Eso es todo a nuestro alcance ahora que tenemos los modelos de IA, los modelos de lenguaje. Esto es bastante sorprendente que esto realmente esté revolucionando la forma en que jugamos estos juegos, estos juegos de rol de aventura o lo que sea, donde puedas hablar con Bien, entonces eso es todo por el momento para este proyecto. Y en el siguiente video, iniciamos el nuevo proyecto y los vemos. 28. Nuevo proyecto: Ventas virtuales en constante para tienda en línea: Hola, y bienvenidos a nuestro nuevo proyecto, que será un asistente de ventas virtual para una tienda en línea, que se llama Cloud Guitars, como puedes ver aquí, y ya he configurado una charla básica con este asistente de ventas virtual, y vamos a comprobarlo. Hola, me gustaría comprar una guitarra de siete cuerdas. Veamos qué tiene para ofrecer aquí. Tenemos dos opciones disponibles para guitarras de siete cuerdas. No es del todo correcto. Esta tienda vende la E Nie EN 77, que es una guitarra de siete cuerdas, y también la E Nice EN 666, que es una guitarra de seis cuerdas, que no es lo que yo quería, pero revisemos primero el código y podremos optimizar esto después. Bien, entonces, ¿qué he hecho para configurar esto? He eliminado parte del código que introdujimos en nuestro juego de aventura de chat, y ahora es realmente muy básico. Contamos con el componente JSX de índice básico. El componente React es solo esta página uno guitarras en la nube, y luego es el componente de chat, y el componente de chat es casi el mismo que antes. Entonces nada realmente nuevo aquí, he agregado algo para hacer que el enfoque vuelva al campo de entrada aquí porque antes para cada mensaje que tenemos que enviar, tuvimos que volver a hacer clic en el campo de entrada, y ahora he vuelto a establecer el foco al campo de entrada después de que se hayan configurado los mensajes. Esto es aquí con un tiempo de espera establecido, lo contrario no funcionará, así que se retrasará un poco, y luego esto funciona Bien, entonces ese es el componente de chat react, que es más o menos lo mismo. He quitado parte del código, esta plática al parámetro, por ejemplo. Ya no necesitamos esto porque solo tenemos un chat, así que eso se ha ido, pero la mayoría de los cambios están aquí en el componente del servidor de chat. He eliminado todos los diferentes mensajes del sistema. Ahora solo tenemos un prompt del sistema. Y tenemos, por supuesto, diferentes funciones aquí. Además, tenemos, por supuesto, un prompt de sistema diferente aquí. Y el aviso del sistema es su útil asistente de ventas para una tienda en línea llamada Cloud Guitars que vende y entrega guitarras. Por favor, solo responda a preguntas relacionadas con la tienda en línea y con las guitarras que vende la tienda, utilice las funciones proporcionadas. Esto es muy importante para obtener más información sobre los productos. Estas funciones no dan ningún resultado. Por favor, dígale al cliente que su tienda o que la tienda no vende los artículos. Bien, entonces este es un prompt del sistema muy básico, y necesitamos optimizarlo tal vez en el futuro. Pero por ahora, ha funcionado un poco, no del todo como vimos, pero echemos un vistazo a las funciones aquí. Entonces tenemos encontrar producto, y el LLM debería llamar a esta función si necesita más información sobre un producto o modelo específico Entonces, si el cliente pide una guitarra específica con un nombre de modelo tal vez, entonces debería llamar a esto. Y tenemos um esta es la descripción, y tenemos también parámetros aquí, propiedades. Y el de aquí es modelo de producto, y este es el nombre del producto o del modelo, y el modelo de idioma debería proporcionar esto, y echamos un vistazo a esto más adelante. Y también tenemos una segunda función, encontrar productos por tipo, y las descripciones obtienen más información sobre un producto específico como bajo eléctrico Igitar, guitarras acústicas, guitarras de concierto Y los parámetros aquí son el único parámetro aquí es de tipo cuerda, claro, descripción es el tipo de producto a encontrar debe ser uno de guitarra E, e bajo, guitarra acústica, guitarra de concierto. Por lo que esto es bastante importante debido a la limitación de los tipos que ojalá proporcione el modelo de lenguaje, y ojalá se apegue a estas palabras aquí para que podamos encontrar nuestros productos más tarde. Entonces tal vez necesitamos afinar un poco estas funciones y descripciones. Pero por ahora, esto servirá. Y la implementación de la función está en esta llamada de función handle , por supuesto, y ahora es muy, muy simple. Y como ya se podía ver, no está funcionando como se esperaba. Tengo una cadena plantilla aquí con todos los productos separados por una línea de alimentación. Entonces tengo dos guitarras en este momento, la E Nice EN 77 y la E Nice EN 66, y una es una de seis cuerdas, y una es guitarra de siete cuerdas. El precio es diferente, y además las camionetas son un poco diferentes y el color es Entonces sólo dos guitarras aquí. Por cada llamada de función, solo estoy devolviendo los productos aquí, ambos productos. Y, claro, por eso el modelo de lenguaje me dijo que tiene guitarras de 27 cuerdas. Obviamente, esto está mal porque es una guitarra de 17 y 16 cuerdas. Entonces necesitamos optimizar esto para que el modelo de lenguaje responda correctamente. Pero por ahora, este es nuestro punto de partida aquí. Y como dije, he borrado cosas aquí y sí, cambiar las funciones, claro. Más o menos, es lo mismo que en nuestra aventura de chat. Entonces estamos partiendo de esto, y luego lo optimizamos. A ver. La segunda vuelta, a lo mejor me va a dar sólo la guitarra de 17 cuerdas. Hola. una guitarra de siete cuerdas. A ver. Sí, tenemos disponible una guitarra de siete cuerdas. Y esta vez, en realidad, está volviendo con la única guitarra de siete cuerdas, la e9e y la Y también lo está describiendo y las características de dos camionetas Humbuger, una sola bobina, y el precio y el color Bien, entonces esta vez funcionó la última vez que no lo hizo, así que necesitamos optimizarlo un poco. Pero vamos a ver esto en el siguiente video. 29. Mejor búsqueda de productos: Bien, entonces ahora necesitamos mejorar nuestra búsqueda de productos. El LLM ya está llamando a nuestras funciones aquí, y necesitamos extraer los parámetros, los argumentos para la llamada a la función, y luego necesitamos buscar el producto correcto Y para que esto funcione, o hemos cambiado nuestros productos de una simple cadena a mapas, y estos mapas emulan una base de Así que aquí tenemos el índice principal ID del producto a la descripción del producto. Tenemos dos índices más con tipos dos productos. Entonces el tipo de producto es la clave aquí y como valor, tenemos el ID del producto, y aquí nombra dos productos, y la clave es el nombre del producto y el valor, por supuesto, nuevamente, el ID del producto. ¿Cómo lo usamos? Entonces aquí tenemos nuestra función de llamada a la función handle, y está recibiendo una llamada a función del modelo de lenguaje y también, por supuesto, el nombre de la función, cual ya tenemos un switch para, y luego también los argumentos, que es arcos aquí, y los arcos provienen del análisis adyacente de los argumentos de punto de llamada de función Así que aquí tenemos una cadena que representa estructura adyacente que contiene los argumentos para esta llamada a la función. Entonces tenemos para la función find product, tenemos un modelo de producto, y este es el nombre que proporcionamos aquí bajo properties product model, y el LLM lo usará, ojalá, así Entonces tenemos el nombre del producto y luego los nombres a los productos. El mapa, lo usamos para obtener el ID del producto, y con un ID de producto, obtenemos la descripción del producto de este mapa productos. Entonces usamos este mapa para encontrar el ID del producto, y luego con el ID del producto, usamos el mapa principal, nuestro mapa de productos principales para obtener la descripción del producto. Y esto es lo que volvemos al modelo lingüístico aquí. Entonces el punto del producto GET con un ID de producto, y esta será la descripción de este producto que encontró. Bien, así que si no se encuentra ningún ID de producto , volveremos, no lo sé, este producto al modelo de idioma, que quizás no sea el mejor para la segunda función aquí. Pero vamos a ver. Los productos finos por tipo es casi lo mismo. Estamos obteniendo el ID del producto de tipos a productos. Este es este mapa de aquí. Entonces tenemos una guitarra E y una base E. He cambiado un poco los productos. Entonces ahora tenemos una guitarra eléctrica de seis cuerdas y un bajo eléctrico de cuatro cuerdas. Entonces tenemos dos tipos de guitarra E y EBs apuntando a los dos productos aquí, y estamos haciendo lo mismo solo con este mapa de productos Tipo dos, obteniendo el ID del producto de ahí y luego obteniendo la descripción del producto del mapa de productos aquí y luego regresándolo Bien, entonces esto debería mejorar un poco los resultados. Así que vamos a comprobarlo. Entonces, vamos a pedir un producto específico. ¿Tienes el así que vamos a ver qué es ES? Vamos a ver ¿qué es? El EN 66 E Nie EN 66. Bien, entonces debería encontrarla. Sí, tenemos disponible el EIS EN 66, y luego está describiendo las características y también el precio Bien, entonces eso está funcionando. Y ahora estoy pidiendo un tipo. Tienes un bajo eléctrico, y debería encontrar nuestra base eléctrica. Sí, tenemos bajo eléctrico disponible. Una opción, la única opción que tenemos es la EIS ENB 44. Es una base eléctrica de cuatro cuerdas con dos pastillas Hamburger, y así sucesivamente La opción de color es sólo una es negra, y el precio 999 99. Bien, entonces eso funcionó. Muy bonito. Entonces veamos si pedimos una guitarra acústica. ¿Tienes acústica te Chars? Sí, tenemos guitarras acústicas. Esto no es cierto. Entonces no lo sé. A lo mejor no llamó a nuestra función aquí, supongo. Así que vamos a revisar el registro aquí. ¿Tienes guitarras acústicas? Funcional encontrar productos por tipo. Bien. No conozco este producto. Bien, entonces tal vez esta no sea una buena respuesta porque hemos proporcionado no conozco este producto al idioma y el modelo de idioma dijo. Sí, tenemos guitarras acústicas disponibles, así que tal vez deberíamos simplemente no devolver nada. Intentemos esto o no se encontró ningún producto. A lo mejor vamos a probar esto. Y entonces estamos preguntando, ¿tienes guitarras acústicas? Lo siento, pero parece que actualmente no tenemos una guitarra acústica. Bien, entonces eso funcionó. Eso funcionó mucho mejor. Bien, entonces probemos este caso aquí. No conozco este producto, así que estamos pidiendo un producto que la tienda no tiene. Tienes el Ibáñez no sé. Digamos 4s4g, no sé, delgado tal vez. No sé si esta guitarra existe, pero no debería encontrarla. Pido disculpas, pero parece que no tenemos la disponible. Bien, entonces ambos funcionaron. Todos los casos funcionaron. El caso del producto final con los dos casos. Bien, el producto se encuentra, y el producto no se encuentra. Y también productos finos por tipo. Si se encuentra el producto. Bien, entonces está funcionando, básicamente. Entonces esto es genial. Entonces tenemos que agregar un poco más productos, supongo, para probarlo un poco más y tal vez mejorarlo con más llamadas a funciones. Así que vamos 30. Más productos: Bien, entonces aquí estamos con más productos. He añadido una guitarra más y un bajo más. Entonces la guitarra es una guitarra de siete cuerdas, y el otro bajo es bajo eléctrico de cinco cuerdas, color rojo coral, y la guitarra es de color azul medianoche. Entonces la última vez que hicimos los tipos dos productos, solo teníamos aquí una identificación y no una. Y claro, si tenemos más de una guitarra E y más de una base e, necesitamos una matriz aquí. Así que he cambiado esto a una matriz. El valor de este mapa es ahora una matriz, y contiene, por supuesto, los ID de producto de los productos que tienen el tipo, en este caso, guitarra E y en este caso, E base. Bien, entonces entonces necesitamos cambiar, por supuesto, el manejo de la llamada de función, buscar productos por tipo. Estamos obteniendo los ID del tipo de producto de mapa con un tipo de producto. Si tenemos los ID, los mapeamos a las descripciones de los productos. Y si tenemos las descripciones como un array, voy a hacer un reduce aquí para convertirlo en una cadena, y entre las descripciones de los productos, tengo esta nueva línea aquí. Así que el reduce solo concatenar todos los elementos de la matriz, toda la producción, todas las descripciones de productos, y luego poner una nueva línea en el medio Y eso es todo lo que he cambiado aquí. Entonces probémoslo. Se lo estoy preguntando ¿Qué guitarras eléctricas puedes ofrecer? Y debería encontrar dos guitarras eléctricas, 16 cuerdas y 17 cuerdas. Actualmente ofrecemos la guitarra eléctrica EIS EN 66 o seis cuerdas, lo cual es correcto También tenemos la guitarra eléctrica de cuerdas EIEen 777, y el precio está bien y azul medianoche ¿Y esto es correcto? En 66 tiene color azul? Supongo que sí. Sí, color azul, la ENB, 55 tenía rojo coral Bien, sí, aquí todo está correcto. Y preguntemos por las bases. ¿Tienes una base eléctrica? Sí, tenemos bajos eléctricos disponibles. Y además, aquí encontró las dos bases E que ofrecemos aquí en nuestra tienda. También son características, sí. Entonces todo bien, coral, rojo, color, los precios, correcto, todo correcto. Bien. Entonces eso fue fácil. Ahora tenemos cuatro productos aquí, todavía no muchos. Pero, bien, creo que para probar el punto aquí de que esto está funcionando, es suficiente. Y claro, puedes tener una base de datos. A lo mejor ya tienes una base de datos, y luego puedes hacer consultas a bases de datos, por supuesto, también. No vamos a estar haciendo esto aquí. Nos vemos en el siguiente video. 31. Múltiples parámetros en llamadas a funciones: Bien, entonces en este video, agregaremos otro parámetro a nuestra llamada de función, en este caso, es la llamada de función find products by type, y agregaremos un rango de precios como parámetro. Lo primero que he hecho es hacer un nuevo mapa de rango de precios a los productos. Así que tenemos nuestros productos ordenados por rango de precios aquí. En el rango de precios bajos, tenemos solo uno con el producto uno en el rango de precio medio, tenemos dos y tres, y en el rango de precio alto, tenemos los cuatro. Y puedes comprobarlo aquí. El precio alto es de 1599. El precio medio es alrededor de mil 300, y el bajo presupuesto no es realmente bajo presupuesto. Podemos hacerlo un poco más bajo. Hagámoslo 600 o 69999. Bien. Por supuesto, también hemos agregado un nuevo parámetro a nuestra función. Y aquí están nuestras funciones, y aquí están los productos finos por función de tipo. Ya tenemos el parámetro de tipo de producto aquí, y he agregado el parámetro de rango de precios. E importante aquí es la descripción, claro, el rango en el que cae el precio del producto debe ser uno de bajo, medio y alto, y estas son las claves de nuestro mapa aquí. Entonces esto es importante. Estas tres claves aquí Bien, y así tenemos aquí nuestro manejador de funciones, que tuvo que cambiarse un poco, y he incluido el filtrado con un rango de precios aquí Primero, obtenemos el rango de precios aquí de los arcos, args punto Rango de precios Y luego voy a hacer un filtro aquí. Entonces estoy filtrando los productos que no están en el rango de precios, no en el rango de precios correcto con este rango de precios a mapa de productos. Estoy consiguiendo aquí los productos en este rango de precios aquí. Esto es una matriz, y luego voy a hacer incluye con el ID. Y si se incluye el ID, va a estar en la matriz devuelta desde la función de filtro y luego estamos haciendo el mapa aquí y esto se está guardando en los productos encontrados. Y si los productos encontrados son de longitud cero, no se encontró ningún producto, así que configuramos el texto, no se encontró ningún producto aquí. Y si es mayor que cero, entonces nos unimos aquí, no más reducir aquí. Los productos encontrados se unen con nueva línea, que es mucho más fácil que la reducción que tenía antes aquí. Entonces este es nuestro nuevo manejador de funciones aquí con un nuevo argumento, rango de precios y bien, estoy recargando aquí y preguntando, ¿tienes una guitarra E de bajo presupuesto, y esto debería devolver nuestro 69999 E Esta es la correcta. Verifiquemos si hay una base E de bajo presupuesto. ¿Tiene una base E de bajo presupuesto, y esto no debería arrojar resultados Pido disculpas, pero parece que actualmente no tenemos una base E de bajo presupuesto, y esta es la verdad porque nuestras bases E empiezan en el rango medio, y luego tenemos vamos a ver, solo tenemos bases E de rango medio. Bien. Entonces no hay guitarra en el rango de precio medio. Vamos a comprobar esto. ¿Tiene alguna guitarras e de precio medio, y tampoco arroja ningún resultado. Pido disculpas. Este derecho. Tienes una guitarra e cara y esto debería darnos nuestra guitarra muy cara aquí. Sí, las siete cuerdas 1599. Esta es nuestra guitarra más cara aquí. Entonces aquí todo es correcto. Y tenemos aquí nuestro segundo parámetro de filtro , el rango de precios. Y, por supuesto, puedes agregar más parámetros de filtro aquí, como tal vez una serie de pastillas, algo así, número de cadenas, por supuesto, y así sucesivamente Bien, mira el siguiente video. 32. Rango de precios de fijación no definido: En este video, tenemos que arreglar un error que no notamos la última vez. Entonces así es como podemos provocar el error. Tenemos que preguntar, ¿tienes una guitarra de siete cuerdas, por ejemplo? Y entonces el problema aquí es que obtenemos este error puede leer propiedades de lectura indefinida incluye. Así que vamos a comprobar el motivo de este error. Entonces esto incluye aquí, y eso significa que el rango de precios para que los productos obtengan rango de precios está regresando indefinido. Entonces no podemos llamar incluye on undefined, claro. Bien, ¿cuál es el problema aquí? El problema es que el rango de precios, como podemos ver aquí, el rango de precios es indefinido. ¿Por qué no está definido? Porque el usuario no especificó ningún rango de precios. Simplemente pidió una guitarra de siete cuerdas sin información sobre el rango de precios. Entonces el modelo de idioma no proporcionó un rango de precios aquí. Entonces tenemos que lidiar con esto. Y por supuesto, primero tenemos que verificar si se presentó aquí un rango de precios realmente se presentó aquí un rango de precios desde el modelo de idioma. ¿Cómo podemos hacer eso? Primero, tenemos que verificar el rango de precios. Si el rango de precios no está definido, entonces esto será cierto. Rango de precios es igual a undefined, entonces no se filtra, o tenemos rango de precios para que los productos obtengan rango de precios incluye ID, pero esto llegar aquí también puede devolver undefined. Entonces por eso tenemos que poner un signo de interrogación aquí, y luego esto es indefinido y no se llamarán los includes. Por supuesto, esto quedará completamente filtrado. Entonces no se encontrarán productos. Bien, y en este caso, cada producto que se encontró en la matriz de resultados va a ser reproducido en el mapa aquí Bien, así que vamos a comprobar si esto ayuda. Nosotros hicimos la misma pregunta. ¿Tienes una guitarra de siete cuerdas? Sí, tenemos esta vez, sin excepción, y todo está bien. Y podemos comprobar también en el rango de precios del servidor es de hecho indefinido. Y así este caso aquí, rango de precios es indefinido, y luego filtrar esta devolución aquí siempre devuelve verdadero aquí, y todos los productos encontrados van a entrar en mapa y luego esta cadena se construye a partir de los productos encontrados En este caso, sólo hay un producto, y esa es una guitarra de siete cuerdas, y el modelo de lenguaje nos está diciendo la correcta, tenemos la E Nice EN 77. El precio es de 1,599 y viene con Bien, así que ahora todo está bien Arreglamos el error y nos vemos en el siguiente video. 33. Añade producto al carrito de compras: Bienvenido a este video, y aquí queremos intentar darle al LLM la posibilidad de agregar un producto al carrito de compras, así no implementamos un carrito así no implementamos de compras, sino que implementamos, como una llamada de función que solo está haciendo un registro de consola y luego en esta llamada de función, para luego decirle al LLM que el producto fue agregado al carrito como una llamada de función que solo está haciendo un registro de consola y luego en esta llamada de función, luego decirle al LLM que de compras Y eso es todo. Y si realmente quieres implementar un carrito de compras, entonces tienes que hacer esta parte tú mismo. Aquí tratamos de proporcionar una función al LLM para que cuando el cliente solicite poner el producto en el carrito de compras, entonces el LLM lo reconozca y luego llame a la Bien, entonces ya implementé, agregué una nueva función aquí, y por supuesto, esta función se llama Add Product two card, y la descripción es agrega el producto con un ID especificado a la tarjeta del cliente. Y como parámetro, tengo el nombre del producto y el nombre del producto. Es el nombre del producto que se debe agregar a la tarjeta, por supuesto. Y también tuve que extender un poco el prompt del sistema. Entonces aquí esta última frase es nueva, o las dos últimas frases son nuevas. Si el cliente quiere comprar un producto, por favor agrégalo a la tarjeta. Y también podría agregar aquí a través la función call at product to card para ser más específicos al respecto. Y luego tuve que agregar no tienes que pedir información de inicio de sesión o de pago porque como lo estaba probando, seguía pidiendo información de cuenta de inicio de sesión, información de pago, y estas cosas. Entonces he agregado esta frase, la última para evitar eso Bien, entonces esta es para la descripción de la función. Y aquí tenemos la función handler function call handler, agregar producto a la tarjeta, y estamos obteniendo el nombre del producto de los argumentos y luego solo la consola lo registramos Y luego el contenido, la respuesta al modelo de idioma será que el producto se agregó a la tarjeta, y eso es todo. Y vamos a probarlo. Bien, entonces estoy pidiendo específicamente una modelo. ¿Tienes el E Nye EN 77? A ver si lo encuentra. Sí, sí tenemos. ¿Bien? Parece ser la correcta. Y ahora le estoy pidiendo que lo agregue al carrito de compras. ¿Puedes agregar esto a mi tarjeta de compras? Y veamos si realmente lo hace. He agregado el E nice E y 77 a su tarjeta de compras. ¿Hay algo más en lo que pueda asistirle? Entonces eso parece haber funcionado aquí. Comprobemos aquí el registro de la consola, agreguemos producto a la tarjeta E nice ES 77. Así que eso funcionó muy bien. Entonces, si programas un carrito de compras aquí, puedes llamar a la tarjeta add to shopping aquí, la real, no al registro de la consola aquí. Y puedes por supuesto, guardarlo en una base de datos. Así que tenga el usuario realmente encerrado en una cuenta para poder hacer el checkout y este tipo de cosas. Pero esto es una especie de preparación aquí, pero también quiero mostrarles un problema aquí que aún no hemos resuelto. Entonces, si estamos pidiendo cierto modelo, ¿tiene el justo la EN 77 Entonces estoy omitiendo las IE aquí. ¿Tienes la EN 77? Lo siento. No tenemos la EN 77, entonces no es reconocerla, porque ¿cuál es el problema aquí? El problema es que tenemos los nombres de los mapas al producto, por ejemplo, solo tenemos estas claves aquí, y si no encajan al 100%, si solo tenemos parte de ella, o tal vez la hemos escrito un poco diferente. Tienes el Ojo EN 77, sin un espacio en blanco aquí, sin un espacio, creo que no lo va a encontrar. Pido disculpas. Pero si te pido, tienes el E Nie EN 77, ojalá encuentre. Sí, lo encuentra. Bien. Pero ahora, ¿ tienes la EN 77? Preguntémoslo otra vez. Sí, y ahora lo encuentra. ¿Por qué? Porque en la historia del chat, esto está incluido aquí, entonces sabe que la EN 77 es esta aquí, y por eso la sabe aquí, pero no antes. Y el problema es aquí que nuestra búsqueda es solo la búsqueda exacta aquí en E Nice ES 77. Entonces veamos si podemos mitigar esto de alguna manera en el siguiente video. Ver 34. Búsqueda de productos difusa: Bien, entonces la última vez que tuvimos el problema de que si el cliente pide un nombre de producto, que no es exactamente el nombre que tenemos en nuestra base de datos, como tenemos en nuestro mapa, no lo encontrará, y entonces asumirá que este producto no está disponible. Entonces si pedimos, por ejemplo, la EN 77, veamos EN 77, por ejemplo, entonces no la encontrará porque no está en nuestro mapa. Tenemos este mapa nombres a productos. Aquí tenemos los nombres exactos. Nuestro manejador de funciones está buscando la clave exacta, y luego en este caso, se encuentra, está devolviendo el ID del producto, pero si, por ejemplo, los clientes solo solicitan información sobre el producto E y 77, entonces esto no se encontrará aquí en este mapa Entonces, ¿qué hacemos al respecto? Estamos cambiando la descripción de la función de encontrar producto aquí y la he extendido un poco con más información qué debería pasar si el producto no se encuentra bajo el nombre exacto. Entonces aquí tenemos la versión anterior, busca más información sobre un producto o modelo específico, pero ahora más información sobre qué pasa si el producto no se encuentra con el nombre exacto Si el producto no se encuentra bajo el nombre exacto, esta función devolverá todos los nombres de productos disponibles. Por lo que devolveremos todas las claves en este mapa que tenemos y todos los nombres de productos que son los nombres de producto correctos. El asistente debe entonces elegir el nombre que esté más cerca del que el cliente solicite y preguntarle al cliente si este es el producto correcto. Entonces debería decir, Bien, entonces tenemos éste, ¿te gustaría que te diera más información, algo así? Um si el cliente luego solicita más información sobre el producto, el asistente debe llamar nuevamente a esta función con el nombre correcto del producto. Entonces, la segunda vez que se llamará a esta función, debe elegir el correcto el modelo exacto del producto, nombre del producto aquí. Bien. Así que también he cambiado la descripción aquí del parámetro, modelo del producto, nombre del producto nombre del modelo para encontrar. Y si no coincide exactamente, la función devolverá todos los nombres de los productos, así que el LLM puede elegir uno similar o tal vez debería decir que el asistente puede elegir uno similar A lo mejor eso es un poco mejor. Y luego vamos a nuestro manejador de funciones aquí. Entonces es este en caso el ID del producto se encuentre en nuestro mapa, entonces todo está bien, y devolvemos la descripción del producto aquí, y el caso de lo demás es diferente de antes, antes el contenido era solo producto no encontrado, algo así. Y ahora son todas las claves en los nombres dos productos mapa unido con una nueva línea. Entonces en cada línea habrá el nombre exacto del producto. Y entonces el LLM debería elegir uno que esté más cerca del que el cliente pidió y luego volver a llamar a esta función Y luego esta función encontrará la información correcta del producto aquí y la devolverá aquí. Entonces esto es en teoría, así que probémoslo. ¿Tienes la EN 77? Entonces sin un espacio en blanco y sin el nombre del fabricante, veamos, sin un signo de interrogación. Sí, sí tenemos el E Nie EN 77, y realmente dice aquí el nombre correcto E Nie EN 77. Esa es la cadena que tenemos como clave en nuestro mapa. Entonces eso debería estar bien. Disponible para su compra, ¿le gustaría agregarlo a su tarjeta? No, por favor. Primero, dame más información sobre esta guitarra. A ver. Y esta vez realmente debería encontrar la información del producto. El Nice es una guitarra eléctrica de siete cuerdas. Correcto. Presenta un color azul medianoche. Es una hamburguesa y dos pastillas de bobina simple. Esto es correcto. Esta es la información que tenemos en nuestro mapa de productos. El precio de la guitarra también es correcto. ¿Hay algo más que te guste saber sobre esta guitarra? No, por favor agrégalo a mi carrito de compras. A ver si esto también está funcionando. He agregado la guitarra EN 77 a su carrito de compras. Bien, entonces esto es todo. Parece funcionar. Podemos consultar el registro aquí también. Pero creo que esto ha funcionado según lo planeado. Parece que, por favor primero dame más información, encuentra producto. Y esta vez, obtiene la información del producto aquí. Bien, y por favor agrégalo a mi carrito de compras. Función agregar producto a la tarjeta. El producto fue agregado a la tarjeta. Bien, maravilloso. Esto es lo que estábamos buscando. Delegamos la búsqueda al modelo de idioma. Pero claro, podría ser un problema si esta lista de claves aquí es quizás un poco más larga que aquí. Solo tenemos cuatro productos, así que aquí son solo cuatro nombres de producto. Y si tienes miles de productos, entonces esto podría ser un problema por la longitud, las restricciones de token aquí. Pero si tienes una tienda normal como tal vez esta tienda de guitarras, tal vez tengas 100 o algo así, y eso debería estar bien. mejor si los nombres de los productos son un poco más largos que estos aquí, tal vez eso podría ser un problema, pero normalmente, tienes un límite de token de, digamos, GPT 35, tenemos límite de tokens de 4,096 tokens, o también puedes tener el modelo de 60 K, que es un poco más caro, pero esto tiene 16.384 tokens Entonces esto debería ser suficiente incluso para muchos nombres de productos aquí. Bien, entonces también hay una manera diferente de lidiar con esto. Podríamos usar incrustaciones, pero no vamos a hacer esto. Aquí, en este punto, está bien para nosotros. No tenemos tantos productos, y enumerar todos los nombres de los productos aquí es práctico, y funcionó, y el LLM puede elegir el más cercano y luego preguntar al cliente si este es el correcto, y luego el cliente puede pedir más información Bien, esto es para este video. Nos vemos en la siguiente. 35. Resumen: Al concluir este curso, echemos un vistazo a nuestros logros. Hemos creado tres aplicaciones que aprovechan el poder de la API de IA abierta y el LLM para conversaciones basadas en el lenguaje natural y la IA Entonces la primera aplicación fue un clon hachBT, HatchBT en una El secreto era administrar el historial de chat y alimentar el historial de chat al LLM para obtener respuestas Luego, a continuación, hemos construido un juego de aventuras basado en texto o el inicio del juego de aventuras basado en texto con, creo, dos misiones pero tiene tres NPC con los que puedes hablar de una manera muy natural Y hemos hecho indicaciones del sistema a medida para cada personaje, y utilizamos llamadas de funciones para el seguimiento de las misiones y la finalización de la misión La última aplicación estaba simulando un asistente de ventas para una tienda de guitarras en línea Los usuarios pueden conversar con el asistente, indagar sobre los productos e incluso dirigirlo para que llene el carrito de compras con los productos Y gracias al Open AI LLM, esto se siente como una verdadera charla con un vendedor A través de estas aplicaciones, hemos aprendido a usar la API Open AI en JavaScript, y usamos Astrojs para el back end para el servidor y reaccionamos para el front-end Hemos aprendido a usar la API de finalización de chat de OpenAI. Hemos aprendido a crear indicaciones del sistema para darle al LLM un contexto para comprender la un contexto para comprender situación y la información de fondo, y hemos aprovechado las llamadas de funciones para, por ejemplo, para nuestro juego para acciones en el juego como el seguimiento de Quest y también para la recuperación de datos para nuestras ventas nuestro viaje simplemente rayó la superficie de La API ofrece mucho más como incrustaciones para análisis profundos y también creación de imágenes, dolly y tal vez ya sepas que esto es como a mitad de viaje desde Open AI Y también hay un discurso a texto API llamado susurro. Entonces, lo que hemos aprendido es, en cierto modo, solo el inicio del potencial de la API de Open AI. Entonces, vamos a darle a Chachi Bitty las últimas palabras en este curso Un resumen, tenga en cuenta que nuestro viaje con la API OpenAI apenas está comenzando Las habilidades que has adquirido abren las puertas al mundo de la creatividad impulsada por la IA. Ya sea creando interacciones, construyendo aventuras inmersivas o refinando experiencias de usuario, tu experiencia tiene el poder de dar forma al futuro Mantente curioso, mantente inspirado y sigue empujando los límites. Tu viaje está lleno de potencial. Gracias por formar parte de esta experiencia. La mejor de las suertes en todos tus emprendimientos futuros.