Membangun Aplikasi di Era AI

1. Ringkasan

Di lab ini, Anda akan menggunakan produk AI generatif Google untuk membangun infrastruktur di Google Cloud dengan bantuan Gemini Cloud Assist, membuat kueri data BigQuery menggunakan fitur natural language ke SQL dari Data Canvas, menulis kode di notebook Jupyter Colab Enterprise dan di Eclipse Theia (Visual Studio Code) dengan bantuan Gemini Code Assist, serta mengintegrasikan fitur penelusuran dan chat AI yang dibangun di sumber perujukan Cloud Storage dan BigQuery di Vertex AI Agent Builder.

Tujuan kami adalah membuat situs resep dan memasak bernama AI Recipe Haven. Situs ini akan dibuat di Python dan Streamlit serta akan berisi dua halaman utama. Cooking Advice akan menghosting chatbot yang akan kita buat menggunakan Gemini dan sumber yang relevan dari Vertex AI Agent Builder yang terkait dengan sekelompok buku masak, dan chatbot ini akan menawarkan saran memasak serta menjawab pertanyaan terkait memasak. Penelusuran Resep akan menjadi mesin telusur yang didukung oleh Gemini, kali ini didasarkan pada database resep BigQuery.

Jika Anda mengalami masalah dengan kode dalam latihan ini, solusi untuk semua file kode ada di repositori GitHub latihan pada cabang solution.

Tujuan

Di lab ini, Anda akan mempelajari cara melakukan tugas berikut:

  • Mengaktifkan dan menggunakan Gemini Cloud Assist
  • Membuat aplikasi penelusuran di Vertex AI Agent Builder untuk chatbot saran memasak
  • Memuat dan membersihkan data di notebook Colab Enterprise, dengan bantuan Gemini Code Assist
  • Membuat aplikasi penelusuran di Vertex AI Agent Builder untuk generator resep
  • Buat aplikasi web Python dan Streamlit inti, dengan sedikit bantuan Gemini
  • Men-deploy aplikasi web ke Cloud Run
  • Menghubungkan halaman Cooking Advice ke aplikasi Agent Builder penelusuran buku masak kami
  • (Opsional) Hubungkan halaman Penelusuran Resep ke aplikasi Agent Builder penelusuran resep
  • (Opsional) Jelajahi aplikasi akhir

2. Penyiapan dan persyaratan

Sebelum mengklik tombol Start Lab

Baca petunjuk ini. Lab memiliki timer yang tidak dapat dijeda. Timer, yang dimulai saat Anda mengklik Mulai Lab, akan menampilkan durasi ketersediaan resource Google Cloud untuk Anda.

Lab interaktif Qwiklabs ini dapat Anda gunakan untuk melakukan sendiri aktivitas lab di lingkungan cloud sungguhan, bukan di lingkungan demo atau simulasi. Untuk mengakses lab ini, Anda akan diberi kredensial baru yang bersifat sementara dan dapat digunakan untuk login serta mengakses Google Cloud selama durasi lab.

Yang Anda perlukan

Untuk menyelesaikan lab ini, Anda memerlukan:

  • Akses ke browser internet standar (disarankan browser Chrome).
  • Waktu untuk menyelesaikan lab.

Catatan: Jika Anda sudah memiliki project atau akun Google Cloud pribadi, jangan gunakan project atau akun tersebut untuk lab ini.

Catatan: Jika Anda menggunakan Pixelbook, buka jendela Samaran untuk menjalankan lab ini.

Cara memulai lab dan login ke Google Cloud Console

  1. Klik tombol Start Lab. Jika Anda perlu membayar lab, jendela pop-up akan terbuka untuk memilih metode pembayaran. Di sebelah kiri terdapat panel berisi kredensial sementara yang harus Anda gunakan untuk lab ini.

52e0878388c0d9ed.png

  1. Salin nama pengguna, lalu klik Buka Google Console. Lab akan menjalankan resource, lalu membuka tab lain yang menampilkan halaman Sign in.

2a4b7165afebf5ab.png

Tips: Buka tab di jendela terpisah secara berdampingan.

Jika Anda melihat halaman Pilih akun, klik Gunakan Akun Lain.

6463aa9b492a3b60.png

  1. Di halaman Login, tempel nama pengguna yang telah disalin dari panel Connection Details. Lalu, salin dan tempel sandinya.

Penting: Anda harus menggunakan kredensial dari panel Detail Koneksi. Jangan gunakan kredensial Qwiklabs Anda. Jangan menggunakan akun Google Cloud pribadi Anda untuk lab ini agar terhindar dari tagihan. 4. Klik halaman berikutnya:

  1. Setujui persyaratan dan ketentuan.
  2. Jangan tambahkan opsi pemulihan atau autentikasi 2 langkah (karena ini akun sementara).
  3. Jangan daftar uji coba gratis.

Setelah beberapa saat, Cloud Console akan terbuka di tab ini.

Catatan: Anda dapat melihat menu berisi daftar Produk dan Layanan Google Cloud dengan mengklik Menu navigasi di kiri atas.

bbdc8ea800bf0adc.png

3. Tugas 0. Memeriksa cluster Workstation

Di bagian selanjutnya dari lab ini, Anda akan menggunakan Google Cloud Workstation untuk melakukan beberapa pekerjaan pengembangan. Proses startup untuk lab ini seharusnya sudah memulai pembuatan cluster Workstation Anda. Sebelum melanjutkan, pastikan cluster sedang dibangun.

  1. Di Konsol Google Cloud, gunakan kotak penelusuran untuk membuka Cloud Workstations.
  2. Gunakan menu navigasi sebelah kiri untuk melihat Cluster management.
  3. Jika Anda memiliki cluster yang sedang Diperbarui, Anda dapat melanjutkan ke Tugas 1. Jika Anda tidak melihat cluster dalam status apa pun, muat ulang halaman. Jika Anda masih tidak melihat cluster yang sedang Diperbarui (membangun), Akhiri Lab lab ini menggunakan tombol di kiri atas petunjuk ini dan mulai ulang lab.

4. Tugas 1. Mengaktifkan dan menggunakan Gemini Cloud Assist

Dalam tugas ini, kita akan mengaktifkan dan menggunakan Gemini Cloud Assist. Saat bekerja di Konsol Google Cloud, Gemini Cloud Assist dapat menawarkan saran, membantu Anda membangun, mengonfigurasi, dan memantau infrastruktur Google Cloud, serta dapat menyarankan perintah gcloud dan menulis skrip Terraform.

  1. Untuk mengaktifkan Cloud Assist agar dapat digunakan, klik kotak Penelusuran di bagian atas UI Konsol Cloud, lalu pilih Ask Gemini (atau kata-katanya mungkin Ask Gemini for Cloud console).
  2. Scroll ke bagian Required API di halaman tersebut, lalu Aktifkan Gemini for Google Cloud API.
  3. Jika Anda tidak langsung melihat antarmuka chat, klik Mulai chat. Mulai dengan meminta Gemini menjelaskan beberapa manfaat menggunakan Cloud Workstations. Luangkan waktu beberapa menit untuk menjelajahi respons yang dihasilkan.
  4. Selanjutnya, tanyakan manfaat Agent Builder dan cara Agent Builder membantu melakukan grounding pada respons generatif.
  5. Terakhir, mari kita lihat perbandingan. Di jendela percakapan Gemini di Konsol Google Cloud, ajukan pertanyaan berikut:
What are the major steps to creating a search app grounded in a
GCS data source using Vertex AI Agent builder?
  1. Sekarang, di jendela non-samaran, buka situs publik Gemini di sini, login jika perlu, dan ajukan pertanyaan yang sama. Apakah responsnya sama atau setidaknya mirip? Langkah-langkah spesifiknya? Apakah salah satunya terlihat lebih baik? Apa pun itu, ingatlah respons tersebut saat kita membahas langkah-langkah berikutnya.

Catatan: Jika Anda mencoba melakukan langkah di atas menggunakan akun Qwiklabs sementara, Anda akan diblokir. Jika akun kantor Anda juga diblokir karena organisasi Anda tidak mengizinkan penggunaan aplikasi web Gemini, cukup lewati langkah ini dan lanjutkan. Hal ini tidak akan memengaruhi kemampuan Anda untuk menyelesaikan latihan ini.

5. Tugas 2. Membuat aplikasi penelusuran di Vertex AI Agent Builder untuk chatbot saran memasak

Situs yang kita bangun akan memiliki halaman saran memasak yang berisi chatbot yang dirancang untuk membantu pengguna menemukan jawaban atas pertanyaan terkait memasak. Aplikasi ini akan didukung oleh Gemini yang didasarkan pada sumber yang berisi 70 buku masak domain publik. Cookbook akan berfungsi sebagai sumber tepercaya yang digunakan Gemini saat menjawab pertanyaan.

  1. Gunakan kotak penelusuran Konsol Cloud untuk membuka Vertex AI. Dari Dasbor, klik Enable All Recommended APIs. Jika Anda mendapatkan kotak pop-up tentang Vertex AI API yang perlu diaktifkan, Aktifkan juga.
  2. Gunakan penelusuran untuk membuka Agent Builder, lalu Continue and Activate the API.
  3. Seperti yang disarankan Gemini dalam permintaan saran kami sebelumnya, pembuatan aplikasi penelusuran di Agent Builder dimulai dengan pembuatan sumber data yang kredibel. Saat pengguna melakukan penelusuran, Gemini memahami pertanyaan dan cara menyusun respons yang cerdas, tetapi Gemini akan mencari informasi yang digunakan dalam respons tersebut dari sumber yang relevan, bukan mengambil dari pengetahuan bawaannya.

Dari menu sebelah kiri, buka Data Stores dan Create Data Store. 4. Buku masak domain publik yang kami gunakan untuk mendasari halaman saran memasak kami saat ini berada di bucket Cloud Storage dalam project eksternal. Pilih jenis sumber Cloud Storage. 5. Periksa, tetapi jangan ubah opsi default yang terkait dengan jenis informasi yang kita impor. Biarkan jenis impor disetel ke Folder dan untuk jalur bucket, gunakan: labs.roitraining.com/labs/old-cookbooks, lalu Lanjutkan. 6. Beri nama penyimpanan data: old-cookbooks. Edit dan ubah ID menjadi old-cookbooks-id, lalu Buat penyimpanan data.

Vertex AI Agent Builder mendukung beberapa jenis aplikasi, dan Penyimpanan Data bertindak sebagai sumber tepercaya untuk setiap jenis aplikasi. Aplikasi penelusuran cocok untuk penggunaan dan penelusuran umum. Aplikasi Chat ditujukan untuk alur generatif dalam aplikasi chatbot/voicebot yang didukung Dataflow. Aplikasi rekomendasi membantu membuat mesin pemberi saran yang lebih baik. Selain itu, aplikasi Agen digunakan untuk membuat agen yang didukung GenAI. Pada akhirnya, Agent mungkin akan paling berguna untuk apa yang ingin kita lakukan, tetapi karena produk ini masih dalam pratinjau, kita akan tetap menggunakan jenis aplikasi Penelusuran. 7. Gunakan menu sebelah kiri untuk membuka Aplikasi, lalu klik Buat Aplikasi. 8. Pilih jenis aplikasi Penelusuran. Periksa, tetapi jangan ubah berbagai opsi. Beri nama aplikasi: cookbook-search. Edit dan setel ID aplikasi ke cookbook-search-id. Tetapkan perusahaan ke Google, lalu klik Lanjutkan. 9. Periksa penyimpanan data old-cookbooks yang Anda buat beberapa langkah lalu dan Buat Aplikasi Penelusuran.

Jika Anda memeriksa tab Aktivitas, Anda mungkin akan melihat bahwa buku masak masih diimpor dan diindeks. Agent Builder akan memerlukan waktu 5+ menit untuk mengindeks ribuan halaman yang ada dalam 70 buku masak yang telah kami berikan. Saat sedang berfungsi, mari kita muat dan bersihkan beberapa data database resep untuk generator resep kita.

6. Tugas 3. Memuat dan membersihkan data di notebook Colab Enterprise, dengan bantuan Gemini Code Assist

Google Cloud menawarkan beberapa cara utama untuk menggunakan notebook Jupiter. Kita akan menggunakan penawaran terbaru Google, yaitu Colab Enterprise. Beberapa dari Anda mungkin sudah familiar dengan produk Colab Google, yang biasanya digunakan oleh individu dan organisasi yang ingin bereksperimen dengan notebook Jupiter di lingkungan gratis. Colab Enterprise adalah penawaran Google Cloud komersial yang terintegrasi sepenuhnya dengan produk cloud Google lainnya dan yang memanfaatkan sepenuhnya kemampuan keamanan dan kepatuhan lingkungan GCP.

Salah satu fitur yang ditawarkan Colab Enterprise adalah integrasi dengan Gemini Code Assist Google. Code Assist dapat digunakan di sejumlah editor kode yang berbeda dan dapat menawarkan saran serta saran inline yang lancar saat Anda membuat kode. Kita akan memanfaatkan asisten generatif ini saat mengelola data resep.

  1. Gunakan penelusuran untuk membuka Colab Enterprise dan Buat notebook. Jika Anda mendapatkan penawaran untuk bereksperimen dengan fitur Colab baru, tutup penawaran tersebut. Untuk mengaktifkan runtime, daya komputasi di balik notebook, tekan Connect di pojok kanan atas notebook baru Anda.

386577c713522b4d.png

  1. Gunakan menu tiga titik di samping nama notebook saat ini di panel File Colab Enterprise untuk mengganti namanya Data Wrangling.

4cb787f255bac415.png

  1. Buat kotak + Teks baru, lalu gunakan panah atas untuk memindahkannya agar menjadi sel pertama di halaman.

6a08b3ccc9c2174b.png

  1. Edit kotak teks dan masukkan:
# Data Wrangling

Import the Pandas library
  1. Di blok kode di bawah blok teks yang baru saja Anda buat, mulai ketik imp dan Gemini Code Assist akan menyarankan sisa impor dalam warna abu-abu. Tekan tab untuk menerima saran.
import pandas as pd
  1. Di bawah kotak kode impor, buat kotak teks lain dan masukkan:
Create a Pandas DataFrame from: gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv. View the first few records.
  1. Buat dan edit blok kode lain. Sekali lagi, mulai ketik df dan periksa kode yang dihasilkan Gemini Code Assistant. Jika Anda melihat daftar drop-down pelengkapan otomatis kata kunci Python di atas saran yang dihasilkan, tekan escape untuk melihat kode yang disarankan berwarna abu-abu muda. Tekan tab lagi untuk menerima saran. Jika saran Anda tidak berisi panggilan fungsi head(), tambahkan.
df = pd.read_csv('gs://labs.roitraining.com/labs/recipes/recipe_dataset.csv')
df.head()
  1. Klik sel kode pertama Anda, tempat Anda mengimpor Pandas, dan gunakan menu Commands atau keyboard untuk menjalankan sel yang dipilih. Pada keyboard, shift+enter akan menjalankan sel dan mengalihkan fokus ke sel berikutnya, serta membuat sel jika diperlukan. Tunggu hingga sel dieksekusi sebelum melanjutkan.

Catatan: Anda akan melihat [ ] tepat di sebelah kiri saat sel belum dieksekusi. Saat sel sedang dieksekusi, Anda akan melihat animasi kerja yang berputar. Setelah sel selesai, angka akan muncul, seperti [13]. 9. Jalankan sel yang memuat CSV ke DataFrame. Tunggu hingga file dimuat dan periksa lima baris pertama data. Ini adalah data resep yang akan kita muat ke BigQuery dan pada akhirnya akan kita gunakan untuk mendasari generator resep kita. 10. Buat blok kode baru dan masukkan komentar di bawah. Setelah mengetik komentar, pindah ke baris kode berikutnya dan Anda akan menerima saran df.columns. Terima, lalu jalankan sel.

# List the current DataFrame column names

Kita baru saja mendemonstrasikan bahwa Anda benar-benar memiliki dua pilihan tentang cara mendapatkan bantuan dari Gemini Code Assist di notebook Jupyter: sel teks di atas sel kode, atau komentar di dalam sel kode itu sendiri. Komentar di dalam sel kode berfungsi dengan baik di notebook Jupyter, tetapi pendekatan ini juga akan berfungsi di IDE lain yang mendukung Gemini Code Assist Google.

  1. Mari kita bersihkan sedikit kolom. Ganti nama kolom Unnamed: 0 menjadi id, dan link menjadi uri. Gunakan teknik perintah > kode pilihan Anda untuk membuat kode, lalu jalankan sel jika sudah puas.
# Rename the column 'Unnamed: 0' to 'id' and 'link' to 'uri'
df.rename(columns={'Unnamed: 0': 'id', 'link': 'uri'}, inplace=True)
  1. Hapus kolom source dan NER, lalu gunakan head() untuk melihat beberapa baris pertama. Sekali lagi, minta bantuan Gemini. Jalankan dua baris terakhir dan periksa hasilnya.
# Remove the source and NER columns
df.drop(columns=['source', 'NER'], inplace=True)
df.head()
  1. Mari kita lihat berapa banyak catatan yang ada dalam set data kita. Sekali lagi, mulailah dengan teknik perintah pilihan Anda dan lihat apakah Anda bisa meminta Gemini membantu Anda membuat kode.
# Count the records in the DataFrame
df.shape # count() will also work
  1. 2,23 juta data mungkin lebih banyak resep daripada yang bisa kita coba. Proses pengindeksan di Agent Builder kemungkinan akan memakan waktu terlalu lama untuk latihan kita hari ini. Sebagai kompromi, mari kita ambil sampel 150.000 resep dan gunakan resep tersebut. Gunakan pendekatan perintah > kode untuk mengambil sampel dan menyimpannya dalam DataFrame baru bernama dfs (s untuk kecil).
# Sample out 150,000 records into a DataFrame named dfs
dfs = df.sample(n=150000)
  1. Data sumber resep kita siap dimuat ke BigQuery. Sebelum melakukan pemuatan, buka BigQuery dan siapkan set data untuk menyimpan tabel kita. Di Konsol Google Cloud, gunakan Kotak Penelusuran untuk membuka BigQuery. Anda dapat mengklik kanan BigQuery dan membukanya di tab browser baru.
  2. Jika belum terlihat, buka panel Gemini AI Chat menggunakan logo Gemini di kanan atas Konsol Cloud. Jika Anda diminta untuk mengaktifkan API lagi, tekan aktifkan atau muat ulang halaman. Jalankan perintah: What is a dataset used for in BigQuery? Setelah Anda menjelajahi respons, tanyakan: How can I create a dataset named recipe_data using the Cloud Console? Bandingkan hasilnya dengan beberapa langkah berikut.

3c38e5975c5c519.png

  1. Di panel BigQuery Explorer, klik menu tiga titik View actions di samping project ID Anda. Kemudian, pilih Create dataset.

e28c2fc55a04c694.png

  1. Berikan set data dan ID recipe_data. Biarkan jenis lokasi ke US dan Create Dataset. Jika Anda menerima pesan error bahwa set data sudah ada, lanjutkan saja.

Setelah set data dibuat di BigQuery, mari kita kembali ke notebook dan melakukan penyisipan. 19. Beralih kembali ke notebook Penyiapan Data Anda di Colab Enterprise. Di sel kode baru, buat variabel bernama project_id dan gunakan untuk menyimpan project ID Anda saat ini. Lihat di kiri atas petunjuk ini, di bawah tombol End Lab, dan Anda akan menemukan project ID saat ini. Link ini juga ada di halaman beranda Konsol Cloud jika Anda mau. Tetapkan nilai ke variabel project_id Anda dan jalankan sel.

# Create a variable to hold the current project_id
project_id='YOUR_PROJECT_ID'
  1. Gunakan pendekatan prompt > kode untuk membuat blok kode yang akan menyisipkan DataFrame dfs ke dalam tabel bernama recipes di set data yang baru saja kita buat recipe_data. Jalankan sel.
dfs.to_gbq(destination_table='recipe_data.recipes', project_id=project_id, if_exists='replace')

7. Tugas 4. Membuat aplikasi penelusuran di Vertex AI Agent Builder untuk generator resep

Bagus, setelah tabel data resep dibuat, mari kita gunakan untuk membuat sumber data berbasis untuk generator resep kita. Pendekatan yang akan kita gunakan akan serupa dengan yang kita lakukan untuk chatbot memasak. Kita akan menggunakan Vertex AI Agent Builder untuk membuat Penyimpanan Data, lalu menggunakannya sebagai sumber tepercaya untuk Aplikasi Penelusuran.

Jika mau, Anda dapat meminta Gemini di Konsol Google Cloud untuk mengingatkan Anda tentang langkah-langkah membuat aplikasi penelusuran Agent Builder, atau Anda dapat mengikuti langkah-langkah yang tercantum di bawah.

  1. Gunakan Penelusuran untuk membuka Agent Builder. Buka Data Stores dan Create Data Store. Kali ini, Pilih jenis Penyimpanan Data BigQuery.
  2. Di sel pilihan tabel, tekan Jelajahi dan telusuri recipes. Pilih tombol pilihan di samping tabel Anda. Jika Anda melihat resep dari project qwiklabs-gcp-... lainnya, pastikan untuk Memilih resep yang menjadi milik Anda.

Catatan: Jika Anda mengklik recipes, bukan memilih tombol pilihan di sampingnya, tab baru akan terbuka di browser dan Anda akan diarahkan ke halaman ringkasan tabel di BigQuery. Cukup tutup tab browser dan pilih tombol pilihan di Agent Builder. 3. Periksa, tetapi jangan ubah opsi default lainnya, lalu klik Lanjutkan. 4. Di halaman peninjauan skema, periksa konfigurasi default awal, tetapi jangan ubah apa pun. Lanjutkan 5. Beri nama datastore recipe-data. Edit ID datastore dan tetapkan ke recipe-data-id. Buat Penyimpanan Data. 6. Buka Aplikasi menggunakan menu navigasi di sebelah kiri, lalu klik Buat Aplikasi. 7. Pilih aplikasi Penelusuran sekali lagi. Beri nama aplikasi recipe-search dan tetapkan ID ke recipe-search-id. Tetapkan nama perusahaan menjadi Google, lalu klik Lanjutkan. 8. Kali ini, periksa sumber data recipe-data. Buat aplikasi.

Diperlukan waktu beberapa saat agar tabel database kita dapat diindeks. Sambil menunggu, mari kita bereksperimen dengan Data Canvas baru BigQuery dan lihat apakah kita dapat menemukan satu atau dua resep yang menarik. 9. Gunakan kotak penelusuran untuk membuka BigQuery. Di bagian atas BigQuery Studio, klik panah bawah di samping tab paling kanan, lalu pilih Kanvas data. Setel region ke us-central1.

5d562cddb1717c32.png

  1. Di kotak penelusuran kanvas Data, telusuri recipes, lalu Tambahkan ke kanvas tabel Anda.
  2. Representasi visual tabel resep Anda akan dimuat ke kanvas Data BigQuery. Anda dapat menjelajahi skema tabel, melihat pratinjau data dalam tabel, dan memeriksa detail lainnya. Di bawah representasi tabel, klik Kueri.
  3. Kanvas akan memuat dialog kueri BigQuery yang kurang lebih umum dengan satu tambahan: di atas jendela kueri terdapat kotak teks yang dapat Anda gunakan untuk meminta bantuan Gemini. Mari kita lihat apakah kita dapat menemukan beberapa resep kue dalam sampel kita. Jalankan perintah berikut (dengan mengetik teks dan menekan enter/return untuk memicu pembuatan SQL):
Please select the title and ingredients for all the recipes with a title that contains the word cake.
  1. Lihat SQL yang dihasilkan. Setelah Anda puas, Jalankan kueri.
  2. Tidak terlalu buruk! Jangan ragu untuk bereksperimen dengan beberapa perintah dan kueri lain sebelum melanjutkan. Saat bereksperimen, coba perintah yang kurang spesifik untuk melihat apa yang berhasil dan apa yang tidak. Sebagai contoh, perintah ini:
Do I have any chili recipes?

(Jangan lupa untuk menjalankan kueri baru) Menampilkan daftar resep cabai, tetapi tidak menyertakan bahan-bahannya hingga saya mengubahnya menjadi:

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

(Ya, saya mengucapkan "tolong" saat memberikan perintah. Mama saya pasti bangga.)

Saya melihat bahwa salah satu resep cabai berisi jamur, dan siapa yang mau cabai dengan jamur? Saya meminta Gemini membantu mengecualikan resep tersebut.

Do I have any chili recipes?  Please include their title and ingredients, and ignore any recipes with mushrooms as an ingredient.

8. Tugas 5. Buat aplikasi web Python dan Streamlit inti, dengan sedikit bantuan Gemini

Dengan kedua penyimpanan data Vertex AI Agent Builder yang mengindeks dan aplikasi penelusuran yang hampir siap diluncurkan, mari kita mulai membangun aplikasi web.

Kita akan memanfaatkan Gemini Code Assist saat bekerja. Untuk mengetahui informasi selengkapnya tentang cara menggunakan Gemini Code Assist di Visual Studio Code, lihat dokumentasi di sini

Kita akan melakukan pengembangan di Google Cloud Workstation; lingkungan pengembangan berbasis cloud, dalam kasus ini, sudah dimuat sebelumnya dengan Eclipse Theia (Visual Studio Code open source). Skrip otomatis dalam latihan ini telah membuat cluster dan konfigurasi Cloud Workstation untuk kita, tetapi kita masih perlu membuat Cloud Workstation itu sendiri. Jika Anda ingin mengetahui informasi selengkapnya tentang Cloud Workstations dan penggunaannya, Anda dapat bertanya kepada Gemini Cloud Assist :-)

  1. Gunakan penelusuran untuk membuka Cloud Workstations, lalu Create Workstation. Beri nama Workstation dev-env dan gunakan konfigurasi my-config. Buat workstation.
  2. Setelah beberapa menit, Anda akan melihat workstation baru di daftar Workstation saya. Mulai dev-env dan setelah berjalan, Luncurkan lingkungan pengembangan.
  3. Editor workstation akan terbuka di tab browser baru, dan setelah beberapa saat, Anda akan melihat antarmuka Theia (Visual Studio Code) yang sudah dikenal. Di sisi kiri antarmuka, luaskan tab Source Control, lalu tekan Clone Repository.

c03d05b42d28a518.png

  1. Untuk URL repositori, masukkan https://github.com/haggman/recipe-app. Clone repo ke folder user Anda, lalu Open repo yang di-clone untuk diedit.
  2. Sebelum menjelajahi folder yang di-clone dan mulai mengerjakan aplikasi web, kita perlu membuat plugin Cloud Code editor login ke Google Cloud dan mengaktifkan Gemini. Mari kita lakukan sekarang. Di kiri bawah editor, klik Cloud Code - Sign in. Jika Anda tidak melihat link tersebut, tunggu sebentar dan periksa lagi.

f4ebfbd96026c0d8.png

  1. Jendela terminal akan menampilkan URL yang panjang. Buka URL di browser dan jalankan langkah-langkah untuk memberikan akses Cloud Code ke lingkungan Google Cloud Anda. Pastikan Anda menggunakan akun latihan temp student-..., bukan akun Google Cloud pribadi saat melakukan autentikasi. Di dialog terakhir, Salin kode verifikasi dan tempelkan kembali ke jendela terminal yang menunggu di tab browser Cloud Workstation Anda.
  2. Setelah beberapa saat, link Cloud Code di kiri bawah editor Anda akan berubah menjadi Cloud Code - No Project. Klik link baru untuk memilih project. Palet perintah akan terbuka di bagian atas editor. Klik Select a Google Cloud project, lalu pilih project qwiklabs-gcp-... Anda. Setelah beberapa saat, link di kiri bawah editor akan diperbarui untuk menampilkan project ID Anda. Hal ini menunjukkan bahwa Cloud Code berhasil dilampirkan ke project kerja Anda.
  3. Dengan Cloud Code yang terhubung ke project Anda, Anda kini dapat mengaktifkan Gemini Code Assist. Di kanan bawah antarmuka editor, klik logo Gemini yang dicoret. Panel Gemini Chat akan terbuka di sebelah kiri editor. Klik Select a Google Cloud Project. Saat palet perintah terbuka, pilih project qwiklabs-gcp-... Anda. Jika Anda telah mengikuti langkah-langkah dengan benar (dan Google tidak mengubah apa pun), Anda akan melihat jendela percakapan Gemini yang aktif.

70e4e06ed6565329.png

  1. Terakhir, mari kita konfigurasi jendela terminal editor secara merata. Gunakan menu hamburger > View > Terminal untuk membuka jendela terminal. Jalankan gcloud init. Sekali lagi, gunakan link untuk mengizinkan terminal Cloud Shell beroperasi pada project qwiklabs-gcp-... Anda. Saat ditanya, pilih opsi numerik project qwiklabs-gcp-... Anda.
  2. Bagus, setelah konfigurasi terminal, chat Gemini, dan Cloud Code disetel, buka tab Explorer dan luangkan beberapa menit untuk menjelajahi file dalam project saat ini.

3b2dc3820ed643e2.png

  1. Di Explorer, buka file requirements.txt untuk diedit. Beralih ke panel chat Gemini dan tanyakan:
From the dependencies specified in the requirements.txt file, what type of application are we building?
  1. Jadi, kita akan membangun aplikasi web interaktif menggunakan Python dan Streamlit yang berinteraksi dengan Vertex AI dan Discovery Engine. Untuk saat ini, mari kita fokus pada komponen aplikasi web. Seperti yang dikatakan Gemini, Streamlit adalah framework untuk membangun aplikasi web berbasis data di Python. Sekarang tanyakan:
Does the current project's folder structure seem appropriate for a Streamlit app?s

Di sinilah Gemini cenderung mengalami masalah. Gemini dapat mengakses file yang saat ini Anda buka di editor, tetapi tidak dapat melihat seluruh project. Coba tanyakan ini:

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

Mendapatkan jawaban yang lebih baik?

  1. Mari kita dapatkan informasi selengkapnya tentang Streamlit:
What can you tell me about Streamlit?

Bagus, jadi kita bisa melihat Gemini menawarkan ringkasan yang bagus, termasuk kelebihan dan kekurangan.

  1. Jika ingin mengeksplorasi kekurangan, Anda dapat bertanya:
What are the major downsides or shortcomings?

Perhatikan, kita tidak perlu mengatakan, "Streamlit", karena Gemini Chat bersifat percakapan (bolak-balik). Gemini tahu apa yang telah kita bicarakan karena kita berada dalam sesi chat. Jika kapan saja Anda ingin menghapus histori percakapan Gemini, gunakan ikon tempat sampah di bagian atas jendela percakapan kode Gemini.

9. Tugas 6: Men-deploy aplikasi web ke Cloud Run

Bagus, kita sudah memiliki struktur aplikasi inti, tetapi apakah semuanya akan berfungsi? Lebih baik lagi, di mana kita harus menghostingnya di Google Cloud?

  1. Di jendela percakapan Gemini, tanyakan:
If I containerize this application, what compute technologies
in Google Cloud would be best for hosting it?
  1. Ingat, jika Anda belum bekerja di IDE, Anda juga dapat menggunakan Google Cloud Assist. Buka Konsol Google Cloud, lalu buka Gemini Cloud Assist dan tanyakan:
If I have a containerized web application, where would be the
best place to run it in Google Cloud?

Apakah kedua saran tersebut sama? Apakah Anda setuju/tidak setuju dengan saran tersebut? Ingat, Gemini adalah asisten AI Generatif, dan seperti asisten manusia, Anda tidak akan selalu setuju dengan semua yang dikatakannya. Namun, memiliki bantuan yang selalu siap membantu Anda saat Anda bekerja di Google Cloud dan di editor kode dapat membuat Anda jauh lebih efisien.

  1. Untuk aplikasi web dalam container yang stateless dan berumur pendek, Cloud Run akan menjadi opsi yang tepat. Di jendela chat Gemini pada editor kode Anda, coba perintah:
What steps would be required to run this application in
Cloud Run?
  1. Sepertinya hal pertama yang perlu kita lakukan adalah membuat Dockerfile. Dengan menggunakan editor, buat file bernama Dockerfile di root folder project Anda. Pastikan Anda tidak menempatkannya secara tidak sengaja di folder halaman. Buka file untuk diedit.
  2. Mari gunakan panel chat Gemini samping untuk membuat Dockerfile kita. Gunakan perintah seperti di bawah ini. Saat hasil ditampilkan dalam chat, gunakan + di samping ikon salin tepat di atas Dockerfile yang disarankan untuk menyisipkan kode yang disarankan ke dalam 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 tidak selalu memberikan respons yang sama untuk perintah yang sama. Saat pertama kali meminta Dockerfile kepada Gemini, saya mendapatkan file persis yang akan saya sarankan untuk Anda gunakan. Baru saja saya menerima saran:

```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:

Di mana tempat terbaik di Google Cloud untuk menyimpan image Docker?

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.

Bagaimana cara menggunakan gcloud untuk membuat registry Docker di 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.

Bagaimana cara menggunakan gcloud untuk membangun layanan Cloud Run baru bernama recipe-web-app dari image dengan nama yang sama dari repo Artifact Registry yang baru saja kita buat?

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.

Beri komentar pada file saat ini.

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.


Bagaimana cara mengetahui apakah tomat sudah matang?

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:


Tambahkan kode yang Anda salin dari notebook di bawah pesan ini

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:

Berikut kode untuk menyiapkan variabel sesi Anda

Hapus komentar pada blok ini saat diinstruksikan

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.

Berikut kode untuk membuat antarmuka chat

Hapus komentar pada kode di bawah saat diinstruksikan

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:

Apakah Anda punya saran untuk menyiapkan brokoli?

Bagaimana dengan resep sup ayam klasik?

Ceritakan tentang meringue.

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

Cabai, jagung, nasi

Pai Meringue Lemon

Makanan penutup yang mengandung stroberi

## 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!