Comece a usar o chat com sua própria amostra de dados para JavaScript

Este artigo mostra como implantar e executar o exemplo Chat com seus dados para JavaScript. Este exemplo implementa um aplicativo de chat usando JavaScript, o Serviço OpenAI do Azure e a RAG (Geração Aumentada por Recuperação) na Pesquisa de IA do Azure para obter respostas sobre imóveis para aluguel. O aplicativo de chat para imóveis de aluguel é alimentado com dados de arquivos Markdown (*.md), incluindo política de privacidade, termos de serviço e conteúdo de suporte.

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

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

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

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

Observação

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

Visão geral da arquitetura

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

Diagrama mostrando a arquitetura do cliente ao aplicativo de back-end.

O aplicativo de exemplo de chat foi criado para uma empresa fictícia chamada Contoso Real Estate, e a experiência de chat 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.

O aplicativo é feito de vários componentes, incluindo:

  • Serviço Pesquisa: o serviço de back-end que fornece as capacidades de pesquisa e de recuperação.
  • Serviço de indexador: o serviço que indexa os dados e cria os índices de pesquisa.
  • Aplicativo Web: o aplicativo Web de 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.

Diagrama que mostra os serviços do Azure e seu fluxo de integração para o aplicativo de front-end, a busca e a ingestão de documentos.

Custo

A maioria dos recursos nesta arquitetura usa uma camada de preço básica 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, os recursos geram um encargo, mas é mínimo. Quando terminar de ler o artigo, você poderá excluir os recursos para deixar de gerar cobranças.

Saiba mais sobre custos no repositório de exemplo.

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:

Abrir o ambiente de desenvolvimento

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.

GitHub Codespaces executa um contêiner de desenvolvimento gerenciado pelo GitHub, usando o Visual Studio Code para a 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 duas instâncias principais. Para mais informações, consulte armazenamento mensal incluído e horas de núcleo do GitHub Codespaces.

  1. Inicie o processo para criar um novo GitHub Codespace 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 em uma 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 codespace , examine as configurações do codespace e selecione Criar novo codespace

    Captura de tela da tela de confirmação antes de criar um 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, faça login no Azure usando a CLI do Azure Developer.

    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 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. 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ê receber uma solicitação para inserir um nome de ambiente, mantenha-o curto e em minúsculas. Por exemplo, myenv. Ele é usado como parte do nome do grupo de recursos.

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

  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 a implantação ser concluída.

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

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

    Captura de tela do aplicativo de chat no navegador com sugestões de entrada de chat e a caixa de texto de chat para inserir uma pergunta.

Use um aplicativo de chat para obter respostas de arquivos Markdown

O aplicativo de chat vem pré-carregado com informações de aluguel de um catálogo de arquivos Markdown. Você pode usar o aplicativo de chat 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.

    Captura de tela da primeira resposta do aplicativo de chat.

  2. Na resposta, selecione Mostrar processo de pensamento.

    Captura de tela da primeira resposta do aplicativo de chat com

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

    Tabulação Descrição
    Processo de pensamento Esta aba é um registro das interações no chat. Você pode ver o prompt do sistema (content) e sua pergunta (content).
    Conteúdo de suporte Esta aba 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 Essa aba exibe a página original que contém a citação.

  4. Quando terminar, selecione o botão ocultar, identificado por um X acima das guias.

Usar as configurações do aplicativo de chat 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 em que você pode alterar as configurações do aplicativo de chat:

Captura de tela das configurações de desenvolvedor do chat.

Configuração Descrição
Substituir modelo de prompt Essa configuração controla o prompt usado para gerar a resposta.
Recuperar esta quantidade de resultados da pesquisa Essa configuração controla o número de resultados da pesquisa usados para gerar a resposta. Você pode ver essas fontes exibidas nas abas 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 o classificador semântico para recuperação Essa configuração permite um recurso do 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 Use semantic ranker e Use query-contextual summaries estão selecionados, 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 do chat Envie a resposta em fluxo, em vez de esperar até que a resposta completa esteja disponível.

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

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

  2. Verifique 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 chat retornou com uma resposta mais concisa.

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.

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

azd down --purge

Fazer limpeza no GitHub Codespaces

Excluir o ambiente do GitHub Codespaces garante que você possa maximizar a quantidade de horas gratuitas por núcleo disponíveis a que sua conta tem direito.

Importante

Para obter mais informações sobre os benefícios da sua conta do GitHub, consulte Armazenamento e horas de núcleo mensais incluídos do GitHub Codespaces.

  1. Entre no painel do GitHub Codespaces.

  2. Encontre seus Codespaces em execução no momento, provenientes do repositório GitHub Azure-Samples/azure-search-openai-javascript.

    Captura de tela de todos os Codespaces em execução, incluindo seus status e modelos.

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

    Captura de tela do menu de contexto de um único codespace com a opção Excluir destacada.

Obter ajuda

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

Se o seu problema não for resolvido, registre seu problema em Issues do repositório.

Próximas etapas

  • Last updated on