通过

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

  • 项目

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

按照本文中的说明进行操作，你将会：

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

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

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

注意

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

体系结构概述

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

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

聊天示例应用程序是为一家名为 Contoso Real Estate的虚构公司构建的，智能聊天功能让其客户能够询问有关产品使用的支持问题。 示例数据包括一组描述其服务条款、隐私策略和支持指南的文档。 在部署期间，文档将引入到体系结构中。

应用程序由多个组件组成，包括：

  • 搜索服务：提供搜索和检索功能的后端服务。
  • 索引器服务：为数据编制索引并创建搜索索引的服务。
  • Web 应用：提供用户界面的前端 Web 应用程序，并协调用户与后端服务之间的交互。

图表，展示 Azure 服务在前端应用、搜索和文档引入中的集成流程。

成本

此体系结构中的大多数资源使用基本定价层或消耗定价层。 消耗定价基于使用情况，这意味着你只需为使用的内容付费。 若要完成本文，将收取费用，但费用最少。 阅读文章后，你可以删除资源以停止产生费用。

详细了解示例存储库中的 成本。

先决条件

开发容器 环境中包含完成本文所需的所有依赖项。 可以在 GitHub Codespaces（在浏览器中）或使用 Visual Studio Code 在本地运行开发容器。

若要使用本文，需要满足以下先决条件：

开放开发环境

按照以下说明部署预配置开发环境，其中包含完成本文所需的所有依赖项。

GitHub Codespaces 运行由 GitHub 托管的开发容器，Visual Studio Code for web 作为用户界面。 对于最直接的开发环境，请使用 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 开发人员 CLI 登录到 Azure。

    azd auth login

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

  7. 本文中的剩余任务发生在此开发容器的上下文中。

部署和运行

示例存储库包含将聊天应用部署到 Azure 所需的所有代码和配置文件。 以下步骤将指导完成将示例部署到 Azure 的过程。

将聊天应用部署到 Azure

重要

在本部分中创建的 Azure 资源会产生直接成本，主要来自 Azure AI 搜索资源。 即使在完全执行命令之前中断命令，这些资源也会产生费用。

  1. 运行以下 Azure 开发人员 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 开发人员 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。

    所有正在运行的 Codespace 的屏幕截图，包括其状态和模板。

  3. 打开代码空间的上下文菜单，然后选择 删除。

    单个代码空间的上下文菜单的屏幕截图，其中突出显示了“删除”选项。

获取帮助

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

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

后续步骤