本文說明如何部署和執行 Chat with your data sample for JavaScript。 此範例會使用 Azure AI 搜尋中的 JavaScript、Azure OpenAI 服務和擷取擴增世代 （RAG） 來實作聊天應用程式，以取得租用屬性的解答。 租用屬性聊天應用程式會植入 Markdown 檔案 （*.md） 中的數據，包括隱私策略、服務條款和支援。
- 示範 JavaScript - 完整堆疊影片
- 示範 JavaScript - 使用 Python 後端的前端影片
遵循本文中的指示，您將會：
- 部署聊天應用程式至 Azure。
- 取得出租物業網站資訊的解答。
- 變更設定以變更回應的行為。
完成本文之後，您可以使用自定義程式代碼和數據開始修改新專案。
本文是文章集合的一部分，說明如何使用 Azure OpenAI 服務和 Azure AI 搜尋來建置聊天應用程式。 集合中的其他文章包括：
注意
本文使用一或多個 AI 應用程式範本 作為本文範例和指引的基礎。 AI 應用程式範本提供您妥善維護且易於部署的參考實作，以協助確保 AI 應用程式的高品質起點。
架構概觀
下圖顯示聊天應用程式的簡單結構：
此圖顯示從用戶端到後端應用程式的架構。
聊天範例應用程式是針對名為 Contoso Real Estate 的虛構公司所建置，智慧型手機聊天體驗可讓客戶詢問其產品使用方式的相關支持問題。 範例資料包括一組說明其服務條款、隱私權原則和支援指南的文件。 檔會在部署期間內嵌到架構中。
應用程式是由多個元件所組成，包括：
- 搜尋服務：提供搜尋和擷取功能的後端服務。
- 索引器服務：索引數據並建立搜尋索引的服務。
- Web 應用程式：提供使用者介面的前端 Web 應用程式，並協調使用者與後端服務之間的互動。
此圖顯示前端應用程式、搜尋和檔擷取的 Azure 服務及其整合流程。
成本
此結構中的大部分資源都會使用基本或使用量價格層。 使用量價格是以使用量為基礎，這表示您只需支付您使用的費用。 為了完成本文，資源會產生費用，但費用很少。 當您完成本文時，您可以刪除資源來停止產生費用。
深入瞭解 範例存放庫中的成本。
必要條件
開發容器環境可提供完成本文所需的所有相依性。 您可以在 GitHub Codespaces (瀏覽器中) 或使用 Visual Studio Code 在本機執行開發容器。
若要使用本文，您需要下列必要條件：
- Azure 訂用帳戶 - 免費建立一個訂用帳戶
- Azure 帳戶權限 - 您的 Azure 帳戶必須具有 Microsoft.Authorization/roleAssignments/write 權限，例如，使用者存取系統管理員或擁有者。
- GitHub 帳戶
開啟開發環境
使用下列指示來部署預先設定的開發環境，其中包含完成本文所需的所有相依性。
GitHub Codespaces 會使用網頁版 Visual Studio Code 作爲使用者介面，執行由 GitHub 管理的開發容器。 如需最直接的開發環境，請使用 GitHub Codespaces，使得您有已預先安裝的正確開發人員工具和相依性，以便完成本文。
重要
所有 GitHub 帳戶每月都可以免費使用 Codespaces 長達 60 小時，並使用兩個核心實例。 如需詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。
開始在
Azure-Samples/azure-search-openai-javascriptGitHub 存放庫分的main分支上建立新的 GitHub Codespace 的流程。以滑鼠右鍵按一下下列按鈕，然後選取 在 新視窗中開啟連結 ，以同時開啟開發環境和文件。
在 [ 建立 codespace ] 頁面上，檢閱 codespace 組態設定，然後選取 [ 建立新的 codespace ]
建立新 Codespace 之前確認畫面的螢幕擷取畫面。
等候 Codespace 開始。 此啟動程序可能需要幾分鐘的時間。
在畫面底部的終端機中，使用 Azure Developer CLI 登入 Azure。
azd auth login --use-device-code從終端機複製程式碼，然後將它貼到瀏覽器中。 遵循指示使用 Azure 帳戶進行驗證。
本文中的其餘工作會在此開發容器的內容中進行。
在 GitHub Codespaces 中開啟部署和執行
範例存放庫包含將聊天應用程式部署至 Azure 所需的所有程式碼和設定檔。 下列步驟會逐步引導您完成將範例部署至 Azure 的程序。
部署聊天應用程式至 Azure
重要
在本節中建立的 Azure 資源會產生立即成本，主要是來自 Azure AI 搜尋服務資源。 即使您在命令完全執行之前中斷命令，這些資源也可能會產生成本。
若要佈建 Azure 資源並部署原始程式碼，請執行下列 Azure 開發人員 CLI 命令：
azd up如果系統提示您輸入環境名稱，請將它保持簡短和小寫。 例如：
myenv。 它用來作為資源組名的一部分。出現提示時，選取要在其中建立資源的訂用帳戶。
第一次提示您選取位置時，請選取您附近的位置。 此位置會用於大部分的資源，包括裝載。
如果提示您輸入 OpenAI 模型的位置，請選取您附近的位置。 如果有與您的第一個位置相同的位置，請選取該位置。
等候應用程式部署。 部署可能需要 5-10 分鐘才能完成。
應用程式成功部署之後，您會看到終端機中顯示的 URL。
選取標示為
Deploying service web的 URL，以在瀏覽器中開啟聊天應用程式。
使用聊天應用程式從 Markdown 檔案取得答案
聊天應用程式會預先載入 Markdown 檔案目錄中的租用資訊。 您可以使用聊天應用程式來詢問租用程式相關問題。 下列步驟會逐步引導您完成使用聊天應用程式的程序。
在瀏覽器中，選取或輸入 頁面底部文本框中的 [退款 原則為何]。
從答案中，選取 [ 顯示想法程式]。
在右窗格中，使用索引卷標來瞭解答案的產生方式。
索引標籤 描述 思考程序 此分頁是聊天中互動的腳本。 您可以檢視系統提示 ( content) 和您的使用者問題 (content)。支援內容 此選項卡包括回答您的問題和源材料的信息。 開發人員設定中會指出來源資料引文的數目。 預設值是 3。 引文 此索引標籤會顯示包含引文的原始頁面。 當您完成時，請選取索引標籤上方以 X 表示的隱藏按鈕。
聊天應用程式第一個答案的螢幕擷取畫面。
聊天應用程式第一個答案的螢幕快照，其中以紅色方塊醒目提示 [顯示想法程式]。使用聊天應用程式設定來變更回應的行為
特定的 OpenAI 模型會決定聊天的智慧，以及用來與模型互動的設定。 [ 開發人員設定 ] 選項會開啟 [ 設定答案產生 ] 窗格，您可以在其中變更聊天應用程式的設定：
聊天開發人員設定的螢幕擷取畫面。
| 設定 | 描述 |
|---|---|
| 覆寫提示範本 | 此設定可控制用來產生答案的提示。 |
| 擷取這麼多個搜尋結果 | 此設定可控制用來產生答案的搜尋結果數目。 您可以在引文的 [思考程序] 和 [支援內容] 索引標籤中看到這些來源傳回。 |
| 排除類別 | 此設定可控制從搜尋結果中排除的文件類別。 |
| 使用語意排名工具進行擷取 | 此設定會啟用 Azure AI 搜尋服務 的功能，該功能會使用機器學習來改善搜尋結果的相關性。 |
| 使用查詢內容相關摘要，而不是整個文件 | 同時勾選 Use semantic ranker 和 Use query-contextual summaries 時，LLM 會使用從排名最高文件中的關鍵段落擷取的標題，而不是所有段落。 |
| 建議後續問題 | 讓聊天應用程式根據答案建議後續問題。 |
| 擷取模式 | 向量 + 文字表示搜尋結果是以文件的文字和文件的內嵌項目為基礎。 向量表示搜尋結果是以文件的內嵌項目為基礎。 文字表示搜尋結果是以文件的文字為基礎。 |
| 串流聊天完成回應 | 串流回應，而不是等到完整的回應可供回應使用為止。 |
下列步驟會逐步引導您完成變更設定的程序。
在瀏覽器中，選取 [ 開發人員設定 ] 索引標籤。
核取 [ 使用查詢內容摘要而非整個摘要 ] 核取方塊，然後再次提出相同的問題。
What happens if the rental doesn't fit the description?訊息回傳的回答更加簡潔。
清除資源
清除 Azure 資源
在本文中建立的 Azure 資源會向您的 Azure 訂用帳戶計費。 如果您預計未來不需要這些資源，請將其刪除，以避免產生更多費用。
刪除 Azure 資源，並使用下列 Azure 開發人員 CLI 命令移除原始程式碼：
azd down --purge
清除 GitHub Codespaces
刪除 GitHub Codespaces 環境，可確保您可將您為帳戶取得的每個核心免費時數權利數量最大化。
重要
如需 GitHub 帳戶權利的詳細資訊，請參閱 GitHub Codespaces 每月包含的儲存體和核心時數。
找出您目前執行中的 Codespaces，而其來源為
Azure-Samples/azure-search-openai-javascriptGitHub 存放庫。
執行中 Codespaces 的螢幕擷取畫面，包括其狀態和範本。
開啟 Codespace 的快顯功能表，然後選取 [刪除]。
單一 Codespace 的操作功能表 (已醒目提示刪除選項) 螢幕擷取畫面。
[命令選擇區] 選項的螢幕擷取畫面，該選項用以重新開啟開發環境內的目前資料夾。取得協助
此範例存放庫可提供疑難排解資訊。