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. Prasyarat

Jika Anda belum memiliki Akun Google, Anda harus membuat Akun Google.
- Gunakan akun pribadi, bukan akun kantor atau sekolah. Akun kantor dan sekolah mungkin memiliki batasan yang mencegah Anda mengaktifkan API yang diperlukan untuk lab ini.

3. Penyiapan project

Login ke Konsol Google Cloud.
Aktifkan penagihan di Konsol Cloud.
- Menyelesaikan lab ini akan dikenai biaya kurang dari $1 USD untuk resource Cloud.
- Anda dapat mengikuti langkah-langkah di akhir lab ini untuk menghapus resource agar tidak dikenai biaya lebih lanjut.
- Pengguna baru memenuhi syarat untuk mengikuti Uji Coba Gratis senilai$300 USD.
- Menghadiri acara lab interaktif virtual? Kredit senilai$5 USD mungkin tersedia.
Buat project baru atau pilih untuk menggunakan kembali project yang ada.
Konfirmasi bahwa penagihan diaktifkan di Project saya di Penagihan Cloud
- Jika project baru Anda bertuliskan Billing is disabled di kolom Billing account:
  1. Klik tiga titik di kolom Actions
  2. Klik Ubah penagihan
  3. Pilih akun penagihan yang ingin Anda gunakan
- Jika Anda menghadiri acara live, akun tersebut kemungkinan akan diberi nama Akun Penagihan Uji Coba Google Cloud Platform

4. 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.

Untuk mengaktifkan Cloud Assist agar dapat digunakan, klik kotak Penelusuran di bagian atas UI Konsol Cloud, lalu pilih Ask Gemini atau Ask Gemini for Cloud console.
Scroll ke bagian Required API di halaman tersebut, lalu Aktifkan Gemini for Google Cloud API.
Jika Anda tidak langsung melihat antarmuka chat, klik Mulai chat. Mulailah dengan meminta Gemini menjelaskan beberapa manfaat menggunakan Cloud Shell Editor. Luangkan waktu beberapa menit untuk menjelajahi respons yang dihasilkan.
Selanjutnya, tanyakan manfaat Agent Builder dan cara Agent Builder membantu melakukan grounding pada respons generatif.
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?
```

5. 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.

Gunakan kotak penelusuran Konsol Cloud untuk membuka Vertex AI. Dari Dasbor, klik Enable All Recommended APIs. Proses ini mungkin memerlukan waktu beberapa menit. Jika Anda mendapatkan kotak pop-up tentang Vertex AI API yang perlu diaktifkan, Aktifkan juga. Setelah API diaktifkan, Anda dapat melanjutkan ke langkah berikutnya.
Gunakan penelusuran untuk membuka Agent Builder, lalu Continue and Activate the API.
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 Penyimpanan Data dan Buat Penyimpanan Data.
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.
Periksa, tetapi jangan ubah opsi default yang terkait dengan jenis informasi yang kita impor. Biarkan jenis impor ditetapkan ke Folder dan untuk jalur bucket gunakan: labs.roitraining.com/labs/old-cookbooks, lalu Lanjutkan.
Beri nama penyimpanan data: old-cookbooks. Klik 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 cocok untuk membantu kita melakukan apa yang kita inginkan, tetapi karena produk ini masih dalam pratinjau, kita akan tetap menggunakan jenis aplikasi Penelusuran.

Gunakan menu sebelah kiri untuk membuka Apps, lalu klik Create A New App.
Klik Buat di kartu Cari situs Anda. Beri nama aplikasi cookbook-search. Klik Edit, lalu tetapkan ID aplikasi ke cookbook-search-id. Tetapkan perusahaan ke Google, lalu klik Lanjutkan.
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. Memuat dan membersihkan data di notebook Colab Enterprise, dengan bantuan Gemini Code Assist

Google Cloud menawarkan beberapa cara utama untuk menggunakan notebook Jupyter. 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 Jupyter 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.

Gunakan penelusuran untuk membuka Colab Enterprise, lalu klik Buat notebook. Jika Anda mendapatkan penawaran untuk bereksperimen dengan fitur Colab baru, tutup penawaran tersebut. Untuk mengaktifkan runtime, daya komputasi di balik notebook, klik Connect di pojok kanan atas notebook baru Anda.
Klik File > Rename untuk mengganti nama notebook menjadi Data Wrangling.
Klik + Teks untuk membuat kotak teks baru, lalu gunakan panah atas untuk memindahkannya agar menjadi sel pertama di halaman.

Edit kotak teks dan masukkan:

# Data Wrangling

Import the Pandas library

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

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.

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()
```
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 [ ] 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].
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.
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.
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)
```
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()
```
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
```
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)
```
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.
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 mempelajari respons, How can I create a dataset named recipe_data using the Cloud Console? Bandingkan hasilnya dengan beberapa langkah berikut.
Di panel BigQuery Explorer, klik menu tiga titik View actions di samping project ID Anda. Kemudian, pilih Create dataset.
Berikan set data dan ID recipe_data. Biarkan jenis lokasi ke US dan Create Dataset. Jika Anda menerima error bahwa set data sudah ada, lanjutkan saja.Setelah set data dibuat di BigQuery, mari kita kembali ke notebook dan melakukan penyisipan.
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'
```
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. 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.

Gunakan Penelusuran untuk membuka Agent Builder. Buka Data Stores dan Create Data Store. Kali ini, Pilih jenis Penyimpanan Data BigQuery.
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.
Periksa, tetapi jangan ubah opsi default lainnya, lalu klik Lanjutkan.
Di halaman peninjauan skema, periksa konfigurasi default awal, tetapi jangan ubah apa pun. Lanjutkan
Beri nama datastore recipe-data. Edit ID datastore dan tetapkan ke recipe-data-id. Buat Penyimpanan Data.
Buka Apps menggunakan menu navigasi sebelah kiri, lalu Create A New App.
Klik Buat di kartu Cari situs Anda. Beri nama aplikasi recipe-search, lalu klik EDIT untuk menyetel ID ke recipe-search-id. Tetapkan nama perusahaan menjadi Google, lalu klik Lanjutkan.
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.

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.
Klik Telusuri data. Di kotak penelusuran kanvas Data, telusuri recipes, tekan Enter/Return untuk menelusuri, lalu klik tombol Tambahkan ke kanvas di samping nama tabel Anda.
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.
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.
```
Lihat SQL yang dihasilkan. Setelah Anda puas, Jalankan kueri.
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 mengatakan "tolong" saat memberikan perintah. Mama saya pasti bangga.) Saya melihat bahwa salah satu resep cabai berisi jamur, dan siapa yang mau cabai berisi 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. Buka Cloud Shell Editor

Buka Cloud Shell Editor
Jika terminal tidak muncul di bagian bawah layar, buka terminal:
- Klik menu tiga garis
- Klik Terminal
- Klik New Terminal
Di terminal, tetapkan project Anda dengan perintah ini:
- Format:
```
gcloud config set project [PROJECT_ID]
```
- Contoh:
```
gcloud config set project lab-project-id-example
```
- Jika Anda tidak ingat project ID Anda:
  - Anda dapat mencantumkan semua project ID Anda dengan:
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
Jika diminta untuk memberikan otorisasi, klik Authorize untuk melanjutkan.
Anda akan melihat pesan ini:
```
Updated property [core/project].
```
Jika Anda melihat WARNING dan diminta Do you want to continue (Y/N)?, berarti Anda kemungkinan telah memasukkan ID project dengan salah. Tekan N, tekan Enter, lalu coba jalankan perintah gcloud config set project lagi.

9. Mengaktifkan API

Di terminal, aktifkan 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

Jika diminta untuk memberikan otorisasi, klik Authorize untuk melanjutkan. Klik untuk memberikan otorisasi pada Cloud Shell

Pemrosesan perintah ini mungkin membutuhkan waktu beberapa menit, tetapi pada akhirnya akan menghasilkan pesan keberhasilan yang mirip dengan yang berikut:

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

10. 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

Di terminal Cloud Shell Editor, jalankan perintah ini untuk meng-clone repositori aplikasi resep.
```
git clone https://github.com/haggman/recipe-app
```
Jalankan perintah ini untuk membuka folder aplikasi di Cloud Shell Editor.
```
cloudshell open-workspace recipe-app/
```
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.
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. Pada dialog terakhir, Salin kode verifikasi dan tempelkan kembali ke jendela terminal yang menunggu di tab browser Cloud Shell Editor Anda.
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 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.
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 Anda. Jika Anda telah mengikuti langkah-langkah dengan benar (dan Google tidak mengubah apa pun), Anda akan melihat jendela percakapan Gemini yang aktif.
Bagus, setelah konfigurasi terminal, chat Gemini, dan Cloud Code disetel, buka tab Explorer dan luangkan beberapa menit untuk menjelajahi file dalam project saat ini.

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?

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?
```
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?
Mari kita dapatkan informasi selengkapnya tentang Streamlit:
```
What can you tell me about Streamlit?
```
Bagus, jadi kita bisa melihat bahwa Gemini menawarkan ringkasan yang bagus, termasuk kelebihan dan kekurangan.
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.

11. 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?

Di jendela percakapan Gemini, tanyakan:

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

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.
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?
```
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 pages. Buka file untuk diedit.
Mari kita gunakan panel chat Gemini samping untuk membuat Dockerfile. 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:
```
# 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"]
```
Dockerfile yang luar biasa. Saya akan menyederhanakannya sedikit. Kita tidak memerlukan bagian apt-get karena semua yang diperlukan untuk Python sudah ada di image dasar kita. Selain itu, menggunakan lingkungan virtual dalam container Python akan membuang-buang ruang, jadi saya akan menghapusnya. Perintah expose tidak sepenuhnya diperlukan, tetapi tidak masalah. Selain itu, program mencoba memulai main.py yang tidak saya miliki.

Di folder recipe-app, buat file bernama Dockerfile dan tempelkan konten berikut:

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"]

Gemini dapat beroperasi melalui jendela chat, tetapi juga dapat bekerja langsung di file kode Anda menggunakan komentar, seperti yang kita gunakan di notebook Data Wrangling, dan juga dapat dipanggil menggunakan Control+i di Windows atau Command+i di Mac. Klik di suatu tempat di Dockerfile, aktifkan Gemini menggunakan perintah Command+i / Control+i yang sesuai.
Pada perintah, masukkan di bawah. Periksa dan Setujui perubahan.
```
Please comment the current file.
```
Keren, bukan?! Berapa kali Anda harus bekerja dengan kode orang lain, hanya untuk membuang-buang waktu mendapatkan pemahaman dasar tentang pekerjaan mereka yang tanpa komentar sebelum Anda dapat mulai membuat perubahan. Gemini siap membantu!
Sekarang, tanyakan kepada Gemini cara menggunakan Cloud Run untuk membangun dan men-deploy image baru bernama recipe-web-app dari Dockerfile di folder saat ini.
```
How could I use gcloud to build a new Cloud Run service named recipe-web-app from the current directory?
```

Mari kita bangun dan deploy aplikasi kita. Di jendela terminal, jalankan perintah gcloud run deploy

gcloud run deploy recipe-web-app \
    --allow-unauthenticated \
    --source=. \
    --region=us-central1 \
    --port=8501

Jika Anda melihat perintah yang meminta untuk membuat repositori Artifact Registry, tekan 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)?

Jika Anda mengamati proses build, pertama-tama proses ini akan membangun repositori Docker Artifact Registry. Kemudian, Cloud Build akan digunakan untuk membuat image container dari Dockerfile di folder lokal. Terakhir, image Docker akan di-deploy ke layanan Cloud Run baru. Di akhir skrip, Anda akan mendapatkan URL pengujian Cloud Run untuk digunakan.

Buka link yang ditampilkan di tab baru browser Anda. Luangkan waktu sejenak untuk mempelajari struktur dan halaman aplikasi. Bagus, sekarang kita perlu mengaitkan fungsi AI generatif.

12. Menghubungkan halaman Cooking Advice ke aplikasi Agent Builder penelusuran buku masak kami

Kita telah menjalankan framework untuk aplikasi web, tetapi kita perlu menghubungkan dua halaman kerja ke dua aplikasi penelusuran Vertex AI Agent Builder. Mari kita mulai dengan Saran Memasak.

Biarkan tab Cloud Shell Editor Anda tetap terbuka. Di Konsol Google Cloud, gunakan penelusuran untuk membuka Chat di Vertex AI.
Di panel halaman setelan sebelah kanan, tetapkan model ke gemini-1.5-flash-002. Geser batas token output hingga maksimum agar model dapat memberikan jawaban yang lebih panjang jika diperlukan. Buka Setelan Filter Keamanan. Setel Ujaran kebencian, Konten seksual vulgar, dan Konten pelecehan ke Blokir sebagian. Tetapkan Konten berbahaya ke Blokir beberapa dan Simpan. Kami menetapkan Konten Berbahaya sedikit lebih rendah karena pembicaraan tentang pisau dan pemotongan dapat disalahartikan oleh Gemini sebagai kekerasan.
Geser tombol untuk mengaktifkan Perujukan, lalu klik Sesuaikan. Tetapkan sumber perujukan ke Vertex AI Search dan untuk jalur penyimpanan data, gunakan yang berikut. Ubah YOUR_PROJECT_ID menjadi project ID yang ada di dekat tombol Akhiri Lab dalam petunjuk ini, lalu Simpan setelan perujukan
```
projects/YOUR_PROJECT_ID/locations/global/collections/default_collection/dataStores/old-cookbooks-id
```
CATATAN: Jika Anda mendapatkan error, berarti Anda tidak mengubah project ID menjadi project ID yang sebenarnya, atau Anda mungkin melewatkan langkah saat mengubah ID Penyimpanan Data Agent Builder lama. Periksa Agent Builder > Data Stores > old-cookbooks untuk mengetahui ID Penyimpanan datanya yang sebenarnya.
Uji beberapa pesan chat. Mungkin mulai dengan yang di bawah. Coba beberapa lainnya jika Anda suka.
```
How can I tell if a tomato is ripe?
```
Model berfungsi, sekarang mari kita bereksperimen dengan kode. Klik Hapus Percakapan agar percakapan kita tidak menjadi bagian dari kode, lalu klik Dapatkan Kode.
Di bagian atas jendela kode, tekan Open Notebook agar kita dapat bereksperimen dan menyempurnakan kode di Colab Enterprise sebelum mengintegrasikannya ke dalam aplikasi.
Luangkan waktu beberapa menit untuk memahami kode. Mari kita lakukan beberapa perubahan untuk menyesuaikannya dengan yang kita inginkan. Sebelum memulai, jalankan sel kode pertama untuk terhubung ke komputasi dan menginstal AI Platform SDK. Setelah blok berjalan, Anda akan diminta untuk memulai ulang sesi. Harap buat kunci tersebut.
Beralih ke kode yang kita tarik dari Vertex AI Studio. Ubah nama metode multiturn_generate_content menjadi start_chat_session.
Scroll ke panggilan metode model = GenerativeModel(. Kode yang ada menentukan generation_config dan safety_settings, tetapi tidak benar-benar menggunakannya. Ubah pembuatan GenerativeModel sehingga menyerupai:
```
model = GenerativeModel(
    "gemini-1.5-flash-002",
    tools=tools,
    generation_config=generation_config,
    safety_settings=safety_settings,
)
```

Terakhir, tambahkan baris terakhir ke metode, tepat di bawah chat = model.start_chat(), sehingga fungsi menampilkan objek chat. Fungsi yang sudah selesai akan terlihat seperti di bawah.CATATAN: JANGAN SALIN kode ini ke notebook Anda. Hal ini hanya ada di sini sebagai pemeriksaan stabilitas.

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

Scroll ke bagian bawah sel kode dan ubah baris terakhir yang memanggil fungsi lama sehingga memanggil nama fungsi baru dan menyimpan objek yang ditampilkan dalam variabel chat. Setelah Anda puas dengan perubahan yang dilakukan, jalankan sel.
```
chat = start_chat_session()
```
Buat sel kode baru dan tambahkan komentar # Use chat to invoke Gemini and print out the response. Pindah ke baris berikutnya dan ketik resp, lalu Gemini akan melengkapi blok secara otomatis untuk Anda. Perbarui perintah menjadi How can I tell if a tomato is ripe?. Jalankan sel
```
response = chat.send_message("How can I tell if a tomato is ripe?")
print(response)
```
Itu adalah responsnya, tetapi bagian yang kita inginkan adalah kolom text bertingkat tersebut. Ubah blok kode untuk mencetak hanya bagian tersebut, seperti:
```
response = chat.send_message("How can I tell if a tomato is ripe?")
print(response.candidates[0].content.parts[0].text)
```
Bagus, sekarang setelah kita memiliki kode chat yang berfungsi, mari kita integrasikan ke dalam aplikasi web kita. Salin semua konten sel kode yang membuat fungsi start_chat_session (kita tidak memerlukan sel pengujian). Jika Anda mengklik sel, Anda dapat mengklik menu tiga titik di pojok kanan atas dan menyalin dari sana
Beralihlah ke tab Cloud Shell Editor Anda dan buka pages\Cooking_Advice.py untuk diedit.

Temukan komentar:

#
# Add the code you copied from your notebook below this message
#

Tempelkan kode yang Anda salin tepat di bawah komentar Add the code. Bagus, sekarang kita memiliki bagian yang mendorong mesin chat melalui panggilan yang memiliki rujukan ke Gemini. Sekarang, mari kita integrasikan ke Streamlit.

Temukan bagian kode yang diberi komentar tepat di bawah komentar:

#
# Here's the code to setup your session variables
# Uncomment this block when instructed
#

Batalkan komentar pada bagian kode ini (Hingga bagian Setup done, let's build the page UI berikutnya) dan jelajahi. Fungsi ini membuat atau mengambil variabel sesi chat dan histori.
Selanjutnya, kita perlu mengintegrasikan fungsi histori dan chat ke dalam UI. Scroll kode hingga Anda menemukan komentar di bawah.
```
#
# Here's the code to create the chat interface
# Uncomment the below code when instructed
#
```
Hilangkan komentar pada kode lainnya di bawah komentar dan luangkan waktu untuk menjelajahinya. Jika Anda mau, tandai dan minta Gemini menjelaskan fungsinya.
Bagus, sekarang mari kita bangun aplikasi dan deploy. Saat URL kembali, luncurkan aplikasi dan coba halaman Cooking Advisor. Mungkin tanyakan tentang tomat matang, atau bot mengetahui cara yang baik untuk menyiapkan kubis brussel.
```
gcloud run deploy recipe-web-app \
    --allow-unauthenticated \
    --source=. \
    --region=us-central1 \
    --port=8501
```

Keren, bukan? Penasihat memasak AI pribadi Anda sendiri :-)

13. (Opsional) Hubungkan halaman Penelusuran Resep ke aplikasi Agent Builder penelusuran resep

Saat menghubungkan halaman Saran Memasak ke sumber dasarnya, kami melakukannya menggunakan Gemini API secara langsung. Untuk Penelusuran Resep, mari kita hubungkan langsung ke aplikasi penelusuran Vertex AI Agent Builder.

Di Cloud Shell Editor, buka halaman pages/Recipe_Search.py untuk diedit. Selidiki struktur halaman.
Di bagian atas file, tetapkan project ID Anda.
Periksa fungsi search_sample. Kode ini kurang lebih berasal langsung dari dokumentasi Discovery Engine di sini. Anda dapat menemukan salinan yang berfungsi di notebook ini di sini.Satu-satunya perubahan yang saya lakukan adalah menampilkan response.results, bukan hanya hasilnya. Tanpa ini, jenis yang ditampilkan adalah objek yang dirancang untuk melihat hasil per halaman, dan hal itu tidak kita perlukan untuk aplikasi dasar kita.
Scroll ke bagian paling akhir file dan hapus komentar seluruh bagian di bawah Here are the first 5 recipes I found.
Tandai seluruh bagian yang baru saja Anda hapus komentarnya dan buka chat Gemini Code. Tanyakan, Explain the highlighted code. Jika Anda tidak memilih apa pun, Gemini dapat menjelaskan seluruh file. Jika Anda menandai bagian dan meminta Gemini untuk menjelaskan, mengomentari, atau memperbaikinya, Gemini akan melakukannya.Luangkan waktu dan baca penjelasannya. Sebagai informasi tambahan, menggunakan notebook Colab Enterprise adalah cara yang bagus untuk menjelajahi Gemini API sebelum Anda mengintegrasikannya ke dalam aplikasi Anda. Hal ini sangat membantu dalam menjelajahi beberapa API baru yang mungkin tidak didokumentasikan dengan baik.
Di jendela terminal editor, jalankan build.sh untuk men-deploy aplikasi akhir. Tunggu hingga versi baru di-deploy sebelum melanjutkan ke langkah berikutnya.

14. (Opsional) Jelajahi aplikasi akhir

Luangkan waktu beberapa menit untuk menjelajahi aplikasi akhir.

Di Konsol Google Cloud, gunakan penelusuran untuk membuka Cloud Run, lalu klik recipe-web-app Anda.
Temukan URL pengujian aplikasi (di bagian atas) dan buka di tab browser baru.
Halaman beranda aplikasi akan muncul. Perhatikan tata letak dan navigasi dasar yang disediakan oleh Streamlit, dengan file python dari folder pages yang ditampilkan sebagai pilihan navigasi, dan Home.py dimuat sebagai halaman beranda. Buka halaman Cooking Advice.
Setelah beberapa saat, antarmuka chat akan muncul. Sekali lagi, perhatikan tata letak inti yang bagus yang disediakan oleh Streamlit.

Coba beberapa pertanyaan terkait memasak dan lihat cara kerja bot. Seperti:

Do you have any advice for preparing broccoli?

How about a classic chicken soup recipe?

Tell me about meringue.

Sekarang, mari kita cari satu atau dua resep. Buka halaman Penelusuran Resep dan coba beberapa penelusuran. Seperti:
```
Chili con carne

Chili, corn, rice

Lemon Meringue Pie

A dessert containing strawberries
```

15. Selamat!

Anda telah membuat aplikasi yang memanfaatkan aplikasi Vertex AI Agent Builder. Selama ini, Anda telah mempelajari Gemini Cloud Assist, Gemini Code Assist, dan fitur bahasa alami ke SQL di Data Canvas BigQuery. Hebat!

Pembersihan

Cloud SQL tidak memiliki paket gratis dan akan menagih Anda jika Anda terus menggunakannya. Anda dapat menghapus project Cloud untuk menghindari biaya tambahan.

Meskipun Cloud Run tidak mengenakan biaya saat layanannya tidak digunakan, Anda mungkin tetap ditagih atas penyimpanan image container di Artifact Registry. Menghapus project Cloud akan menghentikan penagihan untuk semua resource yang digunakan dalam project tersebut.

Jika Anda ingin, hapus project:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Anda juga dapat menghapus resource yang tidak diperlukan dari disk cloudshell. Anda dapat:

Hapus direktori project codelab:
```
rm -rf ~/task-app
```
Peringatan! Tindakan berikutnya ini tidak dapat diurungkan. Jika ingin menghapus semua yang ada di Cloud Shell untuk mengosongkan ruang, Anda dapat menghapus seluruh direktori beranda Anda. Berhati-hatilah agar semua yang ingin Anda simpan disimpan di tempat lain.
```
sudo rm -rf $HOME
```