Mencipta Chatbot dengan JavaScript dan Gemini AI: mencipta bahagian belakang

Jimat! o

Meneruskan penciptaan chatbot kami dengan Javascript dan Gemini AI, kami akan menambah "backend" projek. Kali terakhir kami mencipta bahagian hadapan, dengan HTML, CSS dan Javascript, yang mana kami menjamin bahawa antara muka pengguna akan mencerminkan perbualan antara pengguna dan chatbot.

Sekarang kita perlu mencipta pelayan, mengkonfigurasi laluan dengan express.js untuk berkomunikasi dengan API Gemini. jom pergi!

Memasang kebergantungan projek

Nah, kami akan memerlukan express.js, Google Gemini SDK dan untuk melindungi kunci API kami, saya akan memasang dotenv untuk berfungsi dengan pembolehubah persekitaran.

npm install @google/generative-ai express dotenv

Kini kami bersedia untuk membuat pelayan kami menggunakan amalan terbaik seperti menggunakan pembolehubah persekitaran setempat untuk melindungi data peribadi.

Untuk melakukan ini, kami akan mencipta fail dalam folder akar projek yang dipanggil server.js. Dalam fail ini kita akan mulakan dengan mengimport kebergantungan dan mengkonfigurasi sumber yang diperlukan.

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());

Kod ini mengkonfigurasi ekspres untuk menyampaikan fail statik daripada folder "awam" dan menerima permintaan dengan muatan JSON. Itulah sebabnya kami meletakkan fail index.html, styles.css dan script.js dalam folder ini. Kami juga mengkonfigurasi aplikasi untuk dijalankan pada port 3000.

Kami menggunakan perpustakaan @google/generative-ai untuk menyepadukan API Gemini, mengesahkannya dengan kunci yang disimpan dalam pembolehubah persekitaran yang dipanggil GOOGLE_GEMINI_API_KEY.

Tetapi di manakah kita boleh mendapatkan Kunci API ini? Itulah yang akan kita ketahui sekarang.

Kunci API Gemini

Mendapatkan kunci

Untuk mendapatkan kunci API Gemini, saya syorkan anda log masuk ke akaun "@gmail.com". Selepas itu, akses pautan ini dan anda akan melihat skrin seperti ini:

Klik butang "Buat kunci API", nyatakan projek di mana anda akan menggunakan kunci ini dan anda telah selesai. Kunci anda akan dipaparkan di bawah dan anda akan dapat melihatnya dan juga menyalinnya untuk mengambil langkah seterusnya.

Melindungi kunci API anda

Kini dalam projek anda, buat fail dengan nama .env.local atau hanya .env dalam folder akar projek anda. Dalam fail ini letakkan kunci API anda seperti berikut:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

Sekarang simpan fail anda dan itu sahaja. Jika anda melakukan langkah sebelumnya dengan betul, kunci API anda akan berfungsi.

PS: perhatikan pelan yang muncul dalam kunci API anda. Gemini menawarkan pelan percuma dengan jumlah token terhad yang boleh dikembalikan oleh kunci anda. Jika anda mahukan jumlah token yang lebih banyak, pertimbangkan untuk melanggan pelan berbayar. Kami akan menggunakan pelan percuma, yang, walaupun terhad, akan membolehkan kami bertukar beberapa mesej dengan chatbot.

Mencipta laluan /sembang

Kini dengan kebergantungan dikonfigurasikan dan kunci API di tangan, mari kita buka pintu kemungkinan perkara yang boleh kita lakukan dengan kecerdasan buatan.

Dalam fail server.js kami akan mencipta laluan /chat:

npm install @google/generative-ai express dotenv

Laluan kami adalah dari jenis POST, kerana anda akan menerima mesej dalam badan, tepatnya mesej daripada pengguna yang akan berinteraksi dengan sembang. Jadi, dengan mesej ini kami menggunakan sedikit pengaturcaraan pertahanan (ia tidak merugikan sesiapa pun untuk berhati-hati lol) dan pastikan kami tidak mempunyai mesej. Jika kami tidak melakukannya, ralat dikembalikan sebagai respons dan mesej dilemparkan.

Jika kami mempunyai mesej itu, maka kami akan menghantarnya sebagai gesaan untuk model yang kami pilih, seperti berikut:

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());

Memandangkan komunikasi ini adalah proses tak segerak, kami akan menggunakan try/catch untuk mengendalikan respons. Mula-mula saya tentukan model Gemini yang akan digunakan (anda boleh menyemak senarai model di pautan ini). Dalam kes ini saya memilih untuk gemini-1.5-flash.

Langkah kedua ialah memulakan sembang. Jadi dengan model.startChat() saya boleh memulakan komunikasi dengan Gemini, mengkonfigurasi bilangan maksimum token yang saya inginkan dalam respons (dalam kes ini 100 token setiap respons).

Sekarang kita menunggu balasan ini selepas menghantar mesej kepada model dengan chat.sendMessage(message). Apabila kami mendapat respons, kami akan mengembalikannya kepada orang yang membuat permintaan, menukar format teks yang dikembalikan oleh model kepada JSON.

Dan akhir sekali, jika kita mempunyai ralat, kita boleh menggunakannya dalam tangkapan untuk membuang ralat ini ke dalam konsol, dan juga mengembalikan status 500, menjadikan kehidupan lebih mudah untuk pelanggan yang menggunakan "api mini" ini. Kecantikan?

Sekarang kita hanya perlu menunjukkan di mana "api mini" kita akan dijalankan dengan coretan kod di bawah:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

Api kami akan berjalan pada port yang kami tetapkan pada mulanya. Kod server.js yang lengkap ditunjukkan di bawah:

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

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

  //...
});

Menguji chatbot

Kini saat yang paling ditunggu telah tiba, untuk menguji chatbot kami. Untuk melakukan ini, mari buka terminal dan taip arahan berikut:

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." });
  }

Anda sepatutnya menerima mesej berikut dalam terminal selepas menjalankan arahan ini:

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

Kini dengan mengakses url http://localhost:3000 dan menulis mesej dalam input dan menekan butang hantar, AI bertindak balas kepada mesej anda dan ia ditunjukkan pada skrin.

Sangat keren, bukan?

Kesimpulan

Dengan ini kami selesai membuat chatbot menggunakan JavaScript dan API Google Gemini. Kami melihat cara mencipta bahagian hadapan dari awal, menggunakan gaya, memanipulasi DOM. Kami mencipta pelayan dengan express.js, menggunakan API Gemini, mengkonfigurasi laluan POST untuk berkomunikasi dengan klien aplikasi dan dapat bercakap dengan AI melalui antara muka kami sendiri, yang dibangunkan oleh kami sendiri.

---

Tetapi bukan itu sahaja yang anda boleh lakukan. Kami boleh menyesuaikan dan mengkonfigurasi chatbot ini untuk tugas yang berbeza, daripada menjadi pembantu bahasa, kepada guru maya yang menjawab soalan anda tentang matematik atau pengaturcaraan, ia bergantung pada kreativiti anda.

Menukar AI kepada pembantu diperibadikan melibatkan latihan model, lebih lanjut mengenai cara anda mahu ia bertindak balas dan berkelakuan berbanding kod itu sendiri.

Kami akan meneroka beberapa perkara ini dalam artikel akan datang.

Jumpa lagi!

Atas ialah kandungan terperinci Mencipta Chatbot dengan JavaScript dan Gemini AI: mencipta bahagian belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!