使用 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 進行通訊並與它談論生命、宇宙和其他一切！

下次再見！