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

Mit Hybrid-Inferenz können Sie KI-gestützte Webanwendungen und ‑Funktionen mit Firebase AI Logic erstellen. Bei der Hybrid-Inferenz wird die Inferenz mit On-Device-Modellen 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 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-Funktionen

• Die Verwendung der Hybrid-Funktionalität 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 einer Runde (kein Chat) mit Streaming- oder Nicht-Streaming-Ausgabe. Die folgenden Funktionen zur Textgenerierung werden unterstützt:

• Text aus reiner Texteingabe generieren

• Text aus Text- und Bildeingabe 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 On-Device-Modell 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 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 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 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. Prüfen Sie, ob 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 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. Beachten Sie, dass Sie, wenn Sie dazu aufgefordert werden, nicht einrichten müssen, 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 so ein, dass ein „Gemini API“-Anbieter verwendet wird.

   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, werden in der Console die erforderlichen APIs aktiviert und ein Gemini API-Schlüssel in Ihrem Projekt erstellt.
   Fügen Sie diesen Gemini API-Schlüssel nicht in die Codebasis 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 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
// 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 reiner Texteingabe generieren
• Text aus Text- und Bildeingabe (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 reiner Texteingabe 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 Bildeingabe (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-Ursprungstests registrieren. registrieren. Diese Tests sind zeitlich und in der Nutzung begrenzt.

1. Registrieren Sie sich für den Chrome-Ursprungstest für die 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 Hybrid-Apps 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.

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