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!