Diese Seite wurde von der Cloud Translation API übersetzt.

Mit Firebase Genkit generative KI-Funktionen auf der Grundlage Ihrer Daten erstellen

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie Firebase Genkit verwenden, um generative KI in Ihre App einzubinden. Firebase Genkit ist ein Open-Source-Framework, mit dem Sie produktionsreife KI-gestützte Apps erstellen, bereitstellen und überwachen können.

Genkit wurde für App-Entwickler entwickelt, damit Sie leistungsstarke KI-Funktionen mit vertrauten Mustern und Paradigmen ganz einfach in Ihre Apps einbinden können. Es wird vom Firebase-Team entwickelt und basiert auf unserer Erfahrung beim Erstellen von Tools, die von Millionen von Entwicklern weltweit verwendet werden.

Vorbereitung

Sie sollten mit Firestore, Node.js und TypeScript vertraut sein.

Lerninhalte

Mit den erweiterten Funktionen für die Vektorähnlichkeitssuche von Firestore intelligentere Apps erstellen
Informationen zur praktischen Implementierung generativer KI in Ihren Apps mit Firebase Genkit
Bereiten Sie Ihre Lösung für die Bereitstellung und Integration vor.

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. Verwendete Webanwendungen und Cloud-Dienste überprüfen

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

Web-App

In diesem Codelab arbeiten Sie mit der Codebasis einer App namens Compass, einer App zur Reiseplanung. Nutzer können ein Reiseziel auswählen, sich Aktivitäten am Zielort ansehen und einen Reiseplan für ihre Reise erstellen.

In diesem Codelab implementieren Sie zwei neue Funktionen, die die Nutzerinteraktion mit der Startseite der App verbessern sollen. Beide Funktionen basieren auf generativer KI:

Die App zeigt derzeit eine statische Liste von Zielen an. Sie ändern es in ein dynamisches Bild.
Sie implementieren einen automatisch ausgefüllten Reiseplan, um die Nutzerbindung zu erhöhen.

Verwendete Dienste

In diesem Codelab verwenden Sie viele Firebase- und Cloud-Dienste und -Funktionen. Der Großteil des Startercodes 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.

Dienst	Grund für die Verwendung
Firebase Genkit	Mit Genkit können Sie generative KI in eine Node.js-/Next.js-Anwendung einbinden.
Cloud Firestore	Sie speichern Daten in Cloud Firestore, die dann für die Vektorähnlichkeitssuche verwendet werden.
Vertex AI von Google Cloud	Sie verwenden grundlegende Modelle aus Vertex AI (z. B. Gemini), um Ihre KI-Funktionen zu unterstützen.
Firebase App Hosting	Optional können Sie das neue optimierte Firebase App Hosting verwenden, um Ihre dynamische Next.js-Web-App bereitzustellen, die mit einem GitHub-Repository verbunden ist.

3. Entwicklungsumgebung einrichten

Node.js-Version prüfen

Prüfen Sie in Ihrem Terminal, ob Node.js-Version 20.0.0 oder höher installiert ist:
```
node -v
```
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:

Erstellen Sie ein neues Repository mit unserer Vorlage von github.com/FirebaseExtended/codelab-ai-genkit-rag.
Erstellen Sie einen lokalen Klon des gerade erstellten GitHub-Repositorys des Codelabs:
```
git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
```

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

Suchen Sie auf Ihrem lokalen Computer nach dem geklonten Repository und sehen Sie sich die Ordnerstruktur an:

Ordner	Beschreibung
`load-firestore-data`	Befehlszeilen-Hilfstool zum schnellen Vorabfüllen Ihrer Firestore-Sammlung
*Sonstiges	Code der Next.js-Webanwendung

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

Prüfen Sie, ob die Firebase CLI installiert ist und Version 13.6 oder höher hat:
```
firebase --version
```
Wenn Sie die Firebase CLI installiert haben, aber nicht Version 13.6 oder höher, aktualisieren Sie sie:
```
npm update -g firebase-tools
```
Wenn Sie die Firebase CLI noch nicht installiert haben, gehen Sie so vor:
```
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

Melden Sie sich in Ihrem Terminal in Firebase an:
```
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.
Geben Sie in Ihrem Terminal je nachdem, ob Firebase Daten erheben soll, Y oder N ein. (Beide Optionen funktionieren für dieses Codelab.)
Wählen Sie in Ihrem Browser Ihr Google-Konto aus und klicken Sie auf Zulassen.

gcloud-CLI von Google Cloud installieren

Installieren Sie das gcloud-CLI.
Melden Sie sich in Ihrem Terminal in Google Cloud an:
```
gcloud auth login
```

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 Dienste, die später in diesem Codelab von der Beispiel-Web-App verwendet werden.

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

Firebase-Projekt erstellen

Melden Sie sich mit demselben Google-Konto in der Firebase Console an, das Sie im vorherigen Schritt verwendet haben.
Klicken Sie auf Projekt erstellen und geben Sie einen Projektnamen ein (z. B. Compass 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 jederzeit in den Projekteinstellungen nachsehen.
Klicken Sie auf Weiter.
Lesen und akzeptieren Sie gegebenenfalls die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Ihrem Firebase-Projekt eine Web-App hinzufügen

Rufen Sie in Ihrem Firebase-Projekt den Bildschirm Projektübersicht auf und klicken Sie dann auf Web.
Geben Sie im Textfeld App-Alias einen einprägsamen Alias für die App ein, z. B. My Compass Codelab App. Sie können das Kästchen für die Einrichtung von Firebase Hosting leer lassen, da Sie im letzten Schritt dieses Codelabs optional einen Hostingdienst einrichten.
Klicken Sie auf App registrieren > Weiter zur Konsole.

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

Firebase-Tarif upgraden

Wenn Sie Firebase Genkit und Vertex AI (und die zugrunde liegenden Cloud-Dienste) verwenden möchten, muss Ihr Firebase-Projekt das Preismodell „Pay-as-you-go“ (Blaze) 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.

Weitere Informationen zu den Preisen für Vertex AI

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

Wählen Sie in der Firebase Console Upgrade aus.
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 Upgrade-Anleitung in der Firebase Console zurückkehren, um das Upgrade abzuschließen.

Cloud Firestore einrichten

Maximieren Sie im linken Bereich der Firebase Console Build und wählen Sie dann Firestore-Datenbank aus.
Klicken Sie auf Datenbank erstellen.
Lassen Sie die Datenbank-ID auf (default).
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.
Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
Veröffentlichen oder verteilen Sie keine App, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
Klicken Sie auf Erstellen.

Vertex AI aktivieren

Richten Sie Vertex AI mit der gcloud-Befehlszeile ein. Ersetzen Sie in allen Befehlen auf dieser Seite YOUR_PROJECT_ID durch die ID Ihres Firebase-Projekts.

Legen Sie in Ihrem Terminal das Standardprojekt für das Google Cloud SDK fest:
```
gcloud config set project YOUR_PROJECT_ID
```
Wenn die Warnung „WARNUNG: Ihr aktives Projekt stimmt nicht mit dem Kontingentprojekt in Ihrer lokalen Datei mit den Standardanmeldedaten der Anwendung überein. Dies kann zu unerwarteten Kontingentproblemen führen.“ Führen Sie dann den folgenden Befehl aus, um das Kontingentprojekt festzulegen:
```
gcloud auth application-default set-quota-project YOUR_PROJECT_ID
```
Aktivieren Sie den Vertex AI-Dienst in Ihrem Projekt:
```
gcloud services enable aiplatform.googleapis.com
```

5. Webanwendung einrichten

Um die Webanwendung auszuführen, müssen Sie Befehle in Ihrem Terminal ausführen und Code in Ihrem Code-Editor hinzufügen. Ersetzen Sie in allen Befehlen auf dieser Seite YOUR_PROJECT_ID durch die ID Ihres Firebase-Projekts.

Firebase CLI für Ihr Projekt konfigurieren

Wechseln Sie in Ihrem Terminal zum Stammverzeichnis Ihres Codelab-Projekts.
Wenn die Firebase CLI alle Befehle für Ihr Firebase-Projekt ausführen soll, führen Sie den folgenden Befehl aus:
```
firebase use YOUR_PROJECT_ID
```

Beispieldaten in Firestore importieren

Damit Sie schnell loslegen können, enthält dieses Codelab vorab generierte Beispieldaten für Firestore.

Wenn Sie in der lokalen Codebasis Code ausführen möchten, für den normalerweise ein Dienstkonto verwendet wird, führen Sie im Terminal den folgenden Befehl aus:
```
gcloud auth application-default login
```
Daraufhin wird ein neuer Tab in Ihrem Browser geöffnet. Melden Sie sich mit demselben Google-Konto an, das Sie in den vorherigen Schritten verwendet haben.
Führen Sie die folgenden Befehle aus, um die Beispiel-Firestore-Daten zu importieren:
```
cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
```
Prüfen Sie, ob die Daten Ihrer Datenbank hinzugefügt wurden. Rufen Sie dazu in der Firebase Console den Bereich Firestore Ihres Firebase-Projekts auf. Das importierte Datenschema und sein Inhalt sollten angezeigt werden.

Web-App mit Firebase-Projekt verbinden

Die Codebasis Ihrer Webanwendung muss mit dem richtigen Firebase-Projekt verknüpft sein, damit Sie die Dienste wie die Datenbank nutzen können. Dazu müssen Sie die Firebase-Konfiguration der Codebasis Ihrer App hinzufügen. Diese Konfiguration umfasst wichtige Werte wie Ihre Projekt-ID, den API-Schlüssel und die App-ID Ihrer App sowie andere Werte, die es Ihrer App ermöglichen, mit Firebase zu interagieren.

Rufen Sie die Firebase-Konfiguration Ihrer App ab:
1. Rufen Sie in der Firebase Console Ihr Firebase-Projekt auf.
2. Klicken Sie im linken Bereich auf das Zahnradsymbol neben Projektübersicht und wählen Sie Projekteinstellungen aus.
3. Wählen Sie auf der Karte „Meine Apps“ Ihre Web-App aus.
4. Wählen Sie im Abschnitt „SDK-Einrichtung und -Konfiguration“ die Option Config aus.
5. Kopieren Sie das Snippet. Er beginnt mit const firebaseConfig ....
Fügen Sie die Firebase-Konfiguration der Codebasis Ihrer Webanwendung hinzu:
1. Öffnen Sie die Datei src/lib/genkit/genkit.config.ts in Ihrem Code-Editor.
2. Ersetzen Sie den entsprechenden Abschnitt durch den kopierten Code.
3. Speichern Sie die Datei.

Web-App in einem Browser in der Vorschau ansehen

Installieren Sie im Terminal die Abhängigkeiten und führen Sie dann die Webanwendung aus:
```
npm install
npm run dev:next
```
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/.

Startbildschirm der Kompass App

Compass ist eine Next.js-Anwendung, die React-Serverkomponenten verwendet. Dies ist die Startseite.

Klicken Sie auf Meine Traumreise finden. Derzeit werden einige hartcodierte Daten für einige feste Ziele angezeigt:

Bildschirm „Find my dream trip“

Probieren Sie es einfach aus. Wenn Sie fortfahren möchten, klicken Sie rechts oben auf die Schaltfläche „Startseite“ .

6. Generative KI mit Genkit kennenlernen

Jetzt können Sie die Vorteile generativer KI in Ihrer Anwendung nutzen. In diesem Abschnitt des Codelabs erfahren Sie, wie Sie eine Funktion implementieren, die Ziele anhand von von Nutzern bereitgestellten Inspirationen vorschlägt. Sie verwenden Firebase Genkit und Vertex AI von Google Cloud als Anbieter für das generative Modell (Sie verwenden Gemini).

Genkit kann den Trace- und Ablaufstatus speichern, sodass Sie das Ergebnis der Ausführung von Genkit-Abläufen prüfen können. In diesem Codelab verwenden Sie Firestore zum Speichern dieser Traces.

Als letzten Schritt in diesem Codelab stellen Sie Ihre Genkit-App in Firebase App Hosting bereit.

Genkit-App mit Firebase-Projekt verknüpfen

Wir haben Genkit bereits mit Ihrem Projekt verbunden, indem wir src/lib/genkit/genkit.config.ts im vorherigen Schritt bearbeitet haben.

Genkit-Benutzeroberfläche für Entwickler starten

Genkit bietet eine webbasierte Benutzeroberfläche, mit der Sie mit LLMs, Genkit-Abläufen, Retrievern und anderen KI-Komponenten interagieren können.

Führen Sie im Terminal folgenden Befehl aus:

npm run dev:genkit

Rufen Sie in Ihrem Browser die lokal gehostete Genkit-URL auf. In den meisten Fällen ist dies http://localhost:4000/.

Mit Gemini interagieren

Sie können jetzt über die Entwickler-UI von Genkit mit allen unterstützten Modellen oder anderen KI-Komponenten wie Prompts, Retrievern und Genkit-Workflows interagieren.

Sie können Gemini beispielsweise bitten, Ihnen einen Urlaubsort vorzuschlagen. Beachten Sie, wie Sie mit Systemanweisungen das Verhalten des Modells an Ihre spezifischen Anforderungen anpassen können. Das funktioniert auch für Modelle, die Systemanweisungen nicht nativ unterstützen.

Mit dem Gemini-Modell in der Genkit-Benutzeroberfläche für Entwickler interagieren

Prompts verwalten

Firebase Genkit führt Dotprompt ein, ein Plug-in und Textformat, mit dem das Erstellen und Verwalten von Prompts für die generative KI optimiert wird. Die Grundidee hinter Dotprompt besteht darin, Prompts als Code zu behandeln, sodass Sie sie zusammen mit Ihrem Anwendungscode schreiben, verwalten und versionieren können.

Wenn Sie Dotprompt verwenden möchten, beginnen Sie mit einem Hello-World-Programm:

Öffnen Sie die Datei prompts/1-hello-world.prompt in Ihrem Code-Editor.
Öffnen Sie in der Genkit-Benutzeroberfläche für Entwickler prompts/1-hello-world.
Verwenden Sie einen beliebigen Namen oder Code für die Sprache, mit der Sie vertraut sind, oder lassen Sie das Feld leer.
Klicken Sie auf Ausführen.
Probieren Sie verschiedene Werte aus. Large Language Models sind gut darin, abgekürzte, falsch geschriebene oder unvollständige Prompts in einfachen Suchanfragen wie dieser zu verstehen.

Ausgabe mit strukturierten Daten anreichern

Mit Genkit können Sie nicht nur einfachen Text generieren, sondern auch Ihre Ausgabe für eine bessere Präsentation und Integration in die Benutzeroberfläche Ihrer App strukturieren. Wenn Sie ein Schema definieren, können Sie den LLM anweisen, strukturierte Daten zu generieren, die dem gewünschten Format entsprechen.

Ausgabeschemata ansehen

Sie können auch das Ausgabeschema eines LLM-Aufrufs angeben.

Sehen Sie sich die Promptdatei in Ihrem Code-Editor an:
1. Öffnen Sie die Datei prompts/2-simple-itinerary.prompt.
2. Prüfen Sie die definierten Eingabe- und Ausgabeschemata.
Mit der Benutzeroberfläche interagieren:
1. Gehen Sie in der Genkit-Benutzeroberfläche für Entwickler zum Bereich prompts/2-simple-itinerary.
2. Geben Sie Eingaben ein, indem Sie die Felder place und interests mit Beispieldaten füllen:
```
{
    "interests": [
        "Museums"
    ],
    "place": "Paris"
}
```
3. Klicken Sie auf Ausführen.

Ausgabeschema mit Dotprompt angeben

Schemabasierte Ausgabe

Beachten Sie, dass die generierte Ausgabe dem definierten Schema entspricht. Durch die Angabe der gewünschten Struktur haben Sie den LLM angewiesen, Daten zu generieren, die sich leicht analysieren und in Ihre Anwendung einbinden lassen. Genkit prüft die Ausgabe automatisch anhand des Schemas und sorgt so für Datenintegrität.

Außerdem können Sie Genkit so konfigurieren, dass es den Vorgang noch einmal versucht oder versucht, die Ausgabe zu reparieren, wenn sie nicht mit dem Schema übereinstimmt.

Die wichtigsten Vorteile von Ausgabeschemata

Einfachere Integration: Sie können strukturierte Daten ganz einfach in die UI-Elemente Ihrer App einbinden.
Datenvalidierung: Sorgt für die Richtigkeit und Konsistenz der generierten Ausgabe.
Fehlerbehandlung: Implementieren Sie Mechanismen, um Schemadiskrepanzen zu beheben.

Mithilfe von Ausgabeschemata können Sie Genkit noch besser nutzen und maßgeschneiderte, strukturierte Daten für eine umfassendere und dynamischere Nutzererfahrung erstellen.

Multimodale Eingaben nutzen

Stellen Sie sich vor, Ihre App schlägt personalisierte Reiseziele vor, die auf Bildern basieren, die Nutzer inspirierend finden. Mit Genkit und einem multimodalen generativen Modell können Sie diese Vision verwirklichen.

Sehen Sie sich die Promptdatei in Ihrem Code-Editor an:
1. Öffnen Sie die Datei prompts/imgDescription.prompt.
2. Beachten Sie die Einbeziehung von {{media url=this}}. Dies ist ein Handlebars-Syntaxelement, mit dem sich Bilder in den Prompt einfügen lassen.
Mit der Benutzeroberfläche interagieren:
1. Öffnen Sie in der Genkit-Benutzeroberfläche für Entwickler den Prompt prompts/imgDescription.
2. Fügen Sie im Feld imageUrls eine Bild-URL ein. Sie können beispielsweise ein Thumbnail-Bild aus Wikipedia verwenden, auf dem der Eiffelturm zu sehen ist:
```
{
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}
```
3. Klicken Sie auf Ausführen.

7. Abruf mit der Vektorähnlichkeitssuche implementieren

Das Erstellen kreativer Inhalte mit KI-Modellen ist zwar beeindruckend, aber für praktische Anwendungen muss die Ausgabe oft in einem bestimmten Kontext verankert werden.

In diesem Codelab haben Sie eine Datenbank mit Zielen (Orten und Aktivitäten) und möchten dafür sorgen, dass die vom Gemini-Modell generierten Vorschläge ausschließlich auf Einträge in dieser Datenbank verweisen.

Um die Lücke zwischen unstrukturierten Suchanfragen und relevanten Inhalten zu schließen, nutzen Sie die Vorteile der Vektorähnlichkeitssuche auf generierten Einbettungen.

Einbettungen und Vektorähnlichkeit

Vektoren: Vektoren sind numerische Darstellungen von Datenpunkten, die häufig zum Modellieren komplexer Informationen wie Text oder Bildern verwendet werden. Jede Dimension in einem Vektor entspricht einem bestimmten Merkmal der Daten.
Embedding-Modelle: Diese speziellen KI-Modelle wandeln Eingabedaten wie Text in hochdimensionale Vektoren um. Das Faszinierende daran ist, dass ähnliche Eingaben Vektoren zugeordnet werden, die in diesem hochdimensionalen Raum nahe beieinander liegen.
Vektorähnlichkeitssuche: Bei dieser Methode wird die Nähe von Einbettungsvektoren genutzt, um relevante Datenpunkte zu ermitteln. Anhand einer Eingabeabfrage werden Einträge in der Datenbank mit ähnlichen Einbettungsvektoren gefunden, die auf semantische Ähnlichkeit hinweisen.

So funktioniert der Abruf

Einbetten der Suchanfrage: Die Eingabe des Nutzers (z. B. „romantisches Abendessen in Paris“) wird an ein Einbettungsmodell übergeben, wodurch ein Suchvektor generiert wird.
Datenbank-Embeddings: Idealerweise haben Sie Ihre Datenbank mit Zielen vorab verarbeitet und für jeden Eintrag Einbettungsvektoren erstellt.
Ähnlichkeitsberechnung: Der Abfragevektor wird mit jedem Einbettungsvektor in der Datenbank anhand eines Ähnlichkeitsmaßes (z. B. Kosinusähnlichkeit) verglichen.
Abruf: Die ähnlichsten Einträge aus der Datenbank werden anhand ihrer Nähe zum Abfragevektor als relevante Vorschläge abgerufen.

Wenn Sie diesen Abrufmechanismus in Ihre Anwendung einbinden, können Sie mit dem Gemini-Modell Vorschläge generieren, die nicht nur kreativ, sondern auch auf Ihrem spezifischen Datenpool basieren. So bleibt die generierte Ausgabe kontextbezogen relevant und stimmt mit den in Ihrer Datenbank verfügbaren Informationen überein.

Suche nach Vektorähnlichkeiten in Firestore aktivieren

In einem vorherigen Schritt dieses Codelabs haben Sie Ihre Firestore-Datenbank mit Beispielorten und ‑aktivitäten gefüllt. Jeder Ortseintrag enthält ein knownFor-Textfeld, in dem seine bemerkenswerten Attribute beschrieben werden, sowie ein entsprechendes embedding-Feld mit der Vektordarstellung dieser Beschreibung.

Wenn Sie die Vorteile der Vektorähnlichkeitssuche für diese Einbettungen nutzen möchten, müssen Sie einen Firestore-Index erstellen. Mit diesem Index können Orte basierend auf der Ähnlichkeit ihrer Einbettungsvektoren mit einer bestimmten Suchanfrage effizient abgerufen werden.

Führen Sie im Terminal den folgenden Befehl aus, um die neueste Alpha-Komponente zu installieren. Sie benötigen Version 2024.05.03 oder höher:
```
gcloud components install alpha
```

Erstellen Sie den Index und ersetzen Sie dabei YOUR_PROJECT_ID durch die ID Ihres Projekts.

gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'

Öffnen Sie in der Genkit-Benutzeroberfläche für Entwickler das retrievers/placesRetriever.
Klicken Sie auf Ausführen. Sehen Sie sich das Objekt mit dem Platzhaltertext an, der angibt, wo Sie die Abruflogik implementieren.
Öffnen Sie die Datei src/lib/genkit/placesRetriever.ts in Ihrem Code-Editor.

Scrollen Sie ganz nach unten und ersetzen Sie den Platzhalter placesRetriever durch Folgendes:

export const placesRetriever = defineFirestoreRetriever({
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: textEmbeddingGecko,
  distanceMeasure: 'COSINE',
});

Abrufprogramm testen

Öffnen Sie in der Genkit-Benutzeroberfläche für Entwickler den retrievers/placesRetriever-Abruf.

Geben Sie die folgende Abfrage an:

{
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}

Sie können auch Optionen angeben. So legen Sie beispielsweise fest, wie viele Dokumente der Abrufdienst zurückgeben soll:
```
{
    "limit": 4
}
```
Klicken Sie auf Ausführen.

Sie können die Daten zusätzlich nach Ähnlichkeit filtern, indem Sie den Optionen where-Klauseln hinzufügen.

8. Retrieval Augmented Generation (RAG) mit Genkit

In den vorherigen Abschnitten haben Sie einzelne Prompts erstellt, die Text, JSON und Bilder verarbeiten und Urlaubsziele und andere ansprechende Inhalte für Ihre Nutzer generieren können. Außerdem haben Sie einen Prompt implementiert, der relevante Ziele aus Ihrer Firestore-Datenbank abruft. Jetzt ist es an der Zeit, diese Komponenten in einen zusammenhängenden Retrieval Augmented Generation (RAG)-Flow zu orchestrieren.

In diesem Abschnitt wird ein wichtiges Genkit-Konzept namens Abläufe vorgestellt. Abläufe sind stark typisierte, streambare Funktionen, die sowohl lokal als auch remote aufgerufen werden können und vollständig überwacht werden können. Sie können Abläufe sowohl über die Befehlszeile von Genkit als auch über die Genkit-Entwickler-UI verwalten und aufrufen.

Sehen Sie sich den Prompt für den Reiseplan in Ihrem Code-Editor an:
1. Öffnen Sie die Datei prompts/itineraryGen.prompt.
2. Der Prompt wurde erweitert, um zusätzliche Eingaben zuzulassen, insbesondere die Aktivitätsdaten aus dem Retriever.
Rufen Sie in der Genkit-Benutzeroberfläche für Entwickler einen Genkit-Flow in der Datei src/lib/genkit/itineraryFlow.ts auf.
Tipp: Um das Debugging zu optimieren, sollten Sie lange Abläufe in kleinere, überschaubare Schritte unterteilen.
Sie können den Ablauf verbessern, indem Sie einen Schritt „Bildbeschreibung“ einfügen:
1. Suchen Sie den Kommentar TODO: 2 (etwa Zeile 81). Dies ist der Punkt, an dem du deinen Fluss verbessern wirst.
2. Ersetzen Sie den leeren Platzhalter imgDescription durch die Ausgabe, die durch den Promptaufruf imgDescription generiert wurde.

Testen Sie den Ablauf:

Rufen Sie flows/itineraryFlow auf.

Verwenden Sie die folgende Eingabe, um die erfolgreiche Ausführung von itineraryFlow mit dem neu hinzugefügten Schritt zu testen:

{
    "request": "Sightseeing in Paris",
    "imageUrls": [
        "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
    ]
}

Klicken Sie auf Ausführen.
Sehen Sie sich die generierte Ausgabe an. Die Bildbeschreibung sollte in den Reiseplanvorschlag eingefügt werden.

Wenn Fehler oder unerwartetes Verhalten auftreten, finden Sie auf dem Tab Prüfen weitere Informationen. Auf diesem Tab können Sie auch den Ausführungsverlauf aus dem Trace Store aufrufen.

RAG für Ihre Webanwendung

Prüfen Sie, ob die Webanwendung noch ausgeführt wird, indem Sie in Ihrem Browser http://localhost:3000/ aufrufen.
Wenn die Webanwendung nicht mehr ausgeführt wird, führen Sie die folgenden Befehle in Ihrem Terminal aus:
```
npm install
npm run dev
```
Rufen Sie die Seite der Dream Your Vacation-Web-App (http://localhost:3000/gemini) auf.
Im Quellcode (src/app/gemini/page.tsx) finden Sie ein Beispiel für die Next.js-Integration.

9. Anwendung mit Firebase App Hosting bereitstellen

Der letzte Schritt besteht darin, Ihre Webanwendung bereitzustellen. Dazu verwenden Sie Firebase App Hosting, eine framework-kompatible Hostinglösung, die die Bereitstellung von Next.js- und Angular-Anwendungen in einem serverlosen Backend vereinfacht.

Führen Sie ein Commit Ihrer Änderungen in Ihrem lokalen Git-Repository aus und übertragen Sie sie dann auf GitHub.
Rufen Sie in der Firebase Console in Ihrem Firebase-Projekt App-Hosting auf.
Klicken Sie auf Jetzt starten > Verbindung zu GitHub herstellen.
Wählen Sie Ihr GitHub-Konto und Ihr Repository aus. Klicken Sie auf Weiter.
Behalten Sie unter Bereitstellungseinstellung > Stammverzeichnis den Standardwert bei.
Wählen Sie für den Live-Branch den Branch main Ihres GitHub-Repositories aus. Klicken Sie auf Weiter.
Geben Sie eine ID für Ihr Backend ein, z. B. compass.
Wenn Sie gefragt werden, ob Sie eine Firebase-Web-App erstellen oder verknüpfen möchten, wählen Sie Vorhandene Firebase-Web-App auswählen aus und wählen Sie die App aus, die Sie in einem früheren Schritt in diesem Codelab erstellt haben.
Klicken Sie auf Fertigstellen und bereitstellen.

Bereitstellungsstatus überwachen

Die Bereitstellung dauert einige Minuten. Sie können den Fortschritt in der Firebase Console im Abschnitt „App-Hosting“ verfolgen.

Berechtigungen für Ihr Dienstkonto gewähren

Damit Ihr Node.js-Backend auf Vertex AI-Ressourcen zugreifen kann, müssen Sie dem Dienstkonto Ihrer App die Rolle aiplatform.user zuweisen:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

Sobald der Vorgang abgeschlossen ist, ist Ihre Webanwendung für Nutzer zugänglich.

Automatische Neubereitstellung

Mit Firebase App Hosting lassen sich zukünftige Updates optimieren. Wenn Sie Änderungen an den Hauptzweig Ihres GitHub-Repositories pushen, wird Ihre App von Firebase App Hosting automatisch neu erstellt und neu bereitgestellt. So können Ihre Nutzer immer die neueste Version verwenden.

10. Fazit

Herzlichen Glückwunsch zum Abschluss dieses umfassenden Codelabs!

Sie haben Firebase Genkit, Firestore und Vertex AI erfolgreich genutzt, um einen ausgefeilten „Flow“ zu erstellen, der personalisierte Reiseempfehlungen auf der Grundlage der Nutzerpräferenzen und -inspirationen generiert. Dabei basieren die Vorschläge auf den Daten Ihrer Anwendung.

Sie haben praktische Erfahrung mit wichtigen Softwareentwicklungsmustern gesammelt, die für die Entwicklung robuster generativer KI-Anwendungen unerlässlich sind. Zu diesen Mustern gehören:

Prompt-Verwaltung: Prompts als Code organisieren und verwalten, um die Zusammenarbeit und Versionskontrolle zu verbessern.
Multimodale Inhalte: Verschiedene Datentypen wie Bilder und Text werden integriert, um KI-Interaktionen zu verbessern.
Eingabe-/Ausgabeschemata: Datenstrukturierung für die nahtlose Integration und Validierung in Ihrer Anwendung.
Vektorspeicher: Vektoreinbettungen für eine effiziente Ähnlichkeitssuche und das Abrufen relevanter Informationen nutzen.
Datenabruf: Implementierung von Mechanismen zum Abrufen und Einbinden von Daten aus Datenbanken in KI-generierte Inhalte.
Retrieval Augmented Generation (RAG): Kombination von Abruftechniken mit generativer KI für kontextbezogene und präzise Ergebnisse.
Flow Instrumentation: Erstellen und Orchestration komplexer KI-Workflows für eine nahtlose und beobachtbare Ausführung.

Wenn Sie diese Konzepte beherrschen und im Firebase-Ökosystem anwenden, sind Sie bestens gerüstet, um sich an Ihre eigenen genAI-Abenteuer zu wagen. Entdecken Sie die vielfältigen Möglichkeiten, entwickeln Sie innovative Anwendungen und erweitern Sie die Grenzen des Machbaren mit generativer KI.

Alternative Bereitstellungsoptionen

Genkit bietet eine Vielzahl von Bereitstellungsoptionen, die Ihren spezifischen Anforderungen entsprechen, darunter:

Cloud Functions for Firebase
Cloud Run
Next.js
Beliebige Node.js-Umgebung
Genkit unterstützt auch Go

Wählen Sie einfach die für Sie am besten geeignete Option aus, indem Sie im Knotenordner (package.json) den folgenden Befehl ausführen:

npx genkit init

Nächste Schritte

Experimentieren Sie mit Prompts und nutzen Sie die großen Kontextfenster in Google AI Studio oder Vertex AI Studio.
Weitere Informationen zur Suche mit Retrieval Augmented Generation (RAG)
Weitere Informationen finden Sie in der offiziellen Firebase Genkit-Dokumentation.
Weitere Informationen zu den Funktionen der Ähnlichkeitssuche in Firestore und Cloud SQL for PostgreSQL
Weitere Informationen zu genAI-Abläufen mit Funktionsaufrufen