为您的聊天机器人部署 Web UI

您已经使用 Amazon Lex 搭建了非常棒的聊天机器人，并使用 Amazon Lex 控制台进行了测试。现在您可以将它部署在自己的网站上。

虽然您可以创建自己的机器人用户界面 (UI)，但这似乎非常耗时耗力。您需要处理对不同设备和浏览器的支持、身份验证、语音记录等等方面。您想肯定有人已经这样做过了，如果运气好的话可以找到可重复使用的解决方案。

Amazon Lex 聊天机器人 UI

我们的示范 Amazon Lex Web UI 被称为聊天机器人 UI，已经完成了与搭建全功能的 Amazon Lex 聊天机器人网络客户端有关的绝大部分工作。您可以快速利用这些功能，减少聊天机器人所支持应用程序的价值变现时间。

您可以将其作为全页面聊天机器人 UI 使用：

或作为聊天机器人插件嵌入到网站中：

聊天机器人 UI 支持下列功能：

• 支持移动设备的应答 UI，提供全屏和嵌入式插件模式

• 完全支持语音和文本，可以无缝切换

• 语音功能包括自动静音检测、誊录、录音和回放，可以中断 Amazon Lex 应答回放

• 支持_语音和文本_的应答卡
  

• 可以通过编程从托管网站与聊天机器人交互

• 多种部署方案

部署和集成方案

聊天机器人 UI 有四种部署和集成方案：

1. 使用 AWS CloudFormation。

2. 使用 AWS Mobile Hub。

3. 使用预先搭建的分配库。

4. 使用预先封装的 Vue 组件。

最简单方便的方式是使用 AWS CloudFormation，下面我们将介绍具体方法。有关所有方案的更多信息，请参阅 GitHub README。

AWS CloudFormation 部署方案简介

部署聊天机器人 UI 以检查效果。

1. 按下 Launch Stack 按钮：

2. 

3. 接受所有默认参数。

4. 这将会在您的帐户中部署演示环境 (us-east-1 AWS 区域) 并安装 OrderFlowersBot。

5. 在 AWS CloudFormation 启动堆栈后 (状态为 CREATE_COMPLETE)，打开 Outputs 选项卡。选择 WebAppUrl 或 ParentPageUrl 来试验聊天机器人 UI：

6. 

堆栈会部署下列架构。它是完全无服务器的——根据您的服务使用量收费。

更多信息请参阅 CloudFormation Stack README。

在了解聊天机器人的运行原理后，在自己的 Amazon Lex 聊天机器人上尝试，并集成到自己的网站中。方法如下：

1. 启动 AWS CloudFormation 堆栈。

2. 

3. 在 Lex Bot Configuration Parameters 部分，在 BotName 字段键入您的聊天机器人名。

4. 在 Web Application Parameters 部分，填写各项参数。

5. 注意：WebAppParentOrigin 参数必须填写您网站的源地址。

6. 在 AWS CloudFormation 启动堆栈后 (状态为 CREATE_COMPLETE)，您将在 Outputs 选项卡的 SnippetUrl 输出值中看到一个链接：

7. 

8. 浏览此 SnippetUrl 页面，您将看到与您粘贴到应用程序中的代码片段相似的代码片段：

9. 

有关将聊天机器人 UI 集成到网站并进行配置的代码示例和更多选项，请参阅 GitHub 上的 Amazon Lex UI 存储库。

请告诉我们您的意见

我们希望您能尝试示范聊天机器人 UI。请在此博末尾的评论部分告诉我们您的意见。

我们还希望听到您对改进和功能的建议。报告错误并在项目 GitHub 存储库中提交功能请求。如能将您的增强作为 Pull 请求提交当然更好！

补充阅读

• 使用 Amazon Lex 和 Amazon Alexa 创建问答机器人
  

• 在 AWS 上使用启用语音的机器人跟踪活动
  

• 在浏览器中捕获语音输入并将其发送给 Amazon Lex
  

作者介绍：

Oliver Atoa 和 Bob Strahan 是 AWS 专业服务团队的高级顾问。他们与我们的客户合作，为各种各样的项目提供指导，帮助他们加快使用 AWS 实现价值的步伐。

本文转载自 AWS 技术博客。

原文链接：

https://amazonaws-china.com/cn/blogs/china/deploy-a-web-ui-for-your-chatbot/