更新聊天应用以将 JavaScript 前端与 Python 后端配合使用

聊天应用是一个参考应用程序,演示如何使用 Azure OpenAI 服务。 每个编程语言参考体系结构提供略有不同的功能。 本文介绍如何将 JavaScript 前端与 Python 后端配合使用。

通过混合和匹配前端和后端,可以创建一个使用两个世界最好的多语言应用程序。

  • 演示 - 利用 Python 后端配置 JavaScript 前端视频

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

注意

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

先决条件

使用以下文章部署这两个参考体系结构。 确保两个部署使用相同的订阅和区域。 部署可能需要长达 20 分钟。 保持这些部署不变;在完成本文之前,请勿完成“清理资源”部分。

  • 使用此 文章 部署 JavaScript 聊天应用
  • 使用此 文章 部署 Python 聊天应用

获取前端和后端的 URL

部署两个参考体系结构后,有两个全堆栈应用。 若要将 JavaScript 前端与Python后端连接,请获取两个应用的 URL 并对其进行配置。

应在单独的开发环境中(在本地或 Codespaces 中)拥有每个存储库。

在 Python 后端中设置 JavaScript 前端 URL

  1. 在 JavaScript 开发环境中,运行以下命令获取 JavaScript 前端的 URL:

    azd env get-values | grep WEBAPP_URI
    

    此命令获取 WEBAPP_URI 变量的所有云环境变量和筛选器。 请确保 URL 不以斜杠结尾,/

  2. 复制 URL。

  3. 在 Python 开发环境中,运行以下命令设置 JavaScript 前端的 URL:

    azd env set ALLOWED_ORIGIN <FRONTEND-URL>
    
  4. 在 Python 开发环境中,运行以下命令重新部署 Python 后端:

    azd up
    

在 JavaScript 前端中设置 Python 后端 URL

  1. 在 Python 开发环境中,运行以下命令获取 Python 后端的 URL:

    azd env get-values | grep BACKEND_URI
    

    此命令获取 BACKEND_URI 变量的所有云环境变量和筛选器。 请确保 URL 不以斜杠结尾,/

  2. 复制 URL。

  3. 在 JavaScript 开发环境中,运行以下命令设置 Python 后端的 URL:

    azd env set BACKEND_URI <BACKEND_URI>
    
  4. 在 Python 开发环境中,通过在 Python 开发环境中运行以下命令来重新部署 Python 后端:

    azd up
    

将 JavaScript 前端与 Python 后端配合使用

Python 应用使用 HR 权益主题区域,而 JavaScript 应用使用房地产主题区域。 连接应用后,可以使用前端来询问 HR 权益。 建议的问题包括:

  • 我的 Northwind Health Plus 计划中包含哪些内容不是标准?
  • 性能评审中会发生什么情况?
  • 产品经理的作用是什么?

清理资源

完成应用后,可以删除资源以避免产生更多费用。

疑难解答

  • 如果收到错误,请确保在环境中输入的 URL 不会以斜杠 /结尾。