Twórz aplikacje internetowe oparte na sztucznej inteligencji za pomocą rozszerzeń Firebase

1. Zanim zaczniesz

Podczas tych zajęć z programowania dowiesz się, jak tworzyć aplikacje internetowe oparte na sztucznej inteligencji, które zapewniają użytkownikom atrakcyjne doświadczenia dzięki rozszerzeniom Firebase.

Warunki wstępne

• Znajomość Node.js i JavaScript

Czego się dowiesz

• Jak używać rozszerzeń związanych ze sztuczną inteligencją 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ć JavaScript, aby uzyskać dostęp do wyników generowanych przez rozszerzenia.

Co będziesz potrzebował

• Wybrana przeglądarka, np. 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 opisano aplikacje internetowe, które utworzysz w ramach tych zajęć z programowania, oraz bazę Firebase, której będziesz używać do ich tworzenia.

Przejrzyj aplikację

Firma produkująca koszulki jest przytłoczona długimi recenzjami jednej z jej koszulek i nie jest pewna jej ogólnej oceny. Wypełniona aplikacja internetowa Reviewly podsumowuje każdą recenzję, przyznaje jej ocenę w postaci gwiazdek i na podstawie każdej recenzji wylicza ogólną ocenę produktu. Użytkownicy mogą także rozwinąć każdą podsumowaną recenzję, aby zobaczyć oryginalną recenzję.

Aplikacja Chatbot

Kadra nauczycielska szkoły jest przytłoczona powtarzającymi się pytaniami na tematy ogólne, dlatego chce zautomatyzować udzielanie odpowiedzi. Ukończona aplikacja Chatbot zapewnia uczniom chatbota konwersacyjnego, który działa w oparciu o model dużego języka (LLM) i może odpowiadać na pytania dotyczące tematów ogólnych. Chatbot ma kontekst historyczny, więc jego odpowiedzi mogą uwzględniać wcześniejsze pytania zadane przez uczniów w tej samej rozmowie.

Aplikacja z podpowiedziami wideo

Departament rządowy chce, aby jego filmy zawierały audiodeskrypcję w celu poprawy dostępności, ale mają setki filmów do dodania adnotacji i potrzebują usprawnionego podejścia. Ukończona aplikacja Video Hint to prototyp, który dział sprawdzi pod kątem oceny jej skuteczności.

Oto rozszerzenia używane w aplikacji Video Hint :

• Oznacz filmy wideo za pomocą rozszerzenia Cloud Video AI — wyodrębnij etykiety z każdego filmu przesłanego do magazynu.
• Zadania językowe z rozszerzeniem PaLM API — podsumowuj etykiety w opis tekstowy.
• Rozszerzenie Konwertuj tekst na mowę — utwórz wersję audio opisu filmu.

3. Skonfiguruj środowisko programistyczne

Sprawdź wersję Node.js

1. Sprawdź w terminalu, czy masz zainstalowany 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 ją i zainstaluj .

Pobierz repozytorium

1. Jeśli masz zainstalowany git, sklonuj repozytorium GitHub Codelab:

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

2. Jeśli nie masz zainstalowanego gita, pobierz repozytorium GitHub jako plik ZIP .

Przejrzyj strukturę folderów

Na komputerze lokalnym znajdź sklonowane repozytorium i przejrzyj 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 przy użyciu uproszczonych instrukcji. Jeśli jednak uczysz się po raz pierwszy, powinieneś ukończyć to ćwiczenie z kodowania, ponieważ zawiera ono najbardziej kompleksowy zestaw instrukcji.

Jeśli nie masz pewności, czy poprawnie zastosowałeś kod zgodnie z instrukcjami zawartymi w tych ćwiczeniach z programowania, kod rozwiązania dla odpowiednich aplikacji znajdziesz w folderach reviewly-end , chatbot-end i video-hint-end .

Zainstaluj interfejs wiersza polecenia Firebase

Uruchom następujące polecenie, aby sprawdzić, czy masz zainstalowany interfejs CLI Firebase i czy jest on w wersji 12.5.4 lub nowszej:

firebase --version

• Jeśli masz zainstalowany interfejs CLI Firebase, ale nie jest to wersja 12.5.4 lub nowsza, zaktualizuj go:

  npm update -g firebase-tools
  

• Jeśli nie masz zainstalowanego interfejsu CLI Firebase, zainstaluj go:

  npm install -g firebase-tools
  

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

Zaloguj się do Firebase

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

   cd ai-extensions-codelab
   firebase login
   

2. Jeśli Twój terminal wyświetla informację, że jesteś już zalogowany w Firebase, przejdź do sekcji Konfigurowanie projektu Firebase w tym ćwiczeniu z programowania.
3. W zależności od tego, czy chcesz, aby Firebase zbierał dane, wpisz Y lub N
4. W przeglądarce wybierz swoje konto Google, a następnie kliknij Zezwalaj .

4. Skonfiguruj projekt Firebase

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

Utwórz projekt Firebase

1. W konsoli Firebase kliknij Utwórz projekt .
2. W polu tekstowym Wprowadź nazwę projektu wpisz AI Extensions Codelab (lub wybraną nazwę projektu), a następnie kliknij Kontynuuj .
3. Do tych zajęć z programowania nie potrzebujesz Google Analytics, więc wyłącz opcję Włącz Google Analytics dla tego projektu .
4. Kliknij opcję Utwórz projekt .
5. Poczekaj na udostępnienie projektu, a następnie kliknij przycisk Kontynuuj .
6. W projekcie Firebase przejdź do Ustawień projektu . Zanotuj identyfikator projektu, ponieważ będziesz go później potrzebować. Ten unikalny identyfikator określa sposób identyfikacji Twojego projektu (na przykład w interfejsie CLI Firebase).

Pobierz konto usługi Firebase

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

Zestaw SDK administratora Firebase dla Node.js służy do zapewnienia działania reguł bezpieczeństwa z poziomu kodu po stronie serwera. Aby korzystać z interfejsów API w Firebase Admin, musisz pobrać konto usługi Firebase z konsoli Firebase.

1. W konsoli Firebase przejdź do strony Konta usług w ustawieniach projektu .
2. Kliknij Wygeneruj nowy klucz prywatny > Wygeneruj klucz .
3. Po pobraniu pliku do systemu plików uzyskaj pełną ścieżkę do tego pliku.
   Na przykład, jeśli pobrałeś plik do folderu Pobrane , pełna ścieżka może wyglądać następująco: /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ć następująco:

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

5. Pozostaw ten terminal otwarty i używaj go do końca ćwiczeń z kodowania, ponieważ zmienna środowiskowa może zostać utracona, jeśli rozpoczniesz nową sesję terminala.
   Jeśli otworzysz nową sesję terminala, musisz ponownie uruchomić poprzednie polecenie.

Uaktualnij swój plan cenowy Firebase

Aby korzystać z funkcji Cloud Functions i rozszerzeń Firebase, Twój projekt Firebase musi być objęty planem cenowym Blaze , co oznacza, że ​​jest powiązany z kontem rozliczeniowym Cloud .

• Konto rozliczeniowe Cloud wymaga metody płatności, np. karty kredytowej.
• Jeśli dopiero zaczynasz korzystać z Firebase i Google Cloud, sprawdź, czy kwalifikujesz się do kredytu w wysokości 300 USD i bezpłatnego konta rozliczeniowego Cloud w wersji próbnej .

Należy jednak pamiętać, że ukończenie tych ćwiczeń z programowania nie powinno wiązać się z żadnymi rzeczywistymi opłatami.

Aby uaktualnić swój projekt do planu Blaze, wykonaj następujące kroki:

1. W konsoli Firebase wybierz opcję uaktualnienia planu .
2. W oknie dialogowym wybierz plan Blaze, a następnie postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby powiązać swój projekt z kontem rozliczeniowym Cloud.
   Jeśli konieczne było utworzenie konta rozliczeniowego Cloud, konieczne może być przejście z powrotem do procesu aktualizacji w konsoli Firebase w celu dokończenia aktualizacji.

Skonfiguruj usługi Firebase w konsoli Firebase

W tej sekcji udostępnisz i skonfigurujesz kilka usług Firebase używanych przez aplikacje internetowe biorące udział w tym laboratorium. Należy pamiętać, że nie wszystkie z tych usług są używane w każdej aplikacji internetowej, ale skonfigurowanie ich już teraz jest wygodą podczas pracy nad tym laboratorium z programowania.

Skonfiguruj uwierzytelnianie

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

1. W konsoli Firebase przejdź do opcji Uwierzytelnianie .
2. Kliknij Rozpocznij .
3. W kolumnie Dodatkowi dostawcy kliknij Google > Włącz .

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

Skonfiguruj Cloud Firestore

Będziesz używać Firestore ze wszystkimi trzema aplikacjami. Pamiętaj jednak, że jeśli tworzysz prawdziwą aplikację, każda aplikacja powinna mieć swój własny projekt Firebase .

1. W konsoli Firebase przejdź do Firestore .
2. Kliknij Utwórz bazę danych > Rozpocznij 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 dodania reguł bezpieczeństwa do swojej bazy danych.
3. Użyj lokalizacji domyślnej lub wybierz dowolną lokalizację.
   W przypadku prawdziwej aplikacji chcesz wybrać lokalizację blisko użytkowników. Pamiętaj, że tej lokalizacji nie można później zmienić i automatycznie stanie się ona także lokalizacją Twojego domyślnego zasobnika Cloud Storage (następny krok).
4. Kliknij Gotowe .

Skonfiguruj Cloud Storage dla Firebase

Będziesz używać Cloud Storage z aplikacją Video Hint i wypróbujesz rozszerzenie Konwertuj tekst na mowę (następny krok ćwiczeń z programowania).

1. W konsoli Firebase przejdź do opcji Pamięć .
2. Kliknij Rozpocznij > Rozpocznij 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 dodania reguł bezpieczeństwa dla swojego zasobnika pamięci.
3. Lokalizacja Twojego segmentu powinna już być wybrana (ze względu na konfigurację 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 tym ćwiczeniu z programowania, aby uzyskać działanie trzech różnych aplikacji internetowych.

5. Skonfiguruj rozszerzenie „Language Tasks with PaLM API” dla aplikacji Reviewly

Zainstaluj Zadania Językowe z rozszerzeniem PaLM API

1. Przejdź do Zadań językowych z rozszerzeniem PaLM API .
2. Kliknij Zainstaluj w konsoli Firebase .
3. Wybierz swój projekt Firebase.
4. W sekcji Przejrzyj interfejsy API włączone i utworzone zasoby kliknij opcję Włącz obok sugerowanych usług:

5. Kliknij Dalej > Dalej.
6. W polu tekstowym Ścieżka kolekcji wpisz bot .
7. W polu tekstowym Podpowiedź wpisz .
8. W polu tekstowym Pola zmiennych wprowadź input .
9. W polu tekstowym Pole odpowiedzi wpisz text .
10. Z listy rozwijanej lokalizacji Cloud Functions wybierz Iowa (us-central1) lub lokalizację wybraną wcześniej dla Firestore i Cloud Storage.
11. Z listy rozwijanej Model języka wybierz tekst-bison-001 .
12. Pozostaw wszystkie pozostałe wartości jako domyślne.
13. Kliknij opcję Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj Zadania językowe z rozszerzeniem PaLM API

Chociaż celem tego ćwiczenia z programowania jest interakcja z zadaniami językowymi z rozszerzeniem API PaLM za pośrednictwem aplikacji internetowej, warto zrozumieć, jak działa rozszerzenie, uruchamiając je za pomocą konsoli Firebase. Rozszerzenie uruchamia się po dodaniu dokumentu Cloud Firestore do kolekcji bot .

Aby zobaczyć, jak działa rozszerzenie za pomocą konsoli Firebase, wykonaj następujące kroki:

1. W konsoli Firebase przejdź do Firestore .
2. W kolekcji bot kliknij Dodaj dokument .
3. W polu tekstowym Identyfikator dokumentu kliknij opcję Auto-ID .
4. W polu tekstowym Pole wprowadź input .
5. W polu tekstowym Wartość wpisz Tell me about the moon .
6. Kliknij Zapisz i poczekaj kilka sekund. Twój dokument w kolekcji bot zawiera teraz odpowiedź na Twoje zapytanie.

6. Skonfiguruj aplikację Recenzja do korzystania z Firebase

Aby uruchomić aplikację Reviewly , musisz skonfigurować kod aplikacji i interfejs wiersza polecenia Firebase, aby współpracowały z projektem Firebase.

Dodaj usługi i konfigurację Firebase do kodu swojej aplikacji

Aby móc korzystać z Firebase, baza kodu Twojej aplikacji wymaga zestawów SDK Firebase dla usług, z których chcesz korzystać, oraz konfiguracji Firebase, która informuje te zestawy SDK, którego projektu Firebase mają używać.

Przykładowa aplikacja tego laboratorium programistycznego zawiera już cały niezbędny kod importu i inicjalizacji dla zestawów SDK (zobacz reviewly-start/js/reviews.js ), więc nie musisz ich dodawać. Jednak przykładowa aplikacja ma tylko wartości zastępcze dla konfiguracji Firebase (patrz reviewly-start/js/firebase-config.js ), więc musisz zarejestrować swoją aplikację w projekcie Firebase, aby uzyskać unikalne wartości konfiguracji Firebase dla swojej aplikacji.

1. W konsoli Firebase w projekcie Firebase przejdź do przeglądu projektu i kliknij Sieć .
   
2. W polu tekstowym Pseudonim aplikacji wpisz niezapomniany pseudonim aplikacji, na przykład My Reviewly app .
3. Nie zaznaczaj pola wyboru Skonfiguruj także hosting Firebase dla tej aplikacji . Te kroki wykonasz w dalszej części ćwiczeń z kodowania.
4. Kliknij opcję Zarejestruj aplikację .
5. Konsola wyświetla fragment kodu służący do dodawania i inicjowania pakietu SDK Firebase za pomocą obiektu konfiguracyjnego Firebase specyficznego dla aplikacji. Skopiuj wszystkie właściwości z obiektu konfiguracyjnego Firebase.
6. W edytorze kodu otwórz plik reviewly-start/js/firebase-config.js .
7. Zastąp wartości zastępcze wartościami, które właśnie skopiowałeś. Nie ma problemu, jeśli masz właściwości i wartości usług Firebase, których nie używasz w aplikacji Reviewly .
8. Zapisz plik.
9. W konsoli Firebase kliknij Kontynuuj w konsoli .

Skonfiguruj terminal tak, aby uruchamiał polecenia Firebase CLI 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. Spraw, aby interfejs CLI Firebase uruchamiał polecenia dla konkretnego projektu Firebase:

   firebase use YOUR_PROJECT_ID
   

Uruchom i wyświetl aplikację internetową Review

Aby uruchomić i wyświetlić aplikację internetową, wykonaj następujące kroki:

1. W terminalu zainstaluj zależności, a następnie 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 widocznego na terminalu. Na przykład: http://localhost:8080 .

Strona powinna się załadować, ale zauważysz, że brakuje różnych funkcji. Dodamy je w kolejnych krokach tego ćwiczenia z kodowania.

7. Dodaj funkcjonalność do aplikacji Review

W ostatnim kroku tych ćwiczeń z programowania uruchomiłeś lokalnie aplikację Reviewly , ale nie miała ona zbyt wielu funkcji i nie korzystała jeszcze z zainstalowanego rozszerzenia. Na tym etapie ćwiczeń z programowania dodasz tę funkcję i użyjesz aplikacji internetowej do uruchomienia rozszerzenia.

Wdróż reguły bezpieczeństwa

Przykładowa aplikacja tego laboratorium kodowania zawiera zestawy reguł bezpieczeństwa dla Firestore i Cloud Storage dla Firebase. Po wdrożeniu tych reguł bezpieczeństwa w projekcie Firebase dane w Twojej bazie danych i w zasobniku będą lepiej chronione przed niewłaściwym wykorzystaniem.

Reguły te można wyświetlić w plikach firestore.rules i storage.rules .

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

   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 opcję Tak .

Zaktualizuj kod aplikacji, aby uruchomić rozszerzenie

W aplikacji Recenzja nowa recenzja dodana do Firestore uruchamia rozszerzenie w celu podsumowania recenzji.

1. W edytorze kodu otwórz functions/add-mock-reviews.js .
2. Zastąp zmienną reviewWithPrompt następującym kodem, który poprosi model języka o krótszą recenzję.

   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 następującym kodem, który utworzy dokument recenzji, aby można go było 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 Insert code below, to import your Firebase Callable Cloud Function , zaimportuj wywoływalną funkcję Firebase HTTP za pomocą pomocnika httpsCallable :

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

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

   await addMockReviews();
   

7. Zapisz plik.

Wdróż funkcję dodawania nowych recenzji

Aplikacja internetowa Reviewly korzysta z funkcji chmury w celu dodawania recenzji. Jednak obecnie funkcja chmury nie jest wdrożona.

Aby wdrożyć swoją funkcję za pomocą interfejsu CLI Firebase, wykonaj następujące kroki:

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

   firebase deploy --only functions
   

3. Jeśli Permission denied while using the Eventarc Service Agent lub podobny błąd, odczekaj kilka minut , a następnie ponów polecenie.

Właśnie wdrożyłeś swoją pierwszą niestandardową funkcję w Cloud Functions. Konsola Firebase oferuje pulpit nawigacyjny , w którym możesz zobaczyć wszystkie funkcje wdrażane w projekcie Firebase.

Uruchom i wyświetl ponownie aplikację internetową Reviewly (teraz z funkcjonalnością)

Aby uruchomić i wyświetlić działającą już aplikację internetową, wykonaj następujące kroki:

1. W terminalu uruchom ponownie serwer:

   npm run dev
   

2. W przeglądarce przejdź do adresu URL widocznego na terminalu. Na przykład: http://localhost:8080 .
3. W aplikacji kliknij Dodaj kilka próbnych recenzji i poczekaj kilka sekund, aż pojawi się kilka długich recenzji.
   W tle językowe zadania z rozszerzeniem PaLM API reagują na nowy dokument reprezentujący nową recenzję. Podpowiedź dodana wcześniej wymaga krótszego podsumowania z modelu językowego.
4. Aby wyświetlić całą recenzję i zachętę użytą do recenzji, kliknij jedną z recenzji, a następnie wybierz opcję Pokaż zachętę PaLM .

8. Skonfiguruj rozszerzenie „Chatbot with PaLM API” dla aplikacji Chatbot

Zainstaluj Chatbota z rozszerzeniem PaLM API

1. Przejdź do Chatbota z rozszerzeniem PaLM API .
2. Kliknij Zainstaluj w konsoli Firebase .
3. Wybierz swój projekt Firebase.
4. Kliknij Dalej > Dalej > Dalej , aż dojdziesz do sekcji Konfiguruj rozszerzenie .
5. W polu tekstowym Ścieżka kolekcji wpisz users/{uid}/discussion/{discussionId}/messages .
6. Z listy rozwijanej lokalizacji Cloud Functions wybierz Iowa (us-central1) lub lokalizację wybraną wcześniej dla Firestore i Cloud Storage.
7. Z listy rozwijanej Model języka wybierz chat-bison .
8. Pozostaw wszystkie pozostałe wartości jako domyślne.
9. Kliknij opcję Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj Chatbota z rozszerzeniem PaLM API

Chociaż celem tych zajęć z programowania jest interakcja z Chatbotem z rozszerzeniem API PaLM za pośrednictwem aplikacji internetowej, warto zrozumieć, jak działa rozszerzenie, uruchamiając je za pomocą konsoli Firebase. Rozszerzenie uruchamia się, gdy w kolekcji users/{uid}/discussion/{discussionId}/messages tworzony jest dokument Cloud Firestore.

1. W konsoli Firebase przejdź do Firestore .
2. Kliknij Rozpocznij zbieranie .
   1. W polu tekstowym Identyfikator kolekcji wprowadź users i kliknij Dalej .
   2. W polu tekstowym Identyfikator dokumentu kliknij opcję Auto-ID , a następnie kliknij przycisk Zapisz .
3. W kolekcji users kliknij Rozpocznij zbieranie .
   
   1. W polu tekstowym Identyfikator kolekcji wpisz discussion i kliknij Dalej .
   2. W polu tekstowym Identyfikator dokumentu kliknij opcję Auto-ID , a następnie kliknij przycisk Zapisz .
4. W zbiorze discussion kliknij Rozpocznij zbieranie .
   
   1. W polu tekstowym Identyfikator kolekcji wpisz messages , a następnie kliknij Dalej .
   2. W polu tekstowym Identyfikator dokumentu kliknij opcję Auto-ID .
   3. W polu tekstowym Pole wpisz prompt .
   4. W polu tekstowym Wartość wpisz Tell me 5 random fruits .
   5. Kliknij Zapisz i poczekaj 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 opcję Auto-ID .
   2. W polu tekstowym Pole wpisz prompt .
   3. W polu tekstowym Wartość wpisz And now, vegetables .
   4. Kliknij Zapisz i poczekaj kilka sekund. Kolekcja messages zawiera teraz dokument zawierający odpowiedź na zapytanie.

9. Skonfiguruj aplikację Chatbot do korzystania z Firebase

Aby uruchomić aplikację Chatbot , musisz skonfigurować kod aplikacji i interfejs CLI Firebase do interakcji z projektem Firebase.

Dodaj usługi i konfigurację Firebase do kodu swojej aplikacji

Aby móc korzystać z Firebase, baza kodu Twojej aplikacji wymaga zestawów SDK Firebase dla usług, z których chcesz korzystać, oraz konfiguracji Firebase, która informuje te zestawy SDK, którego projektu Firebase mają używać.

Przykładowa aplikacja tego laboratorium programistycznego zawiera już cały niezbędny kod importu i inicjalizacji zestawów SDK (zobacz chatbot-start/lib/firebase/firebase.js ), więc nie musisz ich dodawać. Jednak przykładowa aplikacja ma tylko wartości zastępcze dla konfiguracji Firebase (patrz chatbot-start/lib/firebase/firebase-config.js ), więc musisz zarejestrować swoją aplikację w projekcie Firebase, aby uzyskać unikalne wartości konfiguracji Firebase dla swojego aplikacja.

1. W konsoli Firebase w projekcie Firebase przejdź do przeglądu projektu i kliknij Web (lub kliknij Dodaj aplikację, jeśli zarejestrowałeś już aplikację w projekcie).
2. W polu tekstowym Pseudonim aplikacji wprowadź niezapomniany pseudonim aplikacji, np. My Chatbot app .
3. Nie zaznaczaj pola wyboru Skonfiguruj także hosting Firebase dla tej aplikacji . Te kroki wykonasz w dalszej części ćwiczeń z kodowania.
4. Kliknij opcję Zarejestruj aplikację .
5. Konsola wyświetla fragment kodu służący do dodawania i inicjowania pakietu SDK Firebase za pomocą obiektu konfiguracyjnego Firebase specyficznego dla aplikacji. Skopiuj wszystkie właściwości z obiektu konfiguracyjnego Firebase.
6. W edytorze kodu otwórz plik chatbot-start/lib/firebase/firebase-config.js .
7. Zastąp wartości zastępcze wartościami, które właśnie skopiowałeś. Nie ma problemu, jeśli masz właściwości i wartości usług Firebase, których nie używasz w aplikacji Chatbot .
8. Zapisz plik.
9. W konsoli Firebase kliknij Kontynuuj w konsoli .

Skonfiguruj terminal tak, aby uruchamiał polecenia Firebase CLI w projekcie Firebase

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

   cd ../chatbot-start
   

3. Spraw, aby interfejs CLI Firebase uruchamiał polecenia dla konkretnego projektu Firebase:

   firebase use YOUR_PROJECT_ID
   

Skonfiguruj bazę kodu swojej aplikacji, aby korzystać z hostingu Firebase obsługującego platformę

W tym laboratorium z programowania wykorzystywane są platformy internetowe z hostingiem (wersja zapoznawcza) z aplikacją internetową Chatbot .

1. W swoim terminalu włącz platformy internetowe z Firebase Hosting:

   firebase experiments:enable webframeworks
   

2. Zainicjuj hosting Firebase:

   firebase init hosting
   

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

Uruchom i wyświetl aplikację internetową Chatbot

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

   npm install
   firebase emulators:start --only hosting
   

2. W przeglądarce przejdź do adresu URL hostowanego lokalnie. W większości przypadków jest to http://localhost:5000/ lub coś podobnego.

Strona powinna się załadować, ale zauważysz, że brakuje różnych funkcji. Dodamy je w kolejnych krokach tego ćwiczenia z kodowania.

Rozwiązywanie problemów z działaniem aplikacji internetowej

Jeśli widzisz błąd na stronie internetowej, która zaczyna się w ten sposób: Error: Firebase session cookie has incorrect... , musisz usunąć wszystkie pliki cookie ze środowiska localhost. W tym celu postępuj zgodnie z instrukcją usuwania plików cookies | Dokumentacja DevTools. .

10. Dodaj funkcjonalność do aplikacji Chatbot

W ostatnim kroku tych ćwiczeń z programowania uruchomiłeś lokalnie aplikację Chatbot , ale nie miała ona zbyt wielu funkcji i nie korzystała jeszcze z zainstalowanego rozszerzenia. Na tym etapie ćwiczeń z programowania dodasz tę funkcję i użyjesz aplikacji internetowej do uruchomienia rozszerzenia.

Wdróż reguły bezpieczeństwa

Przykładowa aplikacja tego laboratorium kodowania zawiera zestawy reguł bezpieczeństwa dla Firestore i Cloud Storage dla Firebase. Po wdrożeniu tych reguł bezpieczeństwa w projekcie Firebase dane w Twojej bazie danych i w zasobniku będą lepiej chronione przed niewłaściwym wykorzystaniem.

Reguły te można wyświetlić w plikach firestore.rules i storage.rules .

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

   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 opcję Tak .

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

W aplikacji Chatbot nowa wiadomość od użytkownika jest dodawana do Firestore, co powoduje, że rozszerzenie wygeneruje odpowiedź.

1. W edytorze kodu otwórz plik lib/firebase/firestore.js .
2. Na końcu pliku znajdź funkcję addNewMessage , która obsługuje dodawanie nowych wiadomości.
   Funkcja przyjmuje już następujące właściwości obiektu:
   

   Parametr	Opis
   userId	Identyfikator zalogowanego użytkownika
   discussionId	Identyfikator dyskusji, do której dodano wiadomość
   message	Treść wiadomości
   db	Instancja bazy danych Firestore

   Po przygotowaniu tych zmiennych możesz dodać dokument Cloud Firestore reprezentujący nową wiadomość.
3. W treści funkcji addNewMessage po // Insert your code below ⬇️ komentarzu dodaj następujący 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 skonstruować zapytanie w celu uzyskania wiadomości

1. Wciąż w pliku lib/firebase/firestore.js znajdź funkcję getMessagesQuery , która musi zwrócić zapytanie Cloud Firestore lokalizujące wiadomości przechowywane w ścieżce kolekcji users/{uid}/discussion/{discussionId}/messages .
2. Zastąp całą funkcję getMessagesQuery następującym 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. Wciąż w pliku lib/firebase/firestore.js znajdź funkcję handleMessageDoc , która odbiera dokument Cloud Firestore reprezentujący pojedynczą wiadomość.
   Ta funkcja wymaga formatowania i struktury danych w sposób mający sens dla interfejsu użytkownika aplikacji Chatbot .
2. Zastąp całą funkcję handleMessageDoc następującym 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.

Uruchom i wyświetl ponownie aplikację internetową Chatbot (teraz z funkcjonalnością)

Aby uruchomić i wyświetlić działającą już aplikację internetową, wykonaj następujące kroki:

1. W przeglądarce wróć do zakładki z aplikacją internetową Chatbot i załaduj ponownie stronę.
2. Kliknij Zaloguj się przez Google .
3. W razie potrzeby wybierz swoje konto Google.
4. Po zalogowaniu załaduj ponownie 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.

Kolejną zaletą Chatbota z rozszerzeniem PaLM API jest historia rozmów.

Aby zobaczyć przykład jego zdolności do nawiązywania kontaktu z kontekstem historycznym, wykonaj następujące kroki:

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

Aplikacja internetowa Chatbot odpowiada wiedzą historyczną. Mimo że w Twoim ostatnim pytaniu nie określono pięciu losowych warzyw, Chatbot z rozszerzeniem PaLM API rozumie pytania uzupełniające.

11. Skonfiguruj rozszerzenie „Konwertuj tekst na mowę” dla aplikacji Video Hint

Zainstaluj rozszerzenie konwertowania tekstu na mowę

1. Przejdź do konwersji tekstu na rozszerzenie mowy .
2. Kliknij Instaluj w konsoli Firebase .
3. Wybierz swój projekt Firebase.
4. Kliknij Następny .
5. W sekcji API recenzji i utworzonych zasobów kliknij Włącz obok dowolnych usług sugerowanych:

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

7. Kliknij Następny .
8. W polu tekstowym ścieżki kolekcji wprowadź bot .
9. W polu tekstowym ścieżki pamięci Wprowadź tts .
10. Pozostaw wszystkie inne wartości jako ich domyślne opcje.
11. Kliknij Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj konwertowanie tekstu na rozszerzenie mowy

Podczas gdy celem tego Codelab jest interakcja z rozszerzeniem tekstu na rozszerzenie tekstu na mowę za pośrednictwem aplikacji internetowej, pomocne jest zrozumienie, jak działa rozszerzenie poprzez wyzwalanie rozszerzenia za pomocą konsoli Firebase. Rozszerzenie uruchamia się, gdy w kolekcji bot jest tworzony dokument Cloud Firestore.

Aby zobaczyć, jak działa rozszerzenie za pomocą konsoli Firebase, wykonaj następujące kroki:

1. W konsoli Firebase przejdź do Firestore
2. Kliknij Kolekcja start .
3. W polu tekstowym identyfikatora kolekcji wprowadź bot .
4. Kliknij Następny .

5. W polu tekstowym Dokument ID kliknij Auto-ID .
6. W polu tekstowym wprowadź text .
7. W polu tekstowym Wartość wprowadź The quick brown fox jumps over the lazy dog .
8. Kliknij Zapisz .

Aby zobaczyć i usłyszeć utworzony plik MP3, wykonaj następujące kroki:

1. W konsoli Firebase przejdź do przechowywania .
2. W okienku, w którym możesz przesyłać pliki, zwróć uwagę na nazwę wiadra po wartości gs:// . To nazwa twojego domyślnego wiadra dla tego projektu. Potrzebujesz go w różnych zadaniach w tym kodelab.

3. W konsoli Google Cloud przejdź do przechowywania w chmurze .
4. Wybierz swój projekt.
   Jeśli nie widzisz swojego projektu na najnowszej liście projektów, kliknij Projekt , aby zlokalizować swój projekt w Picker Picker.

5. Wybierz domyślne wiadro pamięci.
6. Przejdź do tts/ Folder.
7. Kliknij plik MP3.
8. Na końcu pliku MP3 kliknij i zauważ, że twój tekst jest przekonwertowany na mowę.

12. Skonfiguruj rozszerzenie „Filmy z etykietami z AI Video Video Ai” dla aplikacji wideo wideo

Zainstaluj filmy z etykietami z rozszerzeniem AI Cloud Video AI

1. Przejdź do filmów z etykietami z rozszerzeniem AI Video Cloud Video .
2. Kliknij Instaluj w konsoli Firebase .
3. Wybierz swój projekt Firebase.
4. Kliknij Dalej> Dalej, aż osiągniesz sekcję rozszerzenia konfiguracji .
5. Z rozwijanej lokalizacji funkcji w chmurze wybierz obsługiwaną lokalizację (lokalizację, którą wcześniej wybrałeś do przechowywania Firestore i chmury lub najbliższe). Aby uzyskać obsługiwane lokalizacje, zobacz sekcję location_id w AnnotateVideoRequest .
6. Z rozwijanego modelu wybierz najnowsze .
7. Z menu rozwijanego kamery stacjonarnej wybierz nr .
8. Pozostaw wszystkie inne wartości jako domyślne.
9. Kliknij Zainstaluj rozszerzenie i poczekaj na zainstalowanie rozszerzenia.

Wypróbuj filmy z etykietami z rozszerzeniem AI Cloud Video AI

Podczas gdy celem tego Codelab jest interakcja z filmami z etykietami z rozszerzeniem AI Video Video za pośrednictwem aplikacji internetowej, pomocne jest zrozumienie, jak działa rozszerzenie poprzez wyzwalanie rozszerzenia za pomocą konsoli FireBase. Rozszerzenie uruchamia się, gdy plik wideo jest przesyłany do wiadra pamięci.

Aby zobaczyć, jak działa rozszerzenie za pomocą konsoli Firebase, wykonaj następujące kroki:

1. Przejdź do przechowywania w projekcie FireBase > Utwórz folder .
2. W polu tekstowym nazwy folderu wprowadź video_annotation_input .

3. Kliknij Folder Dodaj .
4. W folderze video_annotation_input kliknij plik przesyłania .
5. W ai-extensions-codelab/video-hint-start/public/videos , który sklonowałeś lub pobrałeś wcześniej, wybierz pierwszy plik wideo.
6. Z powrotem w przeglądarce, w Google Cloud Console, przejdź do przechowywania w chmurze .
7. Wybierz domyślne wiadro pamięci, które zauważyłeś wcześniej.
8. Kliknij folder video_annotation_output .
   Jeśli nie widzisz folderu video_annotation_output , poczekaj kilka sekund i odśwież stronę, ponieważ interfejs API inteligencji wideo może nadal przetwarzać wideo.

9. Zauważ, że istnieje plik JSON, który jest zgodny z podobną nazwą do przesłanego wcześniej pliku.
10. Kliknij Pobierz nazwę pliku .
11. Otwórz pobrany plik JSON w edytorze kodu. Zawiera surowe dane wyjściowe z interfejsu API Intelligence Video, który zawiera wykryte etykiety przesłanego wideo.

13. Skonfiguruj aplikację do nośnika wideo, aby używać Firebase

Aby uruchomić aplikację wideo , musisz skonfigurować kod aplikacji i Firebase CLI, aby wchodzić w interakcje z projektem FireBase.

Dodaj usługi FireBase i konfigurację do kodu aplikacji

Aby korzystać z FireBase, baza kodu aplikacji potrzebuje SDKS FireBase do usług, których chcesz użyć, oraz konfigurację Firebase, która informuje o tym, których projekt Firebase Project.

Przykładowa aplikacja Codelab zawiera już cały niezbędny kod importu i inicjalizacji dla SDK (patrz video-hint-start/lib/firebase/firebase.js ), więc nie musisz ich dodawać. Jednak przykładowa aplikacja ma tylko wartości zastępcze dla konfiguracji Firebase (patrz video-hint-start/lib/firebase/firebase-config.js ), więc musisz zarejestrować swoją aplikację w projekcie FireBase, aby uzyskać unikalne wartości konfiguracji Firebase Configuration Wartości konfiguracji dla Twojej aplikacji.

1. W konsoli Firebase, w projekcie Firebase, przejdź do przeglądu projektu , a następnie kliknij Web (lub kliknij Dodaj aplikację, jeśli już zarejestrowałeś aplikację w projekcie).
2. W polu tekstowym aplikacji wprowadź pamiętny pseudonim aplikacji, taki jak My Video Hint app .
3. Nie wybieraj również konfiguracji hostingu FireBase dla tej aplikacji . Zrobisz te kroki później w Codelab.
4. Kliknij opcję Zarejestruj aplikację .
5. Konsola wyświetla fragment kodu do dodawania i inicjalizacji SDK FireBase za pomocą obiektu konfiguracji FireBase specyficznej dla aplikacji. Skopiuj wszystkie właściwości w obiekcie konfiguracji FireBase.
6. W edytorze kodu otwórz plik video-hint-start/lib/firebase/firebase-config.js .
7. Zastąp wartości zastępcze wartościami, które właśnie skopiowałeś. Jest OK, jeśli masz właściwości i wartości usług Firebase, których nie używasz w aplikacji do nośnika wideo .
8. Zapisz plik.
9. Po powrocie do konsoli Firebase kliknij kontynuuj konsolę .

Skonfiguruj swój terminal, aby uruchomić polecenia CLI Firebase w stosunku do projektu Firebase

1. W terminalu naciśnij Control+C , aby powstrzymać serwer przed uruchomieniem poprzedniej aplikacji internetowej.
2. W terminalu przejdź do folderu aplikacji video-hint-start :

   cd ../video-hint-start
   

3. Wykonaj polecenia CLI Firebase CLI przeciwko określonemu projektowi Firebase:

   firebase use YOUR_PROJECT_ID
   

Skonfiguruj bazę kodu aplikacji, aby używać hostingu FireBase Framework.

Ten Codelab korzysta z frameworków internetowych z hostingiem (podgląd) z aplikacją internetową wideo .

1. W terminalu włącz frameworki internetowe z hostingiem Firebase:

   firebase experiments:enable webframeworks
   

2. Zainicjuj hosting bazy ogniowej:

   firebase init hosting
   

3. Czy po wyświetleniu Detected an existing bazy kodowej Next.js codebase in your current directory, should we use this? , naciśnij Y.
4. W przypadku monitu In which region would you like to host server-side content, if applicable? , wybierz region domyślny lub lokalizację, którą wcześniej wybrałeś do pamięci Firestore i Cloud Storage, a następnie naciśnij Enter (lub return na macOS).
5. Po wyświetleniu monitu w Set up automatic builds and deploys with GitHub? , Press N .

Uruchom i wyświetl aplikację internetową WIND WIND VIVE

1. W terminalu zainstaluj zależności w 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 lokalnie hostowanego adresu URL hostingowego. W większości przypadków jest to http: // localhost: 5000/ lub coś podobnego.

Strona powinna się załadować, ale zauważysz, że brakuje różnych funkcji. Dodamy je w kolejnych krokach tego kodelab.

Rozwiązywanie problemów z uruchomieniem aplikacji internetowej

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

1. Przejdź do dostarczonego adresu URL.

2. Kliknij Zapisz i poczekaj, aż status zmieni się z budynku na włączone .

14. Dodaj funkcjonalność do aplikacji do nośnika wideo

W ostatnim etapie tego kodelab uruchomiłeś aplikację do nośnika wideo lokalnie, ale nie miała ona zbyt wiele funkcjonalności i jeszcze nie korzystał z zainstalowanego rozszerzenia. Na tym etapie Codelab dodasz tę funkcję i użyjesz aplikacji internetowej do wyzwolenia rozszerzenia.

Wdrażać zasady bezpieczeństwa

Przykładowa aplikacja Codelab zawiera zestawy zasad bezpieczeństwa dla Firestore i przechowywania w chmurze dla Firebase. Po wdrożeniu tych zasad bezpieczeństwa w projekcie Firebase dane w bazie danych i wiadrze są lepiej chronione przed niewłaściwym użyciem.

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

1. Aby wdrożyć te zasady bezpieczeństwa, uruchom to polecenie w terminalu:

   firebase deploy --only firestore:rules,storage
   

2. Jeśli zostaniesz zapytany: "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 rozwinąć folder functions .
   Ten folder zawiera kilka funkcji, które łączą się w celu utworzenia rurociągu rozszerzenia. Poniższa tabela zawiera listę i opisuje każdą funkcję:

   Funkcjonować	Opis
   functions/01-handle-video-upload.js	Pierwszy krok w rurociągu rozszerzenia. Przetwarza przesyłany plik wideo użytkownika.
   functions/02-handle-video-labels.js	Drugi krok w rurociągu przedłużenia. Przetwarza plik labelski wideo, który został wygenerowany przez rozszerzenie storage-label-videos .
   functions/03-handle-audio-file.js	Trzeci krok w rurociągu przedłużenia. Obsługuje transkrybowany plik audio.

   Jednak nadal musisz dodać plik, który grupuje te funkcje razem.
2. W pliku functions/index.js Dodaj następujący 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 używa modułów JavaScript do importowania i eksportowania funkcji z pliku index.js , dzięki czemu istnieje jedna scentralizowana lokalizacja dla wszystkich funkcji.

Zaktualizuj kod do obsługi przesyłania wideo

1. W edytorze kodu otwórz plik lib/firebase/storage.js .
2. Znajdź funkcję uploadVideo .
   Ta funkcja odbiera parametry userId , filePath i file . Te dane wystarczą, aby przesłać plik do przechowywania w chmurze.
3. W treści funkcji uploadVideo dodaj następujący kod:

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

Wdrażaj swoje funkcje

Aby rozmieścić swoje funkcje za pomocą CLI Firebase, wykonaj następujące kroki:

1. W terminalu, będąc jeszcze w folderze video-hint-start , naciśnij Control+C , aby zatrzymać bieżący proces.
2. Wdrażaj swoje funkcje:

   firebase deploy --only functions
   

   Jeśli zostaniesz zapytany o usunięcie wcześniejszych funkcji chmur, wybierz No .
3. Jeśli zobaczysz wiadomość podobną do Permission denied while using the Eventarc Service Agent , poczekaj kilka minut , a następnie ponownie sprawdź polecenie.
4. Po zakończeniu polecenia uruchom aplikację ponownie:

   firebase emulators:start --only hosting
   

Uruchom i wyświetl ponownie aplikację internetową WETWIORA (teraz z funkcjonalnością)

Aby uruchomić i wyświetlić funkcjonalną aplikację internetową, wykonaj następujące kroki:

1. W przeglądarce znajdź kartę, w której nawigowałeś do http: // localhost: 5000.
2. W razie potrzeby kliknij Zaloguj się w Google i wybierz swoje konto Google.
3. Kliknij Prześlij przykładowy film nr 1 i poczekaj kilka minut, aby zobaczyć wyniki podsumowania wideo.
4. Jeśli nie widzisz żadnych wyników po przesłaniu filmu, zobacz problemy z błędami z funkcjami chmur w załączniku tego Codelab.

15. Wniosek

Gratulacje! Wiele osiągnąłeś w tym Codelab!

Zainstalowane i skonfigurowane rozszerzenia base

Użyłeś konsoli FireBase do skonfigurowania i zainstalowania różnych rozszerzeń AI . Korzystanie z rozszerzeń jest wygodne, ponieważ nie musisz pisać dużej ilości kodu bojownika, który zajmuje się uwierzytelnianiem z usługami w chmurze Google, czytaniem i pisaniem z Firestore oraz interakcji z usługami Google Cloud - i różnymi niuansami związanymi z tymi zadaniami.

Pracował z rozszerzeniami przy użyciu konsoli Firebase

Zamiast skakać prosto w kod, poświęciłeś czas na zrozumienie, jak działają rozszerzenia AI, w oparciu o dane wejściowe dostarczone przez konsolę do Firestore lub chmur. Ten rodzaj interakcji może być szczególnie przydatny, jeśli potrzebujesz debugowania wyjścia rozszerzenia.

Zbudował trzy aplikacje internetowe zasilane przez AI, które używają rozszerzeń Firebase

Recenzja

W recenzji aplikacji internetowej użyłeś zadań językowych z rozszerzeniem Palm API , aby podsumować długie recenzje, które użytkownicy zostawili na produkt koszulki. Poprosiłeś również, aby model językowy udzielił odpowiedzi JSON na zapytanie, w którym JSON dostarczył ocenę gwiazdy i podsumowaną recenzję oryginalnej recenzji długiej formy.

Opcjonalne ćwiczenie : firma T-shirt jest zadowolona z podsumowanych recenzji, ale poprosili o dodatkowe podsumowanie charakteru wady. Czy możesz dostosować wiersz do zwrócenia podsumowania wady, a następnie dołączyć to podsumowanie w interfejsie użytkownika aplikacji internetowej?

Chatbot

W aplikacji internetowej Chatbot korzystałeś z Chatbot z rozszerzeniem Palm API , aby zapewnić użytkownikowi interaktywny interfejs czatu, który obejmuje kontekst historyczny w rozmowach - gdzie każda wiadomość jest przechowywana w dokumencie Firestore, który jest zaskoczony określonym użytkownikiem.

Opcjonalne ćwiczenie : uczniowie byli zadowoleni z chatbota, ale pracownicy chcieliby kilku ulepszeń. Studenci powinni otrzymać pytania prowokujące do myślenia po udzieleniu ich odpowiedzi. Na 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 osiągnąć, możesz użyć konfigurowalnego kontekstu .

Wskazówka wideo

W aplikacji internetowej WIND WIND SING użyłeś konwersji tekstu na mowę , zadania językowe z Palm API oraz filmy z etykietami z rozszerzeniami wideo w chmurze, aby utworzyć rurociąg rozszerzenia, który daje opis i audio filmu.

Opcjonalne ćwiczenie : Departament Rządowy uznał prototyp interesujący, a teraz chciałby również, aby użytkownik mógł kliknąć etykietę tekstową, aby przeskakiwać do punktu wideo, w którym etykieta jest wykrywana.

16. Dodatek: Rozwiązywanie problemów z błędami z funkcjami w chmurze

Jeśli Twoja aplikacja internetowa nie działa zgodnie z oczekiwaniami i uważasz, że może to wynikać z funkcji, wykonaj kroki na tej stronie rozwiązywania problemów.

Zezwalaj na publiczny nieautentyczny dostęp

Jeśli otrzymasz jakiekolwiek błędy związane z uprawnieniami w panelu konsolowym Chrome DevTools, wykonaj następujące kroki:

1. Przeczytaj przegląd uwierzytelnienia | Strona uruchamiana w chmurze
2. Kliknij link, aby wyświetlić i wypełnić wymagane zadania, aby umożliwić publiczny nieautentyczny dostęp do funkcji.

3. Wróć do aplikacji recenzji . Na przykład: http: // localhost: 8080.
4. Kliknij Dodaj kilka próbnych recenzji i poczekaj kilka sekund.
   • Jeśli pojawią się recenzje: nie musisz kontynuować tych kroków rozwiązywania problemów i możesz skakać prosto, aby skonfigurować sekcję aplikacji internetowej Chatbot w tym Codelab.
   • Jeśli nie pojawią się recenzje: kontynuuj tę sekcję rozwiązywania problemów.

Obsługuj niewystarczające błędy uprawnień

1. W konsoli Firebase przejdź do funkcji .
2. Najedź na funkcję addMockReviews , a następnie kliknij > Wyświetl dzienniki .

3. Przewiń dzienniki, aż znajdziesz błąd podobny do jednego z następujących:

   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 przejdź do strony IAM uprawnienia , a następnie wybierz swój projekt.
5. W tabeli znajdź kolumnę nazw .
   Na stronie IAM i administratora znajduje się tabela użytkowników i ról. Kolumna nazwy w tabeli opisuje, do czego służy użytkownik lub główny. Możesz mieć główną informację o nazwie domyślnego konta usług obliczeniowych .

Jeśli zobaczysz domyślne konto usługi obliczeniowej , wykonaj następujące kroki:

1. Kliknij Edytuj dyrektor .

2. Kontynuuj z sekcją Dodaj role do domyślnego konta serwisowego w tym Codelab.

Jeśli nie widzisz domyślnego konta usług obliczeniowych , wykonaj następujące kroki:

1. Kliknij Dostęp do Grant .
2. W polu tekstowym New Principals wprowadź compute .
3. W menu wyświetlonych autosugestii wybierz domyślne konto serwisowe obliczeniowe .

Dodaj role do domyślnego konta usług obliczeniowych

W sekcji przypisuj role z domyślnego konta usług obliczeniowych :

1. Rozwiń menu Wybierz rolę .
2. W polu tekstowym Filtr wprowadź Cloud Datastore User .
3. W menu wyświetlonych autosugenów wybierz Cloud DataStore User .
4. Kliknij Dodaj kolejną rolę .
   1. Rozwiń menu Wybierz rolę .
   2. W polu tekstowym Filtr wprowadź Cloud Storage for Firebase Admin .
   3. W menu wyświetlonych autosugenów wybierz pamięć chmur dla administratora FireBase .
5. Kliknij Dodaj kolejną rolę .
   1. Rozwiń menu Wybierz rolę .
   2. W polu tekstowym Filtr wprowadź Cloud Storage for Firebase Service Agent .
   3. W menu wyświetlonych autosugestów wybierz pamięć chmur dla agenta serwisowego FireBase .
6. Kliknij Zapisz .