Tworzenie aplikacji internetowych opartych na AI z rozszerzeniami w Firebase

1. Zanim zaczniesz

Z tego ćwiczenia w Codelabs dowiesz się, jak tworzyć oparte na AI aplikacje internetowe, które będą zapewniać użytkownikom atrakcyjne wrażenia dzięki rozszerzeniom do Firebase.

Wymagania wstępne

• Wiedza z zakresu Node.js i JavaScriptu

Czego się nauczysz

• Jak używać rozszerzeń związanych z AI do przetwarzania języka i danych wejściowych wideo.
• Jak używać Cloud Functions dla Firebase do tworzenia potoku między rozszerzeniami.
• Jak używać JavaScriptu do uzyskiwania dostępu do danych wyjściowych generowanych przez rozszerzenia.

Czego potrzebujesz

• wybraną przeglądarkę, na przykład Google Chrome;
• Środowisko programistyczne z edytorem kodu i terminalem
• Konto Google do tworzenia projektu Firebase i zarządzania nim

2. Przejrzyj aplikacje internetowe i ich usługi Firebase

W tej sekcji opisujemy aplikacje internetowe, które utworzysz w ramach tego ćwiczenia z programowania, oraz dowiesz się, za pomocą których danych Firebase będziesz je tworzyć.

Aplikacja Reviewly

Firma sprzedająca koszulki jest przytłoczona długimi opiniami na temat jednej z jej koszulek i nie ma pewności, jaka jest jej ogólna ocena. Ukończona aplikacja internetowa Reviewly podsumowuje każdą opinię, podaje przy każdej opinii liczbę gwiazdek i wykorzystuje ją do określenia ogólnej oceny produktu. Użytkownicy mogą też rozwinąć każdą podsumowaną opinię, aby wyświetlić oryginalną opinię.

Aplikacja Chatbot

Nauczyciel w szkole jest przytłoczony powtarzającymi się pytaniami na tematy ogólne, dlatego chce zautomatyzować odpowiedzi. Ukończona aplikacja Chatbot udostępnia uczniom czatbota konwersacyjnego, który korzysta z dużego modelu językowego (LLM) i może odpowiadać na pytania ogólne. Czatbot ma kontekst historyczny, więc jego odpowiedzi mogą uwzględniać wcześniejsze pytania zadane przez uczniów podczas tej samej rozmowy.

Aplikacja Video Hint

Departament rządowy chce, aby w swoich filmach udostępniało audiodeskrypcje, aby zwiększyć dostępność, ale ma setki filmów, na które trzeba opatrzeć adnotacje, i potrzebuje uproszczonego podejścia. Wypełniona aplikacja Wskazówki dotyczące filmów jest prototypem, który zostanie sprawdzony przez działu w celu oceny jej skuteczności.

Oto rozszerzenia używane w aplikacji Wskazówki dotyczące filmów:

• Etykieta filmów za pomocą Cloud Video AI – wyodrębnij etykiety z każdego filmu przesłanego do Cloud Storage.
• Rozszerzenie Language Tasks with PaLM API – podsumowuje etykiety w formie opisu tekstowego.
• Rozszerzenie Konwertuj tekst na mowę – pozwala utworzyć wersję audio opisu filmu.

3. Konfigurowanie środowiska programistycznego

Sprawdzanie wersji Node.js

1. Sprawdź w terminalu, czy masz zainstalowane środowisko Node.js w wersji 20.0.0 lub nowszej:

   node -v
   

2. Jeśli nie masz środowiska Node.js w wersji 20.0.0 lub nowszej, pobierz go i zainstaluj.

Pobieranie repozytorium

1. Jeśli masz zainstalowany git, skopiuj znajdujące się na GitHubie repozytorium ćwiczenia z programowania:

   git clone https://github.com/FirebaseExtended/ai-extensions-codelab.git
   

2. Jeśli nie masz zainstalowanego narzędzia git, pobierz repozytorium GitHub jako plik ZIP.

Sprawdzanie struktury folderów

Na komputerze lokalnym znajdź sklonowane repozytorium i sprawdź strukturę folderów. Poniższa tabela zawiera foldery i ich opisy:

Każdy folder zawiera plik readme.md, który umożliwia szybkie uruchomienie odpowiedniej aplikacji internetowej w prostych instrukcjach. Jeśli jednak dopiero uczysz się tego robić po raz pierwszy, zalecamy ukończenie tego ćwiczenia z programowania, ponieważ zawiera ono najbogatszy zestaw instrukcji.

Jeśli nie masz pewności, czy kod został prawidłowo zastosowany zgodnie z instrukcjami w tym ćwiczeniu, kod rozwiązania odpowiedniej aplikacji znajdziesz w folderach reviewly-end, chatbot-end i video-hint-end.

Instalowanie interfejsu wiersza poleceń Firebase

Uruchom poniższe polecenie, aby sprawdzić, czy masz zainstalowany interfejs wiersza poleceń Firebase i czy jest to wersja 12.5.4 lub nowsza:

firebase --version

• Jeśli masz zainstalowany interfejs wiersza poleceń Firebase w wersji 12.5.4 lub nowszej, ale nie jest w wersji 12.5.4 lub nowszej, zaktualizuj ją:

  npm update -g firebase-tools
  

• Jeśli nie masz zainstalowanego interfejsu wiersza poleceń Firebase, zainstaluj go:

  npm install -g firebase-tools
  

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

Zaloguj się w Firebase

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

   cd ai-extensions-codelab
   firebase login
   

2. Jeśli terminal informuje, że jesteś już zalogowany(-a) w Firebase, przejdź do sekcji Konfigurowanie projektu Firebase w tym ćwiczeniu z programowania.
3. W zależności od tego, czy chcesz, aby Firebase gromadził dane, wpisz Y czy N.
4. W przeglądarce wybierz swoje konto Google, a następnie kliknij Zezwól.

4. Skonfiguruj projekt Firebase

W tej sekcji skonfigurujesz projekt Firebase i powiążesz z nim aplikację internetową Firebase. Włączysz też usługi Firebase używane przez przykładowe aplikacje internetowe.

Tworzenie projektu Firebase

1. W konsoli Firebase kliknij Utwórz projekt.
2. W polu tekstowym Wpisz nazwę projektu wpisz AI Extensions Codelab (lub inną nazwę projektu), a potem kliknij Dalej.
3. Ćwiczenia z programowania nie wymagają Google Analytics, więc wyłącz opcję Włącz Google Analytics dla tego projektu.
4. Kliknij Utwórz projekt.
5. Poczekaj na udostępnienie projektu, a potem kliknij Dalej.
6. W projekcie Firebase otwórz Ustawienia projektu. Zapisz identyfikator projektu, ponieważ będzie on potrzebny później. Ten unikalny identyfikator służy do identyfikowania projektu (np. w interfejsie wiersza poleceń Firebase).

Pobieranie konta usługi Firebase

Niektóre aplikacje internetowe, które utworzysz w ramach tego ćwiczenia z programowania, korzystają z renderowania po stronie serwera za pomocą biblioteki Next.js.

Do zapewnienia działania reguł zabezpieczeń z poziomu kodu po stronie serwera używany jest pakiet SDK Firebase Admin dla Node.js. Aby korzystać z interfejsów API w panelu administracyjnym Firebase, musisz pobrać konto usługi Firebase z konsoli Firebase.

1. W konsoli Firebase w ustawieniach projektu otwórz stronę Konta usługi.
2. Kliknij Wygeneruj nowy klucz prywatny > Wygeneruj klucz.
3. Gdy plik zostanie pobrany do systemu plików, pobierz pełną ścieżkę do niego.
   Jeśli na przykład plik został pobrany do folderu Pobrane, pełna ścieżka może wyglądać tak: /Users/me/Downloads/my-project-id-firebase-adminsdk-123.json
4. W terminalu ustaw zmienną środowiskową GOOGLE_APPLICATION_CREDENTIALS na ścieżkę pobranego klucza prywatnego. W środowisku Unix polecenie może wyglądać tak:

   export GOOGLE_APPLICATION_CREDENTIALS="/Users/me/Downloads/my-project-id-firebase-adminsdk-123.json"
   

5. Nie zamykaj terminala i używaj go do końca tego ćwiczenia z programowania, ponieważ uruchomienie nowej sesji terminala spowoduje utratę zmiennej środowiskowej.
   Jeśli otworzysz nową sesję terminala, musisz ponownie uruchomić poprzednie polecenie.

Uaktualnij abonament Firebase

Jeśli chcesz korzystać z funkcji w Cloud Functions i rozszerzeń do Firebase, Twój projekt Firebase musi być objęty abonamentem Blaze, co oznacza, że jest powiązany z kontem rozliczeniowym Cloud.

• Do konta rozliczeniowego Cloud wymagana jest forma płatności, np. karta kredytowa.
• Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do otrzymania środków w wysokości 300 USD i bezpłatnego okresu próbnego konta rozliczeniowego Cloud.

Pamiętaj jednak, że wykonanie tych ćwiczeń nie powinno wiązać się z żadnymi rzeczywistymi opłatami.

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

1. W konsoli Firebase wybierz Przejdź na większy pakiet.
2. W oknie wybierz abonament Blaze i postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby powiązać projekt z kontem rozliczeniowym Cloud.
   Jeśli konieczne jest utworzenie konta rozliczeniowego Cloud, może być konieczne powrót do procesu uaktualniania w konsoli Firebase.

Konfigurowanie usług Firebase w konsoli Firebase

W tej sekcji wdrożysz i skonfigurujesz kilka usług Firebase używanych przez aplikacje internetowe w ramach tego ćwiczenia z programowania. Pamiętaj, że nie wszystkie z tych usług są używane w poszczególnych aplikacjach internetowych, ale skonfigurowanie tych usług od razu jest wygodne, jeśli chcesz skorzystać z tego ćwiczenia.

Skonfiguruj uwierzytelnianie

Z Uwierzytelnienia będziesz korzystać zarówno w aplikacji Chatbot, jak i w aplikacji Video Hint. Pamiętaj jednak, że jeśli tworzysz prawdziwą aplikację, każda aplikacja powinna mieć własny projekt Firebase.

1. W konsoli Firebase otwórz Uwierzytelnianie.
2. Kliknij Rozpocznij.
3. W kolumnie Dodatkowi dostawcy kliknij Google > Włącz.

4. W polu tekstowym Publiczna nazwa projektu wpisz łatwą do zapamiętania nazwę, na przykład My AI Extensions Codelab.
5. Z listy Adres e-mail pomocy dla projektu wybierz swój adres e-mail.
6. Kliknij Zapisz.
   

Konfigurowanie Cloud Firestore

Będziesz używać Firestore we wszystkich 3 aplikacjach. Pamiętaj jednak, że jeśli tworzysz prawdziwą aplikację, każda aplikacja powinna mieć własny projekt Firebase.

1. W konsoli Firebase otwórz Firestore.
2. Kliknij Utwórz bazę danych > Uruchom w trybie testowym > Dalej.
   W dalszej części tego ćwiczenia z programowania dodasz reguły zabezpieczeń, aby zabezpieczyć swoje dane. Nie udostępniaj ani nie udostępniaj aplikacji publicznie bez dodawania reguł zabezpieczeń do bazy danych.
3. Użyj lokalizacji domyślnej lub wybierz lokalizację.
   W przypadku prawdziwej aplikacji wybierz lokalizację znajdującą się w pobliżu użytkowników. Pamiętaj, że tej lokalizacji nie można później zmienić. Będzie to również automatycznie lokalizacja domyślnego zasobnika Cloud Storage (następny krok).
4. Kliknij Gotowe.

Konfigurowanie Cloud Storage dla Firebase

Użyjesz Cloud Storage z aplikacją Video Hint i wypróbujesz rozszerzenie Konwertuj tekst na mowę (następny krok ćwiczenia z programowania).

1. W konsoli Firebase otwórz Miejsce na dane.
2. Kliknij Rozpocznij > Uruchom w trybie testowym > Dalej.
   W dalszej części tego ćwiczenia z programowania dodasz reguły zabezpieczeń, aby zabezpieczyć swoje dane. Nie rozpowszechniaj ani nie udostępniaj aplikacji publicznie bez dodawania reguł zabezpieczeń do zasobnika na dane.
3. Lokalizacja zasobnika powinna już być wybrana (ze względu na konfigurowanie Firestore w poprzednim kroku).
4. Kliknij Gotowe.

W kolejnych sekcjach tego ćwiczenia z programowania zainstalujesz rozszerzenia i zmodyfikujesz bazy kodu każdej przykładowej aplikacji w ramach tego ćwiczenia, aby zacząć działać 3 różne aplikacje internetowe.

5. Konfigurowanie „Zadania języka w interfejsie PaLM API” dla Aplikacja Reviewly

Instalowanie rozszerzenia Language Tasks with PaLM API.

1. Przejdź do rozszerzenia Language Tasks with PaLM API.
2. Kliknij Zainstaluj w konsoli Firebase.
3. Wybierz projekt Firebase.
4. W sekcji Sprawdź włączone interfejsy API i utworzone zasoby kliknij Włącz obok wybranych usług:

5. Kliknij Dalej > Dalej.
6. W polu tekstowym Ścieżka do kolekcji wpisz bot.
7. W polu tekstowym Prompt wpisz {{ input }}.
8. W polu tekstowym Pola zmiennych wpisz input.
9. W polu Odpowiedź wpisz text.
10. Z menu Lokalizacja Cloud Functions wybierz Iowa (us-central1) lub lokalizację wybraną wcześniej dla Firestore i Cloud Storage.
11. Z menu Model językowy wybierz text-bison-001.
12. Wszystkie pozostałe wartości pozostaw domyślne.
13. Kliknij Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj rozszerzenie Language Tasks with PaLM API.

Celem tych ćwiczeń w Codelabs jest interakcja z rozszerzeniem Language Tasks with PaLM API za pomocą aplikacji internetowej. Warto jednak zapoznać się z jego działaniem, uruchamiając je za pomocą konsoli Firebase. Rozszerzenie jest wyzwalane, gdy dokument Cloud Firestore zostanie dodany do kolekcji bot.

Aby sprawdzić, jak działa rozszerzenie, używając konsoli Firebase:

1. W konsoli Firebase otwórz Firestore.
2. W kolekcji bot kliknij Dodaj dokument.
3. W polu tekstowym Identyfikator dokumentu kliknij Automatyczny identyfikator.
4. W polu tekstowym Pole wpisz input.
5. W polu tekstowym Wartość wpisz Tell me about the moon.
6. Kliknij Zapisz i zaczekaj kilka sekund. Twój dokument w kolekcji bot zawiera teraz odpowiedź na Twoje zapytanie.

6. Konfigurowanie aplikacji Reviewly pod kątem korzystania z Firebase

Aby uruchomić aplikację Reviewly, musisz skonfigurować jej kod i interfejs wiersza poleceń Firebase, aby umożliwić interakcję z projektem Firebase.

Dodaj usługi i konfigurację Firebase do kodu aplikacji

Aby można było korzystać z Firebase, baza kodu Twojej aplikacji wymaga pakietów SDK Firebase dla usług, których chcesz używać, oraz konfiguracji Firebase, która informuje te pakiety SDK, których projektów Firebase mają używać.

Ta przykładowa aplikacja z programowania zawiera już cały niezbędny kod do importowania i inicjowania pakietów SDK (patrz reviewly-start/js/reviews.js), więc nie musisz ich dodawać. Przykładowa aplikacja zawiera jednak tylko wartości obiektów zastępczych konfiguracji Firebase (patrz reviewly-start/js/firebase-config.js), dlatego musisz zarejestrować aplikację w projekcie Firebase, aby uzyskać unikalne wartości konfiguracyjne Firebase dla swojej aplikacji.

1. W konsoli Firebase, w projekcie Firebase, otwórz Przegląd projektu i kliknij Sieć.
   
2. W polu tekstowym Pseudonim aplikacji wpisz zapadający w pamięć pseudonim aplikacji, np. My Reviewly app.
3. Nie zaznaczaj pola Skonfiguruj też Hosting Firebase dla tej aplikacji. Te kroki wykonasz w dalszej części ćwiczeń z programowania.
4. Kliknij Zarejestruj aplikację.
5. W konsoli wyświetla się fragment kodu służący do dodania i zainicjowania pakietu SDK Firebase za pomocą obiektu konfiguracji Firebase związanego z konkretną aplikacją. Skopiuj wszystkie właściwości obiektu konfiguracji Firebase.
6. Otwórz plik reviewly-start/js/firebase-config.js w edytorze kodu.
7. Zastąp wartości obiektów zastępczych wartościami, które zostały właśnie skopiowane. Możesz mieć właściwości i wartości dla usług Firebase, których nie używasz w aplikacji Reviewly.
8. Zapisz plik.
9. Wróć do konsoli Firebase i kliknij Przejdź do konsoli.

Skonfiguruj terminal, aby uruchamiać polecenia interfejsu wiersza poleceń Firebase w projekcie Firebase

1. W terminalu przejdź do pobranego wcześniej folderu ai-extensions-codelab.
2. Przejdź do folderu aplikacji internetowej reviewly-start:

   cd reviewly-start
   

3. Skonfiguruj interfejs wiersza poleceń Firebase, aby uruchamiać polecenia w konkretnym projekcie Firebase:

   firebase use YOUR_PROJECT_ID
   

Uruchamianie i wyświetlanie aplikacji internetowej Reviewly

Aby uruchomić i wyświetlić aplikację internetową, wykonaj te czynności:

1. W terminalu zainstaluj zależności, a potem uruchom aplikację internetową:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   npm run dev
   

2. W przeglądarce przejdź do adresu URL wyświetlonego w terminalu. Na przykład: http://localhost:8080.

Strona powinna się wczytać, ale brakuje niektórych funkcji. Dodamy je w kolejnych krokach tego ćwiczenia z programowania.

7. Dodaj nową funkcję do Aplikacja Reviewly

W ostatnim kroku tego ćwiczenia z programowania uruchomiono lokalnie aplikację Reviewly, ale nie miała ona zbyt wielu funkcji i nie zostało jeszcze użyte zainstalowane rozszerzenie. W tym kroku ćwiczenia w Codelabs dodasz tę funkcję i użyjesz aplikacji internetowej do aktywowania rozszerzenia.

Wdrażanie reguł zabezpieczeń

Ta przykładowa aplikacja z ćwiczeniami w Codelabs zawiera zestawy reguł zabezpieczeń dla Firestore oraz Cloud Storage dla Firebase. Po wdrożeniu tych reguł zabezpieczeń w projekcie Firebase dane w bazie danych i zasobniku są lepiej chronione przed niewłaściwym wykorzystaniem.

Możesz wyświetlić te reguły w plikach firestore.rules i storage.rules.

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

   firebase deploy --only firestore:rules,storage
   

2. Jeśli pojawi się pytanie: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", wybierz Tak.

Zaktualizuj kod aplikacji, aby wyzwalać rozszerzenie

W aplikacji Reviewly nowa opinia dodana do Firestore aktywuje rozszerzenie z podsumowaniem opinii.

1. Otwórz plik functions/add-mock-reviews.js w edytorze kodu.
2. Zastąp zmienną reviewWithPrompt tym kodem, co spowoduje przesłanie do modelu języka krótszego sprawdzenia.

   const reviewWithPrompt = `Here's a user supplied review. Give me a shorter summary of the review, and a rating out of 5, and a flag which indicates if there was a product defect.
   
   Product name: "Blue t-shirt with cat picture". Review: """${review}"""
   
   Craft your response as JSON with properties has_defect, summary and rating. Don't include any extra text.`;
   

3. Po zmiennej reviewWithPrompt zastąp zmienną reviewDocument poniższym kodem. Spowoduje to utworzenie dokumentu recenzji, który będzie można dodać do Firestore.

   const reviewDocument = {
           input: reviewWithPrompt,
           originalReview: review,
           timestamp: Timestamp.now(),
   };
   
   getFirestore().collection(DB_COLLECTION_NAME).add(reviewDocument);
   

4. Zapisz plik.
5. W pliku js/reviews.js, po komentarzu Insert code below, to import your Firebase Callable Cloud Function, zaimportuj wywoływaną przez HTTP funkcję Firebase za pomocą pomocnika httpsCallable:

   const addMockReviews = httpsCallable(functions, "addMockReviews");
   

6. Po komentarzu Insert code below, to invoke your Firebase Callable Cloud Function wywołaj wywoływaną przez HTTP funkcję Firebase:

   await addMockReviews();
   

7. Zapisz plik.

Wdrażanie funkcji w celu dodawania nowych opinii

Aplikacja internetowa Reviewly wykorzystuje funkcję w Cloud Functions do dodawania opinii. Obecnie jednak ta funkcja w Cloud Functions nie jest wdrożona.

Aby wdrożyć funkcję za pomocą interfejsu wiersza poleceń Firebase, wykonaj te czynności:

1. W terminalu, pozostając w folderze reviewly-start, naciśnij Control+C, aby zatrzymać serwer.
2. Wdróż funkcję:

   firebase deploy --only functions
   

3. Jeśli zobaczysz błąd Permission denied while using the Eventarc Service Agent lub podobny, odczekaj kilka minut i spróbuj jeszcze raz.

Właśnie udało Ci się wdrożyć swoją pierwszą funkcję niestandardową za pomocą Cloud Functions. Konsola Firebase udostępnia panel, w którym możesz zobaczyć wszystkie funkcje wdrożone w projekcie Firebase.

Ponownie uruchom i wyświetl aplikację internetową Reviewly (z funkcjami).

Aby uruchomić i wyświetlić działającą już aplikację internetową, wykonaj te czynności:

1. Ponownie uruchom serwer w terminalu:

   npm run dev
   

2. W przeglądarce przejdź do adresu URL wyświetlonego w terminalu. Na przykład: http://localhost:8080.
3. W aplikacji kliknij Dodaj przykładowe opinie i zaczekaj kilka sekund, aż pojawi się kilka długich opinii.
   W tle rozszerzenie Language Tasks with PaLM API reaguje na nowy dokument reprezentujący nową opinię. Dodany wcześniej prompt żąda krótszego podsumowania od modelu językowego.
4. Aby wyświetlić całą opinię oraz prompt użyty do jej utworzenia, kliknij jedną z opinii i wybierz Pokaż prompt PaLM.

8. Konfigurowanie „Chatbota z PaLM API” dla Aplikacja czatbot

Instalowanie rozszerzenia Chatbot z interfejsem PaLM API.

1. Otwórz rozszerzenie Chatbot with PaLM API.
2. Kliknij Zainstaluj w konsoli Firebase.
3. Wybierz projekt Firebase.
4. Kliknij Dalej > Dalej > Następnie aż do sekcji Skonfiguruj rozszerzenie.
5. W polu tekstowym Ścieżka do kolekcji wpisz users/{uid}/discussion/{discussionId}/messages.
6. Z menu Lokalizacja Cloud Functions wybierz Iowa (us-central1) lub lokalizację wybraną wcześniej dla Firestore i Cloud Storage.
7. Z menu Model językowy wybierz chat-bison.
8. Wszystkie pozostałe wartości pozostaw domyślne.
9. Kliknij Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj rozszerzenie Chatbot z PaLM API.

Celem tych ćwiczeń w Codelabs jest interakcja z rozszerzeniem Chatbot with PaLM API z aplikacji internetowej. Warto jednak zrozumieć, jak działa ono po aktywowaniu go za pomocą konsoli Firebase. Rozszerzenie jest wyzwalane, gdy dokument Cloud Firestore zostanie utworzony w kolekcji users/{uid}/discussion/{discussionId}/messages.

1. W konsoli Firebase otwórz Firestore.
2. Kliknij Rozpocznij kolekcję.
   1. W polu tekstowym Identyfikator kolekcji wpisz users i kliknij Dalej.
   2. W polu tekstowym Identyfikator dokumentu kliknij Automatyczne ID, a następnie kliknij Zapisz.
3. W kolekcji users kliknij Rozpocznij kolekcję.
   
   1. W polu tekstowym Identyfikator kolekcji wpisz discussion i kliknij Dalej.
   2. W polu tekstowym Identyfikator dokumentu kliknij Automatyczne ID, a następnie kliknij Zapisz.
4. W kolekcji discussion kliknij Rozpocznij kolekcję.
   
   1. W polu tekstowym Identyfikator kolekcji wpisz messages i kliknij Dalej.
   2. W polu tekstowym Identyfikator dokumentu kliknij Automatyczny identyfikator.
   3. W polu tekstowym Pole wpisz prompt.
   4. W polu tekstowym Wartość wpisz Tell me 5 random fruits.
   5. Kliknij Zapisz i zaczekaj kilka sekund. Kolekcja messages zawiera teraz dokument zawierający odpowiedź na zapytanie.

5. W kolekcji messages kliknij Dodaj dokument.
   1. W polu tekstowym Identyfikator dokumentu kliknij Automatyczny identyfikator.
   2. W polu tekstowym Pole wpisz prompt.
   3. W polu tekstowym Wartość wpisz And now, vegetables.
   4. Kliknij Zapisz i zaczekaj kilka sekund. Kolekcja messages zawiera teraz dokument zawierający odpowiedź na zapytanie.

9. Skonfiguruj aplikację Chatbot, aby korzystać z Firebase

Aby uruchomić aplikację Chatbot, musisz skonfigurować jej kod i interfejs wiersza poleceń Firebase, aby umożliwić interakcję z projektem Firebase.

Dodaj usługi i konfigurację Firebase do kodu aplikacji

Aby można było korzystać z Firebase, baza kodu Twojej aplikacji wymaga pakietów SDK Firebase dla usług, których chcesz używać, oraz konfiguracji Firebase, która informuje te pakiety SDK, których projektów Firebase mają używać.

Ta przykładowa aplikacja z programowania zawiera już cały niezbędny kod do importowania i inicjowania pakietów SDK (patrz chatbot-start/lib/firebase/firebase.js), więc nie musisz ich dodawać. Przykładowa aplikacja zawiera jednak tylko wartości obiektów zastępczych konfiguracji Firebase (patrz chatbot-start/lib/firebase/firebase-config.js), dlatego musisz zarejestrować aplikację w projekcie Firebase, aby uzyskać unikalne wartości konfiguracyjne Firebase dla swojej aplikacji.

1. W konsoli Firebase otwórz Przegląd projektu i kliknij Sieć (lub Dodaj aplikację, jeśli aplikacja została już zarejestrowana w tym projekcie).
2. W polu tekstowym Pseudonim aplikacji wpisz zapadający w pamięć pseudonim aplikacji, np. My Chatbot app.
3. Nie zaznaczaj pola Skonfiguruj też Hosting Firebase dla tej aplikacji. Te kroki wykonasz w dalszej części ćwiczeń z programowania.
4. Kliknij Zarejestruj aplikację.
5. W konsoli wyświetla się fragment kodu służący do dodania i zainicjowania pakietu SDK Firebase za pomocą obiektu konfiguracji Firebase związanego z konkretną aplikacją. Skopiuj wszystkie właściwości obiektu konfiguracji Firebase.
6. Otwórz plik chatbot-start/lib/firebase/firebase-config.js w edytorze kodu.
7. Zastąp wartości obiektów zastępczych wartościami, które zostały właśnie skopiowane. Możesz mieć właściwości i wartości dla usług Firebase, których nie używasz w aplikacji Chatbot.
8. Zapisz plik.
9. Wróć do konsoli Firebase i kliknij Przejdź do konsoli.

Skonfiguruj terminal, aby uruchamiać polecenia interfejsu wiersza poleceń Firebase w projekcie Firebase

1. W terminalu naciśnij Control+C, by zatrzymać uruchamianie poprzedniej aplikacji internetowej na serwerze.
2. W terminalu przejdź do folderu aplikacji internetowej chatbot-start:

   cd ../chatbot-start
   

3. Skonfiguruj interfejs wiersza poleceń Firebase, aby uruchamiać polecenia w konkretnym projekcie Firebase:

   firebase use YOUR_PROJECT_ID
   

Skonfiguruj bazę kodu aplikacji, aby korzystać ze zgodnego ze środowiskiem platformy Hostingu Firebase

W ramach tego ćwiczenia w Codelabs używane są platformy internetowe z Hostingiem (wersja testowa) w aplikacji internetowej Chatbot.

1. W terminalu włącz platformy internetowe w Hostingu Firebase:

   firebase experiments:enable webframeworks
   

2. Zainicjuj Hosting Firebase:

   firebase init hosting
   

3. Gdy pojawi się komunikat z kluczem Detected an existing Next.js codebase in your current directory, should we use this?, naciśnij Y.
4. Gdy pojawi się prośba In which region would you like to host server-side content, if applicable?, wybierz region domyślny lub lokalizację wybraną wcześniej dla Firestore i Cloud Storage, a następnie naciśnij Enter (lub return w systemie macOS).
5. Gdy pojawi się komunikat Set up automatic builds and deploys with GitHub?, naciśnij N.

Uruchamianie i wyświetlanie aplikacji internetowej Chatbot.

1. W terminalu zainstaluj zależności, a potem uruchom aplikację internetową:

   npm install
   firebase emulators:start --only hosting
   

2. W przeglądarce przejdź do lokalnego hostingu. W większości przypadków jest to http://localhost:5000/ lub podobny.

Strona powinna się wczytać, ale brakuje niektórych funkcji. Dodamy je w kolejnych krokach tego ćwiczenia z programowania.

Rozwiązywanie problemów z uruchamianiem aplikacji internetowej

Jeśli błąd wyświetla się na stronie, która zaczyna się tak: Error: Firebase session cookie has incorrect..., musisz usunąć wszystkie pliki cookie ze środowiska lokalnego hosta. W tym celu postępuj zgodnie z instrukcjami usuwania plików cookie | Dokumentacja Narzędzi deweloperskich.

10. Dodaj nową funkcję do Aplikacja czatbot

W ostatnim kroku tego ćwiczenia z programowania uruchomiono lokalnie aplikację Chatbot, ale nie miała ona zbyt wielu funkcji i nie zostało jeszcze użyte zainstalowane rozszerzenie. W tym kroku ćwiczenia w Codelabs dodasz tę funkcję i użyjesz aplikacji internetowej do aktywowania rozszerzenia.

Wdrażanie reguł zabezpieczeń

Ta przykładowa aplikacja z ćwiczeniami w Codelabs zawiera zestawy reguł zabezpieczeń dla Firestore oraz Cloud Storage dla Firebase. Po wdrożeniu tych reguł zabezpieczeń w projekcie Firebase dane w bazie danych i zasobniku są lepiej chronione przed niewłaściwym wykorzystaniem.

Możesz wyświetlić te reguły w plikach firestore.rules i storage.rules.

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

   firebase deploy --only firestore:rules,storage
   

2. Jeśli pojawi się pytanie: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", wybierz Tak.

Zaktualizuj kod, aby dodawać wiadomości do Cloud Firestore

W aplikacji Chatbot do Firestore dodawana jest nowa wiadomość od użytkownika, która aktywuje rozszerzenie w celu wygenerowania odpowiedzi.

1. Otwórz plik lib/firebase/firestore.js w edytorze kodu.
2. Na końcu pliku znajdź funkcję addNewMessage, która obsługuje dodawanie nowych wiadomości.
   Ta funkcja przyjmuje już te właściwości obiektu:
   

   Parametr	Opis
   userId	Identyfikator zalogowanego użytkownika
   discussionId	Identyfikator dyskusji, do której została dodana wiadomość
   message	treść wiadomości,
   db	instancji bazy danych Firestore.

   Po przygotowaniu tych zmiennych możesz dodać dokument Cloud Firestore, który będzie reprezentował nową wiadomość.
3. W treści funkcji addNewMessage po komentarzu // Insert your code below ⬇️ dodaj ten kod:

   await addDoc(
           collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           ),
           {
                   prompt: message,
                   createTime: serverTimestamp(),
           }
   );
   
   await updateDoc(doc(db, "users", userId, "discussion", discussionId), {
           latestMessage: message,
           updatedTime: serverTimestamp(),
   });
   

Zaktualizuj kod, aby utworzyć zapytanie pobierające wiadomości

1. Będąc w pliku lib/firebase/firestore.js, znajdź funkcję getMessagesQuery, która musi zwrócić zapytanie Cloud Firestore określające wiadomości przechowywane w ścieżce kolekcji users/{uid}/discussion/{discussionId}/messages.
2. Zastąp całą funkcję getMessagesQuery tym kodem:

   function getMessagesQuery(db, userId, discussionId) {
           if (!userId || !discussionId) {
                   return null;
           }
           const messagesRef = collection(
                   db,
                   "users",
                   userId,
                   "discussion",
                   discussionId,
                   "messages"
           );
           return query(messagesRef, orderBy("createTime", "asc"));
   }
   

Zaktualizuj kod, aby obsługiwał dokumenty wiadomości Cloud Firestore

1. Nie wychodząc z pliku lib/firebase/firestore.js, znajdź funkcję handleMessageDoc, która odbiera dokument Cloud Firestore reprezentujący pojedynczą wiadomość.
   Ta funkcja musi formatować i porządkować dane w sposób dopasowany do interfejsu użytkownika aplikacji Chatbot.
2. Zastąp całą funkcję handleMessageDoc tym kodem:

   function handleMessageDoc(doc) {
           const data = doc.data();
           const item = {
                   prompt: data.prompt,
                   response: data.response,
                   id: doc.id,
                   createTime: formatDate(data.createTime.toDate()),
           };
   
           if (data?.status?.completeTime) {
                   item.completeTime = formatDate(data.status.completeTime.toDate());
           }
   
           return item;
   }
   

3. Zapisz plik.

Ponownie uruchom i wyświetl aplikację internetową Chatbot (teraz z funkcjami).

Aby uruchomić i wyświetlić działającą już aplikację internetową, wykonaj te czynności:

1. W przeglądarce wróć na kartę z aplikacją internetową Chatbot i załaduj ponownie stronę.
2. Kliknij Zaloguj się przez Google.
3. W razie potrzeby wybierz swoje konto Google.
4. Gdy się zalogujesz, odśwież stronę.
5. W polu tekstowym Wpisz wiadomość wpisz wiadomość, np. Tell me about space.
6. Kliknij Wyślij i poczekaj kilka sekund, aż aplikacja internetowa Chatbot odpowie.

Inną zaletą rozszerzenia Chatbot with PaLM API jest jego historia rozmów.

Aby zobaczyć przykład jego umiejętności wypowiadania się w kontekście historycznym, wykonaj te czynności:

1. W polu tekstowym Wpisz wiadomość zadaj pytanie, np. What are five random fruits?.
2. W polu tekstowym Wpisz wiadomość zadaj kolejne pytanie związane z poprzednim pytaniem, na przykład And what about vegetables?.

Aplikacja internetowa Chatbot podaje w odpowiedzi informacje z przeszłości. Chociaż w ostatnim pytaniu nie wskazano 5 losowych warzyw, rozszerzenie Chatbot z PaLM API rozumie dodatkowe pytania.

11. Konfigurowanie funkcji „Konwertuj tekst na mowę” dla Aplikacja Video Hint

Zainstaluj rozszerzenie Convert Text to Speech.

1. Otwórz rozszerzenie Konwertuj tekst na mowę.
2. Kliknij Zainstaluj w konsoli Firebase.
3. Wybierz projekt Firebase.
4. Kliknij Dalej.
5. W sekcji Sprawdź włączone interfejsy API i utworzone zasoby kliknij Włącz obok wybranych usług:

6. Kliknij Dalej,a następnie wybierz Przyznaj obok sugerowanych uprawnień.

7. Kliknij Dalej.
8. W polu tekstowym Ścieżka do kolekcji wpisz bot.
9. W polu tekstowym Ścieżka do miejsca na dane wpisz tts.
10. Wszystkie pozostałe wartości pozostaw domyślne.
11. Kliknij Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj rozszerzenie Konwertuj tekst na mowę

Celem tych ćwiczeń w Codelabs jest interakcja z rozszerzeniem Convert Text to Speech za pomocą aplikacji internetowej. Warto jednak zapoznać się z jego działaniem, uruchamiając je za pomocą konsoli Firebase. Rozszerzenie jest wyzwalane, gdy dokument Cloud Firestore zostanie utworzony w kolekcji bot.

Aby sprawdzić, jak działa rozszerzenie, używając konsoli Firebase:

1. W konsoli Firebase otwórz Firestore
2. Kliknij Rozpocznij kolekcję.
3. W polu tekstowym Identyfikator kolekcji wpisz bot.
4. Kliknij Dalej.

5. W polu tekstowym Identyfikator dokumentu kliknij Automatyczny identyfikator.
6. W polu tekstowym Pole wpisz text.
7. W polu tekstowym Wartość wpisz The quick brown fox jumps over the lazy dog.
8. Kliknij Zapisz.

Aby zobaczyć i odsłuchać utworzony przez siebie plik MP3, wykonaj te czynności:

1. W konsoli Firebase otwórz Miejsce na dane.
2. Zanotuj nazwę zasobnika po wartości gs:// w panelu, w którym możesz przesyłać pliki. To jest nazwa domyślnego zasobnika dla tego projektu. Będzie on potrzebny do wykonywania różnych zadań w ramach tego ćwiczenia z programowania.

3. W konsoli Google Cloud otwórz Cloud Storage.
4. Wybierz projekt.
   Jeśli Twojego projektu nie ma na liście najnowszych projektów, kliknij Wybierz projekt, aby znaleźć go w selektorze projektów.

5. Wybierz domyślny zasobnik na dane.
6. Przejdź do folderu tts/.
7. Kliknij plik MP3.
8. Na końcu pliku MP3 kliknij . Zobaczysz, że tekst został przekonwertowany na mowę.

12. Konfigurowanie funkcji „Oznaczanie filmów etykietami za pomocą Cloud Video AI” dla Aplikacja Video Hint

Instalowanie rozszerzenia Label Videos with Cloud Video AI.

1. Przejdź do rozszerzenia Label Videos with Cloud Video AI (Oznaczanie filmów etykietami za pomocą rozszerzenia Cloud Video AI).
2. Kliknij Zainstaluj w konsoli Firebase.
3. Wybierz projekt Firebase.
4. Kliknij Dalej > Dalej > Następnie aż dojdziesz do sekcji Skonfiguruj rozszerzenie.
5. Z menu Lokalizacja Cloud Functions wybierz obsługiwaną lokalizację (lokalizację wybraną wcześniej dla Firestore i Cloud Storage lub lokalizację najbliższą). Obsługiwane lokalizacje znajdziesz w sekcji location_id w dokumencie AnnotateVideoRequest.
6. Z menu Model wybierz Najnowsze.
7. W menu Aparat stacjonarny wybierz Nie.
8. Wszystkie pozostałe wartości pozostaw domyślne.
9. Kliknij Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj rozszerzenie Label Videos with Cloud Video AI.

Celem tych ćwiczeń w Codelabs jest interakcja z rozszerzeniem Label Videos with Cloud Video AI (Etykieta filmów z Cloud Video AI) w aplikacji internetowej. Warto jednak zrozumieć, jak działa ono po aktywowaniu go za pomocą konsoli Firebase. Rozszerzenie jest wyzwalane, gdy plik wideo zostanie przesłany do zasobnika na dane.

Aby sprawdzić, jak działa rozszerzenie, używając konsoli Firebase:

1. W projekcie Firebase kliknij Pamięć > Utwórz folder.
2. W polu tekstowym Nazwa folderu wpisz video_annotation_input.

3. Kliknij Dodaj folder.
4. W folderze video_annotation_input kliknij Prześlij plik.
5. W folderze ai-extensions-codelab/video-hint-start/public/videos, który został wcześniej sklonowany lub pobrany, wybierz pierwszy plik wideo.
6. W przeglądarce otwórz konsolę Google Cloud i przejdź do Cloud Storage.
7. Wybierz zanotowany wcześniej zasobnik na dane.
8. Kliknij folder video_annotation_output.
   Jeśli nie widzisz folderu video_annotation_output, poczekaj kilka sekund i odśwież stronę, ponieważ interfejs Video Intelligence API wciąż może przetwarzać film.

9. Zwróć uwagę, że istnieje plik JSON o nazwie podobnej do nazwy przesłanej wcześniej.
10. Kliknij Pobierz FILENAME.
11. Otwórz pobrany plik JSON w edytorze kodu. Zawiera nieprzetworzone dane wyjściowe z interfejsu Video Intelligence API, w tym wykryte etykiety przesłanego filmu.

13. Konfigurowanie aplikacji Video Hint, która umożliwia korzystanie z Firebase

Aby uruchomić aplikację Video Hint, musisz skonfigurować jej kod i interfejs wiersza poleceń Firebase, aby umożliwić interakcję z projektem Firebase.

Dodaj usługi i konfigurację Firebase do kodu aplikacji

Aby można było korzystać z Firebase, baza kodu Twojej aplikacji wymaga pakietów SDK Firebase dla usług, których chcesz używać, oraz konfiguracji Firebase, która informuje te pakiety SDK, których projektów Firebase mają używać.

Ta przykładowa aplikacja z programowania zawiera już cały niezbędny kod do importowania i inicjowania pakietów SDK (patrz video-hint-start/lib/firebase/firebase.js), więc nie musisz ich dodawać. Przykładowa aplikacja zawiera jednak tylko wartości obiektów zastępczych konfiguracji Firebase (patrz video-hint-start/lib/firebase/firebase-config.js), dlatego musisz zarejestrować aplikację w projekcie Firebase, aby uzyskać unikalne wartości konfiguracyjne Firebase dla swojej aplikacji.

1. W konsoli Firebase otwórz Przegląd projektu i kliknij Sieć (lub Dodaj aplikację, jeśli aplikacja została już zarejestrowana w tym projekcie).
2. W polu tekstowym Pseudonim aplikacji wpisz zapadający w pamięć pseudonim aplikacji, np. My Video Hint app.
3. Nie zaznaczaj pola Skonfiguruj też Hosting Firebase dla tej aplikacji. Te kroki wykonasz w dalszej części ćwiczeń z programowania.
4. Kliknij Zarejestruj aplikację.
5. W konsoli wyświetla się fragment kodu służący do dodania i zainicjowania pakietu SDK Firebase za pomocą obiektu konfiguracji Firebase związanego z konkretną aplikacją. Skopiuj wszystkie właściwości obiektu konfiguracji Firebase.
6. Otwórz plik video-hint-start/lib/firebase/firebase-config.js w edytorze kodu.
7. Zastąp wartości obiektów zastępczych wartościami, które zostały właśnie skopiowane. Możesz mieć właściwości i wartości dla usług Firebase, których nie używasz w aplikacji Video Podpowiedź.
8. Zapisz plik.
9. Wróć do konsoli Firebase i kliknij Przejdź do konsoli.

Skonfiguruj terminal, aby uruchamiać polecenia interfejsu wiersza poleceń Firebase w projekcie Firebase

1. W terminalu naciśnij Control+C, by zatrzymać uruchamianie poprzedniej aplikacji internetowej na serwerze.
2. W terminalu przejdź do folderu aplikacji internetowej video-hint-start:

   cd ../video-hint-start
   

3. Skonfiguruj interfejs wiersza poleceń Firebase, aby uruchamiać polecenia w konkretnym projekcie Firebase:

   firebase use YOUR_PROJECT_ID
   

Skonfiguruj bazę kodu aplikacji, aby korzystać ze zgodnego ze środowiskiem platformy Hostingu Firebase

W ramach tego ćwiczenia w Codelabs używane są platformy internetowe z Hostingiem (wersja testowa) w aplikacji internetowej Wskazówki dotyczące filmów.

1. W terminalu włącz platformy internetowe w Hostingu Firebase:

   firebase experiments:enable webframeworks
   

2. Zainicjuj Hosting Firebase:

   firebase init hosting
   

3. Gdy pojawi się komunikat z kluczem Detected an existing Next.js codebase in your current directory, should we use this?, naciśnij Y.
4. Gdy pojawi się prośba In which region would you like to host server-side content, if applicable?, wybierz region domyślny lub lokalizację wybraną wcześniej dla Firestore i Cloud Storage, a następnie naciśnij Enter (lub return w systemie macOS).
5. Gdy pojawi się komunikat Set up automatic builds and deploys with GitHub?, naciśnij N.

Uruchamianie i wyświetlanie aplikacji internetowej Wskazówki dotyczące filmów.

1. W terminalu zainstaluj zależności w folderach video-hint-start i functions, a następnie uruchom aplikację:

   npm install
   
   # Include the parentheses in the following command.
   (cd functions && npm install)
   
   firebase emulators:start --only hosting
   

2. W przeglądarce przejdź do lokalnego hostingu. W większości przypadków jest to http://localhost:5000/ lub podobny.

Strona powinna się wczytać, ale brakuje niektórych funkcji. Dodamy je w kolejnych krokach tego ćwiczenia z programowania.

Rozwiązywanie problemów z uruchamianiem aplikacji internetowej

Jeśli w panelu Konsola w Narzędziach deweloperskich zobaczysz komunikat o błędzie, taki jak Error: The query requires an index. You can create it here: https://console.firebase.google.com, wykonaj te czynności:

1. Przejdź do podanego adresu URL.

2. Kliknij Zapisz i poczekaj, aż stan zmieni się z Budynek na Włączony.

14. Dodaj nową funkcję do Aplikacja Video Hint

W ostatnim kroku tego ćwiczenia w programie aplikacja Video Hint została uruchomiona lokalnie, ale nie miała ona zbyt wielu funkcji i nie zostało jeszcze użyte zainstalowane rozszerzenie. W tym kroku ćwiczenia w Codelabs dodasz tę funkcję i użyjesz aplikacji internetowej do aktywowania rozszerzenia.

Wdrażanie reguł zabezpieczeń

Ta przykładowa aplikacja z ćwiczeniami w Codelabs zawiera zestawy reguł zabezpieczeń dla Firestore oraz Cloud Storage dla Firebase. Po wdrożeniu tych reguł zabezpieczeń w projekcie Firebase dane w bazie danych i zasobniku są lepiej chronione przed niewłaściwym wykorzystaniem.

Możesz wyświetlić te reguły w plikach firestore.rules i storage.rules.

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

   firebase deploy --only firestore:rules,storage
   

2. Jeśli pojawi się pytanie: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", wybierz Tak.

Zaktualizuj kod, aby połączyć funkcje

1. W edytorze kodu rozwiń folder functions.
   Ten folder zawiera kilka funkcji, które łączą się w potok rozszerzenia. Poniższa tabela zawiera i opisuje poszczególne funkcje:

   Funkcja	Opis
   functions/01-handle-video-upload.js	Pierwszy krok w potoku rozszerzeń. Przetwarza on plik wideo przesłany przez użytkownika.
   functions/02-handle-video-labels.js	Drugi etap procesu rozszerzenia. Przetwarza plik etykiet wideo wygenerowany przez rozszerzenie storage-label-videos.
   functions/03-handle-audio-file.js	Trzeci krok procesu rozszerzenia. Obsługuje on plik audio z transkrypcją.

   Nadal jednak musisz dodać plik grupujący te funkcje.
2. W pliku functions/index.js dodaj ten kod:

   import { initializeApp } from "firebase-admin/app";
   
   export * from "./01-handle-video-upload.js";
   export * from "./02-handle-video-labels.js";
   export * from "./03-handle-audio-file.js";
   
   initializeApp();
   

Ten kod korzysta z modułów JavaScript do importowania i eksportowania funkcji z pliku index.js. Dzięki temu wszystkie funkcje są dostępne w jednym scentralizowanym miejscu.

Zaktualizuj kod, aby umożliwić przesyłanie filmów

1. Otwórz plik lib/firebase/storage.js w edytorze kodu.
2. Znajdź funkcję uploadVideo.
   Ta funkcja odbiera parametry userId, filePath i file. Te dane wystarczą do przesłania pliku do Cloud Storage.
3. W treści funkcji uploadVideo dodaj ten kod:

   const storageRef = ref(storage, `video_annotation_input/${filePath}`);
   
   const uploadTask = uploadBytesResumable(storageRef, file, {
           customMetadata: {
                   uid: userId,
           },
   });
   
   return uploadTask;
   

Wdrażanie funkcji

Aby wdrożyć funkcje za pomocą interfejsu wiersza poleceń Firebase:

1. W terminalu, pozostając w folderze video-hint-start, naciśnij Control+C, aby zatrzymać bieżący proces.
2. Wdróż swoje funkcje:

   firebase deploy --only functions
   

   Jeśli pojawi się pytanie o usunięcie poprzednich funkcji w Cloud Functions, wybierz No.
3. Jeśli zobaczysz komunikat podobny do Permission denied while using the Eventarc Service Agent, odczekaj kilka minut i spróbuj jeszcze raz.
4. Po wykonaniu tego polecenia ponownie uruchom aplikację lokalnie:

   firebase emulators:start --only hosting
   

Ponownie uruchom i wyświetl aplikację internetową Wskazówki dotyczące filmów (teraz z funkcjami).

Aby uruchomić i wyświetlić działającą już aplikację internetową, wykonaj te czynności:

1. W przeglądarce odszukaj kartę ze stroną http://localhost:5000.
2. W razie potrzeby kliknij Zaloguj się przez Google i wybierz swoje konto Google.
3. Kliknij Prześlij przykładowy film 1 i zaczekaj kilka minut, aby zobaczyć wyniki podsumowania filmu.
4. Jeśli po przesłaniu filmu nie widzisz żadnych wyników, zapoznaj się z sekcją Rozwiązywanie problemów z Cloud Functions w dodatku do tego ćwiczenia.

15. Podsumowanie

Gratulacje! Dzięki temu ćwiczeniu z programowania udało Ci się wiele osiągnąć.

Zainstalowane i skonfigurowane rozszerzenia w Firebase

Udało Ci się użyć konsoli Firebase, aby skonfigurować i zainstalować różne rozszerzenia AI. Korzystanie z rozszerzeń jest wygodne, ponieważ nie musisz pisać miękkiego, stałego kodu, który zajmuje się uwierzytelnianiem w usługach Google Cloud, odczytem i zapisem w Firestore oraz interakcjami z usługami Google Cloud – a także różnymi niuansami związanymi z tymi zadaniami.

Praca z rozszerzeniami w konsoli Firebase

Nie musisz od razu zagłębiać się w kod, dlatego potrzebowaliśmy czasu na zrozumienie działania rozszerzeń AI na podstawie danych wejściowych przekazanych przez Ciebie do Firestore lub Cloud Storage za pomocą konsoli. Ten typ interakcji może być szczególnie przydatny, jeśli musisz debugować dane wyjściowe rozszerzenia.

Utworzenie 3 aplikacji internetowych opartych na AI, które korzystają z rozszerzeń Firebase

Opinie

W aplikacji internetowej Reviewly użyto rozszerzenia Language Tasks with PaLM API, aby podsumować długie opinie użytkowników na temat koszulek. Otrzymaliśmy od Ciebie również prośbę, aby model językowy dostarczył odpowiedzi JSON na Twoje zapytanie. W tym przypadku plik JSON zapewniał ocenę w postaci gwiazdek i podsumowaną opinię oryginalnej długiej recenzji.

Ćwiczenie opcjonalne: producent koszulek jest zadowolony ze podsumowania opinii, ale poprosił o dodatkowe podsumowanie charakteru wady. Czy możesz dostosować komunikat tak, aby zwracał podsumowanie defektu, a następnie dołączyć to podsumowanie do interfejsu aplikacji internetowej?

Czatbot

W aplikacji internetowej Chatbot użyto rozszerzenia Chatbot z interfejsem PaLM API, aby udostępnić użytkownikowi interaktywny interfejs czatu z kontekstem historycznym w rozmowach, gdzie każda wiadomość jest przechowywana w dokumencie Firestore dotyczącym określonego użytkownika.

Ćwiczenie opcjonalne: uczniowie są zadowoleni z czatbota, ale nauczyciele oczekują kilku ulepszeń. Po udzieleniu odpowiedzi należy zadawać uczniom skłaniające do refleksji pytania. Przykład:

Student asks: What is the ozone?
Response: The ozone is a molecule composed of...How do you think human activities can impact the ozone layer?

Wskazówka: aby to zrobić, możesz użyć konfigurowalnej opcji kontekstu.

Wskazówka dotycząca filmu

W aplikacji internetowej Wskazówki dotyczące filmów wykorzystano narzędzia Konwertuj tekst na mowę, Language Tasks with PaLM API oraz Oznaczaj filmy etykietami za pomocą Cloud Video w celu utworzenia potoku rozszerzeń, w ramach którego powstaje potok rozszerzeń, w ramach którego powstaje ścieżka audio i tekstowa filmu.

Ćwiczenie opcjonalne: departament rządowy uznał prototyp za interesujący i chce też teraz, aby użytkownik mógł kliknąć etykietę tekstową, aby przejść do punktu w filmie, w którym etykieta została wykryta.

16. Załącznik: rozwiązywanie problemów z Cloud Functions

Jeśli aplikacja nie działa zgodnie z oczekiwaniami i uważasz, że może to być spowodowane jej funkcjami, wykonaj czynności opisane na tej stronie rozwiązywania problemów.

Zezwalaj na publiczny nieuwierzytelniony dostęp

Jeśli w panelu Konsola w Narzędziach deweloperskich w Chrome pojawią się błędy związane z uprawnieniami, wykonaj te czynności:

1. Przeczytaj Omówienie uwierzytelniania | Strona Cloud Run
2. Kliknij link, aby wyświetlić i wykonać wymagane zadania Zezwalaj na publiczny, nieuwierzytelniony dostęp do funkcji.

3. Wróć do aplikacji Reviewly. Na przykład: http://localhost:8080.
4. Kliknij Dodaj przykładowe opinie i zaczekaj kilka sekund.
   • Jeśli pojawią się opinie, nie musisz wykonywać tych czynności, ale możesz od razu przejść do sekcji Konfigurowanie aplikacji internetowej Chatbot w ramach tego ćwiczenia z programowania.
   • Jeśli opinie nie są wyświetlane: przejdź do sekcji rozwiązywania problemów.

Obsługa błędów dotyczących niewystarczających uprawnień

1. W konsoli Firebase otwórz Funkcje.
2. Najedź kursorem na funkcję addMockReviews i kliknij > Wyświetl logi.

3. Przewiń dzienniki, aż znajdziesz błąd podobny do jednego z tych:

   Exception from a finished function: Error: 7 PERMISSION_DENIED: Missing or insufficient permissions.
   

   0001-compute@developer.gserviceaccount.com does not have storage.objects.get access to the Google Cloud Storage object. Permission 'storage.objects.get' denied on resource (or it may not exist).
   

4. W konsoli Google Cloud otwórz stronę Uprawnienia i wybierz projekt.
5. W tabeli znajdź kolumnę Nazwa.
   W sekcji Administracja Na stronie Administracja znajdziesz tabelę z użytkownikami i rolami. Kolumna „name” w tabeli zawiera informacje o tym, do czego służy użytkownik lub podmiot zabezpieczeń. Możesz mieć podmiot zabezpieczeń o nazwie Domyślne konto usługi Compute.

Jeśli widzisz opcję Domyślne konto usługi Compute, wykonaj te czynności:

1. Kliknij Edytuj podmiot zabezpieczeń.

2. Przejdź do sekcji Dodawanie ról do domyślnego konta usługi Compute w tym ćwiczeniu w Codelabs.

Jeśli nie widzisz opcji Domyślne konto usługi Compute, wykonaj te czynności:

1. Kliknij Przyznaj dostęp.
2. W polu tekstowym Nowe podmioty zabezpieczeń wpisz compute.
3. W wyświetlonym menu automatycznych sugestii wybierz Domyślne konto usługi Compute.

Dodaj role do domyślnego konta usługi Compute

W sekcji Przypisz role na domyślnym koncie usługi Compute:

1. Rozwiń menu Wybierz rolę.
2. W polu Filtr wpisz Cloud Datastore User.
3. W menu automatycznych sugestii wybierz Użytkownik Cloud Datastore.
4. Kliknij Dodaj kolejną rolę.
   1. Rozwiń menu Wybierz rolę.
   2. W polu Filtr wpisz Cloud Storage for Firebase Admin.
   3. W menu automatycznych sugestii kliknij Administrator Cloud Storage dla Firebase.
5. Kliknij Dodaj kolejną rolę.
   1. Rozwiń menu Wybierz rolę.
   2. W polu Filtr wpisz Cloud Storage for Firebase Service Agent.
   3. W menu automatycznych sugestii wybierz Agent usługi Cloud Storage dla Firebase.
6. Kliknij Zapisz.