Twórz funkcje generatywnej AI opartej na 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 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.

D54f2043af908fb.png

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

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 podstawowych modeli 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

Sprawdź wersję Node.js

  1. W terminalu sprawdź, czy masz zainstalowaną wersję Node.js 20.0.0 lub nowszą:
    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 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-rag65ef006167d600ab.png
  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 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

genkit-functions

Kod Genkit dla backendu

load-firestore-data

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

  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, 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ć 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

  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 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. 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 co 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). 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.
  3. Kliknij Dalej.
  4. Jeśli pojawi się taka prośba, przeczytaj i zaakceptuj warunki korzystania z Firebase, 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 udostępnienie projektu i kliknij Dalej.

Dodawanie aplikacji internetowej do projektu Firebase

  1. W projekcie Firebase otwórz ekran Przegląd projektu i kliknij Ikona z otwartymi nawiasami klamrowymi, pochylną kreską i zamkniętymi nawiasami klamrowymi, która reprezentuje aplikację internetową Sieć.Przycisk Internet u góry sekcji Podsumowanie projektu w konsoli Firebase
  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ą.
    Rejestrowanie aplikacji internetowej
  3. 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.

Dowiedz się więcej o cenach Vertex AI.

Aby przenieść projekt na abonament Blaze, wykonaj te czynności:

  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 uaktualnienia konieczne było utworzenie konta rozliczeniowego Cloud, może być konieczne powrót do procesu uaktualniania w konsoli Firebase.

Konfigurowanie Cloud Firestore

  1. W panelu po lewej stronie konsoli Firebase rozwiń Build (Kompilacja), a potem wybierz Firestore database (Baza danych Firestore).
  2. Kliknij Utwórz bazę danych.
  3. Pozostaw wartość (default) w polu Identyfikator bazy danych.
  4. Wybierz lokalizację bazy danych i kliknij Dalej.
    W przypadku prawdziwej aplikacji musisz wybrać lokalizację znajdującą się w pobliżu 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łą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 domyślny projekt dla pakietu Google Cloud SDK:
    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
    

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

  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
    
    Otworzy się nowa karta 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. 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ść.Przykładowe dane kompasu w konsoli Firebase

Łą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.

  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. Na karcie „Twoje aplikacje” wybierz swoją aplikację internetową.
    4. W sekcji „Konfiguracja i konfiguracja pakietu SDK” kliknij opcję Konfiguracja.
    5. Skopiuj fragment kodu. Zaczyna się od const firebaseConfig ....
  2. Dodaj konfigurację Firebase do bazy kodu 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 potem uruchom aplikację internetową:
    npm install
    npm run dev
    
  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.

Ekran główny aplikacji Kompas

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:

Ekran „Znajdź wymarzoną podróż”

Zachęcamy do ich wypróbowania. Aby kontynuować, kliknij przycisk strony głównej Strona główna (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.

  1. Uzyskaj konfigurację Firebase aplikacji:
    1. W konsoli Firebase otwórz swój projekt Firebase.
    2. W panelu po lewej stronie kliknij ikonę koła zębatego obok pozycji Przegląd projektu i wybierz Ustawienia projektu.
    3. Na karcie „Twoje aplikacje” wybierz aplikację internetową.
    4. W sekcji „Konfiguracja i konfiguracja pakietu SDK” kliknij 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 Genkit dla deweloperów

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

  1. Uruchom interfejs Genkit dla programistów:
    1. Otwórz nowe okno terminala.
    2. Przejdź do głównego katalogu swojego katalogu genkit-functions.
    3. Aby uruchomić interfejs dla programistów Genkit, uruchom to polecenie:
      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. 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.

Interakcja z modelem Gemini w interfejsie dla programistów Genkit

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:

  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 języka lub kodu, które znasz, albo pozostaw pusty ciąg znaków.
  4. Kliknij Wykonaj.Generowanie powitania w języku szwedzkim za pomocą narzędzia Dotprompt
  5. 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.

  1. Przejrzyj plik promptu w edytorze kodu:
    1. Otwórz plik dotprompt/2-simple-itinerary.
    2. Sprawdź zdefiniowane schematy danych wejściowych i wyjściowych.
  2. Interakcja 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.

Użycie Dotprompt do określenia schematu wyjściowego

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.

  1. W edytorze kodu sprawdź plik prompta:
    1. Otwórz plik genkit-functions/prompts/imgDescription.prompt.
    2. Zwróć uwagę na element {{media url=this}}, który jest elementem składniowym szablonu, ułatwiającym dodawanie obrazów do prompta.
  2. Wejdź w interakcję z interfejsem:
    1. W interfejsie Genkit dla deweloperów 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 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

  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. 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 zanurzeniowym w bazie danych za pomocą miary podobieństwa (np. podobieństwa 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łą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.

  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, 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
    
  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 Genkit dla deweloperów otwórz funkcję placesRetriever retriever.
  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ż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.

  1. W edytorze kodu sprawdź prompt dotyczący planu podróży:
    1. Otwórz plik genkit-functions/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 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. Aby uatrakcyjnić cały proces, dodaj do niego krok „opis obrazu”:
    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 prompta imgDescription.
  4. Przetestuj proces:
    1. Otwórz stronę 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 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

  1. Aby sprawdzić, czy aplikacja internetowa nadal działa, otwórz w przeglądarce adres http://localhost:3000/.
  2. Jeśli aplikacja internetowa już nie działa, uruchom w terminalu te polecenia:
    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).

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

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 przejdź w projekcie Firebase do sekcji Hosting aplikacji.
  3. Kliknij Rozpocznij > Połącz z GitHub.
  4. Wybierz konto GitHub i repozytorium. Kliknij Dalej.
  5. W sekcji Ustawienia wdrożenia > Katalog główny pozostaw wartość domyślną.
  6. Jako gałąź Live wybierz główną gałąź repozytorium GitHub. Kliknij Dalej.
  7. Wpisz identyfikator backendu (np. compass).
  8. 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.
  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.

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:

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

npx genkit init

Dalsze kroki