Anleitung: Erste Schritte mit der Gemini API


In dieser Anleitung wird gezeigt, wie Sie mit dem Google AI JavaScript SDK direkt aus Ihrer Webanwendung auf die Gemini API zugreifen. Du kannst dieses SDK verwenden, wenn du nicht direkt mit REST APIs oder serverseitigem Code (wie Node.js) für den Zugriff auf Gemini-Modelle in deiner Webanwendung arbeiten möchtest.

In dieser Anleitung erfahren Sie, wie Sie Folgendes tun:

Darüber hinaus enthält diese Anleitung Abschnitte zu erweiterten Anwendungsfällen (z. B. zum Zählen von Tokens) sowie Optionen zum Steuern der Inhaltsgenerierung.

Voraussetzungen

In dieser Anleitung wird davon ausgegangen, dass Sie mit der Verwendung von JavaScript für die Entwicklung von Webanwendungen vertraut sind. Dieser Leitfaden ist Framework-unabhängig.

Damit Sie diese Anleitung abschließen können, muss Ihre Entwicklungsumgebung die folgenden Anforderungen erfüllen:

  • (Optional) Node.js
  • Moderner Webbrowser

Projekt einrichten

Bevor Sie die Gemini API aufrufen, müssen Sie Ihr Projekt einrichten. Dazu gehören das Abrufen eines API-Schlüssels, das Importieren des SDK und das Initialisieren des Modells.

API-Schlüssel einrichten

Zur Verwendung der Gemini API benötigen Sie einen API-Schlüssel. Falls noch nicht geschehen, erstellen Sie einen Schlüssel in Google AI Studio.

API-Schlüssel anfordern

API-Schlüssel sichern

Es wird dringend empfohlen, keinen API-Schlüssel in das Versionsverwaltungssystem einzuchecken. Stattdessen sollten Sie Ihren API-Schlüssel direkt vor der Initialisierung des Modells an Ihre App übergeben.

Bei allen Snippets in dieser Anleitung wird davon ausgegangen, dass Sie als globale Konstante auf Ihren API-Schlüssel zugreifen.

SDK importieren und generatives Modell initialisieren

Bevor Sie API-Aufrufe ausführen können, müssen Sie das SDK importieren und das generative Modell initialisieren.

<html>
  <body>
    <!-- ... Your HTML and CSS -->

    <script type="importmap">
      {
        "imports": {
          "@google/generative-ai": "https://esm.run/@google/generative-ai"
        }
      }
    </script>
    <script type="module">
      import { GoogleGenerativeAI } from "@google/generative-ai";

      // Fetch your API_KEY
      const API_KEY = "...";
      // Reminder: This should only be for local testing

      // Access your API key (see "Set up your API key" above)
      const genAI = new GoogleGenerativeAI(API_KEY);

      // ...

      // The Gemini 1.5 models are versatile and work with most use cases
      const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

      // ...
    </script>
  </body>
</html>

Beachten Sie beim Angeben eines Modells Folgendes:

  • Verwenden Sie ein Modell, das für Ihren Anwendungsfall spezifisch ist (z. B. gemini-1.5-flash für eine multimodale Eingabe). In diesem Leitfaden wird in den Anleitungen für jede Implementierung das empfohlene Modell für jeden Anwendungsfall aufgeführt.

Gängige Anwendungsfälle implementieren

Nachdem Ihr Projekt nun eingerichtet ist, können Sie ausprobieren, wie Sie mit der Gemini API verschiedene Anwendungsfälle implementieren:

Text aus reiner Texteingabe generieren

Wenn der Prompt nur Text enthält, verwenden Sie ein Gemini 1.5-Modell oder das Gemini 1.0 Pro-Modell mit generateContent, um die Textausgabe zu generieren:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const prompt = "Write a story about a magic backpack."

  const result = await model.generateContent(prompt);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Text aus Text- und Bildeingabe generieren (multimodal)

Gemini bietet verschiedene Modelle, die multimodale Eingaben verarbeiten können (Gemini 1.5-Modelle), sodass Sie sowohl Text als auch Bilder eingeben können. Lies dir auch die Anforderungen an Bilder für Prompts durch.

Wenn die Prompt-Eingabe sowohl Text als auch Bilder enthält, verwenden Sie ein Gemini 1.5-Modell mit der Methode generateContent, um eine Textausgabe zu generieren:

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

// Converts a File object to a GoogleGenerativeAI.Part object.
async function fileToGenerativePart(file) {
  const base64EncodedDataPromise = new Promise((resolve) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
    reader.readAsDataURL(file);
  });
  return {
    inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
  };
}

async function run() {
  // The Gemini 1.5 models are versatile and work with both text-only and multimodal prompts
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash" });

  const prompt = "What's different between these pictures?";

  const fileInputEl = document.querySelector("input[type=file]");
  const imageParts = await Promise.all(
    [...fileInputEl.files].map(fileToGenerativePart)
  );

  const result = await model.generateContent([prompt, ...imageParts]);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Multi-Turn Conversations erstellen (Chat)

Mit Gemini kannst du Unterhaltungen im freien Format über mehrere Runden hinweg führen. Das SDK vereinfacht den Vorgang, da es den Status der Unterhaltung verwaltet. Im Gegensatz zu generateContent müssen Sie den Unterhaltungsverlauf also nicht selbst speichern.

Wenn Sie eine mehrsprachige Unterhaltung (z. B. Chat) erstellen möchten, verwenden Sie ein Gemini 1.5-Modell oder Gemini 1.0 Pro und initialisieren Sie den Chat, indem Sie startChat() aufrufen. Verwenden Sie dann sendMessage(), um eine neue Nutzernachricht zu senden. Dadurch werden auch die Nachricht und die Antwort an das Chatprotokoll angehängt.

Es gibt zwei mögliche Optionen für role, die dem Inhalt einer Unterhaltung zugeordnet sind:

  • user: Die Rolle, die die Aufforderungen bereitstellt. Dieser Wert ist der Standardwert für sendMessage-Aufrufe und die Funktion löst eine Ausnahme aus, wenn eine andere Rolle übergeben wird.

  • model: Die Rolle, die die Antworten bereitstellt. Diese Rolle kann beim Aufrufen von startChat() mit vorhandenem history verwendet werden.

import { GoogleGenerativeAI } from "@google/generative-ai";

// Access your API key (see "Set up your API key" above)
const genAI = new GoogleGenerativeAI(API_KEY);

async function run() {
  // The Gemini 1.5 models are versatile and work with multi-turn conversations (like chat)
  const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash"});

  const chat = model.startChat({
    history: [
      {
        role: "user",
        parts: [{ text: "Hello, I have 2 dogs in my house." }],
      },
      {
        role: "model",
        parts: [{ text: "Great to meet you. What would you like to know?" }],
      },
    ],
    generationConfig: {
      maxOutputTokens: 100,
    },
  });

  const msg = "How many paws are in my house?";

  const result = await chat.sendMessage(msg);
  const response = await result.response;
  const text = response.text();
  console.log(text);
}

run();

Streaming für schnellere Interaktionen nutzen

Standardmäßig gibt das Modell nach Abschluss des gesamten Generierungsprozesses eine Antwort zurück. Sie können schnellere Interaktionen erzielen, wenn Sie nicht auf das gesamte Ergebnis warten, sondern stattdessen Streaming verwenden, um Teilergebnisse zu verarbeiten.

Das folgende Beispiel zeigt, wie Streaming mit der Methode generateContentStream implementiert wird, um Text über einen Text-und-Bild-Eingabe-Prompt zu generieren.

// ...

const result = await model.generateContentStream([prompt, ...imageParts]);

let text = '';
for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
  text += chunkText;
}

// ...

Sie können einen ähnlichen Ansatz für reine Texteingabe und Chat-Anwendungsfälle verwenden.

// Use streaming with text-only input
const result = await model.generateContentStream(prompt);

Informationen zum Instanziieren einer chat finden Sie im Chatbeispiel oben.

// Use streaming with multi-turn conversations (like chat)
const result = await chat.sendMessageStream(msg);

Erweiterte Anwendungsfälle implementieren

Die im vorherigen Abschnitt dieses Tutorials beschriebenen gängigen Anwendungsfälle helfen Ihnen, sich mit der Verwendung der Gemini API vertraut zu machen. In diesem Abschnitt werden einige Anwendungsfälle beschrieben, die möglicherweise als komplexer gelten.

Funktionsaufrufe

Funktionsaufrufe erleichtern es Ihnen, Ausgaben strukturierter Daten aus generativen Modellen zu erhalten. Sie können diese Ausgaben dann verwenden, um andere APIs aufzurufen und die relevanten Antwortdaten an das Modell zurückzugeben. Mit anderen Worten: Funktionsaufrufe helfen Ihnen, generative Modelle mit externen Systemen zu verbinden, damit die generierten Inhalte aktuelle und genaue Informationen enthalten. Weitere Informationen finden Sie in der Anleitung zu Funktionsaufrufen.

Anzahl der Tokens

Bei langen Prompts kann es hilfreich sein, Tokens zu zählen, bevor Inhalte an das Modell gesendet werden. Die folgenden Beispiele zeigen, wie countTokens() für verschiedene Anwendungsfälle verwendet wird:

// For text-only input
const { totalTokens } = await model.countTokens(prompt);

// For text-and-image input (multimodal)
const { totalTokens } = await model.countTokens([prompt, ...imageParts]);

// For multi-turn conversations (like chat)
const history = await chat.getHistory();
const msgContent = { role: "user", parts: [{ text: msg }] };
const contents = [...history, msgContent];
const { totalTokens } = await model.countTokens({ contents });

Optionen zum Steuern der Inhaltserstellung

Sie können das Generieren von Inhalten steuern, indem Sie Modellparameter konfigurieren und Sicherheitseinstellungen verwenden.

Modellparameter konfigurieren

Jede Aufforderung, die Sie an das Modell senden, enthält Parameterwerte, die steuern, wie das Modell eine Antwort generiert. Das Modell kann für verschiedene Parameterwerte unterschiedliche Ergebnisse generieren. Weitere Informationen zu Modellparametern Die Konfiguration wird für die gesamte Lebensdauer der Modellinstanz beibehalten.

const generationConfig = {
  stopSequences: ["red"],
  maxOutputTokens: 200,
  temperature: 0.9,
  topP: 0.1,
  topK: 16,
};

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash",  generationConfig });

Sicherheitseinstellungen verwenden

Mit Sicherheitseinstellungen kannst du die Wahrscheinlichkeit anpassen, dass du Antworten erhältst, die als schädlich eingestuft werden können. Standardmäßig blockieren Sicherheitseinstellungen Inhalte mit mittlerer und/oder hoher Wahrscheinlichkeit, die als unsicher eingestuft werden, in allen Dimensionen. Weitere Informationen zu den Sicherheitseinstellungen

So legen Sie eine Sicherheitseinstellung fest:

import { HarmBlockThreshold, HarmCategory } from "@google/generative-ai";

// ...

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
];

// The Gemini 1.5 models are versatile and work with most use cases
const model = genAI.getGenerativeModel({ model: "gemini-1.5-flash", safetySettings });

Sie können auch mehrere Sicherheitseinstellungen festlegen:

const safetySettings = [
  {
    category: HarmCategory.HARM_CATEGORY_HARASSMENT,
    threshold: HarmBlockThreshold.BLOCK_ONLY_HIGH,
  },
  {
    category: HarmCategory.HARM_CATEGORY_HATE_SPEECH,
    threshold: HarmBlockThreshold.BLOCK_MEDIUM_AND_ABOVE,
  },
];

Nächste Schritte

  • Beim Prompt-Design werden Aufforderungen erstellt, die die gewünschte Antwort aus Sprachmodellen auslösen. Gut strukturierte Eingabeaufforderungen sind wichtig, um genaue, hochwertige Antworten aus einem Sprachmodell zu gewährleisten. Best Practices für das Schreiben von Prompts

  • Gemini bietet verschiedene Modellvarianten für verschiedene Anwendungsfälle, z. B. Eingabetypen und -komplexität, Implementierungen für Chat- oder andere Sprachaufgaben für Chats und Größenbeschränkungen. Weitere Informationen zu den verfügbaren Gemini-Modellen