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

那么，你好吗？

我正在查看我的 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 开始吧。

  
    <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">
  
  
    <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 文件如下所示：

  
    <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">
  
  
    <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 进行通信并与它谈论生命、宇宙和其他一切！

下次再见！