使用 JavaScript 和 Gemini AI 创建聊天机器人
- Susan Sarandon原创
- 2024-12-14 18:30:10244浏览
那么，你好吗？
我正在查看我的 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;
}
结果应该是类似于下图所示的屏幕：
创建客户端逻辑
我们的应用程序是一个聊天机器人，它将与 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中文网其他相关文章！