Erstellen eines Chatbots mit JavaScript und Gemini AI: Erstellen des Backends

Speichern! o

Wir setzen die Erstellung unseres Chatbots mit Javascript und Gemini AI fort und fügen das „Backend“ des Projekts hinzu. Beim letzten Mal haben wir das Frontend mit HTML, CSS und Javascript erstellt, wobei wir garantiert haben, dass die Benutzeroberfläche eine Konversation zwischen dem Benutzer und dem Chatbot widerspiegelt.

Jetzt müssen wir einen Server erstellen und eine Route mit express.js konfigurieren, um mit der Gemini-API zu kommunizieren. Lass uns gehen!

Projektabhängigkeiten installieren

Nun, wir brauchen express.js, das Google Gemini SDK, und um unseren API-Schlüssel zu schützen, werde ich dotenv installieren, um mit Umgebungsvariablen zu arbeiten.

npm install @google/generative-ai express dotenv

Jetzt sind wir bereit, unseren Server zu erstellen und dabei Best Practices wie die Verwendung lokaler Umgebungsvariablen zum Schutz privater Daten zu übernehmen.

Dazu erstellen wir im Stammordner des Projekts eine Datei mit dem Namen server.js. In dieser Datei importieren wir zunächst die Abhängigkeiten und konfigurieren die erforderlichen Ressourcen.

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

Dieser Code konfiguriert Express für die Bereitstellung statischer Dateien aus dem „öffentlichen“ Ordner und akzeptiert Anfragen mit JSON-Nutzlast. Aus diesem Grund legen wir die Dateien index.html, style.css und script.js in diesem Ordner ab. Wir haben die Anwendung auch so konfiguriert, dass sie auf Port 3000 läuft.

Wir verwenden die @google/generative-ai-Bibliothek, um die Gemini-API zu integrieren und sie mit einem Schlüssel zu authentifizieren, der in einer Umgebungsvariablen namens GOOGLE_GEMINI_API_KEY gespeichert ist.

Aber wo bekommen wir diesen API-Schlüssel? Das werden wir jetzt herausfinden.

Gemini-API-Schlüssel

Erhalt des Schlüssels

Um einen Gemini-API-Schlüssel zu erhalten, empfehle ich, dass Sie bei einem „@gmail.com“-Konto angemeldet sind. Rufen Sie anschließend diesen Link auf und Sie sehen einen Bildschirm wie diesen:

Klicken Sie auf die Schaltfläche „API-Schlüssel erstellen“, geben Sie ein Projekt an, in dem Sie diesen Schlüssel verwenden möchten, und schon sind Sie fertig. Ihr Schlüssel wird unten angezeigt und Sie können ihn anzeigen und sogar kopieren, um mit dem nächsten Schritt fortzufahren.

Schützen Sie Ihren API-Schlüssel

Erstellen Sie nun in Ihrem Projekt eine Datei mit dem Namen .env.local oder einfach .env im Stammordner Ihres Projekts. Geben Sie in dieser Datei Ihren API-Schlüssel wie folgt ein:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

Jetzt speichern Sie Ihre Datei und fertig. Wenn Sie den vorherigen Schritt korrekt ausgeführt haben, funktioniert Ihr API-Schlüssel.

PS: Achten Sie auf den Plan, der in Ihrem API-Schlüssel erscheint. Gemini bietet einen kostenlosen Plan mit einer begrenzten Anzahl an Tokens an, die Ihr Schlüssel zurückgeben kann. Wenn Sie eine größere Menge an Token wünschen, sollten Sie einen kostenpflichtigen Plan in Betracht ziehen. Wir werden den kostenlosen Plan nutzen, der uns zwar begrenzt, aber den Austausch einiger Nachrichten mit dem Chatbot ermöglicht.

Erstellen der /chat-Route

Mit den konfigurierten Abhängigkeiten und dem API-Schlüssel in der Hand öffnen wir nun die Türen zu den Möglichkeiten, die wir mit künstlicher Intelligenz machen können.

In der Datei server.js erstellen wir die /chat-Route:

npm install @google/generative-ai express dotenv

Unsere Route ist vom Typ POST, da Sie im Textkörper eine Nachricht erhalten, genau die Nachricht des Benutzers, der mit dem Chat interagieren wird. Bei dieser Nachricht verwenden wir also eine kleine defensive Programmierung (es schadet niemandem, vorsichtig zu sein, lol) und prüfen, ob wir keine Nachricht haben. Wenn wir dies nicht tun, wird ein Fehler als Antwort zurückgegeben und eine Nachricht ausgegeben.

Wenn wir die Nachricht haben, senden wir sie als Aufforderung für das von uns ausgewählte Modell wie folgt:

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

Da es sich bei dieser Kommunikation um einen asynchronen Prozess handelt, verwenden wir try/catch, um die Antwort zu verarbeiten. Zuerst definiere ich das Gemini-Modell, das verwendet werden soll (eine Liste der Modelle finden Sie unter diesem Link). In diesem Fall habe ich mich für gemini-1.5-flash entschieden.

Der zweite Schritt besteht darin, den Chat zu starten. Mit model.startChat() kann ich also die Kommunikation mit Gemini starten und die maximale Anzahl an Token konfigurieren, die ich in der Antwort haben möchte (in diesem Fall 100 Token pro Antwort).

Jetzt warten wir auf diese Antwort, nachdem wir die Nachricht mit chat.sendMessage(message) an das Modell gesendet haben. Wenn wir die Antwort haben, senden wir sie an die Person zurück, die die Anfrage gestellt hat, und konvertieren das vom Modell zurückgegebene Textformat in JSON.

Und zu guter Letzt: Wenn wir einen Fehler haben, können wir ihn innerhalb von Catch verwenden, um diesen Fehler in der Konsole auszulösen und außerdem einen Status 500 zurückzugeben, was dem Kunden, der diese „Mini-API“ nutzt, das Leben erleichtert. Schönheit?

Jetzt müssen wir nur noch angeben, wo unsere „Mini-API“ mit dem Code-Snippet unten ausgeführt werden soll:

GOOGLE_GEMINI_API_KEY="sua-chave-vai-aqui"

Unsere API wird auf dem Port ausgeführt, den wir zu Beginn angegeben haben. Der vollständige server.js-Code wird unten angezeigt:

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

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

  //...
});

Testen des Chatbots

Jetzt ist der mit Spannung erwartete Moment gekommen, unseren Chatbot zu testen. Öffnen wir dazu ein Terminal und geben den folgenden Befehl ein:

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

Nach der Ausführung dieses Befehls sollten Sie im Terminal die folgende Meldung erhalten:

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

Wenn Sie nun auf die URL http://localhost:3000 zugreifen, eine Nachricht in die Eingabe schreiben und die Schaltfläche „Senden“ drücken, antwortet die KI auf Ihre Nachricht und sie wird auf dem Bildschirm angezeigt.

Sehr cool, oder?

Abschluss

Damit schließen wir die Erstellung eines Chatbots mit JavaScript und der Google Gemini API ab. Wir haben gesehen, wie man das Frontend von Grund auf erstellt, Stile anwendet und das DOM manipuliert. Wir haben mit express.js einen Server erstellt, die Gemini-API verwendet, eine POST-Route für die Kommunikation mit dem Anwendungsclient konfiguriert und konnten über unsere eigene, von uns selbst entwickelte Schnittstelle mit der KI kommunizieren.

---

Aber das ist noch nicht alles, was Sie tun können. Wir können diesen Chatbot für verschiedene Aufgaben anpassen und konfigurieren, von der Rolle eines Sprachassistenten bis hin zu einem virtuellen Lehrer, der Ihre Fragen zu Mathematik oder Programmierung beantwortet, es hängt von Ihrer Kreativität ab.

Um eine KI in einen personalisierten Assistenten zu verwandeln, muss das Modell trainiert werden. Dabei geht es mehr um die Art und Weise, wie es reagieren und sich verhalten soll, als um den Code selbst.

Einige davon werden wir in einem zukünftigen Artikel untersuchen.

Bis dann!

Das obige ist der detaillierte Inhalt vonErstellen eines Chatbots mit JavaScript und Gemini AI: Erstellen des Backends. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!