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

1. Hinweis

In diesem Codelab erfahren Sie, wie Sie Genkit verwenden, um generative KI in Ihre App zu integrieren. 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 mithilfe vertrauter Muster und Paradigmen ganz einfach in Ihre Apps einbinden können. Es wurde vom Firebase-Team entwickelt und basiert auf unserer Erfahrung bei der Entwicklung von Tools, die von Millionen von Entwicklern weltweit verwendet werden.

Vorbereitung

• Sie sind mit Firestore, Node.js und TypeScript vertraut.

Lerninhalte

• So erstellen Sie intelligentere Apps mit den erweiterten Funktionen zur Vektorähnlichkeitssuche von Firestore.
• Wie Sie generative KI mit Genkit in Ihren Apps implementieren können.
• 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 dem Code einer App namens Compass – einer App zur Urlaubsplanung. Nutzer können ein Reiseziel auswählen, sich Aktivitäten am Reiseziel ansehen und eine Reiseroute 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:

• In der App wird derzeit eine statische Liste von Zielen angezeigt. Sie werden es in ein dynamisches Element umwandeln.
• Sie implementieren eine automatisch eingefügte Reiseroute, um die Nutzerbindung zu erhöhen.

Verwendete Dienste

In diesem Codelab verwenden Sie viele Firebase- und Cloud-Dienste und ‑Funktionen. Der größte Teil des Startercodes dafür wird Ihnen zur Verfügung gestellt. In der folgenden Tabelle sind die Dienste aufgeführt, die Sie verwenden, und die Gründe für die Verwendung.

3. Entwicklungsumgebung einrichten

Node.js-Version prüfen

1. Prüfen Sie im 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 aktuelle 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 unter github.com/FirebaseExtended/codelab-ai-genkit-rag.
2. Erstellen Sie einen lokalen Klon des GitHub-Repositorys für das Codelab, das Sie gerade erstellt haben:

   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:

GitHub-Repository als ZIP-Datei herunterladen

Ordnerstruktur prüfen

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

Der Stammordner enthält eine README.md-Datei, die eine Kurzanleitung zum Ausführen der Web-App mit optimierten Anweisungen bietet. Wenn Sie jedoch zum ersten Mal lernen, sollten Sie dieses Codelab (anstelle der Kurzanleitung) durcharbeiten, da es die umfassendste Anleitung enthält.

Wenn Sie sich nicht sicher sind, ob Sie den Code wie in diesem Codelab beschrieben richtig angewendet haben, finden Sie den Lösungscode im end-Git-Branch.

Firebase CLI installieren

1. Prüfen Sie, ob die Firebase-CLI installiert ist und ob es sich um Version 13.6 oder höher handelt:

   firebase --version
   

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

   npm update -g firebase-tools
   

3. Wenn Sie die Firebase CLI nicht installiert haben, 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

1. 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.
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.

gcloud CLI von Google Cloud installieren

1. Installieren Sie das gcloud-CLI.
2. 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 Beispielweb-App verwendet werden.

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

Firebase-Projekt erstellen

1. Melden Sie sich in der Firebase-Konsole mit demselben Google-Konto an, das Sie im vorherigen Schritt verwendet haben.
2. Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B. Compass Codelab).
   
3. Klicken Sie auf Weiter.
4. Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
5. (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
6. Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
7. Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.

Web-App zu Ihrem Firebase-Projekt 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-Nickname einen einprägsamen App-Nickname ein, z. B. My Compass Codelab App. Sie können das Kästchen für die Einrichtung von Firebase Hosting deaktiviert lassen, da Sie im letzten Schritt dieses Codelabs optional einen Hostingdienst einrichten.
   
3. 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 Genkit und Vertex AI (und die zugrunde liegenden Cloud-Dienste) verwenden möchten, muss Ihr Firebase-Projekt im Pay-as-you-go-Preismodell (Blaze) sein. Das bedeutet, dass es mit einem Cloud-Rechnungskonto verknüpft ist.

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

Weitere Informationen zu den Preisen für Vertex AI

So führen Sie für Ihr Projekt ein Upgrade auf den Tarif „Blaze“ durch:

1. Wählen Sie in der Firebase Console die Option zum Upgraden Ihres Abos 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-Konsole zurückkehren, um das Upgrade abzuschließen.

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. Belassen Sie die Database ID (Datenbank-ID) auf (default).
4. Wählen Sie einen Speicherort für Ihre Datenbank aus und klicken Sie auf Weiter.
   Für eine echte App sollten Sie einen Speicherort auswählen, der sich in der Nähe Ihrer Nutzer befindet.
5. Klicken Sie auf Im Testmodus starten. Lesen Sie den Haftungsausschluss zu den Sicherheitsregeln.
   VeröffentlichenSie keine App öffentlich, ohne Sicherheitsregeln für Ihre Datenbank hinzuzufügen.
6. Klicken Sie auf Erstellen.

Vertex AI aktivieren

Verwenden Sie die gcloud-CLI, um Vertex AI einzurichten. Ersetzen Sie in allen Befehlen auf dieser Seite YOUR_PROJECT_ID durch die ID Ihres Firebase-Projekts.

1. Legen Sie in Ihrem Terminal das Standardprojekt für das Google Cloud SDK fest:

   gcloud config set project YOUR_PROJECT_ID
   

2. Wenn Sie eine Warnmeldung sehen, die besagt, dass Ihr aktives Projekt nicht mit dem Kontingentprojekt in Ihrer lokalen Datei mit den standardmäßigen Anmeldedaten der Anwendung übereinstimmt, 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
   

3. Aktivieren Sie den Vertex AI-Dienst in Ihrem Projekt:

   gcloud services enable aiplatform.googleapis.com
   

5. Webanwendung einrichten

Um die Web-App 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

1. Wechseln Sie im Terminal zum Stammverzeichnis Ihres Codelab-Projekts.
2. Wenn Sie möchten, dass das Firebase CLI alle Befehle für Ihr Firebase-Projekt ausführt, führen Sie den folgenden Befehl aus:

   firebase use YOUR_PROJECT_ID
   

Beispieldaten in Firestore importieren

Damit Sie schnell loslegen können, werden in diesem Codelab vorab generierte Beispieldaten für Firestore bereitgestellt.

1. Führen Sie den folgenden Befehl in Ihrem Terminal aus, damit die lokale Codebasis Code ausführen kann, für den normalerweise ein Dienstkonto verwendet wird:

   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.
2. Führen Sie die folgenden Befehle aus, um die Firestore-Beispieldaten zu importieren:

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. Prüfen Sie, ob die Daten erfolgreich in Ihre Datenbank eingefügt wurden. Rufen Sie dazu in der Firebase Console den Bereich Firestore Ihres Firebase-Projekts auf. Das importierte Datenschema und dessen Inhalt sollten angezeigt werden.

Web-App mit Ihrem Firebase-Projekt verbinden

Die Codebasis Ihrer Web-App muss dem richtigen Firebase-Projekt zugeordnet sein, damit die Dienste wie die Datenbank genutzt werden können. Dazu müssen Sie die Firebase-Konfiguration der Codebasis Ihrer App hinzufügen. Diese Konfiguration enthält 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.

1. Firebase-Konfiguration Ihrer App abrufen:
   1. Rufen Sie in der Firebase Console Ihr Firebase-Projekt auf.
   2. Klicken Sie im linken Bereich neben Projektübersicht auf das Zahnradsymbol 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 Konfiguration aus.
   5. Kopieren Sie das Snippet. Sie beginnt mit const firebaseConfig ....
2. Fügen Sie die Firebase-Konfiguration der Codebasis Ihrer Web-App hinzu:
   1. Öffnen Sie die Datei src/lib/genkit/genkit.config.ts in Ihrem Codeeditor.
   2. Ersetzen Sie den entsprechenden Abschnitt durch den kopierten Code.
   3. Speichern Sie die Datei.

Web-App in Ihrem 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:next
   

2. Rufen Sie in Ihrem Browser die lokal gehostete Hosting-URL auf, um die Web-App anzusehen. In den meisten Fällen lautet die URL beispielsweise http://localhost:3000/ oder ähnlich.

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

Klicken Sie auf Find my dream trip (Meine Traumreise finden). Hier sehen Sie, wie einige fest codierte Daten für bestimmte Ziele angezeigt werden:

Probieren Sie es einfach aus. Wenn Sie bereit sind, fortzufahren, klicken Sie rechts oben auf die Schaltfläche .

6. Mit Genkit in generative KI eintauchen

Jetzt können Sie generative KI in Ihrer Anwendung nutzen. In diesem Abschnitt des Codelabs erfahren Sie, wie Sie eine Funktion implementieren, die auf Grundlage der vom Nutzer angegebenen Inspirationen Reiseziele vorschlägt. Sie verwenden Genkit und Vertex AI von Google Cloud als Anbieter für das generative Modell (Sie verwenden Gemini).

Genkit kann den Status von Traces und Flows speichern. So können Sie das Ergebnis der Ausführung von Genkit-Flows prüfen. 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

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

Genkit-Entwickler-UI starten

Genkit enthält eine webbasierte Benutzeroberfläche, über die Sie mit LLMs, Genkit-Flows, Retrievers und anderen KI-Komponenten interagieren können.

Führen Sie im Terminal folgenden Befehl aus:

npm run dev:genkit

Rufen Sie im 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 den unterstützten Modellen oder anderen KI-Komponenten wie Prompts, Retrievers und Genkit-Flows interagieren.

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

Aufforderungen verwalten

Genkit führt Dotprompt ein, ein Plug-in und Textformat, das die Erstellung und Verwaltung Ihrer Prompts für generative KI vereinfacht. Die Grundidee hinter Dotprompt ist, 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 „Hallo Welt“-Beispiel:

1. Öffnen Sie die Datei prompts/1-hello-world.prompt in Ihrem Codeeditor.
2. Öffnen Sie in der Genkit Developer-Benutzeroberfläche prompts/1-hello-world.
3. Verwenden Sie einen beliebigen Sprachnamen oder ‑code, den Sie kennen, oder lassen Sie ihn als leeren String.
4. Klicken Sie auf Ausführen.
5. Probieren Sie verschiedene Werte aus. Large Language Models sind gut darin, abgekürzte, falsch geschriebene oder unvollständige Prompts in einfachen Anfragen wie dieser zu verstehen.

Ausgabe mit strukturierten Daten anreichern

Mit Genkit können Sie nicht nur Nur-Text generieren, sondern auch die Ausgabe strukturieren, um die Darstellung und Integration in der Benutzeroberfläche Ihrer App zu verbessern. Wenn Sie ein Schema definieren, können Sie das LLM anweisen, strukturierte Daten zu erstellen, die Ihrem gewünschten Format entsprechen.

Ausgabeschemas ansehen

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

1. Sehen Sie sich die Prompt-Datei in Ihrem Code-Editor an:
   1. Öffnen Sie die Datei prompts/2-simple-itinerary.prompt.
   2. Sehen Sie sich die definierten Ein- und Ausgabeschemas an.
2. Mit der Benutzeroberfläche interagieren:
   1. Rufen Sie in der Genkit Developer UI den Bereich prompts/2-simple-itinerary auf.
   2. Geben Sie Eingaben an, indem Sie die Felder place und interests mit Beispieldaten füllen:

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. Klicken Sie auf Ausführen.

Schemaorientierte Ausgabe

Beachten Sie, dass die generierte Ausgabe dem definierten Schema entspricht. Durch die Angabe der gewünschten Struktur haben Sie das LLM angewiesen, Daten zu generieren, die sich leicht parsen und in Ihre Anwendung einbinden lassen. Genkit validiert die Ausgabe automatisch anhand des Schemas, um die Datenintegrität zu gewährleisten.

Außerdem können Sie Genkit so konfigurieren, dass die Ausgabe noch einmal versucht oder repariert wird, wenn sie nicht dem Schema entspricht.

Wichtigste Vorteile von Ausgabeschemas

• Einfachere Integration: Strukturierte Daten lassen sich ganz einfach in die UI-Elemente Ihrer App einbinden.
• Datenvalidierung: Die Genauigkeit und Konsistenz der generierten Ausgabe sicherstellen.
• Fehlerbehandlung: Implementieren Sie Mechanismen zur Behebung von Schemaabweichungen.

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

Multimodale Eingabe nutzen

Stellen Sie sich vor, Ihre App schlägt personalisierte Urlaubsziele basierend auf Bildern vor, die Ihre Nutzer inspirierend finden. Mit Genkit in Kombination mit einem multimodalen generativen Modell können Sie diese Vision verwirklichen.

1. Sehen Sie sich die Prompt-Datei in Ihrem Code-Editor an:
   1. Öffnen Sie die Datei prompts/imgDescription.prompt.
   2. Beachten Sie die Einbeziehung von {{media url=this}}. Das ist ein Handlebars-Syntaxelement, mit dem Bilder in Ihren Prompt eingefügt werden können.
2. Mit der Benutzeroberfläche interagieren:
   1. Öffnen Sie in der Genkit Developer-Benutzeroberfläche den prompts/imgDescription-Prompt.
   2. Geben Sie eine Bild-URL in das Feld imageUrls ein, indem Sie die URL eines Bilds einfügen. Sie können beispielsweise ein Thumbnail-Bild aus Wikipedia verwenden, das 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 Vektorähnlichkeitssuche implementieren

Das Generieren kreativer Inhalte mit KI-Modellen ist zwar beeindruckend, für praktische Anwendungen ist es jedoch oft erforderlich, die Ausgabe in einem bestimmten Kontext zu verankern.

In diesem Codelab haben Sie eine Datenbank mit Zielen (Orte 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 Anfragen und relevanten Inhalten zu schließen, nutzen Sie die Vektorähnlichkeitssuche für generierte Einbettungen.

Einbettungen und Vektorähnlichkeit verstehen

• Vektoren: Vektoren sind numerische Darstellungen von Datenpunkten, die häufig verwendet werden, um komplexe Informationen wie Text oder Bilder zu modellieren. Jede Dimension in einem Vektor entspricht einem bestimmten Merkmal der Daten.
• Einbettungsmodelle: Diese speziellen KI-Modelle wandeln Eingabedaten wie Text in hochdimensionale Vektoren um. Das Faszinierende daran ist, dass ähnliche Eingaben auf Vektoren abgebildet werden, die in diesem hochdimensionalen Raum nahe beieinander liegen.
• Vektorsuche nach Ähnlichkeit: Bei dieser Methode wird die Nähe von Einbettungsvektoren genutzt, um relevante Datenpunkte zu identifizieren. Bei einer Eingabeanfrage werden Einträge in der Datenbank mit ähnlichen Einbettungsvektoren gefunden, was auf eine semantische Verwandtschaft hinweist.

Funktionsweise des Abrufvorgangs

1. Einbetten der Anfrage: Die Eingabe des Nutzers (z. B. „romantisches Abendessen in Paris“) wird an ein Einbettungsmodell übergeben, das einen Anfragevektor generiert.
2. Datenbank-Einbettungen: Idealerweise haben Sie Ihre Datenbank mit Zielorten vorab verarbeitet und für jeden Eintrag Einbettungsvektoren erstellt.
3. Ähnlichkeitsberechnung: Der Abfragevektor wird mithilfe eines Ähnlichkeitsmesswerts (z. B. Kosinusähnlichkeit) mit jedem Einbettungsvektor in der Datenbank verglichen.
4. 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 einbauen, nutzen Sie das Gemini-Modell, um Vorschläge zu generieren, die nicht nur kreativ, sondern auch in Ihrem spezifischen Dataset verankert sind. So wird sichergestellt, dass die generierte Ausgabe kontextbezogen und auf die in Ihrer Datenbank verfügbaren Informationen abgestimmt ist.

Vektorsuche nach Ähnlichkeiten in Firestore aktivieren

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

Um die Leistungsfähigkeit der Vektorähnlichkeitssuche 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 Anfrage.

1. 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": "{}"}'
   

2. Öffnen Sie in der Genkit Developer-Benutzeroberfläche das retrievers/placesRetriever.
3. Klicken Sie auf Ausführen. Sehen Sie sich das eingerüstete Objekt mit Platzhaltertext an, der angibt, wo Sie die Retriever-Logik implementieren.
4. Öffnen Sie die Datei src/lib/genkit/placesRetriever.ts in Ihrem Codeeditor.
5. Scrollen Sie ganz nach unten und ersetzen Sie den Platzhalter placesRetriever durch Folgendes:

   export const placesRetriever = defineFirestoreRetriever(ai, {
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
     distanceMeasure: 'COSINE',
   });
   

Retriever testen

1. Öffnen Sie in der Genkit Developer UI den retrievers/placesRetriever-Retriever.
2. Geben Sie die folgende Anfrage ein:

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

3. Sie können auch Optionen angeben. So legen Sie beispielsweise fest, wie viele Dokumente der Retriever zurückgeben soll:

   {
       "limit": 4
   }
   

4. Klicken Sie auf Ausführen.

Sie können die Daten über die Ähnlichkeit hinaus filtern, indem Sie der Option where-Klauseln hinzufügen.

8. Retrieval Augmented Generation (RAG) mit Genkit

In den vorherigen Abschnitten haben Sie einzelne Prompts erstellt, mit denen Text, JSON und Bilder verarbeitet werden können, um Urlaubsorte und andere ansprechende Inhalte für Ihre Nutzer zu generieren. Außerdem haben Sie einen Prompt implementiert, mit dem relevante Ziele aus Ihrer Firestore-Datenbank abgerufen werden. Jetzt ist es an der Zeit, diese Komponenten in einem kohäsiven RAG-Ablauf (Retrieval Augmented Generation) zu orchestrieren.

In diesem Abschnitt wird ein wichtiges Genkit-Konzept namens Flows vorgestellt. Abläufe sind stark typisierte, streamfähige Funktionen, die sowohl lokal als auch remote mit vollständiger Beobachtbarkeit aufgerufen werden können. Sie können Flows sowohl über die Genkit-Befehlszeile als auch über die Genkit Developer UI verwalten und aufrufen.

1. Sehen Sie sich im Code-Editor den Prompt für die Reiseroute an:
   1. Öffnen Sie die Datei prompts/itineraryGen.prompt.
   2. Der Prompt wurde erweitert, um zusätzliche Eingaben zu akzeptieren, insbesondere die activities-Daten, die vom Retriever stammen.
2. Sehen Sie sich in der Genkit-Entwickler-UI einen Genkit-Flow in der Datei src/lib/genkit/itineraryFlow.ts an.
   Tipp: Um das Debugging zu vereinfachen, sollten Sie lange Flows in kleinere, überschaubare Schritte aufteilen.
3. Fügen Sie dem Ablauf einen Schritt zur Bildbeschreibung hinzu, um ihn zu optimieren:
   1. Suchen Sie den Kommentar TODO: 2 (etwa in Zeile 81). Hier können Sie den Ablauf optimieren.
   2. Ersetzen Sie den leeren Platzhalter imgDescription durch die Ausgabe, die durch den Prompt-Aufruf imgDescription generiert wurde.
4. Verarbeitungsablauf testen:
   1. Rufen Sie das flows/itineraryFlow auf.
   2. 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"
          ]
      }
      

   3. Klicken Sie auf Ausführen.
   4. Sehen Sie sich die generierte Ausgabe an. Sie sollte die Bildbeschreibung in den Routenvorschlag einbeziehen.
5. Wenn Fehler oder unerwartetes Verhalten auftreten, sehen Sie auf dem Tab Untersuchen nach. Auf diesem Tab können Sie auch den Ausführungsverlauf aus dem Trace Store ansehen.

RAG für Ihre Webanwendung

1. Prüfen Sie, ob die Web-App noch ausgeführt wird, indem Sie in Ihrem Browser http://localhost:3000/ aufrufen.
2. Wenn die Web-App nicht mehr ausgeführt wird, führen Sie die folgenden Befehle in Ihrem Terminal aus:

   npm install
   npm run dev
   

3. Sehen Sie sich die Seite der Web-App Dream Your Vacation (http://localhost:3000/gemini) an.
4. Ein Beispiel für die Next.js-Integration finden Sie im Quellcode (src/app/gemini/page.tsx).

9. Anwendung mit Firebase App Hosting bereitstellen

Der letzte Schritt ist die Bereitstellung Ihrer Web-App. Dazu verwenden Sie Firebase App Hosting, eine Framework-basierte Hostinglösung, die die Bereitstellung von Next.js- und Angular-Apps in einem serverlosen Backend vereinfacht.

1. Übernehmen Sie die Änderungen in Ihrem lokalen Git-Repository und übertragen Sie sie dann per Push an GitHub.
2. Rufen Sie in der Firebase Console in Ihrem Firebase-Projekt App Hosting auf.
3. Klicken Sie auf Jetzt loslegen > Verbindung zu GitHub herstellen.
4. Wählen Sie Ihr GitHub-Konto und Ihr Repository aus. Klicken Sie auf Weiter.
5. Behalten Sie unter Bereitstellungseinstellung > Stammverzeichnis den Standardwert bei.
6. Wählen Sie für den Live-Branch den main-Branch Ihres GitHub-Repositorys aus. Klicken Sie auf Weiter.
7. Geben Sie eine ID für Ihr Backend ein, z. B. compass.
8. 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 dieses Codelabs erstellt haben.
9. Klicken Sie auf Fertigstellen und bereitstellen.

Bereitstellungsstatus überwachen

Die Bereitstellung dauert einige Minuten. Sie können den Fortschritt im Abschnitt „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"

Danach ist Ihre Web-App für Nutzer zugänglich.

Automatische erneute Bereitstellung

Firebase App Hosting vereinfacht zukünftige Updates. Immer wenn Sie Änderungen an den Hauptzweig Ihres GitHub-Repositorys übertragen, wird Ihre App in Firebase App Hosting automatisch neu erstellt und bereitgestellt. So können Sie sicher sein, dass Ihre Nutzer immer die aktuelle Version verwenden.

10. Fazit

Herzlichen Glückwunsch zum Abschluss dieses umfassenden Codelabs!

Sie haben die Leistungsfähigkeit von Genkit, Firestore und Vertex AI genutzt, um einen ausgefeilten „Flow“ zu erstellen, der personalisierte Urlaubsempfehlungen basierend auf Nutzerpräferenzen und Inspiration generiert und die Vorschläge gleichzeitig auf den Daten Ihrer Anwendung basiert.

Im Laufe dieses Kurses haben Sie praktische Erfahrung mit wichtigen Softwareentwicklungsmustern gesammelt, die für die Entwicklung robuster Anwendungen auf Basis von generativer KI unerlässlich sind. Dazu gehören:

• Prompt-Verwaltung: Prompts als Code organisieren und verwalten, um die Zusammenarbeit und Versionskontrolle zu verbessern.
• Multimodale Inhalte: Integration verschiedener Datentypen wie Bilder und Text zur Verbesserung von KI-Interaktionen.
• Ein-/Ausgabe-Schemas: Daten für die nahtlose Integration und Validierung in Ihrer Anwendung strukturieren.
• Vektorspeicher: Vektoreinbettungen für effiziente Ähnlichkeitssuchen und zum Abrufen relevanter Informationen nutzen.
• Datenabruf: Implementieren von Mechanismen zum Abrufen und Einbinden von Daten aus Datenbanken in KI-generierte Inhalte.
• Retrieval-Augmented Generation (RAG): Hier werden Abruftechniken mit generativer KI kombiniert, um kontextbezogene und genaue Ausgaben zu generieren.
• Flow-Instrumentierung: Erstellen und Orchestrieren komplexer KI-Workflows für eine nahtlose und nachvollziehbare Ausführung.

Wenn Sie diese Konzepte beherrschen und im Firebase-Ökosystem anwenden, sind Sie bestens gerüstet, um Ihre eigenen KI-Abenteuer zu beginnen. Entdecken Sie die vielfältigen Möglichkeiten, entwickeln Sie innovative Anwendungen und verschieben Sie die Grenzen des Möglichen 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 den folgenden Befehl in Ihrem 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 Genkit
• Weitere Informationen zur Ähnlichkeitssuche in Firestore und Cloud SQL for PostgreSQL
• Funktionsaufrufe