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. 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 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.
  • 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 build 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 ini didukung oleh AI generatif:

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

d54f2043af908fb.png

Layanan yang digunakan

Dalam codelab ini, Anda akan menggunakan banyak layanan dan fitur Firebase dan Cloud, dan sebagian besar kode awal untuk layanan dan fitur tersebut 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 Google Cloud

Anda menggunakan model dasar dari Vertex AI (seperti Gemini) untuk mendukung fitur AI.

Firebase App Hosting

Anda dapat menggunakan Firebase App Hosting yang disederhanakan secara opsional 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-rag65ef006167d600ab.png
  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 belum 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 helper untuk mengisi otomatis koleksi Firestore 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 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 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 mengintal Firebase CLI, instal sekarang:
    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, 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 konsol Firebase 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 Ikon dengan tanda kurung sudut buka, garis miring, dan tanda kurung sudut tutup, yang mewakili aplikasi web Web.Tombol Web di bagian atas Project Overview di Firebase console
  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.
    Mendaftarkan aplikasi web
  3. Klik Register app > Continue to konsol.

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

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Firebase Genkit dan Vertex AI (serta layanan cloud yang mendasarinya), project Firebase Anda harus menggunakan paket harga bayar sesuai pemakaian (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 sebesar$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 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 Create 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 ke publik tanpa menambahkan Aturan Keamanan untuk database Anda.
  6. Klik Buat.

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

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 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 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.Data contoh Kompas di Firebase console

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 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. 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, 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 sebagian besar kasus, URL-nya adalah http://localhost:3000/ atau yang serupa.

Layar utama aplikasi Kompas

Compass adalah aplikasi Next.js yang menggunakan Komponen Server React, dan ini adalah halaman berandanya.

Klik Temukan perjalanan impian saya. Anda dapat melihat bahwa saat ini halaman tersebut menampilkan beberapa data hardcode untuk beberapa tujuan tetap:

Layar Temukan perjalanan impian saya

Silakan jelajahi. Jika Anda sudah siap untuk melanjutkan, klik tombol beranda Rumah (di sudut kanan atas).

6. Mempelajari 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 trace dan status flow (yang memungkinkan Anda memeriksa hasil eksekusi flow 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 menggunakan 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 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 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

Sekarang Anda dapat menggunakan UI Developer Genkit untuk berinteraksi dengan model yang didukung atau komponen AI lainnya, seperti perintah, pengambil, 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. Hal ini juga berlaku untuk model yang tidak mendukung petunjuk sistem secara native.

Berinteraksi dengan model Gemini di UI Developer Genkit

Mengelola dialog konfirmasi

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 perintah sebagai kode, yang memungkinkan Anda menulis, mengelola, dan mengontrol versinya bersama dengan 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 yang Anda pahami, atau biarkan kosong.
  4. Klik Run.Menggunakan Dotprompt untuk membuat ucapan dalam bahasa Swedia
  5. Coba beberapa nilai yang berbeda. Model bahasa besar sangat 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 meningkatkan presentasi dan integrasi dalam UI aplikasi. Dengan menentukan skema, Anda dapat menginstruksikan LLM untuk menghasilkan data terstruktur yang sesuai 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.

Menggunakan Dotprompt untuk menentukan skema output

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, sehingga memastikan integritas data.

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

Keunggulan utama 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 Anda, 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 Anda 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 Handlebars 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 sangat mengesankan, aplikasi praktis sering kali memerlukan dasar 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 kecanggihan 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 Embed: 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 database tujuan terlebih dahulu, sehingga 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 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 utamanya, beserta 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 secara efisien berdasarkan kemiripan vektor penyematan tempat tersebut 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 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. 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 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 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 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. Temukan 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 alur:
    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 menyertakan deskripsi gambar ke dalam saran itinerari.
  5. Jika Anda mengalami 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 web Dream Your Vacation (http://localhost:3000/gemini).
  4. Lihat kode sumbernya (src/app/gemini/page.tsx) untuk contoh integrasi Next.js.

1e626124e09e04e9.pngb059decb53c249a1.pnge31f6acf87a98cb2.png19c0c9459d5e1601.png

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 Mulai > Hubungkan ke GitHub.
  4. Pilih Akun GitHub dan Repositori Anda. Klik Berikutnya.
  5. Di Setelan deployment > Direktori root, gunakan nilai default.
  6. Untuk Cabang aktif, pilih cabang utama 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 melacak progres di bagian Hosting Aplikasi Firebase console.

Memberikan izin ke akun layanan Anda

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

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 yang 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.

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.
  • Vector Store: 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 output yang relevan secara kontekstual dan akurat.
  • 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 berbagai kemungkinan, buat aplikasi inovatif, dan terus dorong batasan yang dapat dicapai dengan AI generatif.

Mempelajari opsi deployment alternatif

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

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

npx genkit init

Langkah berikutnya