Twórz funkcje generatywnej AI opartej na Twoich danych za pomocą Firebase Genkit

1. Zanim zaczniesz

Z tego ćwiczenia w Codelabs dowiesz się, jak za pomocą Firebase Genkit zintegrować generatywną AI z aplikacją. Firebase Genkit to platforma open source, która ułatwia tworzenie, wdrażanie i monitorowanie aplikacji opartych na AI, które są gotowe do wykorzystania w środowisku produkcyjnym.

Usługa Genkit została opracowana z myślą o deweloperach aplikacji. Dzięki niej możesz łatwo zintegrować zaawansowane funkcje AI z aplikacjami na podstawie dobrze znanych wzorców i paradygmatów. Aplikacja została stworzona przez zespół Firebase i wykorzystuje nasze doświadczenie w tworzeniu narzędzi używanych przez miliony deweloperów na całym świecie.

Wymagania wstępne

• Znajomość Firestore, Node.js i TypeScriptu.

Czego się nauczysz

• Jak tworzyć inteligentniejsze aplikacje przy użyciu zaawansowanych funkcji wyszukiwania podobieństw wektorowych dostępnych w Firestore.
• Praktyczne wdrożenie generatywnej AI w aplikacjach za pomocą Firebase Genkit.
• Przygotuj swoje rozwiązanie do wdrożenia i integracji.

Czego potrzebujesz

• wybraną przeglądarkę, na przykład Google Chrome;
• Środowisko programistyczne z edytorem kodu i terminalem
• Konto Google do tworzenia projektu Firebase i zarządzania nim

Uwaga: te ćwiczenia w Codelabs korzystają z usług Firebase i Google, które wymagają konta rozliczeniowego Cloud. Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do otrzymania 300 USD i bezpłatnego konta rozliczeniowego Cloud, aby wypróbować nasze usługi. W przeciwnym razie musisz podać formę płatności (np. kartę kredytową), aby skonfigurować konto rozliczeniowe Cloud (szczegółowe informacje o formach płatności znajdziesz w dokumentacji dotyczącej rozliczeń usługi Google Cloud).

2. Sprawdzanie używanych aplikacji internetowych i usług w chmurze

W tej sekcji zapoznasz się z aplikacją internetową, którą utworzysz w ramach tego ćwiczenia z programowania, oraz poznasz usługi w chmurze, których będziesz używać.

Aplikacja internetowa

W ramach tego ćwiczenia w Codelabs będziesz pracować w bazie kodu aplikacji o nazwie Kompas, która do planowania wakacji. Użytkownicy mogą wybrać miejsce docelowe, przejrzeć atrakcje dostępne w miejscu docelowym i utworzyć plan podróży.

W ramach tego ćwiczenia w Codelabs wdrożysz 2 nowe funkcje, których celem jest zwiększenie zaangażowania użytkowników na stronie głównej aplikacji. Obie funkcje opierają się na generatywnej AI:

• Aplikacja wyświetla obecnie statyczną listę miejsc docelowych. Zmień ją na dynamiczną.
• Wdrożysz automatycznie wypełniany plan podróży, aby zwiększyć zainteresowanie użytkowników.

Uwaga: jest to duże ćwiczenia z programowania, które składa się z wielu kroków. Aby w pełni wykorzystać możliwości tego ćwiczenia z programowania:

• Utrzymaj tempo, robiąc sobie przerwy.
• Podczas pracy z kodem poświęć czas na zrozumienie jego działania i sposobu jego działania, zamiast kopiować i wklejać go bez zastanowienia.
• Jeśli napotkasz problemy, powtórz wszystkie kroki do ostatniego stanu roboczego i upewnij się, że zostały wykonane dokładnie.
• Jeśli znajdziesz błąd w ćwiczeniach z programowania lub w jego kodzie, zgłoś problem na GitHub.

Używane usługi

Dzięki temu ćwiczeniu w Codelabs będziesz używać wielu usług oraz funkcji Firebase i Cloud, a większość kodu startowego do nich otrzymasz na swoim koncie. Poniższa tabela zawiera usługi, z których będziesz korzystać, oraz powody, dla których warto z nich korzystać.

Usługa	Powód użycia
Firebase Genkit.	Genkit służy do wprowadzania generatywnej AI do aplikacji Node.js lub Next.js.
Cloud Firestore	Przechowujesz dane w Cloud Firestore, które są następnie używane do wyszukiwania podobieństw wektorowych.
Vertex AI Google Cloud	Do obsługi funkcji AI używasz modeli podstawowych Vertex AI (takich jak Gemini).
Firebase App Hosting.	Opcjonalnie możesz użyć nowego, ulepszonego Firebase App Hosting, aby udostępniać dynamiczną aplikację internetową Next.js (połączoną z repozytorium GitHub).

3. Konfigurowanie środowiska programistycznego

Sprawdzanie wersji Node.js

1. Sprawdź w terminalu, czy masz zainstalowane środowisko Node.js w wersji 20.0.0 lub nowszej:

   node -v
   

2. Jeśli nie masz środowiska Node.js w wersji 20.0.0 lub nowszej, pobierz najnowszą wersję LTS i zainstaluj ją.

Pobieranie kodu źródłowego do ćwiczenia w Codelabs

Jeśli masz konto GitHub:

1. Utwórz nowe repozytorium przy użyciu naszego szablonu dostępnego na stronie github.com/FirebaseExtended/codelab-ai-genkit-rag
2. Utwórz lokalną kopię utworzonego właśnie repozytorium GitHub z ćwiczeń z programowania:

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

Jeśli nie masz zainstalowanego Gita lub nie chcesz tworzyć nowego repozytorium:

Pobierz repozytorium GitHub jako plik ZIP.

Sprawdzanie struktury folderów

Na komputerze lokalnym znajdź sklonowane repozytorium i sprawdź strukturę folderów:

Folder	Opis
genkit-functions	Kod Genkit backendu
load-firestore-data	Pomocnicze narzędzie wiersza poleceń umożliwiające szybkie wstępne wypełnianie kolekcji Firestore
*Wszystkie pozostałe	Kod aplikacji internetowej Next.js

Folder główny zawiera plik README.md, który umożliwia szybkie uruchomienie aplikacji internetowej w prostych instrukcjach. Jeśli jednak dopiero uczysz się programowania, zalecamy wykonanie tego ćwiczenia (a nie krótkiego wprowadzenia), ponieważ zawiera ono najbardziej kompleksowy zestaw instrukcji.

Jeśli nie masz pewności, czy kod został prawidłowo zastosowany zgodnie z instrukcjami w tym ćwiczeniu, kod rozwiązania znajdziesz w git end.

Instalowanie interfejsu wiersza poleceń Firebase

1. Sprawdź, czy masz zainstalowany interfejs wiersza poleceń Firebase i czy jest to wersja 13.6 lub nowsza:

   firebase --version
   

2. Jeśli masz zainstalowany interfejs wiersza poleceń Firebase w wersji 13.6 lub nowszej, ale nie jest w wersji 13.6 lub nowszej, zaktualizuj ją:

   npm update -g firebase-tools
   

3. Jeśli nie masz zainstalowanego interfejsu wiersza poleceń Firebase, zainstaluj go:

   npm install -g firebase-tools
   

Jeśli nie możesz zaktualizować lub zainstalować interfejsu wiersza poleceń Firebase z powodu błędów uprawnień, zapoznaj się z dokumentacją npm lub użyj innej opcji instalacji.

Zaloguj się do Firebase

1. Zaloguj się w terminalu do Firebase:

   firebase login
   

   Jeśli terminal informuje, że jesteś już zalogowany(-a) w Firebase, możesz przejść do sekcji Konfigurowanie projektu Firebase w tym ćwiczeniu z programowania.
2. W terminalu w zależności od tego, czy Firebase ma zbierać dane, wpisz Y czy N. (W tym ćwiczeniu z programowania sprawdzi się jedna z tych opcji)
3. W przeglądarce wybierz swoje konto Google i kliknij Zezwól.

Instalowanie interfejsu wiersza poleceń gcloud w Google Cloud

1. Zainstaluj interfejs wiersza poleceń gcloud.
2. Zaloguj się w Google Cloud w terminalu:

   gcloud auth login
   

4. Skonfiguruj projekt Firebase

W tej sekcji skonfigurujesz projekt Firebase i zarejestrujesz w nim aplikację internetową Firebase. W dalszej części tego ćwiczenia z programowania wdrożysz również kilka usług używanych przez przykładową aplikację internetową.

Wszystkie kroki opisane w tej sekcji wykonuje się w konsoli Firebase.

Tworzenie projektu Firebase

1. Zaloguj się w konsoli Firebase za pomocą tego samego konta Google co w poprzednim kroku.
2. Kliknij Utwórz projekt, a potem wpisz jego nazwę (np. Compass Codelab).
   Zapamiętaj identyfikator przypisany automatycznie do Twojego projektu Firebase (lub kliknij ikonę Edytuj, aby ustawić preferowany identyfikator projektu). Będzie on później potrzebny do identyfikowania projektu Firebase w interfejsie wiersza poleceń Firebase. Jeśli zapomnisz swój identyfikator, zawsze możesz go znaleźć w ustawieniach projektu.
3. Kliknij Dalej.
4. Jeśli pojawi się taka prośba, przeczytaj i zaakceptuj warunki korzystania z Firebase, a potem kliknij Dalej.
5. W ramach tych ćwiczeń w programie nie potrzebujesz Google Analytics, więc wyłącz tę opcję.
6. Kliknij Utwórz projekt, poczekaj na udostępnienie projektu i kliknij Dalej.

Dodawanie aplikacji internetowej do projektu Firebase

1. W projekcie Firebase otwórz ekran Przegląd projektu i kliknij Sieć.
2. W polu tekstowym Pseudonim aplikacji wpisz zapadający w pamięć pseudonim aplikacji, np. My Compass Codelab App. Możesz nie zaznaczyć pola konfigurowania Hostingu Firebase, ponieważ w ostatnim kroku tego ćwiczenia z programowania będziesz opcjonalnie konfigurować usługę hostingową.
   
3. Kliknij Zarejestruj aplikację > Otwórz konsolę.

Świetnie. Twoja aplikacja internetowa została zarejestrowana w Twoim nowym projekcie Firebase.

Przejdź na wyższy abonament Firebase

Aby korzystać z Firebase Genkit i Vertex AI (i powiązanych z nimi usług w chmurze), musisz uaktualnić projekt Firebase i włączyć płatności.

Aby zmienić abonament projektu na wyższą wersję, wykonaj te czynności:

1. Przejdź do Abonamentów Firebase w swoim projekcie Firebase.
2. W oknie Abonamenty Firebase wybierz abonament Blaze i kup go.

Uwaga: jeśli w projekcie Firebase włączysz płatności, zaczną być naliczane opłaty za wywołania interfejsu Gemini API przez Genkit. Dowiedz się więcej o cenach Vertex AI.

Po ukończeniu tego ćwiczenia w Codelabs możesz przenieść projekt Firebase na bezpłatny abonament Spark.

Włączanie Cloud Firestore

1. Otwórz Kompilacja > Bazę danych Firestore za pomocą panelu nawigacji po lewej stronie.
2. Kliknij Utwórz bazę danych.
3. W polu Identyfikator bazy danych pozostaw wartość (default).
4. Wybierz preferowaną lokalizację w Cloud Firestore (lub pozostaw ją domyślną).
5. Kliknij Dalej.
6. Kliknij Rozpocznij w trybie testowym.
7. Kliknij Utwórz.

Włącz Vertex AI

Aby skonfigurować Vertex AI, użyj interfejsu wiersza poleceń gcloud. We wszystkich poleceniach na tej stronie zastąp YOUR_PROJECT_ID identyfikatorem projektu Firebase.

1. W terminalu ustaw projekt domyślny dla pakietu SDK Google Cloud:

   gcloud config set project YOUR_PROJECT_ID
   

2. Jeśli zobaczysz ostrzeżenie „OSTRZEŻENIE: Twój aktywny projekt nie pasuje do projektu z limitem w lokalnym pliku domyślnego pliku danych logowania aplikacji. Może to spowodować nieoczekiwane problemy z limitami”, a następnie uruchom to polecenie, aby ustawić projekt limitu:

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. Włącz usługę Vertex AI w projekcie:

   gcloud services enable aiplatform.googleapis.com
   

4. Przyznaj uprawnienia kontu usługi:

   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"
   

5. Konfigurowanie aplikacji internetowej

Aby uruchomić aplikację internetową, musisz uruchomić polecenia w terminalu i dodać kod w edytorze kodu. We wszystkich poleceniach na tej stronie zastąp YOUR_PROJECT_ID identyfikatorem projektu Firebase.

Skonfiguruj interfejs wiersza poleceń Firebase, aby ustawić kierowanie na projekt

1. W terminalu przejdź do katalogu głównego projektu ćwiczenia w programowaniu.
2. Aby interfejs wiersza poleceń Firebase wykonywał wszystkie polecenia w projekcie Firebase, uruchom to polecenie:

   firebase use YOUR_PROJECT_ID
   

Importowanie przykładowych danych do Firestore

Aby szybko rozpocząć pracę, to ćwiczenia z programowania udostępniają wstępnie wygenerowane przykładowe dane dla Firestore.

1. Aby umożliwić lokalnej bazie kodu uruchomienie kodu, który normalnie używa konta usługi, uruchom w terminalu to polecenie:

   gcloud auth application-default login
   

   Spowoduje to otwarcie nowej karty w przeglądarce. Zaloguj się na to samo konto Google, którego użyto w poprzednich krokach.
2. Aby zaimportować przykładowe dane Firestore, uruchom te polecenia:

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

3. Sprawdź, czy dane zostały dodane do bazy danych. Aby to zrobić, w konsoli Firebase przejdź do sekcji Firestore (Firestore) projektu Firebase. Zaimportowany schemat danych i jego zawartość powinny być widoczne.

Łączenie aplikacji internetowej z projektem Firebase

Baza kodu aplikacji internetowej musi być powiązana z odpowiednim projektem Firebase, aby można było korzystać z usług, takich jak baza danych. Aby to zrobić, musisz dodać konfigurację Firebase do bazy kodu aplikacji. Ta konfiguracja zawiera podstawowe wartości, takie jak identyfikator projektu, klucz interfejsu API aplikacji i identyfikator aplikacji, a także inne wartości umożliwiające interakcję aplikacji z Firebase.

1. Uzyskaj konfigurację Firebase aplikacji:
   1. W konsoli Firebase otwórz swój projekt Firebase.
   2. W panelu bocznym po lewej stronie kliknij ikonę koła zębatego obok opcji Przegląd projektu i wybierz Ustawienia projektu.
   3. W sekcji „Twoje aplikacje” wybierz aplikację internetową.
   4. W sekcji „Konfiguracja i konfiguracja pakietu SDK” wybierz opcję Konfiguracja.
   5. Skopiuj fragment kodu. Zaczyna się od const firebaseConfig ....
2. Dodaj konfigurację Firebase do bazy kodu aplikacji internetowej:
   1. Otwórz plik src/lib/genkit/genkit.config.ts w edytorze kodu.
   2. Zastąp odpowiednią sekcję skopiowanym kodem.
   3. Zapisz plik.

Wyświetlanie podglądu aplikacji internetowej w przeglądarce

1. W terminalu zainstaluj zależności, a potem uruchom aplikację internetową:

   npm install
   npm run dev
   

2. Aby wyświetlić aplikację internetową, otwórz w przeglądarce adres URL hostowanego lokalnie hostingu. Na przykład w większości przypadków URL to http://localhost:3000/ lub podobny.

Compass to aplikacja Next.js wykorzystująca komponenty serwera React. To jest strona główna.

Kliknij Znajdź moją wymarzoną podróż. W przypadku niektórych stałych miejsc docelowych są w nim wyświetlane dane zakodowane na stałe:

Zachęcamy do ich wypróbowania. Aby kontynuować, kliknij przycisk strony głównej (w prawym górnym rogu).

6. Poznaj generatywną AI dzięki Genkit

Teraz możesz zacząć korzystać z możliwości generatywnej AI w swojej aplikacji. W tej części tego ćwiczenia z programowania dowiesz się, jak wdrożyć funkcję, która sugeruje miejsca docelowe na podstawie inspiracji podanych przez użytkowników. Jako dostawcy modelu generatywnego będziesz korzystać z Firebase Genkit i Vertex AI od Google Cloud (będziesz używać Gemini).

Genkit może przechowywać informacje o stanie śledzenia i stanu przepływu (co umożliwia sprawdzanie wyników wykonywania przepływów Genkit). W ramach tego ćwiczenia w Codelabs będziesz przechowywać te ślady w Firestore.

Ostatnim krokiem tego ćwiczenia z programowania jest wdrożenie aplikacji Genkit w Firebase App Hosting.

Łączenie aplikacji Genkit z projektem Firebase

Aby można było uruchomić Genkit, baza kodu musi być powiązana z odpowiednim projektem Firebase, aby możliwe było korzystanie z usług, na przykład z bazy danych. W tym celu musisz dodać konfigurację Firebase do bazy kodu aplikacji Genkit. Ta konfiguracja zawiera podstawowe wartości, takie jak identyfikator projektu, klucz interfejsu API aplikacji i identyfikator aplikacji, a także inne wartości, które umożliwiają interakcję aplikacji z Firebase.

1. Uzyskaj konfigurację Firebase aplikacji:
   1. W konsoli Firebase otwórz swój projekt Firebase.
   2. W panelu bocznym po lewej stronie kliknij ikonę koła zębatego obok opcji Przegląd projektu i wybierz Ustawienia projektu.
   3. W sekcji „Twoje aplikacje” wybierz aplikację internetową.
   4. W sekcji „Konfiguracja i konfiguracja pakietu SDK” wybierz opcję Konfiguracja.
   5. Skopiuj fragment kodu. Zaczyna się od const firebaseConfig ....
2. Dodaj konfigurację Firebase aplikacji do bazy kodu aplikacji Genkit:
   1. Otwórz plik genkit-functions/src/lib/genkit.config.ts w edytorze kodu.
   2. Zastąp odpowiednią sekcję skopiowanym kodem.
   3. Zapisz plik.

Uruchamianie interfejsu programisty Genkit

Genkit ma interfejs internetowy, który umożliwia interakcję z LLM, przepływami Genkit, retrieverami i innymi komponentami AI.

1. Uruchom interfejs programisty Genkit:
   1. Otwórz nowe okno terminala.
   2. Przejdź do głównego katalogu swojego katalogu genkit-functions.
   3. Uruchom to polecenie, aby uruchomić interfejs programisty Genkit:

      cd genkit-functions
      npx genkit start
      

2. W przeglądarce otwórz adres URL usługi Genkit hostowanej lokalnie. W większości przypadków jest to http://localhost:4000/.

Interakcja z Gemini

W interfejsie programisty aplikacji Genkit możesz teraz korzystać z dowolnego z obsługiwanych modeli i innych komponentów AI, takich jak prompty, programy do odzyskiwania czy przepływy Genkit.

Możesz na przykład poprosić Gemini o zaproponowanie urlopu. Zastanów się, jak możesz korzystać z instrukcji systemowych, aby odpowiednio dostosować działanie modelu do swoich potrzeb. Działa to też w przypadku modeli, które natywnie nie obsługują instrukcji systemowych.

Zarządzanie promptami

Firebase Genkit wprowadza Dotprompt – wtyczkę i format tekstowy zaprojektowane w celu usprawnienia tworzenia promptów dla generatywnej AI oraz zarządzania nimi. Podstawowym założeniem Dotprompt jest traktowanie promptów jako kodu, co umożliwia ich pisanie, obsługę i kontrolowanie wersji wraz z kodem aplikacji.

Aby użyć Dotprompt, zacznij od elementu hello-world:

1. Otwórz plik genkit-functions/prompts/1-hello-world.prompt w edytorze kodu.
2. W interfejsie aplikacji Genkit Developer otwórz dotprompt/1-hello-world.
3. Użyj dowolnej nazwy lub kodu języka, które znasz, albo pozostaw pusty ciąg znaków.
4. Kliknij Wykonaj.
5. Podaj kilka innych wartości. Duże modele językowe dobrze radzą sobie z rozumieniem skróconych, błędnie napisanych lub niepełnych promptów w prostych zapytaniach, takich jak to.

Wzbogacaj dane wyjściowe o uporządkowane dane

Oprócz generowania zwykłego tekstu Genkit pozwala też uporządkować dane wyjściowe w celu ulepszenia prezentacji i integracji z interfejsem aplikacji. Definiując schemat, możesz polecić LLM generowanie uporządkowanych danych zgodnych z pożądanym formatem.

Poznawanie schematów wyjściowych

Możesz też określić schemat wyjściowy wywołania LLM.

1. Przejrzyj plik promptu w edytorze kodu:
   1. Otwórz plik dotprompt/2-simple-itinerary.
   2. Sprawdź zdefiniowane schematy wejściowe i wyjściowe.
2. Wejdź w interakcję z interfejsem:
   1. W interfejsie aplikacji Genkit Developer przejdź do sekcji dotprompt/2-simple-itinerary.
   2. Podaj dane wejściowe, wypełniając pola place i interests przykładowymi danymi:

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

   3. Kliknij Wykonaj.

Informacje wyjściowe oparte na schemacie

Zwróć uwagę, jak wygenerowane dane wyjściowe są zgodne ze zdefiniowanym schematem. Określając oczekiwaną strukturę, zgodnie z Twoimi instrukcjami LLM generuje dane, które można łatwo przeanalizować i zintegrować z Twoją aplikacją. Genkit automatycznie weryfikuje dane wyjściowe pod kątem schematu, zapewniając ich integralność.

Możesz też skonfigurować Genkit ponownie lub spróbować naprawić dane wyjściowe, jeśli nie będą one zgodne ze schematem.

Najważniejsze zalety schematów wyjściowych

• Uproszczona integracja: możesz łatwo uwzględniać uporządkowane dane w elementach interfejsu aplikacji.
• Walidacja danych: umożliwia zapewnienie dokładności i spójności generowanych danych wyjściowych.
• Obsługa błędów: zaimplementuj mechanizmy eliminujące niezgodności schematu.

Korzystanie ze schematów danych wyjściowych zapewnia większą wygodę korzystania z usługi Genkit, umożliwiając tworzenie dopasowanych, uporządkowanych danych zapewniających bogatsze i bardziej dynamiczne wrażenia użytkowników.

Wykorzystaj dane wejściowe multimodalne

Wyobraź sobie, że Twoja aplikacja sugeruje spersonalizowane miejsca wypoczynku na podstawie inspirujących zdjęć Twoich użytkowników. Genkit w połączeniu z multimodalnym modelem generatywnym umożliwia urzeczywistnienie tej wizji.

1. Przejrzyj plik promptu w edytorze kodu:
   1. Otwórz plik genkit-functions/prompts/imgDescription.prompt.
   2. Zwróć uwagę na uwzględnienie {{media url=this}} – elementu składni „Składanki”, który ułatwia umieszczanie obrazów w prompcie.
2. Wejdź w interakcję z interfejsem:
   1. W interfejsie aplikacji Genkit Developer otwórz prompt dotprompt/imgDescription.
   2. W polu imageUrls wpisz URL obrazu, wklejając go. Możesz na przykład użyć miniatury z Wikipedii przedstawiającej wieżę Eiffla:

      {
          "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. Kliknij Wykonaj.

7. Wdrażanie pobierania za pomocą wyszukiwania podobieństwa wektorów

Chociaż tworzenie treści kreatywnych za pomocą modeli AI robi wrażenie, praktyczne zastosowania często wymagają uziemiania danych wyjściowych w konkretnym kontekście.

W przypadku tego ćwiczenia w Codelabs masz bazę danych miejsc docelowych (miejsc i aktywności), więc chcesz mieć pewność, że sugestie wygenerowane przez model Gemini odwołują się wyłącznie do wpisów w tej bazie danych.

Aby wypełnić lukę między zapytaniami nieuporządkowanymi a odpowiednimi treściami, w wygenerowanych wektorach dystrybucyjnych wykorzystasz wyszukiwanie podobieństw wektorowych.

Wektory dystrybucyjne i podobieństwo wektorów

• Wektory: wektory to liczbowe reprezentacje punktów danych, często używane do modelowania złożonych informacji, takich jak tekst lub obrazy. Każdy wymiar w wektorze odpowiada konkretnej właściwości danych.
• Modele osadzone: te specjalistyczne modele AI przekształcają dane wejściowe, takie jak tekst, w duże wektory. Fascynujące jest to, że podobne dane wejściowe są mapowane na wektory znajdujące się blisko siebie w tej wysokowymiarowej przestrzeni.
• Wyszukiwanie podobieństw wektorowych: ta metoda wykorzystuje bliskość wektorów dystrybucyjnych do identyfikacji odpowiednich punktów danych. Po otrzymaniu zapytania wejściowego wyszukuje w bazie danych wpisy z podobnymi wektorami dystrybucyjnymi, co wskazuje na związek semantyczny.

Jak działa proces pobierania

1. Umieszczanie zapytania: dane wejściowe użytkownika (np. „romantyczna kolacja w Paryżu”) są przekazywane przez model wektorowy i generują wektor zapytania.
2. Wektory dystrybucyjne baz danych: w idealnej sytuacji należałoby wstępnie przetworzyć bazę danych miejsc docelowych i utworzyć wektory dystrybucyjne dla każdego wpisu.
3. Obliczanie podobieństwa: wektor zapytania jest porównywany z każdym wektorem dystrybucyjnym w bazie danych przy użyciu wskaźnika podobieństwa (np. podobieństwo cosinusowego).
4. Pobieranie: jako trafne sugestie są pobierane najbardziej podobne wpisy z bazy danych na podstawie ich odległości od wektora zapytania.

Włączając ten mechanizm pobierania w swojej aplikacji, wykorzystujesz model Gemini do generowania sugestii, które nie tylko będą kreatywne, ale też mocno zakorzenione w konkretnym zbiorze danych. Dzięki temu wygenerowane dane wyjściowe są zgodne z kontekstem i informacjami dostępnymi w bazie danych.

Włącz wyszukiwanie podobieństwa wektorów w Firestore

W poprzednim kroku tego ćwiczenia z programowania wypełniłeś(-aś) bazę danych Firestore przykładowymi miejscami i działaniami. Każdy wpis dotyczący miejsca zawiera pole tekstowe knownFor z opisem jego najważniejszych atrybutów oraz odpowiednie pole embedding, które zawiera wektorową reprezentację tego opisu.

Aby korzystać z możliwości wyszukiwania podobieństw wektorowych w tych wektorach dystrybucyjnych, musisz utworzyć indeks Firestore. Ten indeks umożliwia wydajne pobieranie miejsc na podstawie podobieństwa ich wektorów dystrybucyjnych do danego zapytania.

1. Aby zainstalować w terminalu najnowszy komponent alfa, uruchom to polecenie. Potrzebujesz wersji 2024.05.03 lub nowszej:

   gcloud components install alpha
   

2. Utwórz indeks, zastępując YOUR_PROJECT_ID identyfikatorem projektu.

   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
   

3. W interfejsie aplikacji Genkit Developer otwórz placesRetriever.
4. Kliknij Wykonaj. Przyjrzyj się rusztowanemu obiektowi z tekstem zastępczym, który wskazuje, gdzie zaimplementujesz logikę retrievera.
5. Otwórz plik genkit-functions/src/lib/placesRetriever.ts w edytorze kodu.
6. Przewiń do końca i zastąp obiekt zastępczy placesRetriever tym:

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

Testowanie retrievera

1. W interfejsie aplikacji Genkit Developer otwórz retriever placesRetriever.
2. Podaj to zapytanie:

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

3. Możesz też wybrać Opcje. Poniżej pokazujemy, jak określić liczbę dokumentów, jaką powinien zwrócić:

   {
       "limit": 4
   }
   

4. Kliknij Wykonaj.

Możesz zastosować dodatkowe filtrowanie danych, wykraczające poza podobieństwo, dodając klauzule where do Opcje.

8. Generowanie rozszerzone przez wyszukiwanie w zapisanych informacjach (RAG) za pomocą Genkit

W poprzednich sekcjach stworzyliśmy osobne prompty, które radzą sobie z tekstem, plikami JSON i obrazami, a przez to generują miejsca docelowe wyjazdów wakacyjnych i inne atrakcyjne treści dla użytkowników. Wdrożono też prompt, który pobiera odpowiednie miejsca docelowe z bazy danych Firestore. Teraz czas uporządkować te komponenty w spójny proces generowania rozszerzonego przez pobieranie plików (RAG).

W tej sekcji przedstawiamy ważną koncepcję Genkit o nazwie przepływy. Przepływy to funkcje strumieniowania o silnym typie, które można wywoływać zarówno lokalnie, jak i zdalnie, z pełną obserwacją. Możesz zarządzać przepływami i je wywoływać zarówno z poziomu interfejsu wiersza poleceń aplikacji Genkit, jak i interfejsu użytkownika aplikacji Genkit Developer.

1. W edytorze kodu sprawdź prompt planu podróży:
   1. Otwórz plik genkit-functions/prompts/itineraryGen.prompt.
   2. Zwróć uwagę na to, że prompt został rozszerzony, aby przyjmować dodatkowe dane wejściowe, a w szczególności dane o działaniach pochodzące z mechanizmu pobierania.
2. W interfejsie aplikacji Genkit Developer wyświetl proces Genkit w pliku genkit-functions/src/lib/itineraryFlow.ts.
   Wskazówka: aby usprawnić debugowanie, rozważ podzielenie długich przepływów na mniejsze, łatwe do opanowania kroki.
3. uatrakcyjnianie procesu przez dodanie „opisu obrazu” krok:
   1. Znajdź komentarz TODO: 2 (wokół wiersza 70). To miejsce, w którym polepszysz brzmienie.
   2. Zastąp pusty obiekt zastępczy imgDescription wynikiem wygenerowanym przez wywołanie promptu imgDescription.
4. Przetestuj proces:
   1. Otwórz itineraryFlow.
   2. Użyj tych danych wejściowych, aby przetestować udane wykonanie polecenia itineraryFlow z nowo dodanym krokiem:

      {
          "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. Kliknij Wykonaj.
   4. Zwróć uwagę na wygenerowane dane wyjściowe, które powinny zawierać opis zdjęcia w sugestii dotyczącej planu podróży.
5. Jeśli wystąpią błędy lub nieoczekiwane zachowania, szczegółowe informacje znajdziesz na karcie Zbadaj. Na tej karcie możesz też przejrzeć historię uruchomień w magazynie logów czasu.

RAG dla aplikacji internetowej

1. Sprawdź, czy aplikacja internetowa nadal działa – w tym celu otwórz w przeglądarce stronę http://localhost:3000/.
2. Jeśli aplikacja internetowa już nie działa, uruchom w terminalu te polecenia:

   npm install
   npm run dev
   

3. Zapoznaj się ze stroną aplikacji internetowej Dream Your Holiday (http://localhost:3000/gemini).
4. Aby zobaczyć przykład integracji Next.js, wyświetl jej kod źródłowy (src/app/gemini/page.tsx).

9. Wdrażanie aplikacji za pomocą Firebase App Hosting

Ostatnim krokiem w tej podróży jest wdrożenie aplikacji internetowej. Wykorzystasz Firebase App Hosting, rozwiązanie do hostingu uwzględniające platformę, zaprojektowane w celu uproszczenia wdrażania aplikacji Next.js i Angular w bezserwerowym backendzie.

1. Zatwierdź zmiany w lokalnym repozytorium git, a następnie wypchnij je do GitHuba.
2. W konsoli Firebase otwórz App Hosting (Hosting aplikacji) w projekcie Firebase.
3. Kliknij Rozpocznij > Połącz się z GitHubem.
4. Wybierz swoje konto GitHub i Repozytorium. Kliknij Dalej.
5. W sekcji Ustawienie wdrażania > katalog główny, pozostaw wartość domyślną.
6. Jako gałąź Live wybierz główną gałąź repozytorium GitHub. Kliknij Dalej.
7. Wpisz identyfikator backendu (na przykład compass).
8. Gdy pojawi się pytanie, czy utworzyć czy powiązać aplikację internetową Firebase, kliknij Wybierz istniejącą aplikację internetową Firebase i wybierz aplikację utworzoną w poprzednim kroku tego ćwiczenia z programowania.
9. Kliknij Finish and Deploy (Zakończ i wdróż).

Monitorowanie stanu wdrożenia

Proces wdrażania potrwa kilka minut. Postęp możesz śledzić w sekcji App Hosting w konsoli Firebase. Gdy to zrobisz, Twoja aplikacja internetowa będzie dostępna dla użytkowników.

Automatyczne ponowne wdrażanie

Firebase App Hosting usprawnia przyszłe aktualizacje. Za każdym razem, gdy przekażesz zmiany do głównej gałęzi repozytorium GitHub, Firebase App Hosting automatycznie skompiluje i ponownie wdroży Twoją aplikację, tak aby użytkownicy zawsze mieli dostęp do jej najnowszej wersji.

10. Podsumowanie

Gratulujemy ukończenia tego kompleksowego ćwiczenia z programowania.

Udało Ci się wykorzystać możliwości Firebase Genkit, Firestore i Vertex AI do utworzenia zaawansowanego przepływu który generuje spersonalizowane rekomendacje dotyczące wakacji na podstawie preferencji i inspiracji użytkowników, a wszystko to na podstawie sugestii opartych na danych aplikacji.

W trakcie tej podróży zdobyliśmy praktyczne doświadczenie w zakresie podstawowych wzorców inżynierii oprogramowania, które są kluczowe dla tworzenia niezawodnych zastosowań generatywnej AI. Obejmują one:

• Zarządzanie promptami: organizowanie promptów i zarządzanie nimi jako kodu w celu zapewnienia lepszej współpracy i kontroli wersji.
• Treści multimodalne: integrowanie różnych typów danych, takich jak obrazy i tekst, w celu usprawniania interakcji z AI.
• Schematy danych wejściowych/wyjściowych: porządkowanie danych w celu zapewnienia płynnej integracji i weryfikacji w aplikacji.
• Sklepy wektorowe: wykorzystanie wektorów dystrybucyjnych wektorów do skutecznego wyszukiwania podobieństw i pobierania odpowiednich informacji.
• Pobieranie danych: wdrażanie mechanizmów pobierania danych z baz danych i umieszczania ich w treściach generowanych przez AI.
• Retrieval Augmented Generation (RAG): łączy techniki pobierania danych z generatywną AI, aby uzyskać wyniki dopasowane do kontekstu i dokładne.
• Instrumentacja przepływu: tworzenie i administrowanie złożonymi przepływami pracy AI, które zapewniają płynną i obserwacyjną realizację zadań.

Po opanowaniu tych koncepcji i zastosowaniu ich w ekosystemie Firebase zyskasz możliwość rozpoczęcia własnej przygody z generatywną AI. Odkrywaj ogromne możliwości, twórz innowacyjne aplikacje i kontynuuj przekraczanie granic możliwości, które można osiągnąć dzięki generatywnej AI.

Omówienie alternatywnych opcji wdrażania

Genkit oferuje różne opcje wdrażania dostosowane do konkretnych potrzeb, w tym:

• Cloud Functions dla Firebase
• Cloud Run,
• Next.js
• Dowolne środowisko Node.js
• Genkit obsługuje też język Go

Po prostu wybierz najodpowiedniejszą wersję, uruchamiając to polecenie w folderze węzła (package.json):

npx genkit init

Dalsze kroki

• Eksperymentuj z promptami i korzystaj z dużych okien kontekstu w Google AI Studio lub Vertex AI Studio.
• Dowiedz się więcej o wyszukiwaniu opartym na generowaniu rozszerzonego przez AI.
• Zapoznaj się z oficjalnymi dokumentami Firebase Genkit.
• Dowiedz się więcej o możliwościach wyszukiwania podobieństw w Firestore i Cloud SQL for PostgreSQL.
• Dowiedz się więcej o procesach generatywnej AI dzięki wywoływaniu funkcji.