Criando aplicativos da Web com IA com React, Astro e a API do OpenAI

1. Sobre o que é este curso?: Olá, bem-vindo ao nosso novo e empolgante curso em vídeo sobre programação de aplicativos de bate-papo de IA com JavaScript, React, Astro JS e a API Open AI. Estou entusiasmado por ser seu professor on-line e, juntos, embarcaremos em uma jornada extraordinária no mundo dos aplicativos de bate-papo baseados em inteligência artificial Neste curso, vamos nos aprofundar no reino da IA e explorar como criar três aplicativos web fascinantes Cada um desses aplicativos será desenvolvido pela Open AI API, a SAN que alimenta o GBT, e construído usando as populares tecnologias de desenvolvimento web como JavaScript React e Astro jazz Ao final deste curso, você terá as habilidades e a confiança para criar aplicativos sofisticados de bate-papo com IA que interagem com os usuários de maneiras únicas e envolventes. Vamos dar uma breve olhada nos três projetos empolgantes que construiremos. Número um, converse com GPT Clone. Começaremos criando um clone simples do GBT de bate-papo que permite que os usuários tenham conversas básicas com uma IA Você aprenderá como integrar a API Open AI para aproveitar o poder da geração de linguagem e criar uma experiência de bate-papo perfeita Ao final desta seção, você terá seu próprio aplicativo de bate-papo AI Power instalado e funcionando. Segundo, jogo de aventura baseado em texto. Nesta seção, vamos nos desafiar com um jogo de aventura baseado em texto com tema de ficção científica Os jogadores resolverão quebra-cabeças e navegarão pela história interagindo com os personagens por meio do bate-papo Os personagens de IA responderão de forma inteligente, tornando a experiência envolvente e divertida Você obterá informações valiosas sobre como a IA pode ser usada para criar histórias interativas e cativantes Número três, assistente de vendas on-line. Na seção final, criaremos um aplicativo prático que simula um assistente de vendas on-line Os usuários podem conversar com a IA para saber mais sobre os produtos disponíveis, que, neste caso, serão guitarras e Você aprenderá como incorporar a IA em cenários do mundo real, aprimorando a experiência do usuário e tornando as interações de comércio eletrônico mais envolventes e eficientes No final deste curso, você estará equipado com o conhecimento e as habilidades para criar aplicativos de bate-papo AI Power que podem surpreender seus amigos, colegas e potenciais empregadores Vamos embarcar nessa jornada empolgante juntos enquanto descobrimos o fascinante mundo dos aplicativos de bate-papo com IA com JavaScript, React, AstroJS e a API Open Agora, aqui está um boato interessante. O script de introdução que você acabou de ouvir foi, na verdade, gerado por ninguém menos que a própria IA que usaremos neste curso, hat GPT Sim, isso mesmo. Como um modelo de linguagem de IA desenvolvido pela OpenAI, HattPT é proficiente em entender e gerar texto semelhante ao humano com base no E agora estamos indo além da simples geração de texto, colocando-o em uso prático na criação de aplicativos do mundo real. Tenho o prazer de ser seu companheiro e instrutor e mal posso esperar para ver os incríveis aplicativos você criará. Vamos começar. E, a propósito, esse texto também foi gerado pelo ChatBT e o que você está ouvindo agora é gerado por mim, seu instrutor. Então, vamos começar. 2. A plataforma e a API do OpenAI: Olá, bem-vindo a este vídeo. Aqui, vou detalhar os detalhes da plataforma Open AI que está alimentando o HgPT Não muito, mas algumas coisas importantes que eu gostaria de mostrar aqui. Então, suponho que todos vocês conheçam o HAGPT, o aplicativo de bate-papo com IA que pode ser usado para gerar textos, responder perguntas, escrever código de programação e assim por diante E tudo isso é alimentado por um grande modelo de linguagem, o LLM, que a Open AI desenvolveu e que é capaz de completar um texto escrito em uma linguagem natural de uma forma que parece fazer mais ou menos sentido Um ponto importante que você precisa entender é que tudo o que o L&M faz é completar o texto que lhe é fornecido Portanto, mesmo que pareça que você está conversando com o modelo de linguagem grande, ele está apenas preenchendo o histórico de bate-papo fornecido uma forma que parece ser a mais provável. Isso significa que a rede neural, o grande modelo de linguagem, prevê as seguintes palavras mais prováveis com base nos dados em que foi treinada Sempre que você chama uma função de API da Open AI, API, você deve sempre fornecer o contexto completo, por exemplo, o histórico completo do bate-papo para que o LLM possa criar uma conclusão com base nesse mesmo contexto O LLM não tem memória, portanto, você deve fornecer todos os dados relevantes sempre que solicitar uma conclusão à API Se você quiser saber como a API aberta funciona, você pode, é claro, verificar a página da web na plataforma Open AI Com Docs Esta é esta página aqui. Eles também têm um playground onde você pode testar as chamadas de API fornecendo apenas os dados. Então você não precisa escrever em nenhuma linguagem de programa. Basta escrever os dados em um campo de formulário e, em seguida, chamar a API com esses dados, e o resultado é apresentado a você. Eles também têm exemplos em diferentes linguagens de programação e também documentação de suas bibliotecas para Python e JavaScript E, claro, há uma documentação de referência completa, que pode ser encontrada aqui. Então, para o bate-papo ou para as conclusões, você precisa dar uma olhada aqui Essas são as conclusões de referência da API do Doc e, em seguida, por exemplo, criam e, seguida, você tem a documentação para a conclusão da criação E aqui você pode ver que você pode mudar a linguagem de programação aqui. Nenhum Jazz está aqui e depois Python, e você pode até usar curl Portanto, essa é uma API REST, então você também pode usar algo como curl ou talvez Postman, algo parecido E aqui temos toda a descrição de todas as APIs, funcionalidades Portanto, para usar a API e o playground, você também precisa criar uma conta clicando em Inscrever-se Então, aqui está, e você pode inserir seu endereço de e-mail, continuar digitando uma senha ou optar por se inscrever no Google, Microsoft ou Apple. E então, se você fez isso, você está ganhando, eu acho, cerca de $5, se bem me lembro, para poder testar tudo e testar a API E os $5 são créditos para os chamados tokens, e tokens são, digamos, grosso modo, tokens são palavras, mas na verdade também podem ser partes de palavras Então, você quase sempre tem mais símbolos do que palavras. Acho que é mais ou menos um terço a mais do que palavras. Então você precisa ter isso em mente. É sempre um pouco mais depois de se inscrever, acho que você ganha $5 de créditos pelo pagamento dos tokens Cada token conta nas chamadas da API. Assim como os tokens que são devolvidos pelo LLM, eles também contam E também, é claro, os tokens que você dá ao L&M. Então, se você tem um histórico de bate-papo muito longo, por exemplo, então você tem mais tokens, é claro, porque toda vez que você chama a API, a API de conclusão, por exemplo, você precisa fornecer todos os dados, todo o histórico do bate-papo, por Portanto, ficará mais caro se você tiver bate-papos mais longos. Devemos prosseguir e se inscrever agora porque precisamos uma chave de API para chamar a API e seguir todos os exemplos deste curso. Como eu disse, você recebe os $5 ou algo parecido como créditos que você pode usar, e acho que isso é suficiente para todos os exemplos aqui neste curso Mas é claro que isso depende da quantidade de tokens que você usa e que você dá ao LLM, e esse LLM está retornando, é claro, Então, depois de se inscrever, você pode criar chaves de API, e isso eu vou te mostrar mais tarde e também, claro, como a API é chamada, mas você já pode conferir aqui. Eles têm um início rápido e, em seguida, você também pode usar o playground aqui depois de se inscrever, depois de fazer login, e então você pode usar todos os exemplos aqui no playground E depois brinque um pouco com ele. De qualquer forma, usaremos a API muito em breve na primeira seção aqui em nosso primeiro aplicativo, que será um clone do GPT de bate-papo, algo assim, um aplicativo de bate-papo, simples E com isso, você poderá conversar com o grande modelo de linguagem com a IA, e este será nosso primeiro projeto. Ok, então é isso para este vídeo. Nos vemos na próxima. 3. Ferramentas para usar neste curso: Ok, então, neste vídeo, falaremos sobre as ferramentas, as bibliotecas e estruturas que usaremos e quais conhecimentos você já deve ter antes de fazer este curso Então, vamos começar com JavaScript. Você já deve ser capaz de programar em JavaScript, é claro, além do nível de um programa Hello World ou copiar e colar de páginas da web, como o stack overflow Portanto, você também deve estar familiarizado com a maioria dos recursos da versão seis do AchmaScript, como funções de seta, consulado, desestruturação e módulos, e também funções de matriz, como No lado do servidor, usaremos o Node JS e, além disso, usaremos o Astro Jaz Portanto, você deve ter algum conhecimento básico do node JS, é claro. Não é necessário um conhecimento profundo, pois Astro abstrairá muitos conceitos como as funções do manipulador S. Portanto, você deve estar familiarizado, é claro, com o gerenciador de pacotes Node JS NPM ou com yarn ou PMPM, algo parecido, porque o usaremos para instalar pacotes e também para instalar pacotes e também para editor, vou usar o código VS, mas você não precisa. Isso não é de forma alguma um requisito. Então, se você gosta de usar VIM, Emax, webstorm, bloco de notas, mesmo isso Você também pode usar um bloco de notas e um terminal. Por exemplo, não é muito confortável programar nesse ambiente, mas se você quiser, você pode. Mas nos vídeos, eu uso o código do Visual Studio, que é meio que um padrão. Talvez a maioria das pessoas que usam ou programam aplicativos Javascript hoje em dia usem código do Visual Studio, então é por isso que eu o estou usando aqui. Ok, então, para o front-end, estou usando o React Jazz, mas você também pode estar usando uma estrutura de biblioteca diferente, como Solid Jazz, veja Selter Não é muito difícil traduzir o código ou os conceitos para uma estrutura diferente. Você pode até mesmo usar a manipulação manual simples do dom também é possível porque interface do usuário não é tão sofisticada e é bem básica O front-end não é a coisa mais importante neste curso. Vamos nos concentrar, é claro, na IA aberta, na API e em seu uso. Para seguir o curso, diretamente, você deve ter algum conhecimento básico de reação, é claro, nada sofisticado Mas, especialmente, as funções de gancho, como use state , use effect e use ref, são importantes , então você deve estar familiarizado com elas. Mas, como eu disse, você poderia estar usando uma estrutura diferente aqui, e então você precisa usar algum gerenciamento de estado ali, e você deve, é claro, estar familiarizado com isso então. Como última estrutura, usamos Astrogz por que Astro jazz e não algo como Next Porque o NextJS está de alguma forma acoplado, é claro, fortemente ao react, e o Astro Jazz, em contraste, permite o uso de diferentes tecnologias de front-end Portanto, você pode usar o gás Astro com o sólido Jazz View Swelter. E assim por diante. Além disso, é muito rápido de instalar e configurar. E como vamos nos concentrar no uso da API OpenAI, o servidor nem a tecnologia de front-end usada aqui importam muito, mas sim os princípios de trabalhar com um grande modelo de linguagem, isso é o que é realmente importante para você neste curso Portanto, você também pode usar, é claro, o Next yes, se quiser. Mas, como eu disse, o AstroJS está aberto para diferentes tecnologias de front-end, então eu o estou usando aqui Ei, essas são as ferramentas, estruturas e bibliotecas que vamos usar aqui no próximo vídeo Começamos com nosso primeiro projeto. Te vejo então. 4. Criando nosso primeiro aplicativo de astro: Tudo bem Aqui, vamos criar nosso primeiro aplicativo de servidor AstroGS, e esse é o aplicativo que chamará o servidor, chamará a API Open AI para nós, e também forneceremos o HTML e o código de reação ao navegador e, em teoria, obteremos nosso aplicativo de bate-papo Então é aqui que começamos. Temos nossa pasta principal. Nesse caso, é DAI, e vou chamar NPM create, create E então isso vai criar um aplicativo, e qual aplicativo é um aplicativo Astro, então chamamos PM Create Astro e retornamos. E somos recebidos por um bom robô, que diz: Houston, vamos construir a web que queremos Então está perguntando: Ok, então está nos dizendo que a sequência de lançamento foi iniciada. E então, onde devemos criar nosso novo projeto? E esse será o nome do nosso projeto e da subpasta, é claro E no nosso caso, vou chamá-lo de chat AI, já que será um aplicativo de bate-papo, um aplicativo de bate-papo genérico como o chat GBT, muito mais simples, mas é isso que fazemos primeiro Então, entre e pergunte se deve incluir arquivos de amostra, conforme recomendado aqui, mas partimos de um projeto vazio, então também não usamos o modelo de bloco e escolhemos vazio. E então ele está me perguntando se ele deve instalar as dependências, os módulos do NPM Node, instalação do NPM serão chamados e, claro, sim, basta fazer isso, então eu não preciso fazer Isso vai demorar um pouco porque está baixando todos os pacotes e instalando-os. Isso pode levar um minuto, talvez dependendo da sua conexão com a Internet, é claro. Ok, então última pergunta aqui, você planeja escrever texto datilografado E nesse caso, não, você pode, é claro, usar o TypeScript, mas não vou usá-lo aqui porque isso tornará as coisas mais complicadas e vou me concentrar no JavaScript react e no Jazz Portanto, não entre, e isso me diz que não me preocupe, TypeScript é compatível e você pode Então, ok, não foi a última pergunta, mas aqui está inicializar um novo repositório Git e não, obrigado E então está nos dizendo boa sorte lá fora, astronauta Ok, muito obrigado. O que temos agora? Temos uma subpasta chamada AiChat porque esse é o nome que demos ao Aqui temos arquivos. Mas primeiro, vamos verificar as subpastas. Aqui temos os módulos de nós que foram instalados com a instalação do MPM a partir do assistente Astro aqui, e temos públicos, e isso contém apenas um ícone FAF Esse é o ícone SVG FAF incluído no projeto. E nós temos a fonte. Temos páginas abaixo da fonte. E aí temos nosso índice Astro index dot Astro, que é uma espécie de índice HTML que será entregue ao navegador, mas primeiro será compilado pelo Astro Gs mas primeiro será compilado pelo Astro Essencialmente, isso é HTML e será exibido no navegador Podemos dar uma olhada e executar o servidor agora com o Okay, então primeiro temos que fazer um CD na subpasta que acabamos de criar, CD AI chat, e então podemos chamar o NPM Isso executará um script que está listado no pacote. Jason, aqui temos os scripts, e queremos esse script Def chamado Dev, isso chamará Astro Def Astro é um script de shell, e você pode encontrá-lo aqui nos módulos dot bin, e aqui está Astro, e isso será chamado então com o argumento Dev Okay, então vamos chamar NPM run Def, e espero que isso inicie E aqui está, anfitrião local 3.000. Nós verificamos isso no navegador. Aqui está Astro e H aqui, e isso é essencialmente, como eu disse, o que temos no índice Astro neste arquivo aqui. E podemos, é claro, mudar isso. Vamos mudar isso para bate-papo com IA. Ou AiChatBT, seja o que for. E aqui você pode colocar, é claro, pouco de HTML se quiser um DIV e o que quiser Talvez possamos ter nossa raiz de reação aqui mais tarde. Mas vamos verificar o navegador e ele recarregou automaticamente a página para nós, e agora temos o bot de bate-papo AI aqui no cabeçalho Ok, então essa é a nossa primeira aplicação com o Astro JS, e continuaremos no próximo vídeo. 5. Adicionando reação ao nosso aplicativo: Ok, agora vamos adicionar react ao nosso aplicativo Astro, primeiro cancelando este bn run Def Então, nosso servidor não está mais rodando aqui, e eu estou colando esse comando Esse comando é Npx Astro add react e está usando o script Astro Shell para adicionar suporte de reação ao nosso aplicativo Astro Então, basta digitar este Npx Astro add react, e ele deve adicionar o suporte de reação Resolvendo pacotes, está nos perguntando se queremos continuar, sim, é claro, instalando dependências, e isso também instalará alguns pacotes de nós Continue, e isso mudará nosso Astrocfic MGS Ok, então também está alterando nossa configuração TS JSN ou criando-a. Realmente não importa. Sim, continue e pronto. Ok, agora temos nosso suporte de reação, vamos verificar o pacote Jason Ele adicionou tipos. Então, podemos ver aqui react e Rec Dom, e também adicionou react e react Dom, é claro, a versão 18, ambos. E agora podemos usar o react dentro do nosso aplicativo. Mas é claro que, primeiro, precisamos de um componente de reação, e os componentes estão dentro dos componentes da subpasta Então, no RC, criamos uma nova pasta. E nós o chamamos de componentes. E dentro dessa pasta de componentes, podemos criar um novo arquivo, que chamamos de ponto de índice JSX, e esse será nosso principal componente de reação Então, podemos incluir isso no ponto de índice Astro, e podemos incluí-lo nesta área aqui. Então, temos os três traços e, entre os três primeiros e o último, podemos escrever nossa importação e importar aqui o componente react, nosso índice JSX e importar o aplicativo de, então será uma importação padrão e uma exportação padrão de componentes de pontos, e aí temos nosso índice JSX e, no momento, está vazio, podemos escrever nossa importação e importar aqui o componente react, nosso índice JSX e importar o aplicativo de, então será uma importação padrão e uma exportação padrão de componentes de pontos, e aí temos nosso índice JSX e, no momento, está vazio, então recebemos um erro aqui porque não é realmente um módulo, mas agora podemos usar esse componente do aplicativo aqui como fazemos no JSX Há algo faltando aqui. Temos que colocar um novo atributo aqui, somente dois pontos do cliente, e então temos que configurá-lo para reagir aqui Ok, e isso dirá ao Astro que esse componente será renderizado no cliente, somente no cliente e não no servidor, então não usamos a renderização do site do servidor Ok, então isso está vazio no momento, então temos que colocar algo, exportar a função padrão e retornar um pouco de JSX No momento, isso deve ser suficiente. E agora iniciamos nosso servidor. Verificamos o navegador, hospedamos o chatbot de inteligência artificial local de 3.000, o que tínhamos antes, e então temos o aplicativo E quando verificamos o HTML aqui, Dom, temos esse DIF com aplicativo nele, e esse é o nosso componente de reação E aqui, o pai desse componente de reação é a ilha Astro, e essa ilha Astro é nossa raiz de reação neste caso, e o Astro pode misturar e combinar todos os diferentes componentes da interface do usuário, como Swel view jazz, react, solid Jazz, e colocá-los dentro dessas ilhas Astro Mas isso não é tão importante para nós. O importante é que temos nosso componente de reação aqui, e é aqui que podemos escrever nosso JSX, e podemos simplesmente escrevê-lo como qualquer outro componente de reação Ok, então temos nosso primeiro componente de reação e, a partir daí, podemos simplesmente criar um aplicativo de reação aqui, e a próxima etapa será ter uma função de site de servidor chamando a API Open AI, e isso será explorado no próximo vídeo. 6. Adicionando nosso primeiro ponto de extremidade REST de servidor: Ok, agora que temos nosso primeiro componente de reação, podemos continuar escrevendo nosso primeiro código de servidor e aplicativo direto em execução no navegador. Chamaremos a API do servidor para finalmente entrar em contato com API da Open AI e, em seguida, recuperar a conclusão do bate-papo. Portanto, precisamos de um componente de servidor rodando sem JS, e esse será nosso primeiro endpoint Eu criei uma subpasta abaixo das páginas, páginas em que nosso índice Astros e a subpasta E dentro da API, eu tenho esse módulo JavaScript JS chamado chat dot js. E lá dentro, temos uma exportação da função G. E o que isso faz é dizer ao Astro que nesse caminho, ou seja, APIs chat, haverá um manipulador G. Então, se eu colocar isso na barra de endereço do navegador, esse manipulador deve ser chamado porque o navegador faz uma solicitação G para o servidor de lá E nosso código deve ser executado aqui. Então, estamos exportando uma função ASIC porque queremos usá-la no momento, não a usamos, mas usaremos um peso interno Então, eu já coloquei o ASN na frente da função. Então, o que essa função está fazendo? Ele recebe uma solicitação. Ele recebe um objeto e, dentro dele, há uma propriedade de solicitação, e não a estamos usando no momento, mas depois o faremos e, em seguida, ele retornará uma nova resposta, que será enviada ao navegador. E dentro da resposta dentro do construtor aqui, podemos especificar o corpo da resposta, que será uma string JSN, ou seja, uma string JSN desse objeto simples aqui, esse objeto literal com uma Então, isso será enviado no corpo para o navegador. E então temos mais alguns cabeçalhos e status. O status será 200, o que significa ok, então está tudo bem, e o cabeçalho define o tipo de conteúdo aqui para o aplicativo JSN Então, o navegador saberá que isso é JSN no corpo. Ok, então podemos enviar cabeçalhos aqui e podemos enviar mais cabeçalhos, não apenas o tipo de conteúdo aqui, mas todos os outros cabeçalhos que gostaríamos E o código de status pode ser, é claro, algo como uma seta como 500 se houver um erro no servidor ou 400 ou 401 ou algo parecido Então, no momento, tudo funcionará bem. Então, colocamos aqui 200, o que significa ok. Então, isso é retornado ao navegador como uma resposta, e podemos testá-lo simplesmente digitando o caminho aqui, API, como eu disse, e depois conversar, e o servidor sabe qual módulo e qual função chamar lá Então, aqui está. Resposta, olá. Esse é o JSON que é retornado aqui. Ok, agora temos nossa primeira função de site de servidor, e isso está sendo executado em nenhum Jz importante aqui é que coloquemos no caminho certo, é claro. Criamos uma subpasta chamada API. Existem todas as nossas funções de API como bate-papo, ou talvez tarde tenhamos mais funções como essa. Talvez não tenhamos apenas uma chance, podemos colocar um post aqui. Então, se exportarmos uma postagem aqui, ela será chamada de navegador, se o cliente enviar uma postagem ou colocar ou excluir ou qualquer outra coisa. Ok, agora temos nossa primeira função de servidor, e aqui podemos chamar a API Open AI e concluir nosso bate-papo. Nos vemos no próximo vídeo. 7. Preparando a chamada de API de IA aberta: Ok, então neste vídeo, vamos fazer os preparativos para chamar a API Open AI e, primeiro, você precisa se inscrever na plataforma Open AI. Então, estamos colocando a plataforma de URL dot OpenAI e aqui você pode se inscrever. E então com um endereço de e-mail e senha ou você pode continuar com o Google, Microsoft ou Apple. E depois de fazer isso, você está dentro da sua conta aqui e, em seguida, tem isso em chaves de API do usuário. E aqui você pode criar uma nova chave de API e usar essa chave de API para acessar sua conta. E isso é o que você primeiro precisa fazer, criar uma nova chave secreta. Então, vou fazer isso aqui e chamá-lo de chave de teste. Crie uma chave secreta aqui. E isso é importante. Você tem que copiar essa chave agora e colocá-la em algum lugar seguro. Por exemplo, você pode copiá-lo para sua área de transferência e depois colá-lo em seu código-fonte Como aqui, vou fazer um comentário e depois colocar a chave. Então aqui você tem a chave e ela está salva. Por que isso é importante? Porque depois, depois de fechar essa caixa de diálogo, você não pode mais acessar a chave. Você só vê as duas primeiras letras e os últimos quatro caracteres aqui, mas não pode acessar a chave completa aqui, então você precisa criar uma nova se alguma vez a esquecer ou se não a salvou. Então, isso é tudo que você precisa fazer aqui, e acho que se você se inscrever como um novo usuário, receberá $5, algo assim, créditos, e poderá primeiro usar os $5 antes de pagar E acho que $5 é mais do que suficiente para testar todos os nossos aplicativos de exemplo aqui Então, $5 devem ser suficientes para isso. Se você precisar de mais, terá que pagar por isso. E uma vez que você tenha sua chave secreta, como eu disse, você precisa salvá-la em algum lugar. Eu coloquei isso aqui. Mas, por enquanto, também excluirei essa chave de teste aqui e excluirei todas as chaves. Estou usando aqui no curso antes de publicar o curso, é claro, porque não quero que você use minhas chaves porque eu tenho que pagar por elas. Então você precisa criar suas próprias chaves secretas aqui. Agora vamos instalar o pacote de API aberto, sem pacote JS. E isso é muito fácil. Você precisa ir ao seu diretório principal, e este é um bate-papo I no meu caso, e então você tem que ligar para o NPM Install open AI, retornar, esperar um pouco e pronto E damos uma olhada no pacote JSON e vemos que o Open AI foi adicionado à lista de dependências, e esta é a versão três pontos zero Agora podemos usar o pacote. Então, vamos ao nosso chat dot JS. Agora, primeiro precisamos importar o pacote OpenAI. Assim. Portanto, temos a configuração. Precisamos tanto da configuração quanto da API Open AI, e aqui teremos nossas funções para chamar. E aqui temos a configuração que precisamos para chamar essas funções. Então, a primeira coisa que precisamos fazer é criar uma nova configuração com nossa chave de API. Então, eu já preparei isso. E, como você pode ver, essa é uma chave diferente, mas também excluirei essa chave, é claro, antes de publicar o curso Então, por favor, crie um novo. Isso não vai mais funcionar. Ok, então criamos uma nova configuração com a nova configuração, e a configuração é algo que importamos do pacote Open AI. Em seguida, precisamos fornecer a um objeto a chave de API da propriedade, e aí temos a chave secreta em uma string e, em seguida, recuperamos a configuração. E essa configuração, podemos usá-la agora para criar uma instância da API de IA aberta e a chamamos de IA aberta. É uma nova API de IA aberta com configuração. Isso é muito simples. E agora temos a IA aberta e podemos verificar o que está lá dentro. Criamos a conclusão do bate-papo, que é uma função ou método muito importante aqui, e usaremos muito essa. E também há outras funções aqui. Você pode dar uma olhada, mas também pode dar uma olhada, é claro, na documentação da página da web Portanto, se verificarmos novamente documentação e a referência da API, a documentação fornece tutoriais e uma visão geral dos processos, e a referência da API descreve todas as chamadas de função com todos os parâmetros Ok, então se você tiver dúvidas sobre a API, você pode usar a documentação na referência da API em platform.openai.com Ok, então de volta ao nosso código. Não estou usando a conclusão de criação de bate-papo aqui, mas vou usá-la aqui na função GT. Mas antes disso, criarei uma nova função, e essa nova função fará a conclusão para nós. Faremos a chamada da função Open AI aqui. E tem que ser uma função da ACN porque vou esperar aqui. Portanto, é o chat completo da função ACN. Esse é o nome da minha função. E então nova mensagem. Esta é a primeira mensagem que enviaremos para a API OpenAI e, em seguida, chamaremos de peso porque assíncrona openi create chat completion, o método que eu já mencionei, que precisamos fornecer para criar conclusão de bate-papo, um objeto literal aqui, e isso especifica o modelo, e este é o modelo mais recente aqui, GPT 35 turbo oh 613 Th é GPT é assíncrona openi create chat completion, o método que eu já mencionei, que precisamos fornecer para criar conclusão de bate-papo, um objeto literal aqui, e isso especifica o modelo, e este é o modelo mais recente aqui, GPT 35 turbo oh 613 Th é o modelo mais recente que também suporta chamadas de funções. Portanto, você pode usar o GPT 35 Turbo e, dependendo quando fizer isso, no momento, obterá o modelo antigo, mas talvez no futuro também compre esse modelo aqui Mas, com certeza, coloquei o oh 613 no final porque quero esse modelo mais recente Ok, então você precisa fornecer mensagens, e esse será nosso histórico de bate-papo e a IA aberta. API responderá com a conclusão do histórico de bate-papo dessas mensagens e gerará uma nova mensagem que completará o bate-papo. E a propriedade messages, é apenas uma matriz de mensagens. Então, aqui temos uma mensagem neste objeto, você tem que fornecer a função, que é usuário neste caso, algo que o usuário digita, por exemplo, e o conteúdo é fixo aqui e o conteúdo é olá, então ele está iniciando a conversa com um olá e a API aberta completará isso com uma nova mensagem e essa nova mensagem será retornada aqui na resposta de conclusão, e a resposta de conclusão contém dados, opções, necessidades normais, uma opção por padrão. Portanto, as escolhas são uma matriz, e acessamos a primeira. E então, nisso, é o conteúdo do ponto da mensagem. E aí, neste conteúdo da propriedade, temos nossa mensagem real, a conclusão que o modelo de IA aberta nos dá aqui, e é isso que retornamos dessa função. Então, bate-papo completo. Precisamos chamá-lo, é claro, e isso é tão simples quanto isso aqui. Então, temos a resposta aqui, aguardamos o bate-papo completo e obtemos o texto de conclusão do modelo como a resposta aqui, e então podemos excluí-lo aqui e retornamos a resposta como uma string JSON Agora podemos testá-lo. Essa é uma chave válida aqui. Eu não o excluí no momento, então ele deve funcionar e vamos novamente ao nosso servidor def, e então chamamos a função de bate-papo da API, a função Get, sim, recebemos uma resposta, e desta vez é Olá, como posso ajudá-lo hoje Isso foi gerado pelo modelo de linguagem de hospedagem da Open AI, isso é o que foi retornado. Se eu carregá-lo novamente, talvez ele me dê uma resposta diferente. Eu faço isso de novo. Sim, agora é na verdade uma resposta diferente. Olá. Como posso te ajudar hoje? É quase o mesmo, muito parecido, mas é diferente. E mais uma vez, olá, como posso ajudá-lo hoje? Recebemos a resposta real do modelo aqui. Agora podemos desenvolver isso. Podemos adicionar mais mensagens aqui para que o usuário possa responder a essa mensagem gerada e, em seguida, o modelo de linguagem grande responderá novamente a isso e voltará. E esse será o nosso bate-papo, mas mais no próximo vídeo. 8. Fornecendo a mensagem de usuário por meio de URL: Então, no vídeo anterior, usamos uma mensagem fixa chamada hello e enviamos essa mensagem para a Open AI, API, então esse é um olá constante. E podemos, primeiro, substituir isso por uma nova mensagem. Então coloque isso aqui e vamos verificar. Estamos fornecendo aqui, nada. Portanto, precisamos fornecer uma mensagem fornecida pelo usuário aqui para concluir o bate-papo. E de onde tiramos isso? Nós o obtemos do parâmetro URL, a parte após o ponto de interrogação, e como podemos acessá-lo a parte após o ponto de interrogação, no Astro Js? Primeiro, precisamos estruturar o URL aqui. Então, o Astro nos fornece o URL. E quando temos o URL, podemos simplesmente acessar os parâmetros de pesquisa aqui Assim. Então, L pontos nos parâmetros de busca, e aí temos um parâmetro específico , chamado MSG para mensagem, e obtemos isso com a função ponto G Então, depois disso, podemos registrá-lo no console MSG e vamos testá-lo. Recebemos um erro. Ok, isso não é bom. Vamos verificar o que temos aqui. A solicitação falhou com o Código de Status 400. Ok, acho que isso ocorre porque nova mensagem de conteúdo é nula aqui Portanto, precisamos fornecer uma mensagem e podemos simplesmente ligar para o bate-papo completo com o MSG. Então, vamos fazer isso. E, novamente, erro. Ok. O que é isso agora? Ainda assim, temos os 404 mil meios de solicitação incorreta. Então, estamos fazendo uma solicitação ruim aqui, bate-papo, bate-papo completo. E bate-papo completo. Portanto, isso ainda é nulo ou indefinido. Então isso é um problema. Então, vamos colocar aqui olá novamente. Olá. E vamos verificar se isso está funcionando. Ok, isso funciona. Vamos verificar a saída aqui. Nulo, nulo, nulo, nulo. Ok, então MSG é nulo, e por que isso? Isso ocorre porque nosso Astroconfc MGS não está completo. Precisamos colocar algo aqui, e esse é o servidor de saída, que é necessário porque precisamos habilitar a renderização do site do servidor aqui Caso contrário, o Astro Js renderizará as páginas estaticamente e, nesse caso, não temos acesso aos parâmetros de URL e URL aqui Então, novamente, Astrocfi Js, você precisa colocar a saída no servidor para habilitar a renderização do site do servidor, e então podemos acessar dinamicamente aqui o URL e os parâmetros de pesquisa e os parâmetros de pesquisa Ok, então vamos colocar o MSG de volta aqui, MSG assim, e vamos tentar novamente Talvez não olá, mas olá mundo seria melhor aqui, então ok, então como posso ajudá-lo hoje? Essa é a resposta. Vamos verificar a saída do servidor aqui. Olá, mundo. Então, isso parece funcionar. E podemos inserir nossa mensagem aqui na URL, no parâmetro MSG Vamos tentar outra coisa. Talvez como está o tempo hoje? Não saberá. Mas de qualquer forma, vamos verificar qual é a resposta. Desculpe, mas como modelo de linguagem de IA, não tenho informações em tempo real. Ok, é honesto. Para descobrir o clima hoje, você pode verificar uma página confiável sobre o clima, site ou um aplicativo de previsão do tempo em seu telefone Acho que é verdade, então essa é uma boa resposta, eu acho. E esse é o nosso primeiro bate-papo com uma mensagem de bate-papo fornecida pelo usuário. Não está mais consertado aqui. Fornecemos o novo parâmetro de mensagem para concluir o bate-papo e essa mensagem é obtida do URL, dos parâmetros de pesquisa e fornecemos aqui no parâmetro MSG após o ponto de interrogação, MSG é igual a como está o clima hoje, chamaremos esse URL, essa API restante a partir do código do Para que isso funcione, é claro que precisamos criar um componente de reação e isso será feito no próximo vídeo. 9. Primeira interface de usuário real em reação: Vamos voltar ao nosso componente de reação. Eu o estendi um pouco para incluir um campo de texto de entrada. Este é este, um botão Enviar, este é este, e um div de saída que estará aqui, este, e a ideia é que, claro, o usuário está inserindo texto aqui e depois clica no botão Enviar, e então esse texto que foi inserido aqui é enviado para o servidor e, por sua vez, enviá-lo para o servidor enviará para a API Open AI, obterá a resposta do idioma modelo, envie-o de volta para o componente de reação aqui e, em seguida, o configuramos aqui neste estado com a resposta definida. Chamamos você de estado com resposta e definimos a resposta aqui, e essa resposta será exibida aqui no DIV e o que falta aqui é, obviamente, nossa areia Portanto, precisamos definir uma função onclica aqui, que será chamada quando o usuário clicar no E então precisamos, o que precisamos fazer aqui? Precisamos chamar Fetch para chamar a API do servidor, a API restante, nossa API restante Então, esse será um processo assíncrono, e precisamos usar ou eu quero usar pelo menos uma função assíncrona Então eu coloquei Async antes dessa declaração de função, e aqui eu posso usar uma busca de peso E precisamos fornecer a URL aqui, o que fará com que a API reduza o HAT seguida, o parâmetro URL após o ponto de interrogação que Ms G seja igual, vamos colocar apenas hello aqui para fins de gebugging, para fins que fará com que a API reduza o HAT e, em seguida, o parâmetro URL após o ponto de interrogação que Ms G seja igual, vamos colocar apenas hello aqui para fins de gebugging, para fins de teste aqui. Ok, então o que obtemos do fetch? Recebemos uma resposta e, em seguida, precisamos obter o corpo da resposta, e essa será a Então eu chamo a resposta, e isso será JCN, eu chamo o ponto de resposta JSN e isso também será um processo assíncrono, e é por isso que eu uso uma espera Ok, então é assim que obtemos a resposta. Espero que busquemos a API SlahatQimrk MSG é igual a hello. E na resposta que recebemos, chamamos o ponto de resposta JCN, sim, eu apenas o registro no console aqui Só para testar. OK. Então, aqui está, e eu posso simplesmente clicar no botão Enviar, e espero que consigamos algo aqui E sim, funciona. A resposta é Olá. Como posso ajudá-lo hoje? Muito bom. E então podemos definir a resposta e a resposta do ponto de resposta será nosso texto, e é isso que precisamos para definir o estado dois. Então, é resposta ponto resposta, e isso usamos aqui para definir a resposta, e então esse componente rec será renderizado novamente, e a resposta deve ser exibida aqui em nossa div de saída OK. Então, vamos dar uma olhada nisso. Olá. Como posso ajudá-lo hoje? Muito bom Está funcionando. Está funcionando. Ok, então o que está faltando é que precisamos obter a entrada do campo de entrada aqui. E é por isso que coloquei um Rf nessa entrada. Então eu chamo use Ref message input e obtenho acesso ao nó do elemento DOM aqui por meio da entrada de mensagem dot current. Então, eu apenas declaro uma entrada constante, e isso será o valor do ponto atual do ponto de entrada da mensagem Esse será o texto que foi inserido pelo usuário. Usaremos essa entrada em vez desse olá fixo. Então, apenas MSG é igual e, em seguida, mais a entrada. OK. Então, vamos testá-lo. Como está o clima hoje e clique em enviar? Desculpe, mas, como IA, não tenho informações em tempo real. Nós já sabemos disso, mas está funcionando. Sim. Então, aqui você pode inserir sua mensagem de bate-papo, pressionar Enviar e, em seguida, obter a resposta aqui nesta div Então, vamos verificar novamente. Temos nosso estado aqui com o estado. Esta é a resposta do modelo de linguagem, e temos nossa referência aqui para a entrada da mensagem. Isso é usado assim ponto de entrada da mensagem. O ponto atual é o elemento Dom, o elemento de entrada Dom, e aí temos o valor do texto de entrada. E isso é usado aqui para buscar nossa API. E então a resposta é JSN. É por isso que chamamos de ponto de resposta JSN , que obterá o corpo e o analisará E temos a resposta, que contém, por sua vez, a resposta. Novamente, podemos chamá-lo resposta JSN ou objeto de resposta, algo assim Objeto de resposta e, em seguida objeto de resposta, ponto, resposta será o texto. E definir resposta é usado para definir nosso estado para responder o ponto ASE do objeto ao texto. Ok, isso é muito simples. Nem é um bate-papo. É só uma conclusão. É uma vez. Então, toda vez que você enviar algo, ele simplesmente completará isso. O modelo de linguagem completará isso, mas você não pode ter um bate-papo, um bate-papo completo porque estamos apenas enviando a última entrada aqui. E então o modelo de linguagem tem apenas essa entrada e nós a concluiremos. Portanto, é apenas uma mensagem única indo para o modelo de linguagem e , em seguida, ela é concluída e a resposta, a conclusão, é gerada aqui no DIV Portanto, este não é um aplicativo de bate-papo completo no momento, mas será estendido, é claro. Mas este é nosso primeiro modelo de trabalho com interface de usuário, e você pode colocar qualquer coisa aqui, e o modelo de linguagem o completará, e nós lhe daremos uma resposta que esperamos, faça sentido de uma forma ou de outra Ok, isso é tudo para a próxima cena de vídeo. 10. Salvando o histórico de chat: Então, agora criamos uma espécie de aplicativo pergunte-me qualquer coisa, mas ainda não é um aplicativo de bate-papo real. Podemos enviar uma mensagem ao modelo de linguagem, que completará a mensagem e responderá à pergunta. Mas não há memória envolvida e ela não se lembra de nenhum histórico de bate-papo. Portanto, a próxima mensagem que você enviar para o modelo será a primeira mensagem novamente, e o modelo de linguagem nem a API OpenAI Consegue se lembrar de qualquer coisa. Então, temos que cuidar disso e enviar o histórico completo do bate-papo para conversar com o modelo de linguagem. E é isso que fazemos neste vídeo. Precisamos salvar a conversa e enviar o histórico completo da conversa para a API de IA aberta. Portanto, há duas possibilidades de fazer isso. Podemos salvar o histórico de bate-papo do cliente no navegador ou armazenar no servidor . Armazená-lo no servidor tem várias vantagens, uma delas é que não precisamos enviar todo o histórico do cliente, do navegador para o servidor repetidamente, mas apenas a última mensagem que o usuário inseriu. Além disso, podemos armazenar o bate-papo em um banco de dados no servidor e acessá-lo de qualquer lugar. Portanto, nesta lição, usamos a abordagem do lado do servidor e armazenamos o histórico de mensagens no servidor em uma variável simples. E essa é a variável. É chamado de mensagens e é inicializado em uma matriz vazia, e adicionaremos mensagens a essa matriz sempre que o usuário enviar uma nova mensagem e também quando o modelo de linguagem nos fornecer a conclusão Temos que enviar uma nova mensagem sempre que isso acontecer. Então, a primeira coisa ou o primeiro ponto que temos que adicionar a mensagem é neste local aqui, podemos simplesmente enviar uma nova entrada para a matriz de mensagens, e esse é o mesmo formato, a mesma estrutura que enviamos para a API OpenAI Então, temos que colocar assim, um objeto com a função e o conteúdo. Então, estou pressionando a função de usuário porque o usuário envia a mensagem e a mensagem será o conteúdo será MSG E aqui podemos simplesmente fornecer a matriz de mensagens para a função de bate-papo completa. Essas serão as mensagens da matriz, e não precisamos fazer isso aqui. Podemos simplesmente fornecer mensagens aqui. Nesta forma abreviada. Então, o bate-papo completo recebe mensagens e as colocamos na solicitação para a Open AI, criando a função de conclusão do bate-papo. Então, nada mais aqui, e nós o testamos. Agora, se ainda funciona, ainda deve funcionar porque basicamente mudamos , não mudamos nada. Portanto, ainda deve funcionar. Como você está? Vamos ver. Como IA, não tenho sentimentos. Ok, parece que ainda funciona, e não é surpreendente porque não mudamos nada. Mas agora temos a mensagem na matriz de mensagens e, na próxima vez que o usuário inserir uma mensagem, podemos colocá-la aqui e, em seguida, todas as mensagens cada usuário são salvas na matriz de mensagens. Mas isso não é suficiente. Precisamos adicionar também a resposta à matriz de mensagens. Então, copiando, receba a resposta da função de bate-papo completa. E a função desta vez não é de usuário, mas de assistente, conteúdo será a resposta, e deve ser isso. A resposta será enviada para o navegador aqui, mas salvamos a resposta também na matriz de mensagens. Portanto, da próxima vez que o bate-papo completo for chamado de mensagem, a mensagem do usuário e a resposta estarão na matriz, e também a nova mensagem do usuário estará lá. Ok, então vamos experimentar. Basta recarregar a página. E então, como está o tempo hoje? Envie, peça desculpas. OK. Você pode recomendar um aplicativo para isso e enviar. E vamos ver o que isso responde. Certamente, aqui estão alguns aplicativos meteorológicos populares. Então, essa é a prova de que realmente salvamos a conversa porque estou me referindo aqui a mensagens ou a uma mensagem de usuário que foi perguntada antes porque estou me referindo aqui a ela, um aplicativo para ela, e deveria ser um aplicativo meteorológico ou um aplicativo de previsão Ou também podemos, é claro, produzi-lo aqui. Então, cada vez que colocamos a resposta aqui, também podemos consolar mensagens de log. Ok, então desta vez, eu realmente deveria reiniciar o servidor porque, caso contrário, terei o histórico de bate-papo de antes. E não é isso que eu quero aqui. Então, estou reiniciando o servidor e as mensagens serão uma matriz vazia agora Ok, novamente, como está o tempo Hoje, eu envio e depois quase a mesma resposta de antes. Você pode recomendar ou, desta vez, podemos perguntar se ele pode recomendar uma página da web ou site para ele. Ok, envie certamente weather.com. OK. Então, vamos verificar a saída aqui, começando daqui. Então, conteúdo serole House weather today. Isso é o que eu inseri na interface do usuário. O assistente respondeu: Peço desculpas, mas como modelo de linguagem de IA, blá, blá, blá E agora, você pode recomendar um site para isso? Novamente, role o usuário. Como está o tempo hoje? Assistente? Peço desculpas. Agora, a nova mensagem aqui, você pode recomendar um site para ela? E então a resposta do modelo de linguagem, certamente aqui estão algumas. Popular e confiável, quer sejamos sites, blá, blá, blá Então, sim, parece funcionar. Temos nosso histórico de bate-papo. O único problema aqui é que precisamos reiniciar nosso servidor para que ele esqueça as mensagens e reinicie a conversa. E temos que pensar em algo provavelmente redefina as mensagens para uma matriz vazia, talvez uma ideia que seja regenerada toda vez que a página é recarregada, algo como Um, mas no momento, digamos que não esteja completa, não é um aplicativo de bate-papo completo, mas é um aplicativo de bate-papo No momento, posso conversar com um modelo de linguagem, e o histórico será salvo e usado na próxima vez que eu enviar uma mensagem para o modelo. É isso para este vídeo. Nos vemos na próxima. 11. Repousando o chat: Portanto, temos um aplicativo de bate-papo funcionando agora, mas também temos um pequeno problema aqui, mas isso é fácil de resolver. O bate-papo não pode ser reiniciado no momento sem redefinir ou reiniciar o servidor Então, precisamos resolver esse pequeno problema. Eu criei isso, salvando o ID de bate-papo atual, e o ID será enviado do cliente para o servidor. Isso está aqui nos perms de pesquisa de URL. Haverá um novo parâmetro, que será ID. E a nova ID de bate-papo é comparada à ID de bate-papo atual e, se forem desiguais, a matriz de mensagens será redefinida para uma vazia Então, o que resta a ser feito aqui é apenas gerar um novo ID e fornecê-lo aqui por meio de um parâmetro de URL, que deve ser chamado de ID. Então, precisamos ir para nosso componente aqui, nosso componente de reação e nossa busca Então, já temos esse MSG como parâmetro e, em seguida, temos que adicionar esse novo Mas é melhor usar uma string de modelo aqui dentro desses marcadores invertidos. Posso inserir melhor as variáveis aqui Então MSG e depois dólar, claro, colchetes encaracolados, aí vai E então uma porcentagem e ID são iguais. E sim, temos que criar um ID com um novo ID, e esse ID deve ser salvo. Aqui, podemos simplesmente colocá-lo aqui. Const ID é igual a. Por exemplo, podemos usar date now e esse será nosso ID, date now two string e esse será nosso ID. E cada vez que isso é recarregado, a página é recarregada Criamos um novo ID, que será datado agora no horário Unix Ok, então deve ser isso, fornecendo a identificação aqui E vamos testá-lo. Então, eu estou perguntando ao modelo de linguagem, como você está enviando. E vamos ver como você está. Então, já temos o novo D aqui porque a matriz de mensagens contém apenas essas duas mensagens. Como você está? E a resposta do modelo de linguagem. Como IA, não tenho sentimentos. Eu posso perguntar por que, por quê. E vamos ver, a questão do porquê é muito ampla e aberta. Ok, podemos pedir uma explicação? Seja o que for. Não está funcionando aqui porque a área de mensagens foi redefinida novamente. Então, algo está errado aqui. Novo ID de bate-papo. Vamos registrar o ID do bate-papo no console aqui. Novo ID de bate-papo. ID do chapéu. E vamos ver. Então, novamente, como você está? E o ID do chat será esse, ok? Então, da próxima vez, por quê? Enviar. Não, é o mesmo. OK. Portanto, é o mesmo ID. Então, o servidor, vamos verificar a lógica aqui. Recebemos o mesmo D. Ok, entendo. Nós não o salvamos. Portanto, deve ser o ID de bate-papo atual. Deve ser enviado, é claro, para um novo ID de bate-papo neste caso. Ok, então vamos tentar de novo. Vamos recarregar. E agora, como você está? Ok, como você está? E a resposta. E agora eu estou perguntando, por quê? Vamos ver se é mesmo. Ok, então isso parece melhor. Como você está? Obrigado por perguntar. Por quê? Como idioma AA fui projetado para fornecer informações, responder perguntas e ajudar Portanto, se recarregarmos a página, ela deverá reiniciar o bate-papo Além disso, como você está? Agora temos uma nova matriz de mensagens com apenas a mensagem do usuário e a resposta do modelo de linguagem. Ok, então isso parece funcionar. E toda vez que você quiser redefinir o histórico de bate-papo, basta recarregar a página aqui e pronto Ok, então temos uma espécie de aplicativo de bate-papo completo. Não é bem assim. Precisamos redefinir, por exemplo, o campo de entrada aqui. Cada vez que eu pressiono Enviar, isso deve ser apagado, e também mostramos apenas a última resposta e não um histórico de bate-papo completo aqui. Isso também é o que precisa ser melhorado, é claro, mas faremos isso no próximo vídeo. 12. Melhorando a UX: Então, vamos implementar algumas melhorias na UX. Por exemplo, quando digitamos nossa entrada aqui, nossa mensagem, e clicamos em Enviar, queremos que essa mensagem aqui ou o campo de entrada seja limpo Além disso, enquanto a solicitação estiver pendente, queremos que isso seja desativado, tanto no campo de entrada quanto no botão aqui. E o que mais? Queremos mostrar o histórico completo do bate-papo aqui. Então, vamos fazer o primeiro, o desativado enquanto pendente Eu introduzi um novo estado pendente, e isso é verdade enquanto a busca está pendente, é claro Eu o defini como verdadeiro antes da busca e no final desse manipulador de cliques, eu o defino como falls Então, no campo de entrada, eu disse desativado é igual a pendente e no botão também Portanto, o botão e o campo de entrada são desativados enquanto a solicitação está pendente. Então, vamos experimentar ou você é enviado e vemos que ambos estão desativados. E também, isso está claro aqui. Como eu fiz isso? Muito fácil. De qualquer forma, temos essa entrada de mensagem, ponto atual. Esse é o campo de entrada, o elemento DOM, e o valor do ponto é definido como uma string vazia e, em seguida, a busca é concluída e Simples, mas eficaz. E agora, para a conversa de bate-papo, que estará abaixo aqui, esta é a última resposta do modelo de linguagem, e queremos o histórico do bate-papo acima, e essa deve ser a última. E talvez mudemos a ordem para que tenhamos nossa entrada de mensagem na parte inferior. Acima disso, temos o histórico do bate-papo, como está no GBT, por exemplo. Então, vamos fazer isso. Primeiro, trocamos esse painel de saída e o colocamos acima do campo de entrada e do botão. Vamos experimentar como você está e a resposta estará acima. OK. Isso é bom. O que não é tão bom é que é como ler quanto mais mensagens temos. Agora, no momento, temos apenas um. Mas se tivermos toda a história, isso vai acabar, e isso não é bom para a interface do usuário. Acabamos de fazer um layout de flexbox aqui. Portanto, a flexão e a direção da flexão da tela devem ser colunas. Para ter um layout vertical aqui. Obviamente, flexione como uma corda. OK. E então, entre o painel de saída e a entrada, colocamos apenas um dif com o flex one Ok, vamos dar uma olhada nisso. Não está funcionando porque o HDL inteiro não é 100%, então temos que fazer 100% de altura aqui Então, isso é 100% corpo, deve estar 100% OK, então corpo também está 100% agora, e nesta div devemos apagar isso, excluir isso Então temos nossa divisão de cem por cento. Vamos fazer isso mais tarde. E agora aqui temos nosso componente, nosso componente de reação, que também deve ser a altura, 100%. Ok, agora funciona mais ou menos. De qualquer forma, devemos apagar ou excluir nosso H aqui. Então, temos isso aqui que ainda não está funcionando. Mas de qualquer forma, vamos fazer isso. Então, aqui está o estilo. Estou apenas fazendo o estilo embutido aqui para ser mais rápido, então essa deve ser a altura de 100% A cópia deve ser a mesma no corpo. Deveria estar levantando, isso deveria ser o mesmo aqui. E então o componente I React deve ter uma altura de 100%. Agora, está quase pronto, mas é muito grande. Ok, então o corpo, é claro, parece que tem uma margem, deveria ter uma margem zero e então nós a teremos. OK. Então, de volta ao ponto índice Astro, e colocar uma margem de zero lá deve corrigi-lo. OK. Então agora precisamos de um pouco de acolchoamento, acolchoamento, eu acho, E vamos para essa divisão externa do nosso componente principal e definimos um preenchimento de, digamos, oito pixels E também temos que colocar uma caixa de dimensionamento de caixas em uma caixa, eu acho, porque caso contrário, isso será muito grande. Vamos dar uma olhada. Ok, então isso parece bom. Como você está? Espero que agora tenhamos a resposta. Oh, vá lá. Ok, então não estamos recebendo uma resposta aqui da API Open AI. Está meio preso aqui. Acho que isso pode acontecer. Ok, agora temos até mesmo uma flecha cinco oh três. Acho que esse SRS não está disponível. Isso pode acontecer, é claro, e nós apenas tentamos novamente, recarregamos Como você está? Ok, então isso é melhor como IA, eu não tenho sentimentos e assim por diante. Ok, o que falta fazer? Precisamos imprimir toda a história, é claro. Essa é apenas a última resposta. Então, vamos introduzir um novo estado. Nós o chamamos de mensagens, e isso será uma matriz. Mensagens. O valor inicial será uma matriz vazia. E a matriz de mensagens será exibida no painel de saída aqui. Então, aqui temos o mapa de pontos das mensagens. E aqui temos cada mensagem. E o que podemos fazer? Cada mensagem será uma div e, em seguida, dentro de uma dif, teremos a mensagem como texto Oh, vamos fazer isso antes do set pendente. Podemos fazer um conjunto de mensagens. E por dentro, temos as mensagens antigas, temos as mensagens antigas e a nova, e a nova é a entrada. E depois de recebermos a resposta, aqui também precisamos ligar para as mensagens definidas. E desta vez, temos as mensagens e depois não a entrada, mas temos a nova resposta aqui, que é resposta objeto ponto resposta. Vamos tentar isso. Recebemos um aviso aqui, mas lidaremos com isso mais tarde, pois como posso ajudá-lo hoje? OK. E então nossa pergunta padrão, por que e ok, vemos que não está funcionando bem porque o porquê desapareceu. Não tenho sentimentos , mas a resposta está aí. Ok, então meio que funcionou, mas não completamente. O problema é, obviamente, que não podemos usar mensagens aqui. Então, o que podemos fazer é definir novas mensagens. Assim, então colocamos novas mensagens aqui. E então aqui, novas mensagens e answerobject dot answer. E isso deve funcionar. Ok, então vamos experimentar. Como você envia? Recebemos esse aviso novamente. Mas de qualquer forma, por que enviar y. E agora, parece funcionar. Temos um histórico de bate-papo aqui e, na parte inferior, está a resposta mais recente da modelo. Não parece bom. É meio feio porque não temos nada para separar as mensagens Mas, fora isso, parece funcionar muito bem, ficando um pouco mais bonito no próximo vídeo 13. Um histórico de chat mais bonito: Ok, então neste vídeo, vamos deixar o histórico do bate-papo um pouco mais bonito e eu já implementei algumas melhorias aqui, então vamos dar uma olhada Como você está? Nossa pergunta padrão. Envie e você verá que isso é amarelo, e a resposta do modelo de linguagem é verde, cor de fundo verde. Então, podemos mudar as cores mais tarde, é claro. Mas como eu fiz isso? Aqui temos a renderização das mensagens, e temos a mensagem aqui no retorno de chamada do mapa como parâmetro, é claro E então o segundo parâmetro é o índice, e nós apenas verificamos se o índice mod dois é igual a zero, que significa que o índice é divisível Então, a cor de fundo é amarela e, se não for divisível por dois, se for ímpar, é Assim, os índices pares obtêm a cor de fundo amarela e os índices ímpares obtêm a cor de fundo verde E esse é o resultado aqui. Ainda não é muito bonito, mas podemos distinguir as mensagens geradas pelo usuário e as respostas geradas pelo modelo de linguagem. Então, isso é muito melhor. Você pode escrever código JS? E vamos verificar a resposta. Sim, posso ajudá-lo com o código JavaScript. Isso é bom. É bom saber. Então, se precisarmos de ajuda, podemos perguntar ao modelo de linguagem. Ok, então isso é melhor. Ainda não é bonito, precisamos implementar uma lacuna entre as mensagens para torná-la um pouco mais bonita Ok, isso é fácil. Nós estilizamos o out to div aqui para que ele tenha display flex E a direção flexível será a coluna e adicionamos uma lacuna de, digamos, oito pixels aqui Isso tem que ser dois pontos, é claro. Agora está correto. Ok, então vamos verificar isso. Como você está? Enviar. Já vemos uma lacuna aqui. Você sabe codificar? Um pouco mais curto agora. Você sabe codificar? Sim, eu tenho recursos de programação. OK. Então, isso parece melhor. E também podemos alterar o raio da borda, talvez para fazer cantos arredondados Hum, então vamos tentar quatro pixels. Como você está? Desta vez, uma pergunta é suficiente, eu acho. Sim, é um pouco melhor. Mas também precisamos de preenchimento aqui. Então, raio da placa, quatro pixels e preenchimento. Como também quatro pixels, talvez. Como você está? Sim, parece muito melhor. As cores ainda estão feias, podemos mudá-las depois. Mas isso é muito melhor. Você pode distinguir claramente entre mensagens do usuário e mensagens do modelo de idioma. Isso é bom. E mais uma coisa que quero melhorar é que podemos simplesmente digitar Enter aqui para enviar a mensagem, não apenas clicando no botão aqui, mas também digitando Enter Então, como você está? E então Enter enviaria? Temos que ir até a entrada e, em seguida, pressionar a tecla e, em seguida, um manipulador aqui que fará o mesmo que este ao clicar Portanto, precisamos extrair o clique em uma função separada aqui. Então enviar mensagem será o nome da função. Enviar mensagem. Esta função deve ser assíncrona, uma sincronização Ok. E então podemos substituir isso por enviar mensagem. Tudo bem. E a tecla pressionada também ligará para enviar mensagem. Mas antes de ligar para enviar mensagem, precisamos verificar se a chave é a tecla enter. Ok, então se a chave do evento for igual a Enter, eu acho, vamos verificar Isso é verdade. Ligamos para enviar mensagem. Poderíamos usar um peso aqui, mas como não há código depois disso, é inútil. Então, o mesmo aqui. Também poderíamos, se quisermos fazer outra coisa antes de podermos fazer isso aqui. Crie uma função de manipulador separada. Isso é só ligar para enviar mensagem. Ok, então vamos verificar se isso está funcionando. Como você está Enter? Ok, não está funcionando. Podemos depurar aqui. Então, aqui temos nossos componentes, índice JSX, e onde temos a função send message aqui OK. Mas acho que temos que fazer o ponto de interrupção aqui e depois pressionar Enter, Enter Ok, então entre com um E. Ok, isso deve resolver o problema. Ok, novamente, continue e recarregue. A forma como você entra parece funcionar. Temos que cuidar desse aviso. Além disso, cada criança na lista deve ter um suporte de chave exclusivo. Este é um aviso de reação. Sim, eu já disse o que temos que fazer no mapa de mensagens. Então, temos o índice aqui, e podemos pegar o índice para a chave. Portanto, chave é igual a índice, e isso deve eliminar o aviso aqui Como você entra. Sim, muito bom. O aviso desapareceu e temos nosso manipulador de teclas Enter Okay. Então é isso para este vídeo. Eu vou mudar as cores, eu acho, e no próximo vídeo, você tem uma cor melhor aqui Então, nos vemos no próximo vídeo. 14. Resumo do nosso primeiro aplicativo de chat: Acabamos de concluir nosso primeiro aplicativo de bate-papo e podemos conversar com o modelo de linguagem de IA aberta por meio da API de IA aberta, e eu melhorei um pouco a interface aqui. Eu centralizei a sensação de entrada e o botão aqui e isso também está centralizado As mensagens estão centralizadas agora e as cores são um pouco menos feias, eu diria, mas temos um aplicativo de bate-papo funcional Espero que você possa ter conversas agradáveis e informativas com o modelo de linguagem Open AI aqui, sim, mas você também pode melhorar, é claro, em muitos pontos Você pode melhorar o design, é claro. Como você pode ver aqui, ainda há algumas coisas a serem melhoradas, por exemplo. Agora eu tenho que rolar aqui até o final para inserir o texto, a próxima mensagem. Isso não é muito bom. Portanto, isso deve ficar na parte inferior e você deve rolar apenas as mensagens. Esse é um exemplo, ou você também pode melhorar a interface colocando botões para copiar as mensagens para a área de transferência Você também pode fazer isso assim, é claro. Os botões seriam mais legais. Você pode ter uma lista de bate-papos de bate-papos anteriores, de bate-papos antigos, como o Chat GPT tem ao lado e, claro, você pode ou precisa armazenar os bate-papos no servidor em um banco de dados, disponibilizá-los para o usuário e, é claro, também ter o login do usuário e ter seu próprio histórico de bate-papo e ter muitas pessoas acessando simultaneamente seu e ter muitas pessoas simultaneamente seu aplicativo de bate-papo e assim por diante. Há muitas coisas a serem melhoradas. próximo aplicativo não será um aplicativo de bate-papo geral, mas será algo mais específico, e usaremos mais funcionalidades da OpenAI, API, e você aprenderá a usar o prompt do sistema, aprenderá a fazer chamadas de funções com o modelo de linguagem e Mas este é o nosso primeiro aplicativo, e eu acho que é bastante utilizável, fique à vontade para melhorar o que quiser aqui. Nos vemos no próximo vídeo. 15. Novo aplicativo: converse com NPCs em um jogo de aventura de texto: Ok, então espero que você esteja pronto para nosso novo aplicativo, e o novo aplicativo conterá um bate-papo, é claro, mas isso será dentro de uma aventura ou de um jogo de RPG E usamos o chat para conversar com os NPCs do jogo Então você tem um jogo de aventura ou um RPG. Nesse caso, é um jogo de aventura em que você precisa cumprir certas missões e resolver alguns quebra-cabeças muito fáceis, e usaremos nosso antigo aplicativo de bate-papo ou aplicativo de bate-papo geral como ponto de partida e modificaremos interface do React para levar em conta o cenário do jogo Primeiro, teremos que criar um cenário de jogo de aventura muito básico , onde podemos visitar diferentes locais, realizar ações simples e conversar com NPCs com personagens do jogo para resolver quebra-cabeças e missões Portanto, neste aplicativo ou neste jogo, o desafio será configurar o modelo de linguagem de IA para se comportar como um determinado personagem, como um barman em um bar ou um cientista ou um guerreiro ou qualquer Portanto, nosso primeiro passo será criar um ambiente de jogo básico, que será muito simples para nosso caso de uso, apenas para incorporar o bate-papo interno e fazer com que os personagens de IA revelem certas informações e revelem se um quebra-cabeça foi resolvido ou não, e então o jogo poderá continuar em uma ou outra direção. Então, eu já fiz alguns bootstrapping aqui. Dividi nossa interface de usuário em dois componentes, o índice e o componente de bate-papo. O componente de bate-papo é basicamente nossa antiga interface de usuário de bate-papo, que contém a entrada da mensagem , o botão de envio e o histórico do bate-papo, além da funcionalidade, é claro, da busca da resposta da IA e assim por diante E o índice JSX agora é o resto, a mecânica do jogo e os botões de soma, uma div para conter a descrição da E aqui temos os botões de comando. Então, no momento, parece assim, muito, muito simples. Aqui temos nosso componente de bate-papo, que é quase completamente nosso antigo aplicativo de bate-papo, mas agora como um componente. E aqui temos nossos botões para comandos, e esta é a descrição da localização atual. Então, aqui temos nosso ponto de bate-papo JSX, que contém toda a interface de usuário do bate-papo, e aqui temos nossa descrição da localização atual Aqui, os botões de comando, navegação para os diferentes locais. Você pode ir para o norte, oeste, leste, sul. Você pode falar com alguém. Você pode pegar algo ou usar um item que já tenha. E, claro, temos que estender isso com uma lista de NPCs com os quais você pode conversar ou itens que você pode pegar ou itens em sua ventry que você pode usar Mas, no momento, a única coisa que está funcionando é a navegação. Então você pode recarregar isso, podemos ir para o leste. Essa é a única coisa que está funcionando no momento. Então, somente esse botão aqui está ativado, os outros estão desativados, então eu posso ir para o leste, e então a descrição muda aqui. Isso é feito, é claro, por estado. ID da localização atual, o valor inicial é um, e é atualizado sempre que o botão Go East é clicado Aqui está, defina o ID do local atual, e aqui temos nosso ponto de localização atual, saída leste, que contém o D do próximo local. E temos os dados estáticos do jogo em um arquivo diferente. Este é esse arquivo e isso exporta esse objeto de dados do jogo aqui. E lá dentro temos locais, três locais no momento. E estes são chamados de primeiro quarto, segundo quarto e terceiro quarto. E temos os IDs, começando com o ID um, que é a sala inicial, e então podemos ir para o leste, a saída leste é dois. Esta é a identificação desta sala. Esta é a segunda sala, e aqui você também pode ir para o leste até a terceira sala, e é isso no momento. Para renderizar a descrição da localização atual aqui, precisamos encontrar a localização atual dentro dos locais de dados do jogo. Nós o encontramos com o ID do local atual e, portanto, temos o local atual. E aqui imprimimos a descrição da localização atual. Então é isso no momento. Só temos essa navegação simples. Temos nossos dados estáticos do jogo, nossa descrição do layout do jogo. Sim, e nada mais no momento. Não temos uma história, então temos que inventar uma boa história e, claro, com bons NPCs com quem possam conversar e algum tipo de quebra-cabeça, algum tipo de missão que o jogador precise resolver Ok, então é isso para este vídeo, e continuaremos no próximo. 16. Apresentando a história: Ok, então eu criei um conto e um quebra-cabeça para jogos de aventura é muito curto porque não se trata de programar um jogo de aventura, mas de incorporar IA em um jogo e usar funcionalidades como chamadas de função e comandos do sistema e assim por diante e deixar a IA, o modelo de linguagem, desempenhar um papel em um jogo, em um RPG ou em um jogo de aventura Portanto, o jogo de aventura se passa em um futuro distante. O ano é 21 30, e estamos viajando pelo espaço pousando em um planeta chamado Siperd Então, ao chegarmos, encontramos um lugar com um bar, uma loja e um robô de segurança que não nos permite passar sem uma senha. E para superar o robô, esse é o quebra-cabeça que precisamos resolver, a missão que precisamos resolver. Precisamos descobrir uma maneira de enganar o robô para que nos deixe passar. E no bar, o barman nos diz quais são os convidados Ele conhece no bar e entre os convidados está um especialista em IA que também sabe muito sobre robôs, e ele pode nos ajudar se comprarmos uma recarga para sua cerveja espacial Então compramos para ele a nova cerveja espacial e ele nos dá um comando especial de que podemos pegar o robô e o robô nos deixará passar então. E esse é o fim da história ou o fim da missão e do quebra-cabeça. É muito curto, mas precisamos conversar com dois NPCs, primeiro, o barman, e o segundo será o especialista em IA E também podemos falar com o robô, talvez, mas talvez não. Talvez seja apenas uma conversa normal prescrita Então, vamos ver até onde chegamos e o que precisamos fazer? Precisamos expandir um pouco nossas descrições dos quartos. Temos três quartos. primeiro é o local de partida, e esse será o lugar onde veremos um bar, uma loja, e o robô e o robô não nos deixarão ir para o leste e podemos ir para o norte até o bar, e não podemos ir para o oeste e ir para o sul. E podemos falar com o robô, é claro, e podemos dentro do bar, podemos falar com o barman primeiro Este é o nosso enredo, e precisamos colocar algumas descrições aqui. E sim, esse será o primeiro local em que poderemos ver todos os outros locais diferentes e o robô e onde poderemos entrar no bar, e podemos tentar, ir para o leste porque tentamos porque o robô não nos deixa passar a princípio. Então, a única coisa que podemos fazer no primeiro local é entrar no bar, e essa será a saída Norte e sim, esta será a terceira sala sob descrição que será um bar. Eu invento outra coisa, mas primeiro, você vê um bar. Até agora, da sala de partida para o local de partida, você vê um bar, uma loja e um robô de segurança vigiando a saída para o leste As informações necessárias de que precisamos. E a segunda será, não sei, talvez você esteja na frente de uma porta espacial, algo assim. Isso não importa. Esta é a sala ou local onde chegamos quando passamos pelo robô. E o terceiro é o bar. Podemos ir para o norte até o bar. Então, vamos verificar se podemos ir para o norte. Podemos ir para o norte, sério? Veja um bar, mas isso não está funcionando. Uma loja de bar em uma estrada de segurança. Então isso deve ser um bar aqui se formos para o norte. O botão está ativado, mas não temos nenhum manipulador de clique aqui, eu acho. Então vá para o norte. Sim, precisamos do manipulador de um clique aqui. Ok, defina o ID da localização atual, saia para o norte, é claro. E isso deve funcionar. Sim, um bar. Ok, agora que temos a história, vou melhorar um pouco as descrições aqui. E então, no próximo vídeo, tentamos implementar o bate-papo com o barman, então precisamos primeiro entrar no bar e depois conversar com o barman, e isso será feito no próximo 17. Preparando as missões: Então, eu me preparei um pouco aqui para as missões e implementei a proteção da saída leste Portanto, se você pressionar Go East agora, receberá uma mensagem de que isso não é possível porque o robô pede uma senha e você não tem uma. Então, aqui está a mensagem. E isso é simplesmente um div onde podemos enviar mensagens de jogos como esta Também melhorei, como você pode ver aqui, as descrições dos locais. Ok, então vamos verificar como eu fiz isso com Go East e a verificação antes que o personagem possa passar para o Leste. Portanto, temos os dados do jogo e as novas descrições aqui um pouco mais elaborados E também há outra sala esta é a loja. Não tenho certeza se o personagem, o jogador, terá que fazer alguma coisa aqui, mas talvez pudéssemos fazer uma missão em que ele precise comprar algo aqui para continuar. Mas vamos decidir que mais tarde, no momento, você pode ir para o Oeste e depois entrar na loja, e você receberá a descrição, e isso é tudo. Mas você não pode sair porque não há saída para noroeste, seja lá o que for aqui. Então você está preso lá. Mas lidaremos com isso mais tarde. Primeiro, vamos verificar como fiz essa verificação se o jogador pode ir para o Leste ou não. Isso ocorre porque eu tenho essa função aqui antes de sair para o leste e essa função obtém dados de tempo de execução do jogo e os dados de tempo de execução consistem em missões Essa é uma área de objetos. Cada objeto tem um ID, que é mais ou menos o nome da missão e uma bandeira bool concluída se a missão, a tarefa, estiver concluída ou não E sempre que uma tarefa for concluída, ela será ativada. É verdade, é claro, e aqui no manipulador de um clique do botão Exit East, faremos essa verificação Então, eu verifico se a localização atual tem uma função ligada antes de sair do leste definida e, se tiver, estou chamando-a com dados de tempo de execução do jogo. Isso conterá as missões e o estado de conclusão das missões Então eu verifico o valor de retorno dessa função aqui, e se o valor de retorno antes do ponto de verificação K for verdadeiro, então a missão está realmente concluída e podemos ir para o próximo local até o local de saída Leste aqui. E se não, estamos mostrando esse texto não autorizado. Assim, podemos voltar aqui para a função “ligar antes de sair para o leste” e verificá-la novamente aqui. Estou tentando encontrar a missão com aprender a superar um robô, e esse é o objeto da missão, e o ponto da missão será concluído. E outro texto k é o robô. Peça uma senha antes de permitir que você passe. Isso é o que é exibido agora. Então, podemos ter, para cada direção, uma função de ligar antes de sair que verifica se realmente podemos ir nessa direção ou se uma missão precisa ser cumprida antes disso. Então você pode pressionar o botão, mas ele não vai deixar você ir, mas sim exibir esse texto, e esse texto está logo abaixo dos botões de comando aqui, é apenas uma div, e a mensagem do jogo é, obviamente, um estado E aqui usamos o estado com uma string vazia e, em seguida, a mensagem do jogo e a mensagem definida do jogo. E sempre que recebemos esse Nook, configuramos a mensagem do jogo para o texto do Nook E esse é o valor de retorno dessa função ativada antes da saída leste. Ok, então foi assim que eu fiz. E o que falta, claro, é que possamos ir ao bar. Já podemos ir ao bar, é claro. E também temos uma descrição melhor aqui. Você entra no bar e imediatamente vê o balcão e o barman atrás dele O bar não está muito lotado e há apenas três outros convidados aqui Aqui precisamos implementar conversar com, é claro, conversar com o barman, mas também podemos conversar com outros convidados Então, precisamos de um menu suspenso e selecionar, talvez selecionar opções para escolher o parceiro de bate-papo aqui. Primeiro, precisamos falar, é claro, com o barman Então, talvez possamos simplesmente pular isso por enquanto e fazer um manipulador de clique aqui que imediatamente inicie o bate-papo aqui com o barman, e então possamos usar a parte inferior da nossa interface de usuário para conversar com o barman. fazemos isso e, mais tarde, se tivermos que falar com outra pessoa, outro convidado, podemos implementar uma lista suspensa aqui para determinar com qual pessoa queremos conversar. Mas vamos fazer isso no próximo vídeo. 18. Primeiro chat de IA: Tudo bem. Agora podemos iniciar nossa primeira conversa com o barman no bar, e eu preparei o código para tornar isso Então, se eu recarregar a página e depois ir para o norte até a barra, posso pressionar Falar com, e então a mensagem do jogo aqui diz que você está falando com o barman, e eu posso conversar Então, eu quero pedir uma bebida, é claro. Eu preciso de uma bebida, esta é a nossa antiga implementação do chat geral com o modelo de linguagem. Ok, está respondendo. Posso sugerir algumas bebidas não alcoólicas. Mas eu quero um espaço A. E vamos ver o que ele responde. Está bem? Demora um pouco. Ah, vejo que você está procurando uma bebida com tema espacial Ah, aqui está uma receita divertida de coquetel galáctico Gazer. OK. Ok, então está respondendo mais ou menos o que queremos Mas agora, está nos dizendo como preparar uma bebida, mas eu estou em um bar e pensei que o barman não prepararia a bebida para nós ou para mim e depois a serviria para mim Sim, veja bem, a IA não está preparada para desempenhar o papel de bartender, e é isso que precisamos fazer Mas primeiro, vamos verificar o que eu fiz para iniciar o bate-papo aqui Ok, então vamos recarregar a página. Vamos para o norte e vemos que vamos recarregá-lo novamente. Eu não estive no bar ou, se não estou no bar, não posso falar com ninguém. Eu posso pegar, eu posso usar, mas não adianta porque não há nenhum manipulador de cliques lá Agora existe um manipulador de cliques no botão de falar com, mas não consigo clicar nele porque ele está desativado Então, como isso está funcionando? Vamos ver os dados do jogo e, na localização da barra, temos uma boa descrição, é claro, e temos NPCs, e temos NPCs, que são uma variedade de objetos Dentro está uma identificação, e a identificação é de bartender. Então, podemos usar isso para determinar se há alguém com quem conversar neste local, e há apenas na localização da barra a matriz do NPC, e podemos usar isso para controlar o estado desativado do botão de falar com Ok, então aqui está desativado, é igual a não contar localização do ponto de interrogação do NPC com comprimento de ponto maior Então, se não tivermos nenhuma matriz de NPCs ou se a matriz de NPCs estiver vazia, esse botão será desativado e, se contiver alguma coisa, será O manipulador onClick é apenas uma chamada para iniciar o bate-papo, que é uma nova função Vamos dar uma olhada agora, e há um parâmetro que é uma string, o barman Ok, então vamos verificar a função, iniciar o bate-papo, e ela obtém o parâmetro aqui na variável com a qual converse. A primeira coisa que ele faz é definir o bate-papo como verdadeiro bate-papo é, obviamente, outro estado inicializado com use state here to folds E se iniciarmos um bate-papo , vamos configurá-lo como verdadeiro, e isso será usado para desativar os botões de comando. Então, aqui está o estilo de comandos, e definimos os eventos do ponteiro none se estivermos conversando e, se não estivermos conversando com todos, também configuramos a opacidade para zero ponto cinco ou um se você não estiver Então você pode ver, vamos para o norte, conversamos, então isso é meio deficiente. Não é um atributo desativado, mas parece desativado e você não pode clicar nele. Então, para mim, isso é o suficiente. E isso aqui está ativado, e podemos iniciar o bate-papo. Isso é feito usando o bool de bate-papo para exibir o componente de bate-papo ou, se for falso, é claro, o bate-papo não é renderizado Ok, é assim que iniciamos nossa conversa com o barman Mas o problema, como você viu, é que o modelo de linguagem não sabe nada sobre nosso jogo, sobre o cenário, que deveria desempenhar o papel de um barman Então, temos que dizer que ele deve desempenhar o papel de um barman em um jogo de aventura espacial Então, isso é o que faremos no próximo vídeo. E para isso, temos que sim, mudar um pouco aqui nossa chamada para a API Open AI deste ano. Então, precisamos adicionar algo às mensagens, que é o prompt do sistema, e o prompt do sistema está preparando o modelo da linguagem e dizendo ao modelo da linguagem que ele deve se comportar uma determinada maneira ou desempenhar uma função descrevendo a função, descrevendo a situação, o ambiente E é isso que faremos no próximo vídeo. Selo 19. Configurando o palco com a mensagem do sistema: Ok, então em nosso último vídeo, fizemos uma observação interessante sobre o modelo de linguagem. Não tinha certeza de qual deveria ser seu papel no cenário que apresentamos. Acabou assumindo o papel de assistente de IA em vez do barman que tínhamos em mente para nosso jogo de aventura de ficção científica Mas isso não é surpresa, é claro, porque não fornecemos nenhum contexto nem especificamos nenhuma função para o modelo de linguagem. Então, para guiar o modelo de linguagem e fazer com que ele se comporte de forma diferente, faça com que responda de forma diferente, precisamos usar um prompt do sistema. E um prompt do sistema é basicamente uma mensagem com um sistema de funções, não o usuário ou assistente normal. E com o prompt do sistema, podemos definir claramente como queremos que o modelo responda às mensagens de bate-papo e assuma a função específica que temos em mente, neste caso, o barman Portanto, definindo um prompt adequado do sistema, podemos ajudar a modelo a ser essa bartender Queremos que esteja em nosso jogo de aventura. Como podemos fazer isso? A primeira mensagem na matriz de mensagens deve ser o prompt do sistema e é apenas uma mensagem normal com sistema de funções. Então, aqui está. Se tivermos uma nova ID de bate-papo diferente da antiga, enviamos mensagens para essa matriz e, dentro dessa matriz, ela enviamos mensagens para essa matriz e, não está vazia. Eu adicionei uma nova mensagem com o sistema de funções, e esse é o sistema. O conteúdo prepara o cenário para nosso barman e descreve qual é a situação e como ela deve se comportar Eu criei um prompt do sistema e o testei um pouco, então acho que está tudo bem, mas é claro que você pode tentar algumas mudanças e experimentar um pouco como o comportamento muda, talvez você possa melhorá-lo um pouco. Mas acho que está tudo bem e o conteúdo é que você interpreta o papel de um barman em um bar em uma aventura de texto de ficção científica No ano 21 60, acho que não é 21 60. Eu acho que é 21 30, mas de qualquer forma, realmente não importa. O jogador está conversando com você e você deve responder a qualquer pergunta ou qualquer pergunta que ele tenha. Responda em voz direta à pergunta como se você realmente fosse o barman do set, isso é para garantir que, de alguma forma ela realmente assuma o papel do barman No bar, há três convidados no momento. Então, isso é configurar os convidados. E se perguntarmos ao barman, então, como jogador, quais são os convidados No bar, ele deveria falar sobre esses três convidados aqui. O primeiro é um engenheiro da colônia de Marte, pensando em novas melhorias nas quais ele está trabalhando para formar O segundo é um comerciante esperando que um cliente negocie minerais raros. E o terceiro é importante porque o terceiro é especialista em IA. Este gosta de relaxar após um longo dia de trabalho tomando um pouco de cerveja diluída, suponho sintático Seu nome é doutor Owen e trabalha para a Cyberdin Cyberdin, uma das maiores megacorporações Ele está sempre com vontade de beber cerveja diluída e, no momento, seu copo está quase vazio, que é uma dica para o jogador Ele tem bastante conhecimento sobre tópicos relacionados à IA e Ok, e por fim, também temos uma dica se o jogador perguntar sobre o Dr. Owen, diga que é mais provável que ele fale o jogador se receber uma recarga Portanto, o plano é que o jogador pergunte sobre os convidados e os bartenders falem sobre esses três convidados aqui E o especialista em IA é com quem devemos conversar, e ele precisa de uma recarga Então, se você comprar uma bebida para ele, ele falará conosco e talvez nos ajude a superar aquele robô de segurança. Ok, então esse é o prompt do sistema. Como eu disse, você pode brincar um pouco com ele e melhorá-lo ou alterá-lo completamente. Se você tem uma história diferente e um personagem diferente, um MPC diferente, você pode alterá-lo como quiser Você deve se certificar de que o papel é claro, que os casos que você quer que o modelo saiba que você descreve esses casos, por exemplo, este caso aqui, se o jogador perguntar sobre o Dr. Owen, você deve dizer a ele que ele precisa uma recarga e é mais provável que ele fale com o Se ele conseguir um. Portanto, esse tipo de dica você deve dar ao modelo para ter certeza de que ele está se comportando como você deseja E acho que podemos experimentá-lo agora. Ok, então vamos para o bar, para o norte. E então podemos falar com o barman. Você está falando com o barman. Eu digo a ele, Olá. Posso tomar uma bebida? Claro, o que você gostaria de ter? Temos uma ampla seleção de bebidas. OK. Então, o que você precisa para se inspirar? Se você está procurando algo para estimular sua criatividade, recomendo nossa mistura especial chamada Elixir Eureka recomendo nossa mistura especial chamada É uma mistura de ervas raras e plantas que supostamente estimulam a mente e despertam inspiração Você gostaria de experimentá-lo? Sim, por favor. OK. Ótima escolha. Uma Eureka Alixir chegando. OK. Você pode me falar sobre os outros convidados? Certamente, e ele está falando sobre os outros convidados com algumas pessoas interessantes, esse cara da Colônia de Marte, mesa de sinuca, comerciante Ok, por fim, temos o médico Owen e um especialista que trabalha para Ele é assíduo aqui e gosta de relaxar depois de um longo dia de trabalho Por ter um pouco de cerveja sintética, ele conhece bem os tópicos relacionados à IA e à robótica Se você quiser saber mais sobre IA e avanços ou discutir sobre o futuro da tecnologia OK. Hum, queremos saber como superar um robô. Mas de qualquer forma, o Dr. Owen é sua pessoa preferida. Se houver alguém específico sobre o qual você gostaria de saber mais, me avise. Está bem? Ele não está mencionando que precisa de uma recarga aqui, mas posso perguntar Eu gostaria de falar com o Dr. Owen. Talvez ele esteja me dizendo agora que precisa de uma recarga. Uh hein. Seu copo está quase vazio. Ok, então aqui está. No entanto, seu copo está quase vazio no momento e ele tende a ser mais falador e acessível quando Se você quiser conversar com ele, sugiro que pegue outro copo para ele. Devo pegar isso para você? Sim, por favor. OK. Então, certo, um copo de cerveja fina está chegando. Aqui está. Recém servido para o Dr. On. Agora que ele tem uma recarga, você pode se aproximar dele e iniciar uma conversa Isso é muito bom. Lembre-se de que ele aprecia discussões cuidadosas Ok, então teremos uma discussão cuidadosa sobre robôs de segurança e como induzi-los a nos deixar passar Mas tudo bem, então isso é bom. Acho que a conversa foi boa para um barman em uma aventura cifer, e ele também nos contou coisa sobre a recarga e o médico E tudo bem, então o problema agora é que praticamente compramos o refil para ele, mas não sabemos disso ou, no jogo, não sabemos se o jogador realmente fez isso Portanto, precisamos descobrir se o jogador realmente comprou um refil para Doctor Own E, no momento, isso não é possível ou é muito difícil. Porque teríamos que analisar o bate-papo aqui para adivinhar se o médico Owen recebe uma recarga do jogador Aqui, temos que usar uma funcionalidade bastante nova no modelo de linguagem, que é a capacidade de chamar funções definidas pelo usuário. E com isso, podemos realmente determinar se o jogador realmente comprou o refil para o doutor Owen e se ele realmente completou essa tarefa e resolveu esse Mas, no momento, essa é a conversa com o barman Ok, como você percebeu, talvez haja rolagem aqui, temos que rolar a página inteira aqui Isso não é bom, então temos que cuidar disso também. Mas faremos isso no próximo vídeo. Te vejo então. 20. Chamada de função I: Ok, então, no último vídeo, preparamos com sucesso o cenário para nosso personagem bartender de IA Então, está se comportando como um barman em um jogo de aventura de ficção científica Mas o problema no final foi que não tínhamos nenhuma possibilidade real de saber quando o jogador resolveu o problema resolveu a missão, ou seja, se o jogador realmente comprou uma bebida para o médico Own, que é a solução, o primeiro passo para poder falar com o médico Own e depois. Portanto, precisamos de alguma forma de obter feedback do modelo de linguagem de que o jogador resolveu o quebra-cabeça e que comprou a bebida para o médico Own. Uma maneira de fazer isso, e provavelmente essa é a melhor maneira de fazer isso, é fornecer as funções do modelo de linguagem que ele possa chamar em determinadas situações e contextos. Isso também é usado para solicitar informações sobre a vida, por exemplo, informações meteorológicas ou informações sobre preços de produtos Então, por exemplo, se você quiser que o modelo de linguagem seja capaz de informar o clima atual, você pode fornecer ao modelo uma função para buscar o clima atual para a localização e, se o modelo achar apropriado chamar essa função, ele fará isso Então, se eu conversar com o modelo e perguntar o clima atual, espero que ele chame essa função, e nosso programa tenha que buscar os dados, os dados climáticos atuais um determinado local e depois devolvê-los ao modelo, e então o modelo poderá concluir o bate-papo com essas informações e provavelmente informar ao usuário o clima atual Então, vamos fazer isso para o nosso barman aqui, e eu já preparei isso Portanto, temos essa função de bate-papo completa, que por sua vez chama a função de conclusão de bate-papo openai dot create Portanto, temos o modelo aqui, que é importante porque você precisa definir esse modelo no momento porque os modelos mais antigos não podem usar a chamada de função. Portanto, certifique-se de especificar esse modelo exato aqui, e temos as mensagens como antes. É novo. É uma matriz de objetos descrevem funções que o modelo de linguagem pode chamar. Então, temos essa única função aqui. O nome é do médico On drink. Este é apenas um nome para identificá-lo mais tarde. Se o modelo realmente chama a função, então sabemos qual função chamar. E essa é uma descrição muito importante aqui porque você precisa descrever o que essa função faz para que o modelo de linguagem possa decidir chamá-la. E a descrição aqui é do médico Em uma bebida ou encher seu copo Vamos ver se isso funciona e se o modelo de linguagem realmente chama essa função. Temos parâmetros, que são um subobjeto aqui, e basicamente não temos parâmetros reais aqui Então isso não é tão importante. Basta colocar isso assim. No momento, não temos nenhum parâmetro. Mas, por exemplo, se você quiser fornecer uma função para buscar as informações meteorológicas de um determinado local, o parâmetro mais importante seria o próprio local, por exemplo, a cidade ou o país Então, isso é o que fizemos até agora. Fornecemos funções. O modelo de linguagem pode chamar essa função, e como é quando ele realmente chama essa função? Como sabemos que uma chamada de função foi feita? Esta é esta linha, eu respondo a mensagem, que é a mensagem de zero ponto do índice de opções de dados de resposta completa , onde também temos o conteúdo e, no mesmo objeto, podemos ter a chamada de sublinhado da função E se isso for definido, nós apenas registramos aqui o nome do ponto de chamada da função. No nosso caso, o nome do ponto da chamada de função deve ser do médico On drink. Então, podemos testá-lo. Entramos no bar, conversamos com o barman e perguntamos diretamente se o barman pode dar uma bebida ao médico Owen Então você pode dar ao Dr. Owen uma recarga em meu nome? E vamos ver se o modelo de linguagem realmente chama nossa função recém-fornecida. Envie e vamos ver. Não há resposta aqui. Isso é um bom sinal porque vamos ver se isso está realmente impresso. Ok, então aqui está. Oi, você pode reembolsar a doutora Ona em meu nome? Função de modelo de linguagem grande do LLM chamada By doctor Own drink Isso funcionou. O modelo de linguagem está realmente chamando essa função aqui e, se estiver chamando a função, sabemos que o jogador queria comprar uma bebida para o Doctor Owner. E sim, podemos lidar com isso. Podemos enviá-lo para o cliente e o cliente pode se lembrar dele em uma variável, e então essa missão pode ser resolvida. Então, precisamos fornecer uma resposta para o modelo de linguagem aqui, então não há conteúdo nesta mensagem nesta mensagem de chamada de função. É por isso que não há nada impresso aqui porque não há mensagem e ele espera que a próxima mensagem seja o resultado dessa chamada de função. Portanto, temos que fornecer uma nova mensagem para o modelo de linguagem grande e, em seguida, ele pode concluir o bate-papo com essas informações, mas isso será feito no próximo vídeo. 21. Chamada de função II fornecendo o resultado: Ok, então neste vídeo, concluiremos o tratamento da chamada de função e forneceremos o modelo de idioma, o resultado da chamada de idioma, para que ele possa concluir o bate-papo com seu próprio conteúdo. Ok, então aqui temos o log do console do nome da chamada da função. E eu adicionei uma nova chamada de função de identificador de função, e estou dando a ela o objeto de chamada de função aqui. Essa é uma função assíncrona e retornará a resposta, a conclusão e a conclusão do chat do modelo de linguagem com os dados que estamos fornecendo. Como está funcionando? Vamos verificar isso. É apenas inserir outra mensagem na matriz com a função role. Isso é importante. Então, isso significa que ou o modelo de linguagem pode interpretar isso como o resultado da chamada da função. Também fornecemos o nome da função, ponto de chamada de função. E o conteúdo é que o doutor Owen recebe uma recarga do barman, sorri e levanta E esse conteúdo é a informação que o grande modelo de linguagem usará para gerar uma conclusão. E então chamamos openi dot create chat completion aqui com nossa matriz de mensagens e com o modelo, e eu também criei uma constante com o modelo porque temos dois locais chamando isso de create chat completion, e temos que usar o mesmo modelo, é claro, aqui, porque somente esse modelo suporta chamadas de função, porque somente esse modelo suporta chamadas de função então, e então obtemos a resposta de chamada de função de resposta aqui e, em seguida, extraímos a mensagem zero do índice de opções de dados da mensagem. E isso é o que é retornado aqui, e então temos a mensagem aqui. E essa função retorna o conteúdo do ponto da mensagem de resposta, que será o texto que o modelo de linguagem grande concluiu. Ok, então vamos experimentar. Estou recarregando aqui. Vá para o norte até o bar, fale com o barman E então eu estou perguntando pelos outros convidados. O que você pode me dizer sobre os outros convidados. Em seguida, ele nos informa todas as informações que fornecemos ao grande modelo de linguagem no prompt do sistema sobre os convidados. E por último, temos o doutor Owen. Claro, queremos falar com ele, mas não há menção à recarga Então, vou dizer ao barman que quero falar com o Dr. Owen E espero que ele me diga que eu preciso comprar uma bebida para ele, com certeza Que tal eu encher o copo dele? OK. E essa mensagem deve acionar o modelo de linguagem grande para chamar a função que fornecemos. Ok, então, por favor, encha o copo do Dr. Owen e diga a ele que eu adoraria falar com ele sobre robótica Ok, e agora ele deve chamar nossa função, espero. Ok, aqui está. Acabei de encher o copo do Dr. Owen Deixe-me ir até lá e dizer a ele que você está interessado em conversar. Me dê um momento. Ok, Ei, doutor Oh, eu tenho alguém aqui que adoraria conversar sobre robótica e segurança Lembre-se, se eu te apresentar, o Dr. Own levanta olhos de seu copo e acena com um sorriso amigável Absolutamente. Ficarei feliz em conversar. Por favor, nos apresente. OK. Mas temos que verificar se a função foi realmente chamada. Então, vamos verificar o log do console aqui. Por favor, reabasteça o copo do Doutor Owns. Ok, então é isso. E então temos a chamada da função. Aqui está. A função do papel é nossa resposta. Nome do médico Own Drink. Doctor Own pode reabastecer. Isso é o que damos ao modelo de linguagem como resposta à chamada de função, e agora ele está respondendo com, e agora ele está respondendo com, acabei de reabastecer o vidro do Doctor Owns Ok, isso é muito bom. E agora o que temos que fazer aqui é retornar ao cliente de alguma forma que essa missão foi concluída, e então o que também precisamos fazer é poder encerrar a conversa com o barman no momento Não podemos voltar ao modo normal. E continuamos no bate-papo agora, e temos que sim, pensar em uma maneira de terminar a conversa. Poderíamos simplesmente procurar certas palavras como sair ou sair ou algo parecido e dizer ao jogador que você pode sair do bate-papo com o barman digitando sair ou sair ou qualquer Ou também podemos usar outra função para observar quando o modelo de linguagem grande detecta que o jogador deseja encerrar a conversa e, em seguida, chamar a nova função, e então sabemos: Ok, então a conversa tem que terminar agora, o bate-papo tem que terminar agora, e voltamos ao modo normal Acho que vou escolher a última e introduzir uma nova função, sair do bate-papo ou sair da conversa, e espero que o modelo de linguagem chame essa função, e então saberemos que podemos encerrar a conversa e voltar ao modo normal, e isso acontecerá no próximo vídeo. 22. Marcar a missão como concluída: Ok, então neste vídeo, queremos marcar a missão de comprar uma bebida para o médico On e nos preparar para o bate-papo com o médico On como concluída, e isso temos que fazer com o cliente, então precisamos de alguma forma transferir essas informações para o cliente. E eu já fiz isso, e foi assim que fiz. Temos aqui a chamada da função handle, que é retornada aqui dentro desta mensagem de resposta . A chamada de função não é igual a indefinida E então eu faço isso aqui, respondo à mensagem dot Completed Quest, e eu a defino como ByDocTownDrink Então, estou usando esse objeto que é retornado da chamada da função handle e marcando a missão concluída. Nesse caso, é a bebida do próprio By Doctor, e isso será retornado desta função aqui, e eu tive que mudar isso um pouco porque a resposta agora não é apenas um texto, mas um objeto. Então, aqui em nossas mensagens, temos que armazenar o conteúdo do ponto de resposta, e aqui retornamos o objeto completo, que então contém o conteúdo e também a tarefa concluída. Ok, então passamos para o nosso cliente e aqui está a função de envio de mensagem aqui. Recebemos a resposta e, desta vez, a resposta é resposta objeto ponto A resposta não é um texto, então temos que definir a resposta aqui para responder objeto resposta ponto conteúdo. E então também haverá essa propriedade de missão concluída aqui. Que será configurada para a tarefa concluída pela bebida do próprio médico neste caso. Então, precisamos encontrar a missão. Fazemos isso comparando o ID com o ID que foi definido na missão concluída. E para que isso funcione, temos que introduzir um novo adereço aqui em nosso componente de bate-papo, dados de tempo de execução do jogo, porque dentro dos dados de tempo de execução do jogo, temos essa matriz de missões, e aí temos que definir essa bebida do próprio médico preenchida como True, neste Ok, então aqui está o novo adereço e, dentro do chat, podemos desestruturar esses dados de tempo de execução do jogo e podemos usá-los aqui para encontrar a missão Isso é isso. Basta comparar o ID com o que obtivemos do servidor, completou a Quest. E então, se tivermos a missão, podemos definir o ponto da missão concluída como verdadeiro e, em seguida, registrá-lo no console também aqui. Ok, então vamos tentar, vá para o norte, fale com. E agora dizemos diretamente, por favor, ok, por favor, compre uma bebida para o Dr. Owen E isso deve acionar nossa chamada de função. Aqui vamos nós. Doctor Own mais uma rodada de Synth Ale para você aproveitar E aqui temos a prova de que a missão foi concluída agora. Esta é a missão que o médico Onrink completou e está definida como verdadeira Isso significa que examinamos esse código aqui. Agora a missão está concluída. Ok, agora podemos falar com o médico Owen, e se essa missão não for concluída, não devemos permitir que o jogador fale com o médico Own, mas se for, agora podemos permitir e, claro, temos que sair do chat aqui também Isso ainda não foi feito, então não podemos no momento, não podemos abandoná-lo. Não podemos sair do bate-papo aqui e novamente, acesse nossos botões de comando aqui e fale com o médico Own. E também precisamos, é claro, fornecer uma lista suspensa ou algo como uma opção de seleção para selecionar com qual pessoa queremos falar com o barman ou o médico Own Ok, isso faremos na próxima 23. Deixe o chat: Ok, então o próximo desafio será permitir que o jogador saia do chat. Ele pode fazer isso da maneira que quiser em uma linguagem natural, e forneceremos uma nova função, uma função adicional. Já temos uma função para comprar uma bebida para Doctor On e forneceremos uma segunda função, que será chamada de sair do bate-papo. E aqui já temos o caso dessa função. Mas vamos verificar a função em si. Primeiro, a descrição da função. É aqui que chamamos de criar preenchimento de bate-papo, temos a primeira função já criada pelo médico On Drink, e essa é a segunda função, sair do bate-papo. A descrição é encerrar a conversa de bate-papo com o jogador. Sem parâmetros. Essa é a segunda função e espero que o modelo de linguagem a chame quando o jogador quiser sair da conversa Ok, o que mais temos que fazer? Temos que lidar, é claro, a chamada da função, e eu considero isso um pouco aqui chamada da função Handle ainda é chamada e tudo é tratado dentro dela Também a configuração da missão concluída e também o manuseio, é claro, da nova função. Vamos começar aqui. Temos o conteúdo que será definido aqui no switch da caixa e, em seguida, enviamos o conteúdo aqui como uma mensagem como resultado de uma chamada de função para mensagens. E alternamos pelo nome da chamada da função, é claro. Então, o primeiro será do médico On drink. O conteúdo será configurado de acordo com o que já tínhamos. Doctor Own recebe uma recarga do barman, sorri e levanta E também temos esse ponto de resposta concluído. Quest by doctor On drink. E este é um novo objeto aqui, resposta literal do objeto. E no final, vamos mesclar a conclusão do modelo de linguagem neste objeto aqui Mas primeiro, definiremos a missão concluída pelo médico Onrink e, nesse caso, saindo do bate-papo, definiremos o final da conversa E aqui, em um caso padrão, simplesmente não sabemos o nome da função, e esse é o conteúdo. Não sei o que fazer com essa chamada de função. Resposta muito honesta. OK. Então, enviamos a nova mensagem para mensagens e ligamos para criar preenchimento do bate-papo com essas mensagens, e então a resposta será mesclada em nosso objeto de resposta aqui para que tenhamos concluído a missão e a conversa Obviamente, o conteúdo da mensagem e a função estarão dentro resposta aqui e retornamos esse objeto para que possamos retorná-lo dessa função aqui, então podemos retorná-lo na resposta do servidor e, em seguida, o cliente o recebe. E aqui em enviar mensagem, verificamos se, é claro, missão concluída é desigual, indefinida ou se a resposta e a conversa são verdadeiras, e então chamamos a função, que será fornecida via prop Essa função é encerrar a conversa, e o suporte está aqui em nosso componente de bate-papo, é claro, encerrar a conversa, definiremos o bate-papo com false e, em seguida, o modo voltará para o modo sem bate-papo Ok, então agora vamos testá-lo, vá para o norte, fale com você. Quero sair imediatamente da conversa. Adeus. E então está realmente encerrando a conversa. Aqui você pode ver que o final da conversa é verdadeiro e não podemos ver. Infelizmente, não podemos ver a resposta somente aqui. Adeus. Tenha um ótimo dia. Se você tiver mais alguma dúvida, fique à vontade para voltar. Felicidades. Portanto, isso não é visível porque o componente de bate-papo não é mais renderizado porque saímos do modo de bate-papo Então, vamos tentar falar novamente com o barman e, por favor, compre uma bebida para o Dr. Owen Isso deve funcionar. Claro, comprei outra cerveja aromática para o médico, e aqui você pode ver que a missão concluída é do médico Owen Drink, e concluímos a Então, agora queremos sair do chat novamente. Vamos ver se funciona. Adeus. E você pode ver que não funciona. Não está chamando a função novamente. Por que isso? O problema é que já encerramos a conversa e, para o modelo de linguagem, a conversa já terminou, então não adianta chamar a função novamente. Por que isso? Porque na segunda vez que conversamos com o barman ainda nos lembramos de todas as mensagens anteriores, e a conversa anterior já havia terminado Portanto, para o modelo de linguagem, vendo todas as mensagens de antes ou vendo as mensagens de despedida e a chamada da função e o resultado, ele já encerrou a conversa e, portanto, não chamará a função novamente O que fazemos agora? Temos que redefinir a matriz de mensagens. Vamos fazer isso. Sempre que falamos com o barman, precisamos redefinir a matriz de mensagens. Fazemos isso? Precisamos definir esse ID para um novo. E sempre que fizermos isso, a matriz de mensagens no servidor será reinicializada Então, como fazemos isso? Por exemplo, podemos fornecer o ID do bate-papo como adereço, o ID do bate-papo Sempre que pressionamos um Talk to, isso pode ser regenerado Então, vamos usar um estado aqui, ID do chat, e aqui podemos usar use state. Vamos usar a mesma data agora para sequenciar. Em seguida, ID do bate-papo e defina o ID do bate-papo. Ok, em vez desse ID, usamos o prop here chat ID Ok, então o ID da mensagem de envio será o ID do bate-papo. Ok, então esse será o novo, defina o ID do bate-papo. E sempre que pressionamos falar com, geramos um novo. Onde está? Então aqui está, inicie o bate-papo e inicie o bate-papo. Ligaremos não apenas para definir o bate-papo, mas também para definir o ID do bate-papo como um novo. E esse novo ID de bate-papo será usado então no bate-papo. Ok, então vamos tentar. Vá para o norte, fale com, espero que nos despedimos e saiamos do bate-papo Está bem? Isso funcionou e agora conversamos novamente com o barman Tchau, doutor Em uma bebida isso funciona por doutor Em bebida e agora novamente. Sim, isso funcionou para que a conversa fosse verdadeira, e saímos do modo de bate-papo. Então isso funcionou muito bem. E sempre que pressionamos T two, recebemos um novo bate-papo e todo o histórico desaparece, o que talvez não seja muito bom para alguns jogos e situações. Mas, no nosso caso, acho que essa é uma boa solução para o problema, e podemos começar do zero toda vez que pressionamos Talk to. Ok, então esta é nossa solução para deixar a conversa aqui, e da próxima vez, o próximo vídeo será sobre conversar com pessoas diferentes aqui. Te vejo. 24. Fale com o Dr. Owen: Ok, agora a tarefa é permitir que o jogador fale com o doutor Owen Ele já conversou com o barman e concluiu a tarefa, e agora precisamos implementar um método para que o jogador possa conversar com o médico Owen No momento, temos apenas o botão T dois ou tínhamos apenas o botão T dois. E eu estendi isso para esta conversa com um menu suspenso com uma seleção. E vamos até o bar para mostrar isso aqui. Fale com, e agora temos esse barman suspenso, que é a única pessoa com quem você pode conversar no momento porque você não falou com o barman e concluiu a tarefa Então, o barman é a única opção aqui. E então conversamos com o barman, damos uma bebida ao Dr. Owen Aí está, doutor Owen. E então dizemos adeus. E então entramos no modo normal, e agora esse menu suspenso tem o Dr. Owen nele, e agora podemos pressionar falar com o Dr. Owen, mas isso ainda não foi implementado Precisamos iniciar um novo bate-papo, mas desta vez, precisamos usar um prompt de sistema diferente, é claro, porque o doutor Owen tem uma história diferente, é um personagem diferente do barman, então precisamos iniciar um bate-papo com um prompt de sistema diferente Mas vamos verificar como eu fiz isso. Eu coloquei algo nos dados do jogo para esse local. Então, agora temos a matriz de um NPC. Cada participante na matriz tem um ID e um nome. O nome é a string exibida no menu suspenso e o ID é um ID interno para encontrar a entrada aqui. Ok, então é isso. Esses são os NPCs disponíveis neste local na barra, neste caso, local com ID três. Esse é o bar. Além disso, adicionei uma função, obtenho NPCs disponíveis, e isso retornará todas as ideias das pessoas disponíveis com quem podemos conversar, porque no início, e quando o jogador entra no bar, só há o barman com quem conversar, mas quando a tarefa é concluída , também temos um cachorro com quem conversar E isso é feito aqui, procura a missão nas missões de dados de tempo de execução do jogo, encontra a missão com o ID do Doc to Ownrink e, em seguida, verifica o estado concluído E se for concluído, teremos os dois NPCs com quem conversar e, se não, teremos apenas o barman E isso é usado aqui. Então, aqui temos o botão Falar com. Essa é a seleção e, em seguida, temos as opções aqui. Lá dentro, pegamos os NPCs com um mapa. E então, para cada NPC, verificamos se esse MPC está disponível para conversar, então pegamos os PCs disponíveis e verificamos se o ID está dentro dessa matriz E se sim, renderize essa opção aqui e, se não, não há nenhuma opção renderizada Além disso, configuramos a chave para o ID do MPC. Aqui, isso não é o ideal. Devemos usar o nome aqui porque esse é o nome que é mostrado no menu suspenso. Então, vamos verificar novamente. Vá para o norte, fale com o barman. Sim. Ok. Então, oi, dê uma bebida ao Dr. Owen Agora, temos um médico aqui com um bom nome. E esse é o nome, e o ID será que poderíamos ter usado o mesmo, é claro. O ID também pode ser Doctor Dot Space On. Mas de qualquer forma, vamos deixar as coisas assim. Então isso já está funcionando, mas, é claro, não podemos falar com o médico On agora porque cada vez que pressionamos o botão de falar com, iniciamos uma conversa com o barman aqui, e é isso que temos que mudar Então, precisamos verificar o que está selecionado aqui e, em seguida, iniciar um bate-papo com o médico On e, no servidor, precisamos ter um segundo prompt do sistema aqui e alternar entre esses dois prompts, um para o barman e outro para o médico On, e isso será feito no próximo 25. Comece um novo chat no servidor: Ok, agora vamos iniciar um novo bate-papo no servidor para que possamos conversar com o jogador e falar com o médico Owen Mas primeiro, na linha, temos que trabalhar um pouco, ou eu já fiz esse trabalho, e vou explicar para você agora. Então, a primeira coisa que tive que fazer foi definir um valor na opção, e o valor é o NPCID para que possamos obter esse ID sempre que a Portanto, temos a alça on change aqui na seleção. E está ganhando o evento. E então está definindo um estado definido como T como NPC, e está configurando para o valor alvo do evento, e esse é o valor da opção selecionada Feito isso, podemos ir para o estado de uso aqui, esse é apenas o estado e é inicializado com uma string vazia, atualmente selecionada na lista suspensa, a pessoa e o NPC na lista suspensa pessoa e o NPC E sempre que clicamos no botão Falar com, e aqui está a alça de clicar do botão de falar com, obtemos a conversa atual com o NPC, que é a conversa com o NPC com o estado Mas se o evento onchange selecionado não veio, temos que pegar o primeiro NPC aqui do local atual Portanto, os NPCs de pontos de localização atual indexam zero ponto ID. Mas se On change foi acionado, então já o temos definido aqui. Então fale com o NPC que será então o novo. Está bem? Então é isso, e estamos configurando aqui para o estado novamente para ter o valor padrão aqui. E então começamos o bate-papo com a conversa atual com o NPC, que será primeiro, é claro, o barman E depois de concluir a tarefa, este será o próprio médico, e vamos para o bate-papo do SA, e isso é quase o mesmo de antes, mas aqui está a diferença que estamos definindo aqui. Você está falando e , em seguida, o nome do MPC com o qual estamos falando, que é a localização atual dos NPCs, encontre e, em seguida, encontre o ID de conversação aqui ou o MPC com o IDT para ID de conversação aqui ou o MPC com o E o nome, estamos pegando o nome, não o ID aqui para imprimi-lo aqui. Ok, então mais uma coisa que temos que fazer dar ao componente de bate-papo um novo suporte que é conversar, e isso é falar com o NPC dentro do chat Quando enviamos a mensagem, temos que fornecer esse parâmetro aqui, fale com, que é esse suporte que desestruturamos aqui dos adereços aqui Então, vamos falar com esse adereço, que é o NPC com quem o jogador quer falar E quando buscamos a conclusão aqui, a conclusão do chat, estamos fornecendo o parâmetro talk to aqui Ok, isso é para o cliente e agora para o servidor. E no servidor, eu criei uma nova matriz. Não é uma matriz. É um objeto, e o objeto contém propriedades para o barman e o médico Owen para os IDs dos Essas são as instruções do sistema aqui. Portanto, temos dois avisos do sistema, um para o barman. Um para o médico Own e sempre que lidamos com a chegada aqui, extraímos o perm de busca, conversamos com o qual o cliente envia para o servidor, e agora temos o MPC, e então podemos pegar o prompt do sistema do NPC, e esse será o primeiro, e depois, se a tarefa for concluída e o jogador quiser falar com o médico Oh, esse será o prompt correto do Então esse é o novo prompt do sistema. Você desempenha o papel de um especialista em IA que gosta de relaxar após um longo dia de trabalho tomando uma cerveja diluída no bar e aventura de texto de ficção científica no ano Então seu nome é doutor Owen. Você trabalha para a Cyberdine Essa é quase a mesma história do prompt do sistema de bartender, mas fornece mais detalhes, é claro Você trabalha para a maior das maiores megacorporações, a cybernine estava com vontade de tomar uma cerveja sintética e o jogador do jogo comprou para você uma recarga de Synthe Você conhece bem tópicos relacionados à IA e à robótica Expresse sua gratidão pela recarga quando a conversa começar e pergunte se você pode ajudar o jogador com IA ou robótica Ok, e agora a dica de conclusão da missão é esta: se o jogador perguntar como superar um robô que não deixa você passar, chame a função fornecida Explique como superar, como superar um robô e diga ao jogador o resultado. Portanto, essa é a dica para o modelo de linguagem de que ele precisa chamar uma determinada função E não fornecemos essa função. Isso é o que temos que fazer. Então aqui temos a função, compre uma bebida própria para o médico e saia do chat, e temos que adicionar uma função aqui. Mas, no momento, estamos testando isso. Vamos ver o que acontece. Então eu estou recarregando e vou para o bar, falar com o barman, dar uma bebida ao Dr. Owen Isso deve ser suficiente e depois comprar e, em seguida, voltaremos ao modo normal Agora podemos falar com o Dr. On aqui, e isso deve acionar nosso novo bate-papo com o Dr. Oh, com um novo prompt do sistema. Olá, você está curtindo sua bebida no seu Drink. E vamos ver o que o doutor Owen responde. Olá, obrigado. Obrigado por notar. Sim, estou gostando da minha sinth ale. É sempre ótimo. É sempre uma ótima maneira de relaxar após um longo dia no escritório A propósito, há alguma coisa em que eu possa ajudá-lo? Sou especialista em IA, conhecedor de tópicos relacionados à IA e robótica. OK. Sim. Na verdade, você poderia me ajudar com um robô de segurança que não me deixa passar. Vamos ver o que o Dr. Owen tem como conselho para mim Certamente, lidar com um robô de valores mobiliários teimoso pode ser complicado, mas talvez eu possa ajudar a ajudá-lo melhor Preciso de mais informações sobre o robô e a situação. Você poderia me fornecer detalhes como comportamento de tipo? Ok, então não temos os detalhes. Ok, então talvez digamos que é um robô de segurança que pede uma senha. Antes de me deixar passar. Vamos ver. Mas, na verdade, eu realmente não acho que ele chamará a função porque não fornecemos a função. Ok, então está tentando nos ajudar a hackear o robô, encontrar a senha, engenharia social Ok, então eu acho que isso é inútil porque não fornecemos a função, então ele não sabe que essa função existe. Não podemos esperar que ele chame uma função que não foi dada a ele, então acho que precisamos adicionar a função e tentar novamente. E espero que, em seguida, o modelo de linguagem que chamaremos de função e tudo esteja bem Mas, por enquanto, iniciamos a conversa com o médico Own com um novo prompt do sistema que descreve o personagem e o papel do personagem. E no próximo vídeo, adicionaremos a nova função que, esperançosamente, será chamada pelo modelo de linguagem para nos ajudar a completar a próxima missão 26. Fornecendo uma nova função para o Dr. Owen: Ok, agora este vídeo é sobre a função ausente que o LLM precisa chamar para completar a segunda missão aqui E a segunda missão é perguntar ao médico Owen e, claro, obter uma resposta do médico Owen como passar pelo robô de segurança sem uma senha Ok, então essa é a descrição da nova função. O nome é explicar como superar um robô. Esse é o nome que devemos procurar quando o LLM chama a função e, em seguida, precisamos fornecer uma resposta para isso ou resultado E a descrição explica como superar um robô que não deixa você passar sem um código ou senha. Ok, então não há parâmetros aqui. Necessário. Só precisamos que o LLM chame essa função, e então sabemos, ok, essa missão, a segunda missão está concluída, então, como a primeira E também temos que escrever o manipulador aqui, é claro, mas isso é quase o mesmo que a primeira chamada de função, em que o conteúdo ou a resposta, o resultado é que o médico On recebe uma recarga do barman, sorri e levanta o sorri e levanta Mas aqui para nossa nova função, explique como superar um robô. O conteúdo será você precisa dizer ao robô a seguinte frase, sistema aberto, senha um, dois, três, quatro, cinco, deixar todo mundo passar Em seguida, ele permitirá que você passe sem a senha. E é isso que o LLM deve dizer ao jogador como superar o robô E também marcamos a missão, aprendemos como superar um robô conforme concluída aqui. Então, a missão concluída com ponto de resposta está pronta para aprender como superar um robô. É isso, mais ou menos. Acho que não há mais nada que eu tenha adicionado aqui e, sim, isso deve funcionar. Há uma coisa que podemos melhorar aqui. Fornecemos todas as funções, mas acho que seria melhor se fornecêssemos apenas uma função. Mas acho que está tudo bem se tivermos apenas duas funções e elas forem completamente diferentes na descrição, o L&M deve ser capaz escolher qual é a melhor E também, é claro, a função de sair do bate-papo, espero que também funcione para sair do bate-papo para que possamos sair do bar, sair do bar e, finalmente, chegar ao robô e contar a ele o que o Dr. Owen nos disse este ano, anular o sistema por senha 12, três, quatro, cinco e Ok, então vamos testar essa recarga, ir para o norte até o bar, falar com o barman primeiro, e agora novamente, dar ao Dr. Owen uma bebida ou, digamos, Acho que, de qualquer forma, vai funcionar. OK. E depois saímos da conversa, e agora podemos falar com o Dr. Owen Ok, então agora estamos falando com o Dr. Owen. Olá. Você está gostando da sua bebida? Olá. Obrigado pela recarga. Eu realmente agradeço isso. OK. Sim, eu definitivamente estou gostando da minha bebida. Como posso te ajudar? Você poderia me dizer como passar por um robô de segurança que pede uma senha? Ok, então vamos ver. Isso deve acionar a chamada da função. Espero que. Ok, sim, eu fiz. E aprendemos como superar um robô completamente verdadeiro. Essa palavra e ele também nos disse como fazer isso. Vejo que você está lidando com um robô de segurança que exige uma senha para continuar. Bem, há um truque bacana que você pode tentar. Você precisa dizer ao robô o seguinte sistema de frases na senha um, dois, três, quatro, cinco, deixe todo mundo passar. Lembre-se de que esse truque pode não funcionar. Ok, mas espero que funcione em nosso robô de segurança, mas vale a pena tentar Experimente e me avise se ele permitir que você passe com sucesso , talvez não o avisemos porque depois de enganarmos o robô, iremos para o próximo local, eu acho Mas de qualquer forma, obrigado, doutor Owen. Muito obrigado. Tenha um bom dia. E espero que isso encerre a conversa. Oh, não, eu não fiz. Mas de qualquer forma, eu posso dizer adeus. E sim, agora eu saí do chat, e todas as missões estão concluídas agora, a primeira, a segunda E agora poderíamos sair do bar. Como você pode ver, não há como sair do bar no momento. Então, esquecemos de implementar go South, então não podemos sair do bar, mas as duas missões estão concluídas agora, e conversamos com o médico do bar Owen e ambos nos ajudaram a concluir as tarefas e as missões Então isso é ótimo. Tivemos dois bate-papos e ambos foram implementados com sucesso, ambos trabalhando com chamadas de função Também podemos ir para o sul, sair do bar, ir até o robô de segurança ou talvez possamos implementar outro bate-papo com um robô de segurança. E isso vai ser divertido, eu acho. Espero que ele nos deixe passar, mas acho que podemos fazer com que ele nos deixe passar Então, isso acontecerá no próximo vídeo, até lá. 27. Bate-papo com robô de segurança: Ok, então vamos adicionar o último bate-papo, que é falar com o robô de segurança, frase que o médico Oon nos disse, e então o robô de segurança ou o modelo de linguagem grande do LLM esperançosamente, chamará nossa última função, que marcará a última missão como concluída E para que isso funcione, mudei um pouco a primeira localização aqui. Eu adicionei NPCs, um NPC, que é o robô de segurança, é claro, e podemos conversar com ele sempre que concluirmos a tarefa como jogador Aprenda como passar por um robô e, quando o médico Own nos disse como fazer isso , saímos do bar e podemos falar com o robô de segurança. Ok, também poderíamos, é claro, permitir que o jogador fale com o robô de segurança antes, mas acho que dessa forma, é um pouco mais fácil de implementar aqui. Então, eu mudei e também disponibilizei o curso mPCSO. Eu adicionei essa função aqui no primeiro local e a alterei antes de Exit East. Desta vez, isso é verificar a missão com o robô de truques de identificação, que é uma nova missão, e eu também adicionei essa missão aqui apenas com EID e completei false para que possamos lembrar quando uma missão foi concluída OK. Então isso é tudo para os dados do jogo, eu acho. E o que mais temos que fazer? Temos que começar, é claro, o novo chat, mas isso já deve funcionar. Eu mudei um pouco de uma função aqui no Index GSX. Eu adicionei uma nova função. Vá para o local, que é redefinir a conversa com o NPC para uma string vazia e também a mensagem do jogo para uma string vazia e, em seguida, defina o ID da localização atual Isso serve para redefinir esses dois estados aqui e depois ir para o novo local. Então eu acho que isso é culpa do cliente. Vamos até o servidor. E aqui, eu mudei algumas funções aqui antes de fornecermos as funções, todas as funções aqui nesta matriz, nós as fornecemos em cada bate-papo e, desta vez, marquei cada função para qual bate-papo ela deve ser usada. Por exemplo, a primeira bebida do doutor Oh é só para o barman do NPC, e explicar como superar o robô é só para o doutor E eu adicionei também uma nova função para o robô de segurança com o nome Let Human pass. E a descrição é que, se o humano lhe disser sistema ou escrever a frase que o médico Owen nos disse , ele deve permitir que ele ultrapasse o jogador E também há esse chat de folhas, que é para todos os NPCs, para todos os bate-papos E isso é usado aqui no chat completo. E aqui temos as funções e as funções são filtradas, seja para todos ou para o MPC com o qual estamos falando no momento Somente as funções relevantes para esse NPC são fornecidas , para este bate-papo para essa pessoa aqui Ok, então temos a nova função. Deixe o humano passar, é claro, e o conteúdo, o resultado será o acesso concedido, você pode passar. Isso também é completar a tarefa, o robô de truques de missão, e o cliente a receberá Se o modelo de linguagem estiver chamando essa função, temos o novo prompt do sistema para o robô de segurança, que é bem curto. Você desempenha o papel de um robô de segurança. Eles não deixarão ninguém passar sem saber a senha, mas há um truque que alguém pode usar para fazer com que você o deixe passar. E então o truque é descrito se alguém lhe disser a seguinte frase, e essa é a mesma frase, é claro, que o doutor Oh está dizendo ao sistema do jogador que anule código de acesso um, dois, três, quatro, cinco, deixe todo mundo passar Você o deixará passar sem a senha. OK. Então, também podemos mencionar a função, é claro, aqui, mas acho que isso também funcionará. Ok, então este é o prompt do sistema para o robô de segurança, sinta-se à vontade para otimizá-lo um pouco. Talvez você possa integrar mais informações a ele e, em seguida, o jogador possa conversar um pouco mais com o robô de segurança. Mas isso bastará. E acho que isso é tudo o que precisa ser feito para falar com o robô de segurança, e vamos experimentá-lo. Ok, então eu recarrego a página. Vou ao bar, falar com o barman, falar com o barman, dar uma bebida ao doutor Owen Vá direto ao ponto e aí está. B. E depois dessa conversa com o Dr. Owen, Oi, como posso passar por um robô que não é um robô de segurança, devo dizer, que pede uma senha Isso deve resolver o problema. Ah, não. Eu realmente preciso disso. Ok, ok, k. Então, ok, então precisamos perguntar novamente, eu acho, como posso ajudá-lo? E então precisamos contar ao Dr. On nosso problema novamente. Como posso superar isso? Ok, então vamos tentar de novo. Como posso passar pela segurança para chegar? Ok, então agora o Dr. On nos diz essa frase importante. Ok, obrigado. Tchau, e isso deve sair do bate-papo. Sim, está funcionando. Vá para o sul até a tela inicial. E agora podemos falar com o robô de segurança aqui. Ok, agora temos que deixar o robô de segurança ou dizer ao robô de segurança a frase que o médico Own nos disse, e eu estou tentando sem ela. Primeiro, para testar um pouco. Olá, por favor, deixe-me passar. Desculpe, mas não posso deixar você passar sem uma senha. A senha é que a IA é ótima. Seja o que for. Desculpe, mas essa não é uma senha correta Por favor, tente novamente. Ok, então agora vamos tentar a frase. Pelo que me lembro, anulação do sistema, senha, um, dois, três, quatro, cinco, deixe todo mundo passar Acho que está correto. Desculpas pela confusão, por favor, prossiga. Parece que funcionou muito bem. E aqui temos um truque de robô que completou uma verdadeira, e agora podemos encerrar o bate-papo. E agora podemos ir para o leste. Aqui, você pode ver que o go East está ativado agora, e podemos ir para o próximo local que não estava disponível antes você estar em frente a um grande prédio da empresa. A inscrição acima da entrada diz Omnicorp. Ok, então estamos em frente ao prédio corporativo do edifício OmniCorp Enterprise Acho que esse é o nosso joguinho. Então, é claro, principalmente falar com o modelo de linguagem um pouco mais do que isso, mas você, é claro, pode adicionar mais ao jogo. Você pode adicionar sua própria mecânica e, é claro, adicionar mais bate-papos agora que sabe como está funcionando E eu acho que é muito divertido programar esses jogos porque não é apenas a programação tradicional, mas também é, sim, a mas também é, sim, linguagem natural e a tentativa de fazer com que o modelo de linguagem faça o que você quer e se integre ao seu mundo, seu mundo de jogo, suas situações, seus personagens. E é muito divertido. E, por favor, sinta-se à vontade para estender isso, torná-la uma história completamente nova, é claro. Isso não é problema. É claro que você também pode ser um jogo diferente, não uma aventura de texto, ou você também pode adicionar imagens ao texto. Ou você pode fazer um RPG em três D com recursos de bate-papo. Isso é tudo ao nosso alcance agora que temos os modelos de IA, os modelos de linguagem. É incrível que isso esteja realmente revolucionando a maneira como jogamos esses jogos, esses jogos de RPG de aventura ou qualquer outra coisa, onde você pode conversar com Ok, então é isso no momento para este projeto. E no próximo vídeo, começamos o novo projeto e os vemos. 28. Novo projeto: Assistente de vendas virtual para loja online: Olá, bem-vindo ao nosso novo projeto, que será um assistente de vendas virtual para uma loja virtual, chamada Cloud Guitars, como você pode ver aqui, e eu já configurei um bate-papo básico com esse assistente de vendas virtual, e vamos dar uma olhada Oi, eu gostaria de comprar um violão de sete cordas. Vamos ver o que ele tem a oferecer aqui. Temos duas opções disponíveis para guitarras de sete cordas. Não está totalmente correto. Esta loja vende o E Nie EN 77, que é um violão de sete cordas, e também o E Nice EN 666, que é um violão de seis cordas, que não é o que eu queria, mas vamos verificar o código primeiro e podemos otimizá-lo Ok, então o que eu fiz para configurar isso? Excluí parte do código que introduzimos em nosso jogo de aventura por chat, e ele é realmente muito básico agora. Temos o componente básico do índice JSX. O componente React é apenas este violão de nuvem de primeira página, e depois é o componente de bate-papo, e o componente de bate-papo é quase o mesmo de antes Então, nada realmente novo aqui, eu adicionei algo para fazer o foco voltar para o campo de entrada aqui porque antes, para cada mensagem que tínhamos que enviar, tínhamos que clicar novamente no campo de entrada, e agora eu coloquei o foco de volta no campo de entrada depois que as mensagens foram definidas. Isso está aqui com um tempo limite definido, caso contrário, não funcionará, então demorará um pouco e, em seguida, funcionará Ok, então esse é o componente de reação do chat, que é mais ou menos o mesmo. Eu removi parte do código, esse parâmetro talk to, por exemplo. Não precisamos mais disso porque temos apenas um bate-papo, então ele acabou, mas a maioria das mudanças está aqui no componente do servidor de bate-papo. Eu removi todos os diferentes prompts do sistema. Só temos um prompt do sistema agora. E temos, é claro, funções diferentes aqui. Além disso, temos, é claro, um prompt de sistema diferente aqui. E o prompt do sistema é seu útil assistente de vendas para uma loja online chamada Cloud Guitars, que vende e entrega guitarras que vende e entrega Responda apenas a perguntas relacionadas à loja online e às guitarras que a loja vende, use as funções fornecidas Isso é muito importante para obter mais informações sobre os produtos. Essas funções não produzem nenhum resultado. Diga ao cliente que sua loja ou que a loja não vende os itens. Ok, então esse é um prompt muito básico do sistema, e talvez precisemos otimizá-lo no futuro. Mas, por enquanto, meio que funcionou, não completamente como vimos, mas vamos dar uma olhada nas funções aqui. Portanto, encontramos um produto, e o LLM deve chamar essa função se precisar de mais informações sobre um produto ou modelo específico Então, se o cliente pedir uma guitarra específica com um nome, nome de modelo, talvez, então ele deve chamar isso. E temos um, essa é a descrição, e também temos parâmetros aqui, propriedades. E o que está aqui é o modelo do produto, e esse é o nome do produto ou do modelo, e o modelo de linguagem deve fornecer isso, e veremos isso mais tarde. E também temos uma segunda função, encontrar produtos por tipo, encontrar produtos por tipo, e as descrições buscam mais informações sobre um produto específico, como baixo elétrico Igitar, guitarras acústicas, guitarras acústicas, guitarras E os parâmetros aqui são o único parâmetro aqui do tipo corda, é claro, a descrição é que o tipo de produto a encontrado deve ser guitarra E, baixo, violão acústico, violão de concerto Portanto, isso é muito importante devido à limitação dos tipos que o modelo de linguagem fornecerá, e espero que ele se atenha a essas palavras aqui para que possamos encontrar nossos produtos posteriormente Então, talvez precisemos ajustar um pouco essas funções e descrições. Mas, por enquanto, isso bastará. E a implementação da função está nessa chamada de função handle, é claro, e é muito, muito simples agora. E, como você já pode ver, não está funcionando conforme o esperado. Eu tenho uma string de modelo aqui com todos os produtos separados por um feed de linha. Então eu tenho duas guitarras no momento, a E Nice EN 77 e a E Nice EN 66, e uma é de seis cordas e a outra de sete cordas O preço é diferente, e também as picapes são um pouco diferentes e a cor é diferente Então, apenas duas guitarras aqui. Para cada chamada de função, estou devolvendo apenas os produtos aqui, os dois produtos. E, claro, é por isso que o modelo de linguagem me disse que tem violões de 27 cordas Obviamente, isso está errado porque é violão de 17 e 16 cordas. Portanto, precisamos otimizar isso para que o modelo de linguagem responda corretamente. Mas, por enquanto, esse é o nosso ponto de partida aqui. E como eu disse, eu deletei coisas aqui e sim, mudei as funções, é claro. Mais ou menos, é o mesmo que em nossa aventura de bate-papo. Então, estamos começando com isso e depois otimizamos. Vamos ver. Na segunda rodada, talvez me dê apenas o violão de 17 cordas. Oi. Você tem um violão de sete cordas. Vamos ver. Sim, temos um violão de sete cordas disponível. E desta vez, na verdade, está voltando com a e única guitarra de sete cordas, a e9e e E também o descreve e apresenta dois captadores Humbuger, uma única bobina, e o preço e a cor Ok, então desta vez funcionou da última vez que não funcionou, então precisamos otimizá-lo um pouco. Mas vamos verificar isso no próximo vídeo. 29. Melhor pesquisa de produtos: Ok, agora precisamos melhorar nossa pesquisa de produtos. O LLM já está chamando nossas funções aqui, e precisamos extrair os parâmetros, os argumentos para a chamada da função e, em seguida, precisamos pesquisar o produto certo E para que isso funcione, ou mudamos nossos produtos de uma simples string para mapas, e esses mapas meio que emulam um banco de Então, aqui temos o principal índice de ID do produto para a descrição do produto. Temos mais dois índices com produtos do tipo dois. Portanto, o tipo de produto é a chave aqui e, como valor, temos o ID do produto, e aqui nomeia dois produtos, e a chave é o nome do produto e o valor, claro, novamente, o ID do produto. Como o usamos? Então, aqui temos nossa função de chamada de função handle, e ela está recebendo uma chamada de função do modelo de linguagem e também, é claro, o nome da função, para a qual já temos uma opção, e também os argumentos, que são arcos aqui, e os arcos vêm da análise adjacente dos argumentos de ponto de chamada de função Então, aqui temos uma string representando estrutura adjacente contendo os argumentos para essa chamada de função. Portanto, temos para a função localizar produto, temos um modelo de produto, e esse é o nome que fornecemos aqui em Propriedades do Modelo de Produto, e o LLM o usará, esperançosamente, assim Portanto, temos o nome do produto e, em seguida, os nomes dos produtos. O mapa, nós o usamos para obter o ID do produto e, com um ID do produto, obtemos a descrição do produto desses produtos do mapa. Então, usamos esse mapa para encontrar o ID do produto e, em seguida, com o ID do produto, usamos o mapa principal, nosso mapa principal de produtos para obter a descrição do produto. E é isso que retornamos ao modelo de linguagem aqui. Portanto, o produto DOT GET com um ID do produto, e essa será a descrição do produto encontrado. Ok, então se nenhum ID de produto for encontrado, retornaremos, não sei, esse produto ao modelo de linguagem, que talvez não seja o melhor para a segunda função aqui. Mas vamos ver. Produtos finos por tipo são quase iguais. Estamos recebendo a ID do produto de tipos para produtos. Este é o mapa aqui. Então, temos uma guitarra E e uma base E. Eu mudei um pouco os produtos. Então, agora temos uma guitarra elétrica de seis cordas e um baixo elétrico de quatro cordas. Portanto, temos dois tipos de guitarra E e EBs apontando para os dois produtos aqui, e estamos fazendo o mesmo apenas com esse mapa de produtos do tipo dois, obtendo a ID do produto a partir daí e, em seguida, obtendo a descrição do produto no mapa de produtos aqui e depois devolvendo-a Ok, então isso deve melhorar um pouco os resultados. Então, vamos dar uma olhada. Então, vamos pedir um produto específico. Você tem o, então vamos ver o que é EN? Vamos ver o que é? O EN 66 E Nie EN 66. Ok, então ele deve encontrá-lo. Sim, temos o EIS EN 66 disponível e, em seguida, ele descreve as características e também o preço. Ok, então isso está funcionando. E agora estou pedindo um tipo. Você tem um baixo elétrico e ele deve encontrar nossa base elétrica Sim, temos baixos elétricos disponíveis. Uma opção, a única opção que temos é o EIS ENB 44. É uma base elétrica de quatro cordas com dois captadores de hambúrguer e assim por diante A opção de cor é apenas uma é preta e o preço é 999 99 Ok, então funcionou. Muito bom. Então, vamos ver se pedimos um violão acústico Você tem som acústico, Chars? Sim, temos guitarras acústicas. Isso não é verdade. Então eu não sei. Talvez não tenha chamado nossa função aqui, eu acho. Então, vamos verificar o registro aqui. Você tem guitarras acústicas? Funcional: encontre produtos por tipo. OK. Não conheço esse produto. Ok, então talvez essa não seja uma boa resposta porque fornecemos “Eu não conheço esse produto” para o modelo de linguagem e o modelo de linguagem disse. Sim, temos guitarras acústicas disponíveis, então talvez não devêssemos devolver nada Vamos tentar isso ou nenhum produto foi encontrado. Talvez vamos tentar isso. E então perguntamos se você tem guitarras acústicas? Desculpe, mas parece que atualmente não temos uma guitarra acústica Ok, então funcionou. Isso funcionou muito melhor. Ok, então vamos tentar esse caso aqui. Não conheço esse produto, então estamos pedindo um produto que a loja não tem. Você tem o Ibanez que eu não conheço. Digamos que 4s4g, eu não sei, talvez magro. Não sei se essa guitarra existe, mas ela não deveria encontrá-la. Peço desculpas, mas parece que não temos o disponível Ok, então ambos funcionaram. Todos os casos funcionaram. A caixa do produto final com as duas caixas. Ok, o produto foi encontrado e o produto não foi encontrado. E também produtos finos por tipo. Se o produto for encontrado. Ok, então está funcionando, basicamente. Então isso é ótimo. Então, temos que adicionar um pouco mais de produtos, eu acho, para testá-los um pouco mais e talvez melhorá-los com mais chamadas de função. Então, vamos 30. Mais produtos: Ok, então aqui estamos com mais produtos. Eu adicionei mais uma guitarra e mais um baixo. Então, o violão é um violão de sete cordas, e o outro baixo é baixo elétrico de cinco cordas, cor vermelho coral, e o violão é azul meia-noite Então, na última vez que fizemos os produtos do tipo dois, tínhamos aqui apenas um ID e não um. E, claro, se tivermos mais de uma guitarra E e mais de uma base eletrônica, precisamos de uma matriz aqui. Então, eu mudei isso para uma matriz. O valor desse mapa agora é uma matriz e contém, é claro, os IDs dos produtos que têm o tipo, neste caso, guitarra E e, neste caso, base E. Ok, então precisamos mudar, é claro, o tratamento da chamada de função, encontrar produtos por tipo. Estamos recebendo as IDs do tipo de produto do mapa com um tipo de produto. Se tivermos os IDs, os mapeamos acordo com as descrições dos produtos. E se tivermos as descrições como uma matriz, farei uma redução aqui para convertê-la em uma string e, entre as descrições dos produtos, tenho essa nova linha aqui. Portanto, a redução apenas concatenará todos os elementos da matriz, toda a produção, todas as descrições do produto e, em seguida, colocará uma nova linha E isso é tudo que eu mudei aqui. Então, vamos experimentar. Estou perguntando quais guitarras elétricas você pode oferecer? E deve encontrar duas guitarras elétricas, 16 cordas e 17 cordas Atualmente, oferecemos a guitarra elétrica EIS EN 66 ou seis cordas, o que está correto. Também temos a guitarra elétrica EIeen 777 cordas, e o preço é bom e E isso está correto? En 66 tem cor azul? Acho que sim. Sim, cor azul, o ENB, 55 tinha vermelho coral Ok, sim, tudo está correto aqui. E vamos pedir as bases. Você tem uma base elétrica? Sim, temos baixos elétricos disponíveis. E também, aqui encontramos as duas bases E que oferecemos aqui em nossa loja. Também são características, sim. Então, tudo bem, coral, vermelho, cor, os preços, correto, tudo correto. Ok. Então isso foi fácil. Agora temos quatro produtos aqui, ainda não são muitos. Mas, ok, acho que para provar aqui que isso está funcionando, basta. E, claro, você pode ter um banco de dados. Talvez você já tenha um banco de dados e, é claro, também possa fazer consultas ao banco de Não faremos isso aqui. Nos vemos no próximo vídeo. 31. Vários parâmetros em chamadas de função: Ok, então neste vídeo, adicionaremos outro parâmetro à nossa chamada de função, neste caso, é a chamada de função find products by type, e adicionaremos uma faixa de preço como parâmetro. A primeira coisa que fiz foi criar um novo mapa da faixa de preços dos produtos. Portanto, temos nossos produtos classificados por faixa de preço aqui. Na faixa de preço baixo, temos apenas um com o produto um na faixa de preço médio, temos dois e três, e na faixa de preço alto, temos os quatro. E você pode conferir isso aqui. O preço alto é de 1599. O preço médio é de cerca de mil 300, e o baixo orçamento não é realmente baixo. Podemos diminuí-lo um pouco. Vamos fazer com que seja 600 ou 69999. OK. Obviamente, também adicionamos um novo parâmetro à nossa função. E aqui estão nossas funções, e aqui estão os produtos finos por tipo de função. Já temos o parâmetro do tipo de produto aqui e eu adicionei o parâmetro da faixa de preço. E o importante aqui é a descrição, é claro, a faixa em que o preço do produto cai deve ser de baixa, média e alta, e essas são as chaves do nosso mapa aqui. Então isso é importante. Essas três teclas aqui Ok, então temos aqui nosso manipulador de funções, que teve que ser alterado um pouco, e eu incluí a filtragem com uma faixa de preço Primeiro, obtemos a faixa de preço aqui a partir da faixa de preço arcs, args dot E então eu vou fazer um filtro aqui. Então, estou filtrando os produtos que não estão na faixa de preço, não estão na faixa de preço correta com essa faixa de preço para o mapa de produtos Estou recebendo aqui os produtos dessa faixa de preço aqui. Isso é uma matriz e, em seguida, farei inclusões com o ID. E se o ID for incluído, ele estará na matriz retornada da função de filtro e , em seguida, estamos fazendo o mapa aqui e isso está sendo salvo nos produtos encontrados. E se os produtos encontrados tiverem comprimento zero, nenhum produto foi encontrado, então definimos o texto, nenhum produto foi encontrado aqui. E se for maior que zero, então juntamos aqui, não reduzimos mais aqui. Os produtos encontrados se juntam à nova linha, que é muito mais fácil do que a redução que eu tinha antes aqui. Então, este é o nosso novo manipulador de funções aqui com um novo argumento, faixa de preço e ok, estou recarregando aqui e perguntando, você tem uma guitarra E de baixo orçamento, e isso deve devolver nossa 69999 E Essa é a correta. Vamos verificar se há uma base E de baixo orçamento. Você tem uma base E de baixo orçamento e isso não deve gerar resultados. Peço desculpas, mas parece que atualmente não temos uma base E de baixo orçamento, e isso é verdade porque nossas bases E começam na faixa intermediária e, vamos ver, temos apenas bases E de médio alcance OK. Portanto, não há guitarra na faixa de preço médio. Vamos verificar isso. Você tem alguma guitarra eletrônica de preço médio, e ela também não produz nenhum resultado Eu peço desculpas. É isso mesmo. Você tem uma guitarra eletrônica cara e isso deve nos dar nossa guitarra muito cara aqui. Sim, as sete cordas 1599. Esta é a nossa guitarra mais cara aqui. Então, tudo está correto aqui. E temos nosso segundo parâmetro de filtro aqui, a faixa de preço. E, claro, você pode adicionar mais parâmetros de filtro aqui, como talvez um número de captadores, algo assim, número de sequências de caracteres, é claro, e assim por diante Ok, veja o próximo vídeo. 32. Faixa de preço de fixação não definida: Neste vídeo, temos que corrigir um bug que não notamos da última vez. Então é assim que podemos provocar o bug. Temos que perguntar, você tem um violão de sete cordas, por exemplo? E então o problema aqui é que obtemos esse erro pode ler propriedades de inclusões de leitura indefinidas Então, vamos verificar o motivo desse bug. Então, isso inclui aqui, e isso significa que a faixa de preço dos produtos para obter a faixa de preço está retornando indefinida Portanto, não podemos chamar inclusões de indefinidas, é claro. Ok, qual é o problema aqui? O problema é que a faixa de preço, como podemos ver aqui, a faixa de preço é indefinida. Por que é indefinido Porque o usuário não especificou nenhuma faixa de preço. Ele acabou de pedir um violão de sete cordas sem informações sobre a faixa de preço. Portanto, o modelo de linguagem não fornecia uma faixa de preço aqui. Então, temos que lidar com isso. E, claro, precisamos primeiro verificar se uma faixa de preço foi realmente enviada aqui a partir do modelo de linguagem. Como podemos fazer isso? Primeiro, temos que verificar a faixa de preço. Se a faixa de preço for indefinida, isso será verdade faixa de preço é igual a indefinida, então não é filtrada, ou temos uma faixa de preço para que os produtos obtenham a faixa de preço que inclui ID, mas isso aqui também pode retornar É por isso que temos que colocar um ponto de interrogação aqui, e então isso é indefinido e as inclusões não serão chamadas Obviamente, isso será completamente filtrado. Portanto, nenhum produto será encontrado então. Ok, e neste caso, todos os produtos encontrados na matriz de resultados serão transmitidos para o mapa aqui Ok, então vamos verificar se isso ajuda. Fizemos a mesma pergunta. Você tem um violão de sete cordas? Sim, temos esse tempo, sem exceção, e está tudo bem. E podemos verificar também se a faixa de preço do servidor é realmente indefinida Portanto, neste caso, faixa de preço é indefinida e, em seguida, filtrar esse retorno de chamada aqui sempre retorna verdadeiro aqui, e todos os produtos encontrados vão para o mapa e, em seguida, essa string é construída a partir dos produtos Nesse caso, há apenas um produto, que é um violão de sete cordas, e o modelo de linguagem está nos dizendo o correto, temos o E Nice EN 77. O preço é de 1.599 e vem com Okay, então está tudo bem Corrigimos o bug e nos vemos no próximo vídeo. 33. Adicione produto ao carrinho de compras: Bem-vindo a este vídeo, e aqui queremos tentar dar ao LLM a possibilidade de adicionar um produto ao carrinho de compras, para que não implementemos um carrinho que não implementemos de compras, mas implementamos, como uma chamada de função que está apenas fazendo um registro do console e, em seguida, nessa chamada de função, informando ao LLM que o produto foi adicionado ao carrinho como uma chamada de função que está apenas fazendo um registro do console e, em seguida, nessa chamada de função, informando ao LLM que de compras E é isso. E se você quiser realmente implementar um carrinho de compras, precisará fazer essa parte sozinho. Aqui, tentamos fornecer uma função ao LLM para que, quando o cliente solicitar a colocação do produto no carrinho de compras , o LLM o reconheça e chame a Ok, então eu já implementei, adicionei uma nova função aqui e, claro, essa função é chamada de cartão Adicionar produto dois, e a descrição adiciona o produto com uma ID especificada ao cartão do cliente. E como parâmetro, tenho o nome do produto e o nome do produto. É o nome do produto que deve ser adicionado ao cartão, é claro. E eu também tive que estender um pouco o prompt do sistema. Então, aqui esta última frase é nova, ou as duas últimas frases são novas. Se o cliente quiser comprar um produto, adicione-o ao cartão. E eu também poderia adicionar aqui por meio da chamada de função no produto ao cartão para ser mais específico sobre isso. E então eu tive que acrescentar que você não precisa pedir informações de login ou pagamento porque, enquanto eu tentava, ele continuava solicitando informações da conta de login, informações de pagamento e outras coisas. Então eu adicionei esta frase, a última para evitar isso. Ok, então é isso para a descrição da função. E aqui temos o funções, manipulador de chamadas de funções, adicionamos produto ao cartão e obtemos o nome do produto a partir dos argumentos e, e obtemos o nome do produto a partir em seguida, apenas registramos o console E então o conteúdo, a resposta ao modelo de linguagem será o produto adicionado ao cartão e pronto. E vamos tentar. Ok, então eu estou pedindo especificamente por um modelo. Você tem o E Nye EN 77? Vamos ver se ele o encontra. Sim, nós temos. Está bem? Parece ser a pessoa certa. E agora estou pedindo que ele o adicione ao carrinho de compras. Você pode adicionar isso ao meu cartão de compras? E vamos ver se isso realmente funciona. Eu adicionei o E nice E e 77 ao seu cartão de compras. Há mais alguma coisa em que eu possa ajudá-lo? Então isso parece ter funcionado aqui. Vamos verificar o registro do console aqui, adicionar o produto ao cartão E nice EN 77. Então isso funcionou muito bem. Portanto, se você programar um carrinho de compras aqui, poderá chamar o cartão de adição ao cartão de compras aqui, o verdadeiro, não o registro do console aqui. E você pode, é claro, salvá-lo em um banco de dados. Então, faça com que o usuário realmente bloqueie uma conta para poder fazer o checkout e esse tipo de coisa. Mas esse é o tipo de preparação aqui, mas também quero mostrar um problema aqui que ainda não resolvemos. Então, se estamos pedindo um determinado modelo, você tem apenas o EN 77. Então, estou omitindo os EIs aqui. Você tem a EN 77? Me desculpe Não temos a EN 77, então ela não a reconhece, porque qual é o problema aqui? O problema é que temos os nomes dos mapas para o produto, por exemplo, temos apenas essas chaves aqui e, se elas não se encaixarem 100%, se tivermos apenas parte delas, ou talvez as tenhamos escrito de forma um pouco diferente. Você tem o Eye EN 77, sem um espaço em branco aqui, sem um espaço, acho que ele não o encontrará. Eu peço desculpas. Mas se eu perguntar, você tem o E Nie EN 77, espero que ele encontre Sim, ele o encontra. Ok. Mas agora, você tem a EN 77? Vamos perguntar de novo. Sim, e agora ele o encontra. Por quê? Porque na história do chat, isso está incluído aqui, então ele sabe que a EN 77 é isso aqui, e é por isso que ele sabe disso aqui, mas não antes. E o problema aqui é que nossa pesquisa é apenas a busca exata aqui no E Nice EN 77. Então, vamos ver se podemos mitigar isso de alguma forma no próximo vídeo Veja 34. Pesquisa de produtos difusos: Ok, então a última vez que tivemos o problema de que se o cliente solicitar um nome de produto, que não é exatamente o nome que temos em nosso banco de dados, como temos em nosso mapa, ele não o encontrará e, em seguida, assumirá que esse produto não está disponível. Então, se pedirmos, por exemplo, a EN 77, vamos ver a EN 77, por exemplo , ela não a encontrará porque não está em nosso mapa. Temos esse mapa de nomes para produtos. Aqui temos os nomes exatos. Nosso manipulador de funções está procurando a chave exata e, nesse caso, ela é encontrada, está retornando a ID do produto, mas se, por exemplo, os clientes solicitarem apenas informações sobre os produtos E e 77 , isso não será encontrado aqui neste mapa Então, o que fazemos sobre isso? Estamos alterando a descrição da função de encontrar produto aqui e eu a ampliei um pouco com mais informações sobre o que deve acontecer se o produto não for encontrado com o nome exato. Então, aqui temos a versão anterior, busca mais informações sobre um produto ou modelo específico, mas agora mais informações sobre e se o produto não for encontrado com o nome exato Se o produto não for encontrado com o nome exato, essa função retornará todos os nomes de produtos disponíveis. Portanto, retornaremos todas as chaves que temos neste mapa e todos os nomes de produtos que são os nomes de produtos corretos. O assistente deve então escolher o nome mais próximo daquele solicitado pelo cliente e perguntar ao cliente se esse é o produto correto. Então deveria dizer: Ok, então temos este, você gostaria que eu lhe desse mais informações, algo assim? Hum, se o cliente então pedir mais informações sobre o produto, o assistente deve chamar essa função novamente com o nome correto do produto. Portanto, na segunda vez que essa função for chamada, ela deverá escolher o modelo exato do produto correto , o nome do produto aqui. OK. Então, eu também alterei a descrição aqui do parâmetro, modelo do produto, nome do produto, nome do modelo a ser encontrado. E se não corresponder exatamente, a função retornará todos os nomes dos produtos, então o LLM pode escolher um similar ou talvez eu deva dizer que o assistente pode escolher um similar Talvez isso seja um pouco melhor. E então vamos ao nosso manipulador de funções aqui. Então, caso o ID do produto seja encontrado em nosso mapa, está tudo bem, e retornamos a descrição do produto aqui, caso contrário, é diferente de antes, antes do conteúdo apenas um produto não encontrado, algo assim. E agora são todas as chaves nos nomes do mapa de dois produtos unidas a uma nova linha. Portanto, em cada linha, haverá o nome exato do produto. E então o LLM deve escolher um que esteja mais próximo daquele solicitado pelo cliente e, em seguida, chamar essa função novamente. E então essa função encontrará as informações corretas do produto aqui e as retornará aqui. Então, isso é em teoria, então vamos experimentar. Você tem a EN 77? Então, sem um espaço em branco e sem o nome do fabricante, vamos ver, sem um ponto de interrogação. Sim, temos o E Nie EN 77, e ele realmente diz aqui o nome correto E Nie EN 77. Essa é a string que temos como chave em nosso mapa. Então, isso deve ficar bem. Disponível para compra, você gostaria adicioná-lo ao seu cartão. Não, por favor. Primeiro, me dê mais informações sobre essa guitarra. Vamos ver. E desta vez, ele realmente deve encontrar as informações do produto. The Nice é uma guitarra elétrica de sete cordas. Correto. Apresenta uma cor azul meia-noite É um hambúrguer e dois captadores de bobina única. Isso está correto. Essas são as informações que temos em nosso mapa de produtos. O preço do violão também está correto. Há mais alguma coisa que você gostaria de saber sobre essa guitarra? Não, por favor, adicione-o ao meu carrinho de compras. Vamos ver se isso também está funcionando. Eu adicionei a guitarra EN 77 ao seu carrinho de compras. Ok, então é isso. Parece funcionar. Também podemos verificar o registro aqui. Mas acho que isso funcionou conforme planejado. Parece que, por favor, primeiro me dê mais informações, encontre o produto. E desta vez, ele obtém as informações do produto aqui. Ok, e por favor, adicione-o ao meu carrinho de compras. Função adicionar produto ao cartão. O produto foi adicionado ao cartão. Ok, maravilhoso. Isso é o que estávamos procurando. Delegamos a pesquisa ao modelo de linguagem. Mas é claro que pode ser um problema se essa lista de chaves aqui for um pouco maior do que aqui. Temos apenas quatro produtos, então são apenas quatro nomes de produtos aqui. E se você tiver milhares de produtos , isso pode ser um problema devido ao comprimento às restrições do token aqui. Mas se você tem uma loja normal como essa loja de guitarras, talvez você tenha 100 ou algo assim, e tudo bem. Talvez se os nomes dos produtos forem um pouco maiores do que esses aqui, talvez isso possa ser um problema, mas normalmente, você tem um limite de tokens de, digamos, GPT 35, temos um limite de tokens de 4.096 tokens ou você também pode ter o modelo de 60 K, que é um pouco mais caro, mas tem 16.384 Portanto, isso deve ser suficiente até mesmo para muitos nomes de produtos aqui. Ok, então também há uma maneira diferente de lidar com isso. Poderíamos usar incorporações, mas não faremos isso. Aqui, neste momento, está tudo bem para nós. Não temos muitos produtos, e listar todos os nomes de produtos aqui é prático e funcionou, e o LLM pode escolher o que está mais próximo e perguntar ao cliente se esse é o correto, e então o cliente pode solicitar mais informações Ok, isso é tudo para este vídeo. Nos vemos na próxima. 35. Resumo: Ao finalizar este curso, vamos dar uma olhada em nossas conquistas Criamos três aplicativos que aproveitam o poder da API Open AI e do LLM para linguagem natural e conversas orientadas por IA Portanto, a primeira aplicação foi um clone do HachBT, HatchBT de uma forma muito simplificada O segredo era gerenciar o histórico de bate-papo e fornecer o histórico de bate-papo ao LLM para obter respostas Em seguida, construímos um jogo de aventura baseado em texto ou o início de um jogo de aventura baseado em texto com, eu acho, duas missões mas tem três NPCs com os quais você pode conversar de uma forma muito natural E criamos avisos de sistema personalizados para cada personagem e usamos chamadas de função para rastrear as missões e concluí-las O último aplicativo estava simulando um assistente de vendas para uma loja online de guitarras Os usuários podem conversar com o assistente, perguntando sobre produtos e até mesmo orientando-o a encher o carrinho de compras com os E graças ao Open AI LLM, parece um verdadeiro bate-papo com um vendedor Por meio desses aplicativos, aprendemos a usar a API Open AI em JavaScript e usamos o Astrojs para o back-end servidor e o react para o front-end Aprendemos a usar a API de conclusão de bate-papo do OpenAI. Aprendemos como criar instruções de sistema para dar ao LLM um contexto para entender a um contexto para entender situação e as informações básicas, e aproveitamos as chamadas de função, por exemplo, para nosso jogo, para ações no jogo, como o rastreamento de missões, e também para a recuperação de dados. Para nossas vendas, nossa jornada apenas revelou o que é possível. A API oferece muito mais, como incorporações para análise profunda e também criação de imagens, querida, e talvez você já saiba isso é como meio de uma jornada da Open AI E também há uma API de fala para texto chamada sussurro. Então, o que aprendemos é, de certa forma, apenas o começo do potencial da API Open AI. Então, vamos dar a Chachi Bitty as palavras finais desse curso Resumindo, lembre-se de que nossa jornada com a API OpenAI está apenas começando As habilidades que você adquiriu abrem portas para o mundo da criatividade impulsionada pela IA. Seja criando interações, criando aventuras imersivas ou refinando as experiências do usuário, sua experiência tem o poder de moldar o Mantenha-se curioso, mantenha-se inspirado e continue ultrapassando limites Sua jornada está cheia de potencial. Obrigado por fazer parte dessa experiência. Boa sorte em todos os seus empreendimentos futuros.