Tworzenie funkcji generatywnej AI na podstawie Twoich danych za pomocą Firebase Genkit

1. Zanim zaczniesz

W tym laboratorium programistycznym dowiesz się, jak używać Firebase Genkit do integrowania generatywnej AI w aplikacji. Firebase Genkit to framework typu open source, który ułatwia tworzenie, wdrażanie i monitorowanie gotowych do wdrożenia aplikacji opartych na AI.

Genkit został opracowany z myślą o programistach aplikacji, aby ułatwić im integrację zaawansowanych funkcji AI w aplikacji za pomocą znajomych wzorców i paradygmatów. Jest ona tworzona przez zespół Firebase, który wykorzystuje nasze doświadczenie w tworzeniu narzędzi używanych przez miliony programistów na całym świecie.

Wymagania wstępne

• znajomość Firestore, Node.js i TypeScript;

Czego się nauczysz

• Jak tworzyć mądrzejsze aplikacje dzięki zaawansowanym funkcjom wyszukiwania podobieństwa wektorów w Firestore.
• Jak zastosować generatywną AI w swoich aplikacjach za pomocą Firebase Genkit.
• Przygotuj rozwiązanie do wdrożenia i integracji.

Czego potrzebujesz

• przeglądarkę, np. Google Chrome;
• Środowisko programistyczne z edytorem kodu i terminalem
• Konto Google do tworzenia projektu Firebase i zarządzania nim

Uwaga: to Codelab korzysta z Firebase i usług Google, które wymagają posiadania konta rozliczeniowego Cloud. Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy możesz otrzymać 300 USD w formie środków i otworzyć konto rozliczeniowe Google Cloud na potrzeby bezpłatnego okresu próbnego, 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 rozliczeń 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 laboratorium programistycznego, oraz dowiesz się więcej o usługach w chmurze, z których będziesz korzystać.

Aplikacja internetowa

W tym Codelab będziesz pracować nad kodem źródłowym aplikacji Compass, która służy do planowania wakacji. Użytkownicy mogą wybrać miejsce docelowe, przejrzeć dostępne w nim atrakcje i utworzyć plan podróży.

W tym ćwiczeniu z programowania wdrożysz 2 nowe funkcje, które mają zwiększyć zaangażowanie użytkowników na stronie głównej aplikacji. Obie funkcje są obsługiwane przez generatywną AI:

• Aplikacja wyświetla obecnie stałą listę miejsc docelowych. Zmień go na dynamiczny.
• Wprowadzisz automatycznie wypełniony plan podróży, aby zwiększyć przywiązanie użytkowników.

Uwaga: to jest duży projekt z wieloma krokami. Aby w pełni wykorzystać możliwości tego ćwiczenia:

• Zwolnij i rób sobie przerwy.
• Podczas pracy z kodem poświęć trochę czasu na zrozumienie, czym jest kod i jak działa, zamiast bezmyślnie kopiować i wklejać.
• Jeśli utkniesz, wróć do ostatniego stanu, w którym wszystko działało prawidłowo, i upewnij się, że wszystkie kroki zostały wykonane prawidłowo.
• Jeśli znajdziesz błąd w tym module lub jego kodzie, zgłoś go na GitHubie.

Używane usługi

W tym ćwiczeniu będziesz korzystać z wielu usług i funkcji Firebase oraz Google Cloud. Udostępniliśmy Ci większość kodu startowego. W tabeli poniżej znajdziesz usługi, z których będziesz korzystać, oraz powody, dla których ich używasz.

Usługa	Powód użycia
Firebase Genkit	Genkit umożliwia stosowanie generatywnej AI w aplikacji Node.js lub Next.js.
Cloud Firestore	Dane są przechowywane w Cloud Firestore, a potem używane do wyszukiwania podobieństwa wektorów.
Vertex AI od Google Cloud	Do obsługi funkcji AI używasz podstawowych modeli z Vertex AI (takich jak Gemini).
Firebase App Hosting	Opcjonalnie możesz użyć nowego, usprawnionego Hostingu aplikacji Firebase, aby udostępniać dynamiczną aplikację internetową Next.js (połączoną z repozytorium GitHub).

3. Konfigurowanie środowiska programistycznego

Weryfikacja wersji Node.js

1. W terminalu sprawdź, czy masz zainstalowaną Node.js w wersji 20.0.0 lub nowszej:

   node -v
   

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

Pobieranie kodu źródłowego ćwiczeń z programowania

Jeśli masz konto GitHub:

1. Utwórz nowe repozytorium, używając naszego szablonu z adresu github.com/FirebaseExtended/codelab-ai-genkit-rag
2. Utwórz lokalną kopię utworzonego przed chwilą repozytorium GitHub dla tego codelab:

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

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

Pobierz repozytorium GitHub jako plik ZIP.

Sprawdź strukturę folderów

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

Folder	Opis
load-firestore-data	pomocnicze narzędzie wiersza poleceń do szybkiego wstępnego wypełniania kolekcji Firestore;
*wszystko inne	Kod aplikacji internetowej Next.js

Folder główny zawiera plik README.md, który zawiera uproszczone instrukcje uruchamiania aplikacji internetowej. Jeśli jednak dopiero zaczynasz naukę, powinieneś ukończyć ten projekt (zamiast samouczka), ponieważ zawiera on najbardziej obszerny zestaw instrukcji.

Jeśli nie masz pewności, czy kod został prawidłowo zastosowany zgodnie z instrukcjami podanymi w tym samouczku, kod rozwiązania znajdziesz na gałęzi git end.

Instalowanie wiersza poleceń Firebase

1. Sprawdź, czy masz zainstalowany wiersz poleceń Firebase w wersji 13.6 lub nowszej:

   firebase --version
   

2. Jeśli masz zainstalowany interfejs wiersza poleceń Firebase, ale nie jest to wersja 13.6 lub nowsza, zaktualizuj go:

   npm update -g firebase-tools
   

3. Jeśli wiersz poleceń Firebase nie jest zainstalowany, zainstaluj go:

   npm install -g firebase-tools
   

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

Logowanie się w Firebase

1. W terminalu zaloguj się w Firebase:

   firebase login
   

   Jeśli w terminalu widać, że jesteś już zalogowany(-a) w Firebase, możesz przejść do sekcji Konfigurowanie projektu Firebase tego Codelab.
2. W terminalu wpisz Y lub N, w zależności od tego, czy chcesz, aby Firebase zbierała dane. (w tym ćwiczeniu obie opcje są prawidłowe)
3. W przeglądarce wybierz swoje konto Google i kliknij Zezwól.

Instalowanie interfejsu wiersza poleceń gcloud w Google Cloud

1. Zainstaluj gcloud CLI.
2. Zaloguj się w Google Cloud w terminalu:

   gcloud auth login
   

4. Konfigurowanie projektu Firebase

W tej sekcji skonfigurujesz projekt Firebase i zarejestrujesz w nim aplikację internetową Firebase. W tym samouczku włączysz też kilka usług używanych przez przykładową aplikację internetową.

Wszystkie czynności w tej sekcji wykonujesz w konsoli Firebase.

Tworzenie projektu Firebase

1. Zaloguj się w konsoli Firebase za pomocą tego samego konta Google, którego użyto w poprzednim kroku.
2. Kliknij Utwórz projekt, a potem wpisz nazwę projektu (np. Compass Codelab).
   Zapamiętaj automatycznie przypisany identyfikator projektu Firebase (lub kliknij ikonę Edytuj, aby ustawić preferowany identyfikator projektu). Ten identyfikator będzie Ci potrzebny później do identyfikacji projektu Firebase w wierszu poleceń Firebase. Jeśli zapomnisz identyfikator, możesz go później znaleźć w Ustawieniach projektu.
3. Kliknij Dalej.
4. Jeśli pojawi się odpowiedni komunikat, zapoznaj się z warunkami korzystania z Firebase i zaakceptuj je, a potem kliknij Dalej.
5. W tym ćwiczeniu nie potrzebujesz Google Analytics, więc wyłącz tę opcję.
6. Kliknij Utwórz projekt, poczekaj na jego wdrożenie, a potem kliknij Dalej.

Dodawanie aplikacji internetowej do projektu Firebase

1. W projekcie Firebase otwórz ekran Omówienie projektu, a potem kliknij  Sieć.
2. W polu tekstowym Nazwa skrótowa aplikacji wpisz zapadającą w pamięć nazwę skrótową aplikacji, np. My Compass Codelab App. Możesz pozostawić niezaznaczone pole wyboru konfiguracji Hostingu Firebase, ponieważ opcjonalnie skonfigurujesz usługę hostingową w ostatnim kroku tego Codelab.
   
3. Kliknij Zarejestruj aplikację > Przejdź do konsoli.

Świetnie. Aplikacja internetowa została zarejestrowana w nowym projekcie Firebase.

Przejdź na wyższy abonament Firebase

Aby korzystać z Genkit i Vertex AI w Firebase (oraz z podstawowych usług w chmurze), musisz mieć projekt Firebase w planie cen „płaca, ile używasz” (Blaze), co oznacza, że jest on połączony z kontem Rozliczeń usługi Google Cloud.

• Konto Cloud Billing wymaga formy płatności, np. karty kredytowej.
• Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do otrzymania 300 USD środków i bezpłatnego okresu próbnego na koncie płatności Cloud.
• Jeśli wykonujesz to Codelab w ramach wydarzenia, zapytaj organizatora, czy są dostępne jakieś kredyty Cloud.

Dowiedz się więcej o cenach Vertex AI.

Aby przenieść projekt na abonament Blaze:

1. W konsoli Firebase wybierz uaktualnienie abonamentu.
2. Wybierz pakiet Blaze. Postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby połączyć konto rozliczeniowe Cloud z projektem.
   Jeśli w ramach tego przejścia musiałeś/musiałaś utworzyć konto rozliczeniowe Cloud, konieczne może być powrót do procesu przejścia w konsoli Firebase, aby dokończyć przejście na wyższy abonament.

Uwaga: po zakończeniu tego ćwiczenia możesz przejść na bezpłatny plan cen (Spark).

Konfigurowanie Cloud Firestore

1. W panelu po lewej stronie w konsoli Firebase rozwiń Kompilacja, a potem wybierz Baza danych Firestore.
2. Kliknij Utwórz bazę danych.
3. Pozostaw wartość (default) w polu Identyfikator bazy danych.
4. Wybierz lokalizację bazy danych, a potem kliknij Dalej.
   W przypadku prawdziwej aplikacji wybierz lokalizację blisko użytkowników.
5. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł zabezpieczeń.
   Nie rozpowszechniaj ani nie udostępniaj aplikacji publicznie bez dodania reguł zabezpieczeń dla bazy danych.
6. Kliknij Utwórz.

Włączanie Vertex AI

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

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

   gcloud config set project YOUR_PROJECT_ID
   

2. Jeśli zobaczysz komunikat o błędzie „OSTRZEŻENIE: Twój aktywny projekt nie pasuje do projektu limitu w lokalnym pliku domyślnych danych aplikacji. Może to spowodować nieoczekiwane problemy z limitem.", 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
   

5. Konfigurowanie aplikacji internetowej

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

Konfigurowanie wiersza poleceń Firebase pod kątem Twojego projektu

1. W terminalu przejdź do katalogu głównego projektu Codelab.
2. Aby polecenie wiersza poleceń Firebase wykonało wszystkie polecenia dotyczące Twojego projektu Firebase, uruchom to polecenie:

   firebase use YOUR_PROJECT_ID
   

Importowanie przykładowych danych do Firestore

Aby umożliwić Ci szybkie rozpoczęcie pracy, w tym ćwiczeniu znajdziesz wygenerowane wcześniej przykładowe dane do Firestore.

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

   gcloud auth application-default login
   

   Otworzy się nowa karta w przeglądarce. Zaloguj się na to samo konto Google, którego używasz 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. Aby sprawdzić, czy dane zostały dodane do bazy danych, otwórz w konsoli Firebase sekcję Firestore w projekcie Firebase.Powinien wyświetlić się zaimportowany schemat danych i jego zawartość.

Łączenie aplikacji internetowej z projektem Firebase

Kod źródłowy Twojej aplikacji internetowej musi być powiązany z odpowiednim projektem Firebase, aby można było korzystać z jego usług, np. bazy danych. Aby to zrobić, musisz dodać konfigurację Firebase do kodu źródłowego aplikacji. Ta konfiguracja zawiera najważniejsze wartości, takie jak identyfikator projektu, klucz interfejsu API aplikacji i identyfikator aplikacji, a także inne wartości, które umożliwiają aplikacji interakcję z Firebase.

1. Pobierz konfigurację Firebase swojej aplikacji:
   1. W konsoli Firebase otwórz projekt Firebase.
   2. W panelu po lewej stronie kliknij ikonę koła zębatego obok sekcji Przegląd projektu i wybierz Ustawienia projektu.
   3. Na karcie „Twoje aplikacje” wybierz aplikację internetową.
   4. W sekcji „Konfiguracja i ustawienie pakietu SDK” kliknij opcję Konfiguracja.
   5. Skopiuj fragment kodu. Zaczyna się od const firebaseConfig ....
2. Dodaj konfigurację Firebase do kodu źródłowego aplikacji internetowej:
   1. W edytorze kodu otwórz plik src/lib/genkit/genkit.config.ts.
   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 następnie uruchom aplikację internetową:

   npm install
   npm run dev:next
   

2. W przeglądarce otwórz adres URL hostingu na komputerze lokalnym, aby wyświetlić aplikację internetową. W większości przypadków będzie to na przykład http://localhost:3000/ lub podobny adres URL.

Compass to aplikacja Next.js korzystająca z komponentów serwera React. Poniżej jej strona główna.

Kliknij Znajdź wymarzoną podróż. Obecnie wyświetla ona zakodowane na stałe dane dotyczące niektórych stałych miejsc docelowych:

Możesz je swobodnie przeglądać. Gdy będziesz gotowy, kliknij przycisk (w prawym górnym rogu).

6. Poznaj generatywną AI dzięki Genkit

Teraz możesz korzystać z potencjału generatywnej AI w swojej aplikacji. W tej sekcji tego ćwiczenia z programowania znajdziesz wskazówki dotyczące implementowania funkcji, która sugeruje miejsca docelowe na podstawie informacji podanych przez użytkownika. Jako dostawcy modelu generatywnego (będziesz używać Gemini) użyjesz Firebase Genkit i Vertex AI w Google Cloud.

Genkit może przechowywać stan ścieżki i przepływu (co umożliwia sprawdzenie wyniku wykonywania przepływów Genkit). W tym laboratorium kodu użyjesz Firestore do przechowywania tych ścieżek.

Ostatnim krokiem w tym samouczku jest wdrożenie aplikacji Genkit do Firebase App Hosting.

Łączenie aplikacji Genkit z projektem Firebase

W poprzednim kroku połączyliśmy już Genkit z Twoim projektem, edytując src/lib/genkit/genkit.config.ts.

Uruchamianie interfejsu Genkit dla deweloperów

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

W terminalu uruchom:

npm run dev:genkit

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

Interakcja z Gemini

Teraz możesz używać interfejsu dla programistów Genkit do interakcji z dowolnymi obsługiwanymi modelami lub innymi komponentami AI, takimi jak prompty, retrievery i przepływy Genkit.

Możesz na przykład poprosić Gemini o propozycję na wakacje. Zobacz, jak możesz używać instrukcji systemowych, aby kierować zachowaniem modelu zgodnie ze swoimi potrzebami. Ta funkcja działa również w przypadku modeli, które nie obsługują natywnych instrukcji systemowych.

Zarządzanie promptami

Firebase Genkit wprowadza Dotprompt, czyli wtyczkę i format tekstowy, które mają na celu usprawnienie tworzenia promptów generatywnej AI i zarządzania nimi. Główną ideą Dotprompt jest traktowanie promptów jako kodu, co pozwala na ich pisanie, utrzymywanie i kontrolowanie wersji obok kodu aplikacji.

Aby korzystać z Dotprompt, zacznij od prostej aplikacji „hello-world”:

1. W edytorze kodu otwórz plik prompts/1-hello-world.prompt.
2. W interfejsie Genkit dla programistów otwórz prompts/1-hello-world.
3. Użyj dowolnej nazwy lub kodu języka, który znasz, albo pozostaw to pole puste.
4. Kliknij Wykonaj.
5. Wypróbuj kilka różnych wartości. Duże modele językowe dobrze rozumieją skróty, błędy pisowni i niepełne prompty w prostych zapytaniach, takich jak to.

Wzbogacanie danych wyjściowych za pomocą uporządkowanych danych

Genkit nie tylko generuje zwykły tekst, ale też umożliwia uporządkowanie danych wyjściowych w celu ulepszenia ich prezentacji i integracji z interfejsem aplikacji. Definiując schemat, możesz zlecić LLM wygenerowanie danych strukturalnych zgodnych z wybranym formatem.

Schematy danych wyjściowych

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

1. W edytorze kodu sprawdź plik prompta:
   1. Otwórz plik prompts/2-simple-itinerary.prompt.
   2. Sprawdź zdefiniowane schematy danych wejściowych i wyjściowych.
2. Interakcja z interfejsem:
   1. W interfejsie Genkit dla deweloperów przejdź do sekcji prompts/2-simple-itinerary.
   2. Podaj dane, wypełniając pola place i interests przykładowymi danymi:

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

   3. Kliknij Wykonaj.

Dane wyjściowe oparte na schemacie

Zwróć uwagę, że wygenerowany wynik jest zgodny ze zdefiniowanym schematem. Określając żądaną strukturę, przekazujesz LLM instrukcję wygenerowania danych, które można łatwo przeanalizować i zintegrować z aplikacją. Genkit automatycznie weryfikuje dane wyjściowe pod kątem zgodności ze schematem, co zapewnia integralność danych.

Możesz też skonfigurować Genkit tak, aby ponownie próbował wygenerować dane wyjściowe lub spróbować je naprawić, jeśli nie pasują do schematu.

Najważniejsze zalety schematów wyjściowych

• Uproszczona integracja: możesz łatwo włączać uporządkowane dane do elementów interfejsu aplikacji.
• Weryfikacja danych: zapewnia dokładność i spójność wygenerowanego wyniku.
• Obsługa błędów: wdrożenie mechanizmów rozwiązywania niezgodności schematu.

Korzystanie ze schematów wyjściowych zwiększa możliwości Genkitu, umożliwiając tworzenie dostosowanych danych uporządkowanych, które zapewniają bogatsze i bardziej dynamiczne wrażenia użytkowników.

Korzystanie z danych multimodalnych

Wyobraź sobie, że Twoja aplikacja sugeruje spersonalizowane miejsca na wakacje na podstawie zdjęć, które podobają się użytkownikom. Genkit w połączeniu z wielomodalnym modelem generatywnym umożliwia realizację tej wizji.

1. W edytorze kodu sprawdź plik prompta:
   1. Otwórz plik prompts/imgDescription.prompt.
   2. Zwróć uwagę na element {{media url=this}}, który jest elementem składniowym w Handlebars, ułatwiającym dodawanie obrazów do prompta.
2. Interakcja z interfejsem:
   1. W interfejsie Genkit dla deweloperów otwórz prompt prompts/imgDescription.
   2. W polu imageUrls wklej adres URL obrazu. 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 wyszukiwania z użyciem wyszukiwania według podobieństwa wektorowego

Generowanie kreatywnych treści za pomocą modeli AI jest imponujące, ale praktyczne zastosowania często wymagają umieszczenia wyników w określonym kontekście.

W tym przypadku masz bazę danych miejsc docelowych (miejsc i działań) i chcesz się upewnić, że sugestie wygenerowane przez model Gemini odwołują się wyłącznie do wpisów w tej bazie danych.

Aby wypełnić lukę między nieustrukturyzowanymi zapytaniami a trafnymi treściami, możesz wykorzystać możliwości wyszukiwania wektorów podobnych na podstawie wygenerowanych wektorów dystrybucyjnych.

Wprowadzenie do wektorów dystrybucyjnych i podobieństwa wektorów

• Wektory: wektory to liczbowe reprezentacje punktów danych, często używane do modelowania złożonych informacji, takich jak tekst czy obrazy. Każdy wymiar wektora odpowiada konkretnej funkcji danych.
• Modele embeddingu: te wyspecjalizowane modele AI przekształcają dane wejściowe, takie jak tekst, w wielowymiarowe wektory. Fascynujące jest to, że podobne dane wejściowe są mapowane na wektory, które są blisko siebie w tej wysokowymiarowej przestrzeni.
• Wyszukiwanie według podobieństwa wektorów: ta technika wykorzystuje bliskość wektorów dystrybucyjnych do identyfikowania odpowiednich punktów danych. Na podstawie zapytania wejściowego znajduje w bazie danych wpisy z podobnymi wektorami zanurzeniowymi, 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 do modelu embeddingu, który generuje wektor zapytania.
2. Współrzędne bazy danych: w najlepszym przypadku baza danych miejsc docelowych została przetworzona wstępnie, tworząc wektory współrzędnych dla każdego wpisu.
3. Obliczanie podobieństwa: wektor zapytania jest porównywany z każdym wektorem zanurzeniowym w bazie danych za pomocą miary podobieństwa (np. podobieństwa cosinusowego).
4. Pobieranie: najbardziej podobne wpisy z bazy danych, wybrane na podstawie ich podobieństwa do wektora zapytania, są pobierane jako trafne sugestie.

Dzięki włączeniu tego mechanizmu wyszukiwania do aplikacji możesz korzystać z modelu Gemini do generowania sugestii, które są nie tylko kreatywne, ale też mocno zakorzenione w Twoim konkretnym zbiorze danych. Dzięki temu wygenerowany wynik będzie odpowiedni kontekstowo i zgodny z informacjami dostępnymi w Twojej bazie danych.

Włączanie wyszukiwania według podobieństwa wektorów w Firestore

W poprzednim kroku tego Codelab wypełniłeś/wypełniłaś bazę danych Firestore przykładowymi miejscami i aktywnościami. Każdy wpis o miejscu zawiera pole tekstowe knownFor z opisem jego najważniejszych atrybutów oraz pole embedding z uwzględnieniem wektorów tego opisu.

Aby móc korzystać z wyszukiwania według podobieństwa wektorów w przypadku tych wektorów dystrybucyjnych, musisz utworzyć indeks Firestore. Ten indeks umożliwia wydajne wyszukiwanie miejsc na podstawie podobieństwa ich wektorów dystrybucyjnych do danego zapytania.

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

   gcloud components install alpha
   

2. Utwórz indeks, pamiętając, aby zastąpić YOUR_PROJECT_ID identyfikatorem projektu.

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

3. W interfejsie Genkit dla deweloperów otwórz retrievers/placesRetriever.
4. Kliknij Wykonaj. Zwróć uwagę na obiekt z tekstem zastępczym, który wskazuje, gdzie zaimplementujesz logikę pobierania.
5. W edytorze kodu otwórz plik src/lib/genkit/placesRetriever.ts.
6. Przewiń na sam dół i zastąp obiekt zastępczy placesRetriever tym ciągiem znaków:

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

Testowanie funkcji pobierania

1. W interfejsie Genkit dla deweloperów otwórz funkcję retrievers/placesRetriever retriever.
2. Podaj to zapytanie:

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

3. Możesz też podać opcje. Oto przykład określenia liczby dokumentów, które ma zwrócić funkcja retriever:

   {
       "limit": 4
   }
   

4. Kliknij Wykonaj.

Możesz dodatkowo filtrować dane na podstawie podobieństwa, dodając do sekcji Opcje klauzule where.

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

W poprzednich sekcjach utworzyliśmy pojedyncze prompty, które mogą obsługiwać tekst, JSON i obrazy, generując miejsca na wakacje i inne interesujące treści dla użytkowników. Wdrożyłeś też prompt, który pobiera odpowiednie miejsca docelowe z Twojej bazy danych Firestore. Teraz nadszedł czas na skoordynowanie tych komponentów w jednym spójnym procesie generowania rozszerzonego przez wyszukiwanie (RAG).

W tej sekcji przedstawiamy ważne pojęcie Genkit, czyli przepływy. Przepływy to funkcje o ścisłym typie, które można przesyłać strumieniowo i wywoływać zarówno lokalnie, jak i zdalnie, z pełną obserwowalnością. Przepływy możesz zarządzać i uruchamiać zarówno z poziomu interfejsu wiersza poleceń Genkit, jak i interfejsu dla deweloperów Genkit.

1. W edytorze kodu sprawdź prompt dotyczący planu podróży:
   1. Otwórz plik prompts/itineraryGen.prompt.
   2. Zwróć uwagę, że prompt został rozszerzony, aby uwzględnić dodatkowe dane wejściowe, w tym dane activities pochodzące z Retrievera.
2. W interfejsie Genkit dla deweloperów wyświetl przepływ Genkit w pliku src/lib/genkit/itineraryFlow.ts.
   Wskazówka: aby usprawnić debugowanie, rozbij długie przepływy na mniejsze, łatwiejsze do opanowania kroki.
3. Ulepsz proces, integrując krok „opis obrazu”:
   1. Znajdź komentarz TODO: 2 (około wiersza 81). To miejsce, w którym możesz poprawić przepływ.
   2. Zastąp pusty obiekt zastępczy imgDescription wynikiem wygenerowanym przez wywołanie prompta imgDescription.
4. Przetestuj przepływ:
   1. Otwórz stronę flows/itineraryFlow.
   2. Aby przetestować prawidłowe wykonanie itineraryFlow z dodanym przez Ciebie krokiem, użyj tych danych wejściowych:

      {
          "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. Sprawdź wygenerowany wynik, który powinien zawierać opis obrazu w propozycji planu podróży.
5. Jeśli pojawią się błędy lub nieoczekiwane zachowania, sprawdź szczegóły na karcie Sprawdź. Możesz też użyć tej karty, aby sprawdzić historię wykonywania zadań z Trace Store.

RAG dla aplikacji internetowej

1. Aby sprawdzić, czy aplikacja internetowa nadal działa, otwórz w przeglądarce adres http://localhost:3000/.
2. Jeśli aplikacja internetowa nie działa, uruchom te polecenia w terminalu:

   npm install
   npm run dev
   

3. Otwórz stronę aplikacji internetowej Dream Your Vacation (http://localhost:3000/gemini).
4. Aby zobaczyć przykład integracji z Next.js, otwórz kod źródłowy (src/app/gemini/page.tsx).

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

Ostatnim krokiem jest wdrożenie aplikacji internetowej. Wykorzystasz Firebase App Hosting, rozwiązanie do hostowania oparte na frameworku, które ułatwia wdrażanie aplikacji Next.js i Angular na backendzie bezserwerowym.

1. Zatwierdź zmiany w lokalnym repozytorium Git, a następnie wypchnij je do GitHuba.
2. W konsoli Firebase otwórz Hosting aplikacji w projekcie Firebase.
3. Kliknij Rozpocznij > Połącz z GitHubem.
4. Wybierz konto GitHub i repozytorium. Kliknij Dalej.
5. W sekcji Ustawienia wdrożenia > Katalog główny pozostaw wartość domyślną.
6. W przypadku gałęzi na żywo wybierz gałąź główną swojego repozytorium GitHub. Kliknij Dalej.
7. Wpisz identyfikator backendu (np. compass).
8. Gdy pojawi się pytanie, czy chcesz utworzyć lub powiązać aplikację internetową Firebase, wybierz Wybierz istniejącą aplikację internetową Firebase i wskaż aplikację utworzoną w poprzednim kroku tego Codelab.
9. Kliknij Zakończ i wdróż.

Monitorowanie stanu wdrożenia

Proces wdrażania zajmie kilka minut. Postępy możesz śledzić w sekcji Hosting aplikacji w konsoli Firebase.

Przyznawanie uprawnień kontu usługi

Aby backend Node.js miał dostęp do zasobów Vertex AI, musisz przypisać do konta usługi aplikacji rolę aiplatform.user:

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"

Po zakończeniu procesu tworzenia aplikacja internetowa będzie dostępna dla użytkowników.

Automatyczne ponowne wdrożenie

Firebase App Hosting upraszcza przyszłe aktualizacje. Za każdym razem, gdy wypchniesz zmiany do głównego gałęzi repozytorium GitHub, Firebase App Hosting automatycznie skompiluje i wprowadzi nową wersję aplikacji, aby użytkownicy zawsze mieli dostęp do najnowszej wersji.

10. Podsumowanie

Gratulujemy ukończenia tego obszernego ćwiczenia.

Użytkownik wykorzystał możliwości Firebase Genkit, Firestore i Vertex AI do stworzenia zaawansowanego „przepływu”, który generuje spersonalizowane rekomendacje dotyczące wakacji na podstawie preferencji i inspiracji użytkownika, a także danych z aplikacji.

W trakcie tej podróży zdobyłeś/zdobyłaś praktyczne doświadczenie z podstawowymi wzorcami inżynierii oprogramowania, które są kluczowe dla tworzenia niezawodnych aplikacji wykorzystujących generatywną AI. Do tych wzorców należą:

• Zarządzanie promptami: organizowanie i utrzymywanie promptów w formie kodu w celu lepszej współpracy i kontroli wersji.
• Treści multimodalne: integracja różnych typów danych, takich jak obrazy i tekst, w celu ulepszania interakcji z AI.
• Schematy wejścia/wyjścia: strukturyzowanie danych na potrzeby płynnej integracji i weryfikacji w aplikacji.
• Wektory dystrybucyjne: korzystanie z wektorów dystrybucyjnych do efektywnego wyszukiwania podobieństw i pobierania odpowiednich informacji.
• Pobieranie danych: wdrażanie mechanizmów pobierania i włączania danych z baz danych do treści generowanych przez AI.
• Generowanie rozszerzone przez wyszukiwanie w zapisanych informacjach (RAG): połączenie technik wyszukiwania z generatywną AI w celu uzyskania trafnych i sytuacyjnie odpowiednich wyników.
• Instrumentacja przepływu: tworzenie i zarządzanie złożonymi przepływami pracy AI w celu ich płynnego i przejrzystego wykonywania.

Po opanowaniu tych zagadnień i ich zastosowaniu w ekosystemie Firebase będziesz dobrze przygotowany do rozpoczęcia własnych przygód z generacyjną sztuczną inteligencją. Odkryj ogromne możliwości, twórz innowacyjne aplikacje i stale przesuwaj granice tego, co można osiągnąć dzięki generatywnej AI.

Wybieranie alternatywnych opcji wdrażania

Genkit oferuje różne opcje wdrażania, które można dostosować do konkretnych potrzeb, w tym:

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

Wybierz najlepszą dla siebie opcję, uruchamiając to polecenie w folderze węzła (package.json):

npx genkit init

Dalsze kroki

• Eksperymentuj z promptami i korzystaj z dużego okna kontekstowego w Google AI Studio lub Vertex AI Studio.
• Dowiedz się więcej o generowaniu rozszerzonym przez wyszukiwanie w zapisanych informacjach (RAG) za pomocą AI.
• Zapoznaj się z oficjalną dokumentacją Firebase Genkit.
• Dowiedz się więcej o możliwościach wyszukiwania podobieństw w Firestore i Cloud SQL for PostgreSQL.
• Poznaj szczegóły dotyczące przepływów genAI z wywołaniami funkcji.