使用 HTML、CSS 和 vanilla JavaScript 创建基本的聊天机器人

在本 Web 开发教程中,我们将了解如何使用 HTML、CSS 和 vanilla JavaScript 创建基本的聊天机器人。本练习侧重于 JS 基础知识,而不是任何类型的人工智能 (AI)。为了使该过程更简单,更易于学习,我没有使用任何第三方库。我将通过专注于JavaScript编程语言的基础知识从头开始构建聊天机器人。

本练习旨在帮助 JavaScript 程序员了解聊天机器人的工作原理以及 Web 开发人员如何使用 JavaScript 构建基本的聊天机器人。

文章目录
在 JavaScript 中创建聊天机器人
创建.js文件
聊天机器人的JavaScript函数
在 JavaScript 中编程机器人响应
聊天机器人触发器和响应
更新 DOM
聊天机器人编程教程
在 JavaScript 中创建聊天机器人
首先,首先创建一个 HTML 文件。让我们创建一个文件名 index.html,其中包含以下代码:

<!DOCTYPE html>

<html><div id="main">

    <div><input id="input" type="text" placeholder="Write something..." autocomplete="off"  autofocus="true"/></div>

</div></html>

在这里,我们创建了一个 id 为“main”的 div,其中我们有一个输入字段,用户可以在其中键入文本并与机器人通信。这是基本的 HTML 设置。在此过程中,我们将添加更多功能。

接下来,我们还需要向网页添加一些布局样式。因此,让我们创建一个名为 style.css 的CSS文件。使用以下样式表代码:

#main { 
    position: fixed; 
    top: 40%; 
    right: 200px;} 
.messages {
	display: flex;
	flex-direction: column;
	overflow: scroll;
	height: 90%;
	width: 100%;
	background-color: white;
	padding: 15px;
	margin: 15px;
	border-radius: 10px;
}
 

创建.js文件
现在,创建一个.js文件,然后使用以下 JavaScript 代码在其中设置一些基本功能:

document.addEventListener("DOMContentLoaded", () => {
  document.querySelector("#input").addEventListener("keydown", function(e) {
    if (e.code === "Enter") {
        console.log("You pressed the enter button!")
    }
  });
});

请注意,在此处添加 DOMContentLoaded 侦听器可确保 JavaScript 仅在 HTML 完成渲染时加载。顺便说一下,这是一个很好的编码实践。

一些用户发现一次又一次地单击发送按钮以通过聊天应用程序发送消息是一项繁琐的任务。因此,我们希望在此应用程序中实现即时消息功能,该功能将使用户在完成键入消息后只需按 Enter 键即可发送消息。

这可以通过以下方式完成:

    const inputField = document.getElementById("input")
    inputField.addEventListener("keydown", function(e) {
        if (e.code === "Enter") {
            let input = inputField.value;
            inputField.value = "";
            output(input);
    }
  });

通过添加 e.code == ‘Enter’,我们告诉事件侦听器我们只关心 Enter 键。我们已将控制台日志替换为一些正在执行这些操作的语句:

将输入字段值分配给局部变量。

我们还希望在提交后清除表单输入字段,因此我们将输入字段的值设置为空字符串。

将输入值传递给我们的下一个函数“output”

聊天机器人的JavaScript函数
在下一步中,我们将创建一些 JavaScript 函数来制作机器人。

首先,我们希望控制用户在输入表单字段中键入的文本。无论用户在输入字段中键入什么,我们都希望使用正则表达式使其更加标准,如以下代码片段所示:

function output()
{
        let text = input.toLowerCase().replace(/[^\w\s\d]/gi, "");}

上述正则表达式将删除单词、数字和空格以外的所有内容。我们还想删除所有流氓角色以及所有可能使比赛变得困难的东西。因此,可以通过以下方式完成:

function output()
{
      let text = input.toLowerCase().replace(/[^\w\s\d]/gi, "");
        …     
     
     text = text
    .replace(/ a /g, " ")
    .replace(/whats/g, "what is")
    .replace(/please /g, "")
    .replace(/ please/g, "");
}

例如,如果用户类型是“发生了什么”或“发生了什么”或“发生了什么”,而不是单独考虑这些差异,我们会将它们一视同仁。

现在我们已经了解了用户输入的外观,让我们创建一组可能的机器人响应和用户文本。

在 JavaScript 中编程机器人响应
我们的下一个任务是根据触发器(用户文本)处理机器人响应。因此,我将创建包含话语和答案的数组数组。为简单起见,我将简短地介绍它们。

const utterances = [ 
  ["how are you", "how is life", "how are things"],        //0
  ["hi", "hey", "hello", "good morning", "good afternoon"],      //1
  ["what are you doing", "what is going on", "what is up"],      //2
  ["how old are you"],					//3
  ["who are you", "are you human", "are you bot", "are you human or bot"],   //4;
 
// Possible responses corresponding to triggers
 
const answers = [
   [
    "Fine... how are you?",
    "Pretty well, how are you?",
    "Fantastic, how are you?"
  ],                                                                                  	//0
  [
    "Hello!", "Hi!", "Hey!", "Hi there!", "Howdy"
  ],						//1
  [
    "Nothing much",
    "About to go to sleep",
    "Can you guess?",
    "I don't know actually"
  ],						//2
  ["I am infinite"],					//3
  ["I am just a bot", "I am a bot. What are you?"],	//4];
 
// For any other user input
 
const alternatives = [
  "Go on...",
  "Try again",
];

如果您注意到每个数组的索引以及它们的排列方式,您将看到与话语 [0] 中的选项匹配的用户文本将使用答案 [0] 中的选项进行响应,依此类推。当然,替代数组适用于第一个数组中不匹配的输入值。这解释了基本的聊天机器人如何在引擎盖下工作。

聊天机器人触发器和响应
现在我们可以熟悉触发器和响应的外观。下一步是创建一个函数来比较这些数组:

function compare(utterancesArray, answersArray, string) {
  let item;
  for (let x = 0; x < utterancesArray.length; x++) {
    for (let y = 0; y < utterancesArray[x].length; y++) {
      if (utterancesArray[x][y] === string) {
        items = answersArray[x];
        item = items[Math.floor(Math.random() * items.length)];
        }
      }
   }
  return item;
}

现在我们通过以下方式从原始函数 ‘output()’ 调用此函数:

function output(input) {
  let product;
  let text = input.toLowerCase().replace(/[^\w\s\d]/gi, "");
  text = text
    .replace(/ a /g, " ")
    .replace(/whats/g, "what is")
    .replace(/please /g, "")
    .replace(/ please/g, "");
 
  if (compare(utterances, answers, text)) {
    product = compare(utterances, answers, text);
  } 
  else {
    product = alternatives[Math.floor(Math.random() * alternatives.length)];
  }
 
  //update  DOM
  addChatEntry (input, product);
}

在比较数组之后,我们的“output”函数最终调用addChatEntry()函数以使对话呈现在网页上。

更新 DOM
现在剩下的最后一件事就是更新 DOM。所以我们必须创建一个函数addChatEntry():

function addChatEntry(input, product) {
  const messagesContainer = document.getElementById("messages");
  
  let userDiv = document.createElement("div");
  userDiv.id = "user";
  userDiv.className = "user response";
  userDiv.innerHTML = `${input}`;
  messagesContainer.appendChild(userDiv);
 
  let botDiv = document.createElement("div");
  let botText = document.createElement("span");
  botDiv.id = "bot";
  botDiv.className = "bot response";
  botText.innerText = "Typing...";
  botDiv.appendChild(botText);
  messagesContainer.appendChild(botDiv);setTimeout(() => {
    botText.innerText = `${product}`;
  }, 2000); }

此函数在同一页面上为机器人和用户字段创建消息线程。

在 setTimeout 函数中,我们将时间延迟设置了两秒,以给人一种机器人思考几秒钟的印象,然后在有人与之交谈时回复。

聊天机器人编程教程
在这里,我们使用Javascript创建了一个基本的聊天机器人。本教程的主要重点是了解创建聊天机器人背后的 Javascript 逻辑。

构建实时聊天机器人可能是一项复杂的任务,但这是值得的。如今,有许多软件开发公司和聊天机器人平台正在构建聊天机器人并将其集成到不同的业务应用程序中。您还可以使用预先编写的代码来构建聊天机器人。它们有助于优化客户沟通和接触目标受众。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: numpy的mkl和vanilla区别在于: 1. MKL是英特尔数学核心库,是一种高性能数学库,可以加速numpy的计算速度。而vanilla则是指普通的numpy库,没有使用MKL加速。 2. MKL需要安装Intel MKL库,而vanilla则不需要。 3. MKL可以使用多线程加速计算,而vanilla则只能使用单线程计算。 4. MKL可以支持更高的精度计算,如double precision和complex double precision,而vanilla则只支持single precision和complex single precision。 总的来说,使用MKL可以加速numpy的计算速度,提高计算效率。但是需要注意的是,MKL需要安装Intel MKL库,而且可能会出现一些兼容性问题。 ### 回答2: numpy是一个功能强大的Python库,用于对数值数据进行计算和处理。其中有两种常见的numpy版本,分别为mkl和vanilla。下面将分别介绍它们的区别。 1. MKL版本 MKL是英特尔数学核心库(Intel Math Kernel Library)的缩写,它是一个高度优化的数学函数库,用于在英特尔处理器上执行高性能数学运算。MKL版本的numpy是通过使用英特尔MKL库提供的高效数学函数来优化计算性能的。 MKL版本的优点: (1)速度快:MKL版本的numpy采用高度优化的数学函数库,这使其运算速度比vanilla版本更快。 (2)充分利用硬件性能:MKL版本使用了多核处理器的能力,可以最大程度地利用处理器的性能。 (3)支持更多的操作:MKL版本支持更多的操作,例如BLAS(基本线性代数子程序)、FFT(快速傅里叶变换)以及随机数生成器等。 2. Vanilla版本 Vanilla版本是numpy的标准版本。它没有使用任何额外的库或软件包,并且没有进行任何优化。Vanilla版本的numpy是从源代码构建的,采用了简单的编译和安装过程。 Vanilla版本的优点: (1)易于安装和使用Vanilla版本没有任何额外的依赖,可以直接从源代码编译安装,使用起来非常简单。 (2)稳定:Vanilla版本保持了numpy的稳定性,没有优化带来的问题。 (3)兼容性好:Vanilla版本在不同平台和操作系统中运行良好,同时兼容各种Python版本。 总之,MKL版本的numpy相对于vanilla版本在性能上有一定优化,但安装和使用的过程可能有所复杂。而vanilla版本的numpy则简单易用、稳定兼容性好,适合一些不需要高性能计算的应用场景。 ### 回答3: NumPy是Python的一个开源数学运算库,提供了各种高性能的数学计算功能。NumPy的mkl和vanilla都是NumPy提供的两种不同的构建方式。这两种方式的主要区别在于底层使用的数学库不同,影响了NumPy计算的速度和效率。 Vanilla版的NumPy是没有引入任何外部数学库的,而MKL版的NumPy使用了Intel的数学核心库MKL(Math Kernel Library),MKL库是Intel公司为数学任务优化的库,包括多种数值算法的实现,可以提升数值计算任务的性能,减少CPU负载。因此,MKL版的NumPy计算速度更快,效率更高。 除了计算速度和效率之外,MKL版的NumPy还提供了一些额外的功能,如支持分块矩阵运算、复杂的数学函数运算等。MKL库提供了高效的线性代数和随机数生成的实现,使得MKL版的NumPy可以在处理大型数据集和复杂的科学计算问题时,更为高效。 在使用NumPy进行数学运算时,选择什么版本会影响代码的性能和稳定性。如果处理的数据较小或者不要求高的性能要求,那么可以使用Vanilla版的NumPy;而如果对性能和效率有较高的要求,则最好使用MKL版的NumPy。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值