Hybride Anwendungen in Web-Apps mit On-Device- und Cloud-basierten Modellen erstellen

Mit Firebase AI Logic KI-basierte Web-Apps und Funktionen mit hybrider Inferenz erstellen. Mit der hybriden Inferenz können Sie die Inferenz mit On-Device-Modellen ausführen, sofern verfügbar, und nahtlos auf cloudbasierte Modelle zurückgreifen, wenn nicht (und umgekehrt).

Auf dieser Seite wird beschrieben, wie Sie mit dem Client-SDK beginnen. Nachdem Sie diese Standardeinrichtung abgeschlossen haben, können Sie sich die zusätzlichen Konfigurationsoptionen und Funktionen (z. B. strukturierte Ausgabe) ansehen.

Die Inferenz auf dem Gerät wird für Web-Apps unterstützt, die in Chrome auf dem Desktop ausgeführt werden.

Zu den Codebeispielen springen

Empfohlene Anwendungsfälle und unterstützte Funktionen

Empfohlene Anwendungsfälle:

  • Die Verwendung eines On-Device-Modells für die Inferenz bietet folgende Vorteile:

    • Besserer Datenschutz
    • Lokaler Kontext
    • Kostenlose Inferenz
    • Offline-Funktionen

  • Vorteile der Hybridfunktionen:

    • 100% Ihrer Zielgruppe erreichen, unabhängig von der Verfügbarkeit des On-Device-Modells oder der Internetverbindung

Unterstützte Funktionen und Features für die Inferenz auf dem Gerät:

Die Inferenz auf dem Gerät unterstützt nur die einmalige Textgenerierung (nicht Chat)> mit Streaming- oder Nicht-Streaming-Ausgabe. Die folgenden Funktionen zur Textgenerierung werden unterstützt:

Sie können auch strukturierte Ausgaben generieren, einschließlich JSON und Enums.

Hinweis

Beachten Sie Folgendes:

Erste Schritte mit localhost

In dieser Anleitung werden die erforderlichen allgemeinen Einrichtungsschritte für alle unterstützten Prompts beschrieben, die Sie senden möchten.

Schritt 1: Chrome und die Prompt API für die On-Device-Inferenz einrichten

  1. Vergewissern Sie sich, dass Sie eine aktuelle Version von Chrome verwenden. Aktualisieren Sie in chrome://settings/help.
    Die Inferenz auf dem Gerät ist ab Chrome 139 verfügbar.

  2. Aktivieren Sie das multimodale On-Device-Modell, indem Sie das folgende Flag auf Enabled setzen:

    • chrome://flags/#prompt-api-for-gemini-nano-multimodal-input

  3. Starten Sie Chrome neu.

  4. (Optional) Laden Sie das On-Device-Modell vor der ersten Anfrage herunter.

    Die Prompt API ist in Chrome integriert. Das On-Device-Modell ist jedoch nicht standardmäßig verfügbar. Wenn Sie das Modell noch nicht vor Ihrer ersten Anfrage für die Inferenz auf dem Gerät heruntergeladen haben, wird der Download des Modells automatisch im Hintergrund gestartet.

Schritt 2: Firebase-Projekt einrichten und App mit Firebase verbinden

  1. Melden Sie sich in der Firebase Console an und wählen Sie Ihr Firebase-Projekt aus.

  2. Rufen Sie in derFirebaseConsole AI Services > AI Logic auf.

  3. Klicken Sie auf Jetzt starten, um einen geführten Workflow zu starten, mit dem Sie die erforderlichen APIs und Ressourcen für Ihr Projekt einrichten können.

  4. Folgen Sie bei Aufforderung der Anleitung auf dem Bildschirm, um Ihre App zu registrieren und die Firebase-Konfiguration hinzuzufügen.

  5. Wenn Sie aufgefordert werden, einen „Gemini API-Anbieter“ auszuwählen, empfehlen wir Ihnen, die Gemini Developer API auszuwählen, mit der Sie schnell und kostenlos loslegen können.

    Sie können die Vertex AI Gemini API (und die damit verbundenen Abrechnungsanforderungen) jederzeit später einrichten.

  6. Fahren Sie mit dem Workflow fort, um die erforderlichen APIs und zugehörigen Dienste für Firebase AI Logic einzurichten.

    Ab Anfang Juli 2026 wird in dieser Phase des Workflows automatisch Firebase App Check für AI Logic erzwungen. AI Logic ist ein wichtiger Dienst, der dazu beiträgt, die Gemini API zu schützen, wenn direkt über Ihre App darauf zugegriffen wird. Im Rahmen der ersten Schritte (siehe Anleitung weiter unten) müssen Sie den App Check-Debug-Anbieter für die lokale Entwicklung konfigurieren, wenn App Check erzwungen wird.

  7. Fahren Sie mit dem nächsten Schritt in dieser Anleitung fort, um Ihrer App die erforderlichen SDKs hinzuzufügen.

Schritt 3: SDK hinzufügen

Die Firebase-Bibliothek bietet Zugriff auf die APIs für die Interaktion mit generativen Modellen. Die Bibliothek ist im Firebase JavaScript SDK für Web enthalten.

  1. Installieren Sie das Firebase JS SDK für Web mit npm:

    npm install firebase

  2. Firebase in Ihrer App initialisieren:

    import { initializeApp } from "firebase/app";
import { initializeAppCheck, DebugProvider } from "firebase/app-check";

// 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: App Check-Debug-Anbieter für die lokale Entwicklung konfigurieren

Ab Anfang Juli 2026 wird im Rahmen des geführten Einrichtungsvorgangs für AI Logic in der Console automatisch Firebase App Check erzwungen, um die Gemini API zu schützen. Für die lokale Entwicklung müssen Sie den App Check-Debug-Anbieter konfigurieren, um die Attestierung zu umgehen und gleichzeitig die Durchsetzung von App Check beizubehalten.

So verwenden Sie den Debug-Anbieter, während Sie Ihre App interaktiv über localhost ausführen (z. B. bei der lokalen Entwicklung):

  1. Aktivieren Sie in Ihrem Debug-Build den Fehlerbehebungsmodus, indem Sie self.FIREBASE_APPCHECK_DEBUG_TOKEN auf true setzen, bevor Sie App Check initialisieren. Beispiel:

    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
initializeAppCheck(app, { /* App Check options */ });

  2. Rufen Sie Ihre Web-App lokal auf und öffnen Sie die Entwicklertools des Browsers. In der Debug-Konsole wird ein Debug-Token angezeigt:

    AppCheck debug token: "123a4567-b89c-12d3-e456-789012345678".
You will need to safelist it in the Firebase console for it to work.

  3. Registrieren Sie Ihr Debug-Token bei App Check:

    1. Rufen Sie in der Firebase-Konsole den Tab Apps unter Sicherheit > App Check auf.

    2. Suchen Sie Ihre App, klicken Sie auf das Dreipunkt-Menü () und wählen Sie dann Debug-Tokens verwalten aus.

    3. Folgen Sie der Anleitung auf dem Bildschirm, um Ihr Debug-Token zu registrieren.

Weitere Informationen zum Debugging-Anbieter (einschließlich der Vorgehensweise zum Abrufen eines neuen Debugging-Tokens) finden Sie in der offiziellen App Check-Dokumentation.

Schritt 4: Dienst initialisieren und Modellinstanz erstellen

Klicken Sie auf Ihren Gemini API-Anbieter, um anbieterspezifische Inhalte und Code auf dieser Seite aufzurufen.

Richten Sie Folgendes ein, bevor Sie eine Prompt-Anfrage an das Modell senden:

  1. Initialisieren Sie den Dienst für den von Ihnen ausgewählten API-Anbieter.

  2. Erstellen Sie eine GenerativeModel-Instanz. Legen Sie mode auf einen der folgenden Werte fest:

    • PREFER_ON_DEVICE: Das On-Device-Modell wird verwendet, sofern verfügbar. Andernfalls wird auf das in der Cloud gehostete Modell zurückgegriffen.

    • ONLY_ON_DEVICE: Das On-Device-Modell wird verwendet, sofern verfügbar. Andernfalls wird eine Ausnahme ausgelöst.

    • PREFER_IN_CLOUD: Verwenden Sie das in der Cloud gehostete Modell, falls verfügbar. Andernfalls greifen Sie auf das On-Device-Modell zurück.

    • ONLY_IN_CLOUD: Verwenden Sie das in der Cloud gehostete Modell, falls verfügbar. Andernfalls wird eine Ausnahme ausgelöst.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// 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 Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

Schritt 5: On-Device-Modell initialisieren

Sie müssen initializeDeviceModel() nach oder bei einer Interaktion auf einer Endnutzerseite (z. B. einem Klick auf eine Schaltfläche) und bevor Sie eine Prompts-Anfrage an das Modell senden, aufrufen. Weitere Informationen zur Nutzeraktivierung finden Sie in der Chrome-Dokumentation.

import { initializeApp } from "firebase/app";
import { getAI, getGenerativeModel, GoogleAIBackend, InferenceMode } from "firebase/ai";

// 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 Gemini Developer API backend service
const ai = getAI(firebaseApp, { backend: new GoogleAIBackend() });

// Create a `GenerativeModel` instance
// Set the mode (for example, use the on-device model if it's available)
const model = getGenerativeModel(ai, { mode: InferenceMode.PREFER_ON_DEVICE });

// `initializeDeviceModel` must be called:
// (1) after or on an end-user page interaction such as a button click
// and
// (2) before any queries to the model (such as `generateContent()`)
// You may want to `await` this promise if using `ONLY_ON_DEVICE` (see note below).
model.initializeDeviceModel((val) =>
  // Example: "Download progress: 72.62%""
  console.log(`Download progress: ${Math.round(val*10000) / 100}%`)
);

Schritt 6: Prompt-Anfrage an ein Modell senden

In diesem Abschnitt erfahren Sie, wie Sie verschiedene Arten von Eingaben senden, um unterschiedliche Arten von Ausgaben zu generieren, darunter:

Wenn Sie strukturierte Ausgaben wie JSON oder Enums generieren möchten, verwenden Sie eines der folgenden Beispiele für „Text generieren“ und konfigurieren Sie das Modell zusätzlich so, dass es gemäß einem bereitgestellten Schema antwortet.

Text aus reinen Texteingaben generieren

Bevor Sie dieses Beispiel ausprobieren, müssen Sie den Abschnitt Erste Schritte dieser Anleitung durchgearbeitet haben.

Mit generateContent() können Sie Text aus einem Prompt generieren, der Text enthält:

// Imports + initialization of FirebaseApp and backend service + creation of model instance

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

Beachten Sie, dass Firebase AI Logic auch das Streamen von Textantworten mit generateContentStream (anstelle von generateContent) unterstützt.

Text aus multimodalen Eingaben (Text und Bild) generieren

Bevor Sie dieses Beispiel ausprobieren, müssen Sie den Abschnitt Erste Schritte dieser Anleitung durchgearbeitet haben.

Mit generateContent() können Sie Text aus einem Prompt generieren, der Text- und Bilddateien enthält. Geben Sie dazu für jede Eingabedatei den mimeType und die Datei selbst an.

Die unterstützten Eingabebildtypen für die Inferenz auf dem Gerät sind PNG und JPEG.

// Imports + initialization of FirebaseApp and backend service + creation of model instance

// Converts a File object to a 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() {
  // Provide a text prompt to include with the image
  const prompt = "Write a poem about this picture:";

  const fileInputEl = document.querySelector("input[type=file]");
  const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

  // To generate text output, call `generateContent` with the text and image
  const result = await model.generateContent([prompt, imagePart]);

  const response = result.response;
  const text = response.text();
  console.log(text);
}

run();

Beachten Sie, dass Firebase AI Logic auch das Streamen von Textantworten mit generateContentStream (anstelle von generateContent) unterstützt.

Endnutzern ermöglichen, Ihre Funktion auszuprobieren

Damit Endnutzer Ihre Funktion in Ihrer App testen können, müssen Sie sich für Chrome-Origin-Trials registrieren. Beachten Sie, dass diese Testzeiträume zeitlich und hinsichtlich der Nutzung begrenzt sind.

  1. Registrieren Sie sich für den Prompt API Chrome-Ursprungstest. Sie erhalten ein Token.

  2. Geben Sie das Token auf jeder Webseite an, für die die Testfunktion aktiviert werden soll. Verwenden Sie eine der folgenden Optionen:

    • Geben Sie das Token als Meta-Tag im <head>-Tag an: <meta http-equiv="origin-trial" content="TOKEN">

    • Geben Sie das Token als HTTP-Header an: Origin-Trial: TOKEN

    • Stellen Sie das Token programmatisch zur Verfügung.

Was kannst du sonst noch tun?

Für Ihre hybriden Anwendungen stehen verschiedene zusätzliche Konfigurationsoptionen und Funktionen zur Verfügung:

Funktionen, die noch nicht für die Inferenz auf dem Gerät verfügbar sind

Da es sich um eine Vorabversion handelt, sind nicht alle Funktionen des Web-SDK für die Geräteinferenz verfügbar. Die folgenden Funktionen werden noch nicht für die Inferenz auf dem Gerät unterstützt (sind aber in der Regel für die cloudbasierte Inferenz verfügbar).

  • Text aus Bilddateieingabetypen generieren, die nicht JPEG und PNG sind

    • Kann auf das in der Cloud gehostete Modell zurückgreifen. Im ONLY_ON_DEVICE-Modus wird jedoch ein Fehler ausgegeben.

  • Text aus Audio-, Video- und Dokumenteneingaben (z. B. PDFs) generieren

    • Kann auf das in der Cloud gehostete Modell zurückgreifen. Im ONLY_ON_DEVICE-Modus wird jedoch ein Fehler ausgegeben.

  • Bilder mit Gemini- oder Imagen-Modellen generieren

    • Kann auf das in der Cloud gehostete Modell zurückgreifen. Im ONLY_ON_DEVICE-Modus wird jedoch ein Fehler ausgegeben.

  • Dateien über URLs in multimodalen Anfragen bereitstellen Sie müssen Dateien als Inline-Daten für On-Device-Modelle bereitstellen.

  • Multi-Turn-Unterhaltung

    • Kann auf das in der Cloud gehostete Modell zurückgreifen. Im ONLY_ON_DEVICE-Modus wird jedoch ein Fehler ausgegeben.

  • Bidirektionales Streaming mit dem Gemini Live API

  • Dem Modell Tools zur Verfügung stellen, die ihm bei der Generierung seiner Antwort helfen (z. B. Funktionsaufrufe, Codeausführung, URL-Kontext, Fundierung mit Google Search und Fundierung mit Google Maps)

  • Tokens zählen

    • Gibt immer einen Fehler aus. Die Anzahl unterscheidet sich zwischen cloudbasierten und On-Device-Modellen, sodass es keinen intuitiven Fallback gibt.

  • KI-Monitoring in der Firebase Console für die Inferenz auf dem Gerät.

    • Hinweis: Alle Inferenzen, die mit den in der Cloud gehosteten Modellen durchgeführt werden, können wie andere Inferenzen mit dem Firebase AI Logic-Client-SDK für das Web überwacht werden.


Feedback zu Firebase AI Logic geben