使用 JavaScript 和 Gemini AI 创建聊天机器人-js教程-PHP中文网

首页

web前端

js教程

使用 JavaScript 和 Gemini AI 创建聊天机器人

Susan Sarandon

Dec 14, 2024 pm 06:30 PM

那么，你好吗？

我正在查看我的 github 上的一些项目，并发现了我最近使用 Google Gemini 创建的聊天机器人。我们的想法是创建一个语言助手，你可以在其中与人工智能交谈，以提高你用你想要的语言的技能。

所以我想：“为什么不与大家分享我是如何完成这个项目的呢？”。这就是我写在这里的原因，向您展示我是如何完成每个部分的。那么让我们从应用程序的前端开始。

开始一个新项目

好吧，为了证明我将在项目中采取的一些行动，我会立即说我们将使用express.js创建一个“服务器”，我们将在其中提供一个api路由“/chat”将用于前端和 Gemini API 之间的通信。

因此，我们需要使用 npm init -y 命令启动我们的项目。结果是一个看起来像这样的 package.json 文件：

{
  "name": "chatbot-ia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

登录后复制

而且，我们需要按如下方式组织我们的文件：

public
  |__ index.html
  |__ style.css
  |__ script.js
package.json

登录后复制

完成后，让我们创建聊天机器人的视觉部分。我们走吧！

创建聊天外观

由于我的想法是创建一个 1 小时实时编码的项目，我决定使用 HTML、CSS 和 JavaScript 为聊天机器人创建一个非常简单的界面。我不擅长设计，所以我选择了我最喜欢的字体和颜色。那么让我们从 HTML 开始吧。

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatbot Assistente de Idiomas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>



<p>E agora o CSS da página<br>
</p>

<pre class="brush:php;toolbar:false">* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.chat-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chat-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.message {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 20px;
  width: auto;
  display: inline-flex;
  max-width: 50%;
  word-wrap: break-word;
}

.model {
  background-color: #e0e0e0;
  color: #333;
  align-self: flex-start;
  justify-content: flex-start;
}

.user {
  background-color: #4caf50;
  color: white;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

#send-button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#send-button:hover {
  background-color: #45a049;
}

登录后复制

结果应该是类似于下图所示的屏幕：

Criando um Chatbot com JavaScript e Gemini AI

创建客户端逻辑

我们的应用程序是一个聊天机器人，它将与 Gemini API 进行通信。因此，我们需要创建进行这种通信的逻辑。为了明确我们应该做什么，我将在下面列出：

获取用户输入的内容
向我们将创建的“/chat”路由发出 POST 请求
在聊天屏幕上显示用户和模型（AI）消息

所以我们开始，首先添加一个事件监听器，仅在 DOM 内容完全加载后执行我们的逻辑：

// script.js
document.addEventListener("DOMContentLoaded", () => {
  const chatForm = document.getElementById("chat-form");
  const chatWindow = document.getElementById("chat-window");
  const userInput = document.getElementById("user-input");

  // ...
});

登录后复制

我们创建常量来捕获我们感兴趣的元素，例如用户键入的输入、消息出现的窗口和表单字段，因为我们将在提交时监听它，然后执行我们的逻辑。

继续，让我们继续第二步，即通过发送用户消息来请求我们将创建的路线。

{
  "name": "chatbot-ia",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

登录后复制

在此代码中，我们正在侦听表单元素上的提交事件。因此，首先我们使用 PreventDefault 来阻止页面重新加载每当我们发送消息时。然后我们获取用户输入的内容，使用trim()从消息的开头和结尾删除空格，并检查消息是否不为空。如果消息为空，我们将立即停止我们的进程。

现在，如果我们有用户的消息，我们将使用 addMessage() 函数将其显示在屏幕上。该函数定义如下：

public
  |__ index.html
  |__ style.css
  |__ script.js
package.json

登录后复制

基本上，它接收谁发送了消息以及消息的文本，并在聊天中显示此信息，添加用户和模型（AI 模型）的正确样式。

好吧，现在回到我们的请求逻辑，如果我们有用户消息，我们需要使用 fetch API 发出 POST 请求，而这个请求的正文就是用户消息。

最后，如果我们收到对此请求的响应，我们将在聊天中显示模特的消息。否则，我们将获取错误并将其显示在控制台中，使用 console.error() 或以自定义方式在聊天本身中显示消息。为了提高聊天可用性，我们使用 userInput.value = ""; 清理了用户消息输入。

script.js 文件如下所示：

<!DOCTYPE html>
<html lang="pt-br">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Chatbot Assistente de Idiomas</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div>



<p>E agora o CSS da página<br>
</p>

<pre class="brush:php;toolbar:false">* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f2f2f2;
}

.chat-container {
  width: 100%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.chat-box {
  height: 300px;
  max-height: 500px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

.chat-form {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.message {
  padding: 10px;
  margin-bottom: 8px;
  border-radius: 20px;
  width: auto;
  display: inline-flex;
  max-width: 50%;
  word-wrap: break-word;
}

.model {
  background-color: #e0e0e0;
  color: #333;
  align-self: flex-start;
  justify-content: flex-start;
}

.user {
  background-color: #4caf50;
  color: white;
  align-self: flex-end;
  justify-content: flex-end;
  margin-left: auto;
}

.input-container {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
}

#user-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  outline: none;
}

#send-button {
  margin-left: 10px;
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

#send-button:hover {
  background-color: #45a049;
}

登录后复制

这样我们就完成了聊天机器人的前端部分。下一步将是创建我们的“服务器”，与 Gemini API 进行通信并与它谈论生命、宇宙和其他一切！

下次再见！

以上是使用 JavaScript 和 Gemini AI 创建聊天机器人的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7758

Java教程

1644

CakePHP 教程

1399

Laravel 教程

1293

PHP教程

1234

显示更多

Related knowledge

前端热敏纸小票打印遇到乱码问题怎么办？ Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中，小票打印是一个常见的需求。然而，很多开发者在实...

神秘的JavaScript：它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。