Introdução ao exemplo de chat empresarial JavaScript usando o RAG

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

• JavaScript de demonstração - vídeo fullstack
• JavaScript de demonstração - frontend com vídeo de backend Python

Comece agora

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

• Implante um aplicativo de chat no Azure.
• Obtenha respostas sobre as 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 chat usando o Serviço OpenAI do Azure e a Pesquisa do Azure AI. Outros artigos da coleção incluem:

• .NET
• Java
• Python

Descrição geral da arquitetura

Uma arquitetura simples do aplicativo de bate-papo é 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 ingeridos 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 indexação: o serviço que indexa os dados e cria os índices de pesquisa.
• Aplicativo Web: o aplicativo Web frontend 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 nível 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 completar este artigo, haverá uma cobrança, mas será mínima. Quando terminar o artigo, você pode 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 no GitHub Codespaces (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 da conta do Azure - Sua Conta do Azure deve ter permissões Microsoft.Authorization/roleAssignments/write, como Administrador de Acesso de Usuário ou Proprietário.
3. Acesso concedido ao Azure OpenAI na assinatura desejada do Azure. Atualmente, o acesso a este serviço é concedido apenas por aplicação. Você pode solicitar acesso ao Azure OpenAI preenchendo o formulário em https://aka.ms/oai/access. Abra um problema neste repositório para entrar em contato conosco se tiver um problema.
4. Conta do GitHub

Visual Studio Code

1. Uma assinatura do Azure - Crie uma gratuitamente
2. Permissões da conta do Azure - Sua Conta do Azure deve ter permissões Microsoft.Authorization/roleAssignments/write, como Administrador de Acesso de Usuário ou Proprietário.
3. Acesso concedido ao Azure OpenAI na assinatura desejada do Azure. Atualmente, o acesso a este serviço é concedido apenas por aplicação. Você pode solicitar acesso ao Azure OpenAI preenchendo o formulário em https://aka.ms/oai/access. Abra um problema neste repositório para entrar em contato conosco se tiver um problema.
4. CLI do desenvolvedor do Azure
5. Docker Desktop - inicie o Docker Desktop se ainda não estiver em execução
6. Visual Studio Code
7. Extensão de contêiner de desenvolvimento

Ambiente de desenvolvimento aberto

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 for the Web como interface do usuário. Para o ambiente de desenvolvimento mais simples, use o GitHub Codespaces para que você tenha as ferramentas de desenvolvedor corretas e as dependências pré-instaladas para concluir este artigo.

Importante

Todas as contas do GitHub podem usar o Codespaces por até 60 horas gratuitas por mês com 2 instâncias principais. Para obter mais informações, consulte GitHub Codespaces mensalmente incluído armazenamento e horas principais.

1. Inicie o processo para criar um novo espaço de código GitHub na main ramificação do Azure-Samples/azure-search-openai-javascript repositório GitHub.

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 GitHub Codespaces

3. Na página Criar espaço de código, revise as definições de configuração do espaço de código e selecione Criar novo espaço de código

   

4. Aguarde até que o espaço de código inicie. Este processo de arranque pode demorar alguns minutos.

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

   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 em sua máquina local. A extensão hospeda o contêiner de desenvolvimento localmente usando o host Docker com as ferramentas de desenvolvedor corretas e dependências pré-instaladas para concluir este artigo.

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

2. Verifique se você tem a extensão Dev Containers instalada no Visual Studio Code.

3. Abra um novo terminal no editor.

   Gorjeta

   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 a CLI do Desenvolvedor do Azure.

   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 a CLI do Azure Developer:

   azd init -t azure-search-openai-javascript
   

   Não é necessário clonar este repositório.

6. Abra a Paleta de comandos, procure os comandos Dev Containers e selecione Dev Containers: Reopen in Container.

   Gorjeta

   Visual Studio Code pode solicitar automaticamente que você reabra a pasta existente dentro de um contêiner de desenvolvimento. Isso é funcionalmente equivalente 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 restantes exercícios deste projeto decorrem no contexto deste contentor 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 orientam você pelo processo de implantação do exemplo no Azure.

Implantar o aplicativo de chat no Azure

Importante

Os recursos do Azure criados nesta seção incorrem em custos imediatos, principalmente do recurso Azure AI Search. Esses recursos podem acumular custos mesmo se você interromper o comando antes que ele seja totalmente executado.

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

   azd up
   

2. Quando lhe for pedido para introduzir 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 lhe for pedido para selecionar uma localização pela primeira vez, selecione uma localização perto de si. Este local é usado para a maioria dos recursos, incluindo hospedagem.

5. Se for solicitado 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 isso.

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 for implantado com êxito, você verá uma URL exibida no terminal.

8. Selecione esse URL rotulado Deploying service web para abrir o aplicativo de bate-papo 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 marcação. Você pode usar o aplicativo de bate-papo para fazer perguntas sobre o processo de aluguel. As etapas a seguir orientam você pelo processo de uso do aplicativo de bate-papo.

1. No navegador, selecione ou digite 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.

   Separador	Description
   Processo de pensamento	Este é um script das interações no chat. Você pode visualizar o prompt do sistema (content) e sua pergunta de usuário (content).
   Conteúdo de suporte	Isso inclui as informações para responder à sua pergunta e o material de origem. O número de citações de material de origem é anotado 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 bate-papo para alterar o comportamento das respostas

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

Definição	Descrição
Substituir modelo de prompt	Este é o prompt que é usado para gerar a resposta.
Recuperar esses muitos resultados de pesquisa	Este é o número de resultados de 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	Esta é a categoria de documentos excluídos dos resultados da pesquisa.
Usar classificador semântico para recuperação	Este é um recurso do Azure AI Search que usa aprendizado de máquina para melhorar a relevância dos resultados da pesquisa.
Use resumos contextuais de consulta em vez de documentos inteiros	Quando ambos Use semantic ranker são Use query-contextual summaries verificados, o LLM usa legendas extraídas de passagens chave, em vez de todas as passagens, nos documentos mais bem classificados.
Sugira perguntas de acompanhamento	Peça ao aplicativo de bate-papo que 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 incorporações dos documentos. Vetores significa que os resultados da pesquisa são baseados nas incorporações dos documentos. Texto significa que os resultados da pesquisa se baseiam no texto dos documentos.
Transmitir respostas de conclusão do chat	Transmitir resposta em vez de esperar até que a resposta completa esteja disponível para uma resposta.

As etapas a seguir orientam você pelo 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 fazer a mesma pergunta novamente.

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

   O bate-papo retornou com uma resposta mais concisa, como a seguinte.

Clean up resources (Limpar recursos)

Limpar recursos do Azure

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

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

azd down --purge

Limpar espaços de código do GitHub

Espaços de código do GitHub

Excluir o ambiente do GitHub Codespaces garante que você possa maximizar a quantidade de direitos de horas gratuitas por núcleo que você obtém para sua conta.

Importante

Para obter mais informações sobre os direitos da sua conta do GitHub, consulte Codespaces do GitHub mensalmente incluídos armazenamento e horas principais.

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

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

   

3. Abra o menu de contexto do espaço de código e selecione Excluir.

   

Visual Studio Code

Você não é necessariamente obrigado a limpar seu ambiente local, mas pode parar 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 Dev Containers e selecione Dev Containers: Reopen Folder Locally.

   

Gorjeta

O Visual Studio Code interromperá o contêiner de desenvolvimento em execução, mas o contêiner ainda existe no Docker em um estado interrompido. Você sempre tem a opção de excluir a instância do contêiner, a imagem do contêiner e os volumes do Docker para liberar mais espaço na máquina 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óximos passos

• Aplicativo de bate-papo corporativo repositório GitHub
• Crie um aplicativo de bate-papo com a arquitetura de solução de práticas recomendadas do Azure OpenAI
• Controle de acesso em aplicativos de IA generativa com a Pesquisa de IA do Azure
• Crie uma solução OpenAI pronta para empresas com o Azure API Management
• Superando a pesquisa vetorial com recursos híbridos de recuperação e classificação