使用RAG開始使用JavaScript企業聊天範例

本文說明如何部署及執行適用於 JavaScript 的企業聊天應用程式範例。 此範例會使用 Azure AI 搜尋中的 JavaScript、Azure OpenAI 服務和擷取擴增世代 （RAG） 來實作聊天應用程式，以取得租用屬性的解答。 租用屬性聊天應用程式會植入 Markdown 檔案 （*.md） 中的數據，包括隱私策略、服務條款和支援。

• 示範 JavaScript - fullstack 影片
• 示範 JavaScript - 使用 Python 後端的前端影片

立即開始

遵循本文中的指示，您將會：

• 部署聊天應用程式至 Azure。
• 取得出租物業網站資訊的解答。
• 變更設定以變更回應的行為。

完成本文之後，您可以使用自定義程式代碼和數據開始修改新專案。

本文是文章集合的一部分，說明如何使用 Azure OpenAI 服務和 Azure AI 搜尋來建置聊天應用程式。 集合中的其他文章包括：

• .NET
• Java
• Python

架構概觀

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

聊天範例應用程式是針對名為 Contoso Real Estate 的虛構公司所建置，智慧型手機聊天體驗可讓客戶詢問其產品使用方式的相關支持問題。 範例數據報含一組檔，描述其服務條款、隱私策略和支援指南。 檔會在部署期間內嵌至架構

應用程式是由多個元件所組成，包括：

• 搜尋服務：提供搜尋和擷取功能的後端服務。
• 索引器服務：索引數據並建立搜尋索引的服務。
• Web 應用程式：提供使用者介面的前端 Web 應用程式，並協調使用者與後端服務之間的互動。

成本

此結構中的大部分資源都會使用基本或使用量價格層。 使用量價格是以使用量為基礎，這表示您只需支付您使用的費用。 若要完成本文，將會向您收取費用，但費用將極低。 當您完成本文時，您可以刪除資源來停止產生費用。

深入瞭解 範例存放庫中的成本。

必要條件

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

若要使用本文，您需要下列必要條件：

Codespaces (建議)

1. Azure 訂用帳戶 - 免費建立一個訂用帳戶
2. Azure 帳戶權限 - 您的 Azure 帳戶必須具有 Microsoft.Authorization/roleAssignments/write 權限，例如，使用者存取系統管理員或擁有者。
3. 在所需的 Azure 訂用帳戶中授與 Azure OpenAI 的存取權。 目前只有應用程式會授予此服務的存取權。 您可以填妥 https://aka.ms/oai/access 的表單，以申請 Azure OpenAI 的存取權。 如果您遇到問題，請在此存放庫上提出問題，以與我們連絡。
4. GitHub 帳戶

Visual Studio Code

1. Azure 訂用帳戶 - 免費建立一個訂用帳戶
2. Azure 帳戶權限 - 您的 Azure 帳戶必須具有 Microsoft.Authorization/roleAssignments/write 權限，例如，使用者存取系統管理員或擁有者。
3. 在所需的 Azure 訂用帳戶中授與 Azure OpenAI 的存取權。 目前只有應用程式會授予此服務的存取權。 您可以填妥 https://aka.ms/oai/access 的表單，以申請 Azure OpenAI 的存取權。 如果您遇到問題，請在此存放庫上提出問題，以與我們連絡。
4. Azure Developer CLI
5. Docker Desktop - 如果 Docker Desktop 尚未執行，請加以啟動
6. Visual Studio Code
7. 開發容器延伸模組

開啟開發環境

立即使用已安裝所有相依性的開發環境開始，以完成本文。

GitHub Codespaces (建議)

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

重要

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

1. 開始在 Azure-Samples/azure-search-openai-javascript GitHub 存放庫分的 main 分支上建立新的 GitHub Codespace 的流程。

2. 在以下按鈕上按一下以滑鼠右鍵，然後選取 [在新視窗中開啟連結]，以便同時取得開發環境和文件。

   在 GitHub Codespaces 中開啟此專案

3. 在 [建立 Codespace] 頁面上，檢閱 Codespace 組態設定，然後選取 [建立新的 Codespace]

   

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

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

   azd auth login
   

6. 從終端機複製程式碼，然後將它貼到瀏覽器中。 遵循指示使用 Azure 帳戶進行驗證。

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

Visual Studio Code

適用於 Visual Studio Code 的開發容器延伸模組 需要將 Docker安裝在本機電腦上。 延伸模組會使用具有預先安裝的正確開發人員工具和相依性的 Docker 主機在本機裝載開發容器，來完成本文。

1. 在空白目錄的內容中開啟 Visual Studio Code。

2. 請確定已在 Visual Studio Code 中安裝 Dev Containers 延伸模組。

3. 在編輯器中開啟新的終端機。

   提示

   您可以使用主功能表瀏覽至 [終端機] 功能表選項，然後選取 [新終端機] 選項。

   

4. 使用 Azure Developer CLI 登入 Azure。

   azd auth login
   

   從終端機複製程式碼，然後將它貼到瀏覽器中。 遵循指示使用 Azure 帳戶進行驗證。

5. 建立資料夾並將其初始化，以使用範例專案搭配 Azure Developer CLI：

   azd init -t azure-search-openai-javascript
   

   您不需要複製此存放庫。

6. 開啟 [命令選擇區]，搜尋 [開發容器] 命令，然後選取 [開發容器: 在容器中重新開啟]。

   提示

   Visual Studio Code 可能會自動提示您重新開啟開發容器內現有的資料夾。 這在功能上相當於使用命令選擇區重新開啟容器中的目前工作區。

7. 再次重新開啟 [終端機] 視窗（Ctrl + `），並將它保持開啟。

8. 此專案中的其餘練習會在此開發容器的內容中進行。

部署和執行

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

部署聊天應用程式至 Azure

重要

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

1. 執行下列 Azure Developer CLI 命令來佈建 Azure 資源並部署原始程式碼：

   azd up
   

2. 提示您輸入環境名稱時，請將它保持簡短和小寫。 例如： myenv 。 它用來作為資源組名的一部分。

3. 出現提示時，選取要在其中建立資源的訂用帳戶。

4. 第一次提示您選取位置時，請選取您附近的位置。 此位置會用於大部分的資源，包括裝載。

5. 如果提示您輸入 OpenAI 模型的位置，請選取您附近的位置。 如果有與您的第一個位置相同的位置，請選取該位置。

6. 等候應用程式部署。 部署可能需要 5-10 分鐘才能完成。

7. 成功部署應用程式之後，您會看到終端機中顯示 URL。

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

   

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

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

1. 在瀏覽器中，選取或輸入 頁面底部文本框中的 [退款 原則為何]。

   

2. 從答案中，選取 [ 顯示想法程式]。

   

3. 在右窗格中，使用索引卷標來瞭解答案的產生方式。

   索引標籤	描述
   思考程序	這是聊天中互動的指令碼。 您可以檢視系統提示 (content) 和您的使用者問題 (content)。
   支援內容	這包括用來回答您的問題的資訊和來源資料。 開發人員設定中會指出來源資料引文的數目。 預設值是 3。
   引文	這會顯示包含引文的原始頁面。

4. 當您完成時，請選取索引標籤上方以 X 表示的隱藏按鈕。

使用聊天應用程式設定來變更回應的行為

聊天應用程式的智慧取決於 OpenAI 模型，以及用來與模型互動的設定。

設定	描述
覆寫提示範本	這是用來產生答案的提示。
擷取這麼多個搜尋結果	這是用來產生答案的搜尋結果數目。 您可以在引文的 [思考程序] 和 [支援內容] 索引標籤中看到這些來源傳回。
排除類別	這是從搜尋結果中排除的文件類別。
使用語意排名工具進行擷取	這是 Azure AI 搜尋服務的一項功能，其使用機器學習來改善搜尋結果的相關性。
使用查詢內容相關摘要，而不是整個文件	同時勾選 Use semantic ranker 和 Use query-contextual summaries 時，LLM 會使用從排名最高文件中的關鍵段落擷取的標題，而不是所有段落。
建議後續問題	讓聊天應用程式根據答案建議後續問題。
擷取模式	向量 + 文字表示搜尋結果是以文件的文字和文件的內嵌項目為基礎。 向量表示搜尋結果是以文件的內嵌項目為基礎。 文字表示搜尋結果是以文件的文字為基礎。
串流聊天完成回應	串流回應，而不是等到完整的回應可供回應使用為止。

下列步驟會逐步引導您完成變更設定的程序。

1. 在瀏覽器中，選取 [開發人員 設定] 索引標籤。

2. 核取 [ 使用查詢關係型摘要]， 而不是複選框，然後再次詢問相同的問題。

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

   聊天會以更簡潔的答案傳回，如下所示。

清除資源

清除 Azure 資源

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

執行下列 Azure Developer CLI 命令來刪除 Azure 資源並移除原始程式碼：

azd down --purge

清除 GitHub Codespaces

GitHub Codespaces

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

重要

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

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

2. 找出您目前執行中的 Codespaces，而其來源為 Azure-Samples/azure-search-openai-javascript GitHub 存放庫。

   

3. 開啟 Codespace 的快顯功能表，然後選取 [刪除]。

   

Visual Studio Code

您不一定需要清除本機環境，但您可以停止執行中的開發容器，並在本機工作區的內容中返回執行中的 Visual Studio Code。

1. 開啟 [命令選擇區]，搜尋 [開發容器] 命令，然後選取 [開發容器: 在本機重新開啟資料夾]。

   

提示

Visual Studio Code 會停止執行中的開發容器，但容器仍以停止狀態存在於 Docker 中。 您一律可選擇從 Docker 刪除容器執行個體、容器映像和磁碟區，以在本機電腦上釋放更多空間。

取得協助

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

如果您的問題未解決，請將您的問題記錄至存放庫的問題。

下一步

• 企業聊天應用程式 GitHub 存放庫
• 使用 Azure OpenAI 建置聊天應用程式最佳做法解決方案架構
• 使用 Azure AI 搜尋服務的生成式 AI 應用程式中的存取控制
• 使用 Azure API 管理建置企業就緒 OpenAI 解決方案
• 使用混合式擷取和排名功能超越向量搜尋