Tworzenie aplikacji internetowych opartych na AI za pomocą rozszerzeń Firebase dla interfejsu Gemini API

1. Zanim zaczniesz

Rozszerzenia Firebase umożliwiają dodawanie do aplikacji gotowych funkcji przy minimalnym użyciu kodu, nawet funkcji opartych na AI. Ten warsztat programistyczny pokazuje, jak zintegrować 2 rozszerzenia Firebase w aplikacji internetowej, aby móc korzystać z interfejsu Gemini API do generowania opisów i streszczenia obrazów, a nawet spersonalizowanych rekomendacji na podstawie podanego kontekstu i danych wejściowych od użytkownika.

Z tego ćwiczenia z programowania dowiesz się, jak tworzyć aplikacje internetowe oparte na AI, które zapewniają użytkownikom atrakcyjne wrażenia dzięki rozszerzeniom Firebase.

Wymagania wstępne

• Znajomość Node.js, Next.js i TypeScript.

Czego się nauczysz

• Jak używać rozszerzeń Firebase dla interfejsu Gemini API do przetwarzania języka.
• Jak użyć Cloud Functions dla Firebase do tworzenia rozszerzonego kontekstu dla modelu językowego.
• Jak za pomocą JavaScript uzyskać dostęp do danych wyjściowych wygenerowanych przez Rozszerzenia w Firebase.

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 aplikacji internetowej, usług Firebase i rozszerzeń

W tej sekcji zapoznasz się z aplikacją internetową, którą utworzysz w ramach tego Codelab, oraz dowiesz się więcej o usługach i rozszerzeniach Firebase, których użyjesz.

Aplikacja internetowa

W tym ćwiczeniu z programowania utworzysz aplikację internetową o nazwie Friendly Conf.

Zespół Friendly Conference zdecydował się wykorzystać AI, aby zapewnić uczestnikom przyjemne i spersonalizowane wrażenia. Ukończona aplikacja na konferencję zawiera konwersacyjnego chatbota AI, który korzysta z wielomodalnego generatywnego modelu AI (zwanego też dużym modelem językowym, LLM). Chatbot może odpowiadać na pytania dotyczące ogólnych tematów, dostosowanych do harmonogramu i tematyki konferencji. Czopbot ma kontekst historyczny i wie, jaka jest aktualna data i godzina oraz jakie są tematy i harmonogram Friendly Conf, więc jego odpowiedzi mogą uwzględniać te informacje.

Usługi Firebase

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

Rozszerzenia w Firebase

W tym CodeLab możesz korzystać z tych rozszerzeń Firebase:

• Tworzenie chatbota za pomocą interfejsu Gemini API
• Multimodal Tasks z interfejsem Gemini API

Rozszerzenia są przydatne, ponieważ reagują na zdarzenia występujące w Twoim projekcie Firebase. Oba rozszerzenia używane w tym samouczku reagują, gdy tworzysz nowe dokumenty w wstępnie skonfigurowanych kolekcjach w Cloud Firestore.

3. Konfigurowanie środowiska programistycznego

Sprawdź wersję Node.js

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

   node -v
   

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

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

Jeśli masz konto GitHub:

1. Utwórz nowe repozytorium, używając szablonu z github.com/FirebaseExtended/codelab-gemini-api-extensions.
2. Sklonuj utworzone właśnie repozytorium GitHub dla tego codelab:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

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

Pobierz repozytorium GitHub jako plik ZIP.

Sprawdź strukturę folderów

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

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

Instalowanie wiersza poleceń Firebase

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

   firebase --version
   

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

   npm update -g firebase-tools
   

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

   npm install -g firebase-tools
   

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

Logowanie w Firebase

1. W terminalu przejdź do folderu codelab-gemini-api-extensions i zaloguj się w Firebase:

   cd codelab-gemini-api-extensions
   firebase login
   

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

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 Firebase 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, używając konta Google.
2. Kliknij Utwórz projekt, a potem wpisz nazwę projektu (np. AI Extensions Codelab).
   Zapamiętaj automatycznie przypisany identyfikator projektu Firebase (lub kliknij ikonę Edytuj, aby ustawić preferowany identyfikator projektu). Ten identyfikator będzie Ci potrzebny później do identyfikacji projektu Firebase w wierszu poleceń Firebase. Jeśli zapomnisz identyfikator, możesz go później znaleźć w Ustawieniach projektu.
3. Kliknij Dalej.
4. Jeśli pojawi się odpowiedni komunikat, zapoznaj się z warunkami korzystania z Firebase i zaakceptuj je, a potem kliknij Dalej.
5. W tym ćwiczeniu nie potrzebujesz Google Analytics, więc wyłącz tę opcję.
6. Kliknij Utwórz projekt, poczekaj na jego wdrożenie, a potem kliknij Dalej.

Przejdź na wyższy abonament Firebase

Aby korzystać z rozszerzeń Firebase (oraz ich podstawowych usług w chmurze) oraz z Cloud Storage dla Firebase, musisz mieć projekt Firebase w abonamentie opłat według wykorzystania (Blaze), co oznacza, że jest on 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 ćwiczenie w ramach wydarzenia, zapytaj organizatora, czy są dostępne jakieś kredyty Cloud.

Pamiętaj też, że jeśli w Twoim projekcie Firebase jest włączone rozliczenie, będziesz obciążany za wywołania, które rozszerzenie wykonuje do interfejsu Gemini API (niezależnie od tego, czy wybierzesz Google AI czy Vertex AI). Dowiedz się więcej o cenach Google AI i Vertex AI.

Aby przenieść projekt na abonament Blaze:

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

Dodawanie aplikacji internetowej do projektu Firebase

1. W projekcie Firebase otwórz ekran Przegląd projektu, a potem kliknij Sieć.
2. W polu tekstowym Nazwa skrótowa aplikacji wpisz zapadającą w pamięć nazwę skrótową aplikacji, np. My AI Extensions.
3. Kliknij Zarejestruj aplikację > Dalej > Dalej > Kontynuuj w konsoli.
   Możesz pominąć wszystkie kroki związane z „hostingiem” w procesie tworzenia aplikacji internetowej, ponieważ opcjonalnie skonfigurujesz usługę hostingu w późniejszej części tego Codelab.

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

Konfigurowanie Uwierzytelniania Firebase

1. W panelu nawigacyjnym po lewej stronie przejdź do sekcji Uwierzytelnianie.
2. Kliknij Rozpocznij.
3. W kolumnie Dodatkowi dostawcy kliknij Google > Włącz.
4. W polu Nazwa projektu widoczna publicznie wpisz przydatną nazwę, np. My AI Extensions Codelab.
5. W menu E-mail do zespołu pomocy dotyczącego projektu wybierz swój adres e-mail.
6. Kliknij Zapisz.

Konfigurowanie Cloud Firestore

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

Konfigurowanie Cloud Storage dla Firebase

1. W panelu po lewej stronie konsoli Firebase rozwiń Kompilacja, a potem kliknij Storage.
2. Kliknij Rozpocznij.
3. Wybierz lokalizację domyślnego zasobnika Storage.
   Zasobniki w regionach US-WEST1, US-CENTRAL1 i US-EAST1 mogą korzystać z poziomu Always Free w Google Cloud Storage. Zasobniki w innych lokalizacjach podlegają cennikom i zasadom korzystania z Google Cloud Storage.
4. Kliknij Rozpocznij w trybie testowym. Przeczytaj wyłączenie odpowiedzialności dotyczące reguł bezpieczeństwa.
   W dalszej części tego Codelab dodasz reguły bezpieczeństwa, które ochronią Twoje dane. Nie udostępniaj ani nie udostępniaj publicznie aplikacji bez dodania reguł bezpieczeństwa dla zasobnika Storage.
5. Kliknij Utwórz.

W następnej sekcji tego Codelab zainstalujesz i skonfigurujesz 2 rozszerzenia Firebase, których użyjesz w aplikacji internetowej w ramach tego Codelab.

5. Konfigurowanie rozszerzenia „Tworzenie chatbota za pomocą Gemini API”

Zainstaluj rozszerzenie „Tworzenie chatbota za pomocą Gemini API”.

1. Przejdź do rozszerzenia „Tworzenie chatbota za pomocą Gemini API”.
2. W konsoli Firebase kliknij Zainstaluj.
3. Wybierz projekt Firebase, a potem kliknij Dalej.
4. W sekcji Przejrzyj włączone interfejsy API i utworzone zasoby kliknij Włącz obok wszystkich sugerowanych usług, a potem kliknij Dalej.
5. W przypadku sugerowanych uprawnień wybierz Przyznaj, a następnie kliknij Dalej.
6. Skonfiguruj rozszerzenie:
   1. W menu Dostawca interfejsu Gemini API wybierz, czy chcesz używać interfejsu Gemini API w Google AI czy Vertex AI. Deweloperom korzystającym z Firebase zalecamy użycie Vertex AI.
   2. W polu tekstowym Ścieżka kolekcji Firestore wpisz: users/{uid}/messages.
      W kolejnych krokach tego Codelab dodawanie dokumentów do tej kolekcji spowoduje wywołanie interfejsu Gemini API przez rozszerzenie.
   3. W menu Lokalizacja Cloud Functions wybierz preferowaną lokalizację (np. Iowa (us-central1) lub lokalizację skonfigurowaną wcześniej dla bazy danych Firestore).
   4. Pozostałe wartości pozostaw domyślne.
7. Kliknij Zainstaluj rozszerzenie i zaczekaj na jego zainstalowanie.

Wypróbuj rozszerzenie „Tworzenie chatbota za pomocą interfejsu Gemini API”

Celem tego Codelab jest interakcja z rozszerzeniem „Tworzenie chatbota za pomocą interfejsu Gemini API” w aplikacji internetowej. Warto jednak najpierw wypróbować to rozszerzenie w konsoli Firebase, aby dowiedzieć się, jak ono działa.

Rozszerzenie jest uruchamiane, gdy w ramach kolekcji users/{uid}/discussion/{discussionId}/messages zostanie utworzony dokument Firestore. Możesz to zrobić w konsoli Firebase.

1. W konsoli Firebase otwórz Firestore, a potem w pierwszej kolumnie kliknij Rozpocznij gromadzenie.
2. W polu tekstowym Identyfikator zbioru wpisz users, a potem kliknij Dalej.
3. W polu tekstowym Document ID (Identyfikator dokumentu) kliknij Auto-ID (Identyfikator automatyczny), a następnie kliknij Zapisz.
4. W kolekcji users kliknij Rozpocznij kolekcję.
5. W polu tekstowym Identyfikator zbioru wpisz messages i kliknij Dalej.
   1. W polu tekstowym Identyfikator dokumentu kliknij AutoID.
   2. W polu Pole wpisz prompt.
   3. W polu tekstowym Wartość wpisz Tell me 5 random fruits.
6. Kliknij Zapisz i zaczekaj kilka sekund.

Dodanie tego dokumentu spowodowało wywołanie interfejsu Gemini API przez rozszerzenie. Dokument, który właśnie dodałeś do kolekcji messages, zawiera teraz nie tylko Twoje dane prompt, ale także dane response modelu, które są potrzebne do odpowiedzi na zapytanie.

Aby ponownie uruchomić rozszerzenie, dodaj kolejny dokument do kolekcji messages:

1. W kolekcji messages kliknij  Dodaj dokument.
2. W polu tekstowym Identyfikator dokumentu kliknij AutoID.
3. W polu Pole wpisz prompt.
4. W polu tekstowym Wartość wpisz And now, vegetables.
5. Kliknij Zapisz i zaczekaj kilka sekund. Dokument, który właśnie dodałeś/dodałaś do kolekcji messages, zawiera teraz odpowiedź response na Twoje zapytanie.
   
   Przy generowaniu tej odpowiedzi model Gemini wykorzystał wiedzę historyczną z poprzedniego zapytania.

6. Konfigurowanie aplikacji internetowej

Aby uruchomić aplikację internetową, musisz uruchomić polecenia w terminalu i dodać kod w edytorze kodu.

Konfigurowanie wiersza poleceń Firebase do uruchamiania w projekcie Firebase

W terminalu powiedz interfejsowi wiersza poleceń, aby używał projektu Firebase. W tym celu uruchom to polecenie:

firebase use YOUR_PROJECT_ID

Wdrażanie reguł zabezpieczeń w Firestore i Cloud Storage

Ten kod źródłowy zawiera już zestaw reguł zabezpieczeń Firestore i reguł zabezpieczeń Cloud Storage. Po wdrożeniu tych reguł zabezpieczeń usługi Firebase w projekcie Firebase są lepiej chronione przed niewłaściwym użyciem.

1. Aby wdrożyć reguły zabezpieczeń, uruchom w terminalu to polecenie:

   firebase deploy --only firestore:rules,storage
   

2. Jeśli pojawi się pytanie, czy chcesz przyznać Cloud Storage rolę uprawnień, aby używać reguł w wielu usługach, wpisz Y lub N. (w tym ćwiczeniu obie opcje są prawidłowe)

Łączenie aplikacji internetowej z projektem Firebase

Kod źródłowy Twojej aplikacji internetowej musi wiedzieć, którego projektu Firebase ma używać do bazy danych, pamięci masowej itp. Aby to określić, dodaj konfigurację Firebase do kodu źródłowego aplikacji.

1. Pobierz konfigurację Firebase:
   1. W konsoli Firebase otwórz Ustawienia projektu w projekcie Firebase.
   2. Przewiń w dół do sekcji Twoje aplikacje i wybierz zarejestrowaną aplikację internetową.
   3. W panelu Konfiguracja i ustawianie pakietu SDK skopiuj cały kod initializeApp, w tym stałą firebaseConfig.
2. Dodaj konfigurację Firebase do kodu źródłowego aplikacji internetowej:
   1. W edytorze kodu otwórz plik src/app/lib/firebase/firebase.config.js.
   2. Zaznacz wszystko w pliku i zastąp 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
   

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.

Korzystanie z chatbota w aplikacji internetowej

1. Wróć w przeglądarce do karty z aplikacją internetową Friendly Conf uruchomioną lokalnie.
2. Kliknij Zaloguj się przez Google i w razie potrzeby wybierz swoje konto Google.
3. Po zalogowaniu się zobaczysz puste okno czatu.
4. Wpisz powitanie (np. hi), a następnie kliknij Wyślij.
5. Zaczekaj kilka sekund, aż chatbot odpowie.

Czatbot w aplikacji odpowiada ogólną odpowiedzią.

Skonfiguruj czatbota pod kątem aplikacji

Aby model generował odpowiedzi dla uczestników korzystających z aplikacji, musisz mieć dostęp do modelu Gemini używanego przez chatbota w aplikacji internetowej, który zawiera szczegóły dotyczące konferencji. Istnieje wiele sposobów na kontrolowanie i kierowanie tymi odpowiedziami. W tym podrozdziale Codelab pokazujemy bardzo podstawowy sposób polegający na podaniu „kontekstu” w pierwszym prompt (zamiast tylko danych wejściowych od użytkownika aplikacji internetowej).

1. W aplikacji internetowej w przeglądarce usuń rozmowę, klikając czerwony przycisk „x” (obok wiadomości w historii czatu).
2. W edytorze kodu otwórz plik src/app/page.tsx.
3. Przewiń w dół i zastąp kod na linii 77 lub w jej pobliżu, w której jest prompt: userMsg, tym kodem:
   prompt: preparePrompt(userMsg, messages),
4. Zapisz plik.
5. Wróć do aplikacji internetowej uruchomionej w przeglądarce.
6. Ponownie wpisz powitanie (np. hi), a potem kliknij Wyślij.
7. Zaczekaj kilka sekund, aż chatbot odpowie.

Chatbot odpowiada, korzystając z wiedzy opartej na kontekście podanym w src/app/lib/context.md. Mimo że nie wpiszesz konkretnego zapytania, model Gemini wygeneruje spersonalizowaną rekomendację na podstawie tego kontekstu oraz bieżącej daty i godziny. Możesz teraz określić pytania uzupełniające i uzyskać więcej informacji.

Rozwinięty kontekst jest ważny dla chatbota, ale nie powinien być widoczny dla użytkownika aplikacji internetowej. Oto, jak go ukryć:

1. W edytorze kodu otwórz plik src/app/page.tsx.
2. Przewiń w dół i zastąp kod na linii 56 lub w jej pobliżu, gdzie jest napis ...doc.data(),, tym kodem:
   ...prepareMessage(doc.data()),
3. Zapisz plik.
4. Wróć do aplikacji internetowej uruchomionej w przeglądarce.
5. Odśwież stronę.

Możesz też wypróbować rozmowę z czatbotem z uwzględnieniem kontekstu historycznego:

1. W polu tekstowym Wpisz wiadomość zadaj pytanie, np.: Any other interesting talks about AI?Bot odpowie na Twoje pytanie.
2. W polu tekstowym Wpisz wiadomość zadaj dodatkowe pytanie związane z poprzednim pytaniem: Give me a few more details about the last one.

Chatbot odpowiada, korzystając z danych historycznych. Historia czatu jest teraz częścią kontekstu, więc chatbot rozumie pytania uzupełniające.

Bonus: uruchamianie aplikacji internetowej za pomocą Pakietu emulatorów lokalnych Firebase

Pakiet emulatorów lokalnych Firebase umożliwia testowanie lokalnie większości funkcji aplikacji internetowej.

1. W terminalu sprawdź, czy znajdujesz się w katalogu głównym aplikacji internetowej.
2. Aby zainstalować i uruchomić Pakiet emulatorów lokalnych Firebase, uruchom to polecenie:

   firebase init emulators
   firebase emulators:start
   

7. Konfigurowanie rozszerzenia „Multimodal Tasks with the Gemini API”

Rozszerzenie „Multimodal Tasks with the Gemini API” wywołuje interfejs Gemini API za pomocą promptów multimodalnych, które zawierają prompt tekstowy oraz obsługiwany URL pliku lub URL Cloud Storage (pamiętaj, że nawet interfejs Google AI Gemini API używa adresu URL Cloud Storage jako podstawowej infrastruktury adresów URL plików). Rozszerzenie obsługuje też zmienne w nawiasach klamrowych, które zastępują wartości z dokumentu Cloud Firestore i służą do dostosowywania promptu tekstowego.

W aplikacji, gdy tylko prześlesz obraz do zasobnika Cloud Storage, możesz wygenerować adres URL i dodać go do nowego dokumentu Cloud Firestore. W ten sposób wywołasz rozszerzenie, aby utworzyć prompt multimodalny i wywołać interfejs Gemini API. W kodzie źródłowym tego CodeLab znajdziesz już kod przesyłania obrazu i zapisywania adresu URL w dokumencie Firestore.

Zainstaluj rozszerzenie „Multimodal Tasks with the Gemini API”

1. Przejdź do rozszerzenia „Multimodal Tasks with the Gemini API”.
2. W konsoli Firebase kliknij Zainstaluj.
3. Wybierz projekt Firebase.
4. Klikaj Dalej > Dalej > Dalej, aż dojdziesz do sekcji Konfigurowanie rozszerzenia.
   1. W menu Dostawca interfejsu Gemini API wybierz, czy chcesz używać interfejsu Gemini API w Google AI czy Vertex AI. Deweloperom korzystającym z Firebase zalecamy użycie Vertex AI.
   2. W polu Ścieżka kolekcji Firestore wpisz: gallery.
   3. W polu tekstowym Prompt wpisz: Please describe the provided image; if there is no image, say "no image".
   4. W polu tekstowym Pole obrazu wpisz: image.
   5. W menu Lokalizacja Cloud Functions wybierz preferowaną lokalizację (np. Iowa (us-central1) lub lokalizację skonfigurowaną wcześniej dla bazy danych Firestore).
   6. Pozostałe wartości pozostaw domyślne.
5. Kliknij Zainstaluj rozszerzenie i zaczekaj na jego zainstalowanie.

Wypróbuj rozszerzenie „Multimodal Tasks with the Gemini API”

Celem tego modułu praktycznego jest interakcja z rozszerzeniem „Multimodal Tasks with the Gemini API” w aplikacji internetowej, ale warto najpierw wypróbować to rozszerzenie w konsoli Firebase.

Rozszerzenie jest uruchamiane, gdy w ramach kolekcji users/{uid}/gallery zostanie utworzony dokument Firestore. Możesz to zrobić w konsoli Firebase. Następnie rozszerzenie pobiera adres URL obrazu Cloud Storage z dokumentu Cloud Firestore i przekazuje go jako część promptu multimodalnego w wywołaniu interfejsu Gemini API.

Najpierw prześlij obraz do zasobnika Cloud Storage:

1. W projekcie Firebase przejdź do sekcji Pamięć.
2. Kliknij Utwórz folder.
3. W polu Nazwa folderu wpisz gallery.
4. Kliknij Dodaj folder.
5. W folderze gallery kliknij Prześlij plik.
6. Wybierz plik obrazu JPEG do przesłania.

Następnie dodaj adres URL obrazu w Cloud Storage do dokumentu Firestore (który jest aktywatorem rozszerzenia):

1. W projekcie Firebase otwórz Firestore.
2. W pierwszej kolumnie kliknij Rozpocznij kolekcję.
3. W polu tekstowym Identyfikator zbioru wpisz: gallery, a potem kliknij Dalej.
4. Dodawanie dokumentu do kolekcji:
   1. W polu tekstowym Identyfikator dokumentu kliknij AutoID.
   2. W polu Pole wpisz: image. W polu Wartość wpisz adres URI lokalizacji w Storage obrazu, który został właśnie przesłany.
5. Kliknij Dodaj pole.
6. W polu Pole wpisz: published. W polu Type (Typ) wybierz boolean (Boolean). W polu Wartość kliknij true.
7. Kliknij Zapisz i zaczekaj kilka sekund.

Kolekcja gallery zawiera teraz dokument z odpowiedzią na Twoje zapytanie.

Korzystanie z galerii obrazów aplikacji internetowej

1. Wróć w przeglądarce do karty z aplikacją internetową Friendly Conf uruchomioną lokalnie.
2. Kliknij kartę nawigacyjną Galeria.
3. Zobaczysz galerię przesłanych obrazów i opisów wygenerowanych przez AI. Powinien on zawierać obraz przesłany wcześniej do folderu gallery w zasobniku Storage.
4. Kliknij przycisk „Prześlij” i wybierz inny obraz JPEG.
5. Zaczekaj kilka sekund, aż obraz pojawi się w galerii. Po chwili wyświetli się opis wygenerowany przez AI na podstawie nowo przesłanego obrazu.

Aby dowiedzieć się, jak to zostało zaimplementowane, sprawdź kod src/app/gallery/page.tsx w źródle kodu aplikacji internetowej.

8. Bonus: wdrożenie aplikacji

Firebase oferuje kilka sposobów wdrażania aplikacji internetowej. W tym ćwiczeniu wybierz jedną z tych opcji:

• Opcja 1. Hosting Firebase – użyj tej opcji, jeśli zdecydujesz się nie tworzyć własnego repozytorium GitHub (i mieć tylko kod źródłowy przechowywany lokalnie na komputerze).
• Opcja 2: Hosting aplikacji Firebase – użyj tej opcji, jeśli chcesz automatycznie wdrażać zmiany za każdym razem, gdy prześlesz zmiany do własnego repozytorium GitHub. Ta nowa usługa Firebase została stworzona specjalnie z myślą o potrzebach dynamicznych aplikacji Next.js i Angular.

Opcja 1. Wdróż za pomocą Hostingu Firebase

Użyj tej opcji, jeśli zdecydujesz się nie tworzyć własnego repozytorium na GitHubie (i mieć tylko kod źródłowy zapisany lokalnie na komputerze).

1. W terminalu zainicjuj Hosting Firebase, uruchamiając te polecenia:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. W przypadku prompta Detected an existing Next.js codebase in your current directory, should we use this? naciśnij Y.
3. W przypadku prompta: In which region would you like to host server-side content, if applicable? wybierz lokalizację domyślną lub lokalizację użytą wcześniej w tym ćwiczeniu z programowania. Następnie naciśnij Enter (lub return w systemie macOS).
4. W przypadku prompta Set up automatic builds and deploys with GitHub? naciśnij N.
5. Wdróż aplikację internetową do Hostingu, uruchamiając to polecenie:

   firebase deploy --only hosting
   

To już wszystko. Jeśli zaktualizujesz aplikację i chcesz wdrożyć nową wersję, po prostu ponownie uruchom firebase deploy --only hosting, a Hosting Firebase skompiluje i ponownie wdroży aplikację.

Opcja 2. Wdróż za pomocą Firebase App Hosting

Użyj tej opcji, jeśli chcesz automatycznie wdrażać zmiany za każdym razem, gdy prześlesz je do własnego repozytorium GitHub.

1. Zatwierdź zmiany w GitHubie.
2. W konsoli Firebase otwórz Hosting aplikacji w projekcie Firebase.
3. Kliknij Rozpocznij > Połącz z GitHubem.
4. Wybierz konto GitHub i repozytorium. Kliknij Dalej.
5. W sekcji Ustawienia wdrożenia > Katalog główny wpisz nazwę folderu ze źródłowym kodem (jeśli package.json nie znajduje się w katalogu głównym repozytorium).
6. W przypadku gałęzi na żywo wybierz gałąź główną swojego repozytorium GitHub. Kliknij Dalej.
7. Wpisz identyfikator backendu (np. chatbot).
8. Kliknij Zakończ i wdróż.

Przygotowanie nowego wdrożenia może potrwać kilka minut. Stan wdrożenia możesz sprawdzić w sekcji Hosting aplikacji w konsoli Firebase.

Od tej pory za każdym razem, gdy wypchniesz zmianę do repozytorium GitHub, Firebase App Hosting automatycznie skompiluje i wdroży Twoją aplikację.

9. Podsumowanie

Gratulacje! W tym ćwiczeniu udało Ci się osiągnąć wiele.

Instalowanie i konfigurowanie rozszerzeń

W konsoli Firebase skonfigurujesz i zainstalujesz różne rozszerzenia Firebase korzystające z generatywnej AI. Korzystanie z rozszerzeń Firebase jest wygodne, ponieważ nie musisz poznawać ani pisać wielu statycznych fragmentów kodu, aby obsłużyć uwierzytelnianie za pomocą usług Google Cloud lub logiki backendu Cloud Functions, aby odbierać dane i interagować się z usługami i interfejsami API Firestore oraz Google Cloud.

testowanie rozszerzeń w konsoli Firebase,

Zamiast od razu zająć się kodem, poświęciłeś/poświęciłaś czas na zrozumienie, jak działają te rozszerzenia genAI na podstawie danych wejściowych dostarczonych przez Ciebie za pomocą Firestore lub Cloud Storage. Może to być szczególnie przydatne podczas debugowania danych wyjściowych rozszerzenia.

Tworzenie aplikacji internetowej opartej na AI

Utworzyłeś/-aś aplikację internetową opartą na AI, która korzysta z rozszerzeń Firebase, aby uzyskać dostęp do kilku funkcji modelu Gemini.

W aplikacji internetowej używasz rozszerzenia „Chatbot with Gemini API”, aby zapewnić użytkownikowi interaktywny interfejs czatu, który zawiera kontekst związany z aplikacją i z poprzednimi rozmowami. Każda wiadomość jest przechowywana w dokumencie Firestore, który jest ograniczony do konkretnego użytkownika.

Aplikacja internetowa używała też rozszerzenia „Multimodal Tasks with the Gemini API” do automatycznego generowania opisów obrazów dla przesłanych obrazów.

Dalsze kroki

• Eksperymentuj z promptami i korzystaj z dużego okna kontekstowego w Google AI Studio lub Vertex AI Studio.
• Dowiedz się więcej o generowaniu rozszerzonym przez wyszukiwanie w zapisanych informacjach (RAG) z wykorzystaniem AI.
• Wypróbuj samouczający się kurs Codelab, który pokazuje, jak dodać chatbota do istniejącej aplikacji Firebase za pomocą Firebase Genkit (nowej usługi dotyczącej frameworka AI).
• Dowiedz się więcej o funkcjach wyszukiwania podobieństw w Firestore i Cloud SQL for PostgreSQL.
• Naucz chatbota wywoływać istniejącą aplikację za pomocą wywołania funkcji.