JavaScript と Gemini AI を使用してチャットボットを作成する-jsチュートリアル-php.cn

それで、調子はどうですか？

github でいくつかのプロジェクトを調べていたところ、Google Gemini を使用して最近作成したチャットボットを見つけました。そのアイデアは、AI と会話して希望する言語のスキルを向上させることができる言語アシスタントを作成することでした。

そこで私はこう考えました。「私がこのプロジェクトをどのように行ったかをみんなと共有してみませんか？」だからこそ、私がここに書いているのは、私が各部分をどのように行ったかを示すためです。それでは、アプリケーションのフロントエンドから始めましょう。

新しいプロジェクトの開始

プロジェクトで実行するいくつかのアクションを正当化するために、Express.js を使用して「サーバー」を作成し、そこで API を提供するとすぐに言います。フロントエンドと Gemini API 間の通信に使用されるルート '/chat'。

したがって、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");

  // ...
});

ログイン後にコピー

ユーザーが入力する入力、メッセージが表示されるウィンドウ、フォームフィールドなど、関心のある要素をキャプチャするための定数を作成します。送信時にリッスンしてからロジックを実行します。

引き続き、2 番目のステップに進みます。つまり、ユーザーのメッセージを送信して、作成するルートをリクエストします。

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

ログイン後にコピー

このコードでは、form 要素の submit イベントをリッスンしています。したがって、最初に、preventDefault を使用して、メッセージを送信するたびにページが リロード しないようにします。次に、ユーザーが入力した内容をメッセージの先頭と末尾から取得し、trim() で空白スペースを削除し、メッセージが空ではないか、空白かどうかを確認します。メッセージが空の場合は、そこでプロセスを停止します。

ここで、ユーザーのメッセージがある場合は、addMessage() 関数を使用して画面に表示します。この関数は次のように定義されます:

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

ログイン後にコピー

基本的に、メッセージの送信者とメッセージのテキストを受信し、この情報をチャットに表示し、ユーザーと AI モデルである モデル の正しいスタイルを追加します。

さて、リクエストのロジックに戻ります。ユーザーメッセージがある場合は、フェッチ 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 中国語 Web サイトの他の関連記事を参照してください。