Partilhar via


Comece a usar o Serverless AI Chat com o RAG utilizando o LangChain.js

Criar aplicativos de IA pode ser complexo. Com as tecnologias LangChain.js, Azure Functions e Serverless, você pode simplificar esse processo. Essas ferramentas gerenciam a infraestrutura e escalam automaticamente, permitindo que você se concentre na funcionalidade do chatbot. O chatbot usa documentos corporativos para gerar respostas de IA.

O código inclui dados de exemplo para uma empresa fictícia. Os clientes podem fazer perguntas de suporte sobre os produtos da empresa. Os dados incluem documentos sobre os termos de serviço, política de privacidade e guia de suporte da empresa.

Captura de tela do aplicativo de bate-papo no navegador mostrando a caixa de texto do bate-papo e várias sugestões para entrada de bate-papo.

Nota

Este artigo usa um ou mais modelos de aplicação de Inteligência Artificial como base para os exemplos e as orientações deste 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

O aplicativo de bate-papo

O usuário interage com o aplicativo:

  • A interface de chat na aplicação web do cliente para a conversa.
  • O aplicativo Web cliente envia a consulta do usuário para a API Serverless por meio de chamadas HTTP.
  • A API sem servidor cria uma cadeia para coordenar as interações entre a IA do Azure e a Pesquisa de IA do Azure para gerar uma resposta.
  • A recuperação de documentos PDF usando o Armazenamento de Blobs do Azure.
  • A resposta gerada é então enviada de volta para o aplicativo Web e exibida para o usuário.

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.

LangChain.js simplifica a complexidade entre serviços

O fluxo da API é útil para entender como LangChain.js é útil nesse cenário, abstraindo as interações. O ponto de extremidade da API sem servidor:

  • Recebe a pergunta do usuário.
  • Cria objetos cliente:
    • Azure OpenAI para incorporações e chat
    • Azure AI Search para o repositório de vetores
  • Cria uma cadeia de documentos com o modelo LLM, a mensagem de chat (prompts do sistema e do usuário) e a fonte do documento.
  • Cria uma cadeia de recuperação a partir da corrente de documentos e do repositório vetorial.
  • Transmite as respostas da cadeia de recuperação.

O trabalho do desenvolvedor é configurar corretamente os serviços de dependências, como o Azure OpenAI e o Azure AI Search e construir as cadeias corretamente. A lógica de cadeia subjacente permite construir cadeias a partir de muitos serviços e configurações diferentes, desde que trabalhem com os requisitos LangChain.js.

Onde está o Azure nesta arquitetura?

Esta aplicação é feita a partir de vários componentes:

  • Uma aplicação web criada com um único componente de chat construído com Lit e hospedada em Azure Static Web Apps. O código está localizado na pasta packages/webapp.

  • Uma API sem servidor criada com Azure Functions e usando LangChain.js para processar documentos e gerar respostas às consultas de chat dos usuários. O código está localizado na pasta packages/api.

  • Um serviço do Azure OpenAI para criar incorporações e gerar uma resposta.

  • Um banco de dados para armazenar o texto extraído dos documentos e os vetores gerados pelo LangChain.js, usando Azure AI Search.

  • Um sistema de armazenamento de ficheiros para guardar os documentos de origem utilizando o Azure Blob Storage.

Pré-requisitos

Um ambiente de contentor 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.

GitHub Codespaces executa um contentor de desenvolvimento gerido pelo GitHub com o Visual Studio Code for the Web como interface de 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 obter mais informações, consulte armazenamento mensal incluído e horas principais dos GitHub Codespaces.

  1. Abrir no Codespace.

    Abrir no GitHub Codespaces

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

  3. No terminal na parte inferior do ecrã, inicie sessão no Azure com a CLI do Azure Developer.

    azd auth login
    

    Conclua o processo de autenticação.

  4. 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 o aplicativo de chat sem servidor 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 nesta seção começam a custar dinheiro imediatamente, mesmo que você pare o comando antes que ele seja concluído.

  1. Provisione os recursos do Azure e implante o código-fonte usando o seguinte comando da CLI do Desenvolvedor do Azure:

    azd up
    
  2. Responda aos prompts usando a tabela a seguir:

    Pedido Resposta
    Nome do ambiente Mantenha-o curto e minúsculo. Adicione o seu nome ou alias. Por exemplo, john-chat. Ele é usado como parte do nome do grupo de recursos.
    Subscrição Selecione a assinatura para criar recursos.
    Localização (para hospedagem) Selecione um local perto de você na lista.
    Localização para o modelo OpenAI Selecione um local perto de você na lista. Se o mesmo local estiver disponível como seu primeiro local, selecione isso.
  3. Aguarde até que o aplicativo seja implantado. Pode levar de 5 a 10 minutos para que a implantação seja concluída.

  4. Depois que o aplicativo for implantado com êxito, você verá duas URLs exibidas no terminal.

  5. Selecione essa URL rotulada Deploying service webapp para abrir a aplicação de chat num navegador.

Use o aplicativo de bate-papo para obter respostas de arquivos PDF

A aplicação de chat é carregada previamente com informações de aluguer a partir de um catálogo de ficheiros PDF. 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 insira Qual é a política de reembolso.

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

  2. Selecione uma pergunta de acompanhamento.

    Captura de ecrã do prompt e resposta de acompanhamento sugeridos pelo aplicativo de chat.

  3. Selecione a citação na resposta para visualizar o documento de origem. O Armazenamento do Azure entrega o documento ao seu navegador. Quando terminar de rever o documento, feche o separador para regressar à aplicação de chat.

    Captura de ecrã do documento original que contém uma citação.Captura de ecrã do documento original que contém uma citação.

Limpar recursos

Limpar recursos do Azure

O Azure cobra os recursos criados neste artigo à sua subscrição do Azure. Se você não precisar desses recursos no futuro, exclua-os para evitar mais cobranças.

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

azd down --purge

Limpar espaços de código do GitHub

Exclua o ambiente do GitHub Codespaces para maximizar suas horas gratuitas por núcleo.

Importante

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

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

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

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

  3. Abra o menu de contexto, ... para o codespace e, em seguida, selecione Eliminar.

Obter ajuda

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

Se o problema não for resolvido, registe-o na secção 'Problemas' do repositório.

  • Introdução à avaliação de respostas numa aplicação de chat em JavaScript
  • Saiba mais sobre como o AZD é usado neste modelo:
    • Tech postagem no blog da comunidade
    • Vídeo do Reator