Ringkasan

Di lab ini, Anda akan mengintegrasikan agen AI dengan aplikasi Flutter. Flutter digunakan sebagai framework aplikasi klien, Vertex AI Search digunakan sebagai database vektor, dan Reasoning Engine digunakan untuk membangun serta men-deploy agen dengan LangChain di Vertex AI. Agen ini menggunakan Gemini, yakni rangkaian model bahasa besar (LLM) yang sangat canggih untuk menghasilkan respons AI terhadap perintah teks dan gambar.

Lab ini telah disediakan sebelumnya dengan VSCode sebagai IDE menggunakan code-server, bersama dengan ekstensi Flutter dan Dart yang diperlukan untuk menjalankan aplikasi Flutter. Lab ini juga menyertakan fwr, yakni alat yang digunakan untuk menyajikan aplikasi Flutter sebagai aplikasi web yang Anda akses menggunakan browser.

Lab ini ditujukan bagi para developer dengan segala tingkat pengalaman yang berkontribusi untuk membangun aplikasi, tetapi mungkin belum memahami pengembangan aplikasi cloud. Akan sangat membantu apabila Anda telah berpengalaman dalam menggunakan Python, dan familier dengan framework Flutter. Anda tidak harus mengenal Flutter agar dapat melakukan tugas-tugas dalam lab ini, tetapi Anda akan meninjau beberapa kode aplikasi Flutter dan menguji fungsi aplikasi tersebut.

Tujuan

Di lab ini, Anda akan melakukan tugas-tugas berikut:

• Membuat penyimpanan data penelusuran dan aplikasi penelusuran menggunakan Aplikasi AI di Konsol Google Cloud.

• Men-deploy agen Reasoning Engine menggunakan Vertex AI Workbench.

• Menggunakan aplikasi Python yang terintegrasi dengan Vertex AI Search dan agen Reasoning Engine.

• Men-deploy aplikasi ke Cloud Run dan menggunakannya sebagai backend untuk aplikasi Flutter.

• Menyiapkan project Firebase dan menghubungkannya ke aplikasi Flutter.

  Berikut adalah ringkasan berbagai komponen yang digunakan di lab ini:

  

Penyiapan

Untuk setiap lab, Anda akan memperoleh project Google Cloud baru serta serangkaian resource selama jangka waktu tertentu, tanpa biaya.

1. Login ke Qwiklabs menggunakan jendela samaran.

2. Perhatikan waktu akses lab (misalnya, 1:15:00), dan pastikan Anda dapat menyelesaikannya dalam waktu tersebut.
   Tidak ada fitur jeda. Bila perlu, Anda dapat memulai ulang lab, tetapi Anda harus memulai dari awal.

3. Jika sudah siap, klik Start lab.

4. Catat kredensial lab (Nama pengguna dan Sandi) Anda. Anda akan menggunakannya untuk login ke Google Cloud Console.

5. Klik Open Google Console.

6. Klik Use another account, lalu salin/tempel kredensial lab ini ke perintah yang muncul.
   Jika menggunakan kredensial lain, Anda akan menerima pesan error atau dikenai biaya.

7. Setujui ketentuan dan lewati halaman resource pemulihan.

Tugas 1. Membuat penyimpanan data penelusuran dan aplikasi penelusuran

Dalam tugas ini, Anda akan menerapkan kemampuan penelusuran untuk aplikasi Flutter dengan membuat penyimpanan data penelusuran dan aplikasi penelusuran menggunakan aplikasi AI di Konsol Google Cloud.

Membuat penyimpanan data penelusuran

1. Di Konsol Cloud, klik View All Products. Di halaman All Products, scroll ke bagian Artificial Intelligence, lalu klik AI Applications.

2. Klik Continue and activate the API.

3. Di panel kiri, klik Data Stores, dan di halaman Data Stores, klik Create Data Store.

   Di halaman ini, Anda akan mengonfigurasi sumber data untuk digunakan di hasil penelusuran. Lab ini telah disediakan dengan bucket Cloud Storage yang berisi file .csv yang memiliki data tentang item dari toko merchandise Google.

4. Untuk memilih Cloud Storage sebagai sumber data, di bagian Cloud Storage, klik Select.

5. Untuk jenis data yang diimpor, pilih Structured FAQ data for a chat application (CSV).

6. Untuk memilih folder atau file yang akan diimpor, klik File.

7. Untuk memberikan URL Cloud Storage ke file CSV, klik Browse.

8. Untuk melihat konten bucket Cloud Storage , klik .

9. Pilih file goog_merch.csv, lalu klik Select.

   URI gs:// ke folder diisi.

   

10. Klik Continue.

11. Untuk nama penyimpanan data, ketik goog-merch-ds.

12. Klik Create.

    Penyimpanan data dibuat, dan penyerapan data dari file CSV dimulai.

13. Di halaman Data Stores, klik nama penyimpanan data yang baru dibuat.

14. Tab Documents menampilkan daftar dokumen yang telah diimpor. Untuk melihat data yang terkait dengan dokumen, klik View Document.

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat penyimpanan data Vertex AI Search.

Membuat aplikasi penelusuran

Untuk menggunakan penyimpanan data penelusuran, Anda dapat menghubungkannya ke aplikasi penelusuran di Vertex AI Agent Builder.

1. Di Konsol Cloud, klik AI applications, lalu klik Apps.

2. Klik Create App.

3. Di halaman Create App, untuk jenis aplikasi yang akan dibuat, di bagian Search and assistant > Custom search (general), klik Create.

4. Di halaman Search app configuration, konfigurasi aplikasi penelusuran website dengan setelan ini, dan tetap gunakan nilai default untuk setelan lainnya:

   Properti	Nilai (ketik atau pilih)
   Enterprise edition features	Disable
   Your app name	gms-search-app
   External name of your company or organization	gms-company
   Location of your app	global (Global)

5. Klik Continue.

6. Daftar penyimpanan data yang ada akan ditampilkan. Pilih penyimpanan data goog_merch_ds yang Anda buat di subtugas sebelumnya.

7. Untuk membuat aplikasi penelusuran, klik Create.

   Aplikasi penelusuran telah dibuat dan penyimpanan data telah terhubung ke aplikasi.

8. Untuk menguji aplikasi penelusuran, di menu navigasi aplikasi AI, klik Preview.

9. Di kolom Search, ketik dino.

   Daftar hasil penelusuran terkait ditampilkan dari dokumen yang diimpor ke penyimpanan data.

   

   Catatan: Jika Anda melihat error yang menyatakan bahwa Search preview isn't ready yet, tunggu beberapa menit sebelum mencoba lagi. Jika tidak ingin menunggu, Anda dapat melanjutkan ke tugas berikutnya di lab.

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat aplikasi Vertex AI Search.

Tugas 2. Membangun dan men-deploy backend

Backend aplikasi Flutter akan berjalan sebagai layanan Cloud Run di Google Cloud. Layanan backend terintegrasi dengan aplikasi penelusuran yang Anda buat di langkah sebelumnya untuk menghasilkan respons penelusuran dari data toko merchandise. Backend juga terintegrasi dengan agen Reasoning Engine untuk mengakses Gemini guna mendapatkan konten AI generatif sebagai respons terhadap kueri dari aplikasi Flutter.

Dalam tugas ini, Anda akan membangun dan men-deploy aplikasi Python backend ke Cloud Run.

Mengonfigurasi dan meninjau aplikasi backend

1. IDE berbasis VSCode telah disediakan untuk lab ini. Untuk mengakses IDE, salin URL layanan IDE dari panel kredensial Qwiklabs lab dan tempel ke jendela browser samaran baru.

   

   Catatan: URL layanan IDE merupakan endpoint dari layanan Cloud Run yang telah disediakan sebelumnya untuk lab ini, dan menjalankan proxy permintaan ke VM code-server. IDE ini dibangun menggunakan Code Server dan menyertakan ekstensi Flutter, Dart, dan Vim.

   

2. Buka terminal di IDE. Di menu navigasi IDE (), klik Terminal > New Terminal.

   Catatan: Jalankan perintah pada langkah-langkah di bawah di jendela terminal IDE.

3. Versi awal aplikasi backend dan file terkait telah disediakan untuk lab ini. Salin versi awal folder aplikasi backend beserta kontennya dari Cloud Storage:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/ag-web ~ Catatan: Jika diminta, klik Allow untuk menempelkan teks dan gambar dari papan klip, lalu tekan Enter.

4. Untuk menampilkan daftar konten folder, di jendela terminal IDE, jalankan:

   ls ~/ag-web/app

   Folder ag-web/app berisi kode sumber aplikasi dan file lain yang diperlukan untuk membangun dan men-deploy aplikasi backend ke Cloud Run.

5. Tetapkan konfigurasi PROJECT_ID, LOCATION, dan STAGING_BUCKET untuk aplikasi.

   sed -i 's/GCP_PROJECT_ID/{{{project_0.project_id|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCP_REGION/{{{project_0.default_region|set at lab start}}}/' ~/ag-web/app/app.py sed -i 's/GCS_BUCKET/{{{project_0.startup_script.lab_bucket_name|set at lab start}}}/' ~/ag-web/app/app.py

6. Konfigurasi aplikasi backend untuk menggunakan penyimpanan data penelusuran yang Anda buat sebelumnya.

   Pada perintah di bawah, ganti string {YOUR_SEARCH_DATA_STORE_ID} dengan nilai ID penyimpanan data penelusuran Anda.

   Pastikan untuk menghapus tanda kurung kurawal pada perintah sed.

   Catatan: Untuk mendapatkan nilai ID penyimpanan data penelusuran, di Konsol Cloud, buka AI Applications > Data Stores, lalu klik nama penyimpanan data penelusuran yang Anda buat sebelumnya. Salin nilai ID Penyimpanan data, yang sama dengan ID mesin telusur. sed -i 's/SEARCH_ENGINE_ID/{YOUR_SEARCH_DATA_STORE_ID}/' ~/ag-web/app/app.py

   

7. Untuk melihat kode di IDE, di menu navigasi IDE, klik , lalu klik Open Folder.

8. Pilih folder IDE-DEV/ag-web/ dari daftar, lalu klik Ok.

9. Untuk memercayai penulis kode, klik Yes, I trust the authors.

10. Di panel Explorer, perluas folder app, lalu klik app.py untuk membuka file di editor.

    Kode aplikasi backend melakukan hal berikut:

    • Melakukan inisialisasi Vertex AI menggunakan project ID Google Cloud lab, region, dan bucket Cloud Storage Anda.
    • Fungsi search_gms() menggunakan endpoint datastore API discoveryengine.googleapis.com untuk memulai permintaan penelusuran. ID datastore yang Anda buat sebelumnya digunakan dalam URL.
    • Fungsi ini menggunakan kueri penelusuran yang disediakan pengguna untuk melakukan penelusuran pada konten datastore, dan memformat hasilnya menjadi respons JSON.
    • Aplikasi ini menggunakan flask untuk merutekan panggilan ke tiap fungsi. Endpoint / adalah halaman default yang digunakan untuk memverifikasi bahwa aplikasi berhasil dimuat, sedangkan endpoint /ask_gms memanggil fungsi search_gms() yang menggunakan Vertex AI Search.

Membangun dan men-deploy aplikasi ke Cloud Run

Skrip deploy tersedia untuk proses build dan deployment aplikasi backend ke Cloud Run.

1. Buka jendela terminal di IDE, lalu ubah ke folder aplikasi backend:

   cd ~/ag-web/app

2. Lakukan autentikasi ke Google Cloud dari gcloud CLI:

   gcloud auth login

3. Untuk melanjutkan, ketik Y

4. Untuk meluncurkan alur login, tekan Control (untuk Windows dan Linux) atau Command (untuk MacOS), lalu klik link di terminal.

5. Jika Anda diminta untuk mengonfirmasi dibukanya situs eksternal, klik Open.

6. Klik alamat email peserta lab.

7. Saat Anda diminta untuk melanjutkan, klik Continue.

8. Agar Google Cloud SDK dapat mengakses Akun Google Anda dan menyetujui ketentuan, klik Allow.

   Kode verifikasi Anda akan ditampilkan di tab browser.

9. Klik Copy.

10. Kembali ke jendela terminal IDE, di bagian yang bertuliskan Enter authorization code, lalu tempelkan kode dan tekan Enter.

    Anda kini telah login ke Google Cloud.

11. Buat agar skrip deploy.sh dapat dieksekusi, lalu jalankan skrip untuk men-deploy aplikasi di region Cloud Run yang ditentukan:

    chmod a+x deploy.sh; ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

    Setelah aplikasi berhasil dibangun dan di-deploy ke Cloud Run, URL endpoint aplikasi akan ditampilkan di akhir output skrip. URL tersebut dibuat oleh perintah gcloud run deploy yang dijalankan dalam skrip.

    Catatan: Eksekusi perintah ini memerlukan waktu beberapa saat, jadi tunggu hingga perintah selesai sebelum melanjutkan ke tugas berikutnya.

Menguji aplikasi backend

Uji fungsi aplikasi dengan mengakses endpoint Cloud Run-nya.

1. Salin URL endpoint aplikasi yang dibuat di langkah sebelumnya, lalu buka URL tersebut di tab browser baru.

2. Saat aplikasi dimuat, halaman beranda akan menampilkan: Welcome to the ag-web backend app.

3. Di kolom URL browser, tambahkan jalur di bawah ke bagian akhir URL:

   /ask_gms?query=dino

4. Pastikan bahwa aplikasi merespons dengan hasil dari penyimpanan data penelusuran yang Anda buat sebelumnya.

Untuk memverifikasi tujuan, klik Periksa progres saya. Membuat aplikasi Backend.

Tugas 3. Mengonfigurasi Firebase

Untuk memanggil Gemini API, aplikasi Flutter frontend menggunakan Vertex AI for Firebase Dart SDK. SDK ini tersedia sebagai paket firebase_vertexai dari pub.dev, yang merupakan repositori paket resmi untuk aplikasi Dart dan Flutter.

Firebase adalah platform pengembangan aplikasi backend dari Google yang menyediakan layanan untuk berbagai platform, termasuk Android, iOS, dan lainnya.

Dalam tugas ini, Anda akan menyiapkan Firebase, dan login ke Firebase CLI. Di bagian selanjutnya dalam lab ini, Anda akan menghubungkan aplikasi Flutter ke Firebase.

Menyiapkan Firebase

Untuk menggunakan SDK, Anda harus menyiapkan project Firebase terlebih dahulu.

1. Di tab jendela samaran, akses Firebase console di https://console.firebase.google.com.

2. Klik Create a Firebase project.

3. Untuk menambahkan Firebase ke project Google Cloud yang sudah ada di lab, di bagian bawah halaman, klik Add Firebase to Google Cloud project.

4. Klik Select a Google Cloud project, lalu pilih project lab dari daftar.

5. Terima persyaratan Firebase lalu klik Continue.

6. Klik Continue lagi.

7. Untuk menggunakan paket penagihan default, klik Confirm and continue.

8. Nonaktifkan Google Analytics untuk project ini, lalu klik Add Firebase.

9. Tunggu hingga project Firebase Anda siap, lalu klik Continue.

   Firebase kini siap digunakan dengan project Google Cloud lab Anda.

Login ke Firebase

1. Di jendela terminal IDE, login ke Firebase CLI:

   firebase login --no-localhost

2. Untuk mengizinkan Firebase mengumpulkan informasi pelaporan CLI dan Emulator, ketik Y, lalu tekan Enter.

3. Catat ID sesi Anda, lalu ikuti langkah-langkah meluncurkan alur login. Tekan Control (untuk Windows dan Linux) atau Command (untuk MacOS), lalu klik URL di terminal.

4. Saat diminta untuk membuka situs eksternal, klik Open.

5. Klik ID email peserta lab Anda.

6. Klik Continue.

7. Untuk memberikan izin yang relevan ke Firebase CLI, klik Allow.

8. Klik Yes, I just ran this command.

9. Verifikasi ID sesi Anda, lalu klik Yes, this is my session ID.

10. Untuk menyalin kode otorisasi, klik Copy.

11. Tempel kode otorisasi di tempat yang diminta di jendela terminal IDE, lalu tekan Enter.

    Anda kini telah login ke Firebase CLI.

Tugas 4. Membuat agen AI Reasoning Engine

Agen AI adalah aplikasi yang menggunakan kemampuan model bahasa besar (LLM) untuk melakukan penalaran dan orkestrasi dengan alat eksternal guna mencapai sasarannya. Vertex AI Agent Builder adalah rangkaian produk dan alat dari Google yang membantu Anda membangun agen AI dengan menghubungkannya ke sumber data tepercaya.

Vertex AI Reasoning Engine (juga dikenal sebagai LangChain di Vertex AI) membantu Anda membangun dan men-deploy agen penalaran dengan Vertex AI Agent Builder. LangChain adalah alat OSS populer yang digunakan untuk membangun chatbot dan sistem RAG.

Reasoning Engine memungkinkan developer menggunakan Panggilan Fungsi untuk memetakan output dari LLM (Gemini) ke fungsi Python. Reasoning Engine terintegrasi erat dengan Python SDK untuk model Gemini di Vertex AI, serta kompatibel dengan LangChain dan framework Python lainnya.

Dalam tugas ini, Anda akan menggunakan Vertex AI Workbench dengan notebook Jupyter untuk men-deploy agen Reasoning Engine dengan fungsi Python. Agen ini akan digunakan dalam aplikasi backend AI generatif kita pada tugas berikutnya di lab ini.

Membuat instance Vertex AI Workbench

Vertex AI Workbench adalah lingkungan pengembangan berbasis notebook Jupyter untuk seluruh alur kerja data science dan machine learning. Anda dapat berinteraksi dengan Vertex AI dan layanan Google Cloud lainnya dari dalam notebook Jupyter di instance Vertex AI Workbench. Misalnya, Vertex AI Workbench memungkinkan Anda mengakses dan menjelajahi data dari dalam notebook Jupyter menggunakan integrasi BigQuery dan Cloud Storage.

Instance Vertex AI Workbench dilengkapi dengan rangkaian paket deep learning yang telah diinstal sebelumnya, termasuk dukungan untuk framework TensorFlow dan PyTorch.

Notebook Vertex AI Workbench memberikan solusi yang fleksibel dan skalabel untuk mengembangkan dan men-deploy model ML di Google Cloud.

1. Untuk membuat instance Workbench, di Konsol Cloud, klik Navigation menu (), lalu pilih Vertex AI > Workbench.

2. Jika diminta di Konsol Cloud, klik untuk mengaktifkan Notebooks API.

3. Pastikan Instances dipilih di tab Instances, lalu klik Create New.

   

4. Di halaman New instance, untuk Name, ketik my-instance

5. Tetap gunakan nilai default untuk setelan lainnya, lalu klik Create.

   Instance baru Anda akan dijalankan di bagian instance. Tunggu hingga instance selesai dibuat sebelum melanjutkan ke langkah berikutnya.

   Catatan: Tanda centang hijau akan muncul di samping instance jika instance tersebut sudah siap digunakan.

6. Setelah instance siap, klik Open Jupyterlab.

   

7. Untuk meluncurkan Notebook Jupyter Python 3, klik notebook Python 3.

   

Menyalin file notebook

Notebook yang membangun dan men-deploy agen Reasoning Engine telah disediakan untuk lab ini.

1. Untuk menyalin notebook ke instance JupyterLab Anda, salin kode ini ke sel pertama di notebook baru Anda:

   !gcloud storage cp gs://cloud-training/OCBL453/photo-discovery/ag-web/ag_setup_re.ipynb .

   

2. Pilih dan jalankan sel dengan mengklik Run di menu sel:

   

   Perintah ini akan menyalin notebook dari Cloud Storage ke instance JupyterLab Anda. Setelah perintah selesai, file notebook akan terdaftar di folder root tingkat teratas.

   

3. Untuk membuka notebook, klik dua kali file notebook di daftar folder. Tab terpisah dibuat dengan konten notebook.

Membangun dan men-deploy agen Reasoning Engine

1. Jalankan semua sel kode di notebook secara berurutan dari awal. Untuk menjalankan sel, pilih sel dengan mengklik bagian mana pun di sel, lalu klik Run di menu sel atau di menu notebook teratas.

   Catatan: Saat menjalankan perintah di sel, tunggu hingga perintah selesai sebelum beralih ke sel berikutnya. Setelah perintah selesai dijalankan, tanda bintang (*) di kolom nomor sel akan diganti dengan nomor sel. Catatan: Sebelum menjalankan sel, periksa catatan di bawah untuk mengetahui petunjuk atau langkah-langkah khusus sel yang harus diikuti. Petunjuk ini ditandai dengan awalan CELL INSTR.

   a. [CELL INSTR] Restart current runtime

   Jika diminta, pada dialog Kernel Restarting, klik Ok.

   b. [CELL INSTR] Set Google Cloud project information and initialize Vertex AI SDK:

   Sebelum menjalankan sel ini untuk melakukan inisialisasi Vertex AI SDK, perbarui nilai konfigurasi untuk project_id, lokasi, dan bucket staging lab Anda:

   PROJECT_ID = "{{{project_0.project_id|set at lab start}}}" LOCATION = "{{{project_0.default_region|set at lab start}}}" STAGING_BUCKET = "gs://{{{project_0.startup_script.lab_bucket_name}}}"

   Sel yang diperbarui dengan setelan konfigurasi contoh:

   

   c. [CELL INSTR] Define Tool function for Vertex AI Search:

   Sebelum menjalankan sel ini, ganti nilai GOOGLE_SHOP_VERTEXAI_SEARCH_URL dengan URL endpoint Cloud Run aplikasi backend Anda.

   Untuk mengambil URL endpoint, di Konsol Cloud, buka Cloud Run, lalu klik nama aplikasi backend: ag-web. Salin nilai URL endpoint dan ganti di dalam sel.

   

   Sel yang telah diperbarui dengan URL endpoint Cloud Run contoh aplikasi backend:

   

   Catatan: Anda juga dapat menjalankan sel dengan mengklik Run di panel menu notebook.

2. Setelah menjalankan sel Deploy the Agent to the Reasoning Engine runtime, tunggu hingga perintah selesai dan buat agen Reasoning Engine. Lalu, salin ID Reasoning Engine:

   

   Anda akan menggunakan ID ini untuk mengonfigurasi dan men-deploy ulang aplikasi backend di tugas berikutnya.

   Catatan: Sel ini mungkin memerlukan waktu hingga 10 menit untuk selesai. Tunggu hingga output akhir ditampilkan yang menunjukkan bahwa ReasoningEngine telah dibuat sebelum melanjutkan ke langkah berikutnya.

3. Untuk menguji keberhasilan pengoperasian agen Reasoning Engine, jalankan dua sel berikutnya dan amati output-nya.

   Agen Reasoning Engine telah berhasil memanggil Wikipedia atau datastore Vertex AI Search berdasarkan input kueri dan output dari model Gemini.

Untuk memverifikasi tujuan, klik Periksa progres saya. Men-deploy agen Reasoning Engine.

Tugas 5. Meningkatkan kemampuan aplikasi backend

Sekarang mari kita tingkatkan kemampuan aplikasi backend untuk memanggil agen Reasoning Engine yang telah dideploy di tugas sebelumnya.

Versi awal aplikasi backend hanya mengambil hasil secara langsung dari Vertex AI Search. Di versi barunya, aplikasi tersebut akan memanggil agen Reasoning Engine yang menggunakan output dari Gemini dan alat agen untuk menghasilkan respons dari Vertex AI Search atau Wikipedia berdasarkan perintah input.

Dalam tugas ini, Anda akan memperbarui kode aplikasi backend untuk menambahkan titik entri tambahan yang memanggil agen Reasoning Engine dengan kueri permintaan dan menampilkan respons agen.

Mengupdate aplikasi backend

1. Di jendela terminal IDE, tambahkan file app.py dengan kode titik entri baru dengan menjalankan perintah:

   cat << EOF >> ~/ag-web/app/app.py # # Reasoning Engine # NB_R_ENGINE_ID = "REASONING_ENGINE_ID" from vertexai.preview import reasoning_engines remote_agent = reasoning_engines.ReasoningEngine( f"projects/{PROJECT_ID}/locations/{LOCATION}/reasoningEngines/{NB_R_ENGINE_ID}" ) # Endpoint for the Flask app to call the Agent @app.route("/ask_gemini", methods=["GET"]) def ask_gemini(): query = request.args.get("query") log.info("[ask_gemini] query: " + query) retries = 0 resp = None while retries < MAX_RETRIES: try: retries += 1 resp = remote_agent.query(input=query) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Empty response.") break except Exception as e: log.error("[ask_gemini] error: " + str(e)) if (resp == None) or (len(resp["output"].strip()) == 0): raise ValueError("Too many retries.") return "No response received from Reasoning Engine." else: return resp["output"] EOF

2. Konfigurasi aplikasi backend untuk menggunakan agen Reasoning Engine yang Anda buat sebelumnya.

   Ganti string {YOUR_REASONING_ENGINE_ID} dalam perintah di bawah dengan nilai ID Reasoning Engine yang Anda salin dari sel notebook di tugas sebelumnya, lalu jalankan perintah di bawah di jendela terminal IDE.

   Pastikan untuk menghapus tanda kurung kurawal pada perintah sed.

   sed -i 's/REASONING_ENGINE_ID/{YOUR_REASONING_ENGINE_ID}/' ~/ag-web/app/app.py

3. Untuk melihat kode di IDE, di menu navigasi IDE, klik , lalu pilih file IDE-DEV/ag-web/app/app.py.

   Di versi aplikasi backend yang ditingkatkan:

   • Handle pada remote_agent diambil dari runtime Reasoning Engine menggunakan REASONING_ENGINE_ID dari agen yang telah dibuat di tugas sebelumnya.
   • Endpoint /ask_gemini yang menentukan fungsi `ask_gemini() telah ditentukan.
   • Fungsi ini meneruskan parameter query yang disediakan pengguna dari permintaan ke Reasoning Engine (remote_agent), dan menampilkan respons dari agen.

Membangun dan men-deploy ulang aplikasi backend ke Cloud Run

1. Ubah ke folder aplikasi backend: \

   cd ~/ag-web/app

2. Jalankan skrip untuk men-deploy ulang aplikasi di region Cloud Run yang ditentukan:

   ./deploy.sh {{{project_0.project_id|set at lab start}}} {{{project_0.default_region|set at lab start}}}

Menguji aplikasi backend

Uji fungsi aplikasi dengan mengakses endpoint Cloud Run-nya.

1. Salin URL endpoint aplikasi yang dibuat di langkah sebelumnya, lalu buka URL tersebut di tab browser baru.

2. Saat aplikasi dimuat, halaman beranda akan menampilkan Welcome to the ag-web backend app.

3. Di kolom URL browser, tambahkan jalur di bawah ke bagian akhir URL:

   /ask_gemini?query=where can I buy the chrome dino pin

   Aplikasi akan merespons dengan hasil dari agen yang mengambil hasil dari penyimpanan data Vertex AI Search yang Anda buat sebelumnya.

   Chrome Dino Enamel Pin is a product sold at Google Merch Shop. The price is 7.00 USD. You can buy the product at their web site: https://shop.merch.google/product/chrome-dino-enamel-pin-ggoegcbb203299/.

4. Di kolom URL browser, ganti jalur dengan:

   /ask_gemini?query=what is fallingwater

   Aplikasi akan merespons dengan hasil dari agen yang mengambil respons dari Wikipedia API yang Anda konfigurasi di notebook.

   Fallingwater was designed by architect Frank Lloyd Wright in 1935. It is located in southwest Pennsylvania, about 70 miles southeast of Pittsburgh. The house is famous because it was built partly over a waterfall. Catatan: Respons yang Anda terima nantinya mungkin berbeda dari yang ditampilkan di atas.

Tugas 6. Menguji coba Gemini 2.0 Flash

Setelah Anda mengembangkan dan men-deploy aplikasi backend, komponen Vertex AI Search, dan agen Reasoning Engine, sekarang Anda dapat mulai mendesain dan membangun frontend Flutter.

Aplikasi Flutter memungkinkan pengguna menemukan lebih banyak informasi tentang foto yang mereka upload di aplikasi. Aplikasi ini terintegrasi dengan Gemini untuk menghasilkan respons seputar foto, dan menggunakan agen AI untuk memberikan respons menggunakan antarmuka chat.

Sebelum mengembangkan aplikasi frontend, Anda harus menentukan struktur respons yang ditampilkan dari model Gemini 2.0 Flash. Model ini digunakan oleh agen AI yang Anda deploy sebelumnya di lab.

Dalam tugas ini, Anda akan memasukkan perintah ke model Gemini 2.0 Flash, dan melihat respons model dalam format JSON.

1. Gemini 2.0 Flash tersedia di Vertex AI Studio di Konsol Cloud. Untuk mengakses Vertex AI Studio, klik menu navigasi (), lalu pilih Vertex AI > Create prompt (di bagian Vertex AI Studio).

2. Jika diminta untuk mengaktifkan API yang diperlukan agar dapat menggunakan Vertex AI Studio, klik Agree and Continue.

   Catatan: Vertex AI Studio adalah alat di Konsol Google Cloud yang memungkinkan Anda menguji dan membuat prototipe model AI generatif dengan cepat, sehingga Anda dapat memanfaatkan kemampuannya dalam aplikasi Anda.

3. Untuk Prompt, klik Insert Media, lalu pilih Import from Cloud Storage.

   

4. Klik > di samping nama bucket lab .

5. Pilih file gambar fallingwater.jpg, lalu klik Select.

   Gambar diupload ke Kotak perintah.

6. Untuk memberikan perintah pada model, di kotak perintah di bawah gambar, ketik What is this?, lalu klik Send ().

   Model memberikan respons singkat yang dengan benar mendeskripsikan objek dalam gambar.

7. Untuk mengambil lebih banyak informasi dari model dalam format JSON, ubah perintah teks. Untuk mengedit perintah, scroll ke bagian atas panel perintah, lalu klik Edit. Perbarui teks perintah menjadi:

   What is this? Provide the name and description of the object, and be as specific as possible. Also include a list of 3 follow-up questions that I can ask for more information about this object. Generate the response in JSON format with the keys "name", "description", and "suggestedQuestions".

8. Klik Send ().

9. Lihat respons JSON yang dihasilkan oleh model.

   { "name": "Fallingwater", "description": "This is Fallingwater, a house designed by renowned architect Frank Lloyd Wright. It's built over a waterfall on Bear Run in rural southwestern Pennsylvania, and is considered a masterpiece of organic architecture, seamlessly blending with its natural surroundings.", "suggestedQuestions": [ "Who commissioned Frank Lloyd Wright to design Fallingwater?", "What are some of the key architectural features of Fallingwater?", "Is Fallingwater open to the public, and if so, how can I visit?" ] }

   Sekarang Anda memiliki perintah dan respons model dalam format JSON yang dapat digunakan untuk membangun aplikasi flutter.

   Catatan: Respons model yang Anda terima mungkin berbeda dari respons yang ditampilkan di atas.

Tugas 7. Men-deploy aplikasi frontend Flutter

Setelah memiliki struktur data yang ditampilkan oleh model, Anda dapat membangun aplikasi frontend.

Flutter adalah framework pengembangan aplikasi multiplatform open source. Dengan Flutter, Anda dapat menulis satu codebase yang berjalan di Android, iOS, Web, macOS, Windows, dan Linux. Aplikasi Flutter dikembangkan dalam bahasa pemrograman Dart.

Untuk keperluan lab ini, Anda akan menggunakan web sebagai platform target, sehingga aplikasi Flutter dapat di-deploy sebagai aplikasi web dan diakses menggunakan browser.

Dalam tugas ini, Anda akan meninjau kode aplikasi Flutter, serta membangun dan menjalankan aplikasi sebagai aplikasi web.

Meninjau codebase aplikasi Flutter

Salah satu fungsi aplikasi ini memungkinkan pengguna mengupload foto objek wisata, lalu mengkueri Gemini untuk mengambil informasi tentang foto tersebut. Untuk tujuan lab ini, aplikasi Flutter sudah dikembangkan dan tersedia di Cloud Storage.

1. Di terminal IDE, download kode aplikasi Flutter:

   gcloud storage cp -r gs://cloud-training/OCBL453/photo-discovery/app ~

2. Untuk mengambil dependensi project aplikasi, di jendela terminal IDE, jalankan:

   cd ~/app; flutter pub get

3. Untuk melihat kode di IDE, di menu navigasinya (), klik File, lalu pilih Open Folder.

4. Pilih /home/ide-dev/app/ dari daftar, lalu klik Ok.

5. Untuk memercayai penulis file di folder, klik Yes, I trust the authors.

   Berikut ringkasan umum tentang konten folder app:

   Folder/File	Deskripsi
   app	Folder root project yang berisi subfolder dan file yang membentuk aplikasi Flutter.
   android/ios/linux/macos/web/windows	Berisi file khusus platform yang diperlukan untuk menjalankan aplikasi Flutter di setiap platform yang didukung.
   lib	Berisi file Dart aplikasi inti yang mencakup fungsi, perutean, model data, dan antarmuka pengguna.
   test	Berisi pengujian Dart yang digunakan untuk menguji widget aplikasi.
   pubspec.yaml	Berisi dependensi aplikasi, versi Flutter, dan setelan konfigurasi lainnya.
   analysis_options.yaml	Berisi setelan konfigurasi untuk analisis statis aplikasi.

   Mari kita tinjau beberapa file dalam folder ini.

6. Di menu Explorer, klik folder /app/lib/models, lalu klik file metadata.dart untuk membukanya.

   File metadata.dart berisi model data yang digunakan oleh aplikasi Flutter.

   class Metadata { String name = ''; String description = ''; List suggestedQuestions = []; // more code follows ... }

   Atribut objek metadata dipetakan ke atribut JSON yang ditampilkan dalam respons dari Gemini API. Metode fromJson menginisialisasi atribut objek saat dipanggil.

7. Di menu Explorer, klik file /app/lib/main.dart untuk membukanya.

   Ini adalah titik entri aplikasi untuk aplikasi Flutter. Setelah melakukan tugas inisialisasi, kode dalam file ini akan membangun UI aplikasi menggunakan komponen material, menetapkan judul, tema, dan konfigurasi perutean aplikasi.

   Catatan: Aplikasi Material dimulai dengan widget MaterialApp, yang membangun sejumlah widget berguna di root aplikasi Anda, termasuk Navigator yang mengelola perutean ke berbagai layar di aplikasi Anda.

8. Untuk melihat konfigurasi perutean aplikasi, di menu Explorer, klik file /app/lib/functionality/routing.dart untuk membukanya.

   Kode dalam file ini menentukan rute /, /chat, dan /settings untuk aplikasi.

   Flutter menggunakan konsep Widget, yang merupakan class deklaratif yang digunakan untuk membangun aplikasi. Di Flutter, Anda membuat tata letak dengan menyusun widget untuk membangun widget yang lebih kompleks guna membentuk hierarki widget. Untuk mempelajari lebih lanjut cara membuat UI di Flutter, lihat dokumentasi.

9. Mari kita tinjau kode yang bertanggung jawab atas beberapa layar UI dan fungsi aplikasi. Di menu Explorer, klik file /app/lib/ui/screens/quick_id.dart untuk membukanya.

   File ini berisi class yang membangun widget aplikasi. File ini menyertakan class GenerateMetadataScreen yang membuat halaman utama aplikasi dan dipanggil dari jalur / yang ditentukan dalam file routing.dart. UI memungkinkan pengguna mengupload gambar dari komputer atau perangkat seluler, atau mengambil foto dari kamera perangkat.

   

   Layar UI lain yang digunakan di aplikasi adalah layar setelan dan chat yang diimplementasikan dalam file settings.dart dan chat.dart di folder app/lib/ui/screens/.

   Selama inisialisasi aplikasi, Vertex AI for Firebase Dart SDK digunakan untuk mengambil instance model AI generatif Gemini yang akan digunakan oleh aplikasi. Hal ini diimplementasikan di class _GenerateMetadataScreenState.

   void initState() { super.initState(); model = FirebaseVertexAI.instance.generativeModel( model: geminiModel, generationConfig: GenerationConfig( temperature: 0, responseMimeType: 'application/json', ), ); }

   Setelah pengguna memilih gambar, aplikasi akan memanggil Vertex AI Gemini API dengan perintah gambar dan teks. Perintah teks yang digunakan sama dengan yang Anda uji pada tugas sebelumnya saat menguji coba model Gemini 2.0 Flash.

   Metode _sendVertexMessage() berisi kode yang mengirimkan perintah. Berikut adalah kode parsial dari metode tersebut:

   Future _sendVertexMessage() async { ... final messageContents = Content.multi( [ TextPart( 'What is the subject in this photo? Provide the name of the photo subject, and description as specific as possible, and 3 suggested questions that I can ask for more information about this object. Answer in JSON format with the keys "name", "description" and "suggestedQuestions".'), DataPart('image/jpeg', _image!), ], ); var response = await model.generateContent([messageContents]); var text = response.text; if (text == null) { _showError('No response from API.'); return; } else { var jsonMap = json.decode(text); if (mounted) { context.read().updateMetadata(Metadata.fromJson(jsonMap)); } } ... }

   Respons JSON dari model kemudian didekode untuk mengekstrak name, description, dan suggestedQuestions, yang disimpan secara lokal dan ditampilkan di UI aplikasi.

Menghubungkan aplikasi Flutter ke Firebase

1. Di jendela terminal IDE, ubah ke folder project root app, dan aktifkan paket flutterfire_cli.

   cd ~/app dart pub global activate flutterfire_cli

2. Untuk mendaftarkan aplikasi Flutter Anda dengan Firebase, jalankan:

   flutterfire configure --project={{{project_0.project_id|set at lab start}}}

   Setelah menjalankan perintah, file konfigurasi firebase_options.dart akan ditambahkan ke folder lib pada project Flutter Anda.

3. Guna mengonfigurasi platform yang didukung untuk aplikasi, tekan spasi untuk membatalkan pilihan semua platform kecuali web. Scroll platform menggunakan tombol panah. Lalu, tekan Enter.

   Aplikasi web Flutter Anda kini terdaftar untuk digunakan dengan Firebase.

Mengonfigurasi fitur chat aplikasi Flutter

Aplikasi Flutter memiliki fitur chat yang memungkinkan pengguna mencari tahu informasi lebih lanjut tentang gambar yang mereka upload di aplikasi, atau meminta informasi dari sumber data eksternal lain yang mungkin memiliki informasi yang lebih baru. Untuk melakukannya, kita memerlukan cara untuk menghubungkan atau melakukan ground model Gemini ke sumber data tersebut.

Untuk menerapkan fitur ini, aplikasi Flutter terintegrasi dengan agen Reasoning Engine yang telah Anda deploy sebelumnya di lab ini. Integrasi dapat dilakukan dengan menghubungkan aplikasi Flutter ke endpoint aplikasi backend yang juga Anda bangun dan deploy ke Cloud Run.

1. Pertama, ambil nama host endpoint Cloud Run aplikasi backend, dan simpan nilainya dalam variabel lingkungan. Di jendela terminal IDE, jalankan:

   BACKEND_APP_HOST=$(gcloud run services describe ag-web --region {{{project_0.default_region|set at lab start}}} --format 'value(status.url)' | cut -d'/' -f3); echo $BACKEND_APP_HOST

2. Untuk aplikasi Flutter, endpoint aplikasi backend dikonfigurasi di file ~/app/lib/config.dart. Perbarui entri konfigurasi di file:

   sed -i "s/cloudRunHost = .*/cloudRunHost = '$BACKEND_APP_HOST';/" ~/app/lib/config.dart

3. Untuk memverifikasi perubahan, di menu Explorer IDE, klik file IDE-DEV/app/lib/config.dart untuk membukanya. Pastikan nilai entri konfigurasi cloudRunHost diperbarui sesuai dengan contoh di bawah.

   

   Catatan: Nilainya harus sesuai dengan nilai variabel lingkungan `BACKEND_APP_HOST` yang Anda tetapkan pada langkah sebelumnya.

Meninjau kode fitur chat

Mari kita tinjau kode di aplikasi Flutter yang menerapkan fitur chat.

1. Di menu Explorer IDE, klik file /app/lib/ui/screens/chat.dart untuk membukanya.

   Class ChatPage membangun widget Flutter untuk halaman chat di UI. Halaman ini ditampilkan di UI saat tombol Tell me more ditekan.

   

   Untuk membuat UI chat, aplikasi menggunakan flutter_chat_ui_package yang menerapkan sebagian besar kode boilerplate chat yang dapat Anda sesuaikan. Metode build() menggunakan class Chat untuk membuat widget.

   Widget build(BuildContext context) { ... Chat( typingIndicatorOptions: TypingIndicatorOptions( typingUsers: typingUsers, ), listBottomWidget: suggestionsWidget, messages: _messages, onSendPressed: _handleSendPressed, showUserAvatars: true, showUserNames: true, user: _user, theme: DefaultChatTheme( receivedMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSurface, ), sentMessageBodyTextStyle: TextStyle( color: Theme.of(context).colorScheme.onSecondary, ), userAvatarNameColors: [ Theme.of(context).colorScheme.primary, ], backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh, primaryColor: Theme.of(context).colorScheme.primary, secondaryColor: Theme.of(context).colorScheme.surface, ), ), ... }

   listBottomWidget digunakan untuk menampilkan daftar saran pertanyaan yang ditampilkan dalam respons dari panggilan Gemini sebelumnya. Dengan begitu, pengguna dapat memilih pertanyaan sebagai pesan chat.

   Metode callback _handleSendPressed() dipanggil saat pengguna mengklik Send di jendela chat. Metode ini membuat pesan baru, menambahkan pesan ke daftar pesan, dan mengirimkan pesan ke backend menggunakan metode askAgent().

2. Scroll kode untuk menemukan metode askAgent().

   Untuk memanggil Gemini menggunakan agen Reasoning Engine, metode askAgent() akan mengirim permintaan ke URL /ask_gemini di endpoint Cloud Run aplikasi backend. Parameter kueri permintaan mencakup name dan description gambar yang ditampilkan dalam panggilan sebelumnya ke Gemini, serta pesan pengguna.

   Future askAgent( String name, String description, String question) async { var query = 'The photo is $name. $description. $question.'; var endpoint = Uri.https(cloudRunHost, '/ask_gemini', {'query': query}); var response = await http.get(endpoint); if (response.statusCode == 200) { var responseText = convert.utf8.decode(response.bodyBytes); return responseText.replaceAll(RegExp(r'\*'), ''); } return 'Sorry I can\'t answer that.'; }

   Respons dari backend kemudian ditambahkan ke daftar pesan di jendela chat dengan memanggil fungsi _sendMessageToAgent().

Men-deploy aplikasi Flutter

Setelah konfigurasi aplikasi Flutter selesai, Anda dapat membangun dan men-deploy aplikasi. Untuk tujuan lab ini, guna menjalankan aplikasi sebagai aplikasi web, kami menggunakan Fwr yang merupakan server pengembangan untuk Flutter web.

1. Pastikan Anda berada di folder aplikasi Flutter. Di jendela terminal IDE, jalankan:

   cd ~/app

2. Untuk mengambil dependensi project aplikasi, jalankan:

   flutter pub get

3. Untuk membangun project dan memulai server web, jalankan:

   fwr

   Tunggu hingga server dimulai dan menyajikan aplikasi Flutter. Setelah dimulai, output dari perintah akan terlihat seperti ini:

   

Untuk memverifikasi tujuan, klik Periksa progres saya. Mengonfigurasi project Firebase dan aplikasi Flutter

Tugas 8. Menguji aplikasi Flutter

Mari kita uji fungsi aplikasi Flutter.

Mendownload gambar pengujian

1. Untuk menguji aplikasi, pertama-tama download dan simpan gambar ke komputer Anda. Salin URL untuk melihat gambar di tab browser terpisah:

   Gambar Fallingwater

2. Klik kanan gambar dan simpan ke komputer Anda.

3. Ulangi langkah ini untuk mendownload gambar pin Google Chrome Dino dari URL di bawah:

   Gambar Pin Google Chrome Dino

Menguji aplikasi

1. Untuk mengakses aplikasi Flutter, salin URL Live Server dari panel kredensial Qwiklabs, lalu buka di tab baru jendela browser samaran Anda.

2. Tunggu beberapa detik hingga aplikasi selesai dimuat. Kemudian, untuk mengupload gambar Fallingwater, klik Choose from Library.

   Setelah Anda mengupload gambar, aplikasi akan memanggil Vertex AI Gemini API untuk menghasilkan respons yang berisi nama dan deskripsi gambar yang ditampilkan di UI aplikasi.

   

   Mungkin perlu waktu beberapa detik agar kolom nama dan deskripsi di UI aplikasi terisi dengan respons model Gemini.

   Catatan: Jika Anda menerima error izin ditolak, abaikan saja error tersebut, lalu klik tombol ok untuk melanjutkan. Klik Remove image, lalu upload ulang gambar.

3. Klik Tell me more.

   Halaman chat akan dimuat dan menampilkan Suggested Questions yang ditampilkan dalam respons dari panggilan sebelumnya ke Gemini API.

   

   Catatan: Jika pertanyaan yang disarankan tidak ditampilkan, refresh halaman, lalu ulangi dua langkah sebelumnya untuk mengupload gambar.

Menguji aplikasi dengan data merchandise

1. Di UI chat, klik Remove image.

2. Untuk mengupload gambar pin Google Chrome Dino, klik Choose from Library, lalu upload gambar yang telah Anda simpan sebelumnya.

   Setelah Anda mengupload gambar, aplikasi akan memanggil Vertex AI Gemini API untuk menghasilkan respons yang berisi nama dan deskripsi gambar yang ditampilkan di UI aplikasi.

3. Klik Tell me more.

4. Di kotak pesan chat, ketik:

   Where can I buy this pin?

   Agen melakukan panggilan HTTPS ke endpoint Cloud Run aplikasi backend, yang kemudian memanggil agen Reasoning Engine yang menggunakan Gemini untuk menampilkan respons dari penyimpanan data Vertex AI Search.

   

5. (Opsional) Untuk melihat aplikasi Flutter menyesuaikan ke tata letak perangkat seluler, ubah ukuran jendela browser Anda ke ukuran perangkat seluler:

   

   Hal ini menunjukkan bahwa aplikasi Flutter responsif terhadap perubahan berdasarkan ukuran layar atau jendela. Flutter memiliki widget dan paket yang membantu membuat aplikasi Anda responsif dan adaptif terhadap perubahan berdasarkan konfigurasi perangkat.

Mengakhiri lab Anda

Setelah Anda menyelesaikan lab, klik Akhiri Lab. Qwiklabs menghapus resource yang telah Anda gunakan dan menghapus akun.

Anda akan diberi kesempatan untuk menilai pengalaman menggunakan lab. Pilih jumlah bintang yang sesuai, ketik komentar, lalu klik Submit.

Makna jumlah bintang:

• 1 bintang = Sangat tidak puas
• 2 bintang = Tidak puas
• 3 bintang = Netral
• 4 bintang = Puas
• 5 bintang = Sangat puas

Anda dapat menutup kotak dialog jika tidak ingin memberikan masukan.

Untuk masukan, saran, atau koreksi, gunakan tab Dukungan.

Selamat!

Di lab ini, Anda telah:

• Membuat penyimpanan data penelusuran dan aplikasi penelusuran menggunakan Vertex AI Agent Builder di Konsol Google Cloud.
• Men-deploy agen Reasoning Engine menggunakan Vertex AI Workbench.
• Membangun aplikasi Python yang terintegrasi dengan agen Vertex AI Search dan Reasoning Engine.
• Men-deploy aplikasi ke Cloud Run dan menggunakannya sebagai backend untuk aplikasi Flutter.
• Menyiapkan project Firebase dan menghubungkannya ke aplikasi Flutter.
• Melihat kode aplikasi Flutter untuk memahami beberapa fungsinya.
• Menjalankan dan menguji aplikasi Flutter.

Langkah berikutnya/pelajari lebih lanjut

• Ringkasan Gemini untuk Google Cloud
• Vertex AI Workbench
• Vertex AI Studio
• Firebase

Hak cipta 2024 Google LLC. Semua hak dilindungi undang-undang. Google dan logo Google adalah merek dagang dari Google LLC. Semua nama perusahaan dan produk lain mungkin adalah merek dagang masing-masing perusahaan yang bersangkutan.