10 分钟内将 ChatBot 添加到您的 JavaScript 应用程序!

2025-06-07

10 分钟内将 ChatBot 添加到您的 JavaScript 应用程序!

聊天机器人无处不在,它们每天都在改变世界。最新的机器人设计得如此巧妙,以至于你很难分辨出你是在和真人说话,还是在和机器人说话。

我们无需任何机器学习和深度学习知识即可使用许多工具。是的,你没听错,你只需要熟悉该工具环境,就能构建一个机器人,它可以接手任何披萨店所有销售人员的工作。你只需要一个主管,当机器人无法解决客户疑问时,就会将电话转接给他。

本教程将使用 Dialogflow,因为它是最容易上手的工具,并且拥有庞大的社区支持。此外,它使用与 Google Assistant 相同的算法,因此功能也最为强大。此外,您还可以探索亚马逊和微软提供的许多其他工具。

让我们深入探讨一下主题:

如何在我的 Web 应用中添加聊天机器人?开始吧……

让我们以 Coffee-Mart 咖啡店为例

这是演示:
查看演示
代码 Github
您可以在设置>导出和导入下的 Dialogflow UI 控制台中导入 .zip 文件

Coffee-Mart 仅提供 5 种口味的咖啡:

  1. 法国香草
  2. 焦糖玛奇朵
  3. 摩卡
  4. 榛子
  5. 巧克力

有 3 种不同罩杯尺寸:

  1. 小的
  2. 中等的
  3. 大的

现在,我们想在 Web 应用程序中添加一个机器人,客户可以通过该机器人轻松下单,而无需浏览您的网站。
就像这样

替代文本

开始了:

有一些术语你必须熟悉,我将在示例中详细讨论它们

  • 意图
  • 实体
  • 上下文

前往https://dialogflow.com/并登录。然后前往控制台,点击“创建新代理”。根据需要命名代理,然后点击“创建”。
如果需要,您可以将 GCP(Google Cloud Project)连接到代理。GCP 通常用于在聊天机器人和数据库之间进行数据处理,但我们也可以使用其他选项(例如使用 Firebase Cloud Functions 的 AWS)来存储数据。

替代文本

意图:

这些是用户执行的操作。一个机器人包含许多意图。每当用户说出任何内容时,都会有一个意图被针对。
我们为机器人要执行的每个特定任务创建意图。每个意图都有两个主要组成部分。
最主要的是训练短语,我们在其中添加了用户可以说的所有示例文本。
第二个是响应,我们定义了每当意图匹配时向用户显示的响应。

以咖啡店为例,我们将创建第一个意图“shop-hours”,每当用户询问商店营业时间时,都会调用该意图。
点击“创建意图”并输入意图名称。在“训练短语”下,添加示例对话,用户可以在询问商店营业时间时说出这些对话,例如:

替代文本

现在我们将在响应部分下添加响应:

替代文本

然后点击“保存”。我们刚刚创建了第一个意图。您可以通过在右侧询问商店营业时间进行测试。请注意,如果您以不同的方式询问商店营业时间,我们的代理也会准确回复。这是因为 Dialogflow 使用了深度学习和机器学习算法。听起来很疯狂,让我们创建第二个意图。

点击左侧栏的“Intents”,您将看到所有 Intent 的列表。其中有一个默认的欢迎 Intent,我们现在将对其进行修改。

替代文本

每当用户打招呼或试图通过说“嗨”、“你好”来开启对话时,都会使用欢迎意图。这里有一系列训练短语示例供您参考。我们不需要修改它,但需要修改它的响应,如下所示:

替代文本

尝试添加多个回复,这样我们的代理听起来就不像机器了。然后点击“保存”并测试。

现在我们将创建第二个(主要)Intent,名为“coffee-order”。它将用于用户下单。目前,它是一个简单的Intent,每当用户发出“想要下单”的指令时,它就会触发。用户可以说“我想要一杯咖啡”,但需要注意的是咖啡的种类和杯子的尺寸。这时,实体就派上用场了。

实体:

这些实体用于从用户所说的话中提取重要数据。例如,用户可以说“我可以喝杯香草咖啡吗”,在这个句子中,“香草”是一个单独的实体,它为我们的意图提供了有用的信息。有两种类型的实体

  1. 系统实体:这些是 Dialogflow 提供的内置实体,它们通常涵盖数量、数字、时间、日期等。
  2. 开发者实体:这些是为获取特定数据而创建的定制实体。

将实体放入我们的咖啡订单意图中

首先,我们将列出咖啡订单所需的所有类型的实体

  • 咖啡杯大小
  • 咖啡味
  • 交货日期和交货时间[系统实体]
  • 杯子数量[系统实体]

点击“创建实体”,并将其命名为“coffee-cup-size”。请务必勾选“定义同义词”,因为用户可以输入其他关键词。
现在,我们将在列表中逐一添加杯子尺寸及其同义词。请确保添加所有可能的同义词。然后点击“保存”。

替代文本

类似地,我们创建了第二个实体,名为“coffee-flavor”。传入 5 种可用的口味和同义词,如下所示:

替代文本

现在是时候将我们的意图与这两个实体连接起来了。系统实体默认已连接,因此无需连接。
自定义实体则通过意图声明下的训练短语部分添加。
创建名为“coffee-order”的意图后,我们将添加订购咖啡的训练短语。要连接意图,我们需要双击关键词,并从提示列表中为其分配一个特定实体。每个句子可以包含任意数量的实体。

替代文本

这样,实体就与我们的意图连接起来了。但是,如果用户没有提供任何关于咖啡的详细信息,只是说“我想要一杯咖啡”,该怎么办呢?在这种情况下,代理应该提示用户提供未提供的详细信息。
为此,我们必须在“操作和参数”部分下根据需要检查所有实体。现​​在,我们还必须在提示列下为每个实体传递提示文本。

替代文本

点击“定义提示”后,将打开一个菜单。在这里我们可以为每个实体输入提示信息。

替代文本

这样,我们就为所有 5 个实体输入了提示信息。此外,系统实体并非默认连接,而是必须设置为必需。

替代文本

现在是时候为我们的“订购咖啡”意图提供响应了,但这次我们想重复用户所订购的内容,这可以使用“操作和参数”下的值列中的 $keywords 来实现。在响应中使用这些关键字,将被用户提供的原始数据替换。

替代文本

单击“保存”并测试
“工作”,如果不行,请在评论部分提供您的问题。

现在我们将在 Web 上部署它,以便将其添加到我们的 JavaScript 应用中。前往“集成”并启用 Web 演示,系统会提供一个链接,您可以将其用作网站的 i-frame。此外,本文还未涵盖其他一些您可以轻松使用的选项。

替代文本

还有很多东西,比如
- 用于延续我们的意图的
上下文 - 在数据库中下订单 -
从数据库接收实体。
我将在其他帖子中介绍它们,

以下是一些可以帮助您成为聊天机器人开发大师的资源:
官方免费 Dialogflow 课程
Udemy 免费课程
Dialogflow 文档

下次再见。
非常感谢。

文章来源:https://dev.to/mshahzaib101/add-a-chatbot-to-your-javascript-app-in-10-mins-3mdm
PREV
使用 Phaser Swap'N'Pop 制作视频游戏
NEXT
Create React App 中的绝对导入