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 membangun, men-deploy, dan memantau aplikasi yang didukung teknologi AI dan siap produksi.

Genkit didesain bagi developer aplikasi, untuk membantu Anda mengintegrasikan kemampuan AI yang canggih dengan mudah ke dalam aplikasi Anda dengan pola dan paradigma yang sudah dikenal. Alat ini dibuat oleh tim Firebase, yang memanfaatkan pengalaman kami dalam membuat alat yang digunakan oleh jutaan developer di seluruh dunia.

Prasyarat

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

Yang akan Anda pelajari

• Cara membangun aplikasi yang lebih cerdas dengan kemampuan penelusuran kemiripan vektor lanjutan dari Firestore.
• Cara mengimplementasikan AI generatif secara praktis di aplikasi Anda menggunakan Firebase Genkit.
• Siapkan 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

2. Meninjau aplikasi web dan layanan cloud yang digunakan

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

Aplikasi web

Dalam codelab ini, Anda akan bekerja di codebase aplikasi bernama Compass — 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 terisi otomatis untuk meningkatkan interaksi.

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.

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 root berisi file README.md yang menawarkan panduan memulai untuk menjalankan aplikasi web, menggunakan petunjuk yang disederhanakan. Namun, jika Anda adalah pemula, Anda harus menyelesaikan codelab ini (bukan memulai cepat) karena codelab ini berisi kumpulan petunjuk paling komprehensif.

Jika tidak yakin apakah Anda telah menerapkan kode dengan benar seperti yang ditunjukkan dalam 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 baru, update:

   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 error izin, lihat dokumentasi npm atau gunakan opsi penginstalan lainnya.

Login ke Firebase

1. Di terminal Anda, login ke Firebase:

   firebase login
   

   Jika terminal Anda menyatakan bahwa Anda telah login ke Firebase, Anda dapat langsung ke bagian Menyiapkan project Firebase di codelab ini.
2. Di terminal, masukkan Y atau N, bergantung pada apakah Anda ingin Firebase mengumpulkan data. (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).
   Ingat ID project yang otomatis ditetapkan untuk project Firebase Anda (atau klik ikon Edit untuk menetapkan ID project 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 project Anda disiapkan, 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 > Continue to konsol.

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

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Firebase Genkit dan Vertex AI (beserta layanan cloud yang mendasarinya), project Firebase Anda harus menggunakan paket harga bayar sesuai penggunaan (Blaze), yang berarti project tersebut ditautkan ke akun Penagihan Cloud.

• Akun Penagihan Cloud memerlukan metode pembayaran, seperti kartu kredit.
• Jika Anda baru menggunakan Firebase dan Google Cloud, periksa apakah Anda memenuhi syarat untuk mendapatkan kredit senilai$300 dan akun Penagihan Cloud Uji Coba Gratis.
• Jika Anda melakukan codelab ini sebagai bagian dari acara, tanyakan kepada penyelenggara apakah ada kredit Cloud yang tersedia.

Pelajari harga Vertex AI lebih lanjut.

Untuk mengupgrade project Anda ke paket Blaze, ikuti langkah-langkah berikut:

1. Di Firebase console, pilih upgrade your plan.
2. Pilih paket Blaze. Ikuti petunjuk di layar untuk menautkan akun Penagihan Cloud ke project Anda.
   Jika Anda perlu membuat akun Penagihan Cloud sebagai bagian dari upgrade ini, Anda mungkin perlu kembali ke alur upgrade di Firebase console untuk menyelesaikan upgrade.

Menyiapkan Cloud Firestore

1. Di panel kiri Firebase console, luaskan Build, lalu pilih Firestore database.
2. Klik Buat database.
3. Biarkan Database ID ditetapkan ke (default).
4. Pilih lokasi untuk database Anda, lalu klik Berikutnya.
   Untuk aplikasi yang sebenarnya, Anda harus memilih lokasi yang dekat dengan pengguna.
5. Klik Mulai dalam mode pengujian. Baca pernyataan penyangkalan tentang aturan keamanan.
   Jangan mendistribusikan atau mengekspos aplikasi secara publik tanpa menambahkan Aturan Keamanan untuk database Anda.
6. Klik Buat.

Aktifkan Vertex AI

Gunakan 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 Anda, 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 di file Kredensial Default Aplikasi lokal. 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 terhadap project Firebase Anda, jalankan perintah berikut:

   firebase use YOUR_PROJECT_ID
   

Mengimpor data sampel ke Firestore

Agar Anda dapat memulai dengan cepat, codelab ini akan menyediakan data sampel 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 Anda. 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 data berhasil ditambahkan ke database dengan membuka bagian Firestore di project Firebase Anda 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 untuk menggunakan 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 Project Overview, lalu pilih Project settings.
   3. Di kartu "Aplikasi Anda", pilih aplikasi web Anda.
   4. Di bagian "Penyiapan dan konfigurasi SDK", pilih opsi Config.
   5. Salin cuplikan. Kode ini 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 Anda, 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.

Kompas adalah aplikasi Next.js yang menggunakan Komponen Server React, 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 siap untuk melanjutkan, klik tombol beranda (di pojok kanan atas).

6. Pelajari AI generatif dengan Genkit

Sekarang Anda siap memanfaatkan kecanggihan AI generatif di 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 trace 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-nilai penting seperti project ID, kunci API aplikasi 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 Project Overview, lalu pilih Project settings.
   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 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. Umumnya, 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 musim 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, mulai 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 apa pun yang Anda pahami, atau biarkan sebagai string kosong.
4. Klik Run.
5. Coba beberapa nilai berbeda. Model bahasa besar sangat 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 dari 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 sampel:

      {
          "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 diuraikan dan diintegrasikan ke dalam aplikasi Anda. Genkit secara otomatis memvalidasi output terhadap skema untuk memastikan integritas data.

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

Keuntungan utama dari skema output

• Integrasi yang disederhanakan: Gabungkan data terstruktur dengan mudah ke dalam elemen UI aplikasi Anda.
• 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.

Menggunakan input multimodal

Bayangkan aplikasi Anda menyarankan tujuan liburan yang dipersonalisasi berdasarkan gambar yang menurut pengguna menginspirasi. Genkit, yang dikombinasikan dengan model generatif multimodal, memungkinkan 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. Berinteraksilah 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 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. Dengan kueri input, model ini akan menemukan entri dalam database dengan vektor penyematan yang serupa, yang menunjukkan keterkaitan semantik.

Memahami cara kerja proses pengambilan

1. Menyematkan kueri: Input pengguna Anda (misalnya, "makan malam romantis di Paris") diteruskan melalui model penyematan, yang menghasilkan vektor kueri.
2. Embedding database: Idealnya, Anda telah memproses terlebih dahulu database tujuan, membuat vektor embedding untuk setiap entri.
3. Penghitungan kemiripan: Vektor kueri dibandingkan dengan setiap vektor penyematan 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 menggabungkan mekanisme pengambilan ini ke dalam aplikasi, Anda memanfaatkan model Gemini untuk menghasilkan saran yang tidak hanya kreatif, tetapi juga berakar kuat dalam set data tertentu. 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 kecanggihan penelusuran kemiripan vektor pada penyematan ini, Anda harus membuat indeks Firestore. Indeks ini memungkinkan pengambilan tempat yang efisien berdasarkan kesamaan vektor embedding dengan kueri tertentu.

1. Di terminal, 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 retriever

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

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

3. Anda juga dapat memberikan Opsi. Misalnya, berikut cara menentukan jumlah dokumen yang harus ditampilkan oleh pengambil:

   {
       "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 perintah individual yang mampu menangani teks, JSON, dan gambar, sehingga menghasilkan tujuan liburan dan konten menarik lainnya bagi pengguna. Anda juga telah menerapkan perintah yang mengambil tujuan yang relevan dari database Firestore. Sekarang, saatnya mengatur komponen ini ke dalam alur retrieval augmented generation (RAG) yang kohesif.

Bagian ini memperkenalkan konsep Genkit penting yang disebut alur. 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 prompt telah diperluas untuk menerima input tambahan, khususnya data aktivitas yang bersumber dari retriever.
2. Di UI Developer Genkit, lihat alur Genkit dalam file genkit-functions/src/lib/itineraryFlow.ts.
   Tips: Untuk menyederhanakan proses debug, pertimbangkan untuk memecah alur panjang menjadi langkah-langkah yang lebih kecil dan dapat dikelola.
3. Optimalkan alur dengan mengintegrasikan langkah "deskripsi gambar":
   1. Cari komentar TODO: 2 (sekitar baris 70). Langkah ini adalah titik di mana Anda akan menyempurnakan 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. Perhatikan output yang dihasilkan, yang seharusnya menyertakan 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 dengan Firebase App Hosting

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

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 Get started > Connect to GitHub.
4. Pilih Akun GitHub dan Repositori Anda. Klik Next.
5. Di Setelan deployment > Direktori root, pertahankan nilai default.
6. Untuk Cabang aktif, pilih cabang utama dari repo GitHub Anda. Klik Next.
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 di 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" yang canggih yang menghasilkan rekomendasi liburan yang dipersonalisasi berdasarkan preferensi dan inspirasi pengguna, sekaligus mendasarkan saran pada data aplikasi Anda.

Sepanjang perjalanan ini, Anda telah memperoleh pengalaman langsung dengan pola-pola software engineering penting yang penting untuk membangun aplikasi AI generatif yang tangguh. Pola ini mencakup:

• Pengelolaan perintah: Mengatur dan mempertahankan perintah sebagai kode untuk kolaborasi dan kontrol versi yang lebih baik.
• Konten multimodal: Mengintegrasikan beragam 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: Menerapkan 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-konsep ini dan menerapkannya dalam ekosistem Firebase, Anda akan siap untuk memulai petualangan genAI Anda sendiri. Jelajahi kemungkinan yang 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
• Setiap lingkungan Node.js
• 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.
• Pelajari lebih dalam alur genAI dengan panggilan fungsi.