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

Mit hybrider Inferenz KI-gestützte Webanwendungen und ‑funktionen erstellen mit Firebase AI Logic Bei der hybriden Inferenz wird, wenn verfügbar, die Inferenz mit Modellen auf dem Gerät ausgeführt. Andernfalls wird nahtlos auf in der Cloud gehostete Modelle zurückgegriffen (und umgekehrt).

Auf dieser Seite wird beschrieben, wie Sie das Client SDK verwenden. Nachdem Sie diese Standard Einrichtung abgeschlossen haben, können Sie sich die zusätzlichen Konfigurationsoptionen und Funktionen ansehen (z. B. strukturierte Ausgabe).

Die Inferenz auf dem Gerät wird für Webanwendungen 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 Modells auf dem Gerät für die Inferenz bietet folgende Vorteile:

  • Mehr Datenschutz
  • Lokaler Kontext
  • Kostenlose Inferenz
  • Offline-Funktionalität

• Die Verwendung der Hybridfunktion bietet folgende Vorteile:

  • Sie erreichen 100% Ihrer Zielgruppe, unabhängig von der Verfügbarkeit des Modells auf dem Gerät oder der Internetverbindung.

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

Die Inferenz auf dem Gerät unterstützt nur die Textgenerierung in einem Durchgang (kein Chat) mit Streaming- oder Nicht-Streaming-Ausgabe. Folgende Funktionen zur Textgenerierung werden unterstützt:

• Text aus reinen Texteingaben generieren

• Text aus Text- und Bildeingaben generieren, insbesondere aus den Eingabebildtypen JPEG und PNG

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

Hinweis

Beachten Sie Folgendes:

• Bei der Inferenz mit einem Modell auf dem Gerät wird die Prompt API von Chrome verwendet. Bei der Inferenz mit einem in der Cloud gehosteten Modell wird der von Ihnen ausgewählte Gemini API Anbieter verwendet (entweder die Gemini Developer API oder die Agent Platform Gemini API (formerly Vertex AI)).

• Auf dieser Seite wird beschrieben, wie Sie mit der Entwicklung auf localhost beginnen (weitere Informationen zur Verwendung von APIs auf localhost finden Sie in der Chrome-Dokumentation).

  Nachdem Sie diese Standardeinrichtung abgeschlossen haben, können Sie sich die zusätzlichen Konfigurationsoptionen und Funktionen ansehen (wie strukturierte Ausgabe).

Erste Schritte auf localhost

In dieser Anleitung werden die erforderlichen allgemeinen Einrichtungsschritte für jede unterstützte Prompt-Anfrage beschrieben, die Sie senden möchten.

Schritt 1: Chrome und die Prompt API für die Inferenz auf dem Gerät einrichten

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

2. Aktivieren Sie das multimodale Modell auf dem Gerät, indem Sie das folgende Flag auf Aktiviert setzen:

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

3. Starten Sie Chrome neu.

4. (Optional) Laden Sie das Modell auf dem Gerät vor der ersten Anfrage herunter.

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

   Anleitung zum Herunterladen des Modells auf dem Gerät ansehen

   1. Öffnen Sie die Entwicklertools > Console.

   2. Führen Sie den folgenden Befehl aus:

      await LanguageModel.availability();
      

   3. Achten Sie darauf, dass die Ausgabe available, downloading oder downloadable ist.

   4. Wenn die Ausgabe downloadable ist, starten Sie den Download des Modells mit folgendem Befehl:

      await LanguageModel.create();
      

   5. Mit dem folgenden monitor-Callback können Sie den Downloadfortschritt verfolgen und sicherstellen, dass das Modell available ist, bevor Sie Anfragen senden:

      const session = await LanguageModel.create({
        monitor(m) {
          m.addEventListener("downloadprogress", (e) => {
            console.log(`Downloaded ${e.loaded * 100}%`);
          });
        },
      });
      

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

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

   Sie haben noch kein Firebase-Projekt?

   Wenn Sie noch kein Firebase-Projekt haben, klicken Sie auf die Schaltfläche, um ein neues Firebase-Projekt zu erstellen, und verwenden Sie dann eine der folgenden Optionen:

   • Option 1: Erstellen Sie ein völlig neues Firebase-Projekt (und das zugrunde liegende Google Cloud Projekt automatisch), indem Sie im ersten Schritt des Workflows einen neuen Projektnamen eingeben.

   • Option 2: Fügen Sie Firebase einem vorhandenen Google Cloud Projekt hinzu, indem Sie unten auf der Seite auf Firebase dem Google Cloud-Projekt hinzufügen klicken. Geben Sie im ersten Schritt des Workflows den Projektnamen des vorhandenen Projekts ein und wählen Sie das Projekt dann aus der angezeigten Liste aus.

   Führen Sie die restlichen Schritte des Workflows auf dem Bildschirm aus, um ein Firebase-Projekt zu erstellen. Wenn Sie dazu aufgefordert werden, müssen Sie kein Google Analytics einrichten, um die Firebase AI Logic SDKs zu verwenden.

2. Rufen Sie in der Firebase Konsole AI Services > AI Logic auf.

3. Klicken Sie auf Jetzt starten , um einen geführten Workflow zu starten, der Sie bei der Einrichtung der erforderlichen APIs und Ressourcen für Ihr Projekt unterstützt.

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

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

   Sie können die Abrechnung jederzeit später einrichtenAgent Platform Gemini API (formerly Vertex AI) .

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

   Ab Anfang Juli 2026 wird in dieser Phase des Workflows automatisch Firebase App Check für AI LogicFirebase App Check erzwungen.AI Logic Dies ist ein wichtiger Dienst, um die Gemini API zu schützen, wenn direkt über Ihre App darauf zugegriffen wird. Im Rahmen der ersten Schritte (siehe Anleitung weiter unten in dieser Anleitung) 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 die erforderlichen SDKs Ihrer App 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. Initialisieren Sie Firebase in Ihrer App:

   import { initializeApp } from "firebase/app";
   import { initializeAppCheck } 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 4: App Check Debug-Anbieter für die lokale Entwicklung konfigurieren

Ab Anfang Juli 2026 wird im Rahmen des geführten Einrichtungsworkflows für AI Logic in der Konsole 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 Erzwingung von App Check beizubehalten.

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

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

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

2. Rufen Sie Ihre Webanwendung lokal auf und öffnen Sie die Entwicklertools des Browsers. In der Debug-Konsole sehen Sie ein Debug-Token:

   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 Sicherheit > App Check > Apps Tab auf.

   2. Suchen Sie Ihre App, klicken Sie auf das Dreipunkt-Menü (more_vert) 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 Debug-Anbieter, einschließlich einer Anleitung zum Abrufen eines neuen Debug-Tokens, finden Sie in der offiziellen App Check Dokumentation.

Schritt 5: Dienst initialisieren und Modellinstanz erstellen

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. Setzen Sie mode auf einen der folgenden Werte:

   • PREFER_ON_DEVICE: Verwenden Sie das Modell auf dem Gerät, wenn es verfügbar ist. Andernfalls greifen Sie auf das in der Cloud gehostete Modell zurück.

   • ONLY_ON_DEVICE: Verwenden Sie das Modell auf dem Gerät, wenn es verfügbar ist. Andernfalls wird eine Ausnahme ausgelöst.

   • PREFER_IN_CLOUD: Verwenden Sie das in der Cloud gehostete Modell, wenn es verfügbar ist. Andernfalls greifen Sie auf das Modell auf dem Gerät zurück.

   • ONLY_IN_CLOUD: Verwenden Sie das in der Cloud gehostete Modell, wenn es verfügbar ist. 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 6: Modell auf dem Gerät 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 Prompt-Anfrage an das Modell senden aufrufen. Weitere Informationen zu den Anforderungen für die 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 7: Prompt-Anfrage an ein Modell senden

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

• Text aus reinen Texteingaben generieren
• Text aus Text- und Bildeingaben (multimodal) generieren

Wenn Sie strukturierte Ausgaben (z. B. JSON oder Enums) generieren möchten, dann verwenden Sie eines der folgenden Beispiele für die Textgenerierung und konfigurieren Sie das Modell zusätzlich so, dass es gemäß einem bereitgestellten Schema antwortet.

Text aus reinen Texteingaben generieren

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 Streaming von Textantworten mit generateContentStream unterstützt (anstelle von generateContent).

Text aus Text- und Bildeingaben (multimodal) generieren

Mit generateContent() können Sie Text aus einem Prompt generieren, der Text- und Bilddateien enthält. Geben Sie dazu den der Eingabedatei 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 Streaming von Textantworten mit generateContentStream unterstützt (anstelle von generateContent).

Was können Sie noch tun?

Sie können verschiedene zusätzliche Konfigurationsoptionen und Funktionen für Ihre hybriden Anwendungen verwenden:

• Inferenzmodus festlegen

• Standardmäßiges in der Cloud gehostetes Fallback-Modell überschreiben

• Modellkonfiguration verwenden, um Antworten zu steuern (z. B. Temperatur)

• Strukturierte Ausgaben generieren (z. B. JSON)

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

Nicht alle Funktionen des Web SDK sind für die Inferenz auf dem Gerät 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 anderen Eingabebilddateitypen als JPEG und PNG generieren

  • Es kann auf das in der Cloud gehostete Modell zurückgegriffen werden. Im Modus ONLY_ON_DEVICE wird jedoch ein Fehler ausgelöst.

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

  • Es kann auf das in der Cloud gehostete Modell zurückgegriffen werden. Im Modus ONLY_ON_DEVICE wird jedoch ein Fehler ausgelöst.

• Bilder mit Gemini oder Imagen Modellen generieren

  • Es kann auf das in der Cloud gehostete Modell zurückgegriffen werden. Im Modus ONLY_ON_DEVICE wird jedoch ein Fehler ausgelöst.

• Bereitstellen von Dateien über URLs in multimodalen Anfragen. Sie müssen Dateien als Inline-Daten für Modelle auf dem Gerät bereitstellen.

• Multi-Turn-Unterhaltung

  • Es kann auf das in der Cloud gehostete Modell zurückgegriffen werden. Im Modus ONLY_ON_DEVICE wird jedoch ein Fehler ausgelöst.

• Bidirektionales Streaming mit der Gemini Live API

• Bereitstellen von Tools für das Modell, damit es seine Antwort generieren kann (z. B. Funktionsaufrufe, Code-Ausführung, URL-Kontext, Fundierung mit Google Search, und Fundierung mit Google Maps)

• Tokens zählen

  • Löst immer einen Fehler aus. Die Anzahl unterscheidet sich zwischen in der Cloud gehosteten Modellen und Modellen auf dem Gerät, sodass es keinen intuitiven Fallback gibt.

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

  • Jede Inferenz mit den in der Cloud gehosteten Modellen kann wie andere Inferenz mit dem Firebase AI Logic Client-SDK für Web überwacht werden.

Feedback geben zu Ihren Erfahrungen mit Firebase AI Logic