1. Zanim zaczniesz
W tym laboratorium programistycznym dowiesz się, jak używać Firebase Genkit do integrowania generatywnej AI w aplikacji. Firebase Genkit to platforma open source, która ułatwia tworzenie, wdrażanie i monitorowanie gotowych do wdrożenia aplikacji opartych na AI.
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. Tworzy ją zespół Firebase na podstawie naszego doświadczenia w tworzeniu narzędzi używanych przez miliony deweloperów na całym świecie.
Wymagania wstępne
- znajomość Firestore, Node.js i TypeScript;
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 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
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
Podczas tych ćwiczeń w programie będziesz pracować w bazie kodu aplikacji o nazwie 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:
- Obecnie aplikacja wyświetla stałą listę miejsc docelowych. Zmień ją na dynamiczną.
- Wdrożysz automatycznie wypełniany plan podróży, aby zwiększyć zainteresowanie użytkowników.
Używane usługi
W tym ćwiczeniu będziesz korzystać z wielu usług i funkcji Firebase oraz Google Cloud. Większość kodu startowego jest już dla Ciebie przygotowana. 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 |
Genkit służy do wprowadzania generatywnej AI do aplikacji Node.js lub Next.js. | |
Przechowujesz dane w Cloud Firestore, które są następnie używane do wyszukiwania podobieństw wektorowych. | |
Do obsługi funkcji AI używasz podstawowych modeli Vertex AI (takich jak Gemini). | |
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
Sprawdź wersję Node.js
- W terminalu sprawdź, czy masz zainstalowaną wersję Node.js 20.0.0 lub nowszą:
node -v
- Jeśli nie masz Node.js w wersji 20.0.0 lub nowszej, pobierz i zainstaluj najnowszą wersję LTS.
Pobieranie kodu źródłowego do ćwiczenia w Codelabs
Jeśli masz konto GitHub:
- Utwórz nowe repozytorium przy użyciu naszego szablonu dostępnego na stronie github.com/FirebaseExtended/codelab-ai-genkit-rag
- 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 Gita 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 |
| Kod Genkit dla backendu |
| pomocnicze narzędzie wiersza poleceń do szybkiego wstępnego wypełniania 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
- Sprawdź, czy masz zainstalowany interfejs wiersza poleceń Firebase i czy jest to wersja 13.6 lub nowsza:
firebase --version
- Jeśli masz zainstalowany interfejs wiersza poleceń Firebase, ale nie jest to wersja 13.6 lub nowsza, zaktualizuj go:
npm update -g firebase-tools
- Jeśli wiersz poleceń Firebase nie jest zainstalowany, 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.
Logowanie w Firebase
- W terminalu zaloguj się w Firebase:
Jeśli w terminalu widać, że jesteś już zalogowany(-a) w Firebase, możesz przejść do sekcji Konfigurowanie projektu Firebase tego Codelab.firebase login
- W terminalu w zależności od tego, czy Firebase ma zbierać dane, wpisz
Y
czyN
. (W tym ćwiczeniu z programowania sprawdzi się jedna z tych opcji) - W przeglądarce wybierz swoje konto Google i kliknij Zezwól.
Instalowanie interfejsu wiersza poleceń gcloud w Google Cloud
- Zainstaluj interfejs wiersza poleceń gcloud.
- 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
- Zaloguj się w konsoli Firebase za pomocą tego samego konta Google co w poprzednim kroku.
- 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). Będzie on później potrzebny do identyfikowania projektu Firebase w interfejsie wiersza poleceń Firebase. Jeśli zapomnisz identyfikator, możesz go później znaleźć w Ustawieniach projektu. - Kliknij Dalej.
- Jeśli pojawi się taka prośba, przeczytaj i zaakceptuj warunki korzystania z Firebase, a potem kliknij Dalej.
- W tym ćwiczeniu nie potrzebujesz Google Analytics, więc wyłącz tę opcję.
- Kliknij Utwórz projekt, poczekaj na udostępnienie projektu i kliknij Dalej.
Dodawanie aplikacji internetowej do projektu Firebase
- W projekcie Firebase otwórz ekran Przegląd projektu i kliknij Sieć.
- 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ą. - Kliknij Zarejestruj aplikację > Przejdź do konsoli.
Świetnie. Twoja aplikacja internetowa została zarejestrowana w Twoim nowym projekcie Firebase.
Uaktualnij abonament Firebase
Aby można było korzystać z Firebase Genkit i Vertex AI (oraz z ich bazowych usług w chmurze), Twój projekt Firebase musi mieć abonament według wykorzystania (Blaze), co oznacza, że jest połączony z kontem rozliczeniowym 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, wykonaj te czynności:
- W konsoli Firebase wybierz uaktualnienie abonamentu.
- 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 uaktualnienia konieczne było utworzenie konta rozliczeniowego Cloud, może być konieczne powrót do procesu uaktualniania w konsoli Firebase.
Konfigurowanie Cloud Firestore
- W panelu po lewej stronie konsoli Firebase rozwiń Build (Kompilacja), a potem wybierz Firestore database (Baza danych Firestore).
- Kliknij Utwórz bazę danych.
- Pozostaw wartość
(default)
w polu Identyfikator bazy danych. - Wybierz lokalizację bazy danych i kliknij Dalej.
W przypadku prawdziwej aplikacji musisz wybrać lokalizację znajdującą się w pobliżu użytkowników. - 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. - 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.
- W terminalu ustaw domyślny projekt dla pakietu Google Cloud SDK:
gcloud config set project YOUR_PROJECT_ID
- 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
- 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. We wszystkich poleceniach na tej stronie zastąp YOUR_PROJECT_ID
identyfikatorem projektu Firebase.
Konfigurowanie wiersza poleceń Firebase pod kątem Twojego projektu
- W terminalu przejdź do katalogu głównego projektu ćwiczenia w programowaniu.
- 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.
- Aby umożliwić lokalnej bazie kodu uruchomienie kodu, który normalnie używa konta usługi, uruchom w terminalu to polecenie:
Otworzy się nowa karta w przeglądarce. Zaloguj się na to samo konto Google, którego użyto w poprzednich krokach.gcloud auth application-default login
- Aby zaimportować przykładowe dane Firestore, uruchom te polecenia:
cd load-firestore-data npm ci node index.js YOUR_PROJECT_ID cd ..
- 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 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.
- Uzyskaj konfigurację Firebase aplikacji:
- W konsoli Firebase otwórz swój projekt Firebase.
- W panelu bocznym po lewej stronie kliknij ikonę koła zębatego obok opcji Przegląd projektu i wybierz Ustawienia projektu.
- Na karcie „Twoje aplikacje” wybierz swoją aplikację internetową.
- W sekcji „Konfiguracja i konfiguracja pakietu SDK” kliknij opcję Konfiguracja.
- Skopiuj fragment kodu. Zaczyna się od
const firebaseConfig ...
.
- Dodaj konfigurację Firebase do bazy kodu aplikacji internetowej:
- W edytorze kodu otwórz plik
src/lib/genkit/genkit.config.ts
. - Zastąp odpowiednią sekcję skopiowanym kodem.
- Zapisz plik.
- W edytorze kodu otwórz plik
Wyświetlanie podglądu aplikacji internetowej w przeglądarce
- W terminalu zainstaluj zależności, a potem uruchom aplikację internetową:
npm install npm run dev
- 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ź 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 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 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
Zanim uruchomisz Genkit, musisz powiązać kod źródłowy z odpowiednim projektem Firebase, aby korzystać z jego usług, takich jak baza danych. Aby to zrobić, musisz dodać konfigurację Firebase do kodu aplikacji Genkit. 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.
- Uzyskaj konfigurację Firebase aplikacji:
- W konsoli Firebase otwórz swój projekt Firebase.
- W panelu po lewej stronie kliknij ikonę koła zębatego obok pozycji Przegląd projektu i wybierz Ustawienia projektu.
- Na karcie „Twoje aplikacje” wybierz aplikację internetową.
- W sekcji „Konfiguracja i konfiguracja pakietu SDK” kliknij opcję Konfiguracja.
- Skopiuj fragment kodu. Zaczyna się od
const firebaseConfig ...
.
- Dodaj konfigurację Firebase aplikacji do bazy kodu aplikacji Genkit:
- Otwórz plik
genkit-functions/src/lib/genkit.config.ts
w edytorze kodu. - Zastąp odpowiednią sekcję skopiowanym kodem.
- Zapisz plik.
- Otwórz plik
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.
- Uruchom interfejs Genkit dla programistów:
- Otwórz nowe okno terminala.
- Przejdź do głównego katalogu swojego katalogu
genkit-functions
. - Aby uruchomić interfejs dla programistów Genkit, uruchom to polecenie:
cd genkit-functions npx genkit start
- 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. 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 – wtyczkę i format tekstowy zaprojektowane w celu usprawnienia tworzenia promptów dla generatywnej AI oraz 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 prostego przykładu:
- Otwórz plik
genkit-functions/prompts/1-hello-world.prompt
w edytorze kodu. - W interfejsie aplikacji Genkit Developer otwórz
dotprompt/1-hello-world
. - Użyj dowolnej nazwy języka lub kodu, które znasz, albo pozostaw pusty ciąg znaków.
- Kliknij Wykonaj.
- Wypróbuj kilka różnych 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 zlecić LLM wygenerowanie danych strukturalnych zgodnych z wybranym formatem.
Poznawanie schematów wyjściowych
Możesz też określić schemat wyjściowy wywołania LLM.
- Przejrzyj plik promptu w edytorze kodu:
- Otwórz plik
dotprompt/2-simple-itinerary
. - Sprawdź zdefiniowane schematy danych wejściowych i wyjściowych.
- Otwórz plik
- Interakcja z interfejsem:
- W interfejsie aplikacji Genkit Developer przejdź do sekcji
dotprompt/2-simple-itinerary
. - Podaj dane wejściowe, wypełniając pola
place
iinterests
przykładowymi danymi:{ "interests": [ "Museums" ], "place": "Paris" }
- Kliknij Wykonaj.
- W interfejsie aplikacji Genkit Developer przejdź do sekcji
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 zgodności ze schematem, co zapewnia integralność danych.
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 włączać uporządkowane dane do elementów 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 wyjściowych zwiększa możliwości Genkitu, umożliwiając tworzenie dostosowanych, uporządkowanych danych, które zapewniają 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 wielomodalnym modelem generatywnym umożliwia realizację tej wizji.
- W edytorze kodu sprawdź plik prompta:
- Otwórz plik
genkit-functions/prompts/imgDescription.prompt
. - Zwróć uwagę na element
{{media url=this}}
, który jest elementem składniowym szablonu, ułatwiającym dodawanie obrazów do prompta.
- Otwórz plik
- Wejdź w interakcję z interfejsem:
- W interfejsie Genkit dla deweloperów otwórz prompt
dotprompt/imgDescription
. - 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" ] }
- Kliknij Wykonaj.
- W interfejsie Genkit dla deweloperów otwórz prompt
7. Wdrażanie wyszukiwania z użyciem wyszukiwania wektorowego opartego na podobieństwie
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 nieustrukturyzowanymi zapytaniami a trafnymi treściami, możesz wykorzystać możliwości wyszukiwania wektorów o podobnych właściwościach na podstawie wygenerowanych wektorów dystrybucyjnych.
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 czy obrazy. Każdy wymiar w wektorze odpowiada konkretnej właściwości danych.
- Modele osadzania: 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 podobieństw wektorowych: ta metoda wykorzystuje bliskość wektorów dystrybucyjnych do identyfikacji 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
- Umieszczanie zapytania: dane wejściowe użytkownika (np. „romantyczna kolacja w Paryżu”) są przekazywane do modelu embeddingu, który generuje wektor zapytania.
- 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.
- 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).
- 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łączanie wyszukiwania według 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 o miejscu zawiera pole tekstowe knownFor
z opisem jego najważniejszych atrybutów oraz pole embedding
z uwzględnieniem wektorów 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.
- Aby zainstalować w terminalu najnowszy komponent alfa, uruchom to polecenie. Potrzebujesz wersji
2024.05.03
lub nowszej:gcloud components install alpha
- Utwórz indeks, pamiętając, aby zastąpić
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
- W interfejsie aplikacji Genkit Developer otwórz
placesRetriever
. - Kliknij Wykonaj. Przyjrzyj się rusztowanemu obiektowi z tekstem zastępczym, który wskazuje, gdzie zaimplementujesz logikę retrievera.
- Otwórz plik
genkit-functions/src/lib/placesRetriever.ts
w edytorze kodu. - 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
- W interfejsie Genkit dla deweloperów otwórz funkcję
placesRetriever
retriever. - Podaj to zapytanie:
{ "content": [ { "text": "UNESCO" } ] }
- Możesz też wybrać Opcje. Poniżej pokazujemy, jak określić liczbę dokumentów, jaką powinien zwrócić:
{ "limit": 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ż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ż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.
- W edytorze kodu sprawdź prompt dotyczący planu podróży:
- Otwórz plik
genkit-functions/prompts/itineraryGen.prompt
. - Zwróć uwagę, że prompt został rozszerzony, aby uwzględnić dodatkowe dane wejściowe, w tym dane activities pochodzące z Retrievera.
- Otwórz plik
- 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. - Aby uatrakcyjnić cały proces, dodaj do niego krok „opis obrazu”:
- Znajdź komentarz
TODO: 2
(wokół wiersza 70). To miejsce, w którym polepszysz brzmienie. - Zastąp pusty obiekt zastępczy
imgDescription
wynikiem wygenerowanym przez wywołanie promptaimgDescription
.
- Znajdź komentarz
- Przetestuj proces:
- Otwórz stronę
itineraryFlow
. - 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" ] }
- Kliknij Wykonaj.
- Zwróć uwagę na wygenerowane dane wyjściowe, które powinny zawierać opis zdjęcia w sugestii dotyczącej planu podróży.
- Otwórz stronę
- Jeśli pojawią się błędy lub nieoczekiwane zachowania, sprawdź szczegóły na karcie Sprawdź. Na tej karcie możesz też przejrzeć historię uruchomień w magazynie logów czasu.
RAG dla aplikacji internetowej
- Aby sprawdzić, czy aplikacja internetowa nadal działa, otwórz w przeglądarce adres http://localhost:3000/.
- Jeśli aplikacja internetowa już nie działa, uruchom w terminalu te polecenia:
npm install npm run dev
- Otwórz stronę aplikacji internetowej Dream Your Vacation (http://localhost:3000/gemini).
- 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.
- Zatwierdź zmiany w lokalnym repozytorium Git, a następnie wypchnij je do GitHuba.
- W konsoli Firebase przejdź w projekcie Firebase do sekcji Hosting aplikacji.
- Kliknij Rozpocznij > Połącz z GitHub.
- Wybierz konto GitHub i repozytorium. Kliknij Dalej.
- W sekcji Ustawienia wdrożenia > Katalog główny pozostaw wartość domyślną.
- Jako gałąź Live wybierz główną gałąź repozytorium GitHub. Kliknij Dalej.
- Wpisz identyfikator backendu (np.
compass
). - Gdy pojawi się pytanie, czy chcesz utworzyć nową aplikację internetową Firebase, czy też powiązać już istniejącą, wybierz Wybierz istniejącą aplikację internetową Firebase i wskaż aplikację utworzoną w poprzednim kroku tego Codelab.
- 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.
Przyznaj uprawnienia kontu usługi
Aby backend Node.js miał dostęp do zasobów Vertex AI, musisz przypisać rolę aiplatform.user
do konta usługi aplikacji:
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 w zakresie podstawowych wzorców inżynierii oprogramowania, które są kluczowe dla tworzenia niezawodnych aplikacji opartych na generatywnej AI. Obejmują one:
- 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.
- 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 zarządzanie złożonymi przepływami pracy AI w celu ich płynnego i przejrzystego wykonywania.
Po opanowaniu tych koncepcji i zastosowaniu ich w ekosystemie Firebase zyskasz możliwość rozpoczęcia własnej przygody z generatywną AI. Poznaj 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ż 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 kontekstowych 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 oficjalnymi dokumentami Firebase Genkit.
- Dowiedz się więcej o możliwościach wyszukiwania podobieństw w Firestore i Cloud SQL for PostgreSQL.
- Poznaj szczegóły działania genAI w przypadku wywołania funkcji.