Mit Firebase Extensions für die Gemini API KI-gestützte Web-Apps erstellen

1. Hinweis

Mit Firebase-Erweiterungen können Sie Ihren Apps mit minimalem Code vorkonfigurierte Funktionen hinzufügen, auch KI-gestützte Funktionen. In diesem Codelab erfahren Sie, wie Sie zwei Firebase-Erweiterungen in eine Webanwendung einbinden, damit Sie mithilfe der Gemini API Bildbeschreibungen, Zusammenfassungen und sogar personalisierte Empfehlungen basierend auf dem bereitgestellten Kontext und dem Nutzerinput generieren können.

In diesem Codelab erfahren Sie, wie Sie mit Firebase-Erweiterungen eine KI-gestützte Webanwendung erstellen, die eine überzeugende Nutzererfahrung bietet.

Vorbereitung

• Kenntnisse in Node.js, Next.js und TypeScript

Lerninhalte

• Informationen zum Verwenden von Firebase-Erweiterungen für die Gemini API zur Verarbeitung von Sprache.
• So erstellen Sie mit Cloud Functions for Firebase einen erweiterten Kontext für Ihr Sprachmodell.
• So greifen Sie mit JavaScript auf von Firebase Extensions generierte Ausgabe zu.

Voraussetzungen

• Einen Browser Ihrer Wahl, z. B. Google Chrome
• Eine Entwicklungsumgebung mit einem Code-Editor und einem Terminal
• Ein Google-Konto zum Erstellen und Verwalten Ihres Firebase-Projekts

2. Web-App, Firebase-Dienste und ‑Erweiterungen überprüfen

In diesem Abschnitt sehen Sie sich die Webanwendung an, die Sie in diesem Codelab erstellen, und erfahren mehr über die Firebase-Dienste und Firebase-Erweiterungen, die Sie verwenden werden.

Web-App

In diesem Codelab erstellen Sie eine Webanwendung namens Friendly Conf.

Die Mitarbeiter der Friendly Conference haben sich entschieden, KI zu verwenden, um den Teilnehmern eine angenehme und personalisierte Nutzererfahrung zu bieten. Die fertige Konferenz-App bietet den Teilnehmern einen Konversations-KI-Chatbot, der auf einem multimodalen generativen KI-Modell (auch als Large Language Model oder LLM bezeichnet) basiert. Er kann Fragen zu allgemeinen Themen beantworten, die auf den Zeitplan und die Themen der Konferenz zugeschnitten sind. Der Chatbot kennt den bisherigen Verlauf und das aktuelle Datum und die Uhrzeit sowie die Themen und den Zeitplan der Friendly Conf. So können seine Antworten diesen gesamten Kontext berücksichtigen.

Firebase-Dienste

In diesem Codelab verwenden Sie viele Firebase-Dienste und ‑Funktionen. Der Großteil des Startcodes dafür wird Ihnen zur Verfügung gestellt. In der folgenden Tabelle sind die Dienste aufgeführt, die Sie verwenden werden, und die Gründe dafür.

Firebase Extensions

In diesem Codelab werden die folgenden Firebase-Erweiterungen verwendet:

• Chatbot mit der Gemini API erstellen
• Multimodale Aufgaben mit der Gemini API

Erweiterungen sind nützlich, da sie auf Ereignisse in Ihrem Firebase-Projekt reagieren. Beide in diesem Codelab verwendeten Erweiterungen reagieren, wenn Sie neue Dokumente in vorkonfigurierten Sammlungen in Cloud Firestore erstellen.

3. Entwicklungsumgebung einrichten

Node.js-Version prüfen

1. Prüfen Sie in Ihrem Terminal, ob Node.js Version 20.0.0 oder höher installiert ist:

   node -v
   

2. Wenn Sie Node.js Version 20.0.0 oder höher nicht haben, laden Sie die neueste LTS-Version herunter und installieren Sie sie.

Quellcode für das Codelab abrufen

Wenn Sie ein GitHub-Konto haben:

1. Erstellen Sie ein neues Repository mit unserer Vorlage von github.com/FirebaseExtended/codelab-gemini-api-extensions.
2. Klonen Sie das gerade erstellte GitHub-Repository des Codelabs:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

Wenn Sie Git nicht installiert haben oder kein neues Repository erstellen möchten:

Laden Sie das GitHub-Repository als ZIP-Datei herunter.

Ordnerstruktur prüfen

Der Stammordner enthält eine README.md-Datei mit einer optimierten Anleitung zum schnellen Starten der Webanwendung. Wenn Sie jedoch zum ersten Mal lernen, sollten Sie dieses Codelab (anstelle der Kurzanleitung) absolvieren, da es die umfassendste Anleitung enthält.

Wenn Sie sich nicht sicher sind, ob Sie den Code gemäß der Anleitung in diesem Codelab korrekt angewendet haben, finden Sie den Lösungscode im Git-Branch end.

Firebase CLI installieren

1. Prüfen Sie, ob die Firebase CLI installiert ist und Version 13.6 oder höher hat:

   firebase --version
   

2. Wenn Sie die Firebase CLI installiert haben, aber nicht Version 13.6 oder höher, aktualisieren Sie sie:

   npm update -g firebase-tools
   

3. Wenn Sie die Firebase CLI noch nicht installiert haben, tun Sie dies jetzt:

   npm install -g firebase-tools
   

Wenn Sie die Firebase CLI aufgrund von Berechtigungsfehlern nicht aktualisieren oder installieren können, lesen Sie die npm-Dokumentation oder verwenden Sie eine andere Installationsoption.

In Firebase anmelden

1. Rufen Sie in Ihrem Terminal den Ordner codelab-gemini-api-extensions auf und melden Sie sich in Firebase an:

   cd codelab-gemini-api-extensions
   firebase login
   

   Wenn in Ihrem Terminal angezeigt wird, dass Sie bereits in Firebase angemeldet sind, können Sie mit dem Abschnitt Firebase-Projekt einrichten dieses Codelabs fortfahren.
2. Geben Sie in Ihrem Terminal je nachdem, ob Firebase Daten erheben soll, Y oder N ein. (Beide Optionen funktionieren für dieses Codelab.)
3. Wählen Sie in Ihrem Browser Ihr Google-Konto aus und klicken Sie auf Zulassen.

4. Das Firebase-Projekt einrichten

In diesem Abschnitt richten Sie ein Firebase-Projekt ein und registrieren darin eine Firebase-Web-App. Außerdem aktivieren Sie einige Firebase-Dienste, die später in diesem Codelab von der Beispiel-Webanwendung verwendet werden.

Alle Schritte in diesem Abschnitt werden in der Firebase Console ausgeführt.

Firebase-Projekt erstellen

1. Melden Sie sich mit einem Google-Konto in der Firebase Console an.
2. Klicken Sie auf Projekt erstellen und geben Sie einen Projektnamen ein (z. B. AI Extensions Codelab).
   Notieren Sie sich die automatisch zugewiesene Projekt-ID für Ihr Firebase-Projekt. Sie können auch auf das Symbol Bearbeiten klicken, um die gewünschte Projekt-ID festzulegen. Sie benötigen diese ID später, um Ihr Firebase-Projekt in der Firebase CLI zu identifizieren. Wenn Sie Ihre ID vergessen haben, können Sie sie später in den Projekteinstellungen nachsehen.
3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie gegebenenfalls die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
6. Klicken Sie auf Projekt erstellen, warten Sie, bis das Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Firebase-Preismodell upgraden

Wenn Sie Firebase Extensions (und die zugrunde liegenden Cloud-Dienste) sowie Cloud Storage for Firebase verwenden möchten, muss Ihr Firebase-Projekt den Blaze-Tarif (Pay-as-you-go) haben, d. h. mit einem Cloud-Rechnungskonto verknüpft sein.

• Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode wie eine Kreditkarte erforderlich.
• Wenn Sie neu bei Firebase und Google Cloud sind, prüfen Sie, ob Sie Anspruch auf ein Guthaben in Höhe von 300$und ein kostenloses Cloud Billing-Konto für den Testzeitraum haben.
• Wenn Sie dieses Codelab im Rahmen einer Veranstaltung absolvieren, fragen Sie den Organisator, ob Cloud-Guthaben verfügbar ist.

Wenn die Abrechnung für Ihr Firebase-Projekt aktiviert ist, werden Ihnen die Aufrufe der Gemini API durch die Erweiterung in Rechnung gestellt, unabhängig davon, welchen Anbieter Sie auswählen (Google AI oder Vertex AI). Weitere Informationen zu den Preisen für Google AI und Vertex AI

So führen Sie ein Upgrade auf den Blaze-Tarif durch:

1. Wählen Sie in der Firebase Console Tarif upgraden aus.
2. Wählen Sie den Blaze-Tarif aus. Folgen Sie der Anleitung auf dem Bildschirm, um ein Cloud-Rechnungskonto mit Ihrem Projekt zu verknüpfen.
   Wenn Sie im Rahmen dieses Upgrades ein Cloud-Rechnungskonto erstellen mussten, müssen Sie möglicherweise zur Firebase Console zurückkehren, um das Upgrade abzuschließen.

Ihrem Firebase-Projekt eine Web-App hinzufügen

1. Rufen Sie in Ihrem Firebase-Projekt den Bildschirm Projektübersicht auf und klicken Sie dann auf Web.
2. Geben Sie im Textfeld App-Alias einen einprägsamen Alias für die App ein, z. B. My AI Extensions.
3. Klicken Sie auf App registrieren > Weiter > Weiter > Weiter zur Konsole.
   Sie können alle Schritte zum Thema „Hosting“ im Ablauf für Webanwendungen überspringen, da Sie später in diesem Codelab optional einen Hostingdienst einrichten.

Sehr gut! Sie haben jetzt eine Web-App in Ihrem neuen Firebase-Projekt registriert.

Firebase Authentication einrichten

1. Gehen Sie im linken Navigationsbereich zu Authentifizierung.
2. Klicken Sie auf Jetzt starten.
3. Klicken Sie in der Spalte Zusätzliche Anbieter auf Google > Aktivieren.
4. Geben Sie im Textfeld Öffentlicher Name für Projekt einen aussagekräftigen Namen ein, z. B. My AI Extensions Codelab.
5. Wählen Sie im Menü Support-E-Mail-Adresse für das Projekt Ihre E-Mail-Adresse aus.
6. Klicken Sie auf Speichern.

Cloud Firestore einrichten

1. Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Firestore-Datenbank aus.
2. Klicken Sie auf Datenbank erstellen.
3. Lassen Sie die Datenbank-ID auf (default).
4. Wählen Sie einen Speicherort für die Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort in der Nähe Ihrer Nutzer auswählen.
5. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
6. Klicken Sie auf Erstellen.

Cloud Storage for Firebase einrichten

1. Maximieren Sie im linken Bereich der Firebase Console die Option Build und wählen Sie dann Storage aus.
2. Klicken Sie auf Jetzt starten.
3. Wählen Sie einen Speicherort für Ihren Standard-Storage-Bucket aus.
   Für Buckets in US-WEST1, US-CENTRAL1 und US-EAST1 können Sie die Stufe „Immer kostenlos“ für Google Cloud Storage nutzen. Für Buckets an allen anderen Speicherorten gelten die Preise und Nutzungsbedingungen für Google Cloud Storage.
4. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   Später in diesem Codelab fügen Sie Sicherheitsregeln hinzu, um Ihre Daten zu schützen. Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihren Speicher-Bucket hinzuzufügen.
5. Klicken Sie auf Erstellen.

Im nächsten Abschnitt dieses Codelabs installieren und konfigurieren Sie die beiden Firebase-Erweiterungen, die Sie in der Webanwendung in diesem Codelab verwenden.

5. Erweiterung „Build Chatbot with the Gemini API“ einrichten

Erweiterung „Build Chatbot with the Gemini API“ installieren

1. Rufen Sie die Erweiterung „Build Chatbot with the Gemini API“ auf.
2. Klicken Sie auf In der Firebase Console installieren.
3. Wählen Sie Ihr Firebase-Projekt aus und klicken Sie auf Weiter.
4. Klicken Sie im Abschnitt Aktivierte APIs und erstellte Ressourcen überprüfen neben allen vorgeschlagenen Diensten auf Aktivieren und dann auf Weiter.
5. Wählen Sie für alle vorgeschlagenen Berechtigungen Gewähren und dann Weiter aus.
6. Konfigurieren Sie die Erweiterung:
   1. Wählen Sie im Menü Gemini API-Anbieter aus, ob Sie die Gemini API von Google AI oder Vertex AI verwenden möchten. Für Entwickler, die Firebase verwenden, empfehlen wir Vertex AI.
   2. Geben Sie im Textfeld Firestore-Sammlungspfad users/{uid}/messages ein.
      In den nächsten Schritten dieses Codelabs wird die Gemini API aufgerufen, wenn Sie dieser Sammlung Dokumente hinzufügen.
   3. Wählen Sie im Menü Speicherort für Cloud Functions den gewünschten Speicherort aus, z. B. Iowa (us-central1) oder den Speicherort, den Sie zuvor für Ihre Firestore-Datenbank angegeben haben.
   4. Übernehmen Sie alle anderen Werte unverändert.
7. Klicken Sie auf Erweiterung installieren und warten Sie, bis die Installation abgeschlossen ist.

Erweiterung „Build Chatbot with the Gemini API“ ausprobieren

Das Ziel dieses Codelabs besteht darin, über eine Webanwendung mit der Erweiterung „Build Chatbot with the Gemini API“ zu interagieren. Es ist jedoch hilfreich, zuerst die Funktionsweise der Erweiterung in der Firebase Console zu testen.

Die Erweiterung wird jedes Mal ausgelöst, wenn in der Sammlung users/{uid}/discussion/{discussionId}/messages ein Firestore-Dokument erstellt wird. Das können Sie in der Firebase Console tun.

1. Klicken Sie in der Firebase Console auf Firestore und dann in der ersten Spalte auf Sammlung starten.
2. Geben Sie im Textfeld Sammlungs-ID users ein und klicken Sie auf Weiter.
3. Klicken Sie im Textfeld Dokument-ID auf Auto-ID und dann auf Speichern.
4. Klicken Sie in der Sammlung users auf Sammlung starten.
5. Geben Sie im Textfeld Sammlungs-ID messages ein und klicken Sie auf Weiter.
   1. Klicken Sie im Textfeld Dokument-ID auf Auto-ID.
   2. Geben Sie im Textfeld Feld den Wert prompt ein.
   3. Geben Sie in das Textfeld Wert den Wert Tell me 5 random fruits ein.
6. Klicken Sie auf Speichern und warten Sie einige Sekunden.

Durch das Hinzufügen dieses Dokuments wurde die Erweiterung dazu veranlasst, die Gemini API aufzurufen. Das Dokument, das Sie der Sammlung messages gerade hinzugefügt haben, enthält jetzt nicht nur Ihre prompt, sondern auch die response des Modells für Ihre Abfrage.

Lösen Sie die Erweiterung noch einmal aus, indem Sie der Sammlung messages ein weiteres Dokument hinzufügen:

1. Klicken Sie in der Sammlung messages auf  Dokument hinzufügen.
2. Klicken Sie im Textfeld Dokument-ID auf Auto-ID.
3. Geben Sie im Textfeld Feld den Wert prompt ein.
4. Geben Sie in das Textfeld Wert den Wert And now, vegetables ein.
5. Klicken Sie auf Speichern und warten Sie einige Sekunden. Das Dokument, das Sie der Sammlung messages gerade hinzugefügt haben, enthält jetzt einen response für Ihre Abfrage.
   
   Bei der Generierung dieser Antwort hat das zugrunde liegende Gemini-Modell das bisherige Wissen aus Ihrer vorherigen Abfrage verwendet.

6. Webanwendung einrichten

Um die Webanwendung auszuführen, müssen Sie Befehle in Ihrem Terminal ausführen und Code in Ihrem Code-Editor hinzufügen.

Firebase CLI für die Ausführung in Ihrem Firebase-Projekt einrichten

Geben Sie in Ihrem Terminal den folgenden Befehl ein, um der Befehlszeile mitzuteilen, dass sie Ihr Firebase-Projekt verwenden soll:

firebase use YOUR_PROJECT_ID

Sicherheitsregeln für Firestore und Cloud Storage bereitstellen

Die Codebasis dieses Codelabs enthält bereits eine Reihe von Firestore-Sicherheitsregeln und Cloud Storage-Sicherheitsregeln, die für Sie geschrieben wurden. Nach der Bereitstellung dieser Sicherheitsregeln sind Ihre Firebase-Dienste in Ihrem Firebase-Projekt besser vor Missbrauch geschützt.

1. Führen Sie zum Bereitstellen von Sicherheitsregeln diesen Befehl in Ihrem Terminal aus:

   firebase deploy --only firestore:rules,storage
   

2. Wenn Sie gefragt werden, ob Sie Cloud Storage die IAM-Rolle zum Verwenden dienstübergreifender Regeln zuweisen möchten, geben Sie Y oder N ein. (entweder funktioniert für dieses Codelab)

Web-App mit Firebase-Projekt verbinden

Die Codebasis Ihrer Webanwendung muss wissen, welches Firebase-Projekt für Datenbank, Speicher usw. verwendet werden soll. Dazu fügen Sie der Codebasis Ihrer App die Firebase-Konfiguration hinzu.

1. Rufe deine Firebase-Konfiguration ab:
   1. Rufen Sie in der Firebase Console die Projekteinstellungen Ihres Firebase-Projekts auf.
   2. Scrollen Sie nach unten zum Abschnitt Meine Apps und wählen Sie Ihre registrierte Webanwendung aus.
   3. Kopiere im Bereich SDK-Einrichtung und -Konfiguration den gesamten initializeApp-Code einschließlich der Konstante firebaseConfig.
2. Fügen Sie die Firebase-Konfiguration der Codebasis Ihrer Webanwendung hinzu:
   1. Öffnen Sie die Datei src/app/lib/firebase/firebase.config.js in Ihrem Code-Editor.
   2. Wählen Sie in der Datei alles aus und ersetzen Sie es durch den kopierten Code.
   3. Speichern Sie die Datei.

Web-App in einem Browser in der Vorschau ansehen

1. Installieren Sie im Terminal die Abhängigkeiten und führen Sie dann die Webanwendung aus:

   npm install
   npm run dev
   

2. Rufen Sie in Ihrem Browser die URL des lokal gehosteten Servers auf, um die Webanwendung aufzurufen. In den meisten Fällen lautet die URL beispielsweise http://localhost:3000/.

Chatbot der Webanwendung verwenden

1. Kehren Sie in Ihrem Browser zum Tab mit der lokal ausgeführten Friendly Conf-Web-App zurück.
2. Klicken Sie auf Über Google anmelden und wählen Sie gegebenenfalls Ihr Google-Konto aus.
3. Nach der Anmeldung wird ein leeres Chatfenster angezeigt.
4. Geben Sie eine Begrüßung ein (z. B. hi) und klicken Sie dann auf Senden.
5. Warten Sie einige Sekunden, bis der Chatbot antwortet.

Der Chatbot in der App antwortet mit einer generischen Antwort.

Chatbot für die App anpassen

Sie benötigen das zugrunde liegende Gemini-Modell, das vom Chatbot Ihrer Webanwendung verwendet wird, um konferenzspezifische Details zu kennen, wenn das Modell Antworten für die Teilnehmer generiert, die die App verwenden. Es gibt viele Möglichkeiten, diese Antworten zu steuern. In diesem Codelab-Unterabschnitt zeigen wir Ihnen eine sehr einfache Möglichkeit, indem wir im ersten Prompt „Kontext“ angeben (und nicht nur die Eingabe des Nutzers der Webanwendung).

1. In der Web-App in Ihrem Browser können Sie die Unterhaltung löschen, indem Sie neben der Nachricht im Chatverlauf auf das rote „x“ klicken.
2. Öffnen Sie die Datei src/app/page.tsx in Ihrem Code-Editor.
3. Scrollen Sie nach unten und ersetzen Sie den Code in Zeile 77 oder in der Nähe davon, der prompt: userMsg enthält, durch Folgendes:
   prompt: preparePrompt(userMsg, messages),
4. Speichern Sie die Datei.
5. Kehren Sie zur Webanwendung zurück, die in Ihrem Browser ausgeführt wird.
6. Geben Sie noch einmal eine Begrüßung ein (z. B. hi) und klicken Sie auf Senden.
7. Warten Sie einige Sekunden, bis der Chatbot antwortet.

Der Chatbot antwortet mit Wissen, das sich am in src/app/lib/context.md bereitgestellten Kontext orientiert. Auch wenn Sie keine bestimmte Anfrage eingegeben haben, generiert das zugrunde liegende Gemini-Modell eine personalisierte Empfehlung basierend auf diesem Kontext sowie dem aktuellen Datum und der aktuellen Uhrzeit. Jetzt können Sie weiterführende Fragen stellen und tiefer in das Thema einsteigen.

Dieser erweiterte Kontext ist für den Chatbot wichtig, sollte aber nicht für den Nutzer der Webanwendung sichtbar sein. So blenden Sie ihn aus:

1. Öffnen Sie die Datei src/app/page.tsx in Ihrem Code-Editor.
2. Scrollen Sie nach unten und ersetzen Sie den Code in Zeile 56 oder in der Nähe davon, der ...doc.data(), enthält, durch Folgendes:
   ...prepareMessage(doc.data()),
3. Speichern Sie die Datei.
4. Kehren Sie zur Webanwendung zurück, die in Ihrem Browser ausgeführt wird.
5. Laden Sie die Seite neu.

Sie können auch ausprobieren, wie Sie mit dem Chatbot mit bisherigem Kontext interagieren:

1. Stellen Sie im Textfeld Nachricht eingeben eine Frage wie: Any other interesting talks about AI?Der Chatbot gibt eine Antwort zurück.
2. Stellen Sie im Textfeld Nachricht eingeben eine Anschlussfrage, die sich auf die vorherige Frage bezieht: Give me a few more details about the last one.

Der Chatbot antwortet mit historischen Informationen. Da der Chatverlauf jetzt Teil des Kontexts ist, versteht der Chatbot Anschlussfragen.

Bonus: Web-App mit der Firebase Local Emulator Suite ausführen

Mit der Firebase Local Emulator Suite können Sie die meisten Funktionen der Webanwendung lokal testen.

1. Achten Sie darauf, dass Sie sich im Stammverzeichnis der Webanwendung befinden.
2. Führen Sie den folgenden Befehl aus, um die Firebase Local Emulator Suite zu installieren und auszuführen:

   firebase init emulators
   firebase emulators:start
   

7. Erweiterung „Multimodal Tasks with the Gemini API“ einrichten

Die Erweiterung „Multimodale Aufgaben mit der Gemini API“ ruft die Gemini API mit multimodalen Prompts auf, die einen Textprompt sowie eine unterstützte Datei-URL oder Cloud Storage-URL enthalten. Hinweis: Auch die Google AI Gemini API verwendet eine Cloud Storage-URL als zugrunde liegende Datei-URL-Infrastruktur. Die Erweiterung unterstützt auch Handlebars-Variablen, um Werte aus dem Cloud Firestore-Dokument zu ersetzen und den Textprompt anzupassen.

Wenn Sie in Ihrer App ein Bild in einen Cloud Storage-Bucket hochladen, können Sie eine URL generieren und diese URL einem neuen Cloud Firestore-Dokument hinzufügen. Dadurch wird die Erweiterung ausgelöst, um einen multimodalen Prompt zu erstellen und die Gemini API aufzurufen. Im Quellcode dieses Codelabs haben wir bereits den Code zum Hochladen eines Bildes und zum Schreiben der URL in ein Firestore-Dokument bereitgestellt.

Erweiterung „Multimodal Tasks with the Gemini API“ installieren

1. Rufen Sie die Erweiterung „Multimodal Tasks with the Gemini API“ auf.
2. Klicken Sie auf In der Firebase Console installieren.
3. Wählen Sie Ihr Firebase-Projekt aus.
4. Klicken Sie auf Weiter > Weiter > Weiter, bis Sie den Abschnitt Erweiterung konfigurieren erreichen.
   1. Wählen Sie im Menü Gemini API-Anbieter aus, ob Sie die Gemini API von Google AI oder Vertex AI verwenden möchten. Für Entwickler, die Firebase verwenden, empfehlen wir Vertex AI.
   2. Geben Sie im Textfeld Firestore-Sammlungspfad Folgendes ein: gallery.
   3. Geben Sie im Textfeld Prompt Folgendes ein: Please describe the provided image; if there is no image, say "no image"
   4. Geben Sie im Textfeld Bildfeld den Wert image ein.
   5. Wählen Sie im Menü Speicherort für Cloud Functions den gewünschten Speicherort aus, z. B. Iowa (us-central1) oder den Speicherort, den Sie zuvor für Ihre Firestore-Datenbank angegeben haben.
   6. Übernehmen Sie alle anderen Werte unverändert.
5. Klicken Sie auf Erweiterung installieren und warten Sie, bis die Installation abgeschlossen ist.

Erweiterung „Multimodal Tasks with the Gemini API“ ausprobieren

Das Ziel dieses Codelabs besteht darin, über eine Webanwendung mit der Erweiterung „Multimodale Aufgaben mit der Gemini API“ zu interagieren. Es ist jedoch hilfreich, die Funktionsweise der Erweiterung zuerst in der Firebase Console zu testen.

Die Erweiterung wird jedes Mal ausgelöst, wenn in der Sammlung users/{uid}/gallery ein Firestore-Dokument erstellt wird. Das können Sie in der Firebase Console tun. Die Erweiterung nimmt dann die Cloud Storage-Bild-URL im Cloud Firestore-Dokument und gibt sie als Teil des multimodalen Prompts in einem Aufruf an die Gemini API weiter.

Laden Sie zuerst ein Bild in einen Cloud Storage-Bucket hoch:

1. Rufen Sie in Ihrem Firebase-Projekt Speicher auf.
2. Klicken Sie auf Ordner erstellen.
3. Geben Sie im Textfeld Ordnername den Wert gallery ein.
4. Klicken Sie auf Ordner hinzufügen.
5. Klicken Sie im Ordner gallery auf Datei hochladen.
6. Wählen Sie eine JPEG-Bilddatei zum Hochladen aus.

Fügen Sie als Nächstes die Cloud Storage-URL für das Bild einem Firestore-Dokument hinzu, das der Trigger für die Erweiterung ist:

1. Rufen Sie in Ihrem Firebase-Projekt Firestore auf.
2. Klicken Sie in der ersten Spalte auf Sammlung starten.
3. Geben Sie im Textfeld Sammlungs-ID gallery ein und klicken Sie auf Weiter.
4. So fügen Sie der Sammlung ein Dokument hinzu:
   1. Klicken Sie im Textfeld Dokument-ID auf Auto-ID.
   2. Geben Sie im Textfeld Feld den Wert image ein. Geben Sie im Feld Wert die URI des Speicherorts des gerade hochgeladenen Bildes ein.
5. Klicken Sie auf Feld hinzufügen.
6. Geben Sie im Textfeld Feld den Wert published ein. Wählen Sie im Feld Typ die Option boolean aus. Wählen Sie im Feld Wert die Option true aus.
7. Klicken Sie auf Speichern und warten Sie einige Sekunden.

Die Sammlung gallery enthält jetzt ein Dokument mit einer Antwort auf Ihre Anfrage.

Bildergalerie der Web-App verwenden

1. Kehren Sie in Ihrem Browser zum Tab mit der lokal ausgeführten Friendly Conf-Web-App zurück.
2. Klicken Sie auf den Navigations-Tab Galerie.
3. Sie sehen eine Galerie mit hochgeladenen Bildern und KI-generierten Beschreibungen. Es sollte das Bild enthalten, das Sie zuvor in den Ordner gallery in Ihrem Storage-Bucket hochgeladen haben.
4. Klicken Sie auf die Schaltfläche Hochladen und wählen Sie ein anderes JPEG-Bild aus.
5. Warten Sie einige Sekunden, bis das Bild in der Galerie angezeigt wird. Nach einigen Augenblicken wird auch die KI-generierte Beschreibung für das neu hochgeladene Bild angezeigt.

Wie diese Funktion implementiert wurde, sehen Sie im Code der Webanwendung unter src/app/gallery/page.tsx.

8. Bonus: Anwendung bereitstellen

Firebase bietet mehrere Möglichkeiten, eine Webanwendung bereitzustellen. Wählen Sie für dieses Codelab eine der folgenden Optionen aus:

• Option 1: Firebase Hosting: Verwenden Sie diese Option, wenn Sie kein eigenes GitHub-Repository erstellen und Ihren Quellcode nur lokal auf Ihrem Computer speichern möchten.
• Option 2: Firebase App Hosting: Verwenden Sie diese Option, wenn Sie eine automatische Bereitstellung wünschen, sobald Sie Änderungen an Ihr eigenes GitHub-Repository gepusht haben. Dieser neue Firebase-Dienst wurde speziell für die Anforderungen dynamischer Next.js- und Angular-Anwendungen entwickelt.

Option 1: Mit Firebase Hosting bereitstellen

Verwenden Sie diese Option, wenn Sie kein eigenes GitHub-Repository erstellen und Ihren Quellcode nur lokal auf Ihrem Computer speichern möchten.

1. Initialisieren Sie Firebase Hosting im Terminal mit den folgenden Befehlen:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Drücke Y für den Prompt Detected an existing Next.js codebase in your current directory, should we use this?.
3. Wählen Sie für den Prompt In which region would you like to host server-side content, if applicable? entweder den Standardspeicherort oder den Speicherort aus, den Sie zuvor in diesem Codelab verwendet haben. Drücken Sie dann die Taste Enter (return unter macOS).
4. Drücke N für den Prompt Set up automatic builds and deploys with GitHub?.
5. Stellen Sie Ihre Webanwendung mit dem folgenden Befehl in Hosting bereit:

   firebase deploy --only hosting
   

Fertig! Wenn Sie Ihre App aktualisieren und diese neue Version bereitstellen möchten, führen Sie einfach firebase deploy --only hosting noch einmal aus. Firebase Hosting erstellt und stellt Ihre App dann noch einmal bereit.

Option 2: Bereitstellung mit Firebase App Hosting

Verwenden Sie diese Option, wenn Sie eine automatische Bereitstellung wünschen, wenn Sie Änderungen an Ihr eigenes GitHub-Repository pushen.

1. Übernehmen Sie Ihre Änderungen in GitHub.
2. Rufen Sie in der Firebase Console in Ihrem Firebase-Projekt App-Hosting auf.
3. Klicken Sie auf Jetzt starten > Verbindung zu GitHub herstellen.
4. Wählen Sie Ihr GitHub-Konto und Ihr Repository aus. Klicken Sie auf Weiter.
5. Geben Sie unter Bereitstellungseinstellung > Stammverzeichnis den Namen des Ordners mit dem Quellcode ein, falls sich Ihre package.json nicht im Stammverzeichnis Ihres Repositorys befindet.
6. Wählen Sie als Live-Branch den Branch main Ihres GitHub-Repositories aus. Klicken Sie auf Weiter.
7. Geben Sie eine ID für Ihr Backend ein, z. B. chatbot.
8. Klicken Sie auf Fertigstellen und bereitstellen.

Es dauert einige Minuten, bis die neue Bereitstellung einsatzbereit ist. Sie können den Bereitstellungsstatus in der Firebase Console im Bereich App-Hosting prüfen.

Ab jetzt wird Ihre App jedes Mal automatisch von Firebase App Hosting erstellt und bereitgestellt, wenn Sie eine Änderung in Ihr GitHub-Repository übertragen.

9. Fazit

Glückwunsch! Sie haben in diesem Codelab viel erreicht!

Erweiterungen installieren und konfigurieren

Sie haben über die Firebase Console verschiedene Firebase-Erweiterungen mit generativer KI konfiguriert und installiert. Firebase-Erweiterungen sind praktisch, da Sie nicht viel Boilerplate-Code lernen und schreiben müssen, um die Authentifizierung bei Google Cloud-Diensten oder die Cloud Functions-Logik für das Backend zu verarbeiten, um auf Firestore- und Google Cloud-Dienste und ‑APIs zu hören und mit ihnen zu interagieren.

Erweiterungen mit der Firebase Console testen

Anstatt direkt mit dem Code zu beginnen, haben Sie sich die Zeit genommen, die Funktionsweise dieser genAI-Erweiterungen zu verstehen, die auf einer Eingabe basieren, die Sie über Firestore oder Cloud Storage bereitgestellt haben. Das ist besonders hilfreich, wenn Sie die Ausgabe einer Erweiterung debuggen.

KI-gestützte Webanwendung erstellen

Sie haben eine KI-gestützte Webanwendung entwickelt, die mit Firebase Extensions auf nur wenige Funktionen des Gemini-Modells zugreift.

In der Webanwendung verwenden Sie die Erweiterung „Chatbot mit Gemini API“, um Nutzern eine interaktive Chatoberfläche zur Verfügung zu stellen, die appspezifischen und bisherigen Kontext in Unterhaltungen enthält. Dabei wird jede Nachricht in einem Firestore-Dokument gespeichert, das auf einen bestimmten Nutzer beschränkt ist.

Außerdem wurde die Erweiterung „Multimodale Aufgaben mit der Gemini API“ verwendet, um automatisch Bildbeschreibungen für hochgeladene Bilder zu generieren.

Nächste Schritte

• Experimentieren Sie mit Prompts und nutzen Sie das große Kontextfenster in Google AI Studio oder Vertex AI Studio.
• Weitere Informationen zur Suche mit Retrieval Augmented Generation (RAG)
• In diesem Codelab können Sie in Ihrem eigenen Tempo lernen, wie Sie einer vorhandenen Firebase-App mit Firebase Genkit (einem neuen KI-Framework-Dienst) einen Chatbot hinzufügen.
• Weitere Informationen zu Ähnlichkeitssuchfunktionen in Firestore und Cloud SQL for PostgreSQL
• Trainieren Sie Ihren Chatbot mithilfe von Funktionsaufrufen, Ihre vorhandene App aufzurufen.