Membangun fitur AI generatif yang didukung oleh data Anda dengan Genkit

1. Sebelum memulai

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

Genkit dirancang untuk developer aplikasi, guna 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 membangun alat yang digunakan oleh jutaan developer di seluruh dunia.

Prasyarat

  • Memahami Firestore, Node.js, dan TypeScript.

Yang akan Anda pelajari

  • Cara membangun aplikasi yang lebih cerdas dengan kemampuan penelusuran kemiripan vektor lanjutan Firestore.
  • Cara menerapkan AI generatif secara praktis di aplikasi Anda menggunakan 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-lihat aktivitas di tujuan, dan membuat rencana perjalanan untuk liburan mereka.

Dalam codelab ini, Anda akan menerapkan dua fitur baru yang ditujukan untuk meningkatkan engagement 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 rencana perjalanan yang diisi otomatis untuk meningkatkan engagement.

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 telah disediakan untuk Anda. Tabel berikut berisi layanan yang akan Anda gunakan dan alasan penggunaannya.

Layanan

Alasan penggunaan

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

Firebase App Hosting

Anda dapat secara opsional menggunakan Firebase App Hosting baru yang disederhanakan untuk menayangkan aplikasi web Next.js dinamis (yang terhubung ke repositori 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 baru, download dan instal versi LTS terbarunya.

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 tidak ingin 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

load-firestore-data

Alat command line helper untuk mengisi data koleksi Firestore dengan cepat

*lainnya

Kode aplikasi web Next.js

Folder root menyertakan 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 panduan 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. Verifikasi bahwa Anda telah menginstal Firebase CLI dan menggunakan versi 13.6 atau yang lebih tinggi:
    firebase --version
  2. Jika Anda sudah menginstal Firebase CLI, tetapi bukan versi 13.6 atau yang lebih tinggi, update Firebase CLI:
    npm update -g firebase-tools
  3. Jika Anda belum menginstal Firebase CLI, instal 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 Anda, login ke Firebase:
    firebase login
    Jika terminal Anda menyatakan bahwa Anda telah login ke Firebase, Anda dapat langsung membuka bagian Set up your Firebase project di codelab ini.
  2. Di terminal, bergantung pada apakah Anda ingin Firebase mengumpulkan data, masukkan Y atau N. (opsi mana pun 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 Anda

Di bagian ini, Anda akan menyiapkan project Firebase dan mendaftarkan Aplikasi Web Firebase di project tersebut. 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 pada langkah sebelumnya.
  2. Klik tombol untuk membuat project baru, lalu masukkan nama project (misalnya, Compass Codelab).
  3. Klik Lanjutkan.
  4. Jika diminta, tinjau dan setujui persyaratan Firebase, lalu klik Continue.
  5. (Opsional) Aktifkan bantuan AI di Firebase console (disebut "Gemini di Firebase").
  6. Untuk codelab ini, Anda tidak memerlukan Google Analytics, jadi nonaktifkan opsi Google Analytics.
  7. Klik Buat project, tunggu hingga project Anda disediakan, lalu klik Lanjutkan.

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 merepresentasikan 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 secara opsional menyiapkan layanan hosting di langkah terakhir codelab ini.
    Mendaftarkan aplikasi web
  3. Klik Register app > Continue to console.

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

Mengupgrade paket harga Firebase Anda

Untuk menggunakan Genkit dan Vertex AI (serta 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 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 lebih lanjut harga Vertex AI.

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 menyatakan "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 root 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 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 data Firestore contoh, jalankan perintah berikut:
    cd load-firestore-data
npm ci
node index.js YOUR_PROJECT_ID
cd ..
  3. Pastikan data berhasil ditambahkan ke database Anda dengan membuka bagian Firestore di project Firebase Anda di Firebase console.Anda akan melihat skema data yang diimpor dan isinya 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 memanfaatkan layanannya, seperti database. Untuk melakukannya, Anda harus menambahkan konfigurasi Firebase ke codebase aplikasi Anda. Konfigurasi ini mencakup nilai penting seperti project ID, kunci API, dan ID aplikasi Anda, serta nilai lain yang memungkinkan aplikasi Anda berinteraksi dengan Firebase.

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

Melihat pratinjau aplikasi web di browser

  1. Di terminal, instal dependensi, lalu jalankan aplikasi web:
    npm install
npm run dev:next
  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.

Layar utama aplikasi Kompas

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

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

Menemukan layar perjalanan impian saya

Silakan pelajari. Saat Anda siap 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 Genkit dan Vertex AI Google Cloud sebagai penyedia untuk model generatif (Anda akan menggunakan Gemini).

Genkit dapat menyimpan status trace dan 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 Anda

Kita telah menghubungkan Genkit ke project Anda dengan mengedit src/lib/genkit/genkit.config.ts pada langkah sebelumnya.

Luncurkan UI Developer Genkit

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

Di terminal Anda, jalankan:

npm run dev:genkit

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 salah satu model yang didukung atau salah satu komponen AI lainnya, seperti prompt, retriever, dan flow Genkit.

Misalnya, coba minta Gemini untuk menyarankan tujuan 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.

Berinteraksi dengan model Gemini di UI Developer Genkit

Mengelola dialog konfirmasi

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, sehingga Anda dapat menulis, memelihara, dan mengontrol versinya bersama dengan kode aplikasi Anda.

Untuk menggunakan Dotprompt, mulailah dengan hello-world:

  1. Di editor kode, buka file prompts/1-hello-world.prompt.
  2. Di UI Developer Genkit, buka prompts/1-hello-world.
  3. Gunakan nama atau kode bahasa yang Anda ketahui, atau biarkan sebagai string kosong.
  4. Klik Run.Menggunakan Dotprompt untuk membuat ucapan dalam bahasa Swedia
  5. Coba beberapa nilai yang berbeda. Model bahasa besar (LLM) dapat memahami perintah yang disingkat, salah eja, atau tidak lengkap dalam kueri sederhana seperti ini.

Memperkaya output Anda dengan data terstruktur

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

Mempelajari skema output

Anda juga dapat menentukan skema output panggilan LLM.

  1. Di editor kode, periksa file perintah:
    1. Buka file prompts/2-simple-itinerary.prompt.
    2. Periksa skema input dan output yang ditentukan.
  2. Berinteraksi dengan UI:
    1. Di UI Developer Genkit, buka bagian prompts/2-simple-itinerary.
    2. Berikan input dengan mengisi kolom place dan interests dengan data sampel:
      {
    "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: Gabungkan data terstruktur dengan mudah ke elemen UI aplikasi Anda.
  • Validasi data: Memastikan akurasi dan konsistensi output yang dihasilkan.
  • Penanganan error: Terapkan 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.

Memanfaatkan input multimodal

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

  1. Di editor kode, periksa file perintah:
    1. Buka file prompts/imgDescription.prompt.
    2. Perhatikan penyertaan {{media url=this}}, yang merupakan elemen sintaksis Handlebars yang memfasilitasi penyertaan gambar ke dalam perintah Anda.
  2. Berinteraksi dengan UI:
    1. Di UI Developer Genkit, buka perintah prompts/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. Menerapkan pengambilan dengan penelusuran kemiripan vektor

Meskipun pembuatan konten kreatif dengan model AI sangat mengesankan, aplikasi praktis sering kali memerlukan penyesuaian 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 merujuk pada 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 kesamaan vektor

  • Vektor: Vektor adalah representasi numerik titik data, yang sering digunakan untuk memodelkan informasi kompleks seperti teks atau gambar. Setiap dimensi dalam vektor sesuai dengan fitur data tertentu.
  • Model Embedding: Model AI khusus ini mengubah data input, seperti teks, menjadi vektor berdimensi tinggi. Aspek yang menarik adalah bahwa input serupa dipetakan ke vektor yang berdekatan satu sama lain dalam ruang berdimensi tinggi ini.
  • Penelusuran Kesamaan Vektor: Teknik ini memanfaatkan kedekatan vektor embedding untuk mengidentifikasi titik data yang relevan. Dengan kueri input, model ini menemukan entri dalam database dengan vektor embedding 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, sehingga menghasilkan vektor kueri.
  2. Embedding database: Idealnya, Anda telah memproses database tujuan, membuat vektor embedding untuk setiap entri.
  3. Perhitungan kemiripan: Vektor kueri dibandingkan dengan setiap vektor embedding dalam database menggunakan metrik kemiripan (misalnya, kesamaan kosinus).
  4. Pengambilan: Entri yang paling mirip dari database, berdasarkan kedekatannya dengan vektor kueri, diambil sebagai saran yang relevan.

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

Mengaktifkan penelusuran kemiripan vektor di Firestore

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

Untuk memanfaatkan kecanggihan penelusuran kesamaan vektor pada embedding ini, Anda harus membuat indeks Firestore. Indeks ini memungkinkan pengambilan tempat yang efisien berdasarkan kemiripan vektor embeddingnya dengan kueri tertentu.

  1. Buat indeks, pastikan untuk mengganti YOUR_PROJECT_ID dengan ID project Anda.
    gcloud firestore indexes composite create --project=YOUR_PROJECT_ID --collection-group=places --query-scope=COLLECTION --field-config field-path=embedding,vector-config='{"dimension":"768","flat": "{}"}'
  2. Di UI Developer Genkit, buka retrievers/placesRetriever.
  3. Klik Run. Amati objek yang di-scaffold dengan teks placeholder, yang menunjukkan tempat Anda akan menerapkan logika pengambil.
  4. Di editor kode, buka file src/lib/genkit/placesRetriever.ts.
  5. Scroll ke bawah dan ganti placeholder placesRetriever dengan yang berikut ini:
    export const placesRetriever = defineFirestoreRetriever(ai, {
  name: 'placesRetriever',
  firestore,
  collection: 'places',
  contentField: 'knownFor',
  vectorField: 'embedding',
  embedder: vertexAI.embedder('text-embedding-005', {outputDimensionality: 768}),
  distanceMeasure: 'COSINE',
});

Menguji retriever

  1. Di UI Developer Genkit, buka pengambil retrievers/placesRetriever.
  2. Berikan Kueri berikut:
    {
    "content": [
        {
            "text": "UNESCO"
        }
    ]
}
  3. Anda juga dapat memberikan Opsi. Misalnya, berikut cara menentukan jumlah dokumen yang harus ditampilkan oleh retriever:
    {
    "limit": 4
}
  4. Klik Run.

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

8. Retrieval-augmented generation (RAG) dengan Genkit

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

Bagian ini memperkenalkan konsep Genkit penting yang disebut flow. Flow adalah fungsi yang memiliki definisi jenis yang jelas dan dapat di-streaming 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 rencana perjalanan:
    1. Buka file 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 src/lib/genkit/itineraryFlow.ts.
    Tips: Untuk menyederhanakan proses debug, pertimbangkan untuk memecah alur yang panjang menjadi langkah-langkah yang lebih kecil dan mudah dikelola.
  3. Sempurnakan alur dengan mengintegrasikan langkah "deskripsi gambar":
    1. Cari komentar TODO: 2 (di sekitar baris 81). Ini menandai tempat Anda akan meningkatkan alur.
    2. Ganti placeholder imgDescription yang kosong dengan output yang dihasilkan oleh panggilan perintah imgDescription.
  4. Uji alurnya:
    1. Buka flows/itineraryFlow.
    2. Gunakan input berikut untuk menguji keberhasilan eksekusi itineraryFlow dengan langkah yang baru saja Anda tambahkan:
      {
    "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 harus menyertakan deskripsi gambar ke dalam saran rencana perjalanan.
  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 berikut 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 Anda dengan Firebase App Hosting

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

  1. Lakukan commit pada 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 Deployment setting > Root directory, gunakan nilai default.
  6. Untuk Live branch, pilih cabang main dari repositori 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 pada 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 App Hosting di Firebase console.

Memberikan izin ke akun layanan Anda

Agar backend Node.js Anda 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 mengirim perubahan ke cabang utama repositori GitHub, Firebase App Hosting akan otomatis membangun ulang dan men-deploy ulang aplikasi Anda, sehingga pengguna selalu mendapatkan pengalaman versi terbaru.

10. Kesimpulan

Selamat, Anda telah menyelesaikan codelab yang komprehensif ini.

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

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

  • Pengelolaan perintah: Mengatur dan mempertahankan 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 dalam 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 yang dihasilkan AI.
  • Retrieval Augmented Generation (RAG): Menggabungkan teknik pengambilan dengan AI generatif untuk output yang akurat dan relevan secara kontekstual.
  • Pengukuran Alur: Membangun 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 perluas batas kemampuan yang dapat dicapai dengan AI generatif.

Menjelajahi opsi deployment alternatif

Genkit menawarkan berbagai opsi deployment yang sesuai dengan kebutuhan spesifik Anda, termasuk:

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