通过 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 开发人员 CLI
5. Docker Desktop - 启动 Docker Desktop （如果尚未运行）
6. Visual Studio Code
7. 开发容器扩展

打开开发环境

现在从安装了完成本文所需的所有依赖项的开发环境开始。

GitHub Codespaces（建议）

GitHub Codespaces 运行由 GitHub 托管的开发容器，将 Visual Studio Code 网页版作为用户界面。 对于最简单的开发环境，请使用 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 中安装了开发容器扩展。

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. 在右窗格中，使用选项卡了解如何生成答案。

   Tab	说明
   思考过程	这是聊天中交互的脚本。 可以查看系统提示 (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. 找到当前正在运行的、源自 Azure-Samples/azure-search-openai-javascript GitHub 存储库的 codespace。

   

3. 打开 codespace 的上下文菜单，然后选择“删除”。

   

Visual Studio Code

不一定需要清理本地环境，但可以停止正在运行的开发容器，并返回到本地工作区上下文中正在运行的 Visual Studio Code。

1. 打开命令面板，搜索“开发容器”命令，然后选择“开发容器：在本地重新打开文件夹”。

   

提示

Visual Studio Code 将停止正在运行的开发容器，但容器仍存在于 Docker 中，状态为已停止。 始终可以选择从 Docker 中删除容器实例、容器映像和卷，以释放本地计算机上的更多空间。

获取帮助

此示例存储库提供故障排除信息。

如果未解决颁发的问题，请将问题记录到存储库 的问题。

后续步骤

• 企业聊天应用 GitHub 存储库
• 使用 Azure OpenAI 最佳做法解决方案体系结构构建聊天应用
• 使用 Azure AI 搜索在生成式 AI 应用中进行访问控制
• 使用 Azure API 管理构建可供企业使用的 OpenAI 解决方案
• 使用混合检索和排名功能超越矢量搜索