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 mit Firebase Genkit Generative AI in Ihre App einbinden. 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

Hier erfahren Sie, wie Sie mit den erweiterten Suchfunktionen von Firestore nach Vektorähnlichkeit intelligentere Anwendungen erstellen.
Hier erfahren Sie, wie Sie Generative AI mit Firebase Genkit in Ihren Apps implementieren.
Bereiten Sie Ihre Lösung auf die Bereitstellung und Integration vor.

Voraussetzungen

Einen Browser Ihrer Wahl, z. B. Google Chrome
Eine Entwicklungsumgebung mit einem Codeeditor 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 an der Codebasis einer App namens Compass – einer App zur Urlaubsplanung. Nutzer können ein Ziel auswählen, sich die Aktivitäten am Reiseziel ansehen und einen Reiseplan für ihre Reise erstellen.

In diesem Codelab implementieren Sie zwei neue Funktionen, mit denen die Nutzerinteraktion mit der Startseite der App verbessert werden soll. 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. Die folgende Tabelle enthält die Dienste, die Sie verwenden werden, sowie die Gründe dafür.

Dienst	Verwendungsgrund
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 Suche nach Vektorähnlichkeiten 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 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
`genkit-functions`	Genkit-Code des Backends
`load-firestore-data`	Hilfs-Befehlszeilentool zum schnellen Vorabfüllen Ihrer Firestore-Sammlung
* Sonstiges	Next.js-Web-App-Code

Der Stammordner enthält eine README.md-Datei, die einen Schnellstart zum Ausführen der Web-App mit optimierten Anweisungen bietet. Wenn Sie jedoch zum ersten Mal etwas lernen, sollten Sie dieses Codelab (anstelle der Kurzanleitung) durcharbeiten, da es die umfassendsten Anleitungen 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 die Firebase CLI installiert ist, aber nicht Version 13.6 oder höher ist, aktualisieren Sie sie:
```
npm update -g firebase-tools
```
Wenn die Firebase CLI nicht installiert ist, installieren Sie sie:
```
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 auf dem Terminal angezeigt wird, dass Sie bereits in Firebase angemeldet sind, können Sie mit dem Abschnitt Firebase-Projekt einrichten in diesem Codelab fortfahren.
Geben Sie in Ihrem Terminal Y oder N ein, je nachdem, ob Firebase Daten erheben soll. (bei diesem Codelab beide Optionen funktionieren)
Wählen Sie im 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 eine Firebase-Web-App darin. 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 in der Firebase Console mit demselben Google-Konto 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 später in den Projekteinstellungen nachsehen.
Klicken Sie auf Weiter.
Lesen und akzeptieren Sie die Firebase-Nutzungsbedingungen, wenn Sie dazu aufgefordert werden, 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 das Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Web-App zum Firebase-Projekt 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 App-Alias 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-Preismodell upgraden

Damit Sie Firebase Genkit und Vertex AI sowie die zugehörigen Cloud-Dienste verwenden können, muss für Ihr Firebase-Projekt das „Pay as you go“-Preismodell (Blaze) verwendet werden. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft ist.

Für ein Cloud-Rechnungskonto ist eine Zahlungsmethode erforderlich, z. B. eine Kreditkarte.
Wenn Sie Firebase und Google Cloud zum ersten Mal verwenden, prüfen Sie, ob Sie Anspruch auf ein Guthaben von 300$und ein kostenloses Cloud-Rechnungskonto für die Testversion 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 Ihres Projekts auf den Tarif „Blaze“ aus:

Wählen Sie in der Firebase Console ein Upgrade Ihres Tarifs 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.
Bei einer echten App sollten Sie einen Standort 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

Verwenden Sie die gcloud-Befehlszeile, um Vertex AI einzurichten. 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. Web-App 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 das Projekt-Targeting konfigurieren

Rufen Sie im Terminal das Stammverzeichnis Ihres Codelab-Projekts auf.
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.

Führen Sie den folgenden Befehl in Ihrem Terminal aus, damit die lokale Codebasis Code ausführen kann, der normalerweise ein Dienstkonto verwenden würde:
```
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 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 Bereich „SDK-Einrichtung und -Konfiguration“ die Option Konfiguration 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 in Ihrem Codeeditor die Datei src/lib/genkit/genkit.config.ts.
2. Ersetzen Sie den entsprechenden Abschnitt durch den Code, den Sie kopiert haben.
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
```
Rufen Sie in Ihrem Browser die lokal gehostete Hosting-URL auf, um die Web-App aufzurufen. In den meisten Fällen lautet die URL beispielsweise http://localhost:3000/ oder etwas Ähnliches.

Startbildschirm der Kompass App

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

Klicken Sie auf Meine Traumreise finden. Wie Sie sehen, werden derzeit 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 oben rechts auf die Schaltfläche für die Startseite .

6. Generative KI mit Genkit kennenlernen

Jetzt sind Sie bereit, das Potenzial von generativer KI in Ihrer Anwendung zu 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 (dazu nutzen Sie Gemini).

Genkit kann den Trace- und Flussstatus 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 Ihrem Firebase-Projekt verbinden

Bevor Sie Genkit starten können, muss Ihre Codebasis mit dem richtigen Firebase-Projekt verknüpft werden, um dessen Dienste wie die Datenbank nutzen zu können. Dazu müssen Sie Ihre Firebase-Konfiguration der Codebasis Ihrer Genkit-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. Gehen Sie in der Firebase Console zu Ihrem Firebase-Projekt.
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 Bereich „SDK-Einrichtung und -Konfiguration“ die Option Konfiguration aus.
5. Kopieren Sie das Snippet. Er beginnt mit const firebaseConfig ....
Fügen Sie die Firebase-Konfiguration Ihrer App der Codebasis Ihrer Genkit-App hinzu:
1. Öffnen Sie die Datei genkit-functions/src/lib/genkit.config.ts in Ihrem Code-Editor.
2. Ersetzen Sie den entsprechenden Abschnitt durch den kopierten Code.
3. Speichern Sie die Datei.

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.

Genkit-Benutzeroberfläche für Entwickler starten:
1. Öffnen Sie ein neues Terminalfenster.
2. Wechseln Sie zum Stammverzeichnis Ihres genkit-functions-Verzeichnisses.
3. Führen Sie den folgenden Befehl aus, um die Genkit-Benutzeroberfläche für Entwickler zu starten:
```
cd genkit-functions
npx genkit start
```
Rufen Sie in Ihrem Browser die lokal gehostete Genkit-URL auf. In den meisten Fällen lautet das 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-Abläufen 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. Dies funktioniert auch bei Modellen, die Systemanweisungen nicht nativ unterstützen.

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

Aufforderungen verwalten

Firebase Genkit führt Dotprompt ein, ein Plug-in und ein Textformat, mit dem Sie Generative AI-Prompts einfacher erstellen und verwalten können. Die Kernidee von 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 genkit-functions/prompts/1-hello-world.prompt in Ihrem Code-Editor.
Öffnen Sie in der Genkit-Entwickler-UI dotprompt/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 einige verschiedene Werte aus. Large Language Models sind gut darin, abgekürzte, falsch geschriebene oder unvollständige Prompts in einfachen Abfragen wie dieser zu verstehen.

Ausgabe mit strukturierten Daten anreichern

Mit Genkit können Sie nicht nur reinen Text generieren, sondern auch Ihre Ausgabe strukturieren, um die Präsentation und Integration in die Benutzeroberfläche Ihrer App zu verbessern. Durch die Definition eines Schemas können Sie das LLM anweisen, strukturierte Daten zu erzeugen, die dem gewünschten Format entsprechen.

Ausgabeschemas untersuchen

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 dotprompt/2-simple-itinerary.
2. Prüfen Sie die definierten Eingabe- und Ausgabeschemata.
Mit der Benutzeroberfläche interagieren:
1. Rufen Sie in der Genkit-Benutzeroberfläche für Entwickler den Bereich dotprompt/2-simple-itinerary auf.
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 Punktprompt angeben

Schemabasierte Ausgabe

Beachten Sie, dass die generierte Ausgabe dem definierten Schema entspricht. Durch Angabe der gewünschten Struktur weisen Sie das LLM an, Daten zu erzeugen, die sich leicht analysieren und in Ihre Anwendung integrieren lassen. Genkit validiert die Ausgabe automatisch anhand des Schemas und sorgt so für die Datenintegrität.

Darüber hinaus können Sie Genkit so konfigurieren, dass die Ausgabe wiederholt oder repariert wird, wenn sie nicht mit dem Schema übereinstimmt.

Hauptvorteile von Ausgabeschemas

Vereinfachte Integration: Strukturierte Daten lassen sich ganz einfach in die UI-Elemente Ihrer App einbinden.
Datenvalidierung: Sicherstellen der Genauigkeit und Konsistenz der generierten Ausgabe
Fehlerbehandlung: Implementieren Sie Mechanismen, um Schemakonflikte zu beheben.

Die Verwendung von Ausgabeschemas verbessert Ihre Genkit-Nutzung und ermöglicht es Ihnen, maßgeschneiderte, strukturierte Daten für vielfältigere und dynamischere Nutzererfahrungen zu erstellen.

Multimodale Eingaben nutzen

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

Untersuchen Sie in Ihrem Code-Editor die Prompt-Datei:
1. Öffnen Sie die Datei genkit-functions/prompts/imgDescription.prompt.
2. Sie haben {{media url=this}} eingefügt. Dies ist ein Syntaxelement für den Handlebars, mit dem Sie Bilder in Ihren Prompt einbinden können.
Mit der Benutzeroberfläche interagieren:
1. Öffnen Sie in der Genkit-Entwickler-Benutzeroberfläche die Aufforderung dotprompt/imgDescription.
2. Geben Sie die Bild-URL in das Feld imageUrls ein, indem Sie die URL eines Bildes einfügen. Sie können beispielsweise eine Miniaturansicht von Wikipedia verwenden, die den Eiffelturm zeigt:
```
{
    "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.

Im Fall dieses Codelabs haben Sie eine Datenbank mit Zielen (Orten und Aktivitäten) und möchten sicherstellen, dass die vom Gemini-Modell generierten Vorschläge ausschließlich auf Einträge in dieser Datenbank verweisen.

Um die Lücke zwischen unstrukturierten Abfragen und relevanten Inhalten zu schließen, können Sie die Möglichkeiten der Suche nach Vektorähnlichkeit für generierte Einbettungen nutzen.

Einbettungen und Vektorähnlichkeit verstehen

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.
Einbettungsmodelle: Diese spezialisierten KI-Modelle wandeln Eingabedaten wie Text in hochdimensionale Vektoren um. Das Faszinierende ist, dass ähnliche Eingaben Vektoren zugeordnet werden, die in diesem hochdimensionalen Bereich nah 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

Abfrage einbetten: Die Eingabe des Nutzers, zum Beispiel "romantisches Abendessen in Paris", wird durch ein Einbettungsmodell übergeben, um einen Abfragevektor zu generieren.
Datenbankeinbettungen: Idealerweise haben Sie die Datenbank mit den Zielen vorverarbeitet und Einbettungsvektoren für jeden Eintrag erstellt.
Ähnlichkeitsberechnung: Der Abfragevektor wird mithilfe eines Ähnlichkeitsmesswerts (z. B. Kosinus-Ähnlichkeit) mit jedem Einbettungsvektor in der Datenbank 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 und entspricht den in Ihrer Datenbank verfügbaren Informationen.

Vektorähnlichkeitssuche 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.

Um die Möglichkeiten der Suche nach Vektorähnlichkeiten für diese Einbettungen zu nutzen, müssen Sie einen Firestore-Index erstellen. Dieser Index ermöglicht das effiziente Abrufen von Orten basierend auf der Ähnlichkeit ihrer Einbettungsvektoren mit einer bestimmten Abfrage.

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 alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding

Öffnen Sie in der Genkit Developer-Benutzeroberfläche den 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 genkit-functions/src/lib/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 Developer-Benutzeroberfläche den placesRetriever Retriever.

Geben Sie die folgende Abfrage an:

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

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

Sie können die Daten über die Ähnlichkeit hinaus zusätzlich 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 können, um Urlaubsziele und andere interessante Inhalte für Ihre Nutzer zu generieren. Sie haben außerdem eine Eingabeaufforderung implementiert, die relevante Ziele aus Ihrer Firestore-Datenbank abruft. Jetzt ist es an der Zeit, diese Komponenten in einem kohärenten Retrieval Augmented Generation (RAG)-Ablauf 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 eine vollständige Beobachtbarkeit bieten. Sie können Abläufe sowohl über die Genkit-Befehlszeile 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 genkit-functions/prompts/itineraryGen.prompt.
2. Beachten Sie, dass die Aufforderung erweitert wurde, sodass zusätzliche Eingaben möglich sind, insbesondere die vom Retriever bereitgestellten Datenquellen Aktivitäten.
Rufen Sie in der Genkit-Benutzeroberfläche für Entwickler einen Genkit-Flow in der Datei genkit-functions/src/lib/itineraryFlow.ts auf.
Tipp: Um das Debuggen 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 (um Zeile 70). Dies ist die Stelle, an der du deinen Flow verbessern kannst.
2. Ersetzen Sie den leeren Platzhalter imgDescription durch die Ausgabe, die durch den Promptaufruf imgDescription generiert wurde.

Testen Sie den Ablauf:

Rufen Sie 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 sich auch den Ausführungsverlauf aus dem Trace Store ansehen.

RAG für Ihre Webanwendung

Vergewissern Sie sich, dass die Webanwendung noch ausgeführt wird, indem Sie im 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.

Übernehmen Sie die Änderungen in Ihr lokales Git-Repository und übertragen Sie sie dann per Push an 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 als 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 beobachten

Die Bereitstellung dauert einige Minuten. Sie können den Fortschritt im Bereich „App Hosting“ der Firebase Console 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. Jedes Mal, wenn Sie Änderungen per Push-Befehl in den Hauptzweig Ihres GitHub-Repositorys übertragen, erstellt Firebase App Hosting Ihre App automatisch neu und stellt sie bereit, sodass Ihre Nutzer immer die aktuelle Version verwenden.

10. Fazit

Herzlichen Glückwunsch zum Abschluss dieses umfassenden Codelabs!

Sie haben mithilfe der leistungsstarken Funktionen von Firebase Genkit, Firestore und Vertex AI einen ausgefeilten Ablauf erstellt, der personalisierte Urlaubsempfehlungen basierend auf den Präferenzen und Inspirationen der Nutzer generiert und die Vorschläge auf den Daten Ihrer Anwendung basiert.

Sie haben praktische Erfahrung mit wichtigen Softwareentwicklungsmustern gesammelt, die für die Entwicklung robuster Anwendungen mit generativer KI 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 einbinden, um die KI-Interaktionen zu verbessern.
Eingabe-/Ausgabeschemas: Daten strukturieren, um sie nahtlos in Ihre Anwendung einzubinden und zu validieren.
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.
Ablaufinstrumentierung: Erstellen und Orchestrieren komplexer KI-Workflows für eine nahtlose und beobachtbare Ausführung.

Wenn Sie diese Konzepte beherrschen und sie auf das Firebase-Ökosystem anwenden, sind Sie bestens gerüstet, um sich auf Ihre eigenen Abenteuer im Bereich Generative AI zu begeben. Entdecken Sie die ungeheure Möglichkeiten, entwickeln Sie innovative Anwendungen und gehen Sie weiter die Grenzen dessen, was mit generativer KI möglich ist.

Alternative Bereitstellungsoptionen kennenlernen

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

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

Wählen Sie einfach den für Sie am besten geeigneten Befehl aus, indem Sie den folgenden Befehl im Knotenordner (package.json) 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)
Offizielle Dokumentation zu Firebase Genkit
Weitere Informationen zu den Funktionen der Ähnlichkeitssuche in Firestore und Cloud SQL for PostgreSQL
Weitere Informationen zu genAI-Abläufen mit Funktionsaufrufen