Introdução ao exemplo de bate-papo corporativo JavaScript usando RAG

Este artigo mostra como implantar e executar o exemplo de aplicativo de bate-papo corporativo para JavaScript. Este exemplo implementa um aplicativo de bate-papo em JavaScript, Serviço OpenAI do Azure e Geração Aumentada de Recuperação (RAG) na Pesquisa de IA do Azure para obter respostas sobre propriedades alugadas. O aplicativo de bate-papo de propriedades de aluguel é semeado com dados de arquivos de marcação (*.md), incluindo uma política de privacidade, termos de serviço e suporte.

• Demo JavaScript - vídeo fullstack
• Demo JavaScript - frontend com vídeo de back-end Python

Comece agora

Seguindo as instruções neste artigo, você vai:

• Implantar um aplicativo de chat no Azure.
• Obtenha respostas sobre informações do site de propriedades de aluguel.
• Altere as configurações para alterar o comportamento das respostas.

Depois de concluir este artigo, você pode começar a modificar o novo projeto com seu código e dados personalizados.

Este artigo faz parte de uma coleção de artigos que mostram como criar um aplicativo de bate-papo usando o Serviço OpenAI do Azure e a Pesquisa de IA do Azure. Outros artigos na coleção incluem:

• .NET
• Java
• Python

Visão geral da arquitetura

Uma arquitetura simples do aplicativo de chat é mostrada no diagrama a seguir:

O aplicativo de exemplo de bate-papo foi criado para uma empresa fictícia chamada Contoso Real Estate, e a experiência de bate-papo inteligente permite que seus clientes façam perguntas de suporte sobre o uso de seus produtos. Os dados de exemplo incluem um conjunto de documentos que descrevem seus termos de serviço, política de privacidade e um guia de suporte. Os documentos são inseridos na arquitetura durante a implantação

A aplicação é feita a partir de vários componentes, incluindo:

• Serviço de pesquisa: o serviço de back-end que fornece os recursos de pesquisa e recuperação.
• Serviço de indexador: o serviço que indexa os dados e cria os índices de pesquisa.
• Aplicativo Web: o aplicativo Web front-end que fornece a interface do usuário e orquestra a interação entre o usuário e os serviços de back-end.

Custo

A maioria dos recursos nessa arquitetura usa um tipo de preço básico ou de consumo. O preço de consumo é baseado no uso, o que significa que você paga apenas pelo que usa. Para concluir este artigo, haverá uma cobrança, mas será mínima. Quando terminar o artigo, você poderá excluir os recursos para parar de incorrer em cobranças.

Saiba mais sobre o custo no repositório de amostra.

Pré-requisitos

Um ambiente de contêiner de desenvolvimento está disponível com todas as dependências necessárias para concluir este artigo. Você pode executar o contêiner de desenvolvimento em Codespaces do GitHub (em um navegador) ou localmente usando o Visual Studio Code.

Para usar este artigo, você precisa dos seguintes pré-requisitos:

Codespaces (recomendado)

1. Uma assinatura do Azure – crie uma gratuitamente
2. Permissões de conta do Azure – sua conta do Azure deve ter permissões Microsoft.Authorization/roleAssignments/write, como Administrador de Acesso do Usuário ou Proprietário.
3. Acesso permitido ao OpenAI do Azure na assinatura do Azure desejada. No momento, o acesso a esse serviço é permitido somente por aplicativo. Você pode solicitar acesso ao Serviço OpenAI do Azure preenchendo o formulário em https://aka.ms/oai/access. Abra um problema neste repositório para entrar em contato conosco se você tiver algum problema.
4. GitHub

Visual Studio Code

1. Uma assinatura do Azure – crie uma gratuitamente
2. Permissões de conta do Azure – sua conta do Azure deve ter permissões Microsoft.Authorization/roleAssignments/write, como Administrador de Acesso do Usuário ou Proprietário.
3. Acesso permitido ao OpenAI do Azure na assinatura do Azure desejada. No momento, o acesso a esse serviço é permitido somente por aplicativo. Você pode solicitar acesso ao Serviço OpenAI do Azure preenchendo o formulário em https://aka.ms/oai/access. Abra um problema neste repositório para entrar em contato conosco se você tiver algum problema.
4. CLI do Desenvolvedor do Azure
5. Área de Trabalho do Docker – iniciar o Docker Desktop se ele ainda não estiver em execução
6. Visual Studio Code
7. Extensão de contêiner de desenvolvimento

Abrir o ambiente de desenvolvimento

Comece agora com um ambiente de desenvolvimento que tenha todas as dependências instaladas para concluir este artigo.

Codespaces do GitHub (recomendado)

O GitHub Codespaces executa um contêiner de desenvolvimento gerenciado pelo GitHub com o Visual Studio Code para Web como interface do usuário. Para o ambiente de desenvolvimento mais simples, use os Codespaces do GitHub para que você tenha as ferramentas e dependências de desenvolvedor corretas pré-instaladas para concluir este artigo.

Importante

Todas as contas do GitHub podem usar Codespaces por até 60 horas gratuitas por mês com 2 instâncias principais. Para saber mais, confira Armazenamento e horas por núcleo incluídos mensalmente no GitHub Codespaces.

1. Inicie o processo para criar um GitHub Codespace no branch main do repositório GitHub Azure-Samples/azure-search-openai-javascript.

2. Clique com o botão direito do mouse no botão a seguir e selecione Abrir link em novas janelas para ter o ambiente de desenvolvimento e a documentação disponíveis ao mesmo tempo.

   Abra este projeto no Codespaces do GitHub

3. Na página Criar codespace , analise as definições de configuração do codespace e selecione Criar novo codespace

   

4. Aguarde até que o codespace seja iniciado. Esse processo de inicialização pode levar alguns minutos.

5. No terminal na parte inferior da tela, entre no Azure com o Azure Developer CLI.

   azd auth login
   

6. Copie o código do terminal e cole-o em um navegador. Siga as instruções para autenticar com sua conta do Azure.

7. As tarefas restantes neste artigo ocorrem no contexto desse contêiner de desenvolvimento.

Visual Studio Code

A extensão Dev Containers para Visual Studio Code requer que o Docker seja instalado no computador local. A extensão hospeda o contêiner de desenvolvimento localmente usando o host do Docker com as ferramentas e dependências de desenvolvedor corretas pré-instaladas para concluir este artigo.

1. Abra o Visual Studio Code no contexto de um diretório vazio.

2. Verifique se a extensão Dev Containers está instalada no Visual Studio Code.

3. Abrir um novo terminal no editor.

   Dica

   Você pode usar o menu principal para navegar até a opção de menu Terminal e, em seguida, selecionar a opção Novo Terminal.

   

4. Entre no Azure com o Azure Developer CLI.

   azd auth login
   

   Copie o código do terminal e cole-o em um navegador. Siga as instruções para autenticar com sua conta do Azure.

5. Crie uma pasta e inicialize-a para usar o projeto de exemplo com o Azure Developer CLI:

   azd init -t azure-search-openai-javascript
   

   Você não precisa clonar esse repositório.

6. Abra a Paleta de comandos, procure os comandos Dev Containers e selecione Dev Containers: reabrir no contêiner.

   Dica

   O Visual Studio Code pode solicitar automaticamente que você reabra a pasta existente em um contêiner de desenvolvimento. Essa funcionalidade equivale a usar a paleta de comandos para reabrir o espaço de trabalho atual em um contêiner.

7. Reabra a janela do Terminal novamente (Ctrl + `) e deixe-a aberta.

8. Os exercícios restantes neste projeto ocorrem no contexto desse contêiner de desenvolvimento.

Implantar e executar

O repositório de exemplo contém todos os arquivos de código e configuração necessários para implantar um aplicativo de chat no Azure. As etapas a seguir explicam o processo de implantação do exemplo no Azure.

Implantar aplicativo de chat no Azure

Importante

Os recursos do Azure criados nesta seção geram custos imediatos, principalmente do recurso de Pesquisa de IA do Azure. Esses recursos podem acumular custos mesmo se você interromper o comando antes que ele seja totalmente executado.

1. Execute o seguinte comando do Azure Developer CLI para provisionar os recursos do Azure e implantar o código-fonte:

   azd up
   

2. Quando for solicitado que você insira um nome de ambiente, mantenha-o curto e minúsculo. Por exemplo, myenv. Ele é usado como parte do nome do grupo de recursos.

3. Quando solicitado, selecione uma assinatura para criar os recursos.

4. Quando for solicitado que você selecione um local na primeira vez, selecione um local próximo a você. Esse local é usado para a maioria dos recursos, incluindo hospedagem.

5. Se for solicitado que você solicite um local para o modelo OpenAI, selecione um local próximo a você. Se o mesmo local estiver disponível como seu primeiro local, selecione-o.

6. Aguarde até que o aplicativo seja implantado. Pode levar de 5 a 10 minutos para que a implantação seja concluída.

7. Depois que o aplicativo tiver sido implantado com êxito, você verá uma URL exibida no terminal.

8. Selecione essa URL rotulada Deploying service web para abrir o aplicativo de chat em um navegador.

   

Use o aplicativo de bate-papo para obter respostas de arquivos de marcação

O aplicativo de bate-papo é pré-carregado com informações de aluguel de um catálogo de arquivos de remarcação. Você pode usar o aplicativo de bate-papo para fazer perguntas sobre o processo de aluguel. As etapas a seguir explicam o processo de uso do aplicativo de chat.

1. No navegador, selecione ou insira Qual é a política de reembolso na caixa de texto na parte inferior da página.

   

2. Na resposta, selecione Mostrar processo de pensamento.

   

3. No painel direito, use as guias para entender como a resposta foi gerada.

   Tabulação	Descrição
   Processo de pensamento	Esse é um script das interações no chat. Você pode exibir o prompt do sistema (content) e a pergunta do usuário (content).
   Conteúdo de suporte	Isso inclui as informações para responder à sua pergunta e ao material de origem. O número de citações de material de origem é observado nas Configurações do Desenvolvedor. O valor padrão é 3.
   Citação	Isso exibe a página original que contém a citação.

4. Quando terminar, selecione o botão ocultar indicado com um X acima das guias.

Usar as configurações do aplicativo de chat para alterar o comportamento das respostas

A inteligência do aplicativo de bate-papo é determinada pelo modelo OpenAI e pelas configurações que são usadas para interagir com o modelo.

Configuração	Descrição
Substituir modelo de prompt	Esse é o prompt usado para gerar a resposta.
Recuperar muitos resultados da pesquisa	Esse é o número de resultados da pesquisa que são usados para gerar a resposta. Você pode ver essas fontes retornadas nas guias Processo de pensamento e Conteúdo de suporte da citação.
Excluir categoria	Essa é a categoria de documentos que são excluídos dos resultados da pesquisa.
Usar o classificador semântico para recuperação	Esse é um recurso da Pesquisa de IA do Azure que usa o aprendizado de máquina para melhorar a relevância dos resultados da pesquisa.
Usar resumos contextuais de consulta em vez de documentos inteiros	Quando ambos Use semantic ranker e Use query-contextual summaries são verificados, o LLM usa legendas extraídas de passagens-chave, em vez de todas as passagens, nos documentos mais bem classificados.
Sugerir perguntas de acompanhamento	Faça com que o aplicativo de chat sugira perguntas de acompanhamento com base na resposta.
Modo de recuperação	Vetores + Texto significa que os resultados da pesquisa são baseados no texto dos documentos e nas inserções dos documentos. Vetores significa que os resultados da pesquisa são baseados nas inserções dos documentos. Texto significa que os resultados da pesquisa são baseados no texto dos documentos.
Transmitir respostas de conclusão de bate-papo	Transmita a resposta em vez de aguardar até que a resposta completa esteja disponível para uma resposta.

As etapas a seguir explicam o processo de alteração das configurações.

1. No navegador, selecione a guia Configurações do desenvolvedor.

2. Marque a caixa de seleção Usar resumos contextuais de consulta em vez de e faça a mesma pergunta novamente.

   What happens if the rental doesn't fit the description?
   

   O chat retornou com uma resposta mais concisa, como a seguinte.

Limpar os recursos

Limpar recursos do Azure

Os recursos do Azure criados neste artigo são cobrados para sua assinatura do Azure. Se você não espera precisar desses recursos no futuro, exclua-os para evitar incorrer em mais encargos.

Execute o seguinte comando do Azure Developer CLI para excluir os recursos do Azure e remover o código-fonte:

azd down --purge

Limpar GitHub Codespaces

Codespaces do GitHub

A exclusão do ambiente GitHub Codespaces garante que você possa maximizar a quantidade de horas gratuitas por núcleo que você tem direito na sua conta.

Importante

Para saber mais sobre os direitos da sua conta do GitHub, confira O GitHub Codespaces inclui mensalmente armazenamento e horas de núcleo.

1. Entre no painel do GitHub Codespaces (https://github.com/codespaces).

2. Localize os codespaces atualmente em execução provenientes do repositório GitHub Azure-Samples/azure-search-openai-javascript.

   

3. Abra o menu de contexto do codespace e selecione Excluir.

   

Visual Studio Code

Você não precisa necessariamente limpar seu ambiente local, mas pode interromper o contêiner de desenvolvimento em execução e retornar à execução do Visual Studio Code no contexto de um espaço de trabalho local.

1. Abra a Paleta de Comandos, procure os comandos Contêineres de Desenvolvimento e selecione Contêineres de Desenvolvimento: Reabrir Pasta Localmente.

   

Dica

O Visual Studio Code interromperá o contêiner de desenvolvimento em execução, mas o contêiner ainda existirá no Docker em um estado interrompido. Você sempre tem a opção de excluir a instância de contêiner, a imagem de contêiner e os volumes do Docker para liberar mais espaço no computador local.

Obter ajuda

Este repositório de exemplo oferece informações de solução de problemas.

Se o problema não for resolvido, registre o problema nos Problemas do repositório.

Próximas etapas

• Repositório GitHub do aplicativo de chat empresarial
• Criar um aplicativo de chat com a arquitetura de solução de práticas recomendadas do Azure OpenAI
• Controle de acesso em aplicativos de IA generativos com a Pesquisa de IA do Azure
• Criar uma solução OpenAI pronta para empresas com o Gerenciamento de API do Azure
• Superando a busca em vetores com recursos de recuperação e classificação híbridas