共用方式為


使用 LangChain.js 開始使用無伺服器 AI 聊天與 RAG

建立 AI 應用程式可能相當複雜。 透過LangChain.js、Azure Functions 和無伺服器技術,您可以簡化此程式。 這些工具可管理基礎結構並自動調整,讓您專注於聊天機器人功能。 聊天機器人會使用企業檔來產生 AI 回應。

此程式代碼包含虛構公司的範例數據。 客戶可以詢問公司產品的相關支持問題。 數據報含公司服務條款、隱私策略和支援指南的檔。

Screenshot of chat app in browser showing several suggestions for chat input and the chat text box to enter a question.瀏覽器中聊天應用程式的螢幕擷取畫面,其中顯示數個聊天輸入建議,以及可輸入問題的聊天文字方塊。

注意

本文使用一或多個 AI 應用程式範本 作為本文範例和指引的基礎。 AI 應用程式範本提供您妥善維護且易於部署的參考實作,以協助確保 AI 應用程式的高品質起點。

架構概觀

聊天應用程式

使用者與應用程式互動:

  • 客戶端網頁應用程式中對話的聊天介面。
  • 用戶端應用程式會透過 HTTP 呼叫,將使用者的查詢傳送至無伺服器 API。
  • 無伺服器 API 會建立一個鏈結,以協調 Azure AI 與 Azure AI 搜尋之間的互動,以產生答案。
  • 使用 Azure Blob 記憶體擷取 PDF 檔。
  • 產生的回應接著會傳回至 Web 應用程式,並向用戶顯示。

下圖顯示聊天應用程式的簡單結構:

Diagram showing architecture from client to backend app.此圖顯示從用戶端到後端應用程式的架構。

LangChain.js 可簡化服務之間的複雜度

API 流程運作有助於認識在這種情境中 LangChain.js 如何透過抽象化互動來提供幫助。 無伺服器 API 端點

  • 從使用者收到問題。
  • 建立客戶端物件:
    • 適用於內嵌和聊天的 Azure OpenAI
    • 向量存放區的 Azure AI 搜尋
  • 使用 LLM 模型、聊天訊息(系統和使用者提示)和文檔來源建立文件鏈結。
  • 從文件鏈結和向量存放區建立擷取鏈結。
  • 從擷取鏈結串流回應。

開發人員的工作是正確設定相依性服務,例如 Azure OpenAI 和 Azure AI 搜尋,並正確建構鏈結。 基礎鏈結邏輯知道如何解析查詢。 這可讓您從許多不同的服務和組態建構鏈結,只要它們符合 LangChain.js 需求即可。

此架構中的 Azure 在哪裡?

此應用程式是由多個元件所組成:

必要條件

開發容器環境可提供完成本文所需的所有相依性。 您可以在 GitHub Codespaces (瀏覽器中) 或使用 Visual Studio Code 在本機執行開發容器。

若要使用本文,您需要下列必要條件:

開啟開發環境

使用下列指示來部署預先設定的開發環境,其中包含完成本文所需的所有相依性。

GitHub Codespaces 會使用網頁版 Visual Studio Code 作爲使用者介面,執行由 GitHub 管理的開發容器。 如需最直接的開發環境,請使用 GitHub Codespaces,使得您有已預先安裝的正確開發人員工具和相依性,以便完成本文。

重要

所有 GitHub 帳戶每個月最多可以使用 Codespaces 60 小時,且有 2 個核心執行個體。 如需詳細資訊,請參閱 GitHub Codespaces 每月包含的儲存體和核心時數

  1. 在 codespace 中開啟。

    Open in GitHub Codespaces在 GitHub Codespaces 中開啟

  2. 等候 Codespace 開始。 此啟動程序可能需要幾分鐘的時間。

  3. 在畫面底部的終端機中,使用 Azure Developer CLI 登入 Azure。

    azd auth login
    

    完成驗證程式。

  4. 本文中的其餘工作會在此開發容器的內容中進行。

部署和執行

範例存放庫包含您將無伺服器聊天應用程式部署至 Azure 所需的所有程式代碼和組態檔。 下列步驟會逐步引導您完成將範例部署至 Azure 的程序。

部署聊天應用程式至 Azure

重要

在本節中建立的 Azure 資源會產生立即成本,主要是來自 Azure AI 搜尋服務資源。 即使您在命令完整執行之前中斷命令,這些資源仍可能會產生成本。

  1. 使用下列 Azure 開發人員 CLI 命令布建 Azure 資源並部署原始碼:

    azd up
    
  2. 使用下表回答提示:

    提示 回答
    環境名稱 保持簡短和小寫。 新增您的名稱或別名。 例如: john-chat 。 它用來作為資源組名的一部分。
    訂用帳戶 請選擇用來建立資源的訂用帳戶。
    位置 (用於載入) 從清單中選取您附近的位置。
    OpenAI 模型的位置 從清單中選取您附近的位置。 如果有與您的第一個位置相同的位置,請選取該位置。
  3. 等候應用程式部署。 部署可能需要 5-10 分鐘的時間才能完成。

  4. 成功部署應用程式之後,您會看到終端機中顯示的兩個URL。

  5. 選取標示為 Deploying service webapp 的 URL,以在瀏覽器中開啟聊天應用程式。

使用聊天應用程式從 PDF 檔案取得答案

聊天應用程式會預先載入 PDF 檔案目錄中租用資訊。 您可以使用聊天應用程式來詢問租用程式相關問題。 下列步驟會逐步引導您完成使用聊天應用程式的程序。

  1. 在瀏覽器中,選取或輸入 什麼是退款原則

    Screenshot of chat app's first question and answer.聊天應用程式第一個問題和答案的螢幕快照。

  2. 選取後續問題。

    Screenshot of chat app's suggested follow-up prompt and answer.聊天應用程式建議的後續提示和答案的螢幕快照。

  3. 從回應中,選取引文以查看用來產生答案的檔。 這會將檔從 Azure 儲存體 傳遞至用戶端。 當您完成新的瀏覽器索引標籤時,請關閉它以返回無伺服器聊天應用程式。

    Screenshot of original document containing citation.包含引文的原始文件螢幕快照。

清除資源

清除 Azure 資源

在本文中建立的 Azure 資源會向您的 Azure 訂用帳戶計費。 如果您預計未來不需要這些資源,請將其刪除,以避免產生更多費用。

刪除 Azure 資源,並使用下列 Azure 開發人員 CLI 命令移除原始碼:

azd down --purge

清除 GitHub Codespaces

刪除 GitHub Codespaces 環境,可確保您可將您為帳戶取得的每個核心免費時數權利數量最大化。

重要

如需 GitHub 帳戶權利的詳細資訊,請參閱 GitHub Codespaces 每月包含的儲存體和核心時數

  1. 登入 GitHub Codespaces 儀表板 (https://github.com/codespaces)。

  2. 找出您目前執行中的 Codespaces,而其來源為 Azure-Samples/serverless-chat-langchainjs GitHub 存放庫。

    Screenshot of all the running Codespaces including their status and templates.執行中 Codespaces 的螢幕擷取畫面,包括其狀態和範本。

  3. 開啟操作功能表 , ...針對codespace,然後選取 [ 刪除]。

取得協助

此範例存放庫可提供疑難排解資訊

如果您的問題未獲得解決,請將問題記錄至存放庫的 [問題]