使用AWS Lex构建Angular聊天机器人

在这篇文章里,我们对构建自己的Angular聊天机器人的过程做了详细的记录及介绍,希望能给大家带来帮助。

前言

在本文中,我将解释Amazon Lex服务以及如何使用它为您的应用程序开发自动化机器人。 使用Lex,它可以在您的应用程序中开发自动化支持,以使用文本或语音从用户收集信息并解决用户的疑虑。

我将使用Angular创建一个示例应用程序,然后将其集成到Amazon Lex中。

准备工作

本文假定您对Web应用程序开发有基本的了解。 本文并不要求您具有使用Angular或Amazon Web Services的高级技能,但是熟悉这些技术将帮助您充分利用这些知识。 这是我在本文中使用过的工具技术的列表。

  • Node.js CLI
  • Angular
  • Visual Studio程式码
  • Amazon AWS控制台
  • Amazon Amplify CLI

什么是Amazon Lex?

Amazon Lex使用深度学习和自然语言处理来创建对话应用程序。 Lex使开发人员能够创建基于文本/语音的对话的应用程序,这些对话可以与Amazon Alexa或其他AWS服务无缝集成,以实现自动化的工作流程。

Amazon Lex使用自动语音识别(ASR)将语音转换为文本,然后使用自然语言处理(NLP)来了解语音的意图,从而创建引人入胜的应用程序。 使用Amazon Lex,您可以创建任何内容,从简单的网站支持聊天机器人到复杂的联络中心应用程序或自动预订系统。

为什么要使用Amazon Lex?

以下是Amazon Lex的一些优势:

  • 易于理解,并提供通过控制台的轻松导航以创建应用程序。
  • 仅通过使用开发人员的服务即可实现业务目标,从而为开发人员提供了复杂的深度学习算法。
  • 使使用控制台轻松开发测试和部署聊天机器人变得非常容易。
  • 聊天机器人是无服务器的,可以大规模扩展而无需开销。
  • 聊天机器人非常具有成本效益,并且不需要任何前期部署成本,您可以随需付费。
  • 与其他AWS服务(例如AWS Lambda,Cognito,CloudWatch和其他服务)的内置集成。
  • 易于与外部消息传递平台和Web应用程序集成。

Amazon Lex概念介绍

您需要了解一些概念才能构建Lex应用程序:

1.意图(Intents)

意图表示用户想要执行的动作。您使用一个或多个相关意图创建一个机器人。例如,您可以创建一个机器人,该机器人使用用户详细信息和旅行详细信息来创建酒店预订。

2.话术(Utterances)

话术是调用意图的打字或口语短语。 您指定一种或多种言语,以便可以多种方式调用您的意图。 例如:“预订房间”。

3.插槽(Slots)

插槽是用户必须提供以实现意图的数据。 插槽要求您提供提示消息,插槽类型以及要存储用户提供的值的变量值。 您可以指定多个插槽来收集所有数据点。 例如:您叫什么名字?

4.确认提示(Confirmation Prompt)

确认提示会指定一条消息回放给用户,以确认在插槽中收集的数据。 用户可以提供其意图的确认,也可以在确认提示中将其取消。

5.履行(Fulfillment)

履行部分指定要执行的AWS Lambda代码,以实际执行完成用户意图所需的业务逻辑。

6.响应(Response)

响应部分指定了意图的关闭。 在这里,可以回复一条消息,或者您可以调用另一个意图。

7.澄清提示(Clarification Prompts)

在错误处理部分中,您可以指定一个澄清提示,如果用户的响应或问题与机器人的预期行为不符,机器人可以向用户询问一个澄清问题。

8.通道(Channels)

Amazon Lex可以轻松地与Facebook Messenger,Kik,Slack和Twilio SMS等一些流行的消息传递渠道集成。 在通道部分,您可以指定不同的设置以在这些平台上启用聊天机器人。 在此处的示例应用程序中,我们将将此聊天机器人集成到示例网页中,您可以在移动应用程序中或网站上使用它。

开发工具

要开始开发此应用程序,我们需要一个代码编辑器,我使用的是Visual Studio代码,因为它是免费的,支持打字稿语法突出显示并且易于使用,但是您可以使用任何源代码编辑器来关注本文。 我们还需要节点包管理器在您的开发环境中可用并且是最新的。

我们将使用AWS Amplify CLI在应用程序中配置AWS LEX,AWS Amplify是亚马逊提供的实用程序,可轻松集成基于Java脚本的应用程序,还提供使用简单命令自动配置AWS后端的实用程序。

开发的功能描述

在此应用程序中,我将创建一个带有只读文本区域的网页以显示对话。 然后,将有一个文本输入,我会将我的输入添加到聊天机器人中。 单击发送按钮后,我的输入将被发送到Amazon Lex以获取响应。

我们将创建一个聊天机器人,以引导用户完成创建酒店预订的过程。 我们的机器人会从用户那里获取他们需要预订的城市和日期的详细信息,然后我们将创建预订(一个假人)并通知用户。

开始

现在,让我们开始编写我们的应用程序。 首先,打开一个终端窗口。 我认为此时您已经在计算机上安装了节点软件包管理器,并且它是最新的。

  • 1.安装Angular CLI

    npm install -g @angular/cli
  • 2.创建一个新的Angular应用程序

Angular CLI允许您通过键入命令并创建模板Web应用程序来创建新应用程序,您可以对其进行修改和自定义以满足您的需求。

ng new lex-demo-app
创建新的Angular应用
创建新的Angular应用

键入上面的命令后,它将询问您几个问题以自定义您的应用程序。

Would you like to add Angular routing? Yes
Which stylesheet format would you like to use? CSS
Angular应用创建命令行
Angular应用创建命令行

如上面的屏幕快照所示,回答这些问题。 在这里,我们在应用程序中启用路由并使用CSS美化我们的应用程序。 按下Enter键后,这将创建您的应用程序,并添加启动应用程序所需的所有Angular和节点依赖关系。

  • 3.启动Angular web应用

现在我们已经创建了应用程序,因此,使用下面的命令转到应用程序目录,然后启动节点服务器。

cd lex-demo-app/

要启动节点应用程序,请在下面键入命令,然后按Enter。 在这里,我们正在以SSL模式启动服务器,以确保与后端服务的通信是在安全通道上进行的。

ng serve --ssl=true 
命令行启动Angular web应用
命令行启动Angular web应用

现在,该应用程序启动后,让我们在浏览器中输入以下地址,然后查看我们的示例应用程序。

https://localhost:4200/
应用启动成功
应用启动成功

您可以看到Angular CLI已经为应用程序创建了基本框架。 现在,我们将对其进行自定义以满足我们的需求。

让我们在控制台上按ctrl/cmd+C停止ng服务器。

代码结构

现在,使用代码编辑器打开您的项目。 我正在使用Visual Code,这是轻量级的,并且提供TypeScript的代码语法校正。 下面的屏幕快照显示了代码的结构。

代码结构
代码结构

src目录包含您的源代码。 这是我们需要了解的一些导入文件/目录。

  • package.json:此JSON文件描述了您所有的应用程序依赖项。
  • Index.html:此HTML文件用作您的应用程序的基础,并定义您的单页应用程序。
  • styles.css:此CSS文件是应用程序的主要样式表文件,包含您的应用程序级CSS类。
  • app-routing.module.ts:此文件位于src / app / app-routing.module.ts中,包含您的应用程序流以及用户如何浏览您的应用程序。
  • polyfills.ts:Angular中的Polyfills是几行代码,这些代码使您的应用程序与不同的浏览器兼容。
  • app.module.ts:此文件位于src / app / app.module.ts下,并定义了不同的Angular模块和组件。 它还用于在您的应用程序中配置AWS Amplify。
  • app.component.html:此文件包含应用程序结构; 您可以在此文件中定义页眉/页脚和路由出口。 内容将根据您导航到的页面而被替换。

用户界面

现在我们已经熟悉了代码结构,让我们开始对项目进行更改。

现在打开styles.json文件,并将下面的CSS代码复制到该文件中。 在这里,我们将使用默认的Angular CSS作为模板,并将其分离到应用程序级CSS文件中。

// CSS部分
:host {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #333;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 8px 0;
  }
  p {
    margin: 0;
  }
  .spacer {
    flex: 1;
  }
  .toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #1976d2;
    color: white;
    font-weight: 600;
  }
  .toolbar img {
    margin: 0 16px;
  }
  .toolbar #twitter-logo {
    height: 40px;
    margin: 0 16px;
  }
  .toolbar #twitter-logo:hover {
    opacity: 0.8;
  }
  .content {
    display: flex;
    margin: 82px auto 32px;
    padding: 0 16px;
    max-width: 960px;
    flex-direction: column;
    align-items: center;
  }
  svg.material-icons {
    height: 24px;
    width: auto;
  }
  svg.material-icons:not(:last-child) {
    margin-right: 8px;
  }
  .card svg.material-icons path {
    fill: #888;
  }
  .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
  }
  .card {
    border-radius: 4px;
    border: 1px solid #eee;
    background-color: #fafafa;
    height: 40px;
    width: 200px;
    margin: 0 8px 16px;
    padding: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease-in-out;
    line-height: 24px;
  }
  .card-container .card:not(:last-child) {
    margin-right: 0;
  }
  .card.card-small {
    height: 16px;
    width: 168px;
  }
  .card-container .card:not(.highlight-card) {
    cursor: pointer;
  }
  .card-container .card:not(.highlight-card):hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
  }
  .card-container .card:not(.highlight-card):hover .material-icons path {
    fill: rgb(105, 103, 103);
  }
  .card.highlight-card {
    background-color: #1976d2;
    color: white;
    font-weight: 600;
    border: none;
    width: auto;
    min-width: 30%;
    position: relative;
  }
  .card.card.highlight-card span {
    margin-left: 60px;
  }
  svg#rocket {
    width: 80px;
    position: absolute;
    left: -10px;
    top: -24px;
  }
  svg#rocket-smoke {
    height: calc(100vh - 95px);
    position: absolute;
    top: 10px;
    right: 180px;
    z-index: -10;
  }
  a,
  a:visited,
  a:hover {
    color: #1976d2;
    text-decoration: none;
  }
  a:hover {
    color: #125699;
  }
  .terminal {
    position: relative;
    width: 80%;
    max-width: 600px;
    border-radius: 6px;
    padding-top: 45px;
    margin-top: 8px;
    overflow: hidden;
    background-color: rgb(15, 15, 16);
  }
  .terminal::before {
    content: "\2022 \2022 \2022";
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: rgb(58, 58, 58);
    color: #c2c3c4;
    width: 100%;
    font-size: 2rem;
    line-height: 0;
    padding: 14px 0;
    text-indent: 4px;
  }
  .terminal pre {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
    color: white;
    padding: 0 1rem 1rem;
    margin: 0;
  }
  .circle-link {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    margin: 8px;
    background-color: white;
    border: 1px solid #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    transition: 1s ease-out;
  }
  .circle-link:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
  }
  footer {
    margin-top: 8px;
    display: flex;
    align-items: center;
    line-height: 20px;
  }
  footer a {
    display: flex;
    align-items: center;
  }
  .github-star-badge {
    color: #24292e;
    display: flex;
    align-items: center;
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid rgba(27,31,35,.2);
    border-radius: 3px;
    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
    margin-left: 4px;
    font-weight: 600;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
  }
  .github-star-badge:hover {
    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
    border-color: rgba(27,31,35,.35);
    background-position: -.5em;
  }
  .github-star-badge .material-icons {
    height: 16px;
    width: 16px;
    margin-right: 4px;
  }
  svg#clouds {
    position: fixed;
    bottom: -160px;
    left: -230px;
    z-index: -10;
    width: 1920px;
  }
  /* Responsive Styles */
  @media screen and (max-width: 767px) {
    .card-container > *:not(.circle-link) ,
    .terminal {
      width: 100%;
    }
    .card:not(.highlight-card) {
      height: 16px;
      margin: 8px 0;
    }
    .card.highlight-card span {
      margin-left: 72px;
    }
    svg#rocket-smoke {
      right: 120px;
      transform: rotate(-5deg);
    }
  }
  @media screen and (max-width: 575px) {
    svg#rocket-smoke {
      display: none;
      visibility: hidden;
    }
  }

现在,用下面的代码替换app.component.html的内容。 在这里,我们只是删除Angular为我们生成的默认代码。 我们只是保留标题,但是如果您需要对其进行任何更改,请随时进行更改。

<div class="toolbar" role="banner">
  <img
    width="40"
    alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="/>
  <span>Lex Demo App</span>
    <div class="spacer"></div>
    <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/teach_me_more" title="Twitter">
      <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
        <rect width="400" height="400" fill="none"/>
        <path d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23" fill="#fff"/>
      </svg>
    </a>
</div>
<div class="content" role="main">
</div>
<router-outlet></router-outlet>

Angular使用 </ router-outlet>标记将内容动态替换为您所在的页面。 此处定义的其他内容将保持不变。

现在让我们启动节点服务器,看看我们的应用程序仍在运行,并且我们删除了不必要的Angular文档。 该应用程序和我们的应用程序页面上的其他链接看起来要简单得多。

现在,我们将对app.component.html进行更改,并以只读模式添加文本区域以保持对话。 然后,我们将添加一个输入文本以询问问题或向lex服务提供文本输入,我们将具有一个发送按钮,以便当我们单击该按钮时,它将接受我们的输入并回拨到AWS lex服务,并且我们的聊天机器人可以响应 。

我们将在内容div中将以下代码添加到我们的app.component.html中。

<div class="content" role="main">
  <textarea readonly="readonly" name="conversation" rows="10" cols="80"></textarea>
    <br/>
    <span><input type="text" size="60" name="message" style="line-height:2.0em;" enterkeyhint=""/>
    <button  type="button" style="line-height: 2em;">Send</button></span>
</div>

现在,我们的应用程序将如下所示:

程序运行效果图
程序运行效果图

现在,我们对该页面进行一些更改,并添加下面突出显示的代码。

额外代码
额外代码
<div class="content" role="main">
  <textarea readonly="readonly" name="conversation" [(ngModel)]="conversation" rows="10" cols="80"></textarea>
    <br/>
    <span><input type="text" size="60" name="message" [(ngModel)]="message"  style="line-height:2.0em;" enterkeyhint=""/>
    <button (click)="startChat()" type="button" style="line-height: 2em;">Send</button></span>
</div>

使用[(ngModel)]指令,我们将这些字段绑定到组件属性,稍后将对其进行定义。 以类似的方式,我们在“发送”按钮上定义了一个click事件,该事件将调用app.component.ts中的startChat函数,我们仍然必须对其进行定义。

现在我们的应用程序用户界面已经准备就绪,我们可以对应用程序逻辑进行更改以使此页面正常运行。

AWS Amplify安装

在对页面进行更多更改之前,我们需要安装AWS Amplify依赖项。

让我们切换到终端并输入npm install aws-amplify来安装AWS Amplify。 AWS Amplify是一个JavaScript CLI,提供了连接到AWS服务并提供所需服务供您使用的功能。 它还允许提供实用程序方法来与Amazon Lex集成。

NPM安装AWS Amplify
NPM安装AWS Amplify

现在,由于您已经安装了AWS Amplify,因此请使用以下命令对其进行初始化。

amplify init
AWS Amplify初始化
AWS Amplify初始化

这将询问您一些问题,以配置项目以利用AWS Amplify。 回答这些问题,如下所示:

Enter a name for the project lexdemoapp
Enter a name for the environment dev
Choose your default editor: Visual Studio Code
Choose the type of app that you are building : javascript
What javascript framework are you using: angular
Source Directory Path: src
Distribution Directory Path : dist
Build Command: npm run-script build
Start Command : ng serve
Do you want to use an AWS profile? (Y/n) n 
初始化过程询问
初始化过程询问

现在,此CLI将要求您提供AWS用户访问密钥和秘密密钥,以连接到您的AWS账户以置备您的AWS资源。 如果您没有,则可以继续并登录到AWS管理控制台,导航到IAM,并创建具有管理员特权的新AWS用户,并生成访问权限/用于程序访问的密钥。

仅当您要使用CLI来配置AWS Lex Chatbot时,才需要执行此步骤。 如果要使用AWS管理控制台创建聊天机器人和意图,则可以忽略以下配置。

聊天机器人配置
聊天机器人配置

提供访问密钥和机密并选择了首选的AWS区域后,AWS Amplify将在后台运行CloudFormation模板并创建它需要交互的所需角色。

初始化成功
初始化成功

现在,我们已经安装并配置了AWS Amplify,因此,我们添加Lex模块以在项目中启用Amazon Lex并创建一个聊天机器人。 在控制台中输入以下命令:

amplify add interactions
创建聊天机器人命令
创建聊天机器人命令

Amplify将要求您配置聊天机器人并进行一系列配置,您也可以使用AWS控制台进行更新。

聊天机器人配置
聊天机器人配置

现在它要求我们创建一个新的意图。 在这里,我们将创建一个酒店房间预订意图,以便我们的用户可以预订酒店预订。

? Provide a friendly resource name that will be used to label this category in the project: lexdemoapp
? Would you like to start with a sample chatbot or start from scratch? Start from scratch
? Enter a name for your bot: hotelbooking
? Choose an output voice: None. This is only a text-based application.
? After how long should the session timeout (in minutes)? 1
? Please indicate if your use of this bot is subject to the Children's Online Privacy Protection Act (COPPA).

Learn more: https://www.ftc.gov/tips-advice/business-center/guidance/complying-coppa-frequentl

y-asked-questions No
意图名称
意图名称

现在,我们已经为意图提供了一个名称,因此现在该是我们聊天机器人可以采取行动的不同话语或短语的时候了。

机器人回应
机器人回应

在此应用程序中,我们提供了四种话语,因此,如果用户键入或说出与这些话语匹配的内容,我们的酒店预订聊天机器人将做出响应。

现在是时候开始添加插槽以从用户那里收集一些数据了。 我们将在此处添加我们的第一个插槽,并指定CLI需要我们提供的收集信息:用户的名字。

添加slot
添加slot

CLI要求我们提供用于存储数据的插槽的名称,我们可以使用{firstName}访问它。 CLI还要求提供插槽类型。 我们可以创建插槽类型,也可以使用Amazon现有的数据类型。 我们在这里使用AMAZON.US_FIRST_NAME来收集用户的名字。 插槽类型是一种数据类型,因此Lex可以验证数据。 然后,我们指定一个问题,要求用户提供输入以及是否需要输入。

现在,我们创建了一个插槽来收集用户的名字。 使用这些步骤,我们将创建更多的位置,以收集用户的姓氏,计划旅行的城市用户以及预订日期。

添加slot图一
添加slot图一
添加slot图二
添加slot图二
添加slot图三
添加slot图三
添加slot图四
添加slot图四

现在,我们已经添加了用户需要的所有广告位类型,因此现在我们向意图添加确认提示,以便我们可以确认用户提供的详细信息。

添加确认提示
添加确认提示

在上面的屏幕截图中,我们为意图提供了一个确认提示配置,在其中我们使用{}括号中的插槽名称显示用户提供的详细信息。 类似地,如果用户决定不继续,则可以提供取消消息。

现在,我们将要求最终配置以满足确认的用户请求。 我们可以选择执行Lambda函数(该函数实际上可以在数据库中创建预留),也可以连接到第三方服务。 对于此演示,我们仅显示客户端提供的详细信息,而未连接到Lambda。 CLI给我们提供了一个添加更多意图的选项,然后我们可以将它们关联起来,但是对于此演示,我们仅需一个意图就可以了。

示意图
示意图
amplify push
amplify push示意图
amplify push示意图

按下Amplify命令并在AWS账户中创建了所需的角色和资源后,您将看到一条确认消息。

amplify push确认提示
amplify push确认提示

至此,所有后端资源均已准备就绪,您可以登录到您的AWS账户并查看/调整配置。

Amazon Lex Chatbot配置

登录到AWS控制台并转到Lex服务。

Amazon Lex
Amazon Lex

现在,单击我们创建的hotelbooking_dev聊天机器人,以查看不同的意图和配置。

查看机器人配置
查看机器人配置

在这里,我们可以看到我们的意图列在左侧,而我们提供的不同话语则列在主要内容区域中。 下面的屏幕截图显示了我们按照定义的顺序配置了所有要问问题的不同插槽。

查看slot
查看slot

“确认”部分显示有关提示的详细信息,当收集所有插槽数据时,提示将显示给用户。 您可以将插槽输入称为动态数据,如下所示,例如{firstName}。

查看确认信息
查看确认信息

与确认消息类似,当用户用“否”回答确认提示时,将向用户显示取消消息。

确认信息
确认信息

您可以选择在确认中执行Lambda函数,也可以仅将参数返回给非生产应用程序的客户端。 本部分用于通过调用Lambda函数来满足用户的意图。

Lambda函数
Lambda函数

您可以单击右侧的“测试聊天机器人”链接来实际测试您创建的聊天机器人。

测试聊天机器人
测试聊天机器人

您可以在左侧面板中配置错误处理详细信息,并在出现与您指定的言辞不符的情况时向用户指定说明提示。

指定用户提示
指定用户提示

如果对配置进行了任何更改,则可以单击顶部的构建按钮以将这些更改应用到您的机器人,也可以通过单击发布按钮来创建不同版本的机器人。 您可以导航到其他选项卡以配置更多详细信息。

更多配置选项
更多配置选项

在“设置”选项卡中,您可以指定聊天机器人是仅基于文本的聊天机器人,还是也有基于语音的聊天机器人。 “通道”选项卡提供了一种机制,可将您的聊天机器人配置并部署到Facebook,Kik,Slack或Twilio等不同的通道。

Channels
Channels

在上面的屏幕中,您可以提供有关聊天机器人如何与Facebook集成的详细信息。 为此,您需要在Facebook开发人员门户上创建一个Facebook应用程序,但是在这里我们将不需要进行任何配置,因为我们将把该bot与我们的Web应用程序集成在一起。

监视选项卡具有CloudWatch指标详细信息,该详细信息显示用户如何与我们的机器人进行交互。

监控信息面板
监控信息面板

现在,既然我们已经配置了所有详细信息,让我们回到代码编辑器来配置前端以连接到该机器人。

在您的代码编辑器中,打开polyfills.ts文件。 该文件只有一个导入行。 然后粘贴下面的代码。

// Javascript
(window as any).global = window;
编辑器增加代码
编辑器增加代码

现在转到app.module.ts并复制粘贴以下代码:

// TypeScript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import Amplify, {Interactions } from 'aws-amplify';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
Amplify.configure({
  Auth: {
    identityPoolId: 'YOUR_IDENTITY_POOL',
    region: 'us-east-1'
  },
  Interactions: {
    bots: {
      "hotelbooking_dev": {
        "name": "hotelbooking_dev",
        "alias": "$LATEST",
        "region": "us-east-1",
      },
    }
  }
});
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我们在这里做几件事:

  • 我们将从此处的AWS Amplify库导入Interactions模块。
  • 我们在此处配置AWS Amplify,以便它可以在服务器端进行通信。 我们需要使用您可以从项目中的aws-exports.js文件中获取的identityPoolId值,或者可以从联合身份验证中的AWS控制台获取该值。 通过此设置,此客户端应用程序可以使用Cognito服务以安全的方式连接到AWS服务。
  • 我们还导入了FormModule,以便可以在Angular表单中使用表单绑定。
AWS Amplify库导入Interactions模块
AWS Amplify库导入Interactions模块
identityPoolId
identityPoolId

至此,我们已经完成了针对Lex的AWS Amplify的配置,因此让我们对app.component.ts文件进行更改以实现我们的startChat()方法。 打开app.component.ts文件,然后复制/粘贴以下代码。 让我们在这里看几件事。

// TypeScript
import { Component, OnInit, Input, inject, Inject } from '@angular/core';
import { Interactions } from 'aws-amplify';
import { Router } from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'aws-demo-chatbot';
  conversation: string = '';
  message: string;
  constructor(private router: Router) { }
  ngOnInit(): void {
  }
  async startChat() {
    // Provide a bot name and user input
    this.conversation = this.conversation + "\nYou::" + this.message;
    var response = await Interactions.send("hotelbooking_dev", this.message.toString());
    //Log chatbot response
    console.log(response);
    this.message = '';
    if(response && response.message){
      this.conversation = this.conversation + "\nBot::" + response.message
    }
    if(response && !response.message){
      this.conversation = this.conversation + "\nBot::" + "Your Hotel Room Booking is complete."
    }
  }
}
  • 我们从aws-amplify导入了Interactions,以致电Lex进行聊天机器人交互。
  • 我们添加了startChat方法,当用户单击“发送”按钮时,将从主UI调用该方法。
  • 我们的组件中有两个属性,即消息和对话,分别绑定到UI输入字段和文本区域字段。
  • 我们正在异步调用Interactions.send方法,并将用户键入的文本传递给酒店预订聊天机器人。 该方法将调用AWS Lex服务,并且聊天机器人将以适当的响应进行响应。 从服务获得响应后,我们将提取Lex服务响应并将其附加到文本区域字段。

运行

我们已经完成了编写应用程序的工作,现在是时候看看实际情况了。 让我们使用以下命令启动该应用程序:

ng serve --ssl=true

现在,让我们在浏览器中加载应用程序,在输入字段中键入“ hi”,然后单击“发送”按钮。 您将看到您的文本已发送到聊天机器人,并且该机器人已通过询问您的信息以开始预订过程进行了响应。

运行web应用
运行web应用

提供所有必需的数据后,您将看到chatbot在这里完成了您的酒店客房预订。

运行演示
运行演示

现在,让我们重新登录到AWS控制台,看看我们是否开始在“监控”选项卡中看到聊天机器人的任何指标。 您可以看到我们在这里为我们的应用程序发布了一些指标。

监控展示
监控展示

这些指标可能不是实时的,因此可能会有所延迟,但是您还可以查看人们与机器人进行交互所使用的言语。 Amazon Lex将其用于深度学习并改进了算法。

总结

现在,我们已经完成了创建应用程序的工作,您可以看到使用AWS Lex创建聊天机器人并将其与您的应用程序集成是多么容易。 Amazon Lex具有很高的成本效益,并具有按需付费的定价模式。

亚马逊在第一年免费提供10,000个文本请求和5,000个语音请求,此后,每个文本请求的费用为0.004美元,每个语音请求的费用为0.00075美元。 只需进行一些配置,就可以将机器学习和自然语言处理的功能嵌入到您的应用程序中。

源码下载

大家感兴趣的,可以将源码下载研究学习。

SO资源郑重声明:
1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3187589@qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!

SO资源 » 使用AWS Lex构建Angular聊天机器人