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

Mit Firebase AI Logic KI-basierte Webanwendungen und Funktionen mit hybrider Inferenz erstellen. Die Hybrid-Inferenz ermöglicht die Ausführung von Inferenzen mit On-Device-Modellen, sofern verfügbar, und den nahtlosen Wechsel zu in der Cloud gehosteten Modellen (und umgekehrt).

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

Die On-Device-Inferenz wird für Web-Apps unterstützt, die in Chrome auf dem Computer 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:

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

• Die Verwendung von Hybridfunktionen bietet:

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

Unterstützte Funktionen und Features für die On-Device-Inferenz:

Die On-Device-Inferenz unterstützt nur die Single-Turn-Textgenerierung (keinen Chat) mit Streaming- oder Nicht-Streaming-Ausgabe. Es unterstützt die folgenden Funktionen zur Textgenerierung:

• Text aus reiner Texteingabe generieren

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

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

Hinweis

Beachten Sie Folgendes:

• Für die Inferenz mit einem On-Device-Modell wird die Prompt API von Chrome verwendet. Für die Inferenz mit einem in der Cloud gehosteten Modell wird der von Ihnen ausgewählte Gemini API-Anbieter (entweder Gemini Developer API oder Agent Platform Gemini API (formerly Vertex AI)) verwendet.

• Auf dieser Seite wird beschrieben, wie Sie mit der Entwicklung über 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 (z. B. strukturierte Ausgabe) ansehen.

Erste Schritte mit localhost

In diesen Schritten wird die erforderliche allgemeine Einrichtung für alle unterstützten Prompt-Anfragen 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 die Version unter chrome://settings/help.
   Die On-Device-Inferenz ist ab Chrome-Version 139 verfügbar.

2. Aktivieren Sie das On-Device-Multimodal-Modell, 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 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 vor Ihrer ersten Anfrage für die On-Device-Inferenz noch nicht heruntergeladen haben, wird der Modelldownload im Hintergrund automatisch gestartet.

   Anleitung zum Herunterladen des On-Device-Modells ansehen

   1. Öffnen Sie Entwicklertools > Konsole.

   2. Führen Sie den folgenden Befehl aus:

      await LanguageModel.availability();
      

   3. Die Ausgabe muss available, downloading oder downloadable sein.

   4. Wenn die Ausgabe downloadable ist, starten Sie den Modelldownload mit folgendem Befehl:

      await LanguageModel.create();
      

   5. Sie können den folgenden monitor-Callback verwenden, um den Downloadfortschritt zu beobachten und sicherzustellen, dass das Modell available ist, bevor Sie Anfragen stellen:

      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 automatisch das zugrunde liegende Google Cloud-Projekt), indem Sie im ersten Schritt des Workflows einen neuen Projektnamen eingeben.

   • Option 2: „Firebase hinzufügen“ zu einem vorhandenen Google Cloud-Projekt, 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 verbleibenden Schritte des Workflows auf dem Bildschirm aus, um ein Firebase-Projekt zu erstellen. Wenn Sie dazu aufgefordert werden, müssen Sie Google Analytics nicht einrichten, um die Firebase AI Logic SDKs zu verwenden.

2. Rufen Sie in der Firebase-Konsole KI-Dienste > 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 die Gemini Developer API. Damit können Sie schnell und kostenlos loslegen.

   Sie können die Agent Platform Gemini API (formerly Vertex AI) (und die Abrechnungsanforderung) jederzeit später einrichten.

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

   In dieser Phase des Workflows wird automatisch Firebase App Check für AI Logic erzwungen. Dies ist ein wichtiger Dienst, der zum Schutz von Gemini API beiträgt, wenn direkt über Ihre App darauf zugegriffen wird. Im Rahmen der ersten Schritte (siehe Schritte weiter unten in diesem Leitfaden) 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 zu 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 das Web enthalten.

1. Installieren Sie das Firebase JS SDK für das 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

Im Rahmen des geführten Einrichtungsworkflows für AI Logic in der Console wird Firebase App Check automatisch erzwungen, um die Gemini API zu schützen. Für die lokale Entwicklung müssen Sie den App Check-Debug-Anbieter so konfigurieren, dass die Attestierung umgangen wird, während die Erzwingung von App Check beibehalten wird.

So verwenden Sie den Debug-Anbieter, wenn Sie Ihre App interaktiv über 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 Web-App lokal auf und öffnen Sie die Entwicklertools des Browsers. In der Debugging-Konsole wird ein Debugging-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 Sicherheit > App Check > Apps auf.

   2. Suchen Sie Ihre App, klicken Sie auf das Dreipunkt-Menü (more_vert) und wählen Sie 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 des Abrufs 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 ausgewählten API-Anbieter.

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

   • PREFER_ON_DEVICE: Verwenden Sie das On-Device-Modell, wenn es verfügbar ist. Andernfalls greifen Sie auf das in der Cloud gehostete Modell zurück.

   • ONLY_ON_DEVICE: Das On-Device-Modell wird verwendet, wenn es verfügbar ist. 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 6: On-Device-Modell initialisieren

Sie müssen initializeDeviceModel() nach oder während einer Seiteninteraktion des Endnutzers (z. B. einem Buttonklick) und vor dem Senden einer Prompt-Anfrage an das Modell aufrufen. Weitere Informationen zur Anforderung 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 7: Prompt-Anfrage an ein Modell senden

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

• Text aus reiner Texteingabe generieren
• Text aus Text- und Bildeingaben (multimodal) generieren

Wenn Sie eine strukturierte Ausgabe (z. B. 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 Nur-Text-Eingabe generieren

Sie können generateContent() verwenden, um Text aus einem Prompt zu 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 (anstelle von generateContent) unterstützt.

Text aus Text- und Bild-Eingaben (multimodal) generieren

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

Die unterstützten Eingabebildtypen für die On-Device-Inferenz 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 {
    type: "inlineData",
    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 (anstelle von generateContent) unterstützt.

Was kannst du sonst noch alles für mich tun?

Für Ihre Hybridumgebungen können Sie verschiedene zusätzliche Konfigurationsoptionen und Funktionen verwenden:

• Inferenzmodus festlegen

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

• Modellkonfiguration zum Steuern von Antworten verwenden

• Strukturierte Ausgabe (z. B. JSON) generieren

Noch nicht für die On-Device-Inferenz verfügbare Funktionen

Nicht alle Funktionen des Web SDK sind für die Inferenz auf dem Gerät verfügbar. Die folgenden Funktionen werden für die On-Device-Inferenz noch nicht unterstützt (sie sind aber in der Regel für die cloudbasierte Inferenz verfügbar).

• Text aus anderen Bilddateitypen als JPEG und PNG generieren

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

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

  • Es kann ein Fallback auf das in der Cloud gehostete Modell erfolgen. Im ONLY_ON_DEVICE-Modus wird jedoch ein Fehler ausgegeben.

• Bilder mit Gemini Nano Banana-Modellen generieren

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

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

• Multi-Turn-Unterhaltung

  • Ein Fallback auf das in der Cloud gehostete Modell ist möglich. 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 es beim Generieren der Antwort unterstützen (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 und On-Device-Modellen, sodass es keinen intuitiven Fallback gibt.

• KI-Monitoring in der Firebase-Konsole für On-Device-Inferenz.

  • Beachten Sie, dass alle Inferenzen mit den in der Cloud gehosteten Modellen wie andere Inferenzen mit dem Firebase AI Logic-Client-SDK für das Web überwacht werden können.

Feedback zu Ihren Erfahrungen mit Firebase AI Logic geben