Partilhar via

Comece a usar o bate-papo usando sua própria amostra de dados para JavaScript

  • Artigo

Este artigo mostra como implantar e executar o exemplo de bate-papo com seus dados 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.

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:

Nota

Este artigo usa um ou mais modelos de aplicativo de IA como base para os exemplos e orientações no artigo. Os modelos de aplicativos de IA fornecem implementações de referência bem mantidas e fáceis de implantar que ajudam a garantir um ponto de partida de alta qualidade para seus aplicativos de IA.

Descrição geral da arquitetura

Uma arquitetura simples do aplicativo de bate-papo é mostrada no diagrama a seguir:

Diagram showing architecture from client to backend app.Diagrama mostrando a arquitetura do cliente para o aplicativo de back-end.

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.

Diagram showing Azure services and their integration flow for the front-end app, the search, and the document ingestion.Diagrama mostrando os serviços do Azure e seu fluxo de integração para o aplicativo front-end, a pesquisa e a ingestão de documentos.

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:

Ambiente de desenvolvimento aberto

Use as instruções a seguir para implantar um ambiente de desenvolvimento pré-configurado contendo todas as dependências necessárias para concluir este artigo.

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 na nova janela para ter o ambiente de desenvolvimento e a documentação disponíveis ao mesmo tempo.

    Open in GitHub CodespacesAbrir 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

    Screenshot of the confirmation screen before creating a new codespace.Captura de tela da tela de confirmação antes de criar um 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.

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. Se você for solicitado a inserir 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.

    Screenshot of chat app in browser showing several suggestions for chat input and the chat text box to enter a question.Captura de tela do aplicativo de bate-papo no navegador mostrando várias sugestões para entrada de bate-papo e a caixa de texto do bate-papo para inserir uma pergunta.

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.

    Screenshot of chat app's first answer.Captura de ecrã da primeira resposta da aplicação de chat.

  2. Na resposta, selecione Mostrar processo de pensamento.

    Screenshot of chat app's first answer with Show thought process highlighted in a red box.Captura de ecrã da primeira resposta da aplicação de chat com Mostrar processo de pensamento realçado numa caixa vermelha.

  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.

Screenshot of chat developer settings.Captura de tela das configurações do desenvolvedor do bate-papo.

Definição Description
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

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 Codespaces atualmente em execução provenientes do Azure-Samples/azure-search-openai-javascript repositório GitHub.

    Screenshot of all the running Codespaces including their status and templates.Captura de tela de todos os Codespaces em execução, incluindo seu status e modelos.

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

    Screenshot of the context menu for a single codespace with the delete option highlighted.Captura de tela do menu de contexto para um único espaço de código com a opção de exclusão realçada.

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