使用你自己的 JavaScript 数据示例开始聊天

本文介绍如何使用 JavaScript 数据示例部署和运行聊天。 此示例使用 JavaScript、Azure OpenAI 服务和 Azure AI 搜索中的检索增强生成 (RAG) 实现聊天应用,以获取有关租赁属性的答案。 租赁属性聊天应用的种子数据来自 markdown 文件 (*.md),包括隐私政策、服务条款和支持。

按照本文中的说明操作,你将:

  • 将聊天应用部署到 Azure。
  • 获取有关租赁属性网站信息的答案。
  • 更改设置以更改答复的行为。

完成此文章后,可以使用自定义代码和数据开始修改新项目。

本文是向你介绍如何使用 Azure OpenAI 服务和 Azure AI 搜索生成聊天应用的一系列文章的一部分。 该系列中的其他文章包括:

注意

本文使用一个或多个 AI 应用模板作为本文中的示例和指南的基础。 AI 应用模板为你提供了维护良好、易于部署的参考实现,可帮助确保 AI 应用有一个高质量的起点。

体系结构概述

下图显示了聊天应用的简单体系结构:

显示从客户端到后端应用的体系结构的示意图。

聊天示例应用程序是为一家名为 Contoso Real Estate 的虚构公司构建的,其智能聊天体验允许客户就其产品的使用向支持人员提问。 示例数据包括一套文件,其中介绍了服务条款、隐私政策和支持指南。 在部署过程中,这些文件会被引入到体系结构中。

应用程序由多个组件组成,包括:

  • 搜索服务:提供搜索和检索功能的后端服务。
  • 索引器服务:索引数据和创建搜索索引的服务。
  • Web 应用:前端网络应用,提供用户界面并协调用户与后端服务之间的交互。

显示了 Azure 服务及其与前端应用程序、搜索和文档引入的集成流程的示意图。

成本

此体系结构中的大多数资源使用基本定价层或消耗定价层。 消耗定价基于使用量,这意味着你只需为使用的部分付费。 完成本文将收取一定费用,但费用极少。 阅读文章后,你可以删除资源以停止产生费用。

在示例存储库中了解有关成本的详细信息

先决条件

开发容器 环境提供了完成本文所需的所有依赖项。 可以在 GitHub Codespaces(在浏览器中)或在本地使用 Visual Studio Code 运行开发容器。

若要使用本文章,你需要符合以下先决条件:

  • Azure 订阅 - 免费创建订阅
  • Azure 帐户权限 - Azure 帐户必须具有 Microsoft.Authorization/roleAssignments/write 权限,例如用户访问管理员所有者
  • 已在所需的 Azure 订阅中授予对 Azure OpenAI 的访问权限。 目前,仅应用程序授予对此服务的访问权限。 可以通过在 https://aka.ms/oai/access 上填写表单来申请对 Azure OpenAI 的访问权限。 如果有任何问题,请在此存储库上提出问题以联系我们。
  • GitHub 帐户

打开开发环境

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

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

    新建 codespace 之前的确认屏幕的截图。

  4. 等待 Codespace 启动。 此启动过程会花费几分钟时间。

  5. 在终端的屏幕底部,使用 Azure Developer CLI 登录到 Azure。

    azd auth login
    
  6. 从终端复制代码,然后将其粘贴到浏览器中。 按照说明使用 Azure 帐户进行身份验证。

  7. 本文中的剩余任务需要在此开发容器的上下文中完成。

部署和运行

示例存储库包含将聊天应用部署到 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 rankerUse 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 帐户权利的详细信息,请参阅 GitHub Codespaces 每月包含的存储和核心小时数

  1. 登录到 GitHub Codespaces 仪表板 (https://github.com/codespaces)。

  2. 找到当前正在运行的、源自 Azure-Samples/azure-search-openai-javascript GitHub 存储库的 Codespaces。

    所有正在运行的 Codespaces 的屏幕截图,其中包含它们的状态和模板。

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

    单个 codespace 的上下文菜单的屏幕截图,突出显示了删除选项。

获取帮助

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

如果未解决问题,请将问题记录到存储库的问题部分。

后续步骤