Building Applications in the AI Era

1. Omówienie

W tym module użyjesz produktów generatywnej AI od Google do tworzenia infrastruktury w Google Cloud przy pomocy Gemini Cloud Assist, wysyłasz zapytania do danych BigQuery za pomocą funkcji SQL w Data Canvas, piszesz kod w notatnikach Jupyter w Colab Enterprise i w Eclipse Theia (Visual Studio Code) przy pomocy Gemini Code Assist, a także integrujesz funkcje wyszukiwania i czatu oparte na AI, które korzystają z źródeł danych Cloud Storage i BigQuery w Vertex AI Agent Builder.

Naszym celem jest stworzenie witryny z przepisami i przepisami kulinarnymi o nazwie AI Recipe Haven. Witryna zostanie utworzona w Pythonie i Streamlit i będzie zawierać 2 główne strony. Cooking Advice będzie hostem chatbota, który utworzymy za pomocą Gemini i Kreatora agentów Vertex AI. Chatbot będzie korzystać z źródła opartego na danych, które jest powiązane z grupą książek kucharskich. Będzie on udzielać porad kulinarnych i odpowiadać na pytania związane z gotowaniem. Wyszukiwarka przepisów będzie wyszukiwarką obsługiwaną przez Gemini, tym razem opartą na bazie danych przepisów BigQuery.

Jeśli napotkasz problemy z jakimkolwiek kodem w tym ćwiczeniu, rozwiązania dla wszystkich plików kodu znajdują się w repozytorium GitHub tego ćwiczenia na gałęzi solution.

Cele

Z tego modułu nauczysz się, jak:

  • Aktywowanie i używanie Gemini Cloud Assist
  • Tworzenie aplikacji wyszukiwania w Kreatorze agentów Vertex AI na potrzeby chatbota z poradami kulinarnymi
  • Ładowanie i oczyszczanie danych w notatniku Colab Enterprise przy pomocy Gemini Code Assist
  • Tworzenie aplikacji wyszukiwania w Kreatorze agentów Vertex AI na potrzeby generatora przepisów
  • Za pomocą Gemini stwórz podstawową aplikację internetową w Pythonie i Streamlit
  • Wdrażanie aplikacji internetowej w Cloud Run
  • Połącz stronę Cooking Advice z naszą aplikacją Agent Builder do wyszukiwania przepisów
  • (Opcjonalnie) Połącz stronę wyszukiwania przepisów z aplikacją konstruktora agenta do wyszukiwania przepisów
  • (Opcjonalnie) Zapoznaj się z ostateczną aplikacją

2. Wymagania wstępne

  1. Jeśli nie masz jeszcze konta Google, utwórz je.
    • Używasz konta osobistego, a nie służbowego lub szkolnego. Konta służbowe i szkolne mogą mieć ograniczenia, które uniemożliwiają włączenie interfejsów API potrzebnych w tym laboratorium.

3. Konfigurowanie projektu

  1. Zaloguj się w konsoli Google Cloud.
  2. Włącz rozliczenia w Cloud Console.
  3. Utwórz nowy projekt lub użyj istniejącego.
  4. Sprawdź, czy płatności są włączone w sekcji Moje projekty w Rozliczeniach usługi Google Cloud.
    • Jeśli w kolumnie Billing account nowego projektu widać wartość Billing is disabled:
      1. Kliknij 3 kropki w kolumnie Actions.
      2. Kliknij Zmień rozliczenia.
      3. Wybierz konto rozliczeniowe, którego chcesz użyć.
    • Jeśli uczestniczysz w wydarzeniu na żywo, konto będzie prawdopodobnie nazywać się Próbne konto rozliczeniowe Google Cloud Platform.

4. Aktywowanie i używanie Gemini Cloud Assist

W tym zadaniu aktywujemy i użyjemy Gemini Cloud Assist. Podczas pracy w Google Cloud Console Gemini Cloud Assist może udzielać porad, pomagać w tworzeniu, konfigurowaniu i monitorowaniu infrastruktury Google Cloud, a nawet sugerować polecenia gcloud i pisać skrypty Terraform.

  1. Aby aktywować Cloud Assist, kliknij pole wyszukiwania u góry interfejsu Cloud Console i wybierz Zadaj pytanie Gemini lub Zadaj pytanie Gemini w konsoli Cloud.
  2. Przewiń do sekcji Wymagane interfejsy API na stronie i włącz interfejs Gemini for Google Cloud API.
  3. Jeśli interfejs czatu nie pojawi się od razu, kliknij Rozpocznij czat. Zacznij od poproszenia Gemini o wyjaśnienie niektórych zalet korzystania z edytora Cloud Shell. Poświęć kilka minut na zapoznanie się z wygenerowaną odpowiedzią.
  4. Następnie zapytaj o zalety Kreatora agentów i o to, jak może on pomóc w generowaniu odpowiedzi.
  5. Na koniec przyjrzyjmy się porównaniu. W oknie czatu Gemini w konsoli Google Cloud Console zadaj to pytanie:
    What are the major steps to creating a search app grounded in a GCS data source using Vertex AI Agent builder?
    

5. Tworzenie aplikacji wyszukiwania w Kreatorze agentów Vertex AI na potrzeby chatbota z poradami kulinarnymi

Strona internetowa, którą tworzymy, będzie zawierać stronę z poradami kulinarnymi z chatbotem, który pomoże użytkownikom znaleźć odpowiedzi na pytania związane z gotowaniem. Będzie ona korzystać z Gemini, bazując na źródle zawierającym 70 książek kucharskich z domeny publicznej. Książki kucharskie będą pełnić rolę źródła informacji, z którego Gemini będzie korzystać, aby odpowiadać na pytania.

  1. W polu wyszukiwania konsoli Cloud przejdź do Vertex AI. W panelu kliknij Włącz wszystkie zalecane interfejsy API. Może to potrwać kilka minut. Jeśli pojawi się wyskakujące okienko z informacją, że interfejs Vertex AI API musi zostać włączony, włącz go. Gdy interfejsy API zostaną włączone, możesz przejść do następnego kroku.
  2. Użyj wyszukiwarki, aby przejść do Kreatora agentów, a potem kliknij Dalej i aktywuj interfejs API.
  3. Jak sugerował Gemini w naszych wcześniejszych poradach, tworzenie aplikacji wyszukiwania w Agent Builder zaczyna się od utworzenia wiarygodnego źródła danych. Gdy użytkownik coś wyszukuje, Gemini rozumie pytanie i wie, jak tworzyć inteligentne odpowiedzi, ale informacje użyte w tej odpowiedzi będzie pobierać z źródła, a nie z własnej bazy wiedzy.W menu po lewej stronie kliknij Magazyny danychUtwórz magazyn danych.
  4. Książki kucharskie w domenie publicznej, których używamy na stronie z poradami kulinarnymi, znajdują się obecnie w zasobniku Cloud Storage w projekcie zewnętrznym. Wybierz typ źródła Cloud Storage.
  5. Sprawdź, ale nie zmieniaj domyślnych opcji związanych z typem importowanych informacji. Pozostaw typ importu ustawiony na Folder, a jako ścieżkę do zasobnika użyj: labs.roitraining.com/labs/old-cookbooks, a następnie kliknij Dalej.
  6. Nazwij magazyn danych: old-cookbooks. Kliknij EDYTUJ, zmień identyfikator na old-cookbooks-id i utwórz magazyn danych.

Kreator agentów Vertex AI obsługuje kilka typów aplikacji, a magazyn danych jest źródłem informacji o każdej z nich. Aplikacje wyszukiwania są przydatne do ogólnego użytku i wyszukiwania. Aplikacje do obsługi czatu służą do generowania przepływów w aplikacji chatbota/voicebota opartego na Dataflow. Aplikacje z rekomendacjami pomagają tworzyć lepsze systemy rekomendacji. Aplikacje agenta służą do tworzenia agentów opartych na generatywnej AI. Ostatecznie Agent prawdopodobnie najlepiej spełni nasze potrzeby, ale ponieważ jest to obecnie wersja podglądowa, pozostaniemy przy aplikacji wyszukiwania.

  1. W menu po lewej stronie kliknij Aplikacje, a potem Utwórz nową aplikację.
  2. Na karcie Wyszukaj swoją witrynę kliknij Utwórz. Nazwij aplikację cookbook-search. Kliknij Edytuj i ustaw identyfikator aplikacji na cookbook-search-id. Ustaw firmę na Google i kliknij Dalej.
  3. Sprawdź magazyn danych old-cookbooks utworzony kilka kroków wcześniej i utwórz aplikację wyszukiwania.

Jeśli przejrzysz kartę Aktywność, prawdopodobnie zauważysz, że książki kucharskie są nadal importowane i indeksowane. Agent Builder będzie indeksować tysiące stron zawartych w 70 książkach kucharskich, które mu udostępniliśmy. Może to zająć ponad 5 minut. Podczas gdy ono działa, załadujmy i oczyśćmy dane z bazy danych przepisów, aby użyć ich w generatorze przepisów.

6. Ładowanie i oczyszczanie danych w notatniku Colab Enterprise przy pomocy Gemini Code Assist

Google Cloud oferuje kilka głównych sposobów pracy z notatnikami Jupyter. Będziemy używać najnowszej usługi Google, czyli Colab Enterprise. Niektórzy z Was mogą znać usługę Colab od Google, która jest często używana przez osoby i organizacje, które chcą eksperymentować z notatnikami Jupyter w bezpłatnym środowisku. Colab Enterprise to komercyjna oferta Google Cloud, która jest w pełni zintegrowana z pozostałymi usługami Google w chmurze i w pełni wykorzystuje funkcje zabezpieczeń i zgodności z regulacjami środowiska GCP.

Jedną z funkcji Colab Enterprise jest integracja z Gemini Code Assist od Google. Asystent kodu może być używany w różnych edytorach kodu. Podczas pisania kodu może on oferować porady, a także wyświetlać płynne sugestie w kodze. Wykorzystamy tego asystenta generatywnego, gdy będziemy porządkować dane o przepisach.

  1. Użyj wyszukiwarki, aby przejść do Colab Enterprise, i kliknij Utwórz notatnik. Jeśli otrzymasz ofertę dotyczącą eksperymentowania z nowymi funkcjami Colab, zignoruj ją. Aby uruchomić środowisko uruchomieniowe, czyli moc obliczeniową notebooka, w prawym górnym rogu nowego notebooka kliknij Połącz.Connect
  2. Aby zmienić nazwę zeszytu na Data Wrangling, kliknij Plik > Zmień nazwę.Zmiana nazwy w menu z 3 kropkami
  3. Kliknij + Tekst, aby utworzyć nowe pole tekstowe, a następnie za pomocą strzałki w górę przenieś je, aby było pierwszą komórką na stronie.+ tekst i strzałka w górę
  4. Edytuj pole tekstowe i wpisz:
    # Data Wrangling
    
    Import the Pandas library
    
  5. W bloku kodu pod utworzonym przez Ciebie blokiem tekstu zacznij wpisywać imp. Gemini Code Assist powinien zaproponować resztę importu w szarym kolorze. Aby zaakceptować sugestię, naciśnij Tab.
    import pandas as pd
    
  6. Pod polem kodu importu utwórz kolejne pole tekstowe i wpisz:
    Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
    
  7. Utwórz i edytuj kolejny blok kodu. Ponownie zacznij pisać df = i sprawdź kod wygenerowany przez Gemini Code Assist. Jeśli nad wygenerowanym tekstem zobaczysz listę słów kluczowych Pythona, naciśnij klawisz Escape, aby wyświetlić sugerowany kod w jasnoszarym kolorze. Ponownie naciśnij Tab, aby zaakceptować sugestię. Jeśli Twoja propozycja nie zawierała wywołania funkcji head(), dodaj je.
    df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
    df.head()
    
  8. Kliknij pierwszą komórkę kodu, w której zaimportowano Pandas, i za pomocą menu Polecenia lub klawiatury uruchom wybraną komórkę. Na klawiaturze Shift+Enter uruchamia komórkę i przenosi fokus na następną komórkę, tworząc ją w razie potrzeby. Zanim przejdziesz dalej, poczekaj, aż komórka zostanie wykonana.UWAGA: jeśli komórka nie została wykonana, po jej lewej stronie zobaczysz [ ]. Podczas wykonywania komórki zobaczysz obracającą się animację. Gdy komórka się wypełni, pojawi się liczba, np. [13].
  9. Wykonaj komórkę, która wczytuje plik CSV do DataFrame. Poczekaj, aż plik zostanie załadowany, i sprawdź pierwsze 5 wierszy danych. To są dane o potrawach, które wczytamy do BigQuery, a potem użyjemy ich do utworzenia generatora przepisów.
  10. Utwórz nowy blok kodu i wpisz poniższy komentarz. Po wpisaniu komentarza przejdź do następnego wiersza kodu, aby wyświetlić sugestię df.columns. Zaakceptuj go, a potem uruchom komórkę.
    # List the current DataFrame column names
    
    Pokazaliśmy, że w notebooku Jupyter możesz uzyskać pomoc od Gemini Code Assist na 2 sposoby: za pomocą komórek tekstowych nad komórkami kodu lub komentarzy w komórce kodu. Komentarze wewnątrz komórek kodu dobrze sprawdzają się w notatnikach Jupyter, ale to podejście działa też w każdym innym środowisku IDE obsługującym narzędzie Gemini Code firmy Google.
  11. Posprzątamy trochę kolumny. Zmień nazwę kolumny Unnamed: 0 na id, a kolumny link na uri. Użyj prompta > technik kodowania, aby utworzyć kod, a potem uruchom komórkę, gdy będziesz zadowolony/zadowolona z wyników.
    # Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
    df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)
    
  12. Usuń kolumny source i NER oraz użyj kolumny head(), aby wyświetlić kilka pierwszych wierszy. Ponownie poproś Gemini o pomoc. Uruchom ostatnie 2 wiersze i sprawdź wyniki.
    # Remove the source and NER columns
    df.drop(columns=['source', 'NER'], inplace=True)
    df.head()
    
  13. Zobaczmy, ile rekordów zawiera nasz zbiór danych. Ponownie zacznij od wybrania techniki promptów i sprawdź, czy Gemini może pomóc Ci wygenerować kod.
    # Count the records in the DataFrame
    df.shape # count() will also work
    
  14. 2,23 mln rekordów to prawdopodobnie więcej przepisów, niż mamy czasu. Proces indeksowania w Agent Builder prawdopodobnie zajęłby zbyt dużo czasu na potrzeby tego ćwiczenia. W związku z tym wybierzmy 150 tys. przepisów i spróbujmy na nich pracować. Użyj prompt > code, aby pobrać próbkę i zapisać ją w nowej ramce danych o nazwie dfs (s to skrót od small, czyli mały).
    # Sample out 150,000 records into a DataFrame named dfs
    dfs = df.sample(n=150000)
    
  15. Dane źródłowe przepisów są gotowe do załadowania do BigQuery. Zanim przejdziemy do wczytywania, przejdźmy do BigQuery i przygotuj zbiór danych, który będzie przechowywać naszą tabelę. W konsoli Google Cloud użyj pola wyszukiwania, aby przejść do BigQuery. Możesz kliknąć prawym przyciskiem myszy BigQuery i otworzyć je w nowej karcie przeglądarki.
  16. Jeśli nie jest jeszcze widoczny, otwórz panel czatu AI Gemini, klikając logo Gemini w prawym górnym rogu Konsoli Google Cloud. Jeśli pojawi się prośba o ponowne włączenie interfejsu API, kliknij Włącz lub odśwież stronę. Uruchom prompt: What is a dataset used for in BigQuery? Po zapoznaniu się z odpowiedzią na pytanie How can I create a dataset named recipe_data using the Cloud Console? porównaj wyniki z kilkoma poniższymi krokami.Otwieranie Gemini Cloud Assist
  17. W panelu Eksplorator BigQuery kliknij menu z 3 kropkami Wyświetl działania obok identyfikatora projektu. Następnie wybierz Utwórz zbiór danych.Wyświetlanie działań
  18. Podaj zbiór danych i identyfikator recipe_data. Pozostaw typ lokalizacji jako US i kliknij Utwórz zbiór danych. Jeśli pojawi się komunikat o błędzie, że zbiór danych już istnieje, po prostu przejdź dalej.Po utworzeniu zbioru danych w BigQuery wrócimy do naszego notebooka i przeprowadzimy wstawianie.
  19. Wróć do notatnika Data Wrangling w Colab Enterprise. W nowej komórce z kodem utwórz zmienną o nazwie project_id, która będzie przechowywać identyfikator Twojego obecnego projektu. W lewym górnym rogu tych instrukcji, pod przyciskiem Zakończ moduł, znajdziesz identyfikator bieżącego projektu. Jeśli chcesz, możesz też otworzyć je na stronie głównej konsoli Cloud. Przypisz wartość do zmiennej project_id i uruchom komórkę.
    # Create a variable to hold the current project_id
    project_id='YOUR_PROJECT_ID'
    
  20. Użyj prompt > code, aby utworzyć blok kodu, który wstawi DataFrame dfs do tabeli o nazwie recipes w utworzonym przez nas właśnie zbiorze danych recipe_data. Uruchom komórkę.
    dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')
    

7. Tworzenie aplikacji wyszukiwania w Kreatorze agentów Vertex AI na potrzeby generatora przepisów

Świetnie, tabela z danymi o przepisach została utworzona. Użyj jej, aby utworzyć wiarygodne źródło danych dla generatora przepisów. Podejście, którego użyjemy, będzie podobne do tego, którego używaliśmy w przypadku naszego czatbota do gotowania. Za pomocą Kreatora agentów Vertex AI utworzymy magazyn danych, który posłuży jako źródło informacji dla aplikacji wyszukiwania.

Jeśli chcesz, możesz poprosić Gemini w konsoli Google Cloud o przypomnienie, jak utworzyć aplikację wyszukiwania za pomocą Kreatora agentów. Możesz też wykonać czynności opisane poniżej.

  1. Użyj wyszukiwania, aby przejść do Kreatora agentów. Otwórz Magazyny danych i Utwórz magazyn danych. Tym razem wybierz typ BigQuery Data Store.
  2. W komórce wyboru tabeli kliknij Przeglądaj i wyszukaj recipes. Kliknij przycisk obok tabeli. Jeśli widzisz przepisy z innych projektów qwiklabs-gcp-…, wybierz ten, który należy do Ciebie. Uwaga: jeśli klikniesz recipes zamiast kliknąć przycisk wyboru obok niego, otworzy się nowa karta w przeglądarce i przejdziesz na stronę podsumowania tabeli w BigQuery. Zamknij kartę przeglądarki i zaznacz odpowiednie pole wyboru w Kreatorze agentów.
  3. Sprawdź pozostałe opcje domyślne (nie musisz ich zmieniać), a potem kliknij Dalej.
  4. Na stronie sprawdzania schematu przejrzyj początkowe domyślne konfiguracje, ale niczego nie zmieniaj. Dalej
  5. Nazwij bazę danych recipe-data. Zmień identyfikator magazynu danych na recipe-data-id. Utwórz magazyn danych.
  6. W menu nawigacyjnym po lewej stronie kliknij Aplikacje, a potem Utwórz nową aplikację.
  7. Na karcie Wyszukaj swoją witrynę kliknij Utwórz. Nazwij aplikację recipe-search i kliknij EDYTUJ, aby ustawić identyfikator recipe-search-id. Wpisz nazwę firmy (Google) i kliknij Dalej.
  8. Tym razem sprawdź źródła danych recipe-data. Utwórz aplikację.

Utworzenie indeksu tabeli bazy danych może trochę potrwać. Zanim to nastąpi, spróbujmy poeksperymentować z nowym obszarem roboczym danych BigQuery i zobaczmy, czy uda nam się znaleźć ciekawy przepis.

  1. Użyj pola wyszukiwania, aby przejść do BigQuery. U góry interfejsu BigQuery Studio kliknij strzałkę w dół obok karty znajdującej się najdalej w prawo i wybierz Obszar roboczy danych. Ustaw region na us-central1.Otwieranie obszaru roboczego danych
  2. Kliknij Wyszukiwanie danych. W polu wyszukiwania na panelu danych wyszukaj recipes, naciśnij Enter/Return, aby przeprowadzić wyszukiwanie, a następnie kliknij przycisk Dodaj do panelu obok nazwy tabeli.
  3. Na kanwie danych BigQuery zostanie załadowana wizualizacja tabeli przepisów. Możesz tu przeanalizować schemat tabeli, wyświetlić podgląd danych w tabeli i zbadać inne szczegóły. Pod reprezentacją tabeli kliknij Zapytanie.
  4. Na obszarze roboczym zostanie wyświetlone mniej lub bardziej typowe okno zapytania BigQuery z jednym dodatkiem: nad oknem zapytania znajduje się pole tekstowe, za pomocą którego możesz poprosić Gemini o pomoc. Sprawdźmy, czy w naszym pliku ze zbiorem danych znajdziemy przepisy na ciasta. Uruchom poniższe prompty (napisz tekst i naciśnij Enter/Return, aby wywołać generowanie kodu SQL):
    Please select the title and ingredients for all the recipes with a title that contains the word cake.
    
  5. Sprawdź wygenerowany kod SQL. Gdy wszystko będzie gotowe, uruchom zapytanie.
  6. Nieźle! Zanim przejdziesz dalej, możesz wypróbować kilka innych promptów i zapytań. Podczas eksperymentowania używaj mniej konkretnych promptów, aby sprawdzić, co działa, a co nie. Na przykład:
    Do I have any chili recipes?
    
    (Nie zapomnij uruchomić nowego zapytania) Zwrócił listę przepisów na chili, ale bez składników. Po modyfikacji wyglądało to tak:
    Do I have any chili recipes?  Please include their title and ingredients.
    
    (Tak, mówię „proszę” w odpowiednich momentach. Moja mama byłaby z niej dumna.) Zauważyłam, że jeden z przepisów na chili zawierał grzyby, a kto chce jeść chili z grzybami? Poprosiłem Gemini o pomoc w wykluczeniu tych przepisów.
    Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.
    

8. Otwórz edytor Cloud Shell

  1. Otwórz Edytor Cloud Shell.
  2. Jeśli terminal nie pojawia się u dołu ekranu, otwórz go:
    • Kliknij menu z 3 kreskami Ikona menu z 3 kreskami
    • Kliknij Terminal.
    • Kliknij Nowy terminalOtwieranie nowego terminala w edytorze Cloud Shell.
  3. W terminalu skonfiguruj projekt za pomocą tego polecenia:
    • Format:
      gcloud config set project [PROJECT_ID]
      
    • Przykład:
      gcloud config set project lab-project-id-example
      
    • Jeśli nie pamiętasz identyfikatora projektu:
      • Aby wyświetlić wszystkie identyfikatory projektów, użyj:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
        
      Ustawianie identyfikatora projektu w terminalu edytora Cloud Shell
  4. Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby kontynuować. Kliknij, aby autoryzować Cloud Shell
  5. Powinien wyświetlić się ten komunikat:
    Updated property [core/project].
    
    Jeśli widzisz WARNING i pojawia się pytanie Do you want to continue (Y/N)?, prawdopodobnie nieprawidłowo wpisano identyfikator projektu. Naciśnij N, naciśnij Enter i spróbuj ponownie uruchomić polecenie gcloud config set project.

9. Włącz interfejsy API

Włącz w terminalu te interfejsy API:

gcloud services enable \
  compute.googleapis.com \
  sqladmin.googleapis.com \
  run.googleapis.com \
  artifactregistry.googleapis.com \
  cloudbuild.googleapis.com \
  networkconnectivity.googleapis.com \
  servicenetworking.googleapis.com \
  cloudaicompanion.googleapis.com

Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby kontynuować. Kliknij, aby autoryzować Cloud Shell

Wykonanie tego polecenia może potrwać kilka minut, ale ostatecznie powinno wyświetlić komunikat podobny do tego:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

10. Za pomocą Gemini stwórz podstawową aplikację internetową w Pythonie i Streamlit

Oba indeksy magazynów danych w Vertex AI Agent Builder są już gotowe, a aplikacje wyszukiwarki są gotowe do użycia, więc możemy przejść do tworzenia aplikacji internetowej.

Podczas pracy będziemy korzystać z Gemini Code Assist. Więcej informacji o korzystaniu z Gemini Code Assist w Visual Studio Code znajdziesz w dokumentacji tutaj.

  1. Aby sklonować repozytorium aplikacji z przepisami, uruchom to polecenie w terminalu edytora Cloud Shell.
    git clone https://github.com/haggman/recipe-app
    
  2. Użyj tego polecenia, aby otworzyć folder aplikacji w edytorze Cloud Shell.
    cloudshell open-workspace recipe-app/
    
  3. Zanim zaczniemy przeglądać skopiowany folder i zaczniemy pracować nad aplikacją internetową, musimy zalogować się w Google Cloud w pliku Cloud Code w edytorze i włączyć Gemini. Zróbmy to teraz. W lewym dolnym rogu edytora kliknij Cloud Code – Zaloguj się. Jeśli nie widzisz linku, odczekaj minutę i sprawdź ponownie.Cloud Code – logowanie
  4. W oknie terminala wyświetli się długi adres URL. Otwórz adres URL w przeglądarce i wykonaj czynności, aby przyznać Cloud Code dostęp do środowiska Google Cloud. W ostatnim oknie skopiuj kod weryfikacyjny i wklej go z powrotem w oknie terminala na karcie przeglądarki edytora Cloud Shell.
  5. Po chwili link Cloud Code w lewym dolnym rogu edytora zmieni się na Cloud Code – brak projektu. Kliknij nowe połączenie, aby wybrać projekt. Paleta poleceń powinna otworzyć się u góry edytora. Kliknij Wybierz projekt Google Cloud i wybierz swój projekt. Po chwili link w lewym dolnym rogu edytora zostanie zaktualizowany i będzie zawierać identyfikator projektu. Oznacza to, że Cloud Code został pomyślnie dołączony do Twojego projektu roboczego.
  6. Po połączeniu Cloud Code z projektem możesz aktywować Gemini Code Assist. W prawym dolnym rogu interfejsu edytora kliknij przekreślone logo Gemini. Po lewej stronie edytora otworzy się panel czatu Gemini. Kliknij Wybierz projekt Google Cloud. Gdy otworzy się paleta poleceń, wybierz swój projekt. Jeśli wykonasz te czynności prawidłowo (i Google niczego nie zmieni), powinno się teraz wyświetlić aktywne okno czatu Gemini.Wyłączono Gemini
  7. Świetnie, konfiguracja terminala, czatu Gemini i Cloud Code jest już gotowa. Otwórz kartę Eksplorator i poświęć kilka minut na zapoznanie się z plikami w bieżącym projekcie.Eksplorator
  8. W Eksploratorze otwórz plik requirements.txt do edycji. Przejdź do panelu czatu Gemini i zapytaj:
    From the dependencies specified in the requirements.txt file, what type of application are we building?
    
  9. Tworzymy interaktywną aplikację internetową w Pythonie i Streamlit, która współpracuje z Vertex AI i Discovery Engine. Skupmy się teraz na komponentach aplikacji internetowej. Jak podaje Gemini, Streamlit to platforma do tworzenia aplikacji internetowych opartych na danych w języku Python. Teraz zadaj pytanie:
    Does the current project's folder structure seem appropriate for a Streamlit app?
    
    Właśnie w tym miejscu Gemini ma problemy. Gemini może uzyskać dostęp do pliku, który jest obecnie otwarty w edytorze, ale nie może zobaczyć całego projektu. Spróbuj zadać takie pytanie:
    Given the below, does the current project's file and folder structure seem appropriate for a Streamlit app?
    - build.sh
    - Home.py
    - requirements.txt
    - pages
    -- Cooking_Advice.py
    -- Recipe_Search.py
    
    Uzyskać lepszą odpowiedź?
  10. Aby dowiedzieć się więcej o Streamlit:
    What can you tell me about Streamlit?
    
    Dobrze, widzimy, że Gemini oferuje nam dobry przegląd, w tym zalety i wady.
  11. Jeśli chcesz poznać wady, możesz zapytać:
    What are the major downsides or shortcomings?
    
    Zauważysz, że nie musimy dodawać „z Streamlit”, ponieważ czat Gemini jest konwersacyjny (wieloetapowy). Gemini wie, o czym rozmawialiśmy, ponieważ jesteśmy na czacie. Jeśli w dowolnym momencie chcesz wyczyścić historię czatu Gemini, kliknij ikonę kosza u góry okna czatu z kodem Gemini.

11. Wdrażanie aplikacji internetowej w Cloud Run

Świetnie, mamy już podstawową strukturę aplikacji, ale czy wszystko będzie działać? A jeszcze lepiej, gdzie powinniśmy go hostować w Google Cloud?

  1. W oknie czatu Gemini zapytaj:
    If I containerize this application, what compute technologies in Google Cloud would be best for hosting it?
    
  2. Pamiętaj, że jeśli nie korzystasz jeszcze z IDE, możesz też skorzystać z Google Cloud Assist. Otwórz konsolę Google Cloud, a następnie Gemini Cloud Assist i zapytaj:
    If I have a containerized web application, where would be the best place to run it in Google Cloud?
    
    Czy obie porady były takie same? Czy zgadzasz się z jakąś radą? Pamiętaj, że Gemini to asystent oparty na generatywnej AI i podobnie jak ludzki asystent nie zawsze będziesz się z nim zgadzać. Jednak pomocnik zawsze dostępny podczas pracy w Google Cloud i edytorze kodu może znacznie zwiększyć Twoją wydajność.
  3. W przypadku bezstanowej, krótkotrwałej aplikacji internetowej w kontenerze świetnym rozwiązaniem będzie Cloud Run. W oknie czatu Gemini w edytorze kodu wypróbuj prompt:
    What steps would be required to run this application in Cloud Run?
    
  4. Wygląda na to, że najpierw musimy utworzyć plik Dockerfile. W edytorze utwórz plik o nazwie Dockerfile w katalogu głównym folderu projektu. Upewnij się, że nie umieszczasz go przypadkowo w folderze pages. Otwórz plik do edycji.
  5. Utwórz plik Dockerfile, korzystając z panelu bocznego czatu Gemini. Użyj promptu podobnego do tego poniżej. Gdy wyniki zostaną wyświetlone na czacie, użyj ikony kopiowania obok ikony kopiowania tuż nad sugerowanym plikiem Dockerfile, aby wstawić sugerowany kod do pliku Dockerfile.
    Create a Dockerfile for the application in the current folder. The dependencies are defined in requirements.txt and I want you to use the Python 3 slim bookworm base image.
    
    Gemini nie zawsze zwraca tej samej odpowiedzi na ten sam prompt. Gdy po raz pierwszy poprosiłem Gemini o plik Dockerfile, otrzymałem dokładnie ten plik, którego użycie sugeruję. Właśnie otrzymałem sugestię:
    # Base image
    FROM python:3-bookworm-slim
    
    # Set working directory
    WORKDIR /app
    
    # Install dependencies
    RUN apt-get update && apt-get install -y \
        build-essential \
        libpq-dev \
        gcc \
        python3-dev \
        && rm -rf /var/lib/apt/lists/*
    
    # Install pip and virtualenv
    RUN pip install --upgrade pip virtualenv
    
    # Create virtual environment
    RUN python3 -m venv venv
    
    # Activate virtual environment
    WORKDIR /app/venv/bin
    RUN . activate
    
    # Install Streamlit and libraries from requirements.txt
    RUN pip install -r requirements.txt
    
    # Copy application files
    COPY . /app
    
    # Expose port 8501 for Streamlit
    EXPOSE 8501
    
    # Start Streamlit app
    CMD ["streamlit", "run", "main.py"]
    
    To jest niezły plik Dockerfile. Postaram się to uprościć. Nie potrzebujemy sekcji apt-get, ponieważ wszystko, czego potrzebuje Python, znajduje się już w naszym obrazie bazowym. Używanie środowiska wirtualnego w kontenerze Pythona to też strata miejsca, więc usunąłbym to. Polecenie expose nie jest konieczne, ale jego użycie jest dozwolone. Próbuje też uruchomić plik main.py, którego nie mam.
  6. W folderze recipe-app utwórz plik o nazwie Dockerfile i wklej ten tekst:
    FROM python:3.11-slim-bookworm
    
    WORKDIR /app
    
    COPY requirements.txt .
    RUN pip install --no-cache-dir --upgrade pip && \
        pip install --no-cache-dir -r requirements.txt
    
    COPY . .
    
    CMD ["streamlit", "run", "Home.py"]
    
  7. Gemini może działać w oknie czatu, ale może też działać bezpośrednio w pliku kodu za pomocą komentarzy, takich jak te użyte w notatniku Data Wrangling. Można go też wywołać za pomocą klawiszy Control+i w systemie Windows lub Command+i na Macu. Kliknij gdzieś w Dockerfile i aktywuj Gemini za pomocą odpowiedniego polecenia Command+i / Control+i.
  8. Gdy pojawi się odpowiedni komunikat, wpisz te dane. Sprawdź i zaakceptuj zmianę.
    Please comment the current file.
    
    To świetna funkcja. Ile razy pracowałeś/pracowałaś z kodem kogoś innego, tylko po to, aby potem tracić czas na zrozumienie podstaw jego działania, zanim wprowadzisz jakiekolwiek zmiany? Gemini na ratunek!
  9. Teraz zapytaj Gemini, jak za pomocą Cloud Run utworzyć i wdrożyć nowy obraz o nazwie recipe-web-app na podstawie pliku Dockerfile w bieżącym folderze.
    How could I use gcloud to build a new Cloud Run service named recipe-web-app from the current directory?
    
  10. Skompilujmy i wdróżmy aplikację. W oknie terminala wykonaj polecenie gcloud run deploy.
    gcloud run deploy recipe-web-app \
        --allow-unauthenticated \
        --source=. \
        --region=us-central1 \
        --port=8501
    
    Jeśli pojawi się prośba o utworzenie repozytorium Artifact Registry, naciśnij enter/return.
    Deploying from source requires an Artifact Registry Docker repository to store built containers. A repository
    named cloud-run-source-deploy in region us-central1 will be created.
    
    Do you want to continue (Y/n)?
    
  11. Jeśli będziesz obserwować proces kompilacji, najpierw zostanie utworzone repozytorium Dockera Artifact Registry. Następnie używa Cloud Build do utworzenia obrazu kontenera na podstawie pliku Dockerfile w folderze lokalnym. Na koniec obraz Dockera zostanie wdrożony do nowej usługi Cloud Run. Na końcu skryptu otrzymasz adres URL testowy Cloud Run.

Otwórz zwrócony link w nowej karcie przeglądarki. Poświęć chwilę na zapoznanie się ze strukturą i stronami aplikacji. Świetnie. Teraz musimy podłączyć funkcję generatywnej AI.

12. Połącz stronę Cooking Advice z naszą aplikacją Agent Builder do wyszukiwania przepisów

Mamy framework do uruchomienia aplikacji internetowej, ale musimy połączyć 2 strony robocze z 2 aplikacją wyszukiwania w Vertex AI Agent Builder. Zacznijmy od porady dotyczącej gotowania.

  1. Pozostaw otwartą kartę edytora Cloud Shell. W konsoli Google Cloud użyj wyszukiwania, aby przejść do czatu w Vertex AI.
  2. W panelu ustawień po prawej stronie ustaw model na gemini-1.5-flash-002. Przesuń limit tokenów wyjściowych do maksymalnej wartości, aby model mógł w razie potrzeby zwracać dłuższe odpowiedzi. Otwórz Ustawienia filtra zabezpieczeń. Ustaw opcje Wypowiedzi szerzące nienawiść, Treści o charakterze seksualnym i Nękanie na Zablokuj niektóre. Ustaw opcję Treści niebezpieczne na Blokuj niewiele i kliknij Zapisz. Ustawiamy kategorię „Treści niebezpieczne” nieco niżej, ponieważ rozmowy o nożach i cięciu mogą być przez Gemini błędnie interpretowane jako przemoc.
  3. Przesuń przełącznik, aby włączyć funkcję uziemienia, a potem kliknij Dostosuj. Ustaw źródło grounding na Vertex AI Search, a w przypadku ścieżki magazynu danych użyj tej wartości. Zmień parametr YOUR_PROJECT_ID na identyfikator projektu, który znajduje się w pobliżu przycisku Zakończ zajęcia, a potem zapisz ustawienia uziemienia.
    projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id
    
    Uwaga: jeśli pojawi się błąd, oznacza to, że nie zmieniono identyfikatora projektu na identyfikator bieżącego projektu lub pominięto krok, w którym zmieniono identyfikator Data Store usługi Agent Builder w starych plikach cookbok. Aby poznać rzeczywisty identyfikator magazynu danych, otwórz stronę Agent Builder > Magazyny danych > old-cookbooks.
  4. Przetestuj kilka wiadomości na czacie. Może warto zacząć od tego. Jeśli chcesz, wypróbuj kilka innych.
    How can I tell if a tomato is ripe?
    
  5. Model działa, więc teraz spróbujmy eksperymentować z kodem. Kliknij Wyczyść rozmowę, aby nasze rozmowy nie stały się częścią kodu, a potem kliknij Pobierz kod.Wyczyść rozmowę i uzyskaj kod
  6. U góry okna kodu kliknij Otwórz notatnik, abyśmy mogli eksperymentować i doskonalić kod w Colab Enterprise przed zintegrowaniem go z naszą aplikacją.
  7. Poświęć kilka minut na zapoznanie się z kodem. Wprowadźmy kilka zmian, aby dostosować go do naszych potrzeb. Zanim zaczniesz, uruchom pierwszą komórkę kodu, aby połączyć się z usługą obliczeniową i zainstalować pakiet SDK AI Platform. Po wykonaniu bloku pojawi się prośba o ponowne uruchomienie sesji. Zrób to.
  8. Przejdź do kodu wygenerowanego przez Vertex AI Studio. Zmień nazwę metody multiturn_generate_content na start_chat_session.
  9. Przewiń do wywołania metody model = GenerativeModel(. Istniejący kod definiuje elementy generation_configsafety_settings, ale ich nie używa. Zmień utworzenie GenerativeModel, aby przypominało:
    model = GenerativeModel(
        "gemini-1.5-flash-002",
        tools=tools,
        generation_config=generation_config,
        safety_settings=safety_settings,
    )
    
  10. Na koniec dodaj do metody ostatni wiersz tuż pod instrukcją chat = model.start_chat(), aby funkcja zwracała obiekt chat. Gotowa funkcja powinna wyglądać tak: UWAGA: NIE KOPIUJ tego kodu do swojego notatnika. Jest to po prostu kontrola poprawności.
    def start_chat_session():
        vertexai.init(project="qwiklabs-gcp-02-9a7298ceaaec", location="us-central1")
        tools = [
            Tool.from_retrieval(
                retrieval=grounding.Retrieval(
                    source=grounding.VertexAISearch(datastore="projects/qwiklabs-gcp-02-9a7298ceaaec/locations/global/collections/default_collection/dataStores/old-cookbooks-id"),
                )
            ),
        ]
        model = GenerativeModel(
            "gemini-1.5-flash-002",
            tools=tools,
            generation_config=generation_config,
            safety_settings=safety_settings,
        )
        chat = model.start_chat()
        return chat
    
  11. Przewiń do dołu komórki z kodem i zmień ostatni wiersz wywołujący starą funkcję, aby wywoływała nową funkcję i zapisywała zwracany obiekt w zmiennej chat. Gdy zmiany Ci odpowiadają, uruchom komórkę.
    chat = start_chat_session()
    
  12. Utwórz nową komórkę kodu i dodaj komentarz # Use chat to invoke Gemini and print out the response. Przejdź do następnego wiersza i wpisz resp, a Gemini automatycznie wypełni blok. Zaktualizuj prompt na How can I tell if a tomato is ripe?. Uruchom komórkę
    response = chat.send_message("How can I tell if a tomato is ripe?")
    print(response)
    
  13. To jest odpowiedź, ale interesuje nas tylko to zagnieżdżone pole text. Zmodyfikuj blok kodu, aby wydrukować tylko tę sekcję, np.:
    response = chat.send_message("How can I tell if a tomato is ripe?")
    print(response.candidates[0].content.parts[0].text)
    
  14. Świetnie, mamy już działający kod czatu, więc zintegrujmy go z aplikacją internetową. Skopiuj całą zawartość komórki z kodem, która tworzy funkcję start_chat_session (komórka testowa nie jest nam potrzebna). Jeśli klikniesz komórkę, w prawym górnym rogu możesz kliknąć menu z 3 kropkami i tam skopiować dane.Kopiowanie komórki
  15. Przełącz się na kartę edytora Cloud Shell i otwórz plik pages\Cooking_Advice.py do edycji.
  16. Znajdź komentarz:
    #
    # Add the code you copied from your notebook below this message
    #
    
  17. Wklej skopiowany kod pod komentarzem Dodaj kod. Świetnie. Teraz mamy sekcję, która obsługuje moduł czatu za pomocą wywołania Gemini. Teraz zintegrujmy go z Streamlit.
  18. Znajdź sekcję kodu z komentarzem bezpośrednio pod komentarzem:
    #
    # Here's the code to setup your session variables
    # Uncomment this block when instructed
    #
    
  19. Odkomentuj tę sekcję kodu (do następnej sekcji Setup done, let's build the page UI) i ją przeanalizuj. Tworzy lub pobiera zmienne sesji czatu i historii.
  20. Następnie musimy zintegrować historię i czat z interfejsem. Przewiń kod, aż znajdziesz poniższy komentarz.
    #
    # Here's the code to create the chat interface
    # Uncomment the below code when instructed
    #
    
  21. Odkomentuj pozostałą część kodu pod komentarzem i poświęć chwilę na jego zapoznanie się z nim. Możesz ją wyróżnić i poprosić Gemini o wyjaśnienie jej działania.
  22. Świetnie. Teraz skompilujmy aplikację i wdróżmy ją. Gdy adres URL zostanie zwrócony, uruchom aplikację i spróbuj skorzystać z poradnika kulinarnego. Możesz zapytać go o dojrzałe pomidory lub o to, jak najlepiej przygotować brukselkę.
    gcloud run deploy recipe-web-app \
        --allow-unauthenticated \
        --source=. \
        --region=us-central1 \
        --port=8501
    

Fajnie, prawda? Twój osobisty asystent kulinarny oparty na AI :-)

13. (Opcjonalnie) Połącz stronę wyszukiwania przepisów z aplikacją konstruktora agenta do wyszukiwania przepisów

Połączenie strony porady kulinarnej z jej źródłem zostało zrealizowane bezpośrednio za pomocą interfejsu Gemini API. W przypadku wyszukiwania przepisów połączymy się bezpośrednio z aplikacją wyszukiwania Kreatora agentów Vertex AI.

  1. W edytorze Cloud Shell otwórz stronę pages/Recipe_Search.py do edycji. Sprawdź strukturę strony.
  2. U góry pliku ustaw identyfikator projektu.
  3. Sprawdź funkcję search_sample. Ten kod pochodzi mniej więcej bezpośrednio z dokumentacji Discovery Engine, którą znajdziesz tutaj. Działającą kopię znajdziesz w tym notatniku tutaj.Jedyną zmianą, jaką wprowadziłem, było zwrócenie wartości response.results zamiast samych wyników. Bez tego typu zwracania jest obiekt przeznaczony do przewijania wyników, a tego nie potrzebujemy w przypadku podstawowej aplikacji.
  4. Przewiń do samego końca pliku i odkomentuj całą sekcję poniżej Here are the first 5 recipes I found.
  5. Zaznacz całą sekcję, której komentarze właśnie odblokowałeś, i otwórz czat Gemini Code. Zapytaj, Explain the highlighted code. Jeśli nie wybierzesz niczego konkretnego, Gemini może wyjaśnić cały plik. Jeśli wyróżnisz sekcję i poprosisz Gemini o wyjaśnienie, komentarz lub ulepszenie, Gemini to zrobi.Przeczytaj wyjaśnienie. Korzystanie z notatnika Colab Enterprise to świetny sposób na zapoznanie się z interfejsami Gemini API przed ich zintegrowaniem z aplikacją. Jest to szczególnie przydatne w przypadku nowszych interfejsów API, które mogą nie być tak dobrze udokumentowane.
  6. Aby wdrożyć ostateczną wersję aplikacji, uruchom build.sh w oknie terminala edytora. Zanim przejdziesz do następnego kroku, zaczekaj na wdrożenie nowej wersji.

14. (Opcjonalnie) Zapoznaj się z ostateczną aplikacją

Poświęć kilka minut na zapoznanie się z ostateczną aplikacją.

  1. W konsoli Google Cloud użyj wyszukiwarki, aby przejść do Cloud Run, a następnie kliknij recipe-web-app.
  2. Odszukaj adres URL testu aplikacji (znajduje się u góry) i otwórz go w nowej karcie przeglądarki.
  3. Powinna się wyświetlić strona główna aplikacji. Zwróć uwagę na podstawowy układ i nawigację udostępnione przez Streamlit, w których pliki Pythona z folderu pages są wyświetlane jako opcje nawigacji, a Home.py jest wczytywany jako strona główna. Otwórz stronę Porady kulinarne.
  4. Po chwili pojawi się interfejs czatu. Zwróć uwagę na ładny układ podstawowy udostępniany przez Streamlit.
  5. Zadaj kilka pytań związanych z gotowaniem i sprawdź, jak działa bot. Na przykład:
    Do you have any advice for preparing broccoli?
    
    How about a classic chicken soup recipe?
    
    Tell me about meringue.
    
  6. Teraz znajdźmy przepis lub dwa. Przejdź na stronę wyszukiwania przepisów i wypróbuj kilka wyszukiwań. Na przykład:
    Chili con carne
    
    Chili, corn, rice
    
    Lemon Meringue Pie
    
    A dessert containing strawberries
    

15. Gratulacje!

Udało Ci się utworzyć aplikację korzystającą z aplikacji Kreatora agentów Vertex AI. W trakcie tej podróży poznasz Gemini Cloud Assist, Gemini Code Assist i funkcje przekształcania kodu SQL za pomocą języka naturalnego w obszarze roboczym danych BigQuery. Świetna robota!

Czyszczenie danych

Cloud SQL nie ma bezpłatnego poziomu i będzie pobierać opłaty za dalsze korzystanie z usługi. Aby uniknąć dodatkowych opłat, możesz usunąć projekt Cloud.

Cloud Run nie nalicza opłat, gdy usługa nie jest używana, ale może zostać pobrana należność za przechowywanie obrazu kontenera w Artifact Registry. Usunięcie projektu Cloud powoduje zaprzestanie naliczania opłat za wszystkie zasoby używane w tym projekcie.

Jeśli chcesz, możesz usunąć projekt:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Możesz też usunąć niepotrzebne zasoby z dysku CloudShell. Możesz:

  1. Usuń katalog projektu ćwiczeń z programowania:
    rm -rf ~/task-app
    
  2. Ostrzeżenie! Tej czynności nie można cofnąć. Jeśli chcesz usunąć wszystko z Cloud Shell, aby zwolnić miejsce, możesz usunąć cały katalog domowy. Upewnij się, że wszystko, co chcesz zachować, jest zapisane gdzie indziej.
    sudo rm -rf $HOME