Ringkasan

AI generatif adalah teknologi yang dapat digunakan untuk membuat konten seperti teks, video, gambar, dan kode. Google Cloud menawarkan berbagai model bahasa besar (LLM) dan alat untuk membantu Anda memulai penggunaan AI generatif, seperti Gemini dan Vertex AI. Anda dapat menggunakan alat yang didukung LLM untuk membuat dan meningkatkan kualitas konten situs Anda, serta menambahkan pengalaman penelusuran berbasis percakapan. Anda juga dapat meningkatkan visibilitas halaman web dan kualitas navigasi situs.

Tujuan

Di lab ini, Anda akan menerapkan solusi modernisasi situs untuk:

• Menyederhanakan pembuatan konten menggunakan AI generatif untuk meningkatkan kualitas dan efisiensi konten situs.
• Membuat gambar yang melengkapi konten tertulis di situs Anda.
• Menerjemahkan konten ke dalam bahasa yang diinginkan dengan lancar.
• Meningkatkan penemuan informasi dengan mengintegrasikan Vertex AI Search ke situs Anda.

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.

Mengaktifkan Cloud Shell

Cloud Shell adalah mesin virtual dengan beberapa alat pengembangan. Mesin virtual ini menawarkan direktori beranda persisten berkapasitas 5 GB dan berjalan di Google Cloud. Cloud Shell memberikan akses command line ke resource Google Cloud Anda. gcloud adalah alat command line untuk Google Cloud. Fitur ini sudah terinstal di Cloud Shell dan mendukung penyelesaian tab.

1. Di Google Cloud Console, pada panel navigasi, klik Activate Cloud Shell ().

2. Klik Continue.
   Perlu waktu beberapa saat untuk menyediakan dan menghubungkan ke lingkungan. Setelah terhubung, Anda juga diautentikasi, dan project ditetapkan ke PROJECT_ID Anda. Contoh:

Contoh perintah

• Cantumkan nama akun aktif:

gcloud auth list

(Output)

Akun berkredensial: - <myaccount>@<mydomain>.com (active)

(Contoh output)

Akun berkredensial: - google1623327_student@qwiklabs.net

• Cantumkan ID project:

gcloud config list project

(Output)

[core] project = <project_ID>

(Contoh output)

[core] project = qwiklabs-gcp-44776a13dea667a6

Tugas 1. Mengaktifkan Vertex AI API

Agar dapat menggunakan Vertex AI, Anda harus mengaktifkan Vertex AI API terlebih dahulu.

1. Untuk mengaktifkan API ini, jalankan perintah berikut di Cloud Shell:

   gcloud services enable aiplatform.googleapis.com

2. Jika diminta, klik Authorize.

   Catatan: Sebelum memeriksa progres Anda, tunggu beberapa saat hingga API diaktifkan.

Untuk memverifikasi tujuan, klik Check my progress. Vertex AI API diaktifkan.

Tugas 2. Mendownload kode situs

Lab ini menggunakan aplikasi situs bawaan yang terdiri atas API backend yang dibangun menggunakan FastAPI, serta frontend yang dibangun menggunakan html, css, dan JavaScript. Dalam tugas ini, Anda akan mendownload kode situs, kemudian meninjau kode serta struktur filenya.

Mendownload dan melihat kode situs

1. Di Cloud Shell, download arsip kode situs dari Cloud Storage:

   gcloud storage cp gs://cloud-training/OCBL451/genai-website-mod-app.tar.gz .

2. Ekstrak isi arsip:

   tar -zxvf genai-website-mod-app.tar.gz

3. Untuk melihat kode situs dan struktur file, di panel menu Cloud Shell, klik Open Editor.

4. Di menu navigasi Cloud Shell Editor, luaskan folder genai-website-mod-app.

   Folder ini berisi semua file yang diperlukan untuk membangun dan men-deploy aplikasi situs. Berikut ringkasan file dan kegunaannya:

   File/Folder	Deskripsi
   Dockerfile	Dockerfile untuk membangun container aplikasi situs menggunakan Cloud Run
   config.toml	Mengonfigurasi aplikasi dengan variabel
   main.py	Titik entri utama FastAPI ke aplikasi situs
   models/	Folder yang berisi model data yang digunakan oleh aplikasi situs
   routers/	Router FastAPI API untuk berbagai fungsi aplikasi
   static/	Berisi aset situs statis, seperti file css, gambar, dan JS
   templates/	Template Jinja untuk halaman aplikasi situs
   utils/	Modul utilitas untuk aplikasi situs
   views/	Melihat implementasi aplikasi situs

   Catatan: Anda tidak perlu melihat atau mengedit isi file kecuali jika disebutkan pada langkah-langkah berikutnya di lab ini.

Tugas 3. Menerapkan Vertex AI Search

Dalam tugas ini, Anda akan menerapkan kemampuan penelusuran untuk situs Anda dengan membuat aplikasi penelusuran di Vertex AI guna menelusuri data tidak terstruktur seperti postingan blog.

Membuat aplikasi penelusuran

1. Di Konsol Google Cloud, klik Navigation menu (), lalu pilih Agent Builder.

   Catatan: Jika Agent Builder tidak tercantum dalam menu navigasi, klik View All Products. Di halaman All Products, scroll ke bagian Artificial Intelligence, lalu klik Agent Builder.

2. Klik Continue and activate the API.

3. Jika Anda otomatis dialihkan ke halaman Create App, lanjutkan ke langkah berikutnya. Jika tidak, klik New App.

4. Di halaman Create App, pada bagian Search for your website, klik Create.

5. Di halaman Configuration, konfigurasi aplikasi penelusuran umum sesuai dengan setelan ini, dan biarkan setelan lainnya pada setelan default-nya:

   Properti	Nilai (ketik atau pilih)
   Nama aplikasi Anda	my-search-app
   Nama eksternal perusahaan atau organisasi Anda	my-company
   Lokasi aplikasi Anda	global (Global)

6. Klik Continue.

Membuat penyimpanan data untuk aplikasi penelusuran

1. Di halaman Data Stores, klik Create Data Store.

   Di halaman ini, Anda akan mengonfigurasi aplikasi penelusuran dengan sumber data Anda sendiri yang akan digunakan di hasil penelusuran situs.

2. Pilih Cloud Storage.

   Catatan: Untuk keperluan lab ini, beberapa dokumen HTML yang merepresentasikan postingan blog telah disediakan sebelumnya di bucket Cloud Storage dalam project Anda.

3. Pada Folder yang dipilih sebagai default, klik Browse.

4. Untuk melihat isi bucket Cloud Storage , klik .

5. Pilih folder blog_posts, lalu klik Select.

   URI gs:// ke folder sudah terisi.

   

6. Untuk jenis data yang sedang diimpor, jangan ubah opsi default Unstructured documents, lalu klik Continue.

7. Untuk nama penyimpanan data, ketik my-data-store.

8. Klik Create.

9. Di halaman Data Stores, pilih penyimpanan data yang baru dibuat. Kemudian, klik Create untuk membuat aplikasi penelusuran.

   

   Agent Builder kini mulai menyerap data HTML postingan blog dari bucket Cloud Storage untuk aplikasi penelusuran Anda.

10. Untuk melihat status penyerapan data, di halaman Data my-data-store, klik tab Activity.

    Kolom Status menunjukkan status saat ini. Setelah proses impor selesai, kolom akan menunjukkan Import completed.

    

    Catatan: Proses impor memerlukan waktu beberapa menit. Tunggu hingga proses impor data selesai sebelum melanjutkan ke langkah berikutnya.

11. Untuk memverifikasi apakah dokumen berhasil diimpor, klik tab Documents.

Menguji aplikasi penelusuran

Anda dapat melihat pratinjau aplikasi penelusuran dengan menguji fungsinya di Agent Builder.

1. Di menu navigasi Agent Builder, klik Preview.

2. Di kotak penelusuran, ketik What is dollar cost averaging and how can it help me?, lalu tekan Enter.

   Aplikasi akan menghasilkan respons yang menjelaskan dollar cost averaging serta memberikan kutipan dan link ke file relevan yang diimpor dari Cloud Storage.

   Catatan: Secara default, aplikasi penelusuran menggunakan model Gemini 1.5 Pro untuk menghasilkan respons penelusuran. Anda dapat melihat atau mengubah konfigurasi aplikasi penelusuran di halaman Agent Builder > Configurations di Konsol Google Cloud.

Untuk memverifikasi tujuan, klik Check my progress. Aplikasi Vertex AI Search dibuat.

Tugas 4. Mengintegrasikan aplikasi situs dengan penelusuran

Setelah membuat aplikasi penelusuran, sekarang Anda dapat mengintegrasikan aplikasi tersebut dengan situs atau aplikasi Anda. Lab ini menggunakan API penelusuran untuk melakukan panggilan dan menerima respons yang ditampilkan di situs. Anda juga dapat menyematkan widget penelusuran ke situs Anda yang akan otomatis menyediakan kotak penelusuran dan antarmuka penelusuran yang dapat diperluas. Untuk mempelajari opsi ini lebih lanjut, ikuti link di akhir lab untuk melihat dokumentasinya.

Dalam tugas ini, Anda akan mengonfigurasi kode situs untuk diintegrasikan dengan aplikasi penelusuran yang telah Anda buat di tugas sebelumnya. Selanjutnya, Anda akan men-deploy aplikasi situs itu ke Cloud Run untuk pengujian.

Mengonfigurasi aplikasi situs

Aplikasi situs ini dibangun menggunakan FastAPI, yang merupakan framework web untuk membangun API di Python. Folder genai-website-mod-app/routers berisi implementasi API router untuk berbagai fungsi situs seperti penelusuran.

1. Di Cloud Shell Editor, buka folder genai-website-mod-app/routers, lalu buka file vertex_search.py.

   File ini berisi kode yang mengimplementasikan panggilan API penelusuran menggunakan modul discoveryengine dari SDK klien cloud untuk Python. Kode ini juga menggunakan tomllib, yakni modul di Python yang mengurai file konfigurasi.

2. Lihat kode di fungsi trigger_first_search().

   Fungsi ini menyiapkan panggilan ke Discovery Engine API menggunakan jalur projects/{project_id}/locations/{datastore_location}/collections/default_collection/dataStores/{datastore_id}, yang berisi parameter jalur.

3. Untuk memberikan nilai untuk parameter jalur, di folder genai-website-mod-app, edit file config.toml.

4. Di bagian [global], ganti nilai properti konfigurasi sebagaimana ditunjukkan:

   Bagian	Properti	Nilai
   global	project_id
   global	location
   global	datastore_id	Lihat langkah berikutnya

5. Ganti nilai properti konfigurasi datastore_id dengan nilai ID datastore aplikasi penelusuran Anda:

   a. Untuk mendapatkan nilai datastore_id, buka Agent Builder di Konsol Google Cloud, lalu pilih Data.

   b. Salin dan tempel nilai Data store ID dari my-data-store dalam file config.toml.

6. Ganti properti konfigurasi tambahan di bagian konfigurasi yang relevan sebagaimana ditunjukkan:

   Bagian	Properti	Nilai
   imagen	bucket_name
   blog	image_bucket
   blog	blog_bucket

7. Simpan perubahan pada file.

Tugas 5. Membangun, men-deploy, dan menguji situs di Cloud Run

Cloud Run adalah platform komputasi terkelola yang memungkinkan Anda menjalankan container aplikasi di infrastruktur Google yang skalabel.

Dalam tugas ini, Anda akan membangun aplikasi situs dan men-deploy-nya ke Cloud Run. Anda juga akan menguji fungsionalitas penelusuran yang diintegrasikan ke situs itu.

Menyiapkan lingkungan

1. Pastikan Anda berada di direktori website application:

   cd ~/genai-website-mod-app

2. Tetapkan variabel lingkungan untuk project ID, region, dan layanan aplikasi situs:

   PROJECT_ID=$(gcloud config get-value project) REGION={{{project_0.default_region|set at lab start}}} SERVICE_NAME='webmod-svc' # Name of your Cloud Run service. echo "PROJECT_ID=${PROJECT_ID}" echo "REGION=${REGION}" echo "SERVICE_NAME=${SERVICE_NAME}"

Membangun dan men-deploy aplikasi di Cloud Run

1. Untuk membangun dan men-deploy aplikasi ke Cloud Run, jalankan perintah:

   gcloud run deploy "$SERVICE_NAME" \ --port 8080 \ --source . \ --allow-unauthenticated \ --region $REGION \ --project $PROJECT_ID

2. Untuk membuat repositori Docker Artifact Registry, ketik Y

   Setelah layanan di-deploy, URL ke layanan akan dibuat dalam output perintah.

Menguji fungsionalitas penelusuran situs

1. Untuk menguji aplikasi Anda di Cloud Run, buka URL layanan Cloud Run aplikasi situs di jendela atau tab browser terpisah.

2. Di kotak penelusuran, ketik What is dollar cost averaging and how can it help me?, lalu tekan Enter.

3. Pastikan hasil penelusuran ditampilkan di situs.

   Catatan: Hasil penelusuran menyertakan respons AI. Hasil tersebut dibuat dari konten dalam file HTML di penyimpanan data yang Anda sediakan dari Cloud Storage untuk aplikasi penelusuran. Terkadang, link hasil penelusuran mungkin tidak menampilkan cuplikan meskipun link tersebut terhubung ke postingan blog terkait. Catatan: File postingan blog yang digunakan situs disimpan sebagai file JSON di folder production terpisah di bucket Cloud Storage Anda. Aplikasi situs menggunakan EditorJS untuk merender file ini sebagai HTML untuk ditampilkan di situs.

4. Ajukan pertanyaan lanjutan dengan mengetik Can you use dollar cost averaging with ETFs? di kotak penelusuran, lalu tekan Enter.

5. Pastikan hasil penelusuran menyertakan jawaban untuk pertanyaan lanjutan, beserta link yang relevan ke postingan blog.

Untuk memverifikasi tujuan, klik Check my progress. Aplikasi situs di-deploy ke Cloud Run.

Tugas 6. Menggunakan AI generatif untuk mengedit konten situs

Alat AI generatif Google dapat digunakan untuk membuat dan mengedit teks atau konten situs. Dalam tugas ini, sebagai editor konten situs, Anda akan menggunakan alat ini untuk memperbarui konten teks dan gambar di situs yang digunakan dalam lab ini.

Meninjau kode pembuatan gambar

Aplikasi situs ini menggunakan Imagen API di Vertex AI untuk membuat dan memperbarui gambar.

1. Di Cloud Shell Editor, buka file konfigurasi config.toml.

2. Tinjau properti konfigurasinya di bagian [imagen]. Bagian ini mendefinisikan properti yang akan digunakan model untuk pembuatan gambar dan teks, serta beberapa properti tambahan.

3. Di Cloud Shell Editor, buka file routers/vertex_imagen.py.

   Berbagai fungsi modifikasi dan pemberian teks gambar, beserta rute API-nya, didefinisikan dalam file ini.

4. Fungsi ini diimplementasikan dalam file utils/imagen.py. Buka file ini di Cloud Shell Editor.

5. Lihat fungsi generate_image():

   Fungsi ini menggunakan class vertexai.preview.vision_models.ImageGenerationModel dari paket vertexai di Python SDK.

   Fungsi ini terlebih dahulu memuat model pembuatan gambar, lalu membuat gambar dengan memanggil fungsi generate_images() pada model yang meneruskan perintah teks dan parameter lainnya.

Memperbarui konten gambar

Mari perbarui gambar di salah satu postingan blog di situs.

1. Di pojok kanan atas situs Cymbal Investments, klik All Blogs.

   Sebuah halaman dengan enam postingan blog ditampilkan di situs.

   Catatan: Jika postingan blog awal dipilih secara default, klik di mana saja pada halaman untuk membatalkan pilihan tersebut.

2. Klik link untuk melihat postingan blog pertama: Unleashing the Techie Within: A Journey to FIRE.

   Halaman postingan blog berisi header, gambar, dan paragraf teks.

3. Untuk mengedit konten halaman, klik Edit () di kanan bawah.

4. Arahkan kursor ke gambar. Lalu, di sebelah kiri gambar, klik Click to tune ().

5. Dari menu Click to tune, pilih Generate.

   

6. Di bagian teks gambar, untuk Prompt, ketik An image of a retired man and woman sitting on a beach enjoying the sunset. Klik Generate.

7. Scroll ke bagian atas halaman, dan tunggu hingga gambar dibuat.

   Gambar baru akan dibuat dan diupload ke bucket gambar Cloud Storage Anda. Halaman postingan blog diperbarui dengan gambar baru ini.

Menerjemahkan konten

Anda dapat menerjemahkan seluruh halaman web atau sebagian teks inline menggunakan model pembuatan teks. Dalam subtugas ini, Anda akan menerjemahkan teks inline di halaman blog situs.

1. Di Cloud Shell Editor, buka file routers/vertex_llm.py.

   Berbagai fungsi pengeditan dan penerjemahan halaman web beserta rute API-nya didefinisikan dalam file ini.

2. Scroll ke bagian bawah file sumber dan lihat kode untuk fungsi ai_translate_inline().

   Fungsi ini membuat perintah menggunakan properti konfigurasi ai_translate_inline_prompt, teks yang dipilih pengguna, dan bahasa target yang ditentukan pengguna. Kemudian, fungsi llm_generate_gemini() dipanggil untuk menghasilkan respons dari model.

   Berikut adalah nilai properti konfigurasi ai_translate_inline_prompt dari file config.toml:

   Anda adalah penulis pemenang penghargaan. PETUNJUK: 1. Anda diberi sepenggal teks sebagai INPUT_TEXT 2. Anda juga diberi sebuah bahasa target sebagai TARGET_LANGUAGE. 3. Anda harus menerjemahkan INPUT_TEXT ke dalam TARGET_LANGUAGE. 4. Tampilkan hanya teks hasil terjemahan. Jangan tambahkan penjelasan lain. Jangan tampilkan jawaban dalam \"\" (tanda kutip tunggal atau ganda) INPUT_TEXT:

3. Untuk melihat fungsi llm_generate_gemini(), buka file utils/vertex_llm_utils.py.

   Fungsi ini menggunakan class vertexai.generative_models.GenerativeModel dari paket vertexai di Python SDK.

   Fungsi ini terlebih dahulu memuat model gemini-1.5-pro, lalu membuat respons dengan memanggil fungsi generate_content() pada model yang meneruskan perintah teks dan parameter lainnya.

4. Pastikan Anda berada dalam mode edit di halaman blog situs Anda. Jika tidak, di kanan bawah, klik Edit ().

5. Pilih salah satu paragraf teks, lalu klik alat Translate:

   

6. Di kolom perintah bahasa, ketik French, lalu klik Send.

   Dalam beberapa detik, teks paragraf tersebut akan diterjemahkan ke dalam bahasa yang Anda tentukan, dan digantikan secara inline di halaman.

Memperbarui teks situs (konten teks)

Anda juga dapat menggunakan model generatif untuk meningkatkan kualitas konten teks situs Anda.

1. Di file routers/vertex_llm.py, lihat fungsi ai_refine_text().

   Fungsi ini membuat perintah menggunakan properti konfigurasi ai_refine_prompt, teks yang dipilih pengguna dari konten situs, dan petunjuk input pengguna.

   Berikut adalah nilai properti konfigurasi ai_refine_prompt dari file config.toml:

   Anda adalah penulis pemenang penghargaan. PETUNJUK: 1. Anda diberi sepenggal teks sebagai INPUT_TEXT 2. Anda juga diberi nada, gaya bahasa, atau petunjuk sebagai REFINE_PROMPT. 3. Anda harus mengubah atau menyempurnakan INPUT_TEXT dalam nada atau gaya bahasa REFINE_PROMPT. 4. Tampilkan hanya teks yang telah disempurnakan. Jangan tambahkan penjelasan lain. Jangan tampilkan jawaban dalam \"\" (tanda kutip tunggal atau ganda) INPUT TEXT:

2. Pastikan Anda berada dalam mode edit di halaman blog situs Anda. Jika tidak, di kanan bawah, klik Edit ().

3. Pilih salah satu paragraf teks, lalu klik alat Refine Text:

   

4. Untuk mengubah gaya bahasa teks yang dipilih agar lebih formal dan efektif, ketik formal impactful di kotak gaya. Nilai ini ditambahkan ke perintah sebagai string REFINE_PROMPT sebelum memanggil model.

5. Klik Send.

   Setelah beberapa detik, respons akan dibuat dari model dan ditampilkan di halaman dalam kotak tertutup di bawah teks asli.

6. Lihat teks paragraf yang telah diperbarui, lalu klik Replace.

7. Untuk menyimpan perubahan pada halaman blog, klik Save di bagian atas halaman.

8. Untuk melihat nilai akhir perintah, di Navigation menu () Konsol Google Cloud, pilih Logging > Logs Explorer.

   Catatan: Jika Logging tidak tercantum dalam menu navigasi, klik View All Products. Di halaman All Products, scroll ke bagian Observability, lalu klik Logging.

9. Untuk menandai entri log yang relevan, di panel menu hasil, klik Actions > Highlight in results.

10. Untuk Highlight in results, ketik REFINE_PROMPT

    

Untuk memverifikasi tujuan, klik Check my progress. Perubahan diterapkan pada konten situs.

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 dan menguji aplikasi penelusuran umum Vertex AI.
• Mengintegrasikan aplikasi Vertex AI Search ke situs.
• Menggunakan Imagen API untuk membuat dan memperbarui gambar di situs.
• Menerjemahkan dan menyempurnakan teks di halaman menggunakan TextGenerationModel Vertex AI.
• Men-deploy dan menguji aplikasi situs di Cloud Run.

Dengan kemampuan ini, Anda dapat membangun proses untuk memperbarui konten situs, dan menyimpan perubahan ke penyimpanan eksternal seperti Cloud Storage untuk ditinjau dan dipublikasikan.

Langkah Berikutnya/Pelajari Lebih Lanjut

• Vertex AI
• Gemini
• Menambahkan widget penelusuran ke halaman web
• Artifact Registry
• Cloud Run

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.