Partilhar via

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

Este artigo mostra como desdobrar e executar o exemplo "Chat with your data" para JavaScript. Este exemplo implementa uma aplicação de chat usando JavaScript, Azure OpenAI Service e Recuperação Aumentada pela Geração (RAG) na Pesquisa do Azure AI para obter respostas sobre propriedades de aluguel. A aplicação de chat para propriedades para arrendar é compilada com dados de ficheiros em formato 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:

  • .NET
  • Java
  • Python

Nota

Este artigo usa um ou mais templates de aplicações 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 entre cliente e 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 fundo que fornece as capacidades de pesquisa e recuperação.
  • Serviço de indexação: o serviço que indexa os dados e cria os índices de pesquisa.
  • Aplicação Web: a aplicação Web frontend que fornece a interface do utilizador e orquestra a interação entre o utilizador e os serviços de back-end.

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.Diagrama que mostra os serviços Azure e o fluxo da sua integração no front-end da aplicação, na pesquisa e no processo de 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, os recursos geram uma cobrança, mas é 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 contentor de desenvolvimento está disponível com todas as dependências necessárias para completar 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)
  • Visual Studio Code

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.

  • Codespaces do GitHub (recomendado)
  • Visual Studio Code

O GitHub Codespaces executa um contentor de desenvolvimento gerido pelo GitHub com o Visual Studio Code for the Web como interface do utilizador. 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 Codespaces por até 60 horas gratuitas por mês com duas instâncias principais. Para mais informações, consulte o armazenamento mensal incluído e as horas principais do GitHub Codespaces.

  1. Inicie o processo para criar um novo Codespace do GitHub na ramificação 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 na nova janela para manter o ambiente de desenvolvimento e a documentação abertos ao mesmo tempo.

    Abrir 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

    Captura de ecrã do ecrã de confirmação antes de criar um novo espaço de código.Captura de ecrã do ecrã de confirmação antes de criar um novo espaço de código.

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

  5. Utilize a CLI de Desenvolvedor Azure para iniciar sessão na Azure no terminal localizado na parte inferior do ecrã.

    azd auth login --use-device-code

  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. Para provisionar os recursos do Azure e implantar o código-fonte, execute o seguinte comando da CLI do Desenvolvedor do Azure:

    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 onde 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 a aplicação de chat num navegador.

    Captura de tela do aplicativo de bate-papo no navegador com 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

A aplicação de conversação vem pré-carregada com informações de aluguer de um ficheiro de markdown. 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.

    Captura de ecrã da primeira resposta da aplicação de chat.

  2. Na resposta, selecione Mostrar processo de pensamento.

    Captura de ecrã da primeira resposta da aplicação de mensagens com o processo de pensamento exibido realçado numa caixa vermelha.

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

    Tab Descrição
    Processo de pensamento Esta aba é um script das interações no chat. Você pode visualizar o prompt do sistema (content) e a sua pergunta de usuário (content).
    Conteúdo de suporte Este separador 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 Este separador apresenta 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

O modelo OpenAI específico determina a inteligência do chat e as configurações usadas para interagir com o modelo. A opção Configurações do desenvolvedor abre o painel Configurar geração de respostas , onde você pode alterar as configurações do aplicativo de bate-papo:

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

Configuração Descrição
Substituir modelo de prompt Essa configuração controla o prompt usado para gerar a resposta.
Recuperar esses muitos resultados de pesquisa Essa configuração controla o número de resultados de pesquisa usados para gerar a resposta. Você pode ver essas fontes nos separadores Processo de pensamento e Conteúdo de suporte da citação.
Excluir categoria Essa configuração controla a categoria de documentos excluídos dos resultados da pesquisa.
Usar classificador semântico para recuperação Essa configuração habilita 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 e Use query-contextual summaries estão verificados, o LLM usa legendas extraídas de passagens-chave, em vez de todas as passagens, nos documentos de melhor classificação.
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.

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 resumos inteiros e faça a mesma pergunta novamente.

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

    O bate-papo retornou com uma resposta mais concisa.

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.

Exclua os recursos do Azure e remova o código-fonte usando o seguinte comando da CLI do Desenvolvedor do Azure:

azd down --purge

Limpar espaços de código do GitHub

  • Espaços de código do GitHub
  • Visual Studio Code

Excluir o ambiente do GitHub Codespaces garante que possas maximizar a quantidade de horas gratuitas por núcleo a que tens direito na tua conta.

Importante

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

  1. Faça login no painel do GitHub Codespaces.

  2. Localize os seus Codespaces atualmente em execução, provenientes do repositório GitHub.

    Captura de ecrã de todos os Codespaces em execução, incluindo o seu estado e modelos.

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

    Captura de ecrã do menu de contexto para um único espaço de código com a opção de eliminação realçada.Captura de ecrã do menu de contexto para um único espaço de código com a opção de eliminação realçada.

Obter ajuda

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

Se o problema não for resolvido, registe o problema na secção de Issues do repositório.

Próximos passos

  • Last updated on