Membuat fitur AI generatif yang didukung oleh data Anda dengan Firebase Genkit

1. Sebelum memulai

Dalam codelab ini, Anda akan mempelajari cara menggunakan Firebase Genkit untuk mengintegrasikan AI generatif ke dalam aplikasi Anda. Firebase Genkit adalah framework open source yang membantu Anda mem-build, men-deploy, dan memantau aplikasi berteknologi AI yang siap produksi.

Genkit dirancang untuk developer aplikasi, untuk membantu Anda mengintegrasikan kemampuan AI yang canggih ke dalam aplikasi dengan mudah menggunakan pola dan paradigma yang sudah dikenal. Dibangun oleh tim Firebase, memanfaatkan pengalaman kami dalam membangun alat yang digunakan oleh jutaan developer di seluruh dunia.

Prasyarat

• Pemahaman tentang Firestore, Node.js, dan TypeScript.

Yang akan Anda pelajari

• Cara mem-build aplikasi yang lebih cerdas dengan kemampuan penelusuran kemiripan vektor lanjutan Firestore.
• Cara menerapkan AI generatif secara praktis di aplikasi Anda menggunakan Firebase Genkit.
• Persiapkan solusi Anda untuk deployment dan integrasi.

Yang Anda butuhkan

• Browser pilihan Anda, seperti Google Chrome
• Lingkungan pengembangan dengan editor kode dan terminal
• Akun Google untuk pembuatan dan pengelolaan project Firebase Anda

Catatan: Codelab ini menggunakan layanan Firebase dan Google yang memerlukan akun Penagihan Cloud. Jika baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit senilai $300 dan akun Penagihan Cloud Uji Coba Gratis untuk mencoba layanan kami. Jika tidak, Anda harus menyediakan metode pembayaran (seperti kartu kredit) untuk menyiapkan akun Penagihan Cloud (untuk mengetahui detail tentang metode pembayaran, lihat dokumentasi Penagihan Cloud).

2. Meninjau aplikasi web dan layanan cloud yang digunakan

Di bagian ini, Anda akan meninjau aplikasi web yang akan Anda build dengan codelab ini, serta mempelajari layanan cloud yang akan Anda gunakan.

Aplikasi web

Dalam codelab ini, Anda akan menggunakan codebase aplikasi bernama Kompas — aplikasi perencanaan liburan. Pengguna dapat memilih tujuan, melihat aktivitas di tujuan, dan membuat itinerari untuk perjalanan mereka.

Dalam codelab ini, Anda akan menerapkan dua fitur baru yang dimaksudkan untuk meningkatkan interaksi pengguna dengan halaman beranda aplikasi. Kedua fitur tersebut didukung oleh AI generatif:

• Aplikasi saat ini menampilkan daftar tujuan statis. Anda akan mengubahnya menjadi dinamis.
• Anda akan menerapkan itinerari yang diisi otomatis untuk meningkatkan kesetiaan.

Catatan: Ini adalah codelab besar dengan banyak langkah. Untuk mendapatkan hasil maksimal dari codelab ini:

• Lakukan secara konsisten dengan tetap beristirahat.
• Saat bekerja dengan kode, luangkan waktu untuk memahami kode itu dan cara kerjanya, daripada menyalin dan menempel tanpa pikir.
• Jika Anda mengalami kebuntuan, telusuri kembali langkah Anda ke status terakhir yang masih berfungsi, dan pastikan Anda telah menyelesaikan setiap langkah secara akurat.
• Jika Anda menemukan bug terkait codelab atau kodenya, laporkan masalah di GitHub.

Layanan yang digunakan

Dalam codelab ini, Anda akan menggunakan banyak layanan serta fitur Firebase dan Cloud, dan sebagian besar kode awal disediakan untuk Anda. Tabel berikut berisi layanan yang akan Anda gunakan dan alasan penggunaannya.

Layanan	Alasan penggunaan
Firebase Genkit	Anda menggunakan Genkit untuk menghadirkan AI generatif ke dalam aplikasi Node.js/Next.js.
Cloud Firestore	Anda menyimpan data di Cloud Firestore, yang kemudian digunakan untuk penelusuran kemiripan vektor.
Vertex AI dari Google Cloud	Anda menggunakan model dasar dari Vertex AI (seperti Gemini) untuk mendukung fitur AI.
Firebase App Hosting	Secara opsional, Anda dapat menggunakan Firebase App Hosting baru yang disederhanakan untuk menayangkan aplikasi web Next.js dinamis (terhubung ke repo GitHub).

3. Menyiapkan lingkungan pengembangan

Memverifikasi versi Node.js Anda

1. Di terminal, pastikan Anda telah menginstal Node.js versi 20.0.0 atau yang lebih tinggi:

   node -v
   

2. Jika Anda tidak memiliki Node.js versi 20.0.0 atau yang lebih tinggi, download versi LTS terbaru dan instal.

Mendapatkan kode sumber untuk codelab

Jika Anda memiliki akun GitHub:

1. Buat repositori baru menggunakan template kami dari github.com/FirebaseExtended/codelab-ai-genkit-rag
2. Buat clone lokal repositori GitHub codelab yang baru saja Anda buat:

   git clone https://github.com/<your-github-handle>/codelab-ai-genkit-rag
   

Jika Anda tidak menginstal git atau memilih untuk tidak membuat repo baru:

Download repositori GitHub sebagai file ZIP.

Meninjau struktur folder

Di komputer lokal Anda, temukan repositori yang di-clone dan tinjau struktur foldernya:

Folder	Deskripsi
genkit-functions	Kode Genkit backend
load-firestore-data	Alat command line pendukung untuk mengisi otomatis koleksi Firestore Anda dengan cepat
*lainnya	Kode aplikasi web Next.js

Folder root berisi file README.md yang menawarkan panduan memulai untuk menjalankan aplikasi web, menggunakan petunjuk yang disederhanakan. Namun, jika Anda adalah peserta baru, Anda harus menyelesaikan codelab ini (bukan panduan memulai) karena codelab berisi kumpulan petunjuk yang paling komprehensif.

Jika tidak yakin apakah Anda telah menerapkan kode dengan benar seperti yang ditunjukkan di seluruh codelab ini, Anda dapat menemukan kode solusi di cabang git end.

Menginstal Firebase CLI

1. Pastikan Anda telah menginstal Firebase CLI dan menggunakan versi 13.6 atau yang lebih tinggi:

   firebase --version
   

2. Jika Anda sudah menginstal Firebase CLI, tetapi bukan versi 13.6 atau yang lebih tinggi, update Firebase CLI:

   npm update -g firebase-tools
   

3. Jika Anda belum menginstal Firebase CLI, instal:

   npm install -g firebase-tools
   

Jika Anda tidak dapat mengupdate atau menginstal Firebase CLI karena kesalahan izin, baca dokumentasi npm atau gunakan opsi penginstalan lain.

Login ke Firebase

1. Di terminal Anda, login ke Firebase:

   firebase login
   

   Jika terminal menyatakan bahwa Anda telah login ke Firebase, Anda dapat langsung ke bagian Menyiapkan project Firebase di codelab ini.
2. Di terminal, bergantung pada apakah Anda ingin Firebase mengumpulkan data, masukkan Y atau N. (salah satu opsi berfungsi untuk codelab ini)
3. Di browser, pilih Akun Google Anda, lalu klik Izinkan.

Menginstal gcloud CLI Google Cloud

1. Instal gcloud CLI.
2. Di terminal, login ke Google Cloud:

   gcloud auth login
   

4. Menyiapkan project Firebase Anda

Di bagian ini, Anda akan menyiapkan project Firebase dan mendaftarkan Aplikasi Web Firebase di dalamnya. Anda juga akan mengaktifkan beberapa layanan yang digunakan oleh aplikasi web contoh nanti dalam codelab ini.

Semua langkah di bagian ini dilakukan di Firebase console.

Membuat project Firebase

1. Login ke Firebase console menggunakan Akun Google yang sama dengan yang Anda gunakan di langkah sebelumnya.
2. Klik Buat project, lalu masukkan nama project (misalnya, Compass Codelab).
   Jangan lupa dengan project ID yang ditetapkan secara otomatis untuk project Firebase Anda (atau klik ikon Edit untuk menetapkan project ID pilihan Anda). Anda akan memerlukan ID ini nanti untuk mengidentifikasi project Firebase di Firebase CLI. Jika lupa ID, Anda dapat menemukannya nanti di Setelan Project.
3. Klik Lanjutkan.
4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Lanjutkan.
5. Untuk codelab ini, Anda tidak memerlukan Google Analytics. Jadi, nonaktifkan opsi Google Analytics.
6. Klik Create project, tunggu hingga project Anda disediakan, lalu klik Continue.

Menambahkan aplikasi web ke project Firebase

1. Buka layar Project Overview di project Firebase Anda, lalu klik Web.
2. Di kotak teks App nickname, masukkan nama panggilan aplikasi yang mudah diingat, seperti My Compass Codelab App. Anda dapat membiarkan kotak centang untuk menyiapkan Firebase Hosting tidak dicentang, karena Anda akan menyiapkan layanan hosting secara opsional di langkah terakhir codelab ini.
   
3. Klik Register app > Lanjutkan ke konsol.

Bagus! Sekarang Anda telah mendaftarkan aplikasi web di project Firebase baru.

Mengupgrade paket penagihan Firebase

Untuk menggunakan Firebase Genkit dan Vertex AI (beserta layanan cloud yang mendasarinya), Anda perlu mengupgrade project Firebase untuk mengaktifkan penagihan.

Untuk mengupgrade paket penagihan project, ikuti langkah-langkah berikut:

1. Buka Paket Penagihan Firebase dalam project Firebase Anda.
2. Pada dialog Paket penagihan Firebase, pilih paket Blaze dan beli.

Catatan: Perhatikan bahwa dengan penagihan yang diaktifkan di project Firebase, Anda akan ditagih untuk panggilan yang dilakukan Genkit ke Gemini API. Pelajari harga Vertex AI lebih lanjut.

Setelah menyelesaikan codelab ini, Anda dapat mendowngrade project Firebase ke paket Spark tanpa biaya.

Aktifkan Cloud Firestore

1. Buka Build > Firestore Database menggunakan panel navigasi sebelah kiri.
2. Klik Buat database.
3. Biarkan Database ID disetel ke (default).
4. Pilih lokasi Cloud Firestore pilihan Anda (atau biarkan sebagai default).
5. Klik Berikutnya.
6. Pilih Mulai dalam mode pengujian.
7. Klik Buat.

Aktifkan Vertex AI

Menggunakan CLI gcloud untuk menyiapkan Vertex AI. Untuk semua perintah di halaman ini, pastikan untuk mengganti YOUR_PROJECT_ID dengan ID project Firebase Anda.

1. Di terminal, tetapkan project default untuk Google Cloud SDK:

   gcloud config set project YOUR_PROJECT_ID
   

2. Jika Anda melihat pesan peringatan yang bertuliskan "PERINGATAN: Project aktif Anda tidak cocok dengan project kuota dalam file Kredensial Default Aplikasi lokal Anda. Hal ini dapat mengakibatkan masalah kuota yang tidak terduga.", lalu jalankan perintah berikut untuk menetapkan project kuota:

   gcloud auth application-default set-quota-project YOUR_PROJECT_ID
   

3. Aktifkan layanan Vertex AI di project Anda:

   gcloud services enable aiplatform.googleapis.com
   

5. Menyiapkan aplikasi web

Untuk menjalankan aplikasi web, Anda harus menjalankan perintah di terminal dan menambahkan kode dalam editor kode. Untuk semua perintah di halaman ini, pastikan untuk mengganti YOUR_PROJECT_ID dengan ID project Firebase Anda.

Mengonfigurasi Firebase CLI untuk menargetkan project Anda

1. Di terminal, buka direktori utama project codelab Anda.
2. Agar Firebase CLI menjalankan semua perintah pada project Firebase Anda, jalankan perintah berikut:

   firebase use YOUR_PROJECT_ID
   

Mengimpor data sampel ke Firestore

Agar Anda dapat memulai dengan cepat, codelab ini menyediakan data contoh yang telah dibuat sebelumnya untuk Firestore.

1. Untuk mengizinkan codebase lokal menjalankan kode yang biasanya menggunakan akun layanan, jalankan perintah berikut di terminal:

   gcloud auth application-default login
   

   Tindakan ini akan membuka tab baru di browser. Login menggunakan Akun Google yang sama dengan yang Anda gunakan di langkah sebelumnya.
2. Untuk mengimpor contoh data Firestore, jalankan perintah berikut:

   cd load-firestore-data
   npm ci
   node index.js YOUR_PROJECT_ID
   cd ..
   

3. Pastikan bahwa data berhasil ditambahkan ke database Anda dengan membuka bagian Firestore pada project Firebase di Firebase console.Anda akan melihat skema data yang diimpor dan kontennya ditampilkan.

Menghubungkan aplikasi web ke project Firebase

Codebase aplikasi web Anda harus dikaitkan dengan project Firebase yang benar agar dapat memanfaatkan layanannya, seperti database. Untuk melakukannya, Anda perlu menambahkan konfigurasi Firebase ke codebase aplikasi. Konfigurasi ini mencakup nilai penting seperti project ID, kunci API, dan ID aplikasi, serta nilai lain yang memungkinkan aplikasi Anda berinteraksi dengan Firebase.

1. Dapatkan konfigurasi Firebase aplikasi Anda:
   1. Di Firebase console, buka project Firebase Anda.
   2. Di panel sebelah kiri, klik ikon roda gigi di samping Ringkasan Project, lalu pilih Setelan project.
   3. Di kartu "Aplikasi Anda", pilih aplikasi web Anda.
   4. Di bagian "Penyiapan dan konfigurasi SDK" pilih opsi Config.
   5. Salin cuplikan. Dimulai dengan const firebaseConfig ....
2. Tambahkan konfigurasi Firebase ke codebase aplikasi web Anda:
   1. Di editor kode, buka file src/lib/genkit/genkit.config.ts.
   2. Ganti bagian yang relevan dengan kode yang Anda salin.
   3. Simpan file.

Melihat pratinjau aplikasi web di browser

1. Di terminal, instal dependensi, lalu jalankan aplikasi web:

   npm install
   npm run dev
   

2. Di browser, buka URL Hosting yang dihosting secara lokal untuk melihat aplikasi web. Misalnya, dalam kebanyakan kasus, URL-nya adalah http://localhost:3000/ atau yang serupa.

Compas adalah aplikasi Next.js yang menggunakan React Server Components, dan ini adalah halaman beranda.

Klik Temukan perjalanan impian saya. Anda dapat melihatnya saat ini menampilkan beberapa data hard code untuk beberapa tujuan tetap:

Jangan ragu untuk menjelajahi. Jika Anda sudah siap untuk melanjutkan, klik tombol beranda (di sudut kanan atas).

6. Mempelajari AI generatif dengan Genkit

Sekarang Anda siap untuk memanfaatkan kecanggihan AI generatif dalam aplikasi Anda. Bagian codelab ini akan memandu Anda menerapkan fitur yang menyarankan tujuan berdasarkan inspirasi yang diberikan pengguna. Anda akan menggunakan Firebase Genkit dan Vertex AI Google Cloud sebagai penyedia untuk model generatif (Anda akan menggunakan Gemini).

Genkit dapat menyimpan rekaman aktivitas dan status alur (yang memungkinkan Anda memeriksa hasil dari menjalankan alur Genkit). Dalam codelab ini, Anda akan menggunakan Firestore untuk menyimpan rekaman aktivitas ini.

Sebagai langkah terakhir dalam codelab ini, Anda akan men-deploy aplikasi Genkit ke Firebase App Hosting.

Menghubungkan aplikasi Genkit ke project Firebase

Sebelum dapat meluncurkan Genkit, codebase Anda harus dikaitkan dengan project Firebase yang benar untuk memanfaatkan layanannya, seperti database. Untuk melakukannya, Anda perlu menambahkan konfigurasi Firebase ke codebase aplikasi Genkit. Konfigurasi ini mencakup nilai penting seperti project ID, kunci API, dan ID aplikasi, serta nilai lain yang memungkinkan aplikasi Anda berinteraksi dengan Firebase.

1. Dapatkan konfigurasi Firebase aplikasi Anda:
   1. Di Firebase console, buka project Firebase Anda.
   2. Di panel sebelah kiri, klik ikon roda gigi di samping Ringkasan Project, lalu pilih Setelan project.
   3. Di "Aplikasi Anda" pilih aplikasi web Anda.
   4. Di bagian "Penyiapan dan konfigurasi SDK" pilih opsi Config.
   5. Salin cuplikan. Dimulai dengan const firebaseConfig ....
2. Tambahkan konfigurasi Firebase aplikasi ke codebase aplikasi Genkit:
   1. Di editor kode, buka file genkit-functions/src/lib/genkit.config.ts.
   2. Ganti bagian yang relevan dengan kode yang Anda salin.
   3. Simpan file.

Meluncurkan UI Developer Genkit

Genkit dilengkapi dengan UI berbasis web yang memungkinkan Anda berinteraksi dengan LLM, flow Genkit, pengambil, dan komponen AI lainnya.

1. Luncurkan UI Developer Genkit:
   1. Buka jendela terminal baru.
   2. Buka root direktori genkit-functions Anda.
   3. Jalankan perintah berikut untuk memulai UI developer Genkit:

      cd genkit-functions
      npx genkit start
      

2. Di browser, buka URL Genkit yang dihosting secara lokal. Dalam kebanyakan kasus, URL-nya adalah http://localhost:4000/.

Berinteraksi dengan Gemini

Anda kini dapat menggunakan UI Developer Genkit untuk berinteraksi dengan salah satu model yang didukung atau komponen AI lainnya, seperti prompt, retriever, dan alur Genkit.

Misalnya, coba minta Gemini untuk menyarankan liburan liburan. Perhatikan cara Anda dapat menggunakan petunjuk sistem untuk mengarahkan perilaku model berdasarkan kebutuhan spesifik Anda. Cara ini juga berfungsi untuk model yang tidak mendukung petunjuk sistem secara native.

Mengelola dialog

Firebase Genkit memperkenalkan Dotprompt, plugin dan format teks yang dirancang untuk menyederhanakan pembuatan dan pengelolaan perintah AI generatif Anda. Ide inti di balik Dotprompt adalah memperlakukan prompt sebagai kode, sehingga Anda dapat menulis, memelihara, dan mengontrol versinya bersama kode aplikasi.

Untuk menggunakan Dotprompt, mulailah dengan hello-world:

1. Di editor kode, buka file genkit-functions/prompts/1-hello-world.prompt.
2. Di UI Developer Genkit, buka dotprompt/1-hello-world.
3. Gunakan nama atau kode bahasa yang Anda pahami, atau biarkan kosong.
4. Klik Run.
5. Coba beberapa nilai yang berbeda. Model bahasa besar mampu memahami perintah yang disingkat, salah eja, atau tidak lengkap dalam kueri sederhana seperti ini.

Perkaya output Anda dengan data terstruktur

Selain menghasilkan teks biasa, Genkit memungkinkan Anda menyusun output untuk meningkatkan presentasi dan integrasi dalam UI aplikasi. Dengan menentukan skema, Anda dapat menginstruksikan LLM untuk menghasilkan data terstruktur yang selaras dengan format yang Anda inginkan.

Menjelajahi skema output

Anda juga dapat menentukan skema output panggilan LLM.

1. Di editor kode, periksa file perintah:
   1. Buka file dotprompt/2-simple-itinerary.
   2. Periksa skema input dan output yang ditentukan.
2. Berinteraksi dengan UI:
   1. Di UI Developer Genkit, buka bagian dotprompt/2-simple-itinerary.
   2. Berikan input dengan mengisi kolom place dan interests dengan data contoh:

      {
          "interests": [
              "Museums"
          ],
          "place": "Paris"
      }
      

   3. Klik Run.

Memahami output berbasis skema

Perhatikan bagaimana output yang dihasilkan sesuai dengan skema yang ditentukan. Dengan menentukan struktur yang diinginkan, Anda telah menginstruksikan LLM untuk menghasilkan data yang mudah diurai dan diintegrasikan ke dalam aplikasi. Genkit secara otomatis memvalidasi output terhadap skema untuk memastikan integritas data.

Selain itu, Anda dapat mengonfigurasi Genkit untuk mencoba kembali atau mencoba memperbaiki output jika tidak cocok dengan skema.

Keuntungan utama dari skema output

• Integrasi yang disederhanakan: Menyertakan data terstruktur ke dalam elemen UI aplikasi dengan mudah.
• Validasi data: Memastikan akurasi dan konsistensi output yang dihasilkan.
• Penanganan error: Mengimplementasikan mekanisme untuk mengatasi ketidakcocokan skema.

Memanfaatkan skema output akan meningkatkan pengalaman Genkit, sehingga Anda dapat membuat data terstruktur yang disesuaikan untuk pengalaman pengguna yang lebih kaya dan dinamis.

Memanfaatkan input multimodal

Bayangkan aplikasi Anda menyarankan tujuan liburan yang dipersonalisasi berdasarkan gambar yang menurut pengguna menginspirasi. Genkit, yang dikombinasikan dengan model generatif multimodal, mendukung Anda mewujudkan visi ini.

1. Di editor kode, periksa file perintah:
   1. Buka file genkit-functions/prompts/imgDescription.prompt.
   2. Perhatikan penyertaan {{media url=this}}, yang merupakan elemen sintaksis Handlebar yang memfasilitasi penggabungan gambar ke dalam perintah Anda.
2. Berinteraksi dengan UI:
   1. Di UI Developer Genkit, buka perintah dotprompt/imgDescription.
   2. Masukkan URL Gambar di kolom imageUrls dengan menempelkan URL gambar. Misalnya, Anda dapat menggunakan gambar thumbnail dari Wikipedia yang menampilkan Menara Eiffel:

      {
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Klik Run.

7. Mengimplementasikan pengambilan dengan penelusuran kemiripan vektor

Meskipun menghasilkan konten kreatif dengan model AI itu sangat mengesankan, penerapan praktis sering kali memerlukan landasan output dalam konteks tertentu.

Dalam codelab ini, Anda memiliki database tujuan (tempat dan aktivitas) dan bertujuan untuk memastikan bahwa saran yang dihasilkan model Gemini secara eksklusif mereferensikan entri dalam database ini.

Untuk menjembatani kesenjangan antara kueri tidak terstruktur dan konten yang relevan, Anda akan memanfaatkan kekuatan penelusuran kemiripan vektor pada embedding yang dihasilkan.

Memahami embedding dan kemiripan vektor

• Vektor: Vektor adalah representasi numerik dari titik data, yang sering digunakan untuk membuat model informasi kompleks seperti teks atau gambar. Setiap dimensi dalam vektor sesuai dengan fitur data tertentu.
• Model Penyematan: Model AI khusus ini mengubah data input, seperti teks, menjadi vektor berdimensi tinggi. Aspek yang menarik adalah input yang serupa dipetakan ke vektor yang berdekatan satu sama lain dalam ruang berdimensi tinggi ini.
• Pencarian Kesamaan Vektor: Teknik ini memanfaatkan kedekatan vektor penyematan untuk mengidentifikasi titik data yang relevan. Berdasarkan kueri input, ia menemukan entri dalam database dengan vektor embedding yang serupa, yang menunjukkan keterkaitan semantik.

Memahami cara kerja proses pengambilan

1. Menyematkan kueri: Input pengguna (misalnya, "jamuan romantis di Paris") diteruskan melalui model penyematan, sehingga menghasilkan vektor kueri.
2. Embedding database: Idealnya, Anda telah memproses terlebih dahulu database tujuan, membuat vektor embedding untuk setiap entri.
3. Penghitungan kesamaan: Vektor kueri dibandingkan dengan setiap vektor embedding dalam database menggunakan metrik kemiripan (misalnya, kemiripan kosinus).
4. Pengambilan: Entri yang paling mirip dari database, berdasarkan kedekatannya dengan vektor kueri, diambil sebagai saran yang relevan.

Dengan menerapkan mekanisme pengambilan ini ke dalam aplikasi Anda, Anda memanfaatkan model Gemini untuk menghasilkan saran yang tidak hanya kreatif, tetapi juga berakar kuat pada set data tertentu Anda. Pendekatan ini memastikan bahwa output yang dihasilkan tetap relevan secara kontekstual dan selaras dengan informasi yang tersedia di database Anda.

Mengaktifkan penelusuran kemiripan vektor di Firestore

Pada langkah sebelumnya dalam codelab ini, Anda mengisi database Firestore dengan contoh tempat dan aktivitas. Setiap entri tempat menyertakan kolom teks knownFor yang menjelaskan atribut pentingnya, bersama dengan kolom embedding yang sesuai yang berisi representasi vektor deskripsi ini.

Untuk memanfaatkan kekuatan penelusuran kemiripan vektor pada embeddings ini, Anda harus membuat indeks Firestore. Indeks ini memungkinkan pengambilan tempat secara efisien berdasarkan kemiripan vektor penyematan tempat tersebut dengan kueri tertentu.

1. Di terminal Anda, jalankan perintah berikut untuk menginstal komponen alpha terbaru. Anda memerlukan versi 2024.05.03 atau yang lebih baru:

   gcloud components install alpha
   

2. Buat indeks, pastikan untuk mengganti YOUR_PROJECT_ID dengan ID project Anda.

   gcloud alpha firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config=vector-config='{"dimension":"768","flat": "{}"}',field-path=embedding
   

3. Di UI Developer Genkit, buka placesRetriever.
4. Klik Run. Amati objek scaffold dengan teks placeholder, yang menunjukkan tempat Anda akan menerapkan logika pengambil.
5. Di editor kode, buka file genkit-functions/src/lib/placesRetriever.ts.
6. Scroll jauh ke bawah dan ganti placeholder placesRetriever dengan kode berikut:

   export const placesRetriever = defineFirestoreRetriever({
     name: 'placesRetriever',
     firestore,
     collection: 'places',
     contentField: 'knownFor',
     vectorField: 'embedding',
     embedder: textEmbeddingGecko,
     distanceMeasure: 'COSINE',
   });
   

Menguji pengambil

1. Di UI Developer Genkit, buka pengambil placesRetriever.
2. Berikan Kueri berikut:

   {
       "content": [
           {
               "text": "UNESCO"
           }
       ]
   }
   

3. Anda juga dapat memberikan Opsi. Sebagai contoh, berikut ini cara menentukan jumlah dokumen yang harus ditampilkan yang harus ditampilkan oleh retriever:

   {
       "limit": 4
   }
   

4. Klik Run.

Anda dapat melakukan pemfilteran tambahan pada data di luar kesamaan dengan menambahkan klausa where ke Opsi.

8. Retrieval augmented generation (RAG) dengan Genkit

Di bagian sebelumnya, Anda telah membuat setiap perintah yang dapat menangani teks, JSON, dan gambar, menghasilkan tujuan liburan, serta konten menarik lainnya untuk pengguna. Anda juga telah menerapkan perintah yang mengambil tujuan yang relevan dari database Firestore. Sekarang, saatnya untuk mengatur komponen-komponen ini ke dalam alur retrieval augmented generation (RAG) yang kohesif.

Bagian ini memperkenalkan konsep Genkit penting yang disebut flows. Flow adalah fungsi streaming dengan definisi jenis yang jelas yang dapat dipanggil secara lokal dan dari jarak jauh, dengan kemampuan observasi penuh. Anda dapat mengelola dan memanggil flow dari CLI Genkit dan UI Developer Genkit.

1. Di editor kode, periksa perintah itinerari:
   1. Buka file genkit-functions/prompts/itineraryGen.prompt.
   2. Perhatikan bagaimana perintah telah diperluas untuk menerima input tambahan, khususnya data aktivitas yang bersumber dari pengambil.
2. Di UI Developer Genkit, lihat alur Genkit dalam file genkit-functions/src/lib/itineraryFlow.ts.
   Tips: Untuk menyederhanakan proses debug, sebaiknya bagi alur yang panjang menjadi langkah yang lebih kecil dan mudah dikelola.
3. Tingkatkan alur dengan mengintegrasikan langkah "deskripsi gambar":
   1. Cari komentar TODO: 2 (sekitar baris 70). Ini menandai tempat Anda akan meningkatkan alur.
   2. Ganti placeholder imgDescription kosong dengan output yang dihasilkan oleh panggilan perintah imgDescription.
4. Uji alurnya:
   1. Buka itineraryFlow.
   2. Gunakan input berikut untuk menguji keberhasilan eksekusi itineraryFlow dengan langkah yang baru ditambahkan:

      {
          "request": "Sightseeing in Paris",
          "imageUrls": [
              "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg/556px-La_Tour_Eiffel_vue_de_la_Tour_Saint-Jacques%2C_Paris_ao%C3%BBt_2014_%282%29.jpg"
          ]
      }
      

   3. Klik Run.
   4. Amati output yang dihasilkan, yang akan menggabungkan deskripsi gambar ke dalam saran itinerari.
5. Jika Anda menemukan error atau perilaku yang tidak terduga, periksa tab Periksa untuk mengetahui detailnya. Anda juga dapat menggunakan tab ini untuk meninjau histori eksekusi dari Trace Store.

RAG untuk aplikasi web Anda

1. Pastikan aplikasi web masih berjalan dengan membuka http://localhost:3000/ di browser Anda.
2. Jika aplikasi web tidak lagi berjalan, jalankan perintah ini di terminal Anda:

   npm install
   npm run dev
   

3. Lihat halaman aplikasi Dream Your Vacation (http://localhost:3000/gemini).
4. Lihat kode sumbernya (src/app/gemini/page.tsx) untuk contoh integrasi Next.js.

9. Men-deploy aplikasi Anda dengan Firebase App Hosting

Langkah terakhir dalam perjalanan ini adalah men-deploy aplikasi web Anda. Anda akan memanfaatkan Firebase App Hosting, solusi hosting berbasis framework yang dirancang untuk menyederhanakan deployment aplikasi Next.js dan Angular ke backend tanpa server.

1. Commit perubahan Anda ke repositori git lokal, lalu kirim ke GitHub.
2. Di Firebase console, buka App Hosting dalam project Firebase Anda.
3. Klik Mulai > Hubungkan ke GitHub.
4. Pilih GitHub account dan Repository. Klik Next.
5. Di Setelan deployment > Direktori root, gunakan nilai default.
6. Untuk Live branch, pilih cabang main dari repo GitHub Anda. Klik Berikutnya.
7. Masukkan ID untuk backend Anda (misalnya, compass).
8. Saat ditanya apakah akan Membuat atau mengaitkan aplikasi web Firebase, pilih Pilih aplikasi web Firebase yang ada, lalu pilih aplikasi yang Anda buat di langkah sebelumnya dalam codelab ini.
9. Klik Finish and Deploy.

Memantau status deployment

Proses deployment akan memerlukan waktu beberapa menit. Anda dapat memantau progresnya pada bagian App Hosting di Firebase console.

Memberikan izin ke akun layanan

Agar backend Node.js dapat mengakses resource Vertex AI, Anda perlu menetapkan peran aiplatform.user ke akun layanan aplikasi Anda:

gcloud projects add-iam-policy-binding YOUR_PROJECT_ID \
--member "serviceAccount:firebase-app-hosting-compute@YOUR_PROJECT_ID.iam.gserviceaccount.com" \
--role "roles/aiplatform.user"

Setelah selesai, aplikasi web Anda akan dapat diakses oleh pengguna.

Deployment ulang otomatis

Firebase App Hosting menyederhanakan update mendatang. Setiap kali Anda mendorong perubahan ke cabang utama repositori GitHub, Firebase App Hosting akan otomatis mem-build ulang dan men-deploy ulang aplikasi Anda, sehingga memastikan pengguna selalu mendapatkan versi terbaru.

10. Kesimpulan

Selamat, Anda telah menyelesaikan codelab komprehensif ini.

Anda telah berhasil memanfaatkan kecanggihan Firebase Genkit, Firestore, dan Vertex AI untuk membuat "alur" canggih yang menghasilkan rekomendasi liburan yang dipersonalisasi berdasarkan preferensi dan inspirasi pengguna, sekaligus mendasarkan saran pada data aplikasi Anda.

Selama perjalanan ini, Anda telah mendapatkan pengalaman langsung dengan pola software engineering penting yang sangat diperlukan untuk membuat aplikasi AI generatif yang andal. Pola ini mencakup:

• Pengelolaan perintah: Mengatur dan mengelola perintah sebagai kode untuk kolaborasi dan kontrol versi yang lebih baik.
• Konten multimodal: Mengintegrasikan berbagai jenis data, seperti gambar dan teks, untuk meningkatkan interaksi AI.
• Skema Input/Output: Menyusun data untuk integrasi dan validasi yang lancar di aplikasi Anda.
• Penyimpanan Vektor: Memanfaatkan embedding vektor untuk penelusuran kemiripan yang efisien dan pengambilan informasi yang relevan.
• Pengambilan Data: Mengimplementasikan mekanisme untuk mengambil dan menggabungkan data dari database ke dalam konten buatan AI.
• Retrieval Augmented Generation (RAG): Menggabungkan teknik pengambilan dengan AI generatif untuk menghasilkan output yang akurat dan relevan secara kontekstual.
• Flow Instrumentation: Mem-build dan mengorkestrasi alur kerja AI yang kompleks untuk eksekusi yang lancar dan dapat diamati.

Dengan menguasai konsep ini dan menerapkannya dalam ekosistem Firebase, Anda akan siap untuk memulai petualangan genAI Anda sendiri. Jelajahi kemungkinan yang sangat luas, buat aplikasi inovatif, dan teruslah mendobrak batas-batas apa saja yang dapat dicapai dengan AI generatif.

Mempelajari opsi deployment alternatif

Genkit menawarkan berbagai opsi deployment untuk memenuhi kebutuhan spesifik Anda, termasuk:

• Cloud Functions for Firebase
• Cloud Run
• Next.js
• Lingkungan Node.js apa pun
• Genkit juga mendukung Go

Cukup pilih salah satu yang paling sesuai untuk Anda dengan menjalankan perintah berikut di dalam folder node (package.json) Anda:

npx genkit init

Langkah berikutnya

• Lakukan eksperimen dengan perintah dan manfaatkan jendela konteks yang besar di Google AI Studio atau Vertex AI Studio.
• Pelajari lebih lanjut penelusuran AI Retrieval-Augmented Generation (RAG).
• Lihat dokumen resmi untuk Firebase Genkit.
• Pelajari lebih lanjut kemampuan penelusuran kemiripan di Firestore dan Cloud SQL untuk PostgreSQL.
• Pahami alur genAI secara lebih mendalam dengan panggilan fungsi.