保存してください! o

JavaScript と Gemini AI を使用したチャットボットの作成を続けて、プロジェクトの「バックエンド」を追加します。前回は、HTML、CSS、JavaScript を使用してフロントエンドを作成し、ユーザー インターフェイスがユーザーとチャットボット間の會話を反映することを保証しました。

次に、サーバーを作成し、Gemini API と通信するために Express.js でルートを構(gòu)成する必要があります。さあ行こう！

プロジェクトの依存関係のインストール

そうですね、express.js、Google Gemini SDK が必要になります。また、API キーを保護(hù)するために、環(huán)境変數(shù)を操作するために dotenv をインストールします。

npm install @google/generative-ai express dotenv

これで、ローカル環(huán)境変數(shù)を使用してプライベート データを保護(hù)するなどのベスト プラクティスを採用したサーバーを作成する準(zhǔn)備が整いました。

これを行うには、プロジェクトのルートフォルダーにserver.jsというファイルを作成します。このファイルでは、依存関係をインポートし、必要なリソースを構(gòu)成することから始めます。

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());

このコードは、「パブリック」フォルダーから靜的ファイルを提供し、JSON ペイロードを含むリクエストを受け入れるように Express を構(gòu)成します。このため、index.html、styles.css、script.js ファイルをこのフォルダーに配置します。また、ポート 3000 で実行されるようにアプリケーションを構(gòu)成しました。

@google/generative-ai ライブラリを使用して Gemini API を統(tǒng)合し、GOOGLE_GEMINI_API_KEY という環(huán)境変數(shù)に保存されているキーで認(rèn)証します。

しかし、この API キーはどこで入手できるのでしょうか?それがこれから分かることです。

Gemini API キー

キーの入手

Gemini API キーを取得するには、「@gmail.com」アカウントにログインすることをお?jiǎng)幛幛筏蓼?。その後、このリンクにアクセスすると、次のような畫面が表示されま?

「API キーの作成」ボタンをクリックし、このキーを使用するプロジェクトを指定すれば完了です。キーが下に表示され、それを表示したり、コピーして次のステップに進(jìn)むこともできます。

API キーを保護(hù)する

ここで、プロジェクト內(nèi)で、プロジェクトのルート フォルダーに .env.local または単に .env という名前のファイルを作成します。このファイルに次のように API キーを入力します:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

ファイルを保存すれば完了です。前の手順を正しく実行した場合、API キーは機(jī)能します。

追記: API キーに表示されるプランに注意してください。 Gemini は、キーが返すことができるトークンの量が制限された無料プランを提供します。より多くのトークンが必要な場合は、有料プランへの加入を検討してください。無料プランを使用します。制限はありますが、チャットボットといくつかのメッセージを交換できます。

/chat ルートの作成

依存関係が設(shè)定され、API キーが手元にあるので、人工知能で何ができるかという可能性の扉を開いてみましょう。

server.js ファイルに /chat ルートを作成します:

npm install @google/generative-ai express dotenv

私たちのルートは POST タイプであり、本文でメッセージ、正確にはチャットを操作するユーザーからのメッセージを受け取ることになります。したがって、このメッセージでは、少し防御的なプログラミングを使用し (注意しても誰も損しません (笑))、メッセージがないことを確認(rèn)します。そうしないと、エラーが応答として返され、メッセージがスローされます。

メッセージがある場合は、次のように、選択したモデルのプロンプトとしてメッセージを送信します。

const express = require("express");
require("dotenv").config();
const { GoogleGenerativeAI } = require("@google/generative-ai");

const app = express();
const port = 3000;

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_GEMINI_API_KEY);

app.use(express.static("public"));

app.use(express.json());

この通信は非同期プロセスであるため、try/catch を使用して応答を処理します。まず、使用する Gemini モデルを定義します (このリンクでモデルのリストを確認(rèn)できます)。この場合、gemini-1.5-flash を選択しました。

2 番目のステップは、チャットを開始することです。そのため、model.startChat() を使用して、応答に必要なトークンの最大數(shù) (この場合は応答ごとに 100 トークン) を構(gòu)成して、Gemini との通信を開始できます。

chat.sendMessage(message) でモデルにメッセージを送信した後、この応答を待ちます。応答を取得したら、モデルから返されたテキスト形式を JSON に変換して、要求を行った人に応答を返します。

そして最後に重要なことですが、エラーが発生した場合は、catch 內(nèi)でこのエラーをスローしてコンソールにステータス 500 を返すことができるため、この「ミニ API」を使用するクライアントの作業(yè)が容易になります。美しさ？

ここで必要なのは、以下のコード スニペットで「ミニ API」が実行される場所を指定することだけです。

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

私たちの API は、最初に指定したポートで実行されます。完全なserver.jsコードを以下に示します:

app.post("/chat", async (req, res) => {
  const { message } = req.body;

  if (!message) {
    return res.status(400).json({ error: "Mensagem n?o pode estar vazia." });
  }

  //...
});

チャットボットのテスト

いよいよチャットボットをテストする、最も待ち望まれている瞬間がやって來ました。これを行うには、ターミナルを開いて次のコマンドを入力しましょう:

try {
    const model = genAI.getGenerativeModel({
      model: "gemini-1.5-flash",
    });

    const chat = model.startChat({
      history: [],
      generationConfig: { maxOutputTokens: 100 },
    });

    const result = await chat.sendMessage(message);
    res.json({ response: result.response.text() });
  } catch (error) {
    console.error(error);
    res.status(500).json({ error: "Erro ao processar mensagem." });
  }

このコマンドを?qū)g行すると、ターミナルに次のメッセージが表示されます:

app.listen(port, () => {
  console.log(`Servidor rodando em http://localhost:${port}`);
});

URL http://localhost:3000 にアクセスし、入力欄にメッセージを書き込んで送信ボタンを押すと、AI がメッセージに応答し、畫面に表示されます。

とてもクールですね?

結(jié)論

これで、JavaScript と Google Gemini API を使用したチャットボットの作成が完了しました。フロントエンドを最初から作成し、スタイルを適用し、DOM を操作する方法を確認(rèn)しました。 Express.js でサーバーを作成し、Gemini API を使用して、アプリケーション クライアントと通信するための POST ルートを構(gòu)成し、獨(dú)自に開発した獨(dú)自のインターフェイスを通じて AI と通信することができました。

---

しかし、できることはそれだけではありません。このチャットボットは、言語アシスタントから、數(shù)學(xué)やプログラミングに関する質(zhì)問に答える仮想教師まで、さまざまなタスクに合わせてカスタマイズおよび構(gòu)成できます。それはあなたの創(chuàng)造性によって異なります。

AI をパーソナライズされたアシスタントに変えるには、コード自體よりもモデルの応答方法や動作方法を中心にモデルをトレーニングする必要があります。

これについては今後の記事でいくつか説明します。

それではまた！

以上がJavaScript と Gemini AI を使用したチャットボットの作成: バックエンドの作成の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。