In diesem Leitfaden erfahren Sie, wie Sie mit dem Vertex AI SDK for Firebase Aufrufe an die Gemini API direkt aus Ihrer App senden.
Voraussetzungen
In diesem Leitfaden wird davon ausgegangen, dass Sie mit der Verwendung von JavaScript zum Entwickeln von Webanwendungen vertraut sind. Diese Anleitung ist vom Framework unabhängig.
Ihre Entwicklungsumgebung und Webanwendung müssen die folgenden Anforderungen erfüllen:
- (Optional) Node.js
- Moderner Webbrowser
(Optional) Sehen Sie sich die Beispiel-App an.
Sie können das SDK schnell testen, sich eine vollständige Implementierung verschiedener Anwendungsfälle ansehen oder die Beispiel-App verwenden, wenn Sie keine eigene Web-App haben. Wenn Sie die Beispiel-App verwenden möchten, müssen Sie sie mit einem Firebase-Projekt verbinden.
Schritt 1: Firebase-Projekt einrichten und App mit Firebase verknüpfen
Wenn Sie bereits ein Firebase-Projekt und eine App haben, die mit Firebase verbunden sind
Rufen Sie in der Firebase Console die Seite Build with Gemini auf und klicken Sie auf die zweite Karte, um einen Workflow zu starten, der Sie bei den folgenden Aufgaben unterstützt. Wenn Sie kein Kartenlayout sehen, sind diese Aufgaben abgeschlossen.
Führen Sie ein Upgrade Ihres Projekts durch, um das „Blaze“-Preismodell („Pay as you go“) zu verwenden.
Aktivieren Sie die folgenden beiden APIs für Ihr Projekt:
aiplatform.googleapis.com
undfirebaseml.googleapis.com
.
Fahren Sie mit dem nächsten Schritt in dieser Anleitung fort, um Ihrer App das SDK hinzuzufügen.
Wenn Sie noch kein Firebase-Projekt und eine App mit Firebase verknüpft haben
Schritt 2: SDK hinzufügen
Wenn Ihr Firebase-Projekt eingerichtet und Ihre App mit Firebase verbunden ist (siehe vorherigen Schritt), können Sie Ihrer App jetzt das Vertex AI SDK for Firebase hinzufügen.
Das Vertex AI SDK for Web bietet Zugriff auf die Gemini API.
Installieren Sie die private Vorschau des SDK mit npm:
npm install firebase@vertexai-preview
Initialisieren Sie Firebase in Ihrer App:
import { initializeApp } from "firebase/app"; // TODO(developer) Replace the following with your app's Firebase configuration // See: https://firebase.google.com/docs/web/learn-more#config-object const firebaseConfig = { // ... }; // Initialize FirebaseApp const firebaseApp = initializeApp(firebaseConfig);
Schritt 3: Vertex AI-Dienst und generatives Modell initialisieren
Bevor Sie API-Aufrufe ausführen können, müssen Sie den Vertex AI-Dienst und das generative Modell initialisieren.
import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";
// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);
// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);
// Initialize the generative model with a model that supports your use case
// Gemini 1.5 Pro is versatile and can accept both text-only or multimodal prompt inputs
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-pro-preview-0409" });
Wenn Sie den Startleitfaden abgeschlossen haben, erfahren Sie, wie Sie ein für Ihren Anwendungsfall geeignetes Gemini-Modell auswählen.
Schritt 4: Gemini API aufrufen
Nachdem Sie Ihre App mit Firebase verbunden, das SDK hinzugefügt und den Vertex AI-Dienst sowie das generative Modell initialisiert haben, können Sie die Gemini API aufrufen.
Legen Sie fest, ob Sie die Antwort streamen (generateContentStream
) oder auf die Antwort warten möchten, bis das gesamte Ergebnis generiert ist (generateContent
).
Streaming
Standardmäßig gibt das Modell eine Antwort zurück, nachdem der gesamte Generierungsprozess abgeschlossen ist. Sie können jedoch schnellere Interaktionen erzielen, wenn Sie nicht auf das gesamte Ergebnis warten und stattdessen Streaming verwenden, um Teilergebnisse zu verarbeiten.
Sie können generateContentStream()
verwenden, um generierten Text aus einer Prompt-Anfrage zu streamen, die nur Text enthält:
import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";
// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);
// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);
// Initialize the generative model with a model that supports your use case
// Gemini 1.5 Pro is versatile and can accept both text-only and multimodal prompt inputs
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-pro-preview-0409" });
// Wrap in an async function so you can use await
async function run() {
// Provide a prompt that contains text
const prompt = "Write a story about a magic backpack."
// To stream generated text output, call generateContentStream with the text input
const result = await model.generateContentStream(prompt);
for await (const chunk of result.stream) {
const chunkText = chunk.text();
console.log(chunkText);
}
console.log('aggregated response: ', await result.response);
}
run();
Ohne Streaming
Alternativ können Sie das gesamte Ergebnis abwarten, anstatt zu streamen. Das Ergebnis wird erst zurückgegeben, nachdem das Modell den gesamten Generierungsprozess abgeschlossen hat.
Sie können generateContent()
verwenden, um Text aus einer Eingabeaufforderung zu generieren, die nur Text enthält:
import { initializeApp } from "firebase/app";
import { getVertexAI, getGenerativeModel } from "firebase/vertexai";
// TODO(developer) Replace the following with your app's Firebase configuration
// See: https://firebase.google.com/docs/web/learn-more#config-object
const firebaseConfig = {
// ...
};
// Initialize FirebaseApp
const firebaseApp = initializeApp(firebaseConfig);
// Initialize the Vertex AI service
const vertexAI = getVertexAI(firebaseApp);
// Initialize the generative model with a model that supports your use case
// Gemini 1.5 Pro is versatile and can accept both text-only and multimodal prompt inputs
const model = getGenerativeModel(vertexAI, { model: "gemini-1.5-pro-preview-0409" });
// Wrap in an async function so you can use await
async function run() {
// Provide a prompt that contains text
const prompt = "Write a story about a magic backpack."
// To generate text output, call generateContent with the text input
const result = await model.generateContent(prompt);
const response = result.response;
const text = response.text();
console.log(text);
}
run();
Was kannst du sonst noch tun?
Weitere Informationen zu den Gemini-Modellen
Für verschiedene Anwendungsfälle verfügbare Modelle und deren Kontingente und Preise kennenlernen
Weitere Funktionen der Gemini API testen
- Weitere Informationen zum Senden von reinen Text-Prompts
- Senden Sie multimodale Aufforderungsanfragen mit Text- und Medien-Prompts (einschließlich Bildern, PDFs, Videos und Audio).
- Multi-Turn-Unterhaltungen (Chat) erstellen.
So steuern Sie die Inhaltsgenerierung
- Prompt-Entwurf verstehen, einschließlich Best Practices, Strategien und Beispiel-Prompts
- Konfigurieren Sie Modellparameter wie Temperatur und maximale Ausgabetokens.
- Nutzen Sie die Sicherheitseinstellungen, um die Wahrscheinlichkeit anzupassen, dass Sie Antworten erhalten, die als schädlich eingestuft werden können.
Sie können auch mit Vertex AI Studio mit Prompts und Modellkonfigurationen experimentieren.
Feedback zu Ihren Erfahrungen mit den Vertex AI SDKs for Firebase geben