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

1. Zanim zaczniesz

Z tego przewodnika dowiesz się, jak używać Genkit do integrowania generatywnej AI z aplikacją. Genkit to platforma open source, która pomaga tworzyć, wdrażać i monitorować aplikacje oparte na AI gotowe do wdrożenia w środowisku produkcyjnym.

Genkit został zaprojektowany z myślą o deweloperach aplikacji, aby ułatwić im integrowanie zaawansowanych funkcji AI w aplikacjach przy użyciu znanych wzorców i paradygmatów. Został on stworzony przez zespół Firebase, który wykorzystał swoje doświadczenie w tworzeniu narzędzi używanych przez miliony programistów na całym świecie.

Wymagania wstępne

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

Czego się nauczysz

  • Jak tworzyć inteligentniejsze aplikacje dzięki zaawansowanym funkcjom wyszukiwania podobieństwa wektorowego w Firestore.
  • Jak praktycznie wdrożyć generatywną AI w aplikacjach za pomocą Genkit.
  • Przygotuj rozwiązanie do wdrożenia i integracji.

Czego potrzebujesz

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

2. Sprawdź używane aplikacje internetowe i usługi w chmurze

W tej sekcji zapoznasz się z aplikacją internetową, którą utworzysz w ramach tego laboratorium, oraz z usługami w chmurze, z których będziesz korzystać.

Aplikacja internetowa

W tym module będziesz pracować w kodzie aplikacji Compass, która służy do planowania wakacji. Użytkownicy mogą wybrać miejsce docelowe, przejrzeć dostępne tam 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ą oparte na generatywnej AI:

  • Aplikacja wyświetla obecnie statyczną listę miejsc docelowych. Zmienisz go na dynamiczny.
  • Zaimplementujesz automatycznie wypełniany plan podróży, aby zwiększyć zaangażowanie użytkowników.

d54f2043af908fb.png

Używane usługi

W tym laboratorium kodowania użyjesz wielu usług i funkcji Firebase i Cloud, a większość kodu początkowego jest już dostępna. W tabeli poniżej znajdziesz usługi, z których będziesz korzystać, oraz powody ich używania.

Usługa

Powód użycia

Genkit

Genkit umożliwia wprowadzenie generatywnej AI do aplikacji Node.js lub Next.js.

Cloud Firestore

Dane są przechowywane w Cloud Firestore, a następnie używane do wyszukiwania podobieństwa wektorowego.

Vertex AI od Google Cloud

Do obsługi funkcji AI używasz modeli podstawowych z Vertex AI (takich jak Gemini).

Firebase App Hosting

Opcjonalnie możesz użyć nowego, uproszczonego hostingu aplikacji Firebase do obsługi dynamicznej aplikacji internetowej Next.js (połączonej z repozytorium GitHub).

3. Konfigurowanie środowiska programistycznego

Sprawdzanie wersji 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 najnowszą wersję LTS i zainstaluj ją.

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

Jeśli masz konto GitHub:

  1. Utwórz nowe repozytorium za pomocą naszego szablonu z github.com/FirebaseExtended/codelab-ai-genkit-rag65ef006167d600ab.png
  2. Utwórz lokalną kopię utworzonego przed chwilą repozytorium GitHub z ćwiczeniami:
    git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
    

Jeśli nie masz zainstalowanego narzędzia git lub nie chcesz tworzyć nowego repozytorium:

Pobierz repozytorium GitHub jako plik ZIP.

Sprawdź strukturę folderów

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

Folder

Opis

load-firestore-data

Narzędzie wiersza poleceń, które umożliwia szybkie wstępne wypełnianie kolekcji Firestore

*wszystkie inne

Kod aplikacji internetowej Next.js

Folder główny zawiera plik README.md, który dzięki uproszczonym instrukcjom umożliwia szybkie uruchomienie aplikacji internetowej. Jeśli jednak dopiero zaczynasz naukę, wykonaj to laboratorium (zamiast szybkiego startu), ponieważ zawiera ono najbardziej wyczerpujący zestaw instrukcji.

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

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 wiersz poleceń Firebase, ale nie jest to wersja 13.6 lub nowsza, zaktualizuj go:
    npm update -g firebase-tools
    
  3. Jeśli nie masz zainstalowanego wiersza poleceń Firebase, 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 skorzystaj z innej opcji instalacji.

Logowanie w Firebase

  1. W terminalu zaloguj się w Firebase:
    firebase login
    
    Jeśli w terminalu pojawi się informacja, że jesteś już zalogowany(-a) w Firebase, możesz przejść do sekcji Konfigurowanie projektu Firebase w tym samouczku.
  2. W terminalu wpisz Y lub N w zależności od tego, czy chcesz, aby Firebase zbierał dane. (obie opcje działają w tym ćwiczeniu)
  3. W przeglądarce wybierz konto Google i kliknij Zezwól.

Instalowanie interfejsu wiersza poleceń gcloud Google Cloud

  1. Zainstaluj gcloud CLI.
  2. W terminalu zaloguj się w Google Cloud:
    gcloud auth login
    

4. Konfigurowanie projektu Firebase

W tej sekcji skonfigurujesz projekt Firebase i zarejestrujesz w nim aplikację internetową Firebase. W dalszej części tego laboratorium włączysz też kilka usług, z których korzysta przykładowa aplikacja internetowa.

Wszystkie czynności opisane w tej sekcji wykonuje się w konsoli Firebase.

Tworzenie projektu Firebase

  1. Zaloguj się w konsoli Firebase za pomocą tego samego konta Google, którego używasz w poprzednim kroku.
  2. Kliknij przycisk, aby utworzyć nowy projekt, a potem wpisz jego nazwę (np. Compass Codelab).
  3. Kliknij Dalej.
  4. Po wyświetleniu monitu przeczytaj i zaakceptuj warunki usługi Firebase, a potem kliknij Dalej.
  5. (Opcjonalnie) Włącz w konsoli Firebase pomoc AI (nazywaną „Gemini w Firebase”).
  6. W tym samouczku nie potrzebujesz Google Analytics, więc wyłącz opcję Google Analytics.
  7. Kliknij Utwórz projekt, poczekaj, aż projekt zostanie udostępniony, a następnie kliknij Dalej.

Dodawanie aplikacji internetowej do projektu Firebase

  1. Otwórz ekran Omówienie projektu w projekcie Firebase, a potem kliknij Ikona z nawiasami ostrymi otwierającym i zamykającym oraz ukośnikiem, która reprezentuje aplikację internetową. Internet.Przycisk Sieć u góry sekcji Przegląd projektu w konsoli Firebase
  2. W polu tekstowym Pseudonim aplikacji wpisz łatwy do zapamiętania pseudonim aplikacji, np. My Compass Codelab App. Możesz pozostawić pole wyboru konfiguracji Hostingu Firebase niezaznaczone, ponieważ w ostatnim kroku tego laboratorium możesz opcjonalnie skonfigurować usługę hostingową.
    Rejestrowanie aplikacji internetowej
  3. Kliknij Zarejestruj aplikację > Przejdź do konsoli.

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

Przejście na wyższy abonament Firebase

Aby korzystać z Genkit i Vertex AI (oraz ich usług w chmurze), Twój projekt Firebase musi być objęty abonamentem z płatnością za wykorzystanie (Blaze), co oznacza, że musi być połączony z kontem rozliczeniowym Cloud.

  • Konto rozliczeniowe Cloud wymaga formy płatności, np. karty kredytowej.
  • Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy możesz otrzymać środki w wysokości 300 USD i bezpłatne konto rozliczeniowe Cloud.
  • Jeśli wykonujesz te ćwiczenia w ramach wydarzenia, zapytaj organizatora, czy są dostępne środki w Google Cloud.

Dowiedz się więcej o cenniku Vertex AI.

Aby przenieść projekt na abonament Blaze:

  1. W konsoli Firebase wybierz przejście na wyższy abonament.
  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 na wyższy abonament konieczne było utworzenie konta rozliczeniowego Cloud, może być konieczne powrócenie do procesu przejścia na wyższy abonament w konsoli Firebase, aby go dokończyć.

Konfigurowanie Cloud Firestore

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

Włączanie Vertex AI

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

  1. W terminalu ustaw projekt domyślny dla pakietu Google Cloud SDK:
    gcloud config set project YOUR_PROJECT_ID
    
  2. Jeśli zobaczysz komunikat ostrzegawczy „WARNING: Your active project does not match the quota project in your local Application Default Credentials file. Może to spowodować nieoczekiwane problemy z limitami”. 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.

Skonfiguruj wiersz poleceń Firebase tak, aby kierował polecenia do Twojego projektu

  1. W terminalu przejdź do katalogu głównego projektu codelab.
  2. Aby wiersz poleceń Firebase wykonywał wszystkie polecenia w Twoim projekcie Firebase, uruchom to polecenie:
    firebase use YOUR_PROJECT_ID
    

Importowanie przykładowych danych do Firestore

Aby ułatwić Ci rozpoczęcie pracy, w tym ćwiczeniu znajdziesz wstępnie wygenerowane przykładowe dane Firestore.

  1. Aby umożliwić lokalnej bazie kodu uruchamianie kodu, który zwykle korzysta z konta usługi, uruchom w terminalu to polecenie:
    gcloud auth application-default login
    
    Otworzy się nowa karta przeglądarki. 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. Sprawdź, czy dane zostały dodane do bazy danych. W tym celu otwórz sekcję Firestore w projekcie Firebase w konsoli Firebase. Powinny się tam wyświetlać zaimportowany schemat danych i jego zawartość.Przykładowe dane Compass w konsoli Firebase

Łączenie aplikacji internetowej z projektem Firebase

Aby korzystać z usług Firebase, takich jak baza danych, kod aplikacji internetowej musi być powiązany z odpowiednim projektem Firebase. Aby to zrobić, musisz dodać konfigurację Firebase do kodu aplikacji. Ta konfiguracja zawiera podstawowe wartości, takie jak identyfikator projektu, klucz interfejsu API 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 projekt Firebase.
    2. W panelu po lewej stronie kliknij ikonę koła zębatego obok opcji Przegląd projektu i wybierz Ustawienia projektu.
    3. Na karcie „Twoje aplikacje” wybierz aplikację internetową.
    4. W sekcji „Konfiguracja pakietu SDK” kliknij opcję Konfiguracja.
    5. Skopiuj fragment kodu. Zaczyna się od const firebaseConfig ....
  2. Dodaj konfigurację Firebase do 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 następnie uruchom aplikację internetową:
    npm install
    npm run dev:next
    
  2. W przeglądarce otwórz adres URL hostingu lokalnego, aby wyświetlić aplikację internetową. W większości przypadków adres URL to http://localhost:3000/ lub podobny.

Ekran główny aplikacji Kompas

Compass to aplikacja Next.js korzystająca z komponentów serwera React. To jest strona główna.

Kliknij Znajdź wycieczkę marzeń. Możesz zobaczyć, że wyświetla ona zakodowane na stałe dane dotyczące niektórych stałych miejsc docelowych:

Ekran Znajdź wymarzoną podróż

Zapoznaj się z nimi. Gdy zechcesz kontynuować, kliknij Strona główna przycisk strony głównej (w prawym górnym rogu).

6. Poznaj generatywną AI dzięki Genkit

Możesz teraz wykorzystać w swojej aplikacji możliwości generatywnej AI. W tej sekcji ćwiczeń z programowania dowiesz się, jak wdrożyć funkcję, która sugeruje miejsca docelowe na podstawie inspiracji podanych przez użytkownika. Będziesz używać Genkit i Vertex AI od Google Cloud jako dostawcy modelu generatywnego (będziesz korzystać z Gemini).

Genkit może przechowywać ślady i stan przepływu (co umożliwia sprawdzanie wyników wykonywania przepływów Genkit). W tym laboratorium będziesz używać Firestore do przechowywania tych śladów.

Na ostatnim etapie tego kursu wdrożysz aplikację Genkit w usłudze Firebase App Hosting.

Łączenie aplikacji Genkit z projektem Firebase

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

Uruchamianie interfejsu dewelopera Genkit

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

W terminalu uruchom:

npm run dev:genkit

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

Interakcja z Gemini

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

Możesz na przykład poprosić Gemini o zaproponowanie pomysłu na wakacje. Zwróć uwagę, jak możesz używać instrukcji systemowych, aby kierować zachowaniem modelu w zależności od swoich potrzeb. Działa to również w przypadku modeli, które nie obsługują natywnie instrukcji systemowych.

Interakcja z modelem Gemini w interfejsie programisty Genkit

Zarządzanie promptami

Genkit wprowadza Dotprompt, wtyczkę i format tekstu zaprojektowane w celu usprawnienia tworzenia promptów generatywnej AI i zarządzania nimi. Główna idea Dotprompt polega na traktowaniu promptów jako kodu, co umożliwia pisanie, aktualizowanie i kontrolowanie ich wersji wraz z kodem aplikacji.

Aby użyć Dotprompt, zacznij od programu „hello-world”:

  1. W edytorze kodu otwórz plik prompts/1-hello-world.prompt.
  2. W interfejsie programisty Genkit otwórz prompts/1-hello-world.
  3. Użyj dowolnej nazwy lub kodu języka, który znasz, lub pozostaw puste pole.
  4. Kliknij Uruchom.Używanie Dotprompt do wygenerowania powitania w języku szwedzkim
  5. Wypróbuj kilka różnych wartości. Duże modele językowe dobrze radzą sobie z rozumieniem skróconych, błędnie napisanych lub niekompletnych promptów w prostych zapytaniach, takich jak to.

Wzbogacanie danych wyjściowych za pomocą danych strukturalnych

Genkit nie tylko generuje zwykły tekst, ale też umożliwia strukturyzowanie danych wyjściowych w celu lepszej prezentacji i integracji w interfejsie aplikacji. Definiując schemat, możesz poinstruować LLM, aby generował dane strukturalne zgodne z wybranym formatem.

Badanie schematów wyjściowych

Możesz też określić schemat danych wyjściowych 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 deweloperskim Genkit otwórz sekcję prompts/2-simple-itinerary.
    2. Wpisz dane wejściowe, wypełniając pola placeinterests przykładowymi danymi:
      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      
    3. Kliknij Wykonaj.

Określanie schematu danych wyjściowych za pomocą Dotprompt

Informacje o danych wyjściowych opartych na schemacie

Zwróć uwagę, jak wygenerowane dane wyjściowe są zgodne ze zdefiniowanym schematem. Określając żądaną strukturę, instruujesz LLM, aby generował dane, które można łatwo przeanalizować i zintegrować z aplikacją. Genkit automatycznie weryfikuje dane wyjściowe pod kątem schematu, zapewniając integralność danych.

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

Najważniejsze zalety schematów wyjściowych

  • Uproszczona integracja: łatwo włączaj dane strukturalne do elementów interfejsu aplikacji.
  • Sprawdzanie poprawności danych: zapewnij dokładność i spójność wygenerowanych wyników.
  • Obsługa błędów: wdróż mechanizmy, które pozwolą rozwiązywać problemy z niezgodnością schematów.

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

Korzystanie z wielomodalnego wprowadzania danych

Wyobraź sobie, że Twoja aplikacja sugeruje spersonalizowane miejsca docelowe na wakacje na podstawie zdjęć, które inspirują użytkowników. Genkit w połączeniu z multimodalnym 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 znak {{media url=this}}, który jest elementem składni Handlebars ułatwiającym wstawianie obrazów do prompta.
  2. Interakcja z interfejsem:
    1. W interfejsie deweloperskim Genkit otwórz prompt prompts/imgDescription.
    2. Wklej adres URL obrazu w polu imageUrls. Możesz na przykład użyć miniatury z Wikipedii przedstawiającej wieżę Eiffla:
      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      
    3. Kliknij Wykonaj.

7. Wdrażanie pobierania za pomocą wyszukiwania podobieństwa wektorowego

Generowanie kreatywnych treści za pomocą modeli AI jest imponujące, ale praktyczne zastosowania często wymagają osadzenia danych wyjściowych w określonym kontekście.

W tym przypadku masz bazę danych miejsc docelowych (miejsc i atrakcji) i chcesz mieć pewność, że wygenerowane przez model Gemini sugestie będą odnosić się wyłącznie do wpisów w tej bazie danych.

Aby wypełnić lukę między nieustrukturyzowanymi zapytaniami a odpowiednimi treściami, wykorzystasz wyszukiwanie podobieństwa wektorowego na wygenerowanych wektorach dystrybucyjnych.

Wektory dystrybucyjne i podobieństwo wektorów

  • Wektory: wektory to numeryczne reprezentacje punktów danych, często używane do modelowania złożonych informacji, takich jak tekst lub obrazy. Każdy wymiar w wektorze odpowiada konkretnej funkcji danych.
  • Modele wektorów dystrybucyjnych: te specjalistyczne modele AI przekształcają dane wejściowe, takie jak tekst, w wektory o dużej liczbie wymiarów. Fascynujące jest to, że podobne dane wejściowe są mapowane na wektory, które są blisko siebie w tej przestrzeni wielowymiarowej.
  • Wyszukiwanie podobieństwa wektorowego: ta technika wykorzystuje bliskość wektorów dystrybucyjnych do identyfikowania odpowiednich punktów danych. Na podstawie zapytania wejściowego znajduje w bazie danych wpisy o podobnych wektorach dystrybucyjnych, co wskazuje na powiązanie semantyczne.

Jak działa proces odzyskiwania

  1. Osadzanie zapytania: dane wejściowe użytkownika (np. „romantyczna kolacja w Paryżu”) są przekazywane przez model osadzania, który generuje wektor zapytania.
  2. Osadzanie bazy danych: najlepiej, jeśli baza danych miejsc docelowych została wstępnie przetworzona i dla każdego wpisu utworzono wektory osadzania.
  3. Obliczanie podobieństwa: wektor zapytania jest porównywany z każdym wektorem dystrybucyjnym w bazie danych za pomocą miary podobieństwa (np. podobieństwa kosinusowego).
  4. Wyszukiwanie: najbardziej podobne wpisy z bazy danych, na podstawie ich bliskości do wektora zapytania, są pobierane jako trafne sugestie.

Dzięki włączeniu tego mechanizmu wyszukiwania do aplikacji możesz wykorzystać model Gemini do generowania sugestii, które są nie tylko kreatywne, ale też ściśle powiązane z Twoim konkretnym zbiorem danych. Dzięki temu wygenerowane dane wyjściowe pozostaną odpowiednie kontekstowo i zgodne z informacjami dostępnymi w Twojej bazie danych.

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

W poprzednim kroku tego laboratorium utworzyliśmy w bazie danych Firestore przykładowe miejsca i aktywności. Każdy wpis dotyczący miejsca zawiera knownFor pole tekstowe z opisem jego istotnych atrybutów oraz odpowiadające mu embedding pole zawierające wektorową reprezentację tego opisu.

Aby wykorzystać możliwości wyszukiwania podobieństwa wektorowego w przypadku tych wektorów dystrybucyjnych, musisz utworzyć indeks Firestore. Ten indeks umożliwia wydajne pobieranie miejsc na podstawie podobieństwa wektorów osadzania do danego zapytania.

  1. Utwórz indeks, pamiętając o zastąpieniu 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": "{}"}'
    
  2. W interfejsie programisty Genkit otwórz retrievers/placesRetriever.
  3. Kliknij Wykonaj. Obserwuj obiekt z tekstem zastępczym, który wskazuje, gdzie zaimplementujesz logikę pobierania.
  4. W edytorze kodu otwórz plik src/lib/genkit/placesRetriever.ts.
  5. Przewiń na sam dół i zastąp obiekt zastępczy placesRetriever tym tekstem:
    export const placesRetriever = defineFirestoreRetriever(ai, {
      name: 'placesRetriever',
      firestore,
      collection: 'places',
      contentField: 'knownFor',
      vectorField: 'embedding',
      embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
      distanceMeasure: 'COSINE',
    });
    

Testowanie wyszukiwarki

  1. W interfejsie deweloperskim Genkit otwórz moduł pobierania retrievers/placesRetriever.
  2. Podaj to zapytanie:
    {
        "content": [
            {
                "text": "UNESCO"
            }
        ]
    }
    
  3. Możesz też podać Opcje. Na przykład tak możesz określić, ile dokumentów ma zwrócić wyszukiwarka:
    {
        "limit": 4
    }
    
  4. Kliknij Wykonaj.

Możesz dodatkowo filtrować dane poza podobieństwem, dodając klauzule where do opcji.

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 angażujące treści dla użytkowników. Wdrożono też prompt, który pobiera odpowiednie miejsca docelowe z bazy danych Firestore. Teraz nadszedł czas, aby połączyć te komponenty w spójny proces generowania rozszerzonego przez wyszukiwanie w zapisanych informacjach (RAG).

W tej sekcji przedstawiamy ważne pojęcie Genkit, czyli przepływy. Flows to funkcje z silnym typowaniem, które można przesyłać strumieniowo i wywoływać lokalnie oraz zdalnie, z pełną możliwością obserwacji. Przepływami możesz zarządzać i wywoływać je zarówno za pomocą interfejsu wiersza poleceń Genkit, jak i interfejsu programisty 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 akceptować dodatkowe dane wejściowe, w szczególności dane activities pochodzące z wyszukiwarki.
  2. W interfejsie deweloperskim Genkit wyświetl przepływ Genkit w pliku src/lib/genkit/itineraryFlow.ts.
    Wskazówka: aby usprawnić debugowanie, rozważ podzielenie długich przepływów na mniejsze, łatwiejsze do zarządzania kroki.
  3. Ulepsz przepływ, integrując krok „opis obrazu”:
    1. Znajdź TODO: 2 komentarz (około wiersza 81). W ten sposób oznaczysz miejsce, w którym chcesz ulepszyć swój przepływ.
    2. Zastąp pusty obiekt zastępczy imgDescription wynikiem wygenerowanym przez wywołanie prompta imgDescription.
  4. Przetestuj proces:
    1. Otwórz flows/itineraryFlow.
    2. Aby sprawdzić, czy funkcja itineraryFlow została wykonana prawidłowo w nowo dodanym kroku, użyj tego wejścia:
      {
          "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ź wygenerowane wyniki, które powinny zawierać opis obrazu w sugestii dotyczącej planu podróży.
  5. Jeśli napotkasz błędy lub nieoczekiwane zachowania, szczegóły znajdziesz na karcie Sprawdź. Na tej karcie możesz też sprawdzić historię wykonań z Trace Store.

RAG w aplikacji internetowej

  1. Sprawdź, czy aplikacja internetowa nadal działa, otwierając w przeglądarce adres http://localhost:3000/.
  2. Jeśli aplikacja internetowa 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. Zobacz jego kod źródłowy (src/app/gemini/page.tsx), aby zapoznać się z przykładem integracji z Next.js.

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, czyli rozwiązanie hostingowe z obsługą frameworków, które upraszcza 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 w projekcie Firebase otwórz Hosting aplikacji.
  3. Kliknij Rozpocznij > Połącz z GitHub.
  4. Wybierz konto GitHubrepozytorium. Kliknij Dalej.
  5. W sekcji Ustawienia wdrożenia > Katalog główny pozostaw wartość domyślną.
  6. W przypadku gałęzi Live wybierz gałąź main w 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 kursu.
  9. Kliknij Zakończ i wdroż.

Monitorowanie stanu wdrożenia

Proces wdrażania potrwa 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ć 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 tego procesu aplikacja internetowa będzie dostępna dla użytkowników.

Automatyczne ponowne wdrażanie

Firebase App Hosting upraszcza przyszłe aktualizacje. Za każdym razem, gdy wypchniesz zmiany do głównej gałęzi repozytorium GitHub, Firebase App Hosting automatycznie ponownie skompiluje i wdroży Twoją aplikację, dzięki czemu użytkownicy zawsze będą korzystać z najnowszej wersji.

10. Podsumowanie

Gratulujemy ukończenia tego obszernego ćwiczenia!

Udało Ci się wykorzystać potencjał Genkit, Firestore i Vertex AI do utworzenia zaawansowanego „przepływu”, który generuje spersonalizowane rekomendacje dotyczące wakacji na podstawie preferencji i inspiracji użytkownika, a jednocześnie opiera sugestie na danych z Twojej aplikacji.

Podczas tej ścieżki szkoleniowej zdobędziesz praktyczne doświadczenie w zakresie podstawowych wzorców inżynierii oprogramowania, które są kluczowe przy tworzeniu niezawodnych aplikacji generatywnej AI. Obejmują one:

  • Zarządzanie promptami: organizowanie i utrzymywanie promptów w formie kodu w celu ułatwienia współpracy i kontroli wersji.
  • Treści multimodalne: integrowanie różnych typów danych, takich jak obrazy i tekst, w celu ulepszenia interakcji z AI.
  • Schematy wejścia/wyjścia: strukturyzowanie danych na potrzeby płynnej integracji i weryfikacji w aplikacji.
  • Bazy danych wektorowych: wykorzystują wektory dystrybucyjne do wydajnego 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): łączenie technik wyszukiwania z generatywną AI w celu uzyskania trafnych i dokładnych wyników.
  • Instrumentacja przepływu: tworzenie złożonych przepływów pracy AI i zarządzanie nimi w celu zapewnienia płynnego i przejrzystego wykonywania.

Opanowanie tych koncepcji i wykorzystanie ich w ekosystemie Firebase przygotuje Cię do rozpoczęcia własnych przygód z generatywną AI. Odkrywaj ogromne możliwości, twórz innowacyjne aplikacje i przesuwaj granice tego, co można osiągnąć dzięki generatywnej AI.

Poznawanie alternatywnych opcji wdrażania

Genkit oferuje różne opcje wdrażania, które odpowiadają Twoim konkretnym potrzebom, m.in.:

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

npx genkit init

Dalsze kroki