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

Mit hybrider Inferenz können Sie KI-gestützte Web-Apps und Funktionen erstellen mit Firebase AI Logic. Die hybride Inferenz ermöglicht die Ausführung der Inferenz mit Modellen auf dem Gerät, wenn verfügbar, und die nahtlose Rückkehr zu in der Cloud gehosteten Modellen, wenn nicht (und umgekehrt).

Auf dieser Seite wird beschrieben, wie Sie das Client SDK verwenden. Nach Abschluss dieser Standard Einrichtung finden Sie hier die zusätzlichen Konfigurationsoptionen und Funktionen (z. B. strukturierte Ausgabe).

Beachten Sie, dass die Inferenz auf dem Gerät für Web-Apps unterstützt wird, 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:

  • Besserer Schutz für die Daten einzelner Nutzer
  • Lokaler Kontext
  • Kostenlose Inferenz
  • Offline-Funktionen

• 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 einmalige Textgenerierung (kein Chat) mit Streaming- oder Nicht-Streaming-Ausgabe. Die folgenden Funktionen zur Textgenerierung werden unterstützt:

• Text aus reinen Texteingaben generieren

• Text aus Text- und Bildeingaben generieren, insbesondere aus Eingabebildtypen wie 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 Vertex AI Gemini API).

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

  Nach Abschluss dieser Standardeinrichtung finden Sie hier die zusätzlichen Konfigurationsoptionen und Funktionen (z. B. strukturierte Ausgabe).

• Nachdem Sie Ihre Funktion implementiert haben, können Sie Endnutzern die Möglichkeit geben, sie in Ihrer tatsächlichen App zu testen.

Erste Schritte mit 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. Vergewissern Sie sich, dass Sie eine aktuelle Version von Chrome verwenden. Aktualisieren Sie 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 zur 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

   1. Öffnen Sie die Entwicklertools > Console.

   2. Führen Sie den folgenden Befehl aus:

      await LanguageModel.availability();
      

   3. Vergewissern Sie sich, 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 einem vorhandenen Google Cloud Projekt Firebase 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 nicht einrichten, Google Analytics um die Firebase AI Logic SDKs zu verwenden.

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

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

4. Richten Sie Ihr Projekt für die Verwendung eines „Gemini API“-Anbieters ein.

   Wir empfehlen, mit der Gemini Developer API zu beginnen. Sie können die jederzeit einrichten Vertex AI Gemini API (und die dafür erforderliche Abrechnung).

   Für die Gemini Developer API, aktiviert die Console die erforderlichen APIs und erstellt einen Gemini API-Schlüssel in Ihrem Projekt.
   Fügen Sie diesen Gemini API-Schlüssel nicht in den Code Ihrer App ein. Weitere Informationen

5. Wenn Sie im Workflow der Console dazu aufgefordert werden, folgen Sie der Anleitung auf dem Bildschirm, um Ihre App zu registrieren und mit Firebase zu verbinden.

6. Fahren Sie mit dem nächsten Schritt in dieser Anleitung fort, um Ihrer App das SDK 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";
   
   // 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: 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. Beachten Sie Folgendes:

   1. Rufen Sie getGenerativeModel nach oder bei einer Endnutzerinteraktion auf (z. B. ein Klick auf eine Schaltfläche). Dies ist eine Voraussetzung für inferenceMode.

   2. Legen Sie für mode einen der folgenden Werte fest:

      • 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
// Call `getGenerativeModel` after or on an end-user interaction
// 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: 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 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 input file's mimeType jeder Eingabedatei 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).

Endnutzern die Möglichkeit geben, Ihre Funktion zu testen

Damit Endnutzer Ihre Funktion in Ihrer App testen können, müssen Sie sich für die Chrome Origin Trials registrieren. Beachten Sie, dass die Dauer und Nutzung dieser Testversionen begrenzt sind.

1. Registrieren Sie sich für die Chrome Origin Trial der Prompt API. 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: <meta http-equiv="origin-trial" content="TOKEN">

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

   • Geben Sie das Token programmatisch an.

Was können Sie sonst noch tun?

Sie können verschiedene zusätzliche Konfigurationsoptionen und Funktionen für Ihre hybriden Erlebnisse 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

Da es sich um eine Vorschauversion handelt, sind nicht alle Funktionen des Web SDK für die Inferenz auf dem Gerät verfügbar. Die folgenden Funktionen werden für die Inferenz auf dem Gerät noch nicht 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.

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

• Wechselseitiger Chat

  • 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

• Dem Modell Tools zur Verfügung stellen, mit denen es seine Antwort generieren kann (z. B. Funktionsaufrufe, Codeausführung, URL-Kontext und Grounding mit der Google Suche)

• 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 jede andere Inferenz mit dem Firebase AI Logic Client-SDK für Web überwacht werden.

Feedback geben zu Firebase AI Logic