Hybrid-KI-Prompts mit Firebase-KI-Logik

Thomas Steiner

Veröffentlicht: 20. Mai 2025

Um die Anforderungen Ihrer Nutzer zu erfüllen, unabhängig davon, welche Plattform oder Hardware sie verwenden, können Sie mit Firebase AI Logic für die integrierte Prompt API einen Fallback zur Cloud einrichten.

Hybride KI-Lösung entwickeln

Integrierte KI bietet eine Reihe von Vorteilen, insbesondere:

• Lokale Verarbeitung vertraulicher Daten:Wenn Sie mit vertraulichen Daten arbeiten, können Sie Nutzern KI-Funktionen mit Ende-zu-Ende-Verschlüsselung anbieten.
• KI-Nutzung im Offlinemodus:Ihre Nutzer können auf KI-Funktionen zugreifen, auch wenn sie offline sind oder die Verbindung unterbrochen wurde.

Diese Vorteile gelten zwar nicht für Cloud-Anwendungen, Sie können aber dafür sorgen, dass Nutzer, die nicht auf integrierte KI zugreifen können, eine reibungslose Nutzung haben.

Achtung :Wenn Sie auf die Cloud zurückgreifen, kann dies rechtliche oder funktionale Folgen für Ihre Anwendung haben. Wenn Sie vertrauliche Informationen verarbeiten, müssen Sie die entsprechenden Nutzungsbedingungen zur Überprüfung und Einwilligung durch den Nutzer zur Verfügung stellen.

Erste Schritte mit Firebase

Informationen zum Erstellen eines Firebase-Projekts und zum Hinzufügen von Firebase zu Ihrer Web-App

Firebase-Projekte sind Google Cloud-Projekte mit Firebase-spezifischen Konfigurationen und Diensten. Weitere Informationen zu Google Cloud und Firebase

SDK Installieren

Für diesen Workflow wird npm verwendet und es sind Modul-Bundler oder JavaScript-Framework-Tools erforderlich. Firebase AI Logic ist für die Verwendung mit Modul-Bundlern optimiert, um ungenutzten Code zu entfernen und die SDK-Größe zu verringern.

1. Installieren Sie das Firebase JS SDK:

   npm install firebase
   

2. Firebase in Ihrer Anwendung initialisieren

Firebase AI Logic einrichten und schützen

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

2. Klicken Sie auf Jetzt starten, um den Einrichtungsvorgang zu starten.

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

   Sie können die Vertex AI Gemini API (und die damit verbundenen Abrechnungsanforderungen) jederzeit später einrichten.

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

   Ab Anfang Juli 2026 wird in dieser Phase des Workflows automatisch Firebase App Check für AI Logic erzwungen. 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) müssen Sie den App Check-Debug-Anbieter für die lokale Entwicklung konfigurieren, wenn App Check erzwungen wird.

   Hinweis :Wenn Sie die KI-Funktion Ihrer App für Endnutzer freigeben möchten, müssen Sie Ihre App bei einem App Check-Attestierungsanbieter für die Produktion registrieren, damit sie die Funktion verwenden können, wenn App Check erzwungen wird.

5. Fahren Sie mit den nächsten Abschnitten in diesem Leitfaden fort, um den App Check-Debug-Anbieter für die lokale Entwicklung zu konfigurieren und dann Ihre erste Anfrage an die Gemini API zu senden.

App Check-Debug-Anbieter für die lokale Entwicklung konfigurieren

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

Warnung :Versuchen Sie nicht, das localhost-Debugging zu aktivieren, indem Sie localhost den zulässigen Domains für reCAPTCHA hinzufügen. Dadurch könnte jeder Ihre App auf seinem lokalen Computer ausführen.

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(app, { /* App Check options */ });
   

2. Rufen Sie Ihre Web-App lokal auf und öffnen Sie die Entwicklertools des Browsers. In der Debug-Konsole wird ein Debug-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 Console Sicherheit > App Check > Apps auf.

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

Wichtige Hinweise zum App Check-Debug-Anbieter:

• Debug-Token und Debug-Build privat halten Sichern Sie Ihr Debug-Token nicht in einem öffentlichen Repository und geben Sie Ihr Debug-Token oder Ihren Debug-Build nicht in Produktions-Builds Ihrer App an.
• Registrieren Sie Ihre App bei einem Attestierungsanbieter für die Produktion, bevor Sie sie für Endnutzer veröffentlichen. Sie müssen Ihre App bei einem App Check-Attestierungsanbieter für die Produktion registrieren (z. B. reCAPTCHA Enterprise), damit Ihre Endnutzer die Funktion mit aktivierter App Check-Prüfung verwenden können.

Anfrage an die Gemini API senden

1. Instanz initialisieren und erstellen

2. Das Modell mit Text- oder multimodalen Eingaben auffordern. Beispiele finden Sie in den folgenden Unterabschnitten dieses Leitfadens.

   Hinweis :In den folgenden Beispielen wird gezeigt, wie Antworten vom Modell gestreamt werden. Sie können also mit den empfangenen Ausgabeblöcken oder der vollständigen Antwort arbeiten.

Text-Prompts

Sie können Klartext für Ihre Anweisungen an das Modell verwenden. Sie könnten das Modell beispielsweise bitten, Ihnen einen Witz zu erzählen.

Sie haben verschiedene Möglichkeiten, wie die Anfrage weitergeleitet wird:

• Wenn die integrierte KI verfügbar ist, können Sie sie standardmäßig verwenden, indem Sie mode in der Funktion getGenerativeModel() auf 'prefer_on_device' setzen. Wenn das integrierte Modell nicht verfügbar ist, wird die Anfrage nahtlos auf das Cloud-Modell zurückgesetzt (wenn Sie online sind).

• Legen Sie das Cloud-Modell als Standard fest, wenn Sie online sind, indem Sie mode in der Funktion getGenerativeModel() auf 'prefer_in_cloud' setzen. Wenn Sie offline sind, wird die Anfrage nahtlos an die integrierte KI weitergeleitet, sofern verfügbar.

// Initialize the Google AI service.
const googleAI = getAI(firebaseApp);

// Create a `GenerativeModel` instance with a model that supports your use case.
const model = getGenerativeModel(googleAI, { mode: 'prefer_on_device' });

const prompt = 'Tell me a joke';

const result = await model.generateContentStream(prompt);

for await (const chunk of result.stream) {
  const chunkText = chunk.text();
  console.log(chunkText);
}
console.log('Complete response', await result.response);

Multimodale Prompts

Sie können auch Bilder oder Audioinhalte als Prompts verwenden. Sie können das Modell beispielsweise bitten, den Inhalt eines Bildes zu beschreiben oder eine Audiodatei zu transkribieren.

Bilder müssen als Base64-codierter String als Firebase-FileDataPart-Objekt übergeben werden. Dazu können Sie die Hilfsfunktion fileToGenerativePart() verwenden.

// Converts a File object to a `FileDataPart` object.
// https://firebase.google.com/docs/reference/js/vertexai.filedatapart
async function fileToGenerativePart(file) {
    const base64EncodedDataPromise = new Promise((resolve) => {
      const reader = new FileReader();
      reader.onload = () => resolve(reader.result.split(',')[1]);
      reader.readAsDataURL(file);
    });

    return {
      inlineData: { data: await base64EncodedDataPromise, mimeType: file.type },
    };
  }

  const fileInputEl = document.querySelector('input[type=file]');

  fileInputEl.addEventListener('change', async () => {
    const prompt = 'Describe the contents of this image.';

    const imagePart = await fileToGenerativePart(fileInputEl.files[0]);

    // To generate text output, call generateContent with the text and image
    const result = await model.generateContentStream([prompt, imagePart]);

    for await (const chunk of result.stream) {
      const chunkText = chunk.text();
      console.log(chunkText);
    }
    console.log(Complete response: ', await result.response);
  });

Demo

Rufen Sie die Firebase AI Logic-Demo auf verschiedenen Geräten und in verschiedenen Browsern auf. Sie können sehen, ob die Modellantwort vom integrierten KI-Modell oder aus der Cloud stammt.

Auf unterstützter Hardware in Chrome wird in der Demo die Prompt API und Gemini Nano verwendet. Es werden nur drei Anfragen für das Hauptdokument, die JavaScript-Datei und die CSS-Datei gestellt.

In einem anderen Browser oder einem Betriebssystem ohne integrierte KI-Unterstützung wird eine zusätzliche Anfrage an den Firebase-Endpunkt https://firebasevertexai.googleapis.com gesendet.

Teilnehmen und Feedback geben

Firebase AI Logic kann eine gute Option sein, um KI-Funktionen in Ihre Web-Apps einzubinden. Durch die Bereitstellung eines Fallbacks in der Cloud, wenn die Prompt API nicht verfügbar ist, sorgt das SDK für eine bessere Zugänglichkeit und Zuverlässigkeit von KI-Funktionen.

Cloudanwendungen schaffen neue Erwartungen an Datenschutz und Funktionalität. Daher ist es wichtig, Ihre Nutzer darüber zu informieren, wo ihre Daten verarbeitet werden.

• Wenn Sie Feedback zur Implementierung von Chrome geben möchten, melden Sie einen Fehler oder stellen Sie einen Feature Request.
• Wenn Sie Feedback zu Firebase AI Logic geben möchten, reichen Sie einen Fehlerbericht ein.