Bangun 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 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 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 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 engagement 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 mulai cepat 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 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 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, 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 Anda, login ke Google Cloud:

   gcloud auth login
   

4. Siapkan project Firebase

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 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! Anda kini 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.

Aktifkan Cloud Firestore

1. Buka Build > Firestore Database menggunakan panel navigasi kiri.
2. Klik Buat database.
3. Biarkan Database ID ditetapkan 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.

Mengaktifkan 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 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 menyebabkan 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
   

4. Berikan izin ke akun layanan 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"
   

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 Anda, 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 Anda:

   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 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 aplikasi, dan ID aplikasi, serta nilai lain yang memungkinkan aplikasi 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 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 Anda, buka URL Hosting yang dihosting secara lokal untuk melihat aplikasi web. Misalnya, dalam sebagian besar 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 mengeksplorasi. 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 penting seperti project ID, kunci API aplikasi, dan ID aplikasi, serta nilai lain yang memungkinkan aplikasi 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 Anda 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, alur Genkit, retriever, 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 Anda, 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 liburan. Perhatikan bagaimana 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, sebuah 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 yang berbeda. Model bahasa besar sangat mahir dalam memahami perintah yang disingkat, salah eja, atau tidak lengkap dalam kueri sederhana seperti ini.

Meningkatkan kualitas output dengan data terstruktur

Selain menghasilkan teks biasa, Genkit memungkinkan Anda menyusun output untuk presentasi dan integrasi yang lebih baik 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. Memeriksa skema input dan output yang ditentukan.
2. Berinteraksilah 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: Terapkan 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 Anda 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. 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 kesamaan 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 bahwa {i>input<i} yang serupa dipetakan ke vektor yang berdekatan satu sama lain dalam ruang berdimensi tinggi ini.
• Penelusuran Kemiripan Vektor: Teknik ini memanfaatkan kedekatan embedding vektor 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 sebelumnya database tujuan, yang membuat vektor penyematan 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 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 di codelab ini, Anda telah 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 yang efisien berdasarkan kesamaan vektor embedding 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 scaffolded dengan teks placeholder, yang menunjukkan tempat Anda akan mengimplementasikan logika retriever.
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 yang melebihi kemiripan dengan menambahkan klausa where ke Options.

8. Pengambilan yang ditingkatkan (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 mengimplementasikan perintah yang mengambil tujuan yang relevan dari database Firestore. Sekarang, saatnya untuk mengorkestrasi komponen ini menjadi alur Retrieval-Augmented Generation (RAG) yang kohesif.

Bagian ini memperkenalkan konsep Genkit penting yang disebut flows. Flow adalah fungsi dengan jenis yang kuat dan dapat di-streaming yang dapat dipanggil baik secara lokal maupun 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 "deskripsi gambar" langkah:
   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 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 berikut 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. 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 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 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. Setelah selesai, aplikasi web Anda akan dapat diakses oleh pengguna.

Deployment ulang otomatis

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

10. Kesimpulan

Selamat, Anda telah menyelesaikan codelab komprehensif ini.

Anda telah berhasil memanfaatkan kecanggihan Firebase Genkit, Firestore, dan Vertex AI untuk membuat "flow" 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 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.
• Vector Store: 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 berbagai kemungkinan, buat aplikasi inovatif, dan terus perluas batasan 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

• Bereksperimenlah dengan perintah dan manfaatkan jendela konteks 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.