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. Bei der hybriden Inferenz wird die Inferenz mit Modellen auf dem Gerät ausgeführt, wenn diese verfügbar sind. 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, sehen Sie sich die zusätzlichen Konfigurationsoptionen und Funktionen an (z. B. strukturierte Ausgabe).

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 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 Eingabebildtypen vom Typ 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).

  Nachdem Sie diese Standardeinrichtung abgeschlossen haben, sehen Sie sich die zusätzlichen Konfigurationsoptionen und Funktionen an (wie 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 diesen Schritten werden die erforderlichen allgemeinen Einstellungen 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 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. 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 prüfen, ob 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 zu 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 einrichten, um die Firebase AI Logic SDKs zu verwenden.Google Analytics

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

3. Klicken Sie auf Erste Schritte , 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 so ein, dass ein „Gemini API“-Anbieter verwendet wird.

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

   Für die Gemini Developer API, aktiviert die Konsole 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 Konsole 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 das SDK 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";
   
   // 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 ausgewählten API-Anbieter.

2. Erstellen Sie eine GenerativeModel-Instanz. Setzen Sie den 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 lösen Sie eine Ausnahme aus.

   • 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 lösen Sie eine Ausnahme aus.

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: Modell auf dem Gerät initialisieren

Sie müssen initializeDeviceModel() nach oder bei einer Endnutzerinteraktion auf der Seite (z. B. einem Klick auf eine Schaltfläche) und bevor Sie eine Prompt-Anfrage an das Modell senden aufrufen. Weitere Informationen zu den Anforderungen an 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 6: 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 zum Generieren von Text 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).

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. Diese Testversionen sind zeitlich und in der Nutzung begrenzt.

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 noch tun?

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

• Inferenzmodus festlegen

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

• Modellkonfiguration zum Steuern von Antworten verwenden (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 normalerweise für die cloudbasierte Inferenz verfügbar).

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

  • 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.

• 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

• Dem Modell Tools zur Verfügung stellen, mit denen es seine Antwort generieren kann (z. B. Funktionsaufrufe, Codeausführung, URL-Kontext, Grounding mit Google Search, und Grounding 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 jede andere Inferenz mit dem Firebase AI Logic Client-SDK für Web überwacht werden.

Feedback geben zu Ihren Erfahrungen mit Firebase AI Logic