Building Applications in the AI Era

1. Przegląd

W tym laboratorium użyjesz generatywnej AI od Google do tworzenia infrastruktury w Google Cloud z pomocą Gemini Cloud Assist, wysyłania zapytań do danych BigQuery za pomocą funkcji obszaru roboczego danych do konwersji języka naturalnego na SQL, pisania kodu w notebookach Colab Enterprise Jupyter i w Eclipse Theia (Visual Studio Code) z pomocą Gemini Code Assist oraz integrowania funkcji wyszukiwania i funkcji czatu opartych na AI, które korzystają ze źródeł w Cloud Storage i BigQuery, w Kreatorze agentów Vertex AI.

Naszym celem jest stworzenie witryny z przepisami i poradami kulinarnymi o nazwie AI Recipe Haven. Witryna zostanie utworzona w języku Python i przy użyciu biblioteki Streamlit. Będzie zawierać 2 główne strony. Usługa Cooking Advice będzie hostować chatbota, którego utworzymy za pomocą Gemini i kreatora agentów Vertex AI. Będzie on oparty na źródle powiązanym z grupą książek kucharskich i będzie oferować porady kulinarne oraz odpowiadać na pytania związane z gotowaniem. Wyszukiwarka przepisów będzie wyszukiwarką opartą na Gemini, tym razem korzystającą z bazy danych przepisów BigQuery.

Jeśli utkniesz na którymś z fragmentów kodu w tym ćwiczeniu, rozwiązania wszystkich plików kodu znajdziesz w repozytorium GitHub ćwiczenia w gałęzi solution.

Cele

Z tego modułu nauczysz się, jak:

Aktywowanie i korzystanie z Gemini Cloud Assist
Tworzenie aplikacji do wyszukiwania w Kreatorze agentów Vertex AI na potrzeby czatbota z poradami kulinarnymi
Wczytywanie i czyszczenie danych w notatniku Colab Enterprise z pomocą Gemini Code Assist
Tworzenie aplikacji do wyszukiwania w Kreatorze agentów Vertex AI na potrzeby generatora przepisów
Stwórz podstawową aplikację internetową w Pythonie i Streamlit z pomocą Gemini
Wdrażanie aplikacji internetowej w Cloud Run
Połącz stronę z poradami dotyczącymi gotowania z naszą aplikacją Kreator agentów do wyszukiwania przepisów
(Opcjonalnie) Połącz stronę wyszukiwania przepisów z aplikacją do tworzenia agentów wyszukiwania przepisów
(Opcjonalnie) Sprawdź gotową aplikację

2. Konfiguracja i wymagania

Zanim klikniesz przycisk Rozpocznij moduł

Zapoznaj się z tymi instrukcjami. Moduły mają limit czasowy i nie można ich zatrzymać. Gdy klikniesz Rozpocznij moduł, na liczniku wyświetli się informacja o tym, na jak długo udostępniamy Ci zasoby Google Cloud.

W tym praktycznym module Qwiklabs możesz spróbować swoich sił w wykonywaniu opisywanych działań w prawdziwym środowisku chmury, a nie w jego symulacji lub wersji demonstracyjnej. Otrzymasz nowe, tymczasowe dane logowania, dzięki którym zalogujesz się i uzyskasz dostęp do Google Cloud na czas trwania modułu.

Wymagania

Do ukończenia modułu potrzebne będą:

dostęp do standardowej przeglądarki internetowej (zalecamy korzystanie z przeglądarki Chrome),
czas wymagany do ukończenia modułu.

Uwaga: jeśli masz już osobiste konto lub projekt w Google Cloud, nie używaj go w tym module.

Uwaga: jeśli używasz Pixelbooka, uruchom ten moduł w oknie incognito.

Kliknij przycisk Rozpocznij moduł. Jeśli moduł jest odpłatny, otworzy się wyskakujące okienko, w którym możesz wybrać formę płatności. Po lewej stronie znajduje się panel z uprawnieniami tymczasowymi, których musisz użyć w tym module.

Skopiuj nazwę użytkownika i kliknij Otwórz konsolę Google. Moduł uruchomi zasoby, po czym otworzy nową kartę ze stroną logowania.

Wskazówka: karty możesz otwierać obok siebie w osobnych oknach.

Jeśli wyświetli się strona Wybierz konto, kliknij Użyj innego konta.

Na stronie logowania wklej nazwę użytkownika skopiowaną z panelu zawierającego szczegóły połączenia. Następnie skopiuj i wklej hasło.

Ważne: musisz użyć danych logowania z panelu Szczegóły połączenia. Nie używaj swoich danych logowania Qwiklabs. Jeśli masz już konto Google Cloud, nie używaj go w tym module (dzięki temu unikniesz obciążenia konta opłatami). 4. Na kolejnych stronach wykonaj następujące czynności:

Zaakceptuj Warunki korzystania z usługi.
Nie dodawaj opcji odzyskiwania ani uwierzytelniania dwuskładnikowego (ponieważ konto ma charakter tymczasowy).
Nie rejestruj się w bezpłatnych wersjach próbnych.

Poczekaj, aż na karcie otworzy się konsola Google Cloud.

Uwaga: aby wyświetlić menu z listą produktów i usług Google Cloud, w lewym górnym rogu kliknij menu nawigacyjne.

3. Zadanie 0. Sprawdzanie klastra stacji roboczych

W dalszej części tego modułu będziesz używać stacji roboczej Google Cloud do wykonywania prac programistycznych. Proces uruchamiania tego modułu powinien rozpocząć tworzenie klastra stacji roboczej. Zanim przejdziesz dalej, upewnij się, że klaster jest tworzony.

W konsoli Google Cloud użyj pola wyszukiwania, aby przejść do Cloud Workstations.
W menu nawigacyjnym po lewej stronie wyświetl Zarządzanie klastrami.
Jeśli masz klaster, który jest aktualizowany, możesz przejść do zadania 1. Jeśli nie widzisz żadnych klastrów w żadnym stanie, odśwież stronę. Jeśli nadal nie widzisz klastra w stanie Aktualizowanie (budowanie), zakończ moduł, klikając przycisk w lewym górnym rogu tych instrukcji, a potem uruchom go ponownie.

4. Zadanie 1. Aktywowanie i korzystanie z Gemini Cloud Assist

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

Aby aktywować Cloud Assist, kliknij pole wyszukiwania u góry interfejsu konsoli Cloud i wybierz Zapytaj Gemini (lub Zapytaj Gemini o konsolę Cloud).
Przewiń do sekcji Wymagany interfejs API i włącz interfejs Gemini for Google Cloud API.
Jeśli interfejs czatu nie pojawi się od razu, kliknij Rozpocznij rozmowę. Zacznij od poproszenia Gemini o wyjaśnienie niektórych korzyści z używania Cloud Workstations. Poświęć kilka minut na zapoznanie się z wygenerowaną odpowiedzią.
Następnie zapytaj o korzyści wynikające z używania Kreatora agentów i o to, jak może on pomóc w uzyskiwaniu bardziej konkretnych odpowiedzi generatywnych.
Na koniec przyjrzyjmy się porównaniu. W oknie czatu Gemini w konsoli Google Cloud zadaj to pytanie:

What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?

Teraz w oknie bez trybu incognito otwórz publiczną witrynę Gemini, zaloguj się w razie potrzeby i zadaj to samo pytanie. Czy odpowiedzi są takie same lub przynajmniej podobne? Jakie są konkretne kroki? Czy któraś z nich jest wyraźnie lepsza? Niezależnie od tego, pamiętaj o odpowiedziach, gdy będziemy przechodzić do kolejnych kroków.

Uwaga: jeśli spróbujesz wykonać powyższe czynności na tymczasowym koncie Qwiklabs, zostaniesz zablokowany. Jeśli Twoje konto służbowe jest również zablokowane, ponieważ Twoja organizacja nie zezwala na korzystanie z aplikacji internetowej Gemini, po prostu pomiń ten krok i przejdź dalej. Nie wpłynie to na Twoją możliwość wykonania tego ćwiczenia.

5. Zadanie 2. Tworzenie aplikacji do wyszukiwania w Kreatorze agentów Vertex AI na potrzeby czatbota z poradami kulinarnymi

Tworzona przez nas witryna będzie zawierać stronę z poradami dotyczącymi gotowania, na której znajdzie się chatbot zaprojektowany tak, aby pomagać użytkownikom w znajdowaniu odpowiedzi na pytania związane z gotowaniem. Będzie korzystać z Gemini, które będzie oparte na źródle zawierającym 70 książek kucharskich z domeny publicznej. Książki kucharskie będą źródłem informacji, z którego Gemini będzie korzystać podczas odpowiadania na pytania.

W polu wyszukiwania konsoli Cloud wpisz Vertex AI. W panelu kliknij Włącz wszystkie zalecane interfejsy API. Jeśli pojawi się wyskakujące okienko z informacją, że sam interfejs Vertex AI API wymaga włączenia, włącz go.
Użyj wyszukiwarki, aby przejść do Agent Builder, a następnie kliknij Continue and Activate the API (Przejdź dalej i aktywuj API).
Jak sugerowaliśmy w naszych wcześniejszych poradach, tworzenie aplikacji do wyszukiwania w Agent Builder zaczyna się od utworzenia wiarygodnego źródła danych. Gdy użytkownik wyszukuje informacje, Gemini rozumie pytanie i wie, jak tworzyć inteligentne odpowiedzi, ale informacje wykorzystywane w odpowiedzi pobiera ze źródła, a nie z własnej wiedzy.

W menu po lewej stronie wybierz kolejno Magazyny danych i Utwórz magazyn danych. 4. Książki kucharskie z domeny publicznej, których używamy do tworzenia strony z poradami kulinarnymi, znajdują się obecnie w zasobniku Cloud Storage w projekcie zewnętrznym. Wybierz typ źródła Cloud Storage. 5. Sprawdź domyślne opcje związane z rodzajem importowanych informacji, ale ich nie zmieniaj. Pozostaw typ importu ustawiony na Folder i użyj ścieżki do kosza: 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 dla każdego z nich. Aplikacje do wyszukiwania sprawdzają się w przypadku ogólnego użytku i wyszukiwania. Aplikacje do obsługi czatu są przeznaczone do przepływów generatywnych w aplikacjach do obsługi czatu lub botów głosowych opartych na Dataflow. Aplikacje rekomendacyjne pomagają tworzyć lepsze systemy rekomendacji. Aplikacje agentów służą do tworzenia agentów opartych na generatywnej AI. W przyszłości Agent prawdopodobnie będzie najlepiej odpowiadać naszym potrzebom, ale ponieważ produkt jest obecnie w wersji podglądowej, pozostaniemy przy typie aplikacji wyszukiwarki. 7. W menu po lewej stronie kliknij Aplikacje, a następnie Utwórz aplikację. Wybierz typ aplikacji Wyszukiwanie. Sprawdź różne opcje, ale nie zmieniaj ich. Nazwij aplikację: cookbook-search. Kliknij Edytuj i ustaw identyfikator aplikacji na cookbook-search-id. Ustaw firmę na Google i kliknij Dalej. 9. Zaznacz old-cookbooks magazyn danych utworzony w kilku poprzednich krokach i kliknij Utwórz aplikację do wyszukiwania.

Jeśli sprawdzisz kartę Aktywność, prawdopodobnie zobaczysz, że książki kucharskie są nadal importowane i indeksowane. Zindeksowanie tysięcy stron zawartych w 70 książkach kucharskich, które udostępniliśmy narzędziu Agent Builder, zajmie ponad 5 minut. W tym czasie wczytajmy i oczyśćmy dane z bazy przepisów na potrzeby naszego generatora przepisów.

6. Zadanie 3. Wczytywanie i czyszczenie danych w notatniku Colab Enterprise z pomocą Gemini Code Assist

Google Cloud oferuje kilka głównych sposobów pracy z notatnikami Jupytera. Będziemy korzystać z najnowszej usługi Google – Colab Enterprise. Niektórzy z Was mogą znać usługę Colab od Google, która jest powszechnie używana przez osoby i organizacje, które chcą eksperymentować z notebookami Jupytera w bezpłatnym środowisku. Colab Enterprise to komercyjna oferta Google Cloud, która jest w pełni zintegrowana z pozostałymi usługami chmurowymi Google 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 wielu różnych edytorach kodu i oferować porady oraz płynne sugestie wstawiane podczas pisania kodu. Będziemy korzystać z tego asystenta generatywnego podczas porządkowania danych o przepisach.

Użyj wyszukiwarki, aby przejść do Colab Enterprise i utworzyć notatnik. Jeśli pojawi się oferta przetestowania nowych funkcji Colab, odrzuć ją. Aby uruchomić środowisko wykonawcze, czyli moc obliczeniową notatnika, w prawym górnym rogu nowego notatnika kliknij Połącz.

Aby zmienić nazwę bieżącego notatnika, użyj menu z 3 kropkami obok jego nazwy w panelu Pliki Colab Enterprise Data Wrangling.

Utwórz nowe pole + Tekst i za pomocą strzałki w górę przenieś je tak, aby było pierwszą komórką na stronie.

Edytuj pole tekstowe i wpisz:

# Data Wrangling

Import the Pandas library

W bloku kodu pod utworzonym blokiem tekstu zacznij pisać imp. Gemini Code Assist powinien zasugerować resztę importu na szaro. Aby zaakceptować sugestię, naciśnij Tab.

import pandas as pd

Pod polem kodu importu utwórz kolejne pole tekstowe i wpisz w nim:

Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.

Utwórz i edytuj kolejny blok kodu. Ponownie zacznij pisać df i sprawdź kod wygenerowany przez Gemini Code Assist. Jeśli nad wygenerowaną sugestią zobaczysz listę słów kluczowych w Pythonie, naciśnij klawisz Escape, aby wyświetlić sugerowany kod w jasnoszarym kolorze. Ponownie naciśnij Tab, aby zaakceptować sugestię. Jeśli sugestia nie zawierała wywołania funkcji head(), dodaj je.

df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()

Kliknij pierwszą komórkę z kodem, w której zaimportowano bibliotekę Pandas, i użyj menu Polecenia lub klawiatury, aby uruchomić wybraną komórkę. Na klawiaturze naciśnięcie Shift+Enter spowoduje uruchomienie komórki i przeniesienie zaznaczenia do następnej komórki, a w razie potrzeby utworzenie nowej. Zanim przejdziesz dalej, poczekaj na wykonanie komórki.

Uwaga: jeśli komórka nie została wykonana, po lewej stronie zobaczysz [ ]. Podczas wykonywania komórki zobaczysz obracającą się animację. Gdy komórka zakończy działanie, pojawi się liczba, np. [13]. 9. Wykonaj komórkę, która wczytuje plik CSV do obiektu DataFrame. Poczekaj, aż plik się wczyta, i sprawdź pierwsze 5 wierszy danych. Są to dane o przepisach, które wczytamy do BigQuery i których ostatecznie użyjemy do trenowania naszego generatora przepisów. 10. Utwórz nowy blok kodu i wpisz poniższy komentarz. Po wpisaniu komentarza przejdź do następnego wiersza kodu. Powinna pojawić się sugestia df.columns. Zaakceptuj go, a potem uruchom komórkę.

# List the current DataFrame column names

Właśnie pokazaliśmy, że w notatniku Jupyter masz 2 możliwości uzyskania pomocy od Gemini Code Assist: w komórkach tekstowych nad komórkami z kodem lub w komentarzach w samej komórce z kodem. Komentarze w komórkach kodu działają dobrze w notebookach Jupyter, ale to podejście sprawdzi się też w każdym innym środowisku IDE obsługującym Gemini Code Assist od Google.

Posprzątajmy trochę w kolumnach. Zmień nazwę kolumny Unnamed: 0 na id, a kolumny link na uri. Użyj wybranej techniki promptu > kodu, aby utworzyć kod, a następnie uruchom komórkę, gdy będziesz zadowolony(-a) z wyniku.

# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)

Usuń kolumny source i NER, a potem użyj head(), aby wyświetlić kilka pierwszych wierszy. Ponownie poproś o pomoc Gemini. Uruchom 2 ostatnie wiersze i sprawdź wyniki.

# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()

Sprawdźmy, ile rekordów znajduje się w naszym zbiorze danych. Zacznij od wybranej techniki promptowania i sprawdź, czy Gemini pomoże Ci wygenerować kod.

# Count the records in the DataFrame
df.shape # count() will also work

2,23 miliona rekordów to prawdopodobnie więcej przepisów, niż mamy czasu na wypróbowanie. Proces indeksowania w Kreatorze agentów prawdopodobnie zajmie zbyt dużo czasu, abyśmy mogli go dziś przeprowadzić. W ramach kompromisu wybierzmy 150 tys. przepisów i na nich pracujmy. Użyj podejścia „prompt > code”, aby pobrać próbkę i zapisać ją w nowej ramce danych o nazwie dfs (s – mała).

# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)

Dane źródłowe dotyczące przepisów są gotowe do wczytania do BigQuery. Zanim to zrobimy, przejdźmy do BigQuery i przygotujmy zbiór danych, w którym będzie przechowywana nasza tabela. 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.
Jeśli nie jest jeszcze widoczny, otwórz panel czatu z funkcjami AI od Gemini, klikając logo Gemini w prawym górnym rogu konsoli 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ą zadaj pytanie: How can I create a dataset named recipe_data using the Cloud Console? Porównaj wyniki z kilkoma poniższymi krokami.

W panelu Eksplorator BigQuery kliknij menu z 3 kropkami Wyświetl działania obok identyfikatora projektu. Następnie kliknij Utwórz zbiór danych.

Nadaj zbiorowi danych identyfikator recipe_data. Pozostaw typ lokalizacji US i kliknij Utwórz zbiór danych. Jeśli pojawi się błąd informujący, że zbiór danych już istnieje, po prostu przejdź dalej.

Po utworzeniu zbioru danych w BigQuery wróćmy do notatnika i wstawmy dane. 19. Wróć do notatnika Data Wrangling w Colab Enterprise. W nowej komórce z kodem utwórz zmienną o nazwie project_id i użyj jej do przechowywania identyfikatora bieżącego projektu. W lewym górnym rogu tych instrukcji, pod przyciskiem Zakończ moduł, znajdziesz bieżący identyfikator projektu. Możesz też wyświetlić go na stronie głównej Cloud Console. Przypisz wartość do zmiennej project_id i uruchom komórkę.

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'

Użyj podejścia prompt > code, aby utworzyć blok kodu, który wstawia ramkę danych dfs do tabeli o nazwie recipes w utworzonym przez nas zbiorze danych recipe_data. Uruchom komórkę.

dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')

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

Świetnie. Utworzyliśmy tabelę z danymi o przepisach. Użyjmy jej teraz do utworzenia źródła danych opartego na wiedzy dla naszego generatora przepisów. Zastosujemy podobne podejście jak w przypadku naszego czatbota do gotowania. Za pomocą Kreatora agentów Vertex AI utworzymy magazyn danych, a następnie użyjemy go jako źródła informacji w aplikacji do wyszukiwania.

Możesz poprosić Gemini w konsoli Google Cloud o przypomnienie kroków tworzenia aplikacji wyszukiwania w Kreatorze agentów lub wykonać czynności podane poniżej.

Użyj wyszukiwarki, aby przejść do Kreatora agentów. Otwórz Magazyny danych i Utwórz magazyn danych. Tym razem wybierz typ magazynu danych BigQuery.
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 zaznaczyć przycisk opcji obok niego, w przeglądarce otworzy się nowa karta, na której zobaczysz stronę przeglądu tabeli w BigQuery. Wystarczy zamknąć kartę przeglądarki i wybrać opcję w Agent Builderze. 3. Sprawdź pozostałe opcje domyślne, ale ich nie zmieniaj, a potem kliknij Dalej. 4. Na stronie sprawdzania schematu przejrzyj początkowe konfiguracje domyślne, ale niczego nie zmieniaj. Dalej 5. Nazwij magazyn danych recipe-data. Edytuj identyfikator magazynu danych i ustaw go na recipe-data-id. Utwórz magazyn danych. 6. W menu nawigacyjnym po lewej stronie kliknij Aplikacje, a potem Utwórz aplikację. Wybierz aplikację Wyszukiwarka jeszcze raz. Nazwij aplikację recipe-search i ustaw identyfikator na recipe-search-id. Ustaw nazwę firmy na Google i kliknij Dalej. 8. Tym razem sprawdź źródła danych recipe-data. Utwórz aplikację.

Indeksowanie tabeli bazy danych zajmie trochę czasu. W tym czasie poeksperymentujmy z nowym obszarem roboczym danych BigQuery i sprawdźmy, czy znajdziemy ciekawe przepisy. 9. W polu wyszukiwania wpisz BigQuery. U góry BigQuery Studio kliknij strzałkę w dół obok skrajnej karty po prawej stronie i wybierz Obszar roboczy danych. Ustaw region na us-central1.

W polu wyszukiwania obszaru roboczego danych wyszukaj recipes i dodaj do obszaru roboczego tabelę.
Wizualizacja tabeli z przepisami zostanie wczytana do obszaru roboczego danych BigQuery. Możesz przeanalizować schemat tabeli, wyświetlić podgląd danych w tabeli i sprawdzić inne szczegóły. Pod tabelą kliknij Zapytanie.
W obszarze roboczym pojawi się mniej więcej typowe okno zapytania BigQuery z jednym dodatkiem: nad oknem zapytania znajduje się pole tekstowe, w którym możesz poprosić Gemini o pomoc. Sprawdźmy, czy w naszym przykładzie znajdziemy przepisy na ciasta. Uruchom ten prompt (wpisz tekst i naciśnij Enter/Return, aby wygenerować kod SQL):

Please select the title and ingredients for all the recipes with a title that contains the word cake.

Sprawdź wygenerowany kod SQL. Gdy efekt będzie zadowalający, uruchom zapytanie.
Nie najgorzej! Zanim przejdziesz dalej, możesz wypróbować kilka innych promptów i zapytań. Eksperymentuj z mniej konkretnymi promptami, aby sprawdzić, co działa, a co nie. Na przykład ten prompt:

Do I have any chili recipes?

(Nie zapomnij uruchomić nowego zapytania) Zwrócono listę przepisów na chili, ale pominięto składniki, dopóki nie zmodyfikowałem zapytania w ten sposób:

Do I have any chili recipes?  Please include their title and ingredients.

(Tak, gdy proszę o coś, mówię „proszę”. Moja mama byłaby taka dumna).

Zauważyłem, że jeden przepis na chili zawierał grzyby, a kto by chciał grzyby w chili? Poprosiłem(-am) 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. Zadanie 5. Stwórz podstawową aplikację internetową w Pythonie i Streamlit z pomocą Gemini

Gdy oba nasze magazyny danych Kreatora agentów Vertex AI są już zaindeksowane, a aplikacje wyszukiwarki są prawie gotowe do wdrożenia, możemy zacząć tworzyć aplikację internetową.

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.

Będziemy programować na stacji roboczej Google Cloud, czyli w środowisku programistycznym w chmurze, które w naszym przypadku jest wstępnie załadowane Eclipse Theia (open source Visual Studio Code). Automatyczny skrypt w tym ćwiczeniu utworzył za nas klaster i konfigurację Cloud Workstations, ale nadal musimy utworzyć samą stację roboczą. Jeśli chcesz dowiedzieć się więcej o Cloud Workstations i ich zastosowaniu, zapytaj Gemini Cloud Assist :-)

Użyj wyszukiwania, aby przejść do Cloud Workstations, a następnie kliknij Utwórz stację roboczą. Nadaj stacji roboczej nazwę dev-env i użyj konfiguracji my-config. Utwórz stację roboczą.
Po kilku minutach nowa stacja robocza pojawi się na liście Moje stacje robocze. Uruchom dev-env, a gdy będzie działać, otwórz środowisko programistyczne.
Edytor stacji roboczej otworzy się w nowej karcie przeglądarki. Po chwili powinien pojawić się znany interfejs Theia (Visual Studio Code). Po lewej stronie interfejsu rozwiń kartę Source Control (Kontrola źródła) i kliknij Clone Repository (Sklonuj repozytorium).

W polu adresu URL repozytorium wpisz https://github.com/haggman/recipe-app. Sklonuj repozytorium do folderu user, a następnie otwórz sklonowane repozytorium do edycji.
Zanim zaczniemy przeglądać sklonowany folder i pracować nad aplikacją internetową, musimy zalogować się w Google Cloud za pomocą wtyczki Cloud Code edytora i włączyć Gemini. Zróbmy to teraz. W lewym dolnym rogu edytora kliknij Cloud Code – zaloguj się. Jeśli nie widzisz linku, poczekaj minutę i sprawdź ponownie.

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. Podczas uwierzytelniania używaj konta tymczasowego student-... do ćwiczeń, a nie osobistego konta Google Cloud. W ostatnim oknie kliknij Kopiuj, aby skopiować kod weryfikacyjny, a następnie wklej go z powrotem w oknie terminala na karcie przeglądarki stacji roboczej w chmurze.
Po chwili link Cloud Code w lewym dolnym rogu edytora zmieni się na Cloud Code – brak projektu. Kliknij nowy link, aby wybrać projekt. U góry edytora powinna się otworzyć paleta poleceń. Kliknij Wybierz projekt Google Cloud i wybierz projekt qwiklabs-gcp-.... Po chwili link w lewym dolnym rogu edytora zostanie zaktualizowany i będzie zawierać identyfikator projektu. Oznacza to, że Cloud Code został prawidłowo dołączony do projektu roboczego.
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 Gemini Chat. Kliknij Wybierz projekt Google Cloud. Gdy otworzy się paleta poleceń, wybierz projekt qwiklabs-gcp-.... Jeśli wykonasz te czynności prawidłowo (i Google niczego nie zmieni), powinna się teraz wyświetlić aktywna rozmowa z Gemini.

Na koniec skonfigurujmy okno terminala edytora. Aby otworzyć okno terminala, kliknij menu hamburgerowe > Wyświetl > Terminal. Wykonaj gcloud init. Ponownie użyj linku, aby zezwolić terminalowi Cloud Shell na działanie w projekcie qwiklabs-gcp-.... Gdy pojawi się prośba, wybierz opcję numeryczną projektu qwiklabs-gcp-....
Świetnie. Po skonfigurowaniu terminala, rozmowy z Gemini i Cloud Code otwórz kartę Eksplorator i poświęć kilka minut na zapoznanie się z plikami w bieżącym projekcie.

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?

Tworzymy więc interaktywną aplikację internetową w Pythonie i Streamlit, która wchodzi w interakcje z Vertex AI i Discovery Engine. Na razie skupmy się na komponentach aplikacji internetowej. Jak mówi Gemini, Streamlit to platforma do tworzenia aplikacji internetowych opartych na danych w Pythonie. Teraz zadaj sobie pytanie:

Does the current project's folder structure seem appropriate for a Streamlit app?s

W tym przypadku Gemini może mieć problemy. Gemini ma dostęp do pliku, który jest obecnie otwarty w edytorze, ale nie widzi całego projektu. Spróbuj zapytać:

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

Chcesz uzyskać lepszą odpowiedź?

Dowiedzmy się więcej o Streamlit:

What can you tell me about Streamlit?

Świetnie, Gemini oferuje nam więc dobre podsumowanie, w tym zalety i wady.

Jeśli chcesz poznać wady, możesz zadać pytanie:

What are the major downsides or shortcomings?

Zauważ, że nie musieliśmy dodawać „w Streamlit”, ponieważ rozmowa z Gemini jest konwersacyjna (wieloetapowa). Gemini wie, o czym rozmawiamy, ponieważ jesteśmy w sesji czatu. Jeśli w dowolnym momencie chcesz wyczyścić historię rozmów z Gemini, użyj ikony kosza u góry okna czatu z kodem Gemini.

9. Zadanie 6. Wdrażanie aplikacji internetowej w Cloud Run

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

W oknie czatu z Gemini zapytaj:

If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?

Pamiętaj, że jeśli nie pracujesz jeszcze w środowisku IDE, możesz też skorzystać z Google Cloud Assist. Otwórz konsolę Google Cloud, a następnie Gemini Cloud Assist i zadaj pytanie:

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 którąś z tych porad? Pamiętaj, że Gemini to asystent AI oparty na generatywnej AI i podobnie jak w przypadku asystenta będącego człowiekiem, nie zawsze musisz się zgadzać ze wszystkim, co mówi. Jednak obecność takiego pomocnika podczas pracy w Google Cloud i edytorze kodu może znacznie zwiększyć Twoją wydajność.

W przypadku bezstanowej, krótkotrwałej skonteneryzowanej aplikacji internetowej Cloud Run będzie doskonałym rozwiązaniem. W oknie rozmowy z Gemini w edytorze kodu wypróbuj prompta:

What steps would be required to run this application in
Cloud Run?

Wygląda na to, że najpierw musimy utworzyć plik Dockerfile. W edytorze utwórz plik o nazwie Dockerfile w katalogu głównym folderu projektu. Uważaj, aby nie umieścić go przypadkowo w folderze pages. Otwórz plik do edycji.
Użyjmy panelu bocznego rozmowy z Gemini, aby utworzyć Dockerfile. Użyj promptu podobnego do tego poniżej. Gdy wyniki zostaną wyświetlone na czacie, użyj znaku + 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 tę samą odpowiedź na ten sam prompt. Gdy po raz pierwszy poprosiłem Gemini o plik Dockerfile, otrzymałem dokładnie ten plik, który zamierzam Ci zaproponować. Właśnie otrzymałem(-am) sugestię:

```docker
# 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"]

That's a heck of a Dockerfile. I'd simplify it a bit. We don't need the apt-get section as anything needed for Python is already in our base image. Also, using a virtual environment in a Python container is a waste of space, so I'd remove that. The expose command isn't strictly necessary, but it's fine. Also, it's trying to start main.py which I don't have.

6. Tweak the Dockerfile so it resembles the following:

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. We need a place in Google cloud where we can store our container image. Let's get a little help from Gemini. In the Google Cloud Console Gemini Cloud Assist ask:

Gdzie w Google Cloud najlepiej przechowywać obrazy Dockera?

8. If one of the answers you received is the Google Container Registry, then I guess Gemini hasn't gotten word that GCR is deprecated. Again, just like human assistants, you may get out of date or simply wrong answers (hallucinations). Always make sure to consider your choices carefully, even when Gemini is recommending something.

Let's go with Artifact Registry. Ask Gemini Cloud Assist how to create a docker registry in Artifact Registry named cooking-images.

Jak mogę użyć gcloud do utworzenia rejestru Dockera w Artifact Registry?

9. Now ask Gemini how you could use Cloud Build to build a new image named `recipe-web-app` from the Dockerfile in the current folder.

Jak mogę użyć gcloud, aby utworzyć nową usługę Cloud Run o nazwie recipe-web-app z obrazu o tej samej nazwie z utworzonego właśnie repozytorium Artifact Registry?

10. To save you a little time, I've created a script that will create the Artifact Registry repo (if needed), use Cloud Build to build and push the image to the repo, and finally to deploy the application to Cloud Run. In your code editor use the **Explorer** view to open `build.sh` and explore the file.
11. Gemini can operate via the chat window, but it can also work directly in your code file using comments, like we used in the Data Wrangling notebook, and it also may be invoked using Control+i on Windows or Command+i on Mac. Click somewhere in the build.sh script file, activate Gemini using the appropriate Command+i / Control+i command.

<img src="img/61ac2c9a245a3695.png" alt="61ac2c9a245a3695.png"  width="624.00" />

12. At the prompt enter the below. Examine and **Accept** the change.

Skomentuj bieżący plik.

How cool is that?! How many times have you had to work with someone elses code, only to have to waste time gaining a base understanding of their commentless work before you can even start making your changes. Gemini to the rescue!

13. Let's build and deploy our application. In the terminal window execute the `build.sh` file.

. build.sh

14. If you watch the build process, first it will build the Artifact Registry docker repo. Then, it uses Cloud Build to create the container image from the Dockerfile in the local folder (since we didn't supply a `cloudbuild.yaml`). Lastly, the docker image will be deployed into a new Cloud Run service. At the end of the script you'll get a Cloud Run test URL to use.

Open the returned link in a new tab of your browser. Take a moment and explore the application's structure and pages. Nice, now we need a hook in our generative AI functionality.


## Task 7: Connect the Cooking Advice page to our cookbook-search Agent Builder app



We have the framework for the web application running, but we need to connect the two work pages to our two Vertex AI Agent Builder search apps. Let's start with Cooking Advice.

1. In the Google Cloud console use search to navigate to **Chat** in Vertex AI.
2. In the right hand settings page pane set the model to **gemini-1.5-flash-002**. Slide the output token limit up to the max so the model can return longer answers if needed. Open the **Safety Filter Settings**. Set Hate speech, Sexually explicit content, and Harassment content to **Block some**. Set Dangerous content to **Block few** and **Save**. We're setting Dangerous Content a bit lower because talking about knives and cutting can be misinterpreted by Gemini as violence.
3. Slide on the toggle to enable **Grounding** then click **Customize**. Set the grounding source to **Vertex AI search** and for the datastore path use the following. Change YOUR_PROJECT_ID to the project ID found up near the End Lab button in these instructions, then **Save** the grounding settings

projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id

**Note:** If you get an error then you either didn't change the project ID to your actual project ID, or you may have missed the step where you changed the old-cookbooks Agent Builder Data Store ID. Check your Agent Builder &gt; Data Stores &gt; old-cookbooks for its actual Data store ID.

4. Test a couple of chat messages. Perhaps start with the below. Try a few others if you like.

Jak sprawdzić, czy pomidor jest dojrzały?

5. The model works, now let's experiment with the code. Click **Clear Conversation** so our conversations don't become part of the code then click **Get Code**.

<img src="img/dce8ad7ee006cca1.png" alt="dce8ad7ee006cca1.png"  width="624.00" />

6. At the top of the code window, press Open Notebook so we can experiment and perfect the code in Colab Enterprise before integrating it into our app.
7. Take a few minutes to familiarize yourself with the code. Let's make a couple of changes to adapt it to what we want. Before we start, run the first code cell to connect to the compute and install the AI Platform SDK. After the block runs you will be prompted to restart the session. Go ahead and do that.
8. Move to the code we pulled out of Vertex AI Studio. Change the name of the method *multiturn_generate_content* to `start_chat_session`.
9. Scroll to the `model = GenerativeModel(` method call. The existing code defines the `generation_config` and `safety_settings` but doesn't actually use them. Modify the creation of the `GenerativeModel` so it resembles:

model = GenerativeModel( "gemini-1.5-flash-002", tools=tools, generation_config=generation_config, safety_settings=safety_settings, )

10. Lastly, add a final line to the method, just below `chat = model.start_chat()`, so the function returns the `chat` object. The finished function should look like the below.

**Note:** DO NOT COPY this code into your notebook. It is simply here as a sanity check.

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. Scroll to the bottom of the code cell and change the final line calling the old function so it calls the new function name and stores the returned object in a variable `chat`. Once you are satisfied with your changes, run the cell.

chat = start_chat_session()

12. Create a new code cell and add the comment `# Use chat to invoke Gemini and print out the response`. Move to the next line and type resp and Gemini should auto complete the block for you. Update the prompt to `How can I tell if a tomato is ripe?`. Run the cell

response = chat.send_message("How can I tell if a tomato is ripe?") print(response)

13. That's the response alright, but the part we really want is that nested text field. Modify the codeblock to print just that section, like:

response = chat.send_message("How can I tell if a tomato is ripe?") print(response.candidates[0].content.parts[0].text)

14. Good, now that we have working chat code, let's integrate it into our web application. Copy all the contents of the code cell that creates the `start_chat_session` function (we won't need the test cell). If you click into the cell you can click the triple dot menu in the upper right corner and copy from there

<img src="img/17bf8d947393d4b.png" alt="17bf8d947393d4b.png"  width="326.00" />

15. Switch to your Cloud Workstation editor and open pages\Cooking_Advice.py for editing.
16. Locate the comment:

Pod tą wiadomością dodaj kod skopiowany z notatnika.

17. Paste your copied code just below the above comment. Nice, now we have the section which drives the chat engine via a grounded call to Gemini. Now let's integrate it into Streamlit.
18. Locate section of commented code directly below the comment:

Oto kod do skonfigurowania zmiennych sesji

Odkomentuj ten blok, gdy otrzymasz taką instrukcję.

19. Uncomment this section of code (Up till the next `Setup done, let's build the page UI` section) and explore it. It creates or retrieves the chat and history session variables.
20. Next, we need to integrate the history and chat functionality into the UI. Scroll in the code until you locate the below comment.

Oto kod, który umożliwia utworzenie interfejsu czatu

Odkomentuj poniższy kod, gdy pojawi się odpowiednia instrukcja.

21. Uncomment the rest of the code below the comment and take a moment to explore it. If you like, highlight it and get Gemini to explain its functionality.
22. Excellent, now let's build the application and deploy it. When the URL comes back, launch the application and give the Cooking Advisor page a try. Perhaps ask it about ripe tomatoes, or the bot knows a good way to prepare brussels sprouts.

. build.sh

How cool is that! Your own personal AI cooking advisor :-)


## Task 8: (Optional) Connect the Recipe Search page to the recipe-search Agent Builder app



When we connected the Cooking Advice page to its grounded source, we did so using the Gemini API directly. For Recipe Search, let's connect to the Vertex AI Agent Builder search app directly.

1. In your Cloud Workstation editor, open the `pages/Recipe_Search.py` page for editing. Investigate the structure of the page.
2. Towards the top of the file, set your project ID.
3. Examine the `search_sample` function. This code more or less comes directly from the Discovery Engine documentation  [here](https://cloud.google.com/generative-ai-app-builder/docs/preview-search-results#genappbuilder_search-python). You can find a working copy in this notebook  [here](https://github.com/GoogleCloudPlatform/generative-ai/blob/main/search/create_datastore_and_search.ipynb).
4. The only change I made was to return the `response.results` instead of just the results. Without this, the return type is an object designed to page through results, and that's something we don't need for our basic application.
5. Scroll to the very end of the file and uncomment the entire section below `Here are the first 5 recipes I found`.
6. Highlight the whole section you just uncommented and open Gemini Code chat. Ask, `Explain the highlighted code`. If you don't have something selected, Gemini can explain the whole file. If you highlight a section and ask Gemini to explain, or comment, or improve it, Gemini will.

Take a moment and read through the explanation. For what it's worth, using a Colab Enterprise notebook is a great way to explore the Gemini APIs before you integrate them into your application. It's especially helpful at exploring some of the newer APIs which may not be documented as well as they could be.
7. At your editor terminal window, run `build.sh` to deploy the final application. Wait until the new version is deployed before moving to the next step.


## Task 9: (Optional) Explore the final application



Take a few minutes to explore the final application.

1. In the Google Cloud console, use search to navigate to **Cloud Run**, then click into your **recipe-web-app**.
2. Locate the application test URL (towards the top) and open it in a new browser tab.
3. The application home page should appear. Note the basic layout and navigation provided by Streamlit, with the python files from the `pages` folder displayed as navigational choices, and the `Home.py` loaded as the home page. Navigate to the **Cooking Advice** page.
4. After a few moments the chat interface will appear. Again, note the nice core layout provided by Streamlit.
5. Try a few cooking related questions and see how the bot functions. Something like:

Czy masz jakieś wskazówki dotyczące przygotowywania brokułów?

Co powiesz na klasyczny przepis na zupę z kurczaka?

Opowiedz mi o bezie.

6. Now let's find a recipe or two. Navigate to the Recipe Search page and try a few searches. Something like:

Chili con carne

Chili, kukurydza, ryż

Ciasto cytrynowe z bezą

Deser z truskawkami

## Congratulations!



You have created an application leveraging Vertex AI Agent Builder applications. Along the way you've explored Gemini Cloud Assist, Gemini Code Assist, and the natural language to SQL features of BigQuery's Data Canvas. Fantastic job!