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

1. Sebelum memulai

Dalam codelab ini, Anda akan belajar menggunakan Firebase Genkit, yang merupakan framework open source untuk mengintegrasikan AI generatif ke dalam aplikasi Anda. Anda dapat menggunakan Genkit dengan berbagai keterampilan dan alat pengembangan aplikasi yang sudah Anda kenal, seperti Firestore.

Prasyarat

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

Yang akan Anda pelajari

• Pelajari cara baru untuk membangun solusi dengan Firestore menggunakan penelusuran kemiripan vektor.
• Kenali AI generatif dan praktikkan pengembangan aplikasi "sehari-hari" menggunakan Genkit.
• Siapkan solusi Anda untuk integrasi dan deployment.

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 yang disebut Kompas. Aplikasi ini adalah aplikasi perencanaan liburan. Pengguna dapat memilih tujuan, melihat aktivitas di tujuan, dan membuat itinerari untuk perjalanan mereka.

Aplikasi perlu meningkatkan interaksi dengan halaman beranda aplikasi. Jadi dalam codelab ini, Anda akan menerapkan dua ide yang mengandalkan AI generatif (atau genAI):

• 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. Clone 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 error izin, baca dokumentasi npm atau gunakan opsi penginstalan lain.

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, 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 Anda, login ke Google Cloud:

   gcloud auth login
   

4. Menyiapkan 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.
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 Continue.
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
3. Klik Register app > Next > Next > Continue to console.
   Anda dapat melewati semua langkah yang terkait dengan "hosting" dalam alur Aplikasi Web karena Anda akan secara opsional menyiapkan layanan hosting nanti dalam codelab ini.

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.

Perhatikan juga bahwa dengan mengaktifkan penagihan di project Firebase, Anda akan dikenai biaya untuk panggilan yang dilakukan Genkit ke Gemini API. Pelajari lebih lanjut harga untuk Vertex AI.

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 Firestore menggunakan panel navigasi sebelah kiri.
2. Klik Create database > Start in test mode > Next.
3. Pilih lokasi Cloud Firestore pilihan Anda (atau biarkan sebagai default).
4. Klik Enable.

Aktifkan Vertex AI

1. Di terminal, tautkan gcloud CLI ke project Firebase Anda:

   gcloud config set project YOUR_PROJECT_ID
   

2. Aktifkan layanan Vertex AI:

   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.

Menyiapkan Firebase CLI untuk dijalankan terhadap project Firebase

Di terminal Anda, beri tahu CLI untuk menggunakan project Firebase Anda dengan menjalankan perintah berikut:

firebase use YOUR_PROJECT_ID

Memuat data Firestore

Codebase codelab ini sudah memiliki beberapa data contoh yang dihasilkan untuk Anda.

1. Untuk mengimpor data ke instance Firestore Anda, jalankan perintah ini di terminal Anda:

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

2. Di Firebase console, buka Firestore dalam project Firebase Anda. Anda akan melihat skema yang diimpor.

Menghubungkan aplikasi web ke project Firebase

Codebase aplikasi web Anda perlu mengetahui project Firebase yang harus digunakan untuk layanannya, seperti database. Anda dapat melakukannya dengan menambahkan konfigurasi Firebase ke codebase aplikasi.

1. Dapatkan konfigurasi Firebase Anda:
   1. Di Firebase console, buka Project settings dalam project Firebase Anda.
   2. Scroll ke bawah ke bagian Your apps, lalu pilih aplikasi web yang terdaftar.
   3. Di panel SDK setup and configuration, hanya salin fragmen const firebaseConfig = {...}.
2. Tambahkan konfigurasi Firebase ke codebase aplikasi web Anda:
   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.

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.

Halaman akan dimuat:

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 mengeksplorasi. Jika Anda siap untuk melanjutkan, klik tombol beranda (di pojok kanan atas).

6. Mulai menggunakan Firebase Genkit

Sekarang Anda siap untuk melakukan langkah besar dalam genAI. Di bagian codelab ini, Anda akan menerapkan fitur yang menyarankan tujuan berdasarkan inspirasi yang diberikan oleh pengguna.

Untuk melakukannya, Anda akan menggunakan Firebase Genkit yang dipasangkan dengan Vertex AI Google Cloud sebagai penyedia untuk model generatif (Gemini). Dan Anda akan menggunakan Firebase sebagai penyimpanan status alur dan trace (menggunakan Firestore). Anda juga dapat menggunakan Firebase untuk men-deploy kode Genkit menggunakan Firebase App Hosting.

Genkit memiliki "UI developer" agar Anda dapat menggunakan alat ini secara visual dan lebih mudah digunakan.

1. Booting UI Developer Genkit dengan menjalankan perintah ini di jendela terminal baru:

   cd genkit-functions
   npx genkit start
   

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

Mengintegrasikan model Gemini

Firebase Genkit menyediakan plugin Dotprompt dan format teks untuk membantu Anda menulis dan mengatur perintah AI generatif.

Dotprompt didesain berdasarkan premis bahwa prompt adalah kode. Anda akan menulis dan mengelola perintah dalam file berformat khusus yang disebut file dotprompt, melacak perubahan menggunakan sistem kontrol versi yang sama dengan yang digunakan untuk kode, dan men-deploy-nya bersama dengan kode yang memanggil model AI generatif.

Untuk menggunakan Dotprompt, mulailah dengan hello-world:

1. Di editor kode, buka file genkit-functions/prompts/1-hello-world.prompt.
   Anda akan melihat bahwa ada skema output dan input.
2. Buka dotprompt/1-hello-world di UI Firebase Genkit.
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 mampu memahami perintah yang disingkat, salah eja, atau tidak lengkap dalam kueri sederhana seperti ini.

Menentukan skema JSON

Namun, bagaimana jika Anda tidak ingin hanya menampilkan teks di UI aplikasi? Anda mungkin ingin menempatkan beberapa gaya yang menarik di sekitar teks yang dihasilkan.

Dengan Genkit, Anda dapat menentukan skema yang diinginkan untuk di-output, dan Genkit akan menangani sisanya. Lihat perintah berikutnya:

1. Di editor kode, buka file genkit-functions/prompts/2-simple-itinerary.prompt.
   Anda akan melihat bahwa ada skema output dan input.
2. Buka dotprompt/2-simple-itinerary di UI Firebase Genkit.
3. Isi kolom input tempat dan minat:

   {
       "place": "paris",
       "interests": [
           "diner"
       ]
   }
   

4. Klik Run.

Cukup dengan menentukan skema, Anda telah memberi instruksi kepada LLM apa yang perlu dihasilkannya. Genkit akan otomatis memvalidasi output dan bahkan dapat dikonfigurasi untuk mencoba lagi membuat ulang atau memulihkan output jika skema tidak cocok.

Input multimodal

Bagaimana jika Anda ingin aplikasi menulis tujuan liburan yang dipersonalisasi dan ideal berdasarkan gambar inspirasi yang diberikan oleh pengguna? Anda bisa melakukannya dengan Genkit plus model generatif multimodal.

1. Di editor kode, buka file genkit-functions/prompts/imgDescription.prompt.
   Perhatikan sintaksis handlebar {{media url=this}}.
2. Buka dotprompt/imgDescription di UI Firebase Genkit.
3. Gunakan gambar thumbnail dari Wikipedia di kolom input imageUrls:

   {
       "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" ]
   }
   

4. Klik Run.

7. Menerapkan pengambilan

Semua generasi AI ini sangat bagus, tetapi ada masalah: Anda memiliki database tujuan (tempat dan aktivitas), dan ingin model Gemini hanya menggunakan database tujuan tersebut untuk menghasilkan output-nya. Jadi, Anda perlu memastikan bahwa semua jawaban yang diberikan ditautkan ke data dalam database.

Saat Anda perlu mengambil kueri tidak terstruktur dan menemukan konten yang relevan, salah satu teknik yang paling efektif adalah penelusuran kesamaan vektor pada embeddings yang dihasilkan.

• Vektor hanyalah susunan angka. Setiap angka dalam vektor adalah nilainya sepanjang dimensi. Jadi, vektor dengan dua dimensi dapat dipetakan pada grafik.
• Model embedding adalah jenis model AI yang mengambil input seperti teks arbitrer dan memetakannya pada grafik. Selain itu, lokasi pada grafik yang memetakannya dianggap penting – input yang mirip satu sama lain akan berakhir berdekatan satu sama lain.

Penelusuran kemiripan vektor di Firestore

Di Firestore, Anda memiliki daftar tempat dan setiap tempat memiliki kolom teks berisi tempat yang paling terkenal.

Anda akan membuat kolom vektor bernama embedding untuk setiap tempat, menggunakan data dari kolom knownFor:

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:

   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. Buka placesRetriever di UI Firebase Genkit, lalu pilih Run.
   Hasilnya adalah objek scaffold dengan teks TODO. Anda perlu mengimplementasikan retriever di langkah berikutnya.
4. Di editor kode, buka file genkit-functions/src/lib/placesRetriever.ts.
5. 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',
   });
   

Sekarang, lakukan penelusuran uji:

1. Buka placesRetriever di UI Firebase Genkit.
2. Berikan Kueri berikut:

   {
       "content": [
           {
               "text": "new orleans"
           }
       ]
   }
   

3. Jika mau, ubah beberapa Opsi, seperti batas.
4. Klik Run.

Anda dapat melakukan pemfilteran tambahan pada data yang tidak memiliki kemiripan dengan menambahkan klausa where ke Opsi.

8. Pengambilan yang Diperkaya (RAG)

Di aplikasi, Anda memiliki beberapa perintah yang mengambil teks, JSON, dan/atau gambar untuk membuat tujuan liburan dan hal menarik lainnya bagi pengguna.

Anda bahkan memiliki prompt yang menampilkan tujuan relevan yang ada di database (Firestore).

Saatnya menyatukan mereka ke dalam alur Retrieval-Augmented Generation (RAG) pertama Anda:

1. Di editor kode, buka file genkit-functions/prompts/itineraryGen.prompt.
2. Amati bagaimana perintah itinerari Anda yang sebelumnya sederhana berevolusi untuk menerima lebih banyak input, termasuk activities yang ditampilkan oleh retriever.
3. Di editor kode, buka file genkit-functions/src/lib/itineraryFlow.ts. File ini berisi fitur Firebase Genkit yang disebut flows.
   
   • Alur adalah fungsi dengan beberapa karakteristik tambahan: memiliki jenis yang kuat, dapat di-streaming, dapat dipanggil secara lokal dan jarak jauh, dan sepenuhnya dapat diamati. Genkit menyediakan alat CLI dan UI Developer untuk menangani alur (berjalan, proses debug, dll.).
   • Untuk membantu proses debug, alur panjang harus dibagi menjadi beberapa langkah.
4. Temukan TODO: 2 di sekitar baris 70. Ini adalah contoh cara menambahkan langkah ke alur yang ada. Di sini, Anda akan mengganti imgDescription kosong dengan hasil dari panggilan buat panggilan perintah imgDescription.
5. Buka itineraryFlow di UI Firebase Genkit.
6. Gunakan input berikut untuk menguji keberhasilan eksekusi itineraryFlow dengan langkah yang baru ditambahkan:

   {
       "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" ]
   }
   

7. Klik Run.
8. 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

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

9. Men-deploy aplikasi Anda

Dan sekarang, satu langkah terakhir – deploy aplikasi web Anda!

Untuk itu, Anda dapat menggunakan Firebase App Hosting, solusi hosting web berbasis framework yang memudahkan deployment aplikasi Next.js dan Angular ke backend tanpa server sesederhana commit, push, dan selesai.

1. Commit perubahan Anda ke GitHub dan push.
2. Di Firebase console, buka App Hosting dalam project Firebase Anda.
3. Klik Get started > Connect to GitHub.
4. Pilih GitHub account dan Repository. Klik Next.
5. Di Setelan deployment > Direktori root, pertahankan nilai default.
6. Untuk Live branch, pilih cabang main dari repo GitHub Anda. Klik Next.
7. Masukkan ID untuk backend Anda (misalnya, compass).
8. Klik Finish and Deploy.

Perlu waktu beberapa menit sampai deployment baru Anda siap. Anda dapat memeriksa status deployment di bagian App Hosting di Firebase console.

Mulai saat ini, setiap kali Anda mendorong perubahan ke repo GitHub, Firebase App Hosting akan otomatis membangun dan men-deploy aplikasi Anda.

10. Kesimpulan

Selamat! Anda telah mencapai banyak hal dalam codelab ini.

Dengan menggunakan Firebase Genkit, Firestore, dan Vertex AI, Anda membuat "alur" untuk liburan khusus yang direkomendasikan berdasarkan preferensi dan inspirasi pengguna serta didasarkan pada data aplikasi.

Anda juga mempelajari beberapa pola software engineering penting yang diperlukan saat membangun aplikasi genAI:

• Pengelolaan perintah
• Konten multimodal
• Skema input/output
• Penyimpanan vektor
• Pengambilan data
• Pengambilan yang Diperkaya (RAG)
• Instrumentasi "Flow"

Perlu diperhatikan bahwa Firebase Genkit dilengkapi dengan beberapa opsi deployment yang tidak dijelaskan dalam codelab ini:

• Firebase Cloud Functions
• Cloud Run
• Next.js
• Semua lingkungan Node.js

Cukup pilih salah satu yang terbaik 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.